@charset "utf-8";

/*
#slideMenu { font-family:sans-serif; position:fixed; left:30px; top:50%; z-index:200; font-size:25px; }
#slideMenu a {display:none; text-align:center;}
#slideMenu a.active {display:block;}
#slideMenu a.white {color:#fff;}
#slideMenu strong {display:block; position:relative; padding-bottom:30px;}
#slideMenu strong::before {content:''; position:absolute; left:50%; bottom:10px; width:6px; height:6px; border-radius:50%; background:#222; }
#slideMenu a.white strong::before {background:#fff;}
#slideMenu a.onP, #slideMenu a.onN {display:block; position:absolute; left:0; top:-3rem; width:2.5rem; height:2.5rem; border-top:2px solid #333; border-right:2px solid #333; transform:rotate(-45deg); font-size:0; }
#slideMenu a.onN { top:auto; bottom:-3rem; transform:rotate(135deg); }
*/
#slideMenu {position:fixed; left:30px; top:50%; z-index:200; transform:translate(0, -50%);}
#slideMenu::before {content:''; position:absolute; left:0.7rem; top:2rem; width:1px; height:calc(100% - 4rem); border-left:1px dashed #0062c7;}
#slideMenu a { position:relative; display:block; padding:0 0 0 2.5rem; line-height:5rem; height:5rem;}
#slideMenu.white a {color:#fff;}
#slideMenu a::before {content:''; position:absolute; left:0; top:1.7rem; width:1rem; height:1rem; border:3px solid rgba(255,255,255,0.3); background:#999; border-radius:50%;  }
#slideMenu a.active::before,
#slideMenu a:hover::before {border:3px solid rgba(255,255,255,0.3); background:#0062c7;}
#slideMenu a strong {display:none;}
#slideMenu a.active strong,
#slideMenu a:hover strong {display:block;}
#container .cont5, #container .cont5 .fp-tableCell {height:auto !important;}
.section .fp-tableCell {overflow:hidden;}
@media all and (max-width:1023px){
  #slideMenu {display:none;}
  .section, .fp-tableCell {height:auto !important;}
  .section {padding:4rem 0;}
}
@media all and (max-height:780px){
  .section, .fp-tableCell {height:auto !important;}
  .section {padding:4rem 0;}
}

.section h2 { font-family:'NEXONLv1', sans-serif;  font-size:2.2rem; margin-bottom:2rem; }
.section h2 img { padding-bottom:1rem; }
.section h2 span {position:relative; padding:1rem 1.5rem 0 0.5rem; }
.section h2 span::before {content:''; position:absolute; right:0; bottom:0; width:0.7rem;; height:0.7rem; background:#0062c7; border-radius:50%; }

.section.cont1 {position:relative; }
.visual {text-align:center; min-height:70rem;}
.visual .control { position:absolute; left:50%; bottom:7rem; text-align:center; transform:translate(-50%, 0); }
.visual .control a { position:relative; display:inline-block;; width:4rem; height:4rem; text-indent:-9999px; vertical-align: top; }
.visual .control a::before {content:''; position:absolute; left:1.5rem; top:1rem; width:1.5rem; height:1.5rem; border-left:4px solid #fff; border-top:4px solid #fff; transform:rotate(-45deg);  }
.visual .control a.next::before { transform:rotate(135deg); left:0.6rem; }
.visual .control .paging {display:inline-block; margin:0 2rem;}
.visual .control .paging li {display:none; color:#fff; color:#fff; font-size:2rem; line-height:4rem; font-weight:600; text-shadow:1px 1px 5px rgba(0,0,0,0.5); }
.visual .control .paging li.slick-active {display:block; }
.visual .control .paging li span {opacity:0.5;}
.visual .control .paging li span.bold { position:relative; padding-right:4.5rem; opacity:1; }
.visual .control .paging li span.bold::before {content:''; position:absolute; right:2rem; top:1rem; width:5px; height:5px; background:#fff; border-radius:50%; }
.visual .text { position:relative; display:inline-block; color:#fff; padding:7rem; max-width:90%; }
.visual .text::before, .visual .text::after {content:''; position:absolute; left:0; width:100%; height:7rem; border:2rem solid rgba(255,255,255,0.2); box-sizing:border-box; }
.visual .text::before { top:0; border-bottom:0 !important;}
.visual .text::after { bottom:0; border-top:0 !important;}
.visual .text .txt1 { font-family:'NEXONLv1', sans-serif; font-size:6.5rem; line-height:1.3; }
.visual .text .txt1 strong {display:block; }
.visual .text .txt2 { font-size:2rem; line-height:2; margin-top:4rem;  }
.visual .text .txt2 strong {display:block;}
.visual_ul { position:absolute; left:0; top:10rem; width:100%; height:calc(100% - 10rem); z-index:-1; }
.visual_ul div {height:100%;}
.visual_ul li { position:relative; height:100%; background:#000; object-fit: cover; object-position: center; overflow:hidden; }
.visual_ul li video { position:absolute; left:0; top:50%; width:100%; transform:translate(0,-50%); z-index:10; }
/*.visual_ul li::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:20; }*/
.visual_ul .bg1 { background:url('../img/main/visualImg1.jpg') no-repeat center/cover; }
.visual_ul .bg2 { background:url('../img/main/visualImg2.jpg') no-repeat center/cover; }
@media all and (max-width:1023px){
  .section.cont1 {padding:0; }
  .visual {padding:10rem 0 15rem; min-height:50rem;}
  .visual .control {bottom:4rem; }
  .visual .text {padding:5rem;}
  .visual .text .txt1 {font-size:5rem;}
  .visual .text .txt2 {font-size:1.7rem;}
}
@media all and (max-width:768px){
  .visual {padding:5rem 0 12rem; min-height:40rem;}
  .visual .text {padding:3.5rem;}
  .visual .text::before, .visual .text::after { height:4rem; border:1.2rem solid rgba(255,255,255,0.2)}
  .visual .text .txt1 {font-size:3.5rem;}
  .visual .text .txt2 {font-size:1.6rem;}
}
@media all and (max-width:480px){
  .visual {min-height:30rem;}
  .visual .control {width:100%; left:0; transform:translate(0, 0);}
  .visual .text .txt1 { font-size:2.7rem; }
  .visual .text .txt2 { margin-top:2rem; }
  .visual .text .txt2 strong {display:inline;}
}

.cont2 {background-image:url('../img/main/bg1_L.jpg'), url('../img/main/bg1_R.jpg'); background-position:left bottom, right top; background-repeat:no-repeat; }
.cont2 a.more {position:absolute; right:0; top:1rem; width:3rem; height:3rem; background:url('../img/main/more.gif') no-repeat center; text-indent:-9999px; }
.cont2 .movie { position:relative; width:65%; margin:0 0 0 35%; }
.cont2 .movie .overH > * {float:left; width:47.5%; height:25rem; background:#000; }
.cont2 .movie .overH > *:first-child {margin-right:5%; }
.cont2 .notice, .cont2 .news { position:relative; float:left; width:30%; margin:0 35% 5rem 0; }
.cont2 .notice { margin:0 5% 0 0; }
.cont2 .notice .img, .cont2 .news .img {position:relative; width:100%; height:25rem; overflow:hidden; }
.cont2 .notice .img img, .cont2 .news .img img {position:absolute; left:50%; top:50%; max-width:unset; transform:translate(-50%, -50%); }
.cont2 .notice p, .cont2 .news p {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.cont2 .notice .txt1, .cont2 .news .txt1 {font-size:2.3rem; font-weight:600; margin:1rem 0 0.5rem; }
@media all and (max-width:1023px){
  .cont2 {background:none;}
  .cont2 .movie {width:100%; margin:0; }
  .cont2 .notice, .cont2 .news { width:47.5%; margin:0 0 5rem 0; }
  .cont2 .notice { margin:0 5% 5rem 0; }
}
@media all and (max-width:768px){
  .cont2 .movie .overH > *, .cont2 .notice .img, .cont2 .news .img { height:20rem; }
}
@media all and (max-width:480px){
  .cont2 .movie .overH > * { height:15rem; }
  .cont2 .notice, .cont2 .news { width:100%; }
  .cont2 .notice { margin:0 0 5rem; }
}

.cont3 { color:#fff; background:url('../img/main/bg2.jpg') no-repeat center/cover; }
.cont3 h2 { text-align:center; font-size:3.5rem; }
.cont3 h2 span::before { background:#01aef0; }
.cont3 .img { position:relative; text-align:center;}
.cont3 .img .mobile {display:none;}
.cont3 .img img {max-width:1023px; width:100%; }
.cont3 .img a { position:absolute; right:0; bottom:0; display:block; background:#00b7ce; color:#fff; padding:1rem 2rem; border-radius:5rem; }
.cont3 .img a span {display:inline-block; position:relative; padding-right:1.5rem; }
.cont3 .img a span::before {content:''; position:absolute; width:0.8rem; height:0.8rem; right:0; top:0.6rem; border-top:3px solid #fff; border-right:3px solid #fff; transform:rotate(45deg); }
.cont3 .list { margin-top:5rem; }
.cont3 .list dl {float:left; width:21.25%; margin-left:5%; }
.cont3 .list dl:first-child {margin-left:0; }
.cont3 .list dl dt { background:#0062c7; font-weight:600; font-size:1.8rem; text-align:center; padding:1rem; }
.cont3 .list dl dd { border-bottom:1px solid rgba(255,255,255,0.1); padding:1rem; }
@media all and (max-width:768px){
  .cont3 .img .pc {display:none;}
  .cont3 .img .mobile {display:block;}
  .cont3 .list dl {width:47.5%;}
  .cont3 .list dl:nth-child(2n+1) {margin-left:0; }
}
@media all and (max-width:480px){
  .cont3 h2 {font-size:2.5rem;}
  .cont3 h2 img {height:5rem;}
}
/*
.cont4 { background-color:#e0e9f2; background-image:url('../img/main/bg3_L.png'), url('../img/main/bg3_R.png'), url('../img/main/bg3.png'); background-position:left top, right bottom, center; background-repeat:no-repeat;}
.cont4 h2 { position:absolute; left:50%; top:20%; transform:translate(-50%, 0); text-align:center; font-size:3.5rem; margin:0; }
.cont4 .link { position:relative; width:33.33%; float:right; text-align:center; margin:2rem 0;}
.cont4 .link:nth-child(2n) { clear:both; float:left; }
.cont4 .link::before {content:''; position:absolute; top:0; left:50%; width:27rem; height:27rem; margin-left:-13.5rem; background:#fff; border-radius:50%; }
.cont4 .link::after {content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; background:#0062c7; border-radius:50%; }
.cont4 .link1::after {margin:4.8rem 0 0 9.6rem; }
.cont4 .link2::after {margin:3.7rem 0 0 -11.6rem; }
.cont4 .link3::after {margin:-10.8rem 0 0 11.2rem; }
.cont4 .link4::after {margin:0 0 0 -13.4rem; }
.cont4 .link h3 {  position:absolute; left:0; top:2rem; width:100%; font-size:2.2rem; text-align:center; }
.cont4 .link .img {line-height:27rem; height:27rem;}
.cont4 .link .img img {display:inline-block;}
.cont4 .link .control a { position:absolute; left:50%; top:11.5rem; width:5rem; height:5rem; margin-left:-16rem;  background:#0062c7; border-radius:50%; text-indent:-99999px; z-index:10; }
.cont4 .link .control a::before {content:''; position:absolute; left:1.9rem; top:1.5rem; width:1.3rem; height:1.3rem; border-left:4px solid #fff; border-top:4px solid #fff; transform:rotate(-45deg);  }
.cont4 .link .control a.next {margin-left:11rem;}
.cont4 .link .control a.next::before { transform:rotate(135deg); left:1.4rem; }
.cont4 .link2 .control a {background:#107ac4;}
.cont4 .link3 .control a {background:#ed1550;}
.cont4 .link4 .control a {background:#00b7ce;}
.cont4 .link .txt1 {font-size:2rem; font-weight:600; margin:1rem 0 0.5rem;}
@media all and (max-width:1520px){
  .cont4 {background-size:auto, auto, 50% auto;}
  .cont4 .link::after {display:none;}
}
@media all and (max-width:1023px){
  .cont4 { background-image:url('../img/main/bg3_L.png'), url('../img/main/bg3_R.png');}
  .cont4 h2 {position:relative;}
  .cont4 .link { width:50%; }
}
@media all and (max-width:768px){
  .cont4 .link::before {width:20rem; height:20rem; margin-left:-10rem;}
  .cont4 .link .img {line-height:20rem; height:20rem;}
  .cont4 .link .control a { top:8rem; margin-left:-13rem; }
  .cont4 .link .control a.next {margin-left:8rem;}
  .cont4 .link .img img {width:17rem;}
}
//주석풀고 이부분만 숨기기 시작
@media all and (max-width:480px){
  .cont4 h2 {font-size:2.5rem;}
  .cont4 h2 img {height:5rem;}
  .cont4 .link {width:100%;}
  .cont4 .link::before {width:27rem; height:27rem; margin-left:-13.5rem;}
  .cont4 .link .img {line-height:27rem; height:27rem;}
  .cont4 .link .img img {width:auto;}
  .cont4 .link .control a { top:11.5rem; margin-left:-16rem; }
  .cont4 .link .control a.next {margin-left:11rem;}
}
//주석풀고 이부분만 숨기기 끝
@media all and (max-width:480px){
  .cont4 h2 {font-size:2.5rem;}
  .cont4 h2 img {height:5rem;}
  .cont4 .link {width:100%;}
}
*/



.cont4 { background-color:#e0e9f2; background-image:url('../img/main/bg3_L.png'), url('../img/main/bg3_R.png'), url('../img/main/bg3.png'); background-position:left top, right bottom, center; background-repeat:no-repeat;}
.cont4 .wrap {position:relative; min-height:70rem;}
.cont4 h2 { position:absolute; left:50%; top:20%; transform:translate(-50%, 0); text-align:center; font-size:3.5rem; margin:0; }
.cont4 a { display:flex; align-items:center; position:absolute; width:20rem; height:20rem; background:#Fff; border-radius:50%; right:0; bottom:0; overflow:hidden; box-shadow:1px 1px 2rem rgba(0,0,0,0.1); transition: all 0.3s ease 0.1s;}
.cont4 a:hover {transform:scale(1.1);}
.cont4 a div {margin:0 auto; text-align:center;}
.cont4 a div p {font-size:2rem; margin-top:1rem;}
.cont4 .link1 {top: 0;left:20%;}
.cont4 .link2 {top: 0;right: 16%;}
.cont4 .link3 {top: 9%;left: 3%;}
.cont4 .link4 {top: 6%;right: 0;}
.cont4 .link5 {top: 30%;left: 16%;transform: scale(0.9);}
.cont4 .link6 {top: 41%;left:1%;}
.cont4 .link7 {transform: scale(0.8);top: 58%;left: 12%;}
.cont4 .link8 {top: 34%;right: 0;transform: scale(0.8);}
.cont4 .link9 {top: 29%;right: 13%;transform: scale(0.9);}
.cont4 .link10 {bottom: 8%;right: 0;}
.cont4 .link11 {top: 53%;right: 23%;}
.cont4 .link12 {bottom: 0;right: 13%;transform: scale(0.8);}
.cont4 .link13 {bottom: 0;left:25%;}
.cont4 .link14 {bottom: 14%;left: 38%;}
.cont4 .link15 {bottom: 0%;left: 50%;transform: scale(0.9);}
@media all and (max-width:1240px){
  .cont4 a {transform:scale(0.7);}
}
@media all and (max-width:1023px){
  .cont4 {background-size:auto, auto, 0;}
  .cont4 .wrap {min-height:auto;}
  .cont4 h2 {position:relative; left:auto; top:auto; transform:none; margin-bottom:2rem; }
  .cont4 a { float:left; position:relative; background:none; width:20%; height:auto; transform:none !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; box-shadow:none; padding:1rem; border-radius:unset;  }
  .cont4 a img {border-radius:1rem;}
  .cont4 a:nth-child(5n+2){clear:both;}
}
@media all and (max-width:768px){
  .cont4 a { width:25%;}
  .cont4 a:nth-child(4n+2){clear:both;}
  .cont4 a:nth-child(5n+2){clear:none;}
  .cont4 a div p { font-size:1.6rem;}
}
@media all and (max-width:500px){
  .cont4 h2 {font-size:2.5rem;}
  .cont4 h2 img {height:5rem;}
  .cont4 a { width:33.33%;}
  .cont4 a:nth-child(3n+2){clear:both;}
  .cont4 a:nth-child(4n+2){clear:none;}
}
