html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img,select,button { margin:0; padding:0; font-family:'Noto Sans KR', sans-serif; font-weight:normal; font-size:16px; }
strong { font-weight:500; }
html { width:100%; height:100%; }
body,code { font:0.75em Verdana,Dotum,AppleGothic,sans-serif; color:#353535; background:#fff; }
li { list-style:none; }
img,fieldset { border:none; vertical-align:top; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; }
hr.layout { display:none; }
a { text-decoration:none; color:#222; }
a:hover { text-decoration:none; }
a:active { text-decoration:none; }

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}


#container  { width:1050px;  margin:30px auto;  padding-bottom:50px; background:#fff; display:flex; justify-content:space-between; }
.offshop_left_menu { width:200px; margin-right:80px; }
#contents { width:100%; margin:30px 0;  position:relative; flex-shrink:1; }

#container h1 { text-align:center;  }
#contents >  h2 { font-size:20px; margin:20px 0 0 25px; }

#contents .nav { position:absolute; top:20px; right:20px; width:150px; }
#contents .nav h3 { float:left; }
#contents .nav ul { font-size:0; margin-top:3px;}
#contents .nav ul li { font-size:10px; background:#ddd; display:inline-block; border-radius:50%; text-align:center; width:20px; height:20px; color:#555; margin:0 0 0 10px;  line-height:20px; }
#contents .nav ul li.selected { color:#fff; background:#333; }

.div_table { display:table;  margin:20px auto; width:90%; }
.div_table .left { display:table-cell;  background:#f5f5f5;   padding: 5px 10px;  width:110px;  vertical-align:top;  line-height:25px; border-bottom:10px solid #fff; }
.div_table .right { display:table-cell;  padding-left:10px;  border-bottom:10px solid #fff; }
.div_table .div_table_row  { display:table-row;}
.div_table .blank { background:#fff; }

.div_table .right input.inputTypeText { width:100%; border:0; border-bottom:1px solid #ccc;  line-height:35px; height:35px; }
.div_table .right input.inputTypeNo { width:92px; border:0; border-bottom:1px solid #ccc;  line-height:35px; margin:0 5px; }
.div_table .right input.inputTypeNo:last-child { margin-right:0; }
.div_table .right select { border:1px solid #aaa; }
.div_table .right select.phone { margin:0 5px 0 0; width:68px; }
.div_table .right input.address { width:215px; }
.div_table .right input.percent { width:100px; }
.div_table .right button { background:#555; color:#fff; width:80px;  line-height:32px; }
.div_table .right textarea { width:100%; height:50px; border:1px solid #ccc; }
.div_table .right span { font-size:13px; color:#aaa; margin-left:10px; }

button.btn_ok { width:100%; background:#555; color:#fff; line-height:60px; text-align:center;  font-size:20px; }
button.btn_ok:hover { background:#333; }

.article { margin:0 auto 20px; width:90%; }
.article ul { font-size:0;  }
.article ul li {  border-top:1px solid #ddd; padding:20px 0; text-align:right; }
.article ul li:first-child { margin-top:20px;  border-top:0; padding-top:0; }
.article ul li p { font-size:15px; line-height:1.2em; text-align:justify;  margin:0 0 30px 0;  }
.article ul li p .red { color:#ff0000; font-size:14px; }
input.btn_agreement[type="checkbox"] {position: absolute; clip: rect(0,0,0,0); }
input.btn_agreement[type="checkbox"] + label{ line-height: 20px; font-size: 18px; color:#999; }
input.btn_agreement[type="checkbox"] + label:before {content: '\2713';display: inline-block;  width: 20px;height: 20px;margin-right: 10px; border-radius: 50%; background: #fff;color:#ddd; line-height:20px;  text-align:center; border:1px solid #ddd; }
input.btn_agreement[type="checkbox"]:checked + label:before {content: '\2713';  background: #ff6c00; color:#fff; border:1px solid #ff6c00; }
input.btn_agreement[type="checkbox"]:checked + label{ color:#222; }

hr.line { width:100%; height:1px; color:#ddd; background-color:#ddd; border:0; margin:20px 0; }

.article_2 { margin:0 auto; width:90%; }
.article_2 h2 { font-size:20px; }


.article3 { width:80%; margin:30px auto 50px; }
.article3 h2 { color:#555; text-align:center; font-size:30px; padding:30px 0; font-weight:500; }
.article3 h3 { color:#555; text-align:center; font-size:25px; padding:30px 0; font-weight:500; }
.article3 .qrcode { width:150px; margin:0px auto; border:1px solid #ccc; padding:10px; }
.article3 .qrcode img { width:100%; }
.article3 p { text-align:center; margin:40px 0; font-size:20px; }
.article3 ul {  width:90%; margin:40px auto 0; }
.article3 li {  font-size:18px; margin-top:10px; }
.article3 strong { color:#ff0000; font-weight:normal; }


.store_top_menu { width:90%; margin:20px  auto; }
.store_top_menu ul { font-size:0; }
.store_top_menu ul li { display:inline-block; width:33.3%;  background:#eee; text-align:center; line-height:50px; border:1px solid #fff; margin-left:-2px; }
.store_top_menu ul li a { font-size:20px; display:block; width:100%; }

.article4 { border:2px solid #aaa; width:70%; padding:20px; margin:30px auto; font-size:25px;  }
.article4 { font-size:20px; }

.payment { margin:0 auto; text-align:center; }
.payment ul { margin-bottom:10px; font-size:0; }
.payment ul li { display:inline-block; line-height:50px; font-size:18px; }
.payment ul li.left { width:170px; background:#fffae7;  text-align:center; margin-right:10px; }
.payment ul li.middle { width:250px;  border:1px solid #aaa; border-right:0; height:50px; vertical-align:top ;}
.payment ul li.right { width:30px; border:1px solid#aaa; border-left:0; height:50px;  }
.payment input.inputTypeText { background:#fff; border:0; line-height:50px; height:50px; width:230px; padding:0 10px; font-size:22px; }

.guide { width:90%; margin:0 auto; padding:40px 0 60px; text-align:center; font-size:18px; }