/* 1vw => 3.6px */
html{min-width: auto !important; overflow-x: hidden;}
.inner{padding: 0 9vw; width: 100%;}
.sec_title{font-size: 7vw; text-align: center; letter-spacing: -1.5px; line-height: normal; font-weight: bold; white-space: pre;}
.sec_small_title{font-weight: 500; font-size: 4.5vw; line-height: 1.5; letter-spacing: -.8px; text-align: center; color: #aaa; white-space: pre;}
.free_trial{width: 77vw; background-image: linear-gradient(to bottom, #ff5836, #d13a1b); border-radius: 34px; text-align: center; margin: 13vw auto 0; padding: 5vw 0; color: #fff; animation: trial_btn 4s forwards infinite ease-in-out;}
.free_trial a{font-size: 7vw; font-weight: 500; display: inline-block; color: inherit;}
.free_trial a::after{content: ''; display: inline-block; width: 5vw; height: 5vw; background: url('//img.x1.co.kr/x1/images/smartplus/arrow_icon.svg') no-repeat center; background-size: cover; margin-left: 3vw;}

.smart_plus{width: 100vw;}
/* smart_landing_1 */
.smart_plus .smart_landing_1{position: relative; padding-top: 24vw; padding-bottom: 21vw; background-color: #25264e; color: #fff; overflow: hidden;}
.smart_landing_1 h2{font-size: 9vw; font-weight: bold; line-height:1; color: inherit;}
.smart_landing_1 h2 span{display: block;}
.smart_landing_1 h2 span::after{content: ''; display: inline-block; width: 8vw; height: 8vw; background: url('//img.x1.co.kr/x1/images/smartplus/message_icon.svg') no-repeat center; background-size: cover; vertical-align: baseline; margin-left: 3vw;}
.smart_landing_1 h2 b.typing_txt{display: none;}
.smart_landing_1 h2 b.typing{height: 10vw; display: inline-block;}
.smart_landing_1 p{margin-top: 5vw; color: #d4d4d4; line-height: 1.5; font-size: 4.5vw; font-weight: bold; transform: translateY(100%); opacity: 0; transition: .5s; white-space: pre;}
.smart_landing_1 p.active{transform: translateY(0); opacity: 1;}
.smart_landing_1 .icon_area{width: 75vw; height: 75vw; margin: 14vw auto 0; position: relative;}
.smart_landing_1 .icon_area span{position: absolute; display: inline-block;}
.smart_landing_1 .icon_area span img{width: 100%; height: 100%; vertical-align: top;}
.smart_landing_1 .icon_area .kakao_icon{width: 61vw; height: 61vw; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); transition: .5s;}
.smart_landing_1 .icon_area .kakao_icon.active{transform: translate(-50%, -50%) scale(1); animation: kakao_icon 4s forwards infinite ease-in-out; animation-delay: 2s;}
@keyframes kakao_icon {
    10%{transform: translate(-50%, -50%) rotate(-5deg);}
    15%{transform: translate(-50%, -50%) rotate(0);}
    20%{transform: translate(-50%, -50%) rotate(-5deg);}
    25%{transform: translate(-50%, -50%) rotate(0);}
    100%{transform: translate(-50%, -50%) rotate(0);}
}
.smart_landing_1 .icon_area .smile_icon{width: 25vw; height: 25vw; right: 2vw; top: 2vw; transform: scale(0); transition: .5s; transition-delay: 1s;}
.smart_landing_1 .icon_area .smile_icon.active{transform: scale(1);}
.smart_landing_1 .icon_area .chart_icon{width: 20vw; height: 20vw; left: 2vw; bottom: 2vw; transform: scaleY(0); transform-origin: 0 100%; transition: .5s; transition-delay: 1s;}
.smart_landing_1 .icon_area .chart_icon.active{transform: scaleY(1);}
.smart_landing_1 .down_arr{width: 4vw; position: absolute; left: 50%; bottom: 8vw; transform: translateX(-50%); animation: down_arr 1s forwards infinite ease-in;}
.smart_landing_1 .down_arr img{width: 100%; display: block;}
.smart_landing_1 .down_arr img:nth-of-type(2){opacity: .5;}
@keyframes down_arr {
    0%{bottom: 8vw;}
    50%{bottom: 6.5vw;}
    100%{bottom: 8vw;}
}
/* smart_landing_2 */
.smart_plus .smart_landing_2{padding-top: 17vw; position: relative; overflow: hidden;}
.smart_plus .smart_landing_2 .money_icon{display: inline-block; position: absolute; background: url('//img.x1.co.kr/x1/images/smartplus/money_icon.png') no-repeat center; background-size: cover; animation: forwards infinite ease-in-out;}
.smart_plus .smart_landing_2 .money_icon:nth-of-type(1){width: 25vw; height: 25vw; left: -7vw; top: 100vw; animation-name: money1; animation-duration: 1.5s;}
.smart_plus .smart_landing_2 .money_icon:nth-of-type(2){width: 10vw; height: 10vw; right: 20vw; top: 20vw; animation-name: money2; animation-duration: 2s;}
.smart_plus .smart_landing_2 .money_icon:nth-of-type(3){width: 15vw; height: 15vw; right: -7vw; top: 65vw; animation-name: money3; animation-duration: 2s;}
@keyframes money1 { 0%{top: 100vw;} 50%{top: 95vw;} 100%{top: 100vw;} }
@keyframes money2 { 0%{top: 15vw;} 50%{top: 20vw;} 100%{top: 15vw;} }
@keyframes money3 { 0%{top: 68vw;} 50%{top: 65vw;} 100%{top: 68vw;} }
.smart_landing_2 .chatting_area{width: 100%;}
.smart_landing_2 .chatting_area.active figure{transform: scale(1);}
.chatting_area figure{position: relative; transform: scale(0); transition: .5s;}
.chatting_area figure:nth-of-type(odd){transform-origin: 0 100%;}
.chatting_area figure:nth-of-type(even){transform-origin: 100% 100%;}
.chatting_area figure img{width: 100%;}
.chatting_area figure figcaption{width: 100%; text-align: center; position: absolute; left: 0; top: 17%; font-size: 5vw; color: #fff; font-weight: 500;}
.chatting_area .chatting_tab1{width: 60vw; transition-delay: .3s;}
.chatting_area .chatting_tab1 figcaption::before{content: ''; display: inline-block; width: 9vw; height: 9vw; background: url('//img.x1.co.kr/x1/images/smartplus/chat_icon1.svg') no-repeat center; background-size: cover; vertical-align: middle; margin-right: 2vw;}
.chatting_area .chatting_tab2{width: 72vw; margin-left: 8vw; transition-delay: .6s;}
.chatting_area .chatting_tab2 figcaption::after{content: ''; display: inline-block; width: 9vw; height: 9vw; background: url('//img.x1.co.kr/x1/images/smartplus/chat_icon2.svg') no-repeat center; background-size: cover; vertical-align: middle; margin-left: 2vw;}
.chatting_area .chatting_tab3{width: 68vw; margin-left: -5vw; transition-delay: .9s;}
.chatting_area .chatting_tab3 figcaption::before{content: ''; display: inline-block; width: 9vw; height: 9vw; background: url('//img.x1.co.kr/x1/images/smartplus/chat_icon3.svg') no-repeat center; background-size: cover; vertical-align: middle; margin-right: 2vw;}
.chatting_area .chatting_tab4{width: 83vw; margin-left: 5vw; transition-delay: 1.2s;}
.chatting_area .chatting_tab4 figcaption::before{content: ''; display: inline-block; width: 9vw; height: 9vw; background: url('//img.x1.co.kr/x1/images/smartplus/chat_icon4.svg') no-repeat center; background-size: cover; vertical-align: middle; margin-right: 2vw;}
.smart_landing_2 h3{margin-top: 10vw; transform: translateY(100%); opacity: 0; transition: .5s;}
.smart_landing_2 h3.active{transform: translateY(0); opacity: 1;}
.smart_landing_2 p{margin-top: 3vw; transform: translateY(100%); opacity: 0; transition: .5s; transition-delay: .5s;}
.smart_landing_2 p.active{transform: translateY(0); opacity: 1;}
.smart_landing_2 .chatting_icon_area{position: relative; width: 80vw; height: 100vw; margin: 10vw auto 0;}
.smart_landing_2 .chatting_icon_area span{position: absolute; display: inline-block;}
.smart_landing_2 .chatting_icon_area span img{width: 100%; height: 100%;}
.smart_landing_2 .chatting_icon_area .chat_person{width: 100%; left: 47%; top: 0; transform: translateX(-50%); z-index: 1;}
.smart_landing_2 .chatting_icon_area .chat_graph1{width: 18vw; height: 18vw; right: 5vw; top: 27vw; animation: graph1 2s forwards infinite ease-in-out;}
@keyframes graph1 { 50%{top: 24vw;} }
.smart_landing_2 .chatting_icon_area .chat_graph2{width: 18vw; height: 18vw; left: 0; top: 43vw; animation: graph2 2s forwards infinite ease-in-out;}
@keyframes graph2 { 50%{top: 45vw;} }
/* smart_landing_3 */
.smart_plus .smart_landing_3{padding-top: 19vw; padding-bottom: 18vw; overflow: hidden;}
.smart_landing_3 h3{transform: translateY(100%); opacity: 0; transition: .5s;}
.smart_landing_3 h3.active{transform: translateY(0); opacity: 1;}
.smart_landing_3 .x1_mini_logo{display: block; margin: 0 auto; width: 25vw; margin-top: 10vw;}
.smart_landing_3 .x1_mini_logo img{width: 100%;}
.expert_icon_area{width: 100%; height: 120vw; margin: 0 auto; position: relative;}
.expert_icon_area > span{display: inline-block; position: absolute;}
.expert_icon_area > span img{width: 100%; height: 100%;}
.expert_icon_area .smart_phone_icon{width: 55vw; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.expert_icon_area .doodle_icon{width: 35vw; height: 35vw; left: -5vw; top: 5vw;}
.expert_icon_area .sunglasses_icon{width: 35vw; height: 35vw; right: 0; bottom: 0;}
.expert_icon_area .circle_tab_area{display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); animation: circle_all 5s forwards infinite ease-in-out;}
.expert_icon_area .circle_tab_area span{display: block; width: 35vw; height: 35vw; font-size: 5.8vw; color: #fff; font-weight: 500; letter-spacing: -1.5px; text-align: center; border-radius: 50%; position: relative; margin: 0 1.5vw; animation: 2s forwards infinite ease-in-out;}
.expert_icon_area .circle_tab_area span b{display: inline-block; width: 100%; line-height:1; font-weight: inherit; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.expert_icon_area .circle_tab_area .circle_tab1{background-image: linear-gradient(to bottom, #9273f9, #3a79f5); animation-name: circle1;}
.expert_icon_area .circle_tab_area .circle_tab2{background-image: linear-gradient(to bottom, #73def9, #3a79f5); animation-name: circle2; transform: translateY(-20%);}
.expert_icon_area .circle_tab_area .circle_tab3{background-image: linear-gradient(to bottom, #73adf9, #ab3af5); animation-name: circle1;}
@keyframes circle_all {
    50%{transform: translate(-30%, -50%);}
}
@keyframes circle1 {
    50%{transform: translateY(-20%);}
}
@keyframes circle2 {
    50%{transform: translateY(0);}
}
/* smart_landing_4 */
.smart_plus .smart_landing_4{padding-top: 19vw; padding-bottom: 19vw; background-color: #eff2f4; overflow: hidden;}
.smart_landing_4 h3{transform: translateY(100%); opacity: 0; transition: .5s;}
.smart_landing_4 h3.active{transform: translateY(0); opacity: 1;}
.smart_landing_4 .small_text{margin-top: 17vw; text-align: center; font-size: 5vw; font-weight: 500; display: block; color: #707070; transform: translateY(100%); opacity: 0; transition: .5s; transition-delay: .5s; line-height:1;}
.smart_landing_4 .small_text.active{transform: translateY(0); opacity: 1;}
.smart_landing_4 .education_slide{margin-top: 6.5vw; margin-left: 5vw; }
.smart_landing_4 .education_slide .edu_slide{transform: scale(0); width: 72vw !important; height: 83vw; background-color: #fff; padding: 6vw 4vw; position: relative; margin-right: 5.5vw; transition: .5s; transition-delay: 1s;}
.smart_landing_4 .education_slide.active .edu_slide{transform: scale(1);}
.smart_landing_4 .education_slide .edu_slide:last-child{margin-right: 0;}
.education_slide .edu_slide span{display: inline-block; background-color: #f8f9fa; width: 15.5vw; color: #bac1ca; font-weight: 500; font-size: 4.5vw; text-align: center; border-radius: 4vw; padding: 1vw; line-height:1;}
.education_slide .edu_slide p{margin: 4vw 0 0 4vw; font-size: 5vw; font-weight: 500; line-height:1.5;}
.education_slide .edu_slide p b{font-size: 8vw; font-weight: inherit;}
.education_slide .edu_slide .edu_img{position: absolute;}
.education_slide .edu_slide .edu_img.big{width: 64vw; height: 64vw; right: 0; bottom: 0;}
.education_slide .edu_slide .edu_img.small{width: 40vw; height: 34vw; right: 10vw; bottom: 15vw;}
.smart_landing_4 .education_slide .edu_slide:last-child .edu_img.small{width: 33vw;}
.education_slide .edu_slide .edu_img img{width: 100%; height: 100%;}
.slick-list{overflow: visible !important;}
/* slide_dots */
.slick-dots{margin-top: 18vw}
.slick-dots{position:relative; font-size:0; text-align:center}
.slick-dots li{display:inline-block; margin-left: 2.7vw}
.slick-dots li:first-child{margin-left:0}
.slick-dots li button{display:inline-block; width: 2.7vw; height: 2.7vw; border-radius: 50%; text-indent:-99999px; background-color: #ced4da; overflow:hidden; transition: all .2s linear;}
.slick-dots li.slick-active button{background-color: #5e5e5e; width: 11vw; height: 2.7vw; border-radius: 1.5vw;}
/* smart_landing_5 */
.smart_plus .smart_landing_5{padding-top: 19vw; padding-bottom: 4.5vw; overflow: hidden; background: url('//img.x1.co.kr/x1/images/smartplus/graph_bg.svg') no-repeat; background-position: 50% 75%; background-size: 100%; position: relative;}
.smart_landing_5 .landing_5_back{position: absolute; left: 0; bottom: 5vw; width: 100%; height: 100vw; background-color: #fff; transition: 1s; transition-delay: .5s;}
.smart_landing_5 .landing_5_back.active{left: 110%;}
.smart_landing_5 h3{transform: translateY(100%); opacity: 0; transition: .5s;}
.smart_landing_5 h3.active{transform: translateY(0); opacity: 1;}
.smart_landing_5 p{margin-top: 9vw; transform: translateY(100%); opacity: 0; transition: .5s; transition-delay: .5s;}
.smart_landing_5 p.active{transform: translateY(0); opacity: 1;}
.revenu_icon_area .heart_icon{width: 35vw; height: 35vw; right: -5vw; top: 0; animation: heart_icon 2s forwards infinite ease-in-out;}
@keyframes heart_icon {
    50%{transform: rotate(10deg);}
}
.revenu_icon_area .message_icon{width: 26vw; height: 26vw; left: 0; bottom: 3vw;}
.revenu_icon_area .revenu_text{z-index: 5; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height:1;}
.revenu_icon_area .revenu_text li{margin-bottom: 6vw; text-align: center; font-size: 6vw; transform: translateY(100%); transition: .5s; opacity: 0;}
.revenu_icon_area .revenu_text li:nth-of-type(1){transition-delay: .3s;}
.revenu_icon_area .revenu_text li:nth-of-type(2){transition-delay: .6s;}
.revenu_icon_area .revenu_text li:nth-of-type(3){transition-delay: .9s;}
.revenu_icon_area .revenu_text li:nth-of-type(4){transition-delay: 1.2s;}
.revenu_icon_area .revenu_text.active li{transform: translateY(0); opacity: 1;}
.revenu_icon_area .revenu_text li:last-child{margin-bottom: 0;}
.revenu_icon_area .revenu_text li b{display: block; font-size: 7.5vw;}
.revenu_icon_area .revenu_text li span{display: inline-block; letter-spacing: -1.5px; margin-top: 2vw; font-weight: 500;}
.revenu_icon_area .revenu_text li.gray{color: #707070; font-size: 5.5vw;}
.revenu_icon_area .revenu_text li.gray b{font-size: inherit;}
/* smart_landing_6 */
.smart_plus .smart_landing_6{padding-top: 19vw; padding-bottom: 9vw;}
.smart_landing_6 h3{transform: translateY(100%); opacity: 0; transition: .5s;}
.smart_landing_6 h3.active{transform: translateY(0); opacity: 1;}
.smart_landing_6 .b_text{font-size: 12vw; font-weight: bold; text-align: center; display: block; margin: 3.5vw auto 0; transform: translateY(100%); opacity: 0; transition: .5s; transition-delay: .5s; line-height:1;}
.smart_landing_6 .b_text.active{transform: translateY(0); opacity: 1;}
.smart_landing_6 .person_icon{width: 61vw; margin: 6vw auto 0; position: relative;}
.smart_landing_6 .person_icon .chatting_smile{width: 12vw; position: absolute; left: 12vw; top: 10vw; animation: chatting_smile 5s forwards infinite ease-in-out; transform-origin: 50% 100%;}
@keyframes chatting_smile {
    0%{transform: scale(0);}
    20%{transform: scale(1);}
    30%{transform: rotate(5deg);}
    40%{transform: rotate(-5deg);}
    50%{transform: rotate(5deg);}
    60%{transform: rotate(-5deg);}
    70%{transform: rotate(0);}
}
.smart_landing_6 .person_icon .chatting_smile img{width: 100%;}
.smart_landing_6 .person_icon img{width: 100%;}

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

:lang(ko) { font-family: "Noto Sans KR"; }

*{padding: 0; margin: 0; font-family: "Noto Sans KR";}
li {list-style: none; outline: none;}
a {text-decoration: none; color: inherit; outline: none;}
body * {box-sizing: border-box;}
img{vertical-align: top;}
img:focus {outline: none;}
button{border: none; outline: none;}
button:focus{outline:none;}
input:focus{outline:none;}
div:focus{outline:none;}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.fl{float: left;}
.fr{float: right;}
.tc{text-align: center;}
.tl{text-align: left;}
.tr{text-align: right;}