@charset "utf-8";
.real-cont {padding:140px 0 180px;}


#sub {overflow: hidden; padding-top: 105px;}
.play {font-family: "Play";}
.pre {font-family: 'Pretendard';}

/* splitting */
.page-header > .container.motion span.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.06s * var(--char-index));}
.page-header > .container.motion h2.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.1s * var(--char-index));}

@keyframes textAni {
    0% {opacity:0;}
    30% {opacity:0;}
}


/* page-header */
.page-header {position: relative;}
.page-header > .container {padding-top: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;}

.page-header .sub-tit > span {display: block; font-size: 22px; font-weight: 700; color: #00a1e9; font-family: 'Play'; letter-spacing: 5px;}
.page-header .sub-tit > h2 {font-size: 70px; font-weight: 700; color: #fff; line-height: 1; padding-top: 40px;}

.page-header.type1 .lnb, .page-header.type4 .lnb {display: none;}

.lnb ul {width: 100%; display:flex; gap: 45px;}
.lnb ul li {width: auto;}
.lnb ul li a {position: relative; padding-top: 35px; display: block; width: 100%; text-align: center; font-size: 22px; color: #fff; line-height: 1; font-weight: 600; transition: all .3s linear; z-index: 2;}  
.lnb ul li a:after {position: absolute; content:''; width: 14px; height: 16px; background: url(../images/sub/ico_lnb.png) 50% 50% no-repeat; background-size: auto; top: 0; left: 50%; transform: translateX(-50%); opacity: 0;}
.lnb ul li a:hover {color: #00a1e9;}
.lnb ul li.active a {color: #00a1e9;}
.lnb ul li.active a:after {opacity: 1;}

.lnb .btn-drop {display: none;}

.page-header .s-visual {margin-top: 100px; width: 100%; height: 450px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header.type1 .s-visual {background-image: url(../images/sub/s-visual1.jpg);}
.page-header.type2-1 .s-visual {background-image: url(../images/sub/s-visual201.jpg);}
.page-header.type2-2 .s-visual {background-image: url(../images/sub/s-visual202.jpg);}
.page-header.type2-3 .s-visual {background-image: url(../images/sub/s-visual203.jpg);}
.page-header.type2-4 .s-visual {background-image: url(../images/sub/s-visual204.jpg);}
.page-header.type3-1 .s-visual {background-image: url(../images/sub/s-visual301.jpg);}
.page-header.type3-2 .s-visual {background-image: url(../images/sub/s-visual302.jpg);}
.page-header.type3-3 .s-visual {background-image: url(../images/sub/s-visual303.jpg);}
.page-header.type3-4 .s-visual {background-image: url(../images/sub/s-visual304.jpg);}
.page-header.type4 .s-visual {background-image: url(../images/sub/s-visual4.jpg);}

section {padding: 130px 0 180px;}
.section-header h3 {font-size: 60px; font-weight: 700; color: #fff; line-height: 1; font-family: 'Play';}
.section-header p {font-size: 22px; line-height: 1.6; color: #888d90; padding-top: 30px;}

.article-header h4 {position: relative; font-size: 48px; font-weight: 700; color: #fff; font-family: 'Play'; padding-left: 30px; line-height: 1.28;}
.article-header h4::before {position: absolute; content: ''; width: 4px; height: 38px; background-color: #00a1e9; top: 12px; left: 0;}


/* s1_1 */
.s1_1 .map-wrap {width: 100%; position: relative;margin-top: 75px;}
.s1_1 .map {position: relative; width: 100%; height: 740px; background: url(../images/sub/img_map3.png) 50% 50% no-repeat; background-size: cover;}
.s1_1 .map > div {position: absolute; cursor: pointer; z-index: 2;}
.s1_1 .map > div i {position: relative; display: block; width: 25px; height: 25px; border-radius: 50%; z-index: 2;}
.s1_1 .map > div i::before {position: absolute; content: ''; width: 100%; height: 100%; background-color: #00a1e9; border-radius: 50%; z-index: -1; transition: .3s; top: 0; left: 0;}
.s1_1 .map > div i::after {position: absolute; content: ''; width: 100%; height: 100%; background-color: #00a1e9; border-radius: 50%; z-index: -1; transition: .3s; top: 0; left: 0;}
.s1_1 .map > div:hover i::before {animation: ball-scale 1s 0s linear infinite;}
.s1_1 .map > div:hover i::after { animation: ball-scale 2s -1s linear infinite;}
.s1_1 .map > div.on i::before {animation: ball-scale 1s 0s linear infinite;}
.s1_1 .map > div.on i::after { animation: ball-scale 2s -1s linear infinite;}
.s1_1 .map > div i img {max-width: 100%;}
.s1_1 .map > div > p {font-size: 22px; color: #fff; font-weight: 600;font-family: 'Play'; line-height: 25px;}
.s1_1 .map > div.kor {top: 273px; right: 118px; padding-right: 135px;}
.s1_1 .map > div.chn1 {top: 310px; right: 153px; padding-right: 140px;}
.s1_1 .map > div.chn2 {top: 350px; right: 305px; padding-left: 140px;}

@keyframes ball-scale {
    0% {transform: scale(1); opacity: 0.1;}
    5% {opacity: 0.4;}
    100% {transform: scale(4); opacity: 0;}
}

.s1_1 .map-wrap .popup {position: absolute; top: 0; left: 0; cursor: default; opacity: 0; transition: all .3s linear;}
.s1_1 .map-wrap .popup.show {opacity: 1;}
.s1_1 .map-wrap .popup .inner {padding: 50px 30px 45px; background-color: #02121e; border: 1px solid rgba(255,255,255, .3);}
.s1_1 .map-wrap .popup .inner h4 {font-size: 30px; font-weight: 700; color: #00a1e9; line-height: 1; font-family: 'Play';}
.s1_1 .map-wrap .popup .inner .pop_img {margin-top: 30px; width: 100%; display: flex; gap: 20px;}
.s1_1 .map-wrap .popup .inner .pop_img img {max-width: 400px; width: 100%; display: block;}
.s1_1 .map-wrap .popup.pop_kor .inner .pop_img img {max-width: 100%;}
.s1_1 .map-wrap .popup .inner .txt {margin-top: 30px; width: 100%;}
.s1_1 .map-wrap .popup .inner .txt h5 {font-size: 20px; color: #fff; font-weight: 600; line-height: 1;}
.s1_1 .map-wrap .popup .inner .txt p {font-size: 18px; color: #fff; line-height: 1.7; padding-top: 15px;}


/* s2 common */
.s2 article ~ article {margin-top: 110px;}
.s2 .process {margin-top: 40px; width: 100%;}
.s2 .process ul {width: calc(100% + 20px); margin: 0 -10px; display: flex; flex-wrap: wrap;}
.s2 .process ul li {width: 25%; padding: 0 10px;}
.s2 .process ul li:nth-of-type(4) ~ li {margin-top: 20px;}
.s2 .process ul li figure {width: 100%;}
.s2 .process ul li figure img {max-width: 100%; display: block; margin: 0 auto;}

/* s2_1 */
.s2_1 article > figure {width: 100%; margin-top: 40px;}
.s2_1 article > figure img {display: block; max-width: 100%; margin: 0 auto;}

/* s2_3 */
.s2_3 .arti01 .process ul li:nth-of-type(1) {width: 100%;}
.s2_3 .arti01 .process ul li:nth-of-type(2) {width: 50%;}
.s2_3 .arti01 .process ul li ~ li {margin-top: 20px;}

/* s3 common */
.s3 {padding-top: 140px;}
.s3 .ceramic {width: 100%; display: flex; align-items: center; gap: 20px;}
.s3 .ceramic ~ .ceramic {margin-top: 120px;}
.s3 .ceramic.rev {flex-direction: row-reverse;}
.s3 .ceramic div {max-width: 700px; width: 100%;}
.s3 .ceramic .img img {max-width: 100%; display: block; margin: 0 auto;}
.s3 .ceramic .info {padding-left: 100px;}
.s3 .ceramic.rev .info {padding-left: 0; padding-right: 100px;}
.s3 .ceramic .info h5 {font-size: 46px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 30px;}
.s3 .ceramic .info dl {width: 100%; border-bottom: 1px solid #888d90; display: flex; align-items: flex-start; line-height: 1.6; padding: 20px 0;}
.s3 .ceramic .info dl:nth-of-type(1) {border-top: 1px solid #00a1e9;}
.s3 .ceramic .info dl dt {width: 100%; font-size: 18px; font-weight: 600; color: #00a1e9;}
.s3 .ceramic .info dl dd {font-size: 18px; color: #888d90;}

.s3 .video {margin-top: 40px; width: 100%;}
.s3 .video ul {width: calc(100% + 20px); margin: 0 -10px; display: flex;}
.s3 .video ul li {width: 50%; padding: 0 10px; height: 400px;}
.s3 .video ul li .video-box {width: 100%; position: relative; height: 100%; overflow: hidden;}
.s3 .video ul li .video-box::before {position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0, .6); top: 0; left: 0; z-index: 1;}
.s3 .video ul li .video-box.on::before {display: none;}
.s3 .video ul li .video-box > span {position: absolute; display: block; width: 70px; height: 70px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; background: url(../images/sub/ico_play.png) 50% 50% no-repeat; background-size: auto; cursor: pointer;}
.s3 .video ul li .video-box video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}

/* s3_1 */
.s3_1 .ceramic .info dl dt {max-width: 80px;}
.s3_1 .ceramic:nth-of-type(5) .info dl dt {max-width: 60px;}

/* s3_2 */
.s3_2 .ceramic:nth-of-type(1) .info dl dt {max-width: 170px;}
.s3_2 .ceramic:nth-of-type(2) .info dl dt {max-width: 175px;}
.s3_2 .ceramic:nth-of-type(3) .info dl dt {max-width: 220px;}
.s3_2 .ceramic:nth-of-type(4) .info dl dt {max-width: 105px;}
.s3_2 .ceramic:nth-of-type(5) .info dl dt {max-width: 95px;}
.s3_2 .ceramic:nth-of-type(6) .info dl dt {max-width: 165px;}

/* s3_3 */
.s3_3 {padding-top: 130px;}
.s3_3 .arti01 .process ul li:nth-of-type(1) {width: 50%;}
.s3_3 .arti01 .process ul li:nth-of-type(2) {width: 50%;}
.s3_3 .arti01 .process ul li:nth-of-type(3) {width: 100%;}
.s3_3 .arti01 .process ul li:nth-of-type(2) ~ li {margin-top: 20px;}

.s3_3 .ceramic:nth-of-type(5) .info dl dt {max-width: 100px;}

/* s3_4 */
.s3_4 {padding-top: 130px;}
.s3_4 .arti01 .process ul li {width: 50%;}
.s3_4 .arti01 .process ul li:nth-of-type(2) ~ li {margin-top: 20px;}
.s3_4 .arti01 .process ul li:nth-of-type(3) {width: 100%;}