@charset "utf-8";
body {padding:0;margin:0; 
      font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Jhenghei", sans-serif;background-color:#f8e621;background-image:url(../images/bg.jpg);background-position:top;background-repeat:no-repeat;background-attachment:fixed;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
.wrapper {height:100vh;width:100%;position:relative;display:block;}
.header {height:400px;width:100%;z-index:1;}
.content {height:50vh;z-index:1;}
.container {
	width: 90%;
	max-width: 850px;
	margin: 0 auto;
	display:block;
	padding:5%;
	z-index:1000;
	position:absolute;
	left:35vh;
}

.part1 {float:left;width:65%;}
.part1 .title {width:100%;max-width:500px;margin:5px auto;}
.part1 .title img {width:100%;}
.part1 .icon {width:100%;max-width:450px;margin:15px auto;}
.part1 .icon img {width:100%;}

.part2 {float:left;width:35%;}
.part2 .mobile {width:100%;max-width:300px;margin:0 auto;text-align:center;}
.part2 .mobile img {width:100%;}
.link {margin-top:140px;max-width:500px;margin-left:30px;}
.link img {}
.link .left {width:30%;float:left;}
.link .right {width:70%;float:left;}
.link2 {display:none;}
.link2 .right {width:100%;float:left;}

.btn_dl {text-align:center;}
.btn_dl img {padding:0 3px;}
img.map, map area{
    outline: none;
}
.top_dl,.link2 .top_dl {margin-bottom:10px;padding-left:10px;}
.btn_dl_details,.link2 .btn_dl_details {width:100%;}
.btn_icon, .link2 .btn_icon{float:left;}
.line, .link2 .line {float:left;}
.clearfix {clear:both;}
.device_web {display:block;}
.device_m {display:none;}
@media only screen and (max-width: 1279px) /* 640 */
{
.container {left:15vh;}
.device_web {display:none;}
.device_m {display:block;}
}

@media only screen and (max-width: 1024px) /* 640 */
{
.container {left:6vh;}
}

@media only screen and (max-width: 1000px) /* 640 */
{
.container {left:5vh;}
}

@media only screen and (max-width: 767px) /* 640 */
{
.container {left:0;}
.part1 {width:100%;}
.part2 {width:100%;}	
.part2 .mobile {width:100%;margin:0 auto;text-align:center;max-width:280px;margin-top:10px;}
.part2 .mobile img {width:80%;}
.link {display:none;}
.link2 {display:block;}
.tablecss td{width:100%;}
.link2 .btn_icon{float:left; width:30%;}
.link2 .btn_icon img{ width:100%;}
.link2 .line {width:5%;}
}