@charset "UTF-8";

@import url('../fonts/Pretendard/pretendard.css');
@import url('../fonts/RemixIcon/remixicon.css');
@import url('../fonts/NotoSans/notoSansKr.css');

html {width:100%; overflow-x:hidden;}
.fullPage {position:relative; left:0; top:0; width:100vw; height:100vh; overflow:hidden;}
html, body {width:100%; background-color:#fff; margin: 0 auto;}
body {font-size:16px; color:#666; font-weight:300; letter-spacing:normal;word-break:keep-all;}
.page-wrapper{width:100%;
    /* overflow-x:hidden; */
}
a {text-decoration:none; color:inherit;}
i, span {color:inherit;}
.container-fluid {position:relative; padding:0 80px;}
section {position:relative; padding:80px 0;}
.container {position:relative;}
/* .container {position:relative; padding:80px 0;} */
.divider {height:0;margin:8px 0;overflow:hidden; border-top:1px solid rgb(87,96,113); opacity:1;}
.mobile-only {display:none !important;}
.pc-only {display:block !important;}
.hidden {font-size:0; color:transparent; text-indent:-9999px;}
.input-group {padding-top:0;padding-bottom:0;}
.input-group .btn:hover,
.input-group .btn:focus,
.input-group .btn:active {border:0;}
.table {border-top:1px solid rgba(0,0,0,0.4)}
.tooltip-inner {font-size:12px;}
ul, ol {padding-left:0;}
.btn + .btn {margin-left:8px;}
.form-label span.required {color:#E4211F; display:inline-block;}
#container_title + .sub-text {font-size:16px;}
.table thead th, .table tbody th {white-space:nowrap;}
#scrap_do .win_btn .btn_submit {white-space:nowrap;}
.page-loading{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-webkit-transition:all .4s .2s ease-in-out;transition:all .4s .2s ease-in-out;background-color:#fff;opacity:0;visibility:hidden;z-index:9999;}
[data-bs-theme="dark"] .page-loading{background-color:#080c05;}
.page-loading.active{opacity:1;visibility:visible;}
.page-loading-inner{position:absolute;top:50%;left:0;width:100%;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;opacity:0;}
.page-loading.active > .page-loading-inner{opacity:1;}
.page-loading-inner > span{display:block;font-family:"Inter",sans-serif;font-size:1rem;font-weight:normal;color:#6f788b;}
[data-bs-theme="dark"] .page-loading-inner > span{color:#fff;opacity:.6;}
.page-spinner{display:inline-block;width:2.75rem;height:2.75rem;margin-bottom:.75rem;vertical-align:text-bottom;background-color:#d7dde2;border-radius:50%;opacity:0;-webkit-animation:spinner .75s linear infinite;animation:spinner .75s linear infinite;}
[data-bs-theme="dark"] .page-spinner{background-color:rgba(255,255,255,.25);}
@-webkit-keyframes spinner {
    0%{-webkit-transform:scale(0);transform:scale(0);}
    50%{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes spinner {
    0%{-webkit-transform:scale(0);transform:scale(0);}
    50%{opacity:1;-webkit-transform:none;transform:none;}
}
section {position:relative; padding:80px 0;}
p, span, li, dd {word-break:keep-all;}

/* text */
h1, .h1 {font-size:40px;}
h2, .h2 {}
h3, .h3 {font-size:28px;}
h4, .h4 {font-size:24px;}
h5, .h5 {font-size:20px;}
h6, .h6 {font-size:16px;}
.fs-14 {font-size:14px;}
.fs-16 {font-size:16px;}
.fs-18 {font-size:18px;}
.fs-20 {font-size:20px;}
.fs-24 {font-size:24px;}
span.inherit {display:block; color:inherit; font-weight:inherit; font-size:inherit; margin:0; padding:0;}
.title-area {margin-bottom:40px;}
.title-area .title {margin-bottom:0;}
.title-area .text {margin-top:16px; margin-bottom:0;}
.title-area .text span {display:block; color:inherit; font-weight:inherit; font-size:inherit; margin:0; padding:0;}

/* bg */
.bg-gray {background-color:#f8f8f8;}


/* login */
.login-wrap {display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;}
.login-wrap .left-area{width:50%;position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
.login-wrap .right-area{width:50%;height:100%;display:flex;align-items:center;justify-content:center;flex-grow:1;flex-direction:column;}
.login-wrap .bg-grad {justify-content:center;}
.login-wrap .bg-area {background-image:url(/assets/img/bg/bg-login.png);background-repeat:no-repeat;background-position:center;background-size:cover;position:absolute; left:0; right:0; height:100%;opacity:0.8;}
.login-wrap .password-toggle-btn .password-toggle-check{position:absolute;left:0;z-index:1;width:40px;height:1.25rem;opacity:0;cursor: pointer;}
.login-wrap .text-area{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:10;}
.login-wrap .logo {display:block;width:200px;position:relative;z-index:10;}
.login-wrap h3 {display:block;margin-top:40px;max-width:80%;text-align:center;word-break:keep-all;}
.login-wrap .list-group-item {display:block; font-size:16px;}
.btn-home{position:absolute;top:20px;right:80px;border-radius:50%;z-index:2;background-color:#080c05; border:1px solid #080c05; transition:0.3s;}
.btn-home i {color:#fff; font-size:20px;}
.btn-home:hover {color:#fff;background-color:#239947; border:1px solid #239947;}

/* bg */
.bg-light {background-color:#f6f9fc;}
.bg-white {background-color:#fff !important;}
.bg-dark {background-color:#080c05;}
[class^="bg-overlay-dark-"] {position:absolute; width:100%; height: 100%; z-index:1;}
.bg-overlay-dark-7:before{content:" ";background:#000000;opacity:0.7;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay-dark-6:before{content:" ";background:#000000;opacity:0.6;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay-dark-5:before{content:" ";background:#000000;opacity:0.5;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay-dark-4:before{content:" ";background:#000000;opacity:0.4;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}

/* button */
.btn-grad {
    color: #ffffff !important;   
    background: linear-gradient(150deg, #239947 0%, #97c74e 50%, #239947 100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-size: 260% 100%;
    background-position: right bottom;
    border: 0;
    line-height: 1.92;    
}
.btn-grad:hover {color:#ffffff;background-position:left bottom; transform: translateY(-0.3rem);}
.form-floating > .form-control,.form-floating > .form-control-plaintext{padding:1rem 1rem;}
.w-md {min-width:160px !important;}
.custom-btn {
    color: #fff;
    border-radius: 0;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    /* box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); */
    outline: none;
}
.btn-send {width:200px; height:54px;}
.btn-send i {font-size:20px;}
.custom-btn span i {display:inline-block;vertical-align:middle;margin-left:8px;}
.btn-3 {background:#239947;
    /* background:linear-gradient(45deg,#239947 0%,#97c74e 100%); */
    width:180px;height:48px;line-height:46px;padding:0;border:none;text-align:center;padding:0;border:none;}
.btn-3 span {position:relative;display:block;width:100%;height:100%;}
.btn-3:before,
.btn-3:after{position:absolute;content:"";right:0;top:0;background:#239947;transition:all 0.3s ease;}
.btn-3:before{height:0%;width:2px;}
.btn-3:after{width:0%;height:2px;}
.btn-3:hover{background:transparent;box-shadow:none;}
.btn-3:hover:before{height:100%;}
.btn-3:hover:after{width:100%;}
.btn-3 span:hover{color:#239947;}
.btn-3 span:before,
.btn-3 span:after {position:absolute;content:"";left:0;bottom:0;background:#239947;transition:all 0.5s ease;}
.btn-3 span:before{width:2px;height:0%;}
.btn-3 span:after{width:0%;height:2px;}
.btn-3 span:hover:before{height:100%;}
.btn-3 span:hover:after{width:100%;}

.btn-text {display:inline-block; padding:0; border:0; color:#080c05; background-color:transparent;}
.btn-text:hover {padding:0; border:0; color:#239947; text-decoration:underline;}

/* shadow */
.shadow{-webkit-box-shadow:0 0 3.125rem rgba(0,0,0,0.1) !important;box-shadow:0 0 3.125rem rgba(0,0,0,0.1) !important;}
.shadow-box{border:1px solid #f0f1f3;padding:50px;position:relative;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.shadow-box:hover{border-color:transparent;-webkit-box-shadow:0px 0px 40px rgba(83,88,93,0.1);box-shadow:0px 0px 40px rgba(83,88,93,0.1);}

/* list */
ul.list-disc {display:block;list-style-type:disc;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0px;margin-inline-end:0px;padding-inline-start:40px;unicode-bidi:isolate;padding-left:0;margin-left:20px;}
ul.list-disc li::marker {margin-top:-2px;} 
.breadcrumb {position:relative; z-index:10;}


/* width */
::-webkit-scrollbar{width:4px; border-radius:2px;}  
/* Track */
::-webkit-scrollbar-track {background:#ddd;}  
/* Handle */
::-webkit-scrollbar-thumb {background:#999;}  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background:#666;}

/* scroll down */
.scroll-down-btn{display:inline-block;text-decoration:none;position:absolute;z-index:1;bottom:16px;left:50%;transform:translateX(-50%);}
.scroll-down-btn p{margin-top:20px;color:white;font-size:12px;font-weight:400;letter-spacing:1px;text-indent:0;animation:colorText 5s ease-out infinite,nudgeText 5s ease-out infinite;}
.mouse{background:transparent linear-gradient(transparent 0%,transparent 50%,white 50%,white 100%);position:relative;width:38px;height:65px;margin:0 auto;border-radius:6rem;background-size:100% 200%;animation:colorSlide 5s linear infinite,nudgeMouse 5s ease-out infinite;}
.mouse:before,.mouse:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
.mouse:before{width:34px;height:61px;background-color:#080c05;border-radius:6rem;}
.mouse:after{background-color:white;width:.375rem;height:.375rem;border-radius:100%;animation:trackBallSlide 5s linear infinite;}
@keyframes colorSlide {
    0% { background-position: 0% 100%; }
    20% { background-position: 0% 0%; }
    21% { background-color: #2c333e; }
    29.99% {
        background-color: white;
        background-position: 0% 0%;
    }
    30% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }
    50% { background-position: 0% 0%; }
    51% { background-color: #2c333e; }
    59% {
        background-color: white;
        background-position: 0% 0%;
    }
    60% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }
    80% { background-position: 0% 0%; }
    81% { background-color: #2c333e; }
    90%, 100% {
        background-color: white;
    }
}
@keyframes trackBallSlide {
    0%{opacity:1;transform:scale(1) translateY(-20px);}
    6%{opacity:1;transform:scale(0.9) translateY(5px);}
    14%{opacity:0;transform:scale(0.4) translateY(40px);}
    15%,19%{opacity:0;transform:scale(0.4) translateY(-20px);}
    28%,29.99%{opacity:1;transform:scale(1) translateY(-20px);}
    30%{opacity:1;transform:scale(1) translateY(-20px);}
    36%{opacity:1;transform:scale(0.9) translateY(5px);}
    44%{opacity:0;transform:scale(0.4) translateY(40px);}
    45%,49%{opacity:0;transform:scale(0.4) translateY(-20px);}
    58%,59.99%{opacity:1;transform:scale(1) translateY(-20px);}
    60%{opacity:1;transform:scale(1) translateY(-20px);}
    66%{opacity:1;transform:scale(0.9) translateY(5px);}
    74%{opacity:0;transform:scale(0.4) translateY(40px);}
    75%,79%{opacity:0;transform:scale(0.4) translateY(-20px);}
    88%,100%{opacity:1;transform:scale(1) translateY(-20px);}

}
@keyframes nudgeMouse {
    0%, 30%, 60%, 90% { transform: translateY(0); }
    20%, 50%, 80% { transform: translateY(8px); }
}
@keyframes nudgeText {
    0%, 30%, 60%, 90% { transform: translateY(0); }
    20%, 50%, 80% { transform: translateY(2px); }
}
@keyframes colorText {
    21%, 51%, 81% { color: #2c333e; }
    30%, 60%, 90% { color: white; }
}

/* header */
header {position:relative; width:100%; padding:0;}
/* header .navbar {border-bottom:1px solid rgba(0, 0, 0, 0.1);} */
header.main .fixed-top {padding:0;}
header .navbar .container-fluid {position:relative; width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; padding:0 80px;}
header .navbar .navbar-brand {width:140px; height:70px; background:url(../img/logo/winecotec.svg) no-repeat 0 center; background-size:100% auto; transition:0.5s;}
header.main .navbar .navbar-brand {width:160px; height:80px; background:url(../img/logo/winecotec-white.svg) no-repeat 0 center; background-size:100% auto; transition:0.5s;}
.btn-login {padding:10px 20px; font-weight:300 !important; border:0;}
.btn-login i {font-size:16px;}
.btn-login:hover {background-color:#239947; border:0;}
header .hd_login .profile-img {width:50px;height:50px;padding:0; background-color:#92a68f;;flex-shrink:0;color:rgba(255,255,255,1); font-size:20px;text-align:center;line-height:44px;;}
header .hd_login .user {color:#080c05;}
header.main .hd_login .profile-img {width:50px;height:50px;padding:0; background-color:rgba(255,255,255,0.2);flex-shrink:0;color:rgba(255,255,255,0.8); font-size:20px;text-align:center;line-height:44px;;}
header.main .hd_login .user {color:#fff;}
.hd_login .profile-img i {color:inherit;}
header.main .navbar.navbar-stuck {border-bottom:1px solid rgba(0,0,0,0.1)}
header.main .navbar.navbar-stuck .navbar-nav .nav-link {color:#080c05}
header.main .navbar.navbar-stuck .hd_login .profile-img {width:50px;height:50px;padding:0; background-color:#92a68f;flex-shrink:0;color:rgba(255,255,255,1); font-size:20px;text-align:center;line-height:44px;;}
header.main .navbar.navbar-stuck .hd_login .user {color:#080c05;}
header .btn-sitemap {position:relative;order:4;border:0;width:40px;height:40px;margin-left:24px;padding:2px;}
header .btn-sitemap span {position:relative;display:block;height:2px;width:36px;border-radius:1px;background-color:#fff;transition:all .2s ease-in-out;}
header .btn-sitemap span:before,
header .btn-sitemap span:after {position:absolute;content:"";height:2px;width:36px;left:0; border-radius:2px;background-color:#fff;transition:all .2s ease-in-out;}
header .btn-sitemap span:before {top:-10px;visibility:visible;}
header .btn-sitemap span:after {top: 10px;}
header .btn-sitemap:hover span,
header .btn-sitemap:hover span:before,
header .btn-sitemap:hover span:after {background-color:#239947;}
header .btn-sitemap.open span {background-color:transparent;}
header .btn-sitemap.open span:before {transform:rotate(45deg) translate(7px, 7px);opacity:1;}
header .btn-sitemap.open span:after {transform: rotate(-45deg) translate(7px, -7px);}
header.main .navbar-expand-lg .navbar-nav .nav-link {color:#fff; font-size:18px;}
header.main .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item {font-size:16px;}
header.main .navbar-expand-lg.navbar-stuck .navbar-nav .nav-link {color:#080c05;}
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap {color:#080c05;}
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap span,
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap span:before,
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap span:after {background-color:#080c05;}
header.main .navbar.navbar-stuck .navbar-brand {width:130px; height:70px; background:url(../img/logo/winecotec.svg) no-repeat 0 center; background-size:100% auto;}

/* sitemap allNav */
#sitemap .btn-close {background:none;line-height:1;background:none;font-size:28px;padding:4px;color:#080c05;opacity:0.8;transition:0.3s; position:absolute;top:20px;right:20px;}
#sitemap .btn-close:hover {opacity:1;}
#sitemap .login-wrap {justify-content:flex-start;}
#sitemap .login-wrap .dropdown a {color:rgba(8, 12, 5, 0.8);}
#sitemap .login-wrap .dropdown a:hover {color:rgba(8, 12, 5, 1);}
#sitemap .login-wrap .dropdown a .profile-img {width:40px;height:40px;background-color:#b7bec5;color:#fff;text-align:center;line-height:38px;font-size:18px;flex-shrink:0;}
#sitemap .nav {display:flex;flex-direction:column;}
#sitemap .nav a {transition:0.3s;}
#sitemap .nav > li {display:flex; flex-direction:column; margin:40px 0;}
#sitemap .nav > li > a {display:block; color:rgba(8, 12, 5, 1); font-size:18px; font-weight:500;}
#sitemap .nav > li > ul {display:flex;flex-direction:column; margin-top:20px}
#sitemap .nav > li > ul > li {margin:4px 0;}
#sitemap .nav > li > ul > li a {display:block; color:rgba(8, 12, 5, 0.8); font-size:16px; font-weight:400;}
#sitemap .nav > li > ul > li a:hover {color:#239947;}
#sitemap .nav > li > ul > li > ul {padding:4px;}
#sitemap .nav > li > ul > li > ul > li {margin:2px 0;}
#sitemap .nav > li > ul > li > ul > li i {display:inline-block; vertical-align:middle; font-size:16px;}
#sitemap .nav > li > ul > li > ul > li a {position:relative; display:inline-block; vertical-align:middle; font-size:14px; color:rgba(8, 12, 5, 0.8); font-weight:400;}
#sitemap .nav > li > ul > li > ul > li a:hover {color:rgba(8, 12, 5, 1); text-decoration:underline;}
/* #sitemap .nav > li > ul > li > ul > li a:before {content:""; position:absolute; left:0; top:10px; width:6px; height:1px; background-color:rgba(8, 12, 5, 0.8);} */

/* footer */
footer {position:relative; width:100%; padding:40px 80px; color:rgba(255,255,255,0.7); background:#080c05; font-size:14px;}
footer .row.d-flex {align-items:flex-end; justify-content:space-between; width:100%; margin:0; padding:0;}
footer .row.d-flex [class^="col-"]:last-child {text-align:right; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; padding-right:120px;}
footer .row.d-flex [class^="col-"]:last-child .dropdown {width:200px;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item {position:relative; padding-right:40px;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item + .dropdown-item {border-top:1px solid rgba(255,255,255,0.1);}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item > * {display:inline-block; vertical-align:middle;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item .logo {width:32px; height:32px; margin-right:8px; text-align:center; background-color:#fff; border-radius:50%; overflow:hidden;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item .logo img {width:70%; margin:4px auto;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item:first-child .logo img {width:60%; margin:4px auto;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item i {position:absolute; right:16px; top:16px;}
footer [class^="col-"] span, 
footer [class^="col-"] a.tel {display:inline-block; color:rgba(255,255,255,0.7); margin:2px 0;}
footer [class^="col-"] .adress {display:block; color:rgba(255,255,255,0.7); margin:2px 0;}
footer a.foot-logo {display:block; width:100%; margin-bottom:36px;}
footer a.foot-logo img {max-width:160px;}
footer .row.d-flex [class^="col-"] span.first {display:block; font-size:18px; font-weight:400; margin-bottom:16px;}
footer .copy {display:block; margin-top:24px}
footer span.business-number:before,
footer a.tel + a.tel:before {content:""; display:inline-block; margin:0 8px; width:1px; height:12px; background-color:rgba(255,255,255,0.4);}
footer a.mail {display:block; color:rgba(255,255,255,0.7); margin:2px 0;}
footer span i,
footer a i {display:inline-block; vertical-align:middle; font-size:16px; color:inherit;}
footer .sns-area {position:relative; width:100%; justify-content:flex-end; margin:28px 24px 0 0;}
footer .sns-area a {display:inline-block; padding:8px; margin:8px; font-size:16px; text-align:center; background-color:rgba(255,255,255,0.1); line-height:1;}
footer .sns-area a i {display:block; padding:0; color:#fff; font-size:16px; font-weight:normal;}
footer .sns-area a:hover {background-color:#fff; color:#080c05;}
footer .sns-area a:hover i {color:inherit;}
footer .foot-menu a {display:inline-block; color:rgba(255,255,255,0.7); font-size:14px; transition:0.3s;}
/* footer .foot-menu a + a:before {content:""; display:inline-block; margin:0 8px; width:1px; height:12px; background-color:rgba(255,255,255,0.4);} */
footer a.mail:hover,
footer [class^="col-"] a.tel:hover,
footer .foot-menu a:hover {text-decoration:underline; color:#fff;}
footer .business-inquiry {display:inline-block; margin-left:4px; font-size:12px; padding:2px 8px; border-radius:4px; background-color:rgba(255,255,255,0.1);}
.copy-notification {position:absolute;top:16px;right:-124px;font-size:14px;letter-spacing:-1px;color:#fff;display:none;}


/* quick_menu */
.quick_wrap{
    position:fixed;     
    bottom:80px; 
    right:80px; 
    width:51px; 
    padding-top:0; 
    z-index:11;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;  
    -moz-transition: 0.4s ease;  
    -ms-transition: 0.4s ease;  
    -o-transition: 0.4s ease;
}
.quick_wrap.scrolled {bottom:0;}
.open .quick_wrap {display:none;}
.quick_menu_wrap {
    position:absolute; 
    bottom:7.8rem; 
    right:0%; width:0; 
    height:0; 
    overflow:hidden;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
aside .quick_menu_wrap {bottom:44px;}
.quick_wrap.open .quick_menu_wrap{
    width:auto; height:auto;
}
.quick_menu_list{
    position:relative; width:100%; margin:4% 0; opacity:0;
    transform: translateY(30%);
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
.quick_wrap.open .quick_menu_list{
    opacity:1; 
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}
.quick_wrap.open .quick_menu_list.quick_menu_li_insta{
    transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
}
.quick_wrap.open .quick_menu_list.quick_menu_li_blog{
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
}
.quick_wrap.open .quick_menu_list.quick_menu_li_blog2{
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
}
.quick_wrap.open .quick_menu_list.quick_menu_li_kakao{
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
}
.quick_menu_list > a {display:flex; justify-content:flex-end; align-items:center; overflow:hidden; color:#fff;}
.quick_menu_list > a > p {
    margin-right:6px; 
    margin-bottom:0;
    width:100px; 
    height:42px; 
    padding:0 24px;
    color:#fff; 
    font-size:14px;
    background-color:#239947; 
    border-radius:21px;
    text-align:center; 
    line-height:40px; 
    font-weight:300;
    opacity:0; 
    visibility:hidden; 
    transform:translateX(20%) translateZ(0); 
    -webkit-transform:translateX(20%) translateZ(0); 
    -moz-transform:translateX(20%) translateZ(0); 
    -ms-transform:translateX(20%) translateZ(0); 
    -o-transform:translateX(20%) translateZ(0); 
    transition:all 0.6s ease-in-out;
    -webkit-transition:all 0.6s ease-in-out; 
    -moz-transition:all 0.6s ease-in-out; 
    -ms-transition:all 0.6s ease-in-out; 
    -o-transition:all 0.6s ease-in-out;
}
.quick_menu_list > a:hover > p {
    opacity:1; visibility:visible; 
    transform:translateX(0%) translateZ(0); 
    -webkit-transform:translateX(0%) translateZ(0);  
    -moz-transform:translateX(0%) translateZ(0);  
    -ms-transform:translateX(0%) translateZ(0);  
    -o-transform:translateX(0%) translateZ(0);  
}
.quick_menu_list > a {}
.quick_menu_list > a i {position:relative; display:block; width:50px; height:50px; color: #080c05; font-size:24px; text-align:center; line-height:50px; background-color:#f8f8f8; border-radius:50%; flex-shrink:0;}
.quick_menu_list > a:hover i {color:#239947;}
.quick_menu_list > a i.kakao-channel {background:#f8f8f8 url(../img/kakao-channel.svg) no-repeat 50%; background-size:36px;}
.quick_menu_list > a:hover i.kakao-channel {display:inline-block; background:#080c05 url(../img/kakao-channel-on.svg) no-repeat 50%; background-size:50px; background-size:36px;}
.quick_menu_list > a i.kakao-talk {background:#f8f8f8 url(../img/kakao-Talk.svg) no-repeat 50%; background-size:28px;}
.quick_menu_list > a:hover i.kakao-talk {display:inline-block; background:#080c05 url(../img/kakao-Talk-on.svg) no-repeat 50%; background-size:50px; background-size:28px;}
.quick_btn_wrap {position:relative; width:100%;}
.quick_btn {
    position:relative; 
    width:50px; 
    height:50px; 
    padding:0; 
    margin:0 auto; 
    border:0; 
    border-radius:100%; 
    background-color: 
    transparent; 
    display:block; 
}
.quick_wrap .quick_btn > i[class^="ri-"] {
    position: absolute;
    top:50%;
    left:50%;
    color:#fff; 
    font-size:28px;
    transition:0.3s;
    -webkit-transition:0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transform: translate(-50%, -50%);
    opacity: 1;
}
.open_btn {    
    position:relative; 
    width:100%; 
    height:100%; 
    text-align:center; 
    margin-left:auto;
    margin-right:auto;
    transform: rotate(0deg) translateZ(0); 
    -webkit-transform: rotate(0deg) translateZ(0); 
    -moz-transform: rotate(0deg) translateZ(0); 
    -ms-transform: rotate(0deg) translateZ(0); 
    -o-transform: rotate(0deg) translateZ(0); 
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    opacity: 0;
}
.open_btn > div { 
    position:absolute; 
    display:inline-block; margin:0;
    background-color:#fff; 
    transform: translate(-50%,-50%) translateZ(0); 
    -webkit-transform: translate(-50%,-50%) translateZ(0); 
    -moz-transform: translate(-50%,-50%) translateZ(0); 
    -ms-transform: translate(-50%,-50%) translateZ(0); 
    -o-transform: translate(-50%,-50%) translateZ(0); 
}
.quick_wrap .open_btn > .bounce1 { top:50%; left:50%; width:50%; height:2px;}
.quick_wrap .open_btn > .bounce2 { top:50%; left:50%; width:2px; height:50%;}
.quick_wrap.open .quick_btn > i[class^="ri-"] {opacity:0; transition:0.3s;}
.quick_wrap.open .open_btn { 
    opacity:1;
    transform: rotate(45deg) translateZ(0); 
    -webkit-transform: rotate(45deg) translateZ(0); 
    -moz-transform: rotate(45deg) translateZ(0); 
    -ms-transform: rotate(45deg) translateZ(0); 
    -o-transform: rotate(45deg) translateZ(0); 
}
.quick_btn {opacity:1; background-color:#239947;}
.quick_wrap.open .quick_btn {opacity:1; background-color:#080c05;}
.quick_top_btn {
    position:relative; 
    width:51px; 
    height:51px; 
    padding:0; 
    margin:0; 
    border:0; 
    background-color: transparent; 
    display:block; 
    margin-top:15px; 
    margin-left:auto; 
    margin-right:0; 
    opacity:1; 
    visibility:visible;
    transition: opacity 0.3s ease; 
    -webkit-transition: opacity 0.3s ease; 
    -moz-transition: opacity 0.3s ease; 
    -ms-transition: opacity 0.3s ease; 
    -o-transition: opacity 0.3s ease; 
}

/* 검색 */
.search-bar {position:relative; width:100%;}
#hd_sch{border-radius:0;}
#hd_sch #sch_stx{position:relative;width:100%;background-color:#fff;}

/* 인기검색어 */
#popular {position:relative;margin:15px 0 0}
#popular h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#popular .popular_inner {width:400px;height:20px;overflow:hidden}
#popular ul {padding:0;margin:0}
#popular ul:after {display:block;visibility:hidden;clear:both;content:""}
#popular li {float:left;width:auto !important;height:18px;line-height:18px;padding-right:20px}
#popular li a {color:#8d8c8c}
#popular li:first-child {border-left:0}
#popular li a:hover {text-decoration:underline}
.popular_inner .popular_btns{display:none}
.popular_btns .pp-next {position:absolute;top:68%;right:0px;width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #53555a;margin-top:-12px;color:#d3d2d2}
.popular_btns .pp-prev {position:absolute;top:68%;right:17px;width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #53555a;margin-top:-12px;color:#d3d2d2}
#popular{position:relative;width:100%;height:auto;margin:0;background-color:#fff;padding:16px;border-radius:4px;}
#popular .popular_inner{width:100%;height:auto;}
#popular ul {width:100%;}
#popular li{display:inline-block;margin:4px;padding:0;}



/* 게시판 */
.chk_box input[type="checkbox"]:checked + label span{background:url(/skin/board/basic/img/chk.png) no-repeat 50% 50% #00A8E3;border-color:#00A8E3;border-radius:6px;}
.chk_box input[type="checkbox"] + label span{position:relative;left:auto;top:auto;width:18px;height:18px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:6px;cursor:pointer;margin-right:8px;margin-top:2px;}
@-moz-keyframes dothabottomcheck {
    0%{height:0;}
    100%{height:50px;}
}
@-webkit-keyframes dothabottomcheck {
    0%{height:0;}
    100%{height:50px;}
}
@keyframes dothabottomcheck {
    0%{height:0;}
    100%{height:50px;}
}
@keyframes dothatopcheck {
    0%{height:0;}
    50%{height:0;}
    100%{height:120px;}
}
@-webkit-keyframes dothatopcheck {
    0%{height:0;}
    50%{height:0;}
    100%{height:120px;}
}
@-moz-keyframes dothatopcheck {
    0%{height:0;}
    50%{height:0;}
    100%{height:120px;}
}
input[type=checkbox]:checked + .check-box,
.check-box.checked{border-color:#00A8E3;}
input[type=checkbox]:checked + .check-box::after,
.check-box.checked::after {
    height: 50px;
    -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
    animation: dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked + .check-box::before,
.check-box.checked::before {
    height: 120px;
    -moz-animation: dothatopcheck 0.4s ease 0s forwards;
    -o-animation: dothatopcheck 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
    animation: dothatopcheck 0.4s ease 0s forwards;
}

/* modal */
.modal-open {padding-right:0;}


/* 약관  */
#ctt {margin:80px auto 0;padding:0;background:#fff;}
#ctt_con {padding:0;}
.ctt_admin {position:absolute; right:14.7%; top:160px; color:#fff; border-radius:24px; background-color:#080c05; z-index:10; transition:0.3s;}
.ctt_admin:hover {background-color:#239947;}
.ctt_admin a {padding:8px 24px;}
.info-box{background-color:#f2f4f5;padding:20px;margin-bottom:16px;}
#ctt_con .info-box ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;}
.privacy-index{margin-bottom:0;}
#ctt_con .info-box ul li{width:33.333%;white-space:nowrap;font-size:15px; color:#080c05;}
.privacy-index li{margin:4px 0 0;}
#ctt_con p {margin:8px 0;}
#ctt_con h6 {margin-top:24px;font-size:16px;color:#080c05;}
#ctt_con ul {padding:0;}
#ctt_con ol {padding:0;;margin:16px 0 0 24px;}
#ctt_con ol li{margin-top:8px;}
#ctt_con .table{border-top:1px solid rgba(0,0,0,0.1);margin-top:8px;}
#ctt_con .table th{background-color:#f2f4f5;color:#080c05;font-weight:500;white-space:nowrap;padding:8px 16px;}
#ctt_con .table td{padding:8px 16px;}

/* main */
.visual p {font-size:16px;}
.visual {width:100%; height:100vh; padding:0; overflow:hidden;}
.visual .video {position:relative; width:100%;height:100%; z-index:1;}
.visual .main-video {position:fixed; left:50%; top:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%); max-width:100%;}
.visual #videoBtn {width:50px;height:50px; font-size:20px;padding:8px;border:none;background:rgba(27, 37, 41.4);color:#fff;cursor:pointer;border-radius:50%; display:block;margin:40px auto;}
.visual #videoBtn:hover{background:rgba(255,255,255,0.4);color:black;}
.video-controls{position:absolute; z-index:10; bottom:50px; right:160px;}
.video-controls .video-btn {color:#fff; background-color:rgba(27, 37, 41,1);border-radius:50%;font-size:20px;opacity:0.7;}
.video-controls .video-btn:after {display:none;}
.video-controls .video-btn:hover {opacity:1;}
.main-section-1 {z-index:10; background-color:#fff;}
.main-section-2 {z-index:10;} 
.main-section-3 {z-index:10; background-color:#fff;} 

/* scroll down */
.c-scrolldown {width:1px;height:60px;position:absolute;bottom:48px;left:0;right:0;margin:0 auto;}
.c-scrolldown .c-line {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%);
    background-position: 0 -60px;
    background-size: 100% 200%;
    animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}  
.c-scrolldown:after {
    content: "Scroll Down";
    position: absolute;
    bottom: -24px;
    color: #fff;
    font-size: 12px;
    display: block;
    z-index: 10;
    white-space: nowrap;
    width: 70px;
    margin-left: -35px;
}
@keyframes scrolldown {
    0%{background-position:0 -60px;}
    75%{background-position:0 0;}
    100%{background-position:0 60px;}
}
.main-section-1 .swiper {margin-top:60px;}
.main-section-1 .swiper .row {align-items:center;}
.main-section-1 .text-area {padding-left:80px;}
.main-section-1 .swiper-thumbnails {margin-top:0;padding-top:8px;}
.main-section-1 .swiper-thumbnails li {position:relative;width:140px;height:100px;border-radius:0;padding:0;border:4px solid transparent; overflow:hidden;}
.main-section-1 .swiper-thumbnails li:after {content:"Steel Distribution"; position:absolute;top:auto;left:0; right:0; bottom: 0; width:100%;color:#fff; padding:8px; font-size: 14px; line-height:1.2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none; /* 오버레이가 클릭을 방해하지 않도록 설정 */
}
.main-section-1 .swiper-thumbnails li:nth-child(2):after {content:"Raw Material Transport System"}
.main-section-1 .swiper-thumbnails li:nth-child(3):after {content:"Factory Automation"}

.main-section-1 .swiper-thumbnails li img {width:100%; border-radius:0; opacity:1;}
.main-section-1 .swiper-thumbnails li p {position:absolute; left:8px; bottom:8px; margin-bottom:0; white-space:nowrap; font-size:16px; color:#fff; z-index:2;}
.main-section-1 .swiper-thumbnails li.active {border:4px solid #239947;}

.main-section-2 .card-hover {padding-bottom:24px; transition:transform 0.6s ease; }
.main-section-2 .card-hover .img-area {position:relative; width:100%; background-color:#000; overflow:hidden;}
.main-section-2 .card-hover .img-area img {width:100%; height:auto; opacity:0.7; transition:0.3s ease;}
.main-section-2 .card-hover .text-area {position:relative;}
.main-section-2 .card-hover .btn-text {margin-top:16px;}

.main-section-2 .card-hover:hover .img-area img {opacity:1;}
.main-section-2 .card-hover:hover .btn-text {padding:0; border:0; color:#239947; text-decoration:underline;}

.main-section-3 .card .card-body {position:relative; padding-bottom:16px; padding-top:24px; font-family:"Pretendard";}
.main-section-3 .card .card-body .badge-area {position:absolute; top:24px; right:38px;}
.main-section-3 .card .card-body .project {display:block; width:100%;}
.main-section-3 .card .card-body .work {font-size:16px;}
.main-section-3 .card .card-body .maker,
.main-section-3 .card .card-body .end-user {display:inline-block; font-size:14px;}
.main-section-3 .card .card-body .end-user:before {content:""; display:inline-block; width:1px; height:12px; margin:0 8px; background-color:rgba(0,0,0,0.2); vertical-align:middle;}
.main-section-3 .card .card-body .maker {margin-bottom:0;}
/* .main-section-3 .card .card-body .date {display:block; font-size:14px; margin-top:24px; padding-top:24px; line-height:1; white-space:nowrap; border-top:1px solid rgba(0,0,0,0.1)} */
.main-section-3 .card .card-footer {font-family:"Pretendard"; display:flex; align-items:center; justify-content:center; padding:12px 38px;margin:0;width:100%;font-size:14px;line-height:1; white-space:nowrap; }
.main-section-4 {padding:0;background:#f6f9fc;overflow:hidden;display:flex;align-items:center;}
.main-section-4 .map_wrap{position:relative;width:100%;height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#239947;}
.main-section-4 .map_wrap .map{width:100%;height:100%;opacity:0.9;}
.main-section-4 .txt_wrap{width:50%;padding:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.main-section-4 #contactForm .btn-area input[type=checkbox]{display:none;}
.main-section-4 #contactForm .btn-area{position:relative;display:flex;align-items:center;}
.main-section-4 #contactForm .btn-area .btn-reset{position:absolute;right:0;display:inline-block;font-size:16px;color:#080c05;transition:0.2s;}
.main-section-4 #contactForm .btn-area .btn-reset:hover{text-decoration:underline;}
.main-section-4 #contactForm .btn-area .btn-text{display:inline-block;font-size:16px;color:#080c05;transition:0.2s;margin:-4px 8px 0;}
.main-section-4 .checkbox{width:25px;height:25px;border-radius:50%;border:2px solid #b7bec5;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:3px;transition:0.3s all;flex-shrink:0;}
.main-section-4 .checkbox svg{width:20px;height:20px;}
.main-section-4 .check-input:checked + .checkbox{background:#239947;border:2px solid #239947;}
.main-section-4 .check-input:checked + .checkbox svg path{stroke-dashoffset:500;stroke-dasharray:500;stroke:#fff;stroke-width:3;animation:check 4s forwards;}
.main-section-4 .checkbox::before{content:"";position:absolute;border-radius:50%;transform:scale(0);display:block;width:60px;height:60px;background:#fff;z-index:-1;}
.main-section-4 .check-input:checked + .checkbox::before{animation:ripple 0.3s;}
@keyframes check{
    to{stroke-dashoffset:0;}
}
@keyframes ripple {
    to{transform:scale(1);}
}

/* badge */
.badge-group {display:flex; flex-wrap:wrap;}
.badge-dark {display:inline-block; padding:8px 16px; margin:2px; background-color:rgba(8, 12, 5, .1); color:rgba(8, 12, 5, .8); font-size:13px;}
.badge-primary {display:inline-block; padding:4px 8px; margin:2px; background-color:rgba(35, 153, 71, .1); color:rgba(35, 153, 71, 1); font-size:12px;}


/* 기업소개 */
.company .sub-visual {position:relative; width:100%; height:600px; overflow:hidden; background-color:#000;}
.company .sub-visual .visual-img {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/company/company-visual.gif) no-repeat 100% 0; background-size:cover; opacity:0.8;}
.company .sub-visual .visual-title {position:relative;width:100%;height:100%;padding:0 80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;color:#fff;}
.sub-visual .visual-title h3 {display:block;font-size:40px; color:#fff;}
.sub-visual .visual-title p {font-size:20px;word-break:keep-all;line-height:1.4;font-weight:400; margin-bottom:0;}
.sub-visual .visual-img {
    position:absolute; top:0px; left:0; width:100%; height:100%; overflow:hidden;
    transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); 
    -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
    -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
    -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
    -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);
    animation: v-img forwards 5s 0.5s ease-in-out;
    -webkit-animation: v-img forwards 5s 0.5s ease-in-out; 
    -moz-animation: v-img forwards 5s 0.5s ease-in-out; 
    -ms-animation: v-img forwards 5s 0.5s ease-in-out; 
    -o-animation: v-img forwards 5s 0.5s ease-in-out;
}
@keyframes v-img {
    0% {
        transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); 
        -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
        -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
        -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
        -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);
    }
    100% {
        transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); 
        -webkit-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);  
        -moz-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);  
        -ms-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);  
        -o-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);
    }
}
@-moz-keyframes v-img {
    0% {
        transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); 
        -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
        -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
        -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
        -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);
    }
    100% {
        transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); 
        -webkit-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);  
        -moz-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);  
        -ms-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);  
        -o-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0);
    }
}
.company .about-1 .row {display:flex; align-items:flex-end;}
.company .about-1 .text-area {padding:24px 0 24px 80px;}
.company .about-1 .text-area p span {display:block; color:inherit; font-weight:inherit; font-size:inherit;}
.company .about-2 {position:relative; clear:both; width:100%; margin-top:80px; padding:80px 0 40px; background-color:rgba(35, 153, 71, 1);}
.company .about-2 .rounded-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 480px;
    transform: translate(-50%, -50%);
    background: url(/assets/img/company/about-1.jpg) no-repeat center;
    background-size: cover;
}
.company .about-2 .icon {width:40px; height:40px; border-radius:8px; text-align:center; border:0; padding:4px; margin-bottom:24px;}
/* one-page-scroll-tap nav */
.page-tabs {position:sticky; top:70px; padding:0; z-index:100;}
.page-tabs nav {border-bottom:1px solid rgba(0,0,0,0.05)}
.tabs-container {font-size:0;position:relative;padding:0;max-width:1328px;margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.tabs-container li{display:inline-block;width:25%;height:60px;background:transparent;font-size:16px;text-align:center;line-height:60px;color:#080c05;text-transform:uppercase;position:relative;overflow:hidden;cursor:pointer;}
.business .tabs-container li {width:33.33%;}
.product .tabs-container li {width:50%;}
.tabs-container li a{display:block;width:100%;height:100%;text-transform:capitalize;}
.tabs-container li.active a {color:#239947; font-weight:500;}
.tabs-container .slider{display:block;position:absolute;bottom:0;left:0;height:1px;background-color:#239947;-webkit-transition:all 0.5s;transition:all 0.5s;}  
/* RIPPLE */
.ripple{width:0;height:0;border-radius:50%;background-color:rgba(35,153,71,0.4);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;opacity:1;}
.rippleBtn{-webkit-animation:rippleDrop .5s linear;animation:rippleDrop .5s linear;}
@-webkit-keyframes rippleDrop {
    100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}
}
@keyframes rippleDrop{
    100%{-webkit-transform:scale(2);transform:scale(2);opacity:0;}
}
/* 연혁 */
.company .section-2 .container {overflow:hidden;}
.swiper-container-wrapper--timeline {border-radius:30px; overflow:hidden;}
.swiper-container--timeline {padding:40px;}
.swiper-container-wrapper--timeline .swiper-slide {
    position: relative;
    display: flex;
    flex-wrap:nowrap;
    min-height:160px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: #fff;
    border:1px solid rgba(0,0,0,0.1);
    /* box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.2); */
    z-index: 10;
    overflow:hidden;
} 
.swiper-container-wrapper--timeline .swiper-slide .img-area {width:50%;}
.swiper-container-wrapper--timeline .swiper-slide .text-area {width:50%; text-align:left; padding:0 40px;}
.swiper-container-wrapper--timeline .swiper-slide .title{display:block;color:#080c05;font-size:24px;opacity:0;font-weight:400;transition:0.3s ease 0.3s;word-break:keep-all; line-height:1.2;}
.swiper-container-wrapper--timeline .swiper-slide-active .title{opacity:1;}
.swiper-container-wrapper--timeline .swiper-slide .text{display:block;margin-top:16px;font-size:18px;color:#626262;transition:0.5s ease 0.5s;}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar {
    position: relative;
    margin-bottom: 0;
    background-color: transparent;
    height: 4px;
    border-bottom: 1px solid #888;
    width: 90%;
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar-fill {
    background-color:#239947;
    height: 3px;
    top: 2px;
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar:before {
    position: absolute;
    top: 2px;
    left: -100%;
    width: 100%;
    height: 3px;
    background-color:#239947;
    content: "";
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar:after {
    position: absolute;
    top: 3px;
    right: -100%;
    width: 100%;
    height: 1px;
    background-color: #888;
    content: "";
}
.swiper-container-wrapper--timeline .swiper-pagination-custom {
    position: relative;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    line-height: 1.66;
    bottom: 0;
    z-index: 11;
    width: 90%;
    justify-content: space-between;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: block;
    font-family: "Pretendard";
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active {color:#239947}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title {
    position: absolute;
    font-weight: 400;
    right: 0;
    transform: translateX(50%);
    transition: 0.2s all ease-in-out;
    transition-delay: 0s;
    cursor: pointer;
    z-index: 1;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title:after {
    position: absolute;
    top: calc(100% + 19px);
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    width: 12px;
    height: 12px;
    background: #239947;
    border-radius: 2rem;
    content: "";
    transition: 0.2s all ease-in-out;
    transition-delay: 0s;
    z-index: 1;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title {
    font-weight: 400;
    transition-delay: 0.4s;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:before {
    content:"";
    position:absolute;
    top: calc(100% + 19px);
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius:50%;
    transition-delay: 0.4s;
    z-index: 10;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:after {
    background-color: #239947;
    width: 24px;
    height: 24px;
    transition-delay: 0.4s;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title {
    color: #888;
    font-size: 16px;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title:after {
    background: #888;
}

/* 보유 인증서 */
#certificate .row {display:flex; align-items:center; justify-content:center; text-align:center;}
#certificate .row .col-md-4 {padding:0 40px;}
#certificate .row .desc {display:flex; align-items:center; justify-content:center; flex-direction:column; margin-top:24px}
#certificate .row .desc h5 {margin-bottom:8px;}
#certificate .row .desc p {margin-bottom:0;}
#certificate .frame img{border:solid 2px;border-bottom-color:#ffe;border-left-color:#eed;border-right-color:#eed;border-top-color:#ccb;max-height:100%;max-width:100%;}
#certificate .frame{background-color:#ddc;border:solid 5vmin #eee;border-bottom-color:#fff;border-left-color:#eee;border-radius:2px;border-right-color:#eee;border-top-color:#ddd;box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset,0 5px 10px 5px rgba(0,0,0,.25);box-sizing:border-box;display:inline-block;margin:0;height:400px;padding:30px;position:relative;text-align:center;}
#certificate .frame:before{border-radius:2px;bottom:-2vmin;box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;content:"";left:-2vmin;position:absolute;right:-2vmin;top:-2vmin;}
#certificate .frame:after{border-radius:2px;bottom:-2.5vmin;box-shadow:0 2px 5px 0 rgba(0,0,0,.25);content:"";left:-2.5vmin;position:absolute;right:-2.5vmin;top:-2.5vmin;}

/* 조직도 */
.section-4 .container > ul {display:flex; flex-direction:column; align-items:center; justify-content:center;}
.section-4 .container > ul h3,
.section-4 .container > ul h4,
.section-4 .container > ul h5, 
.section-4 .container > ul h6 {margin-bottom:0;}
.section-4 .container > ul h3 {line-height:1}
.section-4 .container > ul .font-eng {display:block; font-size:13px; color:#acb8cc;}
.section-4 .container > ul > li {position:relative;}
.section-4 .container > ul > li:nth-child(2) {width:100%; margin-top:26px; padding-top:24px;}
.section-4 .container > ul > li:nth-child(2)::before {content:""; position:absolute; top:24px; left:130px; right:130px; height:1px; background-color:#239947;}
.section-4 .container > ul > li:nth-child(1) {position:relative; width:180px; height:180px; border-radius:50%; padding:20px; background: linear-gradient(to right, #97c74e 0%, #239947 100%); -webkit-box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.2) !important;}
.section-4 .container > ul > li > div {position:relative; display:flex; flex-direction:column; width:100%; height:100%; border-radius:50%; align-items:center; justify-content:center; text-align:center; 
    background-color:  #eef3f7;; -webkit-box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.2) !important;
}
.section-4 .container > ul > li > div:after{content:"";position:absolute;left:50%;top:calc(100% + 16px);width:1px;height:56px;background-color:#239947;}
.section-4 .container > ul > li > ul {display:flex; width:100%; align-items:flex-start; justify-content:space-between; position:relative; margin-top:80px;}
.section-4 .container > ul > li > ul > li {position:relative; width:20%; height:100%; padding:8px; background-color:#FFF; border-radius:30px; box-shadow: 0px 0px 50px rgba(83, 88, 93, 0.1);}
.section-4 .container > ul > li > ul > li:before {content:""; position:absolute; left:50%; top:-80px; width:1px; height:40px; background-color:#239947;}
.section-4 .container > ul > li > ul > li:after {content:""; position:absolute; left:calc(50% - 3px); top:-84px; width:8px; height:8px; border-radius:50%; background-color:#239947;}
.section-4 .container > ul > li > ul > li h5 {display:inline-block; margin-left:8px; vertical-align:middle; font-size:18px;}
.section-4 .container > ul > li > ul > li > div {position:absolute; top:-40px; left:24px; width:calc(100% - 48px); padding:20px; background-color:#eef3f7; border-radius:30px; -webkit-box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.2) !important; box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.2) !important;}
.section-4 .container > ul > li > ul > li > ul {padding:100px 20px 20px;}
.section-4 .container > ul > li > ul > li > ul > li + li {margin-top:12px;padding-top:12px;border-top:1px dashed #d5dae0}
.section-4 .container .icon-area {display:inline-block; vertical-align:middle;}
.section-4 .container .icon-area i {font-size:24px; color:#239947}

/* 고객문의 */
.customer .sub-visual {position:relative; width:100%; height:600px; overflow:hidden; background-color:#000;}
.customer .sub-visual .visual-img {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/bg/customer-visual.gif) no-repeat 100% 0; background-size:cover;}
.customer .sub-visual .visual-title {position:relative;width:100%;height:100%;padding:0 80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;color:#fff;}
.customer .txt_wrap{width:50%;padding:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.customer #contactForm .btn-area input[type=checkbox]{display:none;}
.customer #contactForm .btn-area{position:relative;display:flex;align-items:center;}
.customer #contactForm .btn-area .btn-reset{position:absolute;right:0;display:inline-block;font-size:16px;color:#080c05;transition:0.2s;}
.customer #contactForm .btn-area .btn-reset:hover{text-decoration:underline;}
.customer #contactForm .btn-area .btn-text{display:inline-block;font-size:16px;color:#080c05;transition:0.2s;margin:-4px 8px 0;}
.customer .checkbox{width:25px;height:25px;border-radius:50%;border:2px solid #b7bec5;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:3px;transition:0.3s all;flex-shrink:0;}
.customer .checkbox svg{width:20px;height:20px;}
.customer .check-input:checked + .checkbox{background:#239947;border:2px solid #239947;}
.customer .check-input:checked + .checkbox svg path{stroke-dashoffset:500;stroke-dasharray:500;stroke:#fff;stroke-width:3;animation:check 4s forwards;}
.customer .checkbox::before{content:"";position:absolute;border-radius:50%;transform:scale(0);display:block;width:60px;height:60px;background:#fff;z-index:-1;}
.customer .check-input:checked + .checkbox::before{animation:ripple 0.3s;}
@keyframes check{
    to{stroke-dashoffset:0;}
}
@keyframes ripple {
    to{transform:scale(1);}
}

/* 사업분야 */
.business .sub-visual {position:relative; width:100%; height:600px; overflow:hidden; background-color:#000;}
.business .sub-visual .visual-img {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/bg/business-visual.jpg) no-repeat 100% 0; background-size:cover; opacity:0.4;}
.business .sub-visual .visual-title {position:relative;width:100%;height:100%;padding:0 80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;color:#fff;}
.business .ico-area {width:50px; height:50px;}

/* 제품소개 */
.product .sub-visual {position:relative; width:100%; height:600px; overflow:hidden; background-color:#000;}
.product .sub-visual .visual-img.product-1 {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/product/product-visual-1.gif) no-repeat 100% 0; background-size:cover; opacity:0.7;}
.product .sub-visual .visual-img.product-2 {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/product/product-visual-2.jpg) no-repeat 100% 0; background-size:cover; opacity:0.3;}
.product .sub-visual .visual-img.product-3 {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/product/product-visual-3.png) no-repeat 100% 0; background-size:cover; opacity:0.3;}
.product .sub-visual .visual-title {position:relative;width:100%;height:100%;padding:0 80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;color:#fff;}
.product .product-swiper {padding-bottom:36px;}
.product .product-swiper .card {min-height:448px;border:0 !important;background-color:#239947;}
.product .product-swiper .swiper-horizontal > .swiper-pagination-bullets, 
.product .product-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom:0 !important}
.product.service .section-2 .row:nth-child(2) .col-md-5 {padding-right:80px !important;}
.product.service .section-2 .row:nth-child(3) .col-md-5 {padding-left:80px !important;}
.product .masonry-grid span {position:absolute; right:24px; bottom:24px;}
.product .masonry-grid .card {overflow:hidden;}
.product .masonry-grid .card .card-body {padding:0; overflow:hidden;}
.product .masonry-grid .card .card-body img {width:100%;}
.product .masonry-grid .card .card-body:hover img {transform: scale(1.2); transition:transform 0.5s ease-in-out;}
.product [class*=" ai-"], [class^=ai-] {font-size:20px;}

/* 2025.07.01 다국어 선택 추가 */
/* dropdown Type */
/* .global.dropdown{position:absolute;top:20px;right:180px}
.global.dropdown button{background-color:rgba(0,0,0,0.8);min-width:130px;width:max-content;height:40px;border-radius:100px;color:white;padding:10px 16px;font-size:16px;border:none;cursor:pointer;justify-content:space-evenly;}
.global.dropdown button .img{margin:0 12px 0 0;}
.global.dropdown button .img,.global.dropdown-content .img{display:inline-block;width:28px;height:28px;overflow:hidden;border-radius:50%;}
.global.dropdown button,.global.dropdown .dropdown-content .dropdown-item{display:flex;align-items:center;font-size:14px;font-weight:500;}
.global.dropdown .arrow-down{width:0;height:0;display:inline-block;vertical-align:middle;border-style:solid;border-width:4px 4px 0 4px;border-color:#fff transparent transparent transparent;margin:0 0 0 16px;}
.global.dropdown button:hover{cursor:pointer;background-color:rgba(0,0,0,1);}
.global.dropdown .dropdown-content{display:none;position:absolute;margin:1px 0 0 0;padding:8px 0;background-color:#f5f5f5;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;border-radius:5px;}
.global.dropdown .dropdown-content .dropdown-item{color:black;padding:4px 16px;text-decoration:none;justify-content:flex-start;}
.global.dropdown .dropdown-content .dropdown-item .img{margin:0 16px 0px 0;max-width:32px;border-radius:50%;overflow:hidden;}
.global.dropdown .dropdown-content .dropdown-item:hover{background-color:#f1f1f1;cursor:pointer;color:#239947;border-radius:5px;}
.global.dropdown:focus-within .dropdown-content{display:block;}
@keyframes slideIn {
    from{opacity:0;transform:translateY(-10px);}
    to{opacity:1;transform:translateY(0);}
}
.global.dropdown .dropdown-content{animation:slideIn 0.3s ease-out;}
::-webkit-scrollbar{width:8px;height:10px;}
::-webkit-scrollbar-thumb{border-radius:8px;background:#c2c9d2;}
header.main .navbar.navbar-stuck .global.dropdown {top:14px}
header.main .navbar.navbar-stuck .global {margin-right:20px;}
header.main .navbar.navbar-stuck .global a {display:inline-block; width:45px; height:40px; color:#fff; font-size:16px;}
header.main .navbar.navbar-stuck .global.dropdown {top:14px} */

/* button type */
header.main .navbar .global {position:absolute; top:24px; right:140px;}
/* header.main .navbar .global a {display:inline-block; width:45px; height:40px; color:#fff; font-size:15px; line-height:40px; text-align:center;} */
header.main .navbar .global a {display:inline-block; width:60px; height:32px; color:#fff; font-size:15px; line-height:30px; text-align:center; border-radius:40px; background-color:transparent;}
header.main .navbar .global a.active {color:#080c05; background-color:#fff;}
/* header.main .navbar .global a + a:before {content:""; display:inline-block; width:1px; height:12px; margin:-2px 10px 0 -10px; vertical-align:middle; background-color:rgba(255,255,255,0.6);} */
header.main .navbar.navbar-stuck .global {top:20px;}
header.main .navbar.navbar-stuck .global a {color:#080c05;}
header.main .navbar.navbar-stuck .global a.active {color:#fff; background-color:#080c05;}
/* header.main .navbar.navbar-stuck .global a + a:before {background-color:rgba(0,0,0,0.6);} */

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1510px) { 
    header .navbar .container-fluid {padding:0 20px;}
    footer {padding:20px 80px 80px 20px;}
    .quick_wrap {right:20px;}
    .btn-scroll-top {right:20px;}    
} /* max 1510 */

@media screen and (max-width:1200px) { 
    section {padding:40px 0;}
    .container {padding:0;}
    header .navbar .navbar-brand {width:160px;}
    .navbar.navbar-stuck .navbar-brand {width:140px;}
    header .navbar .our-product .dropdown-menu {background-color:#080c05;}
    header .navbar .our-product .dropdown-menu .dropdown-item:hover {color:#fff;}
    .ctt_admin{right:30px;top:120px;}
    #ctt_con .info-box ul li {width:50%; white-space:normal;}
    .main_visual .main-video {width:auto; height:100%;}
    .main-section-1 .swiper {margin-top:0;}
    .company .sub-visual {height:400px;}
    .business .sub-visual {height:400px;}
    .customer .sub-visual {height:400px;}
    .product .sub-visual {height:400px;}
    #certificate .frame {max-width:300px; height:300px; padding:20px;}
    #certificate .d-flex.flex-column {align-items:center;}
    .product.service .section-1 .col-md-7 {padding-left: 40px;} 
} /* max 1200 */

@media screen and (max-width: 1024px) {    
    h1, .h1 {font-size:32px;}  
    h2, .h2 {font-size:28px;}  
    h3, .h3 {font-size:24px;}  
    h4, .h4 {font-size:20px;}  
    h5, .h5 {font-size:18px;}  
    h6, .h6 {font-size:16px;}  
    .main-video.pc-only {display:none !important;}
    .main-video.mobile-only {display:block !important;}
    .scroll-down-btn{display:none;}
    .contacts .map {height:400px;}
    .projects .nav-tabs.justify-content-center .nav-item {margin:4px !important}
    .navbar-expand-lg .navbar-collapse{padding:0 16px;}
    .navbar-expand-lg .navbar-nav .nav-link{white-space:nowrap;padding:0 8px;}    
    #bo_cate ul{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;align-items:center;}
    .btn-home {top:16px; right:16px; width:40px; height:40px;}
    header.main .navbar .navbar-brand {width:120px;height:60px;}
    header.main .navbar.navbar-stuck .navbar-brand {width:120px;height:60px;}
    .main-section-1 {position:relative;}
    .main-section-1 .container {display:flex; flex-direction:column; width:100%;} 
    .main-section-1 .row .col-md-6 {width:100%;}
    /* .main-section-1 .img-area {text-align:center;} */
    .main-section-1 .text-area {padding-left:0; padding-top:24px;}
    .main-section-1 .container > .h1 {order:1;}
    .main-section-1 .container > p {order:2}
    .main-section-1 .container > .swiper-thumbnails {order:3; width:100%;margin:0 auto;}
    .main-section-1 .container > .swiper {order:4;width:100%;left:0;margin-top:16px;}
    .main-section-2 .col-md-3 {width:50%;}
    .main-section-4 .map_wrap {height:400px;}
    .section-4 .container > ul > li > ul > li {width:24%;}
    .section-4 .container > ul > li:nth-child(2)::before {left:116px; right:116px;}
    .global.dropdown {top:10px; right:80px;}
    header.main .navbar.navbar-stuck .global.dropdown {top:10px;}
} /* max 1024 */

@media screen and (max-width: 992px) {
    .mobile-only {display:block !important;}
    .pc-only {display:none !important;}
    .container-fluid {position:relative; padding:0 16px;}
    .container-fluid .container {padding:0;}
    .row {width:100%; margin:0 auto;}   
    .video-controls{position:absolute;z-index:10;bottom:24px;right:16px;} 
    .lt_wr{width:33.33%;padding:8px;}  
    .navbar-expand-lg .navbar-nav .nav-link{padding:4px 8px;}
    #wrapper{padding:40px 0 20px;}
    #bo_list{margin-bottom:0;}
    #bo_list .pg_wrap{margin-top:20px;transform:scale(0.8);}
    .bo-bottom-wrap {margin-bottom:0;}
    .bo-bottom-wrap .board-btn.list-bottom-left {display:none;}
    .input-group {max-width:100%;}
    .page-tabs {top:60px;}
    #certificate .row .col-md-4 {padding:0;}
} /* max 992 */

@media screen and (max-width: 768px) {   
    .fs-base {font-size:14px !important;}
    .login-wrap{flex-direction:column;flex-wrap:wrap;justify-content:flex-start;}
    .login-wrap .left-area{width:100%;max-height:30%; padding:24px;}
    .login-wrap .right-area{width:100%;max-height:70%; padding:24px;}
    .login-wrap .logo {width:160px;}
    .login-wrap h3{margin-top:20px;font-size:20px;}
    .login-wrap ul.mt-4 {margin-top:0 !important}
    .login-wrap .list-group-item {padding:4px;}
    .login-wrap h1 {font-size:28px;}
    .login-wrap #login_fs {padding:0;};
    .container {padding:0;}
    .ctt_admin{right:20px;top:80px;}
    #ctt header h2 {font-size:20px;}
    footer {padding:20px;}
    footer .row.d-flex {position:relative; flex-direction:column;justify-content:flex-start;align-items:flex-start;}
    footer .row.d-flex [class^="col-"] {width:100%;}
    footer .row.d-flex [class^="col-"]:last-child {padding-right:0;}
    footer .row.d-flex .col-4 {margin-bottom:24px; padding:0;}
    footer a.foot-logo img{max-width:120px;}
    footer .copy {position:absolute; left:0; bottom:0;}
    footer .sns-area {position:absolute;margin:0;top:0;right:0;}
    footer .row.d-flex [class^="col-"]:last-child .dropdown {position:absolute;top:80px;right:0;}
    footer .foot-menu {padding-right:80px;}
    .company .sub-visual {height:300px;}
    .business .sub-visual {height:300px;}
    .customer .sub-visual  {height:300px;}
    .product .sub-visual {height:300px;}
    .company .about-1 .col-md-6 {width:100%;}
    .company .about-1 .col-md-6.text-area {padding:24px 0 0;}
    .company .about-2 .col-md-6.order-lg-1 {padding-top:40px;}
    .business section.bg-gray .col-md-4 + .col-md-4 {margin-top:20px;}
    #certificate .title-area {margin-bottom:20px;}
    #certificate .row .col-md-4{padding:20px 40px;width:50%;}
    .section-4 .container > ul > li:nth-child(2)::before {left:24.5%; right:24.5%}
    .section-4 .container > ul > li > ul {flex-wrap:wrap; padding:20px;margin-top:16px;}
    .section-4 .container > ul > li > ul > li {width:46%; margin:36px 0;}
    .swiper-container--timeline {padding:24px 0; margin-top:0px;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom {width:96%;}
    .swiper-container-wrapper--timeline .swiper-slide {flex-direction:column; flex-wrap:wrap;}
    .swiper-container-wrapper--timeline .swiper-slide .img-area {width:100%;}
    .swiper-container-wrapper--timeline .swiper-slide .text-area {width:100%; padding:40px 24px;}
    .swiper-container-wrapper--timeline .swiper-slide .text-area .date {color:#acb8cc; font-family: "Pretendard";}
    .company .about-2 {margin-top:40px;padding:40px 0;}
    .company .section-2 .title-area {padding:0 20px; margin-bottom:0;}
    .company .section-4 {padding-bottom:20px;}
    .section-4 .container > ul > li > ul > li:before {top:-70px;}
    .swiper-container-wrapper--timeline .swiper-slide .title {font-size:20px;}
    .swiper-container-wrapper--timeline .swiper-slide .text {font-size:16px;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title {font-size:12px; line-height:1.2; color:transparent;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title {font-size:12px; line-height:1.2; color:transparent;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title:after {top:calc(100% + 20px);width:8px;height:8px;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:before {top:calc(100% + 20px);width:8px;height:8px;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:after {top:calc(100% + 20px); width:16px;height:16px;}
    .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title {margin-top:10px; font-size:16px; color:#239947 !important; white-space:nowrap;}
    .product.service .row [class^="col-"] {width:100%; padding:0 !important; text-align:center !important; margin:8px auto}
    .product.service .row [class^="col-"] img {margin:16px auto !important}
    .product.service .row [class^="col-"] p {margin:16px auto !important; max-width:90%; font-size:14px;}
    .product.service .row [class^="col-"]:nth-child(2) {margin-top:24px;}
    .product.service .section-3 .h2.mb-5 {margin-bottom:24px !important;}
    .product.service .section-2 .row:nth-child(2) .col-md-5 {padding-right: 0 !important;}
    .product.service .section-2 .list-unstyled {width:100%; margin:8px auto}
    .parallax {margin:16px auto;}
    .masonry-grid-item + .masonry-grid-item {margin-top:16px;}
    .product .col-md-8 {margin-top:24px;}
    .product [class^="col-"] + [class^="col-"] {margin-top:24px;}
    .product #transportationFacilities .col {width:calc(50% - 8px); margin:4px;}
    .product #storageFacilities.section-1 .col-md-5 {width:100%; text-align:center;}
    .product #storageFacilities.section-1 .col-md-7 {width:100%;}
    .product #transportationFacilities .order-lg-1 {margin-top:16px;}
    .product #transportationFacilities .bg-gray .col-md-8 .card.zoom-effect {min-height:220px;}
    .product .product-swiper .card {min-height:260px;}
    .product .bg-light.text-dark.rounded-pill.py-3.px-4 {padding:8px 16px !important; text-align:center;}
    #sitemap .nav > li > ul {margin-top:8px;}
    #sitemap .nav > li {margin:20px 0;}
    header.main .navbar .global{position:absolute;top:15px;right:80px;}
    header.main .navbar.navbar-stuck .global a {font-size:14px;}
    header.main .navbar.navbar-stuck .global {top:15px;}
    header.main .navbar .global a {font-size:13px;}
} /* 768 */

@media screen and (max-width: 600px) {
    .container {padding:0 20px;}
    [class^="col"] {padding:0;}
    .mb-5{margin-bottom:1rem !important;}
    .pt-2{padding-top:0 !important;}
    .pb-2{padding-bottom:0 !important;}
    .login-wrap .left-area{max-height:20%;}
    .login-wrap .right-area{max-height:80%;}
    .login-wrap .logo {width:140px; margin-top:16px}
    .login-wrap h3{margin-top:16px;font-size:18px;}
    .login-wrap .list-group {display: none;}
    
    body {font-size:14px;}
    .fs-24 {font-size:20px !important;}
    .g-4,.gy-4{--ar-gutter-y:0 !important;}
    section p{word-break:keep-all;margin:0 auto;}
    .lt_wr{width:50%;padding:8px;}
    .pic_lt li a{font-size:14px;margin-top:8px;}
    h1,.h1{font-size:24px !important;}
    h2,.h2{font-size:24px !important;}
    h3,.h3{font-size:24px !important;}
    h4,.h4{font-size:20px !important;}
    h5,.h5{font-size:18px !important;}
    h6,.h6{font-size:16px !important;}
    p {font-size:14px !important;}
    .fs-lg {font-size:16px !important;}
    #sch_res_detail{display:flex;flex-direction:column;width:100%;}
    #sch_res_detail select {width:100%; margin-bottom:8px;}
    #sch_res_board a{display:block;padding:4px 8px;}
    #ctt_con .info-box ul li{width:100%;white-space:normal;font-size:15px;word-break:keep-all;}
    #container_title:after {display:none;}
    #container_title {margin:40px auto 0;}
    #ctt{margin:8px 0;}
    .side-quick-menu {bottom:20%;}
    .side-quick-menu a {width:160px; padding:8px; right:calc(-100% + 46px);}    
    #contactForm .col-lg-12 {padding:0;}
    #contactForm .col-lg-12 + .col-lg-12 {margin-top:8px}
    .btn-send {padding:16px 24px !important; width:100%;}
    #modalContactForm h6,
    #modalContactForm p {text-align:center;}
    #container_title + .sub-text{font-size:14px;margin-top:0;width:80%;margin:8px auto;}

    header .navbar .btn-sitemap [class^=ai-] {font-size:30px;}
    .offcanvas.sitemap .offcanvas-header .inner {height:60px; align-items:center;}
    .offcanvas.sitemap .offcanvas-body {padding:0;}
    .offcanvas.sitemap .logo {width:140px;}
    .offcanvas.sitemap .offcanvas-header .btn-close {margin-left:16px; width:20px; height:20px; background-size:20px;}
    .offcanvas.sitemap .offcanvas-header .right-area{align-items:center;}
    .offcanvas.sitemap .offcanvas-body .gnb-list > li > ul{margin-top:8px;}
    .offcanvas.sitemap .offcanvas-body .gnb-list > li {width:100%; padding-top:24px;}
    .offcanvas.sitemap .offcanvas-body .gnb-img-box .img1 {width:80px;}
    .offcanvas.sitemap .offcanvas-body .gnb-img-box .img3 {width:140px;}
    header.main .fixed-top {padding:0; margin:0;}
    .main-section-1 .swiper-thumbnails li:after {font-size:12px; letter-spacing:-0.5px;}
    .main-section-1 .swiper-thumbnails li {max-width:calc(33.33% - 4px); margin:2px;}
    .main-section-2 .row.mt-5 {margin-top:24px !important}
    .main-section-2 .col-md-3 {width:100%;}
    footer .row.d-flex [class^="col-"]:last-child .dropdown {width:160px;}
    footer .sns-area a {margin:2px;}
    .copy-notification {position:absolute;top:40px;right:0;}
    footer .business-number {display:block;}
    footer .business-number:before {display:none !important;}
    footer .row.d-flex .col-4 {margin-bottom:40px; padding-bottom:40px;}
    footer .foot-menu{padding-right:0;position:absolute;left:0;bottom:40px;}
    .main-section-4 .map_wrap{height:300px;}
    .main-section-1 .container > .swiper-thumbnails {margin:0 -8px; width:calc(100% + 16px);}
    .main-section-1 .row .col-md-6 {padding:0;}
    .company .about-2 {padding:0 0 40px}
    .company .about-2 .icon {margin:40px auto 16px;}
    #certificate .row .col-md-4 {width:100%;}
    #certificate .row .col-md-4 + .col-md-4 {margin-top:24px;}
    #certificate .row .desc h5{margin-bottom:0;}
    .section-4 .container > ul > li:nth-child(2) {padding-top:0;}
    .section-4 .container > ul > li > ul{flex-wrap:wrap;padding:16px;margin-top:0;}
    .section-4 .container > ul > li > ul > li {width:100%;}
    .section-4 .container > ul > li:nth-child(2)::before {display:none;}    
    .company .about-1 .col-md-6.img-area .h3 {font-size:20px !important;}
    .sub-visual .visual-title {padding:0 20px !important;}
    .product #storageFacilities.section-1 .col-md-7 .col {width:calc(50% - 8px);margin:4px;}
    .global.dropdown .language {display:none;}
    .global.dropdown button {min-width:auto;}
    .global.dropdown button .img {margin: 0;}
    .global.dropdown .arrow-down {display: none;}
    .global.dropdown button {padding:8px;}
    .global.dropdown .dropdown-content {min-width:auto; padding:8px;}
    .global.dropdown .dropdown-content .dropdown-item .img {margin: 0; width:28px;}
    .global.dropdown .dropdown-content .dropdown-item {padding:4px;}
} /* max 600 */

@media screen and (max-width: 450px) {  
    .lt_wr{width:50%;padding:8px;}
    .form-control-lg {padding:10px 16px;font-size:14px;border-radius:12px;}  
    .login-wrap .login-copy {margin: 20px auto !important;}
    .customer #contactForm .btn-area .btn-reset {display:none;}

} /* max 450 */