@charset "utf-8";

/* 레이아웃 */
.wrap_ai_avatar .ai_header {overflow:hidden;position:fixed;top:0;right:0;left:0;z-index:10;padding:14px 10px 0;height:44px;box-sizing:border-box;transition:background 0.2s ease-in-out;-weblit-transition:background 0.2s ease-in-out}
.wrap_ai_avatar .ai_header .logo {float:left;margin-left:5px;padding:4px 0}
.wrap_ai_avatar .ai_header .logo:before {display:block;width:77px;height:15px;background:url(//www.saraminimage.co.kr/sri/help/avatar/202102/m_logo_w.png) no-repeat;background-size:77px 15px;content:""}
.wrap_ai_avatar .ai_header .quick {display:none;overflow:hidden;float:right;padding-right:5px}
.wrap_ai_avatar .ai_header .quick li {display:inline-block;padding:0 2px}
.wrap_ai_avatar .ai_header .quick .link {display:block;padding:8px 0 7px;border-bottom:2px solid transparent;color:#fff;font-size:13px;letter-spacing:-1.5px}
.wrap_ai_avatar .ai_header .quick .on .link {border-color:#fff;color:#fff;font-weight:bold}
.wrap_ai_avatar .ai_header.type2 .logo:before {background-image:url(//www.saraminimage.co.kr/sri/help/avatar/202102/m_logo.png)}
.wrap_ai_avatar .ai_header.type2 .link {color:#444}
.wrap_ai_avatar .ai_header.type2 .on .link {border-color:#6364ed;color:#6364ed}
.wrap_ai_avatar .ai_content {overflow:hidden}
.wrap_ai_avatar .ai_footer {overflow:hidden;background-color:#3f4056}
.wrap_ai_avatar .ai_footer .copyright {overflow:hidden;padding-bottom:15px;color:#fff;font-size:11px;letter-spacing:-1px;line-height:22px;text-align:center}

/* 공통 */
.section_avatar {overflow:hidden;position:relative;padding-top:44px;width:100%;box-sizing:border-box;letter-spacing:-1px}
.section_avatar .btn_ai {display:block;margin:0 auto;background:url(//www.saraminimage.co.kr/sri/help/avatar/202102/m_btn_ai.png) no-repeat;background-size:210px 240px}
.section_avatar .desc_info {padding:32px 0;letter-spacing:-2px;text-align:center}
.section_avatar .desc_info .emph {color:#6364ed}
.section_avatar .desc_info .tit_ai {color:#333;font-size:31px;line-height:42px}
.section_avatar .desc_info .tit_ai .emph {display:block;font-size:33px;font-weight:bold}
.section_avatar .desc_info .txt_ai {padding:10px 0 20px;color:#666;font-size:13px;letter-spacing:-1px;line-height:21px}
.section_avatar .layer_info {display:none;position:fixed;top:50%;right:0;left:0;z-index:10;margin:-213px auto;padding:40px 0 0 32px;width:320px;height:486px;box-sizing:border-box;background:url(//www.saraminimage.co.kr/sri/help/avatar/m_bg_layer.png) no-repeat;background-size:320px 486px}
.section_avatar .layer_info .txt_layer {overflow:hidden;padding-top:54px;font-size:14px;letter-spacing:-1px;line-height:23px;text-align:left}
.section_avatar .layer_info .txt_layer .group {display:block;padding:6px 0;color:#fff}
.section_avatar .layer_info .btn_close {overflow:hidden;position:absolute;top:0;right:0;width:54px;height:50px}
.section_avatar .layer_info.show {display:block}

/* intro */
.intro_avatar {display:table;padding-top:0;height:90vh;max-height:540px;background:url(//www.saraminimage.co.kr/sri/help/avatar/202102/m_bg_intro.png) 50% 50% no-repeat;background-size:cover}
.intro_avatar .desc_intro {display:table-cell;position:relative;vertical-align:bottom}
.intro_avatar .desc_intro .img {position:absolute;bottom:0;left:50%;width:360px;transition:opacity 0.5s linear;transform:translateX(-50%);opacity:0}
.intro_avatar .desc_intro .img.on {opacity:1}
.intro_avatar .desc_intro .btn {overflow:hidden;position:absolute;bottom:143px;left:50%;width:20px;height:36px}
.intro_avatar .desc_intro .btn:disabled {opacity:0.4}
.intro_avatar .desc_intro .btn:before {position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%) rotate(45deg);content:""}
.intro_avatar .desc_intro .btn.prev {margin-left:-165px}
.intro_avatar .desc_intro .btn.prev:before {margin-left:7px;border-bottom:4px solid #fff;border-left:4px solid #fff}
.intro_avatar .desc_intro .btn.next {margin-left:145px}
.intro_avatar .desc_intro .btn.next:before {margin-left:-7px;border-top:4px solid #fff;border-right:4px solid #fff}
.intro_avatar .link_avatar {overflow:hidden;position:absolute;bottom:49px;left:50%;width:145px;height:32px;background:none;transform:translateX(-50%)}
.intro_avatar .scroll {position:absolute;right:0;bottom:5%;left:0;margin:0 auto;width:21px;height:15px;background:url(//www.saraminimage.co.kr/sri/help/avatar/202102/m_scroll.png) no-repeat;background-size:21px 15px;-webkit-animation:scrollIcon 1.2s infinite;animation:scrollIcon 1.2s infinite}

/* 간편하고 */
.simple_avatar {background:url(//www.saraminimage.co.kr/sri/help/avatar/m_bg_left.png) 0 73px no-repeat, url(//www.saraminimage.co.kr/sri/help/avatar/m_bg_right.png) 100% 70% no-repeat;background-size:134px auto,142px auto}
.simple_avatar .copy {margin:10px 0 20px}
.simple_avatar .inner {padding:0 540px 0 120px}
.simple_avatar .list_service {overflow:hidden;position:relative;padding:0 20px 62px;background-color:#fff}
.simple_avatar .list_service li {float:left;width:25%}
.simple_avatar .list_service .btn_service {display:block;position:relative;width:100%;height:48px;color:#666;font-size:14px;letter-spacing:-1px}
.simple_avatar .list_service .btn_service:after {position:absolute;right:3px;bottom:0;left:7px;height:2px;background-color:transparent;content:""}
.simple_avatar .list_service .txt_service {display:none;position:absolute;top:48px;right:0;left:0;padding:15px 26px;border-top:1px solid #d3d3d3;color:#666;font-size:15px;letter-spacing:-1px;line-height:23px}
.simple_avatar .list_service li:nth-child(3) .txt_service {padding-right:0;padding-left:25%;text-align:center}
.simple_avatar .list_service li:nth-child(4) .txt_service {text-align:right}
.simple_avatar .list_service .on .btn_service {color:#6364ed;font-size:16px;font-weight:bold}
.simple_avatar .list_service .on .btn_service:after {background-color:#6364ed}
.simple_avatar .list_service .on .txt_service {display:block}
.simple_avatar .view_service {position:relative;margin:0 auto;padding:56px 55px 0;width:320px;height:294px;box-sizing:border-box;background:url(//www.saraminimage.co.kr/sri/help/avatar/m_phone.png) no-repeat;background-size:320px 294px}
.simple_avatar .view_service .slide {overflow:hidden;position:relative;height:238px}
.simple_avatar .view_service .slide .img_service {position:absolute;top:0;left:210px;z-index:0;width:100%}

/* 똑똑하게 */
.smart_avatar .btn_layer {width:145px;height:36px;background-position:0 -50px}
.smart_avatar .layer_info .txt_layer {background:url(//www.saraminimage.co.kr/sri/help/avatar/m_tit_layer1.png) 0 5px no-repeat;background-size:226px 40px}

/* 추천하는 */
.recommend_avatar {background-color:#5268da}
.recommend_avatar .desc_info .tit_ai {color:#fff;text-align:center}
.recommend_avatar .desc_info .tit_ai b {color:#fff}
.recommend_avatar .desc_info .txt_ai {padding-top:20px;color:#fff}
.recommend_avatar .btn_layer {margin-bottom:22px;width:145px;height:36px;background-position:0 -100px}
.recommend_avatar .layer_info .txt_layer {background:url(//www.saraminimage.co.kr/sri/help/avatar/m_tit_layer2.png) no-repeat;background-size:250px 40px}

/* 바로가기, app 다운로드 */
.info_avatar {padding-top:0;background-color:#3f4056}
.info_avatar .box {overflow:hidden;padding:22px 15px 30px;box-sizing:border-box;color:#fff}
.info_avatar .box:first-of-type {border-bottom:1px solid #656678}
.info_avatar .box .tit_info {display:block;padding-bottom:13px;font-size:17px}
.info_avatar .box .tit_info:after {display:inline-block;margin:-2px 0 0 10px;width:36px;height:2px;vertical-align:middle;background-color:#fff;content:""}
.info_avatar .box .txt_info {float:left;width:55%;font-size:12px;line-height:19px}
.info_avatar .box .link_avatar {overflow:hidden;float:right;margin-top:2px;width:135px;height:36px;background-position:0 -150px}
.info_avatar .market {overflow:hidden;float:right;margin:-4px 4px 0 0}
.info_avatar .market .btn_ai {display:inline-block;margin-left:15px;width:40px;height:50px;vertical-align:top}
.info_avatar .market .android {background-position:0 -190px}
.info_avatar .market .ios {background-position:-40px -190px}


@keyframes scrollIcon {0% {transform:translate(0, 0)}
40% {transform:translate(0, 12px)}
100% {transform:translate(0, 0)}}

@keyframes BI {0% {transform:translate(0, 0) scale(0.8, 0.8) rotate(-50deg);opacity:0}
60% {opacity:1}
100% {transform:translate(0, 0) scale(1, 1) rotate(0deg)}}