@charset "utf-8";

.stit{text-align: center; font-size: 3.6rem;  margin: 6rem 0; font-family: 'GmarketSans' ,sans-serif; font-weight: 700;}

.stit2{text-align: left; font-size: 3rem; margin: 6rem 0; font-family: 'GmarketSans' ,sans-serif; font-weight: 500;}

@media all and (max-width:999px){
    .stit, .stit2{margin: 6rem 0 4rem}
    .stit{font-size: 3rem}
    .stit2{font-size: 2.4rem}
}
@media all and (max-width:640px){
    .stit{font-size: 2.6rem}
    .stit2{font-size: 2rem}
}

/* sVisual */
.intro1 #sVisual{padding-top: 18rem; padding-bottom: 10rem;}
#sVisual{overflow: hidden; display: flex; padding: 10rem 0; background-color: #f8f8f8;}
#sVisual .sv{height: 100%; position: relative; width: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column;  transition: .2s;}
#sVisual .sv:nth-child(1){border-right: 1px solid #ddd;}
#sVisual .sv .ss-inner{height: 100%; display: flex; flex-direction: column; justify-content: center;}
#sVisual .sv .txt{position: relative; z-index: 2; text-align: center;}
#sVisual .sv .txt h4{color: #233243; font-weight: 400; font-size: 2rem; position: relative; display: inline-block; margin-bottom: 50px;}
#sVisual .sv .txt h4:before{content: ''; display: block; position: absolute; z-index: -9; width: 100%; height: 19px; background-color: #ddedff; bottom: 0px;}
#sVisual .sv .txt h3{font-family: 'GmarketSans',sans-serif; font-size: 3.6rem; color: #222; line-height: 1.2em;}
#sVisual .sv .txt h3 span{font-weight: 500;}
#sVisual .sv .txt p{font-weight: 500; color: #2a3139;font-size: 2.4rem; font-family: 'GmarketSans', sans-serif; margin-top: 10px;}
#sVisual .sv .txt .btn_box{display: flex; margin-top: 40px; justify-content: center;}
#sVisual .sv .txt .btn_box a{font-size: 2rem; font-weight: 700; text-align: center; width: 218px; display: block; line-height: 1em; padding: 20px 0; border-radius: 30px; border-top-right-radius: 0; border: 2px solid #4488dd;}
#sVisual .sv .txt .btn_box a.btn1{ background-color: #4488dd;  color: #fff;}
#sVisual .sv .txt .btn_box a.btn2{color: #4488dd; border: 2px solid #4488dd; margin-left: 22px;}
#sVisual .sv .txt .btn_box a:hover{ border: 2px solid #4488dd; color: #4488dd; background: transparent !important;}

#sVisual .sv ol{margin-top: 80px; display: flex; position: relative; z-index: 2; justify-content: center;}
#sVisual .sv ol li{width: 320px;border-radius: 10px; background-color: #fff; box-shadow: 2px 3px 12px rgba(0,0,0,0.1); margin-right: 10px;display: flex; justify-content: center; align-content: center; padding: 27px 0;}
#sVisual .sv ol li .images {margin-right: 15px;}
#sVisual .sv ol li .images img{}
#sVisual .sv ol li .text{}
#sVisual .sv ol li .text h4{font-weight: 500; font-size: 1.6rem; color: #555555;}
#sVisual .sv ol li .text h3{color: #222222; font-size: 2rem; font-weight: 500;}

#sVisual .sv .img{position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 1; opacity: 0; transition: 1s;}
#sVisual .sv:hover .img{opacity: .7;}
#sVisual .sv .img img{max-width: 15vw;}

.tabcontent{display: none;}
.tabcontent.on{display: block;}

@media all and (max-width:999px){
    .intro1 #sVisual{padding-bottom: 6rem; padding-top: 90px;}
    #sVisual{flex-direction: column; padding: 3rem 0;}
    #sVisual .sv{padding: 5rem 1rem; text-align: center; width: 100%; flex-direction: row; position: relative;}
    #sVisual .sv:nth-child(1){border-bottom: 1px solid #ddd;}
    #sVisual .sv .txt h4{font-size: 2.2rem; margin-bottom: 4%}
    #sVisual .sv .txt h4:before{height: 14px;}
    #sVisual .sv .txt h3{font-size: 3rem;}
    #sVisual .sv .txt p{font-size: 2rem;}
    #sVisual .sv .txt .btn_box {margin-top: 5%;}
    #sVisual .sv .txt .btn_box a{font-size: 1.8rem; font-family: 'GmarketSans', sans-serif; font-weight: 500; text-align: center; width: 200px; display: block; line-height: 1em; padding: 16px 0; border-radius: 30px; border-top-right-radius: 0;}
    
    #sVisual .sv ol{margin-top: 8%; justify-content: center;}
    #sVisual .sv ol li .text h4{font-size: 1.5rem;}
    #sVisual .sv ol li .text h3{font-size: 1.8rem;}
    
    #sVisual .sv .img{ opacity: .2;  right: 30px; left: auto; transform: translateX(0); bottom: auto; top: 50%; transform: translateY(-50%); opacity: .7; display: none;}
    #sVisual .sv:nth-child(2) .img img{max-width: 24vw;}
}
@media all and (max-width:640px){
    #sVisual .sv{opacity: 1; }
    #sVisual .sv .txt h3{font-size: 2.6rem;}
    #sVisual .sv .txt p{font-size: 1.8rem;}
    
    #sVisual .sv ol{flex-direction: column; align-items: center;}
    #sVisual .sv ol li:nth-child(1){margin-bottom: 15px;}
    #sVisual .sv ol li{padding: 15px 0; width: 280px;}
    #sVisual .sv ol li .images img{max-width: 11vw;}
    #sVisual .sv:nth-child(1) .img img{max-width: 20vw !important;}
    #sVisual .sv:nth-child(2) .img{right: 0;}
    #sVisual .sv .img img{max-width: 30vw !important;}
}

/* intro1 */
.intro1 .mobileapp{padding: 80px 0; background: center center / cover url(/images/sub/intro1_bg2.jpg) no-repeat;}
.intro1 .mobile_slide{margin-top: 80px;}
.intro1 .mobile_slide img{max-width: 100%; margin: 0 auto;}
.intro1 .mobileapp .slick-next{background: url(/images/sub/mobileapp_next.png); width: 50px; height: 50px; transform:translate(-50%, -50%); right: -60px; text-indent:-9999px;}
.intro1 .mobileapp .slick-prev{background: url(/images/sub/mobileapp_prev.png); width: 50px; height: 50px; transform:translate(-50%, -50%); left: -20px; text-indent:-9999px;}


/* intro_bg */
.intro_bg{overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 70vh; position: relative; width: 100%;}
.intro2 .intro_bg{background-image: url(/images/sub/intro_bg2.jpg);}
.intro3 .intro_bg{background-image: url(/images/sub/intro_bg3.jpg);}
.intro4 .intro_bg{background-image: url(/images/sub/intro_bg4.jpg);}
.intro5 .intro_bg{background-image: url(/images/sub/intro_bg5.jpg);}
.intro6 .intro_bg{background-image: url(/images/sub/intro_bg6.jpg);}
.intro7 .intro_bg{background-image: url(/images/sub/intro_bg7.jpg);}
.intro8 .intro_bg{background-image: url(/images/sub/intro_bg8.jpg);}
.intro9 .intro_bg{background-image: url(/images/sub/intro_bg9.jpg);}
.intro10 .intro_bg{background-image: url(/images/sub/intro_bg10.jpg);}
.intro_bg .ss-inner{height: 100%; display: flex; flex-direction: column; justify-content: center; margin: 0 auto;}
.intro_bg .txt{position: relative; z-index: 2;}
.intro_bg .txt h3{font-family: 'GmarketSans',sans-serif; font-size: 5.3rem; color: #fff; line-height: 1.2em;}
.intro_bg .txt h4{font-family: 'GmarketSans',sans-serif; font-size: 2.8rem; color: #fff; line-height: 1.2em;}
.intro_bg .txt p{font-weight: 300; color: #eee; font-size: 2rem; margin: 30px 0 0px;}
.intro_bg .txt .btn_box{display: flex;}
.intro_bg .txt .btn_box a{font-size: 2rem; font-family: 'GmarketSans', sans-serif; font-weight: 700; text-align: center; width: 218px; display: block; line-height: 1em; padding: 20px 0; border-radius: 30px; border-top-right-radius: 0;}
.intro_bg .txt .btn_box a.btn1{ background-color: #4488dd;  color: #fff;}
.intro_bg .txt .btn_box a.btn2{color: #4488dd; border: 2px solid #4488dd; margin-left: 22px;}
.intro_bg .img{position: absolute; right: -200px; top: 50%; transform: translateY(-50%); z-index: 1;}
.intro_bg .img img{width: 100%;}

@media all and (max-width:999px){
    .intro_bg{text-align: center; height: 70vh;}
    .intro_bg .txt h3{font-size: 3.6rem;}
    .intro_bg .txt h3 span{font-size: 4rem;}
    .intro_bg .txt h4{font-size: 2.4rem;}
    .intro_bg .txt p{font-size: 2rem; margin: 3% 0 0%;}
    .intro_bg .txt p br{display: none;}
    .intro_bg .img img{opacity: .4;}
    .intro_bg .txt .btn_box{justify-content: center;}
    .intro_bg .txt .btn_box a{font-size: 1.6rem; font-family: 'GmarketSans', sans-serif; font-weight: 500; text-align: center; width: 160px; display: block; line-height: 1em; padding: 16px 0; border-radius: 30px; border-top-right-radius: 0;}
    .intro_bg .txt .btn_box a.btn2{margin-left: 10px;}
}

@media all and (max-width:640px){
    .intro_bg .txt h3{font-size: 3.2rem;}
    .intro_bg .txt h4{font-size: 2rem;}
    .intro_bg .txt h3 span{font-size: 4rem;}
    .intro_bg .txt h3 span:before{height: 18px;}
    .intro_bg .txt p{font-size: 1.6rem;}
}

.section{padding: 80px 0 100px;}
.section.BG{background-color: #f8f8f8;}
.section.BG2{background: center center / cover url(/images/sub/section_bg2.jpg) no-repeat; color: #fff;}
.section.BG3{background: center center / cover url(/images/sub/section_bg3.jpg) no-repeat; color: #fff;}
.section.BG4{background: center center / cover url(/images/sub/section_bg4.jpg) no-repeat; color: #fff;}
.section.BG5{background: center center / cover url(/images/sub/section_bg5.jpg) no-repeat; color: #fff;}
.section.BG6{background: center center / cover url(/images/sub/section_bg6.jpg) no-repeat; color: #fff;}

@media all and (max-width:999px){
    .section{padding: 10% 0;}
}

.flex{display: flex;}
.flex.wrap{flex-wrap: wrap;}
.flex.wrap li{margin-bottom: 2rem;}
ul.flex.jc{justify-content: center;}
.flex .col12{width: 100%;}
.flex .col9{width: 75%;}
.flex .col6{width: 50%;}
.flex .col4{width: 33.33333%;}
.flex .col3{width: 25%;}
.flex .col2{width: 20%;}

@media all and (max-width:720px){
    .flex{flex-wrap: wrap;}
    .flex li{margin-bottom: 2rem;}
    .flex .col4{width: 50%;}
}

.flex li{}
.flex li .img{}
.flex li .img img{}
.flex li h4{font-size: 2.2rem; font-weight: 500; color: #4589dd; margin-bottom: 10px; margin-top: 15px; word-break:keep-all;}
.flex li p{font-size: 1.8rem; line-height: 1.8em; word-break:keep-all;}

@media all and (max-width:720px){
    .flex li h4{font-size: 2rem;}
    .flex li p{font-size: 1.6rem;}
    .flex li .img img{width: 80%; margin: 0 auto;}
}
@media all and (max-width:640px){
    .flex li h4{font-size: 1.8rem;}
    .flex li p{font-size: 1.5rem;}
    .flex li p br{display: none;}
}


.img.pc{display: block;}
.img.mo{display: none; text-align: center;}

@media all and (max-width:999px){
    .img.pc{display: none}
    .img.mo{display: block;}
}
@media all and (max-width:640px){
    .comp{display: none;}
}

.tabmenu{display: flex; flex-wrap: wrap; margin-top: 3rem;}
.tabmenu li{width: 20%; border: 1px solid #ddd; margin-left: -1px; margin-top: -1px; text-align: center;}
.tabmenu li.on{}
.tabmenu li a{display: block; font-size: 1.8rem; font-weight: 500; padding: 1.25rem 1rem; color: #777;}
.tabmenu li.on a{color: #fff; background-color: #4589dd;}

@media all and (max-width:999px){
    .tabmenu li{width: 33.33333%;}
}
@media all and (max-width:640px){
    .tabmenu li{width: 50%;}
    .tabmenu li a{padding: 0.875rem 0;}
}


.ul_box{padding: 4rem 0 8rem; display: flex; justify-content: space-between;}
.ul_box li{margin: 2rem 0; padding: 3rem; border: 1px solid #eee; box-shadow: 2px 3px 12px rgba(0,0,0,0.1); width: 32.3333%; text-align: center; border-top: 3px solid #4589dd;}
.ul_box li h3{margin-bottom: 1rem; font-size: 2.4rem; color: #4589dd; word-break: keep-all; margin-top: 15px;}
.ul_box li p{word-break: keep-all; padding-top: 2rem; border-top: 1px dashed #ddd; color: #444; font-weight: 400; font-size: 1.7rem;}

@media all and (max-width:999px){
    .ul_box{flex-wrap: wrap;}
    .ul_box li{width: 100%;}
}

.service section.sec2 .sss-inner .box{padding-top: 160px;}
.service_btn_box{margin-top: 3rem;}
.service_btn_box a{display: block; text-align: center; width: 100%; background-color: #000; color: #fff; margin-top: 1.25rem; width: 80%; max-width: 480px; margin-left: auto; margin-right: auto; padding: 1.5rem 0; border-radius: 10px; font-size: 1.8rem; font-weight: 600;}
.service_btn_box a.kakao{background-color: #f2dc01; color: #371A1A}
.service_btn_box a.pass{background-color: #4488DD;}
.service_btn_box a.call{background-color: #343434;}

.service .ser_box{width: 100%;}
.service .ser_box h4{font-family: 'yg-jalnan', sans-serif; font-size: 1.5rem; font-weight: 400;}
.service .ser_box h3{font-family: 'GmarketSans', sans-serif; font-size: 4rem; color: #222; margin: 20px 0 20px; line-height: 1.2em; word-break: keep-all;}
.service .ser_box p{font-size: 1.7rem; color: #777; line-height: 1.8em;}

.ser_btn{margin-top: 3rem; z-index: 999;}
.ser_btn a{display: block; text-align: center; width: 94%; color: #fff; margin: 0 auto; background-color: rgb(63, 127, 206); border-radius: 5px; border:1px solid rgb(63, 127, 206);  line-height: 56px; font-size: 1.8rem; font-weight: 600; box-shadow: 2px 3px 12px rgba(0,0,0,0.2); max-width: 480px;}

@media all and (max-width:999px){
    .service .ser_box h3{font-size: 3.6rem; margin: 5% 0 2%;}
}
@media all and (max-width:640px){
    .service_btn_box a{font-size: 1.6rem;}
    .service .ser_box h3{font-size: 3rem;}
    .ser_btn{display: none;}
}

.download{background-color: rgb(63, 127,206); padding: 5em 0; box-shadow: inset 2px 3px 10px rgba(0,0,0,0.1);}
.download .sss-inner{display: flex; justify-content: center;}
.download .sss-inner > div{padding: 0 3em; text-align: left;}
.download .sss-inner > div:nth-child(1){border-right: 1px solid #679bb2;}
.download .sss-inner h4{color: #fff; font-size:1.6rem; margin-bottom: 15px; font-weight: 500;}
.download .sss-inner img{margin-bottom: 10px;}
.download .sss-inner .left_box img{border-radius: 10px;}

@media all and (max-width:640px){
	.download .sss-inner > div{padding: 0 2em;}
}