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;}