@charset "utf-8";

/*** common ***/
#header:after {display:block; height:260px; content:'';}
#contents {padding-bottom:100px;}
.userinfo .tbl_form .tf {display:inline-block; width:300px; margin-right:5px;}
.userinfo .tbl_form .tf + p {font-size:14px; display:inline-block; margin-left:5px;}
.userinfo .tf_phone .slt {float:left;}
.userinfo + .wrap_btn {padding-top:100px; text-align:center;}
.userinfo + .wrap_btn button {display:inline-block; width:200px; margin:0 3px;}
.tab_comm {margin-top:60px;}
.tab_comm ul {width:700px;margin:0 auto; overflow:hidden; border:1px solid #ddd;}
.tab_comm ul li {position:relative; float:left;}
.tab_comm ul li+li:after {position:absolute; top:0; left:0; width:1px; height:45px; background:#ddd; content:''}
.tab_comm ul li a {line-height:45px; text-align:center; background:#f5f5f5;}
.tab_comm ul li.on a {background:#fff; font-weight:bold;}
.tab_comm .tab2 li {width:50%;}
.tab_comm .tab3 li {width:50%;}




/*** user ***/
/* 회원가입 */
.join #header:after {background:url(../_img/bg/bg_sub1.jpg) 50% 50% no-repeat fixed; background-size:cover;}
.join h3.tit_cont {font-size:24px; font-weight:normal; margin-bottom:5px;}
.join .box {height:150px; padding:20px; background:#f5f5f5; font-size:14px; overflow-y:auto;}
.join .check {margin-top:18px;}
.join .item + .item {margin-top:60px;}

/* 로그인,  아이디/비밀번호 찾기  */
.login #header:after {background:url(../_img/bg/bg_sub1.jpg) 50% 50% no-repeat fixed; background-size:cover;}
.login .box {width:420px; padding:60px 200px; margin:0 auto;}
.login .btn60 {display:block; margin-top:40px;}
.login button.btn60 {width:100%;}
.login .list_link {display:table; width:100%; margin-top:30px; padding-top:25px; border-top:1px solid #ddd;}
.login .list_link li {display:table-cell;}
.login .list_link li+li {padding-left:28px;}
.login .list_link li a {text-decoration:underline; color:#555}
.login .list_link li a:hover {color:#000;}
.login .yourinfo {font-size:20px; text-align:center; line-height:30px;}
.login .yourinfo .emph {font-weight:bold; letter-spacing:0;}
.login .yourinfo + .wrap_btn {overflow:hidden;}
.login .yourinfo + .wrap_btn li {width:195px}

/* 질문&답변 */
.qna #header:after {background:url(../_img/bg/bg_sub2.jpg) 50% 50% no-repeat fixed; background-size:cover;}
.qna .view .question {padding:20px; border-bottom:none;}
.qna .view .answer .inner {min-height:0; background:#f5f5f5; padding:20px;}
.qna .view .answer strong {display:block; position:relative; padding-left:10px; margin-bottom:8px;}
.qna .view .answer strong:after {position:absolute; top:50%; left:0; width:0; height:0; border-left:4px solid #333; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-top:-4px;  content:''}
.qna .view .answer p {min-height:120px; padding-bottom:30px;}
.qna .view .answer .txtarea {margin-bottom:20px;}
.qna .view .answer textarea {min-height:100px; height:auto; resize:vertical;}
.qna .view .answer .wrap_btn {text-align:right; font-size:0}
.qna .view .answer .wrap_btn * {margin-left:5px;}
.qna .view .noanswer strong {display:none;}
.qna .view .noanswer p {min-height:0;}
.layer_pw {font-size:18px;}
.layer_pw .desc {padding:40px 0; text-align:center; line-height:26px;}
.layer_pw .dl_form {width:380px; margin:0 auto;}
.layer_pw .wrap_btn {width:410px; margin:50px auto 0;}
.layer_pw .wrap_btn li {width:200px;}
.layer_pw .wrap_btn li + li {margin-left:10px;}

/*** 마이페이지 ***/
/* 주문내역 */
.my #header:after {background:url(../_img/bg/bg_sub3.jpg) 50% 50% no-repeat fixed; background-size:cover;}
.my .board .list .thumb {display:inline-block; width:40px; max-height:56px; overflow:hidden;}
/* 회원정보 수정 */
.my .userinfo .check {margin-top:18px;}
.my .od_detail #btnModi {position:absolute; top:12px; right:12px; padding:0 9px;}
.my .od_detail #btnModi .ico_comm {width:16px; height:17px; background-position:-110px -110px; margin:8px 3px 0 0;}
.my .od_detail .send {margin-top:42px; overflow:hidden}
.my .od_detail .send .wrap_dl {margin:0 0 15px 0; padding-bottom:15px; border-bottom:1px solid #ddd;}
.my .od_detail .send dl {float:left; width:50%}
.my .od_detail .send dt {float:left; width:84px; line-height:30px; border:1px solid #ccc; border-radius:4px; text-align:center; margin-right:12px; font-size:14px;}
.my .od_detail .send dd {overflow:hidden; line-height:32px; font-size:16px;}
.my .od_detail .wrap_box + .tac {margin-top:40px;}





/*** 기타 ***/
.intro #header:after {background:url(../_img/bg/bg_sub3.jpg) 50% 50% no-repeat fixed; background-size:cover;}
/* 회사 소개 */
.intro .ovf p {width:570px; margin-top:20px; line-height:30px;}
.intro .graphic {position:relative; width:1020px; margin:70px auto 0; background:url(../_img/bg/company_graphic.png) 50% 0 no-repeat; }
.intro .graphic .fl,
.intro .graphic .fr {width:500px; height:200px;}
.intro .graphic .fr {text-align:right;}
.intro .item3,
.intro .item4 {margin:20px 0 10px;}
.intro .graphic strong,
.intro .graphic ul {padding:22px 50px 0;}
.intro .graphic ul li {line-height:22px;}
.intro .graphic .tit_graphic {position:absolute; top:50px; left:50%; width:321px; height:211px; padding-top:130px; margin-left:-160px; font-size:24px; line-height:30px; text-align:center; font-weight:bold;}
.intro .graphic .info {clear:both; text-align:right; font-size:14px;}
.intro .graphic .info span {font-weight:bold;}
/* 회원탈퇴 */
.desc_unregister {background:#f5f5f5; padding:30px; margin:20px 0 50px; text-align:center;}




/*서비스소개
http://bonobo.co.kr/datazone/dm/intro/service.php*/

body.intro #contents .textBox{width:850px; margin: auto; font-size: 17px; line-height: 1.9; letter-spacing: -0.6px;}

body.intro #contents.service .textBox p{margin-bottom: 30px;}

body.intro #contents.service .textBox strong{font-size: 19px; font-weight: normal; color: #f37025;}

body.intro #contents.service .textBox ul{overflow: hidden;


 border-top: 3px solid #F37025;border-bottom: 3px solid #F37025;background: #f5f5f5;
}

body.intro #contents.service .textBox ul li{ font-size: 17px; font-weight: 300; width:25%; height: 230px; float: left;  padding:35px 25px;  position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;  -webkit-transition: all 0.6s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}


body.intro #contents.service .textBox ul li.step3{padding:48px 25px; }

body.intro #contents.service .textBox b{font-weight:500;}


body.intro #contents.service .textBox ul li:last-child{margin-right: 0px;}

body.intro #contents.service .textBox ul li.on{background:rgba(243, 112, 37,0.9); color: white; font-weight: 500; }

body.intro #contents.service .textBox p.last{clear: both; margin-top: 60px;}


body.intro #contents.service .textBox ul li span.txt{text-align: center; display: block;}


body.intro #contents.service .textBox ul li span.arrow{position: absolute; right:5px; top:110px; color:#a2a2a2; font-weight: 600; z-index: 10; display: none;}




body.intro #contents.service .textBox dl{margin-bottom: 40px;}

body.intro #contents.service .textBox dl dt{margin-bottom: 10px;}
body.intro #contents.service .textBox dl dd{padding-left: 20px;}


body.intro #contents.service .textBox dl dd.paddingremove{padding-left: 0;}

body.intro #contents.service .textBox dl dd.paddingremove table{border-top: 3px solid #F37025; }
body.intro #contents.service .textBox dl dd.paddingremove table th{background:#fafafa; height: 60px; font-weight: 500; border: 1px solid #ddd; border-left:0px;}

body.intro #contents.service .textBox dl dd.paddingremove table td{font-size: 15px; height: 60px; text-align: center; border: 1px solid #ddd; -webkit-box-sizing: border-box; box-sizing: border-box; border-left:0px;}

body.intro #contents.service .textBox dl dd.paddingremove table th.borL,
body.intro #contents.service .textBox dl dd.paddingremove table td.borL{border-left:0px;}

body.intro #contents.service .textBox dl dd.paddingremove table th:last-child,
body.intro #contents.service .textBox dl dd.paddingremove table td:last-child{border-right:0px;}

/**cost.php 이용요금************/



/************회원약관**************/
body.intro #contents.intro .textBox{
  width:850px;
}


/************이용안내**************/
body.intro  #contents.guide .textBox img{width:100%; border: 1px solid black; box-sizing: border-box; margin-bottom: 10px; margin-top: 10px;}
/*
body.intro  #contents.guide .textBox span{color:#ff6600;} */


body.intro  #contents.guide span.videoBtn{color: #ff6600; font-weight: normal; font-size: 15px;}

body.intro  #contents.guide span.videoBtn a{color:inherit; font-size: inherit; font-weight: inherit; margin-left:5px;}
body.intro  #contents.guide span.videoBtn a .fas{margin-right: 5px;}




body.intro .video_popup{position: fixed; width:100%; height: 100%; background:rgba(0,0,0,.5); top:0; left:0; z-index: 300; display: none;}

body.intro .video_popup .videoForm{width:850px; height:423px; background: white; border:1px solid black; position: absolute; top:50%; left: 50%; margin-top:-210px; margin-left:-425px; position: relative;}
body.intro .video_popup .videoForm video{width:100%; height: 100%;}

body.intro .video_popup .videoForm a.closeBtn{display: block; position: absolute; right:10px; top:10px; width:30px; height:30px; background-image:url(../_img/cont/times-circle.svg);}




body.intro .video_popup video::media-controls-volume-slider {
display:none;
}

body.intro .video_popup video::media-controls-mute-button {
display:none;
}



body.intro #contents.service .textBox dl dd.paddingremove table td#slash{background:url(../_img/cont/slash.png) no-repeat; background-size:100% 100%; opacity:0.2;}