@import url("reset.css");
@charset "utf-8";
    body {
        /*font-size:62.5%;*/
        background:url(../images/bg.jpg) left top repeat;
		position:relative;
    }
    .pc{ display:block;}
    .m{ display:none !important;}
h1{ position:absolute; top:0; left:0; z-index:0;}

/*主視覺*/
    .visual {
        margin: 0 auto; 
        padding: 0; 
        position: relative; 
        overflow:hidden;
    }
    .visual img{width:100%;}

	.kv-area{width:100%; height:503px; position:relative; margin:-503px auto 0 auto; overflow:hidden;}
	.kv1 a > img{ height:100%;}
	.txt-kv{ width:50%; height:auto; position:absolute; top:80px; left:50px; z-index:50;}
	.mo{position:absolute; top:150px; right:220px; z-index:5;}
	.ck{position:absolute; top:200px; left:0px; z-index:5;}
	.cks{position:absolute; top:80px; left:80px; z-index:5;}
/*內容區塊*/
    .content { margin:0 auto; padding:2% 5%; max-width:1400px; min-height:500px; background:url(../images/con-bg.jpg) center repeat-y;}

    .tag.stuck {
        position: fixed;
        z-index: 997;
        background-color: #fff;
        display: block;
        top: 40px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3)
    }
    a[name^="a"] {position: relative; top: -130px; clear:both;}
    a[name^="p"] {position: relative; top: -90px;}

/*****incAd廣告*****/
    .adBox{margin:0 auto; padding:5%;padding-bottom: 0px;}
    .adBox img{max-width:1198px;width:100%;}
	
/******incAd2******/
    .max1200Box {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
    }
    .space{
        display:block;
        height:24px;
        margin:0 auto;
    }
    .mainViewBox {
        margin:0 auto;
        padding: 0;
        position: relative;
    }
    .mainViewBox img {
        width: 100%;
        border: 0;
        display:block;
    }
    .moreBox{
        width:100%;
        z-index:2;
        text-align: center;
        padding:8px 0;
        font:normal 16px/1 Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;
        color:#fff; 
        cursor: pointer;   
        background-color:rgba(220,75,10,0.8);
    }

    .moreBox .icon1{
        background:url(../images/icon2.png) left top no-repeat;
        background-size: cover;
    }
    .moreBox.open .icon1{
        background:url(../images/icon3.png) left top no-repeat;
        background-size: cover;
    }
	.infocon2{ border:solid 5px rgba(220,75,10,0.8); padding:30px;}
	.infocon2 h2{ font:bold 30px/36px Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif; color:#3a278b;}
	.infocon2 ul,.infocon2 ol{ list-style:none; margin:15px 0;}
	.infocon2 li{ font:normal 15px/24px Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;}
	.infocon2 li span{ font:bold 18px/26px Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif; color:#E81D20;}


/*注意事項*/
    .noteBox1{
		width:85%;
        margin:0 auto;
        padding:0;
        color:#333;
        text-align: left;
    }
    .noteBox1 .ill{
		max-width:370px;
        width:80%;
        margin:auto;
		display:block;
		float:right;
	}
	
    .noteBox1 h3{
		background:url(../images/title.jpg) no-repeat center;
		height:76px;
        margin:50px auto 30px auto;
		padding:20px 0;
        font:bold 30px/1 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
		text-align:center;
		color:#dea331;
    }
	.event{overflow: hidden; padding:30px; margin-bottom:50px;}
	.event h2{
		padding:20px 0 0 0;
        font:bold 30px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
        text-align: left;  
		color:#960;   
    }
	.event hr{
		background:url(../images/linebg.png) repeat-x top left;
		height:15px;
    }
	.event p{
        padding:0;
        font:normal  16px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
        text-align: left;   
    }
	
    .event blockquote{
        padding:0;
        font:normal 16px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
        text-align: left;
		color:#c06;  
    }
	.noteBox1 p{
        padding:0;
        font:normal  16px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
        text-align: left;
		margin:0 auto 30px auto;
    }
	.noteBox1 ul{
        width:100%;
        list-style:none;
        margin:0 auto 50px auto;
        padding:0 0 0 30px;
    }
	
    .noteBox1 ol{
        width:100%;
        list-style: decimal;
        margin:0 auto 50px auto;
        padding:0 0 0 30px;
    }

    .noteBox1 ol li, ul li{
        display:list-item;
        padding:0;
        font:normal  16px/2 "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif;
    }
	
    .noteBox1 ol li a{
        text-decoration: underline;
    }
    .noteBox1 ol li img{
        max-width: 949px;
        width: 100%;
        margin:15px auto;
    }
	
	.noteBox1 .wifi{
		max-width:480px;
        width:80%;
        margin:auto;
		text-align:center;
		display:block;
		}
/*回頂部
.scroll2top:link, .scroll2top:visited {background: url(../images/top.png) no-repeat 0 0; height:80px; width:80px; position:fixed; bottom:50px; right:0; margin-left:0;}
.scroll2top:hover { background: url(../images/top1.png);}*/

/* c23模組專用 */
q:before, q:after {content: "";}
*+html .carrier li {min-height: 1%;}

 /*【 調整C26模組 】*/
.group-type-ph{ text-align:center; display:inline-block; width:100%; clear:both;vertical-align: top;}
.group-type-ph:after{content:""; display:block; clear:both; line-height:0; height:0; visibility:hidden;}
.ph{display:inline-block; width:26%; margin:1% 2%; border:1px solid #9d9999; border-radius:5px; transition:all .3s ease-out; box-shadow:none;vertical-align: top;}
.ph:hover{box-shadow:0 2px 7px 5px #ffcfc0;}
.ph.left{margin-left:0;}
.ph-img{margin:0;}
.ph-img img{width:100%; padding:0;}
.ph a:link, .ph a:visited{text-decoration:none; border:none;}
.ph a img{border:none; border-top:solid 8px #8b36ff;}
.ph-title{font:bold 1.8rem/2rem "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif; background:#8b36ff; color:#ffff00; margin:0; padding:15px 20px; text-align:left; display:block; clear:both;}
.ph-line{ 
  content:'';
  background:url(../images/deco-bg.jpg) repeat-x top left;
  display:block;
  clear:both;
  height:22px;
  margin: 0 auto 10px;
}
.ph-detail{font:normal 1.5rem/2rem "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif; color:#666; margin:0; padding:10px 20px; text-align:left; display:block; clear:both;}
.ph-feature{font:normal 1.5rem/2rem "微軟正黑體", "Microsoft JhengHei",Arial,sans-serif; color:#666; margin:0; padding:10px 20px; text-align:left; display:block; clear:both;}
.ph .price{color:#ac1f0c; font:bold 2.4rem/1 Anton, sans-serif, 微軟正黑體; float:right; padding:12px 18px 30px 18px;}
.ph .price span, .ph .price i{color:#ac1f0c; font:bold 2.4rem/1 Anton, sans-serif, 微軟正黑體; }

/*回頂部*/
.scroll2top:link, .scroll2top:visited {background: url(../images/goTop.png) no-repeat 0 0; background-size:100% auto; height:60px; width:61px; position:fixed; bottom:50px; right:0; margin-left:0;}
/*.carrier .box-head q{
    display:block; 
    font: bold 1.6rem/2rem  Verdana, Geneva, sans-serif,"微軟正黑體"; 
    padding:10px 0 10px 9px; 
    color:#c500e2; 
    background-color:#fff4b7; 
    margin-left:-8px; 
    height:auto; 
    margin-top:-10px;
    margin-bottom:-10px;
}*/

/******************** RWD ********************/
@media screen and (min-width:1401px) and (max-width:1680px) {
	.ck{position:absolute; top:250px; left:0px; width:370px;}
	.cks{position:absolute; top:130px; left:50px; width:50px;}
}
@media screen and (min-width:1201px) and (max-width:1400px) {
	.content {width:90%; background:url(../images/con-bg-p.jpg) center repeat-y; background-size:100% auto;}
	.tag{width:90% !important;}
	.tag.stick{width:90% !important; margin-left:-45% !important;}
	.kv1 a > img{ width:auto; height:100%; margin-left:-150px;}
	.kv-area{max-width:1400px; height:503px; position:relative; margin:-503px auto 0 auto; overflow:hidden;}
	.ck{position:absolute; top:300px; left:0px; width:300px;}
	.cks{position:absolute; top:180px; left:50px; width:50px;}

}

@media screen and (max-width:1200px){
	.content {width:100%; background:url(../images/con-bg.jpg) center repeat-y; background-size:100% auto;}
	.tag{width:100% !important;}
	.tag.stick{width:90% !important; margin-left:-45% !important;}
	.ck{position:absolute; top:380px; left:0px; width:180px;}
	.cks{position:absolute; top:320px; left:20px; width:40px;}
}

@media screen and (min-width:801px) and (max-width:1030px){
	.content {width:90%; background:url(../images/con-bg.jpg) center repeat-y; background-size:100% auto;}
	.tag{width:90% !important;}
	.tag.stick{width:90% !important; margin-left:-45% !important;}
	.kv1 a > img{ width:auto; height:100%; margin-left:-150px;}
	.kv-area{max-width:1400px; height:503px; position:relative; margin:-503px auto 0 auto; overflow:hidden;}
	.ck{position:absolute; top:380px; left:0px; width:180px;}
	.cks{position:absolute; top:320px; left:20px; width:40px;}
	.ph{width:45%; margin:5% 2%;}
    .noteBox1{width:100%;}
}

@media screen and (max-width:800px) {
.content {width:100%; background:url(../images/con-bg-m.jpg) center repeat-y; background-size:100% auto;}
.tag{width: 100% !important;}
.tag.stick{width:100% !important; top:0; left:50% !important; margin-left:-50% !important;}
.kv1{height:auto;}
.kv1 a > img {width: 100%; height: auto; margin-left:0px;}
.pc{ display:none !important;}
.m{ display:block !important;}
.kv-area, .txt-kv, .mo, .ck, .cks{ display:none;}
.scroll2top:link, .scroll2top:visited {height:44px; width:43px; position:fixed; bottom:50px; right:0; margin-left:0;}
.ph{width:45%; margin:5% 2%;}
.event{ clear:both; padding:0;}
.noteBox1 .ill{float:none; margin-top:50px;}

}
@media screen and (max-width:660px) {
.ph{width:90%; margin:5%;}
.event{ clear:both; padding:0;}
.noteBox1 .ill{float:none; margin-top:50px;}

}
@media screen and (max-width:480px) {
.content {width:100%; background:url(../images/con-bg-m.jpg) center repeat-y; background-size:100% auto;}
.bigBTN{ width:90%; margin:auto; text-align:center;}
.bigBTN a{ width:100%; height:48px; display:inline-block;}
.ph{width:90%; margin:5%;}
.event{ clear:both; padding:0;}
.noteBox1 .ill{float:none; margin-top:50px;}

}
@media screen and (max-width:340px) {
.content {width:100%; background:url(../images/con-bg-m.jpg) center repeat-y; background-size:100% auto;}
.ph{width:90%; margin:5%;}
}


@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
  20% {-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
  40% {-webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9);}
  60% {opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97);}
  to {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes jump{
  0% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
  25% {transform:translate(0px,-15px); -webkit-transform:translate(0px,-15px);}
  50% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
  74% {transform:translate(0px,-15px); -webkit-transform:translate(0px,-15px);}
  100% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
}

.jump{
  animation:jump cubic-bezier(0.36,0.08,0.76,0.97) 4s;
  animation-iteration-count:infinite;
  transform-origin:50% 100%;
  -webkit-animation: jump cubic-bezier(0.36,0.08,0.76,0.97)  4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin:50% 100%;
}

@keyframes ro-ck{
  0% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
  25% {transform:translate(0px,-15px); -webkit-transform:translate(0px,-15px);}
  50% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
  75% {transform:translate(0px,-15px); -webkit-transform:translate(0px,-15px);}
  100% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
}

.ro-ck{
  animation: ro-ck cubic-bezier(0.36,0.08,0.76,0.97) 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 100%;
  -webkit-animation: ro-ck cubic-bezier(0.36,0.08,0.76,0.97) 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 100%;
}

@keyframes ro-cks{
  0% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
  25% {transform:translate(0px,-15px); -webkit-transform:translate(0px,-15px);}
  50% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
  75% {transform:translate(0px,-15px); -webkit-transform:translate(0px,-15px);}
  100% {transform:translate(0px,0px); -webkit-transform:translate(0px,0px);}
}

.ro-cks{
  animation: ro-ck cubic-bezier(0.36,0.08,0.76,0.97) 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 100%;
  -webkit-animation: ro-ck cubic-bezier(0.36,0.08,0.76,0.97) 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 100%;
}