:root {
    --mb:2.5rem;
    --bmb:5rem;
    --fmb:2rem;
    --conTit:1.4em;
    --sTit:1.4em;
    --bTit:2em;
    --conTxt:1.1em;
    --bigTxt:1.2em;
    
    --bdr:1rem;
    --bdr2:1rem 0;
  }

@media all and (min-width:768px) {
:root {
  --mb:4rem;
  --bmb:8rem;
  --conTit:1.7em;
  --sTit:1.6em;
  --bTit:2.5em;
  --conTxt:1.15em;
  --bigTxt:1.4em;
  --bdr2:2rem 0;
}


}


@media all and (min-width:1280px) {
:root {
  --mb:5rem;
  --bmb:10rem;
  --conTit:1.8em;
  --bTit:3em;
  --bdr2:3rem 0;
}

}



/* 공통 */
.sub_bg{background-color: #fafafa; padding:10rem 0}
.tac{text-align: center;}
.mb{margin-bottom: var(--mb);}
.fmb{margin-bottom: var(--fmb) !important;}
.bmb{margin-bottom: var(--bmb);}
.mEnter{display: block;}
.pd0{padding-bottom: 0 !important;}
.mb0{margin-bottom: 0 !important;}
.pointTxt{color: var(--point_color);}
.mainTxt{color: var(--main_color);}
.wTxt{color: #fff;}
.wrap_bg{background: var(--main_color); padding: 7rem 0; background-size: cover !important;}
.conTxt{font-size: var(--conTxt);}
.tit_dot,.tit_nm{position: relative; margin-bottom: var(--mb); font-size: var(--conTit); padding-left: 2.8rem;}
.tit_nm{padding-left: 0;}
.tit_nm.btit{font-size: var(--bTit);}
.tit_dot:before{content: ''; width: 1rem; height: 2.5rem; background: var(--point_color); transform: skewX(-15deg); position: absolute; left: 0; top: 1rem;}

.tit_point{font-size: 5rem; margin-bottom: var(--mb); color: var(--main_color);}
.tit_sm{font-size: var(--sTit);}

@media all and (min-width:768px) {
.mEnter{display: inline;}
.tEnter{display: block;}
.tit_point{font-size: 10rem;}
.wrap_bg{padding: 10rem 0;}

}

@media all and (min-width:1280px) {
.tEnter{display: inline;}
.pEnter{display: block;}
.tit_dot:before{height: 3rem; }
.tit_point{font-size: 15rem;}
.wrap_bg{padding: 13rem 0;}
}

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


.comm_top{position: relative;}
.comm_top .tit{margin-bottom: var(--fmb); font-size: var(--conTit); font-weight: 800;}
.comm_top .btit{font-size: var(--bTit);}
.comm_top .tit span.tt{display: block; color: var(--point_color); margin-bottom: 2rem; font-size: 1.8rem; font-weight: 600;}

.comm_top .txt{font-size: var(--conTxt);}

.common_info{ box-sizing:border-box;}

.common_info dl{ min-height:50px; position: relative;}
.common_info dl:before{ font-family: var(--icon); content:'\f1d0'; color: var(--main_color); position: absolute; right: 0px; top: 0px; font-size: 2.5rem; line-height: 100%;}
.common_info dt{font-weight:700; font-size:0.9em;  margin-bottom:10px; color: var(--main_color); }
.common_info dd.tit{font-size:1.1em; font-weight:600; word-break: break-all;}
.common_info dd{margin-bottom:5px; font-size: 0.95em;}
.common_info dd:last-child{margin-bottom:0;}

.common_info .info_box{padding:25px; border: 1px solid var(--border_color);
     margin-bottom: var(--mb); border-radius: var(--bdr);}
.common_info .info_box:first-child{ margin-top:0;}

.wrap_bg .common_info .info_box{
-webkit-backdrop-filter: saturate(180%) blur(15px);
    backdrop-filter: saturate(180%) blur(15px);
    /*background-color: rgba(255, 255, 255, 0.4); */
    margin-bottom: var(--mb); border-radius: var(--bdr); border: 0; color: #fff;}

.wrap_bg .common_info dt{color: var(--point_color);}
.wrap_bg .common_info dl:before{color: var(--point_color);}


.common_info dl.company01:before{content:'\f1d0';}
.common_info dl.company02:before{content:'\e614';}
.common_info dl.company03:before{content:'\eb3f';}
.common_info dl.company04:before{content:'\ef92';}

.common_info dl.group01:before{content:'\f5e2';}
.common_info dl.group02:before{content:'\e532';}
.common_info dl.group03:before{content:'\f049';}
.common_info dl.group04:before{content:'\e7e4';}


.comm_dl .box{display: block; position: relative; margin-bottom: 3rem;}
.comm_dl .photo{display: block; position: relative; overflow: hidden; border-radius: var(--bdr); margin-bottom: 2rem;}
.comm_dl .photo img{width: 100%;}
.comm_dl dl dt{font-size: var(--bigTxt); font-weight: 700; margin-bottom: 1.5rem;}
.comm_dl dl dd{padding-left:10px; position: relative; margin-bottom: 5px;}
.comm_dl dl dd:before{content: ''; display: block; background: var(--border_color); position: absolute; left: 0; top: 10px; width: 3px; height: 3px;}

@media all and (min-width:768px) {
.common_info{display:flex; flex-wrap:wrap; gap: 2%; }
.common_info .info_box{width:49%;  }
.common_info dd.tit{font-size:1.2em;}

.comm_dl {display: flex; flex-wrap: wrap; gap: 2%;}
.comm_dl .box{width: 49%;}
}

@media all and (min-width:1024px) {
.common_info .info_box{width:23.5%; padding: 30px;}
.common_info dt{font-size:1em}
.common_info dl{background-size:60px !important; }

}

@media all and (min-width:1280px) {
.comm_dl .box{width: 23.5%;}
}


.halfcon{position: relative;}
.halfcon .halfbox{position: relative; margin-bottom: var(--mb);}
.halfcon .halfbox:last-child{margin-bottom:0;}

@media all and (min-width:1024px) {
.halfcon .halfbox{display: flex; flex-wrap: wrap; gap: 4%;}
.halfcon .halfbox .leftbox{width: 26%;}
.halfcon .halfbox .rightbox{width: 70%;}
}

@media all and (min-width:1024px) {
.halfcon .halfbox{display: flex; flex-wrap: wrap; gap: 4%;}
.halfcon .halfbox .leftbox{width: 24%;}
.halfcon .halfbox .rightbox{width: 72%;}
}



/* 인사말 */
.greetings{padding-bottom: 10rem; display:flex; gap:10rem}
.greetings p{width: 45%;}
.greetings dl{width: 55%;}
.greetings dl dt{font-weight: bold; font-size: 3.6rem;}

/* 핵심가치 */
.core_list{display: flex; gap:5rem}
.core_list li{flex:1; position: relative;}
.core_list li::before{content: ''; width:100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0;}
.core_list p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-weight: bold; font-size: 3rem; text-align: center;}
.core_list p span{display: block; font-family: var(--font-eng); font-size:2rem; display: none;}


/* 인증현황 */
.cer_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem;}
.cer_list li{width: calc(25% - 3rem);}
.cer_list li p{font-weight: bold; text-align: center; padding: 1rem 0;}

/* 주요거래처 */
.partner_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem;}
.partner_list li{width: calc(25% - 3rem); border: 1px solid #ccc; text-align: center;}

/* 회사연혁 */
.bg_con{padding:10rem 0; background: #fafafa;}
.history_con{display: flex; flex-wrap: wrap; position: relative; padding:5rem 0 0; justify-content:space-between; }
.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(--main_color); 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:first-child{margin-top: 0;}

.history_con dl:before{content: ''; width: 1rem; height: 1rem; background: #fff; border:2px solid  var(--main_color); border-radius: 100%; position: absolute; top: 3.1rem; left:-.5rem; z-index: 1;}
.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(--conTit); 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;}


@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; }


}

/*인증현황*/
.certi_li{position:relative; display:flex; flex-wrap: wrap; gap: 2%; }
.certi_li:after{content:''; clear:both; display:block;}
.certi_li li{position:relative; width:49%; margin-bottom:5rem; ; text-align:center}
.certi_li li a{border: 3px solid var(--brColor); border-radius: var(--bdr); overflow: hidden; display: block; margin-bottom: 2.5rem;}

.certi_li li img{width:100%; margin-bottom:5px; border: 3px solid var(--bgColor);}
.certi_li li span{display:block; letter-spacing:0; font-weight:700;  font-size:0.95em; }
.certi_li li span i{display: block; font-size: 0.9em; color: var(--main_color);}

.certi_li.list02 li{width:49%;}

@media all and (min-width:768px) {
.certi_li li{width:32%;}
.certi_li li span{padding:5px;}
}

@media all and (min-width:1280px) {
.certi_li li{width:23.5%;}
}

@media all and (min-width:1620px) {
.certi_li li{width:18.4%;}
}
   

/* 오시는길 */
.map{display: flex; gap:5rem}
.map_info{flex-basis:30%; display: flex; flex-direction: column; gap:2rem}
.map_info p{margin-bottom: var(--fmb);}
.map_info dl{border-bottom: 1px solid #ccc; padding-bottom: var(--fmb);}
.map_info dl dt{font-weight: bold; font-size: var(--conTit); margin-bottom: var(--fmb);}
.map_info dl dd{font-size: var(--conTxt);}
.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%}

/* 제품 */
.product_wrap{display: flex; gap:10rem; margin-bottom: 10rem;}
.product_img{width: 40%; text-align: center;}
.product_con{width: 60%;}
.product_con .product_text{margin-bottom: 3rem;}
.product_con h4{font-weight: bold; font-size:2.5rem; margin-bottom: 1rem; padding-top:1rem; position: relative;}
.product_con h4::before{content: ''; width: 5rem; height: 5px; background: var(--main_color); position: absolute; top: 0; left: 0;}
.btn_catalog{margin-top: 3rem;}
.btn_catalog a{display: inline-flex; background: var(--main_color); color:#fff; text-align: center; border-radius: 100px; padding:1rem 4rem; transition: .5s;}
.btn_catalog a:hover{background: var(--sub_color);}

/* 제품 - 기타 */
.other_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem;}
.other_list li{width: calc(25% - 3rem);}
.other_list li img{box-shadow: 0 0 1rem rgba(0,0,0,0.2);}
.other_list li p{padding:2rem 0; font-weight: bold;}


/*프로세스*/
.process_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem;}
.process_list li{width: calc(25% - 3rem); text-align: center; font-weight: bold; font-size: 2.2rem; position: relative;}
.process_list li::before{content: '▶'; position: absolute; top: 30%; right: -3rem;  color:var(--main_color)}
.process_list li:last-child::before{display: none;}
.process_list li p{overflow: hidden; border-radius: 1000px; width: 70%; margin: auto; margin-bottom: 2rem; box-shadow: 0 0 1rem;}
.process_list li span{display: block; font-family: var(--font-eng); text-transform: uppercase; font-size: 1.6rem; color:var(--main_color); display: none;}


/* 품질장비보유현황 */
.equipment_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem;}
.equipment_list li{width: calc(25% - 3rem); text-align: center;}
.equipment_list li p{padding:2rem 0; font-weight: bold;}




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