@charset "utf-8";
/* ---------------------------------------

    sub_visual

---------------------------------------- */
.sub_visual{ border-radius: 0 0 0 60px ; background-image: var(--bg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sub_visual .inner{height: 485px; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub_visual h2{font-size: var(--fz-60); font-weight: bold; letter-spacing: -0.025em; padding-bottom: 20px;}
.sub_visual p{font-size: var(--fz-18); font-weight: 400; letter-spacing: 0.025em;}

.sub_tab ul{display: flex; flex-wrap: wrap; width: 100%; margin-top: -40px;align-items: center;justify-content: center;}
.sub_tab ul li{width: 25%; }
.sub_tab ul li a{height: 80px; border-left: 1px solid #e3e1de; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: var(--fz-18); font-weight: 500; letter-spacing: -0.025em; color: #444444; width: 100%; background-color: #f7f5f3; text-align: center; }
.sub_tab ul li:first-child a{border: none;}
.sub_tab ul li.active a{background-color: #fa744f; color: #fff;}

.sub_tab.item02 ul li{width: 25%;}

@media all and (max-width:630px) {
    .sub_tab ul li{width: 50%; }
    .sub_tab ul li a{border-top: 1px solid #e3e1de;}
}
/* ---------------------------------------

    회사소개

---------------------------------------- */
.gree {overflow: hidden;}

.gree .con01 .img_wrap{padding: 0 0 0 50px ; box-sizing: border-box;}
.gree .con01 .img_wrap video{width: 100%;}

.gree .sns {display: flex; align-items: center; gap: 20px; margin-left: auto;}
.gree .sns img {filter: brightness(0) saturate(100%) invert(61%) sepia(0%) saturate(8%) hue-rotate(211deg) brightness(88%) contrast(90%);}

.gree .txt_box .txt p{font-size: var(--fz-20); line-height: 1.7em; font-weight: 300; letter-spacing: -0.025em; color: #444444;}

@media all and (max-width:1024px) {
    .gree .con01 .flex_wrap{flex-direction: column-reverse; row-gap: 30px;}

    .gree .con01 .img_box{max-width: fit-content; margin-left: auto;}
}

.gree .con02 .history{max-width: 1020px; width: 100%; margin-left: auto; height: 772px; overflow-y: scroll;}
.gree .con02 .year + .year{margin-top: 50px;}
.gree .con02 .year .tit h5{font-size: var(--fz-44); font-weight: bold; color: #fa744f;}
.gree .con02 .year ul {padding-top: 30px;}
.gree .con02 .year ul li {display: flex; color: #444; gap: 15px;}
.gree .con02 .year ul li + li{margin-top: 10px;}
.gree .con02 .year ul li b{font-size: var(--fz-24); display: inline-block; width: 25px; font-weight: 500; white-space: nowrap;}
.gree .con02 .year ul li p{font-size: var(--fz-20); width: calc(100% - 40px); font-weight: 400; letter-spacing: -0.025em; }

@media all and (max-width:1024px) {
    .gree .con02 .history{height: 500px;}
}


.gree .con03 > div{position: relative;}

.gree .con03 .flex_wrap{display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 50px; }
.gree .con03 .right .flex_wrap{margin: 0;}
.gree .con03 .right .flex_wrap{flex-direction: row-reverse;}
.gree .con03 .flex_wrap > div{width: 50%;}
.gree .con03 .flex_wrap .txt_box{padding: 0 0 0 70px; box-sizing: border-box;}
.gree .con03 .right .flex_wrap .txt_box{padding: 0 70px 0 0;}

/* .gree .con03 .num{position: absolute; z-index: 1; line-height: 1em; font-weight: 900; left: 0; bottom: -10px; font-size: var(--fz-100); opacity: 0.1; color: #222222;} */
.gree .con03 .right .num{left: unset; right: 0; bottom: -10px;}

/* .gree .con03 .flex_wrap .img_box::before{content: ''; display: inline-block; position: absolute; top: 0; right: 100%; background-color: #f7f5f3; width: 130%; height: 100%;} */
/* .gree .con03 .right .flex_wrap .img_box::before{right: unset; left: 100%;} */

.gree .con03 .flex_wrap .img_box{position: relative;  border-radius: 40px; aspect-ratio: 9/6; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #f5f5f5; box-sizing: border-box;}
.gree .con03 .flex_wrap .img_box img{max-width: fit-content; width: 100%; }
.gree .con03 .img_box.type02{background-color:#f5f5f5; border-radius:40px; padding:80px 0; text-align:center; }
.gree .con03 .img_box.type02 img{width:80%;} 
.gree .con03 .img_box img{width:100%; max-width:fit-content;}

@media all and (max-width:1260px) {
    .gree .con03 .num{position: relative; bottom: unset;}
    .gree .con03 .row02 .num{ text-align: right; bottom: unset;}  

    .gree .con03 .flex_wrap .txt_box{padding: 0 0 0 30px;}
    .gree .con03 .right .flex_wrap .txt_box{padding: 0 30px 0 0;}
}
@media all and (max-width:1024px) {
    .gree .con03 .flex_wrap{margin-bottom: 0; gap: 50px;}
    .gree .con03 .flex_wrap > div{width: 100%;}

    .gree .con03 .flex_wrap.left .img_wrap{margin-bottom: 100px;}  
}

@media all and (max-width:650px){
.gree  .con03 .img_box.type02 img{width:95%}
}

.gree .big_circle{display: flex; gap:30px; justify-content: center; flex-wrap: wrap;}
.gree .big_circle li{width: calc(33.33% - 20px); text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; max-width: 385px; border-radius: 50%;}
.gree .big_circle li .tit h5{font-size: var(--fz-24); font-weight: bold; line-height: 1.5; margin: 0;}
.gree .big_circle li .txt p{font-size: var(--fz-18); font-weight: 300; line-height: 1.5; padding-top: 20px;}

.gree .big_circle li.bg01{background: url(/img/gree_con03_bg01.png)no-repeat center / cover;}
.gree .big_circle li.bg02{background: url(/img/gree_con03_bg02.png)no-repeat center / cover;}
.gree .big_circle li.bg03{background: url(/img/gree_con03_bg03.png)no-repeat center / cover;}

@media all and (max-width:1024px) {
    .gree .big_circle li{width: calc(50% - 15px);}
}
@media all and (max-width:630px) {
    .gree .big_circle li{width: calc(100%);}
}


.gree .con05 .flex_wrap{justify-content: space-between;}

.gree .con05 .map_box {height: 645px; border-radius: 0 150px 30px 0; overflow: hidden;}
.gree .con05 .map_box iframe{width: 100%; height: 100%;}
.gree .con05 .map_box .root_daum_roughmap{width: 100%; height: 100%;}
.gree .con05 .map_box .root_daum_roughmap .wrap_map{width: 100%; height: 100%;}

.gree .con05 .txt_wrap{padding: 0 0 0 80px; box-sizing: border-box;}
.gree .con05 .tab_btn{display: flex; gap: 15px;}
.gree .con05 .tab_btn li.active {background-color: #fa744f; box-shadow: 3px 5px 15px 0 rgba(0, 0, 0, 0.16); color: #fff;}
.gree .con05 .tab_btn li:hover {background-color: #fa744f; box-shadow: 3px 5px 15px 0 rgba(0, 0, 0, 0.16); color: #fff;}
.gree .con05 .tab_btn li{display: inline-block; transition: all 0.3s; background-color: #fff; font-size: var(--fz-18); color: #fa744f; font-weight: 500; letter-spacing: -0.025em; width: fit-content; padding: 20px 35px; border-radius: 40px; border: 1px solid #fa744f; text-align: center; cursor: pointer;}

.gree .con05 .adr_list {padding-top: 50px;}
.gree .con05 .adr_list li{display: flex; align-items: center;}
.gree .con05 .adr_list li + li{margin-top: 20px;}
.gree .con05 .adr_list .tit{display: flex; gap: 10px; width: 170px; align-items: center;}
.gree .con05 .adr_list .txt{width: calc(100% - 170px);}

.gree .con05 .adr_list i{display: inline-block; width: 48px; height: 48px; border-radius: 50%; background-color: #fa744f; display: flex; align-items: center; justify-content: center;}
.gree .con05 .adr_list p{font-size: var(--fz-20); display: inline-block; letter-spacing: -0.025em; color: #444444; letter-spacing: -0.025em; font-weight: 400;}


@media all and (max-width:1250px) {
    .gree .con05 .txt_wrap{padding: 0 0 0 50px;}
}
@media all and (max-width:1024px) {
    .gree .con05 .flex_wrap{row-gap: 30px;}
    .gree .con05 .map_box {height: 420px;}

    .gree .con05 .txt_wrap{padding: 0 0 0 20px;}

    .gree .con05 .adr_list .tit{width: 130px;}
    .gree .con05 .adr_list .txt{width: calc(100% - 130px);}
}


/* ---------------------------------------

    연구개발

---------------------------------------- */
.rese {overflow: hidden;}


.rese .txt_box .txt p{font-size: var(--fz-20); line-height: 1.7em; font-weight: 400; letter-spacing: -0.025em; color: #444444;}
.rese .txt_box .txt p span{color: #fa744f;}
.rese .txt_box .txt p sup{color: #fa744f;}
.rese .txt_box .txt p + p{padding-top: 20px;}

.rese .con01 .flex_wrap{justify-content: space-between;}
.rese .con01 .txt_wrap{max-width: 770px; padding-left: 50px; box-sizing: border-box;}

@media all and (max-width:1250px) {
    .rese .con01 .txt_wrap{padding: 0 0 0 30px;}

    .rese .txt_box .txt p + p{padding-top: 10px;}
}

.rese .circle_list{display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}
.rese .circle_list li{width: calc(25% - 15px); text-align: center;}
.rese .circle_list li .circle{width: 100%; background-color: #fff; aspect-ratio: 1/1; position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #dddddd;}
.rese .circle_list li .circle img{width: 80%; max-width: fit-content;}

.rese .circle_list li .circle .icon{width: 60px; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); right: -40px; height: 60px; border-radius: 50%; background-color: #fa744f;}
.rese .circle_list li .circle .icon::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 9px; height: 14px; background: url(/img/arr_icon03.png);}

.rese .circle_list li h5{font-size: var(--fz-18); margin-top: 20px; font-weight: 400; color: #222;}

@media all and (max-width:1024px) {
    .rese .circle_list li .circle .icon{display: none;}
    .rese .circle_list li{width: calc(50% - 10px); max-width: 320px;}
}
@media all and (max-width:670px) {
    .rese .circle_list li{width: calc(100%); }
}

.rese .img_list{display: flex; flex-wrap: wrap; justify-content: center;}

.rese .img_list.item01 li{width: calc(100%);}
.rese .img_list.item02{gap: 40px;}
.rese .img_list.item02 li{width: calc(50% - 20px);}
.rese .img_list.item03{gap: 18px;}
.rese .img_list.item03 li{width: calc(33.333% - 12px);}
.rese .img_list.item04{gap: 20px;}
.rese .img_list.item04 li{width: calc(25% - 15px);}

.rese .img_list.fit{justify-content: space-between; row-gap: 30px;}
.rese .img_list.fit li{width: 100%; max-width: fit-content;}

.rese .img_list li h5{font-size: var(--fz-18); line-height: 1.5em; color: #444444; font-weight: 300; text-align: center; margin: 10px 0 0 0;}
.rese .img_list li h5 p{color: #aaaaaa;}

.rese .img_list .img_box img{width: 100%; max-width: fit-content; object-fit: cover;}

@media all and (max-width:1024px) {
    .rese .img_list.fit{justify-content: center;}
}
@media all and (max-width:620px) {
    .rese .img_list.item02 li{width: calc(100%); max-width: 420px;}
    .rese .img_list.item03 li,
    .rese .img_list.item04 li{width: calc(50% - 10px);}
}


.rese .right_txt_wrap{width: 100%; max-width: 1010px; margin-left: auto;}

.rese .card_wrap{display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.rese .card_wrap .card{width: calc(20% - 16px); background-color: #f7f5f3; border-radius: 20px 80px 20px 20px; padding: 50px 40px; box-sizing: border-box;}
.rese .card_wrap .card .num{font-size: var(--fz-16); font-weight: bold; color: #fa744f;}
.rese .card_wrap .card h5{font-size: var(--fz-20); margin: 15px 0; letter-spacing: -0.025em; font-weight: 500; color: #222222;}
.rese .card_wrap .card p{font-size: var(--fz-18); line-height: 1.5em; letter-spacing: -0.025em; font-weight: 300; color: #444444;}


@media all and (max-width:1300px) {
    .rese .card_wrap .card{padding: 40px 25px;} 
}
@media all and (max-width:1024px) {
    .rese .card_wrap .card{width: calc(33.333% - 14px); }
}
@media all and (max-width:620px) {
    .rese .card_wrap .card{width: calc(50% - 10px); }
}

/* ---------------------------------------

    제품

---------------------------------------- */
.printer .flex_row + .flex_row{padding-top: 100px;}
.printer .flex_row{display: flex; flex-wrap: wrap;}
.printer .flex_row > div{width: 50%;}

.printer .txt_box .txt{font-size: var(--fz-20); line-height: 1.7; letter-spacing: -0.025em;font-weight: 400; color: #444444;}


.printer .img_box{margin-right: 100px; border-radius: 30px; overflow: hidden; border: 1px solid #e6e6e6; background-color: #fff; aspect-ratio: 1/1; box-sizing: border-box;}
.printer .img_box img{width: 100%; height: 100%; object-fit: cover;}

@media all and (max-width:1024px) {
    .printer .img_box{margin-right: 30px;}
}

@media all and (max-width:824px) {
    .printer .flex_row + .flex_row{padding-top: 50px;}
    .printer .flex_row{gap: 30px; }
    .printer .flex_row > div{width: 100%;}

    .printer .img_box{text-align: center; margin: 0 auto; max-width: 520px;}
    .printer .txt_wrap{padding: 0 20px; box-sizing: border-box;}
}

/* ---------------------------------------

    공지사항 / Case Study 

---------------------------------------- */
.notice_list li{transition: all 0.3s;  background-color: #fff; border-radius: 0 35px 35px 35px; border: 1px solid #dbdbdb;}
.notice_list li a{display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 55px 75px; }
.notice_list li + li{margin-top: 20px;}

.notice_list li:hover{border-radius: 35px; border-color: #fa744f;}


.notice_list li .top{display: flex; align-items: flex-end; gap: 15px;}
.notice_list li h5{font-size: var(--fz-20); margin: 0; display: inline-block; font-weight: bold; letter-spacing: -0.025em; color: #fa744f;}

.notice_list li p{font-size: var(--fz-18);  font-weight: 400; letter-spacing: -0.025em;}
.notice_list li .date{ color: #444;}
.notice_list li .txt{ color: #444444; line-height: 1.8;}
.notice_list li .txt p{overflow: hidden; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;font-size: var(--fz-24); }
.notice_list li .txt p br{display: none;}
.notice_list li .hide_txt{display: none;}

.notice_list li .tit{font-size: var(--fz-24); padding: 20px 0; font-weight: bold; letter-spacing: -0.025em; color: #444444;}
.notice_list li .tit h3{overflow: hidden; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis;}
/* case */
.notice_list.type02 li a{display: flex; flex-wrap: wrap; padding: 40px; gap: 75px; align-items: center;}
.notice_list.type02 li .img_box{width: 100%; max-width: 320px; aspect-ratio: 1/0.7; background-color: #eeeeee;}
.notice_list.type02 li .img_box img{width: 100%; object-fit: cover; height:100%;}
.notice_list.type02 li .txt_box{width: calc(100% - 395px);}
.notice_list.type02 li .txt p{-webkit-line-clamp: 3; }


@media all and (max-width:980px) {
     .notice_list li a{padding: 35px 45px; }

     .notice_list.type02 li a{padding: 25px; gap: 30px;}
}
@media all and (max-width:830px) {
     .notice_list.type02 li a{gap: 20px;}
     .notice_list.type02 li .txt_box{width: calc(100%);}
}

.page_custom{display: flex; gap: 15px; justify-content: center; margin: 100px auto 0;}
.page_custom a{width: 40px; transition: all 0.3s; position: relative; text-align: center; font-size: 16px; font-weight: 500; color: #888888; line-height: 40px; height: 40px; border-radius: 50%;  display: inline-block;}
.page_custom a:hover{background-color: #fa744f; color: #fff;}
.page_custom a.active{background-color: #fa744f; color: #fff;}
.page_custom .btn{background-color: #f7f5f3;}
.page_custom .btn i{display: inline-block; top:50%; left: 50%; transform: translate(-50%, -50% ); position: absolute; width: 7px; height: 10px; background: url(/img/arr_icon01.png); }
.page_custom .pre i{background: url(/img/arr_icon02.png);}
.page_custom .btn.end i{left: 44%;}
.page_custom .btn i + i{margin-left:7px;}


/* ---------------------------------------

    보도자료

---------------------------------------- */
/*.press .tab_btn{display: flex; gap: 10px; flex-wrap: wrap;}
.press .tab_btn li{width: 123px; height: 60px; background: #fff; text-align: center; border-radius: 35px; line-height: 60px;  box-sizing: border-box; border: 1px solid #fa744f; color: #fa744f; font-size: 18px; font-weight: 500; letter-spacing: -0.025em;}
.press .tab_btn li.on{background: #fa744f; color: #fff; box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.16);}*/
.tab_btn_list{display: flex; gap: 10px; flex-wrap: wrap;}
.tab_btn_list li{width: 123px; height: 60px; background: #fff; text-align: center; border-radius: 35px; line-height: 60px;  box-sizing: border-box; border: 1px solid #fa744f; color: #fa744f; font-size: 18px; font-weight: 500; letter-spacing: -0.025em;}
.tab_btn_list li.on{background: #fa744f; color: #fff; box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.16);}
.tab_btn_list li a{display: block;}

.press .board_list{display: flex; flex-wrap: wrap; gap: 40px; justify-content: center;}
.press .board_list li{ width: calc(25% - 30px); }

.press .board_list li .img_box{width: 100%; aspect-ratio: 1/0.8; background-color: #eeeeee;}
.press .board_list li .img_box img{width: 100%; height: 100%; object-fit: cover;}

.press .board_list li .top{display: flex; align-items: flex-end; gap: 15px;  padding: 20px 0; }
.press .board_list li h5{font-size: var(--fz-20);margin: 0; display: inline-block; font-weight: bold; letter-spacing: -0.025em; color: #fa744f;}
.press .board_list li .date{ color: #c0bdba; font-size: var(--fz-18);  font-weight: 400; letter-spacing: -0.025em;}

.press .board_list li .tit{font-size: var(--fz-24);  font-weight: bold; letter-spacing: -0.025em; color: #444444;}
.press .board_list li .tit h3{overflow: hidden; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;}

@media all and (max-width:1430px) {
    .press .board_list{gap: 20px;}
    .press .board_list li{ width: calc(25% - 15px); }
}
@media all and (max-width:1024px) {
    .press .board_list li{ width: calc(33.333% - 14px); }
}
@media all and (max-width:780px) {
    .press .board_list li{ width: calc(50% - 10px); }
}
@media all and (max-width:600px) {
    .press .board_list li{ width: calc(100%); max-width: 480px;}
}

/* ---------------------------------------

    문의

---------------------------------------- */
.inq .flex_row {display: flex; row-gap: 30px; flex-wrap: wrap; align-items: center;}
.inq .flex_row > div{width: 50%;}


.inq .info_box{border-left: 2px solid #444444; padding: 40px 20px 40px 50px; box-sizing: border-box;}
.inq .info_box ul li{font-size: var(--fz-20); color: #222; font-weight: 300; display: flex; letter-spacing: -0.025em;}
.inq .info_box ul li p:first-child{width: 90px;}
.inq .info_box ul li p:last-child{width: calc(100% - 90px)}
.inq .info_box ul li + li{margin-top: 20px;}

.inq .btn_wrap{display: flex; gap: 20px; flex-wrap: wrap;}
.inq .btn_wrap .btn{width:calc(50% - 10px); cursor: pointer; overflow: hidden; aspect-ratio: 1/0.7; display: flex; flex-direction: column; align-items: flex-start; max-width: 350px; border: 1px solid #fa744f; border-radius: 25px; padding: 50px; position: relative; box-sizing: border-box;}
.inq .btn_wrap .btn::after{content: ''; position: absolute; top: 0; left: 0; background-color: rgba(250,116,79,1); display: inline-block; width: 100%; height: 100%; opacity: 0; transition: all 0.3s; }
.inq .btn_wrap .btn .txt{position: relative; z-index: 10;}
.inq .btn_wrap .btn h5{font-size: var(--fz-24); font-weight: 500; letter-spacing: -0.025em; color: #fa744f;}
.inq .btn_wrap .btn p{font-size: var(--fz-18); font-weight: 400; letter-spacing: -0.025em; line-height: 1.5;}

.inq .btn_wrap .btn::before{content: ''; position: absolute; z-index: 10; bottom: 20px; right: 20px; display: inline-block; width: 20px; height: 20px; background-color: #fa744f; clip-path: polygon(100% 0, 0% 100%, 100% 100%);}
.inq .btn_wrap .btn.bg01{background: url(/img/inq_con01_box01.png)no-repeat center / cover;}
.inq .btn_wrap .btn.bg02{background: url(/img/inq_con01_box02.png)no-repeat center / cover;}

.inq .btn_wrap .btn:hover::after{opacity: 0.7;}
.inq .btn_wrap .btn:hover h5{color: #fff;}
.inq .btn_wrap .btn:hover p{color: #fff;}
.inq .btn_wrap .btn:hover::before{background-color: #fff;}


@media all and (max-width:1024px) {
    .inq .txt_wrap{width: 65% !important;}
    
    .inq .btn_wrap {margin-left: auto; max-width: 280px;}
    .inq .btn_wrap .btn{width: 100%;} 
}
@media all and (max-width:860px) {
    .inq .flex_row .txt_wrap{width: 100% !important; }
    .inq .flex_row .info_box{padding: 30px 20px;}
    .inq .flex_row .btn_wrap{width: 100%; max-width: 620px; margin: 0 auto;}
    .inq .btn_wrap .btn{width: calc(50% - 10px); padding: 30px;}
} 

.inq .priv_wrap .tit h5{font-size: var(--fz-32); padding-bottom: 30px; font-weight: bold; letter-spacing: -0.025em; color: #222;}
.inq .priv_wrap .box{border-top: 1px solid #dbdbdb;  background-color: #fff; border-bottom: 1px solid #dbdbdb;}


/* ---------------------------------------

    shop

---------------------------------------- */
.shop_header .inner{justify-content: space-between; padding: 25px 0; align-items: center; }
.shop_header .home_btn a{display: inline-block; letter-spacing: 0.025; font-size: var(--fz-18); padding: 15px 25px; box-sizing: border-box; font-weight: 500; color: #666666; width: fit-content; border-radius: 25px; border: 1px solid #eeeeee; text-align: center;}
.shop_header .home_btn a::after{content: ''; transform: translateY(3px); margin-left: 8px; display: inline-block; width: 18px; height: 18px; background: url(/img/shop_home_icon01.png);}
.shop_header .user_box{display: flex; }
.shop_header .user_box a{display: inline-block; position: relative; font-size: var(--fz-16); font-weight: 400; letter-spacing: 0.025em; color: #888888; padding: 0 20px; box-sizing: border-box;}
.shop_header .user_box a + a::before{content: ''; position: absolute; top: 50% ; left: 0; transform: translateY(-50%); display: inline-block; width: 1px; height: 12px; background-color: #bdbdbd;  }


.shop .top_con .logo_box{padding: 60px 0 100px; text-align: center;}
.shop .top_con .logo_box img{width: fit-content;}

.shop .top_con .tab_btn_wrap{border-bottom: 1px solid #dbdbdb;}
.shop .top_con .tab_btn_wrap ul{display: flex; justify-content: center;}
.shop .top_con .tab_btn_wrap ul li {padding: 0 40px; box-sizing: border-box;}
.shop .top_con .tab_btn_wrap ul li.active a{color: #fa744f;}
.shop .top_con .tab_btn_wrap ul li.active a::before{content: ''; position: absolute; bottom: -1px; left: 0; display: inline-block; width: 100%; height: 2px; background-color: #fa744f;}
.shop .top_con .tab_btn_wrap ul li a{display: inline-block; font-size: var(--fz-20); position: relative; color: #3d3935; font-weight: 500; letter-spacing: 0.025; padding: 0 0 30px 0; width: fit-content; text-align: center;}

.shop_detail .top_con .tab_btn_wrap{border-top: 1px solid #dbdbdb; border-bottom: none; padding: 45px 0 35px;}
.shop .sub_tab_lnb{display: flex; align-items: center; gap: 5px;}
.shop .sub_tab_lnb a{font-size: 20px;}
.shop .sub_tab_lnb i{display: block; width: 10px; height: 10px; transform: rotate(45deg); border-top: 1.5px solid #000; border-right: 1.5px solid #000; box-sizing: border-box; margin-left: -3px;}

.shop .order_list{display: flex; box-sizing: border-box; justify-content: flex-end; padding: 45px 0 35px;}
.shop .order_list a{font-size: var(--fz-18); display: inline-block; position: relative; padding: 0 15px; box-sizing: border-box; font-weight: 500; color: #999999; letter-spacing: -0.025em;}
.shop .order_list a + a::after{content: ''; position: absolute; top: 4px; left: 0; display: inline-block;width: 1px; height: 14px; background-color: #bdbdbd;}
.shop .order_list a.active{color: #444;}
.shop .order_list a.active::before{content: ''; margin-right: 10px; display: inline-block; width: 15px; height: 15px; background: url(/img/order_check_icon01.png);}


.shop .shop_list{display: flex; gap: 30px; flex-wrap: wrap;}
.shop .shop_list li{width: calc(33.33% - 20px); }
.shop .shop_list li .img_box{aspect-ratio: 1/1; position: relative; width: 100%; border: 1px solid #dedede;}
.shop .shop_list li .img_box img{width: 100%; height: 100%; object-fit: cover;}
.shop .shop_list li .hover_icon{position: absolute; transition: all 0.3s; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background-color: #fa744f; box-shadow: 3px 2px 15px 0 rgba(0, 0, 0, 0.16);}
.shop .shop_list li .hover_icon::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 16px; height: 16px; background: url(/img/shop_hover_icon01.png);}

.shop .shop_list li .txt_box{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; padding-top: 20px;}
.shop .shop_list li .txt_box .tit h5{font-size: var(--fz-20); margin: 0; font-weight: 400; color: #666666; letter-spacing: 0.025;}
.shop .shop_list li .txt_box .price p{font-size: var(--fz-16); display: inline-block; font-weight: 400; letter-spacing: -0.025em; color: #666666;}
.shop .shop_list li .txt_box .price b{font-size: var(--fz-28); color: #222222; letter-spacing: -0.025em; }

.shop .shop_list li:hover .hover_icon{opacity: 1;}
.shop .shop_list li:hover .txt_box .price b{color: #fa744f;}



@media all and (max-width:800px) {
    .shop .top_con .logo_box{padding: 10px 0 50px;}
    .shop .shop_list li .txt_box .tit {width: 100%;}
    .shop .shop_list li .txt_box .price {margin-left: auto;}
    .shop .sub_tab_lnb a{font-size: 16px;}
    .shop .sub_tab_lnb i{width: 8px; height: 8px; margin-top: -2px;}
}
@media all and (max-width:630px) {
    .shop .top_con .tab_btn_wrap ul li {padding: 0 20px;}

    .shop .shop_list{gap: 10px;}
    .shop .shop_list li{width: calc(50% - 5px); }
}


.shop_header .m_btn {display:none; width:24px; text-align:right; cursor:pointer; }
.shop_header .m_btn i{display:inline-block; width:100%; height:2px; margin:3px 0; background:#000; transition:all 0.5s;}
.shop_header .m_btn i:nth-of-type(2){width:84%;}
.shop_header .m_btn.on i:nth-of-type(1){margin:11px 0 -2px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
.shop_header .m_btn.on i:nth-of-type(2){width:0; margin:0;}
.shop_header .m_btn.on i:nth-of-type(3){margin:0 0 11px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg);}

@media all and (max-width:1024px){
    .shop_header .user_box{display: none;}
    .shop_header .m_btn{display: block;}
}

.shop #m_menu .top_box{height: 103px;}
.shop #m_menu .user_box {border-top:1px solid #ddd; }
.shop #m_menu .user_box > a {position:relative; display:block; padding:20px 20px; font-size:20px; font-weight:bold; color:#222222; letter-spacing:-0.04em; box-sizing:border-box; border-bottom:1px solid #dddddd; }

.shop .cart{padding-top: 0;}
.shop h3.common{padding: 45px 0 35px;}
.shop .mypage{padding-top: 0;}
.shop .order{padding-top: 0;}
.shop .programCon_Custom{margin-top: 0;}
.shop .programCon_Custom .writeForm{margin-top: 0;}
.shop .programCon_Custom .login_wrap{border-top: none;}


/* ---------------------------------------

    제품 공통

---------------------------------------- */
.bio .flex_row{display: flex; flex-wrap: wrap;}
.bio .flex_row.flex_end{align-items: flex-end;}
.bio .flex_row.center{align-items: center;}
.bio .flex_row > div{width: 50%;}

.bio .bg_box{background: url(/img/bio_con01_txt_bg01.png); background-repeat: no-repeat;background-position: right center;}
.bio .pdf_list .tit p{color: #222; font-weight: 700; font-size: 20px;}
.bio .pdf_list ul{margin-top: 20px;}
.bio .pdf_list ul li a{display: flex; align-items: center; gap:0 5px; font-size: 18px; font-weight: 500; color: #fa744f;}
.bio .pdf_list ul li a i img{width: 70%;}
.bio .pdf_list ul li + li{margin-top: 10px;}

.bio .txt_wrap .txt_box .txt p{font-size: var(--fz-20); line-height: 1.7; font-weight: 300; letter-spacing: -0.025em; color: #444444;}

.bio .img_wrap .img_box{border-radius: 35px; aspect-ratio: 1/1; margin-right: 50px; width: fit-content; overflow: hidden; box-sizing: border-box; border: 1px solid #dbdbdb;}
.bio .img_wrap .img_box.none{border: none; border-radius: 0;}
.bio .img_wrap .img_box.none img{width: 100%; object-fit: contain;}

.bio .img_box img{width: 100%; object-fit: cover; height: 100%;}
.bio .title h5{font-size: var(--fz-52); font-weight: bold; letter-spacing: -0.025em; color: #222222; margin-bottom: 30px;}

.bio .img_list {display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;}
.bio .img_list li{width: calc(33.33% - 20px);}
.bio .img_list .txt_box {padding: 35px; box-sizing: border-box;}
.bio .img_list .txt_box .tit h5{font-size: var(--fz-24); font-weight: bold; letter-spacing: -0.025em; color: #222; line-height: 1.4em;}
.bio .img_list .txt_box .txt p{font-size: var(--fz-18); letter-spacing: -0.025em; font-weight: 300; color: #444444; line-height: 1.5em;}


.bio .row01 .count_list{width: 100%;}
.bio .row01 .count_list li {display: flex;}
.bio .row01 .count_list li + li{margin-top: 30px;}
.bio .row01 .count_list li .left_box{width: 55%;}
.bio .row01 .count_list li .left_box.type02{width:100%;}
.bio .row01 .count_list li .right_box{padding-left: 30px; background: url(/img/activo_con01_right01.png)no-repeat left center; display: flex; align-items: center;}
.bio .row01 .count_list li .left_box p{display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0;}
.bio .row01 .count_list li .left_box p + p{margin-top: 8px;}
.bio .row01 .count_list li p i{font-style: normal; width: 40px; aspect-ratio: 1/1; box-sizing: border-box; background-color: #fa744f; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; letter-spacing: -0.025em; font-size: var(--fz-16); margin-right: 8px;}
.bio .row01 .count_list li p{font-size: var(--fz-18);}
.bio .row01 .count_list li p b{margin-right: 5px;}

@media all and (max-width:1200px){
	.bio .row01 .count_list li{flex-wrap: wrap;}
	.bio .row01 .count_list li .left_box,
	.bio .row01 .count_list li .right_box{width: 100%;}
	.bio .row01 .count_list li .right_box{padding-left: 0; background:transparent; border-top: dashed 1px #000; padding-top: 10px; margin-top: 10px;}
	.bio .row01 .count_list li .left_box p b{width: 88%; display: inline-block;}
}



@media all and (max-width:1024px) {
    .bio .flex_row > div{width: 100%;}
    .bio .img_wrap .img_box{margin: 0 auto 30px;}

    .bio .img_list{gap: 10px;}
    .bio .img_list li{width: calc(33.33% - 7px);}

    .bio .img_list .txt_box {padding: 25px 10px; }
}
@media all and (max-width:750px) {
    .bio .img_list li{width: calc(100%); max-width: 420px;}
}
/* ---------------------------------------

    U-FAB ACTIVO

---------------------------------------- */
/*--- common ---*/
.activo .box_wrap {display: flex; flex-wrap: wrap; gap: 60px 80px;}
.activo .box_wrap .box {width: calc(50% - 40px); border-top: 2px solid #fa744f; box-sizing: border-box; padding-top: 40px;}
.activo .box_wrap .box .disc{padding-left: 20px;}
.activo .box_wrap .box .disc li{list-style: disc; font-size: 18px; letter-spacing: -0.025em; line-height: 1.6666em; font-weight: 300;}
.activo .box_title {margin-bottom: 30px;}
.activo .box_title h5 {font-weight: 700; font-size: var(--fz-26); line-height: 1.4em;}
.activo .box_title span {font-weight: 300; font-size: var(--fz-18);}
.activo .img_wrap {display: flex; gap: 20px;}
.activo .img_wrap [class^=img] {width: calc(50% - 10px);}
.activo .img-1 {border-radius: 20px; border-top-right-radius: 80px; overflow: hidden;}
.activo .img-1 img {width: 100%;}
.activo .img-2 {border-radius: 10px; padding: 15px; box-sizing: border-box; border: 1px solid #e5e5e5;}
.activo .img-2 img {width: 100%; border-radius: 8px;}
/* --- box01 --- */
.activo .box-1 .imgList-1 {display: flex; gap: 20px;}
.activo .box-1 .imgList-1 > li {width: calc(33.3333% - 14px);}
.activo .box-1 .txt_box {margin-top: 25px;}
.activo .box-1 .txt_box .line_wrap {position: relative;}
.activo .box-1 .txt_box .line_wrap::before {content: ''; position: absolute; width: calc(100% + 20px); height: 1px; border-top: 1px dashed #aaa; top: 50%; left: 0; transform: translateY(-50%);}
.activo .box-1 .txt_box i {font-style: normal; display: flex; align-items: center; justify-content: center; width: 60px; height: 30px; border-radius: 30px; background-color: #eeecea; font-weight: 600; font-size: var(--fz-16); letter-spacing: 0; color: #aca7a3; margin-bottom: 25px; position: relative;}
.activo .box-1 .txt_box i.orange {background-color: #fa744f; color: #fff;}
.activo .box-1 .txt_box p {font-weight: 700; font-size: var(--fz-18); line-height: 1.66em;}
.activo .box-1 .gray_box {background-color: #f7f5f3; border-radius: 30px; padding: 40px; box-sizing: border-box;}


@media all and (max-width: 1024px) {
    .activo .box_wrap {column-gap: 20px;}
    .activo .box_wrap .box {width: calc(50% - 10px);}
}

@media all and (max-width: 767px) {
    .activo .box_wrap .box {width: 100%;}
}

/* ---------------------------------------

    Bioinks Common

---------------------------------------- */
/* visual */
.ink_visual {background: url(/img/ink_con01_bg.png) no-repeat center center; padding: 90px 0; box-sizing: border-box; text-align: center;}
.ink_visual img {width: 100%; max-width: fit-content;}
/* title */
.ink .title {margin-bottom: 35px;}
/* img list type02 */
.ink .imgList-2 {display: flex; gap: 36px;}
.ink .imgList-2 > li {width: calc(50% - 18px); padding: 15px; padding-bottom: 0; box-sizing: border-box; border-radius: 10px; background-color: #f7f5f3;}
.ink .imgList-2 > li.color {background: linear-gradient(to top, #fa8564, #fde2da); color: #fff;}
.ink .imgList-2 > li .img img {width: 100%; border-radius: 8px;}
.ink .imgList-2 > li .txt {text-align: center; padding: 25px; box-sizing: border-box;}
.ink .imgList-2 > li .txt p {font-weight: 700; font-size: var(--fz-26);}

@media all and (max-width: 1024px) {
    .ink .imgList-2 {gap: 20px;}
    .ink .imgList-2 > li {width: calc(50% - 10px);}
}

@media all and (max-width: 767px) {
    .ink .imgList-2 {flex-wrap: wrap;}
    .ink .imgList-2 > li {width: 100%;}
}
/* list type01 */
.ink .list-1 {border-top: 2px solid #fa744f; box-sizing: border-box; counter-reset: inkList; max-width: 960px; margin-left: auto;}
.ink .list-1 > li {border-bottom: 1px solid #e5e5e5; box-sizing: border-box; counter-increment: inkList; display: flex; gap: 15px; padding: 30px 0;}
.ink .list-1 > li::before {content: counter(inkList, decimal-leading-zero); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 6px; border-top-right-radius: 20px; font-weight: 500; font-size: 18px; color: #fff; background-color: #fa744f; flex-shrink: 0;}
.ink .list-1 > li h5 {font-weight: 700; font-size: var(--fz-26); min-height: 50px; display: flex; align-items: center;}
.ink .list-1 .disc {margin-top: 10px;}


/* ---------------------------------------

    skins common

---------------------------------------- */
.skins .row01 .img_box img {width: 100%;}


/* ---------------------------------------

    Cleskin FT and Epi

---------------------------------------- */

.arti .con01 .flex_row .img_wrap {width: calc(30% + 35px);}
.arti .con01 .flex_row .txt_wrap {width: calc(70% - 35px);}

@media all and (max-width: 1024px) {
    .arti .con01 .flex_row {flex-direction: column;}
    .arti .con01 .flex_row .img_wrap {width: 100%; max-width: 335px;}
    .arti .con01 .flex_row .txt_wrap {width: 100%;}
}
.arti .con02 .img_box {text-align: center; margin-bottom: 50px;}
.arti .con02 .img_box img {width: 100%; max-width: fit-content;}
.arti .con02 .row01 ul {display: flex;}
.arti .con02 .row01 ul li {width: 50%; background-color: #f7f5f3; text-align: center; padding: 10px; padding-top: 0; box-sizing: border-box;}
.arti .con02 .row01 ul li h5 {font-weight: 700; font-size: var(--fz-24); padding: 20px 0; box-sizing: border-box;}
.arti .con02 .row01 ul li .txt_box {background-color: #fff; padding: 50px; box-sizing: border-box;}
.arti .con02 .row01 ul li .txt_box p {font-size: var(--fz-20); line-height: 1.7em; color: #444;}
.arti .con02 .row01 ul li.color {background-color: #fa744f;}
.arti .con02 .row01 ul li.color h5 {color: #fff;}
.arti .con02 .row01 ul li.color .txt_box h5 {color: #fa744f;}

@media all and (max-width: 767px) {
    .arti .con02 .row01 ul {flex-wrap: wrap;}
    .arti .con02 .row01 ul li {width: 100%;}
}


/* board.css custom */
.writeForm_btn.ta-right {text-align: right;}
.writeForm_btn.ta-right a {text-align: center;}