/* CSS Document */

*{ margin:0; padding:0}
.apphead{ display:none}
.page li{ list-style:none}
body{ background:#d4d4d4}
body, a{ font-family:Hiragino Kaku Gothic ProN, Hiragino Sans GB, "麗黑 Pro", "LiHei Pro Medium", "微軟正黑體", "Microsoft JhengHei", Helvetica, Helvetica Neue, Arial;; color:#1a1a1a}
.mobilesite{ width:320px; margin:0 auto; height:auto; background:#fff; position:relative }
.page{padding:0 0 90px 0; background:#fff}
header{ background:url(images/logo_insu_m.png) no-repeat center center; background-size:cover; width:100%; margin:0 ; height:60px; display:block; position:relative}

.nav ul{ width:100%; border-bottom:1px solid #ebebeb; height:50px; display:block; background:#fff;}
.nav li{ float:left; width:159px; background:#fff;  border-right:1px solid #ebebeb}
nav li a{ display:block; text-decoration:none; text-align:center; font-size:16px; width:100%}
.tab1 a{ color:#fff; background:#04BFBF; /*border-top:10px solid #04BFBF; */height:50px; line-height:50px; float:left;}
.tab2 a{ color:#fff; background:#72BF69; /*border-top:10px solid #72BF69; */height:50px; line-height:50px}

.listing ul{ position:relative}
.listing li{ width:290px; height:110px; margin:15px; background:#fff; display: block; position:relative; /*clear:both*/}
.listing li:hover a,  li:hover h4{ opacity:0.7; text-decoration:underline}
.listing li p{ width:120px; height:100px; display:block; overflow:hidden; position: relative; float:left; margin:5px }
.listing li p img{ width:auto; height:100%} 
.listing li a{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:3}
.listing li a.movie{ background:url(images/ico_movie.png) no-repeat top left; background-size:cover;}
.a1{ background:#04BFBF; height:auto; min-height:320px}
.a2{ background:#72BF69; height:auto; min-height:320px}

h1,h2,h3,h4,h5,h6{ font-weight:100}

.listing h3{ font-size:16px; line-height:20px; position:absolute; top:15px; left:135px; font-weight:bold}
.listing h4{ font-size:16px; line-height:20px; position:absolute; top:35px; left:135px; margin:0 20px 0 0}
.a1 h3{ color:#04BFBF}
.a2 h3{ color:#72BF69}

.detail{ margin:0 20px 20px 20px; background:#fff}
.detail img{ width:320px; height:auto; margin:10px -20px}
.detail h1{ margin:10px 0; font-size:25px}
.detail h3.video{ position:relative; color:#04BFBF; font-weight:bold}
.detail h3.comic{ position:relative; color:#72BF69; font-weight:bold}
.detail strong{ color:#F93; display:block; margin:20px 0 0 0}
.detail{ font-size:20px; line-height:35px}
.detail p{ margin:0 0 20px 0}

.default_player_div { margin:6px -20px }
.default_player_div img { margin:0px 0px }
#default_player_div { width: 320px; height: 180px }
#uvpimgarrow { width: 50px; height: 50px}

.single_content img{width:100%; height:auto}
.single_content > ul {
	clear: both;
	display: table;
	list-style: disc outside none;
	margin: 0 0 0 20px;
}
.single_content > ul > li {
	list-style: disc outside none;
}

.apphead{
	height:66px; line-height:66px; color:#fff; text-align:center; font-size:27px; margin:0 0 10px 0; position:relative;
background: rgb(5,99,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(5,99,255,1) 0%, rgba(39,18,197,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,99,255,1)), color-stop(100%,rgba(39,18,197,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(5,99,255,1) 0%,rgba(39,18,197,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(5,99,255,1) 0%,rgba(39,18,197,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(5,99,255,1) 0%,rgba(39,18,197,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(5,99,255,1) 0%,rgba(39,18,197,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0563ff', endColorstr='#2712c5',GradientType=0 ); /* IE6-9 */
}
header >.back{position:absolute; left:10px; top:13px; -webkit-border-radius: 3px;border-radius: 3px; border:1px solid #04BFBF; height:35px; width:80px; z-index:9}
header > a.back{ text-decoration:none; text-align:center; font-size:16px; line-height:35px;background:#04BFBF; color:#fff}
header > a.back:hover{background:#04BFBF; color:#fff}
.back i{ margin:0 5px 0 0}

/*.btn_home{ display:none}*/
.btn_home{ color:#04BFBF; font-size:30px; line-height:66px; position:absolute; top:15px; right:15px; z-index:10}


ul.menu li{height:60px; line-height:100px; width:100%; }
ul.menu li{list-style:none; }
ul.menu li.menu1{ color:#04BFBF; border-top:4px solid #04BFBF;}
ul.menu li.menu2{ color:#72BF69;  border-top:4px solid #72BF69; }
ul.menu li a{height:60px; line-height:60px; width:100%; text-decoration:none; font-size:18px; font-weight:bold; text-indent:20px; display:block}
ul.menu li a i{ float:right; line-height:60px; margin:0 20px 0}
ul.menu li.menu1 a{ color:#04BFBF}
ul.menu li.menu2 a{ color:#72BF69}

ul.menu li{background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZWRlZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(222,222,222,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
}
.slide{ position:relative}
.slide div{ position:relative}
.slide div span{ width:100%; height:80px; background:#04BFBF; position:absolute; top:180px; bottom:0px; display:block; padding:10px 0 0 0}
.slide div img{ width:100%; height:auto;}
.slide div p{ font-size:18px; line-height:25px; padding:0; margin-left:20px}
.slide div p.section{ color:#fff}
.slide div p.title{ color:#015656}
.slide a{ text-decoration:none}

.slide-left,
.slide-right{ font-size:20px; color:#fff; position:absolute}
.slide-left{ left:10px; top:28%; z-index:2; padding:10px}
.slide-right{ right:20px; top:28%; z-index:2; padding:10px}

header a{ width:100px; height:100%; left:110px; position:absolute; display:block}

.listing li,
ul.menu li a{	
	-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;}

.tabbar{ position: fixed; bottom:0; left:0; width:102%; height:45px; z-index:3; background:#04BFBF}
.tabbar ul{ width:100%; border-bottom:1px solid #04BFBF; height:45px; display:block; background:#04BFBF}
.tabbar li{ float:left; width:49%; background:#04BFBF;  border-right:1px solid #04BFBF}
.tabbar li a{ display:block; text-decoration:none; text-align:center; font-size:20px; width:105%}
.tbtab1 a{ color:#fff; background:#04BFBF; /*border-top:10px solid #04BFBF; */height:45px; line-height:45px; float:left;}
.tbtab2 a{ color:#fff; background:#72BF69; /*border-top:10px solid #72BF69; */height:45px; line-height:45px}

.single_content img{ margin:0}



/* from Swiper */
/* Demo Syles */
.device {
  width: 320px;
  height: 273px;
  /*
  padding: 30px 40px;
  border-radius: 20px;
  background: #111;
  border: 3px solid white;
  margin: 5px auto;
  position: relative;
  box-shadow: 0px 0px 5px #000;
  */
}
/*
.device .arrow-left {
  background: url(img/arrows.png) no-repeat left top;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
}
.device .arrow-right {
  background: url(img/arrows.png) no-repeat left bottom;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
}
*/
.swiper-container {
  width: 320px;
  height: 271px;
}
.content-slide {
  padding: 20px;
  color: #fff;
}
.title {
  font-size: 25px;
  margin-bottom: 10px;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #999;
  box-shadow: 0px 1px 2px #555 inset;
  margin: 0 3px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #fff;
}



/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 768px) {
.tabbar{ display:none}
	
header{ display:block}
header{ background:url(images/logo_insu.png) no-repeat center center; background-size:auto; margin:10px 0 ; height:80px; display:block; position:relative}

header a{ width:112px; left:328px}

body{ background: url(images/bg_desktop.jpg) no-repeat top center, #ebebeb; background-size:cover; min-height:1200px}
.mobilesite{ width:768px; margin:90px auto 0 auto; height:auto; background:#fff }
/*.btn_home{ display:none} */
.btn_home{ color:#04BFBF; font-size:30px; line-height:66px; position:absolute; top:30px; right:15px; z-index:10}

.apphead{ display:none}
.page{ padding:0 0 90px 0}
header >.back{position:absolute; left:20px; top:26px; -webkit-border-radius: 3px;border-radius: 3px; border:1px solid #04BFBF; height:35px; width:80px; z-index:9}


.nav li{ float:left; width:383px; background:#fff;  border-right:1px solid #ebebeb}
.nav li a{ display:block; text-decoration:none; text-align:center; font-size:20px; width:384px}
.listing ul{ position:relative; width:1000px}
.listing li{ float:left; width:354px; height:188px; margin:20px 0 0 20px; border:1px solid #ebebeb;}
.listing li:hover{ background:#ebebeb}
.listing li a{ width:100%; height:190px;}
.listing li:hover a,  li:hover h4{ opacity:1; text-decoration:none}
.listing li p{ width:177px; height:170px; margin:10px}
.listing li h3{ left:200px; top:50px; font-size:18px}
.listing li h4{ left:200px; top:75px}
.a1{ background:#fff; height:auto}
.a2{ background:#fff; height:auto}

/*detail page*/
.detail{ margin:20px 40px}
.detail img{ width:768px; height: auto; margin:0 0 0 -40px}
.detail h1{ margin:20px 0; font-size:48px; font-weight:100; line-height: normal}
.detail h3{ margin:20px 0 5px 0; font-size:24px}
.detail p{ line-height:190%; font-size:18px; /*max-width:60%; */margin:0 0 20px 0}

#default_player_div { width: 480px; height: 270px }
.default_player_div { margin:0px 0px 0px 0px }
.default_player_div img { margin:0px 0px }

.slide div span,
ul.menu li,
ul.menu li a{ width:100%}

.slide-left,
.slide-right{ top:40%}

ul.menu li a:hover{ color:#ccc}

.single_content{ margin:0}
/*.single_content p,*/
.single_content a > img { float:left; width:330px; height:auto; overflow:hidden; margin:0 10px 0 0}
.single_content img{ width:100%; height:auto; margin:0}


.slide div span{ width:100%; height:80px; background:#04BFBF; position:absolute; top:432px; bottom:0px; display:block; padding:10px 0 0 0}

/* from Swiper */
.device {
  width: 100%;
  height: 500px;
  /*
  padding: 30px 40px;
  border-radius: 20px;
  background: #111;
  border: 3px solid white;
  margin: 5px auto;
  position: relative;
  box-shadow: 0px 0px 5px #000;
  */
}
.swiper-container {
  width: 100%;
  height: 498px;
}
}