@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/*** reset ***/
html {-webkit-text-size-adjust: none;}
html, body {height:100%; font-size:16px; color:#353535; font-weight:300; letter-spacing:-0.03em; line-height:1.6; font-family:'Noto Sans KR','HelveticaNeue-Light','Apple SD Gothic Neo','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif !important}
html, body, div, ul, ol, li, dl, dt, dd, p, strong, span, em, a, table, th, td, caption, input, button, textarea, label, form, legend, fieldset, select, hr, h1, h2, h3, h4, h5, h6, img {padding:0; margin:0; border:0; color:inherit; background:none; line-height:inherit; font-size:inherit; font-family:inherit}
table {width:100%; border-collapse:collapse; border-spacing:0;}
th, td {vertical-align:middle}
input {-webkit-appearance:none; border-radius:0}
select, button {cursor:pointer}
ul, ol {list-style:none;}
img {max-width:100%; vertical-align:top;}
a {color:inherit; text-decoration:none}
em {font-style:normal}
strong {font-weight:600}

/*** common ***/
/* layout */



#wrap {min-height:100%; min-width:1200px;}
.wfix {position:relative; width:1200px; margin:0 auto;}
h2.title {padding-top:60px; margin-bottom:35px; text-align:center; font-size:36px; font-weight:500}
h2.title:after {display:block; width:38px; height:4px; margin:20px auto 0; background:#f37025; content:''}
h2.title + .desc {padding-bottom:70px; font-size:18px; text-align:center;}

#stepBar{width: 100%; }
#stepBar .wfix{width:100%;}

/* 정렬 */
.ovf {overflow:hidden;}
.after:after {display:block; width:100%; height:0; visibility:hidden; clear:both; content:''}
.fl {float:left;}
.fr {float:right;}
.tal {text-align:left !important}
.tar {text-align:right !important;}
.tac {text-align:center !important;}
/* form */
.tf {display:block; position:relative; border:1px solid #d5d5d5; padding:3px; background:#fff; }
.tf input {display:block; width:100%; height:32px; text-indent:0.3em; letter-spacing:0;}
.slt {position:relative; border:1px solid #d5d5d5; background:#fff;}
.slt select {top:0; left:0; width:100%; height:38px;}
.slt .slt_cover:after {position:absolute; top:50%; right:10px; width:0; height:0; margin-top:-2px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #555; content:''}
.slt .slt_coverInner {display:block; line-height:38px; text-indent:0.3em;}
.chk {display:none;}
.chk + .lab {position:relative; padding-left:30px; line-height:24px; cursor:pointer}
.chk + .lab:after {position:absolute; top:0; left:0; width:22px; height:22px; border:1px solid #ccc; background:#fff; content:''}
.chk:checked + .lab {font-weight:500;}
.chk[type="checkbox"] + .lab:after {border-radius:2px;}
.chk[type="checkbox"]:checked + .lab:after {background:url(../_img/comm/ico_comm.png) -80px -95px no-repeat #fff;}
.chk[type="radio"] + .lab:after {border-radius:100%;}
.chk[type="radio"]:checked + .lab:after {background:url(../_img/comm/ico_comm.png) -80px -120px no-repeat #fff;}
.btn30 {display:inline-block; line-height:28px; padding:0 10px; font-size:14px; min-width:40px; text-align:center;}
.btn35 {display:inline-block; line-height:33px; padding:0 14px; font-size:15px; min-width:70px; text-align:center;}
.btn40 {display:inline-block; line-height:38px; padding:0 14px; font-size:15px; min-width:70px; text-align:center}
.btn45 {display:inline-block; line-height:43px; padding:0 14px; font-size:15px; min-width:70px; text-align:center}
.btn60 {display:inline-block; line-height:58px; padding:0 30px; font-size:18px; min-width:110px; text-align:center}
.btn_rdus {border-radius:4px;}
.btn_dark {border:1px solid #454545; background:#555; color:#fff; cursor:pointer;}
.btn_dark:hover {background:#444;}
.btn_white {border:1px solid #777; background:#fff; color:#333; cursor:pointer;}
.btn_white:hover {background:#f8f8f8;}
.btn_emph {border:1px solid #e94200; background:#e95500; color:#fff; cursor:pointer;}
.btn_emph:hover {background:#db5407;}
.file {position:relative; overflow:hidden;}
.file .tf {float:left; width:380px;}
.file .file_input input {display:none;}
.file .file_input label {float:left; margin:0 10px 0 5px; cursor:pointer}
.file > button {float:left; width:30px; height:30px; margin-top:5px; margin-left:10px; border:1px solid #d5d5d5; text-align:center; font-size:0;}
.file .btn_add .ico_comm {width:19px; height:19px; background-position:-110px 0px;}
.file .btn_del .ico_comm {width:16px; height:16px; background-position:-110px -20px;}
.file + .file {margin-top:8px;}
.txtarea {border:1px solid #d5d5d5; padding:10px; background:#fff;}
.txtarea textarea {display:block; width:100%; height:380px; resize:none;}
.wrap_btn li a,
.wrap_btn li button {display:block;}

/* etc */
.ico_comm {display:inline-block; background:url(../_img/comm/ico_comm.png) 0 0 no-repeat; vertical-align:top; font-size:0; line-height:0; text-indent:-9999px;}
.ico_order {display:inline-block; background:url(../_img/comm/ico_order.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-9999px; vertical-align:top;}
.ico_order2 {display:inline-block; background:url(../_img/cont/hazard-sign1.png) 0 0 no-repeat;  background-size: contain; width:18px; height: 18px; margin-right:8px;}
.info_comm {margin-top:7px; font-size:13px; line-height:18px;}
.info_comm .ico_order {float:left; width:18px; height:18px; margin-right:6px; background-position:-75px -20px; }
.info_comm p {overflow:hidden;}
.info_title { height: 45px; display: inline-block; background-color: #434343;   width: 100%; color: white; font-weight: 700; font-size: 15px; padding: 0 10px;   padding-top: 12px; box-sizing: border-box; position: relative;}

.file label .ico_order {width:24px; height:16px; margin:11px 7px 0 0; background-position:-55px -120px; }
.ico_x20 {width:20px; height:20px; background-position:-150px -100px;}
.ico_x16 {width:16px; height:16px; background-position:-55px -20px;}
.ico_x10 {width:10px; height:10px; background-position:-65px 0px;}
.ico_x8 {width:8px; height:8px; background-position:-80px 0px;}

.block {display:block;}
.txthide {font-size:0; line-height:0; text-indent:-9999px;}
.blind {position:absolute; top:-9999px; left:-9999px; width:0; height:0; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}
/* .thumb {display:inline-block; position:relative;} */
.thumb {position:relative;}
.thumb:after {position:absolute; top:0; left:0; bottom:0; right:0; border:1px solid rgba(0,0,0,0.1); content:''}
.fwb {font-weight:bold;}
.lts0 {letter-spacing:0;}
.emph {color:#f37025}
.box {border:1px solid #d5d5d5; background:#fff;}
.dl_form dt {float:left; width:100px; margin-right:8px; line-height:40px;}
.dl_form dd {overflow:hidden;}
.dl_form dd+dt,
.dl_form dd+dt+dd {margin-top:10px;}
.clamp {overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
input::-webkit-input-placeholder {color:#aaa }
input::-moz-placeholder {color:#aaa }
input:-ms-input-placeholder  {color:#aaa;}

/* tab */
.tab {overflow:hidden; border:1px solid #ccc; border-left:none; border-bottom:none;}
.tab li {float:left; position:relative; border-bottom:1px solid #ccc;}
.tab li a {display:block; text-align:center; border-left:1px solid #ccc; background:#f5f5f5; color:#777}
.tab li.on a {background:#fff; color:#111; font-weight:500}
.tab50 li  a {line-height:50px;}

/* table */
.tbl_comm tr:first-child th,
.tbl_comm tr:first-child td {border-top:1px solid #333;}
.tbl_comm th {background:#f5f5f5;}
.tbl_comm th,
.tbl_comm td {padding:8px; border-bottom:1px solid #d5d5d5; color:#555}
.tbl_comm.tbl_form th,
.tbl_comm.tbl_form td {min-height:44px;}
.tbl_comm.tbl_form .tf_phone .slt {display:inline-block; width:100px;}
.tbl_comm.tbl_form .tf_phone .hyphen {display:inline-block; margin:0 5px;}
.tbl_comm.tbl_form .tf_phone .hyphen + .tf {width:120px; margin:0;}
.tbl_comm.tbl_form .tf_address .tf,
.tbl_comm.tbl_form .tf_address button {float:left;}
.tbl_comm.tbl_form .tf_address button + .tf {clear:both; width:397px; margin-top:5px;}
.tbl_comm.tbl_form .tf_address button + .tf + .tf {margin-top:5px;}

/* board */
.board {position:relative; margin-bottom:70px;}
.board th,
.board td {border-bottom:1px solid #ccc; padding:12px;}
.board tbody th {background:#f5f5f5;}
.board .list th,
.board .list td {text-align:center;}
.board .list thead th {position:relative; border-top:1px solid #333; background:#f5f5f5}
.board .list thead th +th:after {position:absolute; top:50%; left:0; width:1px; height:14px; background:#aaa; margin-top:-7px; content:''}
.board .list .tit {text-align:left; padding-right:20px;}
.board .list .tit a:hover {text-decoration:underline;}
.board .list .num {width:70px; padding-right:25px;}
.board .list a {display:inline-block; max-height:50px; overflow:hidden}
.board .view .inner {min-height:300px;}
.paging {margin-top:70px; text-align:center; font-size:0;}
.paging * {display:inline-block;}
.paging button {width:40px; height:40px; border:1px solid #ccc; text-align:center; line-height:38px; color:#777; font-size:14px; margin:0 2px}
.paging button:hover {background:#f5f5f5;}
.paging ul {margin:0 5px;}
.paging li.on button {background:#f37025; color:#fff; font-weight:500; border:1px solid #f37025;}
.paging li.on button:hover {background:#f37025;}
.paging .ico_comm {height:16px; margin-top:11px;}
.paging .ico_first {width:15px; background-position:-90px -145px;}
.paging .ico_last {width:15px; background-position:-90px -165px;}
.paging .ico_prev {width:8px; background-position:-80px -145px;}
.paging .ico_next {width:8px; background-position:-80px -165px;}
.board .paging + .wrap_btn {position:absolute; bottom:0; overflow:hidden}
.board .paging + .wrap_btn.right {right:0;}
.board .paging + .wrap_btn.left {left:0;}
.board .paging + .wrap_btn a,
.board .paging + .wrap_btn button {display:inline-block; vertical-align:top;}
.board .write th,
.board .write td {padding:8px;}
.board .write tr:first-child th,
.board .write tr:first-child td {border-top:1px solid #333;}
.board .write .name .tf {width:350px;}
.board .write .secure {float:left; min-width:140px; height:40px; margin-right:5px; background:#ccc;}
.board .write .secure + .tf {overflow:hidden;}
.board .view tr:first-child th,
.board .view tr:first-child td {border-top:1px solid #333;}
.board .wrap_btn.ovf {margin-top:30px;}
.board .wrap_btn.ovf li {float:left;}
.board .wrap_btn.ovf li + li {margin-left:5px;}
.board .reply .ico_comm {width:37px; height:18px; margin:2px 4px 0 0; background-position:-105px -90px;}

/* layer */
.layer {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:300}
.layer .wrapper {position:fixed; top:50%; left:50%; width:500px; height:340px; margin:-215px 0 0 -290px; background:#fff; padding:45px 40px; border:1px solid #111;}
.layer .tit {display:block; padding-bottom:8px; border-bottom:1px solid #333; font-size:20px; font-weight:normal;}

/* order */
.hd_box {height:60px; padding:0 16px 0 24px; border-bottom:1px solid #ccc;}
.hd_box strong {display:block; float:left; font-size:24px; line-height:60px; font-weight:normal;}
.hd_box a {float:right; margin-top:12px; padding:0 10px;}
.hd_box a .ico_order {width:19px; height:19px; margin:7px 6px 0 0; background-position:-105px -100px;}
.cont_box {padding:20px;}
/* 주문내역 상세 */
.od_detail .hd_box {position:relative; height:60px; padding:0 16px 0 24px; border-bottom:1px solid #ccc;}
.od_detail .hd_box strong {display:block; float:left; font-size:24px; line-height:60px; font-weight:normal;}
.od_detail .hd_box a {float:right; margin-top:12px; padding:0 10px;}
.od_detail .hd_box a .ico_order {width:19px; height:19px; margin:7px 6px 0 0; background-position:-105px -100px;}
.od_detail dt {font-weight:500}
.od_detail .wrap_box + .wrap_box {margin-top:8px;}
.od_detail .box {height:506px;}
.od_detail .box.fl {width:702px; margin-right:8px;}
.od_detail .box+.box {overflow:hidden;}
.od_detail .box_bold {height:382px; border:2px solid #777}
.od_detail .box_bold.fl {width:700px;}
.od_detail .box_dual {position:relative; overflow:hidden;}
.od_detail .box_dual:after {position:absolute; top:0; left:50%; width:1px; height:335px; background:#d5d5d5; content:''}
.od_detail .box_dual .inner {float:left; width:50%;}
.od_detail .box_dual .cont_box {overflow:hidden;}
.od_detail .box_dual .fl {width:100px; margin-right:14px; margin-top:7px;}
.od_detail .box_dual .btn_view {display:block; margin-top:10px; border:1px solid #ccc; text-align:center; line-height:28px; font-size:14px;}
.od_detail .box_dual .btn_view .ico_order {width:16px; height:16px; background-position:-85px -100px; margin:6px 3px 0 0;}
.od_detail .box_dual .dl_info {overflow:hidden;}
.od_detail .box_dual .dl_info dd+ dt,
.od_detail .box_dual .dl_info dd + dt +dd{margin-top:19px;}
.od_detail .box_dual .dl_info dt{}
.od_detail .box_dual .dl_info dd {overflow:hidden; line-height:28px; font-size:14px;}
.od_detail .box_dual .dl_info dt {float:left; width:70px; line-height:26px; border:1px solid #ccc; border-radius:4px; text-align:center; margin-right:8px; font-size:13px; }
.od_detail .box_dual .dl_info dd span {display:block; font-size:777; line-height:1; letter-spacing:0}
.od_detail .area {float:left; width:214px;}
.od_detail .area:first-child {margin-right:15px;}
.od_detail .area strong {display:block; margin-bottom:5px;}
.od_detail .area strong span {font-weight:normal; font-size:14px; color:#777}
.od_detail .area ul {height:208px; border:1px solid #d5d5d5; overflow-y:auto;}
.od_detail .list_area1 {background:#f5f5f5;}
.od_detail .list_area1 li a {display:block; padding:12px;}
.od_detail .list_area1 li a:hover {background:#e5e5e5;}
.od_detail .list_area1 li.on a {background:#333; color:#fff; font-weight:bold;}
.od_detail .list_area2 li {padding:10px 15px; font-size:14px;}
.od_detail .list_area2 li+li {border-top:1px solid #d5d5d5;}
.od_detail .dl_form {overflow:hidden;}
.od_detail .dl_form .tf {background:#f5f5f5; border:1px solid #eee;}
.od_detail .wrap_dl  {overflow:hidden; margin:0 10px;}
.od_detail .fl .cont_box > .dl_form {margin:0 10px;}
.od_detail .fl .wrap_dl + .wrap_dl,
.od_detail .fl .cont_box > .dl_form,
.od_detail .fl .cont_box > .dl_form + .wrap_dl {padding-top:9px; margin-top:9px; border-top:1px solid #ddd;}
.od_detail .wrap_dl .dl_form:first-child {float:left; width:335px; margin-right:40px;}


.od_detail .wrap_dl .dl_form + .dl_form {overflow:hidden;}
.od_detail .wrap_dl .dl_form + .dl_form dt {width:60px;}
.od_detail .tit_dot {position:relative; width:115px; padding-left:10px; font-size:14px; line-height:40px;}
.od_detail .tit_dot:after {position:absolute; top:50%; left:0; width:3px; height:3px; background:#333; margin-top:-1px; content:''}
.od_detail .tit_dot + dd {line-height:40px;}
.od_detail .address .tf:first-child {position:relative; width:220px;}
.od_detail .address .tf:first-child button {position:absolute; top:0; right:0;}
.od_detail .address .tf +.tf {margin-top:8px; }
.od_detail .address .tf.fl {width:220px; margin-right:8px;}
.od_detail .file .tf {width:383px;}
.od_detail .file .file_input label {margin:0;}
.od_detail .origin {padding:36px 20px;}
.od_detail .origin .tit_dot + dd {position:relative; padding-left:18px;}
.od_detail .origin .tit_dot + dd:after {position:absolute; top:12px; left:0; width:1px; height:15px; background:#ccc; content:''}
.od_detail .cost {display:block; border:3px solid #333; text-align:center; line-height:80px; font-size:24px; font-weight:bold;}
.od_detail .cost dt,
.od_detail .cost dd {display:inline-block; margin:0 5px;}



/* slick Slider */
.slick-slider {position:relative; display:block; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list {position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus {outline:none;}
.slick-list.dragging {cursor:pointer; cursor:hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track {position:relative; top:0; left:0; display:block;}
.slick-track:before,
.slick-track:after {display:table; content:'';}
.slick-track:after {clear:both;}
.slick-loading .slick-track {visibility:hidden;}
.slick-slide {display:none; float:left; height:100%; min-height:1px;}
[dir='rtl'] .slick-slide {float:right;}
.slick-slide img {display:block;}
.slick-slide.slick-loading img {display:none;}
.slick-slide.dragging img {pointer-events:none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide {visibility:hidden;}
.slick-vertical .slick-slide {display:block; height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden {display:none;}

/* datepicker */
.ui-datepicker {position:absolute; top:-9999px; height:-9999px; width:250px; background:#fff; border:1px solid #aaa; padding:5px 15px; font-size:14px; letter-spacing:0; border-radius:5px; padding-bottom:15px;}
.ui-datepicker-header {border-bottom:1px solid #ccc; border-radius:3px; text-align:center;}
.ui-datepicker-header > a {display:block; padding:15px; cursor:pointer}
.ui-datepicker-header .ui-icon {width:8px; height:17px; font-size:0; line-height:0; text-indent:-9999px}
.ui-datepicker-prev {float:left;}
.ui-datepicker-next {float:right}
.ui-datepicker-prev .ui-icon {float:left; background:url(../_img/comm/ico_comm.png) -80px -145px no-repeat }
.ui-datepicker-next .ui-icon {float:right; background:url(../_img/comm/ico_comm.png) -80px -165px no-repeat}
.ui-datepicker-title {padding:12px 0}
.ui-datepicker-calendar {margin-top:10px;}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {font-size:13px; text-align:center; width:14.28%; height:25px; vertical-align:middle}
.ui-datepicker-calendar th:first-child a,
.ui-datepicker-calendar td:first-child a {color:#e8002e;}
.ui-datepicker-calendar th+th+th+th+th+th+th a,
.ui-datepicker-calendar td+td+td+td+td+td+td a {color:#0080e2;}
.ui-datepicker-calendar th a,
.ui-datepicker-calendar td a {display:inline-block; width:22px; height:22px; color:#777; line-height:22px;}
.ui-datepicker-calendar td a.ui-state-highlight {color:#000; font-weight:bold;}
.ui-datepicker-calendar td a:hover {background:#eee; border-radius:100%}
.ui-datepicker-calendar td a.ui-state-active {color:#fff; background:#009193; border-radius:100%; font-weight:300}


/* header */
#header {position:relative;  padding-top:25px; border-top:2px solid #f37025; background:#fff; z-index: 200; min-width:1200px;}
#header h1 {width:120px; height:37px; padding-bottom:25px;}
#header .gnb {position:absolute; top:6px; right:0; overflow:hidden;}
#header .gnb li {float:left; margin-left:40px; text-align:right;}
#header .gnb a:hover {font-weight:bold;}

#header .gnb li a{display: block; position: relative; }

#header .gnb li.mymname span { color: #ff6600; }
#header .gnb li.myPage{ z-index: 10; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
#header .gnb li.myPage img{margin-top: 9px; margin-left: 5px; opacity: 0.1;}

#header .gnb li.myPage a{ height: 50px; width:170px; text-align: center;  }
#header .gnb li .depth2{overflow: hidden; display: none;}
/*
#header .gnb li .depth2.on{
    border-bottom:2px solid #f37025; height:auto;
}
*/

#header .gnb li .depth2 li{clear: both; margin-left: 0px;}
#header .gnb li .depth2 li a{line-height: 2.7; background: rgba(255,255,255,0.9);}

#header .gnb li.logOut{margin-left: 10px;}

/* footer */
#footer {padding:70px 0; background:#444; color:#ddd; font-size:15px; overflow:hidden; min-width:1200px;}
#footer .logo {float:left; width:120px; opacity:0.5}
#footer .links {overflow:hidden; text-align:right;}
#footer .links li {display:inline-block; position:relative; margin-left:15px; padding-left:16px; }
#footer .links li:hover {color:#fff;}
#footer .info {clear:both; margin-top:30px;}
#footer .info span {display:inline-block; position:relative; margin-right:15px;}
#footer .info span+span {padding-left:16px;}
#footer .links li +li:after,
#footer .info span+span:after {position:absolute; top:50%; left:0; width:1px; height:14px; margin-top:-7px; background:#ddd; content:''}
#footer .copyright {margin-top:10px; letter-spacing:0; }



#footer .info span:hover a{color:#fff;}

#footer #mark{position: absolute; right:0px; top:90px;}
#footer #mark #kbMark{width:74px; overflow: hidden; margin-right: 10px;}
#footer #mark #kbMark img{width:74px;}

/*180308*/


#order #step3 .od_detail .wrap_dl .dl_form:first-child{
  margin-right: 22px;
}
#order #step3 .od_detail .wrap_dl .dl_form + .dl_form dt{width:68px;}