@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.s-sec01 {color:#fff; background-image:url('../images/sub/sec01_bg.jpg'); background-size:cover; background-repeat:no-repeat;}

.page01 {height: 100vh !important; overflow: hidden;}
.history-title {width:150px; height:150px; margin:0 auto 70px; border:1px solid #fff; border-radius:100%; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.history-title strong {font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.2em; display:block;}
.history-title p {font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.3em;}

.history .items {display:flex; flex-wrap:wrap;}
.history .items .item {padding-top:25px; padding-left:30px; margin-bottom:65px; opacity: 0; width:25%; position:relative;}
.history .items .item:before {position:absolute; transition: all 0.9s ease-in-out; content:''; width:15px; height:15px; border-radius:100%; background-color:#ffb623; top:-7px; left:30px; opacity:0;}
.history .items:after {position: absolute; content: ''; width: 0; opacity:0; top: 0; left: 0; height: 1px; background-color:rgba(255,255,255,.3);}
.history .items .item .year {font-size:25px; margin-bottom:10px; font-weight:700; letter-spacing:-.02em; line-height:1.3em; opacity: 0;}
.history .items .item ol {opacity:0;}
.history .items .item ol li {font-size:17px; line-height:1.765em; display:flex;}
.history .items .item ol li .month {margin-right:20px;}
.history .items .item ol li p {flex:1;}

.history.load .items:after {opacity: 1; width: 100%; transition: all 1s ease-in-out;}
.history.load .items .item {opacity: 1;}
.history.load .items .item .year {opacity:1; transition: all 1.5s ease-in-out;}
.history.load .items .item:before {opacity:1;}
.history.load .items .item ol {opacity: 1; transition: all 1.5s ease-in-out;}

.s-sec02 {background-color:#141414;}

.philosophy strong {font-size:26px; letter-spacing:-.01em; line-height:1.4em; display:block; color:#ffb623;}
.philosophy p {font-size:18px; letter-spacing:-.01em; line-height:1.556em; color:#fff;}
.philosophy .title {margin-bottom:50px; text-align:center;}
.philosophy .title strong {margin-bottom:20px;}
.philosophy .wrap {display:flex; margin:0 -15px;}
.philosophy .wrap .col {padding:0 15px; width:50%; position:relative;}
.philosophy .wrap .col .txt {position:absolute; bottom:30px; left:55px;}
.philosophy .wrap .col .txt strong {margin-bottom:10px;}

.s-sec03 {position:relative;}
.s-sec03 .m-tit {position:absolute; top:265px; left:50%; transform:translateX(-50%); z-index: 1;}
.core-value {display:flex;}
.core-value .group {height:100vh; padding-top:200px; width:20%; display:flex; flex-direction:column; justify-content:center; background-size:cover; background-repeat:no-repeat; color:#fff; text-align:center;}
.core-value .group:nth-child(1) {background-image:url('../images/sub/cv_bg1.jpg');}
.core-value .group:nth-child(2) {background-image:url('../images/sub/cv_bg2.jpg');}
.core-value .group:nth-child(3) {background-image:url('../images/sub/cv_bg3.jpg');}
.core-value .group:nth-child(4) {background-image:url('../images/sub/cv_bg4.jpg');}
.core-value .group:nth-child(5) {background-image:url('../images/sub/cv_bg5.jpg');}
.core-value .group:nth-child(1):hover {background-image:url('../images/sub/cv_bg1_on.jpg');}
.core-value .group:nth-child(2):hover {background-image:url('../images/sub/cv_bg2_on.jpg');}
.core-value .group:nth-child(3):hover {background-image:url('../images/sub/cv_bg3_on.jpg');}
.core-value .group:nth-child(4):hover {background-image:url('../images/sub/cv_bg4_on.jpg');}
.core-value .group:nth-child(5):hover {background-image:url('../images/sub/cv_bg5_on.jpg');}
.core-value .group .icon {width:75px; height:74px; margin:0 auto; position:relative;}
.core-value .group .icon img {position:absolute; top:0;left:0;}
.core-value .group .icon .on {display:none;}
.core-value .group:hover .icon .on {display:block;}
.core-value .group:hover .icon .off {display:none;}
.core-value .group .title {font-size:26px; margin:25px 0 15px; line-height:1.4em; letter-spacing:-.01em; font-weight:700;}
.core-value .group p {font-size:18px; line-height:1.7em; letter-spacing:-.01em; height:10.2em;}
.core-value .group:hover {color:#242424;}

.s-sec04 .m-tit {margin-bottom:30px; padding-bottom:50px; border-bottom:1px solid #ddd;}

.culture {display:flex; flex-wrap:wrap;}
.culture li {padding:33px 0; width:25%; text-align:center; transition: all 0.3s ease-in-out; border-radius:20px;}
.culture li strong {font-size:18px; margin:25px 0 5px; font-weight:600; color:#454545; letter-spacing:-.02em; line-height:1.4em; display:block;}
.culture li p {line-height:1.5em; letter-spacing:-.01em;}
.culture li:hover {box-shadow:1px 3px 10px rgba(0,0,0,.15); transition: all 0.3s ease-in-out; background-color: #ffb623;}
.culture li .icon .on {display: none; transition: all 0.3s ease-in-out;}
.culture li:hover .icon .off {display: none; transition: all 0.3s ease-in-out;}
.culture li:hover .icon .on {display: block; margin: 0 auto; transition: all 0.3s ease-in-out;}

.sub-02 {line-height:0;}

.content02-1 {position:relative;}
.content02-1 .inner {position:absolute; bottom:50px; left:50%; transform:translateX(-50%); width:100%; max-width:1780px; padding:0 30px; margin:0 auto; z-index: 100;}
.content02-1 .inner .top strong {font-size:44px; letter-spacing:-.06em; font-weight:700; line-height:1.3em; display:block; color:#fff; font-family:'MICEGothic';}
.content02-1 .inner .top p {font-size:30px; margin:5px 0; letter-spacing:-.06em; line-height:1.5em; color:#fff; font-family:'MICEGothic';}
.content02-1 .inner .top span {font-size:18px; line-height:1.7em; display:block; color:#fff; letter-spacing:-.04em;}
.content02-1 .inner .top ul {margin:25px 0 85px; display:flex;}
.content02-1 .inner .top ul li {margin-right:5px;}
.content02-1 .inner .top ul li a {width:150px; height:50px; font-size:18px; font-weight:500; letter-spacing:-.03em; display:flex; align-items:center; justify-content:center; line-height:1.5em; color:#242424; border-radius:5px;}
.content02-1 .inner .top ul li a img {margin:-2px 10px 0 0; vertical-align:middle;}
.content02-1 .inner .top ul li:nth-child(1) a {background-color:#fff;}
.content02-1 .inner .top ul li:nth-child(2) a {background-color:#ffb623;}
.content02-1 .list {padding:25px 45px; border-radius:10px; color:#fff; display:flex; background-color:rgba(0,0,0,.5);}
.content02-1 .list .left {font-size:30px; padding-top:20px; width:455px; font-weight:700; letter-spacing:-.02em; line-height:1.3em;}
.content02-1 .list .right {flex:1;}
.content02-1 .list .right ul li {height:70px; font-size:18px; border-bottom:1px solid rgba(255,255,255,.2); line-height:1.4em; display:flex; align-items:center}
.content02-1 .list .right ul li .title {width:170px; padding-left:15px; font-weight:500;}
.content02-1 .list .right ul li .text {flex:1;}

.video-container.pop-video {padding-bottom:0; height:100vh;}

.pop-sec {height:100vh; display:flex; align-items:center;}

.fancybox-inquiry.fancybox-wrap {top:0 !important; left:0 !important; width:100% !important; position:fixed !important; overflow:hidden !important;}
.fancybox-inquiry .fancybox-inner {width:100% !important; margin:0 auto !important; height:100vh !important; overflow:hidden !important;}
.fancybox-inquiry .fancybox-overlay {overflow:unset !important;}
.fancybox-inquiry .fancybox-close {width:40px; height:40px; top:0; right:0; background-image:url('../images/main/pop_close1.jpg'); -webkit-background-size:contain; background-size:contain;}

.content02-2 {padding:75px 0; background-color:#242424;}
.content02-2 .board-search .search {background-color:#fff; border-radius:5px;}
.content02-2 .board-search .total-page {color:#fff;}
.content02-2 .board-search .btn-pack {border:none; text-indent:-9999em; background:url('../images/sub/search_icon.png')50% 50% no-repeat;}
.content02-2 .input {border-radius:5px; border:none;}
.content02-2 .arrow {margin-top:45px; text-align:center;}

.event-title {position: absolute; top: 0; left: 0; color: #fff;}
.event-title .title {font-size: 26px; line-height:1.3em; font-weight: 700; letter-spacing:-.02em;}
.event-title p {font-size: 18px; line-height:1.3em; font-weight: 500; letter-spacing:-.02em;}

.fancybox-eventpop .fancybox-title-float-wrap {bottom: auto; top:-90px; right: auto; margin-bottom: 0; left: 0; text-align: left;}
.fancybox-eventpop .fancybox-title-float-wrap .child {display:block !important; font-size: 18px; padding: 0; text-shadow: none; font-weight: 500; font-family: 'Pretendard'; line-height:1.3em; letter-spacing:-.02em; margin-right: 0; background-color:unset;}
.fancybox-eventpop .fancybox-title-float-wrap .child b {font-size: 26px; margin-bottom: 5px; line-height:1.3em; display: block; letter-spacing:-.02em;}
html.open::-webkit-scrollbar {display: none !important;}
.fancybox-eventpop .fancybox-skin {background:unset !important;}
.fancybox-eventpop .fancybox-close {top: 0; right: 0;}

.fancybox-title b {font-size: 26px; margin-bottom: 5px; line-height:1.3em; display: block; letter-spacing:-.02em;}

.fade-in-box {opacity: 1;

  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-out-box {
 
  animation: fadeout 3s;
  -moz-animation: fadeout 3s; /* Firefox */
  -webkit-animation: fadeout 3s; /* Safari and Chrome */
  -o-animation: fadeout 3s; /* Opera */
  animation-fill-mode: forwards;
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}