@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600&family=Noto+Serif+TC:wght@400;600&display=swap');

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:17px;
	color:#333333;
	-webkit-text-size-adjust:none;
	image-rendering:-webkit-optimize-contrast;
    background:#F3F3F3;
}

a{
	color:#333333;
}

.webout{
	position:relative;
	max-width:2000px;
	margin:0 auto;
}

.article{
	overflow:clip;
}

.out{
	max-width:1400px;
	position:relative;
	padding:0 20px;
	margin:0 auto;
}

input, textarea{
    font-family:'Noto Sans TC','微軟正黑體',sans-serif;
    font-size:17px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

input[type="number"]{
	appearance:textfield;
}

:root{
    --serif:'Noto Serif TC', serif;
}

/*HOME-----------------------------------------*/

/*HOME_S1-----------------*/
.home .s1 a{
    display:flex;
    justify-content:center;
    height:675px;
}

.home .s1 a .pc{
    height:100%;
    object-fit:cover;
}

.home .s1 .mb{
    display:none;
}

.home .s1 .splide__slide{
    padding-bottom:40px;
}

.home .s1 .splide__pagination{
    bottom:0;
}

.home .splide__pagination__page,
.product .splide__pagination__page{
    background:#999999;
    height:12px;
    width:12px;
    margin:5px;
    opacity:1;
    transition:0s;
}

.home .splide__pagination__page.is-active,
.product .splide__pagination__page.is-active{
    background:#004998;
    transform:none;
}

/*HOME_S2-----------------*/
.home .s2{
    padding:90px 0;
}

.home .s2 .out,
.home .s3 .out{
    max-width:1080px;
}

.home .s2 .top{
    text-align:center;
}

.home .s2 .top .t1,
.home .s2 .top .t3{
    font-weight:normal;
    line-height:1.88em;
    letter-spacing: -0.008em;
}

.home .s2 .top h1.t1 a{
    color:333;
    text-decoration: none;
}

.home .s2 .top h1.t1 a strong{
    font-weight: normal;
}

.home .s2 .top h1.t1 a em{
    font-style: normal;
}

.home .s2 .top .t3 span.kw-space-all{
    margin: 0 -0.17em 0;
}

.home .s2 .top .t3 span.kw-space-lef{
    margin: 0 0 0 -0.17em;
}

.home .s2 .top .t3 span.kw-space-rig{
    margin: 0 -0.17em 0 0;
}

.home .s2 .top .t2{
    font-family:var(--serif);
    position:relative;
    font-size:30px;
    font-weight:600;
    color:#004998;
    line-height:1.5em;
    padding:0.5em 0 1em;
}

.home .s2 .top .t2 span.kw-space-all{
    margin: 0 -0.3em 0;
}
.home .s2 .top .t2 span.kw-space-rig{
    margin: 0 -0.3em 0 0;
}
.home .s2 .top .t2 span.kw-space-lef{
    margin: 0 0 0 -0.3em;
}

.home .s2 .top .t2:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:5em;
    height:1px;
    background:#BBBBBB;
    margin-left:-2.5em;
}

.home .s2 .top .t3{
    margin:3em 0 4em;
}

.home .s2 .top .t3 strong{
    font-weight: normal;
}
.home .s2 .top .t3 em{
    font-style: normal;
}
.home .s2 .top .t3 a{
    color: #333;
    text-decoration: none;
}

.home .s2 .bm{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 10px;
}

.home .s2 .bm img{
    width:100%;
    transition:0.2s;
}

.home .s2 .bm a:hover img{
    opacity:0.8;
}

/*.home .s2 .bm:hover img:not(:hover){
    opacity:0.5;
}*/

/*HOME_S3-----------------*/
.home .s3 img{
    display:block;
    width:100%;
}

.home .s3 .bm{
    display:flex;
    justify-content:center;
    background:#1A3E80;
    color:#FFFFFF;
}

.home .s3 .bm a{
    position:relative;
    display:block;
    padding:1em 0.8em;
    color:#FFFFFF;
    text-align:center;
    transition:0.2s;
}

.home .s3 .bm a:hover{
   background:#2251A9;
}

/*PRODUCT-----------------------------------------*/

/*PRODUCT_S1-----------------*/
.product .s1{
    padding-top:80px;
}

.product .s1 .t1{
    font-size:30px;
    line-height:1.3em;
    font-weight:normal;
    text-align:center;
    margin-bottom:50px;
}

.product .s1 h1.t1 strong{
    font-weight: normal;
}

.product .s1 h1.t1 em{
    font-style: normal;
}

.product .s1 .box{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:4%;
}

/*PRODUCT_S1_LEFT*/
.product .s1 .left .t2{
    font-size:18px;
    line-height:1.5em;
    font-weight:normal;
}

.product .s1 .left .t2 strong{
    font-weight: normal;
}
.product .s1 .left .t2 em{
    font-style: normal;
}
.product .s1 .left .t2 a{
    color: #333;
    text-decoration: none;
}

.product .s1 .left .t3{
    font-size:16px;
    line-height:1.7em;
    padding:1em 0 2em;
    border-bottom:#333333 1px solid;
}

.product .s1 .left .t3 span.kw-space-all{
    margin: 0 -0.25em 0;
}
.product .s1 .left .t3 span.kw-space-rig{
    margin: 0 -0.25em 0 0;
}
.product .s1 .left .t3 span.kw-space-lef{
    margin: 0 0 0 -0.25em;
}

.product .s1 .left .t3 strong{
    font-weight: normal;
}
.product .s1 .left .t3 em{
    font-style: normal;
}
.product .s1 .left .t3 a{
    color: #333;
    text-decoration: none;
}

.product .s1 .left .t4{
    position:relative;
    font-weight:normal;
    padding:15px 0;
}

.product .s1 .left .t4:before{
    content:"";
    position:absolute;
    top:50%;
    left:2.5em;
    width:6px;
    height:6px;
    border-style:solid;
    border-color:#555555;
    border-width:0 1px 1px 0;
    transform:rotate(45deg);
    margin-top:-4px;
}

.product .s1 .left .t4:after,
.product.in .in1 .text .t1:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:#BBBBBB;
    border-bottom:#FFFFFF 1px solid;
}

.product .s1 .left ul{
    margin:30px 0 20px;
}

.product .s1 .left li{
    padding-bottom:15px;
}

.product .s1 .left input{
    display:none;
}

.product .s1 .left label{
    cursor:pointer;
}

.product .s1 .left label span{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    background:#FFFFFF;
    border:#CCCCCC 1px solid;
    margin-right:10px;
}

.product .s1 .left input:checked + span{
    background:#004998;
    border:#004998 1px solid;
}

.product .s1 .left input:checked + span:before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:50%;
	height:20%;
	border-color:#FFFFFF;
	border-style:solid;
	border-width:0px 0px 3px 3px;
	transform:translate(-50%,-70%) rotate(-45deg);
}

.product .s1 .left table{
    width:100%;
    background:#FFFFFF;
}

.product .s1 .left td{
    padding:10px;
    vertical-align:middle;
    text-align:center;
    border-bottom:#D6D6D6 1px solid;
}

.product .s1 .left tr:first-child td,
.product .s1 .left tr:last-child td{
    border-bottom:none;
}

.product .s1 .left td span{
    position:relative;
}

.product .s1 .left tr:first-child td{
    color:#FFFFFF;
    text-align:center;
    background:#004998;
}

.product .s1 .left td span:before,
.product .s1 .left td span:after{
    content:"";
    position:absolute;
    top:50%;
    width:15px;
    height:1px;
    background:#FFFFFF;
}

.product .s1 .left td span:before{
    left:-25px;
}

.product .s1 .left td span:after{
    right:-25px;
}

.product .s1 .left td:first-child{
    width:4em;
}

/*PRODUCT_S1_RIGHT*/
.product .s1 .right img{
    width:100%;
}

.product .s1 .right .list{
    margin:50px 0 30px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0 20px;
}

.product .s1 .right .list li{
    position:relative;
    margin-bottom:2em;
}

.product .s1 .right a{
    display:block;
    position:relative;
    transition:0.2s;
}

.product .s1 .right a:hover{
    color:#004998;
}

.product .red:before,
.product .og:before,
.cart .s1 .box .td .red:before,
.cart .s1 .box .td .og:before{
    content:"";
    position:absolute;
    top:-5px;
    left:10px;
    z-index:1;
    width:20px;
    height:32px;
}

.product .red:before,
.cart .s1 .box .td .red:before{
    background:url("../images/product_icon_red.png");
}

.product .og:before,
.cart .s1 .box .td .og:before{
    height:130px;
    background:url("../images/product_icon_og.png");
}

.product .s1 .right .red a:before,
.product .s1 .right .og a:before,
.product.in .red:after,
.product.in .og:after{
    content:"";
    position:absolute;
    top:-5px;
    left:30px;
    z-index:1;
    border-style:solid;
    border-width:5px 0 0 5px;
    border-color:transparent transparent transparent #999999;
}

.product .s1 .right .new:after,
.product .s1 .right .hot:after,
.product.in .in1 .new .splide__track:after,
.product.in .in1 .hot .splide__track:after,
.product.in .in3 .new a:after,
.product.in .in3 .hot a:after,
.cart .s1 .box .td .new:after,
.cart .s1 .box .td .hot:after{
    position:absolute;
    left:10px;
    bottom:70px;
    padding:5px;
    font-size:12px;
    color:#FFFFFF;
}

.product .s1 .right .new:after,
.product.in .in1 .new .splide__track:after,
.product.in .in3 .new a:after,
.cart .s1 .box .td .new:after{
    content:"New";
    background:#2E82D6;
}

.product .s1 .right .hot:after,
.product.in .in1 .hot .splide__track:after,
.product.in .in3 .hot a:after,
.cart .s1 .box .td .hot:after{
    content:"HOT";
    background:#D90000;
}

.product .s1 .right .t5,
.product.in .in3 .t2{
    margin-top:9px;
    line-height:1.5em;
    height:3em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/*PRODUCT_IN-----------------------------------------*/

/*PRODUCT_IN1-----------------*/
.product.in .in1{
    padding:90px 0 30px;
}

.product.in .in1 .out{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4%;
}

/*PRODUCT_IN1_SLIDER*/
.product.in .in1 .slider img{
    width:100%;
}

.product.in .in1 .top .splide__arrow{
	width:40px;
	height:40px;
	opacity:1;
	background:#EEEEEE;
	transition:0.2s;
}

.product.in .in1 .top .splide__arrow:hover{
	background:#888888;
}

.product.in .in1 .top .splide__arrow svg{
	fill:#888888;
	transition:0.2s;
}

.product.in .in1 .top .splide__arrow:hover svg{
	fill:#FFFFFF;
}

.product.in .in1 .top .splide__arrow--prev{
	left:15px;
}

.product.in .in1 .top .splide__arrow--next{
	right:15px;
}

.product.in .in1 .bm .splide__slide{
	border:#D6D6D6 1px solid !important;
    margin-top:10px;
}

.product.in .in1 .bm .splide__slide.is-active{
	border:#004998 1px solid !important;
}

/*PRODUCT_IN1_TEXT*/
.product.in .in1 .t1{
    position:relative;
    font-size:22px;
    font-weight:normal;
    line-height:1.3em;
    padding-bottom:0.8em;
}

.product.in .in1 .t1 strong{
    font-weight: normal;
}
.product.in .in1 .t1 em{
    font-style: normal;
}
.product.in .in1 .t1 a{
    color: #333;
    text-decoration: none;
}

.product.in .in1 .edit{
    margin:30px 0;
    line-height:1.8em;
}

.product.in .in1 .t2{
    font-size:18px;
    font-weight:normal;
    line-height:1.5em;
}

.product.in .in1 .t3{
    line-height:1.7em;
    margin:1em 0 2em;
}

.product.in .in1 .new .splide__track:after,
.product.in .in1 .hot .splide__track:after{
    bottom:10px;
}

.product.in .in1 .bt{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.product.in .in1 .bt a,
.cart .s2 .send,
.contact .s1 .send{
    width:180px;
    line-height:42px;
    color:#FFFFFF;
    text-align:center;
    text-shadow:0 0 2px rgba(0,0,0,0.6);
    background-image:url("../images/product_in_bt1.jpg");
    background-position:0 0;
    box-shadow:2px 2px 4px rgba(0,0,0,0.2);
}

.product.in .in1 .bt a:hover,
.cart .s2 .send:hover,
.contact .s1 .send:hover{
    background-position:0 -42px;
}

.product.in .in1 a.bt_buy{
    background-image:url("../images/product_in_bt2.jpg");
}

.product.in .in1 .bt img{
    height:25px;
    vertical-align:middle;
    margin-left:10px;
}

.product.in .in1 .t4{
    display:block;
    position:relative;
    font-size:15px;
    color:#990000;
    padding-left:10px;
    margin:2em 0 1em;
}

.product.in .in1 .t4:before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    border-style:solid;
    border-width:4px 0 4px 5px;
    border-color:transparent transparent transparent #990000;
    margin-top:-4px;
}

.product.in .in1 .scroll{
    max-width:100%;
    display:inline-block;
    overflow:auto;
}

.product.in .in1 td{
    font-size:13px;
    padding:1em;
    text-align:center;
    border:#F3F3F3 1px solid;
    white-space:nowrap;
    background:#FFFFFF;
}

.product.in .in1 td:first-child{
    color:#FFFFFF !important;
    background:#7BB9D7 !important;
}

.product.in .in1 tr:first-child td{
    background:#D3E8F1;
}

.product.in .in1 tr:nth-child(2) td{
    color:#990000;
}

@media only screen and (max-width:500px){
    .product.in .in1 .bt a{
        width:100%;
    }
}

/*PRODUCT_IN2-----------------*/
.product.in .in2 .t1{
    position:relative;
    font-size:20px;
    border-bottom:#FFFFFF 1px solid;
    padding-bottom:1em;
}

.product.in .in2 .t1:after{
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    height:1px;
    background:#CCCCCC;
    border-left:#418FC0 4em solid;
}

.product.in .in2 .edit{
    padding:40px 0;
    line-height:1.7em;
}

.product.in .in2 .edit img{
    display:block;
    margin:0 auto;
    max-width:100%;
    height:auto;
}

/*PRODUCT_IN3-----------------*/
.product.in .in3{
    padding-bottom:50px;
    margin-bottom:3em;
}

.product.in .in3 .out{
    padding:0 70px;
}

.product.in .in3 .t1{
    position:relative;
    padding:2em 0;
}

.product.in .in3 .t1:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:#CCCCCC;
    border-bottom:#FFFFFF 1px solid;
}

.product.in .in3 .t1:after{
    content:"";
    position:absolute;
    top:50%;
    left:4.5em;
    border-style:solid;
    border-width:5px 3px 0 3px;
    border-color:#999999 transparent transparent transparent;
}

.product.in .in3 img{
    width:100%;
}

.product.in .in3 .splide__arrow{
    margin-top:-25px;
}

.product.in .in3 .splide__pagination{
    bottom:-50px;
}

.product.in .in3 .splide__slide{
    padding-top:5px;
}

.product.in .in3 .hot,
.product.in .in3 .new,
.product.in .in3 .red:after,
.product.in .in3 .og:after{
    top:0;
}

.product.in .in3 a{
    position:relative;
    display:block;
}

.product.in .in3 .splide__arrow{
	width:40px;
	height:40px;
	opacity:1;
	background:#FFFFFF;
    box-shadow:0 0 4px rgba(0,0,0,0.2);
	transition:0.2s;
}

.product.in .in3 .splide__arrow:hover{
	background:#888888;
}

.product.in .in3 .splide__arrow svg{
	fill:#888888;
	transition:0.2s;
}

.product.in .in3 .splide__arrow:hover svg{
	fill:#FFFFFF;
}

.product.in .in3 .splide__arrow--prev{
	left:-50px;
}

.product.in .in3 .splide__arrow--next{
	right:-50px;
}

/*CART-----------------------------------------*/
.cart .article{
    background:#FFFFFF;
}

/*CART_S1-----------------*/
.cart .s1{
    background:url("../images/cart_s1_bg.jpg") top center;
    background-size:cover;
    padding:70px 0 30px;
}

/*CART_S1_TOP*/
.cart .s1 .top{
    font-size:15px;
    line-height:1.5em;
    text-align:center;
}

.cart .s1 .top .t1{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
}

.cart .s1 .top .t1 div{
    width:100px;
    background:#FFFFFF;
    border:#DDDDDD 1px solid;
    border-radius:50%;
}

.cart .s1 .top .t1 h1{
    font-size:28px;
    font-weight:normal;
}

.cart .s1 .top .t1 img{
    display:block;
    width:100%;
}

.cart .s1 .top .t2{
    color:#B20000;
    margin:1.5em 0 0.5em;
}

.cart .s1 .top .t3{
    color:#0E539D;
    margin-bottom:2em;
}

/*CART_S1_BOX*/
.cart .s1 .box{
    padding:10px;
    background:#FFFFFF;
    box-shadow:0 0 4px rgba(0,0,0,0.3);
}

.cart .s1 .box .table{
    width:100%;
}

.cart .s1 .box .td{
    padding:15px;
    text-align:center;
    vertical-align:middle;
    border-bottom:#CCCCCC 1px solid;
}

.cart .s1 .box .td span{
    display:inline-block;
    position:relative;
}

.cart .s1 .box .tr:last-child .td{
    border-bottom:none;
}

.cart .s1 .box .td:first-child{
    text-align:left;
}

.cart .s1 .box .image img{
    width:80px;
}

.cart .s1 .box .tr:first-child .td{
    color:#FFFFFF;
    background:#333333;
}

.cart .s1 .box .td:first-of-type a{
    display:flex;
    align-items:center;
    gap:1em;
    line-height:1.5em;
    transition:0.2s;
}

.cart .s1 .box .td:first-of-type a:hover{
    color:#004998;
}

.cart .s1 .box .td .red:before,
.cart .s1 .box .td .og:before{
    top:-3px;
    left:5px;
    width:10px;
    height:16px;
    background-size:contain;
}

.cart .s1 .box .td .og:before{
    height:55px;
    background-size:100% auto;
}

.cart .s1 .box .td .new:after,
.cart .s1 .box .td .hot:after{
    left:5px;
    bottom:5px;
    padding:3px;
    font-size:8px;
    line-height:1em;
    color:#FFFFFF;
}

.cart .s1 .box .td.color{
    width:160px;
}

.cart .s1 .box .td.amount,
.cart .s1 .box .td.sp{
    width:90px;
}

.cart .s1 .box .td.subtotal{
    width:110px;
}

.cart .s1 .box .td .image{
    position:relative;
    border:#EEEEEE 1px solid;
}

.cart .s1 .box .td img{
    display:block;
}

.cart .s1 .box .sp span{
    color:#CC0000;
}

.cart .td input,
.cart li textarea{
    border:none;
    box-shadow:inset 1px 1px 4px rgba(0,0,0,0.3);
    padding:10px;
    width:calc(8em + 20px);
    box-sizing:border-box;
    border-radius:5px;
    outline:none;
}

.cart .s1 .box .amount input{
    width:calc(4em + 20px);
}

.cart .s1 .box .td:last-child a{
    position:relative;
    display:block;
    width:35px;
    height:35px;
    background:#999999 url("../images/cart_del.png");
    background-size:cover;
    border-radius:50%;
}

.cart .s1 .box .td:last-child a:hover{
    background:#CC0000;
}

.cart .s1 .box .td:last-child a:hover:before,
.cart .s1 .box .td:last-child a:hover:after{
	content:"";
	position:absolute;
	top:21%;
	left:48%;
	width:1px;
	height:60%;
	background:#FFFFFF;
	transition:0.2s;
}

.cart .s1 .box .td:last-child a:before{
	transform:rotate(45deg);
}

.cart .s1 .box .td:last-child a:after{
	transform:rotate(-45deg);
}

.cart .s1 .total{
    width:200px;
    margin:1.5em 0 0 auto;
}

.cart .s1 .total .td{
    padding-bottom:15px;
}

.cart .s1 .total .tr:last-child .td{
    padding:15px 0;
    border-top:#999999 1px solid;
}

.cart .s1 .total .tr:last-child .td:last-child{
    font-size:19px;
    font-weight:600;
}

/*CART_S2-----------------*/
.cart .s2{
    position:relative;
    background:#FFFFFF;
    padding:30px 0;
}

.cart .s2:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-60px;
    width:100%;
    height:60px;
    background:linear-gradient(#FFFFFF,#F5F5F5);
}

.cart .s2 ul.out{
    max-width:850px;
}

.cart .s2 li{
    display:flex;
    gap:40px;
    padding:40px 0;
}

.cart .s2 .left img{
    width:100px;
    border:#959595 1px solid;
    border-radius:50%;
}

.cart .s2 .left .t1{
    width:2em;
    font-size:28px;
    line-height:1.3em;
    margin:5px auto 0;
}

.cart .s2 .right,
.cart .s2 .right .bm,
.cart .s2 .right .bm input{
    width:100%;
}

.cart .s2 .right .bm .captcha input{
    width:100px !important;
}

.cart .s2 .right .bm .captcha img{
    vertical-align:middle;
    height:45px;
    margin-left:10px;
}

.cart .s2 .right div{
    position:relative;
}

.cart .s2 .right .t2{
    line-height:1.5em;
    margin-bottom:1em;
}

.cart .s2 .right textarea{
    width:100%;
    height:130px;
    box-sizing:border-box;
}

.cart .s2 .right .top input{
    width:252px;
}

.cart .s2 .right .td{
    position:relative;
    padding:5px 0;
}

.cart .s2 .right .td:nth-child(odd){
    width:4em;
    padding-right:1em;
}

.cart .s2 .right .td:nth-child(3){
    padding-left:2em;
}

.cart .s2 li:last-child{
    flex-direction:column;
    align-items:center;
    padding:0;
}

.cart .s2 .send{
    line-height:normal;
    height:42px;
    border:none;
    cursor:pointer;
}

.cart .s2 li:last-child p{
    position:relative;
    line-height:1.5em;
}

.cart .s2 li:last-child p:before{
    content:"!";
    position:absolute;
    top:5px;
    left:-25px;
    font-size:13px;
    width:1.2em;
    line-height:1.2em;
    text-align:center;
    border:#333333 1px solid;
    border-radius:50%;
}

form .nofill:before,
form .format:before{
	position:absolute;
	top:-2px;
	left:5px;
	color:#FFFFFF;
	padding:8px 10px;
	background:#396AB5;
	border-radius:5px 5px 0px 0px;
	font-size:12px;
	line-height:1em;
	white-space:nowrap;
	pointer-events:none;
}

form .nofill:before{
	content:"此欄為必填";
}

form .format:before{
	content:"格式錯誤";
}

form .nofill,
form .format{
	padding-top:25px !important;
}

form .nofill input,
form .format input,
form .nofill textarea{
	border:#396AB5 1px solid !important;
	box-shadow:0px 0px 5px #396AB5;
}

/*ABOUT-----------------------------------------*/

/*ABOUT_S1-----------------*/
.about .s1,
.location .s1{
    background:url("../images/about_bg.jpg") top center;
    background-size:cover;
    padding-top:130px;
}

.about .s1 div.out,
.location .s1 div.out{
    height:815px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.about .s1 .box{
    max-width:875px;
    padding:25px;
    background:rgba(255,255,255,0.9);
    display:flex;
    align-items:center;
    gap:25px;
}

.about .s1 .text img{
    display:none;
}

.about .s1 .text p{
    line-height:1.7em;
    margin-top:1em;
}

/*PROCESS-----------------------------------------*/

/*PROCESS_S1-----------------*/
.process .s1{
    padding-top:60px;
}

.process .t1{
    max-width:700px;
    margin:0 auto;
    background:#FFFFFF;
    color:#0F549E;
    text-align:center;
    font-weight:normal;
    line-height:1.5em;
    padding:0.5em;
    border:#D9E0E6 1px solid;
}

.process .t1 span{
    position:relative;
    display:inline-block;
}

.process .t1 span:before,
.process .t1 span:after{
    content:"";
    position:absolute;
    top:50%;
    width:25px;
    height:1px;
    background:#0F549E;
}

.process .t1 span:before{
    left:-40px;
}

.process .t1 span:after{
    right:-40px;
}

.process .t2{
    position:relative;
    font-size:19px;
    font-weight:600;
    padding-left:15px;
    margin:60px 0 25px;
}

.process .t2:before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:4px;
    height:4px;
    border:#478FBB 3px solid;
    border-radius:50%;
    margin-top:-4px;
}

.process .s1 .splide__slide{
    text-align:center;
}

.process .s1 .splide__slide:before{
    content:"";
    position:absolute;
    top:43px;
    left:0;
    right:0;
    height:1px;
    background:#A2C4D9;
    border-bottom:#FFFFFF 1px solid;
}

.process .s1 .splide__slide:first-child:before{
    left:50%;
}

.process .s1 .splide__slide:last-child:before{
    right:50%;
}

.process .s1 .splide__slide div{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:85px;
    height:85px;
    background:#FFFFFF;
    font-family:var(--serif);
    font-size:36px;
    color:#478FBB;
    font-weight:600;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,0.2),0 0 0 15px #F3F3F3;
    margin:5px 5px 10px;
}

.process .s1 .splide__slide span{
    font-size:13px;
}

.process .s1 .splide__slide span:before{
    content:"STEP";
    color:#333333;
}

.process .s1 .splide__slide p{
    font-size:15px;
    line-height:1.5em;
    padding:0 0.5em;
}

/*PROCESS_S2-----------------*/
.process .s2 ol{
    margin-left:1.2em;
    line-height:1.7em;
}

.process .s2 .ac{
    display:flex;
    gap:1em;
    line-height:1.7em;
    margin-bottom:1em;
}

.process .s2 .ac ul{
    color:#4770B8;
}

.process .s2 p{
    line-height:1.7em;
}

.process .s2 .ps{
    position:relative;
    display:flex;
    align-items:center;
    gap:35px;
    padding:80px 0 60px;
}

.process .s2 .ps:before{
    content:"";
    position:absolute;
    top:40px;
    left:0;
    width:100%;
    height:1px;
    background:#C1CADC;
    border-bottom:#FFFFFF 1px solid;
}

.process .s2 .ps div{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:85px;
    height:85px;
    background:#FFFFFF;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
}

.process .s2 .ps div img{
    width:50px;
}

.process .s2 .ps .mb{
    display:none;
}

/*CONTACT-----------------------------------------*/

/*CONTACT_S1-----------------*/
.contact .s1{
    background:url("../images/contact_bg.jpg") top center;
    background-size:cover;
    padding-top:190px;
}

.contact .s1 form{
    max-width:490px;
    margin-left:auto;
    padding:55px;
    background:rgba(255,255,255,0.9);
}

.contact .s1 .top,
.about .s1 .top,
.location .s1 .top{
    display:flex;
    font-size:22px;
    line-height:1em;
}

.contact .s1 .t1,
.about .s1 .t1,
.location .s1 .t1{
    position:relative;
    font-weight:normal;
    padding-right:30px;
}

.contact .s1 .t1:after,
.about .s1 .t1:after,
.location .s1 .t1:after{
    content:"";
    position:absolute;
    right:23px;
    bottom:0;
    width:1px;
    height:30px;
    background:#999999;
    transform:rotate(45deg);
    transform-origin:left bottom;
}

.contact .s1 .t2,
.about .s1 .t2,
.location .s1 .t2{
    font-size:15px;
}

.contact .s1 .t3{
    line-height:1.7em;
    margin:1.3em 0;
}

.contact .s1 .area{
    padding:0 20px 3em;
    margin-top:-1em;
}

.contact .s1 ul li{
    display:grid;
    grid-template-columns:4em 1fr;
    gap:1em;
    align-items:center;
    margin-bottom:20px;
}

.contact .s1 ul li div{
    position:relative;
}

.contact .s1 ul input,
.contact .s1 ul textarea{
    border:none;
    height:40px;
    border-bottom:#999999 1px solid;
    background:none;
    width:100%;
}

.contact .s1 ul textarea{
    height:100px;
}

.contact .s1 ul .msg{
    align-items:flex-start;
}

.contact .s1 ul .msg div:first-child{
    padding-top:6px;
}

.contact .s1 ul .captcha{
    grid-template-columns:4em 100px 1fr;
}

.contact .s1 ul .captcha img{
    height:40px;
}

.contact .s1 .send{
    display:block;
    width:150px;
    border:none;
    padding:0;
    margin:50px auto 0;
    border-radius:5px;
    cursor:pointer;
}

.contact form .nofill:before,
.contact form .format:before{
	border-radius:5px;
}


.contact form .nofill input,
.contact form .format input,
.contact form .nofill textarea{
    border-width:0 !important;
	border-bottom:#396AB5 1px solid !important;
    box-shadow:none;
}

.contact form .nofill:before,
.contact form .format:before{
	left:0;
}

/*LOCATION-----------------------------------------*/

/*LOCATION_S1-----------------*/
.location .s1{
    background-image:url("../images/location_bg.jpg");
}

.location .s1 .area,
.location .s1 .area a{
    color:#FFFFFF;
}

.location .s1 .box{
    max-width:700px;
    width:100%;
    padding:45px;
    background:rgba(255,255,255,0.9);
    box-sizing:border-box;
}

.location .s1 .top{
    border-bottom:rgba(153,153,153,0.5) 1px solid;
    padding-bottom:1em;
    margin-bottom:1em;
}

.location .s1 .box ul{
    list-style:disc;
    margin-left:1.2em;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(auto,7em));
    gap:1em 2em;
}

.location .s1 .box li::marker{
    color:#937639;
}

.location .s1 p{
    line-height:1.7em;
    margin-top:1em;
}

@media only screen and (max-width:400px){
    .location .s1 .box ul,
    .location .s1 p{
        font-size:4.2vw;
    }
}

/*COMMON--------------------------------------------------------------------*/

/*HEADER-----------------------------------------*/
.header{
    /*position:fixed;*/
	position:absolute;
	top:0;
    left:0;
    width:100%;
	z-index:1000;
    background:rgba(255,255,255,0.9);
    box-shadow:0px 2px 2px rgba(0,0,0,0.1);
}

.product .header,
.process .header,
.cart .header{
	/*position:sticky;*/
    position:relative;
}

.header .mb_bt,
.header .mb{
	display:none;
}

.header .logo{
	display:block;
	position:absolute;
	top:50%;
	left:20px;
	z-index:1;
	width:60%;
	max-width:149px;
	transform:translateY(-50%);
}

.header .logo img{
	width:100%;
}

.header .cart{
    position:absolute;
    display:flex;
    align-items:center;
    gap:5px;
    top:27px;
    right:20px;
}

.header .cart img{
    width:22px;
}

.header .cart span{
    color:#FFFFFF;
    background:#B20000;
    padding:2px 10px;
    border-radius:20px;
}

/*HEADER_SEARCH-----------------*/
.header form{
    position:absolute;
    top:20px;
    right:100px;
    text-align:right;
}

.header form input[type="text"]{
    font-size:15px;
    border:#CCCCCC 1px solid;
    width:265px;
    height:35px;
    padding:0 35px 0 1em;
    box-sizing:border-box;
    border-radius:50px;
}

.header form input[type="submit"]{
    position:absolute;
    top:0;
    right:0;
    width:35px;
    height:35px;
    background:url("../images/header_search.png") center no-repeat;
    background-size:15px auto;
    border:none;
    cursor:pointer;
}

/*HEADER_MENU-----------------*/
.header .pc .menu{
    display:flex;
    justify-content:flex-end;
    gap:min(4vw,3em);
    padding-top:90px;
    transition:0.2s;
}

.header.active .pc .menu{
    padding-top:75px;
}

.header .pc .menu .list{
    position:relative;
}

.header .menu .list div,
.header .menu .list a{
    color:#666666;
    cursor:pointer;
    transition:0.2s;
}

.header .menu .list:hover div,
.header .menu .list a:hover{
    color:#004998;
}

.header .pc .menu .list div{
    position:relative;
    padding:0 15px 23px 0;
}

.header .menu .list div:after{
    content:"";
    position:absolute;
    top:4px;
    right:0;
    width:5px;
    height:5px;
    border-style:solid;
    border-color:#666666;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.header .menu .list:hover div:after{
    border-color:#004998;
}

.header .pc .menu .list ul{
    position:absolute;
    left:50%;
    background:rgba(255,255,255,0.9);
    padding:20px;
    transform:translateX(-50%) scaleY(0);
    transform-origin:top;
    transition:0.2s;
}

.header .pc .menu .list:hover ul{
    transform:translateX(-50%) scaleY(1);
}

.header .pc .menu .list ul:before{
    content:"";
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:1px;
    background:#004998;
}

.header .pc .menu .list li a{
    display:block;
    min-width:6em;
    padding:0.7em 0;
    text-align:center;
}

.pagein .article .out{
    max-width:1100px;
}

/*PAGEBM-----------------------------------------*/
.pagebm{
	padding:90px 0;
}

.pagebm .out{
    max-width:1100px !important;
}

.pagebm .t1{
    font-family:var(--serif);
    font-size:30px;
    line-height:1.3em;
    text-align:center;
    margin-bottom:1em;
}

.pagebm ul{
	display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0 3%;
}

.pagebm img{
    width:100%;
}

.pagebm .t2{
	font-size:20px;
	line-height:1.5em;
	font-weight:normal;
	margin:1em 0;
}

.pagebm .t3{
    line-height:1.7em;
}

/*TABLE-----------------------------------------*/
.table{
    display:table;
}

.tr{
    display:table-row;
}

.td{
    display:table-cell;
}

/*AREA-----------------------------------------*/
.area{
    display:flex;
    justify-content:flex-end;
    list-style:none;
    font-size:15px;
    color:#004898;
    padding:3em 20px 0;
}

.area li{
    position:relative;
    padding-left:50px;
}

.area li:before{
    content:"";
    position:absolute;
    top:50%;
    left:15px;
    width:20px;
    height:1px;
    background:#999999;
}

/*.area li:first-child{
    padding-left:20px;
}*/

.area li:first-child:before{
    display:none;
    /*content:"";
    top:0;
    left:0;
    width:16px;
    height:16px;
    background:#999999;
    border-radius:50%;*/
}

/*.area li:first-child:after{
    content:"";
    position:absolute;
    top:5px;
    left:6px;
    border-style:solid;
    border-width:3px 0 3px 6px;
    border-color:transparent transparent transparent #FFFFFF;
}*/

.area a{
    transition:0.2s;
}

.area a:hover{
    color:#004898;
}

/*PAGE_NUMBER-----------------------------------------*/
.page_number{
	font-family:Arial;
	color:#666666;
	text-align:center;
	padding:0 0 50px;
}

.page_number ul{
    display:flex;
    justify-content:center;
	margin:0px auto;
	overflow:hidden;
}

.page_number li select{
	cursor:pointer;
	padding:0px 5px;
}

.page_number li.page_select{
	padding:0px 20px 0 10px;
	position:relative;
}

.page_number li.page_select .select_box{
	display:inline-block;
	position:relative;
}

.page_number li.page_select .select_box:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	border-style:solid;
	border-width:6px 3px 0 3px;
	border-color:#004998 transparent transparent transparent;
	transform:translateX(-50%);
	margin-left:1px;
	transition:0.2s;
}

.page_number a{
	display:inline-block;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#A3A3A3;
	vertical-align:middle;
	position:relative;
	transition:0.2s;
}

.page_number a:hover{
	background:#004998;
}

.page_number li a:after{
	content:"";
	position:absolute;
	top:50%;
	border-style:solid;
	border-color:#FFFFFF;
	border-width:0px 2px 2px 0px;
	padding:4px;
	margin-top:-5px;
}

.page_number li.page_prev a:after{
	right:13px;
	transform:rotate(135deg);
}

.page_number li.page_next a:after{
	left:13px;
	transform:rotate(-45deg);
}

.page_number li select{
	border:none;
	font-family:Arial;
	font-size:24px;
	color:#333333;
	font-weight:500;
	border-radius:5px;
	background:none;
	margin-bottom:5px;
	text-align-last:center;
	transition:0.2s;
}

.page_number li .select_box:hover select{
	color:#004998;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:50px;
	height:50px;
	border-radius:50%;
	z-index:500;
	background:#FFFFFF;
	opacity:0.8;
	position:relative;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
	transition:opacity 0.2s;
}

body a.pagetop:hover{
	opacity:1 !important;
}

body a.pagetop:after{
	content:"";
	border:solid #294D83;
	border-width:0px 3px 3px 0px;
	padding:5px;
	display:inline-block;
	position:absolute;
	top:55%;
	left:50%;
	transform:rotate(-135deg) translate(-50%,-50%);
	transform-origin:left top;
}

/*FOOTER-----------------------------------------*/
.footer{
    background:#FFFFFF;
    box-shadow:0px -2px 2px rgba(0,0,0,0.1);
}

.footer .out{
    max-width:1100px;
}

.footer .top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:40px 0 20px;
    border-bottom:#DDDDDD 1px solid;
}

.footer .top ul{
    max-width:560px;
    display:flex;
    flex-wrap:wrap;
    font-size:16px;
}

.footer .top li{
    margin-bottom:20px;
}

.footer .top li:after{
    content:"\2022";
    color:#004898;
    padding:0 5px;
}

.footer .top li:nth-child(3):after,
.footer .top li:nth-child(5):after{
    display:none;
    padding:0;
}

.footer .top .fb{
    position:relative;
    display:block;
    width:110px;
    height:25px;
    overflow:hidden;
    margin-bottom:10px;
}

.footer .top .fb img{
    position:relative;
    top:-25px;
    transition:0.2s;
}

.footer .top .line img{
    width:110px;
    transition:0.2s;
}

.footer .top .fb:hover img,
.footer .top .line:hover img{
    opacity:0.8;
}

.footer .bm{
    display:flex;
    justify-content:space-between;
    font-size:15px;
    padding:1em 0;
}

.footer .bm a{
    transition:0.2s;
}

.footer .bm a:hover{
    color:#3A5A98;
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
    
    /*HOME-----------------------------------------*/

    /*HOME_S1-----------------*/
    .home .s1 .pc{
        display:none;
    }
    
    .home .s1 .mb{
        display:block;
        width:100%;
    }
    
    .home .s1 a{
        display:block;
        height:auto;
    }
    
    /*HOME_S2-----------------*/
    .home .s2{
        padding:40px 0;
    }
    
    .home .s2 .bm{
        max-width:500px;
        display:block;
        margin:0 auto;
    }
    
    .home .s2 .bm li{
        margin-bottom:15px;
    }
    
    /*HOME_S3-----------------*/
    .home .s3 .bm{
        flex-wrap:wrap;
        justify-content:flex-start;
        background:none;
    }
    
    .home .s3 .bm li{
        width:50%;
        border:#FFFFFF 1px solid;
        box-sizing:border-box;
    }
    
    .home .s3 .bm a{
        background:#1A3E80;
    }
    
    /*PRODUCT-----------------------------------------*/
    
    /*PRODUCT_S1-----------------*/
    .product .s1 .box{
        display:block;
    }
    
    /*PRODUCT_S1_LEFT*/
    .product .s1 .left .t3{
        border-bottom:none;
    }
    
    .product .s1 .left .t4{
        cursor:pointer;
        background:#FFFFFF;
        padding:15px;
    }
    
    .product .s1 .left .t4.active{
        color:#004998;
    }
    
    .product .s1 .left .t4:before{
        border-width:0 2px 2px 0;
        left:auto;
        right:15px;
        margin-top:-5px;
    }
    
    .product .s1 .left .t4.active:before{
        border-color:#004998;
    }
    
    .product .s1 .left ul{
        display:none;
        background:#FFFFFF;
        margin:0 0 20px;
        padding:20px;
    }
    
    .product .s1 .left table{
        margin:40px 0;
    }
    
    /*PRODUCT_S1_RIGHT*/
    .product .s1 .right{
        margin-top:40px;
    }
    
    .product .s1 .right .list{
        grid-template-columns:repeat(auto-fit,minmax(auto,260px));
        justify-content:center;
        margin-bottom:0;
    }
    
    /*PRODUCT_IN-----------------------------------------*/

    /*PRODUCT_IN1-----------------*/
    .product.in .in1{
        padding:60px 0 30px;
    }
    
    .product.in .in1 .out{
        display:block;
    }
    
    /*PRODUCT_IN1_SLIDER*/
    .product.in .in1 .slider{
        max-width:500px;
        margin:0 auto 30px;
    }
    
    /*PRODUCT_IN1_TEXT*/
    .product.in .in1 .scroll{
        padding-bottom:40px;
        background:url("../images/scroll_img.png") bottom 10px center no-repeat;
        background-size:auto 25px;
    }
    
    /*PRODUCT_IN3-----------------*/
    .product.in .in3 .out{
        padding:0 20px;
    }
    
    .product.in .in3 .splide{
        padding:0 50px;
    }
    
    .product.in .in3 .splide__arrow--prev{
        left:0;
    }

    .product.in .in3 .splide__arrow--next{
        right:0;
    }
    
    /*CART-----------------------------------------*/
    
    /*CART_S1-----------------*/
    .cart .s1{
        padding:30px 0;
    }
    
    /*CART_S1_BOX*/
    .cart .s1 .box{
        padding:0;
    }
    
    .cart .s1 .box .tr:first-child .td{
        display:none;
    }
    
    .cart .box .table,
    .cart .box .tr,
    .cart .box .td,
    .cart .box .tr:first-child .td:first-child,
    .cart .s2 .table,
    .cart .s2 .tr,
    .cart .s2 .td{
        position:relative;
        display:block;
        width:auto !important;
        text-align:left !important;
    }
    
    .cart .s1 .box .tr:first-child{
        padding:0;
    }
    
    .cart .s1 .box .tr{
        padding:20px 0;
        border-bottom:#CCCCCC 1px solid;
    }
    
    .cart .s1 .box .td{
        border-bottom:none;
    }
    
    .cart .s1 .box .td:first-child a{
        margin-right:40px;
    }
    
    .cart .s1 .box .td input,
    .cart .s2 .td input{
        width:100% !important;
    }
    
    .cart .s1 .box .td span:has(input){
        display:block;
    }
    
    .cart .s1 .box .td.color:before{
        content:"顏色/數量";
        display:block;
        padding-bottom:15px;
    }
    
    .cart .s1 .box .td.amount:before{
        content:"總數量";
        display:block;
        padding-bottom:15px;
    }
    
    .cart .s1 .box .td.sp,
    .cart .s1 .box .td.subtotal{
        padding:10px 15px;
    }
    
    .cart .s1 .box .td.sp:before{
        content:"優惠價";
        display:inline-block;
        width:3.5em;
    }
    
    .cart .s1 .box .td.subtotal:before{
        content:"小計";
        display:inline-block;
        width:3.5em;
    }
    
    .cart .s1 .box .td:last-child{
        position:absolute;
        top:20px;
        right:0;
    }
    
    /*CART_S2-----------------*/
    .cart .s2{
        padding:30px 0 60px;
    }
    
    .cart .s2:after{
        bottom:0;
    }
    
    .cart .s2 ul.out{
        max-width:none;
    }
    
    .cart .s2 li{
        display:block;
    }
    
    .cart .s2 .left{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    .cart .s2 .left img{
        width:55px;
    }
    
    .cart .s2 .left .t1{
        width:auto;
        font-size:24px;
        margin:0 0 0 0.5em;
    }
    
    .cart .s2 .right .t2{
        text-align:center;
        margin-top:1em;
    }
    
    .cart .s2 .right .td:nth-child(odd){
        width:auto;
        padding-bottom:10px;
    }
    
    .cart .s2 .right .td:nth-child(3){
        padding-left:0;
    }
    
    .cart .s2 li:last-child{
        display:flex;
    }
    
    /*ABOUT-----------------------------------------*/
    
    /*ABOUT_S1-----------------*/
    .about .s1,
    .contact .s1,
    .location .s1{
        padding:60px 0;
    }
    
    .about .s1 div.out{
        max-width:440px;
        height:auto;
    }
    
    .about .s1 .top{
        border-bottom:rgba(153,153,153,0.5) 1px solid;
        padding-bottom:1em;
        margin-bottom:1em;
    }
    
    .about .s1 .box{
        display:block;
        max-width:none;
    }
    
    .about .s1 .pc{
        display:none;
    }
    
    .about .s1 .text img{
        display:block;
        width:100%;
    }
    
    /*PROCESS-----------------------------------------*/

    /*PROCESS_S1-----------------*/
    .process .t1{
        max-width:none;
    }
    
    .process .t1 span:before,
    .process .t1 span:after{
        display:none;
    }
    
    .process .s1 .splide{
        max-width:335px;
        margin:0 auto;
    }
    
    .process .s1 .splide__slide{
        padding-bottom:40px;
    }

    .process .s1 .splide__pagination{
        bottom:0;
    }

    .process .splide__pagination__page{
        background:#999999;
        height:12px;
        width:12px;
        margin:5px;
        opacity:1;
        transition:0s;
    }

    .process .splide__pagination__page.is-active{
        background:#004998;
        transform:none;
    }
    
    /*PROCESS_S2-----------------*/
    .process .s2 .ac,
    .process .s2 .ps .mb{
        display:block;
    }
    
    .process .s2 .ac ul{
        margin-top:0.5em;
    }
    
    .process .s2 .ps{
        display:block;
        text-align:center;
    }
    
    .process .s2 .ps div{
        margin:0 auto 1em;
    }
    
    .process .s2 .ps .pc{
        display:none;
    }
    
    /*CONTACT-----------------------------------------*/
    
    /*CONTACT_S1-----------------*/
    .contact .s1 form{
        max-width:none;
        padding:50px 30px;
    }
    
    .contact .s1 ul li{
        display:block;
        margin-bottom:20px;
    }
    
    .contact .s1 li:has(.nofill) div:first-child,
    .contact .s1 li:has(.format) div:first-child{
        padding-bottom:7px;
    }
    
    .contact .s1 ul .msg div:first-child{
        padding-top:0;
    }
    
    .contact .s1 .msg div:last-child{
        padding-top:7px;
    }
    
    .contact .s1 .captcha{
        display:flex;
        flex-wrap:wrap;
        gap:0 10px;
    }
    
    .contact .s1 .captcha div:first-child{
        width:100%;
    }
    
    .contact .s1 .captcha input{
        width:100px;
    }
    
    /*LOCATION-----------------------------------------*/
    
    /*LOCATION_S1-----------------*/
    .location .s1 .box{
        max-width:670px;
        padding:30px;
    }
    
    .location .s1 div.out{
        height:auto;
    }
    
    /*COMMON--------------------------------------------------------------------*/
    .article{
        margin-top:60px;
    }

    /*HEADER-----------------------------------------*/
    .header{
        position:fixed !important;
        background:#FFFFFF;
    }
    
	.header .out{
		height:60px;
	}
	
    .header .logo{
        top:53%;
        max-width:100px;
    }
	
    .header .pc{
		display:none;
    }
    
    .header .cart{
        top:20px;
        right:80px;
    }
    
	/*HEADER_MB_BUTTON-----------------*/
    .header .mb_bt,
    .header .mb{
        display:block;
    }
	
	.header .mb_bt{
		position:absolute;
		top:50%;
		right:20px;
		width:40px;
		height:40px;
		margin-top:-20px;
		text-align:left;
		cursor:pointer;
	}
	
	.header .mb_bt span{
		height:1px;
		width:20px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		background:#222222;
		transition:0.3s;
		display:block;
	}
	
	.header .mb_bt span:before,
	.header .mb_bt span:after{
		content:"";
		height:1px;
		position:absolute;
		right:0;
		background:#222222;
		transition:0.3s;
	}
	
	.header .mb_bt span:before{
		top:-8px;
		width:40px;
	}
	
	.header .mb_bt span:after{
		top:8px;
		width:30px;
	}
	
	.header .mb_bt:hover span,
	.header .mb_bt:hover span:before,
	.header .mb_bt:hover span:after{
		width:40px;
	}
	
	.header .mb_bt.active span:before{
		width:40px;
		top:0;
		transform:rotate(45deg);
	}
	
	.header .mb_bt.active span:after{
		width:40px;
		top:0;
		transform:rotate(-45deg);
	}
	
	.header .mb_bt.active:hover span{
		width:40px;
		transform:rotate(-90deg);
	}
	
	.header .mb_bt.active span{
		background:none;
	}
    
    /*HEADER_SEARCH-----------------*/
    .header form{
        top:25px;
        left:40px;
        right:40px;
    }

    .header form input[type="text"]{
        width:100%;
        height:50px;
        padding:0 50px 0 1em;
    }
    
    .header form input[type="submit"]{
        width:50px;
        height:50px;
        background-size:15px auto;
    }
    
	/*HEADER_MENU-----------------*/
	.header .mb{
		position:fixed;
		top:60px;
		bottom:0;
		left:0;
		width:100%;
		overflow-y:auto;
        background:#EEEEEE;
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	.header .mb.active{
		transform:translateX(0);
	}
	
	.header .mb .menu{
		padding:80px 40px 100px;
	}
	
	.header .mb .menu .list > a,
	.header .mb .menu .list div{
		display:block;
		font-size:20px;
		padding:1em 0;
		position:relative;
		cursor:pointer;
		border-bottom:#CCCCCC 1px solid;
		transition:0.2s;
	}
    
    .header .mb .menu .list div.active{
        color:#004998;
    }
	
	.header .mb .menu .list div:after{
        top:50%;
        margin-top:-5px;
	}
	
	.header .mb .menu .list div.active:after{
        border-color:#004998;
	}
	
	.header .mb .menu .list ul{
		display:none;
		padding-top:20px;
    }
	
    .header .mb .menu .list ul a{
        display:block;
        padding:0.5em 1em;
		transition:0.2s;
    }
    
    /*AREA-----------------------------------------*/
    .area{
        display:none;
    }
    
    /*PAGEBM-----------------------------------------*/
    .pagebm{
        padding:70px 0 10px;
    }
    
    .pagebm .out{
        max-width:500px !important;
    }
    
    .pagebm ul{
        display:block;
    }
    
    .pagebm li{
        margin-bottom:60px;
    }
    
    /*FOOTER-----------------------------------------*/
    .footer{
        text-align:center;
    }
    
    .footer .top{
        display:block;
    }
    
    .footer .top li:after{
        display:none;
    }
    
    .footer .top ul{
        max-width:none;
        display:block;
        margin:25px 0;
    }
    
    .footer .top .fb{
        margin:0 auto 10px;
    }
    
    .footer .bm{
        display:block;
    }
    
    .footer .bm p{
        margin-bottom:1em;
    }
}