.page-container{
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 593px;
    background-color: #fff;
    overflow: hidden;
}
#side{
	position: absolute;
	width: 227px;
	z-index: 100;
}
#main-logo{
    position: relative;
    width: 192px;
    height: 19px;
    margin-top:38px;
    margin-left: 15px;
    background: url(../img/main-logo.png) 0 0 no-repeat;
}
#main-logo a{
	display: block;
	width: 100%;
	height: 100%;
}
#side .page-icon{
	position: relative;
	width: 100%;
	height: 117px;
	margin-top: 49px;
/*	background: url(../img/page-icon-group.png) 0 0 no-repeat;*/
}
#side .main-nav{
	margin: 30px 0 0 0;
	padding: 0;
}
#side .main-nav li{
	position: block;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	border-top-style: solid;
	border-top-width: 1px;
	list-style-type: none;
	color:#425560;
}
#side .main-nav li:first-child{
	border-top:0 none;
}
#side .main-nav li a{
	color: #425560;
	text-decoration: none;
}
#side .main-nav li a:hover{
	color:#888;
}

#mobilebar{
	display: none;
}
.page-content{
	position: relative;
	padding-left: 227px;
	overflow: hidden;
	z-index: 0;
}
.page-content .title{
	position: relative;
	padding: 0;
	height: 107px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	font-size: 42px;
	line-height: 134px;
	text-indent: 170px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	/*background: url(../img/page-title-group.png) 172px 112px no-repeat;*/
	/*text-indent: -9999px;*/
}

.page-content .title-sm{
    letter-spacing: -1px;
    font-size: 32px;
}
.page-content .title-xs{
    letter-spacing: -1.2px;
    font-size: 25px;
}
.page-content .photo-wall{
	position: relative;
	top:0;
	height: 194px;
	z-index: 2;
}
.page-content .photo-wall .divider{
	position: relative;
	height: 39px;
	background: url(../img/page-photowall-divider-group.png) 885px 0 no-repeat;
	margin-top: -20px;
}
.page-content .content{
	position: relative;
	padding:50px 180px 20px 168px;
	text-align: justify;
}
.page-content .content h3{
	font-size: 28px;
	font-weight: 500;
	margin: 0;
}
.page-content .content p{
	text-indent: 30px;
}
.page-content .content p.nospace{
	text-indent: 0px;
}
.page-content .content ul , .page-content .content ol{
	padding: 0 0 0 20px;
}
.page-content .content ul li{
	list-style-type: square;
	margin: 0;
}
.page-content .content ul ol{
	padding-left: 0;
}
.page-content .content ul ol li{
	list-style-type: decimal;
	margin: 0;
}

.page-content .content h4{
	font-size: 23px;
	font-weight: normal;
	margin: 40px 0 10px 0;
	line-height: 50px;
}
.page-content .content h4 a{
	text-decoration: none;
}
.page-content .content h4 a:hover{
	text-decoration: underline;
}

.page-content .tel .icon{
    position:relative;
    display:inline-block;
    margin-left:3px;
    width: 24px;
    height: 24px;
    background:url(../img/skype.png) center center no-repeat;
}
.btn-area{
    position:absolute;
}
.btn-area a{
    display:block;
    width:100%;
    height:100%;
}

.submenu{
	position: absolute;
	display: none;
	top: 164px;
	left:227px;
	z-index: 999;
	background-color: #fff;
	padding: 20px 20px 20px 12px;
}

.submenu ul{
	padding: 0;
}

.submenu ul li{
	list-style-type: none;
	padding-left: 18px;
	background: url(../img/icon-xs.png) 0 center no-repeat;
}
.submenu ul li a{
	font-size: 14px;
	color:#5a5a5a;
	text-decoration: none;
}
.submenu ul li a:hover{
	text-decoration: underline;
}
.submenu-1 {
    top:254px;
}
.submenu-1 ul li.active{
	color: #f39800;
}
.submenu-2 ul li.active{
	color: #23ac38;
}
.submenu-2 {
    top:418px;
}
.submenu-3 ul li.active{
	color: #dfb700;
}
.submenu-3 {
    top:427px;
}
.submenu-4 ul li.active{
	color: #004ea2;
}
.submenu-4 {
    top:500px;
}
.submenu-5 ul li.active{
	color: #bd8b4d;
}
.submenu-5 {
    top:540px;
}
.submenu-6 ul li.active{
	color: #920783;
}
.submenu-6 {
    top: 550px;
}
.submenu-7 ul li.active{
	color: #e95098;
}
.submenu-7 {
    top: 620px;
}
.submenu-8 ul li.active{
	color: #00a0e9;
}
.submenu-8 {
    top: 490px;
}

/**
 *  photobox
 *
**/
.photobox{
    position:absolute;
    top:165px;
    left:50%;
    margin-left:-374px;
    width: 750px;
    z-index:999;
    display:none;
}
.photobox .close{
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height: 36px;
    z-index:99;
    cursor:pointer;
}
.photobox .img{
    position:relative;
    width: 100%;
}
.photobox .img img{
    width: 100%;
}
.photobox .txt{
    color:#fff;
    font-size:22px;
    padding: 20px;
}
.photobox.video{
    width:720px;
}
.video .cover{
    position:absolute;
    z-index:11;
}
.video{
    padding:0;
}

/**
 * 不同單元顏色設定
 */
/* 新光集團 */
#group #side .main-nav li.active{
	color:#e71a0f;
}
#group #side .main-nav li.active a{
	color:#e71a0f !important;
}
#group #side .main-nav li{
	border-top-color:#e71a0f;
}
#group .page-content .title{
	color:#e71a0f;
	border-bottom-color: #e71a0f;
	/*background-image: url(../img/page-title-group.png);*/
}
#group .page-content .photo-wall{
	background-color: #e71a0f;
}
#group .page-content .content{
	background-color: #ffebe9;
}
#group .page-content .content h3{
	color: #e71a0f;
}

/*financial*/
#financial #side .page-icon{
/*	background-image: url(../img/page-icon-financial.png);*/
}
#financial #side .main-nav li.active{
	color:#f39800;
}
#financial #side .main-nav li.active a{
	color:#f39800 !important;
}
#financial #side .main-nav li{
	border-top-color:#f39800;
}
#financial .header .home-nav li{
	border-top-color:#f39800;
}
#financial .page-content .title{
	color:#f39800;
	border-bottom-color: #f39800;
	/*background-image: url(../img/page-title-group.png);*/
}
#financial .page-content .photo-wall{
	background-color: #f39800;
}
#financial .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-financial.png);
}
#financial .page-content .content{
	background-color: #fdedd3;
}
#financial .page-content .content h3{
	color: #f39800;
}
#financial .page-content .content h4 , #financial .page-content .content h4 a{
	color: #f39800;
}
#financial .photobox .txt{
    background-color:#fdd000;
}
#financial .photobox .close{
    background-image:url(../img/photobox/financial_close.png);
}
/*energy*/
#energy #side .page-icon{
	/*	background-image: url(../img/page-icon-energy.png);*/
}
#energy #side .main-nav li.active{
	color:#23ac38;
}
#energy #side .main-nav li.active a{
	color:#23ac38 !important;
}
#energy #side .main-nav li{
	border-top-color:#23ac38;
}
#energy .header .home-nav li{
	border-top-color:#23ac38;
}

#energy .page-content .title{
	color:#23ac38;
	border-bottom-color: #23ac38;
	/*background-image: url(../img/page-title-group.png);*/
}
#energy .page-content .photo-wall{
	background-color: #23ac38;
}
#energy .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-energy.png);
}
#energy .page-content .content{
	background-color: #d3eed7;
}
#energy .page-content .content h3{
	color: #23ac38;
}
#energy .page-content .content h4 , #energy .page-content .content h4 a{
	color: #23ac38;
}


/*security*/
#security #side .page-icon{
	/*background-image: url(../img/page-icon-security.png);*/
}
#security #side .main-nav li.active{
	color:#fdd000;
}
#security #side .main-nav li.active a{
	color:#fdd000 !important;
}
#security #side .main-nav li{
	border-top-color:#fdd000;
}
#security .header .home-nav li{
	border-top-color:#fdd000;
}
#security .page-content .title{
	color:#fdd000;
	border-bottom-color: #fdd000;
	/*background-image: url(../img/page-title-group.png);*/
}
#security .page-content .photo-wall{
	background-color: #fdd000;
}
#security .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-security.png);
}
#security .page-content .content{
	background-color: #fff9dd;
}
#security .page-content .content h3{
	color: #fdd000;
}
#security .page-content .content h4 , #security .page-content .content h4 a{
	color: #fdd000;
}
#security .photobox .txt{
    background-color:#fdd000;
}
#security .photobox .close{
    background-image:url(../img/photobox/sk_security_close.png);
}

/*estate*/
#estate #side .page-icon{
/*	background-image: url(../img/page-icon-estate.png);*/
}
#estate #side .main-nav li.active{
	color:#004ea2;
}
#estate #side .main-nav li.active a{
	color:#004ea2 !important;
}
#estate #side .main-nav li{
	border-top-color:#004ea2;
}
#estate .header .home-nav li{
	border-top-color:#004ea2;
}

#estate .page-content .title{
	color:#004ea2;
	border-bottom-color: #004ea2;
	/*background-image: url(../img/page-title-group.png);*/
}
#estate .page-content .photo-wall{
	background-color: #004ea2;
}
#estate .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-estate.png);
}
#estate .page-content .content{
	background-color: #ccdcec;
}
#estate .page-content .content h3{
	color: #004ea2;
}
#estate .page-content .content h4 , #estate .page-content .content h4 a{
	color: #004ea2;
}

/*manufacturing*/
#manufacturing #side .page-icon{
	/*background-image: url(../img/page-icon-manufacturing.png);*/
}
#manufacturing #side .main-nav li.active{
	color:#bd8b4d;
}
#manufacturing #side .main-nav li.active a{
	color:#bd8b4d !important;
}
#manufacturing #side .main-nav li{
	border-top-color:#bd8b4d;
}
#manufacturing .header .home-nav li{
	border-top-color:#bd8b4d;
}
#manufacturing .page-content .title{
	color:#bd8b4d;
	border-bottom-color: #bd8b4d;
	/*background-image: url(../img/page-title-group.png);*/
}
#manufacturing .page-content .photo-wall{
	background-color: #bd8b4d;
}
#manufacturing .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-manufacturing.png);
}
#manufacturing .page-content .content{
	background-color: #f2e8db;
}
#manufacturing .page-content .content h3{
	color: #bd8b4d;
}
#manufacturing .page-content .content h4 , #manufacturing .page-content .content h4 a{
	color: #bd8b4d;
}

/*health*/
#health #side .page-icon{
	/*background-image: url(../img/page-icon-health.png);*/
}
#health #side .main-nav li.active{
	color:#920783;
}
#health #side .main-nav li.active a{
	color:#920783 !important;
}
#health #side .main-nav li{
	border-top-color:#920783;
}
#health .header .home-nav li{
	border-top-color:#920783;
}
#health .page-content .title{
	color:#920783;
	border-bottom-color: #920783;
	/*background-image: url(../img/page-title-group.png);*/
}
#health .page-content .photo-wall{
	background-color: #920783;
}
#health .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-health.png);
}
#health .page-content .content{
	background-color: #e9cde6;
}
#health .page-content .content h3{
	color: #920783;
}
#health .page-content .content h4 , #health .page-content .content h4 a{
	color: #920783;
}

/*consumer*/
#consumer #side .page-icon{
/*	background-image: url(../img/page-icon-consumer.png);*/
}
#consumer #side .main-nav li.active{
	color:#e95098;
}
#consumer #side .main-nav li.active a{
	color:#e95098 !important;
}
#consumer #side .main-nav li{
	border-top-color:#e95098;
}
#consumer .header .home-nav li{
	border-top-color:#e95098;
}

#consumer .page-content .title{
	color:#e95098;
	border-bottom-color: #e95098;
	/*background-image: url(../img/page-title-group.png);*/
}
#consumer .page-content .photo-wall{
	background-color: #e95098;
}
#consumer .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-consumer.png);
}
#consumer .page-content .content{
	background-color: #fbdcea;
}
#consumer .page-content .content h3{
	color: #e95098;
}
#consumer .page-content .content h4 , #consumer .page-content .content h4 a{
	color: #e95098;
}

/*philanthropy*/
#philanthropy #side .page-icon{
	/*background-image: url(../img/page-icon-philanthropy.png);*/
}
#philanthropy #side .main-nav li.active{
	color:#00a0e9;
}
#philanthropy #side .main-nav li.active a{
	color:#00a0e9 !important;
}
#philanthropy #side .main-nav li{
	border-top-color:#00a0e9;
}
#philanthropy .header .home-nav li{
	border-top-color:#00a0e9;
}

#philanthropy .page-content .title{
	color:#00a0e9;
	border-bottom-color: #00a0e9;
	/*background-image: url(../img/page-title-group.png);*/
}
#philanthropy .page-content .photo-wall{
	background-color: #00a0e9;
}
#philanthropy .page-content .photo-wall .divider{
	background-image:url(../img/page-photowall-divider-philanthropy.png);
}
#philanthropy .page-content .content{
	background-color: #ccecfb;
}
#philanthropy .page-content .content h3{
	color: #00a0e9;
}
#philanthropy .page-content .content h4 , #philanthropy .page-content .content h4 a{
	color: #00a0e9;
}
#philanthropy .photobox .txt{
    background-color:#68c7f2;
}
#philanthropy .photobox .close{
    background-image:url(../img/photobox/sk_life_foundation_close.png);
}
#philanthropy .t8-8{
    font-size:28px;
    letter-spacing:-1px;
}
/* END */

@media only screen and (max-width: 767px){
	.poly,.helpline-l,.helpline-r{
		display: none;
	}
	#side{
		left: -150px;
		width: 150px;
		background-color: #fff;
	}
	.page-content .photo-wall{
		height: auto;
	}
	.page-content .photo-wall img {
		width: 100%;
	}
	.page-content .photo-wall .divider{
		display: none;
	}
	.page-content{
		padding-left: 0;
	}
	.content{
		min-height: 405px;
	}
	.page-content .content{
		padding: 10px;
		text-align: left;
	}
	#mobilebar{
		display: block;
		width: 78px;
		height: 78px;
		background-color: #e71a0f;
		overflow: hidden;
	}
	#mobilebar a{
		display: block;
		text-indent: -9999px;
		height: auto;
		padding: 15px 20px;
		width: auto;
	}
	.page-content .title{
		font-size: 20px;
		text-indent: 0;
		line-height: 30px;
		padding: 10px;
		height: auto;
	}
    .page-content .title-sm , .page-content .title-xs{
        font-size: 20px;
    }

	#main-logo{
    	width: 50px;
    	margin: 30px auto 0;
	}
	#side .page-icon{
		margin-top: 20px;
		background-position: -50px 0;
	}
	#side .main-nav{
		margin: 10px 0 0 0;
		padding: 0;
	}
	#side .main-nav li{
		text-align: left;
		text-indent: 10px;
		font-size: 14px;
		line-height: 40px;
		color:#425560;
	}
	.submenu{
		left: 150px;
	}
	.submenu ul li {
		line-height: 15px;
		margin-bottom: 5px;
		background-position: 0 0;
	}
    .photobox{
        position:absolute;
        top:50px;
        left:0;
        margin-left:0;
        width: 100%;
        z-index:999;
        display:none;
    }
    .photobox.video{
        width:100%;
    }
    .photobox .cover img{
        width:100%;
    }
    .video video{
        width:100%;
    }
}
.poly {
	background: #eee none repeat scroll 0 0;
	display: block;
	height: 26px;
	transform: rotate(45deg);
	width: 26px;
	position: absolute;
	z-index:9;
}
.group0:hover,.group0.active{
	background: #e71a0f;
}
.group1:hover,.group1.active{
	background: #f39800;
}
.group2:hover,.group2.active{
	background: #23ac38;
}
.group3:hover,.group3.active{
	background: #fdd000;
}
.group4:hover,.group4.active{
	background: #004ea2;
}
.group5:hover,.group5.active{
	background: #bd8b4d;
}
.group6:hover,.group6.active{
	background: #920783;
}
.group7:hover,.group7.active{
	background: #e95098;
}
.group8:hover,.group8.active{
	background: #00a0e9;
}
.group0 {
	left: 109px;
	top: 5px;
}
.group1 {
	left: 88px;
	top: 26px;
}
.group2 {
	left: 130px;
	top: 26px;
}
.group3 {
	left: 67px;
	top: 47px;
}
.group4 {
	left: 109px;
	top: 47px;
}
.group5 {
	left: 151px;
	top: 47px;
}
.group6 {
	left: 88px;
	top:  68px;
}
.group7 {
	left: 130px;
	top: 68px;
}
.group8 {
	left: 109px;
	top:89px;
}
#group .helpline-r,#group .helpline-l{
	background: #e71a0f;
}
#financial .helpline-r,#financial .helpline-l{
	background: #f39800;
}
#energy .helpline-r,#energy .helpline-l{
	background: #23ac38;
}
#security .helpline-r,#security .helpline-l{
	background: #fdd000;
}
#estate .helpline-r,#estate .helpline-l{
	background: #004ea2;
}
#manufacturing .helpline-r,#manufacturing .helpline-l{
	background: #bd8b4d;
}
#health .helpline-r,#health .helpline-l{
	background: #920783;
}
#consumer .helpline-r,#consumer .helpline-l{
	background: #e95098;
}
#philanthropy .helpline-r,#philanthropy .helpline-l{
	background: #00a0e9;
}
.header{
	height: 175px;
	background: #e2231a;
}
.headerbg {
	height: 112px;
	background:#e2231a url("../img/headerbackg.svg") no-repeat scroll right top;
	position: relative;
	top:12px;
}
.home-nav ul{
	text-align: left;
	padding-left: 45px;
}

nav.home-nav ul li {
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
}
nav.home-nav ul li a {
    color: hsla(202, 19%, 32%, 1);
    text-decoration: none;
    margin-left:20px;
}
nav.home-nav ul li:first-child a{
 margin-left: 0;
}


#home-nav-item1 .active , #home-nav-item1 a:hover{
    color:hsla(38, 100%, 48%, 1);
}
#home-nav-item2 .active , #home-nav-item2 a:hover{
    color:hsla(129, 66%, 41%, 1);
}
#home-nav-item3 .active , #home-nav-item3 a:hover{
    color:hsla(49, 100%, 50%, 1);
}
#home-nav-item4 .active , #home-nav-item4 a:hover{
    color:hsla(211, 100%, 32%, 1);
}
#home-nav-item5 .active , #home-nav-item5 a:hover{
    color:hsla(33, 46%, 52%, 1);
}
#home-nav-item6 .active , #home-nav-item6 a:hover{
    color:hsla(306, 91%, 30%, 1);
}
#home-nav-item7 .active , #home-nav-item7 a:hover{
    color:hsla(332, 78%, 61%, 1);
}
#home-nav-item8 .active, #home-nav-item8 a:hover{
    color:hsla(199, 100%, 46%, 1);
}
.helpline-l ,.helpline-r{
	height: 2px;
	position: absolute;
	top: 58px;
	z-index: 8;
}
.helpline-l{
	width: 90px;
	left: 0;
}
.helpline-r{
	width: 62px;
	left:165px;
}
@media only screen and (max-width: 990px){
	.page-content .content{
		padding: 30px;
	}
}
@media only screen and (max-width: 767px){
	.header{
		height:90px;
	}
	#main-logo-r {
		background-size: contain;
		height: 30px;
		left: calc(50% - 123px);
		width: 253px;
		top: 35px;;
	}
	.headerbg{
		height: 90px;
		top:0;
		background-size: 100% 90%;
		background-position:5px 18px;
	}
	#mobilebar{
		position: absolute;
		top:0;
		left:0;
	}
	.home-nav ul{
		padding-left: 0;
	}
	nav.home-nav ul li:first-child a {
		margin-left: 20px;
	}
	nav.home-nav ul li {
		border-top: 1px solid;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		width: 100%;
	}
	.submenu{
		left: 200px;
	}
	.submenu-1 {
		top:90px;
	}
	.submenu-2 {
		top:131px;
	}
	.submenu-3 {
		top:170px;
	}
	.submenu-4 {
		top:210px;
	}
	.submenu-5 {
		top:253px;
	}
	.submenu-6 {
		top: 294px;
	}
	.submenu-7 {
		top: 332px;
	}
	.submenu-8 {
		top: 220px;
	}
	#main-logo-r {
		background-size: contain;
		height: 30px;
		left: calc(50% - 90px);
		width: 180px;
		top: 35px;;
	}
}
