@charset "utf-8"; /* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

/* html{scroll-behavior: smooth;} */


#skipToContent a {z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden} 
#skipToContent a:focus, 
#skipToContent a:active {width:200px; height:50px; background:#21272e; color:var( --color-white); font-size:14px; font-weight:bold; text-align:center; text-decoration:none; line-height:50px} 

.only-desktop-tablet {display:block;} 
.only-desktop {display:block;} 
.only-tablet {display:none;} 
.only-mobile {display:none;} 

body {font-family:var(--body-font-family); font-size:var(--body-font-size); line-height:var(--body-line-height); color:var(--body-color);} 
.contain {padding-left:var(--container-space); padding-right:var(--container-space);} 
.sub-title {font-size:var(--font-size-50); line-height:var(--line-height-sm); color:var(--color-primary);} 
.sub-box {display:flex; align-items:center; justify-content:center; width:300px; height:300px; border-radius:var(--border-radius-30); background-color:var(--color-warning); font-size:var(--font-size-20); color:var(--color-white); text-align:center;} 


/* header */
#header {position: absolute; z-index: 90; left: 0; right: 0; top: 0; transition: .3s;} 
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); z-index:10;} 
.sitelogo a {height:var(--header-height); padding:10px 0;} 
.sitelogo a img {height:100%;} 
#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;} 
#gnb>ul {display:flex; justify-content:center;} 
#gnb>ul>li {position:relative; padding:0 65px;} 
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:var(--header-height); color: var( --color-white); font-size: var(--font-size-20); font-weight:600; line-height:1.3em;} 
#gnb>ul>li>a:hover {color: var(--color-secondary);} 


/* for mobile */
.btn-m-menu {display:block; position:relative; width:30px; height:24px; background: url(../images/common/ham.png) no-repeat 50% 50%/contain;} 
.mobile-navigation {display:block; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:var( --color-white); z-index:102;} 
.mobile-navigation .sitelogo a {padding:10px 16px;} 
.mobile-navigation .nav-menu>ul {border-top:1px solid var( --color-gray);} 
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid var( --color-gray);} 
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:var(--font-size-20); font-weight:700; line-height:1.5em;} 
.mobile-navigation .nav-menu>ul>li.active>a {color:var( --color-white); background:var(--color-primary);} 
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;} 
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;} 
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;} 
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);} 
.mobile-navigation .close {position:absolute; top:25px; right:16px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;} 
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;} 
.mobile-navigation .close:before {transform:rotate(45deg);} 
.mobile-navigation .close:after {transform:rotate(-45deg);} 
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;} 

html.menu-opened {overflow:hidden;} 
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);} 
html.menu-opened .mobile-overlay {display:block;} 


/* layout */
.contain {position:relative; max-width:1780px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;} 
#contArea {max-width:1780px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;} 
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;} 

.primary-color {color: var(--color-primary);} 
.secondary-color {color: var(--color-secondary);} 

/* main */ 
.main-visual {position:relative; overflow:hidden; padding:0 !important;} 
.main-visual .item {position:relative; height:var(--mv-height);} 
.main-visual .item .image {width: 100%; height: 100%; background: url(../images/main/mv1.jpg) no-repeat 50% 50%/cover;} 
.scroll {position:absolute; bottom:70px; left:50%; transform: translateX(-50%); text-align:center; z-index:50; animation:move_up_down 2s linear infinite;} 
@keyframes move_up_down {0%,100% {transform:translateY(0);} 
 50% {transform:translateY(15px);} 
}
.main-visual .cnt {position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%);} 
.main-visual .cnt .tt {margin-bottom:50px; font-weight:700; font-size: var(--font-size-60); line-height: var(--line-height-1); text-align: center; color: var( --color-white)} 
.main-visual .cnt .call-wrap {display:flex; justify-content: center; align-items: center; width:100%; max-width: 700px; margin:0 auto; padding:20px 30px; background-color: var( --color-white); border-radius: var(--border-radius-10);} 
.main-visual .cnt .call-wrap p {position:relative; margin-right:50px; font-weight:600; font-size: var(--font-size-18);} 
.main-visual .cnt .call-wrap p::after {content: ""; position: absolute; top:0; right: -10px; width:6px; height:6px; background-color: var(--color-primary); border-radius: 100%;} 
.main-visual .cnt .call-wrap a {display: flex; justify-content: center; align-items: center; padding:20px 20px; border-radius: var(--border-radius-10); background: linear-gradient(90deg, rgba(152,170,85,1) 0%, rgba(20,114,62,1) 100%);} 
.main-visual .cnt .call-wrap a span {display:inline-block; margin-right:50px; font-weight:600; font-size: var(--font-size-18); color: var(--color-white);} 
.main-visual .cnt .call-wrap i img {display: inline-block; vertical-align: baseline;} 

/* 왼쪽 nav*/
.main-float-nav {position:fixed; top:50%; left: 60px; transform:translateY(-50%); z-index:80;} 
.main-float-nav.off {display:none;}
.main-float-nav ul li {padding:11px 0;} 
.main-float-nav ul li a {display:block; position:relative;} 
.main-float-nav ul li i {display:block; position:relative; width:30px; height:30px; border-radius:100%;} 
.main-float-nav ul li i:after {content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; margin: -3px 0 0 -3px; background:#b3b3b3; border-radius:100%;} 
.main-float-nav ul li span {display:none; position: absolute; top: 50%; left: 40px; transform: translateY(-50%); text-align: center; color: #fff; font-size: var(--font-size-14); font-weight: 600; white-space: nowrap; line-height: 1.714em;} 
.main-float-nav ul li a:hover i,
.main-float-nav ul li.active i {border: 3px solid #899e3a} 
.main-float-nav ul li a:hover span,
.main-float-nav ul li.active span {display:block; color: var(--color-primary);} 
.main-float-nav ul li a:hover i:after,
.main-float-nav ul li.active i:after {background: var(--color-primary);} 
.main-float-nav ul li.nav01 a:hover i,
.main-float-nav ul li.nav01.active i {border: 3px solid #fff} 
.main-float-nav ul li.nav01 a:hover span,
.main-float-nav ul li.nav01.active span {display:block; color: var(--color-white);} 
.main-float-nav ul li.nav01 a:hover i:after,
.main-float-nav ul li.nav01.active i:after {background: var(--color-white);} 

/* section */
.section {padding:var(--sec-padding); background-color: var( --color-white);} 
.section .contain {max-width: 1460px;} 
[data-aos=fade-up] {transform: translate3d(0,100px,0);} 
.swiper .swiper-button-next:after, .swiper-button-prev:after {font-size: 0;} 
.flex-wrap {display:flex;} 

.section .head {margin-bottom:var( --margin-60 ); text-align: center;} 
.section .head .eng {margin-bottom:36px; font-weight:600; font-size: var( --font-size-24); color: var(--color-secondary); line-height:var(--line-height-1);} 

.sec-tit {font-weight:700; font-size: var(--font-size-48); color:var(--color-dark);} 
.sec-tit .underline {position:relative;} 
.sec-tit .underline::before {content: ""; position: absolute; left:0; bottom:4px; width:100%; height:var(--height-16); background-color: var(--color-underline); opacity:20%;} 

.section.area {height: 896px; padding-bottom: 0; background-color: #f7f7f7;} 
.area .contain {height: 100%;} 
.area .flex-wrap {display:flex; align-items: flex-end;} 
.area .flex-wrap .img.map {margin-bottom:9px;} 
.area .flex-wrap .img.city {margin-left:30px; padding-bottom:120px;} 
.area .flex-wrap .img .vertical {display:none;} 

.section.status {height: 880px;} 
.status .slide-wrap {height: 100%; max-height: 460px; overflow:hidden;} 
.status-slide {position:relative; height: 100%; margin: 0 -5%;} 
.status-slide .slider-for {position: absolute; left: 50%; z-index: 10; width: 100%; max-width: 770px; top: 0; transform: translateX(-50%); margin: -30px;} 
.status-slide .slider-for .item {padding: 30px;} 
.status-slide .slider-nav {padding:60px 0; margin:0 -20px;} 
.status-slide .slider-nav .item {padding: 0 20px;} 
.status-slide .video-container {border-radius: 10px;} 
.status-slide .slider-for .video-container {box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.27);} 
.status-slide .slick-arrow {position: absolute; top: 50%; width: 70px; height: 70px; border: 0; border-radius: 100%; background: url("../images/main/arrow-slide.png") 50% 50% no-repeat; background-color: rgba(0,0,0,0.5); overflow: hidden; text-indent: -9999em; line-height: 0; font-size: 0; z-index: 50;} 
.status-slide .slick-arrow:hover {background-color: var(--color-primary);} 
.status-slide .slick-prev {left: -10%; transform: translateY(-50%) rotate(180deg);} 
.status-slide .slick-next {right: -10%; transform: translateY(-50%);} 

.status-slide .thumb { position: relative; padding-bottom: 56.25%;overflow: hidden;  border-radius: 15px;}
.status-slide .slider-for .thumb {box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.27);}
.status-slide .thumb img { position: absolute; top: 50%; left: 0; transition: .4s ease-in-out; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; height: auto !important; max-width: 100%; min-height: 100%; object-fit: cover; } 


/* Dots */
.slick-dotted.slick-slider {margin-bottom: 30px;} 
.slick-dots {position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; opacity:0; height:0;} 
.slick-dots li {position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer;} 
.slick-dots li button {font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;} 
.slick-dots li button:hover,
.slick-dots li button:focus {outline: none;} 
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {opacity: 1;} 
.slick-dots li button:before {font-family: 'slick'; font-size: 35px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} 
.slick-dots li.slick-active button:before {opacity: .75; color: black;} 

.section.status02 {height: auto;} 

.section.emission {height:944px; background-color: #f7f7f7;} 
.emission .emission-list ul {margin:0 -15px;} 
.emission .emission-list ul li {width:20%; padding:0 15px;} 
.emission .emission-list .bubble {margin-bottom:25px;} 
.emission .emission-list .bubble img {filter: drop-shadow(2px 0 10px rgba(0, 0, 0, 0.2));} 
.emission .emission-list ul li:first-child .img {border-top-left-radius: 40px; border-bottom-left-radius: 40px;} 
.emission .emission-list ul li:last-child .img {border-top-right-radius: 40px; border-bottom-right-radius: 40px;} 

.section.companies {height:885px; background-color: #f4f6ee;} 
.companies .input-list {display:flex; margin:0 -10px;} 
.companies .search-area form {margin-bottom:var(--margin-40);} 
.companies .input-list .item {width:calc(100% - 60px); max-width: 235px; margin:0 10px;} 
.companies .input-list .item:nth-child(3) {max-width: 690px;} 
.companies .input-list .item.btn-submit {max-width: 190px;} 
.companies .input {width:100%; height: var(--height-60); padding: 6px 20px; border-radius: 6px;} 
.companies select.input {padding-right: 60px;} 
.companies .search-area .btn-submit .btn-pack.large {width:100%; min-width:unset; height: var(--height-60); border-radius: 5px; line-height: var(--height-60); font-size: var(--font-size-20);} 

.companies .map-wrap {display:flex; height: 100%; max-height: 380px; margin:0 -25px;} 
.companies .map-wrap > div {width:50%; padding:0 25px;} 
.companies .company-list ul {height: 100%;} 
.companies .company-list ul li {height: 33.333%; padding: 35px 40px; border-bottom: 1px solid #ddd; background-color: #fff;} 
.companies .company-list ul li .name {display: inline-block; margin-bottom: 10px; font-weight: 700; font-size: var(--font-size-18); line-height: var(--line-height-133); color: var(--color-dark);} 

.section.introduce {height:880px; background: url(../images/main/bg-introduce.jpg) no-repeat 50% 50%/cover;} 
.introSwiper .info {display:flex; justify-content: center; align-items: center;} 
.intro-slide .info .img {padding:14px;} 
.intro-slide .info .img img {filter: drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.13));} 
.intro-slide .info .txt {width:100%; max-width: 50%; padding-left:40px;} 
.intro-slide .info .txt .year {margin-bottom:var(--margin-40); font-size: var(--font-size-60); color: var(--color-primary);} 
.intro-slide .info .txt .tit {margin-bottom:var( --margin-20); font-weight:600; font-size: var(--font-size-24); line-height: var(--line-height-sm); color: var(--color-dark);} 
.intro-slide .info .txt .desc {font-size: var(--font-size-18); line-height:var(--line-height-md);} 
.intro-slide {position: relative; padding: 0 100px;} 
.introSwiper {padding-bottom:130px;} 
.intro-slide .slide-btn {position:absolute; top:50%; transform:translateY(-50%); border:0; width:34px; height:61px; margin-top: -50px; background:url("../images/main/arrow-introduce.png") no-repeat 50% 50%/contain;} 
.intro-slide .slide-btn.prev {left:0; transform:rotate(180deg) translateY(50%)} 
.intro-slide .slide-btn.next {right:0;} 
.intro-slide .slide-btn.swiper-button-disabled {opacity:.2;} 
.intro-slide .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {position: absolute; left: 0; bottom: 0; background: #fff; height: 16px; border-radius: 0; width: 100%;} 
.intro-slide .swiper-scrollbar-drag {background: var(--color-primary); border-radius: 0;} 

.section.promise {height:700px; background: url(../images/main/bg-promise.jpg) no-repeat 50% 50%/cover;} 
.promise .img-list {display:flex; justify-content: center; align-items: center; margin:0 -30px;}
.promise .img-list li {padding:0 30px; cursor: pointer;}
.promise .img-list li .img img {text-shadow: var(--box-shadow);}
.promise .img-list li .img  { border-radius: 20px;  transition: .3s;}
.promise .img-list li:hover .img {margin-top: -30px; text-shadow: var(--box-shadow); border-radius: 20px;}
.promise .img-list li:hover .img img { border: 2px solid var(--color-primary);  border-radius: 20px; }

.main-roll .roll-wrap {display: flex; overflow: hidden;} 
.main-roll .roll-wrap ul {display: flex; transform: translateX(-50%); animation: roll 30s linear infinite;} 
.main-roll .roll-wrap.top {margin-bottom:var(--margin-60);} 
.main-roll .roll-wrap.btm ul {transform: translateX(50%); animation: roll reverse 30s linear infinite;} 
@keyframes roll {
 0% {transform: translateX(0%);} 
 100% {transform: translateX(-100%);} 
}
.main-roll .roll-wrap ul li {width: max-content;} 
.main-roll .roll-wrap ul li img {width:100%; height:60px;} 

/* side-cs */
.side-cs {position: absolute; top: calc(var(--mv-height ) + 60px); right:60px; z-index:100; opacity: 0;} 
.side-cs.fixed {position: fixed; top: 60px; opacity: 1;  z-index:91; transition:.6s; right: -10px;} 
.side-cs .toggle {position: absolute;  top: -35px; left: -35px; width: 70px; height: 70px;} 
.side-cs .toggle img { filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.3));}
.side-cs.active .toggle { left: -135px;} 
.side-cs .toggle span {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-.04em;} 
.side-cs .wrap {padding-right: 60px;} 
.side-cs.hidden {transform:translateX(100%);} 
/* .side-cs.active {transform:translateX(0);}  */

.side-cs.active {    transform: translateX(100%);} 
.side-cs.active .inquiry-form {box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);} 

.inquiry-form {padding: 30px 20px;background:var( --color-white); border-radius: var( --border-radius-20); width: 100%; max-width: 236px;} 
.inquiry-form .ico-required {display:inline-block; padding-left: 5px; font-weight:600; font-size: var( --font-size-15); color: #ff9c00; font-style:normal;} 
.inquiry-form .group {margin-bottom:55px;} 
.inquiry-form .group:last-child {margin-bottom: 0;} 
.inquiry-form .title {margin-bottom:10px; text-align:center;} 
.inquiry-form .title h4 {font-weight:700; font-size:var(--font-size-20); line-height:var(--line-height-sm); color:#242424;} 
.inquiry-form .title .required {color:#ababab; font-size:14px; line-height:1.33em;} 
.inquiry-form .form {color: var(--color-dark); font-size:var(--font-size-15); line-height:1.6em;} 
.inquiry-form .form .row {margin:-5px 0;} 
.inquiry-form .form .col {padding:5px  0;} 
.inquiry-form .form dt {margin-bottom:5px; font-weight:600;} 
.inquiry-form .form .input {display: block; width: 100%; height: 32px; padding: 5px 10px; font-size: 12px; line-height: 2em; color: #898989;} 
.inquiry-form .form .input.etc { display:inline-block;   margin-left: 5px;}
.inquiry-form .form select.input {padding-right:30px; background-size:10px auto; background-position:right 10px center;} 
.inquiry-form .form textarea.input {height:100px;} 
.inquiry-form .submit-area,
.inquiry-form .btn-submit {margin-top:20px;     text-align: center;} 
.inquiry-form .form-agree {margin:0;} 
.inquiry-form .form-agree .check {text-align:left; color: #242424; font-size: 12px; margin-top: 15px;} 
.inquiry-form .form-agree .check strong {font-weight:600; font-size: var(--body-font-size); color: #242424;} 
.inquiry-form .form-agree .check a {display:block; padding-left: 30px; font-size: 12px; text-decoration: underline; color: #898989;} 
.btn-submit .btn-pack.green {background: var(--color-primary); border-color: var(--color-primary);} 
.btn-submit .btn-pack.large {min-width: 175px; height: 40px; border-radius: 5px; line-height: 40px; font-size: 17px; font-weight: 700; color: #fff;} 
.inquiry-form .radiobox label {padding-left: 25px; position: relative;} 
.inquiry-form .radiobox label:before {position: absolute; top: 50%; left: 0; width: 18px;
    height: 18px; background-color: #fff;} 
.inquiry-form .form-agree .check:first-child .radiobox label:before {top: 4px;} 

.inquiry-form .link-tel {display:block; color: var(--color-primary); font-size: var(--font-size-15); font-weight:600; margin-top: 10px;
text-decoration: underline;}
.inquiry-form .form-wrap .check {color: #242424; font-size: 12px;}
.inquiry-form .form-wrap  .radiobox label:before {top: 7px;
    width: 18px;
    height: 18px;}
.inquiry-form .form-wrap .check .item {display: inline-block; margin-right:5px; margin-bottom: 5px;}
.inquiry-form .form-wrap .check .item:last-child {margin-bottom:0; margin-right:0;}

/* sub page */
.sub-visual {position:relative; height:410px; z-index:10; overflow:hidden;} 
.sub-visual .background {position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */
 -moz-transform:scale(1.09); /* Firefox */
 -webkit-transform:scale(1.09); /* Safari and Chrome */
 -o-transform:scale(1.09); /* Opera */
transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0;} 
.sub-visual.load .background {transform:scale(1); -ms-transform:scale(1); /* IE 9 */
 -moz-transform:scale(1); /* Firefox */
 -webkit-transform:scale(1); /* Safari and Chrome */
 -o-transform:scale(1); /* Opera */} 

.real-cont {padding:0 0 100px;} 

/* footer */
#footer {border-top:1px solid #ddd;} 
#footer .contain {max-width: 1460px;} 
#footer .top {display:flex; justify-content: space-between; align-items: center; padding:30px 0;} 
#footer .top .sitelogo a {display:block;} 
#footer .foot-menu {display:flex;} 
#footer .foot-menu li:first-child {margin-right:var(--margin-30);} 
#footer .foot-menu li a {font-weight:500; font-size: var(--font-size-15); color: #999999;} 
#footer address {font-style:normal;} 
#footer .foot-info {width:50%; padding-bottom:40px;} 
#footer .foot-info address {margin:0 -15px;} 
#footer .foot-info address p {display:inline-block; padding:0 15px; font-size: var(--font-size-15); line-height:1.6em; color: #666666;} 

.fancybox-close {background-color: var(--color-primary) !important;}