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


}
/*세부조직*/

.chart_org{position:relative; clear:both; overflow:hidden}
.chart_org:after{content:''; clear:both;}
.chart_org .rightBox{position:relative;}

.chart_org dl.team{border-top:1px solid var(--border_color); padding:40px 0px; overflow:hidden;}
.chart_org dl.team dt{font-weight:700; margin-bottom:20px; font-size:1.2em}
.chart_org dl.team dd b{margin-right:5px}
.chart_org dl.team dd:last-child{margin-bottom:0px}
.chart_org dl.team:last-child{border-bottom:1px solid var(--border_color)}



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

.chart_org h4{margin-bottom:60px; font-size:1.8em}
.chart_org dl.team{padding:50px 0}
.chart_org dl.team dt{float:left; clear:both; width:25%; font-weight:700; color:#323232; margin-bottom:0;}
.chart_org dl.team dd{float:right; width:75%; margin-bottom:5px}
.chart_org dl.team dd b{margin-right:10px}
.chart_org dl.team dd:last-child{margin-bottom:0px}

.chart_org dl.team dt{font-size:1.4em}
.chart_org .total{padding:15px 20px; top:-60px;}
.chart_org .rightBox dl:nth-last-child(2){border-bottom:0px}
.chart_org:after{content:''; display:block; clear:both}
}



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

.chart_org .leftBox{text-align:left; float:left; width:20%; clear:both;}
.chart_org .rightBox{float:right; width:75%; }

}


/*인증현황*/
.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%;}
}
    

/*경영이념*/
.vision{position: relative;}
.vision h4{text-align: center; color: var(--main_color); position: relative; padding: 7rem 0; margin-bottom: 0;}
.vision h4:before{content: ''; width: 1px; height: 100%; background:var(--main_color); position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: 0;}
.vision h4:after{content: ''; width: 5px; height: 5px; background: #fff; border:2px solid var(--main_color); border-radius: 50px; position: absolute; top: 0; left: 0; right: 0; top: 0; margin: auto; z-index: 1; box-sizing: content-box;}
.vision h4 span{color: var(--point_color);}
.vision h4 em{font-weight: 800; background: #ffff; padding: 2rem 0; position: relative; z-index: 1;}

.vision .comm_dl{max-width: 800px; margin: 0 auto;}
.vision .comm_dl dt{color: var(--main_color); text-align: center;}

@media all and (min-width:1280px) {
.vision .comm_dl{position: relative; padding-top: 7rem; max-width: 100%;}
.vision .comm_dl::before{content: ''; width: 76.5%; height: 1px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; background: var(--main_color);}
.vision .comm_dl .box:before{content: ''; width: 1px; height: 7rem; position: absolute; top: -7rem; left: 0; right: 0; margin: 0 auto; background: var(--main_color);}

}

/*파트너*/
.relative_list{position:relative}
.relative_list {position:relative}

.relative_list  ul li{margin-bottom:2rem; background:#f8f8fa; padding:10px; position:relative;}
.relative_list  ul li img{width:100%;}
.relative_list  ul li span{display:block; font-size:1em; text-align:center; padding:10px 0 0;  font-weight:500; }
.relative_list  ul:after{content:''; clear:both; display:block;}

.relative_list  ul.list02{display: flex; flex-wrap: wrap; gap: 2%;}
.relative_list  ul.list02 li{width:49%; }

@media only screen and (min-width: 560px) {
.relative_list  ul{display: flex; flex-wrap: wrap; gap: 2%;}
.relative_list  ul li{width:49%; margin-bottom: 2rem;}
.relative_list  ul.list02 li{width:32%;}
}

@media only screen and (min-width: 768px) {

.relative_list  ul li{width:32%;}

}

@media only screen and (min-width: 1200px) {
.relative_list  ul li span{padding:20px 0 10px; font-size:1.05em}
.relative_list ul li:hover{transform:translateY(-10px); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2); transition: .2s;}

}



/* 오시는길 */
.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%}


/*프로세스*/

.process_top{position: relative;}
.process_top .photo{overflow: hidden; border-radius: var(--bdr2);}
.process_top .photo img{width: 100%;}

.process_top h4 em{background: var(--point_color); border-radius: var(--bdr) 0; color: #fff; font-family: var(--font-eng); font-size: 0.9em; text-transform: uppercase; font-weight: 600; display: inline-block; padding: 0.3rem 1rem; margin-bottom: var(--fmb);}
.process_top h4 span{display: block; font-weight: 700; font-size: var(--bTit); }

@media all and (min-width:768px) {
.process_top{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;}
.process_top .photo{width: 43%;}
.process_top .info{width: 50%;}

}

@media all and (min-width:1024px) {
.process_top .photo{width: 35%;}
.process_top .info{width: 60%;}


}

@media all and (min-width:1280px) {
.process_top .photo{width: 35%;}
.process_top .info{width: 58%;}


}




.process{position:relative; display:flex; flex-wrap:wrap; gap:3%; }
.process.odd_process{justify-content:start}.process li{width:100%;  background:#ffffff; color:var(--main_color); border: 1px solid var(--monoColor); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:10px; text-align:center; border-radius:10px; position:relative; border:2px solid var(--main_color); padding: 0.5rem; font-size: 0.9em;}
.process li span{display:block; width:100%; font-weight:500}
.process li span.num{font-weight:600; font-size:0.65em; display:inline-block; padding:0px 5px; background:var(--sub_color); color:#fff; border-radius:20px; width:auto;}

.process li:after{display: block; clear: both; content: ""; width: 10px; height: 10px; background:var(--monoColor);  position:absolute; left:0; right:0; bottom:-5px; margin:auto;  transform: rotate(225deg); z-index:-1}
.process li:last-child:after{display: none;}
/*
.process li:last-child:after{display:none}
.process li:nth-child(2):after,
.process li:nth-child(4):after,
.process li:nth-child(6):after,
.process li:nth-child(8):after{right:0; left:0; top:auto; bottom:-5px}
.process li:nth-child(3):after,
.process li:nth-child(7):after{right:auto; left:-5px; top:0; bottom:0}

.process li:nth-child(1){order:1}
.process li:nth-child(2){order:2}
.process li:nth-child(3){order:4}
.process li:nth-child(4){order:3}
.process li:nth-child(5){order:5}
.process li:nth-child(6){order:6}
.process li:nth-child(7){order:8}
.process li:nth-child(8){order:7}
.process li:nth-child(9){order:9}*/

@media all and (min-width:560px) {
.process {gap:3%; justify-content:start}
.process li{width:48.5%; margin-bottom:20px}


.process li:after{left:auto; top:0; bottom:0; right:-5px;}

}
@media all and (min-width:768px) {
.process.list05 {gap: 2%;}
.process.list05 li {width: 18.4%;}
}


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

}


.product_list{position: relative;}
.product_list li{position: relative; margin-bottom: var(--fmb);}
.product_list li .photo{overflow: hidden; border-radius: var(--bdr); margin-bottom: var(--fmb);}
.product_list li .photo img{width: 100%;}
.product_list li .info dt{font-weight: 600; font-size: 1.1em}
.product_list li .info dd{ font-size: 0.9em}
.product_list li span{font-weight: 600; font-size: 1.1em; display: block;}
@media all and (min-width:560px) {
.product_list{display: flex; gap: 3%; flex-wrap: wrap;}
.product_list li {width: 48.5%;}
}

@media all and (min-width:768px) {
.product_list li {width: 31.33%;}

.product_list li{margin-bottom: 3rem;}

}


.swiper.photo .swiper-pagination {bottom: 3rem;}
.swiper.photo .swiper-pagination-bullet{width: 13px; height: 13px; background: var(--brColor); opacity: 0.5; margin: 0 6px;}
.swiper.photo .swiper-pagination-bullet-active{background: var(--point_color); opacity: 1;}


/* 제품소개 */
.product_con{display:flex; gap:10rem; overflow: hidden; position: relative;}
.product_img{width: 60%; overflow: hidden; position: relative;}
.product_img .swiper-button-next,
.product_img .swiper-button-prev{background: none;}
.product_img .swiper-button-next span,
.product_img .swiper-button-prev span{font-size:4rem}

.product_info{width: calc(40% - 10rem);}
.product_info dl dt {font-size: 3rem; font-weight: bold; margin-bottom: 2rem;}
.product_info dl dt span{display:block; font-weight:900; font-size: 5rem;}
.product_info ul{display: flex; gap:2rem; text-align: center; margin-top: 3rem;}
.product_info ul li{flex:1}
.product_info ul li a{display: flex;gap:1rem; justify-content: center; align-items: center; padding: 1.5rem 2rem; border: 1px solid #ccc; transition: .5s; }
.product_info ul li:last-child a{background: var(--sub_color); color:#fff; border: none;}
.product_info ul li a:hover{background: #333; color:#fff}

.thumb_list{display: flex; gap:2rem}
.thumb_list dl{flex:1;  text-align: center;}
.thumb_list dl dt{background: var(--main_color); color:#fff; padding: 1rem;}

.flex_layout{display: flex; gap:5rem}
.flex_layout p{width: 70%;}
.flex_layout > div{width: 30%;}

.table02 th,
.table02 td{padding: 1rem;}

.small_unit{display: flex; gap:5rem}
.small_left{width: 70%;}
.small_right{width: calc(30% - 5rem);}

.small_photo{display: flex; gap:3rem}
.small_photo p{background: var(--main_color); color:#fff; text-align: center; padding:1rem 2rem}



/* 바렐 */
.flex_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem;}
.flex_list li{width: calc(25% - 3rem); position: relative; cursor: hand;}
/*.flex_list li::before{content: '+'; border-radius: 100%; width: 5rem; height: 5rem; background: rgba(0,0,0,0.5); color:#fff; display: flex; justify-content: center; align-items: center; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: none;}
.flex_list li:hover::before{display: flex;}*/

/* 연구소 소개 */
.rnd_list{display: flex; gap:2rem; justify-content: center; text-align: center; font-weight: bold;}
.rnd_list li p{width: 30rem; height: 30rem; border-radius: 100%; overflow: hidden; margin-bottom: 2rem;}




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