@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(fontawesome.css);
@import url(jquery-ui.css);
@import url(fancybox.css);
@import url(slick.css);
@import url(animate.css);
html{font-size:100%; width:100%; height: 100vh; overflow-x: hidden; overflow-y: auto; background:#f5f5f5;}
body{overflow-x: hidden; width:100%;}
*, body, header, footer, section, aside, article, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, h6, strong, button, span, .btn, select, option{font-size:1rem; line-height:1.8; font-weight:normal; font-family:Arial, 'Noto Sans TC', '微軟正黑體'; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#333;}
a{color:#2F2F2F; text-decoration:none; font-weight:normal; transition: all .3s ease;}
a:hover, article a:hover, a:hover *{color:#d3a02a; text-decoration:none;}
a:hover *{transition:none;}
ul, ol, li{margin:0; padding:0;}
ul, ol{margin-left:1rem;}
p{margin:1.2rem 0;}
textarea{resize:none; min-height:5rem;}
img{max-width:100%; height:auto;}
hr{border:none; border-bottom:1px #E5E9EF solid; margin-bottom:15px;}
h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, strong{font-weight:bold; line-height: 1.4;}
h1, h1 *{font-size:2.18rem;}
h2, h2 *{font-size:2rem;}
h3, h3 *{font-size:1.82rem;}
h4, h4 *{font-size:1.58rem;}
h5, h5 *{font-size:1.36rem;}
h6, h6 *{font-size:1.14rem;}
h5 .more{float: right; font-size: 1rem; position: relative; top:5px;}
h5 .more i{font-size: 0.9rem;}
table, .table, .table1, .tableDietitian{border-collapse:collapse;}
[type=text], [type=password], [type=number], textarea{width:calc(100% - 20px); height:25px; padding:5px 10px; background-clip:padding-box; border:1px solid #ced4da; border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-bottom: 1rem;}
[type=text].half{width:calc(50% - 22px); float: left;}
[type=text]:focus, [type=password]:focus, textarea:focus{box-shadow: 0 0 6px #0C7FCC;}
label{display: inline-block;}
select, option{font-size:1rem !important; line-height:1.8 !important; font-family:Arial, 'Noto Sans TC', '微軟正黑體' !important; padding: 0.3rem 0.5rem !important; background-clip:padding-box !important; border:1px solid #ced4da !important; border-radius:.25rem !important; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;}
.inline{max-width:15rem; display: inline-block;}
.forms{width:96vw; max-width: 400px; margin:20px auto;}
.forms .red, .forms label{margin-bottom: 1rem;}
.forms .inline{max-width:calc(50% - 2px);}
.colTitle{width:7rem; display: inline-block; vertical-align: top; float: left; text-align: right; line-height:1.8; margin:0.2rem 0.2rem 0 0;}
.colTitle:after{content:'：';}
.hasTitle{max-width:calc(100% - 10rem); display:inline-block;}
.num{max-width: 60px; display: inline-block;}
.date, .birthday{max-width:100px; display:inline-block;}
.controlgroup:after{content: ''; display: block; clear: left;}
.controlgroup label{background: #eee; border:1px #000 solid; font-weight: normal; margin:0; padding: 2px 15px; text-align: center; cursor: pointer; display:inline-block; float:left; color:#333; transition:All 0.2s ease;}
.controlgroup label:hover{background:#000; color:#fff;}
.controlgroup label:nth-child(1){border-bottom-left-radius:5px; border-top-left-radius:5px;}
.controlgroup label:nth-last-child(1){border-top-right-radius:5px; border-bottom-right-radius:5px;}
.controlgroup label.active{background:#000; color: #fff;}
.controlgroup.radio label{display: inline-block;}
.controlgroup input{display: none;}
.controlgroup label img{height: 50px;}
.appraiser.radio label{width:calc(50% - 6px); padding:2px 2px; line-height: 1;}
.appraiser.radio label:nth-child(1){border-bottom-left-radius:0; border-top-left-radius:0;}
.appraiser.radio label:nth-last-child(1){border-top-right-radius:0; border-bottom-right-radius:0;}
.zoom{cursor: pointer;}
#captcha img{height: 2rem;}
.captcha{max-width:5rem;}
.ckn{max-width: 80px; display: inline-block; float: left; margin-right: 5px;}
.cknImg{display: inline-block;}
.cknImg img{height:35px;}
.hr{border-bottom:1px #000 solid; margin:10px 0 30px 0; text-align:center;}
.hr span{background:#fff; display:inline-block; position:relative; bottom:-10px; padding:0 10px;}
.btnBox{text-align: center;}
button{cursor: pointer; border:1px #000 solid; padding: 5px 10px; border-radius: 5px; line-height: 1; background: #000; color:#fff;}
iframe{max-width: 100%;}
section{width:calc(100% - 2rem); display: block; margin:0 auto; padding:1rem 0; position:relative;}
section:after{content: ''; display: block; clear: both;}
select{background: #fff; border:none; font-size: 0.8rem; border-radius: 2px; width:calc(100%); margin-bottom: 1rem; padding: 2px 5px;}
select option{font-size: 0.6rem; border-radius: 2px;}
.sabrosus{text-align:center;}
.sabrosus a, .sabrosus a:visited{min-width:20px; margin:20px 5px; color:#bfbfbf; display:inline-block; text-align: center;}
.sabrosus a *{color:#bfbfbf;}
.sabrosus a.current, .sabrosus a:hover, .sabrosus a:hover *{color:#fff; background: #bfbfbf;}
.sabrosus a:hover *{background: none;}
.sabrosus a:nth-child(1), .sabrosus a:nth-last-child(1){display: none;}
.fancybox-container *{color:#fff;}
.slick-dots{width:100%; text-align: center; position: absolute; bottom: 10px;}
.slick-dots li{display: inline-block; list-style: none; width:20px; height:20px; background: rgba(255,255,255,0); border-radius:10px; border:1px #fff solid; margin:0 1rem; cursor: pointer;}
.slick-dots li.slick-active{background: #fff;}
.slick-dots li button{display: none;}
.slick-arrow{background: none;}
.index_slider .slick-arrow{float: right; border: none; position: absolute; right: 0; top:-1rem; padding: 0;}
.index_slider .slick-arrow i{font-size:1.3rem;}
.index_slider .slick-arrow.slick-prev{right:2rem;}
.title .more.hasArrow{margin-right:4rem; padding-right: 1rem; border-right: 1px #000 solid;}
.bg2 .title .more.hasArrow{border-color:#fff;}
.img{background: no-repeat center #999; background-size: cover; display: inline-block;}
.notice{background:#eee; padding:10px;}
#logo{display: inline-block;}
#logo img{height:6rem;}
h1#title{font-size:1.6rem;}
h1#title, .title{color:#b6871b; line-height:1.1;}
.title .more{font-size:0.9rem; float: right; font-weight: normal; color:#818181;}
body#home h5.title{border-left:4px #b6871b solid; padding-left:0.5rem;}
header{background:#f5f5f5; position:fixed; z-index: 900; width:100%; left:0; top:0;}
header .tools{position:absolute; right:0; top:1rem;}
header .tools a{font-size:1rem; margin-left: 1rem; color:#864623;}
header .tools a:nth-last-child(1){margin-right:0.6rem;}
header .tools a *{color:#960; font-size: 1.1rem;}
header .tools a.btn1, header .tools a.btn2{font-size: 0.8rem; display: inline-block; padding: 0.3rem 1rem; border-radius:1rem; border:1px #864623 solid; line-height:1;}
header .tools a.btn1{background:#864623; color:#fff;}
header .tools a.btn1 *{color:#fff;}
header .tools a.btn2{background:#fff; color:#864623;}
nav{position: absolute; right:0; bottom:1rem;}
nav ul{margin:0;}
nav ul li{list-style: none; display:inline-block;}
nav ul li a{padding: 5px 10px; font-size:1.2rem; color:#960;}
nav ul li a:hover, nav ul li a.active{color:#fff; background: #960;}
main{margin-top:8.5rem;}
aside, article{width:100%;}
aside{max-width:250px; float:right; margin-left:1rem;}
aside a img, aside ul li a img{width:100%;}
article{max-width:calc(100% - 270px - 2rem); float:left; margin-right: 1rem; position: relative;}
article.one{max-width:calc(100% - 2rem); float: none; margin:0 auto;}
.mc a{display: inline-block; margin:0 1rem 1rem 0; font-weight: bold;}
.left_article{width:100%; max-width:calc(100% - 280px); float: left; text-align: justify;}
.left_article *{line-height: 1.6;}
.left_article, .left_article p, .left_article div, .left_article span{font-size: 0.9rem;}
.left_article h3, .left_article h3 *, .medias_info h3, .medias_info h3 *, article h3, article h3 *{font-size: 1.16rem;}
.right_imgs{width:100%; max-width:230px; float: right; font-size: 0.8rem; text-align: justify;}
.right_imgs div, .right_imgs div a{display:block; position: relative; cursor: pointer; margin-top: 1.2rem; color:#595757; font-size: 0.8rem;}
.right_imgs a .icon{position:absolute; right: 0; bottom: 0.1rem; width:1.33rem; height: 1.33rem;}
.right_imgs img{width:100%;}
.top_imgs{width:100%; font-size: 0.8rem; text-align: justify; margin-bottom: 1rem;}
.top_imgs:after{content: ''; display: block; clear: both;}
.top_imgs a, .top_imgs div{display: inline-block; width:50%; max-width:14.56rem; float:left; margin-bottom: 1rem; position: relative; cursor: pointer; color:#595757; font-size: 0.8rem;}
.top_imgs div a{margin-bottom: 0.1rem; width:100%;}
.top_imgs a .icon{position:absolute; right: 0; bottom: 0.1rem; width:1.33rem; height: 1.33rem;}
.top_imgs a img{width:100%;}
.top_imgs a:nth-child(1){width:100%; max-width:35.78rem; margin-right: 1.5rem;}
.introduction{border-left:4px #595757 solid; font-style: italic; color:#aeaeae; padding: 5px 1rem; margin:1rem 0;}
.medias_info{max-width: 680px; text-align: justify;}
.subtitle{font-size: 1.36rem; font-weight: bold; margin-bottom: 1rem;}
.list{width:90%; margin:1rem auto;}
.list li{list-style: none; margin-bottom:0; padding-bttom:2rem; border-bottom:1px #666 solid;}
.list li a{color:#960; display: inline-block;}
.list li a.mc{background:#960; color:#fff; padding:0 0.5rem;}
.cross_list{margin:50px 2rem 0 2rem;}
.cross_list li{list-style: none; margin-bottom:4rem; padding: 0; background: #fff; border:1px #eee solid; border-width:1px 0 0 1px; box-shadow:5px 5px 5px rgba(0,0,0,0.4);}
.cross_list li:after{content: ''; display: block; clear: both;}
.cross_list li .img{float: left; width:40%; padding-bottom:28%;}
.cross_list li .info{width:calc(50% - 40px); float: right; padding:20px;}
.cross_list li .info .d{font-size: 0.9rem; margin-bottom:1rem;}
.cross_list li:nth-child(even) .img{float: right;}
.cross_list li:nth-child(even) .info{float: left;}
.cross_list li .more{text-align: right;}
.btn{background: #960; border:1px #960 solid; padding:10px 20px; color:#fff; font-size: 1.1rem; display: inline-block; border-radius: 10px; line-height: 1; cursor: pointer;}
.btn *{color:#fff;}
.btn.btn-sm{padding: 5px 10px; border-radius: 5px;}
.btn:hover{background: #777; color:#fff;}
.btn:hover *{color:#fff;}
.btn.facebook{background:#3B5998; color:#fff; border:#3B5998;}
.btn.line{background:#00b900; border-color:#00b900; line-height:2rem;}
.btn.line .icon{height:2rem; float: left; margin-right:10px;}
.btn.red{background:#E83828; color:#fff; border-color:#E83828;}
button.facebook{background:#3B5998; color:#fff; border-color:#3B5998;}
button.facebook .fab{font-size: 18px; color:#fff; margin-right: 10px;}
button.facebook:hover{opacity: 0.9;}
ul.c3{margin:1rem 0 0 0;}
ul.c3:after{content: ''; display: block; clear: left;}
ul.c3 li{list-style: none; display: inline-block; width:calc(33% - 20px); margin:0 0 4rem 40px; padding-bottom: 1rem; vertical-align: top; position: relative; border:1px rgba(0,0,0,0.2) solid; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.2); background: #fff;}
ul.c3 li:nth-child(1), ul.c3 li:nth-child(3n + 1){margin-left:0;}
ul.c3 li .img{width:100%; display: block; margin-bottom: 0.5rem; padding-bottom:52%; background:#808080 no-repeat center; background-size: cover;}
ul.c3 li .info{margin:0.5rem; color:#a0a0a0; height:8rem;overflow: hidden;}
ul.c3 li .info *{color:#a0a0a0;}
ul.c3 li .title{height:3rem; overflow: hidden; font-size: 1.1rem; margin:0 auto; color:#333;}
ul.c3 li .d{width:90%; margin:0 auto;}
ul.c3 li .info .view{float: right;}
ul.c3 li .btn_box{width:100%; text-align: center;}
ul.c3 li .btn_box .btn{font-size:0.9rem;}
body.page_list ul.c3 li, body.in ul.c3 li{width:calc(33% - 2rem); margin:0 0 2rem 2rem;}
body.page_list ul.c3 li:nth-child(1), body.page_list ul.c3 li:nth-child(3n + 1), body.in ul.c3 li:nth-child(1), body.in ul.c3 li:nth-child(3n + 1){margin-left:0;}
body.page_list ul.c3 li .info .mprice, body.page_list ul.c3 li .info .view, body.in ul.c3 li .info .mprice, body.in ul.c3 li .info .view{font-size:0.8rem;}
body.page_list ul.c3 li .info .name, body.page_list ul.c3 li .info .name *, body.in ul.c3 li .info .name, body.in ul.c3 li .info .name *{font-size: 0.8rem;}
body.page_list ul.c3 li .info, body.in ul.c3 li .info{height:11.5rem; font-size:0.8rem; line-height: 1.3;}
body.page_list ul.c3 li .title, body.in ul.c3 li .title{font-size:1rem; height:2.6rem;}
ul.c4{margin:1rem 0 0 0;}
ul.c4:after{content: ''; display: block; clear: left;}
ul.c4 li{list-style: none; display: inline-block; width:calc(25% - 15px); margin:0 0 20px 20px; vertical-align: top; position: relative; float: left; background: #fff;}
ul.c4 li:nth-child(1), ul.c4 li:nth-child(4n + 1){margin-left:0; clear: left;}
ul.c4 li .img{width:100%; display: block; margin-bottom: 0.5rem; padding-bottom:60%;}
ul.c4 li .info{margin:0.5rem; font-size:0.9rem; height:12rem; overflow: hidden; color:#808080;}
ul.c4 li .info *{font-size: 0.9rem; color:#808080;}
ul.c4 li .info .stock, ul.c4 li .info .futures{color:#fff;}
ul.c4 li .info hr{border-style: dashed; border-width: 1px;}
ul.c4 li .info a{color:#b6871b;}
ul.c4 li .title{height:3rem; overflow: hidden; font-size: 1.1rem; margin:0 auto; color:#333;}
ul.c4 li .info .view{float:right;}
ul.c6{margin:1rem 0 0 0;}
ul.c6:after{content: ''; display: block; clear: left;}
ul.c6 li{list-style: none; display: inline-block; width:calc(16.7% - 34px); margin:0 0 2rem 40px; vertical-align: top; position: relative; float: left; background: #fff;}
ul.c6 li:nth-child(1), ul.c6 li:nth-child(6n + 1){margin-left:0; clear: left;}
ul.lecturer li .img{width:50%; display: block; margin-bottom: 0.5rem; padding-bottom:50%;}
#index_free_article{margin:1rem 0; padding:0;}
#index_free_article li{list-style: none; display: inline-block; width:calc(33% - 2rem); margin:0 0 2rem 2rem; background: #fff; float: left;}
#index_free_article:after, #index_free_article li:after{content:''; display: block; clear: both;}
#index_free_article li:nth-child(1), #index_free_article li li:nth-child(3n + 1){margin-left:0; clear: left;}
#index_free_article li .img{width:30%; padding-bottom: 30%; display: inline-block; background: no-repeat center; background-size: cover; float: left;}
#index_free_article li .info{width:calc(70% - 1rem); height:5rem; overflow: hidden; padding:0.5rem; float: right;}
.bh{margin:5rem 0 2rem 0;}
.stock, .futures{color:#fff; font-size: 0.8rem; border-radius:0.1rem; padding:0 0.5rem; margin-bottom:0.5rem; display: inline-block;}
.stock{background: #b6871b;}
.futures{background:#864421;}
footer{background:#b6871b;}
footer section{color:#fff;}
footer section *{color:#fff;}
footer ul{margin:0;}
footer ul li{width:10rem; float: left; vertical-align: top; list-style: none;}
footer ul:after{content:''; display: block; clear: left;}
footer ul li:nth-child(1){width:calc(100% - 12rem);}
footer .tools{border-top:1px #fff solid; margin-top:1rem; padding-top: 1rem;}
footer .tools a{font-size: 1.2rem; margin-right:0.5rem;}
.bg1{background: #e6e6e6;}
.bg2{background: #b6871b;}
.bg2 *{color:#fff;}
.bg2 h1#title{color:#fff;}
.bg2 .c3 li{background: #fff;}
.bg2 .title .more{color:#fff;}
.bg3{background: #fff;}
.nodata{text-align: center;}
.nodata .fa{font-size:2rem;}
#shareBox{width:350px; padding:20px;}
#shareBox *{color:#666;}
#shareBox .btns a{display: inline-block; width:80px; font-size:0.9rem; text-align: center; margin:0 10px;}
#shareBox .btns{margin:20px 0;}
#shareBox .btns a .fab{font-size:3rem;}
#shareBox .btns a:nth-child(1) .fab{color:#2b4b94;}
#shareBox .btns a:nth-child(2) .fab{color:#0084ff;}
#shareBox .btns a:nth-child(3) .fab{color:#00c91d;}
#shareBox .url{width:calc(100% - 120px);}
#shareBox .copyurl{color:#fff;}
body#home .bg2{margin-bottom:7rem;}
body#home .bg2 section{bottom:-3rem;}
body#home .bg2 section ul{margin-bottom: -5rem;}
body#home .bg2 h5.title{border-color:#fff;}
.index_article .info{font-size:0.9rem !important; line-height:1.6 !important;}
#index_banners{width:100%; overflow: hidden; margin-bottom:-6rem;}
#index_banners div a{width:100%; padding-bottom:48%; display: block; background: no-repeat center; background-size: cover;}
#index_banners .slick-arrow{position: absolute; z-index: 900; top:calc(50% - 1rem); left:20px; cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}
#index_banners .slick-next{left:auto; right: 20px;}
#index_banners .slick-arrow *{color:#fff; font-size: 2rem;}
#index_3banner{margin:4rem 0;}
#index_3banner a{display: inline-block; width:calc(33% - 1.8rem); padding-bottom:7%; float:left; background: no-repeat center; background-size: cover; margin-left:3rem;}
#index_3banner a:nth-child(1){margin-left:0;}
#index_banners01, #index_banners02{margin:4rem 0; width:100%; overflow:hidden;}
#index_banners01{width:calc(65% - 1.5rem); float:left;}
#index_banners01 div a{width:100%; padding-bottom:44%; display: block; background: no-repeat center; background-size: cover;}
#index_banners02{width:calc(35% - 0.5rem); float:right;}
#index_banners02 div a{width:100%; padding-bottom:81%; display: block; background: no-repeat center; background-size: cover;}
body#contactUs form{max-width:500px; margin:0 auto;}
#index_news{background: url('../images/bg_02.jpg') no-repeat center; background-size:100% auto; padding:2rem 0;}
#index_news .list{max-width:600px;}
#loginBox{max-width:350px; margin:1rem auto;}
#loginBox .hr span{background:#f8f8f8;}
#loginBox .w{width:100%; margin:1rem 0; padding: 10px 0;}
body#modflyinfo #loginBox{max-width:500px;}
.shoppingCart_list{margin:2rem 0;}
.shoppingCart_list li{list-style: none; position: relative;}
.shoppingCart_list li:after{content: ''; display: block; clear:both;}
.shoppingCart_list .delShoppingProduct{float: left; margin-top:2rem;}
.shoppingCart_list .img{width:80px; height: 80px; float: left; margin:0 2rem 1rem 2rem; background:no-repeat center; background-size: cover;}
.shoppingCart_list li .numBox{display: inline-block; margin-left:1rem;}
.shoppingCart_list li .mprice{float: right;}
.shoppingCart_list li .info{width:calc(100% - 150px); float:right; display: inline-block;}
.shoppingCart_list li .info ul li{list-style: disc; line-height:1; margin:0.5rem 0 0 0; padding: 0;}
.shoppingCart_list li .info ul li:after{display:none;}
.shoppingCart_list li .info ul li a{line-height: 1;}
#accounting{max-width:350px; float: right; text-align: right;}
#accounting span{display: inline-block; width:150px;}
#accounting hr{margin:5px 0;}
.author.img{width:50%; padding-bottom:50%; border-radius:50%; border:5px #960 double;}
ul.lecturer li{text-align: center; background: none; color:#a0a0a0;}
ul.lecturer li .img{width:80%; padding-bottom:80%; border-radius:80%; margin:1rem auto; display:inline-block; border:1px #960 solid;}
.price{color:#a0a0a0; text-decoration: line-through;}
.mprice{color:#960; font-size: 1.2rem; font-weight: bold;}
.price:before, .mprice:before{content:'NT$ '; font-weight: normal; font-size:0.8rem;}
ul.table{width:100%; margin:10px auto;}
ul.table li{list-style: none; width:100%;}
ul.table li .col{text-align: center; vertical-align: top; padding: 3px 10px; display: inline-block;}
ul.table li:nth-child(2n + 1){background: #eee;}
ul.table li.title{background:#960;}
ul.table li.title .col{color:#fff;}
ul.table li .col a{color:dodgerblue;}
ul.myorders li .col:nth-child(1){width:130px;}
ul.myorders li .col:nth-child(2){width:130px;}
ul.myorders li .col:nth-child(3){width:calc(100% - 500px); text-align: left;}
ul.myorders li.title .col:nth-child(3){text-align:center;}
ul.myorders li .col:nth-child(4){width:130px;}
ul.myexpiredorders li .col:nth-child(1){width:130px;}
ul.myexpiredorders li .col:nth-child(2){width:calc(100% - 370px); text-align: left;}
ul.myexpiredorders li.title .col:nth-child(3){text-align:center;}
ul.myexpiredorders li .col:nth-child(3){width:130px;}
ul.myarticleforum li .col:nth-child(1){width:calc(100% - 270px); text-align: left;}
ul.myarticleforum li .col:nth-child(2){width:80px; text-align: right;}
ul.myarticleforum li .col:nth-last-child(1){width:120px; text-align: left;}
ul.myarticleforum li.title .col:nth-last-child(1){text-align: center;}
ul.myarticleforum li .col:nth-last-child(1) a{font-size:1rem;}
ul.myarticlelist li .col:nth-child(1){width:100px;}
ul.myarticlelist li .col:nth-child(2){width:calc(100% - 260px); text-align: left;}
ul.myarticlelist li .col:nth-last-child(1){width:80px; text-align: left;}
ul.myarticlelist li.title .col:nth-last-child(1){text-align: center;}
ul.myarticlelist li .col:nth-last-child(1) a{font-size:1rem;}
ul.modfly li .col:nth-child(1){width:80px; vertical-align: top;}
ul.modfly li .col:nth-child(2){width:calc(100% - 110px); text-align: left; padding:3px 0;}
ul.modfly li .col .form-control, ul.modfly li .col textarea{width:calc(100% - 1rem); margin-bottom: 0; max-width: none;}
ul.modfly li .col .inline{max-width:150px;}
ul.modfly li .col .date{max-width:100px;}
ul.modfly li .col .num{max-width:80px;}
ul.modfly li.title .col:nth-child(2){text-align: center;}
#topping{margin:0 0 1rem 0;}
#topping li{list-style: none; margin-bottom:0.5rem;}
#topping li span{font-size:0.8rem; color:dodgerblue; border:1px dodgerblue solid; padding:2px 5px;}
#buynow{text-align: center; background:rgba(255,255,255,0.9); margin-bottom:2rem; width:100%;}
#buynow form{display: inline-block;}
.article_box{background:#f9f9f9; margin-bottom: 2rem; padding:1rem;}
.msg{display: inline-block; width:calc(100% - 10rem);}
.btn_uploadImg{margin:0 0.5rem; padding:0 0.5rem; border-radius: 5px; display: inline-block; background:#aeaeae; cursor:pointer;}
.btn_uploadImg *{font-size:1.4rem; color:#fff;}
.btn_uploadImg:hover, .btn_uploadImg:hover *{color:#333;}
.likes{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.btn_like{color:#fff; background:#1877f2; line-height:1; padding:0.3rem 0.5rem; display: inline-block; margin:0 1rem 1rem 0; border-radius: 5px; cursor:pointer;}
.btn_like *{color:#fff;}
.article_msgs{margin:0;}
.article_msgs .d, .d{color:#666; font-size:0.9rem; line-height: 1;}
.article_msgs li{list-style: none; margin:0; padding: 0.5rem;}
.article_msgs li:after{content: ''; display: block; clear: both;}
.article_msgs li:nth-child(even){background:#f4f4f4;}
.article_msgs li .img{width:5rem; height: 5rem; display: inline-block; background: no-repeat center; background-size: cover;}
.loadMsg{text-align: center; display: block;}
.sahreTools{margin-bottom:1rem;}
.openSahreBox{display: inline-block; padding:5px 10px; border:1px #eee solid; box-shadow:0 0 3px #999; border-radius:20px; cursor: pointer;}
#showNotify, #showMyMsg{position: relative; cursor: pointer;}
#showNotify span, #showMyMsg span{width:6px; height:6px; border-radius:3px; background:#f00; position: absolute; right:-3px; top:-3px;}
#memberNotify{width:90vw; max-width:700px; padding:1rem 2rem;}
#memberNotify ul, #memberMsg ul{margin:0 0 1rem 0;}
#memberNotify ul li, #memberMsg ul li{color:#000; list-style: none; border-bottom:1px #999 dashed; padding:10px 0;}
#memberNotify ul li:nth-last-child(1), #memberMsg ul li:nth-last-child(1){border:none;}
#memberNotify ul li .d, #memberMsg ul li .d{font-size:0.9rem; color:#ccc;}
#memberMsg{width:90vw; max-width:600px; padding:1rem 2rem;}
#memberMsg textarea{color:#666;}
#memberMsg textarea::placeholder{color:#999;}
#memberMsg ul li .feeback{margin:5px 0 0 40px; padding:1rem 0; position:relative; border-top:1px #eee solid;}
#memberMsg ul li .feeback:before{font-family:"Font Awesome 5 Free"; content:"\f152"; color:#666; display: inline-block; position: absolute; left:-30px; top:-5px;}
#mmsg_list{width:100%; max-height:50vh; overflow:auto;}
#mmsg_list ul li *{color:#000;}
.fr{float: right;}
.fl{float: left;}
.clear{clear: both;}
img.fl{margin:0 40px 40px 0;}
img.fr{margin:0 0 40px 40px;}
#note_ifr{min-height:400px;}
.mobile{display: none;}
.mobile-x{display: inline;}
.blue, .blue *{color:#0C7FCC;}
.bh{clear:both; text-align:right; padding:20px 20px 20px 0;}
.bh a{font-size:1rem; display: inline-block; color:#960;}
.bh a *{color:#960;}
button.green{border:1px #8ABF1F solid; padding: 0.3rem 0.8rem; background: none; line-height: 1;}
.hideit{display:none;}
.red{color:#c00;}

@media screen and (max-width:1200px) {
    #index_bestseller, #index_brands {
        float: none;
        width: 100%;
    }

    #unit_banner .tools {
        left: 20px;
    }
}
@media screen and (max-width:900px) {
    nav{display: none; position: fixed; z-index: 900; right: 0; top:110px; height:13rem; background:#fff; padding: 10px; border-radius: 10px 0 0 10px; border-top:1px rgba(0,0,0,0.2) solid; border-left:1px rgba(0,0,0,0.2) solid; box-shadow:2px 2px 2px rgba(0,0,0,0.2);}
    nav ul li{display: block; margin:5px 0;}
    nav ul li a{color:#808080;}
    #navation{display: inline-block; position: fixed; z-index: 901; right: 10px; top:60px; font-size: 1.8rem; color:#000; cursor: pointer;}
}
@media screen and (max-width:960px) {
    #index_3banner{margin-top:3rem;}
    #index_3banner a{width:calc(33% - 1.3rem); margin-left:2rem;}
}
@media screen and (max-width:900px) {
    #logo img{width:40%; height: auto;}
    #index_3banner{margin-top:6rem;}
}
@media screen and (max-width:760px) {
    html{font-size: 13px;}
    header{background-position: top left calc(40vw);}
    header section{background-size: auto 60%; background-position: center bottom;}
    #logo img{width:auto; height:4rem;}
    aside, article{max-width: none; float: none;}
    aside{margin:2rem 0;}
    article{margin:0 auto;}
    ul.c3 li, body.page_list ul.c3 li, body.in ul.c3 li{width:calc(50% - 2rem); margin:0 0 2rem 2rem;}
    ul.c3 li:nth-child(3n + 1), body.page_list ul.c3 li:nth-child(3n + 1), body.in ul.c3 li:nth-child(3n + 1){margin-left:2rem; clear:none;}
    ul.c3 li:nth-child(2n + 1), body.page_list ul.c3 li:nth-child(2n + 1), body.in ul.c3 li:nth-child(2n + 1){margin-left: 0; clear: left;}
    body#home.page_list ul.c3 li{width:100%; margin-left:0;}
    body#home.page_list ul.c3 li .info{font-size:1.2rem;}
    ul.myorders li .col:nth-child(3){width:calc(100% - 180px);}
    .index_slider .slick-arrow{display:none !important;}
    .title .more.hasArrow{margin-right: 0; padding-right: 0; border:0;}
    ul.c4 li{width:calc(50% - 10px);}
    ul.c4 li:nth-child(2n + 1){margin-left:0; clear: left;}
    ul.c6 li{width:calc(33% - 15px); margin:0 0 2rem 20px;}
    ul.c6 li:nth-child(6n + 1){clear: none; margin-left:20px;}
    ul.c6 li:nth-child(3n + 1){margin-left:0; clear:left;}
    .left_article{max-width:none; float: none;}
    .right_imgs{max-width:none; float: none;}
    .right_imgs:after{content: ''; display: block; clear: left;}
    .right_imgs div{width:calc(50% - 1rem); float: left; font-size: 0.67rem;}
    .right_imgs div:nth-child(2n){margin-left:1rem;}
    .right_imgs div:nth-child(2n + 1){clear:left;}
    .top_imgs div{width:calc(50% - 1rem); max-width: 313px;}
    .top_imgs div:nth-child(2){margin-right: 1rem;}
    .cross_list{margin:2rem 0px;}
    .cross_list li .img{float:none; width:100%; padding-bottom: 58%; display:block;}
    .cross_list li .info{width:calc(100% - 40px); float:none;}
    header .tools a.btn1, header .tools a.btn2{padding:0.3rem;}
    #index_banners .slick-arrow{left:10px;}
    #index_banners .slick-next{left:auto; right: 10px;}
    #index_banners01, #index_banners02{margin:2rem 0; width:100%; float:none;}
    #index_free_article li{width:calc(50% - 2rem);}
    #index_free_article li:nth-child(3n + 1){margin-left:2rem; clear:none;}
    #index_free_article li:nth-child(2n + 1){margin-left:0; clear:left;}
    #index_free_article li .img{width:100%; float: non;}
    #index_free_article li .info{width:calc(100% - 1rem); float: none;}
    #jp_container_1{width:100%;}
    .fr, .fl{float: none;}
    .mobile{display: inline;}
    .mobile-x{display: none;}
}
@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}