@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#wrapper {position:relative; overflow:hidden; padding-top:calc(var(--header-height) +  var(--gnb-height));}

/* header */
#header {position:fixed; top:0; left:0; width:100%; z-index:100; transition:.3s; background:#fff;}
#header .contain {max-width:1460px; z-index:10;}
.header {border-bottom:1px solid #ddd;}
.header .contain {display:flex; align-items:center; justify-content:space-between; height:var(--header-height);}

#gnb {border-bottom:1px solid #ddd;}
#gnb ul {display:flex;}
#gnb ul li:not(:last-child) {margin-right:50px;}
#gnb ul li a {height:var(--gnb-height); display:flex; align-items:center; justify-content:center; text-align:center; color:#242424; font-weight:600; letter-spacing:-.03em; line-height:1.4em; font-size:var(--fz19);}

.header .search {position:relative;}
.header .search .input {border:2px solid var(--color-primary); width:420px;}
.header .search .btn-pack {background:var(--color-primary) url('/images/bbs/search.png') no-repeat 50% 50%; position:absolute; right:0; width:44px; height:44px; font-size:0; border:0;}

/* main */
.pt0 {padding-top:0 !important;}

#contArea {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
#contArea.w1260 {max-width:1260px;}
.contain {width:100%; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}

.sub-title {padding:77px 0 44px; text-align:center;}
.sub-title h1 {font-size:var(--fz38); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#242424;}

.real-cont {min-height:300px; padding-bottom:145px;}

.doc-bnr {margin:50px 0; font-family:var(--font-gmarket); padding:0 120px; display:flex; align-items:center; height:500px; background:url('/images/main/doc-bnr.jpg') no-repeat right 50% / cover;}
.doc-bnr .inner .txt1 {font-size:var(--fz64); font-weight:700; letter-spacing:-.03em; line-height:1.3em; color:var(--color-primary);}
.doc-bnr .inner .txt2 {padding:11px 12px 2px; background:var(--color-primary); display:inline-block; line-height:1em; font-size:var(--fz56); font-weight:700; letter-spacing:-.03em; color:#fff;}

.doc-tit {margin-bottom:25px; font-size:var(--fz28); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#242424;}

.doc-tab ul {display:flex; flex-wrap:wrap; margin:-2px;}
.doc-tab ul li {padding:2px;}
.doc-tab ul li a,
.doc-tab .radiobox label {cursor:pointer; font-weight:400; color:#242424; border-radius:4px; line-height:30px; padding:0 9px; display:flex; align-items:center; justify-content:center; text-align:center; background:#e4e4e4;}
.doc-tab .radiobox label:before {display:none;}
.doc-tab ul li.active a,
.doc-tab .radiobox input:checked + label {color:#fff; background:var(--color-primary);}

.region-wrap {margin-bottom:40px; display:flex; border:1px solid #ddd;}
.region-wrap .head {border-right:1px solid #ddd; width:150px; display:flex; align-items:center; justify-content:center; text-align:center; background:#f8f8f8; font-weight:500; color:#242424;}
.region-wrap .body {flex:1 1 auto; min-width:0; width:1%; padding:15px;}
.region-wrap .doc-tab ul {margin:-5px;}
.region-wrap .doc-tab ul li {padding:5px;}
.region-wrap .result-area {background:#f3f4f6;}
.region-wrap .result-area .first-txt {padding:5px; font-size:var(--fz14); font-weight:300; color:var(--color-primary); text-align:center;}
.region-wrap .result-area .doc-tab {padding:17px 10px;}

.bargain-list ul {display:flex; flex-wrap:wrap; margin:-5px;}
.bargain-list ul li {width:50%; padding:5px;}
.bargain-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.bargain-list ul li a {height:100%; padding:10px;border:1px solid #ddd; display:flex; align-items:center;}
.bargain-list ul li .thumb-wrap {margin-right:27px; width:50%;}
.bargain-list ul li .thumb {position:relative; padding-bottom:58%; overflow:hidden;}
.bargain-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.bargain-list ul li .tt {margin-bottom:2px; font-size:var(--fz15); font-weight:500; line-height:1.4em; color:var(--color-primary);}
.bargain-list ul li .tit {margin-bottom:10px; font-size:var(--fz17); font-weight:500; line-height:1.4em; color:#242424;}
.bargain-list ul li .etc {margin-bottom:10px;}
.bargain-list ul li .etc span {margin-right:8px; display:inline-flex; align-items:center;}
.bargain-list ul li .etc span strong {margin-right:10px; border-radius:4px; font-size:var(--fz15); color:#fff; font-weight:300; width:20px; height:20px; display:flex; align-items:center; justify-content:center;}
.bargain-list ul li .etc span strong.st1 {background:var(--color-primary);}
.bargain-list ul li .etc span strong.st2 {background:#6bb011;}
.bargain-list ul li .etc span strong.st3 {background:#ff0000;}
.bargain-list ul li .price {margin-bottom:13px; font-size:var(--fz24); font-weight:500; letter-spacing:-.03em; line-height:1.4em; color:#242424;}
.bargain-list ul li .price strong {font-weight:600;}
.bargain-list ul li .regoin {display:flex; align-items:center; font-size:var(--fz15); line-height:1.4em; font-weight:400;}
.bargain-list ul li .regoin:before {margin-right:8px; content:''; width:13px; height:17px; background:url('/images/main/regoin-ico.png') no-repeat 50% 50% /contain;}
.bargain-list ul li a:hover {border-color:var(--color-primary);}

.dot-list {list-style:none !important;}
.dot-list li {margin-bottom:8px; line-height:1.5em; padding-left:14px; position:relative;}
.dot-list li:last-child {margin-bottom:0;}
.dot-list li:before {content:''; width:4px; height:4px; background:#ee8311; position:absolute; left:0; top:.55em;}

.doc-btn {color:var(--color-primary); font-weight:400; border:1px solid var(--color-primary); height:50px; padding:0 37px; display:inline-flex; align-items:center; justify-content:center;}
.doc-btn:hover {background:var(--color-primary); color:#fff;}

/* footer */
#footer {border-top:1px solid #ddd; color:#686868; font-size:var(--fz15); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
#footer .contain {max-width:1780px;}
#footer span {display:inline-block;}

.foot-top {border-bottom:1px solid #ddd; padding:23px 0;}
.foot-top .contain {display:flex; justify-content:space-between; align-items:center;}
.foot-top .foot-link a {font-size:var(--fz16);}

.scroll-top {font-size:var(--fz15); font-weight:600; letter-spacing:0; display:inline-flex; align-items:center;}
.scroll-top:after {margin-left:10px; content:''; width:0; height:0; border-bottom:7px solid #454545; border-right:6px solid transparent; border-left:6px solid transparent;}

.foot-wrap {padding:42px 0;}
.foot-wrap .contain {display:flex; justify-content:space-between;}
.foot-wrap .f-info .comp-name {margin-bottom:5px; font-size:var(--fz20); font-weight:500;}
.foot-wrap .f-info address {margin-bottom:25px; font-style:normal;}
.foot-wrap .f-info address span {margin:0 35px 2px 0;}
.designed {color:#9c9c9c;}
.foot-wrap .f-contact .row {display:flex;}
.foot-wrap .f-contact .row .col {padding:0 45px; border-right:1px solid #ddd;}
.foot-wrap .f-contact .row .col:last-child {border-right:0;}
.foot-wrap .f-contact .txt1 {font-size:var(--fz17); font-weight:500; letter-spacing:-.03em; line-height:1.4em; color:#242424;}
.foot-wrap .f-contact .txt2 {display:block; margin:7px 0; font-size:var(--fz26); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#242424;}
.foot-wrap .f-contact .txt3 {font-size:var(--fz16); font-weight:400; letter-spacing:-.03em; line-height:1.5em; color:#686868;}
.foot-wrap .f-contact .row .col2 .txt2 {margin:3px 0;color:var(--color-primary); font-size:var(--fz32);}