/*=================================================
		공통
=================================================*/

/*****#####===== 폰트종류 =====#####*****/
body{
	font-family: "Nanum Gothic", "Raleway", sans-serif;
}

/*영문*/
.font-rw{
	font-family: 'Raleway', sans-serif;
}

/*국문*/
.font-gd{
	font-family: 'Nanum Gothic', sans-serif;
}

.font-nt{
	font-family: "notokr", sans-serif;
}

/*****#####===== 폰트사이즈 =====#####*****/
.txt-h1{
	font-size: 48px;
}

.txt-h2{
	font-size: 36px;
}

.txt-h3{
	font-size: 24px;
}

.txt-h4{
	font-size: 20px;
}

.txt-h5{
	font-size: 18px;
}

.txt-h6{
	font-size: 16px;
}

.txt-h7{
	font-size: 15px;
}

/*****#####===== 페이지 =====#####*****/
.page-content-wrap{
	padding: 6% 0 0;
}

#home-home-page.page-content-wrap{
	padding-top: 0;
}

.page-title{
	font-family: 'Open Sans', sans-serif;
	font-size: 2.7rem;
	font-weight: 800;
	letter-spacing: -1.5px;
}

.page-title-line{
	width: 100%;
	height: 9px;
	padding: 2rem 0 1rem;

	background-position: center;
	background-image: url('/img/page/title-line.png');
	background-repeat: repeat-x;
}

.page-subtitle{
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 2;
}

.page-desc{
	font-size: 1rem;
}

/*****#####===== 페이지네이션 =====#####*****/
.pagination-wrap{
    padding: 3% 0 11%;
}

.pagination {
    justify-content: center!important;
}

.page-item.active .page-link {
    background-color: #585858;
    border-color: #585858;
}

.page-link {
    color: #585858;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1200px){
	/* 폰트사이즈 */
	.txt-h1{
		font-size: 48px;
	}

	.txt-h2{
		font-size: 36px;
	}

	.txt-h3{
		font-size: 18px;
	}

	.txt-h4{
		font-size: 20px;
	}

	.txt-h5{
		font-size: 12px;
	}

	.txt-h6{
		font-size: 16px;
	}

	.txt-h7{
		font-size: 15px;
	}
}

/***** md *****/
@media (min-width: 768px) and (max-width: 991px){
	/* 폰트사이즈 */
	.txt-h1{
		font-size: 48px;
	}

	.txt-h2{
		font-size: 36px;
	}

	.txt-h3{
		font-size: 18px;
	}

	.txt-h4{
		font-size: 20px;
	}

	.txt-h5{
		font-size: 12px;
	}

	.txt-h6{
		font-size: 15px;
	}

	.txt-h7{
		font-size: 13px;
	}
}

/***** sm *****/
@media (min-width: 554px) and (max-width: 767px){
	/* 폰트사이즈 */
	.txt-h1{
		font-size: 48px;
	}

	.txt-h2{
		font-size: 36px;
	}

	.txt-h3{
		font-size: 18px;
	}

	.txt-h4{
		font-size: 20px;
	}

	.txt-h5{
		font-size: 12px;
	}

	.txt-h6{
		font-size: 16px;
	}

	.txt-h7{
		font-size: 13px;
	}
}

/***** xs *****/
@media (max-width: 553px){
	/* 폰트사이즈 */
	.txt-h1{
		font-size: 30px;
	}

	.txt-h2{
		font-size: 26px;
	}

	.txt-h3{
		font-size: 14px;
	}

	.txt-h4{
		font-size: 17px;
	}

	.txt-h5{
		font-size: 11px;
	}

	.txt-h6{
		font-size: 13px;
	}

	.txt-h7{
		font-size: 10px;
	}

	/* 페이지 */
	.page-content-wrap{
		padding: 10% 0 0;
	}

	/* 페이지네이션 */
	.page-item .page-link {
	    padding: 5px 10px;
	}
}

/*=================================================
		로딩 레이어
=================================================*/
.loading-layer,
.modal-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 50px;
    z-index: 10000;
    background-color: #cea052;
}

.loading-layer .symbol{
	font-size: 60px;
	font-weight: 700;
	line-height: -2px;
	color: #FFFFFF;

	-webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*=================================================
		네비게이션
=================================================*/
/*****#####===== 메인 네비게이션 상단 로고 크기 변경 =====#####*****/
.nav-box .top-logo img{
	height: 100px;
}

/*****#####===== 메인 네비게이션 =====#####*****/
.nav-box{
    position: absolute;
    padding: 30px 0 0;
    width: 100%;
    background-image: url('/img/nav-bg.png');
    z-index: 10;
}

.nav-box .navbar{
	padding: .5rem 0 .5rem 0;
	background-image: url('/img/nav-bg.png');
}

.nav-box .top-logo.page{
	display: none;
}

.nav-box .navbar.float,
.nav-box .navbar.page{
	position: fixed;
    top: 0;
	width: 100%;
	min-height: 55px;
    z-index: 99;
}

#main-gnb .float-logo{
	display: none;
}

#main-gnb.float .float-logo,
#main-gnb.page .float-logo{
    display: block;
    position: absolute;
    bottom: 20px;
    left: 55px;
}

#main-gnb .nav-list>li{
    display: inline-block;
    margin: 0;
    padding: 21px 0 10px;
    width: 185px;
    text-align: center;
    vertical-align: top;
}

#main-gnb.float .nav-list>li,
#main-gnb.page .nav-list>li{
    padding: 20px 0 15px;
}

#main-gnb .nav-list>li>a{
	display: inline-block;
	padding: 2px;
	color: #FFFFFF;
	font-size: 16px;
}

#main-gnb .nav-list>li>a.active,
#main-gnb .nav-list>li>a:hover,
.sub-menu-list-wrap>ul>li ul>li>a.active>span,
.sub-menu-list-wrap>ul>li ul>li>a>span:hover{
	color: #cea052;

}

#main-gnb .nav-list .d-flex{
	padding-left: 62px;
}

#main-gnb .shop-link img {
	height: 60px;
}

/*****#####===== 메인 네비게이션-모바일 =====#####*****/
#m-main-gnb{
	position: fixed;
    top: 0;
	width: 100%;
	min-height: 45px;
	 background-image: url('/img/nav-bg.png');
    z-index: 200;
}

.navbar-brand{
	padding: 5px 10px;
}

.navbar-brand img{
	height: 20px;
}

.m-navbar .navbar-toggler-right {
    right: 0rem;
}

.m-navbar i:before {
    font-size: 35px;
    color: #fff;
}

#m-navbar .navbar-nav ul{
	padding: 0;
}

#m-navbar .navbar-nav ul>li>.m-nav-title,
#m-navbar .navbar-nav ul>li>a{
    display: inline-block;
    padding: 5px 0;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
}

#m-navbar .navbar-nav ul>li>.m-nav-title{
	padding: 15px 0;
}

#m-navbar .navbar-nav ul>li>.m-nav-title.active,
#m-navbar .navbar-nav ul>li>a.active{
    color: #cea052;
}

#m-navbar .navbar-nav ul>li>ul>li>.m-nav-title>span,
#m-navbar .navbar-nav ul>li>ul>li>a>span{
	font-weight: 300;
	color: #C6C6C6;
}

#m-navbar .navbar-nav ul>li>ul>li.active>.m-nav-title>span,
#m-navbar .navbar-nav ul>li>ul>li.active>a>span{
	font-weight: 600;
	color: #FFFFFF
}

#m-navbar .navbar-nav ul>li>ul.detail-list{
	height: 0;
    overflow: hidden;
}

#m-navbar .navbar-nav ul>li>ul.detail-list.active{
    padding: 15px 0;
    background-color: #151211;
    height: 100%;

   -webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*****#####===== 전체 서브네비게이션 =====#####*****/
/*****##### 전체 서브네비게이션에 들어가는 모든 ul #####*****/
.allsub-menu-list-wrap ul{
	z-index: -1;
	list-style: none;
	padding: 0;
    width: 100%;
}

/*****##### 전체 서브네비게이션의 최상단 ul #####*****/
.allsub-menu-list-wrap>ul{
    margin: 10px 0 20px;
	text-align: center;
}

.allsub-menu-list-wrap>ul>li{
	display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 185px;
}

.allsub-menu-list-wrap>ul>li ul.allsub-nav>li{
    padding: 0 0 5px;
	text-align: center;
}

.allsub-menu-list-wrap>ul>li ul>li>a>span{
	color: #ffffff;
	font-size: 15px;
}

.allsub-menu-list-wrap {
    position: absolute;
    top: 177%;
    left: 0;
    width: 100%;
    z-index: -1;
	background-color: rgba(0,0,0,0.8);
	opacity:0;
    -ms-transform: translateY(-150%);
	-webkit-transform: translateY(-150%);
    transform: translateY(-150%);

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.allsub-menu-list-wrap.active {
	margin-top:19px;
	opacity:1;

    -ms-transform: translateY(-55%);
	-webkit-transform: translateY(-55%);
    transform: translateY(-55%);
}

.allsub-menu-list-wrap>ul>li>ul.sub-menu{
	list-style: none;
    padding: 0;
    display: none;
}

/*****##### 1depth ul #####*****/
.sub-nav {
	display: none;
}

.sub-nav.active {
	display: block;
}

.sub-nav.active li {
	display: inline-block;
}

/*****##### shop 링크이동 버튼 #####*****/
.shop-link {
    position: absolute;
    right: 50px;
    bottom: 5px;

}

/*****#####===== 서브네비게이션 =====#####*****/
#main-gnb .dropdown-menu{
	left: 50%;
    width: 100%;
    height: 60px;
    margin: 0 auto;

    border: none;
	box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.03);

    justify-content: center;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	z-index: -1;
}

#main-gnb .dropdown-menu.active{
	display: block;
}

#main-gnb .dropdown-menu>li>a{
    display: inline-block;
    padding: 0 0 10px;
    width: 190px;
    border-bottom: 3px solid transparent;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
}

#main-gnb .dropdown-menu>li>a:hover,
#main-gnb .dropdown-menu>li.active>a,
#main-gnb .dropdown-menu>li>a.active{
	border-bottom: 3px solid #493a38;
}

#main-gnb .dropdown-menu>li>a>span>img{
	height: 40px;
}

#main-gnb .dropdown-menu .cate5{
	height: 20px;
	margin-bottom: 12px;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 992px) and (max-width: 1199px){
	/* 메인 네비게이션 */
	#main-gnb .nav-list>li {
		margin: 0;
	    width: 135px;
	}

	#main-gnb .nav-list>li>a {
	    font-size: 14px;
	}

	/* 전체 서브네비게이션의 최상단 ul */
	.allsub-menu-list-wrap>ul>li {
	    width: 135px;
	    padding: 0;
	}

	/* shop 링크이동 버튼 */
	.shop-link a img{
	    height: 50px;
	}

}

/***** sm *****/
@media (min-width: 768px) and (max-width: 991px){
	/* 메인 네비게이션 */
	#main-gnb .nav-list>li {
		margin: 0;
	    width: 120px;
	}

	#main-gnb .nav-list>li>a {
	    font-size: 14px;
	}
	/* 서브네비게이션 */
	#main-gnb .dropdown-menu {
	    height: 50px;
	}

	#main-gnb .dropdown-menu>li>a {
	    padding: 0 0 4px;
    	width: 120px;
	    font-size: 15px;
	    line-height: 30px;
	}

	#main-gnb .dropdown-menu>li>a>span>img {
	    height: 35px;
	}

	/* 전체 서브네비게이션의 최상단 ul */
	.allsub-menu-list-wrap>ul>li {
	    width: 125px;
	}

	.allsub-menu-list-wrap>ul>li ul>li>a>span {
	    font-size: 13px;
	}

	/* shop 링크이동 버튼 */
	.shop-link {
	    right: 20px;
	    top: 18px;
	}

	.shop-link.float {
	    top: 15px;
	}

	#main-gnb .shop-link a img{
	    height: 45px;
	}
}

/***** xs *****/
@media (max-width: 767px){


}

/*=================================================
		페이지
=================================================*/
/*****#####===== 섹션 =====#####*****/
.section-padding{
	padding: 4% 0;
}

/*****##### 섹션타이틀 #####*****/
.section-title-wrap .txt-title,
.pagetitle .txt-title{
    padding: 0 15px 0 0;
	font-size: 60px;
}

.section-title-wrap .img-title img,
.pagetitle .img-title img{
    height: 47px;
    vertical-align: inherit;
}

/*****##### 페이지타이틀 #####*****/
.pagetitle{
	padding: 5.5% 0 3%;
}

.pagetitle .title{
	font-size: 60px;
	letter-spacing: -1.2px;
	color: #000000;
}

.pagetitle .subtitle{
	font-size: 18px;
	letter-spacing: -0.4px;
	color: #333333;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1200px){
	/* 섹션타이틀 */
	.section-title-wrap .txt-title,
	.pagetitle .txt-title{
	    font-size: 35px;
	}

	.section-title-wrap .img-title img,
	.pagetitle .img-title img{
	    height: 28px;
	}
}

/***** md *****/
@media (min-width: 768px) and (max-width: 991px){
	/* 섹션타이틀 */
	.section-title-wrap .txt-title,
	.pagetitle .txt-title{
	    padding: 0 10px 0 0;
	    font-size: 30px;
	}

	.section-title-wrap .img-title img,
	.pagetitle .img-title img{
	    height: 28px;
	}
}

/***** sm *****/
@media (min-width: 554px) and (max-width: 767px){
	/* 섹션타이틀 */
	.section-title-wrap,
	.pagetitle{
		padding: 0 0 30px;
	}

	.section-title-wrap .txt-title,
	.pagetitle .txt-title{
	    padding: 0 10px 0 0;
	    font-size: 30px;
	}

	.section-title-wrap .img-title img,
	.pagetitle .img-title img{
	    height: 28px;
	}
}

/***** xs *****/
@media (max-width: 553px){
	.pagetitle {
	    padding: 9% 0 3%;
	}

	/* 섹션타이틀 */
	.section-title-wrap .txt-title,
	.pagetitle .txt-title,
	.pagetitle .title{
	    padding: 0;
	    font-size: 30px;
	}

	.section-title-wrap .img-title img,
	.pagetitle .img-title img{
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	    height: 20px;
	}

	.section-title-wrap .subtitle,
	.pagetitle .subtitle{
	    padding: 0 0 15px;
    	font-size: 11px;
	}
}


/*=================================================
		푸터
=================================================*/
footer{
    padding: 35px 0 0;
	background-color: #161310;
	font-family: "notokr", sans-serif;
	color: #FFFFFF;
}

ul.vertical-divide > li > span{
    padding: 5px 15px 10px 15px;
}

footer ul.vertical-divide > li+li:before {
    margin-top: 5px;
    height: 15px;
    border-left: 1px solid #717171;
    border-right: 1px solid #777777;
}

footer ul.vertical-divide > li > div,
footer ul.vertical-divide > li > span{
    font-size: 14px;
    letter-spacing: -1px;
}

footer .logo-wrap{
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #404040;
}

footer .company-info{
    line-height: 0.9;
}

footer .footer-logo{
	padding: 0 0 20px 20px;
}

footer .copyright{
	margin: 35px 0 0;
    padding: 10px 0;
    background-color: #000000;
    font-size: 13px;
    color: #aaaaaa;
}

footer .copyright small{
	padding: 0 0 0 15px;
}

/*****#####===== nav-footer-list =====#####*****/
footer .nav-footer-list{
	padding: 40px 0 0;
}

footer .nav-footer-list .footer-list,
footer .nav-footer-list .footer-inner-list{
	padding: 0;
	list-style: none;
	font-family: 'Raleway', sans-serif;
}

footer .list-title{
	padding: 0 0 5px;
	font-weight: 300;
	font-size: 16px;
}

footer .nav-footer-list .footer-list>li{
	position: relative;
	display: inline-block;
	padding: 0 0 0 25px;
    vertical-align: top;
}

footer .nav-footer-list .footer-list>li:before{
	content:"";
	position: absolute;
	top: 0;
	right: -13px;
	width: 1px;
	height: 123px;
	background-color: #585858;
}

footer .nav-footer-list .footer-list>li:last-child:before{
	display: none;
}

footer .nav-footer-list .footer-inner-list>li>a{
	font-size: 14px;
	color: #aaaaaa;
}




/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 992px) and (max-width: 1199px){

}

/***** sm *****/
@media (min-width: 768px) and (max-width: 991px){
	footer ul.vertical-divide > li > div,
	footer ul.vertical-divide > li > span {
	    padding: 3px;
	    font-size: 10px;
	}

	footer ul.vertical-divide > li+li:before {
	    margin-top: 2px;
	    margin-left: 1px;
	    height: 11px;
	    border-left: 1px solid #717171;
	    border-right: none;
	}

	footer .list-title {
	    font-size: 12px;
	}

	footer .nav-footer-list .footer-list>li {
	    padding: 0 0 0 5px;
	}

	footer .nav-footer-list .footer-list>li:before {
	    right: -5px;
	}

	footer .nav-footer-list .footer-inner-list>li>a {
	    font-size: 12px;
	}


}

/***** xs *****/
@media (max-width: 767px){
	footer{
		padding: 15px 0 0;
		text-align: center;
	}

	footer .container{
		padding-left: 10px;
		padding-right: 10px;
	}

	footer .footer-logo {
	    padding: 0 0 10px 0;
	}

	footer .footer-logo img{
		height: 75px;
	}

	footer ul.vertical-divide > li{
	    float: inherit;
	}

	footer ul.vertical-divide > li+li:before {
	    margin-top: 4px;
	    margin-left: -1px;
	    height: 11px;
	    border-right: none;
	}

	ul.vertical-divide > li > span {
	    padding: 5px;
	}

	footer ul.vertical-divide > li > div,
	footer ul.vertical-divide > li > span {
	    font-size: 11px;
	}

	/* nav-footer-list */
	footer .nav-footer-list{
		display: none;
	}

	footer .copyright {
	    margin: 15px 0 0;
	    font-size: 10px;
	}

	footer .copyright small {
	    padding: 0;
	}
}

/*=================================================
	 고객센터 topbanner
=================================================*/


/*=================================================
		텍스트
=================================================*/
/*****#####===== word-break =====#####*****/
.word-break{
	word-wrap: break-word;
	word-break: keep-all;
}



/*=================================================
			테이블
=================================================*/
.fixed-table{
	table-layout: fixed;
}

/*****#####===== 반응형 테이블 =====#####*****/
/***** xs *****/
@media (max-width: 767px){
	.responsive-table,
	.responsive-table tbody,
	.responsive-table tr,
	.responsive-table th,
	.responsive-table td{
		position: relative;
		display: block;
		width: 100% !important;
	}
}


/*=================================================
			주문 테이블
=================================================*/
.order-table{

}

.order-table .option-alert{
	margin: 0.3rem 0;
	padding: 0.2rem 0.7rem;

	border: 1px solid #DDDDDD;
	background-color: #FBFBFB;
}