@charset "utf-8";
/* CSS Document */

/*** 
====================================================================
	메인화면
====================================================================
***/


.row  { 
    --bs-gutter-x :0;
    padding:0;
    margin:0;
}
.row > * { 
    padding:0
}


.main_pagination { position:fixed; top:51%; left:30px; z-index: 0;  transform: translate(0,-50%);}
.main_pagination li{ display: block; font-size:.8em; line-height:.8em; padding:8px 0; font-weight: 500;  }
.main_pagination li a { color:#ccc; transition: 0.4s ease; }
.main_pagination li a .icon { position:relative;  display: inline-block;  width:20px; height:20px; background-size: 20px; background-position: 0; background-repeat: no-repeat; box-sizing: border-box; vertical-align: text-top; margin:0 15px 0 0; transition: 0.4s ease; }
.main_pagination li a .icon:before { width:9px; height:9px; background:#ccc; border-radius:100%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); content:''; z-index: 1}
.main_pagination li a .icon:after { width:18px; height:18px; background:var(--thm-primary); border-radius:100%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); content:''; opacity: .2; z-index: 0; display: none}
.main_pagination li a .hover-text { display: none}
.main_pagination li a:hover, .main_pagination li a.active { color:var(--thm-primary);}
.main_pagination li a:hover .icon:before, .main_pagination li a.active .icon:before { background: var(--thm-primary);}
.main_pagination li a:hover .icon:after, .main_pagination li a.active .icon:after { display: block}

.main_pagination.changeColor  { --thm-primary: #333;}


@media (max-width: 1199px) {
    .main_pagination  { display: none !important}
}


.search {position:absolute;right:0;width:40%;padding:75px 180px;background: var(--thm-primary);color:#fff;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%); z-index:3; box-sizing: border-box }
.search h2 {font-size:20px; line-height: 1; margin-bottom:30px; }
.search .search_content {position: relative}
.search .search_content input[type=search] { width:100%; outline: none; border:none; border-bottom-color:#fff; border-bottom-width:1px; border-bottom-style:solid; height:49px; line-height: 49px; color:#fff; font-size: .9em; position: relative; box-sizing: content-box}
.search .search_content input[type=search]::placeholder{color:rgba(255,255,255,.5);}
.search .search_content .thm-btn { position: absolute; right:0; bottom:15px; width:25px; height:25px; background-image: url("../images/icons/btn_srch_white2.svg"); background-size: contain; font-size: 0; text-indent: -9999px; }

@media (max-width: 1200px) {
	.search {width:70%;padding:40px 90px;}
}

@media (max-width: 767px) {
	.search { position: relative;  width:100%;padding:50px; transform: none}
	.search h2 {font-size:15px; margin-bottom:15px; }
	.search .search_content {position: relative}
	.search .search_content input[type=search] { height:35px; line-height: 35px; font-size: .8em; }
	.search .search_content .thm-btn { bottom:12px; width:16px; height:16px; background-image: url("../images/icons/btn_srch_white2.svg"); }
}


.numbering { position:relative}
.numbering:before{content:'';position:absolute;top:0;right:calc(50% - 300px);z-index:4;width:200%;height:150%;background:#fff}
.numbering .container { position:relative; z-index: 4}
.numbering .main-numbering-item { display: flex;  -ms-flex-pack:flex-start;justify-content:flex-start;-ms-flex-direction:row;flex-direction:row;text-align:left;padding:30px 0; align-items:center}
.numbering .main-numbering-item .icon {position:relative; display:inline-block;width:70px;height:70px; background-repeat:no-repeat;background-position:center center;background-color:var(--thm-primary); border-radius: 100%; margin:0 2.125rem 0 0; overflow: hidden}
.numbering .main-numbering-item .icon img {width:55%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.numbering .main-numbering-item .counting {}
.numbering .main-numbering-item .counting h2 { font-size: 1em; color:#666; line-height:1; font-weight: 400;}
.numbering .main-numbering-item .counting h2 span { font-size: .7em}
.numbering .main-numbering-item .counting .txt-desc{font-size:.9em;color:#666; line-height:1.4;word-break:break-all}
.numbering .main-numbering-item .counting {}
.numbering .main-numbering-item .counting {}
.numbering .main-numbering-item .counting .counting-num{margin-bottom:.625rem;font-size:1em;color:#111;line-height:1;}
.counting-num b{ display: inline-block;  font-size:2.5em; line-height:1; letter-spacing: -0.05em; margin-right:5px; letter-spacing: -0.02em}

@media (max-width: 767px) {
	.numbering { width:100%; background: #fff;}
	.numbering:before{display: none}
	.numbering .container { position:relative; z-index: 0}
	.numbering .main-numbering-item { padding:15px 0; align-items:flex-start}
	.numbering .main-numbering-item .counting h2 { font-size: .85em; margin-bottom:5px;}
	.numbering .main-numbering-item .counting .txt-desc{font-size:.8em;}
	.numbering .main-numbering-item .counting .txt-desc.mt-8 { margin-top:5px !important;}
	.numbering .main-numbering-item .icon {width:70px;height:70px; margin:0 2rem 0 1rem}
	.numbering .main-numbering-item .counting .counting-num{margin-bottom:0;font-size:.95em; display: block}
	.counting-num b{ font-size:1.8em; margin-right:3px;}
}



.product_latest  { position:relative}
.product_latest:before{content:'';position:absolute;top:0;right:calc(50% - 300px);z-index:4;width:200%;height:150%;background:#fff}
.product_latest .container { position:relative; z-index: 4;}
.product_latest .cate{position:absolute;top:3.5rem;left:1rem;z-index:80;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform-origin:top left;font-size:16px;line-height:1.15384;text-transform:uppercase; font-weight:500;color:#ccc;}
.proHead{display:block;overflow:hidden;position:absolute;width:auto;top:50%;right:1em;bottom:auto;left:auto;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%); z-index: 5}
.product_TabWrap .nav-tabs { border:0; flex-direction: column; align-items:flex-end}
.product_TabWrap .nav-item { margin:0 3px;  padding:0;}
.product_TabWrap .nav-tabs .nav-link{ margin:0; border-radius: 0; outline:none; display:block; position:relative;padding:1.25em 0 0.6em;color:#222;white-space:nowrap; display:block;background:transparent;width:auto;height:auto;border-bottom:3px solid transparent;border-radius:0;font-size:1.15em;font-weight:700;color:#666;text-align:right; opacity: .2;}
.product_TabWrap .nav-tabs .nav-link:hover, .nav-tabs .nav-link:active, .product_TabWrap .nav-tabs .nav-link.active{ opacity: 1; border:none;  color:#222; background-color: transparent; border-bottom:3px solid transparent;  outline:none; padding:1.25em 0 0.6em; box-shadow: none;}
.product_TabWrap .nav-tabs .nav-link.active{ border-bottom:3px solid #222;}
#product_TabContent.tab-content > .tab-pane {  position: relative;  display: block !important; visibility: hidden; height:0; z-index: 0;}
#product_TabContent.tab-content > .active { visibility: visible; height:auto; z-index: 1}
.productlate_sllde { display: flex; width:100%; justify-content:space-between; align-items: center;}
.productlate_sllde .main-cnt-hd{ position:relative;z-index:100;flex:1;padding:0 60px 0 6.14583vw}
.main-info{padding-top:0}
.main-info:before, .main-info:after{content:''; display:block}
.main-prod-info .main-prod-tit{display:block}
.main-prod-info .main-prod-tit .number{ position:absolute; font-weight:700; font-size:11.458vw; color:#F8F8F8; line-height:.5; top:0; right:13.5%; bottom:auto; z-index: 0}
.main-prod-info .main-prod-cate{font-size:1.01em;font-weight:400;color:var(--thm-primary);}
.main-prod-info .main-prod-tit h2{position:relative; font-size:2.5em;font-weight:700; color:#222;  z-index: 1; font-size-adjust:from-font; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-prod-info .substance{font-size:1.3em; font-weight:700; color:#222; max-width: 600px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  word-break: break-all; position:relative; z-index: 1}
.main-prod-info .txt-desc {font-size: 1.01em; color:#666; line-height: 1.8; position:relative; z-index: 1;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.productlate_sllde .imgWrap{flex:0 0 auto;width:auto;max-width:100%;margin-right:5%}
.productlate_sllde .imgWrap img{max-width:450px}
.product_latest  [class*=swiper-button]{ width:3.125rem;height:3.125rem; border-radius:50%; position:absolute;background:#fff url(../images/icons/main-prod-slider-btn-bg.svg) no-repeat center center;box-shadow:1px 1px 20px rgb(0 0 0 / 8%);-webkit-box-shadow:1px 1px 20px rgb(0 0 0 / 8%);-moz-box-shadow:1px 1px 20px rgb(0 0 0 / 8%);border:0}
.product_latest .swiper-button-prev{left:-7.03125vw;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%)}
.product_latest .swiper-button-next{right:-7.03125vw;margin-left:0;transform:translateY(-50%) scaleX(-1);-webkit-transform:translateY(-50%) scaleX(-1);-moz-transform:translateY(-50%) scaleX(-1);-ms-transform:translateY(-50%) scaleX(-1)}
.product_latest .swiper-button-disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

@media (min-width: 768px) {
	.product_latest .container { min-height:437px;}
}

@media (max-width: 767px) {
	.product_latest:before{display: none}
	.product_latest .cate {display: none}
	.proHead{position:relative; top:auto; right:auto; bottom:auto; left:auto; transform:none}
	.product_TabWrap .nav-tabs { flex-direction:row; align-items:center}
	.product_TabWrap .nav-item { margin:0; flex-basis: 25%;}
	.product_TabWrap .nav-tabs .nav-link{ padding:12px 0; border-bottom:2px solid transparent; font-size:.82em; font-weight:600; width:100%; text-align: center }
	.product_TabWrap .nav-tabs .nav-link:hover, .nav-tabs .nav-link:active, .product_TabWrap .nav-tabs .nav-link.active{ border-bottom:2px solid transparent; padding:12px 0; box-shadow: none;}
	.product_TabWrap .nav-tabs .nav-link.active{ border-bottom:2px solid #222;}
	.productlate_sllde { display: flex; width:100%; justify-content:flex-end; flex-direction:column-reverse}
	.productlate_sllde .main-cnt-hd{ position:relative;z-index:100;flex:1;padding:0 20px 0 6.14583vw}
	.main-prod-info .main-prod-tit .number{ font-size:80px; right:0; color:rgba(255,255,255,.8);}
	.main-prod-info .main-prod-cate{font-size:.8em;}
	.main-prod-info .main-prod-tit h2{font-size:1.5em;}
	.main-prod-info .substance{font-size:1em; max-width: 100%;     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 표시할 최대 줄 수 */
    -webkit-box-orient: vertical;
    white-space: normal; }
	.main-prod-info .txt-desc {font-size: .9em;  -webkit-line-clamp: 2;}
	.productlate_sllde .imgWrap{flex: auto; margin:20px 0; text-align: center}
	.productlate_sllde .imgWrap img{max-width:45%}
	.product_latest  [class*=swiper-button]{ width:2rem;height:2rem; background-size:40%}
	.product_latest .swiper-button-prev{left:-2.5vw; transform:none; top:30%}
	.product_latest .swiper-button-next{right:-2.5vw; transform:scaleX(-1); top:30%}
}


.pr_center  { position:relative}
.pr_center:before{content:'';position:absolute;top:0;right:calc(50% - 300px);z-index:4;width:200%;height:150%;background:#fff}
.pr_center .container { position:relative; z-index: 4;}
.main-center-banner>.container::before, .main-center-banner>.container::after{content:'';right:2.5rem;width:calc( 200% - 2.5rem )}
/* main-center */
.main-center{position:relative;z-index:60}
.main-center-banner{position:relative;height:720px; z-index: 4}
.main-center-banner>.container{position:relative;z-index:10;height:100%;padding:0 40px;color:#fff}
.main-center-banner>.container::before{content:'';position:absolute;top:0;right:0;width:100%;max-width:1665px;height:100%;background:url(../images/main/main-center-banner-bg.jpg) no-repeat center center / cover}
.main-center-banner>.container::after{content:'';position:absolute;top:0;right:0;bottom:0;width:100%;max-width:1665px;height:100%;background:rgba(0,0,0,.25)}
.main-center-banner .cate{top:0;left:100%;transform-origin:top left;white-space:nowrap}
.main-center-banner-inner{display:-ms-flexbox;display:flex;-ms-flex-align:flex-start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:10;padding-top:7.65625vw}
.main-center-banner-tit{font-size:4.4em;font-weight:600; line-height: 1.1; letter-spacing: 0.01em}
.main-center-banner-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:3rem;letter-spacing:-1px;font-size:1.1em}
.main-center-all-wrp{position:relative;margin-top:-240px;left:auto;z-index:4;width:100%}
.main-center-all-wrp .row { justify-content :end}
.main-center-inner{display:-ms-flexbox;display:flex;-ms-flex-align:flex-start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;height:20rem;padding:3rem;background:#F7F7F9}
.main-center-cate{display:block;font-size:1em;color:var(--thm-primary);line-height:1.188}
.main-center-txt{color:#313033}
.main-center-txt dt{font-size:1.7em;line-height:1.5}
.main-center-txt dd{margin-top:.9rem;font-size:1.05em;color:inherit}
.main-center-inner .icon-arr{opacity:0;position:absolute;top:2rem;right:2rem;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transition:all .4s}
.main-center-all-wrp .item:first-child .main-center-inner{background-color:var(--thm-primary)}
.main-center-all-wrp .item:first-child .main-center-cate{color:#fff}
.main-center-all-wrp .item:first-child .main-center-txt, .main-center-all-wrp .item:nth-child(3) .main-center-txt{color:#fff}
.main-center-all-wrp .item:nth-child(3) .main-center-inner{background-color:#313033}
.main-center-all-wrp .item:nth-child(3) .main-center-cate{color:var(--thm-primary)}
.main-center-all-wrp .item:first-child .icon-arr, .main-center-all-wrp .item:nth-child(3) .icon-arr{background:#fff url(../images/icons/icon-arr.svg) no-repeat center center / .9375rem .6875rem;transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg)}
.main-center-inner:hover .icon-arr{opacity:1}
@media (min-width: 2132px) {
	.main-center-all-wrp { padding:0 5%;}
}
@media (min-width: 768px) {
	.main-center-banner>.container::before, .main-center-banner>.container::after{content:'';right:2.5rem;width:calc( 200% - 2.5rem )}
}
@media (max-width: 767px) {
	.pr_center:before{display: none}
	.main-center-banner{height:40vh}
	.main-center-all-wrp { margin-top:0}
	.main-center-banner-tit{font-size:2em;}
	.main-center-banner-link{ margin-top:1.5rem;font-size:.8em}
	.main-center-banner .cate{top:20px ;left:97%; font-size: 12px;}
	.main-center-banner-inner{padding-top:15vw}
	.main-center-inner { padding:2rem; height:30vh}
	.main-center-cate{font-size:.8em;}
	.main-center-txt dt { font-size: 1.4em}
	.main-center-txt dd { font-size: .9em;}
	.main-center-inner .icon-arr { opacity: 1; top:1.5rem; right:1.5rem}
}


/* news_latest */
.news_latest{position:relative; background-color:#fff}
.news_latest:before{content:'';position:absolute;top:0;right:72%;width:100%;height:100%;background:url(../images/main/news_latest-bg.png) no-repeat right top;z-index:1}
.news_latest::after{content:'';position:absolute;top:20%;right:10%;width:294px;height:218px;background:#F8F8F8;border-radius:50%;transform:translateY(-52%) rotate(-34deg);-webkit-transform:translateY(-52%) rotate(-34deg);-moz-transform:translateY(-52%) rotate(-34deg);-webkit-transform:translateY(-52%) rotate(-34deg); z-index:0}
.news_latest .container { position: relative; z-index: 1;}
.news_latest .main-cnt-hd{position:relative;z-index:100;flex:1;padding:0 20px 0 6.14583vw}
.news_latest-inner{display:-ms-flexbox;display:flex;-ms-flex-align:flex-start;align-items:flex-start}
.main-cnt-btn-area .swiper-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:9.375rem}
.main-cnt-btn-area [class*=swiper-button]{position:relative;margin-top:0}
.main-cnt-btn-area .swiper-button-prev{left:auto}
.main-cnt-btn-area .swiper-button-next{right:auto;margin-left:10px}
.news_latest-slider{overflow:visible;position:relative;flex-basis:42%;max-width:42%}
.news_latest-slide-item{position:relative;transition:all.4s;opacity:0}
.news_latest-slide-item.swiper-slide-active, .news_latest-slide-item.swiper-slide-next{opacity:1}
.news_latest-slide-item .icon-arr{margin-top:1.875rem;opacity:0;transition:all .4s; display: inline-block}
.news_latest-slide-item-inner{display:inline-block;position:relative;z-index:10;margin-top:0;text-align:left;transition:all .4s}
.news_latest-slide-item-img img{max-width:100%}
.news_latest-slide-item-info .txt-desc{margin-top:1.125rem;font-weight:400;color:#111}
.news_latest-slide-item-info span{display:block;margin-top:1.125rem;font-size:.875rem;color:#B3B3B3;line-height:1.358;letter-spacing:0}
@media (min-width:2130px){
	.news_latest .container { max-width:100%}
	.news_latest .main-cnt-hd{padding:0 20px 0 23vw}
}
@media (min-width:1200px){
	.news_latest-slider{flex-basis:59.575%;max-width:59.575%}
	.news_latest-slide-item { min-width: 360px;}
	.news_latest-slide-item:hover:after{right:-125px}
	.news_latest-slide-item-inner:hover{transform:translateY(-9rem);-webkit-transform:translateY(-9rem);-moz-transform:translateY(-9rem);-ms-transform:translateY(-9rem)}
	.news_latest-slide-item-inner:hover .icon-arr{bottom:-9rem;opacity:1}
}
@media (max-width: 767px) {
	.news_latest-inner { flex-direction: column }
	.news_latest .main-cnt-hd{padding:0; width:100%;}
	.main-cnt-btn-area .swiper-control { margin-top: 0;}
	.news_latest .cate{top:0 ;left:97%; font-size: 12px;}
	.news_latest-tit h2 { font-size: 2em}
	.main-cnt-btn-area { display: flex; justify-content: space-between}
	.news_latest-inner .swiper-control [class*=swiper-button] { width:40px; height:40px; top:0;}
	.news_latest-slider{overflow:visible;position:relative;flex-basis:100%;max-width:100%; margin-top:40px !important;}
	.news_latest-slide-item .icon-arr { opacity: 1}
	.news_latest-slide-item-info span { margin-top:10px;}
	.news_latest-slide-item .icon-arr  { margin-top:15px;}
}




/* main-contact */
.main-contact{position:relative; background-color:#fff}
.main-contact:before{content:'';position:absolute;top: -2rem;left:calc( 100% - 27.34375% );width:100%;height:100%;background:url(../images/main/main-contact-bg.png) no-repeat}
.main-contact-wrp>.container{position:relative}
.main-contact-wrp .cate{top:43.3%;left:calc( 100% - 10px );white-space:nowrap;transform:rotate(90deg) translateY(-50%);-webkit-transform:translateY(-50%) rotate(90deg);-moz-transform:rotate(90deg) translateY(-50%);-ms-transform:rotate(90deg) translateY(-50%)}
.main-contact .main-cnt-hd{position:relative;z-index:100;flex:1;padding:0 0 0 5.9vw}
.main-contact-inner{display:-ms-flexbox;display:flex; align-items: center}
.main-contact-banner{position:relative;flex-basis:65.9575%;max-width:65.9575%}
.main-contact-banner::after{content:'';position:absolute;bottom:-8.75rem;right:4rem;background:var(--thm-primary);width:200%;height:353px}
.main-contact-banner-group{position:relative;z-index:10}
.main-contact-banner-group::before{content:'';display:block;padding-top:480px;background:url(../images/main/main-contact-banner-bg.jpg) no-repeat center center / cover}
.main-contact-banner .slogan{position:absolute;top:3rem;left:2.5rem;font-size:1.25rem;font-weight:500;color:#fff;letter-spacing:0}
.main-contact-banner .slogan:before{content:'';display:block;width:1.1667rem;height:3px;margin-bottom:1.25rem;background:#fff}
.main-contact-banner-link{display:block;position:absolute;right:0;bottom:0;width:100%;max-width:374px;padding:1.7em 1.6em;background:#313033 url(../images/icons/btn-arr-wh.png) no-repeat right 1.7778em center;font-size:1em;color:#fff;line-height:1.5;transform:translateY(35%);-webkit-transform:translateY(35%);-moz-transform:translateY(35%);-ms-transform:translateY(35%)}
.main-contact-banner-link:hover, .main-contact-banner-link:active, .main-contact-banner-link:focus{color:#fff}
.main-contact-info-link{margin-top:3.875rem}
@media (min-width:1720px){
	.main-contact-wrp .cate{left: calc( 100% + 7.5rem )}
}
@media (max-width: 767px) {
	.main-contact-wrp .cate{top:0 ;left:97%; font-size: 12px;}
	.main-contact-wrp .main-cnt-hd{padding:0; width:100%;}
	.main-contact-inner { flex-direction:column-reverse; height:50vh}
	.main-contact:before { display: none}
	.main-contact-banner{flex-basis:100%;max-width:100%; width:100%; margin-top:30px;}
	.main-contact-banner-group::before { padding-top: 0; position: absolute; width:100%; height:222px;}
	.main-contact-banner::after{bottom:0;right:4rem;height:200px}
	.main-contact-inner  .btn-underline { display: none;}
	.main-contact-tit { height:30px;}
	.main-contact-tit h2 { font-size: 2em}
	.main-contact-banner-link { font-size: .8em; padding:30px 20px; transform: none; top:0; max-width:50vw; line-height:0}
	.main-contact-banner .slogan { display: none;}
}