@charset "utf-8";
/****************** CSS Document ******************/
* {margin:0px; padding:0px;}
body,html {height:100%;}

/****************** universal ******************/
body {font:16px/26px 'Open Sans', sans-serif; color:#666;}
a {display:inline-block; *display: inline; *zoom: 1; text-decoration:none; color:#0067b7; outline: none; /* for Firefox Google Chrome  */behavior:expression(this.onFocus=this.blur()); /* for IE */}
a img, a img:hover {border:none;}
a:hover {color:#0080FF;}
ul, ol, li {list-style:none;}
input {outline: none;}
.pull-left {float:left;}
.pull-right {float:right;}
.clearfix {clear:both; height:0px; visibility:inherit;}
.overflow-hidden {overflow:hidden;}
.text-center {text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.block-center {margin:0 auto;}

/**------------------------------ normal ------------------------------**/
.wrapperfull{margin:0 auto;}
.wrapper960{width:960px; margin:0 auto;}
.block-footer{width:960px; margin:0 auto;}
/** header **/
.header{margin:5px auto; padding:6px 10px 6px 10px;}
.banner {background:url(../images/banner.jpg) no-repeat center top; height:450px; padding:20px;}
.banner .titleBlock{width:960px; height:400px; margin:0 auto; padding:5px; text-align:center; background-image:url(../images/transparency.png);}
.banner .titleBlock .title{width:350px; font-size:43px; line-height:55px; font-weight:bold; color:#fff; float:left; margin-top:100px; padding-left:70px;}
.banner .titleBlock img{float:right; margin-top:10px; padding-right:40px; width:500px;}
.header .pull-left img{height: 30px;}
.header .pull-right img{height: 30px;}
/** container **/
.container{margin:0 auto; padding:0 30px 20px;}

.containerMsg{display:block; padding:15px 0;}
.containerMsg h1{color:#011432; font-size:30px; line-height:40px; font-weight:700; text-align:center; margin:-30px 0 15px;}
.containerMsg h2{color:#011432; font-size:25px; line-height:25px; font-weight:600; text-align:center; margin:20px auto 5px;}
.containerMsg h3{font-size:20px; line-height:25px; font-weight:600; text-align:center; margin:20px auto 5px;}

.container-col,.container-half,.container-third,.container-twothird,.container-threequarter,.container-quarter{float:left;width:100%}
.container-col.s1{width:8.33333%}.container-col.s2{width:16.66666%}.container-col.s3{width:24.99999%}.container-col.s4{width:33.33333%}
.container-col.s5{width:41.66666%}.container-col.s6{width:49.99999%}.container-col.s7{width:58.33333%}.container-col.s8{width:66.66666%}
.container-col.s9{width:74.99999%}.container-col.s10{width:83.33333%}.container-col.s11{width:91.66666%}.container-col.s12{width:99.99999%}.container-col.s14{width:12.49999%}
@media (min-width:500px){.container-col.m1{width:8.33333%}.container-col.m2{width:16.66666%}.container-col.m3,.container-quarter{width:24.99999%}.container-col.m4,.container-third{width:33.33333%}
.container-col.m5{width:41.66666%}.container-col.m6,.container-half{width:49.99999%}.container-col.m7{width:58.33333%}.container-col.m8,.container-twothird{width:66.66666%}
.container-col.m9,.container-threequarter{width:74.99999%}.container-col.m10{width:83.33333%}.container-col.m11{width:91.66666%}.container-col.m12{width:99.99999%}.container-col.m14{width:12.49999%}}
@media (min-width:900px){.container-col.l1{width:8.33333%}.container-col.l2{width:16.66666%}.container-col.l3{width:24.99999%}.container-col.l4{width:33.33333%}
.container-col.l5{width:41.66666%}.container-col.l6{width:49.99999%}.container-col.l7{width:58.33333%}.container-col.l8{width:66.66666%}
.container-col.l9{width:74.99999%}.container-col.l10{width:83.33333%}.container-col.l11{width:91.66666%}.container-col.l12{width:99.99999%}.container-col.l13{width:19.99999%}.container-col.l14{width:12.49999%}}

.colBlock{margin:0 20px 20px; text-align:center; padding:0 15px;}
.colBlock h1{border:solid #39C; font-size:16px; border-width:1px 0; line-height:30px; margin-bottom:10px; padding:5px 5px;}
.colBlock h2{color:#011432; font-size:15px; font-weight:700; text-align:center;}

.colBlock-quote{margin:20px; text-align:center; padding:0 20px; font-size:15px; line-height:20px; font-style:italic;}
.colBlock-quote h1{color:#011432; font-size:17px; font-weight:700; text-align:center; margin:35px auto 15px; font-style:normal;}

.colBlock-resources{margin:10px 10px 20px; text-align:center; font-size:15px; line-height:20px;}

#video{margin:0 auto; width:400px; height:225px; padding:0 5px 20px 5px; text-align:center;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 25px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px 42px;
    border: 1px solid #888;
    width: 70%;
	height: 80%;
}

/* The Close Button */
.close1 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close1:hover,
.close1:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.close2 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close2:hover,
.close2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.close3 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close3:hover,
.close3:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.block-btn{border:1px solid #d7d7d7; background-color:#fff; margin:10px 10px; padding:20px 30px; text-align:center;}
.block-btn:hover,
.block-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
	background-color:#d7d7d7;
}
.block-btn h2{color:#011432; font-size:18px; line-height:35px; font-weight:700; text-align:center;}
.block-btn img{width:230px; margin:25px auto;}

.block-btn-2{border:1px solid #39C; background-color:#39C; margin:40px 20px 10px; padding:10px 20px; text-align:center; color:#FFF;}
.block-btn-2 a{color:#FFF;}
.block-btn-2:hover, .block-btn-2 a:hover, .block-btn-2:focus, .block-btn-2 a:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
	background-color:#006CD9;
}
.block-btn-3{margin:0 auto; padding:10px; text-align:center; font-size:13px; line-height:16px; font-weight:500;}
.block-btn-3:hover, .block-btn-3 a:hover, .block-btn-3:focus, .block-btn-3 a:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.bannerDownload{border:1px solid #d7d7d7; background-color:#dcf2ff; border-radius:10px; margin-bottom:50px;}
.bannerDownload-right{float: right; width: 25%; padding:15px 2%;}
.bannerDownload-left{border-right:1px solid #d7d7d7; float: left; width: 57%; padding:20px 5%; text-align: left; font-size:15px; line-height:20px; font-weight:600; margin-bottom:10px;}
.bannerDownload-left a img{float: right;}
.bannerDownload h1{color:#011432; font-size:15px; line-height:20px; font-weight:600; margin-bottom:10px; display:inline-block; *display:inline; *zoom:1; width: 339px;}
.bannerDownload-right img{max-width: 200px; width: 100%; height: auto;}

.bannerStepBlock{width:850px; margin:0 auto; padding:25px 0; background:url(../images/BG.jpg) repeat-y center 0;}
.bannerStep .bannerStepBlock:nth-child(1){padding-top:0px; border:none;}
.bannerStepTxt{width:610px; min-height:90px; font-size:16px; display:inline-block; padding:10px 20px;}
.bannerStepPic{width:200px; float:left; text-align:center; margin:5px auto; padding:15px 0px; color:#011432; font-size:20px; line-height:20px; font-weight:600;}

/** footer **/
.footer{font:12px/52px Arial, "微軟正黑體", "新細明體", sans-serif; padding:15px 0; border-top:1px solid #eaeaea;}
.footer .pull-right a{margin:10px 0  10px 8px;}
.footer .pull-right img{vertical-align:middle;}
/**------------------------------ for-narrow for-tablet for-mobile------------------------------**/
body.for-narrow,
body.for-tablet{background:none;}
body.for-mobile{background:none; font:13px/22px 'Open Sans', sans-serif; color:#666;}
.for-narrow .wrapperfull,.for-narrow .wrapper960,.for-narrow .block-footer,
.for-tablet .wrapperfull,.for-tablet .wrapper960,.for-tablet .block-footer,
.for-mobile .wrapperfull,.for-mobile .wrapper960,.for-mobile .block-footer{width:100%;}
/** header **/
.for-narrow .header, .for-tablet .header,
.for-mobile .header{width:90%; padding:6px 10px;}
/** logo **/
.for-tablet .header .pull-left img,
.for-mobile .header .pull-left img{height: 25px; width: auto;}
.for-tablet .header .pull-right img,
.for-mobile .header .pull-right img{margin:0 1px; }
/** banner **/
.for-narrow .banner,
.for-tablet .banner,
.for-mobile .banner {height:85%;}
.for-narrow .banner img,
.for-tablet .banner img {width:55%;}
.for-mobile .banner img {width:85%;}
.for-narrow .banner .titleBlock, .for-tablet .banner .titleBlock{width:100%; margin:0 auto;}
.for-mobile .banner .titleBlock{width:100%; margin:0 auto;}
.for-narrow .banner .titleBlock .title, .for-tablet .banner .titleBlock .title{width:100%; padding:0; margin:10px auto 0; font-size:32px; line-height:40px; font-weight:bold; text-align:center; color:#fff;}
.for-mobile .banner .titleBlock .title{width:100%; margin:auto; padding:0; font-size:28px; line-height:38px; font-weight:bold; text-align:center;}
.for-narrow .banner .titleBlock img, .for-tablet .banner .titleBlock img {float:none; margin:20px auto 0; padding:0;}
.for-mobile .banner .titleBlock img {float:none; margin:20px auto 0; padding:0;}


/** container **/
.for-narrow .container, .for-tablet .container,
.for-mobile .container{width:90%; padding:6px 10px;}

.for-narrow .colBlock, .for-tablet .colBlock,
.for-mobile .colBlock{margin:0 20px 30px; text-align:center; padding:0 15px;}

.for-mobile .block-btn img {width:140px;}

.for-narrow .modal-content, .for-tablet .modal-content{ height:300%}
.for-mobile .modal-content{ height:450%}

.for-narrow #video{margin:0 auto; width:400px; height:225px; padding:20px 0;}
.for-tablet #video{margin:0 auto; width:400px; height:225px; padding:20px 0;}
.for-mobile #video{margin:0 auto; width:250px; height:141px; padding:20px 0;}

.for-narrow .bannerDownload-left{padding: 20px 3.2%; width: 60%;}
.for-narrow .bannerDownload-right{padding: 15px 3.2%; width: 27%;}
.for-mobile .bannerDownload-left a img{float: none;}
.for-tablet .containerMsg,
.for-mobile .containerMsg,
.for-tablet .bannerDownload,
.for-mobile .bannerDownload{margin:10px 0 30px;}
.for-narrow .containerMsg h1, .for-tablet .containerMsg h1{margin-top:-10px;}
.for-mobile .containerMsg h1{margin-top:-10px; font-size:22px; line-height:28px; }
.for-tablet .bannerDownload a,
.for-mobile .bannerDownload a{margin:10px;}
.for-tablet .bannerDownload-right,.for-mobile .bannerDownload-right{float:none; text-align:center; width: 96%; padding:10px 2%; }
.for-tablet .bannerDownload-left,.for-mobile .bannerDownload-left{border-bottom:1px solid #d7d7d7; border-right: none; float: none; width: 96%; padding:20px 2%; text-align: center;}
.for-tablet .bannerDownload h1,.for-mobile .bannerDownload h1{margin-bottom:0px; width: auto;}
.for-tablet .bannerDownload-right h1,.for-mobile .bannerDownload h1{display: block; text-align:center;}
.for-tablet .bannerDownload-left{padding: 20px 5%; width: 90%;}
.for-tablet .bannerDownload-left h1{width: 55%; display: inline-block; text-align: left; float: left;}
.for-tablet .bannerStepBlock,
.for-mobile .bannerStepBlock{width:100%; padding-top:10px;}
.for-tablet .bannerStepTxt,.for-tablet .bannerStepPic,
.for-mobile .bannerStepTxt,.for-mobile .bannerStepPic{width:100%; font-size:16px; display:inline-block;}

/** footer **/
.footer{font:12px/52px Arial, "微軟正黑體", "新細明體", sans-serif; padding:3px 0; border-top:1px solid #eaeaea;}
.for-tablet .footer .pull-left,.for-tablet .footer .pull-right,
.for-mobile .footer .pull-left,.for-mobile .footer .pull-right{width:100%; text-align:center;}
.for-tablet .footer .pull-right a,
.for-mobile .footer .pull-right a{margin: 0 0 0 8px;}
.for-tablet .footer .pull-left,
.for-mobile .footer .pull-left{line-height:22px; margin-bottom:10px;}


/** banner **/
.banner {position:relative;}

.floating-button{position:absolute; right:0px; bottom:-180px; z-index:999;}
.for-narrow .floating-button, .for-tablet .floating-button, .for-mobile .floating-button{position:absolute; right:0px; bottom:-80px; z-index:999;}
.for-narrow .floating-button img, .for-tablet .floating-button img, .for-mobile .floating-button img{width:20%;}

.banner .video , .banner .flash{position:absolute;left:0;top:0;}
.banner .flash {display:none;}
.banner .GIF {display:none;}

.banner .GIF {position:absolute;left:0;top:0;}
.for-narrow .GIF img,
.for-tablet .GIF img,
.for-mobile .GIF img {width:100%; height:auto;}

.for-narrow .banner .flash,
.for-tablet .banner .flash,
.for-mobile .banner .flash {width:100%;height:100%;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	video{ -webkit-filter: brightness(108.5%); }
}