@charset "UTF-8";

* {box-sizing: border-box;}
body{padding:0; margin:0; font-family: 'Open Sans', sans-serif; font-size:14px; line-height:22px}
.container{margin:0 auto; width:950px}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {float: left; padding:15px;}
.row{overflow:hidden}
.row::after {content: ""; clear: both;  display: block}
a{text-decoration:none;color:#ffffff}
/*.header{background:#c54747; width:100%; color:#ffffff; position:fixed; top:0; left:0; z-index:99}
.header b{ font-size:24px}*/
.name{padding-left:90px; float:left; padding:20px 100px }
.logo_index img{width:25%; max-width:135px; height:auto; position:fixed; top:0; left:0; z-index:100}
hr{ border-bottom:none; border-left:none; border-right:none; width:80%}


.banner{width:100%; position:relative}
.banner img{width:100%; height:auto}
.banner .title{position:absolute; bottom:15%; left:10%;  font-size:36px; font-weight:bold; color:#ffffff}

.tag img{background-size:contain; width:20%; max-width:170px; height:auto; position:absolute; bottom:0; right:10%; z-index:102}

/*.banner .select{margin:auto; text-align:center; margin:10px}*/
.dot{width:15px; height:15px; background:#666666; display: inline-block; cursor:pointer; border-radius:50%; margin:15px; transition: background-color 0.6s ease}
.active, .dot:hover{background:#999999}

/* Fading animation */
.fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s}
@-webkit-keyframes fade {from {opacity: .4}  to {opacity: 1}}
@keyframes fade { from {opacity: .4}  to {opacity: 1}}

.menu {background:#c54747; width:100%; color:#ffffff; position:fixed; top:0; left:0; z-index:99}
.menu b{font-size:24px}
.menu ul{padding:20px 0; margin:0; text-align:right}
.menu li{list-style:none; display:inline; padding:10px; background:url(../images/menu_line.gif) no-repeat right center}
.menu li a:hover{color:#333333}
.menu li:last-child{background:inherit}

.menu_s ul{padding:0; margin:0}
.menu_s li{list-style:none; padding:5px; text-align:right; padding-right:20px}

.menu_s{background:url(../images/bg_menu_s.png) no-repeat; height:612px; width:572px; position:fixed; right:-500px; top:0; z-index:103; cursor:pointer; display:none}
.cat a{color: inherit}

.about{text-align:center; padding:30px}
.about b{font-size:16px; font-weight:bold}

.cat table{margin:0 auto; width:250px}
.cat td{vertical-align:top}
.cat table img{margin-right:10px; cursor:pointer; padding:inherit}

/*
.cat img{margin-right:10px; cursor:pointer; transition: transform .5s; -webkit-transition: transform .5s}
.cat img:hover{transform:scale(.5,.5); -webkit-transform:scale(.5,.5)}
*/

.cat_cd{background:url(../images/icon_cd.png) no-repeat top left; padding-left:70px; text-align:inherit}

.cat_name{padding:2%}
	

.footer{text-align:center; color:#666666; padding-top:50px; background:#cccccc}
.footer a{color:#666666}
.allright{font-size:12px; color:#cccccc; padding:20px; text-align:left}
.to_top{position:fixed; bottom:0; right:0; width:98px; height:95px; background:url(../images/bg_to_top.png) no-repeat left bottom; color:#ffffff; padding:50px 0 0 60px; z-index:210}
.to_top:hover{background:url(../images/bg_to_top.png) no-repeat right bottom; cursor:pointer}

/*--------------------  Logo  --------------------*/
.logo_area{background:#cccccc}
.logo_area .col-3{text-align:center}
.logo_area .col-3 img{width:80%; height:auto; cursor:pointer; transition: transform .5s; -webkit-transition: transform .5s}
.logo_area .col-3 img:hover{ transform:scale(1.25,1.25); -webkit-transform:scale(1.25,1.25)}

/*--------------------  Character Design  --------------------*/
.pcr{background:#333333; color:#FFF; padding:30px 0}
.cuteeat{background:#c54747; color:#FFF; padding:30px 0}
.pc{background:#6CF; color:#FFF; padding:30px 0}
.icac{background:#ffffff; padding:30px 0}
.symbolizing{background:#6C6; color:#FFF; padding:30px 0}
.Invista{background:#c70b46; color:#FFF; padding:30px 0}
.dcfc{background:#999999; color:#FFF; padding:30px 0}
.wu{background:#000000; color:#FFF; padding:30px 0}
.hit{background:#07216c; color:#FFF; padding:30px 0}
.puff{background:#FC0; color:#FFF; padding:30px 0}
.kerry{background:#f1f8fd; padding:30px 0}
.hksl{background:#256588; color:#FFF; padding:30px 0}
.quorum{background:#006445; color:#FFF; padding:30px 0}
.spartan{background:#f7a833; color:#FFF; padding:30px 0}
.philips{background:#000000; color:#FFF; padding:30px 0}
.clp{background:#53c6eb; color:#FFF; padding:30px 0}
.olympic{background:#231f20; color:#FFF; padding:30px 0}

.ori{padding:30px 0}


.cd_area{background:#ffffff}
.cd_area .title{font:bold 36px 'Open Sans', sans-serif; text-align:center; padding:20px}

.cat_title{position:relative; padding:30px 0}
.cat_title:hover{ color:#c54747; cursor:pointer}
.cat_title b{text-align:center; font-size:24px; padding:40px; font-weight:bold}
.cat_title{text-align:center; font-size:14px; padding:40px}

[class*="col-"] img { width:90%; height:auto; cursor:pointer; transition: transform .5s; -webkit-transition: transform .5s; max-width:700px; padding:50px 0}
[class*="col-"] img:hover {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1)}

.cd_area [class*="col-"]{text-align:center; /*overflow:hidden;*/ position:relative; color:#ffffff; font: bold 16px 'Open Sans', sans-serif}
/*.cd_area [class*="col-"]{text-align:center; position:relative; color:#ffffff; font: bold 36px 'Open Sans', sans-serif}*/
.p_name{position:absolute; bottom:0; color:#000000; text-align:center; width:100%}
/*.p_name{position:absolute; top:50%; width:100%; text-align:center}*/
.p_name span{font-weight:inherit; font-size:12px}
/*.cd_area [class*="col-"] .p_name{position:absolute; top:50%; width:100%; text-align:center}
*/

/*--------------------  Video  --------------------*/
.video_area{background:#333333}

.col-12 iframe{max-width:1280px; width:100%; height:720px}
.col-6 iframe{max-width:768px; width:100%; height:576px}



.s{display:none}/*Display none when use laptop}*/
.l{display:inherit}




	/*--------------------  phone  --------------------*/
	@media only screen and (max-width: 600px) 
	{
		[class*="col-"] {width: 100%}
		
	
		.name{display:none}
		
		.about b{font-size:12px; font-weight:bold}
		
		.cat_title b{text-align:center; font-size:18px; padding:40px; font-weight:bold}
		
		.banner .title{position:absolute; bottom:15%; left:10%;  font-size:18px; font-weight:bold; color:#ffffff}
		/*.tag img{background-size:contain; width:20%; max-width:170px; height:auto; position:absolute; bottom:0; right:10%; z-index:102}*/
		
		.menu{background:url(../images/bg_menu_s.png) no-repeat; background-size:100% auto; height:600px; width:100%; position:fixed; left:85%; top:0; z-index:100; display: inherit}
		.menu ul{padding: inherit; margin:0; text-align:right}
		.menu li{list-style:none; padding:5px; text-align:right; padding-right:20px; display:inherit; background: inherit}
		
		.l{display:none}
		.s{display: inherit}
		
		.col-12 iframe{max-width:1280px; width:100%; height:300px}
		.col-6 iframe{max-width:768px; width:100%; height:250px}

	}

	
	
	
	/*--------------------  i-pad  --------------------*/
	@media only screen and (min-width: 600px) and (max-width: 800px) {
	
		
		
		
		
		.name{display:none}
		
		.about b{font-size:12px; font-weight:bold}
		
		.cat_title b{text-align:center; font-size:18px; padding:40px; font-weight:bold}
		
		.banner .title{position:absolute; bottom:15%; left:10%;  font-size:24px; font-weight:bold; color:#ffffff}
		
		
		.menu{background:url(../images/bg_menu_s.png) no-repeat; background-size:100% auto; height:600px; width:100%; position:fixed; left:85%; top:0; z-index:100; display: inherit}
		.menu ul{padding: inherit; margin:0; text-align:right}
		.menu li{list-style:none; padding:5px; text-align:right; padding-right:20px; display:inherit; background: inherit}
		
		
		.col-1 {width: 8.33%;}
		.col-2 {width: 33.33%;}
		.col-3 {width: 50%;}
		.col-4 {width: 50%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 91.66%;}
		.col-12 {width: 100%;}
		
		.l{display:none}/*Display none when use cell or ipad}*/
		.s{display:inherit}
		
		.col-12 iframe{max-width:1280px; width:100%; height:300px}
		.col-6 iframe{max-width:768px; width:100%; height:250px}
	}