@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,700');
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body { font-family:microsoft yahei; overflow-x:hidden; margin:0; padding:0;  color: #333;}
h1 {  font-size: 1.2em; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto;  }
h3, h4 { font-size: 1.15em; font-weight: 700;  }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { font-size: 1.05rem; color: #6a6a6a; line-height: 1.75rem;  font-weight: 400; font-family: 'Poppins', sans-serif;}
a { color:#1f328c; text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
a:hover{ color:#900d1c;}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.color-white { color: #fff!important; }
.color-orange { color: #C71E50!important; }
.color-pink { color:#ff6666!important; }
.color-gray { color:#999; }
.color-bk { color:#000; }

.align-self-center {   -ms-flex-item-align: center!important;  align-self: center!important;}
.wrapper { width: 100%; max-width:1360px;   display: block; margin: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow:hidden;  }


/***banner area=======================================================================*/
.banner{ width: 100%;  max-width: 100%; height: auto; overflow: hidden; margin:1% auto;display: block;   text-align: center; line-height: 2.5em; vertical-align: top; z-index: 0; }
.banner-img { width: 100%;  height: auto; overflow: hidden;  }
.banner-wrap { width: 100%; max-width: 600px; display:flex;  flex-wrap: wrap;  flex-direction:row; justify-content: center; align-items: center; padding:2em; margin:5% auto;  position:absolute; z-index: 9; text-align: left;  }
.banner-img img { width: 100%; height: auto; overflow: hidden;  }


/* description =======================================================================*/	
.description-wrap{ margin-top: -5%; width:100%;   position: relative;  }
.description-wrap h1{ display:block; margin: 2% auto 0 auto; font-size: 1.75rem; color: #1f328c; text-align:left; font-weight: 700; padding-left: 10px;}
.description-wrap p { font-size:1rem; color:#888; font-weight: 400; line-height: 1.5rem; }
.description{  width: 100%; padding:1em ; display: block; margin:3% auto;   border-bottom:solid 1px #d3d7e7;border-top:solid 1px #d3d7e7;}
.description p{color: #6a6a6a; font-weight: 400; font-size: 13.5px;}
/* breadcrumbs =======================================================================*/

.breadcrumbs  { width: 100%; max-width:1360px;   display: block; margin: 0 auto; text-align:left;  position: relative;}
.breadcrumbs li { padding:2px 5px;display: inline-block; vertical-align: middle; *vertical-align: auto;*zoom: 1; white-space: nowrap; font-size:12px; color: #a99283; text-align: center; line-height:.9em;  }
.breadcrumbs li a { color: #000; }
.breadcrumbs li:after { content: "/"; padding-left: 5px; }
.breadcrumbs li a:hover, .breadcrumbs ul li a:focus { color: #ffb400; }
.breadcrumbs li:first-of-type a { color: #000; padding-left: 10px; }


/* page =======================================================================*/
.page { width: 100%; max-width: 1160px; margin: 0px auto;  display:block; text-align: center; }
.page ol li { width: 34px; height: 34px; display: inline-block;border-radius: 50%; border: 1px solid #ddd; position: relative; line-height: 32px; text-align: center; list-style-type: none; margin: 5% auto 2% 5px; background-color:#eee; }
.page ol li:hover { background:#6f2026;}
.page ol li.current a { background: #000; color: #fff; border-radius: 50%;}
.page ol li a { border: none; color: #000; display: block; padding: 0; line-height: 32px; height: 100%; text-decoration: none; }
.page ol li a:hover, .page ol li a:focus { background: none; color: #fff; }
.page li.prev, .page li.next{  background: none; border: none;}
.page li.prev:before, .page li.next:before { content: '';   display: block;   }
.page li.prev:before { content: url(../images/icon/arrow-left.svg); }
.page li.next:before { content: url(../images/icon/arrow-right.svg);  }


/**title style*/
.title-wrap{ width: 100%;  max-width: 700px; display: block; margin: auto; padding:5% 0 3% 0; text-align: center;  }
.title-wrap p{ color:#c71e56; font-size:1.35rem;font-weight: 400;   }
.title-1 { display:block;  margin:0 auto 3% auto;  width: 100%; max-width: 500px;  font-size: 1.5rem;text-align:center; font-weight: 400; letter-spacing: 1px; font-family: 'Crimson Text','Noto Sans TC', serif;}
.title-1::after {content: ""; display: block; margin:5px auto; background: url(../images/index/v-line-3.png) no-repeat center bottom; background-size:80% auto;  width:339px; height: 36px;    }
.title-2 { display:block;  margin:5% auto 2% auto;  width: 100%; font-size: 1.35rem; color: #828286; text-align:left; font-weight: 700; letter-spacing: 1px; }
.title-2::after {content: ""; display: block; position: absolute; margin:-15px 0 0 -20px; background: #000;; width: 20px; height: 2px;    }
.top-title:after {  content: ' ';  width: 1px; height: 3.8em;  display: block;  margin: 1.3em auto 2.7em; background-color: #d7d7d7;}


/*title =======================================================================*/
.title { position: relative; padding-top: 30px; }
.title:before { position: absolute; content: ''; background: #ddd; height: 100%; width: 1px; top: 0; left: 0; }
.title h2 { margin-left: 20px; }
.title .cross-text { top: -10px; left: 21px; display: inline-block; position: absolute; color: #00befd; text-transform: uppercase; font-weight: 500; font-size: 18px; }
.title.dark:before { background: #333; }
.title.line-none:before { background: none; content: none; }





/* button =======================================================================*/
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: block; width: auto;  line-height:1.25rem; margin: 8px auto; padding:10px 15px; font-size: 15px; position: relative; opacity: .999;  text-transform: capitalize;  }
.btn-border { background-color: transparent; border: 2px solid #1f328c; color: #1f328c; font-weight: 500; text-align: center; }
.btn-border:before, .btn-border:after { content: ''; border-style: solid; border-color: #f2c701; color: #f2c701; position: absolute; z-index: 5;    box-sizing: content-box; }
.btn-border:before { width: 0; height: 100%; border-width: 2px 0 2px 0; top: -2px; left: 0; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.btn-border:after { width: 100%; height: 0; border-width: 0 2px 0 2px; top: 0; left: -2px; }
.btn-border:hover { background-color: transparent; }
.btn-border:hover:before { width: 100%; }
.btn-border:hover:after { height: 100%; }
.btn-border.btn-yellow:before, .btn-border.btn-yellow:after { border-color: #fff; }
.btn-border.btn-yellow:hover { color: #fff; }
.bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.medium { font-size: 1.1em !important; padding: .5em 3em; width: 35%; margin: 0px 2%; }
.small { font-size: 1em !important; padding: 10px 15px; width: 40%; }

.btn-white { color: #4a4a4a;  background: #fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:700; }
.btn-white:hover { color: #fff; background: #4a4a4a; }
.btn-white:active { color: #9a692d; background: #fff; }
.btn-add {padding:10px 0px 10px 50px ;  color: #fff;  background: url(../images/icon/icon-shopping.svg)no-repeat 10px 10px #ff6666; background-size: 26px auto;   }
.btn-add:hover { color: #fff;   background-color:#E1BD00; box-shadow: 0px 5px 5px rgba(0,0,0,.3 )}
.btn-love {padding:10px 0px 10px 50px ;  color: #c9163a;  background: url(../images/icon/love.svg)no-repeat 10px 8px; background-size: 26px auto;  border: solid 1px #c9163a;  }
.btn-love:hover { color: #fff;   background-color:#c9163a; box-shadow: 0px 5px 5px rgba(0,0,0,.3 )}
.btn-pink {padding:10px 20px;  font-weight: 400; background:#444;  color: #fff; }
.btn-pink:hover { color: #fff;  background: #ff6666;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }
.btn-rangeset {padding:10px 0px 10px 10px;    text-align: center; color: #fff;  background: rgba(208,204,204,1.00);    }
.btn-rangeset:hover { color: #fff;   background-color:#E1BD00; box-shadow: 0px 5px 5px rgba(0,0,0,.3 )}
.btn-readmore { max-width: 200px; color: #333;}
a.btn-readmore { margin-top: 16px; padding: 10px 25px;    font-weight: 200;  color: #333;  background-color: #fff; border:solid 1px #adadad;}
a.btn-readmore:hover{ background: #333; color: #fff; }
.btn-submit{padding:10px 20px;  font-weight: 400; background:#00c9ff !important;  color: #fff; }
.btn-submit:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }
.btn-rest{padding:10px 20px;  font-weight: 400; background:#888!important;  color: #fff; }
.btn-rest:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }
.btnbox {  width: 100%; margin: 0 auto; display: flex;  justify-content: center;}
.btn-inquiry {padding:15px 10px 15px 50px!important;  font-weight: 400; background:#1f328c;  color: #fff; }
.btn-inquiry:hover { color: #fff;  background: #444;   box-shadow: 0px 1px 6px rgba(0,0,0,.5); }
.btn-inquiry:before { content: "";  position: absolute; width: 36px; height:36px; vertical-align: middle; display: block; left: 15px;  top: 0; bottom: 0;  margin: auto; background: url(../images/icon/btn.svg); }

.btn-catalogue {padding:15px 10px 15px 50px!important;  font-weight: 400; background:#0070c9; color: #fff; }
.btn-catalogue:hover { color: #fff;  background: #444;   box-shadow: 0px 1px 6px rgba(0,0,0,.5); }
.btn-catalogue:before { content: "";  position: absolute; width: 36px; height:36px; vertical-align: middle; display: block; left: 15px;  top: 0; bottom: 0;  margin: auto; background: url(../images/icon/btn-book.svg); }

.btn-video {padding:15px 10px 15px 50px!important;  font-weight: 400; background:#cc0000; color: #fff; }
.btn-video:hover { color: #fff;  background: #444;   box-shadow: 0px 1px 6px rgba(0,0,0,.5); }
.btn-video:before { content: "";  position: absolute; width: 36px; height:36px; vertical-align: middle; display: block; left: 15px;  top: 0; bottom: 0;  margin: auto; background: url(../images/icon/btn-video.svg); }

.btn-back { border: solid 1px #5D7C89; color: #5D7C89;  margin-bottom: 15px; padding:15px 10px 15px 50px!important;     }
.btn-back:hover { color: #c9163a;  }
.btn-back:before { content: "";  position: absolute; width: 32px; height:32px; vertical-align: middle; display: block; left: 15px;  top: 0; bottom: 0;  margin: auto; background: url(../images/icon/btn-back.svg); }



/*--------form style------------*/
select, input, option, textarea, input[type="radio"], input[type="checkbox"] { width: auto; min-height: 1.5em; color: #000; background: transparent; border: 1px solid rgba(126,144,174,.6);border-radius:3px!important; }
form { margin: auto; display: block; }
input::placeholder { color:#afbabf;}
input[type="radio"], input[type="checkbox"] { display: none; }
input[type="radio"]+label, input[type="checkbox"]+label { font-size:.75rem;  box-sizing: border-box; padding: 2px 5px 2px 2%; display: inline-block; border: 1px solid transparent; cursor: pointer; vertical-align: middle; border-radius: 4px; margin-bottom: 1%; background-color: rgba(126,144,174,.3); color: #666; -moz-transition: color 0.2s ease, background-color 0.2s ease; -o-transition: color 0.2s ease, background-color 0.2s ease; -webkit-transition: color 0.2s ease, background-color 0.2s ease; transition: color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]+label:before, input[type="checkbox"]+label:before { height: 18px; width: 18px; margin: -1px 4px 0 0; content: ""; display: inline-block; vertical-align: middle; border: 1px solid #afbabf; background-color: #fff; border-radius: 50%; -moz-transition: border-color 0.2s ease, background-color 0.2s ease; -o-transition: border-color 0.2s ease, background-color 0.2s ease; -webkit-transition: border-color 0.2s ease, background-color 0.2s ease; transition: border-color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]:nth-of-type(2n+1)+label, input[type="checkbox"]:nth-of-type(2n+1)+label { margin-right: 4%; color: #000 }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { border: 1px solid transparent; color: #fff; background-color: #425b71; }
input[type="checkbox"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -244px -56px }
input[type="radio"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -105px -61px }
input.button.blue { background-color: rgba(153,204,255,1); margin: 0 10px; border: 1px solid rgb(57, 125, 205);}

ul.submit-btn { width:98%;  margin: 2% auto; align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap;}
ul.submit-btn li{ width:45%!important;  max-width:300px;margin: 2% auto; padding: 10px 0px; border: none; font-size: 1em; font-weight: bold; }
ul.submit-btn li input, .form-medium select, .length-l, .lab-gender{ width: 100%; font-size:1rem;    } 

/* width size*/
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { width:100%; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.txtcols {  -webkit-column-count: 1;   -moz-column-count: 1;  column-count: 1; column-gap: 80px;}
/*-------cart step  elements----*/
aside.tab-bar {position: relative; display: block; margin-top:1%;  background:#7E9098; z-index:1;   }
aside.tab-bar .btn{ color: #fff;  }
ul.tab { position: absolute; left: 0; right: 0; margin: 0; padding: 0; background:#7E9098; display: none;  list-style: none; z-index:0; }
ul.tab li { border-bottom: 1px solid #fff; }
ul.tab li:first-child { border-top: 1px solid #fff; }
ul.tab li:last-child { border-bottom: none; }
ul.tab a {  display: inline-block; padding: 10px 20px; text-decoration: none; color: #fff; }
ul.tab a:hover { color: #ed5a5a; }

.cart_empty { margin: 0 50%;}

/*.btn { background:#669ae1; color: #fff; text-transform: uppercase; padding: 10px 20px; font-weight: bold; cursor: pointer; }
*/
.process-bar { width: 100%; margin: 1% auto; padding: 10px 0; display: block; text-align: center; border-bottom: none; }
.process-bar li { display: inline-block; width: 66px; line-height: 38px; padding: 0; font-weight: 400; background: url( ../images/icon/arrow-right.svg) no-repeat right 10px }
.process-bar li:last-child { background: none; }
.process-bar li span { display: inline-block; line-height: 38px; }
.process-bar li span:first-child { height: 36px; width: 36px; border: 1px solid #dfdfdf; border-radius: 18px; background-color: #dfdfdf; text-align: center; color: #585858; line-height: 36px; }
.process-bar li span:first-child + span { display: none; }
.process-bar li.current span:first-child { height: 36px; width: 36px; border: 1px solid #000; border-radius: 18px; text-align: center; color: #FFF; line-height: 36px; background-color: #000; font-size: 22px; }
.process-bar li.current span:first-child + span { color: #494848; font-size: 19px; font-weight: 400; }

/*ul style======================================================================*/
.dot{ width: auto;  display: block; margin: 1% auto; }
.dot li{ width: 100%; display: block; padding:1px 0 10px 20px; font-size:1rem; line-height:1.4em; font-weight:400; color: #6a6a6a;  background: url( ../images/icon/dot.svg)  no-repeat left 6px; background-size:8px;}
ul.arrow{ width: 100%; display: block; margin: 1.5% auto; }
ul.arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:200; background: url(../images/arrow-right.png) no-repeat left 6px; background-size:8px;}
.error-box{text-align: center}
.error-box .txt-en{font-size:30px;line-height: 40px;padding:10px 0}
.error-box .txt-cht{font-size:20px;line-height: 25px;padding:10px 0}
@media (min-width:768px) {
.banner { margin: 0; padding: 0;  }
.banner-wrap {   padding: 5em; margin:15% auto;  text-align: left;  }
.description-wrap{ margin: -10% 0 0 0;  padding:3em 1em;  width:100%;   position: relative;   background: #fff; }
.description-wrap h1{  display: block;  margin-top: 40px;  max-width: 95%;  font-size: 50px;}	
.description{  width: 100%; padding:1em;     border-bottom:solid 1px #d3d7e7;border-top:solid 1px #d3d7e7;}
.breadcrumbs  { width:90%; max-width:1360px;   display: block; margin: 0 auto; text-align:left;  position: relative;}
	
	
/*--------form style------------*/
input[type="radio"]+label, input[type="checkbox"]+label { font-size:.95rem;  background-color: rgba(126,144,174,0); }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { color: #eb6967; background-color: transparent; }
input[type="radio"]:hover+label, input[type="checkbox"]:hover+label { color: #000 }
input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before { border-color: #eb6967 }
.txtcols {  -webkit-column-count: 2;  -moz-column-count: 2;  column-count: 2;  column-gap: 80px; column-rule: 1px solid #e4e8e7; padding: 10px;	}

.row {  display: -ms-flexbox;  display: flex;   -ms-flex-wrap: wrap;   flex-wrap: wrap;  margin-right: -15px;   margin-left: -15px;}	
.columns { display: inline-block; vertical-align: top; }
.col-1 { width: 8.333333333%; }
.col-2 { width: 16.666666667%; }
.col-3 { width: 24%!important; }
.col-4 { width: 33.333333333%!important; }
.col-5 { width: 41.666666667%!important; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333%!important; }
.col-8 { width: 66.666666667%; }
.col-9 { width: 75%!important; }
.col-10 { width: 83.333333333%!important; }
.col-11 { width: 91.666666667%; }
.col-12 { width: 100%!important; }
	
/*-------cart step  elements----*/
.process-bar li span:first-child + span { display: inline-block; }
.process-bar { margin:3% auto auto auto; padding: 5vh 0 10px 0; }
.process-bar li { padding: 0 40px 0 30px; width: auto; height: 38px; }
.process-bar li span:first-child + span { color: #585858; margin: 0 0 0 10px; line-height: 36px; }

aside.tab-bar .btn{ display: none!important;  }
aside.tab-bar { margin:6% auto; transition: background-color 220ms ease-in, box-shadow 80ms ease-in; background: transparent; box-shadow: none; border: none;z-index:1;  }
ul.tab { width: 90%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; padding-top:0; z-index:0; border-bottom: solid 1px rgba(226,226,226,1.00); background:rgba(255,255,255,1);}
ul.tab a {color:#3a3935; }
ul.tab li { display: inline-block; border-bottom: none; border-right: 1px solid #e8eef4; }
ul.tab li:first-child { border-top:none; }
ul.tab li:last-child { border-right: none; }
	
	
body.sticky { background-color: #eee; }
.sticky .tab-bar {	margin-top:0px;	position:fixed;	width:100%;	z-index:9999;}
.sticky .tab-bar ul.tab {padding-top:0px;}

.title-1 {   font-size: 2rem; }
	
}
@media (min-width:1002px) {
.description-wrap{ margin: -10% 0 0 0;  padding:3em;  width:80%;   position: relative;   background: #fff; }
.description{  width: 80%; padding:1em 2em;  }
.breadcrumbs  { width: 75%; max-width:1360px;}
	
}
@media (min-width:1360px) {
.description-wrap h1{  display: block;  margin-top: 40px;  max-width: 75%;  font-size: 60px;}	
	
}