@charset "utf-8";

/* Home */
.home-bg { background-color: #6dc6d6; }
.title-area .logo-kiwoogo { width: 9.26rem; height: 3rem; background: url(../images/home/logo_kiwoogo.png) no-repeat 50% 50%; background-size: 100% auto; }
.title-area .tit { margin-top: .8rem; color: #fff; font-size: 1.8rem; font-weight: 700; }
.title-area .stit { margin-top: 1rem; color: #fff; font-size: 1.6rem; }
.title-area .desc { margin-top: 2rem; color: #181949; font-size: 1.4rem; }

.home-visual { position: relative; height: 21.3rem; bottom: -5rem; }
.home-visual::after { content:''; position: absolute; right: 0; top: 10.33rem; width: 8.3rem; height: 7.5rem; background: url(../images/home/money_bg.png) no-repeat 50% 50%; background-size: 100% auto; }
.home-visual .tip-txt { display: inline-block; position: relative; padding: .5rem .6rem; border-radius: .3rem; background-color: #c2e6ec; color: #333; font-size: 1.2rem; line-height: 1em; }
.home-visual .tip-txt::after { content:''; position: absolute; right: -.2rem; top: .9rem; width: .2rem; height: .26rem; background: url(../images/home/tip_arrow.png) no-repeat 50% 50%; background-size: 100% auto; }
.home-visual .tip-txt.pos1 { position: absolute; right: 10.93rem; top: 9rem; animation: tiptxt1 4s ease-in Alternate; }
    @keyframes tiptxt1 {
        0% { opacity: 0; }
        90% { opacity: 0; } 
        100% { opacity: 1; } 
    } 
.home-visual .tip-txt.pos2 { position: absolute; right: 10.93rem; top: 12rem; animation: tiptxt2 4s ease-in Alternate; }
    @keyframes tiptxt2 {
        0% { opacity: 0; }
        80% { opacity: 0; } 
        90% { opacity: 1; } 
    } 
.home-visual .tip-txt.pos3 { position: absolute; right: 10.93rem; top: 15.06rem; animation: tiptxt3 4s ease-in Alternate; }
    @keyframes tiptxt3 {
        0% { opacity: 0; }
        70% { opacity: 0; } 
        80% { opacity: 1; } 
    } 
.home-visual .ani { position: absolute; }
.home-visual .ani.quest { right: 3.9rem; top: 4.06rem; width: 1.93rem; height: 2.8rem; background: url(../images/home/quest.png) no-repeat 50% 50%; background-size: 100% auto; 
    animation: aniquest 4s ease-in Alternate; }
    @keyframes aniquest {
        0% { top: 0; opacity: 0; }
        60% { top: 0; opacity: 0; }
        70% { top: 4.06rem; opacity: 1; } 
    } 

/* 동전들 */
.home-visual .ani.money.s1 { right: 1.16rem; top: 14.9rem; width: 4.83rem; height: 1.53rem; background: url(../images/home/money-s1.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 1;
    animation: moneys1 4s ease-in Alternate; }
    @keyframes moneys1 {
        0% { top: 7rem; opacity: 0; }
        5% { top: 14.9rem; opacity: 1; } 
    }    
.home-visual .ani.money.s2 { right: 1rem; top: 14.2rem; width: 4.83rem; height: 1.53rem; background: url(../images/home/money-s2.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 2;
    animation: moneys2 4s ease-in Alternate; animation-delay: .1s; }
    @keyframes moneys2 {
        0% { top: 7rem; opacity: 0; }
        5% { top: 7rem; opacity: 0; }
        10% { top: 14.2rem; opacity: 1; } 
    }     
.home-visual .ani.money.s3 { right: 1.23rem; top: 13.6rem; width: 4.83rem; height: 1.53rem; background: url(../images/home/money-s3.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 3; 
    animation: moneys3 4s ease-in Alternate; animation-delay: .2s; }
    @keyframes moneys3 {
        0% { top: 6rem; opacity: 0; }
        10% { top: 6rem; opacity: 0; }
        15% { top: 13.6rem; opacity: 1; } 
    }  
.home-visual .ani.money.s4 { right: 3.7rem; top: 11.63rem; width: 4.83rem; height: 1.56rem; background: url(../images/home/money-s4.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 7;
    animation: moneys4 4s ease-in Alternate; }
    @keyframes moneys4 {
        0% { top: 6rem; opacity: 0; }
        15% { top: 6rem; opacity: 0; }
        20% { top: 11.63rem; opacity: 1; } 
    }      
.home-visual .ani.money.s5 { right: 3.66rem; top: 10.96rem; width: 4.83rem; height: 1.56rem; background: url(../images/home/money-s5.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 8; 
    animation: moneys5 4s ease-in Alternate; animation-delay: .1s; }
    @keyframes moneys5 {
        0% { top: 5rem; opacity: 0; }
        20% { top: 5rem; opacity: 0; }
        25% { top: 10.96rem; opacity: 1; } 
    }     
.home-visual .ani.money.s6 { right: 3.5rem; top: 10.2rem; width: 4.83rem; height: 1.56rem; background: url(../images/home/money-s6.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 9; 
    animation: moneys6 4s ease-in Alternate; animation-delay: .2s; }
    @keyframes moneys6 {
        0% { top: 5rem; opacity: 0; }
        25% { top: 5rem; opacity: 0; }
        30% { top: 10.2rem; opacity: 1; } 
    }  
.home-visual .ani.money.s7 { right: .33rem; top: 9.62rem; width: 4.83rem; height: 1.53rem; background: url(../images/home/money-s7.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 4; 
    animation: moneys7 4s ease-in Alternate; }
    @keyframes moneys7 {
        0% { top: 4rem; opacity: 0; }
        30% { top: 4rem; opacity: 0; }
        35% { top: 9.62rem; opacity: 1; } 
    }       
.home-visual .ani.money.s8 { right: .3rem; top: 8.92rem; width: 4.83rem; height: 1.53rem; background: url(../images/home/money-s8.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 5; 
    animation: moneys8 4s ease-in Alternate; animation-delay: .1s; }
    @keyframes moneys8 {
        0% { top: 4rem; opacity: 0; }
        35% { top: 4rem; opacity: 0; }
        40% { top: 8.92rem; opacity: 1; } 
    }     
.home-visual .ani.money.s9 { right: .6rem; top: 8.3rem; width: 4.83rem; height: 1.53rem; background: url(../images/home/money-s9.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 6; 
    animation: moneys9 4s ease-in Alternate; animation-delay: .2s; }
    @keyframes moneys9 {
        0% { top: 4rem; opacity: 0; }
        40% { top: 4rem; opacity: 0; }
        45% { top: 8.3rem; opacity: 1; } 
    }  
.home-visual .ani.money-big { left: 24.5rem; top: 12.46rem; width: 7.33rem; height: 6.13rem; background: url(../images/home/money.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 10; 
    animation: moneybig 4s linear Alternate; }
    @keyframes moneybig {
        0% { left: 20rem; opacity: 0; }
        45% { left: 20rem; opacity: 0; }
        60% { left: 24.5rem; opacity: 1; }
    }
    @media (max-width: 280px) { 
        .home-visual .ani.money-big { left: 15rem; } 
        @keyframes moneybig {
            0% { left: 20rem; opacity: 0; }
            45% { left: 20rem; opacity: 0; }
            60% { left: 24.5rem; opacity: 1; }
        }      
    }   
    @media (min-width: 281px) and (max-width: 320px) { 
        .home-visual .ani.money-big { left: 19rem; } 
        @keyframes moneybig {
            0% { left: 20rem; opacity: 0; }
            45% { left: 20rem; opacity: 0; }
            60% { left: 24.5rem; opacity: 1; }
        }        
    }
    @media (min-width: 380px) and (max-width: 414px) { 
        .home-visual .ani.money-big { left: 28.5rem; } 
        @keyframes moneybig {
            0% { left: 20rem; opacity: 0; }
            45% { left: 20rem; opacity: 0; }
            60% { left: 24.5rem; opacity: 1; }
        }        
    }     

.bx-options .header.home { height: 2rem; border-bottom: 0; }

.home-slide-tit { position: relative; padding: 1.3rem 0 1.4rem; border-radius: .8rem .8rem 0 0; color: #333; font-size: 1.6rem; line-height: 1.3; }
.home-slide-tit .st1 { font-size: 1.8rem; font-weight: 500; }
.home-slide-tit .st2 { color: #181949; font-size: 1.6rem; font-weight: 500; }
.home-slide-tit::after { content:''; position: absolute; right: 0.53rem; /*right: 1.53rem;*/ top: .5rem; width: 5.1rem; height: 5.6rem; background: url(../images/home/img_port.png) no-repeat 50% 50%; background-size: 100% auto; }

.link-home-go { display: flex; justify-content: space-between; position: relative; padding-right: 1.3rem; color: #666 !important; font-size: 1.4rem; }
.link-home-go em { color: #cc6a93; font-size: 1.2rem; }
.link-home-go::after { content:''; position: absolute; right: 0; top: .5rem; width: .56rem; height: .93rem; background: url(../images/home/arrow_pink.png) no-repeat 50% 50%; background-size: 100% auto; }

.home-slide-tit2 { padding: 3rem 1.4rem 1.6rem; color: #333; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.home-slide-pd { padding: 0 1.4rem 3rem; }
.home-slide-pd2 { padding: 0 0 3rem 0; }

.mcont { position: relative; height: 13rem; margin-left: 1.4rem; padding-left: 15rem; padding-right: 1.4rem; }
.mcont::before { content:''; position: absolute; left: 0; top: 0; }
.mcont.etf::before { width: 12.5rem; height: 12.16rem; background: url(../images/home/img_etf.png) no-repeat 50% 50%; background-size: 100% auto; }
.mcont.simple::before { width: 12rem; height: 12rem; background: url(../images/home/img_simple.png) no-repeat 50% 50%; background-size: 100% auto; }
.mcont .tit { padding-top: .5rem; color: #333; font-size: 1.4rem; font-weight: 500; }
.mcont .stit { padding-top: 1rem; color: #666; font-size: 1.4rem; }

.foot-menu { display: flex; flex-wrap: wrap; padding: 3.1rem 1.4rem 1rem; }
.foot-menu a { flex: 0 1 25%; position: relative; margin-bottom: 1.9rem; padding-top: 3.6rem; color: #666; font-size: 1.2rem; text-align: center; }
.foot-menu a::before { content:''; position: absolute; top: 0; left: 50%; margin-left: -1.3rem; }
.foot-menu a.m1::before { width: 2.83rem; height: 2.6rem; background: url(../images/home/menu01.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m2::before { width: 2.8rem; height: 2.43rem; background: url(../images/home/menu02.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m3::before { width: 2.53rem; height: 2.73rem; background: url(../images/home/menu03.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m4::before { width: 2.83rem; height: 2.33rem; background: url(../images/home/menu04.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m5::before { width: 2.6rem; height: 2.76rem; background: url(../images/home/menu05.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m6::before { width: 2.73rem; height: 2.6rem; background: url(../images/home/menu06.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m7::before { top: .3rem; width: 2.76rem; height: 1.9rem; background: url(../images/home/menu07.png) no-repeat 50% 50%; background-size: 100% auto; }
.foot-menu a.m8::before { width: 2.56rem; height: 2.56rem; background: url(../images/home/menu08.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 오늘 */
.invest-box { margin-top: 1.6rem; padding: 0 1rem; border-radius: .5rem; background-color: #f7f7fa; }
.invest-box .row ~ .row { border-top: 1px solid #ddd; }
.invest-box .row { display: flex; justify-content: space-between; padding: 1.4rem 0;}
.invest-box .row .tit-area .tit { color: #333; font-size: 1.4rem; }
.invest-box .row .tit-area .stit { margin-top: .2rem; color: #999; font-size: 1rem; line-height: 1.2; }
.invest-box .row .balance { text-align: right; }
.invest-box .row .balance .btn-plus { width: 1.4rem; height: 1.4rem; margin-right: .2rem; vertical-align: -2px; background: url(../images/home/btn_plus.png) no-repeat 50% 50%; background-size: 100% auto; }
.invest-box .row .balance.no a.arrow { display: inline-block; position: relative; margin-top: .5rem; padding-right: 1.1rem; color: #333; font-size: 1.2rem; }
.invest-box .row .balance.no a.arrow::after { content:''; position: absolute; top: .5rem; right: 0; width: .53rem; height: .86rem; background: url(../images/home/arrow_gray.png) no-repeat 50% 50%; background-size: 100% auto; }
.invest-box .row .balance.use a.arrow { display: inline-block; position: relative; padding-right: 1.2rem; }
.invest-box .row .balance.use a.arrow::after { content:''; position: absolute; top: 15px; right: 0; width: .53rem; height: .86rem; background: url(../images/home/arrow_gray.png) no-repeat 50% 50%; background-size: 100% auto; }
.invest-box .row .balance.use a.arrow span:first-child { margin-right: .5rem; color: #212266; font-size: 1.2rem; }
.invest-box .row .balance.use a.arrow strong { color: #333; font-family: var(--font-family-number); font-size: 1.6rem; font-weight: 500; }
.invest-box .row .balance.use a.arrow span:last-child { color: #000; font-family: var(--font-family-number); font-size: 1.2rem;}
.invest-box .row .balance.use .fc-up { color: #e22d72 !important; }
.invest-box .row .balance.use .fc-down { color: #6083e8 !important; }

.logo-kwg { display: inline-block; width: 4.86rem; height: 1.6rem; margin-right: .5rem; vertical-align: middle; background: url(../images/home/logo_kiwoogo_sm.png) no-repeat 50% 50%; background-size: 100% auto; }
.panel-tit-wrap { display: flex; width: 100%; padding-bottom: 1.4rem; border-bottom: 1px solid #e9e9eb; }
.panel-tit-wrap dt { color: #333; font-size: 1.4rem; font-weight: 500; }
.panel-tit-wrap dd { margin-left: .5rem; color: #212266; font-size: 1.4rem; }

.panel-wrap { display: flex; justify-content: center; align-items: center; }
.panel-area { display: flex; justify-content: center; align-items: center; position: relative; width: 29.5rem; height: 16.5rem; margin-top: 1.4rem; }
.panel-area .panel { display: flex; justify-content: center; align-items: flex-end; width: 26.2rem; height: 13.26rem; background: url(../images/home/panel.png) no-repeat 50% 50%; background-size: 100% auto; }
.panel-area .panel .needle { width: 1rem; height: 8.06rem; background: url(../images/home/panel_need.png) no-repeat 50% 50%; background-size: 100% auto; }
    @keyframes needle {
        from { transform: rotate(90deg); }
        to { transform: rotate(-90deg); }
    }    
.panel-area .num { position: absolute; color: #666; font-family: var(--font-family-number); font-weight: 500; font-size: 1rem; }
.panel-area .num.st1 { top: -5px; text-align: center; }
.panel-area .num.st2 { top: 138px; left: 0; }
.panel-area .num.st3 { top: 138px; right: 0; }
.panel-area .txt { position: absolute; font-size: 1rem; }
.panel-area .txt.blue { top: 150px; left: 13px; color: #6083e8; }
.panel-area .txt.red { top: 150px; right: 14px; color: #e22d72; }
.panel-txt { display: flex; flex-direction: column; justify-content: center; margin-top: .8rem; text-align: center; }
.panel-txt .title { height: 2rem; margin: 0 auto; padding: 0 2.4rem; border-radius: .3rem; background-color: #696a8b; color: #fff; font-size: 1.2rem; line-height: 2rem; }
.panel-txt .title strong { font-family: var(--font-family-number); font-weight: 500; }
.panel-txt .desc { margin-top: .4rem; color: #bbb; font-size: 1rem; }
.panel-hst-box { display: flex; margin-top: 1.6rem; padding: 1rem 0; border-radius: .5rem; background-color: #f7f7fa; color: #666; font-size: 1.2rem; text-align: center; }
.panel-hst-box > div { flex: 1 33.3333%; padding: 0 1.5rem; }
.panel-hst-box > div ~ div { border-left: 1px solid #e9e9eb; }
.panel-hst-box > div > .box { height: 2rem; margin-top: .5rem; border-radius: .3rem; background-color: #fff; line-height: 2rem; }
.panel-hst-box > div > .box strong { font-family: var(--font-family-number); font-weight: 500; }
.panel-hst-box > div > .box.red { color: #e22d72; }
.panel-hst-box > div > .box.black { color: #000; }
.panel-hst-box > div > .box.blue { color: #6083e8; }

.kakao-allimi { display: inline-block; position: relative; width: 100%; height: 3.6rem; padding-left: 2.4rem; border-radius: .5rem; background-color: #212266; color: #fff; font-size: 1.2rem; line-height: 3.6rem; }
.kakao-allimi:link { color: #fff; }
.kakao-allimi::before { content:''; position: absolute; top: 1.3rem; left: .8rem; width: 1rem; height: 1rem; background: url(../images/icon_info_03.png) no-repeat 50% 50%; background-size: 100% auto; }
.kakao-allimi::after { content:''; position: absolute; top: 1.36rem; right: 1rem; width: .53rem; height: .86rem; background: url(../images/home/arrow_white.png) no-repeat 50% 50%; background-size: 100% auto; }

.stock-box { margin-top: 1.6rem; padding-bottom: .8rem; border-radius: .5rem; border: 1px solid #ddd; }
.stock-box .top-area { display: flex; justify-content: space-between; padding: .93rem 1rem 1rem; }
.stock-box .top-area .cntry { height: 1.4rem; margin-top: .3rem; padding: 0 .5rem; border-radius: .3rem; background-color: #181949; color: #fff; font-size: 1rem; line-height: 1.4rem; }
.stock-box .top-area .date { color: #999; font-size: 1.2rem; }
.stock-box .top-area .date strong { font-family: var(--font-family-number); }
.stock-box .stock-cont { display: flex; justify-content: space-between; }
.stock-box .stock-cont > div { flex: 1 33.3333%; font-family: var(--font-family-number); text-align: center; }
.stock-box .stock-cont > div > div { height: 4.4rem; }
.stock-box .stock-cont > div > div.line { border-left: 1px solid #e9e9eb; }
.stock-box .stock-cont .number { color: #000; font-size: 1.86rem; }
.stock-box .stock-cont .perct { margin-top: .4rem; font-size: 1.2rem; }
.stock-box .stock-cont .perct span ~ span { margin-left: .9rem; }
.stock-box .stock-cont .perct.up { color: #e22d72; }
.stock-box .stock-cont .perct.down { color: #1c4fde; }
.stock-box .stock-cont .kinds { color: #666; font-size: 1.2rem; letter-spacing: 0; }

.strate-wrap { display: flex; justify-content: space-between; margin-top: 1.6rem; }
.strate-wrap .box { flex: 1 33.3333%; position: relative; height: 10.7rem; /*padding: 6.2rem 1rem 0;*/ padding: 4.2rem 1rem 0; border-radius: .5rem; background-color: #f7f7fa; }
.strate-wrap .box ~ .box { margin-left: .6rem; }
.strate-wrap .box .title { color: #181949; font-size: 1.4rem; }
.strate-wrap .box .date { margin-top: .2rem; color: #999; font-family: var(--font-family-number); font-size: 1.2rem; }
.strate-wrap .box::before { content:''; position: absolute; top: 1rem; left: 1rem; width: 2rem; height: 2rem; }
.strate-wrap .box.letter::before { background: url(../images/home/strate_01.png) no-repeat 50% 50%; background-size: 100% auto; } 
.strate-wrap .box.day::before { background: url(../images/home/strate_02.png) no-repeat 50% 50%; background-size: 100% auto; } 
.strate-wrap .box.week::before { background: url(../images/home/strate_03.png) no-repeat 50% 50%; background-size: 100% auto; } 

.banner { position: relative; height: 9rem; padding: 1.5rem 1.5rem 1rem; color: #fff; font-size: 1.6rem; font-weight: 500; line-height: 1.5; z-index: 1; }
.banner.type1 { background-color: #9fa9e8; }
.banner.type1::after { content:''; position: absolute; top: 1.1rem; right: 3.6rem; width: 7.3rem; height: 7.06rem; background: url(../images/home/banner_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.banner.type2 { background-color: #6dc98d; }
.banner.type2::after { content:''; position: absolute; top: 1.1rem; right: 2.3rem; width: 9.96rem; height: 6.86rem; background: url(../images/home/banner_02.png) no-repeat 50% 50%; background-size: 100% auto; }

/* swiper slide bullet */
.slide-control-button-group { position: relative; }
.slide-control-button-group .swiper-pagination-bullets { margin: -2.3rem 0 0 1.5rem; }
.slide-control-button-group .swiper-pagination-bullets .swiper-pagination-bullet { width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%; background-color: #fff; }
.slide-control-button-group .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 1.5rem; border-radius: .25rem; background-color: #fff; }
.slide-control-button-group .slide-button-pause, .slide-control-button-group .slide-button-start { position: absolute; right: 0; }

.slide-btn { position: relative; }
.slide-btn .page-wrap { position: absolute; left: 1.5rem; bottom: 1rem; }
.slide-btn .page-wrap .page-btn { width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%; background-color: rgba(255,255,255,.5); }
.slide-btn .page-wrap .page-btn.active { width: 1.5rem; border-radius: .25rem; background-color: rgba(255,255,255,1); }

.swiper-slide.video { width: 12.7rem !important; }
.video-wrap { width: 12.7rem; }
.video-wrap img { height: 7.1rem; }
.video-wrap .txt { margin-top: .5rem; color: #333; font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }

.swiper-slide.kwg { width: 20rem !important; }
.kiwoogo { position: relative; width: 20rem; height: 18rem; padding: 2rem 1.4rem; border-radius: .5rem; }
.kiwoogo::after { content:''; position: absolute; bottom: 1.4rem; right: 1.4rem; }
.kiwoogo .txt { color: #333; font-size: 1.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.kiwoogo.st1 { background-color: #f6f8fe; }
.kiwoogo.st1::after { width: 7.96rem; height: 7.96rem; background: url(../images/home/kwg_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.kiwoogo.st2 { background-color: #fcf5f8; }
.kiwoogo.st2::after { width: 4.76rem; height: 8rem; background: url(../images/home/kwg_02.png) no-repeat 50% 50%; background-size: 100% auto; }
.kiwoogo.st3 { background-color: #e6f5ea; }
.kiwoogo.st3::after { width: 7.9rem; height: 5.96rem; background: url(../images/home/kwg_03.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 키우GO 알리미서비스 */
.phone-area { height: 4.13rem; padding: 0 1rem; border-radius: .5rem; background-color: #f7f7fa; }
.phone-area dl { display: flex; justify-content: space-between; color: #181949; font-size: 1.4rem; font-weight: 500; line-height: 4rem; }
.phone-area dl dd { font-family: var(--font-family-number); letter-spacing: 0; }

.link-info { position: relative; padding-right: 1.1rem; font-size: 1.2rem; }
.link-info:link { color: #36acc1; }
.link-info::after { content: ''; position: absolute; right: 0; top: .4rem; width: .53rem; height: .86rem; background: url(../images/home/arrow_mint.png) no-repeat 50% 50%; background-size: 100% auto; }

.allimi-switch .btn-switch { display: flex; justify-content: space-between; width: 100%; }
.allimi-switch .btn-switch > span { color: #333; font-size: 1.4rem; font-weight: 500; }
.service-switch { margin-top: 1rem; }
.service-switch .btn-switch { display: flex; justify-content: space-between; width: 100%; padding: 1rem 0; border-bottom: 1px solid #ddd; }
.service-switch .btn-switch:last-child { border-bottom: 0; }
.service-switch .btn-switch > span { color: #333; font-size: 1.2rem; line-height: 2rem; }
.service-switch .btn-switch + .btn-switch { margin: 0; }
.service-switch .btn-switch .icon-checked { margin-right: .2rem; }

.date-wrap { display: flex; justify-content: space-between; margin-top: .8rem; }
.date-wrap .input-area { width: 47%; }
.date-wrap .input-area input[type="text"], .date-wrap .input-area input[type="number"] { padding-left: 3rem; padding-right: 1rem; color: #333; font-family: var(--font-family-number); text-align: right; }
.date-wrap .input-area .btn-calendar { position: absolute; left: 0; margin: 0 .8rem; }
.date-wrap .dash { width: 6%; padding-top: .7rem; text-align: center; }

/* 로보자산관리 메인 */
.robo-visual { width: 100%; height: 31.76rem; padding: 2.9rem 1.4rem; background: url(../images/robo/robo_visual.png) no-repeat 50% 50%; background-size: 100% auto; }
.robo-visual .title { color: #333; font-size: 2rem; font-weight: 700; line-height: 1.5; }
.robo-visual .desc { margin-top: 1.4rem; color: #333; font-size: 1.2rem; }
.robo-visual.join { background: url(../images/robo/robo_visual_join.png) no-repeat 50% 50%; background-size: 100% auto; }
.robo-visual.blc { background: url(../images/robo/robo_visual_blc.png) no-repeat 50% 50%; background-size: 100% auto; }
.robo-visual.simple { background: url(../images/simple/visual_simple.png) no-repeat 50% 50%; background-size: 100% auto; }
.robo-visual.academy { background: url(../images/academy/visual_academy.png) no-repeat 50% 50%; background-size: 100% auto; }
    @media (min-width: 321px) and (max-width: 360px) { 
        .robo-visual { height: 28rem; }
    }
    @media (min-width: 280px) and (max-width: 320px) { 
        .robo-visual { height: 25rem; }
    }

.design-menu { display: flex; justify-content: space-between; padding: 2.6rem 0 3rem; }
.design-menu span { flex: 1 33.3333%; height: 5.46rem; padding-top: 4rem; color: #666; font-size: 1.4rem; text-align: center; }
.design-menu span ~ span { border-left: 1px solid #eee; }
.design-menu .menu { position: relative; }
.design-menu .menu::before { content:''; position: absolute; top: 0; left: 50%; width: 4rem; height: 3.4rem; margin-left: -2rem; }
.design-menu .menu.st1::before { background: url(../images/robo/design_menu01.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st2::before { background: url(../images/robo/design_menu02.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st3::before { background: url(../images/robo/design_menu03.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st4::before { background: url(../images/robo/design_menu04.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st5::before { background: url(../images/robo/design_menu05.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st6::before { width: 2.36rem; margin-left: -1.18rem; background: url(../images/robo/design_menu06.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st7::before { background: url(../images/robo/design_menu07.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st8::before { background: url(../images/robo/design_menu08.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st9::before { background: url(../images/robo/design_menu09.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st10::before { width: 3.43rem; margin-left: -1.715rem; background: url(../images/simple/design_menu01.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st11::before { background: url(../images/simple/design_menu02.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st12::before { width: 3.93rem; height: 3.33rem; background: url(../images/simple/design_menu03.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st13::before { width: 2.76rem; margin-left: -1.38rem; background: url(../images/academy/design_menu01.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st14::before { width: 3.4rem; margin-left: -1.7rem; background: url(../images/academy/design_menu02.png) no-repeat 50% 50%; background-size: 100% auto; } 
.design-menu .menu.st15::before { background: url(../images/academy/design_menu03.png) no-repeat 50% 50%; background-size: 100% auto; } 

.design-btn { display: flex; position: fixed; bottom: 3rem; width: 100%; height: 4rem; padding: 0 1.4rem; z-index: 90; }
.design-btn button { width: 100%; height: 4rem; border-radius: .5rem; background-color: #36acc1; box-shadow: 0 5px 8px 2px rgba(51, 51, 51,.24); }
.design-btn button ~ button { margin-left: 1.4rem; }
.design-btn button span { display: inline-block; color: #fff; font-size: 1.4rem; font-weight: 700; line-height: 4rem; }

.ani-title-wrap { padding: 4rem 0 3rem; }
.ani-title-wrap .tit { color: #333; font-size: 1.86rem; }
.ani-title-wrap .desc { margin-top: 1.3rem; color: #666; font-size: 1.2rem; }

.phone-wrap { display: flex; justify-content: center; padding-bottom: 3rem; }
.phone-wrap .phone { position: relative; width: 15.7rem; height: 29.5rem; background: url(../images/robo/phone.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 1; }
.phone-wrap .phone .cont-goal { position: absolute; top: 2.3rem; left: .7rem; width: 13.06rem; height: 23.4rem; border: 1px solid #ddd; background: url(../images/robo/phone_cont_goal.gif) no-repeat 50% 50%; background-size: 100% auto; }

.phone-wrap2 { display: flex; justify-content: center; padding-bottom: 2rem; }
.phone-wrap2 .phone { position: relative; width: 22.3rem; height: 27.6rem; background: url(../images/robo/phone2.png) no-repeat 50% 50%; background-size: 100% auto; }
.phone-wrap2 .phone .graph::after { content:''; position: absolute; top: 9.3rem; left: 4.5rem; width: 12.46rem; height: 12.46rem; background: url(../images/robo/ani_graph.gif) no-repeat 50% 50%; background-size: 100% auto; }
.phone-wrap2 .phone .graph span { position: absolute; top: 13rem; left: 6.5rem; width: 8.13rem; height: 5.26rem; }
.phone-wrap2 .phone .graph span strong { position: absolute; top: 1.1rem; left: 2.2rem; font-family: var(--font-family-number); color: #333; font-size: 1.6rem; font-weight: 700; }
.ani-btm-txt { padding-bottom: 4rem; color: #333; font-size: 1.2rem; }

/* 스크롤 */
.phone-wrap .phone .cont-scroll { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.16rem; height: 23.5rem; border: 1px solid #ddd; }
.phone-wrap .phone .cont-scroll img { position: absolute; bottom: 0; animation: aniscroll 7s linear infinite; }    
    @keyframes aniscroll {
        0% { top: 0rem; }
        20% { top: 0rem; }
        25% { top: -5rem; }
        30% { top: -10rem; }
        35% { top: -15rem; }
        40% { top: -20rem; }
        45% { top: -25rem; }
        50% { top: -30rem; }
        55% { top: -35rem; }
        60% { top: -40rem; }
        65% { top: -45rem; }
        70% { top: -50.2rem; }
        100% { top: -50.2rem; } 
    }
.phone-wrap .phone .cont-scroll2 { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.16rem; height: 23.5rem; border: 1px solid #ddd; }
.phone-wrap .phone .cont-scroll2 img { position: absolute; bottom: 0; animation: aniscroll2 7s linear infinite; }    
    @keyframes aniscroll2 {
        0% { top: 0rem; }
        20% { top: 0rem; }
        25% { top: -3rem; }
        30% { top: -6rem; }
        35% { top: -9rem; }
        40% { top: -12rem; }
        45% { top: -15rem; }
        50% { top: -18rem; }
        55% { top: -21rem; }
        60% { top: -24rem; }
        65% { top: -27rem; }
        70% { top: -30rem; }
        75% { top: -33rem; }
        80% { top: -37.8rem; }
        100% { top: -37.8rem; } 
    }
.phone-wrap .phone .cont-scroll3 { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.16rem; height: 23.5rem; border: 1px solid #ddd; }
.phone-wrap .phone .cont-scroll3 img { position: absolute; bottom: 0; animation: aniscroll3 7s linear infinite; }    
    @keyframes aniscroll3 {
        0% { top: 0rem; }
        20% { top: 0rem; }
        25% { top: -2rem; }
        30% { top: -4rem; }
        35% { top: -6rem; }
        40% { top: -8rem; }
        45% { top: -10rem; }
        50% { top: -12rem; }
        55% { top: -14rem; }
        60% { top: -16rem; }
        65% { top: -18rem; }
        70% { top: -19.2rem; }
        100% { top: -19.2rem; } 
    }
.phone-wrap .phone .cont-scroll4 { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.16rem; height: 23.5rem; border: 1px solid #ddd; }
.phone-wrap .phone .cont-scroll4 img { position: absolute; bottom: 0; animation: aniscroll4 7s linear infinite; }    
    @keyframes aniscroll4 {
        0% { top: 0rem; }
        30% { top: 0rem; }
        35% { top: -2rem; }
        40% { top: -4rem; }
        45% { top: -6rem; }
        50% { top: -8rem; }
        55% { top: -10rem; }
        60% { top: -12rem; }
        65% { top: -14.7rem; }
        100% { top: -14.7rem; } 
    }
.phone-wrap .phone .cont-diag { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.16rem; height: 23.5rem; border: 1px solid #ddd; 
    animation: anidiag 10s linear; z-index: 1; }
    @keyframes anidiag {
        0% { background-image: url(../images/robo/phone_cont_diag.png); background-size: 100% auto; }
        20% { background-image: url(../images/robo/phone_cont_diag.png); background-size: 100% auto; }
    }
.phone-wrap .phone .cont-scroll5 { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.16rem; height: 23.5rem; border: 1px solid #ddd; }
.phone-wrap .phone .cont-scroll5 img { position: absolute; top: 0; animation: aniscroll5 10s 5s linear infinite; }    
    @keyframes aniscroll5 {
        20% { top: 0rem; }
        25% { top: -4rem; }
        30% { top: -8rem; }
        35% { top: -12rem; }
        40% { top: -16rem; }
        45% { top: -20rem; }
        50% { top: -24rem; }
        55% { top: -28rem; }
        60% { top: -32rem; }
        65% { top: -36rem; }
        70% { top: -40rem; }
        75% { top: -43rem; }
        100% { top: -43rem; }
    }
.phone-wrap .phone .cont-auto { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.06rem; height: 23.43rem; border: 1px solid #ddd; background-image: url(../images/simple/phone_cont_01.gif); background-size: 100% auto; }

.simple-easy { position: relative; width: 100%; height: 34.66rem; background: url(../images/simple/bg_simple.png) no-repeat 50% 50%; background-size: 100% auto; }
    @media (min-width: 281px) and (max-width: 350px) { 
        .simple-easy { height: 30rem; }
    }
    @media (max-width: 280px) { 
        .simple-easy { height: 27rem; }
    }
.phone-wrap .phone .cont-fund { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.06rem; height: 23.43rem; border: 1px solid #ddd; background-image: url(../images/simple/phone_cont_02.gif); background-size: 100% auto; }

.video-cst { position: relative; width: 100%; height: 49.03rem; background: url(../images/robo/bg_video_cst.png) no-repeat 50% 50%; background-size: 100% auto; }
.video-cst .txt-btm { position: absolute; bottom: 4rem; width: calc(100% - 2.8rem); margin: 0 1.4rem; padding: 1.3rem; border-radius: .5rem; background-color: rgba(51,51,51,.85); color: #fff; font-size: 1.2rem; }
.video-cst .txt-btm p:first-child { padding-bottom: 1rem; color: rgba(255,255,255,.7); line-height: 1.4; }

.phone-wrap-join { display: flex; justify-content: center; padding-bottom: 3rem; }
.phone-wrap-join .phone { position: relative; width: 15.7rem; height: 29.5rem; background: url(../images/robo/phone.png) no-repeat 50% 50%; background-size: 100% auto; z-index: 1; }
.phone-wrap-join .phone .cont-join { position: absolute; top: 2.3rem; left: .7rem; width: 13.06rem; height: 23.43rem; border: 1px solid #ddd; background: url(../images/robo/phone_cont_join.gif?20250313) no-repeat 50% 50%; background-size: 100% auto; }

.list-link-page ol li { border-bottom: 1px solid #ddd; }
.list-link-page ol li a { padding: 1rem 1.5rem 1rem .5rem; color: #333; font-size: 1.2rem; }
.list-link-page ol li a::after { right: .5rem; top: 50%; margin-top: -.7rem; }

.phone-wrap .phone .cont-lesson { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.06rem; height: 23.33rem; border: 1px solid #ddd; background-image: url(../images/academy/phone_cont_01.gif); background-size: 100% auto; }
.phone-quiz { width: 21.83rem; height: 28rem; background: url(../images/academy/phone_quiz.png) no-repeat 50% 50%; background-size: 100% auto; }
.phone-wrap .phone .cont-case { position: absolute; top: 2.3rem; left: .8rem; overflow-y: auto; width: 13.06rem; height: 23.43rem; border: 1px solid #ddd; 
    background-image: url(../images/academy/phone_cont_02.gif); background-size: 100% auto; }

/* Home v2 */
.home-wrap .go-wrap img { width: 100%;}
.home-wrap .go-wrap .rel { position: relative; height:100%; background: #ebf6fb; }
.home-wrap .go-wrap .rel .main-bg { width: 100%; height:41rem; max-height: auto; background: url(../images/common/img-go-main_2.png) no-repeat 50% 0 #ECF7FB; background-size:100% 100%; }
.home-wrap .go-wrap .top-area h2 { width: 146px; margin-bottom: 24px; }
.home-wrap .go-wrap .rel .main-bg .top-area p { margin-top: 1.4rem; color: #333; font-size: 1.3rem; }
.home-wrap .go-wrap .rel .main-bg .top-area{ position: absolute; left: 14px; top: 10%; width: 60%; font-weight: 500 !important; }
.home-wrap .btn-bottom { position: absolute; left: 0; bottom:13%; overflow:hidden; display: block; width: 100%; }
.home-wrap .btn-bottom li { float: left; width: 50%; }
.home-wrap .btn-bottom li a{ display: block; overflow:hidden; border-radius:.5rem; box-shadow: 2px 2px 6px rgba(7, 7, 7, 0.12);}
.home-wrap .btn-bottom li:first-child {padding: 0 7px 0 14px;} 
.home-wrap .btn-bottom li:last-child {padding: 0 14px 0 7px;}