
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

@media all and (max-width:1920px){
.fp-tableCell { width:1920px; height:100vh; }
}




.fp-slidesContainer {
    float: left;
    position: relative;
}
.fp-controlArrow {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
    overflow: hidden;
    position: relative;
}
.fp-scroller{
    overflow: hidden;
}
.iScrollIndicator{
    border: 0 !important;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translate3d(0,-50%,0);
}
#fp-nav.fp-right {
    right: 17px;
}
#fp-nav.fp-left {
    left: 31px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    left: 0 !important;
    right: 0;
    margin: 0 auto !important;
}
.fp-slidesNav.fp-bottom {
    bottom: 17px;
}
.fp-slidesNav.fp-top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    height:50px;
    margin: 0px;
    position:relative;

}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    width: 6px;
    height: 30px;
    margin: 50px 0px 0px 0px;
      background: #52FF00;
	  border-radius: 10px;
	 
 }
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 6px;
    width: 6px;
    border: 0;
    background: #F0F0F0;
    left: 50%;
    top: 50%; 
	margin:60px 0px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#fp-nav ul li .fp-tooltip {
    position: fixed;
    top: -200px;
    color: #fff;
    font-size:17px;
    line-height:140%;
    font-family:'ONE Mobile OTF Regular';
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
	transform: rotate(-90deg);
	
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: 300px;
	height:80px;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.fp-right {
    right: 20px;
}
#fp-nav ul li .fp-tooltip.fp-left {
    left: -121px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
    height: auto !important;
}

/*Only display content to screen readers*/
.fp-sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}



.image-con {width:100%;}
.image-con li {position:relative; width:20%; height:100vh; overflow:hidden; float:left;   }
.image-con li img {position:absolute; width:100%; height:100%; object-fit: cover;transition: opacity 0.5s ease-in-out;    }
.image-con li img.hover-image { opacity:0;  }
.image-con li:hover img.hover-image {opacity:1;  }
.image-con li:hover img.default-image { opacity:0;}

.image-con li .text1_area {position:absolute; z-index:99; color:#fff; top:180px; left:50px; font-family:'ONE Mobile OTF Regular'; font-weight:400; font-size:16px; line-height:140%; transition:.5s;}
.image-con li .text1_area p.tit_a2 {font-family:'ONE Mobile Title OTF'; font-weight:400; font-size:26px; line-height:140%; margin-top:10px;}
.image-con li:hover .text1_area {top:200px;}


.image-con li .text2_area {position:absolute; z-index:99; color:#fff; top:714px; left:50px;  transition:.5s;}
.image-con li .text2_area span.txt_a1 {height:90px; font-family:'ONE Mobile Title OTF'; font-weight:400; font-size:20px; line-height:140%; text-transform: uppercase; overflow:hidden; display:block}
.image-con li .text2_area p.txt_a2 {font-family:'ONE Mobile OTF Light'; font-weight:400; font-size:16px; line-height:140%; margin-top:20px;}
.image-con li:hover .text2_area {top:690px;}


#myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:3;
	}





.s_tit_area1 {width:900px; margin:185px 0px 0px 210px; background:url('../images/school/Vector_1.png') no-repeat 0px 0px; background-size:18px 18px; font-family:'ONE Mobile Title OTF'; 
font-weight: 400; font-size: 50px; line-height: 140%; color: #FFFFFF; padding:20px; z-index:999999; position:relative;}
.s_tit_area1 p.s_tit_txt1 {font-weight: 400; font-size: 24px; line-height: 140%; color: #FFFFFF; margin-top:10px; font-family:'ONE Mobile OTF Regular'; z-index:999999; }
.s_tit_area1 p.s_tit_txt2 {font-weight: 500; font-size: 26.5px; line-height: 140%; color: #FFFFFF; font-family:'ONE Mobile OTF Regular'; z-index:999999; }
.s_tit_area1 p.s_tit_txt3 {font-weight: 200; font-size: 30px; line-height: 140%; color: #FFFFFF; margin-top:40px; font-family:'ONE Mobile Title OTF'; text-transform: uppercase; letter-spacing: -0.025em; z-index:999999;  }


.s_txt_area1 {float:left; margin:160px 0px 0px 230px; z-index:999999; position:relative;}
.s_txt_area2 {position: absolute; top:700px; right:158px; width:332px; height:130px; padding:30px; color: #00EEFF;  font-family:'ONE Mobile OTF Regular'; font-size: 15px;
z-index:999999; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(15px); border-radius: 10px;}

.s_txt_area22 {position: absolute; top:700px; right:158px; width:332px; height:130px; z-index:999999; }

.s_tit_area2 {width:996px; position: absolute; left:50%; top:168px; text-align:center; background:url('../images/school/Vector_1.png') no-repeat 120px 0px;  background-size:18px 18px; font-family:'ONE Mobile OTF Regular'; color: #FFFFFF; 
font-weight:400; font-size:26px; line-height:140%; margin-left:-491px; padding-top:15px; letter-spacing: -0.025em;}
.s_tit_area2 p.s_tit_txt4 {font-family:'ONE Mobile Title OTF'; font-size:40px; line-height: 140%; font-weight: 400; margin-top:10px;}

.s_txt_area3 {float:left;}
.s_txt_area4 {float:left; margin:38px 0px 0px 180px;}


.s_tit_area3 {width:430px; margin:156px 0px 0px 148px;  text-align:left; font-family:'ONE Mobile OTF Regular'; color: #FFFFFF; font-weight:400; font-size:20px; line-height:140%;  letter-spacing: -0.025em; float:left;}
.s_tit_area3 p.s_tit_txt5 {font-family:'ONE Mobile Title OTF'; font-size:30px; line-height: 140%; font-weight: 400; margin-top:10px; color: #FFFFFF;}
.s_tit_area3 p.s_tit_txt6 {font-family:'ONE Mobile OTF Light'; font-size:15px; line-height: 160%; font-weight: 200; margin-top:40px; color: #FFFFFF; width:430px; }


.s_txt_area5 {float:left; margin:114px 0px 0px 86px;}
.s_txt_area6 {float:left; margin:40px 0px 0px 86px;;}


.left_school_1 {width:34%; height:100%; background:url('../images/school/bg_8.png') no-repeat 0px 80px; background-size:100% 100%; float:left;}
.left_school_2 {width:34%; height:100%; background:url('../images/school/bg_9.png') no-repeat 0px 80px; background-size:100% 100%; float:left;}
.s_txt_area7 { width:66%; height:100%; float:right; background:url('../images/school/bg_10.png') no-repeat right bottom; background-size:1242px 702px;}

.s_txt_area8 {float:left; margin:114px 0px 0px 86px;}
.s_txt_area9 {position: absolute; top:183px; right:127px;}


.s_tit_area4 {width:1070px; position: absolute; left:50%; top:168px; text-align:center; background:url('../images/school/Vector_1.png') no-repeat 420px 0px;  background-size:18px 18px; font-family:'ONE Mobile OTF Regular'; color: #FFFFFF; 
font-weight:400; font-size:26px; line-height:140%; margin-left:-535px; padding-top:15px; letter-spacing: -0.025em;}
.s_tit_area4 p.s_tit_txt4 {font-family:'ONE Mobile Title OTF'; font-size:40px; line-height: 140%; font-weight: 400; margin-top:10px;}


.s_tit_area5 {width:246px; position: absolute; left:50%; top:480px; text-align:center; background:url('../images/school/Vector_1.png') no-repeat 0px 0px;  background-size:18px 18px; font-family:'ONE Mobile OTF Regular'; color: #FFFFFF; 
font-weight:400; font-size:26px; line-height:140%; margin-left:-123px; padding:17px 0px 0px 12px; letter-spacing: -0.025em;}


.s_txt_area11 {position: absolute; top:558px; left:50%; margin-left:-855px; width:1711px; height:105px;}
.s_txt_area12 {position: absolute; top:733px; left:50%; margin-left:-563px; width:1126px; height:90px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(25px); border-radius: 10px;
font-family:'ONE Mobile Title OTF'; font-weight: 400; font-size: 22px; line-height:90px; color: #FFFFFF; text-align:center;}



.left_school_3 {width:34%; height:100%; background:url('../images/school/bg_13.png') no-repeat 0px 80px; background-size:100% 100%; float:left; }
.left_school_4 {width:34%; height:100%; background:url('../images/school/bg_14.png') no-repeat 0px 80px; background-size:100% 100%; float:left;}
.left_school_4 span.cont_11 { margin:60px 0px 0px 148px; float:left;}

.s_txt_area13 {float:left;  margin:98px 0px 0px 86px;}


.s_txt_area14 { width:66%; height:100%; float:right; }
.s_txt_area14 img {width:100%;}




.s_txt_area15 {float:right; margin:80px 0px 0px 20px; width:98.8%;}
.s_txt_area15 img {width:100%;}
.s_txt_area16 {float:right; margin:10px 0px 0px 20px; width:98.8%;}
.s_txt_area16 img {width:100%;}
.s_txt_area17 {float:left; margin:160px 0px 0px 230px; position: relative; z-index:999999; }


.s_txt_area27 {float:left; margin:80px 0px 0px 0px; height:65%; width:100%; color:#111;}
.s_txt_area27 img {width:100%; height:100%;}
.s_txt_area28 {float:left; margin:0px 0px 0px 0px;  background:url(../images/school/cont_img26.png) no-repeat top left; background-size:100% 100%; width:100%; height:35%; text-align:center; padding-top:160px; color:#111; line-height:140%; 
font-family:'ONE Mobile Title OTF'; font-size:36px; }
.s_txt_area29 {float:left; margin:0px 0px 0px 0px;  background:url(../images/school/bg_24.png) no-repeat top left; background-size:100% 100%; width:100%; height:35%; text-align:center; padding-top:160px; color:#111; line-height:140%; 
font-family:'ONE Mobile Title OTF'; font-size:36px; }
.s_txt_area29 p {font-family:'ONE Mobile OTF Regular'; font-size:24px; font-weight:200; margin-top:5px; line-height:140%; text-transform: uppercase;}
@media all and (max-width:1920px){
	.s_txt_area27 {float:left; margin:80px 0px 0px 0px; height:630px; width:100%;}
	.s_txt_area27 img {width:100%; height:630px;}
	.s_txt_area28  {background-size:100% 272px; padding-top:99px;}
}


.s_txt_area30 { margin:0px 0px 0px 0px;  background:url(../images/school/bg_26.png) no-repeat; background-position: left 80px; background-size:100% 100%; width:66%; height:100vh; text-align:center; padding-top:240px; float:left;}
@media all and (max-width:1920px){
	.s_txt_area30 {background-size:100% 92%;}
}

.s_txt_area31 {float:left; margin:0px 0px 0px 0px;  background:url(../images/school/bg_27.png) no-repeat top left; background-size:100% 100%; width:100%; height:35%; text-align:center; padding-top:70px; color:#111; line-height:140%; 
font-family:'ONE Mobile Title OTF'; font-size:36px; }
.s_txt_area31 p {font-family:'ONE Mobile OTF Regular'; font-size:24px; font-weight:200; margin-top:5px; line-height:140%; text-transform: uppercase;}


.s_txt_area32 { margin:0px 0px 0px 0px;  background:url(../images/school/bg_30.png) no-repeat; background-position: left 80px; background-size:100% 100%; width:66%; height:100vh; text-align:center; padding-top:240px; float:left;}
@media all and (max-width:1920px){
	.s_txt_area32 {background-size:100% 92%;}
}


.s_txt_area33 { margin:0px 0px 0px 0px;  background:url(../images/school/bg_33.png) no-repeat; background-position: left 80px; background-size:100% 100%; width:66%; height:100vh; text-align:center; padding-top:240px; float:left;}
@media all and (max-width:1920px){
	.s_txt_area33 {background-size:100% 92%;}
}



.s_tit_area6 {width:1474px; position: absolute; left:50%; top:180px; text-align:center; font-family:'ONE Mobile Title OTF'; color: #FFFFFF; font-weight:400; font-size:40px; line-height:140%; margin-left:-737px; letter-spacing: -0.025em;}
.s_tit_area6 p.s_tit_txt6 {font-family:'ONE Mobile OTF Regular'; font-size:15px; line-height: 160%; font-weight: 400; margin-top:24px; }

.s_txt_area18 {position:absolute; top:426px; left:50%; width:1415px; margin-left:-702px;}



.left_school_5 {width:34%; height:100%; background:url('../images/school/bg_16.png') no-repeat 0px 80px; background-size:100% 100%; float:left; }
.left_school_6 {width:34%; height:100%; background:url('../images/school/bg_14.png') no-repeat 0px 80px; background-size:100% 100%; float:left;}

.left_school_7 {width:34%; height:100%; background:url('../images/school/bg_29.png') no-repeat 0px 80px; background-size:100% 100%; float:left;}
.left_school_7 span.cont_11 { margin:60px 0px 0px 148px; float:left;}
.left_school_7 span.cont_28 { margin:105px 0px 0px 0px; float:left;}



.left_school_8 {width:34%; height:100%; background:url('../images/school/bg_32.png') no-repeat 0px 80px; background-size:100% 100%; float:left;}
.left_school_8 span.cont_11 { margin:60px 0px 0px 148px; float:left;}
.left_school_8 span.cont_28 { margin:105px 0px 0px 0px; float:left;}

.right_cont_area1 {width:66%; height:100%; float:left; background:url('../images/school/bg_17.png') no-repeat 0px 80px; background-size:100% 100%;}
.right_cont_area1 .right_cont_1 {width:278px; height:100%; background:rgba(0,0,0,0.2); float:right; margin-top:80px;}
.right_cont_area1 .right_cont_1 span.right_img1 {margin:62px 0px 0px 21px; float:left;}


.s_tit_area19 {position:relative; z-index:99999; width:430px; margin:156px 0px 0px 148px;  text-align:left; font-family:'ONE Mobile OTF Regular'; color: #3A3A3A; font-weight:400; font-size:20px; line-height:140%;  letter-spacing: -0.025em; float:left;}
.s_tit_area19 p.s_tit_txt19 {font-family:'ONE Mobile Title OTF'; font-size:30px; line-height: 140%; font-weight: 400; margin-top:10px; color: #3A3A3A;}
.s_tit_area19 p.s_tit_txt20 {font-family:'ONE Mobile OTF Regular'; font-size:15px; line-height: 160%; font-weight: 200; margin-top:40px; color: #3A3A3A; width:430px;}
.s_tit_area19 span.sign {position: absolute; top:520px; left:230px;}



.subvisual{position:relative; width:100%; height:680px; z-index:10; box-sizing:border-box;}	
.subvisual .subvisual_img {width:100%; height:680px;}
.subvisual span.subvisual_img_bg1 {width:100%; height:520px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img1.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg2 {width:100%; height:520px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img2.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg4 {width:100%; height:520px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img4.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg5 {width:100%; height:520px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img5.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg6 {width:100%; height:520px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img6.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg7 {width:100%; height:520px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img7.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg8 {width:100%; height:420px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img8.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg9 {width:100%; height:420px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img9.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_img_bg10 {width:100%; height:420px; z-index:12; display:block; position:absolute; background:url(../images/subvisual_img10.png) no-repeat top left; background-size:cover;}
.subvisual span.subvisual_video_bg {background:rgba(0,0,0,0.3); width:100%; height:680px; z-index:12; display:block; position:absolute;}
.subvisual .subvisual_video {width:100%; height:100vh; object-fit:cover; z-index:11; }

.subvisual span.subvisual_img_bg3 {width:100%; height:2600px; z-index:12; display:block; position:absolute; background:url(../images/story_bg.png) no-repeat top left; background-size:100% 100%; background-attachment: fixed;}




.subvisual .subvisual_tit {position:absolute; font-family: 'ONE Mobile Title OTF'; font-style: normal; font-weight:500; text-transform: uppercase;
text-align:left; top:210px; left:230px; z-index:99; color:#fff; font-size:24px; line-height:32px; letter-spacing: -0.025em;}
.subvisual .subvisual_tit p.subvisual_tit_s { font-family:'ONE Mobile Title OTF'; margin-top:22px; font-weight:300; font-size:50px; line-height:60px; color:#fff; }

.subvisual .subvisual_rtext {position:absolute; text-align:right; top:210px; right:230px; z-index:99; color:#fff; font-weight:400; background:url(../images/s_text_line.png) no-repeat 2px 15px;
background-size:27px 1px; font-size:13px; line-height:32px; letter-spacing: -0.025em;  font-family:'ONE Mobile OTF Regular';}

.subvisual .subvisual_rbtext {position:absolute; text-align:left; top:400px; left:230px; z-index:99; color:#fff;  font-size:24px; line-height:32px; font-family:'ONE Mobile OTF Regular';}


.subvisual .selectArea {position:absolute; left:230px; top:704px; z-index:9999999; display:block; }
.select_icon {width:40px; height:40px; border:1px solid #fff; border-radius:50%; float:left; margin-right:5px; text-align:center; padding-top:9px;}


.subvisual .sns_icon {position:absolute; right:230px; top:690px; z-index:9999999; display:block; }
.subvisual .sns_icon span.sns_circle {width:50px; height:50px; line-height:50px; border-radius:50%; background:rgba(255,255,255,0.3); backdrop-filter: blur(12px); float:left; text-align:center;}


.wrapper {
  margin-top:-10px;
  width: 200px;
  display: block;
  text-align: center;
  transition: 0.15s ease;
   padding:20px 15px;
   float:left;
  }

.click-text {
  display: block;
  text-align: left;
  padding-bottom: 10px;
  margin: 0;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  font-family:"ONE Mobile OTF Regular";
  border-bottom: 1px solid #fff;
  letter-spacing: -0.025em;
  transition: 0.15s ease;
}
.wrapper.active .click-text {color:#111; padding-bottom: 10px;  margin: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.1); transition: 0.15s ease;}



.wrapper.active { width:200px; background:#FFFFFF; border-radius:10px; padding:20px 15px; transition: 0.15s ease;  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.20); }

.wrapper.active .t_arrow {
  transform: rotate(45deg) translate(-5px, -5px);
}
.wrapper.active .t_arrow:before {
  transform: translate(10px, 0);
}
.wrapper.active .t_arrow:after {
  transform: rotate(90deg) translate(10px, 0);
}
.wrapper.active ul {
  opacity: 1;
  height:auto;
}



.wrapper3 .t_arrow {
  transform: rotate(0);
  left: 0;
}
.wrapper3 .t_arrow:before, .wrapper3 .t_arrow:after {
  background-color: transparent;
  width: 1px;
  height: 10px;
  display: inline-block;
  position: absolute;
  border-bottom: 11px solid white;
  top: 0;
  left: 0;
  transform: rotate(0);
}
.wrapper3 .t_arrow:before {
  transform: rotate(-135deg);
}
.wrapper3 .t_arrow:after {
  transform: rotate(135deg);
}
.wrapper3.active .t_arrow {
  transform: rotate(0);
  transform: translate(0, -6px);
}
.wrapper3.active .t_arrow:before {
  transform: rotate(-45deg);
  border-bottom:12px solid #111;
}
.wrapper3.active .t_arrow:after {
  transform: rotate(45deg);
  border-bottom:12px solid #111;
}

.t_arrow {
  width: 13px;
  height: 13px;
  display: inline-block;
  position: relative;
  bottom: 0px;
  left: -10px;
  transition: 0.4s ease;
  margin-top: 0px;
  text-align: left;
  transform: rotate(45deg);
  float: right;
}
.t_arrow:before, .t_arrow:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 12px;
  height: 3px;
  background-color: #fff;
  transition: 0.4s ease;
}
.t_arrow:after {
  position: absolute;
  transform: rotate(90deg);
  top: -5px;
  left: 5px;
}



.wrapper3 ul {
  padding: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.4s ease;

}

.wrapper3 li {
  list-style-type: none;
  margin: 0 auto;
  padding: 4px 0px;
  text-align: left;
  cursor: pointer;
  
}

.wrapper3 li a {color:#9B9B9B;
  font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 23px; /* 153.333% */
letter-spacing: -0.375px;
text-transform: uppercase;
font-family:"ONE Mobile OTF Regular";}
.wrapper3 li:first-child {
  margin-top: 12px;
}
.wrapper3 li:last-child {
  margin-bottom: 0px;
}




.subCont_1 {width:100%; position:relative;}
.subCont_1 .cont_bg .cont_Text { position:absolute; top:150px; left:110px; padding-left:120px; background:url(../images/deco_1.png) no-repeat top left; background-size:100px 170px; color:#4BBBEE;
font-weight: 400; font-size: 24px; line-height: 32px; font-family:'ONE Mobile OTF Regular';}
.subCont_1 .cont_bg .cont_Text p.sub_tit { font-weight:600; font-size: 40px; line-height: 50px; color: #1496D1; margin-top:20px; letter-spacing: -0.025em;  font-family:'ONE Mobile OTF Regular';}
.subCont_1 .cont_bg .cont_Text p.sub_text1 {font-weight:400; font-size:18px; line-height:40px; color: #686868; margin-top:50px;  font-family:'ONE Mobile OTF Regular';}
.subCont_1 .cont_bg .cont_Text p.sub_text2 {background:url(../images/deco_2.png) no-repeat top left; background-size:147px 99px; font-weight:700; padding-left:170px; height:98px;
font-size:18px; line-height:26px; color: #1496D1; margin-top:40px;  font-family:'ONE Mobile OTF Regular';}
.subCont_1 .cont_Text p.sub_text2 span.sub_text3 {font-family:'ONE Mobile Title OTF'; color: #1496D1; font-weight: 400; font-size: 24px; line-height: 32px; margin-top:17px; float:left;}
.subCont_1 .cont_bg {position:relative; width:100%; height:100vh; margin:0px auto; display:flex; align-items:center; justify-content:center; }




.subCont_1 .cont_bg span.subCont_1_bg {background:url('../images/school/bg_18.png') no-repeat; width:100%; height:100%;   background-size:cover;}
.subCont_1 .cont_bg .cont_Text span.quotes_l {position:absolute; top:200px; left:55px; width:41px; height:38px;}
.subCont_1 .cont_bg .cont_Text span.quotes_r {position:absolute; top:200px; left:715px; width:41px; height:38px;}



.left_cont_area1 {width:50%; height:100%; float:left; background:url('../images/school/bg_20.png') no-repeat 0px 0px; background-size:429px 431px; margin-top:80px; float:left;}

.left_cont_area1 .cont_left1 {margin:50px 0px 0px 110px; font-family:'ONE Mobile OTF Regular'; font-weight:400; font-size:20px; line-height:32px;  letter-spacing: -0.025em;}
.left_cont_area1 .cont_left1 p.cont1 {font-family:'ONE Mobile Title OTF'; font-weight:400; font-size:40px; line-height:48px;  letter-spacing: -0.025em; margin-top:14px;}
.left_cont_area1 .cont_left1 p.cont2 {font-family:'ONE Mobile OTF Regular';  font-weight:400; font-size: 16px; line-height: 200%;  letter-spacing: -0.025em; margin-top:20px; color:#686868;}
.left_cont_area1 .cont_left1 p.cont3 {margin-top:62px;}


.left_cont_area2 {width:50%; height:100%; float:left; background:url('../images/school/bg_20.png') no-repeat 0px 0px; background-size:429px 431px; margin-top:80px; float:left;}



.left_area {width:68px; height:100vh; background: rgba(0, 0, 0, 0.7); position:absolute; z-index:9999; left:0px; top:0px; }
.menu {transform: rotate(-90deg); color:#fff;  width:300px; position: absolute; top:280px; left:-116px; font-family:'ONE Mobile OTF Regular'; font-size:20px; line-height:140%; z-index:999999999;}
.menu span.num_1 {font-family:"ONE Mobile Title OTF"; line-height:140%; font-size:20px; margin-right:10px;}


.video_text {position: absolute; top:150px; left:140px; z-index:11; font-weight: 400; font-size: 34px; line-height: 140%;}

.video_area_box {position: absolute; top:135px; left:128px;  width:1732px; height:541px; background:url('../images/school/img_3.png') no-repeat; z-index:11;}
.video_area {width:100%; height:100vh; float:left;  position:relative; z-index:1;}
.video_area video.video_box {position: absolute; top:80px; left:0px; width:100%; }


.content_1 {position: absolute; bottom:0px; left:0px; z-index:99; width:100%; height:160px; background: rgba(15, 160, 0, 0.3); backdrop-filter: blur(30px);}
.content_1 .tit_area {margin:0px 0px 0px 128px; float:left; width:640px;}
.content_1 .tit_area span.tit_f {float:left; font-family:'ONE Mobile Title OTF'; font-weight:400; font-size:42px; line-height:140%; margin:30px 0px 0px 25px; color:#fff;}
.content_1 .tit_area span.tit_f p.txt_f {font-weight:400; font-size:23px; line-height:140%; color:#fff; font-family:'ONE Mobile OTF Regular';}
.content_1 .txt_area {margin:35px 0px 0px 50px; font-weight: 200; font-size: 15px; line-height: 180%; color: #fff; font-family:'ONE Mobile OTF Regular';}


.content_3 {position:relative; float:left; z-index:99; width:100%; background:url('../images/school/bg_3.png') no-repeat; background-size:100% 378px; height:378px; }
.content_3 .tit_area_3 {font-weight: 400; font-size: 43px; line-height: 140%; color: #FFFFFF;padding:184px 0px 76px 138px; font-family:'ONE Mobile Title OTF';  }
.content_3 .tit_area_3 p {font-family:'ONE Mobile OTF Regular';  font-weight: 400; font-size: 15px; line-height: 140%; color: #FFFFFF; margin-top:10px;}

.content_4 {position:relative; float:left; z-index:99; width:100%; background:url('../images/school/bg_4.png') no-repeat right top; background-size:1505px 575px; height:575px;  }
.content_4 .img_a4 {position: absolute; bottom:0px; left:680px;}

.content_4 .text_a4 { background:url('../images/school/Vector_i.png') no-repeat; width:550px; margin:42px 0px 0px 125px; float:left; padding:18px; font-weight: 400; font-size: 20px; line-height: 140%; 
color: #3A3A3A; font-family:'ONE Mobile OTF Regular';}
.content_4 .text_a4 p.text_a4_1 {font-family:'ONE Mobile Title OTF'; font-weight: 400; font-size: 30px; line-height: 140%; color: #3A3A3A;}
.content_4 .text_a4 p.text_a4_2 {font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 15px; line-height: 160%; margin-top:40px;}



.content_5 {position:relative; float:left; z-index:99; width:100%; background:url('../images/school/bg_5.png') no-repeat; background-size:100% 378px; height:378px; }
.content_5 .tit_area_5 {font-family:'ONE Mobile Title OTF'; font-weight: 400; font-size: 43px; line-height: 140%; color: #FFFFFF; padding:184px 0px 76px 138px;}
.content_5 .tit_area_5 p {font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 15px; line-height: 140%; color: #FFFFFF; margin-top:10px;}


.content_6 {position:relative; float:left; z-index:99; width:100%;  height:575px;  }
.content_6 .img_a6 {position: absolute; top:43px; left:695px;}

.content_6 .text_a6 { background:url('../images/school/Vector_i.png') no-repeat; width:550px; margin:42px 0px 0px 125px; float:left; padding:18px; font-weight: 400; font-size: 20px; line-height: 140%; 
color: #3A3A3A; font-family:'ONE Mobile OTF Regular';}
.content_6 .text_a6 p.text_a6_1 {font-family:'ONE Mobile Title OTF'; font-weight: 400; font-size: 30px; line-height: 140%; color: #3A3A3A;}
.content_6 .text_a6 p.text_a6_2 {font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 15px; line-height: 160%; margin-top:40px;}


.cont_area11 {float:left; margin:230px 0px 0px 226px; width:690px; font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 15px; line-height: 160%; color:#3A3A3A;}
.cont_area12 {position: absolute; top:470px; left:1024px;}


.accordion-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    width: 100%;
    height: 100vh;
	background:#fff;
}

.accordion {
    list-style: none;
    margin-left: 68px;
    padding: 0;
display: flex;
    flex-wrap: nowrap;

 
  height: 100vh;
}

.accordion .tabs {
  width: 100px;
  background-color: #000;
  display: flex;
  overflow: hidden;
  position: relative;
  transition: 0.4s ease;
  flex: 0 0 auto; /* ±âº» Å©±â °íÁ¤ */
  
}
.accordion .tabs:hover:not(.is-active) {
  width: 180px;
  cursor: pointer;
}


.accordion .tabs:hover {
  cursor: pointer;
}
.accordion .tabs .tab-header {

  flex-direction: column;
  justify-content: space-between;
  color: black;
  width:100px;
  visibility: visible;
  opacity: 1;
}

.accordion .tabs .tab-header img {height:100vh;}

accordion .tabs .tab-header .text {
    z-index: 9999;
}

.accordion .tabs .tab-header .text > div {
    position: absolute;
    color: #fff;
    width: 500px;
    bottom: 174px;
    left: 29px;
    font-family: 'ONE Mobile Title OTF';
    font-weight: 400;
    font-size: 30px;
    line-height: 140%;
    transform: rotate(-90deg);
    transform-origin: left top;
	 transition: 0.4s ease;
}

.accordion .tabs .tab-header .text > p {
    position: absolute;
    font-family: 'ONE Mobile OTF Regular';
    bottom: 260px;
    left: 119px;
    font-size: 18px;
    transform: rotate(-90deg);
    transform-origin: left top;
    color: #fff;
    width: 500px;
    line-height: 140%;
    opacity: 0;
	  transition: 0.4s ease;
}


.accordion .tabs:hover:not(.is-active) .tab-header .text > div {
    left: 29px;
	  width: 500px;
	    position: absolute;
  transform: rotate(-90deg);
  transform-origin: left top;
}

.accordion .tabs:hover:not(.is-active) .tab-header .text > p {
  
    opacity: 1;
	    left: 119px;
	  width: 500px;
	    position: absolute;
  transform: rotate(-90deg);
  transform-origin: left top;
}


.accordion .tabs:hover:not(.is-active) .tab-header  {
  
   
  flex-direction: column;
  justify-content: space-between;
  color: black;
  width: 100%;
  visibility: visible;
  opacity: 1;

}

.accordion .tabs:hover:not(.is-active) .tab-header .text > div {
    left: 57px;
	  width: 500px;
	    position: absolute;
  transform: rotate(-90deg);
  transform-origin: left top;
}

.accordion .tabs:hover:not(.is-active) .tab-header .text > p {
  
    opacity: 1;
	    left: 119px;
	  width: 500px;
	    position: absolute;
  transform: rotate(-90deg);
  transform-origin: left top;
}

/* Tab content styles */
.accordion .tabs .tab-content {
  visibility: hidden;
  opacity: 0;
  color: white;
  position: relative;
  width: 100%;
  height:100vh;
}

.accordion .tabs .tab-content .tab-content-wrapper {
  position: absolute;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s 0.3s;
}

.accordion .tabs .tab-content .tab-img {
  position: absolute;
  top: -3rem;
  left: -3rem;
  right: -3rem;
  height: auto;
  width: auto;
  min-width: 100%;
  min-height: 100%;
  z-index: 2;
}

.accordion .tabs.is-active .tab-content {
    visibility: visible;
}

.accordion .tabs .tab-content .tab-content_img1 {
    position: absolute;
    top: 160px;
    left: 1020px;
}

.accordion .tabs .tab-content .tab-content_img2 {
    position: absolute;
    top: 510px;
    left: 90px;
}

.accordion .tabs.is-active {
    flex: 3;
    flex-shrink: 0;
}

.accordion .tabs.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.accordion .tabs.is-active .tab-header {
  width: 0;
  visibility: hidden;
  opacity: 0;
}

.accordion .tabs.is-active .tab-content {
  visibility: visible;
  opacity: 1;
}

.accordion .tabs.is-active .tab-content .tab-content-wrapper {
  visibility: visible;
  opacity: 1;
}



.visualban_1 {position:absolute; left:50%; bottom:0px; width:98%; height:100px; margin-left:-49%; z-index:999; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.7); border-top-left-radius: 10px; border-top-right-radius: 10px; 
backdrop-filter: blur(30px); transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
.visualban_1 ul {height:100%; box-sizing:border-box;}
.visualban_1 > ul > li {position:relative; padding:0px; box-sizing:border-box; text-align:left; align-items:center; overflow:hidden; float:left; z-index:99;}
.visualban_1 > ul > li a{width:100%;}
.visualban_1 > ul > li .cont1{position:relative; width:100%; line-height:30px; font-size:26px;}

.visualban_1 > ul > li .cont1 .left_text { line-height: 22px;  margin:15px 0px 0px 40px; float:left;}
.visualban_1 > ul > li .cont1 .left_text > em {display:block; line-height:140%; margin-bottom:9px; font-weight: 200; font-family:'ONE Mobile Title OTF'; color:#3D3D3D; text-align:center; font-size: 14px; width:56px; height:19px; border-radius:20px; background:rgba(255,255,255,0.4);}
.visualban_1 > ul > li .cont1 .left_text > span.c_img {width:50px; height:50px; border-radius:50%; float:left;  margin-right:15px;}
.visualban_1 > ul > li .cont1 .left_text > p.txt1 {float:left; font-family:'ONE Mobile Title OTF'; font-weight: 400; font-size: 18px; line-height: 140%; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75); color:#3D3D3D;}
.visualban_1 > ul > li .cont1 .left_text > p.txt2 {float:left; font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 16px; line-height: 140%; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75); color: rgba(61, 61, 61, 0.5); width:80%;}
.visualban_1 > ul > li .cont1 .left_text > p.txt3 {float:left; font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 14px; line-height: 160%; color:#3D3D3D; margin-top:10px; opacity:0; width:100%; }
.visualban_1 > ul > li .cont1 .right_text {text-align:right; color:#fff; font-weight: 500; font-size: 18px; margin:42px 40px 0px 0px; float:right; font-family:'ONE Mobile OTF Regular';}
.visualban_1 > ul > li .cont1 .right_text > em{ display:block; opacity:.5; line-height:140%; font-size:16px;	margin-bottom:4px; font-weight: 200; font-family:'ONE Mobile OTF Light';}


.visualban_1 > ul > li:nth-child(1) {width:34%; color:#fff; }
.visualban_1 > ul > li:nth-child(2) {width:22%; color:#fff; }
.visualban_1 > ul > li:nth-child(3) {width:22%; color:#fff; }
.visualban_1 > ul > li:nth-child(4) {width:22%; color:#fff; }

.visualban_1:hover {width:98%; height:140px;}
.visualban_1:hover > ul > li .cont1 .left_text > p.txt3 {font-family:'ONE Mobile OTF Regular'; font-weight: 400; font-size: 14px; line-height: 160%; color:#3D3D3D; margin-top:10px; opacity:1;}

.visualbnn1 > ul > li:hover .cont1::before {opacity:0;	}
.visualban > ul > li .cont1::after{
		position:absolute; right:40px; top:20px;
		width:10px; height:10px; border-radius:50%;
		background:#fff;
		content:"";
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
}
.visualban > ul > li:hover .cont1::after{
		width:25px; height:25px;
		background:url(../images/btn_view.png); background-size:25px 25px;
		z-index:99999;
	}
.visualban > ul > li::before{
		position:absolute; left:0px; top:0px;
		width:101%; height:110px;
		background:url(../images/ban_bg1.png) no-repeat center center; background-size:100% 110px !important;
		opacity:0;
		content:"";
		transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	}



.info_banner_1 {position:absolute; width:260px; height:130px; display:inline-block; z-index:99999; top:450px;left:60px;}
.info_banner_1 .item-inner {position:relative; display:block; width:100%; height:100%; overflow:hidden;}

.info_banner_1 .item-inner a .bg {position:relative; display:block;  width:240px; height:130px; z-index:9; }
.info_banner_1 .item-inner a .bg::before {content:""; top:0; left:0; width:100%; height:100%; position:absolute; background-image:url('../images/banner_1_over.png'); background-size:cover;  transition: all 0.3s ease; background-position:center top; }


.info_banner_1 .item-inner a .bg span.banner_text1 {position:relative; z-index:99; float:left; margin:30px 0px 0px 70px; font-weight: 400; font-size: 14px; color: #000000; font-family:'ONE Mobile OTF Regular';  transition: all 0.3s ease;}
.info_banner_1 .item-inner a .bg p.banner_text2 {position:relative; z-index:99; float:left; margin:40px 0px 0px 30px; text-align:left; font-weight: 400; font-size: 20px; line-height:140%; color: #1496D1; font-family:'ONE Mobile Title OTF';  transition: all 0.3s ease; z-index:99; }
.info_banner_1 .item-inner a .bg p.banner_text3 {position:relative; float:left; margin:20px 0px 0px 25px; text-align:left; font-weight:600; font-size:16px; color:#144883; font-family:'ONE Mobile OTF Regular'; line-height:140%;}


.info_banner_1 .item-inner a .bg:hover::before { width:260px; height:130px; background-image: url('../images/banner_1_over.png'); background-size:cover;  background-position:center top; }
.info_banner_1 .item-inner a .bg:hover span.banner_text1 {float:left; margin:30px 0px 0px 107px; text-align:center; font-size: 14px; color: #000000; font-family:'ONE Mobile OTF Regular'; }
.info_banner_1 .item-inner a .bg:hover p.banner_text3 {float:left; margin:20px 0px 0px 25px; text-align:left; font-weight:600; font-size:16px; color:#144883; font-family:'ONE Mobile OTF Regular'; }


.main_school_seoul {position:absolute; width:440px; height:190px; display:inline-block; z-index:99999; top:195px; left:60px;  }
.main_school_seoul span.school_seoul_logo {width:88px; height:91px; float:left; margin-right:20px;}
.main_school_seoul span.main_school_seoul_txt{font-family:'ONE Mobile Title OTF'; color:#fff; font-weight:400; font-size:34px; line-height:130%; text-align:left; float:left; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);}
.main_school_seoul p.main_school_seoul_txt1{margin-top:15px; font-family:'ONE Mobile OTF Regular'; color: #FFFFFF; font-size: 20px; line-height: 140%; text-align:left; float:left; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); letter-spacing: -0.009em;}
.main_school_seoul p.main_school_seoul_txt2{font-family:'ONE Mobile OTF Regular'; color: #FFFFFF; font-size: 23.5714px; line-height: 140%; font-weight:500; text-align:left; float:left; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); letter-spacing: -0.025em;}




                                       