@charset "UTF-8";


/*==========================================================================================*/



div.iconBlue { display:inline-block; *display:block; *float:left; width:50px; background:#00a1db; border-radius:4px; margin:0 10px; color:white; font-family:Arial; font-size:12px; padding:5px; }
div.iconBlack { display:inline-block; *display:block; float:left; width:50px; background:#111; border-radius:4px; color:white; font-family:Arial; font-size:12px; padding:5px; }
div.iconRed { display:inline-block; *display:block; float:left; width:50px; background:#d03044; border-radius:4px; color:white; font-family:Arial; font-size:12px; padding:5px; }


	.bbox-simple { display:inline-block; float:left;
		width:200px; padding-right:20px; margin:0 10px; margin-top:-8px; height:110px; border-right:1px solid #ced0d5; }
	.bbox-right { display:inline-block; float:right;
		width:450px; padding-right:20px; margin:0 10px; margin-top:-8px; height:110px; }
		
		
		.bbox-right h3 { display:inline-block; font-size:15px !important; color:#579400 !important; float:left; padding-left:18px; }
		.bbox-right ul { display:block; font-size:12px; color:#333; margin:0; padding:0; clear:both; padding-left:25px; }
		.bbox-right ul li { list-style:disc; font-size:12px; color:#333; margin:0; padding:0; }
		.bbox-right a.btn { float:right; color:#579400 !important; margin-top:-10px !important; margin-right:-10px !important; }
		
		.bbox-rightOrange h3 { color:#ea5700!important; }
		.bbox-rightOrange a.btn { color:#ea5700 !important; }
		
		
		

.boxApp { display:table-cell; height:100%; padding:11px; padding-bottom:8px; width:515px; border:none; position:relative; *display:block; *float:left; *width:500px; *margin:0px; }
.boxApp div.btnprev { display:block; width:30px; height:30px; position:absolute; top:50px; left:8px; cursor:pointer; background:url(../images/icon-tabarrow.png) no-repeat 0 0px; z-index:61; }
.boxApp div.btnnext { display:block; width:30px; height:30px; position:absolute; top:50px; right:8px; cursor:pointer; background:url(../images/icon-tabarrow.png) no-repeat -170px -50px; z-index:62; }
.boxApp .contain { display:block; position:absolute; top:10px; left:45px; overflow:hidden; width:515px; height:110px; }
.boxApp .contain .appmask { display:block; position:absolute; top:0; left:0; height:110px; }
/*
.itemApp { display:block; position:relative; margin:0; float:left; width:90px; text-align:center; cursor:pointer; }
.itemApp img { display:block; position:absolute; top:20px; left:20px; margin:0; }
.itemApp b { display:block; color:#333; font-size:11px; line-height:15px; font-weight:bold; margin-top:82px; }
.itemApp:hover b { color:#da3245; }
*/


.boxPageContainer { display:inline-block; height:100%; padding:0px; padding-bottom:8px; width:540px; border:0px solid red; position:relative; *display:block; float:right; *width:500px; *margin:0px; }
.boxPageContainer div.idframe { display:block; position:relative; }
.boxPageContainer div.idframe div.btnprev { display:block; width:30px; height:30px; position:absolute; top:50px; left:8px; cursor:pointer; background:url(../images/icon-tabarrow.png) no-repeat 0 0px; z-index:61; }
.boxPageContainer div.idframe div.btnnext { display:block; width:30px; height:30px; position:absolute; top:50px; right:8px; cursor:pointer; background:url(../images/icon-tabarrow.png) no-repeat -170px -50px; z-index:62; }
.boxPageContainer div.idframe .contain { display:block; position:absolute; top:10px; left:45px; overflow:hidden; width:100%; border:0px solid green; height:500px; }
.boxPageContainer div.idframe .contain .appmask { display:block; position:absolute; top:0; left:0; float:right; border:0px solid red; height:110px; }

.boxPageContainerFull { width:100% !important; }

	.btnprevGray { background-position:0 -100px !important; }
	.btnnextGray { background-position:-170px -150px !important; }



.sideBannerFrame { display:block; position:relative; height:200px; }
.sideBannerFrame .contain { display:block; position:absolute; top:0px; left:0px; overflow:hidden; width:100%; height:200px; }
.sideBannerFrame .contain .appmask { display:block; position:absolute; top:0; left:0; float:right; height:200px; }
.sideBannerFrame div.sideBannerClip { width:200px; float:left; }



.itemApp { display:block; position:relative; margin:0; float:left; width:90px; text-align:center; cursor:pointer; }
.itemApp img { display:block; position:absolute; top:20px; left:20px; margin:0; }
.itemApp b { display:block; color:#333; font-size:11px; line-height:15px; font-weight:bold; margin-top:82px; }
.itemApp a:hover b { /*color:#da3245;*/ text-decoration:underline; }

.itemApp100 { display:block; position:relative; margin:0; float:left; width:122px; text-align:center; height:180px; cursor:pointer; }
.itemApp100 img { display:block; position:absolute; top:0px; left:11px; margin:0; height:100px; width:100px; }
.itemApp100 p { display:block; color:#333; font-size:11px; line-height:15px; font-weight:normal; position:absolute; width:100%; top:100px; }
.itemApp100 b { display:block; color:#333; font-size:11px; line-height:15px; font-weight:bold; margin-top:82px; }
.itemApp100 p span.red { color:#da3245; }
.itemApp100 p span.cat { color:#aaa; font-size:13px; line-height:17px; font-weight:normal; }
.itemApp100 a:hover b { /*color:#da3245;*/ text-decoration:underline; }

.itemApp165 { display:block; position:relative; margin:0; float:left; width:94px; text-align:center; height:120px; cursor:pointer; padding-left:110px; }
.itemApp165 img { display:block; position:absolute; top:0px; left:0px; margin:0; height:100px; width:100px; }
.itemApp165 p { display:block; color:#333; font-size:11px !important; line-height:15px; font-weight:normal; text-align:left; }
.itemApp165 b { display:block; color:#da3245; margin-bottom:10px; font-size:13px !important; margin-top:10px; text-align:left; }
.itemApp165 p span.red { color:#da3245; }
.itemApp165 p span.cat { color:#aaa; font-size:13px; line-height:17px; font-weight:normal; }
.itemApp165 a:hover b { /*color:#da3245;*/ text-decoration:underline; }

.itemRecord { display:block; position:relative; margin:0; float:left; width:90px; text-align:center; cursor:pointer; }
.itemRecord img { display:block; position:absolute; top:4px; left:10px; margin:0; border:1px solid #ccc; }
.itemRecord b { display:block; color:#333; font-size:11px; line-height:22px; font-weight:bold; margin-top:90px; font-weight:normal; }
.itemRecord b span { color:#da3245; font-weight:normal; font-style:normal; }
.itemRecord a:hover b { /*color:#da3245;*/ text-decoration:underline; }

.itemBook { display:block; position:relative; margin:0; float:left; width:225px; text-align:center; cursor:pointer; }
.itemBook img { display:block; position:absolute; top:0; left:10px; margin:0; border:1px solid #ccc; }
.itemBook p { display:block; color:#333; font-size:11px; line-height:15px; font-weight:bold; margin-left:100px; margin-top:15px; text-align:left; font-weight:normal; width:100px; }
.itemBook p b { color:#da3245; }
.itemBook a:hover p { /*color:#da3245;*/ text-decoration:underline; }

.itemBook100 { display:block; position:relative; margin:0; float:left; width:122px; text-align:center; height:180px; cursor:pointer; }
.itemBook100 img { display:block; position:absolute; top:0px; left:11px; margin:0; height:134px; width:97px; border:1px solid #ccc; }
.itemBook100 p { display:block; color:#333; font-size:11px; line-height:15px; font-weight:normal; position:absolute; width:100px; top:145px; padding:0px 11px !important; }
.itemBook100 b { display:block; color:#333; font-size:11px; line-height:15px; font-weight:bold; margin-top:82px; }
.itemBook100 p span.red { color:#da3245; }
.itemBook100 a:hover b { /*color:#da3245;*/ text-decoration:underline; }

.itemPromo { display:block; position:relative; margin:0; float:left; width:225px; text-align:center; cursor:pointer; }
.itemPromo img { display:block; position:absolute; top:0; left:0px; margin:0; border:1px solid #ccc; }
.itemPromo p { display:block; color:#333; font-size:11px; line-height:15px; font-weight:bold; margin-left:128px; margin-top:15px; text-align:left; font-weight:normal; width:100px; }
.itemPromo p span.red { color:#ea5700; font-weight:normal; }
.itemPromo p b { color:#ea5700; }
.itemPromo a:hover p { /*color:#da3245;*/ text-decoration:underline; }









/* FIRST SET USE IN PLANPHONE PHONE INDEX */
.bannerSet-rightList { height:205px; display:block; 
 		background-color:white; text-align:left;  position:relative;
		border-bottom:0px solid #f6f6f6; margin-bottom:12px;
		border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.5);
		border:1px solid #ccc \9;
		box-shadow:0 0px 1px rgba(0,0,0,0.5) \9;
		}
.bannerSet-rightListInsideBox { 
		border-bottom:0 !important; margin-bottom:0 !important;
		border-radius:0 0 6px 6px !important; box-shadow:none !important;
		border:0 !important;
		}
.bannerSet-rightList div.mask { width:580px; height:205px; display:block; position:absolute; top:0; left:0; overflow:hidden; border-radius:6px 0 0 6px; }
.bannerSet-rightList div.mask div.contain { height:205px; display:block; position:absolute; top:0; left:0; overflow:hidden; width:2900px; }
.bannerSet-rightList div.mask div.contain img { float:left; }
.bannerSet-rightList div.menuset { display:block; position:absolute; top:0; right:0px; width:185px; height:205px; 
		background:#fbfbfb; border-left:1px solid #ccc; border-radius:0 6px 6px 0; }
.bannerSet-rightList div.menuset a { display:block; border-bottom:1px solid #ccc; font-size:13px; padding:13px; padding-bottom:12px; cursor:pointer; }
.bannerSet-rightList div.menuset a:last-child { border-bottom:none; }
.bannerSet-rightList div.menuset a:hover { color:#ea5700; }
.bannerSet-rightList div.menuset a.active { background-color:#ea5700; color:white; }
.bannerSet-rightList div.flipcorner { width:10px; height:55px; background:url(../images/icon-bannerflip.png) no-repeat 0px 0px; position:absolute; top:0; left:-10px; z-index:22; 
	*background-position:right -2px; 
	*margin-top:2px; }

	/*COLLOR*/
	.bannerSet-rightListRed div.menuset a:hover { color:#e5002d !important; }
	.bannerSet-rightListRed div.menuset a.active { background-color:#e5002d !important; color:white !important; }
	.bannerSet-rightListRed div.flipcorner { background:url(../images/icon-bannerflip.png) no-repeat -80px 0px; }
	
	
	.bannerSet-rightListBlue div.menuset a:hover { color:#55b7e5 !important; }
	.bannerSet-rightListBlue div.menuset a.active { background-color:#55b7e5 !important; color:white !important; }
	.bannerSet-rightListBlue div.flipcorner { background:url(../images/icon-bannerflip.png) no-repeat -100px 0px; }





/* BUTTONSET GRAY */
.buttonSetGray { position:absolute; display:block; top:50px; left:10px; width:180px; padding:0; margin:0; height:60px; }
.buttonSetGray a { position:relative; display:inline-block; float:left; margin:0; padding:4px; text-align:center;
		border:1px solid #999; border-right:none; cursor:pointer;
		font-family:微軟正黑體, Arial; font-size:11px !important; color:#333 !important; line-height:14px !important; 
		
		background: -moz-linear-gradient(top, #edf4fe 0%, #b8c2cb 100%); /* FF3.6+ */
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#edf4fe),color-stop(100%,#b8c2cb)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #edf4fe 0%,#b8c2cb 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #edf4fe 0%,#b8c2cb 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #edf4fe 0%,#b8c2cb 100%); /* IE10+ */
		background: linear-gradient(to bottom, #edf4fe 0%,#b8c2cb 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf4fe', endColorstr='#b8c2cb',GradientType=0 ); /* IE6-9 */
		overflow:hidden;
	}
.buttonSetGray a:first-child { border-radius:30px 0 0 30px; padding-left:10x; padding-left:5px \9; }
.buttonSetGray a:last-child { border-radius:0 30px 30px 0; padding-right:10px; padding-right:5px \9; border-right:1px solid #999; }
.buttonSetGray a.active { background:#eaf0f9; color:#e5002d !important; }