@charset "utf-8";


#intro1 .t_img{background: url('../img/sub/intro1_bg_251014.png') center center / cover no-repeat; text-align: center; width: 100%; height: 700px; color: #fff; display: flex; align-items: center;justify-content: center;}
#intro1 .t_img .txt{padding: 0 20px;}
#intro1 .t_img h3{font-weight: 600; font-size: 32px; margin-bottom: 20px;}
#intro1 .t_img p{line-height: 32px; font-size: 18px; opacity: 0.8;}
#intro1 .cont{margin-top: 140px; display: flex;}
#intro1 .cont .img{text-align: center; width: 560px;}
#intro1 .cont .txt h3{font-size: 30px; margin-bottom: 40px;}
#intro1 .cont .txt h3 span{color: #1668c6;}
#intro1 .cont .txt p{font-size: 18px; line-height: 38px;}
#intro1 .cont .txt p + p{margin-top: 30px;}
#intro1 .cont .txt p.name{font-weight: bold; font-size: 20px;}


@media screen and (max-width:1400px){
    #intro1 .t_img{height: 600px;}
    #intro1 .cont{margin-top: 100px;}
    #intro1 .cont .img{width: 430px;}
}
@media screen and (max-width:1280px){
    #intro1 .cont .img{width: 30%;}
    #intro1 .cont .img img{width: 100%;padding: 0 50px;}
    #intro1 .cont .txt{width: 70%;}
    #intro1 .cont .txt h3{font-size: 25px; margin-bottom: 30px;}
    #intro1 .cont .txt p{font-size: 16px; line-height: 30px;}
    #intro1 .cont .txt p + p{margin-top: 20px;}
    #intro1 .cont .txt p.name{font-size: 18px;}
}
@media screen and (max-width:1080px){
    #intro1 .t_img{height: 500px;}
    #intro1 .cont{margin-top: 80px;}
    #intro1 .cont .txt p br{display: none;}
}
@media screen and (max-width:880px){
    #intro1 .t_img h3{font-size: 28px;}
    #intro1 .t_img p{line-height: 28px; font-size: 16px;}
    #intro1 .cont{flex-wrap: wrap;}
    #intro1 .cont .img{width: 100%;}
    #intro1 .cont .img img{max-width: 287px;}
    #intro1 .cont .txt{width: 100%; margin-top: 50px;}
    #intro1 .cont .txt p br{display: block;}
}
@media screen and (max-width:786px){
    #intro1 .cont .txt p br{display: none;}
}
@media screen and (max-width:680px){
    #intro1 .t_img{height: 400px;}
    #intro1 .cont{margin-top: 60px;}
}
@media screen and (max-width:580px){
    #intro1 .t_img p br{display: none;}
}
@media screen and (max-width:480px){
    #intro1 .t_img{height: 500px;}
    #intro1 .t_img h3{font-size: 2.6rem;}
#intro1 .t_img p{font-size: 1.6rem;}
    #intro1 .cont .txt h3{font-size: 2.5rem;}
    #intro1 .cont .txt p{font-size: 1.6rem; line-height: 3rem;}
    #intro1 .cont .txt p + p{margin-top: 20px;}
    #intro1 .cont .txt p.name{font-size: 1.8rem;}
}


#intro2 {}
#intro2 .inner {display:flex; justify-content:space-between; gap: 50px;}
#intro2 .inner + .inner{margin-top: 100px; padding-top: 100px; border-top: 1px solid #deeeff;}
#intro2 .inner .img{width: 45%;}
#intro2 .inner .img img{width: 100%; min-width: 600px;}
#intro2 .inner .txt{width: 55%; padding-top: 40px;}
#intro2 .inner .eng{font-family: 'Marcellus'; font-size: 20px; font-weight: bold; color: #238bfd;}
#intro2 .inner .txt > h3{font-size: 30px; font-weight: normal; line-height: 1.4em;}
#intro2 .inner .txt > h3 span{font-weight: bold;}
#intro2 .inner #contWrap{margin-top: 30px; padding-top: 30px; border-top: 1px solid #deeeff;}
#intro2 .inner #contWrap h4{font-size: 20px;color: #238bfd; margin-bottom: 10px;}
#intro2 .inner #contWrap h3{font-size: 40px;}
#intro2 .inner #contWrap h3 span{font-weight: normal;}
#intro2 .inner #contWrap p.t1{margin: 10px 0 20px;font-size: 20px; background: #238bfd; color: #fff; display: inline-block; padding: 3px 30px; border-radius: 100px;}
#intro2 .inner #contWrap .box{padding: 40px; background: #f2f8ff;}
#intro2 .inner #contWrap .box h4{font-size: 20px; color: #238bfd; margin-bottom: 20px; display: flex; align-items: center;gap: 5px;}
#dotList{font-size: 18px;}
#dotList li{position: relative; padding-left: 25px;}
#dotList li::after{position: absolute; content: '•'; color: #238bfd; left:5px;top: 0;}
#dotList li + li{ margin-top: 15px;}


@media screen and (max-width:1280px){
    #intro2 .inner + .inner{margin-top: 80px; padding-top: 80px;}
    #intro2 .inner .img{width: 40%;}
    #intro2 .inner .txt{width: 60%;}
    #intro2 .inner .eng{font-size: 18px;}
    #intro2 .inner .txt > h3{font-size: 27px;}
    #intro2 .inner #contWrap h4{font-size: 18px;}
    #intro2 .inner #contWrap h3{font-size: 35px;}
    #intro2 .inner #contWrap p.t1{font-size: 18px;}
    #intro2 .inner #contWrap .box{padding: 30px;}
    #intro2 .inner #contWrap .box h4{font-size: 18px; margin-bottom: 10px;}
    #dotList{font-size: 16px;}
    #dotList li + li{ margin-top: 10px;}
}
@media screen and (max-width:980px){
    #intro2 .inner{flex-wrap: wrap; justify-content: center;}
    #intro2 .inner .img{width: 100%;text-align: center; order: 1;}
    #intro2 .inner .txt{width: 100%; order: 2;}
}
@media screen and (max-width:580px){
    #intro2 .inner + .inner{margin-top: 60px; padding-top: 60px;}
    #intro2 .inner .txt{padding-top: 0;}
}
@media screen and (max-width:480px){
    #intro2 .inner + .inner{margin-top: 40px; padding-top: 40px;}
    #intro2 .inner .eng{font-size: 1.4rem;}
    #intro2 .inner .txt > h3{font-size: 2.2rem;}
    #intro2 .inner #contWrap{margin-top: 20px; padding-top: 20px;}
    #intro2 .inner #contWrap h4{font-size: 1.6rem;margin-bottom: 0.5rem;}
    #intro2 .inner #contWrap h3{font-size: 3rem;}
    #intro2 .inner #contWrap p.t1{font-size: 1.6rem;}
    #intro2 .inner #contWrap .box{padding: 20px;}
    #intro2 .inner #contWrap .box h4{font-size: 1.7rem;}
    #dotList{font-size: 1.6rem;}
    #dotList li{padding-left: 20px;}
}


.location + .location{margin-top: 100px;}
.location > h3{font-size: 30px; padding-bottom: 20px; border-bottom: 1px solid #000; margin-bottom: 20px;}
.location .m_wrap{display: flex; align-items: center;background:#f2f8ff url('../img/sub/intro3_img.png') 102% 110% / 300px no-repeat;}
.location .m_wrap .l_box{width:55%; height: 500px;}
.location .m_wrap .r_box{padding: 0 50px; width: 45%;}
.location .m_wrap .r_box h3{font-size: 30px; margin-bottom: 25px;}
.location .m_wrap .r_box h3 span{color: #238bfd;}
.location .m_wrap .r_box dl{font-size: 20px;}
.location .m_wrap .r_box dl dt{display: flex; align-items: center;gap: 10px; font-weight: bold;}
.location .m_wrap .r_box dl dt i{font-size: 20px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: #e9f3ff; border-radius: 100px; color: #238bfd;}
.location .m_wrap .r_box dl dd{margin-top: 10px;}
.location .m_wrap .r_box dl + dl{margin-top: 20px;}
.location ul{display: flex; margin-top: 30px;gap: 10px;}

@media screen and (max-width:1280px){
    .location .m_wrap .r_box{width:50%;}
    .location .m_wrap .l_box{width:50%;}
}
@media screen and (max-width:980px){
    .location .m_wrap{flex-wrap: wrap;}
    .location .m_wrap .l_box{width:100%;}
    .location .m_wrap .r_box{width:100%;padding: 50px;}
}
@media screen and (max-width:780px){
    .location + .location{margin-top: 70px;}
    .location > h3{font-size: 25px; padding-bottom: 10px;}
    .location .m_wrap .l_box{height: 400px;}
    .location .m_wrap .r_box{padding: 40px;}
    .location .m_wrap .r_box h3{font-size: 25px; margin-bottom: 20px;}
}
@media screen and (max-width:480px){
    .location + .location{margin-top: 50px;}
    .location > h3{font-size: 2.5rem;}
    .location .m_wrap .l_box{height: 300px;}
    .location .m_wrap .r_box{padding: 3em;}
    .location .m_wrap .r_box h3{font-size: 2.3rem;}
    .location .m_wrap .r_box dl{font-size: 1.8rem;}
    .location .m_wrap .r_box dl dt i{font-size: 18px; width: 30px; height: 30px;}
    .location .m_wrap .r_box dl + dl{margin-top: 15px;}
    .location ul{margin-top: 20px;}
}



.info1{}
.info1 .pin{width: 100%; height: 100vh; position: relative;}
.info1 .info1_bg{position: sticky; min-width: 1400px; width: 72.917%; overflow: hidden; margin: 0 auto; top: 0;}
.info1 .info1_bg .bg{ width: 100%; height: 100vh; background: url(../img/sub/info1_bg.png) no-repeat center center / cover; overflow: hidden;}
.info1 .info1_bg .txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.4); opacity: 0;}
.info1 .info1_bg .txt .inner{}
.info1 .info1_bg .txt .inner h3{text-align: center; color: #fff; font-size: 56px; word-break: keep-all;}
.info1 .cont_box{margin-top: 140px; max-width: 1200px; margin-left: auto; margin-right: auto; counter-reset: count;}
.info1 .cont_box .cont{display:flex;}
.info1 .cont_box .cont + .cont{margin-top: 120px;}
.info1 .cont_box .cont .l_cont{width: 35%;}
.info1 .cont_box .cont .l_cont h3{font-size: 40px; color: #000; position: relative;}
.info1 .cont_box .cont .l_cont h3::before{content: counter(count); counter-increment: count; color: #fff; font-size: 12px; font-weight: 700; width: 26px; height: 26px; background-color: #238bfd; border-radius: 100%; display: flex; justify-content: center; align-items: center; top: -20px; left: -28px; position: absolute;}
.info1 .cont_box .cont .r_cont{width: 65%;}
.info1 .cont_box .cont .r_cont p{font-size: 20px; line-height: 1.6em; word-break: keep-all;}
.info1 .cont_box .cont .r_cont .img{border-radius: 20px; overflow: hidden; margin-top: 30px;}
.info1 .cont_box .cont .r_cont .img img{max-width: 100%;}

@media all and (max-width:1600px){
    .info1 .info1_bg{min-width: 1200px;}
}
@media all and (max-width:1400px){
    .info1 .cont_box .cont .l_cont h3{margin-left: 3%;}
}
@media all and (max-width:1280px){
    .info1 .info1_bg{min-width: 0; width: 85%;}
	.info1 .info1_bg .txt .inner h3{font-size: 56px;}
	.info1 .cont_box .cont .l_cont h3{font-size: 36px;}
}
@media all and (max-width:1024px){
    .info1 .info1_bg{width: 90%;}
	.info1 .info1_bg .txt .inner h3{font-size: 48px;}
	.info1 .cont_box{margin-top: 120px;}
	.info1 .cont_box .cont .l_cont{width: 240px;}
	.info1 .cont_box .cont .l_cont h3{font-size: 32px;}
	.info1 .cont_box .cont .l_cont h3::before{width: 23px; height: 23px; top: -18px; left: -25px; font-size: 11px;}
	.info1 .cont_box .cont .r_cont{width: calc(100% - 240px);}
	.info1 .cont_box .cont .r_cont p{font-size: 19px;}
	.info1 .cont_box .cont .r_cont .img{margin-top: 25px;}
}
@media all and (max-width:768px){
    .info1 .pin{height: 50vh;}
    .info1 .info1_bg .bg{height: 50vh;}
	.info1 .info1_bg .txt .inner h3{font-size: 42px; max-width: 88vw; margin-left: auto; margin-right: auto;}
	.info1 .info1_bg .txt .inner h3 br{display: none;}
	.info1 .cont_box{margin-top: 100px;}
	.info1 .cont_box .cont{flex-direction: column;}
	.info1 .cont_box .cont + .cont{margin-top: 80px;}
	.info1 .cont_box .cont .l_cont, .info1 .cont_box .cont .r_cont{width: 100%;}
	.info1 .cont_box .cont .l_cont h3{margin-left: 0; font-size: 28px;}
	.info1 .cont_box .cont .l_cont h3 br{display: none;}
	.info1 .cont_box .cont .l_cont h3::before{top: 0; left: 0; position: static; margin-bottom: 6px; padding-right: 1px;}
	.info1 .cont_box .cont .r_cont{margin-top: 25px;}
	.info1 .cont_box .cont .r_cont p{font-size: 18px;}
	.info1 .cont_box .cont .r_cont .img{border-radius: 15px;}
}
@media all and (max-width:500px){
    .info1 .info1_bg .txt .inner h3{font-size: 36px;}
	.info1 .cont_box{margin-top: 80px;}
	.info1 .cont_box .cont + .cont{margin-top: 60px;}
	.info1 .cont_box .cont .l_cont h3{font-size: 24px;}
	.info1 .cont_box .cont .r_cont{margin-top: 22px;}
	.info1 .cont_box .cont .r_cont p{font-size: 17px;}
}


.lesson1{display: flex; flex-wrap: wrap;gap: 20px;}
.lesson1 > li{width: calc(100%/2 - 10px);background: #ddd; border-radius: 10px; height: 400px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; position: relative; overflow: hidden;}
.lesson1 > li .top{position:relative; padding: 40px;}
.lesson1 > li .top::after{position: absolute; content: ''; background: linear-gradient(to bottom, #000, transparent); width: 100%; height: 100%; top: 0;left: 0; opacity: 0.7;}
.lesson1 > li:hover .top::after{opacity: 0; transition: 0.5s;}
.lesson1 > li::before{position: absolute; content: '';background: linear-gradient(to bottom, #000, transparent);  width: 100%; height: 100%; top: 0;left: 0; opacity: 0.7; top: -400px; transition: 0.5s;}
.lesson1 > li:hover::before{background: linear-gradient(180deg, rgba(0, 0, 0, 0.89) 0%, rgba(0, 0, 0, 0.59) 100%); opacity: 1; top: 0; transition: 0.5s;}
.lesson1 > li h4{font-family: 'Marcellus';font-size: 16px; opacity: 0.5;z-index:999; position: relative;}
.lesson1 > li h3{font-size: 35px; margin-top: 10px;z-index: 999; position: relative;z-index: 10;}
.lesson1 > li p{font-size: 20px; line-height: 30px; text-align: right; z-index: 10; position: absolute; bottom: -100px; right: 40px; transition: 0.5s; opacity: 0;}
.lesson1 > li:hover p{bottom: 40px;transition: 0.5s; opacity: 1;}
.lesson1 > li:nth-child(1){background: url(../img/sub/lesson1_img1.png) no-repeat; background-size: cover;}
.lesson1 > li:nth-child(2){background: url(../img/sub/lesson1_img2.png) no-repeat; background-size: cover;}
.lesson1 > li:nth-child(3){background: url(../img/sub/lesson1_img3_251014.png) no-repeat; background-size: cover;}
.lesson1 > li:nth-child(4){background: url(../img/sub/lesson1_img4.png) no-repeat; background-size: cover;}
.lesson1 > li:nth-child(5){background: url(../img/sub/lesson1_img5.png) no-repeat; background-size: cover;}


@media all and (max-width:1280px){
    .lesson1 > li p{font-size: 18px; padding-left: 40px;}
    .lesson1 > li p br{display: none;}
}
@media all and (max-width:980px){
    .lesson1 > li{height: 300px;}
    .lesson1 > li h4{font-size: 14px;}
    .lesson1 > li h3{font-size: 30px;}
    .lesson1 > li{width: 100%;}
    .lesson1 > li p{font-size: 16px;}
    .lesson1 > li p br{display: block;}
}
@media all and (max-width:580px){
    .lesson1 > li{height: 280px;}
    .lesson1 > li .top{padding: 20px;}
    .lesson1 > li h4{font-size: 1.4rem;}
    .lesson1 > li h3{font-size: 2.7rem;}
    .lesson1 > li .top::after{display: none;}
    .lesson1 > li::before{background: #000; opacity: 0.4; top: 0;}
    .lesson1 > li:hover::before{background: #000; opacity: 0.4;}
    .lesson1 > li p{position: relative; bottom: 0; opacity: 1;padding: 20px; right: 0; font-size: 1.5rem; line-height: 2.6rem;}
    .lesson1 > li:hover p{bottom: 0;}
}

.lesson2 {background: url(../img/sub/lesson2_bg.png) center center / contain no-repeat;height: 500px;display: flex;align-items: center;justify-content: center;text-align: center;}
.lesson2 .inner {position: relative;display: flex;flex-direction: column;gap: 10px;}
.lesson2 .wrap {position: relative;display: flex;justify-content: center;height: 56px;overflow: hidden;}
.lesson2 .wrap strong {font-size: 2.5rem;line-height: 3.5rem;font-weight: 400;color: #b9bfbc;white-space: nowrap;}
.lesson2 .wrap strong span { color: #238bfd; font-weight: 600; }
.lesson2 .wrap strong.cr2 {color: #202020;position: absolute;left: 50%; top: 0;transform: translateX(-50%);width: 100%;clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);transition: clip-path 2s ease;}
.lesson2 .wrap strong.cr2 span { color: #238bfd; }
.lesson2 .wrap strong.cr3 { transition-delay: .3s; }
.lesson2 .wrap strong.cr4 { transition-delay: .7s; }
.lesson2.on .wrap strong.cr2 {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

@media all and (max-width:1400px){
    .lesson2 {height: 400px;}
}
@media all and (max-width:1280px){
    .lesson2 .wrap {height: 38px;}
    .lesson2 .wrap strong {font-size: 3.5rem;line-height: 4.5rem;}
}
@media all and (max-width:680px){
    .lesson2 {height:30rem;}
    .lesson2 .wrap {height: 3rem;}
    .lesson2 .wrap strong {font-size: 2.5rem; line-height: 3.5rem;}
}


#proHalf  {margin-top:5%;  padding-top:50px; display:flex; flex-wrap:wrap;  border-top:2px solid #111;}
#proHalf #tit {width:450px;  position:sticky; top:150px; max-height:200px;}
#proHalf #tit .eng {margin-bottom:0.5em; font-size:3.3rem; font-family:'Marcellus'; position:relative;display:inline-block; text-transform:uppercase}
#proHalf #tit h3 {font-size:1.8rem; color:#111;}
#proHalf #cont {width:calc(100% - 450px)}
#proHalf #cont {display:flex; flex-wrap:wrap; gap:20px;  }
#proHalf #cont .in-box {width:100%; border:7px solid #eef6ff;padding:30px; background:#FFF }
#proHalf #cont .img {}
#proHalf #cont .img img {width:100%}
#proHalf #cont .cont h3 {padding:0.5em 1em; font-size:20px; color:#FFF; background:#238bfd;display:inline-block; border-radius: 100px;}
#proHalf #cont .cont ul {margin:20px 0 10px}
#proHalf #cont .cont dl { display:flex; font-size:18px; flex-wrap: wrap; gap: 15px;}
#proHalf #cont .cont dl + dl {border-top:1px dashed #e0e3e5; padding-top:0.8em; margin-top:0.8em}
#proHalf #cont .cont dl dt {color:#111; font-weight: bold; font-size: 25px;}
#proHalf #cont .cont dl dt  span{font-family:'Marcellus';}
#proHalf #cont .cont dl dd {width: 100%; line-height: 30px;}
#proHalf #cont .cont .p_box {display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;}
#proHalf #cont .cont .p_box p{ padding: 15px 30px; border-radius: 5px; color: #222; font-size: 17px; background: #eef6ff;}
#proHalf #cont .cont .p_box p span{display: inline-block; font-weight: 800; margin-right: 20px; font-size: 18px; position: relative;}
#proHalf #cont .cont .p_box p span:after{content: ''; position: absolute; right: -14px;top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #808080;}

@media all and (max-width:1399px) {
    #proHalf #tit {width:380px;}
	#proHalf #cont {width:calc(100% - 380px)}
}
@media all and (max-width:1280px) {
    #proHalf #tit .eng {font-size: 4.5rem;}
    #proHalf #tit h3 {font-size:2.8rem;}
}
@media all and (max-width:1024px) {
    #proHalf #tit {width:100%; position:unset; display:flex; margin-bottom:30px; flex-wrap: wrap;}
	#proHalf #tit h3 {padding-left:0em; width: 100%;}
    #proHalf #tit .eng {margin-bottom: 0;}
	#proHalf #cont {width:100%}
}
@media all and (max-width:768px) {
    #proHalf  {margin-top:10%;  padding-top:30px; }
	#proHalf #tit {display:unset; text-align:center; margin-bottom:30px}
	#proHalf #tit .eng {margin-bottom:0.2em;}
	#proHalf #cont {gap:10px;  }
    #proHalf #cont .cont h3 {font-size: 18px;}
    #proHalf #cont .cont dl dt {font-size: 20px;}
    #proHalf #cont .cont dl dd {font-size: 16px; line-height: 26px;}
    #proHalf #cont .cont .p_box p{font-size: 15px; padding: 10px 20px;}
    #proHalf #cont .cont .p_box p span{font-size: 16px;}
}
@media all and (max-width:680px) {
    #proHalf #cont {gap:10px 0;  }
	#proHalf #cont .in-box {width:100%}
}
@media all and (max-width:480px) {
    #proHalf #tit h3 {font-size:2.5rem;}
    #proHalf #cont .in-box {padding: 2rem;}
    #proHalf #cont .cont h3 {font-size: 1.8rem;}
    #proHalf #cont .cont dl dt {font-size: 2rem;}
    #proHalf #cont .cont dl dd {font-size: 1.6rem; line-height: 2.6rem;}
    #proHalf #cont .cont .p_box p{font-size: 1.5rem; padding: 1rem 1.5rem;}
    #proHalf #cont .cont .p_box p span{font-size: 1.6rem;}
}