@charset "utf-8";
/* CSS Document */
*:active { -webkit-tap-highlight-color: transparent; }
html, body { font-family: Arial, Helvetica, sans-serif, "微軟正黑體", "Microsoft JhengHei", "微軟雅黑體", "Microsoft YaHei", "蘋果儷中黑", "Apple LiGothic Medium"; font-size:16px; }
body { overflow-x:hidden; }
.en { font-family: 'Open Sans', sans-serif; }
#header .header, #content, #footer { max-width:1280px; min-width:320px; margin:0 auto; }
#header { position:fixed; z-index:999; width:100%; }
#header .header { overflow:hidden; background-color:#EBEBEB; }
#header .header a { color:#999; }
#header .header a:hover { color:#054BA3; }
#header .header .logo { float:left; }
#header .header .logo a { display:block; background:url(../images/csop-logo.png) left top no-repeat; width:200px; height:50px; margin-top:15px; margin-left:50px; }
#header .header ul.menu { float:right; overflow:hidden; zoom:1; font-size:16px; }
#header .header ul.menu li { float:left; margin-right:30px; }
#header .header ul.menu li a { display:block; height:48px; padding-top:30px; text-decoration:none; text-align:center; font-weight:100; }
#header .header ul.menu li a.active, #header .header ul.menu li a:hover { border-bottom:#054BA3 3px solid; height:48px; font-weight:600; color:#2660ad; }
#header .header .lang { float:right; font-size:16px; }
#header .header .lang a { display:block; padding:3px 30px; margin-top:25px; border-left:#AAA 1px solid; text-decoration:none; text-align:center; }
.tc #header .header .lang a {  margin-top:28px; }
#header .header .lang a:hover { font-weight:bold; }
#content { padding-top:82px; }
#content .box { width:100%; overflow:hidden; background-repeat:no-repeat; }
#content .box .video img { width:100%; height:auto; }
#content .box .con { padding:4%; overflow:hidden; zoom:1; background-repeat:no-repeat; }
#content .box .left { float:left; width:49%; }
#content .box .right { float:right; width:49%; }
#content .box .logo { width:120px; height:120px; background-position:left top; background-repeat:no-repeat; }
#content .box h2 { font-size:48px; margin:30px 0; font-weight:100; }
#content .btn { margin-top:60px; margin-right:3%; width:200px; font-size:14px; float:left; }
#content .btn.last { margin-right:0; }
#content .btn a { display:block; padding:14px 0px; text-align:center; text-decoration:none; border-style:solid; border-width:2px; color:#2361ad; border-color:#2361ad; }
#content .main-btn { position:absolute; top:65%; left:5%; width:100%; }
#content .box .show-btn { margin-top:20px; cursor:pointer; }
#content .box .show-btn a { display:block; width:60px; height:62px; background-position:0px 0px; background-repeat:no-repeat; }
#content .box .show-btn a.active { background-position:0px -64px; }
#content .box .hideText { display:none; }
#content .box .hideText, #content .box .mvideo { padding:0 4% 4% 4%; overflow:hidden; }
#content .box h3 { font-weight:600; margin-bottom:20px; }
#content .box h4 { margin-bottom:10px; margin-top:20px; }
#content .box p.remark { font-size:12px; margin-top:5px; }
#content .box .img { cursor:pointer; }
#content .box .img img { width:100%; }
#content .box p { margin:10px 0; line-height:26px; }
#content .box table { margin-top:20px; }

#content #box1 { background-color:#2361ad; }
#content #box1 .logo { background-image:url(../images/csop-icon1.png); }
#content #box1 h2 { color:#FFF; }
#content #box1, #content #box1 .con { background-position:right bottom; }
#content #box1 .con { background-image:url(../images/csop-bg1.jpg); }
#content #box1 .btn a { color:#FFF; border:#FFF 1px solid; }
#content #box1 .text { color:#B9DEF1; }
#content #box1 .show-btn a { background-image:url(../images/arrow_wht.png); }
#content #box1 .hideText { color:#B9DEF1; }

#content #box2 { background-color:#59b4f4; }
#content #box2 .logo { background-image:url(../images/csop-icon2.png); }
#content #box2 ul { list-style:disc; font-weight:bold; }
#content #box2 ul li { margin-left:10px; padding:10px 0; }
#content #box2 h2 { color:#2361ad; }
#content #box2, #content #box2 .con { background-position:left bottom; }
#content #box2 .con { background-image:url(../images/csop-bg2.jpg); }
#content #box2 .btn a { color:#2361ad; border-color:#2361ad; }
#content #box2 .text { color:#2361ad; }
#content #box2 .show-btn a { background-image:url(../images/arrow_blu.png); }
#content #box2 .hideText { color:#2361ad; }
#content #box2 p.remark { color:#FFF; }
#content #box2 h4 { font-weight:bold; }

#content #box3 { background-color:#FFF; }
#content #box3 .logo { background-image:url(../images/csop-icon3.png); }
#content #box3 h2 { color:#585858; }
#content #box3, #content #box3 .con { background-position:right bottom; }
#content #box3 .con { background-image:url(../images/csop-bg5.jpg); }
#content #box3 .btn a { color:#2361ad; border-color:#2361ad; }
#content #box3 .text { color:#585858; }
#content #box3 .show-btn a { background-image:url(../images/arrow_navy.png); }
#content #box3 .hideText { color:#585858; }
#content #box3 h4 { font-weight:bold; color:#2660ad; }

#content #box4 { background-color:#D4D4D4; }
#content #box4 .logo { background-image:url(../images/csop-icon4.png); }
#content #box4 h2 { color:#585858; }
#content #box4, #content #box4 .con { background-position:left bottom; }
#content #box4 .con { background-image:url(../images/csop-bg4.jpg); }
#content #box4 .btn a { color:#585858; border-color:#585858; }
#content #box4 .text { color:#585858; }
#content #box4 .show-btn a { background-image:url(../images/arrow_wht.png); }
#content #box4 .hideText { color:#B9DEF1; }

#footer .footer { overflow:hidden; zoom:1; padding:30px; padding-bottom:60px; background-color:#333; color:#CCC; font-size:12px; }
#footer .footer .left { float:left; }
#footer .footer .left ul { overflow:hidden; margin-top:-10px; }
#footer .footer .left ul li { float:left; margin-top:10px; }
#footer .footer .left ul li a { display:block; border-right:#CCC 1px solid; padding:0 15px; color:#CCC; text-decoration:none; }
#footer .footer .left ul li a.last { border:none; }
#footer .footer .left ul li a.first { padding-left:0; }
#footer .footer .right { float:right; }
#footer .footer .con { margin-bottom:20px; }
#footer .footer .con h3 { margin-bottom:10px; font-weight:bold; }
#footer .footer .con p { margin:5px 0; line-height:18px; }

strong { font-weight:bold; }

.panel {
    position: fixed;
    left: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
	background-color:#FFF;
}

#menu { z-index:9; background-color:#666; }

#menu > ul { margin:100px 0 0 20px; }

#menu ul ul { margin:0 0 0 10px; }

#menu ul li { font-size:16px; }

#menu ul li a { color:#FFF; text-decoration:none; display:block; padding:5px; }

#menu ul li a.active, #menu ul li a:hover { color:#3A9CCD; }

#header .header a.menu-link { height:40px; padding:20px 0; padding-right:10px; float:right; }

#header .header a.menu-link img { height:100%; }

.overlay { display:none; }

.overlay .b-close { position:absolute; top:1%; right:1%; background:url(images/close.png) left top no-repeat; width:36px; height:36px; cursor:pointer; z-index:1; }

#privacy, #statement, #pop_up2, #why-etf, #why-csop { width:90%; max-width:1200px; }
#privacy, #statement, #why-etf, #why-csop { background-color:#FFF; }

#privacy .groupTitle, #statement .groupTitle, #why-etf .groupTitle, #why-csop .groupTitle { font-weight:bold; font-size:18px; }
#why-etf .groupTitle, #why-csop .groupTitle { margin-bottom:10px; }
#privacy ul, #statement ul, #why-etf ul, #why-csop ul { list-style:disc; margin-left:20px; }
#why-etf ul, #why-csop ul { margin-bottom:10px; }
#why-etf h4, #why-csop h4 { margin-bottom:5px; font-weight:bold; color:#2361ad; }
#privacy ul li, #statement ul li, #why-etf ul li, #why-csop ul li { margin-bottom:5px; }

#why-csop .ar { padding-right:152px; background-position:right center; background-repeat:no-repeat; max-width:300px; margin:0 auto; }

#why-csop .asianinvestor { background-image:url(../images/asianinvestor2.png); min-height:130px; margin-top:40px; margin-bottom:20px; }

#why-csop .bestofbest { background-image:url(../images/bestofbest2.png); min-height:130px; }

#why-csop .bestofbest p { margin:5px 0; }

.overlay .con { padding:5%; }

.overlay .con h3 { font-weight:bold; margin-bottom:20px; font-size:18px; }

.overlay .con p { margin:15px 0; }

.overlay .con img { width:100%; }

.desktop { display:block; }
.mobile { display:none; }

/*******ETF*******/
.importantInfo{
    margin: 2px 0px;
    border: 1px solid #A7A9AC;
	font-size:14px;
}
.importantInfo h3{
    padding: 6px 15px;
    border-bottom: 1px solid #A7A9AC;
}
.importantInfo .importantInfoContent
{
    padding: 6px 15px;
    height: 80px;
    overflow-y: scroll;
}
.importantInfo .importantInfoContent p {
	margin:20px 0;	
}
.importantInfo .importantInfoContent ul{
	list-style:disc;
	margin-left:20px;
}
.importantInfo .importantInfoContent li{
    margin-bottom:10px;
}

.real-mobile { display:none; }

.btn-box { width:100%; background-color:#CCC; }
.btn-box .con { padding:20px 0; overflow:hidden; width:535px; margin:0 auto; }
.btn-box .con .left { float:left; text-align:center; }
.btn-box .con .right { float:left;  text-align:center; }

@media only screen and (max-device-width: 1024px) {
	.real-mobile { display:block; }
}

@media only screen and (max-width: 970px) {
	.desktop { display:none; }
	.mobile { display:block; }
	#content .box .left, #content .box .right { width:100%; }
	#content .box .hideText .right { margin-top:20px; }
	#content .box .con .video { margin-top:40px; }
	#header .header .logo a { margin-left:10px; }
	#content .box .con { padding:30px 5%; }
	#content .box .hideText, #content .box .mvideo { padding:0 5% 30px 5%; }
	#content .box, #content .box .con { background-size:70%; }
	#content .btn { margin-top:30px; }
	.wrap { position: relative; }
	#footer .footer .left, #footer .footer .right { width:100%; }
	#footer .footer .left { margin-left:-15px; }
	#footer .footer .right { margin-top:10px; }
	#footer .footer .left ul li a.first { padding-left:15px; }
	#content #box1 .con { background-image:none; }
	#content #box2 .con { background-image:none; }
	#content #box3 .con { background-image:none; }
	#content #box4 .con { background-image:none; }
	#content #box1 { background-image:url(../images/csop-bg1.jpg); }
	#content #box2 { background-image:url(../images/csop-bg2.jpg); }
	#content #box3 { background-image:url(../images/csop-bg5.jpg); }
	#content #box4 { background-image:url(../images/csop-bg4.jpg); }
}

@media only screen and (max-width: 580px) {
	.btn-box .con { width:100%; }
	.btn-box .con .left, .btn-box .con .right { width:100%; }
}

@media only screen and (max-width: 400px) {
	#content .box h2 { font-size:32px; }
}