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

/* splitting */
.page-header > .container.motion h3.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; width: 100%; height:450px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {height: 100%; display: flex; align-items: center;}
.page-header > .container h3 {font-size: 50px; color: #fff; font-weight: 700; line-height: 1.2;}
.page-header.type1 {background-image: url(../images/sub/s-visual01.jpg); background-color: #333;}
.page-header.type2 {background-image: url(../images/sub/s-visual02.jpg); background-color: #333;}
.page-header.type3 {background-image: url(../images/sub/s-visual03.jpg); background-color: #333;}
.page-header.type4 {background-image: url(../images/sub/s-visual04.jpg); background-color: #333;}
.page-header.type5 {background-image: url(../images/sub/s-visual05.jpg); background-color: #333;}

.page-header .container h3 {font-size: 55px; font-weight: 700; color: #fff; text-align: center;}

.lnb {margin-top: 50px;}
.lnb ul {display: flex; justify-content: center;}
.lnb ul li {width: 1%; flex: 1 1 auto;}
.lnb ul li a {width: 100%; display: flex; height: 50px; justify-content: center; align-items: center; font-size: 20px; color: #222; font-weight: 500; background-color: #f8f8f8;}
.lnb ul li.active a {background-color: #CDA243; color: #fff;}
.lnb .btn-drop {display: none;}


section {padding: 100px 0 260px; overflow: hidden;}
.section-header h4 {position: relative; padding-top: 25px; text-align: center; color: #000; font-weight: 700; font-size: 55px;}
.section-header h4::before {position: absolute; content: ''; width: 8px; height: 8px; background-color: #000; top: 0; left: 50%; transform: translateX(-50%);}
.section-header p {font-size: 24px; line-height: 40px; color: #333; text-align: center; padding-top: 40px;}

.article-header h5 {font-size: 50px; font-weight: 600; color: #000; text-align: center; line-height: 60px;}
.article-header p {font-size: 24px; line-height: 40px; color: #333; padding-top: 45px; text-align: center;}



/* s1 */
.s1 .banner img {display: block; max-width: 100%; margin: 0 auto;}
.s1 .arti01 {margin-top: 120px; width: 100%;}
.s1 .arti01 h4 {font-size: 50px; color: #000; font-weight: 700; line-height: 1.4;}
.s1 .arti01 .txt { margin-top: 60px;  display: flex; gap: 136px; align-items: flex-start;}
.s1 .arti01 .box {width: 1%; flex: 1 1 auto;}
.s1 .arti01 .box p {font-size: 24px; font-weight: 400; line-height: 1.8; color: #555;}
.s1 .arti01 .box p ~ p {margin-top: 30px;}
.s1 .arti01 .box h5 {display: flex; gap: 20px; justify-content: right; margin-top: 63px; font-size: 28px; color: #666;font-weight: 400; line-height: 1.6; align-items: center;}
.s1 .arti01 .box h5 > span {font-family: "Nanum Brush Script", cursive;; font-size: 60px; font-weight: 400; line-height: 1.6; color: #000; display: block;}

.s1 .arti02 {margin-top: 200px;}
.s1 .arti02 .article-header h4 {text-align: center; font-size: 40px; color: #000; font-weight: 700; line-height: 1.6;}
.s1 .arti02 ul {margin-top: 60px; width: 100%; display: flex; gap: 30px; align-items: flex-start;}
.s1 .arti02 ul li {width: 1%; flex: 1 1 auto;}
.s1 .arti02 ul li figure img {display: block; max-width: 100%; margin: 0 auto;}
.s1 .arti02 ul li figcaption {margin-top: 34px; width: 100%;}
.s1 .arti02 ul li figcaption h5 {position: relative; font-size: 32px; color: #070707; font-weight: 700; line-height: 1.6; display: inline-block; padding-right: 83px;}
.s1 .arti02 ul li figcaption h5::after {position: absolute; content: ''; width: 64px; height: 1px; background-color: #cda243; top: 50%; right: 0; transform: translateY(-50%);}
.s1 .arti02 ul li figcaption p.dot {position: relative; font-size: 24px; padding-left: 35px; color: #555; font-weight: 400; line-height: 1.8; margin-top: 12px;}
.s1 .arti02 ul li figcaption p.dot ~ p.dot {margin-top: 0;}
.s1 .arti02 ul li figcaption p.dot::before {position: absolute; content: ''; width: 6px; height: 6px; background-color: #555; border-radius: 50%; top: 19px; left: 15px;}


/* s2 */
.s2 .item {display: flex; align-items: center; gap: 83px;}
.s2 .item ~ .item {margin-top: 200px;}
.s2 .item .txt {width: 1%; flex: 1 1 auto;}
.s2 .item .txt dl {display: flex; gap: 17px; align-items: center;}
.s2 .item .txt dl dt {position: relative; padding-right: 70px; width: auto; font-size: 26px; font-weight: 600; color: #222; line-height: 1.6;}
.s2 .item .txt dl dt::after {position: absolute; content: ''; width: 53px; height: 1px; background-color: #CDA243; top: 50%; right: 0; transform: translateY(-50%);}
.s2 .item .txt dl dd {font-size: 22px; color: #cda243; font-weight: 600; line-height: 1.6;}
.s2 .item .txt h4 {font-size: 40px; font-weight: 700; line-height: 1.6; color: #000; margin-top: 40px;}
.s2 .item .txt p {font-size: 24px; color: #555; font-weight: 400; line-height: 1.8; margin-top: 20px;}
.s2 .item .img {position: relative; max-width: 750px; width: 100%;}
.s2 .item .img > img {box-shadow: 20px 60px 60px 0 rgba(0, 0, 0, 0.10);}
.s2 .item:nth-of-type(1) .img > img {border-radius: 0 260px 0 0;}
.s2 .item:nth-of-type(2n) {flex-direction: row-reverse;}
.s2 .item:nth-of-type(2) .img > img {border-radius: 260px 0 0 0;}
.s2 .item:nth-of-type(3) .img > img {border-radius: 0 260px 0 0;}
.s2 .item:nth-of-type(4) .img > img {border-radius: 0 0 0 260px;}