@charset "UTF-8";
/* 말줄임 */
/*초기화*/
html, body, section, article, header, footer, nav, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, a, form, input, select, option, fieldset, textarea, button, label, figure, video { margin: 0; padding: 0; border: 0; background-repeat: no-repeat; background-position: center; line-height: 1; text-decoration: none; font-family: 'lato','noto sans kr',돋움,'Apple SD Gothic Neo',sans-serif; font-size: 15px; font-weight: 500; color: #444; letter-spacing: -0.3px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; list-style: none; }

a:link, a:visited, a:hover, a:focus, a:active { text-decoration: none; }

table { width: 100%; border-spacing: 0; border-collapse: collapse; }

/* 폼초기화 */
select, button, input[type=text], input[type=submit], textarea { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; }

select { -webkit-box-sizing: border-box; box-sizing: border-box; }

/*크롬사라피*/
@media screen and (-webkit-min-device-pixel-ratio: 0) { select { padding-right: 22px !important; background: url(../images/bg_select.png) no-repeat right center; background-size: contain; } }
/*파이어폭스*/
@-moz-document url-prefix() { select { padding-right: 22px !important; background: url(../images/bg_select.png) no-repeat right center; background-size: contain; } }
/* 섀도우 */
/*========= input ===========*/
.ip_comm{ display: block; width: 100%; height: 38px; padding: 0 10px; border: 0; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; }
.ip_comm:focus { background-color: #ffffee; }

select.ip_comm {padding-right: 0 !important; }

textarea.ip_comm {height: 150px; padding: 10px; line-height: 1.5; }

.center { width: 1080px; margin: 0 auto; }

.clear:after { content: ""; display: block; clear: both; }

.hidden { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }

/*========= header ===========*/
#header { background-color: #fff; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); }
#header > .hd_top {padding:30px 0; border-bottom:1px solid #eee;}
#header > .hd_top ul {float:right; margin-top:7px; text-align: right;}
#header > .hd_top ul li {display: inline-block; margin-left:10px;}
#header > .hd_top ul li a {font-size: 13px; color: #666;}
#header > .hd_btm { position: relative; width: 1080px; margin: 0 auto;  padding: 15px 0;}
#header > .hd_btm:after { content: ""; display: block; clear: both; }
#header h1,
#header #btn_nav { position: relative; z-index: 100; }
#header h1 { float: left; }
#header #btn_nav { float: right; width:30px;}
#header #btn_nav > a { display: block; position: relative; width: 20px; height: 28px; }
#header #btn_nav > a span, #header #btn_nav > a span:before, #header #btn_nav > a span:after { display: block; width: 100%; height: 2px; background-color: #444; -webkit-transition: all 0.3s; transition: all 0.3s; }
#header #btn_nav > a span { position: absolute; left: 0; top: 50%; text-indent: -999%; font-size: 0; line-height: 0; }
#header #btn_nav > a span:before, #header #btn_nav > a span:after { content: ""; position: relative; }
#header #btn_nav > a span:before { top: -7px; }
#header #btn_nav > a span:after { top: 5px; }
#header #btn_nav.on span { background-color: transparent; }
#header #btn_nav.on span:before, #header #btn_nav.on span:after { background-color: #444; }
#header #btn_nav.on span:before { top: 0px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#header #btn_nav.on span:after { top: -2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#header #nav {float:left; width:1050px;}
#header #nav ul {}
#header #nav ul > * { display: inline-block; }
#header #nav ul li {margin-right:32px;}
#header #nav ul li .dep1 { position: relative; display: block; line-height: 28px; font-size: 16px; font-weight: 700; -webkit-transition: all 0.3s; transition: all 0.3s; color: #333; }
#header #nav ul li .dep1::after { content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; background-color: #3d2a74; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.5s; transition: all 0.5s; }
#header #nav ul li:hover .dep1 { color: #3d2a74; }
#header #nav ul li:hover .dep1::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

#sitemap { display: none; position: absolute; left: 0; top: 147px; width: 100%; padding: 30px 0; background-color: rgba(245, 245, 245, 0.95); z-index: 100; }
#sitemap > ul { width: 1080px; margin: 0 auto; }
#sitemap > ul:after { content: ""; display: block; clear: both; }
#sitemap > ul > li { float: left; width: 10%; border-right:1px solid #ddd;}
#sitemap > ul > li:last-child {border-right:0;}
#sitemap > ul .dep1 {display: block;text-align: center; font-weight: 700; color: #222; }
#sitemap > ul .dep2 { margin-top: 15px; }
#sitemap > ul .dep2 li { margin-bottom: 8px;  text-align: center;}
#sitemap > ul .dep2 li a { font-size: 13px; color: #666; }

.on #sitemap { display: block; }

/*========= main ===========*/
.swiper-button-prev, .swiper-button-next { left: 50%; width: 30px; background-size: contain; }

.swiper-button-prev { -webkit-transform: translateX(-660px); transform: translateX(-660px); }

.swiper-button-next { -webkit-transform: translateX(630px); transform: translateX(630px); }

#visual { position: relative; overflow: hidden; }
#visual h2 { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }
#visual li.swiper-slide { position: relative; height: 500px; }
#visual .visual1 { background-image: url(/images/visual1.jpg); }
#visual .visual2 { background-image: url(/images/visual2.jpg); }
#visual .visual3 { background-image: url(/images/visual3.png); }
#visual .visual4 { background-image: url(/images/visual4.png); }

.main_title { margin-bottom: 40px; text-align: center; }
.main_title h2 { font-size: 34px; font-weight: 400; color: #222; letter-spacing: -1.5px; }
.main_title p { margin-top: 15px; line-height: 26px; font-size: 16px; color: #666; }

.pd_list:after { content: ""; display: block; clear: both; }
.pd_list > li { float: left; width: 255px; margin-right: 20px; margin-bottom: 20px; padding: 30px; border-radius: 4px; border: 1px solid #ddd; background: #fff; }
.pd_list > li a, .pd_list > li img { display: block; }
.pd_list > li .img_cont { margin-bottom: 30px; -webkit-transition: all 0.3s; transition: all 0.3s; }
.pd_list > li .img_cont img { width: 100%; height: auto; }
.pd_list > li .tit {display: block;  display: -webkit-box; position: relative; overflow: hidden; width:100%; height:52px; line-height:26px; font-size: 20px; font-weight: 700; color: #222;  text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.pd_list > li .ex { margin-top: 8px; font-size: 13px; color: #777; }
.pd_list > li .price { margin-top: 20px; font-size: 20px; font-weight: 700; color: #3d2a74; }
.pd_list > li .price .before { margin-left: 6px; font-size: 15px; font-weight: 500; color: #888; text-decoration: line-through; }
.pd_list > li:nth-child(4n) { margin-right: 0; }
.pd_list > li:hover .img_cont { -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }

#main01 { position: relative; width: 1080px; margin: 0 auto; margin-top: -40px; z-index: 100; }
#main01:after { content: ""; display: block; clear: both; }
#main01 > a { position: relative; top: 0; float: left; display: block; width: 255px; margin-right: 20px; padding: 55px 0 40px 0; border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; }
#main01 > a img { display: block; margin: 0 auto; margin-bottom: 30px; }
#main01 > a .tit { margin-bottom: 10px; font-size: 18px; font-weight: 700; color: #222; }
#main01 > a span { font-size: 13px; font-weight: 500; color: #3d2a74; }
#main01 > a:last-child { margin-right: 0; }
#main01 > a:hover { top: -20px; }

@keyframes btn {
  0% {box-shadow:0 0 0px rgba(0,0,0,0.5) }
  50% {box-shadow:3px 3px 10px rgba(0,0,0,0.8) }
  100% {box-shadow:0 0 0px rgba(0,0,0,0.5) }
}
#main02 { padding: 95px 0 85px 0; text-align: center; }
#main02 .set_btn a {overflow:hidden; display: inline-block; margin: 0 2px; border-radius:8px; animation-name:btn; animation-iteration-count: infinite; animation-duration:2s;}

#main03 { padding: 80px 0 100px 0; background-color: #3b444f; }
#main03 > div { width: 1080px; margin: 0 auto; }
#main03 .main_title h2 { color: #666e79; }
#main03 .main_title h2 strong { color: #fff; }

#main04 { width: 1080px; margin: 0 auto; padding:60px 0; }
#main04:after { content: ""; display: block; clear: both; }
#main04 > div { float: left; width: 300px; height: 220px; -webkit-box-sizing: content-box; box-sizing: content-box; }
#main04 > div h2 { margin-bottom: 15px; font-size: 20px; font-weight: 700; color: #222; }
#main04 .cs {display:flex; flex-direction: column; justify-content: center; padding-right: 45px; text-align: center;}
#main04 .cs h2 {padding-top:60px; background-image:url(/images/icon_csface.svg); background-position:top center; background-size:auto 50px;}
#main04 .cs .tel {font-size: 40px; font-weight: 900; color: #3d2a74; }
#main04 .cs .ex {font-size: 14px; line-height:20px;}
#main04 .cs h3 { margin-bottom: 10px; margin-top: 15px; text-align: center;}
#main04 .cs h3 span { display: inline-block; padding: 0 10px; background-color: #3b444f; line-height: 22px; font-size: 13px; font-weight: 500; color: #fff; }
#main04 .cs dl {text-align: center;}
#main04 .cs dl dt,
#main04 .cs dl dd {display:inline-block; font-size: 14px; line-height:20px;}
#main04 .cs dl dt {margin-right: 5px; font-weight: 700;}
#main04 .cs dl dd {}
#main04 .cs .cnt { font-size: 20px; font-weight: 700; }
#main04 .cs .cnt span { margin-left: 2px; font-size: 15px; font-weight: 500; }
#main04 .latest { position: relative; }
#main04 .latest ul {height: 185px;}
#main04 .latest ul li { padding: 11px 0; line-height: 15px; }
#main04 .latest ul li:after { content: ""; display: block; clear: both; }
#main04 .latest ul li .date { float: right; font-size: 13px; color: #888; }
#main04 .latest .btn_more { position: absolute; top: 0; right: 0; font-size: 24px; font-weight: 700; color: #3d2a74; }
#main04 .la_nt { padding: 0 44px; border-left: 1px solid #eee; border-right: 1px solid #eee; }
#main04 .la_nt .btn_more { right: 44px; }
#main04 .la_qa { padding-left: 45px; }

/*========= footer ===========*/
#footer { padding: 30px 0; border-top: 1px solid #ddd; }
#footer > h2 { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }
#footer > div { width: 1080px; margin: 0 auto; position: relative; }
#footer .ft_ban { position: absolute; right: 0; top: 0px; }
#footer ul { text-align: left; margin-bottom: 10px; }
#footer ul > * { display: inline-block; }
#footer ul li { margin-right: 10px; line-height: 26px; font-size: 14px; color: #666; }
#footer ul li span{color: red;}
#footer ul li a { font-size: inherit; font-weight: inherit; color: inherit; font-weight: 700; }
#footer .copyright { font-size: 13px; font-weight: 700; color: #999; }
#footer .copyright a { font-size: inherit; font-weight: inherit; color: inherit; }

/*========= quick ===========*/
#quick { position: fixed; right: 10px; bottom: 10px; overflow: hidden; border: 1px solid #f9e000; border-radius: 4px; z-index: 500; }
#quick figure { padding: 20px; background-color: #fff; }
#quick .tit { background-color: #f9e000; line-height: 30px; text-align: center; font-size: 13px; font-weight: 700; color: #3b1d1c; }
#quick .tit img { position: relative; top: -1px; width: auto; height: 16px; }

/*========= sub ===========*/
#sub_menu {padding:15px 0; border-bottom:1px solid #eee; background-color: #f4f4f4;}
#sub_menu ul {text-align: center;}
#sub_menu ul li {display: inline-block; margin:0 10px; }
#sub_menu ul li a {font-size: 14px;}
#sub_menu ul li.on a {font-weight: 700; color: #222;}

#page_title { padding: 80px 0; background-image: url(/images/bg_sub_title.gif); background-repeat: repeat; }
#page_title > div { width: 1080px; margin: 0 auto; position: relative; }
#page_title h2 { font-size: 34px; font-weight: 800; color: #fff; }
#page_title .location { position: absolute; right: 0; top: 20px; opacity: 0.5; text-align: right; }
#page_title .location > * { display: inline-block; }
#page_title .location li { font-size: 14px; color: #fff; }
#page_title .location li::after { content: "-"; display: inline-block; margin: 0 4px; font-size: 11px; color: #fff; }
#page_title .location li:last-child::after { display: none; }

.list #page_title { padding-bottom: 150px; }

#sub_contents { position: relative; width: 1080px; margin: 0 auto; padding-top: 60px; padding-bottom: 100px; z-index: 100; }

.list #sub_contents { margin-top: -145px; }

.pd_list_top:after { content: ""; display: block; clear: both; }
.pd_list_top .total { float: left; font-size: 14px; }
.pd_list_top .total span { color: #3d2a74; }
.pd_list_top .align { float: right; text-align: right; }
.pd_list_top .align > * { display: inline-block; }
.pd_list_top .align li { position: relative; }
.pd_list_top .align li:after { content: ""; display: inline-block; width: 1px; height: 10px; background-color: #ccc; margin: 0 10px; right: 0; top: 0; }
.pd_list_top .align li:last-child:after { display: none; }

.pagination { margin-top: 60px; text-align: center; }
.pagination div, .pagination a { display: inline-block; }
.pagination .arr { margin: 0 15px; }
.pagination .arr a { margin: 0 5px; }
.pagination .num { width: 26px; margin: 0 2px; line-height: 24px; border: 1px solid #ddd; text-align: center; font-size: 13px; }
.pagination .num.on { background-color: #3d2a74; border-color: #3d2a74; color: #fff; }

.view_top:after { content: ""; display: block; clear: both; }
.view_top .thumb { overflow: hidden; float: left; width: 420px; padding:20px; border: 1px solid #ddd; border-radius: 10px; }
.view_top .thumb img {width:100%; height:auto;}
.view_top .set_pd_info { float: right; width: 600px; }
.view_top .set_pd_info .pd_name { font-size: 26px; font-weight: 700; color: #222; }
.view_top .set_pd_info .pd_info { margin-top: 30px; border-top: 1px solid #ddd; }
.view_top .set_pd_info .pd_info th, .view_top .set_pd_info .pd_info td { border-bottom: 1px solid #ddd; height: 40px; text-align: left; }
.view_top .set_pd_info .pd_info th { width: 120px; font-weight: 700; }
.view_top .set_pd_info .pd_info .price1 { text-decoration: line-through; }
.view_top .set_pd_info .pd_info .price2 { font-weight: 600; color: #3d2a74; }

.view_btm { margin-top: 100px; }
.view_btm .detail_tab { border: 1px solid #ddd; }
.view_btm .detail_tab:after { content: ""; display: block; clear: both; }
.view_btm .detail_tab li { float: left; width: 25%; border-right: 1px solid #ddd; background-color: #f4f4f4; }
.view_btm .detail_tab li a { display: block; line-height: 60px; text-align: center; font-size: 16px; font-weight: 600; color: #888; }
.view_btm .detail_tab li a.on { background-color: #fff; color: #3d2a74; }
.view_btm .detail { padding: 80px 0; }


/* 바코드 */
#pin_wrapper {width:100%; height:100%; background-color:#222 !important; }
#pin_wrapper .wrap_bcd {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#pin_wrapper h1 {margin-bottom:20px; text-align:center; }
#pin_wrapper figure {text-align:center;}
#pin_wrapper .set_bcd {width:360px; padding:20px; padding-bottom:30px; border-radius:15px; background-color:#fff;}
#pin_wrapper .img_pd {margin-bottom:15px; text-align: center;}
#pin_wrapper .img_pd img {width:80%; height:auto;}

#pin_wrapper .info_bcd {width:100%; margin-top:30px;}
#pin_wrapper .info_bcd th,
#pin_wrapper .info_bcd td {vertical-align: top; text-align: left; line-height:1.3; font-size: 14px;}
#pin_wrapper .info_bcd p {line-height:inherit; font-size: inherit; font-weight:inherit}
#pin_wrapper .info_bcd th {width:65px; font-weight: bold;}
#pin_wrapper .info_bcd td {text-align: center;}
#pin_wrapper .info_bcd th.cont {padding-top:18px; padding-bottom: 8px;}
#pin_wrapper .info_bcd td.cont {padding-bottom: 18px;}
#pin_wrapper .info_bcd td.cont p {text-align: left;}



/* 주문폼 */
.agreement {}
.agreement .set_agree {position:relative; margin-bottom:10px; padding:10px 15px; border:1px solid #ddd; background-color:#f4f4f4;}
.agreement .set_agree input {position: absolute; left:-100%; top:0; width:0; height:0; border:0; }
.agreement .set_agree label,
.agreement .set_agree a {display: inline-block;line-height:18px;}
.agreement .set_agree label {position:relative; padding-left:25px; font-size: 14px; }
.agreement .set_agree label::after {content:"";position: absolute; left:0; top:0;width:18px; height:18px; border-radius:4px; display:block; border:1px solid #aaa; background-image:url(/images/chk.svg); background-repeat:no-repeat; background-position:center; background-size:10px; box-sizing:border-box;}
.agreement .set_agree input:checked + label::after {border:1px solid #3d2a74; background-image:url(/images/chk_w.svg); background-color:#3d2a74;}
.agreement .set_agree a {margin-left:5px; padding:0 5px; border-radius:4px; background-color:#888; font-size:12px; color:#fff;}

.cuation_li {margin-top:10px;}
.cuation_li li {position: relative; padding-left:17px; margin-bottom:5px; line-height:22px; font-size:13px; color:#3d2a74;}
.cuation_li li::before {position: absolute; left:0; top:0; line-height:22px; font-size: 13px; content:"※"}



/* 모달팝업 */
#modal-content { display: none; width: 600px; max-width: 90%; height: 500px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; outline: 0 none; }

#modal-content .modal-header { height: 20px; border-bottom: 1px solid #e5e5e5; padding: 15px; }

#modal-content .modal-header h4 { margin: 0; font: bold 18px 'Malgun Gothic'; color: #5d5d5d; }

#modal-content .modal-body { padding: 15px; }

#modal-content .modal-body .b-iframe { width: 570px; max-width: 100%; height: 430px; }

#modal-content .b-close { float: right; font: bold 21px Arial; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; filter: alpha(opacity=20); padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }

#modal-content .b-close:hover, #modal-content .b-close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .5; filter: alpha(opacity=50); }

p.modal-frame-content { width: 550px; max-width: 100%; height: 400px; padding-right: 5px; overflow-x: hidden; overflow-y: auto; font: normal 12px 'Malgun Gothic'; color: #555; line-height: 1.65em; }

/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
.b-modal __b-popup1__ { max-width: 100%; }

#modal-content .modal-header, #modal-content .modal-body { -webkit-box-sizing: content-box !important; box-sizing: content-box !important; }

#modal-content2 { display: none; width: 400px; height: 560px; background: rgba(54, 54, 54, 0.9); border-radius: 4px; border: 0px; }

#modal-content2 .modal-header { position: relative; height: 28px; }

#modal-content2 .modal-body2 { padding: 0; }

#modal-content2 .b-close { position: absolute; top: 0; right: 16px; font-size: 40px; font-weight: 900; font-family: Tahoma; color: #fff; opacity: .5; filter: alpha(opacity=50); padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }

#modal-content2 .b-close:hover, #modal-content .b-close:focus { cursor: pointer; opacity: 1; filter: alpha(opacity=100); }

#modal-content2 .modal-body2 .b-iframe { width: 400px; height: 560px; }

/*# sourceMappingURL=style.css.map */