@charset "utf-8";

/* *******************************************************
 * filename : style.css
 * description : CSS
 * date : 2022-06
******************************************************** */

/* 헤더 */
#header {position: fixed; top: 0; left: 0; right: 0; transition: all 0.4s; z-index: 11; display: flex; align-items: center; justify-content: space-between; background: #fff; height: 130px;}
/* #header::after {content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 0; background: #fff; border-top: 1px solid #333; opacity: 0; transition: all 0.25s ease; z-index: ;}
#header.active::after {height: 170px; opacity: 1;} */
#header > .inner {width: 1520px; margin: 0 auto; max-width: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .h1 a {display: block;}
#header .h1 a img {display: block; width: 100%;}
#header .nav > ul {display: flex; align-items: center; justify-content: center; margin-left: -265px; margin-top: 30px; position: relative;}
#header .nav > ul::after {content: ''; display: block; left: -10000%; right: -10000%; top: 100%; height: 170px; background: #fff; position: absolute; opacity: 0; visibility: hidden; transition: all 0.25s ease; border-top: 1px solid #bccfcc;}
#header .nav > ul > li {position: relative;}
#header .nav > ul > li > a {display: block; color: #005a49; font-family: 'NOROOFrontierSerif'; font-size: 24px; font-weight: 600; padding: 32px 35px; transition: all 0.3s;}
#header .nav > ul > li > a:hover {color: #006cba;}
#header .nav .depth02 {position: absolute; left: 5px; top: calc(100% - 10px); right: 5px; padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px);  transition: all 0.25s ease; z-index: 1; border-top: 3px solid #005a49;}
#header .nav .depth02 a {display: block; text-align: center; transition: all 0.25s ease; font-family: 'NOROOFrontierSerif'; font-size: 17px; white-space: nowrap; padding: 5px 0;}
#header .nav .depth02 a:hover {color: #005a49;}
#header .nav.active > ul::after {opacity: 1; visibility: visible;}
#header .nav.active .depth02 {opacity: 1; visibility: visible;}
#header.hover {background-color: #fff;}
#header.hover .h1 a {background-image: url('../images/logo-black.png');}
#header.hover .nav ul li a {color: #333;}
#header.scroll {padding: 25px 50px; background: #fff;}
#header.scroll .h1 a {width: 250px;}
#header.scroll .h1 a {background-image: url('../images/logo-black.png');}
#header.scroll .nav ul {margin-left: -154px;}
#header.scroll .nav ul li a {color: #333;}
#header.black .h1 a {background-image: url('../images/logo-black.png');}
#header.black .nav ul li a {color: #333;}
#header .sitemap {font-size: 0; text-indent: -99999%; display: block; width: 27px; height: 22px; position: relative; border-top: 4px solid #adadad; border-bottom: 4px solid #adadad; display: none;}
#header .sitemap::before {content: ''; display: block; left: 0; right:0; height: 4px; background: #adadad; position: absolute; top: 50%; transform: translateY(-50%);}
.sitemap-wrap {position: fixed; top: 0; right: -100%; bottom: 0; background: #fff; transition: all 0.3s; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto;}
.sitemap-wrap.active {right: 0;}
.sitemap-wrap .close {position: absolute; top: 30px; right: 30px; width: 32px; height: 32px; font-size: 0; text-indent: -9999%;}
.sitemap-wrap .close::before,
.sitemap-wrap .close::after {content: ''; display: block; width: 3px; height: 35px; background: #000; position: absolute; left: 14px;}
.sitemap-wrap .close::before {transform: rotate(45deg);}
.sitemap-wrap .close::after {transform: rotate(-45deg);}
.sitemap-wrap .depth01 > li > a {display: block; font-size: 2.6rem; font-family: 'NOROOFrontierSerif', sans-serif; font-weight: 700; color: #005a49 ;text-align: center; padding: 2rem 0;}
.sitemap-wrap .depth02 {display: none; padding-bottom: 2rem;}
.sitemap-wrap .depth02.active {display: block;}
.sitemap-wrap .depth02 a {display: block; text-align: center; font-family: 'NOROOFrontierSerif'; padding: 0.3rem 0; font-size: 1.8rem;}


#footer {width: 100%; background: #313333; padding: 40px 0 105px; position: relative; z-index: 10;}
#footer .footer-inner {width: 1540px; margin: 0 auto; max-width: 100%; padding: 0 20px; display: flex; align-items: flex-start; justify-content: space-between; position: relative;}
#footer .logo {display: block; width: 106px;}
#footer .info-wrap ul {margin: 20px 0;}
#footer .info-wrap ul li {color: #fff;}
#footer .info-wrap .link-area li {display: flex; color: #b0b7b7; font-size: 13px; align-items: center;}
#footer .info-wrap .link-area li a {display: block; font-size: 13px; color: #b0b7b7; position: relative;}
#footer .info-wrap .link-area li a + a {margin-left: 10px; padding-left: 10px; margin-right: 5px;}
#footer .info-wrap .link-area li a + a::before {content: ''; display: block; width: 2px; height: 10px; background: #b0b7b7; position: absolute; left: 0; top: 4px;}
#footer .info-wrap .info-area li {font-size: 16px;}
#footer .family-site select {width: 230px; border: 1px solid #fff; padding: 10px; color: #fff; background: transparent; background: url('../images/icon-arrow.png') no-repeat right 15px center;}
@media(max-width: 1024px) {
    #header {height: 5rem; padding: 0 2rem;}
    #header .h1 a {width: 18rem;}
    #header nav {display: none;}
    #header .sitemap {display: block; width: 70px;}
    #footer {padding: 40px 0;}
}
@media(max-width: 678px) {
    #header .sitemap {display: block; width: 15rem;}
    #footer {padding: 2rem 0;}
}


/* 메인 */
.main-wrap {padding-top: 130px;}
.visual-section {height: calc(100vh - 130px); position: relative; overflow: hidden;}
.visual-section .img-wrap {position: absolute; top: 70px; left: calc(50% - 757px); z-index: 2;}
.visual-section .title br {display: none;}
.visual-section .video-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
.visual-section .video-wrap video {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%);}
.main .visual-section {background: #656565; }
.main .section-wrap {padding: 110px 100px 155px; background: url('../images/main-bg.png') no-repeat center; background-size: cover;}
.main .section-wrap > .inner {width: 1740px; padding: 0 100px; margin: 0 auto; max-width: 100%;}
.main .title-wrap  {padding: 65px 2rem; text-align: center;}
.main .title-wrap .txt-1 {color: #00584a; font-size: 48px;}
.main .title-wrap .txt-1 br {display: none;}
.main .title-wrap .txt-2 {color: #78787a; font-size: 36px; font-weight: 600;}
.main .section-wrap .section {width: 100%;}
.main .section-wrap .section + .section {margin-top: 100px;}
.main .section-wrap .section .h2-wrap {display: flex; justify-content: center; margin-bottom: 45px;}
.main .section-wrap .section .h2 {font-size: 42px; color: #fff; display: flex; align-items: center;}
/* .main .section-wrap .section .h2::before,
.main .section-wrap .section .h2::after {content: ''; display: block; width: 2px; height: 45px; background: #fff; margin: 1px 20px 0;} */
.main .section-wrap .section .list-wrap {display: flex; justify-content: space-between; gap: 20px;}
.main .section-wrap .section .list-wrap .list {flex: 1; height: 439px; position: relative;}
.main .section-wrap .section .list-wrap .list::before {content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; height: 80px; background: #fff; z-index: 1;}
.main .section-wrap .section .list-wrap .thumb {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden;}
.main .section-wrap .section .list .title {position: absolute; z-index: 1; left: 20px;  top: 15px; text-align: center; font-size: 24px; font-weight: 600; white-space: nowrap; z-index: 3; transform: all 0.2s; opacity: 1;}
.main .section-wrap .section .list .ctn {background:rgba(0, 0, 0, 0.5); position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 15px 20px 40px; transition: top 0.4s, opacity 0.4s; opacity: 0; z-index: 2;}
.main .section-wrap .section .list .ctn p {color: #fff; font-size: 20px;}
.main .section-wrap .section .list .ctn .label {font-size: 24px; font-weight: 600; color: #fff; margin-bottom: 40px;}
.main .section-wrap .section .list .ctn .more {display: inline-block; margin-top: 35px; font-size: 0; padding-bottom: 5px; border-bottom: 1px solid #fff; position: absolute; left: 20px; bottom: 40px; width: 40%;}
.main .section-wrap .section .list .ctn .more::after {content: ''; display: block; width: 20px; border-bottom: 1px solid #fff; position: absolute; left: calc(100% - 17px); transform: rotate(45deg); bottom: 6px;}
.main .section-wrap .section .list:hover .ctn {opacity: 1;}
.main .section-wrap .section .list:hover .title {opacity: 0;}
.main .section-1 .list-1 .thumb {background-image: url('../images/main-section01-thumb01.png');}
.main .section-1 .list-2 .thumb {background-image: url('../images/main-section01-thumb02.png');}
.main .section-1 .list-3 .thumb {background-image: url('../images/main-section01-thumb03.png');}
.main .section-1 .list-4 .thumb {background-image: url('../images/main-section01-thumb04.png');}
.main .section-2 .list-1 .thumb {background-image: url('../images/main-section02-thumb01.png');}
.main .section-3 .list-1 .thumb {background-image: url('../images/main-section03-thumb01.png');}
.main .section-3 .list-2 .thumb {background-image: url('../images/main-section03-thumb02.png');}
.main .section-4 .list-1 .thumb {background-image: url('../images/main-section04-thumb01.png');}
.main .section-5 .list-1 .thumb {background-image: url('../images/main-section05-thumb01.png');}
.main .section-5 .list-2 .thumb {background-image: url('../images/main-section05-thumb02.png');}
.main .section-5 .list-3 .thumb {background-image: url('../images/main-section05-thumb03.png');}
.main .section-wrap .section.section-2 .list-wrap .list::before {content: none;}
.main .section-wrap .section.section-4 .list-wrap .list::before {content: none;}
.main .section-wrap .section.section-2 .list .ctn {display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;}
.main .section-wrap .section.section-2 .list .ctn .txt-1 {font-size: 36px}
.main .section-wrap .section.section-2 .list .ctn .txt-2 {font-size: 20px}
.main .section-wrap .section.section-3 .list .ctn {background: rgba(0, 143, 59, 0.685);}
.main .section-wrap .section.section-4 .list .ctn {background: rgba(0, 143, 59, 0.685); flex-direction: column; align-items: flex-start; justify-content: flex-end; display: flex;}

#smooth-wrapper .main-wrap {padding-top: 0;}
@media(max-width: 1400px) {
    .visual-section .title br {display: block;}
    .main .section-wrap {padding: 110px 0px 155px;}
    .main .section-wrap .section.section-1 .list-wrap {flex-wrap: wrap;}
    .main .section-wrap .section.section-1 .list-wrap .list {width: calc(50% - 10px); flex: none;}
}
@media(max-width: 1024px) {
    .main-wrap {padding-top: 5rem;}
    .main .visual-section .img-wrap {top: 2rem; left: 2rem;}
    .main .visual-section .img-wrap img {display: block; width: 10rem;}
    .main .visual-section {height: calc(27rem - 5rem);}
    .main .visual-section .video-wrap {top: 0; left: 0;width: 100%; height: 100%;}
    .visual-section .video-wrap video {width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%);}
    .main .section-wrap {padding: 5rem 0;}
    .main .section-wrap > .inner {padding: 0 2rem;}
    .main .section-wrap .section .h2-wrap {margin-bottom: 2rem;}
    .main .title-wrap {padding: 3rem 2rem;}
    .main .title-wrap .txt-1 {font-size: 2.7rem;}
    .main .title-wrap .txt-1 br{display: block;}
    .main .title-wrap .txt-2 {font-size: 2rem;}
    .main .section-wrap .section + .section {margin-top: 4rem;}
    .main .section-wrap .section .h2 {font-size: 2.2rem;}
    .main .section-wrap .section .h2::before, 
    .main .section-wrap .section .h2::after {height: 2rem;}
    .main .section-wrap .section .list-wrap {flex-wrap: wrap; gap: 1rem;}
    .main .section-wrap .section .list-wrap .list::before {height: 4rem;}
    .main .section-wrap .section .list-wrap .list,
    .main .section-wrap .section.section-1 .list-wrap .list {width: 100%; flex: none; height: 20rem;}
    .main .section-wrap .section .list-wrap .thumb {background-position: center bottom;}
    .main .section-wrap .section .list .title {font-size: 1.8rem; top: 0.8rem; left: 2rem;}
    .main .section-wrap .section .list .ctn {padding: 0.8rem 2rem 3rem;}
    .main .section-wrap .section .list .ctn .more {bottom: 2rem;}
    .main .section-wrap .section .list .ctn .more::after {bottom: 0.6rem; left: calc(100% - 1.8rem);}
    .main .section-wrap .section .list .ctn .label {font-size: 1.8rem; top: 0.8rem; margin-bottom: 2rem;}
    .main .section-wrap .section .list .ctn p {font-size: 1.4rem;}
    .main .section-wrap .section .list .ctn p br {display: none;}
    .main .section-wrap .section.section-2 .list .ctn .txt-1 {font-size: 2rem;}
    .main .section-wrap .section.section-2 .list .ctn .txt-2 {font-size: 1.5rem;}
}

/* sub common */
.sub-content .visual-section {display: flex; align-items: center; justify-content: center; position: fixed; top: 130px; left: 0; right: 0; bottom: 0;}
.sub-content .visual-section .bg {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: cover; animation: bgScale 2s ease-out forwards;}
.sub-content .visual-section .h2 {font-size: 72px; color: #fff; font-weight: 900;}
.sub-content .visual-section .h2[data-aos] {will-change: transform, opacity;}
.sub-content .section-wrap {padding: 110px 0; margin-top: 100vh; background: #fff; position: relative; z-index: 10; border-top: 2px solid #ddd;}
.sub-content .section-wrap > .inner {width: 1540px; padding: 0 20px; max-width: 100%; margin: 0 auto;}
#smooth-wrapper .sub-content .visual-section {position: relative; height: calc(100vh - 130px)}
#smooth-wrapper  .sub-content .section-wrap {margin-top: 0;}
@media(max-width: 1024px) {
    .sub-content .section-wrap {padding: 8rem 0;}
    .visual-section {height: calc(100vh - 5rem);}
    .sub-content .visual-section {top: 5rem;}
    .sub-content .visual-section .h2 {font-size: 4rem;}
    .sub-content .section-wrap > .inner {padding: 0 2rem;}
}

/* company */
.sub-content.company-chemical .visual-section .bg {background-image: url('../images/company-chemical-visual.png');}
.sub-content.company-agricultural .visual-section .bg {background-image: url('../images/company-agricultural-visual.png');}
.sub-content.company-consulting .visual-section .bg {background-image: url('../images/company-consulting-visual.png');}
.sub-content.company-bio .visual-section .bg {background-image: url('../images/company-bio-visual.png');}
.sub-company .section-title {font-size: 24px; color: #76767a; text-align: center; line-height: 1.7; margin-bottom: 200px;}
.sub-company .section {width: 100%;}
.sub-company .section .h3 {text-align: center; font-size: 30px; font-weight: 900; padding-bottom: 30px; border-bottom: 1px solid #7e7e82;}
.sub-company .section .article {margin: 150px 0; display: flex; align-items: flex-start;}
.sub-company .article .logo-wrap {display: flex; justify-content: center; width: 400px; max-width: 100%;}
.sub-company .article .logo-wrap img {display: block; max-width: 100%; margin: 0 auto;}
.sub-company .article .ctn {flex: 1;}
.sub-company .article .ctn .title {font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.sub-company .article .ctn .txt {font-size: 20px; text-align: justify;}
.sub-company .article .ctn .list {margin-top: 50px; padding-top: 20px; border-top: 1px solid #7e7e82;}
.sub-company .article .ctn .list li {display: flex; align-items: flex-start; margin: 10px 0;}
.sub-company .article .ctn .list p {font-size: 16px;}
.sub-company .article .ctn .list .label {width: 120px; flex-shrink: 0; font-weight: 600;}
.sub-company .article .link-wrap {display: flex; width: 290px; justify-content: flex-end; padding-right: 20px; max-width: 100%;}
.sub-company .article .link {display: inline-block; position: relative; padding-bottom: 2px; border-bottom: 1px solid #000; font-size: 16px;}
.sub-company .article .link::after {content: ''; width: 12px; height: 16px; background-size: 100%; background-repeat: no-repeat; background-position: center; background-image: url('../images/icon-link.png'); position: absolute; right: -20px; top: 6px;}
@media(max-width: 1024px) {
    .sub-company .section-title {font-size: 1.8rem; margin-bottom: 10rem;}
    .sub-company .section-title br {display: none;}
    .sub-company .section + .section {margin-top: 15rem;}
    .sub-company .section .h3 {font-size: 2.6rem; padding-bottom: 2rem;}
    .sub-company .section .article {margin: 8rem 0; display: block;}
    .sub-company .article .logo-wrap {width: 100%;}
    .sub-company .article .logo-wrap img {width: 40%;}
    .sub-company .article .ctn .title {font-size: 2rem; margin-bottom: 1rem;}
    .sub-company .article .ctn .txt {font-size: 1.4rem;}
    .sub-company .article .ctn .list {margin-top: 1rem; padding-top: 1rem;}
    .sub-company .article .ctn .list li {margin: 0.5rem 0;}
    .sub-company .article .ctn .list li p {font-size: 1.3rem;}
    .sub-company .article .link-wrap {width:100%; justify-content: center;}
    .sub-company .article .link {font-size: 1.4rem; margin-top: 1rem;}
}


/* history */
.sub-content.history-chapter01 .visual-section .bg {background-image: url('../images/history-chapter01-visual.png');}
.sub-content.history-chapter02 .visual-section .bg {background-image: url('../images/history-chapter02-visual.png');}
.sub-content.history-chapter03 .visual-section .bg {background-image: url('../images/history-chapter03-visual.png');}
.sub-content.history-chapter04 .visual-section .bg {background-image: url('../images/history-chapter04-visual.png');}
.sub-content.history-chapter05 .visual-section .bg {background-image: url('../images/history-chapter05-visual.png');}
.sub-history.main-wrap {padding-top: 0;}
.sub-history .visual-section {position: relative; min-height: calc(100vh - 130px); z-index: 1;}
.sub-history .visual-section .txt-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; text-align: center;}
.sub-history .visual-section .h2 {color: #000; font-size: 199px; line-height: 1; animation: fadeUp 2s ease forwards; opacity: 0;}
.sub-history .visual-section .h2 span {display: block; padding-left: 70px; line-height: 1;}
.sub-history .visual-section .label {font-size: 19px; text-align: center; display: inline-block; padding: 5px 20px; background: #000; color: #fff; border-radius: 30px; margin: 65px 0 15px; animation: fadeUp 2s ease forwards 0.3s; opacity: 0;}
.sub-history .visual-section .title {font-size: 72px; font-weight: 700; animation: fadeUp 2s ease forwards 0.6s; opacity: 0;}
.sub-history .content-wrapper {position: relative; z-index: 5; background: #fff; top: 130px;padding-bottom: 130px;}
.sub-history .content-panel {position: relative; height: calc(100vh - 130px); display: flex; flex-direction: column; border-top: 2px solid #ddd; background: #fff;}
.sub-history.sub-content .section-wrap {padding: 0; margin-top: 0; flex: 1 1 auto; display: flex; min-height: 0;}
.sub-history .section-wrap .section {display: flex; flex: 1; min-height: 0; width: 100%; padding-bottom: 80px;}
.sub-history .list-wrap {position: absolute; left: 0; top: 0px; width: 40%; z-index: 1; overflow: hidden;}
.sub-history .list-wrap:has(ul.active) {overflow: visible;}
.sub-history .list-wrap .hand {color: #fff; font-weight: 700; font-size: 18px;background:#005749; padding: 3px 45px 3px 10px; text-align: right; position: relative; display: block; width: 100%;}
.sub-history .list-wrap .hand::before {content: ''; background: url('../images/icon-arrow2.png') no-repeat center; display: block; width: 15px; height: 15px; position: absolute; right: 20px; top: 50%; background-size: 100%; transform: translateY(-50%);}
.sub-history .list-wrap ul {background: #005749; position: absolute; left: 0; right: 0; top: 30px; transition: all 0.2s; opacity: 0; overflow: hidden;}
.sub-history .list-wrap ul.active {opacity: 1; overflow: visible;}
.sub-history .list-wrap ul li a {display: block; width: 100%; text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 18px; padding: 3px 45px 3px 10px;}
.sub-history .list-wrap ul li a.active{color: #fff; font-weight: 600;}
.sub-history .img-section {background-repeat: no-repeat; background-position: center; background-size: cover; width: 40%; display: flex; flex-direction: column; justify-content: center; gap: 50px; padding: 70px 0; overflow: hidden;}
.sub-history .img-section .year {text-align: center; font-size: 130px; color: rgba(255, 255, 255, 0.3); line-height: 1; letter-spacing: -0.5rem;}
.sub-history .img-section .year span {line-height: 1; display: block;}
.sub-history .slider-wrap .slick-slide {text-align: center;}
.sub-history .slider-wrap .slick-slide img {display: block; margin: 0 auto; max-width: 35rem; width: 480px;}
.sub-history .slider-wrap .slick-slide .caption {color: #fff; font-size: 20px; margin-top: 20px;}
.sub-history .slider-wrap .slick-arrow {width: 50px; height: 50px; text-indent: -99999%; font-size: 0px; cursor: pointer; background: url('../images/icon-arrow3.png') no-repeat center; border: 0; position: absolute; top: 50%; margin-top: -50px; z-index: 1; background-size: 100%;}
.sub-history .slider-wrap .slick-prev {left: calc(50% - 305px); transform: rotate(180deg);}
.sub-history .slider-wrap .slick-next {right: calc(50% - 305px);}
.sub-history .txt-section {min-height: 0; overflow: hidden; position: relative; width: 60%;}
.sub-history .txt-section p {text-align: justify; line-height: 2; font-size: 21px;}
.sub-history .txt-section .inner {position: relative; will-change: transform; padding: 150px;}
.sub-history .txt-section .sub-title {color: #005749; font-size: 21px; font-weight: 600; margin-bottom: 50px;}
.sub-history .txt-section .article + .article {margin-top: 100px;}
.sub-history .txt-section .title-1 {font-size: 36px; font-weight: 700; position: relative; margin-bottom: 30px; line-height: 1.2;}
.sub-history .txt-section .title-1 .num {position: absolute; left: -56px; top: -4px;}
.sub-history .txt-section .article p + p {margin-top: }
.sub-history .floating {position: absolute; left: 0; right: 0; bottom: 0; background: #005749; height: 80px; flex: 0 0 80px;}
.sub-history .floating .inner {width: 1420px; margin: 0 auto; display: flex; height: 100%; max-width: 100%;}
.sub-history .floating a {display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; flex: 1; height: 100%; transition: all 0.2s; position: relative;}
.sub-history .floating a + a::before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 40px; background: #1c9048;}
.sub-history .floating a.active {color: #fff;}
.sub-history .floating a.active::after {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #fff;}

.history-chapter01 .img-section {background-image: url('../images/history-chapter01-bg.png');}
.history-chapter02 .img-section {background-image: url('../images/history-chapter02-bg.png');}
.history-chapter03 .img-section {background-image: url('../images/history-chapter03-bg.png');}
.history-chapter04 .img-section {background-image: url('../images/history-chapter04-bg.png');}
.history-chapter05 .img-section {background-image: url('../images/history-chapter05-bg.png');}
@media(max-width: 1024px) {
    #smooth-wrapper .sub-history .visual-section {position: fixed; height: calc(100vh - 5rem);}
    .sub-history .visual-section .h2 {font-size: 7.2rem;}
    .sub-history .visual-section .h2 span {padding-left: 3rem;}
    .sub-history .visual-section .label {font-size: 1.4rem; padding: 0.3rem 1.7rem 0.5rem; margin: 6rem 0 1.5rem;}
    .sub-history .visual-section .title {font-size: 3rem;}
    .sub-history .content-panel {display: block; height: auto; background: transparent;}
    .sub-history .content-wrapper {top: auto; padding-bottom: 0; background: transparent; padding-top: 100vh;}
    .sub-history.sub-content .section-wrap {display: block; margin-top: 100vh;}
    .sub-history .section-wrap .section {display: block;}
    .sub-history .list-wrap {position: sticky; top: 5rem; width: 100%;}
    .sub-history .list-wrap .hand {font-size: 1.6rem;}
    .sub-history .list-wrap ul {top: 3rem;}
    .sub-history .list-wrap ul li a {font-size: 1.6rem;}
    .sub-history .img-section {width: 100%;}
    .sub-history .img-section .year {font-size: 8rem;}
    .sub-history .slider-wrap .slick-arrow {width: 3rem; height: 3rem; margin-top: -3.5rem;}
    .sub-history .slider-wrap .slick-prev {left: calc(50% - 19rem);}
    .sub-history .slider-wrap .slick-next {right: calc(50% - 19rem);}
    .sub-history .slider-wrap .slick-slide .caption {font-size: 1.6rem; margin-top: 1.5rem;}
    .sub-history .txt-section {width: 100%;}
    .sub-history .txt-section p {font-size: 1.5rem;}
    .sub-history .txt-section .inner {padding: 3rem;}
    .sub-history .txt-section .sub-title {font-size: 1.7rem; margin-bottom: 3rem;}
    .sub-history .txt-section .article {padding-left: 2rem;}
    .sub-history .txt-section .article + .article {margin-top: 6rem;}
    .sub-history .txt-section .title-1 {font-size: 2rem; margin-bottom: 1rem;}
    .sub-history .txt-section .title-1 .num {left: -3rem; top: -0.4rem;}
    .sub-history .floating {height: 3rem; position: sticky; bottom: 0;}
    .sub-history .floating a {font-size: 1.3rem;}
    .sub-history .floating a + a::before {width: 0.2rem; height: 1rem;}
    .sub-history .floating a.active::after {height: 0.3rem;}  
}


/* number */
.sub-content.sub-number {padding-top: 0;}
.sub-content.sub-number .visual-section {position: relative; height: 100vh;}
.sub-content.sub-number .visual-section .bg {background-image: url('../images/number-visual.png');}
.sub-content.sub-number .visual-section .txt-wrap {margin-top: 130px; display: flex; align-items: center; justify-content: center;}
.sub-content.sub-number .visual-section.active-section .txt-wrap .h2 {animation: fadeUp 2s ease forwards;}
.sub-content.sub-number .section-wrap {margin-top: 0; padding: 0;}
/* .sub-content.sub-number .section {padding-top: 130px;} */
.sub-content.sub-number .section .inner {width: 1120px; margin: 0 auto; max-width: 100%; height: 100%; display: flex; justify-content: space-between; flex-direction: column; padding: 210px 0 80px;}
.sub-content.sub-number .discription {text-align: center; padding-bottom: 40px; font-size: 24px; color: #76767a; border-bottom: 1px solid #76767a;}
.sub-content.sub-number .flex {display: flex; align-items: center;}
.sub-content.sub-number .red {color: #e0002a;}
.sub-content.sub-number .red.label {border-color: #e0002a;}
.sub-content.sub-number .bluegreen {color: #13b5b1;}
.sub-content.sub-number .bluegreen.label {border-color: #13b5b1;}
.sub-content.sub-number .white-green {color: #32b16c;}
.sub-content.sub-number .white-green.label {border-color: #32b16c;}
.sub-content.sub-number .white-red {color: #e07864;}
.sub-content.sub-number .white-red.label {border-color: #e07864;}
.sub-content.sub-number .white-blue {color: #8c97cb;}
.sub-content.sub-number .white-blue.label {border-color: #8c97cb;}
.sub-content.sub-number .orange {color: #f89912;}
.sub-content.sub-number .orange.label {border-color: #f89912;}
.sub-content.sub-number .white-yellowgreen {color: #94c77b;}
.sub-content.sub-number .white-yellowgreen.label {border-color: #94c77b;}
.sub-content.sub-number .yellowgreen {color: #6ec850;}
.sub-content.sub-number .yellowgreen.label {border-color: #6ec850;}
.sub-content.sub-number .white-bluegreen {color: #64c8c8;}
.sub-content.sub-number .white-bluegreen.label {border-color: #64c8c8;}
.sub-content.sub-number .purple {color: #8f82bc;}
.sub-content.sub-number .purple.label {border-color: #8f82bc;}
.sub-content.sub-number .pink {color: #f19ec2;}
.sub-content.sub-number .pink.label {border-color: #f19ec2;}
.sub-content.sub-number .white-pink {color: #f29c9f;}
.sub-content.sub-number .white-pink.label {border-color: #f29c9f;}
.sub-content.sub-number .txt-wrap {flex-shrink: 0;}
.sub-content.sub-number .txt-wrap .label {font-size: 30px; padding-bottom: 5px; border-width: 0 0 1px; border-style: solid; font-weight: 700; display: inline-block; margin-bottom: 20px;}
.sub-content.sub-number .txt-wrap .number-wrap {display: flex; align-items: flex-end; gap: 10px; position: relative; z-index: 1;}
.sub-content.sub-number .txt-wrap .number-wrap p {font-size: 30px; font-weight: 900;}
.sub-content.sub-number .txt-wrap .number-wrap .num {font-size: 150px; line-height: 0.9; text-align: center; /* min-width: 0 !important; */display: inline-block; position: relative;}
.sub-content.sub-number .txt-wrap .number-wrap .num-current {font-family: 'NOROOFrontierSerif'; position: absolute; right: 0; top: 0; z-index: 1; font-size: 150px ; line-height: 0.9; text-align: right;}
.sub-content.sub-number .txt-wrap .number-wrap .num-ghost {font-family: 'NOROOFrontierSerif'; visibility: hidden; white-space: nowrap;font-size: 150px ; line-height: 0.9; text-align: right;}
.sub-content.sub-number .txt-wrap .number-wrap span {font-size: 20px; font-weight: 200; margin-bottom: 4px;}
.sub-content.sub-number .txt-wrap .number-wrap .unit {font-size: 90px; line-height: 1;}
.sub-content.sub-number .ctn p {font-size: 20px; text-align: justify;}
.sub-content.sub-number .ctn .title {font-size: 26px; font-weight: 900; margin-bottom: 10px;}
.sub-content.sub-number .num-area .cmt {font-size: 20px; font-weight: 200;}
.sub-content.sub-number .num-area.flex-col {flex-direction: column; align-items: center; text-align: center; flex: auto; margin-bottom: 30px;}
.sub-content.sub-number .section-1 .flex {position: relative; width: 100%;}
.sub-content.sub-number .section-1 .txt-wrap .label {margin-left: 82px; margin-bottom: 20px;}
.sub-content.sub-number .section-1 .img {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.sub-content.sub-number .section-2 .ctn-wrap {display: flex; position: relative; height: 100%;}
.sub-content.sub-number .section-2 .ctn-wrap::after {content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; background: url('../images/line-dot-bg.png') repeat top; transform: translateX(-50%);}
.sub-content.sub-number .section-2 .ctn-wrap .col {flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.sub-content.sub-number .section-2 .ctn-wrap .col .num-area {background-repeat: no-repeat; background-position: center bottom; flex: auto; align-items: flex-start; position: relative; margin-bottom: 30px;}
.sub-content.sub-number .section-2 .txt-wrap .label {margin-bottom: 20px;}
.sub-content.sub-number .section-2 .ctn {min-height: 151px;}
.sub-content.sub-number .section-2 .ctn-1 {padding-right: 40px;}
.sub-content.sub-number .section-2 .ctn-1 .num-area {justify-content: space-between; background-image: url('../images/number-img02.png');}
.sub-content.sub-number .section-2 .ctn-1 .num-area .cmt {position: absolute; right: 0; top: 10px;}
.sub-content.sub-number .section-2 .ctn-1 .txt-wrap1 .label {margin-left:  14px;}
.sub-content.sub-number .section-2 .ctn-1 .txt-wrap2 .label {margin-left:  77px;}
.sub-content.sub-number .section-2 .ctn-2 {padding-left: 40px;}
.sub-content.sub-number .section-2 .ctn-2 .num-area {justify-content: space-between; background-image: url('../images/number-img03.png');}
.sub-content.sub-number .section-2 .ctn-2 .txt-wrap {text-align: center;}
.sub-content.sub-number .section-2 .ctn-2 .txt-wrap + .txt-wrap {margin-top: 50px;}
.sub-content.sub-number .section-2 .ctn-2 .txt-wrap .number-wrap {justify-content: center;}
.sub-content.sub-number .section-3 .num-area {position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; flex: auto; background: url('../images/number-img04.png') no-repeat center bottom; margin-bottom: 30px;}
.sub-content.sub-number .section-4 .num-area {background: url('../images/number-img05.png') no-repeat center bottom;}
.sub-content.sub-number .section-5 .num-area {background: url('../images/number-img06.png') no-repeat center bottom;}
.sub-content.sub-number .section-6 .num-area {text-align: left; padding-right: 30%; background: url('../images/number-img07.png') no-repeat right 25% top; justify-content: center; background-size: 16rem;}
.sub-content.sub-number .section-6 .txt-wrap .number-wrap .txt {font-size: 80px;}
.sub-content.sub-number .section-7 .num-area {background: url('../images/number-img08.png') no-repeat center bottom;}
.sub-content.sub-number .section-7 .txt-wrap .number-wrap {flex-direction: column; align-items: center; gap: 30px;}
.sub-content.sub-number .section-8 .ctn-wrap {display: flex; position: relative; height: 100%;}
.sub-content.sub-number .section-8 .ctn-wrap::after {content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; background: url('../images/line-dot-bg.png') repeat top; transform: translateX(-50%);}
.sub-content.sub-number .section-8 .ctn-wrap::before {content: ''; display: block; width: 626px; height: 253px; background: #fff url('../images/number-img09.png') no-repeat center; background-size: 100%; position: absolute; top: 9rem; left: 50%; transform: translateX(-50%); z-index: 1;}
.sub-content.sub-number .section-8 .ctn-wrap .col {flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.sub-content.sub-number .section-8 .ctn-wrap .col .num-area {background-repeat: no-repeat; background-position: center bottom; flex: auto; align-items: flex-start; position: relative; margin-bottom: 30px;}
.sub-content.sub-number .section-8 .txt-wrap .label {margin-bottom: 20px;}
.sub-content.sub-number .section-8 .ctn {min-height: 151px;}
.sub-content.sub-number .section-8 .ctn-1 {padding-right: 40px;}
.sub-content.sub-number .section-8 .ctn-1 .num-area {justify-content: space-between;}
.sub-content.sub-number .section-8 .ctn-1 .alphabel {font-size: 150px; line-height: 0.9;}
.sub-content.sub-number .section-8 .ctn-1 .num-area .cmt {position: absolute; right: 0; top: 10px;}
.sub-content.sub-number .section-8 .ctn-1 .txt-wrap1 .label {margin-left:  14px;}
.sub-content.sub-number .section-8 .ctn-1 .txt-wrap2 .label {margin-left:  77px;}
.sub-content.sub-number .section-8 .ctn-2 {padding-left: 40px;}
.sub-content.sub-number .section-8 .ctn-2 .num-area {justify-content: space-between;}
.sub-content.sub-number .section-8 .ctn-2 .txt-wrap {text-align: center;}
.sub-content.sub-number .section-8 .ctn-2 .txt-wrap + .txt-wrap {margin-top: 50px;}
.sub-content.sub-number .section-8 .ctn-2 .txt-wrap .number-wrap {justify-content: center;}
.sub-content.sub-number .section-9 .num-area {margin-bottom: 50px; background-image: url('../images/number-img10.png'); background-repeat: no-repeat; background-position: center bottom 150px;}
.sub-content.sub-number .section-9 .txt-wrap {display: flex; flex-direction: column; justify-content: space-between; flex: auto;}
.sub-content.sub-number .section-10 .num-area {background: url('../images/number-img11.png') no-repeat center bottom;}
.sub-content.sub-number .section-10 .txt-wrap .number-wrap {flex-direction: column; align-items: center; gap: 30px;}
/* .sub-content.sub-number .section-1 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-2 .ctn-1 .txt-wrap.txt-wrap1 .number-wrap .num {width: 98px;}
.sub-content.sub-number .section-2 .ctn-1 .txt-wrap.txt-wrap2 .number-wrap .num {width: 196px;}
.sub-content.sub-number .section-2 .ctn-2 .txt-wrap.txt-wrap1 .number-wrap .num {width: 398px;}
.sub-content.sub-number .section-2 .ctn-2 .txt-wrap.txt-wrap2 .number-wrap .num {width: 293px;}
.sub-content.sub-number .section-3 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-4 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-5 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-6 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-7 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-8 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-9 .txt-wrap .number-wrap .num {width: 162px;}
.sub-content.sub-number .section-10 .txt-wrap .number-wrap .num {width: 162px;} */
@media(max-width: 1024px) {
    .sub-content.sub-number .section {height: auto !important;}
    .sub-content.sub-number .section .fp-tableCell {height: auto !important;}
    .sub-content.sub-number .visual-section {height: calc(100vh - 5rem) !important;}
    .sub-content.sub-number .visual-section .txt-wrap {margin-top: 0;}
    .sub-content.sub-number .section .inner {padding: 3rem 2rem; height: auto;}
    .sub-content.sub-number .discription {font-size: 1.7rem; padding-bottom: 2rem; margin-bottom: 5rem;}
    .sub-content.sub-number .txt-wrap .label {padding-bottom: 0.5rem; font-size: 2rem; margin-bottom: 1rem !important;}
    .sub-content.sub-number .txt-wrap .number-wrap {gap: 0.3rem; justify-content: center;}
    .sub-content.sub-number .txt-wrap .number-wrap p {font-size: 1.6rem;}
    .sub-content.sub-number .txt-wrap .number-wrap .num {font-size: 6rem;}
    .sub-content.sub-number .txt-wrap .number-wrap .num-current {font-size: 6rem;}
    .sub-content.sub-number .txt-wrap .number-wrap .num-ghost {font-size: 6rem;}
    .sub-content.sub-number .txt-wrap .number-wrap span {font-size: 1.3rem; margin-bottom: 0;}
    .sub-content.sub-number .txt-wrap .number-wrap .unit {font-size: 4rem;}
    .sub-content.sub-number .ctn {margin-top: 3rem;}
    .sub-content.sub-number .ctn p {font-size: 1.5rem;}
    .sub-content.sub-number .ctn .title {font-size: 2rem; margin-bottom: 0.5rem;}
    .sub-content.sub-number .num-area.flex-col {padding-bottom: 9rem; margin-bottom: 0;}
    .sub-content.sub-number .num-area .cmt {font-size: 1.3rem;}
    .sub-content.sub-number .section-1 {padding-top: 5rem;}
    .sub-content.sub-number .section-1 .flex {flex-direction: column;}
    .sub-content.sub-number .section-1 .txt-wrap  {display: flex; flex-direction: column; align-items: center;}
    .sub-content.sub-number .section-1 .txt-wrap .label {margin-left: 0; margin-bottom: 1rem;}
    .sub-content.sub-number .section-1 .img {position: static; transform: none; max-width: 90%; margin-left: -5rem;}
    .sub-content.sub-number .section-2 .ctn-wrap {display: block;}
    .sub-content.sub-number .section-2 .ctn-wrap::after {content: none;}
    .sub-content.sub-number .section-2 .ctn-1 {padding-right: 0;}
    .sub-content.sub-number .section-2 .ctn-2 {padding-left: 0; margin-top: 6rem;}
    .sub-content.sub-number .section-2 .ctn-wrap .col .num-area {display: block; text-align: center; background-size: 19rem; margin-bottom: 0;}
    .sub-content.sub-number .section-2 .txt-wrap + .txt-wrap {margin-top: 3rem;}
    .sub-content.sub-number .section-2 .ctn-1 .txt-wrap1 .label {margin-left: 0;}
    .sub-content.sub-number .section-2 .ctn-1 .txt-wrap2 .label {margin-left: 0;}
    .sub-content.sub-number .section-2 .ctn {min-height: auto;}
    .sub-content.sub-number .section-2 .ctn-2 .txt-wrap + .txt-wrap {margin-top: 3rem;}
    .sub-content.sub-number .section-3 .num-area {background-size: 19rem; padding-bottom: 9rem; margin-bottom: 0;}
    .sub-content.sub-number .section-4 .num-area {background-size: 26rem;}
    .sub-content.sub-number .section-5 .num-area {background-size: 26rem;}
    .sub-content.sub-number .section-6 .num-area {padding-right: 0; text-align: center; background-size: 12rem;}
    .sub-content.sub-number .section-6 .txt-wrap .number-wrap .txt {font-size: 3rem;}
    .sub-content.sub-number .section-7 .num-area {background-size: 100%;}
    .sub-content.sub-number .section-7 .txt-wrap .number-wrap {gap: 1rem;}
    .sub-content.sub-number .section-7 .txt-wrap .number-wrap .num {font-size: 4rem;}
    .sub-content.sub-number .section-7 .txt-wrap .number-wrap .num-current {font-size: 4rem;}
    .sub-content.sub-number .section-7 .txt-wrap .number-wrap .num-ghost {font-size: 4rem;}
    .sub-content.sub-number .section-8 .ctn-wrap {display: block;}
    .sub-content.sub-number .section-8 .ctn-wrap::after {content: none;}
    .sub-content.sub-number .section-8 .ctn-wrap::before {margin: 0 auto; position: static; transform: none; width: 36rem; max-width: 100%; height: 18rem;}
    .sub-content.sub-number .section-8 .ctn {min-height: auto;}
    .sub-content.sub-number .section-8 .ctn-1 {padding-right: 0;}
    .sub-content.sub-number .section-8 .ctn-2 {padding-left: 0; margin-top: 6rem;}
    .sub-content.sub-number .section-8 .ctn-wrap .col .num-area {display: block; text-align: center; background-size: 19rem; margin-bottom: 0;}
    .sub-content.sub-number .section-8 .txt-wrap + .txt-wrap {margin-top: 3rem;}
    .sub-content.sub-number .section-8 .ctn-1 .txt-wrap1 .label {margin-left: 0;}
    .sub-content.sub-number .section-8 .ctn-1 .txt-wrap2 .label {margin-left: 0;}
    .sub-content.sub-number .section-8 .ctn-1 .num-area .cmt {position: static;}    
    .sub-content.sub-number .section-8 .ctn-2 .txt-wrap + .txt-wrap {margin-top: 3rem;}
    .sub-content.sub-number .section-8 .ctn-1 .alphabel {font-size: 6rem;}
    .sub-content.sub-number .section-9 .num-area {margin-bottom: 0; background-position: center bottom; background-size: 16rem;}
    .sub-content.sub-number .section-9 .txt-wrap .number-wrap .num {font-size: 5rem;}
    .sub-content.sub-number .section-9 .txt-wrap .number-wrap .num-current {font-size: 5rem;}
    .sub-content.sub-number .section-9 .txt-wrap .number-wrap .num-ghost {font-size: 5rem;}
    .sub-content.sub-number .section-10 .inner {padding: 3rem 2rem 7rem;}
    .sub-content.sub-number .section-10 .num-area {background-size: 21rem;}
    .sub-content.sub-number .section-10 .txt-wrap .number-wrap {gap: 1rem;}
    .sub-content.sub-number .section-10 .txt-wrap .number-wrap .num {font-size: 4rem;}
    .sub-content.sub-number .section-10 .txt-wrap .number-wrap .num-current {font-size: 4rem;}
    .sub-content.sub-number .section-10 .txt-wrap .number-wrap .num-ghost {font-size: 4rem;}
}

/* 뿌리깊은영상 */
.sub-video .visual-section {position: relative; overflow: hidden; top: 0; right:0; bottom:0; width: 100%;}
.sub-video .visual-section .bg {background-image: url('../images/video-visual.png')}
.sub-video .visual-section .play-btn {display: flex; width: 100px; height: 100px; background-image: url('../images/icon-play.png'); background-repeat: no-repeat; background-position: left 39px center; background-size: 100%; margin: 20px auto 0; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; background-size: 30px; transition: all 0.2s;}
.sub-video .visual-section .play-btn:hover {background-color: rgba(255, 255, 255, 0.5);}
@media(max-width: 1024px) {
    .sub-video .visual-section .play-btn {width: 8rem; height: 8rem; margin: 2rem auto 0; background-size: 2rem; background-position: center;}
}


/* 레이어팝업 */
.layer-popup {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 20; display: none;}
.layer-popup .popup-ctn {position: absolute; width: 1000px; height: 560px; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background: #fff;}
.layer-popup .close {display: block; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; position: absolute; top: -60px; right: 0;}
.layer-popup .close::before {content: ''; display: block; width: 2px; height: 35px; background: #fff; position: absolute; transform: rotate(45deg); top: 5px; left: 23px;}
.layer-popup .close::after {content: ''; display: block; width: 2px; height: 35px; background: #fff; position: absolute; transform: rotate(-45deg); top: 5px; left: 23px;}
@media all and (max-width:1024px) {
    .layer-popup .popup-ctn {width: 90%;}
}
@media all and (max-width:768px) {
    .layer-popup .popup-ctn {height: 25rem; padding: 1rem;}
}

/* 선대회장님어록 */
.sub-analects .visual-section .bg {background-image: url('../images/video-visual.png')}
.sub-analects .section-wrap {text-align: center;}
.sub-analects .section-title {font-size: 24px; color: #76767a; border-bottom: 1px solid #76767a; padding-bottom: 30px; display: inline-block;}
.sub-analects .section-1 {padding: 50px 0 100px;}
.sub-analects .section-1 .img {display: block; max-width: 100%; margin: 0 auto 100px;}
.sub-analects .section-1 p {font-size: 20px; line-height: 1.8; margin: 35px 0;}
.sub-analects .section-1 .txt-1 {font-size: 60px; color: #005a49; margin-bottom: 80px;}
.sub-analects .section-1 .bold {font-weight: 700;}
.sub-analects .section-1 .name {font-size: 16px;}
.sub-analects .section-1 .name span {font-size: 30px; display: inline-block; margin: 0 8px;}
@media all and (max-width:1024px) {
    .sub-analects .section-wrap {padding: 8rem 2rem;}
    .sub-analects .section-title {font-size: 1.8rem; padding-bottom: 2rem;}
    .sub-analects .section-1 {padding: 3rem 0 0;}
    .sub-analects .section-1 .img {margin-bottom: 3rem;}
    .sub-analects .section-1 p {font-size: 1.5rem; margin: 3rem 0;}
    .sub-analects .section-1 .txt-1 {font-size: 3.5rem; margin-bottom: 2rem;}
    .sub-analects .section-1 .name {font-size: 1.3rem;}
    .sub-analects .section-1 .name span {font-size: 2.2rem; margin: 0 0.5rem;}
}


/* 아카이브 */
.sub-archive .title-area {width: 100%; text-align: center; overflow: hidden; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #1d3733;}
.sub-archive .title-area p {text-align: center; font-size: 22px; color: #fff;}
.sub-archive .title-area .h2 {color: #fff; font-size: 60px;}
.sub-archive .inner {width: 1520px; margin: 0 auto; max-width: calc(100% - 2rem); padding: 110px 0;}
.sub-archive .thum img {display: block; max-width: 100%;}
.sub-archive .thum-list {display: flex; gap: 45px 0; margin-top: 150px; flex-wrap: wrap;}
.sub-archive .thum-list .list {display: flex; flex-direction: column; flex: 1; align-items: center; width: calc(100% / 4);}
.sub-archive .thum-list .label-wrap {width: 100%; margin-top: 50px;}
.sub-archive .thum-list p {font-weight: 600; text-align: center;}
.sub-archive .thum-list .year {font-size: 16px; color: #838383;}
.sub-archive .thum-list .title {font-size: 22px;}
.sub-archive .thum-list .btn-wrap a {display: flex; width: 190px; height: 50px; align-items: center; justify-content: center; background: #1d3733; color: #fff; font-size: 18px; position: relative; gap: 10px; margin: 30px auto 0;}
.sub-history-time .title-thum {display: flex; align-items: center; justify-content: center;}
.sub-history-time .title-thum .label-wrap p {color: #1d3733;}
.sub-history-time .title-thum .label-wrap .title-1 {font-size: 30px;}
.sub-history-time .title-thum .label-wrap .title-2 {font-size: 36px; line-height: 1.3; font-weight: 600; margin: 30px 0 50px;}
.sub-history-time .title-thum .label-wrap .btn-wrap {display: flex; gap: 5px;}
.sub-history-time .title-thum .label-wrap .btn-wrap a {display: flex; align-items: center; justify-content: center; font-size: 20px; color: #1d3733; font-weight: 600; width: 260px; height: 60px; border: 1px solid #1d3733; transition: all 0.2s;}
.sub-history-time .title-thum .label-wrap .btn-wrap a:hover{color: #fff; background: #1d3733;}
.sub-history-time .thum-list .btn-wrap a::after {content: ''; display: block; width: 18px; height: 18px; background: url('../images/icon-download.png') no-repeat center; background-size: 100%; }
.sub-history-time .thum {padding-left: 75px;}
.sub-video-time .thum-list {margin-top: 0 !important;}
.sub-video-time .thum-list .list {flex: none;}
.sub-video-time .thum-list .thum {display: block; position: relative;}
.sub-video-time .thum-list .thum::after {content:''; width: 70px; height: 70px; background: url('../images/icon-play2.png') no-repeat center; background-size: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sub-video-time .thum-list .label-wrap {margin-top: 15px;}
.sub-brand-history .inner {width: 1120px;}
.sub-brand-history .thum-list {margin-top: 0; gap: 80px;}
.sub-brand-history .thum-list .list {margin: 50px 0; position: relative;}
.sub-brand-history .thum-list .thum {width: 229px; height: 229px; border-radius: 50%; border: 5px solid #e9e7e3; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.sub-brand-history .thum-list .list-1 .thum {width: 324px; height: 324px; margin-top: -95px;}
.sub-brand-history .thum-list .label-wrap {margin-top: 15px;}
.sub-brand-history .thum-list p {text-align: center;}
.sub-brand-history .thum-list .title {font-size: 17px; font-weight: 500; margin-top: 15px;}
.sub-brand-history .thum-list .list::before {position: absolute; content: ''; display: block; width: 32px; height: 30px; left: -51px; top: 30%; margin-top: -15px; background: url('../images/icon-arrow4.png') no-repeat center; background-size: 100%;}
.sub-brand-history .thum-list .list-1::before {content: none;}
.sub-brand-history .thum-list .list-2::before {left: -43px;}
.sub-brand-history .thum-list .list-4::before {transform: rotate(-90deg); top: -55px; right:44% !important; left: auto !important;}
.sub-brand-history .thum-list-1 .list::before {transform: rotate(180deg);}
.sub-brand-history .thum-list-2 {flex-direction: row-reverse;}
.sub-brand-history .thum-list-2 .list::before {left: auto; right: -51px;}

@media all and (max-width:1024px) {
    .sub-archive .inner {padding: 8rem 0;}
    .sub-archive .title-area {height: 20rem;}
    .sub-archive .title-area .h2 {font-size: 3rem;}
    .sub-archive .title-area p {font-size: 1.6rem;}    
    .sub-archive .thum img {margin: 0 auto;}
    .sub-archive .thum-list {margin-top: 5rem; gap: 0.5rem;}
    .sub-archive .thum-list .list {flex: none; width: calc(50% - 0.5rem); margin: 3rem 0;}
    .sub-archive .thum-list .label-wrap {margin-top: 2rem;}
    .sub-archive .thum-list .label-wrap p {text-align: center;}
    .sub-archive .thum-list .year {font-size: 1.3rem;}
    .sub-archive .thum-list .title {font-size: 1.8rem;}
    .sub-archive .thum-list .btn-wrap a {margin-top: 2rem; font-size: 1.4rem; height: 4rem; width: 13rem; max-width: 100%;}
    .sub-archive .thum-list .btn-wrap a::after {width: 1.4rem; height: 1.4rem;}
    .sub-history-time .title-thum {display: block;}
    .sub-history-time .title-thum .thum {padding-left: 9rem; margin-bottom: 3rem;}
    .sub-history-time .title-thum .label-wrap p {text-align: center;}
    .sub-history-time .title-thum .label-wrap .title-1 {font-size: 1.6rem;}
    .sub-history-time .title-thum .label-wrap .title-2 {font-size: 2.2rem; margin: 2rem 0 3rem;}
    .sub-history-time .title-thum .label-wrap .btn-wrap {flex-direction: column; align-items: center;}
    .sub-history-time .title-thum .label-wrap .btn-wrap a {height: 4.5rem; font-size: 1.6rem; width: 27rem; max-width: 100%;}
    .sub-history-time .thum-list .thum {padding-left: 4rem;}
    .sub-video-time .thum-list .thum::after {width: 4rem; height: 4rem;}
    .sub-video-time .thum-list .list {margin: 1rem 0;}
    .sub-brand-history .thum-list {display: block;}
    .sub-brand-history .thum-list .list {width: 100%; margin: 8rem 0;}
    .sub-brand-history .thum-list .list::before {top: -4rem; left: 48% !important; right: auto !important; transform: rotate(-90deg) !important; width: 2.5rem;}
    .sub-brand-history .thum-list .list .thum {width: 22rem; height: 22rem; padding: 5rem;}
    .sub-brand-history .thum-list .list-1 .thum {width: 28rem; height: 28rem;}
}


/* 역대 영상 */
.sub-video-time {}














.gallery {width: 100%; min-height: 100vh; background: url('../images/gallery/bg.jpg') no-repeat center; background-size: cover; padding-top: 195px;}
.gallery .h2 {font-size: 80px; font-weight: 700; color: rgba(255, 255, 255, 0.5); font-family: 'Rajdhani', sans-serif; text-align: center; text-transform: uppercase; line-height: 1;}
.gallery .sub-menu {width: 100%; padding: 0 30px; background: #fff; margin-top: -17px;}
.gallery .sub-menu ul {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.gallery .sub-menu ul li {position: relative;}
.gallery .sub-menu ul li::after {content: ''; display: block; height: 3px; left: 0; right: 0; bottom: 0; background: #fff; transition: all 0.3s;}
.gallery .sub-menu ul li.active::after,
.gallery .sub-menu ul li:hover::after {background: #df2d32;}
.gallery .sub-menu ul li a {text-align: center; font-size: 18px; color: #969696; padding: 5px 62.5px; display: block; position: relative;}
.gallery .sub-menu ul li.active a,
.gallery .sub-menu ul li a:hover {color: #df2d32; font-weight: 700;}
.gallery .img-list {width: 1300px !important; margin: 0 auto; max-width: 100%; padding: 80px 0;}

.vision {padding-bottom: 290px; background: url('../images/vision/bg06.png') no-repeat bottom center;}
.vision .ctn01 {width: 100%; position: relative;}
.vision .ctn01 .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 2s; transform: scale(1.2, 1.2); background: url('../images/vision/bg01.jpg') no-repeat center; background-size: cover; z-index: -1;}
.vision .ctn01.active .bg {transform: scale(1,1);}
.vision .ctn01 .inner {width: 1200px; margin: 0 auto; max-width: 100%; padding: 189px 0 186px; position: relative; padding-right: 679px;}
.vision .ctn01 .h2 {font-family: 'Rajdhani', sans-serif; font-size: 80px; font-weight: 800; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; margin-bottom: 25px;}
.vision .ctn01 .txt-box01 span {font-family: 'Nanum Myeongjo', serif; font-size: 60px; line-height: 1;}
.vision .ctn01 .txt-box01 p {font-size: 35px; font-weight: 700; margin-top: -15px; margin-bottom: 25px;}
.vision .ctn01 .txt-box01 p strong {color: #df2d32;}
.vision .ctn01 .txt-box02 p {color: #656565; font-size: 19px; line-height: 1.7;}
.vision .ctn01 .ceo {text-align: right; margin-top: 54px; font-size: 16px; font-weight: 700; color: #656565;}
.vision .ctn01 .ceo strong {font-size: 18px;}
.vision .ctn01 img {position: absolute; right: 0; bottom: 0;}
.vision .txt-area .txt-box .label {font-size: 80px; font-family: 'Rajdhani', sans-serif; font-weight: 700; position: absolute; text-transform: uppercase; display: inline-block; line-height: 1.1;}
.vision .txt-area .txt-box .label::after {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;}
.vision .txt-area .quistion {width: 100%; padding-right: calc(50% - 357px);}
.vision .txt-area .quistion .txt-box {background: #aed1eb; padding-left: calc(100% - 957px); padding-top: 93px; padding-bottom: 28px; padding-right: 30px; position: relative; border-bottom-right-radius: 30px;}
.vision .txt-area .quistion .txt-box .label {color: #fff; top: 79px;}
.vision .txt-area .quistion .txt-box .label::after {background: #fff;}
.vision .txt-area .quistion .txt-box .txt {padding-left: 98px; font-size: 22px; font-weight: 700; font-family: 'Noto Sans KR'; font-weight: 400;}
.vision .txt-area .quistion .txt-box .txt span {display: block;}
.vision .txt-area .quistion .txt-box .txt strong {color: #006cba;}
.vision .txt-area .answer {width: 100%; overflow: hidden;}
.vision .txt-area .answer .txt-box {width: 1200px; margin: 0 auto; max-width: 100%; padding: 50px 106px 90px 100px; position: relative;}
.vision .txt-area .answer .txt-box .label {color: #e0e0e0; left: 0; top: 39px;}
.vision .txt-area .answer .txt-box .label::after {background: #e0e0e0;}
.vision .txt-area .answer .txt-box .txt {text-align: justify; position: relative; z-index: 1; font-family: 'Noto Sans KR'; font-weight: 400;}
.vision .ctn03.txt-area .quistion {position: relative; z-index: 1;}
.vision .ctn03.txt-area .quistion .txt-box {background: #006cba;}
.vision .ctn03.txt-area .quistion .txt-box .txt strong {color: #fff;}
.vision .ctn03.txt-area .answer {background: #f1f1f1; margin-top: -135px;}
.vision .ctn03.txt-area .answer img {position: absolute; bottom: -33px; right: -300px;}
.vision .ctn03.txt-area .answer .txt-box {padding: 185px 430px 90px 100px;}
.vision .ctn04 {margin-top: 102px;}
.vision .txt-area.right .quistion {padding-right: 0; padding-left: calc(50% - 668px);}
.vision .txt-area.right .quistion .txt-box {padding-left: 68px; border-bottom-right-radius: 0; border-bottom-left-radius: 30px;}
.vision .txt-area.right .answer02 .txt-box {padding: 50px 496px 90px 100px;}
.vision .ctn05 {background: url('../images/vision/bg04.jpg') no-repeat center; background-size: cover; position: relative; overflow: hidden;}
.vision .ctn05::before {content: ''; display: block; position: absolute; height: 117px; left: 0; top: 0; right: 0; background: #fff;}
.vision .ctn05.txt-area .quistion .txt-box {background: #006cba;}
.vision .ctn05.txt-area .quistion .txt-box .txt strong {color: #fff;}
.vision .ctn05.txt-area .answer .txt-box .label {color: #a6a4a4;}
.vision .ctn05.txt-area .answer .txt-box .label::after {background: #a6a4a4;}
.vision .ctn05.txt-area .img {position: absolute; bottom: -386px; right: calc(50% - 691px); z-index: 1;}
.vision .ctn06 {margin: 70px 0;}
.vision .ctn07 {position: relative;}
.vision .ctn07 .img {position: absolute; top: -50px; left: calc(50% - 600px);}
.vision .ctn07.txt-area .quistion .txt-box {padding-left: 576px;}
.vision .ctn07.txt-area .answer .txt-box {padding: 50px 106px 90px 607px;}
.vision .ctn07.txt-area .answer .txt-box .label {left: 509px;}

.themestory-main {position: relative; width: 100%; min-height: 100vh; overflow: hidden;}
.themestory-main .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 2s; transform: scale(1.2, 1.2); background: url('../images/themestory/main-bg.jpg') no-repeat center; background-size: cover; z-index: -1;}
.themestory-main.active .bg {transform: scale(1,1);}
.themestory-main .inner {width: 1200px; margin: 0 auto; max-width: 100%; padding: 185px 0 185px 600px;}
.themestory-main .h2 {text-align: right; font-size: 80px; font-weight: 700; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; font-family: 'Rajdhani', sans-serif; margin-bottom: 15px;}
.themestory-main .txt {color: #fff; font-size: 18px; font-family: 'Noto Sans KR'; text-align: justify; font-weight: 300;}
.themestory-main .sub-menu {position: absolute; bottom: 0; right: 0; background: #fff; padding: 50px calc(50% - 595px) 50px 70px; border-top-left-radius: 50px;}
.themestory-main .sub-menu ul {display: flex; align-items: center;}
.themestory-main .sub-menu ul a {display: block; font-size: 20px; color: #8d8d8d; width: 143px; margin: 0 5px; text-align: center; padding: 5px; border-bottom: 1px solid #8d8d8d; position: relative;}
.themestory-main .sub-menu ul a::after {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #000; opacity: 0; transition: all 0.3s;}
.themestory-main .sub-menu ul a:hover {color: #000; font-weight: 600;}
.themestory-main .sub-menu ul a:hover::after {opacity: 1;}
.themestory .visual-area {width: 100%; padding-right: calc(50% - 723px); overflow: hidden;}
.themestory .visual-area .inner {width: 100%; height: 100%; position: relative; overflow: hidden; border-bottom-right-radius: 90px; padding: 420px 30px 140px calc(50% - 560px);}
.themestory .visual-area .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 2s; transform: scale(1.2, 1.2); background-size: cover; z-index: -1; background-repeat: no-repeat; background-position: center;}
.themestory01 .visual-area .bg {background-image: url('../images/themestory/01/bg.jpg');}
.themestory02 .visual-area .bg {background-image: url('../images/themestory/02/bg.jpg');}
.themestory03 .visual-area .bg {background-image: url('../images/themestory/03/bg.jpg');}
.themestory04 .visual-area .bg {background-image: url('../images/themestory/04/bg.jpg');}
.themestory .visual-area.active .bg {transform: scale(1,1);}
.themestory .visual-area .sub-nav {position: absolute; top: 205px; left: 0; background: #fff; padding-left: calc(50% - 600px);}
.themestory .visual-area .sub-nav ul {display: flex; align-items: center;}
.themestory .visual-area .sub-nav ul li a {display: block; font-size: 18px; color: #656565; position: relative; padding: 10px 36px 7px;}
.themestory .visual-area .sub-nav ul li a.active,
.themestory .visual-area .sub-nav ul li a:hover {color: #000; font-weight: 600;}
.themestory .visual-area .sub-nav ul li a::after {content: ''; display: block; width: 2px; height: 17px; background: #656565; position: absolute; right: 0; top: 14px;}
.themestory .visual-area .sub-nav ul li:last-child a::after {content: none;}
.themestory .visual-area .title {font-size: 90px; font-weight: 700; font-family: 'Rajdhani', sans-serif; line-height: 1; text-transform: uppercase;}
.themestory .ctn-wrap {width: 1200px; margin: -64px auto 0; max-width: 100%; padding-bottom: 150px;}
.themestory .ctn-wrap .title-area {display: flex; align-items: flex-start;}
.themestory .ctn-wrap .title-area .title-box {display: flex; align-items: center; justify-content: flex-start; padding: 35px; background: #006cba; min-height: 300px; width: 300px;}
.themestory .ctn-wrap .title-area .title-box .h3 {color: #fff; font-size: 40px; font-weight: 700;}
.themestory .ctn-wrap .title-area .title-box .h4 {color: #fff; font-size: 26px; font-weight: 400;}
.themestory .ctn-wrap .title-area .txt {width: calc(100% - 300px); padding: 139px 0 50px 78px; font-family: 'Noto Sans KR'; line-height: 1.8; text-align: justify;}
.themestory .ctn-wrap .ctn {display: flex; align-items: flex-start;margin-top: 70px; width: 100%;}
.themestory .ctn-wrap .ctn .title-box {padding-right: 50px; width: 300px;}
.themestory .ctn-wrap .ctn .title-box .h5 {font-family: 'Noto Sans KR'; font-size: 23px; color: #006cba;}
.themestory .ctn-wrap .ctn .txt-box {width: calc(100% - 300px);}
.themestory .ctn-wrap .ctn .txt-box * {text-align: justify; font-family: 'Noto Sans KR'; line-height: 1.8;}
.themestory .ctn-wrap .ctn .txt-box .blue {color: #006cba; font-weight: 600;}
.themestory .ctn-wrap .ctn .txt-box .txt {text-align: justify; font-family: 'Noto Sans KR'; line-height: 1.8;}
.themestory .ctn-wrap .ctn .txt-box .img {max-width: 100%;}
.themestory .ctn-wrap .ctn .txt-box .txt + .img {margin-top: 40px;}
.themestory .ctn-wrap .ctn .txt-box .img + .txt {margin-top: 40px;}
.themestory .ctn-wrap .ctn .txt-box dl {margin: 40px 0;}
.themestory .ctn-wrap .ctn .txt-box .blue-box {padding: 40px; background: #edf3f7;}
.themestory .ctn-wrap .ctn .txt-box .doc-box {padding: 40px; position: relative; margin-top: 25px; background: #eeeeee;}
/* .themestory .ctn-wrap .ctn .txt-box .doc-box::before {content: ''; display: block; left: 0; top: 0; width: 70px; height: 70px; border-top: 1px solid #000; border-left: 1px solid #000; position: absolute;}
.themestory .ctn-wrap .ctn .txt-box .doc-box::after {content: ''; display: block; right: 0; bottom: 0; width: 70px; height: 70px; border-bottom: 1px solid #000; border-right: 1px solid #000; position: absolute;} */
.themestory .ctn-wrap .ctn .txt-box dl dt {font-size: 18px; font-family: 'Noto Sans KR'; margin-bottom: 15px;}
.themestory .ctn-wrap .ctn .txt-box dl dd {font-size: 16px; font-family: 'Noto Sans KR'; text-align: justify;}

/* movie */
.movie {padding-top: 215px;}
.movie .sub-ctn {width: 1311px; max-width: 100%; padding: 33px 0 80px; margin: 0 auto;}
.movie .h2 {font-size: 120px; font-weight: 700; font-family: 'Rajdhani', sans-serif; line-height: 1; text-transform: uppercase; text-align: center;}
.movie .h3 {text-align: center; font-size: 20px; margin-top: 20px;}
.movie .mov-wrap {margin: 40px 0;}
.movie .mov-wrap video {max-width: 100%; margin: 0 auto; display: block;}
.movie .download .title {font-size: 30px; font-weight: 600; margin-bottom: 20px;}
.movie .download .list-wrap {display: flex;}
.movie .download .list-wrap li {margin-right: 7px;}
.movie .download .list-wrap li a {display: block; padding: 10px 40px 10px 20px; background-repeat: no-repeat; background-position: right 15px center; background-image: url('../images/ico-download.png'); background-size: 15px; transition: all 0.2s; border: 1px solid #006cba; color: #006cba; border-radius: 500px; font-weight: 700; font-size: 20px;}
.movie .download .list-wrap li a:hover {background-color: #006cba; color: #fff; background-image: url('../images/ico-download-w.png');}

@media all and (max-width: 1350px) {

    .vision .txt-area.right .quistion {padding-left: calc(50% - 599px);}
    .vision .txt-area.right .answer .txt-box {padding: 50px 106px 90px 170px;}
    .vision .txt-area.right .answer .txt-box .label {left: 70px;}
    .vision .ctn07.txt-area .quistion .txt-box {padding-left: 505px;}
    .vision .ctn07.txt-area .answer .txt-box {padding: 50px 106px 90px 607px;}
    .vision .ctn07.txt-area .answer .txt-box .label {left: 507px;}

}

@media all and (max-width: 1024px) {

    

    
}

@media all and (max-width: 768px) {

    #footer .footer-inner {display: block; padding: 30px 20px;}
    #footer img {width: 150px;}
    #footer .info-wrap {margin-left: 0; margin-top: 15px;}
    #footer .info-wrap .link-area li a {font-size: 14px;}
    #footer .info-wrap .info-area li {font-size: 13px;}
    #footer .family-site {width: 100%; top: auto;}
    #footer .family-site .select {margin-top: 15px;}
    #footer .family-site .select::after {height: 40px;}
    #footer .family-site .select select {width: 100%; font-size: 13px; height: 40px;}
    #footer .family-site .go-btn {height: 40px; font-size: 13px;}

    
}


















/*  */