: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);}

.pointBox{ border-radius: var(--bdr); padding: 2rem; background: var(--brColor2);}
.imgbox img{width: 100%; display: block; max-width: 1200px; margin: 0 auto;}
@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;}
.bg_rnd{background: url(../images/rnd/bg_rnd.jpg) no-repeat center center;}
.bg_rnd .comm_dl{color: #fff;}

.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';}

.common_info dl.rnd01:before{content:'\efe6';}
.common_info dl.rnd02:before{content:'\e8e5';}
.common_info dl.rnd03:before{content:'\eb04';}
.common_info dl.rnd04:before{content:'\ebcb';}


.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%;}

.comm_dl.list03 .box{width: 32%;}
}

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

.comm_top .rndpoint{display: inline-block;}
}


.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{display: flex; gap:5rem; padding-bottom: 10rem;}
.greetings p{flex-basis: 50%; position: relative; padding:0 0 5rem 5rem ;}
.greetings p::before{content: ''; width: 50%; height: 50%; border-radius: 0 0 10rem 0; background: var(--main_color); position:absolute; bottom: 0; left: 0; z-index: -1;}
.greetings dl{flex:1}
.greetings dl dt{font-weight: bold; font-size:3.6rem; padding-bottom: 2rem;}

.greetings dl dd span{ color:var(--sub_color)}
.greetings dl dd em{text-align: right; font-weight: bold; font-size: 2.4rem; display: block;}



/* 회사연혁 */
.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:#ccc; 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:7rem;}
.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:7rem}

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


}



/* 오시는길 */
.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%}
.map_subway p{display: flex; align-items: center; margin-bottom: 0;}
.map_subway span{display: inline-block; margin-right: 1rem;}
.subway01{font-weight: bold; color:#3ab44a; display: inline-block; margin-right: 1rem;}
.subway02{font-weight: bold; color:#f77636; display: inline-block; margin-right: 1rem;}

/* 사업영역 */
.business_bg{width:100%; height:400px ;}
.business_bg01{background: url(../images/business/business_bg01.jpg) center fixed;}
.business_bg02{background: url(../images/business/business_bg02.jpg) center fixed;}
.business_bg03{background: url(../images/business/business_bg03.jpg) center fixed;}
.business_bg04{background: url(../images/business/business_bg04.jpg) center fixed;}
.business_bg05{background: url(../images/business/business_bg05.jpg) center fixed;}

.icon_list{display: flex;}
.icon_list li{flex:1; text-align: center; border-right:1px dashed #ccc;}
.icon_list li:last-child{border:none}
.icon_list li dl{padding:2rem}
.icon_list li dl dt{font-weight: bold; font-size: 2.4rem;}

.img_list{display: flex; gap:10rem; flex-wrap: wrap; margin-right:-10rem}
.img_list li{width: calc(50% - 10rem); text-align: center;}
.img_list li p{ margin-bottom: 3rem;}
.img_list li dl dt{font-weight: bold; font-size: 2.4rem;}
.img_list li dl dt span{display: block; font-family: var(--font-eng); text-transform: uppercase; color:var(--main_color); font-weight: 900; font-size: 1.6rem;}


.process_list{display: flex; gap:3rem; margin-right:-3rem}
.process_list li{flex:1; border:3px solid #ccc; text-align: center; border-radius: 100px; display: flex; align-items: center; justify-content: center;  position: relative;}
.process_list li::before{content: '▶'; position: absolute; top: 50%; right:-2.5rem; transform: translateY(-50%); color:var(--main_color)}
.process_list li:last-child::before{display: none;}

/* 인재채용 */
.recruit_list{display: flex; flex-wrap: wrap; gap:5rem}
.recruit_list dl{width: calc(50% - 5rem); border:1px solid #ccc; padding:3rem}
.recruit_list dl dt{font-weight: bold; font-size:2.4rem; margin-bottom: 1rem; padding-top: 1rem; position: relative;}
.recruit_list dl dt::before{content: ''; width: 2rem; height: 3px; background: var(--main_color); position: absolute; top: 0; left:0}

.talent_list{display: flex; gap:5rem}
.talent_list li{flex:1; text-align: center;}
.talent_list li p{overflow: hidden; border-radius: 1000px; margin: auto; margin-bottom: 2rem; width: 50%; }
.talent_list li p img{transition: .5s;}
.talent_list li p img:hover{transform: scale(1.2);}
.talent_list li dl dt{font-weight: bold; font-size: 2.4rem;}

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