@charset "utf-8";

/* title */
.title{text-align: center;}
.title::before{content: ''; display: block; height: 80px; width: 1px; margin: 0 auto 20px; background-color: #ddd;}
.title h3{font-size: 3.2rem; font-weight: 400; color: #000;}
.title h3 span{font-weight: 600;}
.title h4{margin-top: 1.5rem; color: #777; font-size: 1.2rem; font-weight: 400;}

@media all and (max-width:999px){
    .title::before{margin-bottom: 2rem; height: 10vh;}
    .title h3{font-size: 2.8rem;}
    .title h4{margin-top: 1rem;}
}
@media all and (max-width:640px){
    .title::before{display: none;}
}

/* mVisual */
#mVisual{}
#mVisual .mv{background-repeat: no-repeat; background-position: center center; background-size: cover; height: calc(100vh - 102px);}
#mVisual .mv.mv1{background-image: url(/kids/images/main/mv1.jpg);}
#mVisual .mv.mv2{background-image: url(/kids/images/main/mv1.jpg);}
#mVisual .mv.mv3{background-image: url(/kids/images/main/mv1.jpg);}
#mVisual .mv .inner{height: 100%; display: flex; align-items: center;}
#mVisual .mv .inner .txt{padding-left: 100px;}
#mVisual .mv .inner .txt h4{font-size: 2rem; font-weight: 500; color: #666;}
#mVisual .mv .inner .txt h3{font-weight: 500; color: #333; font-size: 4rem; line-height: 1.2em; margin: 25px 0 50px;}
#mVisual .mv .inner .txt h3 span{color: #13916a; font-weight: 600;}
#mVisual .mv .inner .txt a.btn{color: #13916a; display: inline-block; font-size: 1.7rem; font-weight: 500; border: 1px solid #13916a; line-height: 1em; padding: 20px 25px;}
#mVisual .slick-dots{transform: translateX(-50%);}
#mVisual .slick-dots li{width: 14px; height: 14px; background-color: transparent; border: 2px solid #fff;}
#mVisual .slick-dots li.slick-active{background-color: #fff;}

@media all and (max-width:1280px){
    #mVisual .mv{height: calc(100vh - 72px);}
}
@media all and (max-width:999px){
    #mVisual .mv .inner .txt{padding-left: 0;}
    #mVisual .mv .inner .txt h4{font-size: 1.6rem;}
    #mVisual .mv .inner .txt h3{font-size: 3rem; margin: 2rem 0 5rem;}
    #mVisual .mv .inner .txt a.btn{font-size: 1.5rem; padding: 2rem;}
}
@media all and (max-width:640px){
    #mVisual .mv .inner .txt h4{font-size: 1.5rem;}
    #mVisual .mv .inner .txt h3{font-size: 2.5rem; margin-bottom: 3.5rem;}
    #mVisual .mv .inner .txt a.btn{font-size: 1.4rem;}
}


/* sec1 */
.sec1{background: center center / cover url(/kids/images/main/sec1_bg.jpg) no-repeat; height: 850px; width: 100%; padding-top: 65px;}
.sec1 .inner{}
.sec1 .inner .doctor{display: flex;}
.sec1 .inner .doctor .img{position: relative; width: 50%;text-align: center; }
.sec1 .inner .doctor .img img{ max-width: 100%; margin: 0 auto;}
.sec1 .inner .doctor .img .name{position: absolute; top: 30%; left: 100px;}
.sec1 .inner .doctor .img .name p{color: #000; font-size: 1.7rem;}
.sec1 .inner .doctor .img .name h3{color: #000; font-size: 2.4rem; font-weight: 500;}
.sec1 .inner .doctor .txt{padding-top: 60px;}
.sec1 .inner .doctor .txt h4{font-size: 1.4rem; font-weight: 400; color: #777; margin-bottom: 20px;}
.sec1 .inner .doctor .txt h3{color: #333; font-size: 3.2rem; font-weight: 500; line-height: 1.2em; margin-bottom: 40px;}
.sec1 .inner .doctor .txt h3 span{font-weight: 600; color: #0ab89d;}
.sec1 .inner .doctor .txt ul{margin: 20px 0;}
.sec1 .inner .doctor .txt ul li{line-height: 1.8em;}
.sec1 .inner .doctor .txt ul li::before{content: '·'; padding-right: 0.25em;}

@media all and (max-width:1280px){
    .sec1 .inner .doctor .img{width: 60%;}
    .sec1 .inner .doctor .img .name{left: 0%;}
}
@media all and (max-width:999px){
    .sec1{height: auto; padding: 4em 0 0; background: #fff;}
    .sec1 .inner .doctor{flex-direction: column;}
    .sec1 .inner .doctor .img, .sec1 .inner .doctor .txt{width: 100%;}
    .sec1 .inner .doctor .img{order: -1;}
    .sec1 .inner .doctor .txt{padding-top: 0; text-align: center; margin-top: 3em;}
    .sec1 .inner .doctor .txt h3{font-size: 2.8rem; margin-bottom: 3rem;}
    .sec1 .inner .doctor .img .name p{font-size: 1.5rem;}
    .sec1 .inner .doctor .img .name h3{font-size: 2rem;}
}
@media all and (max-width:640px){
    .sec1 .inner .doctor .txt h3{font-size: 2.4rem;}
}


/* sec2 */
.sec2{padding: 60px 0 100px; background-color: #fafafa;}
.sec2 .tab{display: flex; justify-content: space-between;  flex-wrap: wrap; margin-top: 40px;}
.sec2 .tab li{ background-color: #fff; cursor: pointer; width: 49.5%; text-align: center; border: 1px solid #e8e8e8; padding: 20px 0; line-height: 1.2em; margin-bottom: 20px; font-size: 2.0rem; color: #333333; font-weight: 500;}
.sec2 .tab li.on{background-color: #81d4ba; color: #fff;}

.sec2 .tabcontent{display: none;}
.sec2 .tabcontent.on{display: block;}
.sec2 .top_info{margin-top: 60px; display: flex; align-items: center;}
.sec2 .top_info .img{position: relative; width: 100%; max-width: 420px;}
.sec2 .top_info .img::before{content:''; display: block; width: 37vw; max-width: 710px; height: 176px; background-color: #81d4ba; position: absolute; left: -260px;  bottom: 30px; z-index: 1;}
.sec2 .top_info .img img{max-width: 100%; position: relative; z-index: 2;}
.sec2 .top_info .txt{margin-left: 110px;}
.sec2 .top_info .txt h3{font-size: 2.8rem; color: #333; font-weight: 500; line-height: 1.3em; word-break: keep-all;}
.sec2 .top_info .txt h3::after{content: ''; width: 60px; height: 2px; display: block; background-color: #81d4ba; margin: 15px 0;}
.sec2 .top_info .txt h3 span{color: #81d4ba; font-weight: 600;}
.sec2 .top_info .txt ul{}
.sec2 .top_info .txt ul li{font-size: 1.6rem; color: #666; line-height: 2em;}
.sec2 .top_info .txt ul li::before{content: '-'; padding-right: .5rem;}

.sec2 .bot_info{margin-top: 60px; border: 15px solid #eeeeee; padding: 60px 70px;}
.sec2 .bot_info h3{color: #333333; font-size: 2.4rem;font-weight: 500;}
.sec2 .bot_info h3 span{font-weight: 600;}
.sec2 .bot_info ul{counter-reset: section;}
.sec2 .bot_info ul li{font-size: 1.7rem; color: #333333; font-weight: 400; border-bottom: 1px dotted #dedede; padding-bottom: 10px; padding-top: 10px; word-break: keep-all;}
.sec2 .bot_info ul li::before{counter-increment: section; content: counter(section, decimal-leading-zero); font-weight: 600; color: #449ac8; padding-right: 12px; font-style: italic; font-size: 3.2rem; font-family: 'Noto Serif KR', serif; vertical-align: sub;}

@media all and (max-width:1280px){
    .sec2 .top_info .txt{margin-left: 8rem;}
    .sec2 .top_info .txt h3 br{display: none;}
}
@media all and (max-width:999px){
    .sec2{height: auto; padding: 4em 0;}
    .sec2 .tab{margin-top: 3rem;}
    .sec2 .tab li{padding: 1.5rem 0; margin-bottom: 1rem;}
    .sec2 .top_info{margin-top: 4.5rem; flex-direction: column;}
    .sec2 .top_info .txt{margin-left: 0; margin-top: 4rem;}
    .sec2 .top_info .txt h3{font-size: 2.4rem;}
    .sec2 .bot_info{margin-top: 5rem; padding: 4rem 6rem;}
}
@media all and (max-width:640px){
    .sec2 .tab li{width: 48.5%;}
    .sec2 .bot_info{padding: 3rem 2rem; border-width: 10px;}
    .sec2 .bot_info h3{font-size: 2rem; margin-bottom: 1.5rem;}
    .sec2 .bot_info ul li{position: relative; font-size: 1.5rem; padding-left: 2.75em;}
    .sec2 .bot_info ul li::before{font-size: 2.6rem; position: absolute; left: 0; line-height: 1em;}
    .sec2 .bot_info ul li{font-size: 1.5rem;}
}
    

/* sec3 */
.sec3{padding: 100px 0; background-color: #77bff6;}
.sec3 .inner{display: flex; justify-content: space-between; align-items: center;}
.sec3 .inner .txt{text-align: center; width: 50%;}
.sec3 .inner .txt h3{color: #fff; font-weight: 500; font-size: 3.2rem;}
.sec3 .inner .txt h3 span{font-weight: 600; color: #ffe92b;}
.sec3 .inner .txt ul.tab2{display: flex; justify-content: center; margin-top: 40px;}
.sec3 .inner .txt ul.tab2 li{color: #cccccc; background-color: #fff; font-weight: 500; border-radius: 6px; padding: 8px; margin: 0 7px; line-height: 1em; cursor: pointer;}
.sec3 .inner .txt ul.tab2 li.on{color: #449ac8;}
.sec3 .inner .txt .img{margin-top: 50px;}
.sec3 .inner .txt .img img{max-width: 85%;}
.sec3 .inner .info{width: 50%; display: none; border: 15px solid #449ac8; padding: 55px; background: url(/kids/images/main/info_bg.jpg);}
.sec3 .inner .info.on{display: block;}
.sec3 .inner .info .box{margin-bottom: 20px;}
.sec3 .inner .info .box:last-child{margin-bottom: 0;}
.sec3 .inner .info .box h4{color: #333333; font-weight: 500; font-size: 1.8rem; margin-bottom: 5px; word-break:keep-all;}
.sec3 .inner .info .box h4::before{content: ''; display: inline-block; width: 23px; height: 22px; background: center center / 100% url(/kids/images/main/check.png) no-repeat; margin-right: 10px; vertical-align: sub;}
.sec3 .inner .info .box p{color: #777; word-break:keep-all;}
.sec3 .inner .info .box p::before{content: '-'; padding-right: 5px;}

@media all and (max-width:999px){
    .sec3{padding: 5rem 0;}
    .sec3 .inner{flex-direction: column;}
    .sec3 .inner .txt{width: 100%;}
    .sec3 .inner .txt h3{font-size: 2.8rem; line-height: 1.4em;}
    .sec3 .inner .txt .img{display: none;}
    .sec3 .inner .txt ul.tab2{margin-top: 3rem;}
    .sec3 .inner .info{margin-top: 4rem; width: 100%; padding: 4rem;}
}
@media all and (max-width:640px){
    .sec3 .inner .txt h3{font-size: 2.4rem;}
    .sec3 .inner .txt ul.tab2{flex-wrap: wrap;}
    .sec3 .inner .txt ul.tab2 li{width: 45.5%; padding: 10px; margin-bottom: 1rem;}
    .sec3 .inner .info{margin-top: 3rem; border-width: 10px; padding: 4rem 2.5rem;}
    .sec3 .inner .info .box h4{position: relative; padding-left: 2em; font-size: 1.7rem;}
    .sec3 .inner .info .box h4::before{position: absolute; left: 0; top: 3px;}
    .sec3 .inner .info .box p{font-size: 1.5rem;}
}


/* sec4 */
.sec4{padding: 50px 0 100px;}
.sec4 .s-title{font-size: 2.4rem; font-weight: 500; text-align: center; color: #333; margin: 55px 0;}
.sec4 .s-title span{font-weight: 600;}
.sec4 ul{display: flex; justify-content: space-between;}
.sec4 ul li{width: 240px; height: 240px; border: 12px solid #ddd; background-color: #fff; border-radius: 100%;}
.sec4 ul li .info{display: flex; justify-content: center; align-items: center; text-align: center; flex-direction:column; height: 100%;}
.sec4 ul li .info .tit{color: #444444; font-size: 1.8rem; font-weight: 500;}
.sec4 ul li .info .tit span{font-size: 4.8rem; font-weight: 400; color: #ff7e0c; margin-right: 10px;}
.sec4 ul li .info p{margin-top: 10px; font-size: 1.5rem; color: #666666;}
.sec4 ul li .info p br{}
.sec4 ul li .info .icon{ margin-top: 25px;}
.sec4 ul li .info .icon img{max-width: 100%;}
.sec4 .btn{text-align: center; margin-top: 75px;}
.sec4 .btn img{max-width: 100%;}

@media all and (max-width:1280px){
    .sec4 ul{flex-wrap: wrap; justify-content: center;}
    .sec4 ul li{width: 25vw; height: 25vw; margin: 1.5rem;}
}
@media all and (max-width:999px){
    .sec4{padding: 4em 0;}
    .sec4 .s-title{font-size: 2.2rem; margin: 4rem 0;}
    .sec4 ul li{width: 32vw; height: 32vw;}
    .sec4 ul li .info p{margin-top: 5px;}
    .sec4 ul li .info .icon{margin-top: 1.5rem;}
    .sec4 ul li .info .tit span{font-size: 3.6rem;}
    .sec4 ul li .info .tit{font-size: 1.6rem;}
    .sec4 .btn{margin-top: 5rem;}
}
@media all and (max-width:640px){
    .sec4 .s-title{margin: 3rem 0;}
    .sec4 ul li{width: 41vw; height: 41vw; margin: 1rem; border-width: 9px;}
    .sec4 ul li .info .icon{display: none;}
    .sec4 ul li .info p{font-size: 1.3rem; padding: 0 1rem; margin-top: 0;}
    .sec4 ul li .info p br{display: none;}
}


/* sec5 */
.sec5{background-color: #7fd1d9; padding: 60px 0 90px;}
.sec5 .inner{}
.sec5 .inner .title{}
.sec5 .inner .title h3{color: #fff;}
.sec5 .inner .title h4{color: #eeeeee;}
.sec5 .inner .title::before{background-color: #dddddd;}

.sec5 #tour_box{margin-top: 60px;}
.sec5 #tour_box img{width: 100%;}
.sec5 #tour_box .slick-prev{background: url(/kids/images/main/sec5_prev.png) no-repeat center center; text-indent: -9999px; box-shadow: 0px 0px 0px; border-radius: 0%; width: 30px; height: 60px; left: -60px;}
.sec5 #tour_box .slick-next{background: url(/kids/images/main/sec5_next.png) no-repeat center center; text-indent: -9999px; box-shadow: 0px 0px 0px; border-radius: 0%; width: 30px; height: 60px; right: -60px;}
.sec5 .tour_nav{margin-top: 20px;}
.sec5 .tour_nav .nav{ margin: 0 10px;}
.sec5 .tour_nav img{width: 100%;}

@media all and (max-width:1240px){
    .sec5 #tour_box{margin-top: 50px;}
}
@media all and (max-width:999px){
    .sec5{padding: 4rem 0 7rem;}
}
@media all and (max-width:690px){
    .sec5 #tour_box .slick-prev, .sec5 #tour_box .slick-next{display: none !important;}
    .sec5 #tour_box{margin-top: 30px;}
    .sec5 .tour_nav{margin-top: 15px;}
}
@media all and (max-width:480px){
    .sec5 #tour_box{margin-top: 20px;}
    .sec5 .tour_nav{margin-top: 8px;}
    .sec5 .tour_nav .nav{margin: 0 4px;}
}


/* sec6 */
.sec6{display: flex; justify-content: space-between; position: relative;}
.sec6 .info{width: 50%; background-color: #f5f5f3; height: 630px;}
.sec6 .map{width: 50%;}
.sec6 .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.root_daum_roughmap .wrap_controllers{display: none;}
.sec6 .info h3{font-size: 3.2rem; color: #333; font-weight: 500; line-height: 1.3em; word-break: keep-all;}
.sec6 .info h3 span{font-weight: 600; color: #0ab89d;}
.sec6 .info .flex{margin: 45px 0;display: flex; justify-content: space-between; width: 100%; max-width: 555px;}
.sec6 .info .flex .tit{width: 50%; color: #333333; font-weight: 700; font-size: 2rem;}
.sec6 .info .flex .half{width: 50%;}
.sec6 .info .flex .half > div{display: flex; justify-content: space-between; font-size: 1.7rem; line-height: 2.2em;}
.sec6 .info .flex .half > div .day{width: 50%; border-right: 1px solid #ddd;}
.sec6 .info .flex .half > div .hours{width: 50%; margin-left: 30px;}
.sec6 .info .flex .half p{font-size: 1.5rem; color: #f55252; margin-top: 15px;}
.sec6 .info .flex .tel{width: 50%; font-weight: 700; color: #333333; font-size: 3.2rem;}

@media all and (max-width:1420px){
    .sec6{height: 540px; overflow: hidden;}
    .sec6 .info{height: 540px;}
    .sec6 .inner{left: 2%; transform: translateY(-50%); max-width: 46%;}
    .sec6 .info h3{font-size: 2.8rem;}
    .sec6 .info .flex{margin: 3.5rem 0; justify-content: flex-start;}
    .sec6 .info .flex .tit{font-size: 1.8rem; width: 40%}
    .sec6 .info .flex .half{width: 60%;}
    .sec6 .info .flex .tel{width: 60%;}
}
@media all and (max-width:1280px){
    .sec6 .info h3{font-size: 2.4rem;}
}
@media all and (max-width:999px){
    .sec6{height: auto; flex-direction: column;}
    .sec6 .inner{max-width: 100%; position: static; transform: translate(0); text-align: center;}
    .sec6 .info{height: auto; padding: 3em 0 2em; width: 100%;}
    .sec6 .info .flex{max-width: 640px; margin-left: auto; margin-right: auto;}
    .sec6 .info .flex .half > div .hours{margin-left: 2rem;}
    .sec6 .info .flex .tel{font-size: 2.6rem;}
    .sec6 .map{width: 100%;}
    .wrap_map{height: 480px !important;}
}
@media all and (max-width:640px){
    .sec6 .info h3{font-size: 2.2rem;}
    .sec6 .info h3 br{display: none;}
    .wrap_map{height: 340px !important;}
    .sec6 .info .flex .tit{font-size: 1.6rem; width: 30%;}
    .sec6 .info .flex .half{width: 70%;}
    .sec6 .info .flex .tel{width: 70%;}
}