@charset 'utf-8';
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
/* ----------RESET---------- */
	*{
		margin:0;
		padding: 0;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		font: inherit;
		color:inherit;
	}
	body{
		position: relative;
		font-size: 16px;
		font-weight: 400;
		font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
		color:#333;
	}
	ul, li{
		list-style: none;
	}
	html{
            font-size: 16px;
        }
/* ----------BLOCK---------- */
	.w90{
		width: 90%;
		margin: 0 auto;
	}
	.w80{
		width: 80%;
		margin: 0 auto;
	}
	.w1300{
		width: 90%;
		position: relative;
		max-width: 1300px;
		margin:0 auto;
		z-index: 2;
	}
	.row{
		width: 100%;
		position: relative;
		margin-bottom: 30px;
	}
	.col90,
	.col80,
	.col75,
	.col70,
	.col66,
	.col60,
	.col50,
	.col40,
	.col35,
	.col33,
	.col30,
	.col25,
	.col20,
	.col166,
	.col15,
	.col05{
		display: inline-block;
		vertical-align: top;
		margin-left: -5px;
	}
	.col90{
		width: 90%;
	}
	.col80{
		width: 80%;
	}
	.col75{
		width: 75%;
	}
	.col70{
		width: 70%;
	}
	.col66{
		width: 66.6666%;
	}
	.col60{
		width: 60%;
	}
	.col50{
		width: 50%;
	}
	.col50:nth-child(odd){
		margin-left: 0px;
	}
	.col40{
		width: 40%;
	}
	.col35{
		width: 35%;
	}
	.col30{
		width: 30%;
	}
	.col33{
		width: 33.3333%;
	}
	.col25{
		width: 25%;
	}
	.col20{
		width: 20%;
	}
	.col166{
		width: 16.6666667%;
	}
	.col15{
		width: 15%;
	}
	.col05{
		width: 05%;
	}
	.fleft{
		float:left;
	}
	.fright{
		float: right;
	}
	.cf:after{
		content: '';
	    display: table;
	    clear: both;
	}
	.mobile_close{
    	display: block;
    }
    .pc_close{
    	display: none;
    }
/* ----------TEXT----------- */
	h1,h2,h3,h4,h5,h6,
	a,p,b,small{
		font:inherit;
		color:inherit;
	}
	h1,h2,h3,h4,h5,h6,p,a{
		font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
	}
	h1{
		font-size: 4rem;
	}
	h2{
		font-size: 1.5rem;
	}
	h3{
		font-size: 1.4rem;
	}
	h4{
		font-size: 1.3rem;
	}
	h5{
		font-size: 1.2rem;
	}
	h6{
		font-size: 1.1rem;
	}
	h1,h2,h3,h4,h5,h6{
		font-weight: 400;
		letter-spacing: .1em;
		line-height: 1.4em;
	}
	p{
		font-size: 1rem;
		line-height: 2.1em;
		letter-spacing:.1em;
		font-weight: 400;
	}
	small{
		font-size: .9rem;
		font-weight: 400;
		line-height: 1.4em;
		letter-spacing: .1em;
	}
	a,
	a:active,
	a:hover,
	a:focus{
		outline: none;
	}
	a{
		font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
		letter-spacing: 2px;
		font-weight: 400;
		font-size: 1rem;
		display: inline-block;
		text-decoration: none;
	}
	.e-title{
		font-family: 'Raleway', 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
		font-weight: 700;
	}
	.e-txt{
		font-family: 'Raleway', 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
		font-weight: 400;
	}
	.txt-bold{font-weight: 600; }
	.txt-light{font-weight: 300; }
	.align-center{text-align:center; }
	.align-left{text-align: left; }
	.align-right{text-align: right; }
/* ----------FORM----------- */
	.form_list li{padding: 8px 0; }
	.form_list label{font-size: 1.1rem; }
	.form_title{padding: 9px 0; }
	input[type=text],
	input[type=number],
	input[type=email],
	input[type=password],
	select,
	textarea{
		font: inherit;
	    font-size: 1rem;
		width: 100%;
		margin: 4px 0 4px;
		border:0;
		padding:6px 15px;
		letter-spacing: 1px;
		border-radius: 0;
		background-color: #eee;
		-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
	}
	input[type=text]:focus,
	input[type=email]:focus,
	input[type=password]:focus,
	select:focus,
	textarea:focus{
		background-color: #e6e6e6;
	}
	select{
		border-radius: 0;
		background: url(../img/icon/form_arrow-01.png) no-repeat right center transparent;
		background-color: #eee;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	}
	textarea{
		height: 200px;
		min-height: 200px;
		/*min-width: 100%;*/
		max-width: 100%;
		max-height: 300px;
	}
	input, textarea, keygen, select, a, a:active, a:hover, a:focus {
     outline: none; }

	::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	    color:    #cccccc;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color:    #cccccc;
	   opacity:  1;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color:    #cccccc;
	   opacity:  1;
	}
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	   color:    #cccccc;
	}
	::-ms-input-placeholder { /* Microsoft Edge */
	   color:    #cccccc;
	}

	/*radio&checkbox樣式覆蓋*/
		input[type=radio   ]:not(old),
		input[type=checkbox]:not(old){
			width     : 0;
			margin    : 0;
			font-size : 0;
			opacity   : 0;
			pointer-events: none;
            display: none;
		}
		input[type=radio   ]:not(old) + label,
		input[type=checkbox]:not(old) + label{
			display      : inline-block;
			vertical-align: middle;
			line-height  : 24px;
			margin-right : 17px;
			font-size: 18px;
			cursor       : pointer;
    		letter-spacing: 0;
		}
/* ----------BTN------------ */
	button{
		outline: none;
		cursor: pointer;
		background-color: #fff;
	}
	.btn-bag{
		display: inline-block;
		text-align: center;
		border: none;
	}
	.btn-bag p{
		font-size: 2rem;
		line-height: .9em;
		margin-top: -2px;
		padding: 0 7px;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	.btn-bag:hover p{
		background-color: #2ea9df;
		color: #fff;
		padding: 10px 7px;
		margin-top: -6px;
	}
/* ----------COLOR --------- */
	.color-primary{color: #2ea9df; }
	.color-white{color: #fff; }
	.color-black{color: #333; }
	.bg-primary{
		background-color: #2ea9df;
		color: #fff;
	}
/* ----------MAIN----------- */
	img{max-width: 100%; }
	.sec_padding {
        padding: 130px 0;
        position: relative;
    }
    .page_main{padding: 100px 0; }
    hr{
    	border-top: 2px solid rgba(0,0,0,.3);
    	border-left: 0;
    	border-right: 0;
    	border-bottom: 0;
    	margin: 30px 0;
    }
/* ----------NAVBAR--------- */
	#navbar{
		position: absolute;
		text-align: right;
		padding: 15px;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 3;
	}
	#navbar.fixed{
		position: fixed;
		background-color: #333;
		top: -100px;
	    -webkit-animation: navbar .4s forwards;
	    animation: navbar .4s forwards;
	}
	@keyframes navbar{
	    from{
	        top: -100px;
	    }
	    to{
	        top: 0;
	    }
	}
	#navbar .nav_logo{
		position: absolute;
		height: 90%;
		top: 5%;
		width: auto;
		left: 0;
	}
	#navbar .nav_logo img{
		height: 100%;
		width: auto;
		max-width: none;
	}
	#navbar ul.menu{
		display: inline-block;
		vertical-align: middle;
	}
	#navbar ul.menu li{
		display: inline-block;
	}
	#navbar ul.menu li a{
		padding: 5px 12px;
	}
	#navbar ul.menu li a:hover,
	#navbar ul.menu li a.active{
		color: #7ed8ff;
	}
	.ShoppingLink{
		vertical-align: middle;
		margin-left: 15px;
	}
	.ShoppingLink p,
	.ShoppingLink .ShoppingBag{
		display: inline-block;
		vertical-align: middle;
	}
	.ShoppingBag{
		width: 40px;
		height: 55px;
		background-image: url(../img/icon/ShoppingBag-1.png);
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
	}
	.ShoppingLink:hover .ShoppingBag{
		background-image: url(../img/icon/ShoppingBag-2.png);
	}
	#navbar ul.menu li a{
		-webkit-transition: all .25s ease;
	    -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	    -o-transition: all .25s ease;
	    transition: all .25s ease;
	}
	.hamburger{
		display: none;
	}
/* ----------FOOTER--------- */
	footer{
		background-color: #efeae8;
		padding: 80px 0 30px;
	}
	footer > div{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	.foot_logo{
		display: inline-flex;
		align-self: flex-start;
		order:2;
		margin-top: -50px;
	}
	.foot_logo + .br{display: none;}
	.foot_contact,
	.copyright{
		width:calc(50% - 44px);
		display: inline-block;
		vertical-align: bottom;
	}
	.foot_contact{
		order:1;
	}
	.foot_contact a{
		display: block;
	}
	.foot_contact a p{
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 20px);
		margin-right: -5px;
	}
	footer a,
	footer p{
		line-height: 1.8em;
	}
	.foot_contact img{
		display: inline-block;
		vertical-align: middle;
		width: 15px;
		margin-right: 5px;
	}
	.copyright{
		order:3;
	}
	.copyright .site_link{
		position: relative;
		margin-left: 15px;
	}
	.copyright .site_link:nth-child(2):after,
	.copyright .site_link:nth-child(3):after{
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		background-color: #2ea9df;
		left: -12px;
		border-radius: 100%;
		top: 0;
		bottom: 0;
		margin: auto 0;

	}
/*-----------PAGE_BANNER---- */
	.banner01_bg{
		padding: 49vh 0 0;
		background-size: cover;
		background-position: center;
	}
	.banner01 h3{
		font-size: 4rem;
		line-height: .7em;
	}
	.banner01 h4{
		font-size: 2.4rem;
		padding-top: 10px;
	}
	.banner02{
		padding: 25vh 15px 16vh;
		text-align: center;
		color: #fff;
		background-size: cover;
		background-position: center;
	}
	.banner02 h3{
		font-size: 4rem;
		line-height: 1em;
		text-shadow: rgba(0,0,0,.5) 0em 0em 0.2em;
	}
	.banner02 h4{
		font-size: 2.4rem;
		text-shadow: rgba(0,0,0,.5) 0em 0em 0.2em;
	}
/* ----------RWD------------ */
	@media screen and (max-width: 1440px){
		html{
            font-size: 15px;
        }
        .w1300{
        	max-width: 900px;
        }
        .ShoppingBag{
        	width: 32px;
        }
        #navbar{
        	padding: 7px 15px;
        }
        #navbar .nav_logo{
        	height: 70%;
        	top: 15%;
        }
        .page_main{
	    	padding: 80px 0;
	    }
	    hr{
	    	margin: 20px 0;
	    }
	}
	@media screen and (max-width: 1280px){
		.btn-bag p {font-size: 1.6rem; }
		.foot_logo{width: 70px; }
		.foot_contact,
		.copyright{width:calc(50% - 35px); }
		.page_main{padding: 60px 0; }
	}
	@media screen and (max-width: 1023px){
		html{
            font-size: 14px;
        }
        .btn-bag p {
		    font-size: 1.3rem;
		}
		.page_main{
	    	padding: 40px 0;
	    }
	    hr{
	    	margin: 15px 0;
	    }
	    .banner01 h4,
	    .banner02 h4{
	    	font-size: 2rem;
	    }
	}
	@media screen and (max-width: 768px){
		html{font-size: 13px; }
        footer{
        	text-align: center;
        	padding: 30px 0 30px;
        }
		.btn-bag p {font-size: 1.1rem; }
		footer > div{
			flex-wrap: wrap;
			justify-content: center;
		}
		.foot_logo{
			order:1;
			margin:0 auto 10px;
		}
		.foot_logo + .br{
			display: block;
			width: 100%;
			height: 1px;
			order:2;
		}
		.foot_contact,
		.copyright{
			display: block;
			width:100%;
			order:2;
			text-align: center;
		}
		.foot_contact{
			padding-bottom: 5px;
			max-width: 230px;
			text-align: left;
		}
		.foot_contact a:first-child{text-align: center;}
		.page_main{padding: 30px 0; }
	    hr{margin: 10px 0; }
	    .form_list li{padding: 6px 0; }
		.form_title{padding: 7px 0; }
		.banner01 h3,
		.banner02 h3{font-size: 3rem; }
		.banner01 h4,
		.banner02 h4 {
		    font-size: 1.8rem;
		    padding-top: 5px;
		}
	}
	@media screen and (max-width: 620px){
		#navbar{
			position: fixed;
			background-color: #333;
			top: 0;
			padding: 3px 15px;
		}
		#navbar.fixed{
			animation-name: none;
			top: 0;
		}
		#navbar ul.menu{
			position: fixed;
			width: 300px;
			height: 100vh;
			top: 0;
			right: -300px;
			background-color: #fff;
			color: #333;
			text-align: left;
			padding: 70px 40px;
			overflow-y: scroll;
			-webkit-transition: all .25s ease;
		    -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		    -o-transition: all .25s ease;
		    transition: all .25s ease;
		}
		#navbar ul.menu.active{
			right: 0;
		}
		#navbar ul.menu li{
			display: block;
			border-bottom: 1px solid #2ea9df;
		}
		#navbar ul.menu li a{
			font-size: 1.2rem;
			padding: 15px 0;
		}
		.ShoppingLink{
			margin-right: 25px;
		}
		.ShoppingBag{
			width: 29px;
		}
		#navbar .nav_logo {
		    height: 60%;
		    top: 20%;
		}
		.hamburger{
			display: block;
			position: fixed;
			right: 0;
			top: 8px;
			right: 10px;
			z-index: 4;
			padding: 10px;
		}
		.hamburger-inner,
		.hamburger-inner::before,
		.hamburger-inner::after{
			background-color: #2ea9df;
			width: 30px;
			height: 3px;
			border-radius: 0;
		}
		.hamburger-box{
			width: 30px;
		}
		.banner02 h3{
			font-size: 2.2rem;
		}
	}
	@media screen and (max-width: 480px){
		html{
            font-size: 12px;
        }
		.page_main {
		    padding: 20px 0;
		}
		.row{
			margin-bottom: 10px;
		}
	}
	@media screen and (max-width: 400px){
		footer{
        	padding: 20px 0 20px;
        }
		.foot_contact{
			max-width: none;
			text-align: center;
		}
		.foot_contact a p{width: auto;}
        .form_list li {
		    padding: 3px 0;
		}
		.form_title {
		    padding: 3px 0;
		}
		.banner01 h3,
		.banner01 h4{
			text-align: center;
		}
	}