@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

#main-content{ color: #1b1b1b;}
.relative { position: relative; }

.title{  font-weight: 600; font-size: 24px;}
.promo-date span{ font-size: 18px; padding: 5px 20px; color: #c7836e;}
.table{ width: 100%;}
.offer-list{font-size: 1rem; padding: 5px;}
.fz-yellow{color:rgba(254,135,0,1.00);}
.free {color:#E35450; font-weight: 600;}
.right-border{border-right: 1px solid #c7836e;}
.box{box-shadow: 1px 1px 8px #cccccc; padding: 15px; height: auto; background-color: #FFFFFF;
    color: #343434;}

.p-15{padding: 15px;}

.btn-offer{ background-color: rgba(222,185,96,1.0); color: #FFFFFF !important; padding: 5px 20px; border-radius: 15px; }
.btn-offer:hover, .btn-offer:active{background-color: rgba(222,185,96,0.7);}

.nav-wrap a { color: #2F2F2F !important; }
.nav-wrap a:hover, .nav-wrap a:active, a.btnCate.selected { color: #C40003 !important; }

hr { margin: 20px 0 !important; }
.wrap { padding: 0 15px; }
.grid { width: 100% !important; padding: 0 15px !important; }
.row { margin-left: -15px; margin-right: -15px; }
.fz-36 { font-size: 36px; }
.fz-24 { font-size: 24px; }
.fz-20 { font-size: 20px; }
.fz-18 { font-size: 18px; }
.fz-16 { font-size: 16px; }
.fz-14 { font-size: 14px; }
.fz-12 { font-size: 12px; }
.fz-10 { font-size: 10px; }
.fc-red { color: #980317; }
.fc-green { color: #4a0017; }

.btn-product{font-size: 20px; padding: 8px 40px;background-color: #fcb616; color: #FFFFFF;  border: 2px solid #fcb616; border-radius: 10px;}
.btn-product:hover{ background-color: #FFFFFF; color: #fcb616;}
.fc-white { color: #fff; }
.fc-back { color: #000000; }
.fc-orange { color:#f06423}
.fc-gift { color:#eb452b}
.bgc-green { background-color: #005040; }
.bgc-red { background-color: #374a60; }
.hr-green { border-color: #005040; border-style: dashed; }
.spacer-10 { height: 10px; }
.spacer-20 { height: 20px; }
.spacer-40 { height: 40px; }
.spacer-90 { height: 90px; }
.nm { list-style: square; }
.colorbox-wrap1 { position: absolute; left: 0; bottom: 0; }
.colorbox { display: block; float: left; margin-right: 3px; border: 1px solid #999; }
.colorbox.active { }
.colorbox-inner { display: block; height: 20px; width: 20px; text-align: center; line-height: 20px; color: #333; }
.colorbox-inner .fa-stack { display: none; font-size: 8px; }
.colorbox.active .colorbox-inner .fa-stack { display: inline-block; }
.colorbox1 { display: block; float: left; border: 1px solid #ccc; margin-right: 3px; }
.colorbox1.active { border: 1px solid #000; }
.colorbox-inner1 { display: block; background-color: #ff0; border: 2px solid #fff; height: 20px; width: 20px; }
.colorbox1.active .colorbox-inner1 { border: 2px solid #000; }
.btn-n { display: inline-block; }
.btn-o { display: none; }
.btnCate-xs.selected .btn-n { display: none; }
.btnCate-xs.selected .btn-o { display: inline-block; }
.ico-edu { width: 60%; }
.owl-theme .owl-controls { margin-top: 0; padding-top: 20px; }
.price-wrap { height: 40px; background-color: #333; line-height: 40px; color: #fff; }
.pl-15 { padding-left: 15px; }
.plr-15 { padding-left: 15px; padding-right: 15px; }
a.btn-buy { padding: 0 15px; height: 40px; display: block; color: #FFFFFF !important; background-color:  rgba(74,0,23,1.0); }
a.btn-sold{ background-color:#666666; color: #fff !important; padding: 0 15px; height: 40px; }
a.btn-buy:hover,a.btn-buy:active { background-color:  rgba(74,0,23,0.7); }
a.btn-sold:hover, a.btn-sold:active {background-color:#666666; color: #fff !important;}
.btn-sonnion{ color: #000000 !important; padding: 5px 10px; border:3px solid #c3d741; font-size: 18px; background-color: transparent;}
.btn-sonnion:hover{background-color:#c3d741;}
.buyButton{color: #000000 !important;     padding: 0px 12px;
    font-size: 30px;background-color: transparent;}
.btn-b{ background-color: rgba(0,0,0,1.00);}
.btn-y{ background-color: rgba(247,238,57,1.00);}
.btn-p{ background-color: rgba(246,96,196,1.00);}
.btn-w{ background-color: rgba(204,204,204,1.00);}
.btn-r{ background-color: rgba(185,55,67,1.00);}
.btn-l{ background-color: rgba(113,131,153,1.00);}
.btn-g{ background-color: rgba(134,162,150,1.00);}
.btn-s{ background-color: rgba(185,185,185,1.00);}
.btn-gold{background-color: rgba(218,201,185,1.00);}

.btn-b:hover{ background-color: rgba(0,0,0,0.7);}
.btn-y:hover{ background-color: rgba(247,238,57,0.7);}
.btn-p:hover{ background-color: rgba(246,96,196,0.7);}
.btn-w:hover{ background-color: rgba(204,204,204,0.7);}
.btn-r:hover{ background-color: rgba(185,55,67,0.7);}
.btn-l:hover{ background-color: rgba(113,131,153,0.7);}
.btn-g:hover{ background-color: rgba(134,162,150,0.7);}
.btn-s:hover{ background-color: rgba(185,185,185,0.7);}
.btn-gold:hover{background-color: rgba(218,201,185,0.7);}


.btn-green{ color: #ffffff !important; padding: 10px 15px; font-size: 20px; background-color: #c3d741; border-radius: 10px;}
.btn-green:hover{background-color:#f06423;}

.btn-orange{ color: #ffffff !important; padding: 10px 15px; font-size: 20px; background-color: #f06423;border-radius: 10px;}
.btn-orange:hover{background-color:#c3d741;}

.bg-green{padding: 15px;}
.bg-green:nth-child(even){background-color: rgba(204,109,213,0.2);}

/*change*/
a.btn-spec { padding: 0 15px; height: 40px; display: block; color: #fff !important; background-color: rgba(32,166,156,1.00); }
a.btn-spec:hover { background-color: rgba(32,166,156,0.90); }

a.btn-spec:hover { background-color: #666; }
.modal-content { width: 600px; margin: 0 auto; }
.modal-header { padding: 15px !important; }
.modal-backdrop { background-color: rgba(0, 0, 0, 0.8) !important; }
/* nav */

.b-left{border-right: 1px solid #FFFFFF;}
.nav-home { padding: 0 15px; height: 40px; display: block; color: #fff; background-color: #005040; }
.nav-cate { padding: 0 15px; height: 40px; display: block; color: #fff; background-color: #20a69c; }
.nav-cate-xs { text-align: center; padding: 0 15px; height: 36px; line-height: 36px; display: block; color: #fff; background-color: #20a69c; }
.btnCheckOut { padding: 0 15px; height: 40px; display: block; color: #fff; background-color: #000; }
/* nav end */

#idList { display: none; }
.b_cat{ font-size:24px !important; padding:5px 10px;}
.s_cat{ font-size:16px !important; padding:15px 20px;}
.s_cat.highlight{ padding:0;}
.s_cat.on{ display:block;}

.grad2 { background-color:#f7a017; color: #fff; font-size: 20px;}

a.btn-menu { color:#FFFFFF !important; padding:5px 25px; font-size:20px; letter-spacing:2px; background-color:transparent !important;
}
a.btn-menu:hover, a.btn-menu:active, a.btn-menu.active { color:#ff7a95 !important; background-color:#FFFFFF !important;}

.grid{ max-width:1070px !important;}
.popimg img{ width:80%;}
.list-group { margin:0 auto !important;}

.list-group li { padding: 5px 0px; border-top: 1px solid;}

.list-group li.skin { padding:0px}
.sub-group { margin:0 auto !important; font-size:14px;}
.sub-group li { padding: 3px 0px; border-top: 0px solid; border-bottom: 1px solid;}
.sub-group li.last{border-top: 0px solid; border-bottom: 0px solid;}
.re_banner{ width:100%;}
/*.topmsg{position:absolute; top:0; right:0; z-index:999; padding:2px 5px; background-color: rgba(246,86,137,0.8); color:#FFFFFF; font-size: 12px; border-radius: 10px;}*/

.topmsg{position:absolute; top:0; right:0; z-index:20;background-color: #FF5154;
    padding: 3px 5px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 18px;
    height: 60px;
    width: 60px;
    line-height: 20px; padding-top: 10px;}
.topmsg img{width: 100%; max-width: 80px;}
.msg{ text-align:center;}
.msg span{ font-size:18px; color:#C30307;}
.ecoupon{ padding:4px 40px 8px 40px;  font-size:20px; background-color:#FFFFFF; }
.btn-elink{ background-color:#ff6c00; padding:8px 25px; border-radius:0; color:#FFFFFF; font-size:16px;}
.btn-elink:hover, .btn-elink:active{ background-color:#cf5b06; color:#FFFFFF;}

.offer{ font-size:18px; color:#024c71; border-top: 5px  double #024c71; border-bottom: 5px  double #024c71; padding: 5px 20px; }

/*updated by Tak*/
.fs-white{color: #ffffff !important;}
.modal-header, .modal-body{background:rgba(254,91,71,0.9);color: #ffffff !important;}

.arrow{
		color: #f06423!important;
	}
.point{		
	padding: 10px 0;
	font-size: 18px;
	line-height: 24px;
}
.point div:first-child{font-size: 14px;}
.fs-green{ color: #c3d741;}


.poinHeader{		
	padding: 10px 0;
	font-size: 22px;
	text-align: center;
	color: #ffffff;
	background-color: #f06423;
	letter-spacing: 2px;
	font-family: 'Noto Sans TC';
}
.fs-green{ color: #c3d741;}
.topMenu{position: relative;background-color: #4a0017; width: 100%; top: 0; left: 0; right: 0; z-index: 99;}
.topMenu.fixedTop{position: fixed;}

.whiteBox{-webkit-box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
-moz-box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
background-color: #FFFFFF;
padding: 100px 15px 15px 15px;
font-size: 22px;
text-align: center;
position: relative;
	overflow: hidden;
}
.whiteBox>.slideup {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: #614ea0;
 color: #FFFFFF;
  padding-top: 115px;
  transition: all 1s;
}

.whiteBox:hover>.slideup {
  top: 0;
  height: 100%;
}
.bold{font-weight: 600;font-family: 'Noto Sans TC';}
.box-img{position: absolute;
    top: -70px;
    left: 13%;
    right: 13%;
    padding: 10px;
    border: 8px solid #ffffff;
    border-radius: 50%;
    background-color: #FF7D00;
    width: 100%;
    max-width: 160px;
-webkit-box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
-moz-box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
z-index: 20;

}

.hover-orange{background-color: #FFFFFF;color:#303030;-webkit-box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
-moz-box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);
box-shadow: 0px 0px 10px -4px rgba(115,115,115,1);}
.hover-orange:hover{background-color:rgba(240,100,35,0.7); color:#FFFFFF;}

.sonnion-header{font-size: 36px; font-weight: bold; color: #f06423; padding-bottom: 15px;font-family: 'Noto Sans TC';}

.sonnion-header::after,.sonnion-title::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background: #e2e5e9;
    transition: width .3s;
}

.sonnion-header:hover::after,.sonnion-title:hover::after {
    width: 100%;
   
}
.sonnion-title{font-size: 24px; font-weight: bold; padding-bottom: 15px;font-family: 'Noto Sans TC'; letter-spacing: 2px;}
.session{padding: 40px 0;}
.btn-point{color: #333333 !important;}
.btn-point>.overlay{position: absolute; top:0; right: 0; left: 0; bottom: 0; background: rgba(255,255,255,0.7); vertical-align: middle; opacity: 0;}
.btn-point>.overlay div{position: absolute; top: 25%; right: 0; left: 0; width: 100%; font-size: 36px; font-weight: 900;}
.btn-point:hover>.overlay{opacity: 1;}
.btn-point>.overlay2{position: absolute; top:0; right: 0; left: 0; bottom: 0; background: rgba(255,255,255,0.7); vertical-align: middle; opacity: 0;}
.btn-point>.overlay2 div{position: absolute; top: 8%; right: 0; left: 0; width: 100%; font-size: 24px; font-weight: 900;}
.btn-point:hover>.overlay2{opacity: 1;}
.arrow-up{ display: none; padding-top: 15px;}
.sonnion-price{ color:#c3d741; font-size: 24px; }
.sonnion-price span{font-size: 16px; color: #C7C7C7;}
.colorbg{

background: #51a648; /* Old browsers */
background: -moz-linear-gradient(top, #51a648 0%, #87c442 37%, #87c442 67%, #51a648 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #51a648 0%,#87c442 37%,#87c442 67%,#51a648 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #51a648 0%,#87c442 37%,#87c442 67%,#51a648 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51a648', endColorstr='#51a648',GradientType=0 ); /* IE6-9 */
	}
	.img-wrap2{
		display: inline-block;
		   background-color: #f06423;
		    border: 5px solid #fff;
		    border-radius: 50%;
		width: 100%;
    max-width: 120px;
    padding: 10px;
	}
.offer-tab{ background-color: #fe5c47;}	
.offer-tab-d{ background-color: #fe5c47; margin: 5px; border-radius: 30px;}
.pl-15{padding:0 15px;}
/*.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}*/

.overlay-content{display: none;}
.overlay-content.on{display: block;}
@keyframes shake {
 0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.b-remark{
	position: absolute; bottom:10px; right: 15px;z-index: 20; font-size: 10px; color: #FFFFFF;
}
/*end*/
@media (max-width:767px) {
.b-remark{
	bottom:5px; font-size: 9px; 
}
.b-left{border-right: 0}
.title{ font-size: 20px;}
.promo-date span{ font-size: 16px;}
.right-border{border-right: 0;}
.gift{ border-right:0px solid #E1E1E1;}
.rightb{ border-right:0px solid #E1E1E1; }
.price{ text-align:left;}
.gifttext{ font-size:16px;}
.offer{ font-size:16px;}
.offer-title { font-size:20px; }
.slider-wrap { background: none; }
.modal-content { width: 100%; margin: 0 auto; }
.ico-edu { width: 100%; }
.row-xs { margin-left: -15px; margin-right: -15px; }
a.btnCate { }
.b_cat{ font-size:18px !important;}
.s_cat{ font-size:14px !important; padding:10px 10px;}
.grad2 { background-color:#000000; color: #fff; font-size: 24px; height: 70px;}
.popimg img{ width:100%;}
.box{height: auto;}
.sub-title>span{  border: 3px solid #ff8e48; color:#ff8e48; padding: 5px 15px; letter-spacing: 0px; }
.sub-title-w>span{  border: 3px solid #FFFFFF; color:#FFFFFF; padding: 5px 15px; letter-spacing: 0px;}
.box-img{
    left: 5%;
	}
}
.title-login { height: 40px; line-height: 40px; background-color: #ccc; }
.btn-default { background-color: #20a69c !important; }
/* reset */
.modal { display: none; }
.nav > li > a:focus, .nav > li > a:hover { background-color: transparent !important; text-decoration: none; }
.clearfix::before, .clearfix::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-footer::before, .modal-footer::after { content: " "; display: table; }
.clearfix::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel-body::after, .modal-footer::after { clear: both; }
.form-control { background-color: #fff !important; background-image: none !important; border: 1px solid #ccc !important; border-radius: 0px !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset !important; color: #777 !important; display: block !important; font-size: 14px !important; height: 34px !important; line-height: 1.42857 !important; padding: 6px 12px !important; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; }
.radio, .checkbox { min-height: 18px; padding-left: 0 !important; }
/* new */
.grad1 { background-color:#000000; color: #fff; font-size: 24px; height: 50px; line-height: 50px;}

.hidden {
    display: none;
}
.content{ display:none;}
.content.on{ display:block;}