@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {position:relative; padding-left:30px; color:#333333; font-size:var(--font-size-24-20); font-weight:800; line-height:1.636em; letter-spacing:-.03em; margin-bottom:var(--margin-40-16);} 
.doc-tit:before {content:""; position:absolute; top:8px; left:0; width:24px; height:24px; background:url("../images/sub/bullet.png") no-repeat center/contain;} 

.doc-sub-tit {color: #333333; letter-spacing:-0.025em;} 
.doc-sub-tit h2 {font-size:var(--font-size-28-20);} 
.doc-sub-tit p {font-weight:600; font-size: var(--font-size-20-18); margin-top: var(--margin-15-10);} 
.doc-sub-tit.type2 {text-align:center; margin-bottom:var(--margin-100-60 );} 
.doc-sub-tit.type2 h2 {font-weight:800;} 

.dot-list > li {position: relative; padding-left: 16px; font-size: var(--font-size-17-15); text-align: left;} 
.dot-list > li:before {content: "·"; position: absolute; top: -2px; left: 0; font-size: var(--font-size-24-20); color: #555555;} 

/* CEO 인사말 */
.greetings > p {padding-left:12px;} 
.greetings-list {height: auto; background-color: #e6eaf2; padding:var( --padding-65-25) var(--padding-90-50); margin-top:var(--margin-70-50); border-radius: var(--border-radius-20-10);} 
.greetings-list > ul {display: flex; justify-content: center; margin: 0 -55px;} 
.greetings-list >ul> li {width: 25%; padding: 0 55px; text-align: center;} 
.greetings-list >ul> li .bg {width:220px; height:220px; margin-bottom:var(--margin-40-16); padding-bottom:var(--padding-30-16); border-top-left-radius: 30px; border-bottom-right-radius: 30px; display:flex; justify-content: center; align-items: end; color: #fff; font-weight:700; font-size: var(--font-size-20-18); line-height:1.4em; background-repeat: no-repeat; background-size: cover; background-position: center;} 
.greetings-list >ul> li:nth-child(1) .bg {background-image: url(../images/sub/greetings-01.jpg);} 
.greetings-list >ul> li:nth-child(2) .bg {background-image: url(../images/sub/greetings-02.jpg);} 
.greetings-list >ul> li:nth-child(3) .bg {background-image: url(../images/sub/greetings-03.jpg);} 
.greetings-list >ul> li:nth-child(4) .bg {background-image: url(../images/sub/greetings-04.jpg);} 
.greetings-list .tit {margin-bottom: 5px; font-weight: 700; font-size: var(--font-size-20-18); line-height: 1.5em; color: #333333; text-align:left;} 

/* .history */
.history .tab-contents {border: none;} 
.history .con2 {position:relative;} 
.history .con2:after {content: ''; width: 1px; height: 100%; background-color: #ddd; position: absolute; left: 50%; top: 10px; z-index: -1;} 
.history .con2 .row {display:flex; position:relative; margin-bottom:var(--margin-80-40); flex-direction:row-reverse;} 
.history .con2 .row:last-child {padding-bottom: 0;} 
.history .con2 .row .col .year {margin-left:-75px;} 
.history .con2 .row .col .txt-wrap {margin-top:10px; padding-left: var(--padding-45-25);} 
.history .check-list {width: fit-content; padding:var(--padding-20-10) var( --padding-35-15); border: 1px solid #ddd; border-radius: var(--border-radius-20-10);} 
.history .check-list ul li {position:relative; padding-left:30px; font-weight:600;} 
.history .check-list ul li::before {content:''; position: absolute; top:7px; left: 0; z-index:1; width:16px; height:13px; background: url(../images/sub/check.png) no-repeat 100%/contain;} 
.history .con2 .row .col {display:flex; width:50%;} 
.history .con2 .row .col .info .wrap {display:flex; margin-top:var(--margin-30-16);} 
.history .con2 .row .col .info .wrap ul {min-width:0; width:1%; flex:1 1 auto; margin-left:10px;} 
.history .con2 .row .col .info .wrap ul li {position: relative; padding-left: 12px;} 
.history .con2 .row .col .info .wrap ul li::before {content: '·'; position: absolute; left: 0; top: 0; font-size: var(--font-size-24-20); line-height:1.166em;} 
.history .bin {height:20px;} 
.history .con2 .row:nth-child(even) {text-align:right; flex-direction: row;} 
.history .con2 .row:nth-child(even) .col {display: flex; padding-left: 0; flex-direction: row-reverse; padding-right:0;} 
.history .con2 .row:nth-child(even) .col .year {margin-left: 0; margin-right: -75px;} 
.history .con2 .row:nth-child(even) .col .txt-wrap {padding-left: 0; padding-right: var(--padding-45-25);} 
.history .con2 .row:nth-child(even) .col .info .wrap {flex-direction:row-reverse;} 
.history .con2 .row:nth-child(even) .col .info .wrap ul {margin-left: 0; margin-right:0;} 
.history .con2 .row:nth-child(even) .col .info .wrap li {padding-right: 16px; padding-left: 0;} 
.history .con2 .row:nth-child(even) .col .info .wrap li:before {left:auto; right:0;} 

/* directions */
.directions {letter-spacing: 0 !important;} 
.directions .tit-wrap {display:flex; margin-bottom:var(--margin-30-16);} 
.directions .doc-sub-tit h2 {margin-right:var(--margin-80-40);} 
.directions .direction-info {display:flex;} 
.directions .direction-info > div {display:flex; align-items: center;} 
.directions .direction-info .locaiton {margin-right:var(--margin-50-30);} 
.directions .icon {margin-right:var(--margin-30-10);} 
.directions .info .tit {font-weight:700; font-size: var(--font-size-18-16); line-height:1.333em;} 
.directions .contact .desc {line-height:1.411em;} 
.directions .contact .desc span {display:inline-block;} 
.root_daum_roughmap {width:100% !important; height:600px !important;} 
.root_daum_roughmap .wrap_map {height:600px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.roughmap_lebel_text:after {content:"경기도 화성시 남양읍 현대기아로 202-51"; font-size:12px; line-height:15px;} 

/* certification */
.certification-list ul {display:flex; flex-wrap:wrap; margin:-30px -20px;} 
.certification-list ul li {width:25%; padding:30px 20px; text-align:center;} 
.certification-list ul li .img {margin-bottom:10px;} 
.certification-list ul li .tit {color:#333; font-weight:500;} 

/* 제품소개 */
.product-list2 ul {display:flex; flex-wrap:wrap; margin: -35px;} 
.product-list2 ul li {width:calc( 33.3333% - 70px); margin:35px; border: 1px solid #ddd;} 
.product-list2 ul li a {display:block;} 
.product-list2 ul li .thumb {position:relative; padding-bottom:59.67%; overflow:hidden;} 
.product-list2 ul li .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;} 
.product-list2 ul li .tit {padding:var( --padding-25-15 );} 
.product-list2 ul li .tit p {position:relative; width:100%; line-height:1em; color: #333333; font-weight:800; font-size: var(--font-size-20-18); letter-spacing:-0.025em;} 
.product-list2 ul li .tit p::after {content: ""; position: absolute; top:50%; right:0; transform: translateY(-50%); width:22px; height:12px; background: url(../images/sub/arrow.png) no-repeat center/contain;} 

/* 제품상세 */
.product-info {width:100%; max-width:567px; _max-width:900px; margin:0 auto;} 
.product-info .tit {color:#333; font-size:30px; line-height:1.2em; padding-bottom:0; margin-bottom:var(--margin-30-16);} 
.product-summary .swiper {width: 100%; margin-left: auto; margin-right: auto;} 
.product-summary .swiper-slide {background-size: cover; background-position: center;} 
.product-summary .productSwiper2 {width: 100%;} 
.product-summary .productSwiper {box-sizing: border-box; padding-top:20px;} 
.product-summary .productSwiper .swiper-slide {width: 25%; height: 100%; opacity: 0.4;} 
.product-summary .productSwiper .swiper-slide-thumb-active {opacity: 1;} 
.product-summary .productSwiper .swiper-slide .thumb {position:relative; padding-bottom:75%; overflow:hidden; cursor:pointer;} 
.product-summary .swiper.productSwiper2 .swiper-slide .thumb {padding-bottom:75%;} 
.product-summary .swiper .swiper-slide .thumb:after {content:""; display:none; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;} 
/* .product-summary .swiper .swiper-slide .thumb::after {border: 1px solid #008aff; }  */
.product-summary .swiper  .swiper-slide .thumb:before  {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: url(../images/sub/watermark.png) 50% 50% no-repeat ; background-size:50% auto; z-index:10;}

.product-summary .swiper.productSwiper  .swiper-slide .thumb:before {background-size:70% auto;}
 
.product-summary .swiper-slide .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;} 
.buttons.product {padding-top:var( --padding-40-20); border-top: 1px solid #ddd; margin-top:var(--margin-80-40);} 

.biz-area .img img {margin:0 auto;}