@charset "UTF-8";
/* CSS Document */

html { width:100%; height:100%; overflow:auto; min-height:0 !important; }
body { background:#ebebeb; color:#585858; -webkit-text-size-adjust:none; }
html, body, textarea, select, input, button { font:12px/18px 'BebasNeue', "微軟正黑體","Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
body, html, *, div { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6 { cursor:default; }
select { font-family:'BebasNeue', Lucida Grande, Arial, Helvetica, sans-serif; letter-spacing:0; color:#5F5C5C; }
table { border:none; border-collapse:collapse; border-spacing:0; }
img { border:none; }
a { text-decoration:none; color:#003e8b; cursor:pointer; }
a:hover { color:#fd6c10; }
a.active { color:#fd6c10; }
a:focus { outline:none; }
p { font-size:1em; margin-bottom:1.5em; line-height:1.5em; cursor:text; }
input[type="button"], input[type="reset"], input[type="submit"] { padding:4px 15px; background:#C7531F; color:white; border:none; border:1px solid #C7531F; cursor:pointer; }
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { 2background:#f74096; background:#eb8f23; border-color:#eb8f23; }
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border:1px solid #f74096; padding:5px 14px 3px 16px; }
input::-webkit-input-placeholder { color:#bcbec0; font-size:1em; }
input:-moz-placeholder { color:#bcbec0; }
input::-moz-placeholder { color:#bcbec0; }
input:-ms-input-placeholder { color:#bcbec0; }

@font-face { font-family:'BebasNeue'; font-weight:normal; font-style:normal; src:url('font-face/BebasNeue-webfont.eot'); src:url('font-face/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/BebasNeue-webfont.woff') format('woff'), url('font-face/BebasNeue-webfont.ttf') format('truetype'), url('font-face/BebasNeue-webfont.svg#Oswald') format('svg'); }

@font-face { font-family:'Roboto'; font-weight:200; font-style:normal; src:url('font-face/Roboto-Thin-webfont.eot'); src:url('font-face/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-Thin-webfont.woff') format('woff'), url('font-face/Roboto-Thin-webfont.ttf') format('truetype'), url('font-face/Roboto-Thin-webfont.svg#Roboto') format('svg'); }
@font-face { font-family:'Roboto'; font-weight:200; font-style:italic; src:url('font-face/Roboto-ThinItalic-webfont.eot'); src:url('font-face/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-ThinItalic-webfont.woff') format('woff'), url('font-face/Roboto-ThinItalic-webfont.ttf') format('truetype'), url('font-face/Roboto-ThinItalic-webfont.svg#Roboto') format('svg'); }
@font-face { font-family:'Roboto'; font-weight:normal; font-style:normal; src:url('font-face/Roboto-Regular-webfont.eot'); src:url('font-face/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-Regular-webfont.woff') format('woff'), url('font-face/Roboto-Regular-webfont.ttf') format('truetype'), url('font-face/Roboto-Regular-webfont.svg#Roboto') format('svg'); }
@font-face { font-family:'Roboto'; font-weight:normal; font-style:italic; src:url('font-face/Roboto-Italic-webfont.eot'); src:url('font-face/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-Italic-webfont.woff') format('woff'), url('font-face/Roboto-Italic-webfont.ttf') format('truetype'), url('font-face/Roboto-Italic-webfont.svg#Roboto') format('svg'); }
@font-face { font-family:'Roboto'; font-weight:bold; font-style:normal; src:url('font-face/Roboto-Bold-webfont.eot'); src:url('font-face/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-Bold-webfont.woff') format('woff'), url('font-face/Roboto-Bold-webfont.ttf') format('truetype'), url('font-face/Roboto-Bold-webfont.svg#Roboto') format('svg'); }
@font-face { font-family:'Roboto'; font-weight:bold; font-style:italic; src:url('font-face/Roboto-BoldItalic-webfont.eot'); src:url('font-face/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-BoldItalic-webfont.woff') format('woff'), url('font-face/Roboto-BoldItalic-webfont.ttf') format('truetype'), url('font-face/Roboto-BoldItalic-webfont.svg#Roboto') format('svg'); }

@font-face { font-family:'RobotoCondensed'; font-weight:normal; font-style:normal; src:url('font-face/Roboto-Condensed-webfont.eot'); src:url('font-face/Roboto-Condensed-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-Condensed-webfont.woff') format('woff'), url('font-face/Roboto-Condensed-webfont.ttf') format('truetype'), url('font-face/Roboto-Condensed-webfont.svg#RobotoCondensed') format('svg'); }
@font-face { font-family:'RobotoCondensed'; font-weight:normal; font-style:italic; src:url('font-face/Roboto-CondensedItalic-webfont.eot'); src:url('font-face/Roboto-CondensedItalic-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-CondensedItalic-webfont.woff') format('woff'), url('font-face/Roboto-CondensedItalic-webfont.ttf') format('truetype'), url('font-face/Roboto-CondensedItalic-webfont.svg#RobotoCondensed') format('svg'); }
@font-face { font-family:'RobotoCondensed'; font-weight:bold; font-style:normal; src:url('font-face/Roboto-BoldCondensed-webfont.eot'); src:url('font-face/Roboto-BoldCondensed-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-BoldCondensed-webfont.woff') format('woff'), url('font-face/Roboto-BoldCondensed-webfont.ttf') format('truetype'), url('font-face/Roboto-BoldCondensed-webfont.svg#RobotoCondensed') format('svg'); }
@font-face { font-family:'RobotoCondensed'; font-weight:bold; font-style:italic; src:url('font-face/Roboto-BoldCondensedItalic-webfont.eot'); src:url('font-face/Roboto-BoldCondensedItalic-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/Roboto-BoldCondensedItalic-webfont.woff') format('woff'), url('font-face/Roboto-BoldCondensedItalic-webfont.ttf') format('truetype'), url('font-face/Roboto-BoldCondensedItalic-webfont.svg#RobotoCondensed') format('svg'); }


/* UTIL */

.clr { clear:both; zoom:1; height:0; font-size:0; line-height:0; }
.floatL { float:left; }
.floatR { float:right; }
.hide { display:none; }
.alignCtr { text-align:center; }
.alignBtm { vertical-align:bottom; }
.alignRight { text-align:right; }




/* HEADER */

.base_header { width:100%; min-width:810px; position:absolute; top:0; left:0; text-align:center; z-index:3; }
.base_header_container { margin:0 auto; width:754px; border-right:1px solid #d3d5d8; border-bottom:1px solid #d3d5d8; border-left:1px solid #d3d5d8; padding-bottom:17px; padding-top:25px; position:relative; display:inline-block; vertical-align:top; background:url('../img/bg-header.png') 0 0 repeat; text-align:right; }
.base_header_container .logo { width:165px; padding-bottom:4.9%; background:url('../img/logo.png') 0 0 no-repeat; background-size:100%; position:absolute; left:45px; bottom:21px; z-index:2; }
.base_header_container .nav_trigger { width:40px; height:40px; position:absolute; right:0; top:0; text-align:center; line-height:40px; font-size:17px; display:none; }
.base_header_container .nav { position:relative; padding-right:44px; text-align:right; z-index:1; }
.base_header_container .nav a { color:#003e8b; margin-left:37px; display:inline-block; vertical-align:top; text-align:center; position:relative; }
.base_header_container .nav a:hover, .base_header_container .nav a.active { color:#006edb; }
.base_header_container .nav a i { font-size:20px; line-height:1em; display:block; margin-bottom:5px; cursor:pointer; position:relative; }
.base_header_container .nav a p { font-size:15px; line-height:1.1em; cursor:pointer; position:relative; display:block; margin-bottom:0; }


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.base_header_container .logo { background-image:url('../img/logo@2x.png'); }
}
@media screen and (min-width: 810px) {

}
@media screen and (max-width: 809px) {/* Essential */
	.base_header { min-width:0; }
	.base_header_container { width:93%; padding:3% 0 2%; }
	.base_header_container .logo { width:22.14%; background-size:100%; left:5.96%; bottom:21%; }
	.base_header_container .nav { white-space:nowrap; padding-right:5.83%; }
	.base_header_container .nav a { margin-left:4.9%; font-size:1em; }
	.base_header_container .nav a i { font-size:1.66em; }
	.base_header_container .nav a p { font-size:1.25em; }
}
@media screen and (max-width: 709px) {
	.base_header_container .nav a { margin-left:3.9%; font-size:.9em; }
}
@media screen and (max-width: 669px) {/* Essential */
	.base_header_container .nav a { margin-left:2.5%; font-size:.8em; }
}
@media screen and (min-width: 480px) {
	.base_header_container .nav { display:block !important; }
}
@media screen and (max-width: 479px) {/* Essential */
	.base_header_container { padding:0; text-align:left; }
	.base_header_container .logo { position:relative; left:auto; bottom:auto; display:inline-block; width:99px; padding-bottom:0; height:22px; margin-left:calc((100% - 40px - 99px)/2); margin:11px 0 6px 34%; vertical-align:top; }
	.base_header_container .nav_trigger { color:#003e8b; display:block; }
	.base_header_container .nav_trigger.active { color:#4c4439; background-color:#c3c8cf; }
	.base_header_container .nav { width:100%; margin:0; padding:0; border-top:1px solid #c4c8d0; padding-top:10px; display:none; }
	.base_header_container .nav a { width:100%; margin:0; padding:0; float:left; }
	.base_header_container .nav a i { display:inline-block; line-height:35px; font-size:14px; }
	.base_header_container .nav a p { display:inline-block; line-height:35px; font-size:14px; }
	.base_header_container .nav a p br { display:none; }

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


/* CONTENTS */

.base_main { width:100%; min-width:810px; position:relative; z-index:1; text-align:center; }
.base_main_container { width:810px; background:0 0 no-repeat; margin:0 auto; background-size:100%; position:relative; background-color:#ebebeb; background-repeat:repeat-y; font-size:14px; }
.base_main_container > h1 { width:94.57%; padding-left:5.43%; position:absolute; z-index:2; top:0; padding-top:19.5%; font-size:31px; color:#003e8b; text-align:left; font-weight:normal; }
.base_main_container > p { font-size:14px; }


.badge { position:absolute; z-index:2; width:14.44%; 2top:7.6%; top:0; padding-top:16.29%; right:5.55%; }

.bg_wrapper { position:absolute; z-index:1; top:0; left:0; width:100%; display:block; }
.img_wrapper { position:absolute; top:0; left:0; width:100%; text-align:left; }
.img_wrapper .pt { position:absolute; display:none; }
.img_wrapper img { position:absolute; z-index:2; }
.img_wrapper .art { position:relative; display:inline-block; vertical-align:top; z-index:1; }
.txt_wrapper { display:none; }
.txt_container { width:82.09%; margin-left:9%; font-size:16px; text-align:left; position:relative; padding:1.5em 0; }
.txt_container p + h2 { margin-top:2em; }
.txt_container h2 { font-size:24px; color:#003e8b; margin-bottom:.6em; width:100%; float:left; }
.txt_container h2 + p { margin-top:0 !important; }
.art.m { display:none; }


.front .base_main_container { padding-bottom:1000px; background-image:url('../img/bg-front.jpg'); }


.shoebed .base_main_container { background-image:url('../img/bg-shoebed.jpg'); padding-bottom:2000px; }
.shoebed .bg_wrapper { padding-top:35.18%; }
.shoebed .img_wrapper.art1 { top:14.25%; 2top:41.3%; 2top:0; 2display:block; 2vertical-align:top; 2position:relative; }
.shoebed .img_wrapper.art1 .pt1 { width:30.86%; left:23.18%; top:-10.66%; }
.shoebed .img_wrapper.art1 .pt2 { width:31.72%; left:55.81%; top:0; }
.shoebed .img_wrapper.art1 .pt3 { width:36.41%; left:11.75%; top:14.53%; }
.shoebed .img_wrapper.art1 .pt4 { width:30.61%; left:58.33%; top:59.55%; }
.shoebed .img_wrapper.art1 .pt5 { width:32.71%; left:9.56%; top:58.27%; }
.shoebed .img_wrapper.art1 .pt6 { width:34.69%; left:54.32%; top:88.35%; }
.shoebed .img_wrapper.art1 .art { width:61.97%; left:17.9%; top:0; position:relative; display:inline-block; vertical-align:top; z-index:1; }
.shoebed .img_wrapper.art2 { top:60%; }
.shoebed .img_wrapper.art2 .pt1 { width:28.76%; left:43.83%; top:-10.61%; }
.shoebed .img_wrapper.art2 .pt2 { width:26.41%; left:66.75%; top:19.79%; }
.shoebed .img_wrapper.art2 .pt3 { width:40.86%; left:14.74%; top:69.84%; }
.shoebed .img_wrapper.art2 .pt4 { width:34.44%; left:38.04%; top:89.73%; }
.shoebed .img_wrapper.art2 .art { width:81.48%; left:8.27%; top:0; }


.madrid .base_main_container { background-image:url('../img/bg-madrid.jpg'); padding-bottom:800px; }
.madrid .base_main_container > p { margin:0; width:37.4%; position:absolute; top:38.12%; left:9.87%; text-align:left; font-size:16px; line-height:1.6em; }
.madrid .badge { display:none; }
.madrid .bg_wrapper {  }
.madrid .img_wrapper { 2padding-top:28.51%; 2display:block; vertical-align:top; position:absolute; width:100%; left:0; top:28.87%; }
.madrid .img_wrapper .pt1 { width:33.33%; left:38.27%; top:94.37%; display:block; }
.madrid .img_wrapper .art { left:56.29%; width:38.02%; }


.notice .base_main_container { background-image:url('../img/bg-notice.jpg'); }
.notice .base_main_container > h1 { position:relative; }
.notice .base_main_container > .txt_container .art { width:100%; margin:0 0 3em; }
.notice .base_main_container > .txt_container > ol { margin-left:1em; position:relative; display:inline-block; vertical-align:top; width:60%; padding-right:2%; }
.notice .base_main_container > .txt_container > ol li { margin-bottom:1.3em; line-height:1.3em; }
.notice .base_main_container > .txt_container .art.steps { display:inline-block; vertical-align:top; width:32%; }


.repair .base_main_container { background-image:url('../img/bg-notice.jpg'); }
.repair .base_main_container > h1 { position:relative; }
.repair .base_main_container > .txt_container .card { width:20%; float:right; margin-left:2%; }
.repair .base_main_container > .txt_container .ball { width:22%; display:inline-block; vertical-align:top; margin-right:2.4%; margin-top:1em; margin-bottom:3em; }
.repair .base_main_container > .txt_container ul { width:100%; display:inline-block; vertical-align:top; position:relative; background:url('../img/repair-sprt-a.png') 0 bottom no-repeat; background-size:100%; }
.repair .base_main_container > .txt_container ul li { width:100%; float:left; list-style-type:none; background:url('../img/repair-sprt-a.png') 0 0 no-repeat; padding:2em 0 1em; background-size:100%; }
.repair .base_main_container > .txt_container ul li.even { background-image:url('../img/repair-sprt-b.png'); }
.repair .base_main_container > .txt_container ul li div { width:50%; float:left; text-align:center; }
.repair .base_main_container > .txt_container .remark { text-align:right; margin-top:2em; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

}
@media screen and (min-width: 810px) {
	
}
@media screen and (max-width: 809px) {/* Essential */
	.base_main { min-width:0; }
	.base_main_container { width:100%; }
	.front .base_main_container { padding-bottom:123.4%; }
	.shoebed .base_main_container { padding-bottom:246.9%; }
	.madrid .base_main_container { padding-bottom:98.76%; }
}
@media screen and (max-width: 709px) {
	.base_main_container > h1 { }
	
	.notice .base_main_container > .txt_container > ol { width:54%; }
	.notice .base_main_container > .txt_container .art.steps { width:37%; }
	
	.repair .base_main_container > .txt_container .card { width:30%; }
}
@media screen and (max-width: 669px) {/* Essential */
	.base_main_container h1 { font-size:25.6px; }
	.madrid .base_main_container p { font-size:13px; top:31.12%; }
}
@media screen and (max-width: 479px) {/* Essential */

	.base_main_container > h1 { padding-top:20%; }
	
	.bg_wrapper { position:relative; }
	.img_wrapper .pt { display:none !important; }
	.txt_wrapper { display:block; background:url('../img/bg-shoebed-txt-m.jpg') 0 0 repeat-y; background-size:100%; padding:5.46% 3.43%; }
	.txt_wrapper div { background:white; width:100%; padding:3.36% 0 2.68%; margin-top:7px; font-family:Arial; 2display:inline-block; }
	.txt_wrapper div:first-child { margin:0; }
	.txt_wrapper div label { font-size:19px; font-weight:bold; color:#00478e; float:left; padding-top:.6%; padding-left:4.36%; padding-right:3.86%; padding-bottom:4.87%; width:18px; }
	.txt_wrapper div h1 { font-size:16px; color:#00478e; text-align:left; line-height:1em; }
	.txt_wrapper div p { font-size:12px; margin:0; text-align:left; padding-right:5%; line-height:1.3em; }
	.art.normal { display:none; }
	.art.m { display:block; }
	
	.front .base_main_container { padding-bottom:177.5%; background-image:url('../img/bg-front-m.jpg'); }
	
	.shoebed .base_main_container { padding-bottom:0; background:url('../img/bg-shoebed-01-m.jpg') 0 0 repeat-y; background-size:100%; }
	.shoebed .base_main_container > h1 { position:relative; }
	.shoebed .bg_wrapper {  }
	.shoebed .img_wrapper.art1 { 2display:block; padding:0; padding-top:6.04%; padding-bottom:5.62%; 2padding-bottom:154.84%; position:relative; }
	.shoebed .img_wrapper.art1 .art { 2position:absolute; 2padding-top:59px; width:78.43%; left:9.06%; }
	.shoebed .img_wrapper.art2 { position:relative; background:url('../img/bg-shoebed-02-m.jpg') 0 0 repeat-y; background-size:100%; 2padding-bottom:92.65%; padding-top:16.87%; padding-bottom:16.56%; }
	.shoebed .img_wrapper.art2 .art { 2position:absolute; 2padding-top:16.71%; width:81.71%; left:8.28%; }
	
	.madrid .badge { display:block; }
	.madrid .base_main_container { padding-bottom:0; background:url('../img/bg-madrid-01-m.jpg') 0 0 repeat-y; background-size:100%; }
	.madrid .base_main_container > 	h1 { position:relative; }
	.madrid .base_main_container > 	p { position:relative; display:block; padding:0 7.16%; left:0; top:0; width:auto; margin-top:56.5px; margin-bottom:20px; font-size:14px; line-height:1.6em; }
	.madrid .bg_wrapper { }
	.madrid .img_wrapper.art1 { padding:0 0 13.34%; position:relative; }
	.madrid .img_wrapper.art1 .art { width:82.18%; left:9.06%; }
	.madrid .img_wrapper.art1 .pt { display:none; }
	.madrid .txt_wrapper div label { padding-bottom:25.87%; width:0; }
	
	.notice .base_main_container > .txt_container .art.m { width:70%; margin:0 auto 1.5em; }
	.notice .base_main_container > .txt_container > ol { width:100%; }
	.notice .base_main_container > .txt_container .art.steps { width:53.9%; margin:1.5em auto 0; display:block; }
	
	.repair .base_main_container > .txt_container .card { width:60%; margin:1em auto; float:none; display:block; }
	.repair .base_main_container > .txt_container p.description { width:100%; float:left; margin-top:1em; font-size:16px; }
	.repair .base_main_container > .txt_container .ball { width:47%; display:inline-block; margin-bottom:0; }
	.repair .base_main_container > .txt_container ul { margin-top:2em; }
}
@media screen and (max-width: 349px) {
	
}