/* 공통 */
.sub_bg{background-color: #fafafa; padding:10rem 0}
.mEnter{display: block;}
.pb0{padding-bottom: 0 !important;}
.mb30{margin-bottom: 30px !important;}
.mb20{margin-bottom: 20px !important;}
.mb10{margin-bottom: 10px !important;}
.mb50{margin-bottom: 50px !important;}
.smb{margin-bottom: var(--smb);}
.tac{text-align: center;}
.tar{text-align: right;}
.fss{font-size: 0.8em;}

.bgTxt{background: var(--brColor); padding: 2rem;}
.conTxt{font-size: var(--conTxt);}
.tit_dot{font-size: var(--conTit); font-weight: 600; margin-bottom: var(--smb); padding-left: 2rem; border-left: 3px solid var(--main_color);}/*x*/
.tit_bg{background: var(--main_color); padding: 0.5rem 1.5rem; color: #fff; font-size: var(--conTxt); }



ul.dot_li li{position: relative; padding-left: 10px; margin-bottom: 5px;}
ul.dot_li li:before{content:''; width: 3px; height: 3px; background: var(--bdColor); position: absolute; left: 0; top: 7px;}
ul.dot_li li:last-child{margin-bottom: 0;}
.pointTxt{color: var(--main_color);}


.tit_dl{position: relative;}
.tit_dl dt{background: var(--main_color); padding: 0.6rem 2rem; color: #fff;  margin-bottom: 20px; font-weight: 600; display: flex; align-items: center;}
.tit_dl dt sup{font-size: 0.7em; border-bottom: 1px solid #fff; margin-right: 1rem;}
.tit_dl dd{position: relative; padding-left: 2rem; margin-top: 10px;}
.tit_dl dd:before{content:''; width: 3px; height: 3px; background: var(--bdColor); position: absolute; left: 0.5rem; top: 9px;}

.tit_box{padding: 3rem 0;}



.half_common{position:relative}
.half_common .box_con{position:relative;  margin-bottom:var(--mb); }
.half_common .box_con:last-child{ margin-bottom:0px; padding-bottom:0px; }
.half_common .box_con:after{content:''; display:block; clear:both}
.half_common .left_box{position:relative}
.half_common .box_con .left_box h4{font-size: var(--conTit);}
.titTy1,
.titTy2{padding-bottom:15px; border-bottom:5px solid var(--bgColor); position:relative}
.titTy1:before,
.titTy2:before{content:''; position:absolute; left:0; bottom:-5px; width:60px; height:5px; background:var(--main_color); transform: skewX(20deg);} 

.subTit{font-size: var(--subTit); text-transform: uppercase;}
.conTit{font-size: var(--conTit); text-transform: uppercase;}



@media all and (min-width:768px) {
.mEnter{display: inline;}
.tEnter{display: block;}
.half_common .box_con{display: flex; flex-wrap: wrap; gap: 3%;}
.half_common .box_con:after{content:''; clear:both; display:block}
.half_common .box_con .left_box{ width:27%; }
.half_common .box_con .right_box{ width:70%}
.half_common .box_con.half_con .left_box,
.half_common .box_con.half_con .right_box{width: 48.5%;}
.half_common.reverse .box_con {flex-direction: row-reverse;}



}


@media all and (min-width:1200px) {
.tEnter{display: inline;}
.pEnter{display: block;}

.half_common .box_con .left_box{width:22%; }
.half_common .box_con .right_box{width:75%}

.tit_box{padding: 4rem 0;}

}

.comm_top {text-align: center;}
.comm_top .txt{font-size: var(--conTxt);}
.comm_top .tit{font-size: var(--conTit); font-weight: 500;}

.comm_btn_list{position:relative; overflow:hidden; display: flex; flex-wrap: wrap; gap: 2%;}
.comm_btn_list li{ width:49%; text-align:center}
.comm_btn_list.list03 li{width:32%}
.comm_btn_list.list01 li{width:100%}
.comm_btn_list li:last-child{margin-right:0%;}
.comm_btn_list li a{line-height:60px; background:var(--monoGray); display:block; font-size:0.9em; font-weight:600; color:#ffffff; position:relative; z-index:1;}
.comm_btn_list li.btn_line a{background:none; color:var(--monoGray)}
.comm_btn_list li.btn_line{background:#ffffff; border:1px solid var(--monoGray); color:var(--monoGray); position:relative}
.comm_btn_list li.btn_line:before{content:''; display:block; position:absolute; z-index:0;  top:0;  left:-50%; width:100%; height:100%; background:var(--monoGray); transform: scaleX(0); transform-origin: top; transition: .1s ease-in; z-index:0;}
.comm_btn_list li.btn_line:hover:before{transform:scaleX(1); transition: .3s ease-out; left: 0;}
.comm_btn_list li.btn_line:hover a{color:#ffffff}




.comm_table{width:100%; border-top:1px solid var(--monoGray); font-size:0.85em;}
.comm_table th, .comm_table td{border:1px solid var(--bdColor); padding:18px 5px; vertical-align:middle}
.comm_table th:first-child {border-left:none;}
.comm_table th:last-child {border-right:none;}
.comm_table td:first-child {border-left:none;}
.comm_table td:last-child {border-right:none;}

.comm_table .bl, .comm_table tr.bl td, .comm_table tr.bl th{border-left:1px solid var(--bdColor)}
/*.comm_table tr.bl td:first-child, .comm_table tr.bl th:first-child{border-left:0px;}*/
.comm_table .bli{border-left:1px solid var(--bdColor) !important}
.comm_table th{font-weight:600; background:var(--brColor); color:#000000}
.comm_table thead th{border-top: 1px solid var(--monoGray);}
.comm_table td.tit{font-weight:600}

.comm_table tr.total td{background:var(--brColor); font-weight:500}
@media all and (min-width:768px) {
.comm_table{font-size:0.9em;}
.comm_table th,
.comm_table td{padding:18px 10px}
}

@media all and (min-width:1200px) {
.comm_table th,
.comm_table td{padding:20px 20px}

.hover_table tr:hover td{background-color: var(--monoGray); color: #fff; transition: 0.2s; border-color: rgba(255,255,255,0.3);}


}


/*회사개요*/
.companyInfo{position: relative;}
.companyInfo .tit{ position: absolute; color: #fff; top: 0px; padding: 20px; left: 0; }
.companyInfo .tit p{font-size: 0.9em;}
.companyInfo h4{font-family: var(--font-eng); font-size: var(--subTit); text-transform: uppercase; line-height: 100%; margin-bottom: 20px;}
.companyInfo h4 span.pointTxt{color: var(--sub_color);}
.companyInfo .inner{position: static;}

.companyInfo .bg{position: relative;}
.companyInfo .bg img{width: 100%;}

.company_overview {}
.company_overview dl{padding:25px 0; padding-left:70px; border-bottom:1px solid var(--bdColor);  position:relative; width: 100%;}
.company_overview dl:after{content:''; width:40px; height:40px; left:0; top:25px;  margin:auto; position:absolute; font-family:var(--icon); line-height:100%; font-size:1.6em; text-align:center; color: var(--main_color); display: flex; justify-content: center; align-items: center;}
.company_overview dl dt{font-weight:700;  margin-bottom:10px; color: var(--main_color2);  text-transform: uppercase; font-size: 0.9em;}
.company_overview dl dd{margin-top: 5px;}
.company_overview dl dd.tt{font-size: 0.8em;}




.company_overview dl.ic_name:after{content:'\f1d0';}
.company_overview dl.ic_ceo:after{content:'\e7fd';}
.company_overview dl.ic_found:after{content:'\f365';}
.company_overview dl.ic_location:after{content:'\e0c8';}
.company_overview dl.ic_employee:after{content:'\f233';}
.company_overview dl.ic_business:after{content:'\eb3f';}
.company_overview dl.ic_buiding:after{content:'\ebbc';}
.company_overview dl.ic_field:after{content:'\e8f9';}
.company_overview dl.ic_partner:after{content:'\ebcb';}
.company_overview dl.ic_tel:after{content:'\e61d';}
.company_overview dl.ic_fax:after{content:'\e8ad';}
.company_overview dl.ic_email:after{content:'\e158';}

@media all and (min-width:540px) {
.companyInfo .tit p .tEnter{display: block;}
}

@media all and (min-width:768px) {
.companyInfo h4{font-size: 5em;}
.companyInfo .tit{padding: 30px;}
.companyInfo .tit p{ line-height: 1.8;}
.company_overview{display: flex; flex-wrap: wrap; gap:3%; margin: 30px 0;}
.company_overview dl{border-bottom: 0; width: 48.5%;}
}


@media all and (min-width:1200px) {
.companyInfo .tit{width: 40%; padding: 70px 0px 0 50px;}
.companyInfo .inner{position: absolute; top: 0; left: 0; right: 0; padding: 50px;}
.company_overview {margin-left: 45%;}
.company_overview dl{
  background-color: rgba(71, 83, 132, 0.3);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  color: #fff; border-radius: 10px; padding: 30px 25px 30px 70px;
margin-bottom: 20px;}
  .company_overview dl::after {left: 20px; color: #fff; font-size: 1.2em;}
}


@media all and (min-width:1600px) {
.companyInfo h4{font-size: 7em;}
.company_overview {margin-left: 55%; margin-top: 200px;}
.companyInfo .tit p{font-size: 1.1em;}
}


.company_half .box_con .left_box h4 {font-size: var(--subTxt); font-family: var(--font-eng); line-height: 100%; text-transform: uppercase;}



.management p.conTit{border:5px solid var(--bgColor); border-radius: 500px; padding: 30px; font-weight: 600;}
.management .conTit span{font-weight: 900; font-size: 1.2em;}


@media all and (min-width:1200px) {
.company_half .box_con .left_box h4{font-size: var(--subTit);}
.management p.conTit{border-width: 10px;}
}

.valuebox{position:relative; margin:0 auto; text-align:left;  word-break:keep-all;}
.valuebox .value{position:relative;  border-radius:30px; overflow:hidden; padding:15px; border-radius:100px; border:8px solid #e6e6e6; text-align:center; max-width:230px; margin:0 auto ; margin-bottom:20px}
.valuebox .value img{width:100%;  position:relative;  z-index:1;  border-radius:500px;}
.valuebox .value .photo{position:relative; max-width:250px; margin:0 auto; margin-bottom:40px;}
.valuebox .value .photo:before{content:''; position:absolute; z-index:0; left:-10px; right:-10px; top:-10px; bottom:-10px; margin:auto; background:var(--main_color); border-radius:500px; opacity:0.5}
.valuebox .value:nth-child(2) .photo:before{background:var(--sub_color) }
.valuebox .value:nth-child(3) .photo:before{background:var(--monoGray) }

.valuebox .value dl dt{font-weight:600; position:relative; margin-bottom:10px; font-size:0.9em; color:#000000}
.valuebox .value dl dd{font-size: var(--conTxt)}

.valuebox.type02 .value{border:0px; overflow:visible; border-radius:0}

@media all and (min-width:540px) {
.valuebox.type02{display:flex; flex-wrap:wrap; justify-content:center}
.valuebox.type02 .value{width:33.33%; max-width:300px; margin:0 ; padding:0px}
}


/*인사말*/
.greeting{position:relative;padding: 2.5rem 0 0 2.5rem; border-left:5px solid #f8f8fa; }

.greeting:before{content:''; width:20%; height:5px; background:#f8f8fa; position:absolute; left:0; top:0;}
.greeting h4{padding-bottom:4rem; margin-bottom:4rem; position:relative; z-index:0; font-size: var(--subTxt);}
.greeting h4 span{font-size: 1.4rem; margin-bottom: 4rem; display: block; font-weight: 800;}
.greeting h4 span i{color: var(--main_color);}

.greeting h4:after{content:''; position:absolute; left:0; bottom:0px; width:20%; height:1px; background: var(--main_color); 
  /*background:linear-gradient(120deg, var(--main_color) 40% , var(--sub_color) 100%)*/}

.greeting p{text-align:justify; line-height: 1.6;}

.greeting p.tit{color:#000; font-weight:500; font-size:1.1em; text-align: left;}

.greeting .sign_txt{color:#000000; font-weight:700; text-align:right}
.greeting .sign_txt em{display: block; font-size: 1.6em; letter-spacing: 10px;}
.greeting .sign_txt em i{ font-size: 0.6em;}
.greeting .sign_txt img{display:inline-block; width:100px; vertical-align:middle; margin-left:10px}

.greeting .photo{margin-bottom: 5rem; padding-bottom: 60.25%; position: relative; overflow: hidden;}
.greeting .photo img{position: absolute;}

@media all and (min-width:768px) {

.greeting h4:before{width:200px; height:200px; top:-50px}
}

@media all and (min-width:1024px) {
.greeting{padding: 4rem 0 0 4rem;}
.greeting .photo{display:block;float:right;width: 40%;margin-left:5%}
.greeting .info{float:left;width: 55%;}
.greeting:after{content:''; display:block; clear:both}
}

@media all and (min-width:1200px) {
.greeting{padding: 8rem 0 0 8rem; border-left-width:10px}


.greeting:before{height:10px;}

.greeting h4:before{opacity:1}



.greeting p{font-size:1.05em}
.greeting p.tit{font-size:1.2em}
.greeting .photo{width: 45%;}
.greeting .info{width: 45%;}

}


/* 연혁 */

/* 회사연혁 */
.bg_con{padding:10rem 0; background: #fafafa;}
.history_con{display: flex; flex-wrap: wrap; position: relative; padding:5rem 0 0; justify-content:space-between; overflow: hidden;}
.history_con::before{content: ''; width: 1px; height: calc(100% - 10rem); background:#e6e6e6; position: absolute; top:0; left:0; }
.history_con:after{content:'HISTORY'; display: block; width: 100%; color: var(--monoGray); padding-top: 7rem; font-size: 8rem; font-weight: 800; line-height: 6rem; opacity: 0.3;}
.history_con dl{position: relative;  margin-top:5rem; width: 100%; padding-left: 4rem;}

.history_con dl:before{content: ''; width: 1rem; height: 1rem; background: var(--main_color); border-radius: 100%; position: absolute; top: 3.1rem; left:-.5rem;}
.history_con dl:after{content: ''; width: 3rem; height:1px; background: var(--main_color); position: absolute; top:3.5rem; left: 0; }
.history_con dl dt{ font-weight: bold; font-size:var(--subTit); color:var(--main_color); padding-top:1rem}
.history_con dl dd{padding-top:2rem; position:relative; word-break:break-all}
.history_con dl dd b,
.history_con dl dd span.txt{display:block;}

.historySwiper{position: relative; overflow: hidden;}

.historySwiper .historyTxt .swiper-slide{opacity: 0; }
.historySwiper .historyTxt .swiper-slide-prev,
.historySwiper .historyTxt .swiper-slide-next,
.historySwiper .historyTxt .swiper-slide-active{opacity: 1;}
.historyNav .swiper-slide {
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
 
}

.history_nav_wrapper{width: calc(100% - 100px); overflow: hidden; margin:0 auto; margin-bottom: 50px;}

.historyNav .swiper-slide{font-size: 1.2em; line-height: 100px; font-weight: 600; color: var(--monoGray);}
.historyNav .swiper-slide i{font-weight: inherit;}
.historyNav .swiper-slide em{font-weight: inherit;}
.historyNav .swiper-slide.active{line-height: 1; text-align: center;}
.historyNav .swiper-slide.active i{display: inline-block; margin-bottom: 1.5rem; padding-bottom: 1.5rem; font-size: 0.3em; border-bottom: 1px solid var(--main_color);}
.historyNav .swiper-slide.active em{display: block; line-height: 1.2;}
.historyNav .swiper-slide.active {color: var(--main_color); font-size: var(--subTit); font-weight: 700;}
.historySwiper .nav-prev,
.historySwiper .nav-next {
  position: absolute; top: 25px; left: 0; z-index: 10;
  width: 50px; height: 50px; border: 1px solid var(--bdColor);
  border-radius: 500px; background: #fff; display: flex; justify-content: center; align-items: center;
}
.historySwiper .nav-prev:before,
.historySwiper .nav-next:before{font-family: var(--icon); content:'\ef7d'; color: var(--monoGray); font-size: 1.2em;}
.historySwiper .nav-next:before{content:'\e941'}
.historySwiper .nav-next{left: auto; right: 0;}
.historySwiper .swiper-button-disabled{display: none;}
@media all and (min-width:768px) {


.history_con::before{content: ''; top: 0; left: 50%; transform: translateX(-50%);}
.history_con:after{text-align: center; font-size: 10rem; line-height: 7rem;}
.history_con dl{ width:50%; margin-left: 50%; padding-left: 0;}
.history_con dl:before{ top:4.2rem;}
.history_con dl:after{ top:4.7rem; width: 4rem;}
.history_con dl:nth-child(odd){margin-left: 0; margin-right: 50%;}

.history_con dl:nth-child(odd){padding-right:2rem; text-align:right;  margin-top:5rem;}
.history_con dl:nth-child(odd):before{left:auto;  right:-.5rem}
.history_con dl:nth-child(odd):after{left:auto; right: 0;}
.history_con dl:nth-child(even){padding-left:2rem}


.history_con dl dt{padding-top:2rem}
.history_con dl dd{padding-left:5rem;}
.history_con dl dd b{position:absolute; left:0;}
.history_con dl:nth-child(odd) dd b{left:auto; right:0;}
.history_con dl:nth-child(odd) dd{padding-left:0; padding-right:5rem}

.history_con dl:nth-child(odd){padding-right:7rem;}
.history_con dl:nth-child(even){padding-left:7rem}
}


@media all and (min-width:1280px) {

.history_con::before{ height: calc(100% - 20rem);}
.history_con:after{font-size: 20rem; line-height: 14rem; padding-top: 15rem;}
.history_con dl{margin-top:20rem}

.history_con dl:before{ top:5rem;}
.history_con dl:after{ top:5.4rem; }

.historyNav .swiper-slide{padding-top: 60px;}
.historyNav .swiper-slide.active{padding-top: 0;}
.historyNav .swiper-slide.active em{font-size: 6rem;}

.historySwiper .nav-prev, .historySwiper .nav-next{width: 80px; height: 80px; top: 70px;}

}

/*직무소개*/
.business_con{padding-bottom: 0;}
.business_term{position: relative; border-top: 1px solid var(--bdColor); margin-bottom: -1px;}
.business_term .info{padding: 50px 5%;}
.business_term .info h5{color: var(--main_color); font-weight: 600; margin-bottom: 20px; font-size: 2.4rem;}
.business_term .info h5 sup{border-bottom: 2px solid var(--main_color); margin-right: 5px; font-size: 0.6em; font-weight: 800;}
.business_term .info p{font-size: 0.95em; line-height: 1.6;}


@media all and (min-width:768px) {
.business_con{padding-bottom: 6rem;}
.business_term{border-top: 0;}
.business_term .box{display: flex; flex-wrap: wrap; align-items:center}
.business_term .info,
.business_term .photo{width: 50%;}
.business_term .info{padding: 7rem 5%;}
.business_term .photo{padding: 0 5%;}

.business_term .box:nth-child(even){flex-direction: row-reverse;}
}



@media all and (min-width:1200px) {
.business_term .info h5{font-size: 3.4rem;}
.business_term .info p{font-size: 1em;}
}

@media all and (min-width:1600px) {
  .business_term{border-top: 1px solid var(--bdColor); margin-bottom: -1px;}
.business_con{padding-bottom: 0rem;}
.business_term .photo{padding: 0;}
}

/* 오시는길 */

.mapContainer{position:relative;}
.mapContainer .tabs{display: flex;  gap: 3%; margin-bottom: var(--smb); overflow-x:  scroll;}
.mapContainer .tabs li{cursor: pointer; font-weight: 600; color: var(--monoGray); white-space: nowrap; line-height: 50px;}
.noticebox .tabs li:after{content:''; position:absolute; right:0; top:0; bottom:0; margin:auto; background:var(--bdColor); opacity:0.3; width:1px; height:18px;}
.mapContainer .tabs li:last-child:after{display:none}
.mapContainer .tabs li.current{color:var(--main_color); }
.mapContainer .tabs:after{content:''; display:block; clear:both; }

.mapContainer .tabscontent{position:relative; display:none}

.mapContainer .mapbox{min-height: 200px; background: var(--bdColor);}

.mapContainer .address_info{padding: var(--smb) 0; position: relative;}
.mapContainer .address_info h4{font-weight: 700; margin-bottom: 20px; color: var(--main_color); font-size: var(--conTit);}
.mapContainer .address_info address{font-weight: 600; font-size: 1.1em;}
.mapContainer .address_info address:before{content:'\e55b'; font-family: var(--icon); margin-right: 5px; display: inline-block; vertical-align: middle;}
.mapContainer .address_info dl{margin: 20px 0;}
.mapContainer .address_info dl dt{font-weight: 600; font-size: 0.95em; margin-bottom: 10px; color: var(--main_color);}
.mapContainer .address_info dl dd{position: relative; margin-bottom: 2px;}
.mapContainer .address_info dl dd:last-child{margin-bottom: 0;}
.mapContainer .address_info dl dd b{color: var(--monoGray); width: 40px; display: inline-block; vertical-align: middle; margin-right: 5px; font-size: 0.8em; font-weight: 600; letter-spacing: 3px; }
/*
.mapContainer .address_info dl dd b:before{content:''; font-family: var(--icon); display: inline-block; vertical-align: middle; font-weight: normal; margin-right: 5px; font-size: 1em;}
.mapContainer .address_info dl dd b.tel:before{content:'\f7fa';}
.mapContainer .address_info dl dd b.fax:before{content:'\ead8';}*/


@media all and (min-width:768px) {
.mapContainer .tabs{overflow: hidden;}

.mapContainer .address_info{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.mapContainer .address_info .info{width: 100%;}
.mapContainer .address_info dl{ width: 50%; padding-left: 5%; border-left: 1px solid var(--bdColor)}

}

@media all and (min-width:1200px) {
.mapContainer .address_info .info{width: 50%;}
.mapContainer .address_info dl{ width: 20%; padding-left: 3%;}
.mapContainer .address_info address{font-size: 1.2em}
}






.map{display: flex; gap:5rem}
.map_info{flex-basis:30%; display: flex; flex-direction: column; gap:2rem}
.map_info dl{border-bottom: 1px solid #ccc; padding-bottom: 2rem;}
.map_info dl dt{font-weight: bold; font-size: 2.5rem;}
.map_info li{display: flex; gap:2rem; align-items: center; padding:1rem 0}
.map_info li span{display: inline-flex; width:30%; font-weight: bold;}
.map_info li span i{color:var(--main_color); display: inline-block; margin-right: 1rem;}
.map_area{flex-basis:70%}

/*신제품*/
.newproduct_list{position: relative;}
.newproduct_list > .box{position: relative;}
.newproduct_list > .box .photo{position: relative; overflow: hidden; padding-bottom: 62.25%;}
.newproduct_list > .box .photo img{position: absolute;  top: 0; width: 100%; transition: 0.2s;} 
.newproduct_list > .box:hover .photo img {transform: scale(1.1); transition: 0.2s;}
.newproduct_list > .box dl{padding: 2rem 0 4rem;}
.newproduct_list > .box dl dt {margin-bottom: 2rem;}
.newproduct_list > .box dl dt span{display: inline-block; color: var(--main_color); padding-bottom: 1rem; border-bottom: 1px solid var(--main_color); margin-bottom: 2rem; font-weight: 600; font-size: 0.9em;}
.newproduct_list > .box dl dt em{font-size: var(--conTit); display: block; font-weight: 700; }
.newproduct_list > .box dl dd.date{color: var(--gray); font-size: 0.9em;}


@media all and (min-width:620px) {
.newproduct_list{display: flex; gap: 2%; flex-wrap: wrap;}
.newproduct_list > .box{width: 49%;}
.newproduct_list > .box dl dt em{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
}

@media all and (min-width:1024px) {
.newproduct_list > .box{width: 32%;}
.newproduct_list > .box dl{padding: 4rem 0 6rem;}

}

/*제품소개 검색부*/
.productSearch{margin-bottom: 10rem;}
.productSearch .productTab{display: flex;  justify-content: space-between; align-items: center; margin:0 auto; margin-bottom: 5rem; }

.productSearch .productTab li{opacity: 0.7;}
.productSearch .productTab li span{display: block; padding-bottom: 1rem; font-size: 0.8em; font-weight: 600; text-align: center;}
.productSearch .productTab li:hover{opacity: 1; transition: 0.2s;}
.productSearch .productTab li.select{opacity: 1;}
.productSearch .productTab li.select span{display: block; padding-bottom: 1rem; border-bottom: 2px solid var(--main_color); }


.productSearch .search_form .srcBox{display: flex; justify-content: center; align-items: center;  margin: auto; position: relative;}

.productSearch .search_form .srcBox input.inputTxt{width: 100%; padding-right:100px; font-size: 0.9em; border: 3px solid var(--bgColor);}
.productSearch .search_form .srcBox input.inputTxt[type=text]:focus{box-shadow: none; border-color: var(--main_color) !important; border-width: 3px !important;}
.productSearch .search_form .srcBox button{height: 100%; font-size: 0.9em; width: 90px; background: transparent; font-weight: 600; display: flex;  justify-content: center; align-items: center; position: absolute; right: 3px;}
.productSearch .search_form .srcBox button:before{font-family: var(--icon); content:'\e8b6'; margin-right: 3px;}

@media all and (min-width:420px) {
.productSearch .productTab{ width: 90%; max-width: 600px;}
.productSearch .search_form .srcBox{ width: 90%; max-width: 600px;}
}

@media all and (min-width:1024px) {
.productSearch .productTab {max-width: 1024px;}
.productSearch .productTab li{width: 100px; height: 100px; border-radius: 500px; flex: none; border: 3px solid transparent; position: relative; padding: 0; background: var(--brColor);}
.productSearch .productTab li span{position: absolute; text-align: center; width: 100%; left: 0; right: 0; padding-top: 65%; border-bottom: 0; }
.productSearch .productTab li.select{border-color: var(--main_color); background: #fff;}
.productSearch .productTab li.select span{border-bottom: 0;}
.productSearch .productTab li span:before{content:''; background-size: 55px !important; position: absolute; left: 0; bottom: 20px; right: 0; top: 5px;}
.productSearch .productTab li span.t0:before{background: url(../images/common/tab_bg0.png) no-repeat center top}
.productSearch .productTab li span.t1:before{background: url(../images/common/tab_bg1.png) no-repeat center top}
.productSearch .productTab li span.t2:before{background: url(../images/common/tab_bg2.png) no-repeat center top}
.productSearch .productTab li span.t3:before{background: url(../images/common/tab_bg3.png) no-repeat center top}
.productSearch .productTab li span.t4:before{background: url(../images/common/tab_bg4.png) no-repeat center top}
.productSearch .productTab li span.t5:before{background: url(../images/common/tab_bg5.png) no-repeat center top}
.productSearch .productTab li span.t6:before{background: url(../images/common/tab_bg6.png) no-repeat center top}

.productSearch .search_form .srcBox{ width: 90%; max-width: 600px;}
.productSearch .search_form .srcBox input.inputTxt{padding: 2rem; font-size: 1.1em;}
.productSearch .search_form .srcBox button{width: 150px; }
.productSearch .search_form .srcBox button:before{margin-right: 5px;}
}

@media all and (min-width:1200px) {
.productSearch .productTab {margin-bottom: 10rem;}
.productSearch .productTab li span:before{top: 10px}
.productSearch .productTab li{width: 120px; height: 120px;}

.productSearch .search_form .srcBox{ max-width: 800px;}

}


/*제품리스트*/

.productList{position: relative;}
.productList > .box{position: relative;}
.productList > .box .photo{position: relative; overflow: hidden; padding-bottom: 62.25%; transition: 0.2s; }
.productList > .box .photo img{position: absolute;  top: 0; width: 100%; transition: 0.2s;} 
/*
.productList > .box:hover .photo img {transform: scale(1.1); transition: 0.2s;}*/
.productList > .box:hover .photo { webkit-box-shadow: 5px 10px 20px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 5px 10px 20px 10px rgba(0,0,0,0.1);
box-shadow: 5px 10px 20px 10px rgba(0,0,0,0.1);
transition: 0.2s;}
.productList > .box dl{padding: 2rem 0 4rem;}
.productList > .box dl dt {margin-bottom: 2rem;}
.productList > .box dl dt span{display: inline-block; color: var(--main_color); padding-bottom: 1rem; border-bottom: 1px solid var(--main_color); margin-bottom: 2rem; font-weight: 600; font-size: 0.9em;}
.productList > .box dl dt em{font-size: var(--conTit); display: block; font-weight: 700; }
.productList > .box dl dd.txt{color: var(--gray); font-weight: 500;}


@media all and (min-width:620px) {
.productList{display: flex; gap: 2%; flex-wrap: wrap;}
.productList > .box{width: 49%;}
.productList > .box dl dt em{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
}

@media all and (min-width:1024px) {
.productList > .box{width: 23%;}
.productList > .box dl{padding: 4rem 0 6rem;}

}


/*제품디테일 상단*/
.narrow_con .inner{max-width: var(--incontainer);}
.detailTop{position: relative; margin: 6rem 0;}

.productTop{position: relative; margin-bottom: 5rem;}
.productTop .title h3 span{font-size: 0.9em; display: inline-block; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--main_color); color: var(--main_color);}
.productTop .title h3 em{font-size: var(--subTit); display: block; font-weight: 600; margin-bottom: 1rem;  }
.productTop .title p{font-weight: 500; font-size: 1.1em;}

.detailTop .btnBox{display: flex; flex-wrap: wrap; }
.detailTop .btnBox a{position: relative; padding: 2rem; text-align: center; background: var(--monoGray); color: #fff; font-size: 0.9em; width: 50%; font-weight: 600; display: flex; justify-content: center; align-items: center;}
.detailTop .btnBox a:before{content:'\e166'; font-family: var(--icon); margin-right: 7px; font-weight: normal;}
.detailTop .btnBox a:last-child{background: var(--main_color);}
.detailTop .btnBox a:last-child:before{content:'\e99c';}

@media all and (min-width:1024px) {
.detailTop .btnBox{position: absolute; right: 0; top: 0;  gap: 4%; margin-top: 8rem;}
.detailTop .btnBox a{font-size: 0.8em;  width: 48%;}
}

@media all and (min-width:1200px) {
.detailTop{margin-bottom: 10rem;}
.detailTop .btnBox{min-width: 300px; margin-top: 9.5rem;}

}


.phtoSlider{margin-bottom: 2rem;}
.pro_slide .swiper-pagination{bottom:5%; position:absolute; right: 0; left: 0; margin: auto;}
.pro_slide .swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 4px;
  background: rgba(230,230,230,0.7);
  margin: 0 3px;
  border-radius: 0px;
  overflow: hidden;
  opacity: 1;
}

.pro_slide .swiper-pagination-bullet .bullet-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #007aff;
}




/*제품디테일 내용*/

.detailContent{position: relative;}
.detailContent .detailScroll{border-bottom: 1px solid var(--bdColor); margin-bottom: 5rem;}
.detailContent .scrollUl{display: flex; font-weight: 600; flex-wrap: wrap; display: none;}
.detailContent .scrollUl li{width: 20%; text-align: center;}
.detailContent .scrollUl li a{ font-size: 0.8em; line-height: 4rem; display: block;}
.detailContent .scrollUl:hover a{color: var(--gray);}
.detailContent .scrollUl:hover li:hover a{color: #323232;}
.detailContent .scrollUl li a span{display: block; padding: 1.2rem 0; border-bottom: 2px solid transparent;}
.detailContent .scrollUl li:hover a span{border-color: var(--main_color);}


.detailContent .detailInfo .info{position: relative; padding: 5rem 0; min-height: 5rem;}
.detailContent .detailInfo .info h4{ font-size: var(--conTit); margin-bottom: 20px;}

.detailContent .detailInfo .info .infoTxt{text-align: center;}
.detailContent .detailInfo .info .infoTxt p,
.detailContent .detailInfo .info .infoTxt ul,
.detailContent .detailInfo .info .infoTxt li{text-align: left;}
.detailContent .detailInfo .info .infoTxt img{}
.halfbox{display: flex; flex-wrap: wrap; gap: 3%;}
.halfbox .box{width: 100%;}



@media all and (min-width:360px) {
.detailContent .scrollUl li a{font-size: 0.85em;}

}


@media all and (min-width:1024px) {
.detailContent .scrollUl{display: flex;}
.detailContent .scrollUl li a{font-size: 0.9em;}

.halfbox .box{width: 48.5%;}
}


/*제품리스트*/
.data_table{width:100%; border-collapse:separate; font-size:0.85em;   text-align:center;}
.data_table th, .data_table td{border-bottom:1px solid var(--bdColor); padding:1rem 0.5rem; vertical-align:middle;  border-bottom:1px solid var(--bdColor)}
.data_table th{font-weight:500;  background:var(--monoGray); color:#ffffff; font-size:0.9em; border-left: 1px solid #f0f0f0; border-color:rgba(255,255,255,0.3); }
.data_table th:first-child{border: 0;}


.data_table td{word-break: break-all; position: relative;}
.data_table td a{display: block;}
.data_table td img{max-width: 90%; width: 100%;}
.data_table td img.ic_new{width: 30px; position: absolute; right: 0; top: 0; bottom: 0; margin: auto;}
.data_table td:first-child{font-weight: 600; word-break: keep-all;}
.data_table td:last-child{text-align: left;}

.data_table colgroup .col1{width: 25%;}
.data_table colgroup .col2{width: 30%;}
.data_table colgroup .col3{width: auto}

.data_table td a i.ic_more{display: none;}

@media all and (min-width:768px) {
.data_table{font-size:0.95em;}
.data_table td img.ic_new{width: 43px}
.data_table th, .data_table td{padding:1.2rem 2rem}

.data_table colgroup .col2{width: 200px;}

.data_table td a i.ic_more{display: block; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 40px; height: 40px; text-indent: -999999px; border-radius: 500px; transition: 0.2s;}
.data_table td a i.ic_more:before,
.data_table td a i.ic_more:after{content:''; display: block; width: 2px; height: 13px; background: var(--gray); position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}

.data_table tr:hover{background: var(--brColor);}
.data_table td a i.ic_more:after{width: 13px; height: 2px;}
.data_table tr:hover td{color: var(--main_color); font-weight: 600; transition: 0.2s;}
.data_table tr:hover td a i.ic_more{background: var(--main_color);  transition: 0.2s;}
.data_table tr:hover td a i.ic_more:before,
.data_table tr:hover td a i.ic_more:after{background: #fff;  transition: 0.2s;}
}


@media all and (min-width:1200px) {

.data_table colgroup .col1{width: 300px;}
.data_table colgroup .col2{width: 370px;}


.data_table th, .data_table td{padding:1.5rem 3rem}
.data_table th{padding: 1.5rem 3rem;}
}

/*동영상*/
.video_top{ position: relative; padding-bottom: 5rem;  margin-bottom: 5rem; border-bottom: 1px solid var(--bdColor);}

.video_top .info{position: relative; margin:0 auto; margin-bottom: 5rem; max-width: var(--incontainer2);}
.video_top .info h3 span{font-size: 0.9em; display: inline-block; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--main_color); color: var(--main_color);}
.video_top .info h3 em{font-size: var(--subTit); display: block; font-weight: 600; margin-bottom: 1rem;  }
.video_top .info p{font-weight: 500; font-size: 1.1em;}


.videoCon{ max-width: var(--incontainer2); margin: 0 auto;}
.videoCon .youtube_in{padding-bottom: 56.25%; position: relative;}
.videoCon .youtube_in iframe{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.video_list{position: relative;}
.video_list > .box{position: relative;}
.video_list > .box .photo{position: relative; overflow: hidden; padding-bottom: 56.25%;}
.video_list > .box .photo img{position: absolute;  top: 0; width: 100%; transition: 0.2s;} 
.video_list > .box:hover .photo img {transform: scale(1.1); transition: 0.2s;}
.video_list > .box dl{padding: 2rem 0 4rem;}
.video_list > .box dl dt {margin-bottom: 2rem;}
.video_list > .box dl dt span{display: inline-block; color: var(--main_color); padding-bottom: 1rem; border-bottom: 1px solid var(--main_color); margin-bottom: 2rem; font-weight: 600; font-size: 0.9em;}
.video_list > .box dl dt em{font-size: var(--conTit); display: block; font-weight: 700; }
.video_list > .box dl dd.date{color: var(--gray); font-size: 0.9em;}


@media all and (min-width:620px) {
.video_list{display: flex; gap: 2%; flex-wrap: wrap;}
.video_list > .box{width: 49%;}
.video_list > .box dl dt em{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
}

@media all and (min-width:1024px) {
.video_list > .box{width: 32%;}
.video_list > .box dl{padding: 4rem 0 6rem;}

}


/* 제품소개 */
.product_con{display:flex; gap:10rem; overflow: hidden; position: relative;}
.product_img{width: 60%; overflow: hidden; position: relative;}
.product_img .swiper-button-next,
.product_img .swiper-button-prev{background: none;}
.product_img .swiper-button-next span,
.product_img .swiper-button-prev span{font-size:4rem}

.product_info{width: calc(40% - 10rem);}
.product_info dl dt {font-size: 3rem; font-weight: bold; margin-bottom: 2rem;}
.product_info dl dt span{display:block; font-weight:900; font-size: 5rem;}
.product_info ul{display: flex; gap:2rem; text-align: center; margin-top: 3rem;}
.product_info ul li{flex:1}
.product_info ul li a{display: flex;gap:1rem; justify-content: center; align-items: center; padding: 1.5rem 2rem; border: 1px solid #ccc; transition: .5s; }
.product_info ul li:last-child a{background: var(--sub_color); color:#fff; border: none;}
.product_info ul li a:hover{background: #333; color:#fff}

.thumb_list{display: flex; gap:2rem}
.thumb_list dl{flex:1;  text-align: center;}
.thumb_list dl dt{background: var(--main_color); color:#fff; padding: 1rem;}

.flex_layout{display: flex; gap:5rem}
.flex_layout p{width: 70%;}
.flex_layout > div{width: 30%;}

.table02 th,
.table02 td{padding: 1rem;}



/*CI 소개*/
.ci_top{border:1px solid #f0f0f0; background:url(../images/pr/ci_bg.png) repeat; background-size:10px}
.ci_top .box{position:relative; padding:80px 0px 70px; text-align: center;}
.ci_top .box img{width: 70%;}
.ci_top .box h4{display:inline-block; font-size:0.8em; padding:5px 10px; background:var(--monoGray); color:#ffffff; font-weight:500; position:absolute; left:0; top:0; left:0; }

.ci_box .ci_bb .right_box{text-align:center;}
.ci_box .ci_bb .right_box .bbTxt{padding:20px 50px;  font-weight:600; font-size:1.2em; border: 5px solid var(--brColor); border-radius: 500px;}
.ci_box .ci_bb .right_box .bbTxt span{color: var(--main_color);}

.ci_box .mark_li{display: flex; flex-wrap: wrap; text-align: center;}
.ci_box .mark_li li{margin-bottom: 10px;}
.ci_box .mark_li li span{font-weight:500; color:var(--monoGray); padding:5px 15px; background:var(--brColor); border-radius:500px}
.ci_box .mark_li li img{max-width: 70%; display: block; margin: 0 auto;}


.color_info{display: flex; flex-wrap: wrap;}
.color_info .c_info{width:100%; padding:20px; background:#808080; color:#ffffff; font-size:0.9em; font-weight:500; margin-bottom: 5px;}
.color_info .c_info dt{font-weight: 600; font-size: 0.8em; margin-bottom: 5px;}

.color_info .c_info.cl01{background:linear-gradient(90deg, rgba(0,160,233,100) 50% , rgba(27,34,106,100) 100%)}
.color_info .c_info.cl02{background:rgba(0,160,233,100);}
.color_info .c_info.cl03{background:rgba(102,100,100,100);}



@media all and (min-width:640px) {
.color_info .c_info{width:33.33%; margin-bottom: 0;}
.ci_box .mark_li li{width: 50%; margin-bottom: 0;}
}

@media all and (min-width:768px) {
.ci_top .box{position:relative; padding:50px 0px; float:left; width:50%}
.ci_top:after{content:''; display:block; clear:both}

.ci_box .ci_bb .right_box .bbTxt{font-size:1.4em}
.ci_box .comm_btn_list li{max-width:300px}
}

@media all and (min-width:1200px) {
.ci_box .ci_bb .right_box .bbTxt{border-width:10px;}
.ci_top .box{padding:80px 0px; }

.ci_box .img_li ul li span{font-size:1.1em; padding:10px }

.color_info .c_info{padding:30px; letter-spacing:0}
}



/* 연구소 소개 */
.rnd_list{display: flex; gap:2rem; justify-content: center; text-align: center; font-weight: bold;}
.rnd_list li p{width: 30rem; height: 30rem; border-radius: 100%; overflow: hidden; margin-bottom: 2rem;}


/* 인증서 */
.cer_list li{width: calc(20% - 3rem); text-align: center;}
.cer_list li p{border: 1px solid #ccc; box-shadow: 0 0 1rem rgba(0,0,0,0.2); margin-bottom: 2rem;}
.cer_list li span{}

/* 온라인문의 */
.online_form{display: flex; gap:5rem}
.online_form h3{flex-basis: 30%;  font-size:1.6rem; font-weight: normal; padding:0 0 2rem 0}
.online_form h3 span{display: block; font-weight: bold; color:var(--main_color); font-size: 3rem;}
.online_form h3 p{position: relative;}



/* 라디오버튼 */
.radio_wrap {display: inline-block; position: relative; padding-left: 3rem; margin-right: 1rem; margin-bottom: 1.2rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.radio_wrap input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark {position: absolute; top: 0;left: 0; height: 2rem; width: 2rem; background-color: #eee; border-radius: 50%;}
.radio_wrap:hover input ~ .checkmark {background-color: #ccc;}
.radio_wrap input:checked ~ .checkmark {background-color:var(--sub_color);}
.checkmark:after {content: ""; position: absolute; display: none; }
.radio_wrap input:checked ~ .checkmark:after { display: block;  }
.radio_wrap .checkmark:after { top: 50%; left: 50%; transform: translate(-50%, -50%);  width: 8px;  height: 8px; border-radius: 50%; background: white; }

.form_area{width: 70%;}
.online_form p{padding-top: 2rem;}
.online_form dl{display:flex; align-items: center; padding:3rem 0; border-bottom:1px dotted #ccc}
.online_form dl dt{width:20%; text-align: center;}
.online_form dl dd{width: 80%;}
.form_input{border: 1px solid #ccc; padding:1rem; width:100%; font-size:1.4rem}
.form_text{border: 1px solid #ccc; padding:2rem; width:100%; height: 30rem; overflow-y: auto;  font-size:1.4rem}
#btn_submit{background: var(--sub_color); color:#fff; padding:1rem 2rem}



/* 아코디언 */
.beefup {margin: 1em 0; border: 1px solid #ddd; border-radius: 4px; }
.beefup:hover {border-color: #ccc;}
.beefup:first-child {margin-top: 0;}
.beefup__head, .beefup__body {padding: 2rem;}
.beefup__head {cursor: pointer; position: relative; margin: 0; padding-right: 50px;}
.beefup__head span{display: inline-flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; margin-right: 3rem; border-radius: 100%; background: var(--sub_color); color:#fff; font-family: var(--font-eng);}
button.beefup__head, .beefup__head > button { cursor: pointer; display: block; width: 100%; background: none; border: 0; font: inherit; text-align: inherit;}
button.beefup__head[aria-disabled], .beefup__head > button[aria-disabled] {cursor: default; outline: 0; }
.beefup__head > button{position: relative; z-index: 1; margin: -10px -50px -10px -20px; padding: inherit; width: calc(100% + 70px); background: inherit; border: inherit;}
.beefup__head::after {transition: transform 0.2s ease-out; content: ""; transform: translate(0, -50%) rotate(45deg); position: absolute; top: 50%; right: 20px; z-index: 0; margin-top: -2px; padding: 3px; border-width: 0 2px 2px 0; border-style: solid; color: #ccc;}
.beefup.is-open > .beefup__head::after {transform: translate(0, -50%) rotate(225deg); margin-top: 2px;}
.mockup{background: #fafafa; padding:2rem}  




/*faq*/

.faq_list h4 {color:#161616; font-weight: 600; position:relative; padding:2.5rem; padding-right: 5rem; margin-top:0;  border: 1px solid var(--bdColor); margin-bottom: 20px; transition: 0.2s;}

.faq_list h5{font-size: var(--conTit); margin-bottom: var(--smb);}

.faq_list h4:hover{border-color: var(--main_color); transition: 0.2s;}
.faq_list h4.responsive-tabs__heading--active{border-color: var(--sub_color); background: var(--sub_color); color: #fff; margin-bottom: 0;}
.faq_list h4.responsive-tabs__heading--active:before{background: var(--main_color);}
.faq_list .qna_answer{position:relative; display:none;  margin-bottom: 20px; padding: 2.5rem 0;}
.faq_list .qna_answer .img_box{text-align: center;}

.faq_list .qna_answer .half_common .box_con{margin-bottom: var(--smb);}
.faq_list .qna_answer .half_common .box_con .left_box{margin-bottom: 20px;}


.faq_list h4 i{border:0px; right:1%; }
.faq_list h4 i:before,
.faq_list h4 i:after{display:none}

.faq_list h4 i{display:flex; justify-content: center; align-items: center; background:none; width:20px; height:20px; position:absolute;  right:2rem; top:0; bottom:0; margin:auto; text-align:center;  font-size:1.2em; line-height:20px; top:0; bottom:0; margin:auto;  transition:0.3s; }
.faq_list h4 i:after{display: block; font-family:var(--icon); content:'\e313'; }

.faq_list h4.responsive-tabs__heading--active i{border-radius:500px; background:none;}
.faq_list h4.responsive-tabs__heading--active i:after{ 

-webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg)
  }


@media all and (min-width:768px) {
.faq_list .qna_answer .half_common .box_con .left_box{margin-bottom: 0;}
.faq_list .qna_answer .half_common .box_con{align-items: center;}


}




@media all and (min-width:1200px) {
  
.faq_list h4 { padding:3rem; padding-left:8rem; font-size:1.1em; margin-bottom: 30px;}
.faq_list h4:before{content:'Q'; display:block; position:absolute; width:35px; height:35px; line-height:35px; font-weight:600; text-align:center; border-radius:500px; background:var(--monoGray); color:#ffffff; left:2.5rem ; top:2.5rem; }
.faq_list .qna_answer{padding:5rem 0; font-size: 1.05em; }
.faq_list h4 i{right: 3rem;}

}


.responsive-tabs-wrapper{}
.responsive-tabs__list { display: none;}
.responsive-tabs__heading { display: block; cursor: pointer; }
.responsive-tabs__panel--closed-accordion-only { display: none;}


/* 카다로그 */
.category{display: flex; justify-content: center; width: 60%; margin: auto; margin-bottom: 10rem;}
.category li{border: 1px solid #ccc; margin-left: -1px; flex:1}
.category li a{display: block; padding:1rem 2rem; text-align: center; transition: .5s;}
.category li a:hover,
.category_on a{background: var(--main_color); color:#fff;}

.catalog_list{display: flex; flex-wrap: wrap; gap:5rem; margin-right: -5rem;}
.catalog_list li{width: calc(25% - 5rem); position: relative;transition: .5s;}

.catalog_list li p{border:1px solid #ccc}
.catalog_list li p a{pointer-events: none}
.catalog_list li dl{text-align: center; margin-top: 2rem;}
.catalog_list li dl dt{font-size: 1.6rem;}
.catalog_list li dl dd{font-size: 2rem;}
.catalog_list li:hover p{box-shadow: 0 0 1rem rgba(0,0,0,0.2);}

.button_pdf{position: absolute; top: 30%; transform: translateX(-50%);  opacity: 0; transition: .5s;}
.button_pdf a{display: flex; flex-direction: column; align-items:center; justify-content: center; width: 120px; height: 120px; border-radius: 100%; background: #333; color:#fff; transition: .5s;}
.button_pdf a:hover{transform: scale(1.1);}

.button_ebook{position: absolute; top: 30%; transform: translateX(50%);  opacity: 0; transition: .5s;}
.button_ebook a{display: flex; flex-direction: column; align-items:center; justify-content: center; width: 120px; height: 120px; border-radius: 100%; background:var(--sub_color); color:#fff; transition: .5s;}
.button_ebook a:hover{transform: scale(1.1);}


.catalog_list li:hover .button_pdf{left: 10%; transform: translateX(10%); opacity: 1; display: flex;}
.catalog_list li:hover .button_ebook{right: 10%; transform: translateX(0%); opacity: 1; display: flex;}

@media all and (max-width:1280px) {    
    .button_pdf a{width: 100px; height: 100px;}
    .button_ebook a{width: 100px; height: 100px;}
    
}

@media all and (max-width:1279px) {    
    .catalog_list li:hover .button_pdf{top: 20px; left: 50%; transform:translateX(-50%);}
    .catalog_list li:hover .button_ebook{top:130px; left: 50%; transform:translateX(-50%);}
    
}

@media all and (max-width:1023px) {    
    .catalog_list{gap:2rem; margin-right: -2rem;}
    .catalog_list li{width: calc(50% - 2rem);}
    .catalog_list li p a{pointer-events:all}

    .catalog_list li:hover .button_pdf{display: none;}
    .catalog_list li:hover .button_ebook{display: none;}
   
}

/* 전시회 */
.exhibition_list{display: flex; flex-wrap: wrap; gap:5rem; margin-right: -5rem;}
.exhibition_list li{width: calc(33% - 5rem); position: relative;}
.exhibition_list li p{border: 1px solid #ccc;}
.exhibition_list li:hover p{border: 3px solid var(--main_color); transition: .3s;}
.exhibition_list li span{display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 100%; color:#fff; position: absolute; top: -2rem; left:2rem;}
.exhibition_end{background: #666; }
.exhibition_ing{background:var(--main_color); }
.exhibition_list li h5{font-size: 2.4rem; padding:1rem 0}
.exhibition_list li dl{display: flex; gap:2rem}
.exhibition_list li dl dt{color:var(--main_color); width: 10%;}
.exhibition_list li dl dd{width: calc(90% - 2rem);}

@media all and (max-width:1023px) {   
    .exhibition_list{margin-right: 0;}
    .exhibition_list li{width: 100%;}
    .exhibition_list li dl dt{width: 20%;}
    .exhibition_list li dl dd{width: calc(80% - 2rem);}
}

/* 전시회 상세 */
.exhibition_detail{overflow: hidden; }
.exhibition_detail h2{text-align: center; font-size: 4rem;}
.exhibition_information{display: flex; gap:3rem; justify-content: center; padding:2rem 0 5rem 0}
.exhibition_information dl{ display: flex; gap:2rem; width: 21%;}
.exhibition_information dl dt{color:var(--main_color); width: 30%;}
.exhibition_information dl dd{width: calc(70% - 2rem);}

.exhibition_image{width: 50%; overflow: hidden; text-align: center; margin: auto;}
.exhibition_thumb{width: 50%; overflow: hidden; margin: 5rem auto;}

.exhibition_image .swiper-button-next,
.exhibition_image .swiper-button-prev{background: none;}

.exhibition_image .swiper-button-next{right: 20%;}
.exhibition_image .swiper-button-prev{left:20%}

.exhibition_image .swiper-button-next span,
.exhibition_image .swiper-button-prev span{font-size: 5rem;}