#header.small { transform: none !important; }
#header .gnb-sub-menus-depth2 { display:none !important; }
.back { position: fixed; top: 120px; left: 40px; width: 64px; height: auto; aspect-ratio: 1 / 1; background: url('../../../../img/common/icon/icon-back-arrow.png') center / 100% auto no-repeat; z-index: 12; overflow: hidden; text-indent: -9999px;  }
.intro { position: relative; width: 100%; padding-top: 200vh; }
.intro .con1 { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; color: #fff; overflow: hidden; }
.intro .con1 .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); width: 954px; margin: 0 auto; }
.intro .con1 .inner .txt1 { position: relative; transform: translate(0, 100px); opacity: 0; transition-duration: .6s; transition-property: transform,opacity; transition-delay: .1s; font-size: max(60px, 40px); line-height: 1.2; letter-spacing: -0.01px; font-weight:700; }
.intro .con1.active .inner .txt1 { transform: translate(0, 0); opacity: 1 }
.intro .con2 { position: relative; width: 100%; padding: 200px 0; background-color: #fff; }
.intro .con2 .deco { position: absolute; top: -230px; left: 0; width: 100%; height: 300px; background-color: #fff; transform: skew(0, -3deg) }

.intro.history { position: relative; width: 100%; padding-top: 200vh; }
.intro.history .con1 .bg { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 110%; height: 2000px; background: url("../../../../img/company/history/histo-bg-img.jpg") no-repeat center center; background-size: cover }
.intro.history .con2 { padding: 1300vh 0 0 }
.intro.history .con2 .deco { top: -230px; height: 300px }
.history-con { position: fixed; top: 100%; left: 0; width: 100%; height: 100vh; padding-top: 115px; transform: translate(0, 0); background: #fff; overflow: hidden; z-index: 10 }
.history-con .his-area { position: relative; width: 100%; color:#000;}
.history-con .his-tab-area { position: absolute; top: 110px; left: 0; width: 100%; transition-duration: .5s; transition-property: top; z-index: 10}
.history-con .his-tab-area.top100 { top: 130px}
.history-con .his-tab { position: relative; display: flex; justify-content: center; width: 100%}
.history-con .his-tab>a { position: relative; margin: 0 19px; height: 34px}
.history-con .his-tab>a .txt { color: #bbb; font-size:20px; font-weight:700;}
.history-con .his-tab>a.on .txt { color: #00ad1d}
.history-con .his-tab>a .txt>br { display: none}
.history-con .his-tab>a .progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #f0f0f0}
.history-con .his-tab>a .progress>span { position: absolute; top: 0; left: 0; width: 0; height: 2px; background: #00ad1d; opacity: 0; transition-duration: .5s; transition-property: opacity}
.history-con .his-tab>a.on .progress>span { opacity: 1}
.history-con .his-area { position: relative; width: 100%; height: calc(100% - 34px)}
.history-con .his-area li { position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.history-con .his-area li:nth-child(1) { left: 0}
.history-con .his-area li .move-pack { position: absolute; top: 0; left: 100%; width: 100%; height: 100%}
.history-con .his-area li .move-pack .pack2 { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.history-con .his-area li:nth-child(1) .move-pack { left: 0}
.history-con .his-area li:nth-child(1) .move-pack .pack2 { left: 0}
.history-con .his-area .tit-txt { position: fixed; top: 180px; left: 260px; opacity: 0; font-size:40px; font-weight:800;}
.history-con .his-area .tit-img { position: absolute; top: calc(50% - 1px); left: calc(50% - 1px); transform: translate(calc(-50% - 1px), calc(-50% - 1px)); width: 840px; height: 640px; overflow: hidden}
.history-con .his-area .tit-img>img { position: absolute; top: calc(50% - 1px); left: calc(50% - 1px); transform: translate(calc(-50% - 1px), calc(-50% - 1px)); width: 840px; height: 640px; object-fit: cover; overflow: hidden}
.history-con .his-area .units { display: flex; position: absolute; top: 280px; left: 100%}
.history-con .his-area .unit { position: relative; width: auto; height: 430px; margin-right: 150px}
.history-con .his-area .units dt { margin-bottom: 32px; font-size:60px; font-weight:700;}
.history-con .his-area .units dd.txt { margin-bottom: 10px; white-space: nowrap; font-size:18px; line-height:1.4; letter-spacing:-0.02px;}
.history-con .his-area .units dd.img { position: absolute; bottom: 0; left: 0; width: 340px; height: 205px}
.history-con .his-area .units dd.img img { width: 100%}

#HISTORY_MAIN.scroll {position:absolute; bottom:0; left:0; width:100%; text-align: center; color:#fff; font-size:14px;}
#HISTORY_MAIN.scroll span {display: block; margin-bottom:20px;letter-spacing:1.4px;}
#HISTORY_MAIN.scroll .line {position:relative; display: inline-block; width:3px; height:100px; overflow: hidden;}
#HISTORY_MAIN.scroll .line:before {content:""; position:absolute; top:0; left:2px; width:1px; height:100%; background-color:rgba(255,255,255,0.3);}
#HISTORY_MAIN.scroll .line:after {content:""; position:absolute; top:0; left:1px; width:2px; background-color:#fff; animation:step1_scroll_animate 3s infinite;}

@keyframes step1_scroll_animate {
    0%, 20% {height: 45%;top: -45%;}
    80%, 100% {height: 45%;top: 145%;}
}

@media screen and (max-width: 1024px){
    .close { top: 80px; left: 3%; width: 50px; }
    #footer { position:relative; z-index:1; }
    .container { margin-bottom:0 !important; }
    .intro .con1 .inner { width: calc(100% - 60px); top: 40%; }
    .intro .con1 .inner .txt1 { font-size:30px; }
    .intro.history .con2 { padding:0}
    .intro.history .con2 .deco { top: -50px; height: 240px}
    .history-con { position: relative; top: unset; left: unset; width: 100%; height: auto; padding-top: 0; transform: unset}
    .history-con .his-area { height: 64px}
    .history-con .his-tab { display: flex; justify-content: center; width: 100%; margin: auto; padding: 10px 5% 0; background: #fff; z-index: 10; transition-duration: .3s; transition-property: top; box-sizing:border-box;}
    .history-con .his-tab>a { margin: 0 28px; height: 64px}
    .history-con .his-tab>a .txt { font-size:15px; }
    .history-con .his-tab>a .txt>br { display: block}
    .history-con .active .his-tab { top:62px;  }
    .history-con .his-area { height: auto; margin-top: 80px}
    .history-con .his-area li { position: relative; top: unset; left: unset; width: 100%; height: auto}
    .history-con .his-area li:nth-child(1) { left: unset}
    .history-con .his-area li .move-pack { position: relative; top: unset; left: unset; width: 100%; height: auto}
    .history-con .his-area li .move-pack .pack2 { display: block; position: relative; top: unset; left: unset; width: 100%; height: auto}
    .history-con .his-area li:nth-child(1) .move-pack { left: unset}
    .history-con .his-area li:nth-child(1) .move-pack .pack2 { left: unset}
    .history-con .his-area .tit-txt { font-size:30px; position: relative; top: unset; left: unset; margin: 40px 0 0 5%; opacity: 1}
    .history-con .his-area .tit-img { position: relative; top: unset; left: unset; transform: translate(0%, 0%); width: 100%; height: 360px}
    .history-con .his-area .tit-img>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto}
    .history-con .his-area .units { display: block; position: relative; top: unset; left: unset; width: 90%; margin: 80px auto 0}
    .history-con .his-area .unit { position: relative; width: auto; height: auto; margin-right: unset; margin-bottom: 80px}
    .history-con .his-area .units dt { font-size:30px; margin-bottom: 20px}
    .history-con .his-area .units dd.txt { font-size:15px; margin-bottom: 10px; white-space: unset}
    .history-con .his-area .units dd.img { position: relative; bottom: unset; left: unset; width: 100%; height: 188px; max-width: 312px; margin-top: 20px}
    .history-con .his-area .units dd.img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%}
    .history-con .his-tab-area { top: 6px}
    .history-con .his-tab-area.top100 { top: 0}
    .history-con .his-tab-area.top100 .his-tab { top: 48px !important}
}