/* ROOT */
:root {
  --button-color: #ffffff;
  --button-bg-color: #0d6efd;
  --button-hover-bg-color: #025ce2;
}

* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

/**  LAYOUT **/
#wrap {
min-height: 100%;
position: relative;
padding-bottom: 227px; /* footer height */
}

/* HEADER */
#header {position:fixed;z-index: 200;width:100%;}
#header .header{display:table; width:100%; box-sizing:border-box;}
#header .mobile-menu {display:table-cell; width:50px; background-image:url('../img_m/top_bg_left.png');background-repeat:no-repeat;}
#header .mobile-menu img {padding:5px 0 0 15px;}
#header .logo {display: table; width: 100%;}
#header .logo li {display: table-cell; width: 100%;text-align:center;height:100px;padding-top:10px;background-image:url('../img_m/top_bg_center.png');}
#header .logo img{width:160px;height:33px;}
#header .login_btn {display:table-cell; width:50px; background-image:url('../img_m/top_bg_right.png');background-repeat:no-repeat;}
#header .login_btn img {width:25px;}

#header .sidebar_menu{position: fixed;display: none;width: 300px;height: 100%;background: rgba(0,0,0,0.9);top:0;left: -300px;z-index: 400;overflow: auto; box-sizing: border-box;-ms-overflow-style: none;scrollbar-width: none;}
#header .sidebar_menu::-webkit-scrollbar {display: none;}
#header .side_top {box-sizing:border-box;height:55px;padding:13px 20px; border-bottom:2px solid #6e6e6e;}
#header .side_top_btn {float:left; padding-right:10px;}
#header .side_top_btn img{width:100px;}
#header .close_btn{padding-left: 10px; float:left; color:#fff;}
#header .close_btn img{width:25px;}
#header .menu_bg{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.5);top:0;left: 0;display: none; z-index: 300;}

#header .accordion{max-width: 300px;}
#header .drawer{width:100%;border-bottom:1px solid #1c1c1c;}
#header .accordion-item-active .accordion-header-icon{color:#fff;}
#header .accordion-item-active .accordion-header h1{color:#fff;}
#header .accordion-header{padding:12px;cursor:pointer;min-height:44px;transition:.25s;}
#header .accordion-header h1{float:left;font-size:18px;font-weight: normal;margin:0;line-height: 1.3em;color:#fff;}
#header .accordion-content{border-top:1px solid #252525;display:none;padding:12px;line-height:1.5em;}
#header .accordion-content li{height:35px;padding-left:15px;}
#header .accordion-content li.subTit {background-color: #1a1e21;padding-left: 0;padding-top: 3px;height:30px;}
#header .accordion-content li span {width: 270px;color: #02c6dc;padding-left:3px;}
#header .accordion-content li a{color:#fff;vertical-align:middle;}
#header .accordion-content p{margin:0;margin-bottom: 3px;}
#header .accordion-header-icon{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;	float:right;color:#888;	font-size: 15px;vertical-align: middle;}
#header .accordion-header-icon.accordion-header-icon-active{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);	color:#fff;}

#wrapper { position:relative; margin:0; zoom:1}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}

/* FLEX LAYOUT */
.flexlayout {display : -webkit-flex;display : flex;}
.flexlayout_wrap {display : -webkit-flex;display : flex; flex-wrap:wrap;}
.flexlayout_inline {display : -webkit-flex;display : inline-flex;width:100%;}
.flex0 {-webkit-flex : 0;flex : 0;}
.flex1 {-webkit-flex : 1;flex : 1;}
.flexalign_right {justify-content:flex-end;-webkit-justify-content: flex-end;}
.flexalign_evenly {justify-content:space-evenly; -webkit-justify-content:space-evenly;}

.flex_0_0_5px {flex: 0 0 5px;}
.flex_0_0_10px {flex: 0 0 10px;}
.flex_0_0_20px {flex: 0 0 20px;}
.flex_0_0_30px {flex: 0 0 30px;}
.flex_0_0_40px {flex: 0 0 40px;}
.flex_0_0_50px {flex: 0 0 50px;}
.flex_0_0_60px {flex: 0 0 60px;}
.flex_0_0_70px {flex: 0 0 70px;}
.flex_0_0_82px {flex: 0 0 82px;}
.flex_0_0_90px {flex: 0 0 90px;}
.flex_0_0_100px {flex: 0 0 100px;}
.flex_0_0_110px {flex: 0 0 110px;}

.flex_0_1_10per {flex: 0 1 10%;}
.flex_0_1_20per {flex: 0 1 20%;}
.flex_0_1_24per {flex: 0 1 24%;}
.flex_0_1_25per {flex: 0 1 25%;padding:5px 2px;box-sizing:border-box;}
.flex_0_1_30per {flex: 0 1 30%;}
.flex_0_1_33per {flex: 0 1 33%;padding:5px 2px;box-sizing:border-box;}
.flex_0_1_40per {flex: 0 1 40%;}
.flex_0_1_45per {flex: 0 1 45%;}
.flex_0_1_50per {flex: 0 1 50%;}
.flex_0_1_60per {flex: 0 1 60%;}
.flex_0_1_70per {flex: 0 1 70%;}
.flex_0_1_76per {flex: 0 1 76%;}
.flex_0_1_80per {flex: 0 1 80%;}
.flex_0_1_100per {flex: 0 1 100%;}

.mt3 {margin-top:3px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb50 {margin-bottom:50px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.mr15 {margin-right:15px;}
.ml3 {margin-left:3px;}
.mr3 {margin-right:3px;}


.pr5 {padding-right:5px;box-sizing:border-box;}
.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pb20 {padding-bottom:20px;}
.pl20 {padding-left:20px!important;}
.pr20 {padding-right:20px!important;}
.pl28 {padding-left:28px;}

.mgauto {margin:auto;}

.w34{width:34px!important;}
.w26{width:26px!important;}
.w50{width:50px!important;}
.w70 {width:70px!important;}
.w80 {width:80px;}
.w85 {width:85px!important;}
.w100{width:100px!important;}
.w140{width:140px!important;}
.w160{width:160px!important;}
.w300 {width:300px!important;}
.w310{width:310px!important;}
.w370{width:370px!important;}

.h50{height:50px!important;}

.txtleft {text-align:left!important;}
.txtright {text-align:right!important;}
.txtcenter {text-align:center!important;}

.fontsize_small {font-size:0.8rem!important;}
.fontsize_normal {font-size:0.9rem!important;}
.fontsize_big {font-size:1rem!important;}
.fontsize_bigger {font-size:1.2rem!important;}
.fontsize_bigger_bold {font-size:1.1rem!important; font-weight:bold;}
.fontweight_bold {fong-weight:bold;}

.gototop {position: fixed;right:5px;bottom: 230px;display: none;z-index: 100;}

/* btn layout*/
.btn_size_normal{width:100px;}
.btn_left_free {float: right;margin-right: 5px;}
.btn_right_free {float: left;margin-right: 5px;}
.btn_left_small {width:70px;float: right;margin-right: 5px;}
.btn_right_small {width:70px;float: left;margin-left: 5px;}
.btn_left {width:100px;float: right;margin-right: 5px;}
.btn_right {width:100px;float: left;margin-left: 5px;}
.btn_left_wide {width:130px;float: right;margin-right: 5px;}
.btn_right_wide {width:130px;float: left;margin-left: 5px;}
.btn_left_wide_ex {width:150px;float: right;margin-right: 5px;}
.btn_right_wide_ex {width:150px;float: left;margin-left: 5px;}

/* FORM */
input[type="text"],input[type=password] {width:44px;height:35px;text-align:right;padding:2px 5px;font-size:0.8rem;color:#333;border-radius: 5px; border:1px solid #b2b2b2;}
select { -webkit-tap-highlight-color: transparent;background-color: #fff;border-radius: 5px;border: solid 1px #b2b2b2;box-sizing: border-box;clear: both;cursor: pointer;display: block;float: left;font-family: inherit;font-size: 0.77rem;font-weight: normal;height: 35px;line-height: 30px;outline: none;padding-left: 2px;padding-right: 0px;position: relative;text-align: left !important;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;white-space: nowrap;width: auto;}
select.wide { width: 100%; }
option {cursor: pointer;font-weight: 400;line-height: 40px;list-style: none;min-height: 40px;outline: none;padding-left: 18px;padding-right: 29px;text-align: left;-webkit-transition: all 0.2s;transition: all 0.2s;} 
textarea {width: 100%;height: 100px;padding: 10px;box-sizing: border-box;font-size: 0.8rem;resize: both;color:#333;border-radius: 5px; border:1px solid #b2b2b2;}

/* BORDER */
.bordertop_black {border-top:1px solid #000!important;}
.bordertop_gray {border-top:1px solid #ccc!important;}


/**  MAIN **/
/* SLIDER */
.mainSlider { position:relative;}
.mainSlider:after {display:block;visibility:hidden;clear:both;content:""}
.img_fix {width:100%;height:auto}

/* BOX BUTTON */
.boxBtn {width:100%;position:relative;margin-top:23px;}
.boxBtn_inner { position:relative;}
.callcenter {background: url('../img_m/btn_box02.jpg') center center / cover no-repeat;width:100%;height:100%;color:#fff;display: flex; align-items: center;}
.callcenter_inner {padding-left: 3vw;}
.cc_tit {font-family: 'Barlow', sans-serif;font-size: 3.5vw;}
.cc_num {font-size: 4.5vw;margin-top: -2px;font-weight: bold;}
.cc_txt {font-size: 1.8vw;font-weight: bold;}

.bannerLink {background: url('../img_m/banner_link.jpg') center center / cover no-repeat;width:100%;height:178px;color:#fff;display: flex; align-items: center;}
.bannerLink_inner {padding-left: 11vw;color:#fff; }
/* BEST PRODUCT */
.bestPD {width:100%;position:relative;padding-top:20px;}
.contents_tit {min-width: 260px;margin:0 auto;font-weight:900;font-size: 4vw;color:#000;line-height: 1.1;letter-spacing: -1.5px;padding-top: 5px;text-align: center;}
.contents_tit span {font-weight:400;padding-left:10px;}
.contents_tit p {font-size: 2.7vw;color: #424242;font-weight: 400;}
.blackbar {width: 30px;height:1px;background-color:#000; margin: auto;}
.contents {position:relative;padding:0 3px;margin-top: 5px;}
.contents li { float:left; width: 50%; padding:0 3px; box-sizing:border-box; padding-top:2vh; text-align:center;}
.contents li span{display:block;font-size: 0.9em;font-weight:bold;padding:5px;}
.contents_inner img{width:40%; max-width:140px;}

/* SERVICE */
.service_tit {max-width:1200px;margin:0 auto;}
.service_contents {position:relative; padding:0 2px;}
.service_contents li { float:left; width: 25%; padding:0 3px; box-sizing:border-box; margin-bottom:4vh;}

/* BORAD */
.board {width:100%;position:relative;margin-top:5vh;border-bottom:1px solid #ccc;padding:0 3px; box-sizing:border-box;}

.board_tit {width:100%;position:relative;}
.blue_bar {position:absolute;top:5px;left:3px;width:14px; height:4px; background-color:#00bad4;}
.board_txt {font-size: 1.2em; margin-left:22px;font-family:'Nanum Myeongjo', serif;font-weight:bold;}
.more_btn{position:absolute;top:0;right:3px;}
.more_btn img {width:80px;}
.target {width:100%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}

.board_conts_notice {width:100%;position:relative;margin-top:10px;}
.board_conts_notice ul:after {display:block;visibility:hidden;clear:both;content:"";}
.board_conts_notice li {padding:10px 0;}
.board_conts_notice li:first-child {font-size: 0.8rem;float:left;border-top:1px solid #ccc;width:80%; box-sizing:border-box;}
.board_conts_notice li:last-child {font-size: 0.8rem; float:right; text-align:right; border-top:1px solid #ccc;width:20%; box-sizing:border-box;}

.board_conts_faq {width:100%;position:relative;margin-top:10px;}
.board_conts_faq ul:after {display:block;visibility:hidden;clear:both;content:""}
.board_conts_faq li {padding:10px 0;}
.board_conts_faq li img {width:29px;}
.board_conts_faq li:first-child {font-size: 0.8rem;float:left;border-top:1px solid #ccc;width:90%; box-sizing:border-box;}
.board_conts_faq li:last-child {padding:5px;font-size: 0.8rem; float:right; text-align:right; border-top:1px solid #ccc;width:10%; box-sizing:border-box;}

/* ETC */
.etc {width:100%;position:relative;margin-top:3vh;}
.etc_inner {position:relative; padding:0 3px;}
.etc_inner li { float:left; width: 50%; padding:3px; box-sizing:border-box; text-align:center;}
.etc_inner img {border-radius:10px;}


/** SUB - ORDER TOTAL **/
/* 기본 */
.titbg {background-size: contain;background-repeat: no-repeat;width: 100%;height: 37.57vw;background-image: url('../img_m/sub_top.jpg');text-align: center;}
.titBox {color:#fff;display: inline-block;font-size: 1.2rem;border-top: 1px solid #fff;border-bottom: 1px solid #fff;margin-top: 21vw;padding:4px 10px;}

.area {width:100%;position:relative;margin-top:-1px;}
.area_tit {font-size: 1.2rem; letter-spacing:-1.2px;text-align:center;background-color:#68a4e4; color:#fff;padding:10px;}
.area_tit_cost {font-size: 1.2rem; letter-spacing:-1.2px;text-align:center;background-color:#447bd8; color:#fff;padding:10px;}

.sub_img_slide {position:relative;width:100%;}
.basic_img {margin:5px;border:1px solid #ccc;margin-right:60px;}
.basic_img li img { max-height:270px!important;max-width:270px!important; margin:auto;}

.basic_thum {position:absolute;width:50px;top:0px; right:5px;}
.basic_thum_box {border:1px solid #ccc;width:50px;height:50px;margin-bottom: 5px;}
.basic_thum_box img {width:48px; height:48px;padding:1px;}

.basic_table {border-collapse: collapse; width:100%;font-size:0.8rem;}  
.basic_table th {color: #333;background: #f4f4f4;text-align: center;width:60px;font-size: 0.7rem;}
.basic_table th, .basic_table td {padding: 10px 5px;border: 1px solid #dbdbdb;}
.basic_table th:first-child, .basic_table td:first-child {border-left: 0;}
.basic_table th:last-child, .basic_table td:last-child {border-right: 0;}
.basic_table tr td:first-child{text-align: center;}
.basic_table td p {color:#447bd8;display:inline-block;margin-right:2px;}
.bg_color_gray {background-color:#f4f4f4!important;}
.bg_color_white {background-color:#fff!important;}


/* 후가공 */
.flexlayout_wrap button{padding:0.5rem 0; font-size:0.7rem;}
.flex_box {margin:10px 5px;}
.gray_box {background-color:#f0f0f0; padding:10px;font-size:0.8rem;}
.gray_box p {color:#447bd8;display:inline-block;font-weight:bold;font-size:1.2rem;padding:0 10px;}
.gray_box img {width:15px;margin-top:5px;}

.gdr_box {width:100px;height:100px; background-image:url('../img_m/square.png');background-repeat:no-repeat;margin:auto;}
.gdr_inner {width:50px;float:left;}
.gdr_t {height:50px;padding-top:7px;box-sizing:border-box;}
.gdr_b {height:50px;padding-top:25px;box-sizing:border-box;}

.gdr_checkbox {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer; -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;user-select: none;}
.gdr_checkbox input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: #fff;border-radius: 15px; border:1px solid #ccc;}
.gdr_checkbox:hover input ~ .checkmark {background-color: #fff;}
.gdr_checkbox input:checked ~ .checkmark {background-color: #0071f8;}
.checkmark:after {content: "";position: absolute;display: none;}
.gdr_checkbox input:checked ~ .checkmark:after {display: block;}
.gdr_checkbox .checkmark:after {left: 6px;top: 2px;width: 4px;height: 9px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg);}

.onelinelayout {display:inline-block; width:100%;}

.cost_box {margin:20px;}
.cost_box_inner {border-bottom:1px solid #ccc;}
.cost_box_inner span {color:#447bd8;}
.cost_box_inner p{color:#447bd8;font-size:1.2rem;font-weight:bold;margin:10px 0;}
.cost_box_inner .pav {padding:5px 0;letter-spacing:-1px;}
.cost_box_inner .tar {text-align:right;}

/* login */
.titbg_duobleline {background-size: contain;background-repeat: no-repeat;width: 100%;height: 37.57vw;background-image: url('../img_m/sub_top_login.jpg');text-align: center;}
.titBox_duobleline {color:#fff;display: inline-block;font-size: 1rem;border-top: 1px solid #fff;border-bottom: 1px solid #fff;margin-top: 19vw;padding:4px 20px;}
.titBox_duobleline_sub {color:#fff;font-family:'Nanum Myeongjo', serif;font-size:0.8rem;padding-top:10px;}
.titBox_duobleline_sub span{font-weight:bold;}

.area_container {padding:30px 20px;}
.width320 {width:320px;margin:auto;}
.width350 {width:350px;margin:auto;}
.login_msg {color:#00b4ff;text-align:center;font-weight:bold;/*display:none;*/}

/* join */
.agree_box {border: 1px solid #b2b2b2;}
.agree_tit {width: 100%; text-align: center; background-color: #f4f4f4;letter-spacing: 0.8px; padding: 8px; box-sizing: border-box;}
.agree_conts {border-top: 1px solid #b2b2b2;overflow: scroll;width: 100%;height: 150px;}
.agree_check {text-align:center;padding:10px;box-sizing:border-box;font-size: 0.8rem;color: #666;border-top: 1px solid #b2b2b2;}
.agree_iframe {display: block;   border: none;   height: 100%;   width: 100%;}

.join_form li{border-bottom:1px solid #ccc;padding:5px 0;}
.join_form li:last-child {border-bottom:0;}
.join_form li span {color:#ee4444;}
.join_form input {height:35px;}
.join_txt {font-size:0.9rem;padding:5px 0;}
.join_wide {width: 100%!important;text-align: left!important;box-sizing: border-box;}

.starmark input {background: #343a40; background-image: url('../img_m/star.png'); background-repeat: no-repeat; background-position: 5px center; padding: 5px 5px 5px 20px; width: 100%; height: 35px; box-sizing: border-box; outline: none; border-radius: 5px;}


/* selfdesign */
.titbg_selfdesign {background-size: contain;background-repeat: no-repeat;width: 100%;height: 37.57vw;background-image: url('../img_m/sub_top_self.jpg');text-align: center;}
.self_search {border-bottom: 2px solid #447bd8;}
.self_search select {border:0;font-size:0.9rem;}
.self_search input[type="text"] {color:#000;width: 90%;margin-left: 5px;border: 0;height: 25px;border-radius: 0;border-left: 1px solid #ccc;text-align:left;padding-left:10px;}

/*.selfList {display:none;}*/
.selfList {}
.selfConts {margin-top:30px;color:#666;text-align:center;}
.selfConts span {color:#000!important;}
.selfImgBox {position:relative; width:100%; height:200px; border:1px solid #ccc;background-color:#f4f4f4;margin-bottom:22px;}
.selfImgBox img {position:absolute;max-width:226px;max-height:200px;width:auto;height:auto;margin:auto;top:0; bottom:0; left:0; right:0; box-shadow: 3px 3px 9px 0 rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.19) !important;}


#select_box {position: relative;width: 100px;height: 35px; background: url('../img_m/select_arrow.png') 80px center no-repeat; background-position-y: 5px;}
#select_box label { position: absolute; color: #2b2b2b; top: 3px; left: 12px;letter-spacing: 1px;}
#select_box select#sort {width: 100%; height: 30px; min-height: 30px; padding: 0 10px; opacity: 0;filter: alpha(opacity=0); /* IE 8 */}

/* my_order */
.order_top_w {padding: 10px 20px; }
.order_input {width: 100%!important;height:35px!important;box-sizing:border-box;}
.img_pix {width:35px; padding-right:5px;}
.order_top_w span {width:30px;height:50px;font-weight:bold;vertical-align:middle;display: table-cell;}
.order_top_icon_bg {background-image: url('../img_m/order_top_bg.png');}
.borer_tt {border-top:2px solid #000000;}


/* my_orderdetail */
.order_top {padding: 10px 20px; background-color: #f4f4f4; border-bottom: 1px solid #ccc;}
.order_conts {margin-top:30px;}

.orderdetail_table {border-collapse: collapse; width:100%;}  
.orderdetail_table th {color: #333;background: #f4f4f4;text-align: center; font-weight:500;}
.orderdetail_table th, .orderdetail_table td {padding: 10px 5px;border: 1px solid #dbdbdb;font-size: 0.9rem;}
.orderdetail_table td {color:#666;}
.orderdetail_table th:first-child, .orderdetail_table td:first-child {border-left: 0;}
.orderdetail_table th:last-child, .orderdetail_table td:last-child {border-right: 0;}
.orderdetail_table tr td:first-child{text-align: center;}
.orderdetail_table td p {font-weight:bold;color:#000;}
.orderdetail_table td span {font-weight:bold;color:#e80000;}


/* my_cart */
.cart_total {width: 140px!important; color: #e80000!important; font-size: 1rem!important; font-weight: bold!important;}
.catbtn {font-size:0.8rem;padding:0.5rem 0;}

/* order_step2 */
.os_input {width: 100%!important;height:35px!important;padding-right:10px;box-sizing:border-box;text-align:left!important;}
.os_txt {padding:10px 20px;color:#666;font-size:0.8rem;line-height:1.2;}
.os_account_input {width:120px!important;text-align:right!important;}

/* order_step3 */
.orderTxt {margin: auto; font-family:'Nanum Myeongjo', serif; font-size:1.2rem; font-weight:bold; color:#000;}
.orderTxt_sub  {margin: auto; width:300px; word-break:break-all;color:#666;font-size:0.9rem;}
.orderTxt img {width:30px;height:30px;}
  
/* withdrawal */
.mw li{margin:10px 0;}
.mw span {color:#666!important; font-weight:normal!important;padding-left:18px;}
.mw textarea {background-color:#f4f4f4;}


/* FAQ */
.faq_topBox {margin:15px;border:1px solid #6d6d6d;}
.faq_topBox p{padding-left:20px;}
.faq_sustit {padding-left:40px;font-size:0.9rem;}

.faq{border-bottom:0px solid #ddd;margin:1em 0;}
.faq .faqBody{margin:0;padding:0}
.faq .faqBody .article{list-style:none}
.faq .q{border-top:1px solid #666;}
.faq .q a{display:block;text-align:left;font-weight:500; margin: 10px 10px 10px 0;}
.faq .q img {padding: 1vh 1vw;}
.faq .q span {padding-right:10px;color:#666;font-size: 0.8rem;font-weight:normal;}
.faq .a{padding: 10px 15px 30px 0; color: #666; border-top: 1px solid #bdbdbd; background-color:#f4f4f4;}

.paging_faq {width: 315px;margin:auto;display:flex;}
.paging_faq li {float:left;text-align:center;padding-top:5px;color:#666;width: 35px;height: 35px;border: 1px solid #ccc;}
.paging_faq .select{background-color: #535353;}
.paging_faq .select a {color:#fff!important;}
.paging_faq a {color:#666;}

.page_faq_num {width:20px;height:20px;}


/** POP **/
/* Shopping bag */
.pop_Layout {width:100%;position:relative;}
.pop_tit {background-color:#447bd8; color:#fff; padding:5px 10px;font-size:1.5rem;}
.pop_tit img {float:right;width:25px;}
.pop_contents_img {position:relative; padding:20px;}
.pop_contents_img li {float:left;width: 50%;box-sizing:border-box;text-align:center;background-color: #f4f4f4;}
.pop_contents_img li span{display:block;font-size: 1em;font-weight:bold;padding:5px;}
.pop_contents_img_inner img{width:40%; max-width:140px;}
.pop_imgBox {padding: 3px 3px 10px 3px;margin: 5px;border: 1px solid #ccc;}
.fixwidth320 {width:320px; margin:auto;}

/* file upload */
.pop_contents {position:relative; padding:20px;}
.pop_toptxt {font-size: 0.85rem; color: #666; padding: 10px;}
.file_box {margin-top:10px;box-shadow: 2px 2px 2px 2px gray inset;height:220px;}
.file_box li {padding:11px 30px;}
.pop_contents_txt_inner img {width:50px; float:right;}
.fulltextbox {font-size: 0.9rem!important; padding: 5px 0 5px 20px!important; box-sizing: border-box; height: 40px!important;width:100%!important;text-align:left!important;}

/* garmggn */
.ga_box {background-color:#b2d4ef;width:100%;border-radius: 10px;}
.ga_box_inner {width:320px;padding:10px 0;margin:auto;}
.ga_box_inner span {font-size: 1.2rem;font-weight: bold;color: #00247c;padding: 10px 20px;display: inline-block;}
.ga_box_inner img {width: 180px;}

/* wing */
.wing_txt {width:100%;padding:10px;background-color:#68a4e4;color:#fff;text-align:center;box-sizing:border-box;font-size:0.9rem;}

/* open */
.pop_contents_wide{position:relative;padding:20px 0;}
.pop_contents_wide_inner_open {background:url('../img_m/open_img.jpg') no-repeat center top;width:370px;height:270px;margin:auto;}
.open_text {border-top:1px solid #cacaca;border-bottom:1px solid #000;}
.open_text span{ float: right;font-size: 0.9rem;font-weight: bold;padding-top: 5px;padding-right: 5px;}
.box_blue {width:50px; height:20px; border:1px solid #447cd9;}
.box_gray {width:50px; height:20px; border:1px solid #898989;}
.txt_blue {color:#447cd9;font-size: 0.7rem;font-weight: bold;padding-top: 5px;}
.txt_gray {color:#898989;font-size: 0.7rem;font-weight: bold;padding-top: 5px;}

/*paper search */
table.tb-main {border:0;border-top:2px solid #979797;border-collapse: collapse;}
table.tb-main th {background-color:#e7e7e7;border:1px solid #d9d9d9; font-size:0.9rem; height:45px; color: #333;}
table.tb-main td {border:1px solid #d9d9d9; padding:10px 5px; color:#707070; height: 20px;font-size:0.9rem;text-align:center;}

.gdr_checkbox_small {display: inline-block;position: relative;margin-bottom: 20px;cursor: pointer;margin-left: -20px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.gdr_checkbox_small input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark_small {position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: #fff;border-radius: 15px; border:1px solid #ccc;}
.gdr_checkbox_small:hover input ~ .checkmark_small {background-color: #fff;}
.gdr_checkbox_small input:checked ~ .checkmark_small {background-color: #0071f8;}
.checkmark_small:after {content: "";position: absolute;display: none;}
.gdr_checkbox_small input:checked ~ .checkmark_small:after {display: block;}
.gdr_checkbox_small .checkmark_small:after {left: 7px;top: 3px;width: 4px;height: 9px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg);}

.paging {width:360px;margin:auto;display:flex;}
.paging li {float:left;text-align:center;padding:2px; color:#666;}
.paging a {color:#666;}
.paging .select{color:#f40000!important;}
.page_num {width:20px; height:20px; background-color:#e7e7e7;margin:2px;}

/*order_total_link */
.area_container_narrow {padding:30px 20px 10px 20px;}
.ot_tit {width:100%;position:relative;margin-bottom:30px;}
.ot_tit_blueline {width:100%; height:2px; background-color:#00b4ff;}
.ot_tit_txt {padding: 10px 5px;font-size:0.9rem;background-color: #fff;text-align: center; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.btn_gray {background-color:#f4f4f4;border:1px solid #b2b2b2;text-align:center;padding: 10px 0;margin: 5px 0;}


/* data search */
.previewbtn {font-size:0.5rem;padding:0.5rem 0;}

/* 제본상세보기 */
.pop_tit_sub {font-weight:bold;padding:5px;}
.pop_tit_bar {background-color:#68a4e4; color:#fff;padding:10px;margin-top:10px;}
.pop_inner_txt {font-size:0.9rem; color:#666;padding:5px;}
.pop_inner_txt span {color:#ff0000;}
.noborder {border:0;}

.layer {display:none;  width:100%; height:100%;z-index:300;}
.layer .bg {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}
.pop-layer {display:none; position: sticky; top: 13%; height:auto;  background-color:#fff; border: 1px solid #d1d1d1; z-index: 10; 
		    				overflow:hidden; overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* FOOTER 
#footer {width:100%;position:relative;margin-top:3vh;}*/
#footer {position: absolute;bottom: 0;left: 0;right: 0;}
#footer .ft_list {position:relative;}
#footer .ft_list li {border-left:1px solid #909296; font-size:0.725rem; float:left; width: 50%; padding:10px; box-sizing:border-box; text-align:center;background-color:#21242d;}
#footer .ft_list li a {color: #fff;}
#footer .ft_list li:first-child {border-left:0;}

#footer .ft_txt {display:inline-block; width:100%; border-top:1px solid #909296; padding:20px 0; text-align:center;font-size:0.785rem; color:#909296; line-height:1.5; letter-spacing:-.3px;background-color:#21242d;}
#footer .ft_txt h1 {color:#fff;font-size:1rem;font-weight:bold;}
#footer .ft_txt span {display:block;margin-top:10px;}



/* BUTTON */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--button-bg-color);
  color: var(--button-color);
  margin: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 18px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  transition: 0.5s;
}

button.skyblue {
  --button-bg-color: #00b4ff;
  --button-hover-bg-color: #43c8ff;
}

button.deepblue {
  --button-bg-color: #447bd8;
  --button-hover-bg-color: #447bd8;
}

button.white {
  --button-color: #333;
  --button-bg-color: #fff;
  --button-hover-bg-color: #fff;
  border:1px solid #959595;
  
}

button.white_blueborder {
  --button-color: #333;
  --button-bg-color: #fff;
  --button-hover-bg-color: #fff;
  border:1px solid #447bd8;
  
}

button.gray {
  --button-color: #fff;
  --button-bg-color: #7d7d7d;
  --button-hover-bg-color: #909090;
  
}

.white-button-active 
{
    --button-bg-color: #447bd8!important;
    --button-hover-bg-color: #447bd8!important;
    border: none!important;
    color: #fff!important;}
.white-button-self-active 
{
    --button-bg-color: #00b4ff!important;
    --button-hover-bg-color: #00b4ff!important;
    border: none!important;
    color: #fff!important;}
button:active,
button:hover,
button:focus {
  background: var(--button-hover-bg-color);
  outline: 0;
}