/*========= header ===========*/

.hd_top {position: relative; padding:30px 0;}
.hd_top h1 {position: absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.hd_top h1 a {  font-family: "Oswald", sans-serif; font-size:40px; font-weight: 700; color: #000;}

.hd_top .sch {position: relative; width: 200px;}
.hd_top .sch .ip_comm {padding-right:50px;}
.hd_top .sch button {position: absolute; right:0; top:0; width:42px; height:42px; padding:10px;}
.hd_top .sch button img {width:100%; height:auto;}

.hd_top nav {justify-content: flex-end;}
.hd_top nav a {position: relative; margin-left:20px;font-size: 15px;}
.hd_top nav a.balloon::after {content:"10,000원";  position: absolute; bottom:-25px; left:50%; transform:translateX(-50%); width:100%; padding:5px; border-radius:4px; background-color: #000; text-align: center; font-family: 'dotum',sans-serif; font-size: 11px; color: #fff;}
.hd_top nav a.balloon::before {content:"▲";  position: absolute; bottom:-12px; left:50%; transform:translateX(-50%) scaleX(0.7); color: #000;}
.hd_top nav a .cnt {display:inline-flex; align-items: center; justify-content: center; width:24px; height:24px; background-color: #000; color: #fff; font-size: 13px; border-radius:100px; margin-left:3px;}


.hd_btm {background-color:#000;}
.hd_btm .row {justify-content: space-around}
.hd_btm a {color: #fff;}
.hd_btm .row > div {position: relative; }
.hd_btm .dep1 {height:50px; display:flex; align-items: center; justify-content: center; padding:0 2vw; }
.hd_btm .center > div:hover > .dep1 {background-color: #222;}
.hd_btm .dep2 {display: none;position: absolute; left:0; top:50px; background-color: #222; width:100%; padding:15px 0; text-align: center; z-index: 20; }

.hd_btm .center > div:hover > .dep2 {display: block; }
.hd_btm .center> div:hover > .dep2.row {display: flex; }

.hd_btm .dep2.row {width:auto; white-space: nowrap; white-space: nowrap; align-items: stretch;}
.hd_btm .dep2.row > li {width: 150px; padding:15px 20px;  border-right:1px solid #333;}
.hd_btm .dep2.row > li:last-child {border-right:0;}
.hd_btm .dep2 > li > a {display: block; padding:5px 0; font-size: 15px; }
.hd_btm .dep2.row > li > a {margin-bottom:10px; padding:0; font-weight: 700;}

.hd_btm .dep3 a {line-height:1.6; font-size: 14px; color: #eee;}
.hd_btm .dep3 a:hover {color:dodgerblue}

.hd_btm .set_login {display: none;}


.btn_nav {display: none;}


#wrapper.fixed {padding-top:50px;}
#header {transition:1s; background-color: #fff;z-index: 20;}
.fixed #header {position: fixed; left:0; top:0; width:100%; }
.fixed #header .hd_top {display: none;}

/*========= footer ===========*/

#footer {padding:60px 0; background-color:#222;}
#footer nav a {margin-right:15px; font-weight: 700;  font-size: 15px; color: #fff;}
#footer ul {margin:15px 0; }
#footer ul li {line-height:1.5; font-size: 15px; color: #fff; font-weight: 300;}
#footer .copyright {margin-top: 10px; font-size: 13px; font-weight: 300; color: #888; }

.kakao {position: fixed; right:0; top:50%; transform:translate(0, calc(-50% - 80px)) rotate(-90deg); transform-origin: right bottom; background-color: var(--kakao-y); color:var(--kakao-b);z-index: 50; display:inline-flex; align-items: center; justify-content: center; width: 145px; padding:10px 0; font-size: 14px; font-weight: 600;}
.kakao img {width:auto; height:20px; margin-right:5px;}

#btn_top {position: fixed; right:20px; bottom:20px; display:flex; width:60px; height:60px; border-radius:100px; background-color: rgba(255,255,255,0.8); border:1px solid #eee; z-index: 99; display:flex; align-items: center; justify-content: center; font-size: 24px; font-weight:200; }


/* visual */
.visual {overflow:hidden; height:600px;}

#contents {padding-bottom:100px;}
#contents.main {padding-top:40px;}
#contents.sub {padding-top:60px;}

.main a,
.main img {display:block; }
.main img {width:100%; height:auto; }

/* main1 */
.main1 { flex-wrap:wrap;}
.main1 > a {width:calc((100% - (10px * 4))/5); text-align: center; margin-bottom:20px;}
.main1 figure {overflow:hidden; border-radius:10px; margin-bottom:10px; }
.main1 > a:hover {font-weight: 600;}
.main1 > a:hover figure {box-shadow: 3px 3px 10px rgba(0,0,0,0.3) }

.main_title {padding-bottom:20px; margin:50px 0 20px 0; border-bottom:1px solid #555 }
.main_title h2 {font-size: 22px; font-weight: 700;}
.main_title a {font-size: 30px; font-weight: 200;}


.pd_list {display:grid; grid-template-columns: repeat(5,248px); grid-gap:60px 10px}
.pd_list > a {overflow:hidden;}
.pd_list figure {overflow:hidden;}
.pd_list img {display: block; width:100%; height:auto;}
.pd_list > a:hover img {transform:scale(1.2)}
.pd_list .tit { margin:15px 0; font-weight: 500; display: block; display: -webkit-box; position:relative; overflow: hidden; width: 100%; height: 40px; line-height: 20px; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.pd_list .price {display:flex; align-items: center; justify-content: flex-start;}
.pd_list .price p {font-weight: 700; color: #000;}
.pd_list .price .before {margin-left:10px; font-weight:400; color: #888; text-decoration: line-through;}

.pd_list.col4 {grid-template-columns: repeat(4,calc((100% - 30px)/4)); }

.pd_list + .set_btn {margin-top:50px; display:flex; align-items: center; justify-content: center;}
.set_btn .btn_more {display:flex; align-items: center; justify-content: center; width: 200px; height: 50px; border-radius:5px; border:1px solid #ccc; }


.page_title { margin-bottom:20px; font-size: 26px; font-weight: 700; color: #000;}

.view_top {align-items: flex-start}
.view_top img {display: block; width:100%; height:auto;}
.view_top .pd_img {overflow:hidden; position: relative;  z-index: 10;width: 600px;}
.view_top .main_img {}
.view_top .thumb_img {margin-top: 10px;}

.view_top .pd_info {width: calc(100% - 600px); padding-left:40px; padding-top:40px;}
.view_top .pd_info .tit {font-size: 26px; font-weight: 500;}
.view_top .pd_info .price {margin-top: 30px; font-size: 20px; font-weight: 700;}
.view_top .pd_info .info {display:flex; flex-wrap:wrap; padding:30px 0; margin:40px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.view_top .pd_info .info dt {width:100px; font-weight: 600;}
.view_top .pd_info .info dd {width:calc(100% - 100px);}
.view_top .pd_info .info dt,
.view_top .pd_info .info dd {line-height:32px;    }

.view_btm { margin-top:60px;}

.nav_detail {border:1px solid #ddd; width:100%; display:flex; align-items: center; justify-content: space-between;}
.nav_detail > a {border-right:1px solid #ddd; display:flex; align-items: center; justify-content: center; width:25%; height:40px;}
.nav_detail > a:last-child {border-right:0;}
.nav_detail a.on {background-color: #000; color: #fff;}
.view_btm .detail_cont {padding:40px 0 80px 0;}