:root {
  --primary: #0073D3;
  --red:#D40025;
  --dkb:#005194;
  --dkr:#95001A;

  --radius : 50px;
  --radius-m : 20px;
  --radius-s : 10px;
  --round : 100%;

  --tit-xxl : 75px;
  --tit-xl : 60px;
  --tit-l : 40px;
  --tit-m : 32px;
  --tit-s : 24px;

  --txt-xxl : 35px;
  --txt-xl : 30px;
  --txt-l : 26px;
  --txt-m : 20px;
  --txt-s : 18px;
  --txt-xs : 16px;

  --con-w : 1500px;

  --con-space-l : 120px;
  --con-space-m : 70px;
  --con-space-s : 30px;
  --con-space-xs : 15px;  
 
}

.mt-l{margin-top:var(--con-space-l)}
.mt-m{margin-top:var(--con-space-m)}
.mt-s{margin-top:var(--con-space-s)}
.mt-xs{margin-top:var(--con-space-xs)}

.reveal{opacity:0;}
.reveal.scrolled{opacity:1;}
.fade-up.scrolled {animation:fade-up .8s ease-in-out both}
.fade-r.scrolled {animation:fade-r .8s ease-in-out both}
.fade-l.scrolled {animation:fade-l .8s ease-in-out both}

.delay2{animation-delay:.2s !important}
.delay4{animation-delay:.4s !important}

.flex{display:flex;flex-wrap:wrap;}
.justify-center{justify-content:space-between}
.w2 > div{width:calc(100%/2 - 20px)}
.w3 > div{width:calc(100%/3 - 20px)}

@keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-webkit-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-moz-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-ms-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-o-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}


@keyframes zoom-in{
    0%{opacity: 0; transform: scale(1.2);}
    100%{ opacity: 1; transform: scale(1);}
}
@-webkit-keyframes zoom-in{
     0%{opacity: 0; transform: scale(1.2);}
    100%{ opacity: 1; transform: scale(1);}
}
@-moz-keyframes zoom-in{
    0%{opacity: 0; transform: scale(1.2);}
    100%{ opacity: 1; transform: scale(1);}
}
@-ms-keyframes zoom-in{
    0%{opacity: 0; transform: scale(1.2);}
    100%{ opacity: 1; transform: scale(1);}
}
@-o-keyframes zoom-in{
    0%{opacity: 0; transform: scale(1.2);}
    100%{ opacity: 1; transform: scale(1);}
}


@keyframes fade-l{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-l{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-l{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-l{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-l{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}


@keyframes fade-r{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-r{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-r{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-r{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-r{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}

body.scrollno{width:100%; height:100vh; overflow:hidden}


header{position:fixed;z-index:1000;width:100%; left:0; top:0; height:120px;transition: all 0.3s ease-in-out;}
header.sticky,header.sub-header{background:#000}
header h1{position:absolute;z-index:9;top:50%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);left:50px}
header h1 a{display:inline-block;height:36px;overflow:hidden}
header #Gnb{position:absolute;z-index:9;right:50px;top:50%;display:flex; flex-wrap:wrap;align-items:center;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
header #Gnb a{background:var(--primary); padding:0 20px;height:30px; border-radius:50px; line-height:30px; color:#fff;font-size:.8em;font-weight:normal; cursor:pointer;transition: all 0.3s ease-in-out;}
header #Gnb a:hover{background:var(--dkb)}
header .toggle-nav{display:none;cursor:pointer;width:45px; height:45px;position:relative;margin-top:-3px;}
header .toggle-nav span{position:absolute;top:50%; left:50%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

nav {position:relative;text-align:center;width:100%;font-size:0;}
nav .menu ul{height:0;transition: all 0.2s ease-in-out;opacity:0;visibility: hidden;margin-top:-40px}
nav .menu.show ul{height:auto;opacity:1; background:var(--primary);padding:10px 0; border-radius:15px;visibility: visible;margin-top:-20px}
nav > ul{width:100%; max-width:1500px;margin:0 auto;display:flex; flex-wrap:wrap;justify-content:center;}
nav > ul > li{position:relative;display:inline-block;color:#fff; width:calc(100%/8)}

nav > ul > li > a{display:inline-block;font-size:20px;height:120px; line-height:120px;text-align:center}
nav > ul > li ul li{width:100%;font-size:.9em;margin-top:10px}
nav > ul > li ul li:first-child{margin-top:0}
nav > ul > li ul li a{font-size:17px;line-height:1.3;padding:8px 20px;text-align:center;color:#fff !important;color:rgba(255,255,255,7)}
nav > ul > li ul li a:hover{text-decoration:underline;text-underline-position: under;}

header .m-nav{position:fixed;z-index:9991;opacity:0;overflow-y:auto;top:0;right:-100%; width:100%;height:100vh;background:#fff;transition: all .4s ease-in-out;}
header .m-nav.open{opacity:1; right:0}
header .m-nav .nav-con{width:90%;margin:70px auto;}
header .m-nav .nav-con > li{margin-top:30px;font-size:var(--txt-l);}
header .m-nav .nav-con > li:first-child{margin-top:0}
header .m-nav .nav-con > li > span{font-size:1.15em; display:block; border-bottom:1px solid rgba(0,0,0,.1); color:var(--primary)}
header .m-nav .nav-con span{font-size:var(--tit-m);font-weight:600;line-height:50px;cursor:pointer; width:100%; position:relative;display:block;}
header .m-nav .nav-con span:after{background:url(/images/common/arrow-down.svg) no-repeat center/cover;position:absolute; right:0; top:50%;background-size:30px;width:30px; height:30px;margin-top:-15px;content:'';transform:rotate(-90deg);transition: all 0.3s ease-in-out;}
header .m-nav .nav-con > li > ul > li{margin-right:50px;font-size:var(--txt-m)}
header .m-nav .nav-con > li > ul > li a{line-height:40px;position:relative;padding-left:15px}
header .m-nav .nav-con > li > ul > li:last-child{margin-right:0}
header .m-nav .nav-con > li > ul > li a:before{content:'';position:absolute; width:6px; height:6px; background:rgba(0,102,255,.15);border-radius:100%;left:0; top:50%;margin-top:-3px}

.nav-close{position:absolute; right:0%; top:20px;cursor:pointer}
.nav-close iconify-icon{color:#000; font-size:40px;vertical-align:middle}

.main-visual{width:100%; position:relative;overflow:hidden;margin-top:0}
.main-visual .swiper-slide{width:100%; height:100vh;}
.main-visual .swiper-pagination-bullets{bottom:50px;}
.main-visual .swiper-pagination-bullet{opacity:1; box-shadow:1px 1px 10px rgba(0,0,0,.1)}
.main-visual .swiper-pagination-bullet{background:#fff;vertical-align:middle;transition: all 0.3s ease-in-out;}
.main-visual .swiper-pagination-bullet-active{width:16px; height:16px}

#main-container{margin:100px 0;position:relative;overflow:hidden}
#main-container h2{font-size:var(--tit-xl);line-height:1.3;margin-bottom:var(--con-space-s);text-align:center;font-weight:800; color:#000}

.service-wrap{width:90%; max-width:1500px;margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between}
.service-wrap > div{width:calc(50% - 25px);text-align:center;background:#F4F4F4; border-radius:50px;overflow:hidden}
.service-wrap > div .tit-wrap{background:var(--primary); height:125px;color:#fff;display:flex; flex-wrap:wrap}
.service-wrap > div:last-child .tit-wrap{background:var(--red);}
.service-wrap > div .tit-wrap .btn{display:inline-block;width:125px;height:125px;background:rgba(0,0,0,.3) url(/images/main/ico-next.svg) no-repeat 50% 50%;transition: all 0.3s ease-in-out;}
.service-wrap > div:hover .tit-wrap .btn{background-color:rgba(0,0,0,.5)}
.service-wrap > div .tit-wrap .tit{width:calc(100% - 125px);text-align:left;position:relative;}
.service-wrap > div .tit-wrap .tit span{position:absolute;width:100%;padding:0 20px 0 50px;top:50%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);font-size:var(--txt-m);font-family: "Exo 2", sans-serif;line-height:1.2}
.service-wrap > div .tit-wrap .tit b{display:block;font-size:1.6em}
.service-wrap > div .img{padding:50px}
.service-wrap > div .img img{max-width:100%}

.news-bg{background:url(/images/main/bg.jpg) no-repeat 50%/cover;padding:100px; margin-bottom:0 !important}
.news-wrap{width:90%;max-width:1500px; margin:0 auto;display:flex; flex-wrap:wrap; justify-content:space-between}
.news-wrap > div{width:calc(100%/3 - 30px); background:#fff;padding:50px; border-radius:40px;font-size:var(--txt-xs);transition: all 0.3s ease-in-out;}
.news-wrap > div:hover{box-shadow:1px 10px 30px rgba(0,0,0,.15)}
.news-wrap > div a{font-size:1.5em;font-weight:600; line-height:1.3}
.news-wrap > div:hover a{text-decoration:underline;text-underline-position: under;text-decoration-thickness:1px; color:var(--primary)}
.news-wrap > div .txt{margin-top:20px; line-height:1.3;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap:break-word;height: 3.6em;color:#666}
.news-wrap > div .date{margin-top:20px; background:url(/images/main/ico-time.svg) no-repeat 0 50% ; background-size:16px;padding-left:22px;font-size:.9em; color:#888}
.news-bg .btn{text-align:center;margin-top:50px}
.news-bg .btn a{background:var(--primary); color:#fff; height:60px; padding:0 50px;line-height:60px;border-radius:50px;transition: all 0.3s ease-in-out;}
.news-bg .btn a:hover{background:var(--dkb)}

footer {background:#192533}
footer .f-wrap{width:90%;max-width:1500px; margin:0 auto;padding:50px 0;display:flex; flex-wrap:wrap;align-items:center;position:relative;z-index:1;letter-spacing:0}
footer .f-wrap .f-logo{ width:100px; height:36px;overflow:hidden; margin-right:50px}
footer .f-wrap img{width:100%}
footer .f-wrap .f-con{width:calc(100% - 150px); color:#fff;font-size:14px;font-weight:300}
footer .f-wrap .f-con b{display:block;font-size:1.1em;margin-bottom:5px}
footer .f-wrap span{margin-right:30px;}
.btn-top{position:absolute; top:0%; right:0;width:50px;height:50px; background:#365087 url(/images/main/ico-up.svg) no-repeat 50%}


#sub-container{width:90%; max-width:1500px; margin: 200px auto var(--con-space-l) auto; min-height:200px}
#sub-container h2{font-size:var(--tit-xl);font-weight:700;color:#000;margin-top:var(--con-space-l);text-align:center;position:relative; padding-bottom:20px;margin-bottom:50px}
#sub-container h2:after{content:''; position:absolute;width:60px; height:1px; background:#000; left:50%;margin-left:-30px; bottom:0}
#sub-container h2 b{color:var(--primary)}
#sub-container h3{font-size:var(--tit-m);font-weight:700;margin-bottom:10px;color:#000;color:#222;position:relative;margin-top:60px}
#sub-container h3.mt-0{margin-top:0}
#sub-container h4{font-size:var(--tit-s);font-weight:normal;color:#000; padding-left:20px;position:relative;margin-bottom:20px;margin-top:40px}
#sub-container h4:before{content:'';position:absolute; width:8px; height:8px; background:var(--primary);left:0; top:8px;border-radius:100%}

.tit-txt{background:url(/images/sub/quote_img01.png) no-repeat 50% 0; padding-top:50px; font-size:1.2em}
.tit-txt.non-bg{background:none; padding-top:0}
.tit-txt b.line{font-size:1.55em;position:relative;color:var(--primary)}
.tit-txt b.line:after{content:''; position:absolute; height:18px; width:calc(100% + 6px); margin-left:-3px; background:rgba(0,139,255,.2); left:0; bottom:0px; z-indexL-1}

.tbl-basic{table-layout:fixed;width:100%;margin-top:50px}
.tbl-basic thead th{background:rgba(0,115,211,1); color:#fff;padding:15px 10px;font-weight:normal; border-left:1px solid rgba(255,255,255,.2)}
.tbl-basic tbody th{background:rgba(0,115,211,.7); color:#fff;padding:15px 10px;font-weight:normal;;border-bottom:1px solid rgba(255,255,255,.2)}
.tbl-basic tbody td{padding:15px 10px;border-bottom:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);text-align:center}
.tbl-basic tbody td:last-child{border-right:1px solid rgba(0,0,0,.1)}
.tbl-basic tfoot td{background:#0060B1; color:#fff;padding:15px 10px; text-align:center;border-left:1px solid rgba(255,255,255,.2)}

.img-wrap{padding:50px 0; text-align:center}
.img-wrap img{margin:0 auto; max-width:100%}
.value-result{background:var(--primary); padding:30px; border-radius:100px; color:#fff; font-size:1.3em;text-align:center; margin-bottom:50px}

.history li{display:flex; flex-wrap:wrap;border-bottom:1px solid #ddd;padding:30px}
.history li span{display:inline-block; width:calc(100% - 100px);padding-left:30px;padding-top:6px}
.history li span.month{width:100px;background:var(--primary);padding-left:0;padding-top:0;text-align:center; border-radius:50px; color:#fff;line-height:40px}

.value-tit{text-align:center}
.value-tit b{color:#fff; font-size:4em; display:inline-block;-webkit-text-stroke: 1px var(--primary);margin:0 auto;font-weight:900;}
.value-tit b span{-webkit-text-stroke:0; background:var(--primary); padding:20px 50px; border-radius:50px; font-size:30px;font-weight:600;}
.value-wrap .s-tit{display:block;text-align:center;font-size:1.5em; margin-top:30px}

.value-item{display:flex; flex-wrap:wrap; justify-content:space-between}
.value-item > li{margin-top:50px;padding:70px 50px 50px 50px; width:calc(100%/3 - 20px); background:#f6f6f6; border-radius:50px;position:relative}
.value-item > li .tit{color:var(--red); font-size:2.5em; font-weight:800}
.value-item > li .tit span{font-size:18px;font-weight:600;}
.value-item > li em{font-size:4em; font-weight:900; color:rgba(0,0,0,.05);position:absolute;right:30px; top:0px}

.greeting-wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center}
.greeting-wrap > div{width:calc(50% - 50px); font-size:1.2em}
.greeting-wrap > div.img{border-radius:0 100px 100px 0;overflow:hidden} 
.greeting-wrap > div img{max-width:100%}
.greeting-wrap > div.con b{font-size:1.7em; color:var(--primary)}

.tbl-vision{table-layout:fixed;width:100%;font-size:1.2em}
.tbl-vision thead th,.tbl-vision thead td{background:var(--primary); padding:20px; color:#fff; text-align:center;font-weight:400}
.tbl-vision thead td{ border-left:5px solid #fff}
.tbl-vision tbody th{background:rgba(0,115,211,.4); border-top:5px solid #fff; color:#fff; font-weight:400; line-height:1.2}
.tbl-vision tbody tr:nth-child(2) th{background:rgba(0,115,211,.6);}
.tbl-vision tbody tr:nth-child(3) th{background:rgba(0,115,211,.8);}
.tbl-vision tbody td{background:#f2f2f2; border-left:5px solid #fff;border-top:5px solid #fff;padding:20px;text-align:center;}


/* contact */
h4 .ex{font-size:.5em; color:red;font-weight:normal; vertical-align:middle;margin-left:10px; line-height:1.3}
.tbl-form{border-top:2px solid #2B70C1; width:100%; table-layout:fixed;margin-top:15px}
.tbl-form tbody th{padding:15px 20px;text-align:left; font-weight:600; color:#000; border-bottom:1px solid rgba(0,0,0,.1)}
.tbl-form tbody th em{color:red}
.tbl-form tbody td{padding:10px;border-bottom:1px solid rgba(0,0,0,.1)}
.tbl-form tbody td input[type="text"],.tbl-form tbody td input[type="file"],.tbl-form tbody td select{height:50px;background:#f9f9f9; border-radius:5px;padding:0 15px; border:0; min-width:120px;vertical-align:middle; line-height:50px}
.tbl-form tbody td.spamcode > div{display:inline-block;width:100px; height:50px;position:relative; border:1px solid #ddd;vertical-align:middle;margin-right:5px}
.tbl-form tbody td.spamcode > div img{position:absolute; left:50%; top:50%;max-width:100%; max-height:100%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.tbl-form tbody td button.tbl-btn{border:none; height:50px; width:100px; background:#84898E;text-align:center; color:#fff; border-radius:5px;vertical-align:middle;}
.tbl-form tbody td a.tbl-btn{display:inline-block;background:#2B70C1;height:50px;line-height:50px; width:120px;text-align:center; color:#fff; border-radius:5px;vertical-align:middle;}
.tbl-form tbody td.phone input[type="text"]{width:100px}
.tbl-form tbody td.email input[type="text"]{width:120px}

.agree-box{border:1px solid #ddd; padding:15px; font-size:16px;height:220px;overflow-y:auto;margin-top:15px;word-break:keep-all; line-height:1.5;font-weight:300;margin-bottom:10px}
label input[type="checkbox"]{vertical-align:middle; line-height:1; width:18px; height:18px}

.form-btn{margin-top:50px; text-align:center}
.form-btn a{display:inline-block; height:70px; line-height:70px; width:225px; color:#fff;background:#84898E; border-radius:0 20px;font-size:20px; margin:0 5px;transform: skew(-0.03deg);}
.form-btn a.bg-blue{background:#2B70C1}

.form-btn input{display:inline-block; height:70px; line-height:70px; width:225px; color:#fff;background:#84898E; border-radius:0 20px;font-size:20px; margin:0 5px;transform: skew(-0.03deg);}
.form-btn input.bg-blue{background:#2B70C1}

.line-box{border:1px solid #ddd;margin-top:30px}

@media(max-width:1400px){
nav{padding-left:50px}
#header-wrap nav li > a{padding:0 20px;font-size:20px}
}


@media(max-width:1200px){

:root {

  --tit-xxl : 65px;
  --tit-xl : 40px;
  --tit-l : 30px;
  --tit-m : 24px;
  --tit-s : 20px;

  --txt-xxl : 30px;
  --txt-xl : 26px;
  --txt-l : 20px;
  --txt-m : 18px;
  --txt-s : 16px;
  --txt-xs : 14px;

  --con-space-l : 80px;
  --con-space-m : 50px;
  --con-space-s : 25px;
  --con-space-xs : 12px;  
}

#header-wrap{width:90%}
nav{padding-left:0px}
#header-wrap h1{width:130px}
#header-wrap nav li > a{padding:0 12px;font-size:18px}

#sub-visual,.top_tit > div{height:450px}
#sub-container h4{padding-left:18px}
#sub-container h4:before{top:11px; width:10px; height:10px}
#sub-container h5:before{top:9px}

.teacher-list .items{width:calc(100%/3 - 20px);margin-right:calc(60px/2)}
.teacher-list .items:nth-child(3){margin-right:0}
.teacher-list .items:nth-child(4){display:none}

.img-flex > div{width:calc(50% - 15px)}

.logo-img img{height:20px}

.tbl-price{font-size:.8em;}
.tbl-price thead th,.tbl-price tbody td,.tbl-price tbody th{padding:10px 5px;}


}


@media(max-width:1024px){

:root {

  --tit-xxl : 55px;
  --tit-xl : 36px;
  --tit-l : 28px;
  --tit-m : 21px;
  --tit-s : 18px;

  --txt-xxl : 27px;
  --txt-xl : 22px;
  --txt-l : 18px;
  --txt-m : 16px;
  --txt-s : 14px;
  --txt-xs : 13px;

  --con-space-l : 60px;
  --con-space-m : 40px;
  --con-space-s : 20px;
  --con-space-xs : 10px;
}

body{font-size:var(--txt-m)}
header {height:70px}
#header-wrap{height:70px}
header.sticky{height:70px}
#header-wrap nav{display:none}
#header-wrap .toggle-nav{display:block}
header .m-nav .nav-wrap .nav-txt .txt-wrap{width:calc(100% - 250px)}
header .m-nav .nav-wrap .nav-txt .cs-info{width:250px}
header .m-nav .nav-wrap .nav-txt .cs-info b{font-size:1.8em}
header .m-nav .nav-wrap .nav-txt{padding-bottom:40px}
header .m-nav .nav-con > li{width:100%;}
header .m-nav .nav-con > li li{display:inline-block;margin-right:30px}
header .m-nav .nav-con > li > a{font-size:var(--txt-xxl)}
header .m-nav .nav-con > li > ul > li{font-size:var(--txt-l);margin-top:0}
.nav-close{right:30px}
#Gnb{right:45px}


.main-visual,.slid-con{height:700px}
.btn-basic, button.btn-order{ max-width:180px; height:50px;line-height:50px;}


#sub-visual,.top_tit > div{height:350px}

.advern-con li{width:calc(100%/2 - 10px)}
.advern-con li:nth-child(n+3){margin-top:25px}

.teacher-list{justify-content:space-between}
.teacher-list .items{width:calc(100%/2 - 5px);margin-right:0; margin-top:10px}
.teacher-list .items:nth-child(4){display:block}

.partner-img img{width:30%; margin-right:5px}

.img-flex > div{width:calc(50% - 10px)}

.w3 > div{width:calc(100%/3 - 10px)}
.adult-type > div{border-radius:15px}
.adult-type > div > p{left:20px; bottom:20px}

.class-type ul li{width:calc(100%/3 - 10px); margin-right:calc(30px/2)}
.class-type ul li:nth-child(3n){margin-right:0}
.class-type ul li:nth-child(n+4){margin-top:15px}

.logo-img img{height:18px}

.order-list {table-layout:auto}
.order-list colgroup{display:none}

.adven li{width:calc(50%)}
.adven li:last-child{width:100%}

/* contact */
.tbl-form{table-layout:auto;font-size:15px}
.tbl-form colgroup{display:none}
.tbl-form tbody th{width:150px;padding:10px}
.tbl-form tbody td{padding:5px 0}
.tbl-form tbody td input[type="text"], .tbl-form tbody td input[type="file"], .tbl-form tbody td select{height:40px;line-height:40px;min-width:100px;font-size:15px}
.tbl-form tbody td button.tbl-btn{height:40px;font-size:15px; width:80px}
.tbl-form tbody td a.tbl-btn{height:40px;line-height:40px;font-size:15px; width:100px}
.tbl-form tbody td.spamcode > div{height:40px}
.agree-box{font-size:14px;padding:10px}
.form-btn a{height:60px; line-height:60px;width:200px;font-size:18px}
}

@media(max-width:850px){
.main-visual,.slid-con{height:450px}
.main-visual .swiper-pagination-bullets{bottom:30px}

.slid-txt .tit{font-size:2em}

#sub-container h3{margin-bottom:30px}
#sub-container h4{margin-bottom:15px}

.tbl-wrap{width:100%;overflow-x:auto;position:relative}
.tbl-wrap:before{content:'※좌우스크롤시 자세한 내용을 확인 할 수 있습니다.';font-size:13px; color:red}
.tbl-wrap table{min-width:1000px}


.quick{position:fixed; right:5px; top:auto;bottom:40px; z-index:999;-webkit-transform: translateY(0%); -moz-transform: translateY(0%);-ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%);}
.quick a{width:50px; height:auto; font-size:10px;padding:5px;border-radius:5px;margin-bottom:5px}
.quick a img{height:28px}

.pr-wrap .items > div{width:100%}
.pr-wrap .items:nth-child(odd) .con{order:2;padding:20px}
.pr-wrap .items:nth-child(odd) .img{order:1}
.pr-wrap .items .img{border-radius:20px; min-height:250px}

.type-list li{width:100%; border-radius:15px}
.type-list li:nth-child(n+2){margin-top:20px}
.type-list li img{width:100%}
.type-list li .img a{width:100%}

.teacher-list .items .con{padding:10px}

footer .f-wrap{padding:30px 0}
footer .f-wrap .f-info,footer .f-wrap .f-cs{width:100%; text-align:center}
footer .f-wrap .f-cs{margin-top:30px}
footer .copy{font-size:12px}

#sub-visual, .top_tit > div{height:200px;}
.top_tit h2{padding-top:50px}

#quick{right:5px;bottom:5px;top:auto;-webkit-transform: translateY(0%);  -moz-transform: translateY(0%);  -ms-transform: translateY(0%);  -o-transform: translateY(0%);  transform: translateY(0%); }

.img-flex > div{width:100%}
.img-flex > div.img{height:350px; margin-bottom:30px; border-radius:20px}
.edu-footer img{width:40px}

.edu-03{min-height:250px;}
.dot-list li:before{top:7px}

.service,.overview-bg,.service .service-con dl{border-radius:20px}
.overview-bg br{display:none}

.service .service-con{padding:0 20px 20px 20px}
.service .service-con .simbol{width:200px; height:200px; border-width:10px;margin-left:-100px; margin-top:-130px}
.service .service-con dl{width:calc(50% - 5px)}
.service .service-con dl:nth-child(n+3){margin-top:10px}

.kakao-wrap > div{width:100%}
.kakao-wrap > div.channel{margin-top:20px}

.check-con{padding:15px}

.order-form{table-layout:auto;width:100%}
.order-form, .order-form tbody, .order-form tbody tr, .order-form tbody td, .order-form tbody th{display:block; padding:0; border:none; background:none;}
.order-form tbody tr{background:#f9f9f9;width:100%;padding:15px;border-top:1px dashed #ddd}
.order-form tbody th{display:inline-block; padding:5px 15px; background:var(--primary); color:#fff; border-radius:3px;}
.order-form tbody td{margin-top:5px}
.order-form tbody td input[type="text"],.order-form tbody td input[type="number"]{background:#fff}
.order-form tbody tr:first-child{border-top:none}
.order-form colgroup{display:none}

}

@media(max-width:768px){
:root {

  --tit-xxl : 48px;
  --tit-xl : 26px;
  --tit-l : 22px;
  --tit-m : 18px;
  --tit-s : 16px;

  --txt-xxl : 24px;
  --txt-xl : 20px;
  --txt-l : 16px;
  --txt-m : 14px;
  --txt-s : 13px;
  --txt-xs : 12px;

  --con-space-l : 40px;
  --con-space-m : 30px;
  --con-space-s : 15px;
}

body{font-size:14px}

.slid-txt{font-size:var(--tit-s);}

.btn-basic, button.btn-order{ max-width:150px; height:40px;line-height:40px;}

#sub-container h5{padding-left:14px;line-height:1}
#sub-container h5:before{top:50%; margin-top:-3px;width:6px; height:6px}

.advern-con li{border-radius:10px}
.advern-con li .con{padding:10px 20px}
.advern-con li .con p{display:none}
.advern-con li .con .tit{display:block; font-size:14px; text-align:center}

.adult-type > div{width:100%}
.adult-type > div:nth-child(n+2){margin-top:20px}

.service .service-con dl{width:100%; min-height:auto; text-align:left !important; border-radius:10px; padding:10px 20px}
.service .service-con dl:nth-child(n+2){margin-top:10px}
.service .service-con .simbol{display:none}
.overview-bg > div img{width:250px}

.kakao-wrap{border-radius:15px; padding:30px 15px 15px 15px}
.kakao-wrap img{width:100px}
.channel{border-radius:10px}
.channel img{width:80px}

.class-type ul {justify-content:space-between; padding:10px}
.class-type ul li{width:calc(100%/2 - 5px); margin-right:0 !important}
.class-type ul li:nth-child(n+3){margin-top:10px}
.logo-img img{height:15px}

.adven li{width:100% !important}

.teacher-list .items .con .profile-ko{font-size:14px;}
.teacher-list .items .con .profile-en {font-size:12px;}

/* contact */
h4 .ex{display:block;margin:0;margin-top:10px; font-size:13px}
.tbl-form,.tbl-form tbody, .tbl-form tbody tr, .tbl-form tbody tr th, .tbl-form tbody tr td{display:block;padding:0;border:0;font-size:14px}
.tbl-form{border-top:2px solid #2B70C1;}
.tbl-form tbody tr{padding:10px 0; border-bottom:1px solid #ddd}
.tbl-form tbody th{width:100%;margin-bottom:10px}
.tbl-form tbody td{padding:5px 0}
.tbl-form tbody td input[type="text"], .tbl-form tbody td input[type="file"], .tbl-form tbody td select{height:40px;line-height:40px;min-width:100px;font-size:14px;padding:0 5px}
.tbl-form tbody td button.tbl-btn{height:40px;font-size:13px; width:70px}
.tbl-form tbody td a.tbl-btn{height:40px;line-height:40px;font-size:13px; width:90px}
.tbl-form tbody td.spamcode > div{height:40px}
.tbl-form tbody td.email input[type="text"]{width:calc(50% - 10px)}
.tbl-form tbody td.email select{width:98%;margin-top:5px}
.tbl-form tbody td.phone input[type="text"], .tbl-form tbody td.phone select{width:calc(100%/3 - 5px)}
.tbl-form tbody td.file input[type="file"]{width:calc(100% - 95px)}
.form-btn{margin-top:20px}
.form-btn a,.form-btn input{display:inline-block;height:50px; line-height:50px;width:calc(50% - 15px);margin:0 5px;font-size:16px;border-radius:0 10px}

.tbl-form tbody td.w100 input[type="text"]{width:100%}
}

@media(max-width:450px){
.img-flex > div.img{height:250px}
}