@charset 'utf-8';

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');



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

body {

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

    color: #666666;

    font-size: 14px;

    line-height: 1.6;

    letter-spacing: 0.05em;

}

.container {

    padding: 0 15px;

    max-width: 1470px;

}

.box{

    display: block;

    position: relative;

}

.list-h > li a, .list-h .item a, .list-v li a{

    display: inline-block;

}

/*------------ / 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 #DDD;

}

.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:#C21F1F;

    font-weight: bold;

    padding-left: 3px;

    text-decoration: underline;

    text-underline-position: under;

}



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

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

.icon {

}



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



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

.share .btn {

    background: #000000;

    color: #fff;

    width: 32px;

    height: 32px;

    line-height: 0px;

    border-radius:100%;

    font-size:14px;

    overflow: hidden;

    position: relative;

}

.share li + li{

    margin-left:8px;

}

.share .btn:before{

    content: '';

    width: 32px;

    height: 32px;

     display: block;

     position: absolute;

     left: -100%;

     top: 0;

     transition: all .3s ease;

     border-radius: 50%;

}

.share .btn:after{

    font-family: 'icon-font'!important;

    speak: none;

    font-style: normal;

    font-weight: 400;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    line-height: 32px;

    color: #fff;

    position: absolute;

    left: -100%;

    top: 0;

    display: block;

     width: 32px;

    height: 32px;

    transition: all .4s ease;

}

.share .btn.facebook:before{

    background: #3D5A98;

}

.share .btn.facebook:after{

    content: "\f09a";

}

.share .btn.twitter:before{

    background: #50ABF1;

}

.share .btn.twitter:after{

    content: "\f099";

}

.share .btn.google:before{

    background: #DC472E;

}

.share .btn.google:after{

    content: "\f0d5";

}

.share .btn.plurk:before{

    background: #EA4640;

}

.share .btn.plurk:after{

       content: "\e909";

}

.share .btn:hover:before{

    left: 0;

}



.share .btn:hover:after{

    left: 0;

}

.ibtn.fb-fans-page {

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

    width: 159px;

    height: 89px;

    display: inline-block;

}

.ibtn.fb-fans-page:hover {

    opacity: .8;

}

.btn.back {

    color: #999999;

    font-size: 15px;

    font-weight: bold;

    line-height: 1.2;

    padding: 8px 15px 3px;

    letter-spacing: 0.1em;

    white-space: normal;

    border-radius: 20px;

    border: 1px solid #999999;

    font-family: 'Josefin Sans', sans-serif;

}

.btn.back:before{

    content: '';

    display: inline-block;

    font-family: 'icon-font-3' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    margin-right: 10px;

    content: "\f104";

}

.btn.back:hover {

    color: #C21F1F;

    border: 1px solid #C21F1F;

}

.ibtn.more {

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

    width: 101px;

    height: 29px;

}



.btn.simple {

    background: #AAAAAA;

    width: 15%;

    height: 40px;

    margin: 0 1%;

    color: #fff;

    font-size: 15px;

    letter-spacing: 0.075em;

    line-height: 38px;

    border: 1px solid #AAAAAA;

    position: relative;

    border-radius: 30px;

    min-width: 120px;

}

.btn.simple:hover {

    background: #fff;

    color: #AAAAAA;

}

.btn.simple.bg2 {

    background: #232830;

    border: 1px solid #232830;

}

.btn.simple.bg2:hover {

    background: #fff;

    color: #232830;

}

.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: #C21F1F;

}

.btn.simple2 .ic {

    vertical-align: text-bottom;

    margin: 0 8px 0 0;

    color: #7FCAA5;

    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: #999999;

    font-size: 15px;

    margin: 1% 1%;

    border-radius: 30px;

    border: 1px solid #AAAAAA;

    display: inline-block;

    padding: 6px 3%;

}

.btn.normal.home:before{

    content: '';

    display: inline-block;

    font-family: 'icon-font-3' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    content: "\e90d";

    margin-right: 10px;

}

.btn.normal:hover {

   color: #C21F1F;

   border: 1px solid #C21F1F;

}

.btn.normal2 {

    color: #fff;

    font-size: 15px;

    padding: 5px;

    width: 100px;

    height: 100px;

    background: #C21F1F;

    margin: 0 0px;

    border-radius: 100%;

    border: 1px solid #C21F1F;

    display: inline-block;

    line-height: 90px;

}

.btn.normal2:hover {

   background: transparent;

   color: #C21F1F;

}

.btn.normal2.send {

}

.btn.normal .ic {

    /*vertical-align: middle;

    font-size: 18px;

    margin: 0 0 5px 0;*/

}

.ic.ic3-home{

    font-size: 12px;

}

.btn.pure {

    color: #666;

    line-height: 30px;

    margin: 0 5px 10px;

}

.btn.pure:hover {

    color: #C21F1F;

    text-decoration: underline;

}



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



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

.site-header {

    border-top: 5px solid #C21F1F;

    position: fixed;

    z-index: 999;

    width: 100%;

    top: 0;

    transition: all .2s ease;



}

.wrapper{

    padding-top: 183px;

}

.site-title {

    position: relative;

    z-index: 5;

    padding: 12px 0;

    margin: 0 auto;

    text-align: center;

}

.site-title .logo {

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

    width: 206px;

    height: 58px;

    transition: all .3s ease;

}

.site-title .logo:hover {

    opacity: .7;

}

 /*-- 選單至頂 --*/

    

    .header-fixed .site-header {

        width: 100%;

        margin: 0 auto;

        background-color: #fff;

        border-bottom: 1px solid #DBDCD3;

        

    }

    

    .header-fixed .site-title {

        padding: 0px;

        float: left;

        margin: 5px 0 0 0;

        width: 150px;

        z-index: 99;

    }

    

    .header-fixed .site-title .logo {

        height: 50px;

        width: 150px;

    }

    

    .header-fixed .site-nav {

        border: none;

        text-align: left;

        margin: 0px;

        float: left;

        margin: 10px 0 0 20px;

        position: relative;

        left: 0px;

    }

    

    .header-fixed .site-nav .menu > li > a {

        color: #787878;

        padding: 10px 10px;

    }

    

    .header-fixed .func-menu > li.gocart {

        position: static;

        display: inline-block;

        right: 0;

        top: 0px;

        color: #B63437;

        margin: -5px 0 0 0;

    }

    

    .header-fixed .func-menu > li {

        padding: 10px 0 1px;

    }

    .header-fixed .language,

    .header-fixed .search-box,

    .header-fixed .top-remitt,

    .header-fixed .top-order {

        display: none;

    }

/*選單至頂結束*/

.top-nav {

    position: absolute;

    z-index: 10;

    right: 15px;

    top:40px;

    width: 100%;

}

.top-nav > * {

    display: inline-block;

    vertical-align: middle;

}



.func-menu {

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

}

.func-menu > li {

    padding: 2px 0;

}

.func-menu > li > a {

    color: #7F7F7F;

    font-size: 13px;

    line-height: 25px;

    border-radius: 4px;

    padding: 0 8px 0 4px;

}

.func-menu > li.bg > a {

    background: #AAAAAA;

    color: #fff;

}

.func-menu > li.bg > a:hover {

    background: #82BBB3;

    color: #fff;

}

.func-menu > li > a:hover {

    color: #82BBB3;

}

.func-menu .ic {

    vertical-align: text-bottom;

    margin: 0 5px 1px 3px;

}

.func-menu .ic3-user-cross {

    font-size: 16px;

    margin: 0 4px -1px 4px;

}

.func-menu > li.gocart {

    position: absolute;

    display: block;

    right: 0;

    top: 35px;

    color: #B63437;

}

.func-menu > li.gocart > a {

    font-size: 18px;

    color: #B63437;

    font-family: 'Josefin Sans', sans-serif;

}

.func-menu > li.gocart > a i{

    color: #B63437;

    font-size: 26px;

}

.func-menu > li.gocart span{

    border: 2px solid #CBE0D8;

    min-width:36px;

    height:36px;

    color: #B63437;

    display: inline-block;

    text-align: center;

    font-size: 22px;

    border-radius: 100%;

    line-height: 36px;

    margin: 0 0 0 10px;



}

.func-menu .cart-box {

    position: absolute;

    z-index: 10;

    width: 300px;

    right: 0;

    top: 100%;

    border: 2px solid #B63437;

    background: #fff;

    padding: 1px;

    visibility: hidden;

    pointer-events: none;

    opacity: 0;

    transition: all 0.3s;

    transform: rotateX(-90deg);

    transform-origin: 50% 0;

}

.func-menu .gocart.active .cart-box {

    pointer-events: visible;

    visibility: visible;

    opacity: 1;

    transform: rotateX(0);

}

.func-menu .cart-box .btn {

    width: 100%;

    background:#B63437;

    color: #fff;

    font-size: 18px;

    font-weight: bold;

    line-height: 39px;

    letter-spacing: 0.05em;

}

.func-menu .cart-box .btn:hover {

    background: #AAAAAA;

}

.func-menu .cart-box .btn .ic {

    font-size: 20px;

    margin-right: 0;

}

.func-menu .cart-list {

    padding: 4px;

}

.func-menu .cart-list li+li {

    border-top: 1px dashed #bbb;

}

.func-menu .cart-list a {

    display: block;

    overflow: hidden;

    padding: 8px;

}

.func-menu .cart-list a:hover {

    background: #eee;

}

.func-menu .cart-list .pic {

    float: left;

    width: 70px;

}

.func-menu .cart-list .txt {

    margin-left: 82px;

    line-height: 1.7;

}

.func-menu .cart-list .name {

    display: block;

    white-space: nowrap;

    -ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    overflow: hidden;

    color: #B63437;

    font-size: 15px;

}

.func-menu .cart-list a:hover .name {

    text-decoration: underline;

}

.func-menu .cart-list .qty {

    color: #F2856C;

}



.top-nav .language {

    position: absolute;

    width: 50px;

    letter-spacing: 0;

    right: 0;

}

.top-nav .language .btn {

    width: 100%;

    color: #9D9D9D;

    text-align: left;

    line-height: 23px;

    padding: 0 25px 0 10px;

    position: relative;

}

.top-nav .language .btn:after {

    content: '';

    display: block;

    width: 0;

    height: 0;

    border-style: solid;

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

    border-color: #999999 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: #82BBB3;

    color:#fff;

    padding: 4px 10px;

    font-size: 13px;

    border-top: 1px solid #fff;

}

.top-nav .language li a:hover {

    color: #fff;

    background: #B7D7D2;

}



.site-nav {

    position: relative;

    padding: 0px 0 ;

    margin: 10px 0 20px;

    text-align: center;

    border-top: 1px solid #E1E1E1;

    border-bottom: 1px solid #E1E1E1;

}

.site-nav > * {

    display: inline-block;

    vertical-align: middle;

}

.site-nav .menu {

    text-align: center;

    margin: 0 -20px;

    font-family:  Arial, sans-serif;

}

.site-nav .menu li {

    position: relative;

}

.site-nav .menu li a {

    display: block;

}

.site-nav .menu > li {

    padding: 0 7px;

}

.site-nav .menu > li > a {

    color: #787878;

    padding: 10px 25px;

}

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

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

    color: #E60012;

}

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

    content: ' | ';

    display: block;

    width: 1px;

    height: 10px;

    position: absolute;

    left: 0px;

    top:21%;

}

.site-nav .menu ul {

    display: none;

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

    position: absolute;

    background-color: #fff;

    z-index: 600;

    width: 208px;

    border: 3px solid #C21F1F;

    box-sizing: border-box;

}

.site-nav .menu > li > ul {

    top: 100%;

    left: 50%;

    margin-left: -104px;

}

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

    content: ' ';

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 0 10px 10px 10px;

    border-color: transparent transparent #C21F1F transparent;

    display: block;

    position: absolute;

    bottom: 100%;

    left: 50%;

    right: 0;

    margin-left: -10px;

}

.site-nav .menu ul li+li {

    border-top: 1px solid #e8e8e8;

}

.site-nav .menu ul li a {

    font-size: 14px;

    text-align: center;

    padding: 6px 8px;

    border: 1px solid #fff;

}

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

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

    color: #fff;

    background: #C21F1F;

}

.site-nav .menu ul ul {

    left: 100%;

    top: 0;

}

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

    display: none;

}



.site-header .search-box {

    position: absolute;

    width: 250px;

    box-sizing: border-box;

    margin-left: 10px;

    top: 0px;

    z-index: 11;

    left: 21px;

}

.search-box .search {

    z-index: 1;

    position: absolute;

    width: 30px;

    height: 30px;

    display:block;

    right:0;

    top:1px;

}

.search-box:after {

    position: absolute;

    content: "\e901";

    font-family: 'icon-font' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    color: #9e9e9e;

    right: 0px;

    top: 0;

    font-size: 20px;

    line-height: 30px;

    width: 30px;

    height: 30px;

    text-align: center;

 }

.search-box:hover:after{

    color:768bae;

}

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

    border: none;

    border-bottom: 1px solid #999999;

    background: transparent;

    height: 30px;

    line-height: 28px;

    margin: 0;

    padding: 0 42px 0 10px;

}

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

    background:#ECECEC;

}

.site-header .search-box .search i{

    width: 22px;

    height: 24px;

    position: absolute;

    right: 2px;

    top: 0;

    font-size:16px;

    padding: 6px 0 0 8px

}

.site-header .search-box .search i:hover{

    color: #E60012;

}



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



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

.banner {

    position: relative;

}

.banner .container {

    max-width: 1440px;

    padding: 0;

}

.banner button.slick-arrow{

    background: url(../../images/common/index/arrow.png) 0 0 no-repeat;

    width: 25px;

    height: 50px;

    position: absolute;

    top: 45%;

    white-space: nowrap;

    text-indent: 100%;

    text-align: left;

    overflow: hidden;

    padding: 0;

    margin: 0 0px;

    border: none;

    z-index: 10;

}

.banner button.slick-prev{

    left: 0px;

}

.banner button.slick-prev:hover {

    background-position: 0 100%;

}

.banner button.slick-next {

    background-position: 100% 0%;

     right: 0px;

}

.banner button.slick-next:hover {

    background-position:100% 100%;

}

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



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

.main-top .container {

    max-width: 1440px;

    padding: 0;

}

.main-title {

    margin: 0 0 20px 0;

    padding: 20px;

    text-align: center;

    border-top: 1px solid #fff;

    box-shadow: 0px -1px rgba(215,215,215,1);

}

.main-title span{

    font-family: 'Josefin Sans', sans-serif;

    font-size: 23px;

    color:#444536;

    font-weight: bold;

    position: relative;

    text-transform:uppercase;

}

.main-title .second_txt{

    color: #79796A;

    font-family: 'Josefin Sans', sans-serif;

    font-size: 18px;

}

.main-content {

    padding: 0 0 70px;

}

.content {

    min-height: 300px;

    box-sizing: border-box;

}

.content-top {

    margin-bottom: 50px;

    background: #F0F0F0;

}

.content-title {

    color: #5FA386;

    font-size: 20px;

    font-weight: bold;

    margin: 0 0 25px 0;

    text-align: center;

    font-family: 'Josefin Sans', sans-serif;

    text-transform:uppercase;

}

.content-title2{

    font-size: 15px;

    color: #666666;

    font-weight: normal;

    margin: 0 0 20px 0;

}

.content-title span{

    border: 2px solid #CBE0D8;

    padding: 8px 2%;

}

.content-title .keyword {

    color: #F2856C;

}

.shopping-title {

    color:#B63437;

    font-size: 20px;

    font-weight: normal;

    padding: 5px 0 0 0;

    margin: 0 0 10px 0;

    font-family: 'Josefin Sans', '微軟正黑體', sans-serif;

}

.shopping-title .ic {

    font-size: 22px;

    color: #7FCAA5;

    vertical-align: middle;

    margin: 0 3px 5px 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 ------------*/



.sect3{

    margin: 10px 0 50px;

}

.sect3 .container .row{

    border-top: 1px solid #E1E1E1;

    padding: 50px 0 0 0;

}

.sect3 .row .col{

    float: left;

    width: 50%;

    padding: 0 0px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    text-align: center;

}

.sect3 .row .col.col1{

    width: 51%;

    float: left;

}

.sect3 .row .col.col2{

    width: 49%;

    float: right;

    text-align: center;

    display: inline-block;

}

.sect3 .cf-list li{

    width: 25%;

    padding: 0 10px;

    text-align: center;

}

.sect3 .cf-list li .pic{

    max-width: 340px;

    overflow: hidden;

}

.sect3 .cf-list .pic:before {

    content: '';

    background: rgba(255,255,255,0.6);

    display: block;

    position: absolute;

    z-index: 1;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    opacity: 0;

    transition: all 0.3s;

}

.sect3 .cf-list .box:hover .pic:before {

    opacity: 1;

}

.sect3 .sharebox{

    width: 50%;

    float: left;

    padding:0 10px;

    -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

    min-height: 220px;

    max-width: 340px;

    margin: 0 0px 0 0;

    text-align: center;

    display: inline-block;

    background: url('../../images/common/sharebox.png') no-repeat 50% 48% #D6E9E6;

    padding: 90px 30px 0;

    text-align: center;

}

.sect3 .info{

    width: 50%;

    float: right;

    padding:0 10px;

    -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

    min-height: 220px;

    max-width: 340px;

    margin: 0 0 0 0px ;

    text-align: center;

    display: inline-block;

    background: #F5F5F1;

    padding: 20px;

}

.sect3 .info .sect-title{

    color: #444535;

    font-size: 20px;

    text-align: center;

    position: relative;

}

.sect3 .info .sect-title span{

    position: relative;

}

.sect3 .info .sect-title span:before{

    content: '/////////// ';

    font-size: 15px;

    position: absolute;

    color: #C9C9B9;

    left: -60px;

    top: 0px;

}



.sect3 .info .sect-title span:after{

    content: '/////////// ';

    font-size: 15px;

    position: absolute;

    color: #C9C9B9;

    right: -60px;

    top: 0px;

}

.sect3 .info .txt{

    padding: 0px 15px 0;

}

.sect3 .info .txt li{

    list-style: none;

    margin:15px 0px 10px 40px ;

    text-align: left;

}

.sect3 .info .txt i{

    margin: 0 0 0 -35px;

    width: 22px;

    height: 22px;

    background: #AAAAAA;

    color: #fff;

    border-radius: 100%;

    text-align: center;

    line-height: 22px;

    font-size: 12px;

    position: absolute;

}



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

.breadcrumb {

    text-align: right;

    color: #999999;

    padding: 5px 15px;

    text-transform:uppercase;

}

.breadcrumb li,

.breadcrumb li a {

    display: inline;

    transition: all .3s ease;

}

.breadcrumb li+li:before {

    content: '> ';

    display: inline-block;

    margin: 0 3px;

}

.breadcrumb li a:hover {

    color: #232830;

}

.content-top .breadcrumb {

    background: none;

    float: right;

    color: #BABABA;

    padding: 6px 0;

}

.content-top .breadcrumb:before,

.content-top .breadcrumb:after {

    content: '/';

}

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

    content: '> ';

}

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

    display: none;

}



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



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

.side {

    width: 260px;

    float: left;

}

.has-side .content {

    width: calc(100% - 260px);

    float: right;

    border-left: 1px solid #E1E1E1;

    padding: 0 0 0 30px;

}

.side-nav,

.side-nav-top {

    position: relative;

    font-size: 15px;

    text-transform:uppercase

}

.side-nav-top{

    border-bottom: 1px solid #E1E1E1;

    padding: 0 0 10px 0;

}

.side-nav-top li a {

    position: relative;

    display: block;

    line-height: 1.4;

    padding: 2px 20px;

    color: #B63437;

}

.side-nav-top li a:before{

    content: ' ● ';

    display: block;

    color: #B63437;

    position: absolute;

    left: 5px;

    font-size: 12px;

}

.side-nav li a {

    position: relative;

    display: block;

    line-height: 1.4;

    padding: 15px 18px;

    border-bottom: 1px solid #E1E1E1;

    color: #999999;

}

.side-nav li a,

.side-nav-top li a {

    display: block;

    margin-bottom: 2px;

}

.side-nav > li > a,

.side-nav-top > li > a {

    position: relative;

    line-height: 1.4;

    font-weight: bold;

}

.side-nav > li a:after{

    content: '';

    display: block;

    border-left: 1px solid #E1E1E1;

    height: 38px;

    position: absolute;

    right: -1px;

    top: 0;

}

.side-nav-top > li > a {

}

.side-nav > li > a:hover,

.side-nav > li.active > a {

    color: #C21F1F;

}

.side-nav-top > li > a:hover,

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

    color: #999999;

}



.side-nav ul {

    display: none;

    padding: 20px 0;

    border-bottom: 1px solid #E1E1E1;

}

.side-nav ul li a {

    color: #7F7F7F;

    font-size: 13px;

    padding: 5px 10px 5px 20px;

    border-bottom:none;

}

.side-nav ul li a:hover,

.side-nav ul li.active > a {

    color: #C21F1F;

}



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



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



.site-footer {

    border-top: 0;

}

.footer-top {

    padding-top: 220px;

}



.site-footer {

    color: #232830;

    font-size: 12px;

    background: #ECECEC;

}

.footer-top {

    border-top: 1px #CCCCCC solid;

    padding: 85px 0px 94px;

}

.footer-top .container{

    padding:0 50px;

}

.footer-top a{

    transition: all .3s ease;

}

.footer-top a:hover {

    color:#D2002D;

}

.footer-top  .fb-page{

    background: url(../../images/en/fb_page.jpg);

    width: 159px;

    height: 89px;

    display: inline-block;

}

.footer-top  .fb-page:hover{

    background-position: bottom;

}

.site-info {

    font-size: 14px;

    overflow: hidden;

    line-height: 1.5;

    float: left;

    width: 540px;

    margin-right: 15px;

}

.site-info .qrcode {

    float: left;

    margin-top: 10px;

}

.site-info .info-txt {

    margin-left: 150px;

    padding-top: 8px;

}

.site-info .info-txt strong {

    color: #D2002D;

    font-weight: normal;

    letter-spacing: 3px;

    font-size: 32px;



}

.site-info .info-txt span {

    color: #fff;

}

.site-map {

    float: left;

    letter-spacing: 55px;

    font-size: 12px;

    text-transform:uppercase;

}

.site-map ul {

    display: inline-block;

    vertical-align: top;

    letter-spacing: 0.2rem;

}

.site-map ul li {

     position: relative;

    padding-left: 15px;

    margin: 12px 0;

    display: -webkit-box;

}

.site-map ul li:before {

    content: '';

    display: inline-block;

    width: 4px;

    height: 4px;

    background: #D3002F;

    position: absolute;

    left: 0;

    top: 7px;

}

.follow {

    float: right;

    padding-top: 7px;

}

.follow .share {

    margin-top: 15px;

}

.follow .footer-links {

    display: inline-block;

    vertical-align: middle;

    border: 1px solid #d3002f;

}

.follow .footer-links:hover {

    border-color: #DCCF2C;

}

.footer-bottom {

    background: #232830;

    padding: 20px 50px;

    border-bottom: 2px solid #C21F1F;

    box-sizing: border-box;

    height: auto;

    overflow: hidden;

}

.footer-bottom a{

    transition: all .3s ease;

}

.footer-bottom a:hover {

    color: #D3002F;

}

.related-doc {

    float: left;

    letter-spacing: 0.2rem;

    color: #FFF;

}



.related-doc li a {

    padding: 0 10px;

    font-size: 12px;

}

.copyright-box {

    float: right;;

    color: #FFFFFF;

}



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

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

.floating,

.floating.fancybox-margin {

    display: none;

    position: fixed;

    right: 50%;

    bottom: 30%;

    margin-right: -800px;

    z-index: 400;

    transition: all .3s ease;

}

.floating .btn.gocart {

    display: block;

    margin: 0 auto 5px;;

    background: url('../../images/common/gocart.svg') no-repeat; 

    width: 60px;

    height: 60px;

    color: #444;

    font-size: 16px;

    font-weight: bold;

    padding-top: 30px;

}

.no-svg .floating .btn.gocart {

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

}

.floating .btn.gocart:hover {

    background-position: 0 100%;

    color: #fff;

}

.floating .ibtn.gotop {

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

    width: 34px;

    height: 34px;

}

.floating .ibtn.gotop:hover {

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

}





/*------------ / 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: #999999;

    font-size: 16px;

    padding: 0 5px;

    margin: 0 2px;

    box-sizing: border-box;

}

.pagination li a:hover,

.pagination li.active a {

    color: #232830;

}

.pagination li a.controls {

    padding: 0;

    font-size: 22px;

    color: #ccc;

    line-height: 32px;

    border-radius: 100%;

    border: 1px solid #ADAE93;

}

.pagination li a.controls:hover {

    color: #C21F1F;

    border: 1px solid  #C21F1F;

}

.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: #C21F1F;

}



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



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

.reminder {

    text-align: center;

    color: #777;

    position: relative;

    margin: 0 0 30px;

}

.reminder span {

}

.reminder b {

    display: inline-block;

    font-size: 15px;

    line-height: 1;

    vertical-align: bottom;

    margin-bottom: 0px;

    color: #E51C6C;

}



.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 #CCCCCC;

    margin: 0;

    padding: 0 5px;

    z-index: 1;

    border-radius: 0;

}

.qty-box .form-control:focus {

    border-color: #C21F1F;

}

.qty-box .btn {

    width: 30px;

    height: 30px;

    line-height: 28px;

    font-size: 19px;

    color: #666;

    background: #EEEEEE;

    border: 1px solid #CCCCCC;

    position: absolute !important;

    z-index: 0;

    top: 0;

}

.qty-box .btn:hover {

    border-color: #C21F1F;

    background: #C21F1F;

    color: #fff;

    z-index: 2;

}

.qty-box .less {

    left: 0;

    border-radius: 5px 0 0 5px;

}

.qty-box .add {

    right: 0;

    border-radius: 0 5px 5px 0;

}



.form-control {

    display: block;

    width: 100%;

    height: 36px;

    line-height: 34px;

    padding: 0 10px;

    border: 1px solid #CCCCCC;

    box-sizing: border-box;

    margin-bottom: 6px;

}

.form-control:focus {

    outline: none;

    background:#F7F7F7;

}

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: 1000px;

}

.form-wrap.type3 .form-box {

    max-width: 600px;

}

.form-wrap .btn-box {

    margin: 0 auto;

    max-width: 900px;

    text-align: center;

}

.form-box {

    margin: 0 auto;

}

.line {

    margin: 0 auto;

    border-top: 1px solid #D7D7D7;

    padding: 20px 0;

}

.line2 {

    margin: 0 auto;

    border-top: 1px solid #D7D7D7;

    border-bottom: 1px solid #D7D7D7;

    padding: 20px 0;

}

.form-box .row {

    margin: 0 -24px;

    position: relative;

}

.form-box .col {

    float: left;

    width: 50%;

    padding: 0 24px;

    box-sizing: border-box;

}

.form-box .type2 .col1 {

    float: left;

    width: 70%;

    padding: 0 24px;

    box-sizing: border-box;

}

.form-box .type2 .col2 {

    float: right;

    width: 25%;

    padding: 50px 0 0 0;

}

.form-box .required {

    position: relative;

}

.form-box .required:after {

    content: '*';

    display: inline-block;

    vertical-align: middle;

    line-height: 1;

    font-size: 15px;

    color: #E51C6C;

    margin: 0 4px 0px 10px;

}

.form-box .form-group {

    padding: 4px 0;

    line-height: 36px;

}

.form-box .control-label {

    display: block;

    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: #C21F1F;

    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;

    font-size: 14px;

    color: #B63437;

}

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

    transform: rotate(270deg);

    color:#AAAAAA;

}

.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: #E51B6C;

    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:1100px;

    margin: 0 auto;

    padding: 3% 35px;

    -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: #5FA385;

    font-size: 20px;

    font-weight: bold;

    line-height: 1.5;

    margin: 0 auto 15px;

    font-family: 'Josefin Sans', sans-serif;

}

.no-svg .success-msg {

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

}

.success-txt {

    line-height: 1.8;

    color: #777;

    padding-bottom: 10px;

}

.success-txt strong {

    color: #444;

    font-size: 15px;

}

.success-txt a {

    text-decoration: underline;

    color: #E51A6C;

}

.success-txt a:hover {

    text-decoration: none;

}

.success-wrap .btn-box {

    max-width: 1000px;

    margin: 0 auto;

}



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



/*------------ table ------------*/

.table-h {

    border-top: 1px solid #DCDCDC;

    color: #6A6A6A;

}

.table-h thead {

        display: none;

}

.table-h td[data-title]:before {

    content: attr(data-title);

    display: inline-block;

    color: #aaa;

    font-size: 13px;

}

.table-h td {

    padding: 10px 6px;

    line-height: 1.4;

    text-align: center;

    min-width: 76px;

}

.table-h .btn-holder {

    min-width: 30px;

}

.table-h thead {

    border-bottom: 1px solid #DCDCDC;

}

.table-h thead th {

    color: #777;

    font-weight: normal;

    padding: 12px;

}

.table-h tbody tr {

    border-bottom: 1px solid #DCDCDC;

}



.table-h .align-left {

    text-align: left;

}

.table-h a {

    display: inline-block;

    vertical-align: middle;

}

.table td span {

    color: #DE82A5;

}



.table-v {

    color: #777;

    font-size: 14px;

}

.table-v tr{

    border-bottom: 1px solid #ddd;

}

.table-v th,

.table-v td {

    padding: 12px 20px;

    vertical-align: middle;

}

.table-v th {

    text-align: left;

    width: 110px;

    font-weight: normal;

    position: relative;

    background: #F0F0F0;

}



.table-v strong {

    color: #DA6994;

}



/*------------ / table ------------*/



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

body .fancybox-close {

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

    width: 41px;

    height: 41px;

    right: 5px;

    top:5px;

}

body .fancybox-close:hover {

    background: url(../../images/common/lightbox_close.jpg) 100%  100%  no-repeat;

}



.no-svg body .fancybox-close {

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

}

body .fancybox-close:hover {

    background-position: 0 100%;

}

body .fancybox-skin {

    background: #fff;

    border-radius: 0;

    margin-top: 40px;

    border-radius: 0px;

    border: 5px solid #C21F1F;

    position: relative;

}

body .fancybox-inner {

    background: #F2FAF6;

    border-radius:0px;

}

.fancybox-album .photo-pager {

    position: absolute;

    bottom: -60px;

    left: 50%;

    width: 80px;

    height: 60px;

    background: #C21F1F;

    border-radius: 100%;

    text-align: center;

    color: #fff;

    padding: 20px 0 0 0;

    margin: 0 0 0 -40px;

}

.fancybox-album .photo-pager span{

    display: block;

}

.fancybox-album .photo-pager b{

    color: #FFFF00;

    text-decoration: underline;

}

.fancybox-album .fancybox-title {

    position: relative;

    width: 100%;

}

.fancybox-album .photo-intro{

    padding: 0 0 25px 0;

    

}

.fancybox-album .photo-title {

    color: #C21F1F;

    font-size: 18px;

    font-weight: bold;

    margin: 10px 0;

}

.fancybox-album .fancybox-nav span {

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

    width: 15px;

    height: 27px;

    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%;

}

.lightbox-wrapper {

    padding: 40px;

    max-width: 100%;

    width: 780px;

    margin: 0 auto;

    box-sizing: border-box;

}

.login-box .lightbox-title {

    color: #5FA386;

    font-size: 20px;

    font-weight: bold;

    margin: 0 0 15px;

    text-align: center;

}

.login-box .lightbox-title span{

    border: 2px solid #CBE0D8;

    padding: 5px 10px;

}

.no-svg .login-box .lightbox-title {

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

}

.lightbox-wrapper .control-label {

    display: none;

}

.login-box .notice-box {

    background: #eee;

    margin-top: 40px;

    padding: 20px 15px;

    border-radius: 15px;

}

.login-box .notice-box .title {

    float: left;

    background: url('../../images/common/join_ic.png') 0 100% no-repeat;

    color: #444;

    font-size: 18px;

    font-weight: bold;

    padding: 16px 0 0 45px;

    margin: 5px 0 0 80px;

}

.no-svg .login-box .notice-box .title {

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

}

.login-box .notice-box .txt {

    color: #777;

    border: 1px solid #ccc;

    border-width: 0 0 0 1px;

    margin-left: 240px;

    padding-left: 30px;

}

.login-box .success-box + .btn-box {

    max-width: 700px;

    margin: 0 auto;

}

.login-box .success-box + .btn-box a{

    margin: 10px 0;

}

.arrival-box {

    position: relative;

}

.arrival-box .form-control {

    height: 36px;

    line-height: 34px;

    padding: 0 12px;

    border-color: #C21F1F;

    background: none;

}

.arrival-box .form-control:focus {

    background: #fff;

}

.arrival-box .pd-name {

    color: #C21F1F;

    font-size: 25px;

    font-weight: bold;

    text-align: center;

    margin: 0;

}

.no-svg .arrival-box .pd-name {

    background-image: url('../../images/common/products/arrival_ic.png')

}

.arrival-box .pd-id {

    color: #aaa;

    font-size: 14px;

    text-align: center;

}

.arrival-box .form-box {

    padding: 30px 0;

}

.arrival-notice {

    color: #777;

    font-size: 13px;

    text-align: center;

    padding: 10px 0;

}

.arrival-box .btn-box {

    padding-top: 0;

}

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



.mmenu-show #mobile-fixed li,

.mmenu-show #mobile-search,

.mmenu-show #member-box li a {

    background: #C21F1F;

}

.mmenu-show #mobile-menu .language-menu {

    background: #C21F1F;

    color: #FFF;    

}

.mmenu-show #mobile-search .search{

    position: absolute;

    right:8px;

    top: 4px;

}

.mmenu-show #mobile-search .search .ic3-search2{

    font-size: 20px;

}

.mmenu-show #mobile-fixed ul,

.mmenu-show #member-box li {

    border-bottom-color: #232830;

}

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

    border-color: #C21F1F;

}

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

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

    color: #C21F1F;

}

.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 ------------*/

    .site-nav .menu > li > a {

        padding: 10px 20px;

    }

}

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

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

.footer-top {

    padding: 100px 0 70px;

    text-align: center;

}

.site-info, .site-map {

    float: none;

    display: inline-block;

    vertical-align: top;

    text-align: left;

    width: auto;

    margin-bottom: 30px;

}

.follow {

    float: none;

    clear: both;

    text-align: center;

}

.follow .share {

    display: inline-block;

    vertical-align: middle;

    margin: 0 10px;

}

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

}

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

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

    .site-map ul {

        display: inline;

    }

    .site-map ul li {

        display: inline-block;

    }

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

    .sect3 .info .txt {

        padding: 0px 0px 0;

    }

    .table-h td[data-title]:before {

        display: block;

        margin:  0 0 5px 0;

    }

    .site-nav .menu > li > a {

        padding: 10px 15px;

    }

}

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

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

    .side {

        width: 260px;

    }

    .has-side .content {

        width: calc(100% - 260px);

    }

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

    .site-nav .menu > li > a {

        padding: 10px 10px;

    }

}

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

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

    .site-title {

        padding: 10px 0;

    }

    .top-nav {

        right: 15px;

    }

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

    .sect3 .row .col,

    .sect3 .row .col.col1,

    .sect3 .row .col.col2{

        width: 100%;

        float: none;

    }

    .sect3 .row .col.col2{

        margin: 20px 0 0 0;

    }

    .sect3 .cf-list li .pic {

        max-width: 100%;

        overflow: hidden;

    }

    .sect3 .sharebox,

    .sect3 .info{

        width: 50%;

        margin: 0 auto;

        text-align: center;

        float: left;

        max-width: 100%;

    }

    .func-menu > li.gocart {

        right: 50px;

    }

}

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

    .footer-top {

        padding: 20px 0 30px;

    }

    .footer-top .container {

        padding: 0 15px;

        text-align: center;

    }

    .site-info {

        margin-left: 0;

    }

    .site-map {

        display: none;

    }

    .follow {

        float: none;

        clear: both;

        text-align: center;

    }

    .follow .share {

        display: none;

    }

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

        position: static;

        border-top: 3px solid #232830;

    }

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

        height: 50px;

        width: 150px;

    }

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

        margin: 0;

        float: none;

    }

    .wrapper{

        padding-top: 40px;

    }

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

    .header-sheet {

        position: fixed;

        height: auto;

        bottom: 0%;

        z-index:9999;

        font-size:  14px;

        padding:  10px 0 10px;

    }

    .header-sheet .close-ontop {

        right: 0px;

        left:0px;

        top: -25px;

        margin:auto;

        text-align:center;

        background:#666;

        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 {

        float: none;

        text-align: center;

    }

    .top-nav,

    .site-nav,

    .site-header .search-box{

        display: none;

    }

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

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

    .main-content {

        padding-bottom: 80px;

    }

    .has-side .content {

        border-left:none;

        padding: 0;

    }

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

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

    .footer-top {

        padding: 20px 0 30px;

    }

    .footer-top .container {

        text-align: center;

    }

    .footer-top .col.col1 {

        display: none;

    }

    .footer-top .col.col2{

        display: inline-block;

        text-align: center;

        float: none;

        width: 100%;

    }

    .footer-top .map-box {

        margin: 0;

    }

    .site-info {

        margin-left: 0;

    }

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

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

    .floating,

    .floating.fancybox-margin {

        background: none;

        right: 50%;

        bottom: 5px;

        margin-right: -15px;

    }

    .floating .btn.gocart {

        display: none;

    }

    .floating .ibtn.gotop {

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

        width: 30px;

        height: 30px;

        border: 0;

    }

    .floating .ibtn.gotop:hover{

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

    }



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

    .share:before{

        content: '';

    }

    .content-top {

        margin-bottom: 20px;

    }

    

}

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

/*------------ table 900 ------------*/

    .table-h td {

        min-width: 40px;

    }

/*------------ / table 900 ------------*/

}

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

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

    .main-content {

        padding: 0 0 10px;

    }

    .main-title {

        font-size: 28px;

    }

    .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,

    .form-box .type2  .col {

        width: 100%;

    }

    .form-box .type2 .col2 {

        text-align: center;

    }

    .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;

        padding-top: 90px;

    }

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

/*------------ table 767 ------------*/

    .table-h {

        border-top: 1px dashed #bbb;

    }

    .table-h tr,

    .table-h td {

        display: block;

        text-align: left;

    }

    .table-h td+td {

        border-left: 0;

    }

    .table-h td[data-title]:before {

        content: attr(data-title);

        display: inline-block;

        color: #aaa;

        font-size: 13px;

        margin: 0;

    }

    .table-h tr {

        padding: 10px 0;

        position: relative;

    }

    .table-h td {

        padding: 0;

        line-height: 2;

    }

/*------------ / table 767 ------------*/

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

    .login-box .notice-box {

        padding: 20px 25px;

        text-align: center;

    }

    .login-box .notice-box .title {

        float: none;

        display: inline-block;

        margin: 0;

    }

    .login-box .notice-box .txt {

        border-width: 1px 0 0;

        margin: 15px 0 0;

        padding: 15px 0 0;

    }

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

}

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

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

    .lightbox-wrapper {

        padding: 30px 20px;

    }

    .login-box .main-title {

        padding-top: 0;

    }

    .login-box .main-title span {

        font-size: 36px;

    }

    .login-box .success-msg {

        font-size: 17px;

    }

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

/*------------ table 500 ------------*/

    .table-v tr,

    .table-v th,

    .table-v td {

        display: block;

        width: auto;

        text-align: left;

    }

    .table-v tr:nth-child(n) {

        background: none;

    }

    .table-v th {

        border: 0;

    }

/*------------ / table 500 ------------*/

    .sect3{

        margin: 30px 0 20px;

    }

    .sect3 .cf-list li{

        width: 100%;

        text-align: center;

        margin: 15px 0;

    }

    .sect3 .sharebox,

    .sect3 .info{

        width: 100%;

        float: none;

        margin: 0 auto 15px;

        text-align: center;

        display: inline-block;

    }

}

@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 ------------*/

}