body{background:#f5f5f5}
#wrap{background:#f5f5f5; padding-bottom:30px}
#wrap.bt{padding-bottom:160px}
#wrap.bg_w{background:#fff}


/*-------------------------------------------------------------------
	@ header
-------------------------------------------------------------------*/
header{position:relative; width:100%; height:186px; background:#00b5a6; text-align:center}
header h1{display:inline-block; padding-top:50px}
header h1 a{display:block; line-height:1}
header .btn_back{position:absolute; left:0; top:32px; width:74px; height:87px; background:url(../images/common/ico_arw_l_w.png) center no-repeat; text-indent:-9999em}
header .btn_close{position:absolute; right:0; top:16px; width:89px; height:89px; background:url(../images/common/ico_close.png) center no-repeat; text-indent:-9999em}
header .search_box{position:absolute; left:50%; top:136px; margin-left:-345px; width:690px; height:100px; text-align:left; border:2px solid #00b5a6; background:#fff; border-radius:20px; box-sizing:border-box; line-height:0; padding:10px; box-shadow:5px 5px #00b5a6}
header .search_box:after{content:''; display:block; clear:both}
header .search_box input[type=text]{float:left; width:600px; font-size:24px; font-weight:700; color:#38514f; line-height:76px; padding:0 20px; box-sizing:border-box}
header .search_box button{float:right; width:66px; height:76px; background:url(../images/common/ico_search.png) center no-repeat; text-indent:-9999em}
header .search_box input[type=text]::placeholder{font-weight:400; color:#999}


/*-------------------------------------------------------------------
	@ componets
------------------------------------------------------------------*/
/* tab_mn */
.tab_mn{height:67px}
.tab_mn ul{width:100%; background:#f5f5f5; z-index:11000}
.tab_mn ul:after{content:''; display:block; clear:both}
.tab_mn ul li{float:left; width:50%}
.tab_mn ul li a{position:relative; display:block; font-size:28px; line-height:65px; text-align:center; border-bottom:2px solid #ddd}
.tab_mn ul li a.on{font-weight:700; color:#00b5a6}
.tab_mn ul li a.on:after{position:absolute; left:0; bottom:-2px; width:100%; height:4px; background:#00b5a6; content:""}
.tab_mn.fix ul{position:fixed; left:50%; top:0; max-width:750px; margin-left:-375px}


/* ctg_mn */
.ctg_mn{position:relative; width:100%; height:162px}
.ctg_mn ul{display:flex; justify-content:space-between; padding:60px 0 30px; background:#f5f5f5; z-index:100}
.ctg_mn ul li{flex:1; margin-left:18px}
.ctg_mn ul li:first-child{margin-left:0}
.ctg_mn ul li a{display:block; font-size:26px; color:#38514f; line-height:68px; text-align:center; border:2px solid #38514f; border-radius:35px; background:#fff}
.ctg_mn ul li a.on{font-weight:700; color:#ff473e; border-color:#ff473e; box-shadow:3px 3px #ff473e}
.ctg_mn ul li a:before{vertical-align:middle; line-height:1.5; margin-right:10px}
.ctg_mn ul li a.ico1:before{content:url(../images/common/ico_ctg1.png)}
.ctg_mn ul li a.ico1.on:before{content:url(../images/common/ico_ctg1_on.png)}
.ctg_mn ul li a.ico2:before{content:url(../images/common/ico_ctg2.png)}
.ctg_mn ul li a.ico2.on:before{content:url(../images/common/ico_ctg2_on.png)}
.ctg_mn ul li a.ico3:before{content:url(../images/common/ico_ctg3.png)}
.ctg_mn ul li a.ico3.on:before{content:url(../images/common/ico_ctg3_on.png)}
.ctg_mn ul li a.ico4:before{content:url(../images/common/ico_ctg4.png)}
.ctg_mn ul li a.ico4.on:before{content:url(../images/common/ico_ctg4_on.png)}
.ctg_mn.fix ul{position:fixed; left:50%; top:67px; width:100%; max-width:750px; margin-left:-375px; padding-left:30px; padding-right:30px; box-sizing:border-box; box-shadow:0 8px 30px rgba(0,0,0,0); border-bottom:1px solid #ddd}


/* hashtag_box */
.hashtag_box{margin:60px 0 50px; text-align:center}
.hashtag_box ul{width:712px; height:148px; margin-left:-11px; overflow:hidden}
.hashtag_box ul:after{content:''; display:block; clear:both}
.hashtag_box ul li{float:left; width:156px; margin:0 11px 20px}
.hashtag_box ul li a{height:50px; display:block; font-size:22px; color:#38514f; line-height:50px; text-align:center; color:#999; border:2px solid #ddd; border-radius:25px; overflow:hidden}
.hashtag_box ul li a.on{font-weight:700; color:#ff473e; border-color:#ff473e; box-shadow:3px 3px #ff473e}
.hashtag_box .more{font-size:24px; font-weight:700; color:#38514f; background:none; margin-top:14px}
.hashtag_box .more:before{content:url(../images/common/ico_more_p.png); vertical-align:-5px; margin-right:7px}
.hashtag_box.all ul{height:auto}
.hashtag_box.all .more:before{content:url(../images/common/ico_more_m.png)}


/* goods_list */
.goods_list{padding-top:5px}
.goods_list li{position:relative; height:235px; border:2px solid #38514f; border-radius:30px; margin-top:30px; overflow:hidden; box-sizing:border-box}
.goods_list li:after{position:absolute; right:28px; top:50%; margin-top:-14px; content:url(../images/common/ico_arw_r.png)}
.goods_list li:first-child{margin-top:0}
.goods_list li a{position:relative; display:block; padding:10px 0}
.goods_list li a:before{position:absolute; left:0; top:0; width:100%; height:calc(100% - 10px); border-radius:30px; box-shadow:0 20px #dceeed; content:""}
.goods_list li a:after{content:''; display:block; clear:both}
.goods_list li .img{float:left; width:212px; text-align:center; padding-top:4px}
.goods_list li .img img{width:156px}
.goods_list li .info{float:left; width:410px; height:212px; display:flex; align-items:center; margin-left:5px}
.goods_list li .info .ctg{font-size:22px; color:#999; margin-bottom:10px}
.goods_list li .info .tit{height:60px; display:flex; align-items:center}
.goods_list li .info .tit strong{position:relative; font-family:'Binggrae'; font-size:29px}
.goods_list li .info .tit strong span{position:relative; z-index:10}
.goods_list li .info .tit strong:before{position:absolute; left:0; bottom:0; width:100%; height:16px; background:#fbf39d; content:""}
.goods_list li .info .tit img{margin:-25px 0 0 8px}
.goods_list li .info .option{font-size:20px; color:#999; margin:-3px 0 -5px}
.goods_list li .info p{line-height:36px; margin-top:-3px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:15px}



/*-------------------------------------------------------------------
	@ utilities
------------------------------------------------------------------*/
.t_c{text-align:center}
.pd_l25{padding-left:25px}



/*-------------------------------------------------------------------
	@ content
-------------------------------------------------------------------*/
#container{padding-top:90px}
.content{position:relative; padding:0 30px; z-index:1000}

/* search */
.search_result{font-size:28px; border-bottom:2px solid #ddd; padding:15px 55px 15px 55px; margin-bottom:35px}
.search_result strong{color:#ff473e}

/* view */
#container.view{padding-top:0; background:#f5f5f5}
.view .info{width:100%; height:auto; margin-top:-50px; text-align:center; padding:30px 30px 40px 30px; border:2px solid #00b5a6; border-radius:20px; background:#fff; box-shadow:5px 5px #00b5a6; box-sizing:border-box; margin-bottom:25px}
.view .info h2{position:relative; display:inline-block; font-family:'Binggrae'; font-size:50px}
.view .info h2 span{position:relative; z-index:10}
.view .info h2:before{position:absolute; left:0; bottom:7px; width:100%; height:16px; background:#fbf39d; content:""}
.view .info .option{font-size:24px; color:#777}
.view .info .hashtag{display:inline-block; margin:25px 0}
.view .info .hashtag:after{content:''; display:block; clear:both}
.view .info .hashtag li{float:left; width:128px; margin:0 5px; font-size:22px; line-height:50px; color:#38514f; border:2px solid #38514f; border-radius:30px}
.view .info p{font-size:28px; line-height:40px; text-align:left}
.view .tip_box{position:relative; border:2px solid #38514f; border-radius:30px; padding:38px 0 34px 28px; overflow:hidden}
.view .tip_box:before{position:absolute; left:0; top:0; width:100%; height:calc(100% - 10px); border-radius:30px; box-shadow:0 20px #dceeed; content:""}
.view .tip_box:after{content:''; display:block; clear:both}
.view .tip_box .label{float:left; width:98px; height:36px; font-family:'Poppins'; font-size:22px; line-height:36px; font-weight:600; text-align:center; color:#fff; background:url(../images/common/label.png) no-repeat}
.view .tip_box .txt{float:left; width:520px; margin-left:20px}
.view .tip_box .txt strong{display:block; font-size:26px; line-height:36px; margin-top:-1px}
.view .tip_box .txt p{font-size:24px; color:#777; margin-top:5px}
.view .tip_box + .tip_box{margin-top:20px}
.view h3{font-size:30px; font-weight:600}
.view h3.en{font-family:'Poppins'}
.view .somm{position:relative; border-top:4px solid #38514f; margin-top:60px; background:#fff; padding:60px 10px 55px 30px}
.view .somm .top{margin-left:15px}
.view .somm .top:after{content:''; display:block; clear:both}
.view .somm .top .img{float:left; position:relative; width:221px; height:195px; padding:8px 0 0 28px; box-sizing:border-box}
.view .somm .top .img .cover{position:absolute; left:0; top:0;}
.view .somm .top .img .photo{border-radius:100%; overflow:hidden; width:165px; height:165px}
.view .somm .top .txt{float:left; width:470px; padding:15px 0 0 30px; box-sizing:border-box}
.view .somm .top .txt h3{position:relative; display:inline-block; font-size:30px}
.view .somm .top .txt h3 span{position:relative; z-index:10}
.view .somm .top .txt h3:before{position:absolute; left:0; bottom:0px; width:100%; height:16px; background:#7fdad2; content:""}
.view .somm .top .txt h3:after{position:absolute; right:-40px; top:-30px; content:url(../images/common/twinkle.png)}
.view .somm .top .txt p{margin-top:25px}
.view .somm > p{font-size:22px; line-height:36px; color:#777; margin-top:20px}
.view .tasting{border-top:4px solid #38514f; padding:50px 30px; background:#fff; margin-top:30px;}
.view .tasting .item{padding:0 30px; margin-top:30px}
.view .tasting .item li{margin-top:20px}
.view .tasting .item li:first-child{margin-top:0}
.view .tasting .item h4{font-size:24px; font-weight:500}
.view .tasting .item .grp .bar{position:relative; height:4px; background:#e6eded; margin-top:20px}
.view .tasting .item .grp .bar .val{position:absolute; left:0; top:0; height:4px; background:#00b5a6}
.view .tasting .item .grp .bar .val:after{position:absolute; right:-6px; top:-6px; width:16px; height:16px; background:#00b5a6; border-radius:100%; content:""}
.view .tasting .item .grp .bar .val.n1{width:0}
.view .tasting .item .grp .bar .val.n1:after{right:-12px}
.view .tasting .item .grp .bar .val.n2{width:25%}
.view .tasting .item .grp .bar .val.n3{width:50%}
.view .tasting .item .grp .bar .val.n4{width:75%}
.view .tasting .item .grp .bar .val.n5{width:100%}
.view .tasting .item .grp .num{position:relative; height:35px; margin-top:10px}
.view .tasting .item .grp .num span{position:absolute; left:0; top:0; display:inline-block; width:20px; margin-left:-12px; font-family:'Poppins'; font-size:22px; color:#777; text-align:center}
.view .tasting .item .grp .num span:nth-child(1){left:0; margin-left:-5px}
.view .tasting .item .grp .num span:nth-child(2){left:25%}
.view .tasting .item .grp .num span:nth-child(3){left:50%}
.view .tasting .item .grp .num span:nth-child(4){left:75%}
.view .tasting .item .grp .num span:nth-child(5){left:100%}
.view .desc{border-top:4px solid #38514f; padding:50px 20px 50px 30px; background:#fff}
.view .desc h4{position:relative; display:inline-block; font-size:26px; font-weight:500; margin-top:25px}
.view .desc h4:after{position:absolute; left:0; bottom:-5px; width:100%; height:2px; background:#222; content:""}
.view .desc p{line-height:40px; margin-top:25px}
.view .recomm{border-top:4px solid #38514f; padding:50px 0 0 30px; background:#fff}
.view .recomm .gal{margin-top:35px}
.view .recomm .item{position:relative; width:176px; height:260px; text-align:center; border:2px solid #38514f; border-radius:20px; overflow:hidden}
.view .recomm .item:before{position:absolute; left:0; top:0; width:100%; height:calc(100% - 10px); border-radius:20px; box-shadow:0 20px #dceeed; content:""}
.view .recomm .swiper-slide{width:auto; margin-right:20px}
.view .recomm .swiper-slide:last-child{margin-right:0}
.view .recomm .item a{position:relative; display:block; z-index:10}
.view .recomm .item .img{height:166px; display:flex; align-items:center; justify-content:center}
.view .recomm .item .img img{width:115px}
.view .recomm .item .line{height:3px; background:url(../images/common/dot.png) repeat-x}
.view .recomm .item .tit{font-size:22px; line-height:30px; margin-top:15px}


/*-------------------------------------------------------------------
	@ footer
-------------------------------------------------------------------*/
.notice{position:fixed; left:50%; bottom:0; width:754px; max-width:750px; margin-left:-377px; z-index:1100}
.notice > div{position:absolute; left:0; top:-100px; bottom:auto; width:100%; border:2px solid #38514f; border-bottom:0; border-radius:30px 30px 0 0; background:#fff}
.notice a.tit{position:relative; display:block; height:100px; font-size:24px; line-height:100px; color:#777; padding-left:150px}
.notice a.tit strong{position:absolute; left:60px; top:0; color:#222}
.notice a.tit span{width:480px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical}
.notice a.tit:after{position:absolute; right:58px; top:50%; margin-top:-8px; content:url(../images/common/ico_arw_t.png); line-height:0; transform:rotate(-180deg)}
.notice .con{width:100%; max-height:250px; font-size:24px; line-height:40px; color:#777; padding:30px 50px 30px 60px; border-top:1px solid #38514f; box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch}
.notice .con button{display:inline-block; font-size:24px; color:#38514f; line-height:50px; text-align:center; border:2px solid #38514f; border-radius:35px; background:#fff; padding:0 30px}
.notice.on > div{top:auto; bottom:0}
.notice.on a:after{transform:rotate(0)}