@charset 'utf-8';
@import url(common.css);

html {font-size: 14px}
#wrap {max-width: 1920px;margin: 0 auto;position: relative;min-height: 100vh}
img{vertical-align: top;} /* 260102 수정됨 */

/* header */
header {font-size: 0;z-index: 9;}
header .container {max-width: inherit}
header .top-nav {position: fixed;left: 50px;top: 50px;z-index: 21;}
header .top-nav li {display: inline-block;vertical-align: top;}

header .top-nav a {
	display: flex;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 15%);
}

header .top-nav img {
	width: 64px;
}

header .left-nav {position: fixed;left: 50px;bottom: 0;top: 250px;;}
header .left-nav ul {}
header .left-nav li {margin-bottom: 70px;}
header .right-nav {position: fixed;right: 50px;top: 50px;text-align: center; z-index: 100; /* 260102 수정됨*/}

header .right-nav li {
	margin-bottom: 32px;
}

header .right-nav a {
	display: flex;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 15%);
}

header .right-nav img {
	width: 64px
}

header aside {
	position: fixed;
	left: -440px;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
	background: #fff;
	width: 440px;
	height: 100%;
	z-index:9;
}

header aside.active {
	left: 0;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
	box-shadow: 0 0 8px 0 rgb(0 0 0 / 15%);
}

header aside.active .btn {opacity: 1;overflow: visible;visibility: visible;-webkit-transition:all 0.3s;transition:all 0.3s}
header aside .btn {position: absolute;left: 100%;top: 40px;width: 90px;height: 90px;z-index: 1;opacity: 0;overflow: hidden;visibility: hidden;-webkit-transition: all 0.3s;transition: all 0.3s}

header aside nav {
	margin-top: 128px;
	padding-top: 50px;
	padding-left: 50px;
	position: relative;
	font-size: 34px;
	height:100%;
}

header aside nav>ul {
	height: calc(100% - 176px);
	overflow-y: scroll;
}

/* header aside nav:before {content: "";width: 70px;height: 4px;background: #333;display: block;position: absolute;top: 0;} */

header aside nav>ul>li>a {padding: .5em 0;display: block;border-bottom: 1px solid #ccc;font-weight: 500;position: relative}
header aside nav ul ul {font-size: 20px;border-bottom: 1px solid #ccc;display: none}
header aside nav ul ul>li>a {padding:.5em 0;border-bottom: 1px solid #ccc;display:block;position:relative;;;}
header aside nav ul ul>li:last-child>a {border-bottom:0;}
header aside nav ul ul ul {display:none;font-size:16px;}
header aside nav ul ul ul>li>a {padding:.75em 1em;border-bottom: 1px solid #ccc;display:block;position:relative;}
header aside nav .active>ul {display: block}
header aside nav .has-sub>a:after {content: "\F282";font-family: bootstrap-icons !important;font-weight: bold;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width:2rem;text-align:center;;}
.mobile-top-gnb {display: none}



::-webkit-scrollbar {
	width: 32px;
}

::-webkit-scrollbar-track {
	;
}

::-webkit-scrollbar-thumb {
	background: #ddd;
	background-clip: padding-box;
	border: 8px solid transparent;
	border-radius: 16px;
}


/* footer */

/* index */
/* .body-main #wrap {background: url(../img/bg_body.png) no-repeat 50% 100%;background-attachment: fixed} */
/* 260102 수정됨*/
#content.main video {
		position: fixed; left:0;top:0;
        min-width: 100%; min-height: 100%;
        width: auto; height: 100%; z-index:1;
        background: url('../img/bg_body.png') no-repeat;
        background-size: cover;
}

/* sub */
.sub-top {border-bottom: 1px solid #d4d4d4;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); position: fixed;width: 100%;top: 0; z-index: 3;background: #fff;}
.sub-top h1 {font-size: 1.291rem;font-weight: 600;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;text-align: center;max-width: 70%}
.sub-top .go-back {font-size: 1.5rem;-ms-flex-preferred-size: 15%;flex-basis: 15%;max-width: 15%;text-align: left;text-indent: -3px}
.sub-top .go-back i:before {font-weight: bold !important}
.sub-top .set {position: absolute;right: 0;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%)}
.sub-top .set a {color: #016aff;font-size: .875rem}
.sub-top .set img {max-width: 1.291rem;display: block;}
.sub-top-inner {display: -webkit-box;display: -ms-flexbox;display: flex;webkit-box-align: center;-ms-flex-align: center;-webkit-box-align: center;align-items: center;height: 3.333rem;width: 100%;position: relative}
.sub-content {padding: 50px 0;overflow-x: hidden}
.sub-content h2 {font-size: 1.291rem;font-weight: bold;margin: .5em 0}
.sub-content h3 {font-size: 1.041rem;font-weight: bold;margin: .5em 0}

.sub-content .container {
	margin: 0 256px;
	max-width: inherit
}

.slick-slide img {width: 100%;}

/* goods */
.goods-sort {
	margin-bottom: 32px;
	position: relative;
	overflow: hidden;
}

.goods-sort ul {font-size: 0}

.goods-sort ul+ul {
	margin: 32px 0 0 8px;
    float: left;
}

.goods-sort li {
	display: inline-block;
	font-size: 18px;
	vertical-align: middle;
	margin-right: 16px;
}

.goods-sort-cate {
	display: flex;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 8px 16px;
    margin-top: 16px;
	font-size: 16px;
    color: #413f3f;
}

.goods-sort ul+ul li {color: #777;margin-top: 2px;margin-bottom: 2px;}
.goods-sort ul+ul li .active {padding-left: 20px;background: url(../img/icon_check.gif) no-repeat 0 50%;color: #222}
.goods-sort ul+ul li a {padding-right: 10px;border-right: 1px solid #e5e5e5;}
.goods-sort ul+ul li:last-child a {border: 0}
.goods-sort .type-change {position: absolute;right: 0;bottom: 0;}
.goods-sort .type-change .btn {font-size: 0}
.goods-list {margin-left: -25px;margin-right: -25px;}
.goods-list:after {content: "";display: table;width: 100%;clear: both}
.goods-list li {width: 25%;float: left;padding: 0 25px;margin-bottom: 25px;}
.goods-list li:nth-child(4n+1) {clear:left}
.goods-list li .thumb {cursor: pointer;position: relative}

.goods-list li .thumb i {
	font-size: 0;
	position: absolute;
	right: 8px;
	top: 8px;
}

.goods-list li .thumb i img {margin-left: 5px; height: 22px;}

.goods-list li .thumb span {
	display: block;
	border-radius: 16px;
	padding-top: 100%;
	overflow: hidden;
	position: relative;
}

.goods-list li .thumb span img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;-o-object-fit: cover;object-fit: cover}
.goods-list li .thumb span img.hover {display: none}
.goods-list li .thumb span img.eye {display: none}
.goods-list li .thumb span:hover img  {display: none}
.goods-list li .thumb span:hover .hover {display: block}

.goods-list li .info {
	padding: 0 8px;
	margin-top: 1em;
}

.goods-list li .info strong {
	font-size: 18px;
	display: block;
	font-weight: normal;
	margin-bottom: .25rem;
}

.goods-list li .info .desc {
	font-size: 14px;
	line-height: 22px;
	color: #adadad;
	margin: .25rem 0;
}

.goods-list li .info .price {
	font-size: 18px;
	font-weight: bold;
}

.goods-list.eye li .thumb span img {display: none;}
.goods-list.eye li .thumb span img.eye {display: block;}
.goods-list.eye li .thumb span img.hover {display: none;}
.goods-list.eye li .thumb span:hover img:not(.hover):not(.eye) {display:block;}
.goods-list.eye li .thumb span:hover img.eye {display: none;}
.goods-list.thumb li .thumb span img:not(.hover) {display: block;}
.goods-list.thumb li .thumb span img.eye {display: none}

.goods-detail {
	max-width: 1000px;
	margin: 0 auto
}

.goods-detail .detail-top {display: table;width: 100%;}

.goods-detail .left {
	display: table-cell;
	vertical-align: top;
}

.goods-detail .right {
	display: table-cell;
    padding: 0 32px;
}

.detail_info {
	font-size: 16px;
    font-weight: normal;
}

.detail_info_items {
	display: flex;
    margin-top: 8px;
}

.detail_info_left {
	width: 30%;
    color: #adadad;
}

.detail_info_right {
	width: 70%;
}

.goods-detail .big-thumb {max-width: 470px;margin: 0 auto}

.goods-detail .big-thumb span {
	display: block;
	padding-top: 100%;
	position: relative
}

.goods-detail .big-thumb img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover}
.goods-detail .thumb-list {max-width: 470px;margin: 0 auto;text-align: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center}
.goods-detail .thumb-list span {width: 75px;height: 75px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;overflow: hidden}
.goods-detail .thumb-list img {}
.goods-detail .right strong {
	font-size: 24px;
	font-weight: normal;
}

.goods-detail .right .desc {
	border-bottom: 1px solid #ddd;
    padding-bottom: 16px;
    font-size: 16px;
    line-height: 18px;
    color: #adadad;
}

.goods-detail .right .table {}
.goods-detail .right .table th, .goods-detail .right .table td {border: 0;padding: 5px 0;width: 50%;}
.goods-detail .right .table th {font-weight: normal;color: #aaa}
.goods-detail .right .table td {}
.goods-detail .right .table td s {opacity: .5}
.goods-detail .right .table td .price {color: #448ccb}
.goods-detail .right .info {padding: 1rem 0;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5}
.goods-detail .right .info ul {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;text-align: center}
.goods-detail .right .info span {display: block;color: #aaa}
.goods-detail .detail-cont {margin-top: 5%;text-align: center}
/* 260102 수정됨*/
.goods-detail .de-box .de-left, .goods-detail .de-box .de-right{
	text-align: left;
}

#ssch_frm {
}

#ssch_frm .frm_input {
	border-radius: 16px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    outline: 0;
}

#ssch_frm .btn_submit {
	padding: 16px;
    margin-left: 16px;
    border-radius: 16px;
    background: #fc7676;
    border: 0;
    color: #fff;
}

#ssch_frm div {
	margin-bottom: 16px;
	font-size: 18px;
}

#ssch_frm div:last-child {
	margin-bottom: 0;
	margin-left: 8px;
}

#ssch_frm strong {min-width: 80px;display: inline-block;}
#ssch_sort li a { margin:0 15px; border-radius:6px;    }
#ssch_sort li a.sanchor_on { background: #fff url(../img/icon_check.gif) no-repeat 0px center; padding-left: 17px;}

#ssch_frm:not(old) input[type=checkbox] + label {
	display: inline-block;
	padding-left: 28px;
	margin-left: 16px;
	background: url(../img/radio-buttons.png) no-repeat 0 -24px;
	line-height: 24px;
}

#ssch_frm:not(old) input[type=checkbox]:checked + label {background-position: 0 0;}
#ssch_frm:not(old) input[type=checkbox] {width: 28px;margin: 0;padding: 0;opacity: 0;position: absolute;}

/* board */
.board-list .tab-nav {
	margin: 32px 0;
	text-align: center;
}

[class^=board] h1 {
	margin-top: 32px;
	text-align: center;
}
.board-list.gallery ul.list {overflow: hidden;margin-left: -8px;margin-right: -8px;margin-top: -30px;}
.board-list.gallery ul.list li {width: 33.3333%;padding: 0 8px;float: left;margin-top: 30px;}

.board-list.gallery ul.list li .thumb {
	border-radius: 16px;
	box-shadow: 0 0 8px 0 rgb(252 118 118 / 15%);
	overflow: hidden;
	font-size: 0
}

.board-list.gallery ul.list li .info {
	padding: 0 8px;
	margin-top: 8px;
}

.board-list.gallery ul.list li .info strong {
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    display: block;
    font-weight: normal;
}

.board-list.gallery ul.list li .info .date {
	font-size: 12px;
}

.board-list.gallery ul.list li .info p {color: #888}

.board-view .board-top .title {
	margin-top: 8px;
    font-size: 18px;
	text-align: center;
}

.board-view .board-top .info {border-bottom: 1px solid #e5e5e5;padding: 1rem 0;font-size: .928rem}
.board-view .board-top .btns {overflow: hidden;padding: 1rem 0}
.board-view .board-top .btns .left {float: left}
.board-view .board-top .btns .right {float: right}
.board-view .board-cont {text-align: center;padding: 5% 0}
.board-view .share-icons {margin: 1rem 0;text-align: left}
.board-view .share-icons a {margin-right: 5px;}
.board-view .board-comment {margin-top: 5%;background: #f5f5f5;padding: 1rem;border: 1px solid #e5e5e5;}
.board-view .board-comment dt {margin-bottom: .5rem;}
.board-view .board-comment .no-list {text-align: center}

/* real */
.body-real {background: url(../img/real_bg.jpg) no-repeat 50% 0;}

/* celeb */
.body-celeb {background: url(../img/celeb_bg.jpg) no-repeat 50% 0;}

/* eye */
.body-eye {background: url(../img/eye_bg.jpg) no-repeat 50% 0;}

/* event */
.body-event {
	background: linear-gradient(to right, #fce2d8, #f9d8d8, #fff);
}

/* stylebook */
.body-stylebook {
	background: linear-gradient(to right, #fce2d8, #f9d8d8, #fff);
}
/*.body-stylebook .thumb span {padding-top: 75.4854%}*/

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;background:#4c4f6f;padding:5px 10px;color:#fff;text-decoration:none;vertical-align:middle}
.btn_b01:hover, .btn_b01:hover {background:#54598c}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:5px 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle;}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;background:#d13f4a;padding:5px 10px;color:#fff;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {background:#ff3746}


@media (max-width: 1400px) {
    body {min-width: inherit}
    .sub-content .container {margin: 0 200px;}
    header .top-nav {left: 15px}
	
    header .top-nav img {
		max-width: 50px
	}
	
    header .left-nav {left: 15px;top: 150px}
    header .left-nav img {max-width: 120px}
	
    header .right-nav {
		;
	}
	
    header .right-nav img {
		max-width: 40px
	}
	
    header .right-nav li:first-child img {max-width: 50px}

    .goods-list {margin-left: -10px;margin-right: -10px;}
    .goods-list li {padding: 0 10px}
}
@media (max-width: 1100px) {
    .body-main #wrap {background: url(../img/bg_body.png) no-repeat 50% 100% / cover;background-attachment: fixed}
    /*#content.main video {display: none;} 260102 수정됨*/
    .sub-content .container {margin: 0 auto}
	
    header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 16px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 0 8px 0 rgb(0 0 0 / 15%);
	}
	
    header .container {padding: 0;}
	
    header .top-nav {
		position: relative;
		margin-right: 60%;
		left: 16px;
		top: 0;
		text-align: left;
	}
	
	header .top-nav a {
		display: block;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
	}
	
    header .top-nav img {
		;
	}
	
    header .left-nav {display: none}
	
    header .right-nav {
		position: absolute;
		top: 0;
		right: 16px;
	}

    header .right-nav ul {
		display: flex;
	}

    header .right-nav li {
		display: block;
		top: 0;
		right: 0;
		margin: 15px;
		width: auto;
	}
	
    header .right-nav li:first-child {
		;
	}
	
	header .right-nav a {
		display: block;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
	}
	
    header .right-nav li:first-child img {
		;
	}
	
    header .right-nav li img {
		width: 48px;
		max-width: inherit;
	}
	
    header aside {width: 100%;left: -100%; top: 0;text-align: left}
    header aside .btn {width: 40px;height: 40px;top: 15px;right: -1px;left: auto;z-index: 50;}
    header aside nav {margin-top: 80px;padding-left: 15px;padding-top: 30px;font-size: 1.25rem;height: 100%;overflow-y: auto}
    header aside nav .has-sub>a:after {left: auto;right: 15px}
    header aside nav>ul {height:calc(100% - 80px);}
    header aside nav ul ul {font-size: 15px}
    header aside nav ul ul ul {font-size: 13px}
	
    .mobile-top-gnb {
		;
	}
	
    .mobile-top-gnb ul {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between}
	
    .sub-content {
		padding-top: 128px;
		/* padding-top: calc(20vw + 67px) */
	}
	
    .sub-content .container {
		padding: 0 32px;
		margin: 0;
	}

    .goods-sort ul+ul {float: none}
	
    .goods-sort .type-change {
		float: none;
		clear: both;
		text-align: right;
		margin-top: 15px;
	}

    /* board */
    [class^=board] h1  {font-size: 1.75rem;margin-top: 0;}
    .body-stylebook {background: none;}
    .body-stylebook [class^=board] h1 {color: ;}
	
    .body-event {
		background: none;
	}
	
    .body-event [class^=board] h1 {color: #f4416b}
    .body-eye {background: none;}
    .body-eye [class^=board] h1 {color: #63a9e0}
    .body-celeb {background: none;}
    .body-celeb [class^=board] h1 {color: #fdb04c}
    .body-real {background: none;}
    .body-real [class^=board] h1 {color: #f98ba2}
}
@media (max-width: 575px) {
    html {font-size: 13px}
    .sub-content .container {margin: 0;}
    .goods-sort li {}
    .goods-sort ul+ul li {margin-right: 5px;padding-right: 5px;font-size: .875rem;line-height: 1.5}
    .goods-sort .type-change img {max-width: 90px}
    .goods-list li {width: 50%;}
    .goods-list li .info strong {font-size: 1.062rem;}
    .goods-list li:nth-child(odd) {clear:left}
    #ssch_frm {padding: 20px;}
    #ssch_frm strong {display: block;margin-bottom: 5px;}
    #ssch_frm .ssch_lbl {width: 100%}
    #ssch_frm .frm_input {max-width: 70%}

    .goods-detail .detail-top {display: block}
    .goods-detail .left {display: block;width: auto;}
    .goods-detail .right {display: block;width: auto;padding: 5% 0 0}
    .goods-detail .thumb-list span {width: 75px;height: 75px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;overflow: hidden}
    .goods-detail .thumb-list img {}
    .goods-detail .right strong {font-size: 1.5rem;font-weight: normal;}
    .goods-detail .right .desc {padding: 1em 0;margin-bottom: 1em;border-bottom: 1px solid #e5e5e5;font-size: 1.071rem;color: #666}
    .goods-detail .right .table {}
    .goods-detail .right .table th, .goods-detail .right .table td {border: 0;padding: 5px 0;width: 50%;}
    .goods-detail .right .table th {font-weight: normal;color: #aaa}
    .goods-detail .right .table td {}
    .goods-detail .right .table td s {opacity: .5}
    .goods-detail .right .table td .price {color: #448ccb}
    .goods-detail .right .info {padding: 1rem 0;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5}
    .goods-detail .right .info ul {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;text-align: center}
    .goods-detail .right .info span {display: block;color: #aaa}
    .goods-detail .detail-cont {margin-top: 5%;text-align: center}

    /* board */
    .board-list.gallery ul.list {margin-top: -15px;}
    .board-list.gallery ul.list li {width: 100%;margin-top: 15px;}
    .board-list.gallery ul.list li .thumb {overflow: hidden;font-size: 0}
    .board-list.gallery ul.list li .thumb img {width: 100%}
    .board-list.gallery ul.list li .info {margin-top: .5rem;}
	
    .board-list.gallery ul.list li .info strong {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
    .board-list.gallery ul.list li .info p {overflow: hidden;white-space: nowrap;text-overflow: ellipsis}

}

@media (min-width: 576px) {
    .sub-content .container { width: auto}
}