/* BASIC css start */
.xans-product-menupackage { margin:0 0 27px; }

.xans-product-menupackage .titleArea > h2{vertical-align:middle;}

.xans-product-menupackage .likeButton { display:inline-block; vertical-align:middle; }
.xans-product-menupackage .likeButton button { margin:0 0 0 10px; height:16px; color:#9a9a9a; letter-spacing:-1px; background:none; }
.xans-product-menupackage .likeButton.selected button { color:#353535; }
.xans-product-menupackage .likeButton button img{max-height:16px;margin-right: 3px;}

.xans-product-menupackage .menuCategory.menu{font-size:0; line-height:0; }
.xans-product-menupackage .menuCategory.menu > li,
.xans-product-menupackage .menuCategory.menu > li > a{padding:0;margin:0;}
.xans-product-menupackage .menuCategory.menu > li { display:inline-block;vertical-align:top;  border:1px solid #ddd; }
.xans-product-menupackage .menuCategory.menu > li > a { color:#777; text-align: left; }
.xans-product-menupackage .menuCategory.menu > li.selected > a { color:#222; font-weight:bold;}
.xans-product-menupackage .menuCategory.menu > li .count { font-weight:normal; }

.xans-product-menupackage .banner { margin:20px 0;text-align:center; }
.xans-product-menupackage .banner img { max-width: 100%; }




/********************* PC *********************/
@media all and (min-width:1025px) {
   .xans-product-menupackage .gInner {margin: 0 24px;}

	.xans-product-menupackage .menuCategory.menu{width: 100%;flex-wrap: wrap;z-index: 10;}
	.xans-product-menupackage .menuCategory.menu > li,
	.xans-product-menupackage .menuCategory.menu > li > a.button{height:38px;line-height:38px; transition: all .25s ease; font-size:14px; }
	.xans-product-menupackage .menuCategory.menu > li { width: calc(16.66% - 9px); margin-left: 10px; max-width: 16.66%; margin-bottom: 9px; }
	.xans-product-menupackage .menuCategory.menu > li:nth-child(6n+1){margin-left:0;}
	.xans-product-menupackage .menuCategory.menu > li:hover{border:1px solid #222; }
	.xans-product-menupackage .menuCategory.menu > li > a.button{padding-left:8px;display:block;overflow:hidden;white-space:nowrap; text-overflow:ellipsis; padding-right: 20px;}
	.xans-product-menupackage .menuCategory.menu > li > a.button:hover { text-decoration:none; background-position:100% -95px;  }
	.xans-product-menupackage .menuCategory.menu > li:hover > a.button{color:#222; }
	.xans-product-menupackage .menuCategory.menu > li > a.iconWrap {vertical-align: middle; position: absolute; top: 18px; right: 0;}
	.xans-product-menupackage .menuCategory.menu > li > a.iconWrap:after{top: -3px;}

	.xans-product-menupackage .menuCategory.menu > li > ul {background: #f5f5f5; z-index: 1;display:block;top: 42px; right: -1px; left: -1px; border: 0px solid #222; padding:5px 0; opacity:0;visibility: hidden;transition: all .25s ease; border-radius:5px;}
	.xans-product-menupackage .menuCategory.menu > li:hover > ul{visibility: visible; opacity:1;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li {padding:0; padding-right:20px;position: relative;white-space: normal; height:auto;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li:hover{background:#f5f5f5;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li > a { color:#777; padding:5px 10px; font-size:13px; display:block; text-align:left; line-height: 1.5;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li > a:hover,
	.xans-product-menupackage .menuCategory.menu > li > ul > li.selected > a { color:#222; }
	.xans-product-menupackage .menuCategory.menu > li > ul > li > a.iconWrap { position: absolute; top: 0; right: 0;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li > a.iconWrap:after{right:15px; top:10px;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li .button{display:block;margin:0;padding:0;}

	.xans-product-menupackage .menuCategory.menu .subCategory { display: none;position: absolute;right: 0;top: 0;z-index: 11;width: 150px;padding: 5px 0;border: 1px solid #222;font-size: 0;line-height: 0;}
	.xans-product-menupackage .menuCategory.menu > li > ul > li:hover .subCategory { display:block; }
	.xans-product-menupackage .menuCategory.menu .subCategory li { font-size:13px; line-height:14px; vertical-align:top; height:auto;padding:0;white-space: normal; }
	.xans-product-menupackage .menuCategory.menu .subCategory li:hover{background:#f5f5f5;}
	.xans-product-menupackage .menuCategory.menu .subCategory li a { color:#777; display: block; text-align: left; padding: 5px 10px;line-height: 1.5; font-size:13px;}
	.xans-product-menupackage .menuCategory.menu .subCategory li a:hover,
	.xans-product-menupackage .menuCategory.menu .subCategory li.selected a { color:#222; }

}


/********************* Mobile *********************/
@media all and (max-width:1024px) {
    .xans-product-menupackage .gInner {margin: 0 16px;}

	.xans-product-menupackage .ec-base-tab.typeMenu{height:auto; margin:0;}
	.xans-product-menupackage .ec-base-tab.typeMenu .menu{height:2.5rem; position: relative;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none; }
    .xans-product-menupackage .ec-base-tab.typeMenu .menu::-webkit-scrollbar {display: none;}
	.xans-product-menupackage .menuCategory.menu{justify-content: flex-start;}
	.xans-product-menupackage .menuCategory.menu > li,
	.xans-product-menupackage .menuCategory.menu > li > a.btton{font-size:1rem;line-height: 2.4rem; height:2.4rem;}
	.xans-product-menupackage .menuCategory.menu > li{padding:0 .8rem; margin-left: 5px; }
	.xans-product-menupackage .menuCategory.menu > li:first-child{margin-left:0;}
	.xans-product-menupackage .menuCategory.menu > li > a{display:inline-block; font-size:.9rem;}
	.xans-product-menupackage .menuCategory.menu > li .iconWrap{height: 0; display: inline-block; vertical-align: middle; margin-left: 1rem;}
	.xans-product-menupackage .menuCategory.menu > li .iconWrap:after{top: -.4rem; right: 5px;width: 5px; height: 5px}

	.xans-product-menupackage .banner {margin: 0 -1.2rem; }
	.xans-product-menupackage .banner img:last-child{margin:0 0 2rem;}
}



.xans-product-normalmenu .function { overflow:hidden; text-align:right; margin:0 0 1rem;}
.xans-product-normalmenu .function .btnCompare { display:inline-block; padding:0 12px; border: 1px solid #ddd; margin-right: 5px;}
.xans-product-normalmenu .function .btnCompare:hover { text-decoration:none; }
.xans-product-normalmenu .prdCount { float:left; color:#7d7d7d; }
.xans-product-normalmenu .sort{display: inline-block;vertical-align: middle; float:right;}

.xans-product-normalmenu .compare {display: inline-block;vertical-align: middle;}
.xans-product-normalmenu fieldset { margin:20px 0 0; padding:10px 16px; text-align:right; background:#fbf9fa; }



/********************* PC *********************/
@media all and (min-width:1025px) {
    .xans-product-normalmenu { margin:50px 0 0; }
	.xans-product-normalmenu .function { line-height:38px; }
	.xans-product-normalmenu .prdCount {font-size: 15px; line-height:40px;}
}

/********************* Mobile  *********************/
@media all and (max-width:1024px) {
    .xans-product-normalmenu { margin:20px 0 0;}
	.xans-product-normalmenu .function{height:2.5rem; line-height:2.5rem;margin:0 0 1rem;}
	.xans-product-normalmenu .btnCompare,
	.xans-product-normalmenu .sort > select{height:2rem; line-height:1rem;font-size: 0.9rem; color: #888;}
	.xans-product-normalmenu .sort > select{padding: 0 30px 0 10px;}
	.xans-product-normalmenu .btnCompare{vertical-align: middle; margin-top: -2px;}
	.xans-product-normalmenu .prdCount{font-size:.9rem;}

}
/* BASIC css end */