@charset 'utf-8';

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');

@import url('https://fonts.googleapis.com/css?family=Cardo:400,700');

/*------------ basic ------------*/

body {

    font-family: Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei',  '微软雅黑', 'メイリオ', '맑은 고딕', sans-serif;

   color: #1F1F1F;

    font-size: 15px;

    line-height: 1.75;

    letter-spacing: 0.05em;

}

.container {

    padding: 0 15px;

    max-width: 1470px;

}

.wrapper{

    background: url(../../images/common/bg.jpg) no-repeat top ;

    background-size: 100% auto;

}

/*------------ / basic ------------*/

/*--- 隱私權 ---*/



.header-sheet {

    position: fixed;

    max-width: 100%;

    bottom: 43px;

    left: 10px;

    width: 320px;

    padding: 20px 25px 20px 15px;

    height: auto;

    text-align: left;

    z-index: 9999;

    background-color: rgba(255,255,255,0.9);

    color: #444;

    border-radius: 8px;

    border:solid 1px #E7A5D7;

}

.header-sheet .close-ontop {

    color: #000;

    opacity: 1;

    font-size: 2.4rem;

    position: absolute;

    right: -14px;

    top: 13px;

    transform: translateY(-50%);

    font-weight: 100;

}

button.close-ontop {

    -webkit-appearance: none;

    padding: 0;

    cursor: pointer;

    background: 0 0;

    border: 0;

    }

.close-ontop {

    float: right;

    font-size: 21px;

    font-weight: 700;

    line-height: 1;

    color: #000;

    text-shadow: 0 1px 0 #fff;

    filter: alpha(opacity=20);

    opacity: .2;

}

.header-sheet a {

    color:#7F2A99;

    font-weight: bold;

    padding-left: 3px;

    text-decoration: underline;

    text-underline-position: under;

}

/*---! 隱私權 ---*/

/*------------ icon ------------*/

.icon {

}



/*------------ / icon ------------*/



/*------------ btn ------------*/



.share .btn {

    color: #fff;

}



.share .btn{

    background: url(../../images/common/share_icon2.png);

     width: 25px;

    height: 26px;

    font-size: 14px;

    line-height: 26px;

}

.share .btn i{

    line-height: 26px;



}

.share .btn.facebook{

    background-position: 1px 0;

    height: 27px;

}

.share .btn.google{

    background-position: 0px 26px;

    width: 24px;

}

.share .btn.twitter{

    background-position: 0px 52px;

     width: 24px;

}

.share .btn.plurk{

    background-position: 0px 100%;

     width: 24px;

}

.share .btn.facebook:hover{

    background-position: 25px 0;

}

.share .btn.google:hover{

    background-position: 24px 26px;

    width: 24px;

}

.share .btn.twitter:hover{

    background-position: 24px 52px;

     width: 24px;

}

.share .btn.plurk:hover{

    background-position: 24px 100%;

     width: 24px;

}

.site-header .share{

    margin-left: 5px;

}

.site-footer .share{

    display: inline-block;

    margin-left: 10px;

}

.site-footer .share .btn{

    background: url(../../images/common/share_icon.png);

    width: 30px;

    height: 33px;

}

.site-footer .share .btn i{

    display: block;

}

.site-footer .share .btn.facebook{

    background-position: 0 0;

}

.site-footer .share .btn.google{

     background-position: 0px 33px;  

     width: 29px;

}

.site-footer .share .btn.twitter{

    background-position: 0px 66px;  

     width: 29px;

}

.site-footer .share .btn.plurk{

    background-position: 0px 100%;  

     width: 29px;

}

.site-footer .share .btn.facebook:hover{

    background-position: 30px 0px;

}

.site-footer .share .btn.google:hover{

    background-position: 30px 33px; 

}

.site-footer .share .btn.twitter:hover{

   background-position: 30px 66px;  

}

.site-footer .share .btn.plurk:hover{

     background-position: 30px 100%;  

}

.ibtn.fb-fans-page {

    background-image: url('../../images/tw/fb_page.jpg');

    background-color: #B4E0CA;

    width: 144px;

    height: 89px;

}

.ibtn.fb-fans-page:hover {

    background-color: #3A5795;

}

.btn.back {

    color: #261F24;

    background: url('../../images/common/index/more_arrow2.png') 90% 50% no-repeat;

    font-family: 'Montserrat';

    font-size: 14px;

    font-weight: 500;

    display: block;

    vertical-align: middle;

    text-align:center;

    width:323px;

    height:60px;

    line-height:60px;

    padding: 0px 8px;

    transition:all .3s ease;

    right:0;

    letter-spacing: 0.22px;

    box-sizing: border-box;

    position: relative;

    margin:0px auto 0;

}

.btn.back:hover {

      letter-spacing: 0.8px;

}

.btn.back::before {

    content:'';

    display:inline-block;

    border: solid 3px #BDC2C2;

    box-sizing: border-box;

    position:absolute;

    width:100%;

    height:100%;

    right:0;

    top:0;

    border-radius:80px;

    transition:all .3s ease;

}



.btn.back:hover:before {

    top:0;

    right:0;

    width:60px;

    height:60px;

    border-color: #E4A5E7;

    border-radius:100%;

}

.btn.back:after {

    content: '';

    display: inline-block;

    background: #261F24;

    width: 26px;

    height: 2px;

    position: absolute;

    right: 40px;

    top: 50%;

    margin-top: -1px;

    transition: all .3s ease;



}

.btn.back:hover:after {

    width:43px;



}

.ibtn.more {

    background-image: url('../../images/common/btn_more.png');

    width: 101px;

    height: 29px;

}



.btn.simple {

    float: left;

    background: #aaa;

    width: 50%;

    height: 40px;

    color: #fff;

    font-size: 15px;

    letter-spacing: 0.075em;

    line-height: 38px;

    border: 1px solid #fff;

    position: relative;

    overflow:hidden;

}





.btn.simple span{

    position: relative;

    z-index: 5;

}

.btn.simple:before{

    content: '';

    display: block;

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    background: rgb(236,205,196);

    background: -moz-linear-gradient(229deg, rgba(236,205,196,1) 0%, rgba(231,165,231,1) 100%);

    background: -webkit-linear-gradient(229deg, rgba(236,205,196,1) 0%,rgba(231,165,231,1) 100%);

    background: linear-gradient(229deg, rgba(236,205,196,1) 0%,rgba(231,165,231,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eccdc4', endColorstr='#e7a5e7',GradientType=1 );

    opacity: 0;

    transition: all .3s ease;

}

.btn.simple:hover:before {

  opacity: 1;

}

.btn.simple.bg2:before{

    opacity: 1;

}

.btn.simple.bg2:hover:before{

    opacity: 0;

}

.btn.simple.bg2:hover {

    background: #aaa;

}

.btn.simple2 {

    background: #fff;

    border: 1px solid #aaa;

    height: 35px;

    line-height: 33px;

    color: #777;

    font-size: 16px;

    letter-spacing: 0.1em;

    width: 90%;

    max-width: 300px;

    margin: 0 3px 10px;

    position: relative;

}

.btn.simple2:hover {

    border-color: #80CAA5;

}

.btn.simple2 .ic {

    vertical-align: text-bottom;

    margin: 0 8px 0 0;

    color: #e7a5d7;

    font-size: 18px;

}

.btn.simple2 .ic3-angle-double-left,

.btn.simple2 .ic3-angle-double-right {

    position: absolute;

    top: 10px;

    color: #bbb;

    font-size: 12px;

    margin: 0;

}

.btn.simple2 .ic3-angle-double-left {

    left: 8px;

}

.btn.simple2 .ic3-angle-double-right {

    right: 8px;

}

.btn.normal {

    color: #fff;

    font-size: 15px;

    padding: 0 10px;

    min-width: 180px;

    line-height: 40px;

    background: #80CAA5;

    margin: 0 2px 10px;

}

.btn.normal:hover {

   background: #aaa;

}

.btn.normal.send {

    width: 220px;

    font-size: 20px;

    font-weight: bold;

}

.btn.normal .ic {

    vertical-align: middle;

    font-size: 18px;

    margin: 0 0 5px 0;

}

.btn.pure {

    color: #666;

    line-height: 30px;

    margin: 0 5px 10px;

}

.btn.pure:hover {

    color: #80CAA5;

    text-decoration: underline;

}



/*------------ / btn ------------*/



/*------------ site_header ------------*/

.site-header {

}

.site-title {

    position: relative;

    z-index: 5;

    float: left;

    padding: 27px 0 20px;

}

.site-title .logo {

    background: url(../../images/common/logo.png) 50% 50%  no-repeat;

    background-size: contain;

    width: 314px;

    height: 108px;

    transition: all .3s ease;

}

.site-title .logo:hover {

    opacity: .7;

}





.top-nav {

    position: absolute;

    z-index: 10;

    right: 15px;

    top: 15px;

}

.top-nav > * {

    display: inline-block;

    vertical-align: middle;

}



.top-nav .language {

    position: relative;

    width: 115px;

    letter-spacing: 0;

    font-size: 13px;

}

.top-nav .language:before {

    content: 'LANGUAGE';

    color: #7F2A99;

    font-family: 'Montserrat', sans-serif;

    font-size: 16px;

    margin-right: 10px;

    position: absolute;

    right: 100%;

    letter-spacing: 0;

}

.top-nav .language .btn {

    width: 100%;

    border: 1px solid #BDC2C2;

    color: #1F1F1F;

    text-align: left;

    line-height: 23px;

    padding: 0 25px 0 10px;

    position: relative;

    border-radius: 4px;

}

.top-nav .language .btn:after {

    content: '';

    display: block;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 6px 4px 0 4px;

    border-color: #1F1F1F transparent transparent transparent;

    position: absolute;

    right: 8px;

    top: 8px;

}

.top-nav .language ul {

    position: absolute;

    z-index: 10;

    top: 100%;

    left: 0;

    right: 0;

    display: none;

}

.top-nav .language li {

    display: block;

}

.top-nav .language li a {

    display: block;

    background: #fafafa;

    padding: 4px 10px;

    font-size: 13px;

    transition: all .3s ease;

}

.top-nav .language li a:hover {

    color: #7F2A99;

}



.site-nav {

    position: relative;

    padding: 88px 40px 12px 0;

    margin-left: 140px;

    text-align: right;

}

.site-nav > * {

    display: inline-block;

    vertical-align: middle;

}

.site-nav .menu {

    text-align: center;

    margin: 0 -20px;

}

.site-nav .menu li {

    position: relative;

}

.site-nav .menu li a {

    display: block;

}

.site-nav .menu > li {

    padding: 0 7px;

    margin: 0 -4px;

}

.site-nav .menu > li > a {

    color: #1F1F1F;

    font-size: 16px;

    padding: 10px 19px;

    width: 125px;

    box-sizing: border-box;

    white-space: nowrap;

}

.site-nav .menu > li > a:before{

    height: 1px;

    background: #DCA5E7;

    position: absolute;

    top: 0;

    left: -20px;

    right: -20px;

    opacity: 0;

    content: '';

    transition: all .3s ease;

}

.site-nav .menu > li:hover > a:before,

.site-nav .menu > li.active > a:before,

.site-nav .menu > li:hover > a:after,

.site-nav .menu > li.active > a:after {

    opacity: 1;

}

.site-nav .menu > li > a:after{

    height: 4px;

    background: #DCA5E7;

    position: absolute;

    bottom: 0;

    left: -20px;

    right: -20px;

    opacity: 0;

    content: '';

    transition: all .3s ease;

}

.site-nav .menu > li:before {

    content: '';

    display: block;

    width: 4px;

    height: 4px;

    background: #BDC2C2;

    position: absolute;

    left: 0px;

    top: 50%;

    margin-top: -2px;

    border-radius: 50%;

}

.site-nav .menu > li:nth-last-child(4):after{

    content: '';

    display: block;

    width: 4px;

    height: 4px;

    background: #BDC2C2;

    position: absolute;

    right: 0px;

    top: 50%;

    margin-top: -2px;

    border-radius: 50%;   

}

.site-nav .menu ul {

    display: none;

    font-family: Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei',  '微软雅黑', 'メイリオ', '맑은 고딕', sans-serif;

    position: absolute;

    background-color: #FAFAFA;

    z-index: 600;

    width: 208px;

    box-sizing: border-box;

}

.site-nav .menu > li > ul {

    top: 100%;

    left: 50%;

    margin-left: -104px;

}



.site-nav .menu ul li+li {

}

.site-nav .menu ul li a {

    font-size: 16px;

    text-align: center;

    padding: 10px 8px;

    color: #1F1F1F;

}

.site-nav .menu ul li a:hover,

.site-nav .menu ul li.active > a {

    background: #ECC4CF;

}

.site-nav .menu ul ul li a:hover,

.site-nav .menu ul ul li.active > a {

    background: #E7A5D2;

}



.site-nav .menu ul ul {

    left: 100%;

    top: 0;

}

.site-nav .menu > li:nth-last-child(-n+3) {

    display: none;

}



.site-header .search-box {

    position: relative;

    width: 200px;

    box-sizing: border-box;

    margin-left: 10px;

}

.site-header .search-box .form-control {

    border: 1px solid #80CAA5;

    background: #fff;

    height: 30px;

    line-height: 28px;

    margin: 0;

    padding: 0 42px 0 12px;

    border-radius: 15px;

}

.site-header .search-box .form-control:focus {

    background: #e6f4ed;

}

.site-header .search-box .ibtn.search {

    background-image: url(../../images/common/btn_search.svg);

    width: 30px;

    height: 30px;

    position: absolute;

    right: 2px;

    top: 0;

}

.no-svg .site-header .search-box .ibtn.search {

    background-image: url(../../images/common/btn_search.png);

}



/*------------ / site_header ------------*/

/*fixed*/

.site-header{

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 995;

    background: #FFF;

    transition: all .3s ease;

}

.site-nav{

    transition: all .3s ease;    

}

.header-fixed .site-header{

    background: #fff;

}

.header-fixed .site-nav{

    padding-top: 30px;

}

.header-fixed .site-title .logo{

    height: 60px;

    width: 200px;

}

.header-fixed .site-title{

    padding: 15px 0 10px;

}

.header-fixed .top-nav{

    display: none;

}

.wrapper{

    padding-top: 155px;

}

/*------------ banner ------------*/

.banner {

    position: relative;

}

.banner .container {

    max-width: 1440px;

    padding: 0;

}

.banner .container:before{

    content: '';

    display: block;

    background: url(../../images/common/shadow.png);

    width: 701px;

    height: 370px;

    position: absolute;

    right: -50px;

    bottom: -50px;

    background-size: contain;

}

.banner .container img{

    position: relative;

    z-index: 5;

}

/*------------ / banner ------------*/



/*------------ site_main ------------*/

.main-top .container {

    max-width: 1440px;

    padding: 0;

}

.main-title {

    font-family: 'Montserrat','Times New Roman', Times, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei',  '微软雅黑', 'メイリオ', '맑은 고딕', serif;

    font-size: 40px;

    font-weight: 300;

    text-align: center;

    padding-bottom: 10px;

    text-transform: uppercase;

    margin: 0;

    color: #261F24;

    line-height: 1.4;

    background: url(../../images/common/title_border.png) bottom center no-repeat;

}

.main-title:before{

    content: '';

    display: block;

    margin: 0 auto 0px;

    background: url(../../images/common/title_ic.png);

    width: 11px;

    height: 13px;



}

.main-content {

    padding: 0 0 120px;

}

.content {

    min-height: 300px;

    box-sizing: border-box;

    max-width: 1200px;

    margin: auto;

}

.content-top {

    margin-bottom: 25px;

}

.content-title {

    margin: 0;

    text-align: center;

    position: relative;

    padding: 18px 0;

   /* 

    font-weight: normal;*/

    font-size: 20px;

    color: #7F2A99;

    font-weight: bold;

}



.content-title2 {

    color: #e7a5d7;

    font-size: 25px;

    font-weight: bold;

    text-align: center;

    margin: 0 0 10px;

}

.content-title .keyword {

    color: #F2856C;

}

.shopping-title {

    color: #1F1811;

    font-size: 16px;

    font-weight: normal;

    margin-bottom: 10px;

}

.shopping-title .ic {

    font-size: 22px;

    color: #e7a5d7;

    vertical-align: middle;

    margin: 0 3px 3px 0;

}

.shopping-title .ic3-bag-plus {

    font-size: 26px;

    margin-right: 10px;

}



.btn-box {

    clear: both;

    padding-top: 30px;

    position: relative;

    text-align: center;

}

.btn-box:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: ' ';

    clear: both;

    height: 0;

}

.btn-box.wide-spacing {

    letter-spacing: 15px;

}

.btn-box.wide-spacing * {

    letter-spacing: 0.1em;

}



.warning-sect {

    padding-bottom: 30px;

}



/*------------ / site_main ------------*/



/*------------ breadcrumb ------------*/

.breadcrumb {

    text-align: left;

    color: #1F1F1F;

    font-size: 14px;

    padding: 5px 15px;

    margin: 12px 0 24px;



    font-family: Montserrat,Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei',  '微软雅黑', 'メイリオ', '맑은 고딕', sans-serif;

}

.breadcrumb li,

.breadcrumb li a {

    display: inline;

}

.breadcrumb li+li:before {

    content: '/ ';

    display: inline-block;

    margin: 0 3px;

}

.breadcrumb li a:hover {

    color: #333;

}

.content-top .breadcrumb {

    background: none;

    color: #525252;

    padding: 0px 0;

    font-size: 20px;

    text-align: center;

    margin: 0;

    font-weight: normal;

}

.content-top .breadcrumb li:last-child{

    color: #7F2A99;

    font-weight: bold;

}

.content-top .breadcrumb li+li:before {

    content: '';

    background: url(../../images/common/bread_ic.png);

    width: 8px;

    height: 10px;

    vertical-align: middle;

    margin:-5px 10px 0;

}

.content-top .breadcrumb li:first-child a:before {

    display: none;

}



/*------------ / breadcrumb ------------*/



/*------------ side ------------*/

.side {

    width: 300px;

    float: left;

}

.has-side .content {

    width: calc(100% - 340px);

    float: right;

}

.side-title {

    padding: 13.5px 20px;

    color: #444443;

    font-size: 28px;

    font-weight: bold;

    background: url(../../images/common/side_title.png) no-repeat;

    border-top: 2px solid #535353;

    border-bottom: 1px solid #261F24;

    margin-bottom: 20px;

}

.side-nav,

.side-nav-top {

    position: relative;

    font-size: 15px;

}

.side-nav li a {

    position: relative;

    display: block;

    line-height: 1.4;

    padding: 8px 16px;

}

.side-nav li {

    /*margin-bottom: 2px;*/

}



.side-nav > li > a {

    color: #1F1F1F;

    font-size: 17px;

    font-weight: bold;

    position: relative;

    padding: 12.5px 10px 12.5px 24px;

    line-height: 1.4;

    transition: all .3s ease;

}

.side-nav > li + li{

    border-top: solid 1px #261F24;



}

.side-nav > li > a:hover,

.side-nav > li.active > a{

    color: #fff;

   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#984db0+0,dca5e7+100 */

    background: rgb(152,77,176); /* Old browsers */

    background: -moz-linear-gradient(left, rgba(152,77,176,1) 0%, rgba(220,165,231,1) 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(left, rgba(152,77,176,1) 0%,rgba(220,165,231,1) 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to right, rgba(152,77,176,1) 0%,rgba(220,165,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#984db0', endColorstr='#dca5e7',GradientType=1 ); /* IE6-9 */

}

.side-nav ul  li > a:hover,

.side-nav ul li.active > a{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e7a5e7+0,eccdc4+100&0.6+0,0.6+100 */

    background: -moz-linear-gradient(left, rgba(231,165,231,0.6) 0%, rgba(236,205,196,0.6) 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(left, rgba(231,165,231,0.6) 0%,rgba(236,205,196,0.6) 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to right, rgba(231,165,231,0.6) 0%,rgba(236,205,196,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99e7a5e7', endColorstr='#99eccdc4',GradientType=1 ); /* IE6-9 */

}

.side-nav ul li > a:before{

    content: ' ';

    display: block;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 5px 0 5px 8px;

    border-color: transparent transparent transparent #B5AA97;

    position: absolute;

    left: 14px;

    top: 18px;

}

.side-nav ul li.has-child.active > a:before{

    border-width: 8px 5px 0 5px;

    border-color: #B5AA97 transparent transparent transparent;

}

.side-nav ul {

    display: none;

}

.side-nav ul li a {

    padding: 12.5px 10px 12.5px 50px;

    color: #1F1F1F;

    line-height: 1.4;

    font-size: 17px;

    border-bottom: solid 1px #DFE1E1;

}

.side-nav ul ul{

    padding-top: 2px;

}

.side-nav ul ul li a{

     background: #FAFAFA;

     border:3px solid transparent;

     transition: all .3s ease;

     font-size: 16px;

}

.side-nav ul ul li a:before{

    display: none;

}

.side-nav ul ul li a:hover,

.side-nav ul ul li.active > a {

    background: #FAFAFA;

    border-color:#E4A5E7;

}

.side-nav ul ul ul{

    padding-bottom: 30px;

}

.side-nav ul ul ul li{

    padding-left: 35px;

}

.side-nav ul ul ul li a{

     border-width: 0 0 1px 0;

     border-color: #DFE1E1;

     background: #fff;

}

.side-nav ul ul ul li a:hover,

.side-nav ul ul ul li.active > a {

    border-color:#E4A5E7;

    background: #fff;

}



/*------------ / side ------------*/



/*------------ site_footer ------------*/

.footer-top {

    font-size: 15px;

    padding: 46px 0 30px;

    letter-spacing: 0;

    background: url(../../images/common/footer_bg.jpg);

}



.footer-top .row {

    margin: 0 -20px;

}

.footer-top .col {

    float: left;

    min-height: 220px;

    padding: 0 20px;

}

.footer-top .col1 {

    border-left-width: 0;

    width: 35%;

}



.footer-top .col3 {

    width: calc(65% - 397px);

    float: right;

    border-right-width: 0;

}

.footer-title {

    color: #261F24;

    font-size: 20px;

    font-weight: 500;

    font-family: Montserrat;

    margin-bottom: 12px;

    margin-bottom: 35px;

}

.footer-title .ic {

    width: 24px;

    height: 24px;

    line-height: 24px;

    color:#261F24;

    font-size: 16px;

    text-align: center;

}

.footer-top .map-box {

    height: 150px;

    border: 1px solid #aaa;

    margin-top: 40px;

}

.site-map {

    font-size: 13px;

    letter-spacing: 35px;

}

.site-map ul {

    display: inline-block;

    vertical-align: top;

    letter-spacing: 0.5px;

    text-align: left;

}



.site-map ul li a {

    display: inline-block;

    padding: 3px 6px 3px 24px;

    position: relative;

    transition: all .3s ease;



}

.site-map ul li a:hover{

    color: #7F2A99;

}

.site-map ul li a:before {

    content: '';

    display: inline-block;

    background: #BDC2C2;

    width: 5px;

    height: 5px;

    position: absolute;

    left: 8px;

    top: 10px;

    -webkit-border-radius: 50%;

    border-radius: 50%;

}

.follow {

    margin-top: 30px;

}

.qrcode {

    display: inline-block;

}

.site-info {

    line-height: 1.8;

    letter-spacing: 0.5px;

}

.site-info .box{

    position: relative;

    padding-left: 80px;

    font-size: 14px;

    margin-bottom: 38px;

    color: #1F1F1F;

    line-height: 1.5



}

.site-info .box .tit{

    position: absolute;

    width: 80px;

    top: 0;

    left: 0;

    font-size: 18px;

    font-weight: bold;

    color: #271F24;

    border-right: 1px solid #281F24;



}

.site-info .box .txt{

    border-left: 1px solid #BDC2C2;

    margin-left: 0px;

    padding-left: 20px;

}

.footer-bottom {

    background: #AFB6B6;

    font-size: 13px;

    color: #fff;

    text-align: center;

    padding: 8px 0;

}

.footer-bottom a {

    color: #fff;

}

.footer-bottom a:hover {

    text-decoration: underline;

}



/*------------ / site_footer ------------*/



/*------------ floating ------------*/

.floating,

.floating.fancybox-margin {

    display: none;

    position: fixed;

    right: 42px;

    bottom: 40%;

    z-index: 400;

    transition: all .3s ease;

}

.floating .gotop {

    display: inline-block;

    background: #fff;

    border:solid 1px #BDC2C2;

    border-radius: 50%;

    width: 79px;

    height: 79px;

    text-align: center;

    font-size: 15px;

    font-family: Montserrat;

    font-weight: 500;

    overflow:hidden;

    box-sizing: border-box;

    position: relative;

}

.floating .gotop a:before{

    background: url(../../images/common/gotop.png) no-repeat;

    content: '';

    display: block;

    width: 100%;

    height: 26px;

    background-position: center bottom;

    margin-top: 12px;

    margin-bottom: 2px;

}

.gotop a{

    display: block;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 5;

    top: 0;

    width: 79px;

    height: 79px;

    border-radius: 50%;

    overflow:hidden;

}

.floating .gotop:before{

    display: block;

    content: '';

    width: 100%;

    height: 100%;

    position: absolute;

    right: 0;

    top: 0;

    transition: all .3s ease;

    background: rgb(236,205,196);

    background: -moz-linear-gradient(229deg, rgba(236,205,196,1) 0%, rgba(231,165,231,1) 100%);

    background: -webkit-linear-gradient(229deg, rgba(236,205,196,1) 0%,rgba(231,165,231,1) 100%);

    background: linear-gradient(229deg, rgba(236,205,196,1) 0%,rgba(231,165,231,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eccdc4', endColorstr='#e7a5e7',GradientType=1 );

    opacity: 0;

}

.floating .gotop:hover{

    border-color: transparent;

}

.floating .gotop:hover:before{

    opacity: 1;

}

.floating .gotop:hover a:before{

    -webkit-animation: move-up-anim .65s cubic-bezier(0.215,.61,.355,1) 0s infinite;

    animation: move-up-anim .65s cubic-bezier(0.215,.61,.355,1) 0s  infinite;

}

@-webkit-keyframes move-up-anim {

    0% {

        -webkit-transform: translate3d(0,0,0);

        opacity: 1

    }



    50% {

        -webkit-transform: translate3d(0,-10px,0);

        opacity: 0

    }



    50.1% {

        -webkit-transform: translate3d(0,10px,0);

        opacity: 0

    }



    100% {

        -webkit-transform: translate3d(0,0,0);

        opacity: 1

    }

}



@keyframes move-up-anim {

    0% {

        transform: translate3d(0,0,0);

        opacity: 1

    }



    50% {

        transform: translate3d(0,-10px,0);

        opacity: 0

    }



    50.1% {

        transform: translate3d(0,10px,0);

        opacity: 0

    }



    100% {

        transform: translate3d(0,0,0);

        opacity: 1

    }

}

.no-svg .floating .ibtn.gotop {

    background-image: url(../../images/common/gotop.png);

}

.floating .ibtn.gotop:hover {

    opacity: 1;

}







/*------------ / floating ------------*/



/*------------ pagination ------------*/

.pagination {

    padding: 0;

    margin: 0;

    text-align: center;

    letter-spacing: 0;

}

.pagination li {

    display: inline-block;

    vertical-align: top;

}

.pagination li a {

    display: block;

    min-width: 30px;

    height: 30px;

    line-height: 30px;

    color: #787878;

    font-size: 16px;

    padding: 0 5px;

    margin: 0 2px;

    border-radius: 20px;

    box-sizing: border-box;

}

.pagination li a:hover,

.pagination li.active a {

    background:#e7a5d7;

    color: #fff;

}

.pagination li a.controls {

    padding: 0;

    font-size: 22px;

    color: #ccc;

    line-height: 32px;

}

.pagination li a.controls:hover {

    color: #e7a5d7;

    background: none;

}

.page-info {

    display: none;

}

.page-info .form-control {

    height: 30px;

    line-height: 28px;

    border: 1px solid #ddd;

    margin: 0;

    background: none;

}

.page-info .form-control:focus {

    border-color: #80caa5;

}



/*------------ / pagination ------------*/



/*------------ form ------------*/

.reminder {

    color: #777;

    position: relative;

    margin: 0 0 30px;

    text-align: center;

}

.reminder span {

    display: inline-block;

    color: #b54aa6;

}

.reminder b {

    display: inline-block;

    font-size: 20px;

    line-height: 1;

    vertical-align: bottom;

    margin-bottom: -2px;

}



.qty-box {

    position: relative;

    display: inline-block;

    width: 100px;

    max-width: none;

    padding: 0 29px;

    box-sizing: border-box;

}

.qty-box .form-control {

    position: relative;

    text-align: center;

    height: 30px;

    line-height: 28px;

    color: #777;

    background: #fff;

    border: 1px solid #ddd;

    margin: 0;

    padding: 0 5px;

    z-index: 1;

    border-radius: 0;

}

.qty-box .form-control:focus {

    border-color: #e7a5d7;

}

.qty-box .btn {

    width: 30px;

    height: 30px;

    line-height: 28px;

    font-size: 19px;

    color: #666;

    border: 1px solid #ddd;

    position: absolute !important;

    z-index: 0;

    top: 0;

}

.qty-box .btn:hover {

    border-color: #e7a5d7;

    background: #eee;

    z-index: 2;

}

.qty-box .less {

    left: 0;

}

.qty-box .add {

    right: 0;

}



.form-control {

    display: block;

    width: 100%;

    height: 36px;

    line-height: 34px;

    padding: 0 10px;

    border: 1px solid #ddd;

    border-radius: 4px;

    box-sizing: border-box;

    margin-bottom: 6px;

    transition: all .3s ease;

}

.form-control:focus {

    outline: none;

    border: 1px solid #e7a5d7;

}

textarea.form-control {

    padding: 8px 10px;

    line-height: 1.4;

    resize: vertical;

    height: auto;

}

.static-control {

    line-height: inherit;

    color: #444;

    font-size: 16px;

    margin: 0 0 6px;

    padding: 0 5px;

}

.form-wrap {

    margin: 0 auto;

}

.form-wrap.type2 {

    max-width: 900px;

}

.form-wrap .btn-box {

    margin: 0 auto;

    max-width: 900px;

}

.form-box {

    margin: 0 auto;

}

.form-box .row {

    margin: 0 -24px;

    position: relative;

}

.form-box .row:before {

    content: '';

    border-left: 1px solid #DCDCDC;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

}

.form-box .col {

    float: left;

    width: 50%;

    padding: 0 24px;

}

.form-box .required {

    position: relative;

}

.form-box .required:before {

    content: '*';

    display: inline-block;

    vertical-align: middle;

    line-height: 1;

    font-size: 22px;

    margin: 0 4px -4px 0;

}

.form-box .form-group {

    padding: 4px 0;

    line-height: 36px;

}

.form-box .control-label {

    display: block;

    font-size: 15px;

    color: #b54aa6;

    line-height: inherit;

}

.form-box .control-box {

    position: relative;

}

.form-box .control-box label {

    display: inline-block;

    line-height: inherit;

    margin: 0 10px 6px 5px;

}

.form-box .captcha .form-control {

    display: inline-block;

    vertical-align: top;

    width: 46%;

    max-width: 280px;

}

.form-box .captcha a {

    display: inline-block;

    vertical-align: top;

    color: #80CAA5;

    font-size: 20px;

    line-height: inherit;

    margin-left: 5px;

    margin-bottom: 6px;

    transition: all .3s ease;

}

.form-box .captcha a:hover {

    color: #ccc;

}

.form-box .captcha a * {

    vertical-align: middle;

}

.form-box .captcha a .ic {

    transition: transform .3s;

}

.form-box .captcha a:hover .ic {

    transform: rotate(270deg);

}

.form-box .name .control-box {

    position: relative;

}

.form-box .name .radio-box {

    line-height: 36px;

    position: absolute;

    right: 0;

    bottom: 100%;

}

.form-box .name .radio-box label {

    display: inline-block;

    margin-bottom: 0;

}

.form-box .name2 .control-box {

    padding-right: 150px;

}

.form-box .name2 .radio-box {

    line-height: 36px;

    position: absolute;

    right: 0;

    bottom: 0;

}

.form-box .name2 .radio-box label {

    margin-bottom: 0;

}

.form-box .tips {

    line-height: 1.2;

    margin-bottom: 6px;

    color: #80CAA5;

    font-size: 13px;

    padding: 0 5px;

}

.form-wrap.type1 .tips {

    min-height: 36px;

    line-height: 18px;

}



.form-box .input-group {

    margin: 0 -3px;

}

.form-box .input-group:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: ' ';

    clear: both;

    height: 0;

}

.form-box .input-group .input-box {

    float: left;

    width: 50%;

    padding: 0 3px;

    box-sizing: border-box;

}

.form-box .input-group .form-control {

    display: inline-block;

}



.form-box .name .control-box {

    position: relative;

}

.form-box .name .radio-box {

    line-height: 36px;

    position: absolute;

    right: 0;

    bottom: 100%;

}

.form-box .name .radio-box label {

    display: inline-block;

    margin-bottom: 0;

}

.form-box .address .input-box:last-child {

    width: 100%;

}

.form-box .address2 .input-box {

    width: 22%;

}

.form-box .address2 .input-box:last-child {

    width: 56%;

}

.form-radio,

.form-checkbox {

    display: inline-block;

    position: relative;

}

.form-radio input[type=radio],

.form-checkbox input[type=checkbox] {

    cursor: pointer;

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0!important;

    visibility: hidden;

    outline: 0;

    z-index: 3;

    width: 17px;

    height: 17px;

}

.form-radio:before,

.form-checkbox:before {

    content: '';

    display: inline-block;

    vertical-align: middle;

    background: 50% 0 / 100% auto no-repeat;

    width: 16px;

    height: 16px;

    margin: 0 0 3px;

}

.form-radio:before {

    background-image: url('../../images/common/form_radio.svg');

}

.no-svg .form-radio:before {

    background-image: url('../../images/common/form_radio.png');

}

.form-checkbox:before {

    background-image: url('../../images/common/form_checkbox.svg');

}

.no-svg .form-checkbox:before {

    background-image: url('../../images/common/form_checkbox.png');

}

.form-radio.checked:before,

.form-checkbox.checked:before {

    background-position: 0 100%;

}



.success-wrap {

    text-align: center;

    max-width: 890px;

    margin: 0 auto;

    padding: 0 35px;

    border-radius: 15px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.success-box {

    text-align: center;

    line-height: 2;

}

.success-msg {

    color: #e7a5d7;

    font-size: 25px;

    font-weight: bold;

    line-height: 1.5;

    margin: 0 auto 15px;

}



.success-txt {

    line-height: 1.8;

    color: #777;

    padding-bottom: 10px;

}

.success-txt strong {

    color: #444;

    font-size: 17px;

}

.success-txt a {

    text-decoration: underline;

    color: #000;

}

.success-txt a:hover {

    text-decoration: none;

}

.success-wrap .btn-box {

    max-width: 700px;

    margin: 0 auto;

}



/*------------ / form ------------*/





/*------------ lightbox ------------*/

body .fancybox-close {

    background: url(../../images/common/lightbox_close.png) no-repeat;

    width: 70px;

    height: 30px;

    right: 10px;

    top: -36px;

}

.no-svg body .fancybox-close {

    background-image: url(../../images/common/lightbox_close.png)

}

body .fancybox-close:hover {

    background-position: 0 100%;

}

body .fancybox-skin {

    background: #ccc;

    border-radius: 0;

    margin-top: 40px;

    border-radius: 10px;

}

body .fancybox-inner {

    background: #F2FAF6;

    border-radius: 13px;

}

.fancybox-album .fancybox-skin {

    background: #fff;

    margin: 40px 60px 5px;

}

.fancybox-album .fancybox-nav span {

    background: url('../../images/common/album/lightbox_arrow.png') no-repeat;

    width: 40px;

    height: 40px;

    margin-top: -20px;

    visibility: visible;

}

.fancybox-album .fancybox-prev span {

    background-position: 0 0;

    left: -70px;

}

.fancybox-album .fancybox-next span {

    background-position: 100% 0;

    right: -70px;

}

.fancybox-album .fancybox-prev:hover span {

    background-position: 0 100%;

}

.fancybox-album .fancybox-next:hover span {

    background-position: 100% 100%;

}

.fancybox-album .fancybox-title {

    font-family: inherit;

    color: inherit;

    line-height: inherit;

}

.fancybox-album .photo-pager {

    text-align: right;

}

.fancybox-album .photo-title {

    color: #444;

    font-size: 15px;

    font-weight: bold;

}

.fancybox-album .photo-intro {

    color: #888;

    padding: 5px 0 15px;

}



/*------------ / lightbox ------------*/



.mmenu-show #mobile-fixed li,

.mmenu-show #mobile-search,

.mmenu-show #member-box li a {

    background: #e7a5d7;

}

.mmenu-show #mobile-fixed ul,

.mmenu-show #member-box li {

    border-bottom-color: #e7a5d7;

}

.mmenu-show #mobile-menu .side-nav-top > li a:before {

    border-color: #e7a5d7;

}

.mmenu-show #mobile-menu .menu li a:hover,

.mmenu-show #mobile-menu .menu li.active > a {

    color: #e7a5d7;

}

.mmenu-show #mobile-menu .share .btn .ic {

    vertical-align: middle;

}



@media screen and (max-width: 1600px) {

/*------------ floating 1600 ------------*/

    .floating,

    .floating.fancybox-margin {

        right: 0;

        margin: 0;

    }

/*------------ / floating 1600 ------------*/

}

@media screen and (max-width: 1370px) {

/*------------ site_footer 1370 ------------*/

    .site-map {

        letter-spacing: 15px;

    }

/*------------ / site_footer 1370 ------------*/

}

@media screen and (max-width: 1340px) {

/*------------ site_header 1340 ------------*/

    .site-header .search-box {

        position: absolute;

        top: 55px;

        right: 0;

    }

/*------------ / site_header 1340 ------------*/

}

@media screen and (max-width: 1280px) {

/*------------ site_footer 1280 ------------*/

    .footer-top .col {

        width: 50%;

        border-width: 0;

        margin: 0;

        min-height: 0;

    }

    .footer-top .col3 {

        width: 100%;

        padding-top: 30px;

    }

    .footer-top .map-box {

        margin-top: 0;

    }

    .follow {

        margin-top: 20px;

    }

    .site-map ul {

        display: inline;

    }

    .site-map ul li {

        display: inline-block;

    }

/*------------ / site_footer 1280 ------------*/

}

@media screen and (max-width: 1200px) {

/*------------ side 1200 ------------*/

    .side {

        width: 260px;

    }

    .has-side .content {

        width: calc(100% - 290px);

    }

/*------------ / side 1200 ------------*/

}

@media screen and (max-width: 1120px) {

/*------------ site_header 1120 ------------*/

    .site-title {

        padding: 10px 0;

    }

    .site-nav {

        clear: both;

        position: static;

        margin: 0;

        padding: 0 0 10px;

        text-align: center;

    }

    .top-nav {

        right: 15px;

    }

    .site-header .search-box {

        right: 15px;

        top: 70px;

    }

/*------------ / site_header 1120 ------------*/

}

@media screen and (max-width: 1000px) {

    .mmenu-show #mobile-menu .share .btn {

        width: 25px;

        height: 26px;

    }

    .mmenu-show #mobile-menu .language{

        color: #fff;

        background: rgb(231,165,231); /* Old browsers */

        background: -moz-linear-gradient(left, rgba(231,165,231,1) 0%, rgba(236,205,196,1) 100%); /* FF3.6-15 */

        background: -webkit-linear-gradient(left, rgba(231,165,231,1) 0%,rgba(236,205,196,1) 100%); /* Chrome10-25,Safari5.1-6 */

        background: linear-gradient(to right, rgba(231,165,231,1) 0%,rgba(236,205,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7a5e7', endColorstr='#eccdc4',GradientType=1 ); /* IE6-9 */

    }

    .mmenu-show .toggle-mmenu-close{

        color: #fff;

    }

    .wrapper{

        padding-top: 40px;

        background: none;

    }



    .site-header{

        position: static;

    }

    .header-fixed .site-title .logo,.site-title .logo {

        height: 60px;

        width: 200px;

    }

    .banner .container:before{

        display: none;

    }

    /*--- 隱私權手機板 ---*/

    .header-sheet {

        position: fixed;

        height: auto;

        bottom: 0%;

        font-size: 14px;

        padding: 40px 0 10px;

        left: 0;

        width: 100%;

        box-sizing: border-box;

        text-align: center;

        border-radius: 0;

    }

    .header-sheet .close-ontop {

        right: 0px;

        left: 0px;

        top: -21px;

        margin: auto;

        text-align: center;

        width: 100%;

        height: 35px;

    }

    button.close-ontop{

        padding:0px;

    }

    .close-ontop {

        float: none;

    }



    body #keyreply-container {

        bottom: 10%;

    }

    .header-active #keyreply-container {

        bottom: 0%;

        transition:all .7s;

    }

    .header-fixed .header-sheet{

        display:block;

    }

    /*--- END隱私權手機板 ---*/

/*------------ site_header 1000 ------------*/

    .site-title ,.header-fixed .site-title{

        float: none;

        text-align: center;

        padding: 10px 0;

    }

    .top-nav,

    .site-nav {

        display: none;

    }

/*------------ / site_header 1000 ------------*/

/*------------ site_main 1000 ------------*/

    .main-content {

        padding-bottom: 80px;

    }

/*------------ / site_main 1000 ------------*/

/*------------ site_footer 1000 ------------*/

    .footer-top {

        padding: 20px 0 10px;

    }

    .footer-top .container {

        text-align: center;

    }

    .footer-top .col {

        width: auto;

        float: none;

        clear: both;

        padding-bottom: 20px;

    }

    .footer-top .map-box {

        margin: 0;

    }

    .site-info {

        margin-left: 0;

    }

    .footer-top .col3 {

        display: none;

    }

/*------------ / site_footer 1000 ------------*/

/*------------ floating 1000 ------------*/

    .floating,

    .floating.fancybox-margin {

        background: none;

        right: 50%;

        bottom: -5px;

        margin-right: -15px;

    }

    .floating .gotop{

        background-color: transparent;

    }

    .no-svg .floating .gotop {

        background-image: url(../../images/common/mobile_gotop.png);

        background-repeat:no-repeat;

        width: 30px;

        height: 30px;

        background-size: contain;

        text-indent: -9999px;

        border:none;

        background-color: none;

    }



    .floating .ibtn.gotop:hover {

        opacity: 1;

    }

    .gotop a{

        width: 30px;

        height: 30px;

    }

    .floating .gotop a:before,.floating .gotop:before{

        display: none;

    }

    .footer-top .col1,.site-map{

        display: none;

    }

    .footer-title{

        display: none;

    }

    .site-footer .share{

        display: block;

        margin-left: 0;

        margin-top: 5px;

    }

    .footer-bottom{

        padding-bottom: 30px;

    }

    .main-title{

        font-size: 26px;

        margin-bottom: 15px;

    }

    .content-title{

        padding-top: 3px;

    }

    .breadcrumb{

        margin-bottom: 10px;

    }

    .side{

        display: none;

    }

    .content-title,.content-top .breadcrumb{

        font-size: 16px;

    }

    .content-top .breadcrumb li+li:before{

        margin:-5px 5px 0;

    }

    .content-top{

        margin-bottom: 5px;

    }

    .mmenu-show #mobile-menu .menu ul ul li a{

        line-height: 1.8;

    }

    .mmenu-show #mobile-menu .menu ul ul ul li a{

        padding-left: 70px;

    }

    .mmenu-show #mobile-menu .menu ul ul ul ul li a{

         padding-left: 90px;

    }

/*------------ / floating 1000 ------------*/

}

@media screen and (max-width: 767px) {

/*------------ site_main 767 ------------*/

    .main-content {

        padding: 0 0 60px;

    }



    .content-title2 {

        font-size: 18px;

    }

/*------------ / site_main 767 ------------*/

/*------------ breadcrumb 767 ------------*/

    .content-top .breadcrumb {

        float: none;

    }

/*------------ / breadcrumb 767 ------------*/

/*------------ pagination 767 ------------*/

    .page-info {

        display: block;

        padding: 0 40px;

    }

    .pagination {

        position: relative;

        height: 0;

    }

    .pagination li a {

        display: none;

    }

    .pagination li a.controls {

        display: block;

        position: absolute;

        bottom: -30px;

    }

    .pagination li a.prev {

        left: 0;

    }

    .pagination li a.next {

        right: 0;

    }

/*------------ / pagination 767 ------------*/

/*------------ form 767 ------------*/

    .form-title {

        font-size: 36px;

    }

    .form-box .row:before {

        display: none;

    }

    .form-box .col {

        width: 100%;

    }

    .form-box .name2 .control-box {

        padding: 0;

    }

    .form-box .name2 .radio-box {

        bottom: 100%;

    }

    .form-box .address2 .input-box {

        width: 50%;

    }

    .form-box .address2 .input-box:last-child {

        width: 100%;

    }

    .form-wrap .form-box .tips {

        min-height: 0;

    }

    .success-wrap {

        padding: 30px 15px;

    }

    .success-msg {

        font-size: 20px;

        background-size: 80px;

    }

/*------------ / form 767 ------------*/

/*------------ lightbox 767 ------------*/

    .fancybox-album .fancybox-skin {

        margin: 40px 0 5px;

        padding: 10px !important;

    }

    .fancybox-album .fancybox-close {

        right: 50%;

        margin-right: -35px;

    }

    .fancybox-album .fancybox-nav span {

        margin: 0;

        top: -54px;

    }

    .fancybox-album .fancybox-prev span {

        left: -15px;

    }

    .fancybox-album .fancybox-next span {

        right: -15px;

    }

/*------------ / lightbox 767 ------------*/

}

@media screen and (max-width: 400px) {

/*------------ form 400 ------------*/

    .form-box .form-group .input-box {

        width: 100%;

    }

/*------------ / form 400 ------------*/

/*------------ btn 400 ------------*/

    .btn.simple {

        margin: 0 auto 10px;

    }

/*------------ / btn 400 ------------*/

}