@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');


@import url(./font_noto/font.css);

/*** Reset ***/
html, body { width: 100%, height: 100% }
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, form, fieldset, input, select, label, textarea, table, caption, thead, tfoot, tbody, tr, th, td
{
  margin:0;padding:0;
  color:#000;font-family:'Roboto','Noto Sans KR','Noto Sans SC',Sans-serif;font-size:16px;font-weight:400;line-height:1.5;
  font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;
  letter-spacing:-0.5px;
}
b, span, strong, input, a, button{font-size:inherit;font-family:inherit;color:inherit}
article, aside, dialog, footer, header, section, footer, nav, figure, hgroup, details, summary, figure, figcaption {display: block;}
cite{display:inline}
html, body {height:100%;}
body {overflow-x:hidden;margin:0px; overflow-x:hidden; word-break:keep-all;	overflow-wrap:anywhere; font-size: 0;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
img{border:0;max-width:100%}
label, input, textarea, select{vertical-align:middle}
ol, ul{list-style:none;}
table{border-collapse:collapse;table-layout:fixed;}
fieldset{border:none}
.skip, hr, legend{position:absolute;left:-1000%;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
button{margin:0;padding:0;border:none;background:none;cursor:pointer;display:inline-block;}
b {font-weight:500}
h1, h2, h3 { word-break: keep-all; }


header::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 40px; background: #313133; z-index:1;}
header {position:relative;width:100%;margin:0 auto;box-sizing:border-box;padding:0 140px 0 60px;z-index:2}
header .logo {display:block;position:absolute;left:60px;top:70px;z-index:2;transition:0.2s;}
header .logo>a {display:block;overflow:hidden;}
header .logo>a img {max-width:none;height:46px;vertical-align:top; width:80%; height:80%;}
header .logo>a>span {display:none;}
header .top_util {position:absolute;left:0;top:0px;width:100%;height:40px;box-sizing:border-box;z-index:1;}
header .top_util>button,
header .top_util>a {display:block;position:absolute;top:82px;overflow:hidden;width:30px;height:30px;text-indent:-999px;}
header .top_util .btn_topSearch {right:190px;background:url(../img/layout/ico_topSearch_black.png) no-repeat center;}
header .top_util .btn_topSitemap {right:140px;background:url(../img/layout/ico_lineGrp_black.png) no-repeat center;}
header .top_util .siteCateg {float:left;overflow:hidden;height:40px;box-sizing:border-box;border-left:1px solid #505051;font-size:0;text-align:left;white-space:nowrap;}
header .top_util .siteCateg>a {display:inline-block;overflow:hidden;/*width:140px;*/width:159px;box-sizing:border-box;border-right:1px solid #505051;color:rgba(255,255,255,0.5);font-family:'Roboto','Noto Sans KR',sans-serif;font-size:14px;font-weight:400;line-height:41px;text-align:center;vertical-align:top;}
header .top_util .siteCateg>a.on {border-right:none;background:#a70638;color:#fff;}
header .top_util .etc {float:right;padding-right:0px;}
header .top_util .etc>a {display:inline-block;overflow:hidden;height:40px;color:#fff;font-family:'Roboto','Noto Sans KR',sans-serif;font-size:14px;font-weight:400;line-height:41px;vertical-align:top;}
header .top_util #popup {float:right; display:inline-block;font-size:14px; z-index:2; color:rgba(255, 255, 255, 0.5); margin-top:0;}
header .top_util #popup button{background-color:#000; display:inline-block; padding:10px; color:#ffffff; }
header .top_util #popup #confirm{margin:-3px 0 0 0; padding:0}

main{position: fixed; overflow: hidden; width: 100%;}

/*ºñÁÖ¾ó ´ÙÅ©ÆÐÅÏ*/
.video-container::after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:url(/type/IPSI_A/img/intro/pattern.png); opacity:0.7;}
/*.video-container {position: relative; width: 100%; height: 52vw; overflow: hidden;}*/
.video-container {position: relative; width: 100%; height: 100vh; overflow: hidden;}
video {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%);}

/*°øÁö»çÇ×*/
.notice{width:100%; height:50px; overflow:hidden;}
.rolling{position:relative; width:100%; height:auto;}
.rolling img{position:relative; width:20px; vertical-align:text-top;}
.rolling li{width:320px; height:50px; line-height:50px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
	
/* ¸ð¹ÙÀÏ¿¡¼­ ÃÖ¼Ò ³ôÀÌ Àû¿ë */
@media (max-width: 768px) {
	.video-container {min-height: 400px; /* ÃÖ¼Ò ³ôÀ̸¦ 400px·Î ¼³Á¤ */ height: 100vw;}
}
/* whyCUK */
/* °øÅë ¿µ¿ª */
body {
  overflow-x: hidden;
  font-size: 0;
}

h1, h2, h3 { word-break: keep-all; }
.f_white{color:#fff !important;}
#contents {
  position: relative;
  display: inline-block;
  width: 100%;
}
section { position: relative; }
section .innerContents {
  position: relative; z-index: 1;
  margin: 0 auto; padding: 0 30px 0 83px; box-sizing: border-box;
}

section.subSection { height: 900px  }
/*section.subSection .innerContents {height:935px }*/

section.subSection .titleArea h1 {font-size: 115px; font-weight: bolder; line-height:100%; font-family: "Josefin Sans", sans-serif; letter-spacing:-8px;}
section.subSection .titleArea h2 {font-size: 40px; font-weight: bold; line-height:100%; margin-top:50px;}
section.subSection .titleArea h3 {margin: 30px 0; font-size: 16px; font-weight: normal;}
section.subSection .titleArea h4 {margin: 20px 0; font-size: 14px; font-weight: normal; color:#d1d1d1 !important;}
section.subSection:not(#media) .titleArea h1, section.subSection:not(#media) .titleArea h2, section.subSection:not(#media) .titleArea h3, section.subSection:not(#media) .titleArea h4,
section.subSection:not(#media) .titleArea+a, section.subSection:not(#media) .slideBtn, .category_slide { opacity: 0; }
section.subSection .rightSide {
  position: absolute; z-index: 2;
  right: 0;
  width: 60%;
}
section.subSection .rightSide a div {
  /* Initial styling */
  transition: transform 0.2s ease-in-out; /* Smooth animation */
}
section.subSection .rightSide a:hover div {
  /* Scale up the background on hover */
  transform: scale(1.03);
  border-radius:0px;  
}
.subArrLink {
  display: inline-block;
  min-width: 395px; height: 80px;
  padding: 0 30px; box-sizing: border-box;
  border: 1px solid #212121;
  font-size: 18px; font-weight: 500; line-height: 80px;
  background: url(../../KOR_A/img/info/why/icon_subArrLink.png) no-repeat right 30px center;
  transition: all 0.2s;
}
.subArrLink:hover {
  background: #a70638 url(../../KOR_A/img/info/why/icon_subArrLink_White.png) no-repeat right 30px center;
  color: #fff;
  border-color: #a70638;
}
.dotList>li {
  position: relative;
  padding-left: 15px;
}
.dotList>li:before {
  content: '';
  position: absolute; display: block;
  left: 0; top: 9px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background-color: #a70638;
}
.redArrow {
  display: inline-block;
  width: 20px; height: 20px;
  background: url(../../KOR_A/img/info/why/icon_arrow_red.gif) no-repeat right center;
  vertical-align: middle;
}
.redArrow.small {
  display: inline-block;
  width: 12px; height: 12px;
  background: url(../../KOR_A/img/info/why/icon_arrow_s_red.gif) no-repeat right center;
  vertical-align: middle;
}
.whiteArrow {
  display: inline-block;
  width: 20px; height: 20px;
  background: url(../../KOR_A/img/info/why/icon_arrow_white.gif) no-repeat right center;
  vertical-align: middle;
}
.slideBtn {
  display: flex;
  /*width: 150px;*/
  align-items: center;
}
.slideBtn>div {
  display: inline-block;
  color: #ffffff; font-size: 12px;  
  margin-left:10px;
}
.slideBtn .play {
  display: none;
  width: 7px; height: 12px;
  margin: 0 6px;
  background: url('/type/common/img/kor/deptInfo/sliderplay_white.png') no-repeat right center;
}
.slideBtn .pause {
  width: 7px; height: 12px;
  margin: 0 6px;
  background: url('/type/common/img/kor/deptInfo/sliderStop_white.png') no-repeat right center;
}
.slideBtn .prev {
  width: 39px; height: 26px;
  background-image: url('/type/common/img/kor/deptInfo/sliderArr_Prev_white.png');
}
.slideBtn .next {
  width: 39px; height: 26px;
  background-image: url('/type/common/img/kor/deptInfo/sliderArr_Next_white.png');
}

section.subSection.active:not(#media) .titleArea h1 { animation: moveTop both 0.8s 0.3s; }
section.subSection.active:not(#media) .titleArea h2 { animation: moveTop both 0.8s 0.6s; }
section.subSection.active:not(#media) .titleArea h3 { animation: moveTop both 0.8s 0.6s; }
section.subSection.active:not(#media) .titleArea h4 { animation: moveTop both 0.8s 0.9s; }
section.subSection.active:not(#media) .titleArea h5 { animation: moveTop both 0.8s 1.2s; }
section.subSection.active:not(#media) .titleArea+a { animation: moveTop both 0.8s 1.2s; }
section.subSection.active:not(#media) .category_slide { animation: moveTop both 0.8s 2.1s; }
section.subSection.active:not(#media) .slideBtn { animation: beat both 0.8s 2.5s; }

.category_slide{font-size:14px !important; color:#fff; position:absolute; top:455px; right:15px; float:right; text-align:right; z-index:1; width:500px; }
.category_slide button{padding:5px 7px; margin-left:2px; border:1px solid #fff; border-radius:15px; margin-top:4px}
.category_slide button:first-child{background-color:#ffffff82; color:#a2115e; margin-top:0}


@keyframes moveTop {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes moveLeft {
  from { transform: translateX(120px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleRow {
  from { transform: scaleY(0.5); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(1.4); }
  to { transform: scale(1); }
}

@keyframes beat {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes scrollDown {
  0% { transform: translate3d(0, -200%, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate3d(0, 200%, 0); opacity: 0; }
}

/* The Best */
.listComponent h4 {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 22px; font-weight: bold;
}
.listComponent h4>sub { font-size: 14px; }
.listComponent li{ font-size: 16px; }
.listComponent p { font-size: 14px; color:#fff; padding-top:0; color:#000 ; z-index:4; position:absolute}
.listComponent.white h4, .listComponent.white li, .listComponent.white p { color: #ffffff; }
.listComponent.white .dotList>li:before { background-color: #ffffff; }
.listComponent * { word-break: keep-all; }

#best .titleArea { padding-top:210px; }
#best .titleArea * { color: #ffffff; }

#best .rightSide .subVisual {
  position: absolute; z-index: 0;
  right: 0; top: 0;
  width: 60%; height: 417px;
  background: url(../../KOR_A/img/info/why/Section3_img1.jpg) no-repeat right top;
}
#best .rightSide .listComponent.white {
  position: absolute;
  left: 30px; bottom: 70px;
  width: 33%;
}
#best .rightSide .listComponent.white h4 { font-size: 30px; }

#best .rightSide.slide {
  top: 540px;
  width: 60%; height: 330px;
  font-size: 0;
}
#best .rightSide.slide .unit {
  position: relative; 
  display: inline-block; 
  z-index:2;
  width: 260px; height: 330px;
  margin-right: 30px; padding: 20px 20px 30px 20px; 
  box-sizing: border-box;
  vertical-align:top;
  border-radius:15px;
  /*border:1px solid rgba(0 0 0 / 15%);*/
}

h4 .snsGrp{padding-top:140px;}
h4 .snsGrp a{margin-right:6px}

#best .rightSide.slide .unit .redArrow {
  position: absolute;
  width: 30px; height: 30px;
  right: 20px; bottom: 20px;
}

#best .slideBtn {
  position: absolute; z-index: 1;
  left: 40%; top: 500px;
}

#best .rightSide .listComponent.white, #best .rightSide.slide { opacity: 0; }
#best.active .rightSide .listComponent.white { animation: moveLeft both 0.8s 1.2s; }
#best.active .rightSide.slide { animation: scaleRow both 0.8s 1.5s; }

/* Academics */
#academics { text-align: center; height:0}

/* Footer */
#footer, #footer .innerContents {
  z-index:1
}

#footer .innerContents {
  display: flex; justify-content: space-between; align-items: center;
}

#footer .address * { color: #aeaeae; }
#footer {position:relative;}
footer .f_info address {font-style:normal;}
footer .f_info address p>b {display:block;position:relative;margin-bottom:11px;color:#fff;font-family:'Roboto','Noto Sans KR',sans-serif;font-size:14px;font-weight:400;line-height:22px;}
footer .f_info address p>span {display:block;position:relative;margin:0 20px 6px 0;color:#fff;font-family:'Roboto','Noto Sans KR',sans-serif;font-size:14px;font-weight:400;line-height:19px;}
footer .f_info address p>span.block {display:block;}
footer .f_info address .copyright {display:block;padding-top:15px;font-style:normal;font-size:14px;color:rgba(255,255,255,0.6);font-family:'Roboto','Noto Sans KR',sans-serif;font-size:14px;font-weight:400;line-height:17px;}
footer .f_info .f_mark {overflow:hidden;margin-top:27px;font-size:0;}
footer .f_info .f_mark a {display:inline-block;overflow:hidden;margin-right:20px;vertical-align:top;}
footer .f_func {display:block;float:right;font-size:0;text-align:right;}
footer .f_func .f_menu {display:inline-block;overflow:hidden;width:235px;box-sizing:border-box;padding-top:4px;font-size:0;text-align:left;vertical-align:top;}
footer .f_func .f_menu li {display:block;position:relative;color:rgba(255,255,255,0.8);font-family:'Roboto','Noto Sans KR',sans-serif;font-size:15px;font-weight:400;line-height:19px;vertical-align:top;}
footer .f_func .f_menu li+li {margin-top:15px;}
footer .f_func .f_menu li.point a {color:#c59c40;}
footer .f_func .f_etc {display:inline-block;overflow:hidden;width:220px; box-sizing:border-box;padding-top:2px;font-size:0;text-align:left;vertical-align:top;}
footer .f_func .f_etc .f_service a {display:block;position:relative;overflow:hidden;height:19px;padding-right:25px;color:#fff;font-family:'Roboto','Noto Sans KR',sans-serif;font-size:15px;font-weight:400;line-height:20px;}
footer .f_func .f_etc .f_service a::after {content:'';display:block;position:absolute;right:0;top:0;overflow:hidden;width:19px;height:19px;border-radius:50%;background:#d2d2d2 url(../img/layout/f_plus_black.png) no-repeat center;}
footer .f_func .f_etc .f_service a+a {margin-top:27px;}
footer .f_func .f_etc .f_service .btn_remoteSerive {display:block;overflow:hidden;width:150px;height:40px;margin-top:54px;box-sizing:border-box;padding:0 10px;background:#b9193f;line-height:41px;text-align:center;}
footer .f_func .f_etc .f_service .btn_remoteSerive::after {display:none;}
footer .f_func .f_etc .f_sns {margin-top:21px;}
footer .f_func .f_etc .f_sns li {display:inline-block;margin-right:25px;vertical-align:top;}
footer .f_func .f_etc .f_sns li:last-child {margin-right:0;}
footer .f_func .f_etc .f_sns li a {overflow:hidden;font-size:0;}
footer .f_func .f_etc .f_sns li a img {max-height:100%;vertical-align:middle;}


/* Responsive */
@media all and (max-width:1600px){
  #best .titleArea h1 { font-size: 80px; }
  #best .titleArea h2 { font-size: 32px; }
  #best .titleArea h3 { font-size: 16px; }  
  h4 .snsGrp {padding-top: 220px;}
}
@media all and (max-width:1445px) {  
  h4 .snsGrp{padding-top:285px;}
}

@media all and (max-width:1400px) {  
  #best .titleArea {padding-top:90px;}
   section#best.subSection .innerContents {padding-top:120px;}
   .rightSide{position:absolute; top:550px}
   section.subSection .titleArea h4 .snsGrp{position:absolute; top:100px; right:0}
   #footer{top:385px;}
}

/*wide Áß¾ÓÁ¤·Ä*/
@media all and (max-width:1041px){
  #contents{position:static !important;}
  section.subSection{position:absolute; top:50%; width:100%; transform:translateY(-50%);}
}

@media all and (max-width:1040px){
  #best .rightSide.slide{width:100%; top:530px; height: 290px;}
}

/* Mobile */

@media all and (max-width:1040px) {
  header .logo {left:30px;}
  
  section .innerContents { max-width: none; }
  section.subSection { height: 1275px; }
  section.subSection .innerContents {
    padding: 0 30px;
    height: 1275px;
  }
  section.subSection .titleArea h1 { font-size: 100px; }
  section.subSection .titleArea h3 { font-size: 24px; }

  .subArrLink { min-width: 100%; }

  section#best.subSection { height: 1150px; }
  section#best.subSection .innerContents { height: 1150px; }

  #best .mainVisual { background-image: url(../../KOR_A/img/info/why/Section3_bg2.jpg); }

  #best .titleArea { padding-top: 50px; }
  #best .titleArea br.onOff { display: none; }

  .category_slide{top:555px}
  #best .rightSide:not(.slide) {
    left: 0; top: 380px;
    width: 100%; height: 390px;
  }
  #best .rightSide .listComponent.white {
    width: 270px;
    bottom: 60px;
  }
  #best .rightSide .subVisual {
    width: 350px; height: 290px;
    left: calc(100vw - 350px); top: -30px;
  }

  #best .rightSide.slide {
    width: 100%;
    top: 650px; height: 290px;
    padding-left: 30px;
  }
  #best .rightSide.slide .unit {
    width: 250px; height: 290px;
    margin-right: 20px;
  }
  #best .slideBtn { left: 30px; top:600px; }
  
  #footer{top:500px;}
  section.subSection .titleArea h4 .snsGrp{top:210px;}
  
  section#footer { height: 400px; }
  section#footer .innerContents {
    display: block;
    height: 400px;
    padding: 40px 30px; box-sizing: border-box;
    background-color: #ffffff;
  }
  #footer .address { margin-top: 20px; }
  #footer .address * { color: #000000; }
  #footer .address .add {
    font-size: 24px; line-height: 48px;
    margin-bottom: 30px;
  }
  #footer .address .copy { font-size: 20px; }
  #footer img:not(.onOff) { display: none; }
  #footer img.onOff { display: block; }

}

@media all and (max-width:800px){
.video-container {position: relative; width: 100%; height: 200vh; overflow: hidden;}
}

@media all and (max-width:768px){
  section.subSection .titleArea h4 .snsGrp{position:absolute; left:0; top:280px;}  
  #footer .address .add {font-size: 20px;}
  #footer .address .copy {font-size: 18px;}
}
@media all and (max-width:680px) {
 header .top_util #popup {position:absolute; top:1150px; min-width:100%; background-color:#313133; display:block; font-size:14px; z-index:2; color:rgba(255, 255, 255, 0.5); text-align:right}
 header .top_util #popup button{background-color:#000; display:inline-block; padding:10px; color:#ffffff; right:30px; }
 header .top_util #popup #confirm{margin:-3px 0 0 0; padding:0}
 #footer{top:500px;}
 section.subSection .titleArea h4 .snsGrp{position:absolute; left:0; top:280px;}  
 .category_slide{top:510px; left:30px; text-align:left; float:left; }
 header .top_util .siteCateg{width:100%}
 header .top_util .siteCateg > a{width:33.3%}
}

@media all and (max-width:640px) {
  section.subSection .titleArea h1 { font-size: 80px; }
  section.subSection .titleArea h2 { font-size: 32px; }
  section.subSection .titleArea h3 { font-size: 20px; }
  #best .rightSide .subVisual {
    width: 50vw;
    left: 50vw;
  }
  #best .rightSide.slide {top: 750px; }
  #best .rightSide .listComponent.white { width: 210px; }
  #best .rightSide .listComponent.white h4 { font-size: 24px; }
  #best .rightSide .listComponent.white li { font-size: 14px; }
  #best .slideBtn {top:700px; }
  .category_slide{top:600px; left:30px; text-align:left; float:left; }
 header .top_util #popup {position:absolute; top:1250px;}
  #footer{top:590px;}
 section.subSection .titleArea h4 .snsGrp{position:absolute; left:0; top:360px;}  
}
@media all and (max-width:625px) { 
  #footer{top:510px;}
 section.subSection .titleArea h4 .snsGrp{position:absolute; left:0; top:300px;} 
}

@media all and (max-width:550px) { 
  #best .titleArea h1 {font-size: 70px;}
  #best .rightSide .subVisual { height: 220px; }
  #best .rightSide .listComponent.white { bottom: 30px; }
  #footer{top:620px;}
  #footer img { width: 240px; }
  #footer .address .add { font-size: 20px; } 
  footer .f_info address p>b {font-size:12px;}
  section.subSection .titleArea h4 .snsGrp{top: 410px;}

}
@media all and (max-width:535px) {   
  #footer{top:550px;}
  section.subSection .titleArea h4 .snsGrp{top: 315px;}
}
@media all and (max-width:526px) {   
  #best .titleArea h1 {font-size:70px;}
  section.subSection .titleArea h2{margin-top:20px}
  #footer{top:550px;}
  section.subSection .titleArea h4 .snsGrp{top: 340px;}
}

@media all and (max-width:453px) {
  section.subSection .titleArea h1{font-size: 50px;}
  section.subSection .titleArea h2{font-size: 24px;}
  section.subSection .titleArea h3{font-size: 18px;}
  .category_slide button{padding:3px; font-size:12px;}
  #academics .brownBox { height: auto; }
  section.subSection .titleArea h4 .snsGrp{top:290px;}
  #footer{top:500px;}
  
  footer .f_info address p>b {line-height:normal;}
}

@media all and (max-width:450px) {
  #footer{top:500px;}
}
@media all and (max-width:350px) {
  #best .titleArea h1{font-size:65px}
  .category_slide button{padding:2px 3px; font-size:12px; margin-left:1px;}
  .sharp_none{display:none}
}