*{
  	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
          	box-sizing: border-box;
	position: relative;
	font-size:20px;
}
body{
	width:100%;
    overflow-x: auto;
}
body::-webkit-scrollbar {
	width: 5px;
}
 
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 20px 0px rgba(255, 255, 255, 0);
}
 
body::-webkit-scrollbar-thumb {
	background-color: #2abcb1;
    outline: 1px solid rgba(84, 84, 84, 0);
}
img{width: 100%;height:auto;}
/******************************分隔線********************************/

.loadbox{position:fixed;width:100%;height:100%;background-color:#fff;z-index:9999;}
.loadbox .loadbk{background-color: #CCC;position: absolute;width: 20%;margin: 0 auto;height: 5px;top: 50%;left: 40%;}
.loadbox .loadbk .load{background-color:#6d4206;height:100%;width:0%;}
/******************************分隔線********************************/
.box{display:inline-block;transition:all 0.4s;text-align:center;vertical-align:middle;}
.fullbox{width:100%;padding: 2%;cursor:pointer;}.halfbox{width:50%;padding:1.5%;cursor:pointer;}
.box-1over3{width:33%;padding: 1.5%;cursor:pointer;}.box-1over4{width:25%;cursor:pointer;}
.fullbox:hover , .halfbox:hover , .box-1over3:hover , .box-1over4:hover{}

.page > .fullbox , .page > .halfbox , .page > .box-1over3 , .page > .box-1over4{padding:0;cursor: default;}
/******************************分隔線********************************/
.header-box{width: 100%;border-bottom:none;}
.header-box .header{
	width: 80%;
    max-width: 1536px;
    min-width: 768px;
    margin: 0 auto;
    text-align: center;
}
.header-box .header .logo{
	width: 27%;
    padding: 1.5% 1%;
	vertical-align:middle;
}
.header-box .header .logo:hover{}


/******************************分隔線********************************/

.topback{
	width:100%;
	background:url(../../MembersWeek_Jan2018/images/Chi_1990x685.jpg);
	background-size:cover;
}.topback img{
	width:100%;
	opacity:0;
}


/******************************分隔線********************************/
.body{
	width:100%;
    background: #e9fffd;
    border-top: #2abcb1 10px solid;
}

.body .main{
    width: 80%;
    max-width: 960px;
    /*min-width: 768px;*/
    margin-top: -7%;
    background: #ffffff;
    border-top: #2abcb1 10px solid;
    box-shadow: #545454 0 3px 3px;
}
.body .main .page{}
.body .main .page .title{
    width: 100%;
    font-size: 26px;
	font-family:sans-serif, "Arial Unicode MS";
    color: #2c2b2b;
    font-weight: 900;
    padding: 1%;
}
.body .main .page .title2{
    width: 100%;
    font-size: 15px;
	font-family:sans-serif, "Arial Unicode MS";
	text-align:left;
    color: #2c2b2b;
    font-weight: 900;
    padding: 1%;
}
.body .main .page .summery{
    text-align: center;
    font-size: 25px;
    padding: 1% 3%;
    width: 100%;
}

.body .main .page .max{
	line-height:35px;
	color: #2e2e2e;
    text-align: center;
    font-size: 20px;
    padding: 1% 3%;
    width: 100%;
}
.body .main .page .summery .in-summery-box{
	display: block;
    width: 100%;
    text-align: center;
    margin: 1% 0;
    padding: 1% 0;

}
.body .main .page .summery .in-summery-box .in-title{
    width: 100%;
	line-height:35px;
	font-family: sans-serif, "Arial Unicode MS";
    font-size: 20px;
	font-weight:bold;
	text-align:left;
    color: #3d3a3e;
}
.body .main .page .summery .in-summery-box .in-title3{
    width: 100%;
	line-height:50px;
	font-family: sans-serif, "Arial Unicode MS";
	font-weight:bold;
    font-size: 30px;
    color: #000000;
}

.body .main .page .summery .in-summery-box .in-title2{
    width: 100%;
	line-height:50px;
	font-family: sans-serif, "Arial Unicode MS";
	font-weight:bold;
    font-size: 40px;
    color: #000000;
}

.photo box{
	display: block;
	width: 100%;
	height: 128px;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;

}

.body .main .page .summery .in-summery-box .in-title3{
    width: 100%;
	line-height:35px;
    font-size: 22px;
    color: #3d3d3d;
}

.body .main .page .summery .in-summery-box .in-sum{
    font-size: 20px;
    width: 69.5%;
    text-align: left;
    color: #2abcb1;
}
.body .main .page .summery .in-summery-box.map{
    border-bottom:none;
}
.body .main .page .summery .in-summery-box.map .in-sum{
	width: 100%;
    height: 100%;
    height: 35vh;
    max-height: 450px;min-height:330px;}
.body .main .page .summery .in-summery-box.map .in-sum iframe{width:100%;}


.body .main .page.head{
}
.body .main .page.head .title{
    padding: 1.5%;
    width: 100%;
    font-size: 25px;
    letter-spacing: 2px;
    color: #740073;
    background: #2abcb1;
    border-bottom:none;
    background: -webkit-linear-gradient(to right, #740073, #ffd200);
    background: linear-gradient(to right, #740073, #ffd200);
    border-radius: 2px;text-align: center;
}
.body .main .page.head .summery{
    margin: 2% 0;
    padding: 0 2%;
    font-size: 20px;
    line-height: 1.5;
    color: #3e005b;
	text-align: center;
}

.body .main .page.imnote{
	line-height:30px;
    width: 94%;
    text-align: center;
    border: #F44336 2px solid;
}
.body .main .page.imnote .summery{
	text-align: center;
    line-height: 1.5;
    font-size: 20px;
    color: brown;}


.body .main .page.note-box{}
.body .main .page.note-box .note{
    padding: 2%;
    vertical-align: top;
    color: purple;
}
.body .main .page.note-box .note .note-title{
	line-height:30px;
    width: 100%;
    padding: 1%;
    border: #f44336 2px solid;
    font-size: 20px;
}
.body .main .page.note-box .note .note-summery{
	padding: 2%;
    line-height: 1.5;
    font-size: 20px;
}

/******************************分隔線********************************/

.cursorpointer{cursor:pointer;}.cursordefault{cursor:default;}
.no-padding{padding:0;}.shadow-box{box-shadow: #525252 2px 2px 8px 0px;}
.shadow-box:hover{box-shadow: #525252 2px 2px 4px 0px;}

.box .button{
    width: auto;
    margin: 1%;
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 20px;
    color: #740073;
    cursor: pointer;
    background: #740073;
    background: -webkit-linear-gradient(to top, #740073, #9249ff);
    background: linear-gradient(to top, #740073, #9249ff);
    transition: all 0.2s;
}.box .button:hover{
    background: #740073;
    background: -webkit-linear-gradient(to top, #740073, #9249ff);
    background: linear-gradient(to top, #740073, #9249ff);
}
/*****************************************************************************************/
.exchbt{
	cursor:pointer;
	width: 50px;
    position: fixed;
    top: 5%;
    left: 5%;
    background: bisque;
    border: #740073 2px solid;
    padding: 1px 2px 3px;
    border-radius: 6px;
}
.exchbt:hover{}
/*****************************************************************************************/
.spinner {
  margin: 25% auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 20px;
}

.spinner > div {
  background: #740073;
  background: -webkit-linear-gradient(to top, #740073, #9249ff);
  background: linear-gradient(to top, #740073, #9249ff);
  height: 100%;
  width: 6px;
  margin: 0 0.5px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
/*********************************************************************************************************/

.body .main#pd{
    width: 80%;
    max-width: 960px;
    /*min-width: 768px;*/
    margin-top: 0%;
    background: #ffffff;
    border-top: #ffffff 10px solid;
    box-shadow: #545454 0 3px 3px;
}

.pd-box{width:100%;margin:0 auto;/*min-width: 768px;*/}
.pd-box .pd{
	font-family: cwTeXHei,Oswald;
    min-width: 100px;
    min-height: 300px;
    max-width: 340px;
    padding: 1%;
    margin: 1.5%;
    background: #fff;
    border: #d4d4d4 1px solid;
    box-shadow: #cecece 1px 1px 0px 0px;
    border-radius: 2px;
    vertical-align: top;
    width: 30%;
}


.pd-box .pd .main-imgbox{}
.pd-box .pd .main-imgbox .pd-img{
    border: #cecece 1px solid;
    padding: 5%;
    border-radius: 2px;
}
.pd-box .pd .main-imgbox .logoicon{
    position: absolute;
    top: 0%;
    width: 40%;
    right: 0%;
}

.pd-box .pd .sub-imgbox{}
.pd-box .pd .sub-imgbox .subimg{
    width: 20%;
    border: #cecece 1px solid;
    margin: 2% 2px;
    min-width: 40px;
    padding: 2%;
}
.pd-box .pd .brandlogo{
	font-size: 25px;
    margin: 1% 0;
    color: #424242;
    text-decoration: underline;
}
.pd-box .pd .name{
    font-size: 22px;
    color: #424242;
    margin: 0;
}
.pd-box .pd .code{
    font-size: 12px;
    color: #424242;
    margin: 1px 0;
}

.pd-box .pd .original_price{
	font-family:"微軟正黑體";
    font-size: 18px;
	font-weight:bold;
	text-decoration:line-through;
    color: #424242;
    margin: 1px 0;
}

.pd-box .pd .caption{
    font-size: 15px;
    color: #424242;
    margin: 2px 0;
}
.pd-box .pd .caption li{
    font-size: 15px;
    color: #424242;
	margin-top:3px;
}

.pd-box .pd .caption span{
    font-size: 15px;
}
.pd-box .pd .price{
    font-size: 20px;
    color: #f00;
	font-weight:900;
    margin: 3px 0;
}
.pd-box .pd .price .pc{
	font-size: 25px;
    display: inline-block;
}
.pd-box .pd .price .orp{
    text-decoration: line-through;
    color: #424242;
    font-size: 14px;
    display: block;
    margin: 3% 0 0;
}
.pd-box .pd .price .nop{
	font-size: 32px;
    margin: 2%;
}
.pd-box .pd .price .off{
	line-height:30px;
	position: relative;
    top: 0;
    padding: 2% 4%;
    background-color: #F44336;
    color: #fff;
}

.pd-box .pd .morebutton{
    font-size: 2rem;
    color: #00CCCC;
    margin: 1.5% 0;
    padding: 3% 0 1.5%;
    border: #00CCCC 1px solid;
    /* background: #00CCCC; */
}
.pd-box .pd .morebutton:hover{
	background:#00CCCC;
	color:#fff;
}

.zoom-box{
    position: fixed;
    z-index:-1;
    width: 100%;
    top: 0;
    left: 0;
    /*background: rgba(0, 0, 0, 0.7);*/
    height: 100%;
	opacity:0;
}.zoom-box.active{opacity:1;z-index: 99;}
.zoom-box .bg{
    position: fixed;
    z-index: 0;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
}
.zoom-box .imagebox{
    position: relative;
    top: 25%;
    bottom: 25%;
    width: 40%;
    text-align: center;
}
.zoom-box .imagebox .image{
	width: 100%;
    margin: 0 auto;
    padding: 0.5%;
    background: #fff;
    border-radius: 5px;
}
.zoom-box .namebox{
	width: 100%;
    color: #fff;
    top: 22%;
    font-size: 2.5rem;
    font-weight: 900;
}
.zoom-box .namebox .name{}

/******************************分隔線********************************/
.body .news-box .notepage{}
.body .news-box .notepage .box{padding:0;}
.body .news-box .notepage .box:hover{padding:0;}
.body .news-box .notepage .box .in-title{
    width: 100%;
    padding: 1%;font-size:22px;
    font-size: 2.2rem;
    background: #d43d33;
    color: #fff;
}
.body .news-box .notepage .box .in-title .bt-box{
    height: 100%;
    position: absolute;
	top:0;
	right: 5%;
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar{
    width: 30px;
    height: 5px;
	position:absolute;
    border-radius: 50px;
    background: #fff;
	transition:ease-in 0.2s;
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.bartop{top:20%;}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barmid{top:40%;}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barbtm{top:60%;}

.body .news-box .notepage .box .in-title .bt-box:hover .bartop{top:25%;}
.body .news-box .notepage .box .in-title .bt-box:hover .barbtm{top:55%;}

.body .news-box .notepage .box .in-title .bt-box .bt-bar.bartop.active{
	top: 40%;
    transform: rotate(45deg);
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barmid.active{
	opacity:0;
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barbtm.active{
    top: 40%;
    transform: rotate(-45deg);
}

.body .news-box .notepage .box .in-summery{
    font-size:15px;font-size: 1.5rem;
    padding: 2% 8%;
    border: 1px rgba(167, 167, 167, 0.48) solid;
    border-top-width: 0px;
    color: #464646;
    line-height: 1.5;
    letter-spacing: 4px;
}
/****************************************************************************************/
.branddisc{margin:3% 0;}
.branddisc .branddisc-det{
    width: 45%;
    text-align: left;
    background: #fff;
    border: #cecece 1px solid;
    border-radius: 5px;
    padding: 1.5%;
    transition: all 0.2s;
    box-shadow: #cecece 0 0 2px;
    margin: 2%;
    vertical-align: top;
}
.branddisc .branddisc-det:hover{
	box-shadow: #cecece 0 0 4px;
    background:#eaeaea;
}
.branddisc .branddisc-det .dislogo-box{width:30%;display: inline-block;vertical-align:middle;}
.branddisc .branddisc-det .dislogo-box .dislogo{
    border-radius: 100%;
    overflow: hidden;
    padding: 10%;
    background: #fff;
    border: #afafaf 1px solid;
	margin: 3% 0;
}

.branddisc .branddisc-det .distext-box{width:70%;text-align:left;display: inline-block;padding-left:5%;}
.branddisc .branddisc-det .distext-box .distext{
	display: block;
    margin: 5% 0;
    padding: 2% 0;
    border-bottom: #636363 1px solid;
    border-top: #636363 1px solid;
}
.branddisc .branddisc-det .distext-box .distext .distext-tt{display: block;margin-bottom:2%;font-size:16px;color: #424242;}
.branddisc .branddisc-det .distext-box .distext .distext-off{
	display: block;
    font-size: 26px;
    padding: 2% 0;
    color: #C62828;
    font-weight: 900;
}
/****************************************************************************************/