/* reset */
html {height:100%;}
body {-webkit-font-smoothing: antialiased;}
html, body {margin:0; padding:0; font-family: 'Montserrat', "Pretendard Variable", sans-serif}
ul, ol, li {margin:0; padding:0; list-style:none;}
a {text-decoration: none;}
div, li, ul, ol, a {box-sizing:border-box;}

.wrap {overflow:hidden;}

.header {height:80px; width:100%; position:fixed; z-index:100;transition: all 0.3s; }
.header.absolute {transform: translateY(-100%); transition: all 0.3s;}

.header .logo {position:absolute; top:0; left:100px; top:50%; width:30.6%; transform: translateY(-50%);}
.header .logo img {max-height:42px; max-width:100%;}
.logo-image-2, .logo-image-3 {display:none;}
.top-nav {display:flex; justify-content:right;}
.top-nav > ul {display:flex; align-items: center;}
.top-nav > ul > li {padding:0 18px; height:80px; position:relative;}
.top-nav > ul > li > a {display:inline-block; line-height:80px; color:#fff; font-size:18px; font-weight:600;}
.top-nav > ul > li > ul {display:none; z-index:10; left: 50%; transform: translateX(-50%); background-color:#fff; position:absolute; box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); border-radius: 0 0 10px 10px;}
.top-nav > ul > li > ul a {white-space:nowrap;padding: 8px 20px 8px 20px; font-size:14px; font-weight:600; color:#828282; display:block; }
.top-nav > ul > li > a:hover {color:rgba(255,255,255,.6);}
.top-nav > ul > li:hover ul {display:block;}
.btn-menu,
.btn-menu-open {display:none;}

.header.type2 {background-color:#f6f6f7;}
.header.type2 .logo-image-1 {display:none;}
.header.type2 .logo-image-3 {display:block;}
.header.type2 .top-nav > ul > li > a {color:#232323;}
.header.type2 .top-nav > ul > li > a:hover {color:rgba(0,0,0,.6);}

@media (max-width:1400px) {
    .header .logo {left:20px}
}

@media (max-width:991px) {
    .header {height:72px; background:#fff !important; box-shadow: 0 20px 15px 0 rgba(23, 23, 23, .05);}
    .logo-image-1, .logo-image-3 {display:none;}
    .logo-image-2 {display:block; max-height:36px;}
    .btn-menu { position:absolute; right:15px; top:50%; margin-top:-16px; font-size:0; border:0; display:inline-block; width:32px; height:32px; background:url(../img5/bar.svg) no-repeat; }
    .top-nav {display:none; position:absolute; width:100%; z-index:100; top:72px; background:#fff; box-shadow: 0 20px 15px 0 rgba(23, 23, 23, .05); }
    .top-nav a {color:#232323 !important}
    .top-nav > ul {display:block; padding:15px 15px 25px;}
    .top-nav > ul > li {padding:0; height:auto; position:relative;}
    .top-nav > ul > li > a {padding:9px 15px; font-size:18px; line-height:30px; }
    .top-nav > ul > li > ul {padding:0 15px; position:static; width:100%; transform: none; box-shadow: none; background-color: transparent;}
    .top-nav > ul > li:hover ul {display:none;}
    .top-nav > ul > li > ul.open {display:block !important; }
    .top-nav > ul > li > ul a {font-size:14px; margin:15px 0 7px 0; padding: 3px 15px 3px;}
    .btn-menu-open {display:inline-block; position:absolute; top:0; right:0; border:0; font-size:0; width:48px; height:48px; background:url(../img5/arrow-down.svg) no-repeat center; background-size:20px;}
    .btn-menu.open {background-image: url(../img5/close.svg);}
    .btn-menu.open + .top-nav {display:block;}
}


.main-link {background:#fff;}
.main-link ul {display:flex; width:100%; }
.main-link ul li + li {border-left:1px solid #e4e4e4;}
.main-link ul li {flex-basis:25%;;}
.main-link ul li > a { display:block; height:100%; padding:3rem; overflow:hidden; position:relative; }
.main-link ul li > a:before {content:""; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%;  z-index:0; background:url(../img5/013.png) no-repeat; background-size:cover; background-position:center; transform:scale(1);  transition: all .4s;}
.main-link ul li > a:after {content:""; margin-top:20px; display:block; width:30px; height:30px; background:url(../img5/arrow.svg) no-repeat; position:relative;}
.main-link ul li > a:hover span,
.main-link ul li > a:hover strong {color:#fff;}
.main-link ul li > a:hover:before {display:block; opacity:1; transform:scale(1.3); }
.main-link ul li > a:hover:after {background-image:url(../img5/arrow-w.svg);}

.main-link ul strong {color:#e6994e; font-size:25px; display:block; position:relative;} 
.main-link ul span {margin-top:20px; color:#232323; font-size:15px; display:block; font-weight:bold; position:relative;}

@media (max-width: 1199px) {
    .main-link ul {flex-wrap:wrap; }
    .main-link ul li {flex-basis:50%; }
    .main-link ul li:nth-child(1),
    .main-link ul li:nth-child(2) {border-bottom:1px solid #e4e4e4;}
    .main-link ul li:nth-child(3) {border-left:0;}
}

@media (max-width: 575px) {
    .main-link ul li {flex-basis:100%; border-left:0 !important; border-bottom:0 !important;}
    .main-link ul li+li {border-top:1px solid #e4e4e4;}
}


.main-youtube {padding:160px 0; background-image:url(../img5/015.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-youtube a {display:block; margin:0 auto 40px; width:75px; height:75px; border-radius:50%; background:#fff url(../img5/play.svg) no-repeat center; background-size:32px;}
.main-youtube .txt {display:block; color:#fff; text-align:center;}
.main-youtube .txt strong {font-size:28px; font-weight:600; display:block; margin-bottom:45px;}
.main-youtube .txt span {font-size:14px;letter-spacing: 0.2em;}

@media (max-width: 1199px) {
    .main-youtube {padding: 120px 0px; background-attachment:scroll;}
}
@media (max-width: 767px) {
    .main-youtube { padding: 80px 0px; }
    .main-youtube .txt strong {font-size:18px; margin-bottom:35px;}
}
@media screen and (max-width: 575px) {
    .main-youtube  {  padding: 50px 0px; }
}

.main-more {display:flex; }
.main-more .img-wrap {flex:1; background:url(../img5/011.png) no-repeat; background-size:cover; background-position:center;}
.main-more .img-wrap img {width:100%;}
.main-more .card {background-color:#232323; padding:6% 9%;}
.main-more .card .txt-hd {color:#e6994e; font-size:15px; line-height:30px;}
.main-more .card .txt-tit {margin-top:30px; color:#fff; font-size:28px; font-weight:bold; line-height:30px;}
.main-more .card .txt-content {margin-top:30px; color:#fff; font-size:18px; font-weight:bold; line-height:38px;}
.main-more .card .more {margin-top:40px; }
.main-more .card .more a {padding-bottom:2px; color:#fff; font-size:14px; border-bottom:2px solid #fff;}
.main-more .card .more a:hover {opacity:0.7;}
.main-more .img-wrap {flex-basis: 58%; flex-shrink:0; }

@media (max-width: 1199px) {
    .main-more .img-wrap {flex-basis: 50%;} 
    .main-more .card {flex-basis: 50%; flex-shrink:0; padding:6%; }
}

@media (max-width: 991px) {
    .main-more {display:block; }
    .main-more .img-wrap {height:350px;}
    .main-more .card {padding:10%; }
    .main-more .card .txt-tit {font-size:24px;}
    .main-more .card .txt-content {font-size:16px; line-height:22px;}
}

footer {padding:100px 4% 70px; background-color:#181818; font-size:13px; color:#fff;}
.footer-text {margin-top:50px; display:flex; width:100%; justify-content:space-between;}
.company-info {color:#fff; font-size:12px; max-width:500px;}
.company-info li {display:inline-block; margin-right:10px; line-height:2;}
.copyright {color:#a8a8a8; font-size:12px;}
footer .logo {display:block; max-width:400px;max-height:60px;}
footer .logo img {max-width:100%; max-height:100%;}
@media (max-width: 991px) {
  .footer-text {flex-direction:column-reverse; }
  .company-info {padding-top:40px;}  
  footer .logo {max-width:200px; max-height:30px;}
}

.bx-wrapper {border:0; box-shadow:0; margin-bottom:0;}
.bx-wrapper .bx-pager {bottom:45px;}
.bx-wrapper .bx-pager.bx-default-pager a {width:12px; height:12px; background-color:#fff; opacity: 0.5;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {background-color:#fff; opacity: 1; }
.bx-wrapper .bx-controls-direction a {overflow:hidden; margin-top:5px; background-position:0 !important; background: url(../img5/arrow.svg) no-repeat; z-index:99;}
.bx-wrapper .bx-controls-direction a:hover {background-position:0; opacity:0.5;}
.bx-wrapper .bx-controls-direction a.bx-prev {left:40px; transform: rotate(180deg);} 
.bx-wrapper .bx-controls-direction a.bx-next {right:40px;}
.main-visual {position:relative;}
.slider-item {overflow:hidden;}
.slider .visual-bg {min-height:300px; width:100%; background-repeat:no-repeat; background-position:center; background-size: cover; position:absolute; top:0; left:0;  z-index:0; transform:scale(1.3); transition: transform 5s;}
.slider .txt-area {position:relative; z-index: 1; display:flex; flex-wrap:wrap; height:100%; align-items: center; justify-items: center; color:#fff;}
.slider .v-tit {font-size:70px; font-weight:700; margin-bottom:25px;}
.slider .v-sub {font-size:16px; line-height:23px; margin-bottom:80px; transition-delay:0.2s;}
.slider .btn-detail {font-size:12px; color:#fff; border:1px solid #fff; padding:12px 28px; transition-delay:0.3s;}
.slider .btn-detail:hover {background-color: #fff; color:#000; transition:none;}
.slider .txt-area > .inner {width:100%;}
.slider .txt-area > .inner > * {opacity:0; margin-left:-500px; transition-property: all; transition-duration:0.2s;} 
.slider .txt-area > .inner > .animation {opacity:1; margin-left:100px;}


@media (max-width: 1400px) {
    .slider .txt-area > .inner > .animation {
        margin-left:20px;
    }
}


@media (max-width: 767px) {
    .slider .v-tit {font-size:40px;}
    .bx-wrapper .bx-controls-direction a {display:none;}
}


@media (max-width: 1024px) {
    .slider .visual-bg,
    .slider-item {height:500px !important;}
}