@charset "utf-8";

.f_s80 {font-size:80px;}

/********* header ********/
header {transition: background-color 0.3s, color 0.3s;}
header a {color: white;transition: color 0.3s;}
header.active {background-color:#fefefe;}
header.active a {color: black;}
/********* //header ********/


/********* mainBanner ********/
.mainBannerimg1 {background-image:url(/theme/basic/img/mainBannerimg1.jpg); background-size:cover; background-position:center;}
.mainBannerimg2 {background-image:url(/theme/basic/img/mainBannerimg2.jpg); background-size:cover; background-position:center;}
.mainBannerimg3 {background-image:url(/theme/basic/img/mainBannerimg3.jpg); background-size:cover; background-position:center;}
.swiper-pagination{left:50%; bottom:80px; transform:translateX(-50%)}
.swiper-pagination-bullet {background-color: transparent !important;  border:1px solid #fefefe; opacity: 1; margin:0 12px}
.swiper-pagination-bullet-active {background-color: #fefefe !important;}


.mainSwiperBox {
    overflow: hidden;
}

.mainSwiperBox p {top: 250px;position: relative;transition: opacity 0.8s ease-in-out; /* top은 제외 */opacity: 0;}

/* active일 때만 top 이동 + opacity */
.swiper-slide-active .mainSwiperBox p {top: 0;opacity: 1;transition: top 1s ease-in-out, opacity 1.5s ease-in-out;}
.swiperBtnBox{left:10dvw; bottom:200px}

.gageBar{background:rgba(255,255,255,0.2)}
.gageBar span{display:block; left:0;top:0; background:#fefefe;}

.swiperBtn > div{border:2px solid #fefefe; transform:rotate(45deg); cursor: pointer;}
.swiperBtn .swiperPrevBtn{border-width:0px 0 2px 2px}
.swiperBtn .swiperNextBtn{border-width:2px 2px 0 0}
.dumy{opacity: 0.7 !important;}
/********* //mainBanner ********/


/********* company ********/
.company {background-image:url(/theme/basic/img/companyBg.jpg); background-size:cover; background-position:center;}
.companyCnt {gap:24px;}
/********* //company ********/


/******** products **********/
#products .scroll-link.active {background-color: #222222;color: #ffffff;padding:16px 24px 16px 24px;}
/******** //products ********/

/********* notice ********/
.viewImg img{width:100% !important; height:auto !important}
.latestTit{white-space: nowrap; overflow:hidden;text-overflow: ellipsis;}

/* .galleryImg 요소에 비율 박스(padding-top) 적용 */
.galleryImg {background-repeat: no-repeat;background-position: center;background-size: cover;}
/********* //notice ********/


/******** contact ********/
.checkbox {width: 20px;height: 20px;appearance: none;border: 1px solid #999;border-radius: 3px;position: relative;cursor: pointer;}
.checkbox:checked::before {content: "✓";position: absolute;top: -3px;left: 3px;font-size: 14px;color: #333;}
.root_daum_roughmap .wrap_map{height:100% !important}
.subjectTextbox {border:none;}
/******** //contact ********/

/******** footer ********/
.m_polrcy {display:none;}
/******** //footer ********/

.floating-buttons {right: 20px; bottom: 60px; gap: 12px;}
.floating-button {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);cursor: pointer;}



.loginAuto > input{left:-9999px}
.loginAuto > input + label{cursor: pointer;}
.loginAuto > input + label:before{content:''; display:block; width:14px; height:14px; border:1px solid #222; margin-right:12px; transition: ease-in-out 0.3s;}
.loginAuto > input[type="checkbox"]:checked + label:before{background:#222}
.loginAuto > input[type="checkbox"]:checked + label:after{position:absolute; content:''; display:block; width:3px; height:9px; border:1px solid #fefefe; border-width:0 1px 1px 0; 
transform:translateY(-50%) rotate(45deg); left:6px; top:46%}

.custom-upload-button {border:none; cursor: pointer;}
.btn_submit {cursor: pointer;}

.loginBox input[type='text'],.loginBox input[type='password']{border:1px solid #999}