@charset "utf-8";
/* reset element */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0 auto; padding:0;
}
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {display:block;}
body {line-height:1;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
/* align, border, input */
img, fieldset, a {border:none;}
img {vertical-align:middle;}
table, thead, tbody, tfoot {border-collapse:collapse; border-spacing:0; border:0 none;}
ul, ol, li {list-style:none;}
address, em {font-style:normal;}
input, select, textarea, button, form img, label {vertical-align:middle;}
/* anchor */
a {text-decoration:none;}
a:link {color:#444;}
a:visited {color:#444;}
a:hover {color:#444;}
a:focus {color:#444;}
/* input_style */
input[type=text] {-webkit-appearance:none; box-sizing:border-box; -webkit-border-radius: 0; display:inline-block; height:28px; padding:0 10px; border:1px solid #ccc; background-color:#fff; line-height:normal;}
select {height:28px; padding:0 10px;background-color:#fff;}
/* input[type=text] {width: 50%; margin-top:20px; padding: 6px; border: 1px solid #ccc; border-radius: 4px; resize: vertical;} */
/* common 원본 */
/* html{height:100%;}
body {overflow-x:hidden; overflow-y:auto; height:100%;font-family: 'Noto Sans KR', sans-serif; letter-spacing:-1px; white-space:normal; word-wrap:break-word;} */
/* 수정부분 */
html, body { max-width: 100%; overflow-x: hidden; }
body {overflow: hidden; width: 100%; height:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-1px; white-space:normal; word-wrap:break-word;}
* {-webkit-text-size-adjust:none;}
.dp_none {display:none;}
.hdd, legend {font-size:0; width:0; height:0; line-height:0; text-indent:-9999px; overflow:hidden; visibility:hidden; position:absolute; top:0; left:0;}
caption {font-size:0; width:0; height:0; line-height:0; text-indent:-9999px; overflow:hidden;}
.clear:after {content:""; display:block; clear:both;}
hr {display:none;}
button {outline:none; border:none;}
/* ======================================================================== PC */
/* layout */
#wrap {}
.box_inner {width:1280px; margin:0 auto;}
/* header */
header {display:inline; left:0; top:0; width:100%; height:115px; background:rgba(0,0,0,0.5); z-index:100;}
header .header_area {/*position:relative;*/}
header .header_area h1 {float:left; padding:45px 0 0;}
header .header_area h1 a {display:block; width:184px; height:55px; text-indent:-9999px; overflow:hidden; background:url(../img/logoTop.png) no-repeat;}
header .header_area .openMOgnb {display:none;}
.header_cont {float:right; width:1096px;}
.header_cont .util {text-align: right; padding-top:10px;}
.header_cont .util li {display:inline;}
.header_cont .util li:after {content:" "; display:inline-block; padding:0; font-size:10px; color:#666; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:14px; color:#666;}
#text-size {font-size:10pt; color:#666; padding-left:10px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:200px; margin-top:-1px; border-radius: 2px;} /* 2020-1230 추가 */
#search-btn {width:56px; height:28px; border:none; outline:none; margin-left:3px;} /* 2020-1230 추가 */
.header_cont .gnb {float:right; box-sizing:border-box; padding-top:10px; /*height:113px;*/}
.header_cont .gnb li {float:left;}
.header_cont .gnb li a {display:block; padding:20px 30px; font-size:12pt; color:#444;}
.header_cont .gnb li:last-child a {padding-right:0;}
.header_cont .closePop {display:none;}
/* footer */
footer { background-color:#232323; width:100%; height:auto; }
footer .foot_area box_inner { width:1280px; margin:0 auto; }
footer .foot-column { float: left; width: 100%; padding: 10px; }
footer .foot-col-30 { float: left; width:11%; margin:50px 370px 0 370px; }
footer .foot-col-70 { float: right; width:58.7777%; margin-top:-33px; }
footer .foot-row:after { content: ""; display: table; clear: both; }
footer .copyright { width:1280px; padding-top:40px; margin:0 auto; text-align:center; }
footer .coBox { /*background-color:#000; */ width:460px; padding:15px 10px 0 10px; margin:0 auto; text-align:center; }
footer .coBoxText { font-size:11pt; color:#a8a7a7; text-align:center; vertical-align: 5px; font-weight:lighter; letter-spacing: 1.2px }
footer .coTextBig { font-size:16pt; text-align:center; color:#ccc; vertical-align:10px; font-weight:lighter; }
footer .dotB { vertical-align:3pt; }
footer .coTextJ {font-size:9pt; color:#b1b1b1; text-align:center; padding-top: 10px; line-height: 160%; font-weight:lighter; padding-bottom:40px; letter-spacing:0.5px;}
@media all and (min-width: 801px) and (max-width:992px) {
footer .foot_area box_inner { width:100%; margin:0 auto; }
footer .foot-column { width: 100%; margin:0 auto; }
footer .foot-col-30 { width:100%; margin:0 auto; text-align:center; padding-top:20px; }
footer .foot-col-70 { width:100%; margin:0 auto; text-align:center; padding-top:10px; }
footer .copyright { width:100%; margin:0 auto; text-align:center; }
footer .coBox { /*background-color:#000; */ width:100%; padding:5px 10px; margin:0 auto; text-align:left; }
footer .coBoxText { font-size:3.2vw; font-weight:medium; color:#a8a7a7; text-align:center; vertical-align: 5px; font-weight:lighter; letter-spacing: 1.2px }
footer .coTextBig { font-size:4.7vw; text-align:center; color:#ccc; font-weight:lighter; }
footer .dotB { vertical-align:3pt; }
footer .coTextJ {width:90%; font-size:9pt; color:#b1b1b1; text-align:left; padding: 10px 0; margin-left:5px; line-height: 160%;}
}
@media all and (min-width: 769px) and (max-width:992px) {
footer .foot_area box_inner { width:100%; margin:0 auto; }
footer .foot-column { width: 95%; margin:0 auto; }
footer .foot-col-30 { width:100%; margin:0 auto; text-align:center; padding-top:20px; margin-right:100px; paddding-right:50px; }
footer .foot-col-70 { width:100%; margin:0 auto; text-align:center; padding-top:10px; margin-right:100px; paddding-right:50px; }
footer .copyright { width:100%; margin:0 auto; text-align:center; }
footer .coBox { /*background-color:#000; */ width:100%; padding:5px 10px; margin:0 auto; text-align:left; }
footer .coBoxText { font-size:3.2vw; font-weight:medium; color:#a8a7a7; text-align:center; vertical-align: 5px; font-weight:lighter; letter-spacing: 1.2px }
footer .coTextBig { font-size:4.7vw; text-align:center; color:#ccc; font-weight:lighter; }
footer .dotB { vertical-align:3pt; }
footer .coTextJ {width:90%; font-size:9pt; color:#b1b1b1; text-align:left; padding: 10px 0; margin-left:5px; line-height: 160%;}
}
@media all and (min-width: 401px) and (max-width:768px) {
footer .foot-column { width: 100%; margin:0 auto; }
footer .foot-col-30 { width:100%; margin:0 auto; text-align:center; padding-top:20px; }
footer .foot-col-70 { width:100%; margin:0 auto; text-align:center; padding-top:10px; }
footer .copyright { width:100%; margin:0 auto; text-align:center; }
footer .coBox { /*background-color:#000; */ width:100%; padding:5px 30px; margin:0 auto; text-align:left; }
footer .coBoxText { font-size:3.2vw; font-weight:medium; color:#a8a7a7; text-align:center; vertical-align: 5px; font-weight:lighter; letter-spacing: 1.2px }
footer .coTextBig { font-size:4.7vw; text-align:center; color:#ccc; font-weight:lighter; }
footer .dotB { vertical-align:3pt; }
footer .coTextJ { width:90%; font-size:9pt; color:#b1b1b1; text-align:left; padding: 10px 30px 10px 10px; line-height: 160%; }
}
@media all and (min-width: 320px) and (max-width:400px) {
footer .foot-column { width: 100%; margin:0 auto; }
footer .foot-col-30 { width:100%; margin:0 auto; text-align:center; padding-top:20px; }
footer .foot-col-70 { width:100%; margin:0 auto; text-align:center; padding-top:10px; }
footer .copyright { width:90%; margin:0 auto; text-align:center; }
footer .coBox { /*background-color:#000; */ width:100%; padding:5px 10px; margin:0 auto; text-align:left; }
footer .coBoxText { font-size:3.2vw; font-weight:medium; color:#a8a7a7; text-align:center; vertical-align: 5px; font-weight:lighter; letter-spacing: 1.2px }
footer .coTextBig { font-size:4.7vw; text-align:center; color:#ccc; font-weight:lighter; }
footer .dotB { vertical-align:3pt; }
footer .coTextJ {width:90%; font-size:9pt; color:#b1b1b1; text-align:left; padding: 10px 0; margin-left:5px; line-height: 160%;}
}
/* container */
#container {padding-bottom:70px;}
/* main rolling */
.main_rolling_mobile {display: none;}
.visualRoll {position:relative; width:100%;}
.viewImgList {position:relative; width:100%;}
.viewImgList li {text-align:center; height:550px; line-height:550px;}
/* .viewImgList li.imglist0 {position:relative; z-index:50; background:url('../img/topSliderMainImg.jpg') no-repeat center;}
.viewImgList li.imglist1 {position:absolute; width:100%; left:0; top:0; z-index:10; background:url('../img/topSliderMainImg.jpg') no-repeat center;}
.viewImgList li.imglist2 {position:absolute; width:100%; left:0; top:0; z-index:10; background:url('../img/topSliderMainImg.jpg') no-repeat center;} */
.viewImgList li {background-size:cover !important;}
.viewImgList li .roll_content {position:relative;}
.viewImgList li .roll_content .roll_txtline {position:absolute; left:0; bottom:60px; width:100%; line-height:1; text-align:center; font-size:22px; color:#fff; letter-spacing:2px;}
.rollbtnArea {position:absolute; width:100%; left:0; bottom:25px; z-index:200;}
.rollbtnArea .rollingbtn {width:320px; margin:0 auto; text-align:center;}
.rollbtnArea .rollingbtn li {display:inline-block; margin-right:5px;}
.rollbtnArea .rollingbtn li.butt0 {margin-left:10px;}
.rollbtnArea .rollingbtn li.rollstop {}
.rollbtnArea .rollingbtn li.rollplay {display:none;}
.rollbtnArea .rollingbtn li a {vertical-align:top;}
/* header 미디어쿼리 */
@media all and (min-width: 825px) and (max-width:992px) {
header {display:inline; left:0; top:0; width:100%; height:115px; background:rgba(0,0,0,0.5); z-index:100;}
header .header_area {/*position:relative;*/}
header .header_area h1 {float:left; padding:45px 0 0;}
header .header_area h1 a {display:block; width:184px; height:55px; text-indent:-9999px; overflow:hidden; background:url(../img/logoTop.png) no-repeat;}
header .header_area .openMOgnb {display:none;}
.header_cont {float:right; width:1096px;}
.header_cont .util {text-align: right; padding-top:10px;}
.header_cont .util li {display:inline;}
.header_cont .util li:after {content:" "; display:inline-block; padding:0; font-size:10px; color:#666; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:14px; color:#666;}
#text-size {font-size:9.5pt; color:#fff; font-weight:300; padding:7px 2px 0 2px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:280px; margin-top:-1px;} /* 2020-1230 추가 */
.header_cont .gnb {float:right; box-sizing:border-box; padding-top:10px; /*height:113px;*/}
.header_cont .gnb li {float:left;}
.header_cont .gnb li a {display:block; padding:20px 30px; font-size:12pt; color:#444;}
.header_cont .gnb li:last-child a {padding-right:0;}
.header_cont .closePop {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
@media all and (min-width: 768px) and (max-width:820px) {
.box_inner {width:100%;}
header {height:90px; text-align:center; z-index:200; background:rgba(0,0,0,0.5);}
header.on {background:#fff;}
header .header_area h1 {float:none; width:100%; height:51px; text-align:center; padding:0 0;}
header .header_area h1 a {display:inline-block; width:184px; height:51px; background-size:184px 51px; vertical-align:top; background:url(../img/logoTopMob.png) no-repeat;}
header .header_area .openMOgnb {display:block; position:absolute; left:15px; top:25px; width:23px; height:16px;}
header .header_area .openMOgnb span {box-sizing:border-box; display:block; width:25px; height:3px; margin-bottom:4px; border-radius:10px; background:#000;}
header .header_area .openMOgnb span + span {width:17px;}
header .header_area .openMOgnb span:last-child {width:25px; margin-bottom:0;}
.header_cont {float:none; width:100%; background:#31353d; display:none;}
.header_cont .util {padding:20px 20px;}
.header_cont .util li {float:left;}
#text-size {font-size:10pt; letter-spacing:-0.5pt; color:#fff; text-align:center; font-weight:300; padding:6px 6px 0 10px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:230px; margin-top:-1px;} /* 2020-1230 추가 */
/* .header_cont .util li:after {content:"|"; display:inline-block; padding:15px 8px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;} */
.header_cont .util li:after {content:" "; display:inline-block; text-align:center; margin:0 auto; padding:0 3px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:11pt; color:#fff;}
.header_cont .closePop {display:block; position:absolute; right:0; top:5px;}
.header_cont .closePop a {display:block; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:url(../img/btn_closeMenu.png) no-repeat; background-size:60px; }
.header_cont .gnb {float:none; box-sizing:border-box; padding-top:0; height:auto; border-top:1px solid #83868b;}
.header_cont .gnb li {float:left; width:50%; text-align:left; box-sizing:border-box; border-bottom:1px solid #83868b;}
.header_cont .gnb li:nth-child(odd) {border-right:1px solid #83868b;}
.header_cont .gnb li a {display:block; padding:0 0 0 65px; height:60px; line-height:60px; color:#fff;}
.gnb_depth {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
@media all and (min-width: 640px) and (max-width:767px) {
.box_inner {width:100%;}
header {height:90px; text-align:center; z-index:200; background:rgba(0,0,0,0.5);}
header.on {background:#fff;}
header .header_area h1 {float:none; width:100%; height:51px; text-align:center; padding:0 0;}
header .header_area h1 a {display:inline-block; width:184px; height:51px; background-size:184px 51px; vertical-align:top; background:url(../img/logoTopMob.png) no-repeat;}
header .header_area .openMOgnb {display:block; position:absolute; left:15px; top:25px; width:23px; height:16px;}
header .header_area .openMOgnb span {box-sizing:border-box; display:block; width:25px; height:3px; margin-bottom:4px; border-radius:10px; background:#000;}
header .header_area .openMOgnb span + span {width:17px;}
header .header_area .openMOgnb span:last-child {width:25px; margin-bottom:0;}
.header_cont {float:none; width:100%; background:#31353d; display:none;}
.header_cont .util {padding:15px 20px;}
.header_cont .util li {float:left;}
/* .header_cont .util li:after {content:"|"; display:inline-block; padding:15px 8px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;} */
.header_cont .util li:after {content:" "; display:inline-block; text-align:center; margin:0 auto; padding:0 3px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:11pt; color:#fff;}
#text-size {font-size:9.5pt; letter-spacing:-0.5pt; color:#fff; text-align:center; font-weight:300; padding:7px 6px 0 2px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:160px; margin-top:-1px;} /* 2020-1230 추가 */
.header_cont .closePop {display:block; position:absolute; right:0; top:5px;}
.header_cont .closePop a {display:block; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:url(../img/btn_closeMenu.png) no-repeat; background-size:60px; }
.header_cont .gnb {float:none; box-sizing:border-box; padding-top:0; height:auto; border-top:1px solid #83868b;}
.header_cont .gnb li {float:left; width:50%; text-align:left; box-sizing:border-box; border-bottom:1px solid #83868b;}
.header_cont .gnb li:nth-child(odd) {border-right:1px solid #83868b;}
.header_cont .gnb li a {display:block; padding:0 0 0 65px; height:60px; line-height:60px; color:#fff;}
.gnb_depth {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
@media all and (min-width: 480px) and (max-width:639px) {
.box_inner {width:100%;}
header {height:90px; text-align:center; z-index:200; background:rgba(0,0,0,0.5);}
header.on {background:#fff;}
header .header_area h1 {float:none; width:100%; height:51px; text-align:center; padding:0 0;}
header .header_area h1 a {display:inline-block; width:184px; height:51px; background-size:184px 51px; vertical-align:top; background:url(../img/logoTopMob.png) no-repeat;}
header .header_area .openMOgnb {display:block; position:absolute; left:15px; top:25px; width:23px; height:16px;}
header .header_area .openMOgnb span {box-sizing:border-box; display:block; width:25px; height:3px; margin-bottom:4px; border-radius:10px; background:#000;}
header .header_area .openMOgnb span + span {width:17px;}
header .header_area .openMOgnb span:last-child {width:25px; margin-bottom:0;}
.header_cont {float:none; width:100%; background:#31353d; display:none;}
.header_cont .util {padding:15px 20px;}
.header_cont .util li {float:left;}
/* .header_cont .util li:after {content:"|"; display:inline-block; padding:15px 8px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;} */
.header_cont .util li:after {content:" "; display:inline-block; text-align:center; margin:0 auto; padding:0 3px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:10pt; color:#fff;}
#text-size {font-size:10pt; letter-spacing:-0.5pt; color:#fff; text-align:center; font-weight:300; padding:10px 6px 0 4px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:340px; margin-top:-1px;} /* 2020-1230 추가 */
.header_cont .closePop {display:block; position:absolute; right:0; top:5px;}
.header_cont .closePop a {display:block; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:url(../img/btn_closeMenu.png) no-repeat; background-size:60px; }
.header_cont .gnb {float:none; box-sizing:border-box; padding-top:0; height:auto; border-top:1px solid #83868b;}
.header_cont .gnb li {float:left; width:50%; text-align:left; box-sizing:border-box; border-bottom:1px solid #83868b;}
.header_cont .gnb li:nth-child(odd) {border-right:1px solid #83868b;}
.header_cont .gnb li a {display:block; padding:0 0 0 65px; height:60px; line-height:60px; color:#fff;}
.gnb_depth {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
@media all and (min-width: 401px) and (max-width:479px) {
.box_inner {width:100%;}
header {height:90px; text-align:center; z-index:200; background:rgba(0,0,0,0.5);}
header.on {background:#fff;}
header .header_area h1 {float:none; width:100%; height:51px; text-align:center; padding:0 0;}
header .header_area h1 a {display:inline-block; width:184px; height:51px; background-size:184px 51px; vertical-align:top; background:url(../img/logoTopMob.png) no-repeat;}
header .header_area .openMOgnb {display:block; position:absolute; left:15px; top:25px; width:23px; height:16px;}
header .header_area .openMOgnb span {box-sizing:border-box; display:block; width:25px; height:3px; margin-bottom:4px; border-radius:10px; background:#000;}
header .header_area .openMOgnb span + span {width:17px;}
header .header_area .openMOgnb span:last-child {width:25px; margin-bottom:0;}
.header_cont {float:none; width:100%; background:#31353d; display:none;}
.header_cont .util {padding:15px 20px;}
.header_cont .util li {float:left;}
/* .header_cont .util li:after {content:"|"; display:inline-block; padding:15px 8px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;} */
.header_cont .util li:after {content:" "; display:inline-block; text-align:center; margin:0 auto; padding:0 3px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:10pt; color:#fff;}
#text-size {font-size:10pt; letter-spacing:-0.5pt; color:#fff; text-align:center; font-weight:300; padding:10px 6px 0 4px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:270px; margin-top:-1px;} /* 2020-1230 추가 */
.header_cont .closePop {display:block; position:absolute; right:0; top:5px;}
.header_cont .closePop a {display:block; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:url(../img/btn_closeMenu.png) no-repeat; background-size:60px; }
.header_cont .gnb {float:none; box-sizing:border-box; padding-top:0; height:auto; border-top:1px solid #83868b;}
.header_cont .gnb li {float:left; width:50%; text-align:left; box-sizing:border-box; border-bottom:1px solid #83868b;}
.header_cont .gnb li:nth-child(odd) {border-right:1px solid #83868b;}
.header_cont .gnb li a {display:block; padding:0 0 0 65px; height:60px; line-height:60px; color:#fff;}
.gnb_depth {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
@media all and (min-width: 360px) and (max-width:400px) {
.box_inner {width:100%;}
header {height:90px; text-align:center; z-index:200; background:rgba(0,0,0,0.5);}
header.on {background:#fff;}
header .header_area h1 {float:none; width:100%; height:51px; text-align:center; padding:0 0;}
header .header_area h1 a {display:inline-block; width:184px; height:51px; background-size:184px 51px; vertical-align:top; background:url(../img/logoTopMob.png) no-repeat;}
header .header_area .openMOgnb {display:block; position:absolute; left:15px; top:25px; width:23px; height:16px;}
header .header_area .openMOgnb span {box-sizing:border-box; display:block; width:25px; height:3px; margin-bottom:4px; border-radius:10px; background:#000;}
header .header_area .openMOgnb span + span {width:17px;}
header .header_area .openMOgnb span:last-child {width:25px; margin-bottom:0;}
.header_cont {float:none; width:100%; background:#31353d; display:none;}
.header_cont .util {padding:15px 20px;}
.header_cont .util li {float:left;}
/* .header_cont .util li:after {content:"|"; display:inline-block; padding:15px 8px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;} */
.header_cont .util li:after {content:" "; display:inline-block; text-align:center; margin:0 auto; padding:0 3px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:9pt; color:#fff;}
#text-size {font-size:9pt; letter-spacing:-0.5pt; color:#fff; text-align:center; font-weight:300; padding:10px 6px 0 2px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:220px; height:auto; margin-top:-1px; height:26px; border:none;} /* 2020-1230 추가 */
.header_cont .closePop {display:block; position:absolute; right:0; top:5px;}
.header_cont .closePop a {display:block; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:url(../img/btn_closeMenu.png) no-repeat; background-size:60px; }
.header_cont .gnb {float:none; box-sizing:border-box; padding-top:0; height:auto; border-top:1px solid #83868b;}
.header_cont .gnb li {float:left; width:50%; text-align:left; box-sizing:border-box; border-bottom:1px solid #83868b;}
.header_cont .gnb li:nth-child(odd) {border-right:1px solid #83868b;}
.header_cont .gnb li a {display:block; padding:0 0 0 65px; height:60px; line-height:60px; color:#fff;}
.gnb_depth {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
@media all and (min-width: 320px) and (max-width:359px) {
.box_inner {width:100%;}
header {height:90px; text-align:center; z-index:200; background:rgba(0,0,0,0.5);}
header.on {background:#fff;}
header .header_area h1 {float:none; width:100%; height:51px; text-align:center; padding:0 0;}
header .header_area h1 a {display:inline-block; width:184px; height:51px; background-size:184px 51px; vertical-align:top; background:url(../img/logoTopMob.png) no-repeat;}
header .header_area .openMOgnb {display:block; position:absolute; left:15px; top:25px; width:23px; height:16px;}
header .header_area .openMOgnb span {box-sizing:border-box; display:block; width:25px; height:3px; margin-bottom:4px; border-radius:10px; background:#000;}
header .header_area .openMOgnb span + span {width:17px;}
header .header_area .openMOgnb span:last-child {width:25px; margin-bottom:0;}
.header_cont {float:none; width:100%; background:#31353d; display:none;}
.header_cont .util {padding:15px 10px;}
.header_cont .util li {float:left;}
/* .header_cont .util li:after {content:"|"; display:inline-block; padding:15px 8px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;} */
.header_cont .util li:after {content:" "; display:inline-block; text-align:center; margin:0 auto; padding:0 3px; font-size:10pt; color:#a2a2a2; position:relative; top:-2px;}
.header_cont .util li:last-child:after {content:""; display:none;}
.header_cont .util li a {font-size:8.5pt; color:#fff;}
#text-size {font-size:8.5pt; letter-spacing:-0.5pt; color:#fff; font-weight:300; padding:5px 4px 0 3px;} /* 2020-1230 추가 */
.header_cont .util .inputbox {width:200px; margin-top:-1px; height:26px; border:none;} /* 2020-1230 추가 */
#search-btn {width:56px; height:28px;} /* 2020-1230 추가 */
.header_cont .closePop {display:block; position:absolute; right:0; top:5px;}
.header_cont .closePop a {display:block; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:url(../img/btn_closeMenu.png) no-repeat; background-size:60px; }
.header_cont .gnb {float:none; box-sizing:border-box; padding-top:0; height:auto; border-top:1px solid #83868b;}
.header_cont .gnb li {float:left; width:50%; text-align:left; box-sizing:border-box; border-bottom:1px solid #83868b;}
.header_cont .gnb li:nth-child(odd) {border-right:1px solid #83868b;}
.header_cont .gnb li a {display:block; padding:0 0 0 65px; height:60px; line-height:60px; color:#fff;}
.gnb_depth {display:none;}
/* main rolling */
.main_rolling_pc {display: none;}
.main_rolling_mobile {display: block;}
.main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
.main_rolling_mobile .swiper-pagination {width:auto; right:20px; left:auto; top:auto; bottom:20px; font-size:0;}
.main_rolling_mobile .swiper-pagination-bullet {width:5px; height:5px; margin:0 3px !important; background:#fff; opacity:0.2;}
.main_rolling_mobile .swiper-pagination-bullet-active {opacity:1;}
}
/* container */
#container {display:inline-block; width:100%; padding-bottom:30px;}
/* 상품리스트 */
.junggaPrice {font-size:10pt; color:#666; font-weight:normal; letter-spacing:0.2px; line-height:140%;}
.stocknum {font-size:10pt; color:#559b02; font-weight:500; letter-spacing:0.2px; line-height:140%;}
.wholesaleprice {font-size:10pt; color:#145dc0; font-weight:500; letter-spacing:0.2px; line-height:140%;}
.wholesalepersent {font-size:12pt; color:#e0232a; font-weight:300; letter-spacing:0.2px; line-height:140%;}