/* 공통 */
.sub_bg{background-color: #fafafa; padding:10rem 0}
.mb{margin-bottom:30px !important;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.bgWrap{padding:30px 0px; background:#c8c8c8; background-size:cover !important}
.mEnter{display:block;}

.tit_dot{font-size:2rem; font-weight:800; padding-left:3rem; position:relative}
.tit_dot:before,
.tit_dot:after{content:''; width:1.4rem; height:75%; background:var(--main_color); position:absolute; left:0; top:0; border-radius:5px 0px; transform: skew(-10deg); z-index:1; }
.tit_dot:after{left:5px; top:5px; z-index:0;  background:#ccc; }
@media all and (min-width:768px) {
.mb{margin-bottom:50px !important;}
.bgWrap{padding:50px 0px;}
.mEnter{display:inline;}
.tEnter{display:block;}
.tit_dot{font-size:2.3rem;}

}


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

.bgWrap{padding:70px 0px;}
.mb{margin-bottom:70px !important;}
}


@media all and (min-width:1280px) {
.mb{margin-bottom:100px !important;}
.bgWrap{padding:100px 0px;}
.tEnter{display:inline;}
.pEnter{display:block;}
.tit_dot{font-size:2.6rem; padding-left:3.5rem}

.tit_dot:before,
.tit_dot:after{height:60%; }
.tit_dot:before{ top:5px;}
.tit_dot:after{top:10px;}
}

@media all and (min-width:1600px) {
.bgWrap{padding:120px 0px;}
}


/* 인사말 */
.greetings{position:relative}
.greetings h3{font-size:2.3rem; position:relative; color:var(--main_color); margin-bottom:20px;}
.greetings p{word-break:break-all; text-align:justify; margin-bottom:20px}
.greetings .sign_txt{text-align:right; margin-bottom:0}
.greetings .sign_txt b{display:block;}
.greetings .sign_txt img{max-width:160px; width:50%;}

.company_info{position:relative; color:#fff}
.company_info dl{background:rgba(255,255,255,0.2);  padding:2rem; margin-bottom:20px;}
.company_info dl:last-child{margin-bottom:0}
.company_info dt{margin-bottom:10px; font-weight:700; text-align:center; font-size:2rem; position:relative}
.company_info dt:before{content:'\e939'; font-family:'mso'; font-weight:normal; display:block; text-align:center; font-size:2.6em}
.company_info dl:nth-child(2) dt:before{content:'\f1e7'; }
.company_info dl:nth-child(3) dt:before{content:'\f10a'; }
.company_info dd{word-break:break-all; text-align:justify; }

.bg_greeting{background:url(/images/company/bg_greeting.jpg) no-repeat center center;}

.img_list{display: flex; flex-wrap: wrap; gap:4%}
.img_list li{width: 48%; text-align: center; margin-bottom:2rem; }
.img_list li img{ width:100% }


@media all and (min-width:768px) {
.greetings h3{font-size:2.6rem; margin-bottom:50px;}

.company_info{display:flex; flex-wrap:wrap; gap:4%}
.company_info dl{width:30.6667%; margin:0; padding:0; background:none; border:0; }
.company_info dt{font-size:2.3rem; }

.img_list li{width: 30.66%; margin-bottom:4rem}

}

@media all and (min-width:1280px) {
.greetings h3{font-size:3rem; }
.greetings p{line-height:1.5; font-size:1.9rem}
.company_info dt{font-size:2.8rem; margin-bottom:20px}
}

/*사업분야*/
.business_area{position:relative;}
.business_area .busi{position:relative; margin-bottom:30px; padding-top:70%; overflow:hidden}
.business_area .busi:before{content:''; background:#f0f0f0; background-size:cover !important; background-position:center 20%; position:absolute; z-index:0; top:0; bottom:10rem; left:0; right:0; transition:0.3s}
.business_area .busi:last-child{ margin-bottom:0px}
.business_area .busi.aos-animate:before{animation: zoomout 1.5s ease-in-out alternate;}
.business_area .busi01:before{background:url(/images/company/business01.jpg) no-repeat ;}
.business_area .busi02:before{background:url(/images/company/business02.jpg) no-repeat ;}
.business_area .busi03:before{background:url(/images/company/business03.jpg) no-repeat ;}




.business_area .busi dl{position:relative; z-index:1; width:90%; background:#fff; padding:2.5rem 2rem}
.business_area .busi dt{font-weight:700; font-size:2rem; margin-bottom:20px; color:var(--main_color)}
.business_area .busi dd{margin-bottom:5px; padding-left:1rem; position:relative}
.business_area .busi dd:before{content:''; display:block; width:3px; height:3px; background:var(--main_color); position:absolute; left:0; top:10px;}

@keyframes zoomout {	0% { transform: scale(1.1); }  50% { transform: scale(1.1); }   100% {        transform: scale(1.0);    }}
@-webkit-keyframes zoomout {	0% { transform: scale(1.1); }   50% { transform: scale(1.1); }  100% {        transform: scale(1.0);    }}


@media all and (min-width:768px) {
.business_area{display:flex; flex-wrap:wrap; gap:4%; max-width:1024px; margin:0 auto}
.business_area .busi{width:30.66%; padding-top:50rem; margin-bottom:0}
.business_area.list02{gap:6%}
.business_area.list02 .busi{width:47%; }
.business_area .busi dt{font-size:2.3rem; }
.business_area .busi:before{bottom:0}
}

@media all and (min-width:1280px) {
.business_area .busi dt{font-size:2.8rem; }
.business_area .busi dl{padding:3rem}

.business_area .busi:hover:before{transform: scale(1.1); transition:0.3s}
}

.busienss_list{display: flex; gap:3rem;  margin-bottom: 10rem;}
.busienss_list li{flex:1}
.busienss_list li p{background:#fa6f30; color:#fff; font-weight: bold; text-align: center; padding: 1rem 2rem;}


@media all and (max-width:1024px) {
    .busienss_list{flex-direction: column;}

}
/* 제품 개요 */
.overview{padding: 5rem 0;}
.overview dt{font-weight: bold; font-size: 5rem; margin-bottom: 2rem;}
.overview dd span{display: block; font-weight: bold; color:#fa6f30}


/*기술현황추가css*/

.fancybox__thumb{padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 0.8))) !important}
.cer_list{display: flex; flex-wrap: wrap; gap:4%}
.cer_list li{width: 48%; text-align: center; margin-bottom:2rem; cursor:pointer}
.cer_list li img{border: 5px solid #f8f8f8; width:100% }
.cer_list li p{padding-top: 2rem;}

@media all and (min-width:768px) {
.cer_list li{width: 30.66%; margin-bottom:4rem}
}

@media all and (min-width:1280px) {
.certi_wrap{display:flex; flex-wrap:wrap; align-items:flex-start;}
.certi_wrap .tit_dot{width:30%}
.certi_wrap .cer_list{width:70%}
}

/* 회사연혁 */
.bg_con{padding:10rem 0; background: #fafafa;}
.history_con{display: flex; flex-wrap: wrap; position: relative; padding:5rem 0; justify-content:space-between;}
.history_con::before{content: ''; width: 1px; height: 100%; background:#e6e6e6; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.history_con dl{position: relative; width:50%;   margin-top:15rem;}

.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:before{content: ''; width: 1rem; height: 1rem; background: var(--main_color); border-radius: 100%; position: absolute; top: 0; left:-.5rem;}
.history_con dl:after{content: ''; width: 5rem; height:1px; background: var(--main_color); position: absolute; top:.5rem; left: 0; }
.history_con dl dt{ font-weight: bold; font-size:2.5rem; color:var(--sub_color); padding-top:1rem}
.history_con dl dd{padding-top:1rem; position:relative; word-break:break-all}
.history_con dl dd b,
.history_con dl dd span.txt{display:block;}

.history_con dl dd b{color:#666}




@media all and (min-width:768px) {
.history_con{padding-bottom:10rem}
.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{padding-bottom:15rem}
.history_con dl{margin-top:20rem}
.history_con dl dt{padding-top:5rem; font-size:2.8rem}

}

/* 오시는길 */
.address_info{position:relative;}
.address_info .info{margin-bottom:2rem; position:relative}
.address_info h3{color:var(--main_color); margin-bottom:1rem}
.address_info p{color:var(--sub_color);/* font-size:2rem;*/ font-weight:600; word-break:break-all}
.location_info{display:flex; flex-wrap:wrap; gap:4%;}
.location_info dl{width:48%; padding:3rem 2rem; border:1px solid #e6e6e6; border-radius:10px;  position:relative; margin-bottom:2rem}
.location_info dl:after{content:''; width:30px; height:30px; right:2rem; top:2.5rem;  position:absolute; font-family:'mso'; font-weight:normal;  line-height:100%; font-size:3rem; color:#666; text-align:center}
.location_info dl dt{font-weight:600; font-size:1.8rem; margin-bottom:1rem}
.location_info dl.ic_email{width:100%}

.location_info dl.ic_tel:after{content:'\f01f';}
.location_info dl.ic_fax:after{content:'\e8ad';}
.location_info dl.ic_email:after{content:'\f18a';}

.map_warp #map{height:400px;}
.customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: var(--main_color);background: var(--main_color) url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}


@media all and (min-width:768px) {
.address_info{display:flex; flex-wrap:wrap; gap:3%}
/*
.address_info .info{width:48%; margin-bottom:5rem; padding-left:6rem;}
.address_info .info:before{content:''; position:absolute; left:0; top:0; font-size:4rem; font-family:'mso'; color:#666}
.address_info .info:first-child:before{content:'\ebbc';}*/
.address_info .info{width:48%;margin-bottom:5rem;}
.location_info dl,
.location_info dl.ic_email{width:30.66%; margin-bottom:5rem}
}

@media all and (min-width:1280px) {
.location_info dl{padding:3rem}
.location_info dl:after{right:3rem}


.map_warp #map{height:600px;}


}

/* 경영방침 */
.management_list{display: flex; flex-wrap: wrap; gap:10rem 4rem ; padding-bottom: 10rem;}
.management_list li{flex-basis: calc(50% - 4rem); text-align: center; position: relative;}
.management_list li::before{content: ''; width: 10rem; height: 10rem; background: var(--main_color); position: absolute; bottom: -2rem; right: -2rem;}
.management_list li p{position: relative;}
.management_list li dl{position: absolute; bottom: 0; right: 0; background: #fff; padding:2rem}
.management_list li dl::before{content: ''; width: 0; height: 0; background: transparent; border-left:50px solid #fff; border-top: 50px solid transparent; position: absolute; left: 0; bottom: 0; z-index: 9;}
.management_list li dl dt{font-weight: bold; font-size:2.4rem; padding-bottom: 1rem;}
.management_list li dl dt span{display: block; font-weight: bold; font-size:1.6rem; color:#ccc}





/* 설비현황 */
.fac_list{display: flex; flex-wrap: wrap; gap:3rem}
.fac_list li{flex-basis: calc(33% - 3rem); text-align: center; }
.fac_list li img{}
.fac_list li p{font-weight: bold; background: #333; color:#fff; padding:1rem}




/* 온라인문의 */
.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;}

/* 제품소개 게시판 스킨 */
.product_view{display: flex; gap:5rem; border:1px solid #e6e6e6; padding:5rem 2rem; margin-bottom:3rem}
.product_photo{position:relative; flex-basis: 50%; overflow: hidden;}
.pro_img{position: relative; margin-bottom: 2rem;}
.pro_img .swiper-button-next,
.pro_img .swiper-button-prev{background: none;}

.pro_img .swiper-button-next span,
.pro_img .swiper-button-prev span{color:#fff; font-size: 5rem;}

.product_detail{flex-basis:calc(50% - 10rem)}
.product_detail dt{font-weight: bold; font-size: 4rem; padding-bottom: 2rem;}
.product_detail dt span.cate{color:var(--main_color); font-size:0.6em; display:block;}
.product_detail dt i{color:#666; font-size:0.6em; margin-left:1rem; font-weight:700}
.product_detail dd span{display:flex; gap:1rem;  margin-top: 2rem;}
.product_detail dd span a{display: flex; gap:1rem;  justify-content: center; align-items: center; font-size: 1.6rem; background:var(--main_color); color:#fff; padding:1rem 2rem 1rem 1rem; transition: .5s;}
.product_detail dd span a i{margin-right:2px}
.product_detail dd span a:hover{background: var(--sub_color);}
.product_detail dd span a:last-child{background:var(--mono_color)}
.product_detail dd span a:last-child:hover{background: var(--sub_color);}

.pro_thumb{width: 50% !important; overflow: hidden; position: relative;}
.pro_thumb .swiper-slide-thumb-active img{border: 5px solid var(--main_color);}


.product_spec{margin-top:5rem}
.product_spec h2{font-weight: bold; font-size: 2rem; padding-bottom: 1rem;}
.pro_table{border-top:2px solid var(--main_color);}
.pro_table th,
.pro_table td{padding:1rem 2rem; border-bottom: 1px solid #ccc; text-align: left;}
.pro_table th{background: #fafafa;}

.product_btn{display:flex; justify-content:center; margin-bottom:7rem}
.product_btn li a{display:block; line-height:5rem; padding:0 6rem; background:var(--main_color); color:#fff; font-weight:600; width:100%; max-width:600px; text-align:center}
.product_view_bottom{margin-bottom:5rem}

@media all and (min-width:1280px) {
.product_view{margin-bottom:7rem}
.product_view_bottom{margin-bottom:7rem}
.product_btn{margin-bottom:10rem}
.product_btn li a{padding:0 12rem}
}


/*제품도면다운로드*/

 .open-button {
        background-color: #cb0e00;
        color: #fff;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        /*position: fixed; bottom: 23px; right: 28px; */
        width: 280px;
        margin: 5em auto;
        display: block
    }
	.form-popup{background:rgba(0,0,0,0.4); z-index: 999999999; display: none;  position:fixed; top:0; left:0; bottom:0; right:0; transition:0.3s }
    .form_inner {
        position: fixed; left: 50%; top: 50%;  transform: translate(-50%, -50%);
        z-index: 9999999999;
        width: 90%;
		max-width:680px;
        background: #fff
    }
	.form_inner  h2{font-size:2rem; padding:1.5rem 2rem; background:var(--sub_color); color:#fff; text-align:center}
    .form-container {
      
        padding: 2rem;
        text-align: left;
    }

    .form-container h1 {
        font-size: 30px;
        margin: 0 0 1em 0
    }

    .form-container h1 p {
        font-size: 18px;
        color: #999
    }

    .form-container input[type=text],
    .form-container input[type=password] {
        width: 100%;
        padding: 15px;      
        border: none;
        background: #f8f8f8;
        float: left;
    }

    .form-container input[type=text]:focus,
    .form-container input[type=password]:focus {
        background-color: #f0f0f0;
        outline: none;
    }

    .form-container .btn_catalog {
        background-color: #002854;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
    }

    .form-container .cancel {
        background: none;
        font-weight: bold;
        color: #fff;
		background:var(--sub_color);
        font-size: 2rem;
        position: absolute;      
        border: none;
		left:50%;
		bottom:-60px;
		border-radius:500px; font-weight:600;
		width:50px; height:50px;
		transform:translateX(-50%);
    }

    .form-container .btn:hover,
    .open-button:hover {
        opacity: 1;
    }
	.form-container dl {display:flex; flex-wrap:wrap; gap:4%; align-items:center}
    .form-container dl dt {       
        width: 26%;
		font-weight: 600;
		margin-bottom:1rem;
    }

    .form-container dl dd {
        float: left;
        width: 70%;
		margin-bottom:1rem;
    }

    .check_warp {
        position: relative;
        clear: both;
		margin-top:2rem;
    }

    .check_box {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
		font-weight:600;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .check_box input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    .check_box:hover input~.checkmark {
        background-color: #ccc;
    }

    .check_box input:checked~.checkmark {
        background-color: var(--main_color);
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .check_box input:checked~.checkmark:after {
        display: block;
    }

    .check_box .checkmark:after {
        margin-left: -4px;
        margin-top: -8px;
        width: 8px;
        height: 12px;
		left:50%; top:50%;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

@media all and (min-width:1280px) {
.form_inner  h2{font-size:2.3rem; padding:2rem}
.form-container{padding:4rem}
}

/* 라디오버튼 */
.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: 2.5rem; width: 2.5rem; 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(--main_color); color:#fff; padding:1.5rem 2rem; font-weight:600}



/* 아코디언 */
.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}