/* 공통 */
.sub_bg{background-color: #fafafa; padding:10rem 0}

/* 회사개요 */
.info_bg{background:url(../images/main/features_bg.jpg) no-repeat fixed bottom center; padding:10rem 0}
.info_con{display: flex; flex-wrap: wrap; gap:5rem}
.info_con dl{flex-basis: calc(20% - 5rem); padding:2rem; text-align: center; background: #fff;  border-radius: 2rem; box-shadow: 0 0 1rem rgba(0,0,0,0.1);}
.info_con dl dt{font-weight: bold; color:var(--point_color); padding-bottom: 1rem; margin-bottom: 1rem; font-size: 2rem; border-bottom: 1px dashed var(--main_color);}
.info_con dl dt img{margin: auto; display: block;}


/* 회사연혁 */
.history{display: flex; flex-wrap: wrap; gap:5rem; position: relative;}
.history::before{content: ''; width: 1px; height: 100%; background: var(--main_color); position: absolute; top: 0; left: 50%;}
.history li{flex-basis:calc(50% - 5rem); position: relative; display: flex;}
.history li p{}
.history li dl{position: absolute; bottom: 5rem; left: 50%; background: #fff; padding:2rem; width: 50%;}
.history li dl dt{font-weight: bold; font-family: var(--font-go);  color:var(--main_color); font-size: 3rem;}
.history li dl dd{position: relative; padding:.5rem 0 .5rem 2rem}
.history li dl dd::before{content: ''; width: .5rem; height: .5rem; border-radius: 1rem; background: var(--main_color); position: absolute; top: 1.2rem; left: 0;}
.history li:nth-child(even){flex-direction: row-reverse; padding-top: 10rem;}
.history li:nth-child(even) dl{right: 40%; left: auto;bottom: 0;}


/* 경영이념 */
.management_video{position: relative; height: 50rem; overflow: hidden;}
.management_video video{position: absolute; bottom:20%; left: 0;}
.management_video dl{position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); text-align: center; color:#fff; font-weight: bold; text-shadow: 0 0 1rem rgba(0,0,0,0.5);}
.management_video dl dt{font-size:5rem; padding-bottom: 1rem;}

.management{background: url(../images/company/management_bg.jpg) no-repeat fixed; position: relative; padding:10rem 0;  text-align: center;}
.management::before{content: ''; width: 100%;  height: 100%; background: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0;}
.management dl{color:#fff; position: relative; margin-bottom: 5rem;}
.management dl dt{font-weight: bold; font-family: var(--font-go); font-size:4rem; padding-bottom: 2rem;}
.management dl dt span{display: block; font-size:3rem}
.management ul{display: flex; position: relative; justify-content: center;}
.management ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 20rem; height: 20rem; background: #fff; border-radius: 20rem; border: 2rem solid var(--main_color);}

/* 인증현황 */
.cer_list{display: flex; flex-wrap: wrap; gap:4rem}
.cer_list li{flex-basis: calc(25% - 4rem); text-align: center; }
.cer_list li img{border: 1px solid #ccc; box-shadow: 0 0 .5rem rgba(0,0,0,0.2);}
.cer_list li p{padding-top: 2rem;}


/* 오시는길 */
.map{display: flex; gap:5rem}
.map_info{width: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%}
.map_info li span i{color:var(--main_color); display: inline-block; margin-right: 1rem;}
.map_area{width:70%}

/* 브랜드스토리 */
.story_photo{display: flex; gap:3rem; padding:10rem 0}
.story_photo li{flex:1}
.story_bg{display: flex; align-items: center; background: url(../images/story/story_bg.jpg) no-repeat top fixed; height: 50rem; position: relative;}
.story_bg::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.3); position: absolute; top: 0; left: 0;}
.story_vision{display: flex; gap:5rem; justify-content: center; align-items: center; position: relative;}
.story_vision li{flex:1; padding:3rem; background: #fff; border-radius: 2rem; text-align: center;}
.story_vision li dt{font-weight: bold; color:var(--main_color); padding-bottom:3rem; font-size:2.4rem; border-bottom: 1px solid #ccc;}
.story_vision li dt img{display: block; margin: auto;}
.story_vision li dt span{display: inline-block; background:var(--main_color); color:#fff; padding:.5rem 2rem; border-radius: 10rem;}
.story_vision li dd{padding-top: 3rem;}

/* 설비현황 */
.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}




/* 모달 */
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .7);transition: opacity .25s ease;  }  
.modal_bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer; }
.modal-state {display: none;  }
.modal-state:checked + .modal {opacity: 1; visibility: visible;}
.modal-state:checked + .modal .modal__inner {top: 0;}
.modal_inner {transition: top .25s ease;position: absolute;top:50%; left:50%; transform: translate(-50%, -50%); width:100%; max-width:100rem; margin: auto;overflow: auto;background: #fff;border-radius: 5px;padding: 1em 2em;height: 50%; z-index: 9;  }
.modal_inner p,
.modal_inner li{font-size: 1.4rem;}
.modal_close {position: absolute;right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer;}
.modal_close:after,
.modal_close:before {content: ''; position: absolute; width: 2px; height: 1.5em; background: #ccc; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
.modal_close:hover:after,
.modal_close:hover:before {background: #aaa;  }
.modal_close:before {transform: rotate(-45deg); }

.num_list{counter-reset: colorcircle 0; padding-bottom: 3rem;}
.num_list li {position: relative;  padding:0 0 0 2.5rem }
.num_list li::before {position: absolute; top:0; left: .4rem; counter-increment: colorcircle 1; content: counter(colorcircle); color: #fff; font-size: 1.3rem; z-index: 1; }
.num_list li::after {content: '';position: absolute;top: 0;left: 0; display: inline-block;background-color:var(--main_color);border-radius: 50%;width: 1.1em;height: 1.2em;  }

.num_list2{counter-reset: colorcircle2 0; padding-bottom: 1rem;}
.num_list2 li {position: relative;  padding:0 0 0 2.5rem }
.num_list2 li::before {position: absolute; top:0; left: .4rem; counter-increment: colorcircle2 1; content: counter(colorcircle2); color:#333; font-size: 1.3rem; z-index: 1; }
.num_list2 li::after {content: ')';position: absolute; top: -.2rem;left: 1.3rem; color:#333; display: inline-block; width: 1.1em;height: 1.2em; background: none;  }


/* 온라인문의 */
.online_form{display: flex; gap:5rem}
.online_form h3{width: 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}