@import url("layout.css");   

/*-----------------------------------------------------------
Author : SY,CHo
Creative date : 2022. 01. 17

Edit : Gahye Park, 2022. 02. 03
-----------------------------------------------------------*/

/* animation */
.section [class*="mot"]{opacity:0; transition:transform .3s ease-out, opacity 0.3s ease-out; -webkit-transition:transform .3s ease-out, opacity 0.3s ease-out;} 
.section [class*="mot"][class$="-left"]{transform:translateX(-2rem); -webkit-transform:translateX(-2rem);}
.section [class*="mot"][class$="-right"]{transform:translateX(2rem); -webkit-transform:translateX(2rem);} 
.section [class*="mot"][class$="-top"]{transform:translateY(-2rem); -webkit-transform:translateY(-2rem);}
.section [class*="mot"][class$="-bottom"]{transform:translateY(2rem); -webkit-transform:translateY(2rem);} 
.section [class*="mot"][class$="-ball"]{transform:scale(0); -webkit-transform:scale(0); transform-origin:center center; -webkit-transform-origin:center center;}
.section.active [class*="mot"]{opacity:1;}
.section.active [class*="mot1"]{transition-delay:0s; -webkit-transition-delay:0s;}
.section.active [class*="mot2"]{transition-delay:.2s; -webkit-transition-delay:.2s;}
.section.active [class*="mot3"]{transition-delay:.4s; -webkit-transition-delay:.4s;}
.section.active [class*="mot4"]{transition-delay:.6s; -webkit-transition-delay:.6s;}
.section.active [class*="mot5"]{transition-delay:.8s; -webkit-transition-delay:.8s;}
.section.active [class*="mot6"]{transition-delay:1s; -webkit-transition-delay:1s;}
.section.active [class*="mot7"]{transition-delay:1.2s; -webkit-transition-delay:1.2s;}
.section.active [class*="mot"][class$="-left"]{transform:translateX(0px); -webkit-transform:translateX(0px);}
.section.active [class*="mot"][class$="-right"]{transform:translateX(0px); -webkit-transform:translateX(0px);} 
.section.active [class*="mot"][class$="-top"]{transform:translateY(0px); -webkit-transform:translateY(0px);}
.section.active [class*="mot"][class$="-bottom"]{transform:translateY(0px); -webkit-transform:translateY(0px);} 
.section.active [class*="mot"][class$="-ball"]{transform:scale(1); -webkit-transform:scale(1);}

/* 슬라이드 공통 */  
.slick-list{overflow:hidden;height:100%;} 
.slick-track{height:100%;}  
.slick-slide{float:left;}

/* control 공통 */
.control{position:relative; font-size:0; }
.control a{position:relative; display:inline-block; width:1.5rem; height:1.1rem; background:no-repeat center / contain; margin:0 0.5rem; vertical-align:middle; }
.control a.prev { background-image:url('/images/web/en/main/prev_w.png');}
.control a.next { background-image:url('/images/web/en/main/next_w.png');}
.control a.stop { background-image:url('/images/web/en/main/stop_w.png');}
.control a.play { display:none; font-size:1.5rem; color:#fff;} 
.control a.play i { display:block; line-height:0.7; }
.control2 a.prev { background-image:url('/images/web/en/main/prev.png');}
.control2 a.next { background-image:url('/images/web/en/main/next.png');}
.control2 a.stop { background-image:url('/images/web/en/main/stop.png');}
.control2 a.play { color:#000; }  
.control .count { display:inline-block; font-size:1rem; color:#fff; vertical-align:middle; font-weight:400; }
.control .count .current { position:relative; color:#ecac2a; padding-right:1.5rem; }
.control .count .current:before { content:""; position:absolute; right:0.7rem; top:0.3rem; width:1px; height:0.5rem; -webkit-transform:rotate(15deg); transform:rotate(15deg); background:#fff; }

/* title01 */
.title01 { font-size:2rem; color:#000; line-height:1; font-weight:700; }
.title01 span { color:#004593;}
 
/* section1 */   

/* quickMenu*/   
.section1 .quickMenu .open { position:fixed; bottom:4.5rem; right:1.3rem; display:none; width:2.75rem; height:2.75rem; background:#0098d9; border-radius:50%;text-align:center; color:#fff; z-index:10; -webkit-transition:right 0.3s, opacity 0.3s; transition:right 0.3s, opacity 0.3s; box-shadow:1px 1px 21px rgba(0,0,0,0.24); overflow:hidden; } 
.section1 .quickMenu .open:before {content:"Quick menu"; position:absolute; left:0; top:0.3rem; width:3rem; height:3rem; font-size:1rem; color:#fff; opacity:0.15; line-height:1.2; font-weight:600; }
.section1 .quickMenu .open i { display:block; font-size:1.2rem; line-height:2.75rem; }
.section1 .quickMenu .box { display:block; position:fixed; right:1.5rem; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:5;  }
.section1 .quickMenu ul { display:block; text-align:center; width:6rem; color:#fff; background:rgba(0,152,217,0.9); border-radius:3rem; padding:0.5rem; overflow:hidden; } 
.section1 .quickMenu ul li { position:relative;}
.section1 .quickMenu ul li + li:before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:rgba(255,255,255,0.5); }
.section1 .quickMenu ul li a { position:relative; display:block; padding:0.8rem 0; font-size:0.7rem; z-index:2; }
.section1 .quickMenu ul li a:before { content:""; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:6rem; height:6rem; border-radius:50%; background:#004593; opacity:0; -webkit-transition:0.3s; transition:0.3s; }
.section1 .quickMenu ul li a img { position:relative; }
.section1 .quickMenu ul li a span { position:relative; display:block;}
.section1 .quickMenu ul li a:hover:before,
.section1 .quickMenu ul li a:focus:before { opacity:1;}  
.section1 .quickMenu ul li.active:before { display:none; }
.section1 .quickMenu ul li.active + li:before { display:none; }
.section1 .quickMenu .close { display:block; width:3rem; height:3rem; border-radius:50%; background:rgba(3, 43, 116, 0.8); margin:1rem auto 0; text-align:center; -webkit-transition:0.3s; transition:0.3s; }
.section1 .quickMenu .close i { display:inline-block; color:#fff; font-size:1rem; line-height:3rem; }
.section1 .quickMenu .close:hover,
.section1 .quickMenu .close:focus { background:rgba(3, 43, 116, 1);}    
.section1 .quickMenu.on .open { display:block; }
.section1 .quickMenu.on .box { display:none; }
 
/* visual */
.section1 .visual { position:relative;overflow:hidden; }
.section1 .visual .slick-track { height:42rem; }
.section1 .visual .visualWrap { position:relative; width:100%;}
.section1 .visual .visualWrap .slideEl { position:relative; width:100%; height:100%; align-items:center; overflow:hidden; }
.section1 .visual .visualWrap .img { position:relative; width:100%; height:100%; background:no-repeat center / cover; -webkit-transform:scale(1.3); transform:scale(1.3); -webkit-transition:all 1.5s 0.3s; transition:all 1.5s 0.3s;}  
.section1 .visual .visualWrap .slogan { position:absolute; width:100%; left:0; opacity:0; top:45%; -webkit-transform:translateY(-50%); transform:translateY(-50%); text-align:center; padding:0 2rem; line-height:1; -webkit-transition:1s; transition:1s; }
.section1 .visual .visualWrap .slogan .txt1 { font-size:4rem; color:#fff; font-weight:200; letter-spacing:-1.5px; }
.section1 .visual .visualWrap .slogan .txt1 strong { display:inline-block; box-shadow:inset rgba(0,154,223,0.25) 0 -35px 0; font-weight:700; }
.section1 .visual .visualWrap .slogan .txt2 { font-size:1.8rem; color:#fff; font-weight:200; margin-top:2rem;}
.section1 .visual .visualWrap .slogan .txt2 strong { font-weight:700; }
.section1 .visual .control { position:absolute; bottom:5rem; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); background:rgba(0,0,0,0.6); padding:1rem 0.5rem; border-radius:3rem; min-width:10rem;}
/* visual : active */
.section1.active .slideEl.slick-current.slick-active .img{-webkit-transform:scale(1); transform:scale(1);}
.section1.active .slideEl.slick-current.slick-active .slogan { opacity:1; top:42%; }

/* section2 */
.section2 { position:relative; padding:3rem 0 4rem; overflow:hidden; }
.section2:before { content:url('/images/web/en/main/circle_bg2.png'); position:absolute; left:-10%; bottom:-20%; z-index:-1; animation:circleBg 10s infinite linear; }
.section2:after { content:url('/images/web/en/main/circle_bg1.png'); position:absolute; right:-10%; bottom:-30%; z-index:-1; animation:circleBg 10s infinite linear; } 
.section2 .title01 { text-align:center; }
.section2 .president { display:flex; justify-content: center; margin-top:4.5rem; }
.section2 .president dl { width:60%; padding-right:4rem; }
.section2 .president dl dt { position:relative; font-size:1.3rem; font-weight:400; color:#0c5db8; padding:0.5rem 0 1rem; }
.section2 .president dl dt:before { content:""; position:absolute; left:0; top:0; width:0.8rem; height:0.35rem; background:#0c5db8; }
.section2 .president dl dd { font-size:0.9rem; line-height:1.9rem;}
.section2 .president .more { position:relative; display:block; width:13.5rem; line-height:3.5rem; padding:0 1.7rem; color:#fff; background:#0098d9; font-size:0.9rem; margin-top:2rem; }
.section2 .president .more:before { content:""; position:absolute; left:0; top:0; width:0; height:100%; background: rgb(12,93,184); background: -moz-linear-gradient(90deg, rgba(12,93,184,1) 0%, rgba(0,152,217,1) 100%); background: -webkit-linear-gradient(90deg, rgba(12,93,184,1) 0%, rgba(0,152,217,1) 100%); background: linear-gradient(90deg, rgba(12,93,184,1) 0%, rgba(0,152,217,1) 100%);  -webkit-transition:0.3s; transition:0.3s; }
.section2 .president .more span { position:relative;}
.section2 .president .more i { display:block; float:right; line-height:3.5rem; }
.section2 .president .img { position:relative; width:40%; height:23.6rem; overflow:hidden; }
.section2 .president .img img { position:relative; left:50%; height:100%; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
.section2 .president .img p { position:absolute; right:0; bottom:0; background:#fff; font-size:0.9rem; color:#777; text-align:right; padding:2rem 0 0 3rem; } 
.section2 .president .img p strong { display:block; color:#000; font-size:1.2rem; }
.section2 .president .more:hover:before, 
.section2 .president .more:focus:before { width:100%; } 
@keyframes circleBg {
	0% { transform:rotate(0);}
	100% { transform:rotate(360deg);}
}

/* section3 */
.section3 { background:#ebf5fe; padding:3.25rem 0; text-align:center;  } 
.section3 .titleWrap p { color:#666; font-size:0.85rem; padding:0 1rem; } 
.section3 .control { display:inline-block; padding:0.5rem; background:#fff; border-radius:2.1rem; margin:1rem 0 1.5rem; }
.section3 .control .count { display:inline-block; font-size:0.75rem; color:#a3a3a3; vertical-align:middle; font-weight:400; }
.section3 .control .count .current { position:relative; color:#004593; font-size:0.9rem; padding-right:1.5rem; }
.section3 .control .count .current:before { content:""; position:absolute; right:0.7rem; top:0.3rem; width:1px; height:0.5rem; -webkit-transform:rotate(15deg); transform:rotate(15deg); background:#a3a3a3; }
.section3 .admWrap { position:relative; width:calc(100% + 1.9rem); margin:0 -0.95rem; }
.section3 .admWrap .slideEl a { display:block; padding:0 0.65rem 2px;}
.section3 .admWrap .slideEl a .img { position:relative; width:calc(100% - 0.6rem); height:23.9rem; background:no-repeat center / cover; margin:0 auto 1.5rem; } 
.section3 .admWrap .slideEl a .img:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#1f60ae; z-index:-1; -webkit-transition:0.3s; transition:0.3s; }
.section3 .admWrap .slideEl a .txt { font-size:1rem; font-weight:400;}
.section3 .admWrap .slideEl a span { position:relative; display:inline-block; border-bottom:1px solid #000; color:#555; font-size:0.75rem; margin-top:0.5rem; padding-bottom:0.3rem; } 
.section3 .admWrap .slideEl a span:after { content:url('/images/web/en/main/adm_more.png'); margin-left:1.3rem;}
.section3 .admWrap .slideEl a span:before { content:""; position:absolute; width:0; left:0; bottom:-2px; background:#004593; height:3px; -webkit-transition:0.3s; transition:0.3s; }
.section3 .admWrap .slideEl a:hover .img:before,
.section3 .admWrap .slideEl a:focus .img:before { left:0.3rem; top:0.3rem; }
.section3 .admWrap .slideEl a:hover span:before,
.section3 .admWrap .slideEl a:focus span:before { width:100%;}

/* section4 */ 
.section4 .mlink { position:relative; width:calc(100% - 35rem); padding:2.5rem 0 3.15rem 0; float:left;}
.section4 .mlink .linkWrap { border-top:2px solid #000; border-bottom:1px solid #cfcfcf; margin-top:1.5rem; } 
.section4 .mlink .slideEl a { display:block; height:10rem; text-align:center; padding:2rem 0 0; }
.section4 .mlink .slideEl img { position:relative; }
.section4 .mlink .slideEl p { font-size:0.9rem; font-weight:500; line-height:1.2;}  
.section4 .mlink .slideEl a:hover img,
.section4 .mlink .slideEl a:focus img { -webkit-animation:linkIco 0.3s; animation:linkIco 0.3s;}
.section4 .mlink .slideEl a:hover p,
.section4 .mlink .slideEl a:focus p { color:#0c5db8; }
.section4 .mlink .control { position:absolute; right:0; top:3rem; }

@keyframes linkIco {
	0% { top:0; }
	50% { top:-10px; }
	100% { top:0; }
}
@-webkit-keyframes linkIco {
	0% { top:0; }
	50% { top:-10px; }
	100% { top:0; }
}
 
.section4 .popup { position:relative; width:31.5rem; padding:2.5rem 0 3.5rem 3.5rem; float:right;} 
.section4 .popup:before { content:""; position:absolute; left:0; top:0; width:200%; height:100%; background:#004593; z-index:-1; }
.section4 .popup .title01 { color:#fff;} 
.section4 .popup .popWrap { width:100%; margin:1.5rem 0 0; }
.section4 .popup .popWrap .slideEl a { display:block; height:10rem; }
.section4 .popup .popWrap .slideEl a span { display:block; width:100%; height:100%; background:no-repeat center / contain;  }
.section4 .popup .control { position:absolute; right:0; top:3rem; }

.section4 .videoWrap{ position:relative; width:31.5rem; padding:2.5rem 0 3.5rem 3.5rem; float:right;} 
.section4 .videoWrap:before { content:""; position:absolute; left:0; top:0; width:200%; height:100%; background:#004593; z-index:-1; }
.section4 .videoWrap:after {content:"SNUE YOUTUBE"; position:absolute; left:0; bottom:-0.5rem; width:200%; font-size:4.2rem; font-weight:800; color:#fff; line-height:1; opacity:0.05; z-index:-1; }
.section4 .videoWrap .video {position:relative; font-size:0;}
.section4 .videoWrap .video:before {content:""; position:absolute; right:-0.25rem; bottom:-0.25rem; width:100%; height:100%; background:#fff;}
.section4 .videoWrap .video iframe {position:relative; width:100%; height:13.5rem; }
.section4 .videoWrap .btn_youtube {position:absolute; right:-3.7rem; top:2.5rem;}
.section4 .videoWrap .btn_youtube i{width:2.25rem; height:2.25rem; background:#fff; border-radius:50%; text-align:center; line-height:2.25rem; color:#d6252d; font-size:1.25rem;}


/* RESPONSIVE */     
@media (max-width:1800px){
	.section4 .videoWrap .video {margin-right:3.5rem;}
	.section4 .videoWrap .btn_youtube {right:0;} 
}
@media (max-width:1740px){
	/* visual */
	.section1 .visual .slick-track { height:36rem; min-height:0;} 
	.section1 .visual .control { bottom:3rem; padding:0.5rem;}

}
@media (max-width:1640px){

	.section4 .mlink { width:calc(100% - 30.5rem); }
	.section4 .popup { width:29.5rem; padding-left:1rem; } 
	.section4 .videoWrap { width:29.5rem; padding-left:1rem; } 
}
@media (max-width:1280px){ 
	/* visual */
	.section1 .visual .slick-track { height:32rem; min-height:0;} 
	.section1 .visual .visualWrap .slogan .txt1 { font-size:3rem; }
	.section1 .visual .visualWrap .slogan .txt1 strong { box-shadow:inset rgba(0,154,223,0.25) 0 -15px 0;}
	.section1 .visual .visualWrap .slogan .txt2 { margin-top:0.5rem; }
}
@media (max-width:1240px){
	/* title01 */
	.title01 { font-size:1.7rem; }   

	/* section2 */
	.section2:before { display:none;}
	.section2 .president { margin-top:3rem;}
	.section2 .president dl { padding-right:1.5rem; }
	.section2 .president dl dt { font-size:1.2rem; line-height:1.3;}
	.section2 .president dl dd { line-height:1.6; font-size:0.8rem; }
	.section2 .president .img { height:20rem; }
	.section2 .president .img p { padding:1rem 0 0 1.5rem; font-size:0.8rem; }
	.section2 .president .img p strong { font-size:1rem;}

	.section3 .admWrap .slideEl a .img { height:15rem; }

}
@media (max-width:1080px){
	/* visual */
	.section1 .visual .slick-track { height:25rem; }  
	
	/* section4 */ 
	.section4 .mlink { width:100%; padding:2rem 0;}
	.section4 .mlink .control {top:2.5rem; }
	.section4 .mlink .linkWrap {margin-top:1rem;}
	.section4 .popup { width:100%; padding:2rem 0; } 
	.section4 .popup:before { left:-2rem;} 
	.section4 .popup .popWrap { margin:1rem auto 0; } 
	.section4 .popup .control { top:2.5rem; } 
	
	.section4 .videoWrap { width:100%; padding:2rem 0; } 
	.section4 .videoWrap:before { left:-2rem;} 
	.section4 .videoWrap:after{font-size:3rem;}

}
@media (max-width:768px){
	/* visual */ 
	.section1 .quickMenu .open { bottom:4rem; width:2.3rem; height:2.3rem; }
	.section1 .quickMenu .open i { line-height:2.3rem;}
	.section1 .quickMenu .box { top:auto; right:0; bottom:4rem; -webkit-transform:none; transform:none;}
	.section1 .quickMenu ul { padding:0; width:5rem; border-radius:0.5rem; }
	.section1 .quickMenu ul li + li:before { width:80%; left:10%;}
	.section1 .quickMenu ul li a {padding:0.5rem 0;}
	.section1 .quickMenu ul li a:before { width:100%; height:100%; border-radius:0;}
	.section1 .quickMenu ul li a img { width:1.5rem;}
	.section1 .quickMenu .close { width:2.3rem; height:2.3rem; }
	.section1 .quickMenu .close i {line-height:2.3rem;}

	.section1 .visual .visualWrap .slogan .txt1 { font-size:2.5rem; }
	.section1 .visual .visualWrap .slogan .txt2 { font-size:1.5rem; }

	/* section2 */
	.section2 { padding:2.5rem 0 2rem; }
	.section2 .president { display:block; margin-top:1.5rem; }
	.section2 .president dl { width:100%; padding-right:0; }  
	.section2 .president .img { width:100%; height:auto; margin-bottom:1rem; }
	.section2 .president .img img { width:100%; height:auto;}
	.section2 .president .more { width:10rem; margin:2rem auto 0; padding:0 1rem; line-height:3rem; }
	.section2 .president .more i { line-height:3rem;}

}
@media (max-width:580px){ 
	/* title01 */
	.title01 { font-size:1.4rem; }   

	/* control 공통 */ 
	.control a{width:1rem; height:0.8rem; } 
	.control a.play { font-size:1.2rem;} 
	.control a.play i { display:block; line-height:0.7; }
	.control .count { font-size:0.8rem; }
	.control .count .current {  padding-right:1rem; }
	.control .count .current:before { right:0.4rem; }

	.section4 .mlink .control,
	.section4 .popup .control { position:relative; right:auto; top:auto; text-align:center; margin:1rem auto 0; }
	
}
@media (max-width:480px){ 
	/* visual */ 
	.section1 .visual .slick-track { height:16rem; }  
	.section1 .visual .visualWrap .slogan { padding:0 1rem; }
	.section1 .visual .visualWrap .slogan .txt1 { font-size:1.5rem; }
	.section1 .visual .visualWrap .slogan .txt2 { font-size:1rem; }
	.section1 .visual .control { bottom:1rem;}

	.section2 .president .img p { padding:0.5rem 0 0 1rem; }

	
	.section4 .videoWrap .video {margin-right:0; margin-top:2rem;}
	.section4 .videoWrap .btn_youtube {top:1rem;} 
}