*:facus {
	outline: none;
}

html, body {
    min-width: 1200px;
    min-height: 100%;
	margin: 0px auto;
	padding: 0px;
	font-family: Arial;
	text-align: justify;
	cursor: default;
}

a {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
    color: #008aff;
	outline: 0;
}

img {
	border: 0px;
}

.clear {
	height: 0px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

select {
    font-family: Arial;
}

select option {
    padding: 2px 10px;
}

.noBorder {
    border: none !important;
}

/*---------- header (start) ----------*/
#headerField {
	width: 100%;
    height: 110px;
	margin: 0px;
	padding: 0px 0px 1px;
	border: solid 1px #ccc;
	border-width: 0px 0px 1px 0px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    z-index: 9;
    background: #fff;
}

#header {
	width: 1200px;
	height: 110px;
	margin: 0 auto;
	padding: 0;
	position: relative;
    text-align: center;
}

.headerLogo {
    padding: 10px 5px 5px;
    display: inline-block;
}

.headerLogo a .logo {
	height: 55px;
}

.headerFocus {
    display: inline;
    position: absolute;
}

.headerFocusL {
    top: 3px;
    left: 0;
    text-align: left;
}

.headerFocusR {
    top: 3px;
    right: 0;
    text-align: right;
}

.headerFocus .block {
    padding: 5px;
}

.headerFocus .block input[type="text"] {
    width: 170px;
    margin: 4px 5px 0 0;
    float: left;
    border: none;
    border-bottom: solid 1px #c0c0c0;
    outline: none;    
}

.headerFocus .block input[type="text"]+i {
    margin: 7px 0 0 4px;
    float: left;
}

.headerFocus .block .searchNotePC {
    width: 130%;
    padding: 5px 10px;
    display: none;
    position: absolute;
    top: 36px;
    border: solid 1px #c0c0c0;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
    box-shadow: 0 0 10px #c0c0c0;
}

.headerFocus .block .searchBtn, .headerFocus .block .switchLang, .headerFocus .block .contact, .headerFocus .block .paper {
    font-size: 12px;
    color: #808080;
    cursor: pointer;
}

.headerFocus .block .switchLang {
    font-family: Microsoft JhengHei;    
}

.headerFocus .block .searchBtn:hover, .headerFocus .block .switchLang:hover, .headerFocus .block .contact:hover, .headerFocus .block .paper:hover {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

.headerFocus .block .divide {
    padding: 0 10px;
    font-size: 12px;
    color: #e8e8e8;    
}

.headerFocus .socialIcon {
    padding: 0 8px;
    vertical-align: top;
    font-size: 22px;
}

.headerFocus .socialIcon > i {
    padding: 0 0 10px;
    color: #808080;
    transition: 0.5s transform;
}

.headerFocus .socialIcon:hover .fa-facebook-square {
    color: #3d5999;
    text-shadow: none;
    transform: scale(1.5);
}

.headerFocus .socialIcon:hover .fa-youtube {
    color: #ff0000;
    text-shadow: none;
    transform: scale(1.5);
}

.headerFocus .socialIcon:hover .fa-weixin {
    color: #0bad13;
    text-shadow: none;
    transform: scale(1.5);
}

.headerFocus .socialIcon .fa-weixin + .weixinQR{
    width: 135px;
    height: 0;
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 101;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: 0.3s height;
}

.headerFocus .socialIcon:hover .fa-weixin + .weixinQR{
    height: 135px;
}

.headerMenu {
    width: 100%;
    padding-left: 115px;
    box-sizing: border-box;
	position: absolute;
    top: 78px;
    border-top: solid 0.5px #c0c0c0;
	text-align: center;
    z-index: 100;
}

.headerMenu ul {	
	margin: 0;
    padding: 0;
	float: left;
	list-style-type: none;
}

.headerMenu ul li {
    position: relative;
	text-align: center;    
}

.headerMenu ul li span {
	padding: 9px 45px 10px;
	display: block;
    font-weight: bold;
    font-size: 14px;
    color: #505050;
}

.headerMenu ul li:hover span {
    color: #303030;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.headerMenu ul li span .newSign {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 15%;
    font-size: 12px;
    color: #cc0000;
}

.headerMenu ul li ul {
    width: 100%;
	height: 0;
	margin: -5px auto 0;    
	padding: 1px 0 0;
	clear: both;
	visibility: hidden;
    display: inline-block;
    border: solid 1px #c0c0c0\0;
	border-top: #b00000 3px solid;	
	border-radius: 1px;
	box-shadow: 0px 0px 10px #c0c0c0;
	background: rgba(255,255,255,0.95);
    background: #ffffff \9\0;
    
    min-width: 100%;
    position: absolute;
    left: 0;
}

.headerMenu > ul:nth-child(1) > li > ul {
    width: 220px;
    margin-left: -30px;
}

.headerMenu > ul:nth-child(3) > li > ul {
    width: 210px;
    margin-left: -30px;
}

.headerMenu ul:nth-child(3) li ul li ul {
    width: 240px;
    /* left: -100%; */
}

.headerMenu > ul:nth-child(5) > li > ul {
    width: 255px;
    margin-left: -40px;
}

.headerMenu > ul:nth-child(6) > li > ul {
    width: 200px;
    margin-left: -15px;
}

.headerMenu ul li ul li {
    padding: 10px 15px;
    box-sizing: border-box;
    visibility: inherit;
	font-size: 14px;
    color: #505050;
}

.headerMenu ul li ul li span {
    padding: 0;
    font-weight: normal;
    font-size: 14px;
    color: #505050;
}

.headerMenu ul li ul a:hover li {
	color: #fff;	
	background: #a0a0a0;
}

.headerMenu ul li:hover > ul {
	height: auto;
	visibility: visible; 
    display: inline-block;
}

.headerMenu ul li ul li ul {
    margin-left: 0;
    display: inline;
    position: absolute;
    top: 1px;
    left: 100%;
}

/*
.extendMenu {
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0 0;
    background: #ccc;
}

.extendMenu .cover {
    width: 160px;
    height: 160px;
    margin: 0 0 20px 0;
    box-sizing: border-box;
    border: solid 1px #c0c0c0;
}

.extendMenu .mainTitle {
    padding: 10px 25px 20px;
    box-sizing: border-box;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
}

.extendMenu .mainTitle a {
    color: #39b54a;	
}

.extendMenu .mainTitle .esgHome {
    width: 25px;
}

.extendMenu .mainTitle .reportLink {
    margin: -5px 0 0 5px;
    display: inline-block;
    padding: 6px 15px 4px;
    border-radius: 20px;
    vertical-align: middle;
    font-size: 16px;
    color: #fff;
    background-color: #39b54a;
}

.extendMenu .mainTitle .reportLink:hover {
    color: #39b54a;
    background-color: #e0e0e0;
}

.extendMenu .menuGroup {
    width: 16%;
    margin: 0 0 30px;
    padding: 0 10px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
}

.extendMenu .menuGroup .cover {
    display: none;
}

.extendMenu .menuGroup:nth-child(2) .cover {
    background: url(../img/aboutCover_07.jpg) center no-repeat;
    background-size: cover;
}

.extendMenu .menuGroup:nth-child(3) .cover {
    background: url(../img/aboutCover_08.jpg) center no-repeat;
    background-size: cover;
}

.extendMenu .menuGroup:nth-child(4) .cover {
    background: url(../img/aboutCover_06.jpg) center no-repeat;
    background-size: cover;
}

.extendMenu .menuGroup:nth-child(5) .cover {
    background: url(../img/aboutCover_05.jpg) center no-repeat;
    background-size: cover;
}

.extendMenu .menuGroup:nth-child(6) .cover {
    background: url(../img/aboutCover_04.jpg) center no-repeat;
    background-size: cover;
}

.extendMenu .menuGroup:nth-child(7) .cover {
    background: url(../img/aboutCover_03.jpg) center no-repeat;
    background-size: cover;
}

.extendMenu .menuGroup .title {
    padding: 0 10px 10px 0;
    text-align: left;
    font-weight: bold;
}

.extendMenu .menuGroup a {
    padding: 4px 0;
    display: block;
    text-align: left;
    font-size: 13px;
    color: #505050;
}

.extendMenu .menuGroup a:hover {
    color: #b00000;	
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.25);
}
*/

/*
.headerMenu:lang(en) ul:nth-child(8) li ul li:nth-child(1) ul a:nth-child(1),
.headerMenu:lang(en) ul:nth-child(8) li ul li:nth-child(1) ul a:nth-child(2),
.headerMenu:lang(en) ul:nth-child(8) li ul li:nth-child(1) ul a:nth-child(5) {
    display: none;
}
*/

.phoneMenuField {
	width: 100%;
	display: none;
}

.phoneMenuField .hamburger {
    width: 30px;
    height: 30px;    
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 10px;    
    color: #b00000;
}

.phoneMenuField .hamburger .hamburOpen {
    margin: 0 0 0 -14px;
    padding: 0;
    position: absolute;
    font-size: 32px;
    transform-origin: center;
}

.phoneMenuField .hamburger .hamburClose {
    margin: -2px 0 0 -14px;
    padding: 0;
    position: absolute;
    font-size: 36px;
    opacity: 0;
    transform-origin: center;
}

.phoneMenuField .hamburger .hamburOpenAni {
    animation: hamburOpen 0.3s ease-in-out 0.0s 1 alternate forwards;
}

.phoneMenuField .hamburger .hamburCloseAni {
    animation: hamburClose 0.3s ease-in-out 0.0s 1 alternate forwards;
}

@keyframes hamburOpen {    
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(180deg);
    }
}

@keyframes hamburClose {    
    0%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.phoneMenuField #phoneMenu {
	width: 100%;
	margin: -4px 0 0;
    box-sizing: border-box;
    display: none;
	position: absolute;
    left: 0;    
	z-index: 8;
    overflow: auto;
	background: #f0f0f0;
}

.phoneMenuField #phoneMenu #phoneAccordionMenu {
    padding: 15px 0 0;
}

.phoneMenuField #phoneAccordionMenu h3 {
    padding: 25px 0;
    text-align: center;
}    

.phoneMenuField #phoneAccordionMenu div a div {
    padding: 15px 0;
    font-size: 18px;
    color: #808080;
}

.phoneMenuField #phoneAccordionMenu .subMenu {        
    padding: 15px 0 10px;
    border-bottom: dotted 1px #808080;
}

.phoneMenuField #phoneAccordionMenu .subMenu > .title {
    padding: 10px 0;
    font-weight: bold;
    font-size: 18px;
    color: #808080;
}

.phoneMenuField #phoneAccordionMenu .subMenu > .title > a {
    width: 100%;
    float: none;
}

.phoneMenuField #phoneAccordionMenu .subMenu a {
    width: 33%;
    float: left;
    color: #808080;
}

.phoneMenuField #phoneAccordionMenu .subMenu .fullWidth {
    width: 100%;
}

.phoneMenuField #phoneAccordionMenu .subMenu a div {
    padding: 10px 0;
    font-size: 14px;
}

.phoneMenuField #phoneFn {
    width: 92%;
    margin: 0 auto;
    padding: 10px 0;
    border-top: dotted 1px #d0d0d0;
    table-layout: fixed;        
}    

.phoneMenuField #phoneFn tr td {
    padding: 15px 0;
    color: #808080;
    font-size: 14px;
}

.phoneMenuField #phoneFn tr:nth-child(1) td {
    position: relative;
}

.phoneMenuField #phoneFn input[type="text"] {
    width: 70%;
    padding: 5px 0;
    border: none;
    border-bottom: solid 1px #808080;
    font-size: 16px;
    background: transparent;
    outline: none;
}

.phoneMenuField #phoneFn .searchBtn {
    padding: 0 0 0 20px;
}

.phoneMenuField #phoneFn .searchNoteMobi {
    width: 90%;
    margin: 0 5%;
    padding: 10px 15px;
    box-sizing: border-box;
    display: none;
    position: absolute;
    bottom: 100%;
    text-align: left;
    border: solid 1px #c0c0c0;
    border-radius: 3px;
    background: #d0d0d0;
    box-shadow: 0 0 10px #c0c0c0;
}

.phoneMenuField #phoneFn td a {
    color: #808080;
}

.phoneMenuField #phoneFn td .socialIcon {
    font-size: 30px;
}
/*---------- header (end) ----------*/

/*---------- footer (start) ----------*/
#footerField {
	width: 100%;
	margin: 3px 0 0;
	padding: 0;
	border: solid 1px #ccc;
	border-width: 1px 0 0;	
	background: #b0b0b0;
}

#footer .content {
	width: 1200px;
	height: 50px;
	margin: 0 auto;
    text-align: center;
}

#footer .content .copyright {
	margin: 12px 0 0;
    line-height: 1.6em;
    font-size: 14px;
	color: #303030;
}

#footer .content .copyright a{
    color: #303030;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #footer .content .copyright {
        transform: scale(0.9);
    }
}
/*---------- footer (end) ----------*/

/*---------- container (start) ----------*/
.containerDivide {
	height: 1px;
	margin: 3px 0 1px;	
	line-height: 1px;
    background: #c0c0c0;
}

.containerDivideDot {
    margin: 40px;
    border-top: dotted 1px #e0e0e0;
}

.containerDivideDash {
	border-top: dashed 1px #c0c0c0;
}

.topicCover {
    width: 100%;
    height: 420px;
    position: relative;
}

.topicCover .caption {
    position: absolute;
    left: 6%;
    bottom: 8%;    
    font-size: 44px;
    font-weight: bold;
    text-align: left;
    color: #fff;
    text-shadow: 3px 3px 10px #303030, -1px -1px 10px #303030;
}

.topicCover .caption h1 {
    margin: 0;
    padding: 0;
    font-size: 44px;
}

.topicCover .caption .subCaption {
    margin: 0 0 0 5px;
    padding: 0 0 0 20px;
    border-left: solid 4px #fff;
    letter-spacing: 4px;
    font-weight: normal;
    font-size: 32px;
}

.topicCover .icon {
    position: absolute;
    bottom: 7%;
    right: 3%;
}

#container {
	width: 100%;	
    margin: 0;
    padding: 0;
	box-sizing: border-box;
    position: relative;
}

#container .ctx {
    width: 1200px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    color: #505050;
}

#container .ctx .contOver {
	width: 100%;
	overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}

#container .illustration {
    position: absolute;
    z-index: -1;
}

#container img {
    vertical-align: bottom;
}

#container .img33 {
	width: 32.8%;
	box-sizing: border-box;
	border: solid 1px #aaa;	
}

#container .img100 {
	width: 100%;
	box-sizing: border-box;
	border: solid 1px #aaa;	
}

#container .imgWrapR350 {
	width: 350px;
	margin: 0 0 10px 30px;
	float: right;
}

#container .imgWrapR450 {
	width: 450px;
	margin: 0 0 10px 20px;
	float: right;
}

.goButton {
	padding: 5px 10px;
	position: Fixed;
	right: 10px;	
	box-shadow: -1px -1px 2px #808080 inset;
	border: solid 1px #c0c0c0;
	font-size: 18px;
	color: #a0a0a0;
	background: #fff;
	cursor: pointer;	
}

.goTop {
/*	bottom: 42px;*/
    bottom: -1px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

.goBottom {	
    top: 100%;
/*	bottom: 6px;*/
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
}

.goTop:hover, .goBottom:hover {
	color: #505050;
}

.goTop:active, .goBottom:active {
	box-shadow: 2px 2px 3px #505050 inset;
}
/*---------- container (end) ----------*/

/*---------- home (start) ----------*/
.homeCarousel {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    padding: 0;
    z-index: 0;
}

.homeCarousel .slide {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    border: 0;    
}

.homeCarousel .progress {
    height: 5px;
    position: absolute;
    bottom: 0px;
    z-index: 101;
    background: rgba(255, 255, 255, 0.5);
}

.homeCarousel .pager {
    width: 100%;
    position: absolute;
    bottom: 25px;
    z-index: 101;
    text-align: center;
}

.homeCarousel .pager span  {
    width: 35px;
    height: 5px;
    margin: 3px;    
    border-radius: 1px;
    display: inline-block;
    font-size: 0px;
    color: #ddd;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer; 
}

.homeCarousel .pager span.cycle-pager-active {
    color: #0066bc;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.homeCarousel .pager > *  {
    cursor: pointer;
}

.homeCarouselBottom {
    border-Top: solid 1px #505050;
}

.homeCarousel .prev {    
    padding: 15px 10px;
    position: absolute;
    top: 45%;
    left: 25px;
    z-index: 101;
    border-radius: 1px;
    line-height: 0.85;
    font-size: 50px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    cursor: pointer;    
}

.homeCarousel .next {
    padding: 15px 10px;
    display: inline-block;
    position: absolute;
    top: 45%;
    right: 25px;    
    z-index: 101;    
    border-radius: 1px;
    line-height: 0.85;
    font-size: 50px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    cursor: pointer;
}

.homeBanner {
	width: 100%;
    margin: 3px 0;
    padding: 0;
    list-style: none;
}

.homeBanner li {
    width: 25%;
    padding: 0;
    box-sizing: border-box;
    float: left;    
}

.homeBanner li:nth-child(2) {
    padding: 0 1px 0 2px;    
}

.homeBanner li:nth-child(3) {
    padding: 0 2px 0 1px;    
}

.homeBanner li a {
    width: 100%;
    margin: 0 0 1px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: bottom;
}

.homeBanner li a .cover {
    height: 220px;    
    box-sizing: border-box;
    border: solid 1px #f0f0f0;
    border-top: none;
    border-bottom: none;
}

.homeBanner li:nth-child(1) a .cover {
    background: url(../img/homeBanner_01.jpg) center;
    background-size: cover;
}

.homeBanner li:nth-child(2) a .cover {
    background: url(../img/homeBanner_02.jpg) center;
    background-size: cover;
}

.homeBanner li:nth-child(3) a .cover {
    background: url(../img/homeBanner_03.jpg) center;
    background-size: cover;
}

.homeBanner li:nth-child(4) a .cover {
    background: url(../img/homeBanner_04.jpg) center;
    background-size: cover;
}

.homeBanner li a .coverMask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: 1s background;
}

.homeBanner li:hover a .coverMask {
    background: rgba(0, 0, 0, 0.6);
}

.homeBanner li a .icon {
    width: 88px;
    height: 88px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-bottom: solid 3px rgba(255, 255, 255, 0);
    transition: 0.5s top, 0.5s border, 0.5s transform;
    transform-origin: center top;
}

.homeBanner li:nth-child(1) a .icon {
    background: url(../img/homeBannerIcon_01.png) center no-repeat;
    background-size: 75%;
}

.homeBanner li:nth-child(2) a .icon {
    background: url(../img/homeBannerIcon_02.png) center no-repeat;
    background-size: 75%;
}

.homeBanner li:nth-child(3) a .icon {
    background: url(../img/homeBannerIcon_03.png) center no-repeat;
    background-size: 75%;
}

.homeBanner li:nth-child(4) a .icon {
    background: url(../img/homeBannerIcon_04.png) center no-repeat;
    background-size: 75%;
}

.homeBanner li:hover a .icon {
    top: -20px;
    border-bottom: solid 3px rgba(255, 255, 255, 1);
    transform: scale(0.8);
}

.homeBanner li a .title {
    width: 100%;
    position: absolute;
    bottom: -30%;
    text-align: center;
    font-size: 20px;
    color: #fff;    
    text-shadow: 2px 2px 10px #303030, -1px -1px 10px #303030;
    transition: 1s bottom;
}

.homeBanner li:hover a .title {
    bottom: 25%;
}

.homeBanner li:hover a .titleDAKA {
    bottom: 12% !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #homeBanner .title .note {
        right: -5px;
        bottom: 2px;
        transform: scale(0.8);
    }
}
/*---------- home (end) ----------*/

/*---------- About History (start) ----------*/
.aboutHistoryTopicCover {
    height: 280px;
}

.aboutHistoryTopicCover .caption .subCaption {
    letter-spacing: 0;
    font-size: 24px;
}

.aboutHistoryLayout {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.aboutHistoryLayout li {
    width: 48%;
    margin: 10px 1%;
    float: left;
}

.aboutHistorySpecial li:nth-child(1) {
    display: display;
}

.aboutHistorySpecial li:nth-child(3) {
    display: none;
}

.aboutHistoryLayout li .title {
    text-align: left;
    font-size: 24px;
}

.aboutHistoryLayout li .rightNote {
    margin: 3px 0 0;
    text-align: right;
    font-size: 14px;
}

.aboutHistoryLayout li .leftNote {
    margin: 3px 0 0;
    font-size: 14px;
}

.aboutHistorySpacing {
    padding: 50px 0 0;
	border-bottom: solid 1px #c0c0c0;
    display: none;
}
/*---------- About History (end) ----------*/

/*---------- About Chairman (start) ----------*/
.aboutChairmanTopicCover {
    height: 500px;
    background: url(../img/aboutCover_02.webp) right 60% no-repeat;
    background-size: cover;
}

.Chairman {
    line-height: 1.3em;
}

.Chairman .aniTxt{
    vertical-align: bottom;
    line-height: 1.25em;
    text-align: left;
    font-size: 28px;
    /* font-weight: bold; */
    color: #239643;
}

.Chairman p {
    margin: 30px 0;
    line-height: 1.5em;
    /* font-size: 20px; */
    opacity: 0;
}
/*---------- About Chairman (end) ----------*/

/*---------- About Directors (start) ----------*/
.aboutDirectors {
    margin: 30px 0;
}

.aboutDirectors .caption {
    margin: 15px 0;
    text-align: left;
    font-size: 30px;
}

.aboutDirectors .th {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.aboutDirectors .th li {
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
    float: left;
    border-right: solid 1px #fff;
    text-align: center;
    color: #fff;
    background: #808080;
}

.aboutDirectors .item {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    border-bottom: solid 1px #c0c0c0;
    list-style: none;
}

.aboutDirectors .item:nth-child(even) {
    background: #eae7e2;
}

.aboutDirectors .item > li {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    float: left;
    border-right: solid 1px #fff;
    text-align: center;
}

.aboutDirectors .item > li:nth-child(1) {
    width: 12%;    
}

.aboutDirectors .item > li:nth-child(2) {
    width: 22%;
}

.aboutDirectors .item > li:nth-child(3) {
    width: 15%;
}

.aboutDirectors .item > li:nth-child(4) {
    width: 51%;
    text-align: left;
}

.aboutDirectors .item > li .adjHeight {
    display: inline-block;
    vertical-align: middle;
}

.aboutDirectors .item > li .title {
    display: none;
    font-weight: bold;
}

.aboutDirectors .item > li .val {
    width: 95%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
}

.aboutDirectors .item li .exps {
    margin: 10px 0 -10px;
    padding: 0 0 0 40px;
    list-style: disc;
}

.aboutDirectors .item li .exps li {
    padding: 3px 0;
    float: none;
}


.aboutAudit {
    margin: 30px 0;
}

.aboutAudit .caption {
    margin: 15px 0;
    text-align: left;
    font-size: 30px;
}

.aboutAudit .th {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.aboutAudit .th li {
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
    float: left;
    border-right: solid 1px #fff;
    text-align: center;
    color: #fff;
    background: #808080;
}

.aboutAudit .item {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    border-bottom: solid 1px #c0c0c0;
    list-style: none;
}

.aboutAudit .item:nth-child(even) {
    background: #eae7e2;
}

.aboutAudit .item > li {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    float: left;
    border-right: solid 1px #fff;
    text-align: center;
}

.aboutAudit .item > li:nth-child(1) {
    width: 22%;
}

.aboutAudit .item > li:nth-child(2) {
    width: 10%;
}

.aboutAudit .item > li:nth-child(3) {
    width: 10%;
}

.aboutAudit .item > li:nth-child(4) {
    width: 18%;    
}

.aboutAudit .item > li:nth-child(5) {
    width: 40%;
    text-align: left;
}

.aboutAudit .item > li .adjHeight {
    display: inline-block;
    vertical-align: middle;
}

.aboutAudit .item > li .title {
    display: none;
    font-weight: bold;
}

.aboutAudit .item > li .val {
    width: 95%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
}

.aboutAudit .item li .exps {
    margin: 10px 0 -10px;
    padding: 0 0 0 40px;
    list-style: disc;
}

.aboutAudit .item li .exps li {
    padding: 3px 0;
    float: none;
}

.aboutOperators {
    margin: 30px 0;
}

.aboutOperators .caption {
    margin: 15px 0;
    text-align: left;
    font-size: 30px;
}

.aboutOperators .th {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.aboutOperators .th li {
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
    float: left;
    border-right: solid 1px #fff;
    text-align: center;
    color: #fff;
    background: #808080;
}

.aboutOperators .item {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    border-bottom: solid 1px #c0c0c0;
    list-style: none;
}

.aboutOperators .item:nth-child(even) {
    background: #eae7e2;
}

.aboutOperators .item > li {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    float: left;
    border-right: solid 1px #fff;
    text-align: center;
}

.aboutOperators .item > li:nth-child(1) {
    width: 20%;
}

.aboutOperators .item > li:nth-child(2) {
    width: 20%;
}

.aboutOperators .item > li:nth-child(3) {
    width: 60%;
    text-align: left;
}

.aboutOperators .item > li .adjHeight {
    display: inline-block;
    vertical-align: middle;
}

.aboutOperators .item > li .title {
    display: none;
    font-weight: bold;
}

.aboutOperators .item > li .val {
    width: 95%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
}

.aboutOperators .item li .exps {
    margin: 10px 0 -10px;
    padding: 0 0 0 40px;
    list-style: disc;
}

.aboutOperators .item li .exps li {
    padding: 3px 0;
    float: none;
}
/*---------- About Directors (end) ----------*/

/*---------- About Operation (start) ----------*/
.aboutOperstionTitle {
    width: 20%;    
    display: inline-block;
    float: left;
    vertical-align: bottom;
}

.aboutOperstionTitle table {
    width: 100%;
    margin: 10px 0;
    border-spacing: 0 1px;
}

.aboutOperstionTitle table tr:nth-child(odd) {
    background: #eae7e2;
}

.aboutOperstionTitle table td {
    height: 55px;
    padding: 1px 5px;
    text-align: center;
    border-right: solid 1px #fff;
}

.aboutOperstionTitle table tr:nth-child(7) td {
    height: 120px;    
}

.aboutOperstionTitle .unit {
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 12px;
    color: #ad8500;
}

.aboutOperstionCont {
    width: 80%;
    display: inline-block;
    float: left;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: bottom;
}

.aboutOperstionCont table {
    width: 100%;
    margin: 10px 0 0;
    border-spacing: 0 1px;
}

.aboutOperstionCont table tr:nth-child(odd){
    background: #eae7e2;
}

.aboutOperstionCont table td {
    height: 55px;
    text-align: center;
}

.aboutOperstionCont img{
    width: 100px;
    padding: 10px 20px;    
}
/*---------- About Operation (end) ----------*/

/*---------- About Milesrone (Start) ----------*/
.aboutMilestone {    
    position: relative;
}

.aboutMilestone .timeLine {    
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 60px;
    z-index: -1;
    border-left: dotted 3px #c0c0c0;
}

.aboutMilestone .title {
    margin: 25px 0;
    padding: 5px 25px;
    display: inline-block;
    border: solid 3px #505050;
    border-radius: 50px;
    font-weight: bold;
    font-family: arial;
    font-size: 28px;
    color: #505050;
    background: #fff;
    transition: 0.5s transform;
}

.aboutMilestone .title:hover {
    transform: scale(1.1);
}

.aboutMilestone table {
    width: 100%;
}

.aboutMilestone table tr td:nth-child(1) {
    width: 10%;
    vertical-align: top;
}

.aboutMilestone table tr .year {
    margin: 20px 0 0;
    padding: 5px 0;
    border: solid 3px #505050;
    border-radius: 50px;
    text-align: center;
    font-family: arial;
    font-weight: bold;
    font-size: 24px;
    background: #fff;
    opacity: 0;
    transition: 0.5s transform;
}

.aboutMilestone table tr:hover .year {
    transform: scale(1.2);
}

.aboutMilestone table tr .notes {
    box-sizing: border-box;
    color: #808080;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0);
    opacity: 0;
    transition: 0.5s color, 0.5s text-shadow, 0.5s transform;
}

.aboutMilestone table tr:hover .notes {
    color: #505050;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

@media screen\0 {
    .aboutMilestone table tr .notes {
        text-shadow: none;
    }

    .aboutMilestone table tr:hover .notes {
        text-shadow: none;
    }    
}

.aboutMilestone table tr .notes li {
    width: 100%;
    padding: 15px 0 10px;
    line-height: 1.5em;
}
/*---------- About Milestone (end) ----------*/

/*---------- About Product (Start) ----------*/
.product {
    margin: 40px 0;
    padding: 0;
    list-style: none;
    line-height: 1.5em;
}

.product > li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    float: left;
}

.product .title {
    margin: 0 0 10px;
    font-weight: bold;
    font-size: 24px;
}

.productLayout1 > li:nth-child(1) {
    width: 60%;
    padding: 0 20px 0 0;
}

.productLayout1 > li:nth-child(1) .slideBorder {
    margin: 25px 0;
    padding: 20px 15px 5px;
    box-sizing: border-box;
    position: relative;
    border: solid 1px #3A72B8;
    line-height: 1.3em;
    font-size: 13px;
}

.productLayout1 > li:nth-child(1) .slideBorder:nth-child(3) {
    border: solid 1px #41B8E4;
}

.productLayout1 > li:nth-child(1) .slideBorder .title {
    width: 200px;
    padding: 5px;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    top: -14px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #3A72B8;
}

.productLayout1 > li:nth-child(1) .slideBorder:nth-child(3) .title {
    background: #41B8E4;
}

.productLayout1 > li:nth-child(1) .slideBorder ul {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: disc;
}

.productLayout1 > li:nth-child(1) .slideBorder ul li {
    margin: 0;
    padding: 0 0 7px;
}

.productLayout1 > li:nth-child(2) {
    width: 40%;
    padding: 0 0 0 20px;
}

.productLayout1 > li:nth-child(2) img {
    width: 100%;
    margin: 40px 0 0;
}

.productLayout2 > li:nth-child(1) {
    width: 45%;
    padding: 0 20px 0 0;
}

.productLayout2 > li:nth-child(1) img {
    width: 30%;
    padding: 15px 1%;
    vertical-align: bottom;
}

.productLayout2 > li:nth-child(2) {
    width: 55%;
    padding: 0 0 0 20px;
}

.productLayout2 > li:nth-child(2) .item {
    height: 190px;
}

.productLayout2 > li:nth-child(2) .item:before {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.productLayout2 > li:nth-child(2) .item:nth-child(2) {
    border-top: solid 1px #41B8E4;
    border-bottom: solid 1px #41B8E4;
}

.productLayout2 > li:nth-child(2) .item .data {
    width: 33%;
    padding: 18px 0 0;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color: #3A72B8;
}

.productLayout2 > li:nth-child(2) .item .data .num {
    font-family: arial;    
    font-size: 60px;
}

.productLayout2 > li:nth-child(2) .item .data .unit {
    font-size: 15px;
}

.productLayout2 > li:nth-child(2) .item .txt {
    width: 65%;
    padding: 0 10px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
}

.productLayout3 > li:nth-child(1) {
    width: 38%;
    padding: 0 20px 0 0;
}

.productLayout3 > li:nth-child(2) {
    width: 23%;
    padding: 0 20px;
}

.productLayout3 > li:nth-child(3) {
    width: 39%;
    padding: 0 0 0 20px;
}

.productLayout3 > li img {
    width: 100%;
}

.productLayout4 {
    border-bottom: solid 1px #3A72B8; 
}

.productLayout4 > li:nth-child(1) {
    width: 100%;
}

.productLayout4 > li:nth-child(2) {
    width: 50%;
    padding: 0 1px 0 0;
}

.productLayout4 > li:nth-child(3) {
    width: 50%;
    padding: 0 0 0 1px;
}

.productLayout4 > li table .grayBG {
    background: #f0f0f0;
}

.productLayout4 > li table th {
    padding: 2px 0;
    text-align: center;
    font-weight: normal;
    font-size: 14px;
    color: #fff;
    background: #3A72B8;
}

.productLayout4 > li table td {
    padding: 10px 15px 10px 10px;
    box-sizing: border-box;
}

.productLayout4 > li table td:first-child {
    width: 20%;
    text-align: center;
}

.productLayout4 > li table td img {    
    width: 90%;
}

.productLayout4 > li table td ul {
    padding: 0 0 0 25px;
    list-style: disc;
}

.productLayout4 > li table td ul li{
    padding: 8px 0;
    line-height: 1.4em;
    font-size: 14px;
}
/*---------- About Product (end) ----------*/

/*---------- About Supplier (start) ----------*/
.supplierBoldTxt {
    font-weight: bold;
    color: #000;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.supplier {
    padding: 0;
    list-style: none;
}

.supplier li {
    margin: 0;
    box-sizing: border-box;
    float: left;
}

.supplierChart1 {
    width: 600px;
    height: 320px;
    margin: 0 auto;
    position: relative;
}

.supplierChart1 .item text {
    text-anchor: middle;
    font-size: 18px;
    fill: #fff;
}

.supplierChart1 .itemV text {  
    writing-mode: tb;
    text-anchor: middle;
    fill: #fff;
    font-size: 18px;
    transform: translate(7px, 0);
}

.supplierChart2 {
    margin: auto;
}

.supplierChart2 tr:nth-child(even) {
    background: #cfd5ea;
}

.supplierChart2 tr:nth-child(odd) {
    background: #e9ebf5;
}

.supplierChart2 tr th {
    padding: 5px 10px;
    box-sizing: border-box;
    color: #fff;
    background:rgb(0, 102, 188);
}

.supplierChart2 tr th:nth-child(1) {
    text-align: left;
}

.supplierChart2 tr td {
    padding: 5px 10px;
    box-sizing: border-box;
}

.supplierChart2 tr td:nth-child(1) {
    text-align: left;
}

.supplierChart3 {
    width: 440px;
    height: 250px;
    margin: 0 auto;
    position: relative;
}

.supplierChart3 .item text {
    width: 200px;
    height: 40px;
    text-anchor: middle;
    font-size: 18px;
    fill: #fff;
}

.supplierChart3 .itemV text {
    writing-mode: tb;
    text-anchor: middle;
    fill: #fff;
    font-size: 18px;
    transform: translate(7px, 0);
}

svg line {
    stroke: #c0c0c0;
    stroke-dasharray: 2;
}

.supplierLayout1 {
    margin: 0 0 0 40px;
    list-style: decimal;
}

.supplierLayout1 li {
    padding: 0 0 10px;
}

.supplierLayout2 {
    margin: 0 0 0 40px;
    list-style: disc;
}

.supplierLayout2 li {
    width: 33.3%;
    padding: 0 0 10px;
}

.supplierLayout3 li:nth-child(1) {
    width: 80%;
    padding: 0 30px 0 0;
}

.supplierLayout3 li:nth-child(2) {
    width: 20%;
    padding: 30px 0 0 30px;
}

.supplierLayout3 li:nth-child(2) img {
    width: 100%;
}

.supplierLayout3 .pdf {
    margin: 20px 0 0;
    padding: 15px 20px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    color: #333;
    background: #f0f0f0;
    transition: transform 0.5s;
}

.supplierLayout3 .pdf:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

.supplierLayout3 .pdf i {
    font-size: 28px;
    color: #c00;
}
/*---------- About Supplier (end) ----------*/

/*---------- Circular (start) ----------*/
.runNum {
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    font-size: 36px;
    color: rgb(218, 94, 135, 0.1);
    transform-origin: center bottom;
}

.runNum + .unit{
    padding: 0 0 0 10px;
    font-weight: bold;
    font-size: 14px;
}

.runNumColor {
    animation: runNumColorAni 3s ease-in-out 0s 1 alternate forwards;
}

@keyframes runNumColorAni {
    0%{
        color: rgb(218, 94, 135, 0.2);
    }
    100%{
        color: rgb(218, 94, 135, 1);
    }
}

.runNumZoomIn {
    animation: runNumZoomInAni 3s ease-in-out 0s 1 alternate forwards;
}

@keyframes runNumZoomInAni {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}

.circular {
    margin: 40px 0;
    padding: 0;
    list-style: none;
    line-height: 1.5em;
}

.circular > li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    float: left;
}

.circular .title {
    margin: 0;
    padding: 0;
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
/*    opacity: 0;*/
}

.circular .dashBorder {
    width: 100%;
    border: dashed 2px #DA5E87;
}

.circular .pic1 {
    width: 100%;
    height: 280px;
    display: inline-block;
    background: url(../img/circular_07.jpg) center top no-repeat;
    background-size: cover;
}

.circular .picTxt {
    padding: 10px 15px;
    color: #fff;
    text-shadow: 0 0 5px #000000;
}

.circularLayout1 > li:nth-child(1) {
    width: 58%;
    padding: 0 15px 0 0;
}

.circularLayout1 > li:nth-child(1) img{
    position: relative;
    z-index: 9;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
    transition: 1s box-shadow, 1s transform;
    background: #fff;
}

.circularLayout1 > li:nth-child(1) img:hover {
/*
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.15);
*/
}

.circularLayout1 > li:nth-child(2) {
    width: 42%;
    padding: 0 0 0 15px;
}

.circularLayout1 > li:nth-child(2) table {
    border-collapse: collapse;
    border-spacing: 0;
}

.circularLayout1 > li:nth-child(2) table td {
    padding: 35px 20px;
    box-sizing: border-box;
    text-align: center;
    color: #DA5E87;
}

.circularLayout1 > li:nth-child(2) table tr:nth-child(2) td {
    border-top: dashed 2px #DA5E87;
}

.circularLayout1 > li:nth-child(2) table .dialog img {
    padding: 0;
    opacity: 0;    
    transition: 1s transform;
    transform-origin: center bottom;
}

.circularLayout1 > li:nth-child(2) table .dialog img:nth-child(odd) {
    width: 17%;
    margin: 0 1% 0;    
}

.circularLayout1 > li:nth-child(2) table .dialog img:nth-child(even) {
    width: 27%;
    margin: 0 1%;
}

.circularLayout1 > li:nth-child(2) table .dialog img:hover {
    transform: scale(1.7);
}

.circularLayout1 > li:nth-child(2) .dataGrid {
    margin: 0;
    padding: 0;
    position: relative;
}

.circularLayout1 > li:nth-child(2) .dataGrid .item {
    width: 49.5%;
    height: 285px;    
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    display: inline-block;
}

.circularLayout1 > li:nth-child(2) .dataGrid .item:nth-child(1) {
    border-right: dashed 2px #DA5E87;
}

.circularLayout1 > li:nth-child(2) .dataGrid .item:nth-child(3) {
    width: 100%;
}

.circularLayout1 > li:nth-child(2) .dataGrid .item:before {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;    
    vertical-align: middle;
    background: #000;
}

.circularLayout1 > li:nth-child(2) .dataGrid .item .cont {
    width: 98%;
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    color: #DA5E87;
}

.circularLayout1 > li:nth-child(2) .dataGrid .chart {
    display: none;
}

.circularLayout1 > li:nth-child(2) .dataGrid .dashLine {
    width: 502px;
    display: inline-block;
    position: absolute;    
    top: 50%;
    right: 0;
    border-top: dashed 2px #DA5E87;
}

.circularLayout2 > li:nth-child(1) {
    width: 50%;
    padding: 0 15px 0 0;
}

.circularLayout2 > li:nth-child(1) .dataGrid {
    width: 140%;
    height: 50px;    
    margin: 10px 30%;
    display: inline-block;
    text-align: center;
    color: #DA5E87;
}

.circularLayout2 > li:nth-child(1) .dataGrid .item {
    width: 50%;
    box-sizing: border-box;
    display: inline-block;
    float: left;
}

.circularLayout2 > li:nth-child(1) .dataGrid .item:nth-child(1) {
    border-right: dashed 2px #DA5E87;
}

.circularLayout2 > li:nth-child(2) {
    width: 50%;
    padding: 0 0 0 15px;
}

.circularLayout2 > li:nth-child(2) .picGrid {
    margin: 33px 0;
}

.circularLayout2 > li:nth-child(2) .picGrid img {
    width: 225px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
    transition: 1s box-shadow, 1s transform;
    background: #fff;
}

.circularLayout2 > li:nth-child(2) .picGrid img:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.6);
}

.circularLayout2 > li:nth-child(2) .picGrid .pic {
    width: 340px;
    height: 233px;
    display: inline-block;
    float: right;
    background: url(../img/circular_09.jpg) right top no-repeat;
    background-size: cover;
}

.circularLayout3 > li:nth-child(1) {
    width: 31%;
    padding: 0 15px 0 0;
}

.circularLayout3 > li:nth-child(2) {
    width: 69%;
    padding: 0 0 0 15px;
}

.circularLayout3 > li:nth-child(2) .picDataGrid .pic {
    width: 61%;
    height: 500px;
    display: inline-block;
    vertical-align: top;
    background: url(../img/circular_10.jpg) 60% center no-repeat;
    background-size: cover;
}

.circularLayout3 > li:nth-child(2) .picDataGrid .data {
    width: 38.3%;
    display: inline-block;
    text-align: center;
    color: #DA5E87;
}

.circularLayout3 > li:nth-child(2) .picDataGrid .data .item {
    width: 70%;
    margin: auto;
    padding: 43px 0;
    box-sizing: border-box;
    border-top: dashed 2px #DA5E87;
}

.circularLayout3 > li:nth-child(2) .picDataGrid .data .item:first-child {
    border-top: dashed 2px transparent;
}

.circularLayout3 > li:nth-child(2) .picDataGrid .data .item .tit{
    margin: 0 0 12px;
}

.circularLayout4 > li:nth-child(1) {
    width: 31.2%;
    padding: 0 15px 0 0;
}

.circularLayout4 > li:nth-child(2) {
    width: 35.4%;
    padding: 0 12px;
}

.circularLayout4 > li:nth-child(2) .pic {
    height: 500px;
    display: inline-block;
    background: url(../img/circular_11.jpg) 80% top no-repeat;
    background-size: cover;
}

.circularLayout4 > li:nth-child(3) {
    width: 33.3%;
    padding: 0 0 0 15px;
}

.circularLayout5 > li:nth-child(1) {
    width: 50%;
    padding: 0 15px 0 0;
}

.circularLayout5 > li:nth-child(2) {
    width: 50%;
    padding: 0 12px;
    text-align: right;
}

.circularLayout5 > li:nth-child(2) .pic1 {
    width: 100%;
    height: 445px;
    background: url(../img/circular_12.jpg) center no-repeat;
    background-size: cover;
}

.circularLayout5 > li:nth-child(2) .pic2 {
    width: 100%;
    height: 445px;
    background: url(../img/circular_13.jpg) center no-repeat;
    background-size: cover;    
}

.circularLayout6 > li:nth-child(1) {
    width: 70%;
    padding: 0 30px 0 0;
}

.circularLayout6 > li:nth-child(2) {
    width: 30%;
}

.circularLayout6 > li:nth-child(2) img {
    width: 100%;
}
/*---------- Circular (end) ----------*/

/*---------- news (start) ----------*/
#newsList {
    min-height: 500px;
    line-height: 1.6em;
}

/* #newsList .accordionCont {
    padding: 15px 40px;
    box-sizing: border-box;
} */

#newsList .item {
    width: 100%;
    margin: 13px 0 14px;
    display: inline-block;
    font-weight: bold;
    transition: box-shadow 0.5s;
}

#newsList .item .date {
    font-family: Arial, Helvetica, sans-serif;
    color: #c00000;
}

#newsList .item .title {
    font-size: 20px;
    color: #505050;
    transition: box-shadow 0.5s;
}

#newsList .item:hover .title {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.newsArticleTitle {
    margin: 30px 0 10px;
    text-align: left;
    font-weight: bold;
    font-size: 32px;
}

.newsArticleDate {
    text-align: center;
    font-size: 16px;
    color: #c00000;
}
/*---------- news (end) ----------*/

/*---------- hr (start) ----------*/
.hrCoLayout {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.6em;
}

.hrCoLayout li {
    margin: 0;
    padding: 10px 20px;
    box-sizing: border-box;
    float: left;    
}

.hrCoLayout .title {
    padding: 10px 0;
    text-align: left;
    font-size: 22px;
}

.hrCoLayout .focusBtn {
    margin: 20px 0 0;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
    border: solid 2px #3a9ebc;
    border-radius: 20px;
    line-height: 1.7em;
    font-size: 14px;
    color: #3a9ebc;
    animation: hrFocusBreath 1s ease-in-out 0.0s infinite alternate forwards;
}

@keyframes hrFocusBreath{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.1);
    }
}

.hrCoLayout .focusBtn img {
    width: 17px;
    position: absolute;
    top: 3px;
    right: 10px;
    vertical-align: bottom;
}

.hrLayout1 {
    margin: 0 0 0 120px;
}

.hrLayout1 li:nth-child(1) {
    width: 30%;
}

.hrLayout1 li:nth-child(2) {
    width: 70%;
}

.hrLayout1 li .benefit {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hrLayout1 li .benefit > li {
    width: 32%;
    margin: 0.5%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    float: left;
    text-align: left;
    font-size: 16px;
    background: #f5f5f5;
}

.hrLayout1 li .benefit > li:nth-child(1), .hrLayout1 li .benefit > li:nth-child(2), .hrLayout1 li .benefit > li:nth-child(3) {
    height: 320px;
}

.hrLayout1 li .benefit > li:nth-child(4), .hrLayout1 li .benefit > li:nth-child(5) {
    height: 220px;
}

.hrLayout1 li .benefit > li:nth-child(4) {
    width: 65%;
}

.hrLayout1 li .benefit > li .title {
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    color: #0000b0;
}

.hrLayout1 li .benefit > li .list {    
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
}

.hrLayout1 li .benefit > li .list li {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

.hrLayout1 li .benefit > li .triangle {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: transparent transparent transparent rgba(0, 0, 176, 0.3);
}

.hrLayout2 li:nth-child(1) {
    width: 25%;
}

.hrLayout2 li:nth-child(2) {
    width: 20%;
}

.hrLayout2 li:nth-child(3) {
    width: 55%;
}

.hrLayout3 {
    width: 72%;
    padding: 10px 0;
    box-sizing: border-box;
}

.hrLayout3 .focusBtn {
    width: 150px;
    display: inline-block;
    margin: 10px 0 0;
}

.hrLayout3 .space {
    height: 80px;
    display: inline-block;
}
.hrLayout3 .note {
    padding: 12px 0;
    border-top: solid 1px #c0c0c0;
    border-bottom: solid 1px #c0c0c0;
    line-height: 1.3em;
    font-size: 12px;
    color: #808080;
}
/*---------- hr (end) ----------*/

/*---------- newsletter (start) ----------*/
.newsCaption {
    margin: 10px 0;
    font-weight: normal;
    font-size: 32px;    
}

.newsletter .inputInfo {
    width: 600px;
    margin: 8% auto;
}

.newsletter .inputInfo .title {
    padding: 5px 0;
    box-sizing: border-box;
    font-size: 22px;
    color: #303030;
}

.newsletter .inputInfo .title:before {
    content: "";
    width: 0;
    height: 0;
    margin: 0 5px 0 2px;
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #b00000;
}

.newsletter .inputInfo input[type="text"] {
    width: 420px;
    padding: 6px;
    box-sizing: border-box;
    border: none;
    border-bottom: dotted 2px #e0e0e0;
    color: #808080;
    outline: none;
}

.newsletter .inputInfo .btn {
    width: 150px;
    margin: 0 0 0 10px;
    padding: 3px 0;
    box-sizing: border-box;
    cursor: pointer;
}

.newsletter .inputInfo .spacing {
    height: 50px;
}
/*---------- newsletter (end) ----------*/

/*---------- Full Index Search (start) ----------*/
#searchDetail .date {
    margin: 25px 0 0;
    font-family: arial;
    font-weight: bold;
    font-size: 18px;
    color: #c00000;
}

#searchDetail .title {
    font-weight: bold;
    font-size: 20px;
}
/*---------- Full Index Search (end) ----------*/

/*---------- investor Common (start) ----------*/
.investorTopicCover .caption {
    top: 14%;
    bottom: auto;
    text-shadow: 0px 0px 10px #000;
}

.investorCoLayout {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.4em;
}

.investorCoLayout > li {
    margin: 10px 0;
    padding: 0;
    box-sizing: border-box;
    float: left;
}

.investorCoLayout > li:nth-child(1) {
    width: 15%;
}

.investorCoLayout > li:nth-child(2) {
    width: 85%;
    padding: 0 0 0 20px;
}

.investorCoLayout > li:nth-child(1) a {
    width: 100%;
    height: 170px;
    margin: 0 0 1px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: bottom;
    color: #808080;    
    background: #f0f0f0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: 0.5s color, 0.5s background, 0.5s box-shadow;
}

.investorCoLayout > li:nth-child(1) a:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    color: #c00000;
    background: #f8f8f8;
}

.investorCoLayout > li:nth-child(1) a .cover i{
    margin: 35px 38px;
    font-size: 100px;    
}

.investorCoLayout > li:nth-child(2) .title{
    text-align: left;
    font-size: 32px;    
}

.investorCoLayout .focusBtn {
    width: 150px;
    margin: 10px 0 0;
    padding: 0 10px;
    box-sizing: border-box;
    display: inline-block;
    float: right;
    position: relative;
    border: solid 2px #3a9ebc;
    border-radius: 20px;
    line-height: 1.7em;
    font-size: 14px;
    color: #3a9ebc;
    animation: dividendBreath 1s ease-in-out 0.0s infinite alternate forwards;
}

@keyframes dividendBreath{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.1);
    }
}

.investorCoLayout .focusBtn img {
    width: 17px;
    position: absolute;
    top: 3px;
    right: 10px;
    vertical-align: bottom;
}

.investorCoLayout .infoNote {
    font-style: italic;
    font-size: 12px;
}

.investorCoLayout .infoNote ul {
    padding: 0 0 0 15px;
    list-style: decimal;
}

.investorCoLayout .infoNote ul li {
    margin: 0;
}

.investorCoLayout .infoBtn {
    font-weight: bold;
    color: #008aff;
    cursor: pointer;
}

.investorInfoBoxBG {
    width: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
}

.investorInfoBoxBG .closeBtn {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 36px;
    color: #808080;
    cursor: pointer;
}

.investorInfoBoxBG .infoListAccordion {
    width: 1150px;
    height: 90%;
    margin: 2.5% auto;
    padding: 15px 30px;
    box-sizing: border-box;
    overflow: auto;
    color: #505050;
    background: #fff;
}

.investorInfoBoxBG .infoListAccordion h3 {
    font-weight: bold;
    font-size: 18px;
    color: #303030;
}

.investorInfoBoxBG .infoListAccordion h3 span {
    font-family: arial;
    font-weight: bold;
    font-size: 16px;
    color: #c00000;
}

.investorInfoBoxBG .infoListAccordion .title {
    font-weight: bold;
}

.investorInfoBoxBG .infoListAccordion .statement {
    list-style: decimal;
}

.investorInfoBoxBG .infoListAccordion .statement li {
    padding: 5px 0;
}
/*---------- Investor Common (end) ----------*/

/*---------- Monthly (start) ----------*/
.monthly {
    margin: 0 auto;
    border-collapse: collapse;    
}

.monthly tr:nth-child(odd) td {
    background: #f0f0f0;
}

.monthly tr:first-child {
    background: #fff;
}

.monthly tr:last-child td {
    border-bottom: solid 1px #f0f0f0;
}

.monthly th {
    padding: 10px;
    position: relative;
    border-right: solid 1px #fff;
    border-bottom: solid 1px #fff;
    text-align: center;
    color: rgb(0, 102, 188);
    background: rgba(0, 102, 188, 0.1);
}

.monthly td {
    padding: 10px;
    text-align: center;
    color: #505050;
}

.monthly .unit {
    display: inline-block;
    position: absolute;
    right: 10px;
    font-size: 14px;
    color: #808080;
}
/*---------- Monthly (start) ----------*/

/*---------- Financial (start) ----------*/
.financeList {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.financeList li {
    width: 20%;
    margin: 10px 0;
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
}

.financeList li .item {
    box-sizing: border-box;
    border: solid 1px #e0e0e0;
    transition: 0.5s box-shadow;
}

.financeList li .item:hover {
    border: solid 1px #d0d0d0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.financeList li .item .year {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #c00000;
    background: #e0e0e0;
}

.financeList li .item .cont {
    width: 100%;
    padding: 5px 5px 10px;
    box-sizing: border-box;
    display: inline-block;
}

.financeList li .item .cont a {
    width: 100%;    
    padding: 12px 25px;
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
    color: #505050;
    transition: 0.5s color, 0.5s transform;
}

.financeList li .item .cont a:hover {
    color: #c00000;
    transform: scale(1.1);
}

.financeList li .item .cont .empty {
    width: 100%;
    padding: 25px 8px 17px;
    text-align: center;
    cursor: default;
}

.financeList li .item .cont .empty:hover {
    color: #505050;
    transform: scale(1);
}
/*---------- Financial (end) ----------*/

/*---------- Finance Calendar (start) ----------*/
.financeCalendar table {
    width: 60%;
    margin: 20px auto;
    border-bottom: solid 1px #c0c0c0;
}

.financeCalendar table tr:nth-child(even) {
    background: #eae7e2;
}

.financeCalendar table tr th {
    padding: 10px 0;
    color: #fff;
    background: #808080;
}

.financeCalendar table tr td:nth-child(2) {
    text-align: left;
}
/*---------- Finance Calendar (end) ----------*/

/*---------- Audit (start) ----------*/
.audit{
    padding: 15px 0;
    line-height: 1.4em;
}

.audit img{
    margin: 10px auto 0;
}

.audit .title {
    margin: 15px 0;
    font-size: 30px;
}

.audit .subTitle {
    font-weight: bold;
}
/*---------- Audit (end) ----------*/

/*---------- Rule (start) ----------*/
.rule {
    padding: 10px 0;
}

.rule .title {
    padding: 0 0 10px;
    text-align: left;
    font-size: 30px;
}

.ruleList {
    margin: 0;
    padding: 0;
	list-style: none;
}

.ruleList li {
    width: 33.3%;
    margin: 0;
    padding: 6px;
    box-sizing: border-box;
    float: left;    
}

.ruleList li a {
    width: 100%;
    height: 65px;
    padding: 15px;
    box-sizing: border-box;
    display: inline-block;
    border-left: solid 5px rgba(192, 0, 0, 0.5);
    text-align: left;
    color: #505050;
    background: #f0f0f0;
    transition: 0.3s transform, 0.3s box-shadow;
}

.ruleList li:hover a {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
}
/*---------- Rule (end) ----------*/

/*---------- Shareholder (start) ----------*/
.shareholderList {
    width: 100%;
    margin: auto;
    padding: 0;
    list-style: none;
}

.shareholderList li {
    width: 20%;
    margin: 10px 0;
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
}

.shareholderList li .item {
    box-sizing: border-box;
    border: solid 1px #e0e0e0;
    transition: 0.5s box-shadow;
}

.shareholderList li .item:hover {
    border: solid 1px #d0d0d0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.shareholderList li .item .year {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #c00000;
    background: #e0e0e0;
}

.shareholderList li .item .cont {
    width: 100%;
    padding: 5px 5px 10px;
    box-sizing: border-box;
    text-align: center;
}

.shareholderList li .item .cont a {
    width: 100%;    
    padding: 10px 8px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    color: #505050;    
    transition: 0.5s color, 0.5s transform;    
}

.shareholderList li .item .cont a:hover {
    color: #c00000;
    transform: scale(1.1);
}

/*
.shareholderList li:nth-last-child(-n+7) .item .cont a:nth-child(1),
.shareholderList li:nth-last-child(-n+7) .item .cont a:nth-child(2),
.shareholderList li:nth-last-child(-n+7) .item .cont a:nth-child(4),
.shareholderList li:nth-last-child(-n+7) .item .cont a:nth-child(6),
.shareholderList li:nth-last-child(-n+7) .item .cont a:nth-child(7),
.shareholderList li:nth-last-child(-n+7) .item .cont a:nth-child(8) {
    display: none;
}
*/

.shareholderList li .item .cont .empty {
    text-align: center;
    color: #808080;
}
/*---------- Shareholder (end) ----------*/

/*---------- IR List (start) ----------*/
.irList {
    width: 97%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.irList li {
    width: 48%;
    margin: 1%;
    box-sizing: border-box;
    float: left;
    transition: 0.3s box-shadow;
}

.irList li:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.irList li .icon {
    width: 50px;
    height: 240px;
    display: inline-block;
    float: left;
    text-align: center;
    background: #f0f0f0;
}

.irList li .icon:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.irList li .icon i {
    vertical-align: middle;
    font-size: 28px;
    color: #808080;
    transition: 0.3s transform;
}

.irList li:hover .icon i {
    transform: scale(1.2);
}

.irList li .cont {
    width: 90.8%;
    height: 240px;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;
    float: left;
    border: dashed 1px #e0e0e0;
    border-left: dashed 1px transparent;
    text-align: left;
    color: #808080;
}

.irList li:hover .cont {
    border: dashed 1px transparent;
}

.irList li .cont .title {
    margin: 5px 0;
    padding: 0 3px;
    display: inline-block;
    font-weight: bold;
    color: #303030;
}

.irList li .cont table td{
    padding: 5px 0;
    vertical-align: top;
}
/*---------- IR List (end) ----------*/

/*---------- InvestorList (start) ----------*/
.investorList {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.investorList li {
    width: 20%;
    margin: 10px 0;
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
}

.investorList li .item {
    box-sizing: border-box;
    border: solid 1px #e0e0e0;
    transition: 0.5s box-shadow;
}

.investorList li .item:hover {
    border: solid 1px #d0d0d0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.investorList li .item .cover {
    width: 100%;
    height: 120px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.investorList li .item .cover .coverMask {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    transition: 0.5s bottom;
}

.investorList li .item:hover .cover .coverMask {
    bottom: -90px;
}

.investorList li .item .cover .year {
    width: 100%;
    position: absolute;
    bottom: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    transition: 0.5s bottom;
}

.investorList li .item:hover .cover .year {
    bottom: 3px;
}

.investorList li .item .cont {
    width: 100%;
    height: 480px;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
}

.investorList li .item .cont .title {
    margin: -4px 0 5px;
    padding: 5px 15px 5px 7px;
    float: left;
    font-weight: bold;
    color: #505050;
    background: #f0f0f0;
}

.investorList li .item .cont .titleTail {
    margin: -4px 0 0;
    float: left;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: #f0f0f0 transparent transparent transparent;
}

.investorList li .item .cont a {
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    text-align: center;
    transition: 0.2s transform;
}

.investorList li .item .cont a:hover {
    transform: scale(1.2);
}

.investorList li .item .cont a .name {
    font-size: 13px;
    color: #e0e0e0;
    transition: 1s color;
}

.investorList li .item:hover .cont a .name {
    color: #808080;
}

.investorList li .item .cont .file {
    width: 33.3%;
/*    display: inline-block;    */
}

.investorList li .item .cont .file i {
    font-size: 28px;
    color: #e0e0e0;
    transition: 1s color;
}

.investorList li .item:hover .cont .file i {
    color: #ce2a2a;
}

.investorList li .item .cont .video {
    width: 33.3%;
/*    display: inline-block;*/
}

.investorList li .item .cont .video i {
    font-size: 28px;
    color: #e0e0e0;
    transition: 1s color;
}

.investorList li .item:hover .cont .video i {
    color: #49acff;
}

.investorList li .item .cont .widthItem {
    width: 100%;
    padding: 10px 10px 10px 15px;
}

.investorList li .item .cont .widthItem:hover {
    transform: scale(1.1);
}

.investorList li .item .cont .widthItem i {
    width: 20%;
    float: left;
}

.investorList li .item .cont .widthItem div {
    width: 80%;
    display:inline-block;
    float: left;
    text-align: left;
}

.investorList li .item .cont .widthItem .chFont {
    font-family: Microsoft JhengHei;
}

.investorList li .item .cont .empty {
    width: 33.3%;
    height: 50px;
    display: inline-block;
    float: left;
}
/*---------- InvestorList (end) ----------*/

/*---------- RWD (start) ----------*/
@media screen and (min-width: 2561px) and (max-width: 3840px) {
    .homeCarousel {
        height: 1500px;
    }

    .homeCarousel .slide {
        height: 1500px;
    }

    .homeBanner li a .cover {
        height: 600px;
    }

    .homeBanner li a .icon {
        width: 160px;
        height: 160px;
    }

    .homeBanner li a .title {
        font-size: 52px;
    }

    .homeBanner li:hover a .title {
        bottom: 28%;        
    }

    .homeBanner li:hover a .titleDAKA {
        bottom: 18% !important;
    }
}

@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .homeCarousel {
        height: 1100px;
    }

    .homeCarousel .slide {
        height: 1100px;
    }    
    
    .homeBanner li a .cover {
        height: 350px;
    }
    
    .homeBanner li:hover a .title {
        bottom: 28%;
    }
    
    .topicCover {
        height: 650px;
    }
    
    .aboutHistoryTopicCover {
        height: 530px;
    }
    
    .aboutChairmanTopicCover {
        height: 1000px;
        background: url(../img/aboutCover_02.webp) right 60% no-repeat;
        background-size: cover;
    }
    
    .newsletter .inputInfo {
        margin: 33% auto;
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .homeCarousel {
        height: 750px;
    }

    .homeCarousel .slide {
        height: 750px;
    }
    
    .homeBanner li a .cover {
        height: 300px;
    }
    
    .homeBanner li a .title {
        font-size: 28px;
    }

    .homeBanner li:hover a .title {
        bottom: 28%;
    }

    .homeBanner li:hover a .titleDAKA {
        bottom: 15% !important;
    }
    
    .topicCover {
        height: 650px;
    }
    
    .aboutHistoryTopicCover {
        height: 400px;
    }
    
    .aboutChairmanTopicCover {
        height: 750px;
        background: url(../img/aboutCover_02.webp) right 60% no-repeat;
        background-size: cover;
    }
    
    .newsletter .inputInfo {
        margin: 18% auto;
    }
}

@media screen and (min-width: 1367px) and (max-width: 1600px) {
    .homeCarousel {
        height: 620px;
    }

    .homeCarousel .slide {
        height: 620px;
    }
    
    .homeBanner li a .cover {
        height: 250px;
    }

    .homeBanner li a .title {
        font-size: 24px;
    }
    
    .homeBanner li:hover a .title {
        bottom: 25%;
    }
    
    .topicCover {
        height: 550px;
    }
    
    .aboutChairmanTopicCover {
        height: 620px;
        background: url(../img/aboutCover_02.webp) right 60% no-repeat;
        background-size: cover;
    }
    
    .newsletter .inputInfo {
        margin: 13% auto;
    }
}

@media screen and (min-width: 1px) and (max-width: 1200px) {
	html, body {
		min-width: 320px;		
	}

    #headerField {
        height: 60px;
    }
    
	#header {
		width: 100%;
		height: 60px;
	}
	
	.headerLogo a .logo {
		width: 80px;
		height: auto;
	}
	
	.headerFocus {
		display: none;
	}
    
    .headerMenu {		
		display: none;
	}
	
	.phoneMenuField {
		display: block;		
	}

    #footerField {
        margin: 0;
    }
    
	#footerField .containerDivide {		
		display: none;
	}	
	
	#footer .content {
		width: 100%;
		height: auto;
	}
	
	#footer .content .copyright {
		margin: 0 5% 0;
		padding: 20px 0;
		font-size: 12px;
	}
    
    .containerDivideDot {
        margin: 20px 40px;
        border-top: dotted 1px #c0c0c0;
    }
	
	#container {
		width: 100%;
	}
    
    #container .ctx {
        width: 100%;
        padding: 15px;
    }

    #container .illustration {
        display: none;
    }    
	
	.goButton {
		display: none;		
	}
    
    /*--------------------------------------------------*/    
    .homeCarousel {
        height: 500px;
    }

    .homeCarousel .slide {
        height: 500px;
    }
    
    .homeCarousel .pager {
        bottom: 20px;
    }

    .homeCarousel .pager span  {
        width: 5px;
        height: 5px;
        margin: 3px 10px;
        border-radius: 100%;
    }
    
    .homeCarousel .prev, .homeCarousel .next {
        display: none;
    }
    
    .homeBanner li {
        width: 100%;
        float: none;        
    }
    
    .homeBanner li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .homeBanner li a .cover {
        height: 200px;
    }
    
    .homeBanner li a .icon {
        width: 60px;
        height: 60px;
        left: 10px;
        right: auto;
        top: 5px;
        bottom: auto;
    }

    .homeBanner li a .title {
        width: auto;
        display: inline;
        top: 18px;
        left: 75px;
        font-size: 28px;
    }    
    
    /*--------------------------------------------------*/    
    .topicCover .caption {
        bottom: 5%;
        font-size: 36px;
    }
    
    .topicCover .caption h1 {
        font-size: 36px;
    }    

    .topicCover .caption .subCaption {
        padding: 0 0 0 10px;
        border-left: solid 3px #fff;
        letter-spacing: 2px;
        font-size: 24px;
    }

    .topicCover .icon {
        display: none;
    }
    
    #container .imgWrapR450, #container .imgWrapR550 {
        width: 100%;
        margin: 0 0 10px;
        float: none;        
    }
    
    /*--------------------------------------------------*/
    .aboutHistoryTopicCover {
        height: 140px;
    }
    
    .aboutHistoryTopicCover .subCaption {
        display: none;
    }

    .aboutHistoryLayout {
        margin: 10px 0;
    }
    
    .aboutHistoryLayout li {
        width: 100%;
        margin: 0;
    }
    
    .aboutHistorySpecial li:nth-child(1) {
        display: none;
    }
    
    .aboutHistorySpecial li:nth-child(3) {
        display: block;
    }

    .aboutHistoryLayout li .title {
        font-size: 20px;
        font-weight: bold;
    }
    
    .aboutHistoryLayout li .leftNote {
        text-align: right;
        font-size: 14px;
    }
    
    .aboutHistorySpacing {
        display: block;
    }
    
    .aboutChairmanTopicCover {
        height: 450px;
        background: url(../img/aboutCover_02.webp) 75% bottom no-repeat;
        background-size: cover;
    }
    
    .aboutOperstionTitle {
        width: 40%;
        font-size: 13px;
    }
    
    .aboutOperstionCont {
        width: 60%;        
    }
    
    .aboutMilestone .timeLine {
        top: 20px;
        left: 38px;
    }

    .aboutMilestone .title {
        margin: 10px 0;
        padding: 5px 20px;
        font-size: 22px;
    }

    .aboutMilestone .title:hover {
        transform: scale(1);
    }

    .aboutMilestone table tr td:nth-child(1) {
        width: 70px;
    }

    .aboutMilestone table tr .year {
        font-size: 16px;
    }

    .aboutMilestone table tr:hover .year {
        transform: none;
    }

    .aboutMilestone table tr:hover .notes {
        transform: none;
    }
    
    .aboutMilestone table tr .notes li {
        margin: 0 0 0 -10px;
        padding: 10px 0;
        text-align: left;
    }
    
    .aboutDirectors {
        margin: 0;
    }
    
    .aboutDirectors .caption {
        font-size: 24px;
    }
    
    .aboutDirectors .th {
        display: none;
    }

    .aboutDirectors .item {
        width: 100%;
        padding: 20px 0;
    }            

    .aboutDirectors .item > li {
        padding: 5px 10px;
        border-right: none;
    }

    .aboutDirectors .item > li:nth-child(1), .aboutDirectors .item > li:nth-child(2), .aboutDirectors .item > li:nth-child(3), .aboutDirectors .item > li:nth-child(4){
        width: 100%;
        text-align: left;
    }

    .aboutDirectors .item > li .adjHeight {
        display: none;
    }

    .aboutDirectors .item > li .title {
        width: 100%;
        display: block;
        float: left;
    }

    .aboutDirectors .item > li:nth-child(4) .title {
        width: 100%;
    }

    .aboutDirectors .item > li .val {
        width: 100%;
        padding: 0 0 0 20px;
        display: inline-block;
        float: left;
    }

    .aboutDirectors .item li .exps {
        margin: 5px 0 0;
    }
    
    .aboutAudit {
        margin: 0;
    }
    
    .aboutAudit .caption{
        font-size: 24px;
    }
    
    .aboutAudit .th {
        display: none;
    }    

    .aboutAudit .item {
        width: 100%;
        padding: 20px 0;
    }            

    .aboutAudit .item > li {
        padding: 5px 10px;
        border-right: none;
    }

    .aboutAudit .item > li:nth-child(1), .aboutAudit .item > li:nth-child(2), .aboutAudit .item > li:nth-child(3), .aboutAudit .item > li:nth-child(4) , .aboutAudit .item > li:nth-child(5){
        width: 100%;
        text-align: left;
    }

    .aboutAudit .item > li .adjHeight {
        display: none;
    }

    .aboutAudit .item > li .title {
        width: 100%;
        display: block;
        float: left;
    }

    .aboutAudit .item > li:nth-child(5) .title {
        width: 100%;
    }

    .aboutAudit .item > li .val {
        width: 100%;
        padding: 0 0 0 20px;
        display: inline-block;
        float: left;
    }

    .aboutAudit .item li .exps {
        margin: 5px 0 0;
    }
    
    .aboutOperators {
        margin: 0;
    }
    
    .aboutOperators .caption {
        font-size: 24px;
    }
    
    .aboutOperators .th {
        display: none;
    }    

    .aboutOperators .item {
        width: 100%;
        padding: 20px 0;
    }            

    .aboutOperators .item > li {
        padding: 5px 10px;
        border-right: none;
    }

    .aboutOperators .item > li:nth-child(1), .aboutOperators .item > li:nth-child(2), .aboutOperators .item > li:nth-child(3){
        width: 100%;
        text-align: left;        
    }

    .aboutOperators .item > li .adjHeight {
        display: none;
    }

    .aboutOperators .item > li .title {
        width: 100%;
        display: block;
        float: left;
    }

    .aboutOperators .item > li:nth-child(3) .title {
        width: 100%;
    }

    .aboutOperators .item > li .val {
        width: 100%;
        padding: 0 0 0 20px;
        display: inline-block;
        float: left;
    }

    .aboutOperators .item li .exps {
        margin: 5px 0 0;
    }
    
    .product > li {
        float: none;        
    }
    
    .product .title {
        text-align: left;
        font-size: 20px;
    }
    
    .productLayout1 > li:nth-child(1) {
        width: 100%;
        padding: 0;
    }
    
    .productLayout1 > li:nth-child(1) .slideBorder {
        line-height: 1.4em;
        font-size: 14px;
    }
    
    .productLayout1 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .productLayout1 > li:nth-child(2) img {
        margin: 0;
    }
    
    .productLayout2 > li:nth-child(1) {
        width: 100%;
        padding: 0;
    }
    
    .productLayout2 > li:nth-child(1) img {
        width: 41%;
        padding: 15px 4%;
    }
    
    .productLayout2 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .productLayout2 > li:nth-child(2) .item {
        height: 250px;
    }
    
    .productLayout2 > li:nth-child(2) .item:nth-child(2) {
        height: 430px;
    }
    
    .productLayout2 > li:nth-child(2) .item .data .num {
        font-size: 40px;
    }
    
    .productLayout2 > li:nth-child(2) .item .txt {
        width: 64%;
        padding: 0 10px;
    }
    
    .productLayout3 > li:nth-child(1) {
        width: 100%;
        padding: 0 0 35px 0;
    }
    
    .productLayout3 > li:nth-child(2) {
        width: 100%;
        padding: 0;
        padding: 0 0 10px 0;
    }

    .productLayout3 > li:nth-child(3) {
        width: 100%;
        padding: 0;
    }
    
    .productLayout4 > li:nth-child(2) {
        width: 100%;
        padding: 0 ;
    }
    
    .productLayout4 > li:nth-child(3) {
        width: 100%;
        padding: 0 ;
    }
    
    .productLayout4 > li:nth-child(3) table tr:first-child {
        display: none;
    }
    
    .productLayout4 > li table td {
        text-align: left;
    }
    
    .productLayout4 > li table td:first-child {
        width: 97px;
    }

    .productLayout4 > li table td img {    
        width: 100%;
    }
    
    .supplierTitle {
        text-align: left;
    }
    
    .supplierChart3 {
        width: 440px;
    }
    
    .supplierLayout2 li {
        width: 100%;
        text-align: left;
    }
    
    .supplierLayout3 li:nth-child(1) {
        width: 100%;
        padding: 0;
    }

    .supplierLayout3 li:nth-child(2) {
        width: 100%;
        padding: 20px 0 0;
        text-align: center;
    }

    .supplierLayout3 li:nth-child(2) img {
        width: 70%;
    }
    
    .supplierLayout3 .pdf {
        width: 80%;
        margin: 10px 10% 0;
    }
    
    /*--------------------------------------------------*/
    .circular:first-child {
        margin: 10px 0 40px;
    }
    
    .circularLayout1 > li:nth-child(1), .circularLayout1 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .circularLayout1 > li:nth-child(1) img {
        display: none;
    }
    
    .circularLayout1 > li:nth-child(2) table .dialog img:nth-child(odd) {
        width: 50%;
        margin: 10px 50% 10px 0;
    }

    .circularLayout1 > li:nth-child(2) table .dialog img:nth-child(even) {
        width: 65%;
        margin: 10px 0 10px 35%;
    }
    
    .circularLayout1 > li:nth-child(2) table .dialog img:hover {    
        transform: none;
    }
    
    .circularLayout1 > li:nth-child(2) .dataGrid .item {
        width: 100%;
        height: 180px;
        padding: 20px 0 0;
        border-bottom: dashed 2px #DA5E87;
    }
    
    .circularLayout1 > li:nth-child(2) .dataGrid .item:nth-child(1) {
        border-right: none;
    }
    
    .circularLayout1 > li:nth-child(2) .dataGrid .item:nth-child(3) {
        border-bottom: none;
    }
    
    .circularLayout1 > li:nth-child(2) .dataGrid .dashLine {
        display: none;
    }
    
    .circularLayout1 > li:nth-child(2) .dataGrid .chart {
        display: block;
    }
    
    .circularLayout2 > li:nth-child(1), .circularLayout2 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .circularLayout2 > li:nth-child(1) .dataGrid {
        width: 100%;
        margin: 10px 0;
    }
    
    .circularLayout2 > li:nth-child(1) .dataGrid .item {
        width: 100%;
        padding: 5px 0;
    }
    
    .circularLayout2 > li:nth-child(1) .dataGrid .item:nth-child(1) {
        border-right: none;
        border-bottom: dashed 2px #DA5E87;
    }
    
    .circularLayout2 > li:nth-child(2) .picGrid {
        margin: 20px 0 0;
    }
    
    .circularLayout2 > li:nth-child(2) .picGrid img {
        width: 60%;
        padding: 0;
        margin: 20px 20%;
    }

    .circularLayout2 > li:nth-child(2) .picGrid img:hover {
        box-shadow: none;
        transform: none;
    }

    .circularLayout2 > li:nth-child(2) .picGrid .pic {
        width: 100%;
        float: none;
    }
    
    .circularLayout3 > li:nth-child(1), .circularLayout3 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .circularLayout3 > li:nth-child(2) .picDataGrid .pic {
        width: 100%;
        height: 280px;
    }

    .circularLayout3 > li:nth-child(2) .picDataGrid .data {
        width: 100%;
    }
    
    .circularLayout3 > li:nth-child(2) .picDataGrid .data .item {
        padding: 20px 0;
    }

    .circularLayout4 > li:nth-child(1), .circularLayout4 > li:nth-child(2), .circularLayout3 > li:nth-child(3) {
        width: 100%;
        padding: 0;
    }
    
    .circularLayout4 > li:nth-child(1) {
        width: 100%;
        padding: 0;
    }

    .circularLayout4 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .circularLayout4 > li:nth-child(2) .pic {
        height: 280px;
        background: url(../img/circular_11.jpg) 90% top no-repeat;
        background-size: 150%;
    }

    .circularLayout4 > li:nth-child(2) .pic{
        margin: 0 0 25px
    }

    .circularLayout4 > li:nth-child(3) {
        width: 100%;
        padding: 0;
    }

    .circularLayout5 > li:nth-child(1), .circularLayout5 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .circularLayout5 > li:nth-child(2) .pic1, .circularLayout5 > li:nth-child(2) .pic2 {
        height: 300px;
    }
    
    .circularLayout6 > li:nth-child(1), .circularLayout6 > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    /*--------------------------------------------------*/
    .newsArticleTitle {        
        font-size: 20px;
    }

    #newsList .title {
        text-align: left;
        font-size: 16px;
    }
    
    #newsList .accordionCont {
        padding: 10px 20px;
    }    
    
    /*--------------------------------------------------*/
    .hrCoLayout li {
        padding: 10px 0px;        
        float: none;
    }

    .hrCoLayout .title {
        font-size: 20px;
    }
    
    .hrLayout1 {
        margin: 0;
    }
    
    .hrLayout1 li:nth-child(1) {
        width: 100%;
    }

    .hrLayout1 li:nth-child(2) {
        width: 100%;
    }

    .hrLayout1 li .benefit > li {
        width: 100%;
        margin: 5px 0;
        float: none;
    }
    
    .hrLayout1 li .benefit > li:nth-child(1), .hrLayout1 li .benefit > li:nth-child(2), .hrLayout1 li .benefit > li:nth-child(3), .hrLayout1 li .benefit > li:nth-child(4), .hrLayout1 li .benefit > li:nth-child(5) {
        height: auto;
    }
    
    .hrLayout1 li .benefit > li:nth-child(4) {
        width: 100%;
    }
    
    .hrLayout2 li:nth-child(1) {
        width: 100%;
    }
    
    .hrLayout2 li:nth-child(1) .focusBtn {
        width: 80%;
        margin: 30px 10% 5px;
    }

    .hrLayout2 li:nth-child(2) {
        width: 100%;
    }

    .hrLayout2 li:nth-child(3) {
        width: 100%;
    }
    
    .hrLayout3 {
        width: 100%;
    }

    .hrLayout3 .focusBtn {
        width: 80%;
        margin: 30px 10% 0;
    }

    .hrLayout3 .space {
        height: 30px;
    }
    
    /*--------------------------------------------------*/    
    .newsCaption {
        font-size: 28px;
    }
    
    .newsletter .inputInfo {
        width: 100%;
    }
    
    .newsletter .inputInfo input[type="text"] {
        width: 65%;
    }
    
    .newsletter .inputInfo .btn {
        width: 30%;
    }
    
    /*--------------------------------------------------*/
    .rule .title {
        font-size: 24px;
    }
    
    .ruleList li {
        width: 100%;
        padding: 3px;
    }
    
    .ruleList li:hover a{
        transform: none;
    }
    
    .investorTopicCover .caption {
        top: auto;
        bottom: 6%;
        text-shadow: 3px 3px 10px #303030, -1px -1px 10px #303030;
    }
    
    .investorCoLayout > li {
        margin: 10px 0;
        padding: 0;
        float: none;
    }

    .investorCoLayout > li:nth-child(1) {
        display: none;
        width: 100%;
    }

    .investorCoLayout > li:nth-child(2) {
        width: 100%;
        padding: 0;
    }
    
    .investorCoLayout > li:nth-child(2) .title{
        font-size: 24px;
    }
    
    .investorCoLayout .focusBtn {
        width: 60%;
        margin: 5px 20%;
        float: none;
    }
    
    .investorInfoBoxBG .closeBtn {
        top: 10px;
        right: 10px;
    }
    
    .investorInfoBoxBG .infoListAccordion {
        width: 95%;
        height: 90%;
        margin: 55px auto 0;
        padding: 15px;
    }
    
    .investorInfoBoxBG .infoListAccordion h3 {
        text-align: left;
        font-size: 16px;
    }
    
    .investorInfoBoxBG .infoListAccordion .statement {
        padding: 0 0 0 25px;
        text-align: left;
    }
    
    .financeList li {
        width: 100%;
        padding: 0;
    }
    
    .financeList li .item .cont a {
        padding: 12px 10px;
    }
    
    .financeList li .item .cont .empty {
        display: none;
    }
    
    .financeCalendar table {
        width: 100%;
    }
    
    .financeCalendar table ul {
        padding-left: 40px;
    }
    
    .shareholderList li {
        width: 100%;
        padding: 0;
    }
    
    .shareholderList li .item .cont .empty{
        display: none;
    }
    
    .irList {
        width: 100%;
    }

    .irList li {
        width: 100%;
        margin: 10px 0;
    }
    
    .irList li .icon {
        width: 40px;
        height: 270px;
    }
    
    .irList li .icon i {
        font-size: 24px;
    }
    
    .irList li .cont {
        width: 87%;
        height: 270px;
    }
    
    .irList li .cont table tr td:nth-child(1){
        width: 50px;
        vertical-align: top;
    }
    
    .investorList {
        width: 100%;
    }

    .investorList li {
        width: 100%;
        padding: 0;
    }
    
    .investorList li .item .cover {
        height: 160px;
    }
    
    .investorList li .item .cover .coverMask {
        bottom: -128px;
    }
    
    .investorList li .item:hover .cover .coverMask {
        bottom: -128px;
    }
    
    .investorList li .item .cover .year {
        bottom: 3px;
    }
    
    .investorList li .item .cont {
        height: auto;
    }
    
    .investorList li .item .cont .file i {
        color: #ce2a2a;        
    }    

    .investorList li .item .cont .video i {
        color: #49acff;
    }

    .investorList li .item .cont a .name {
        font-size: 16px;
        color: #808080;
    }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
    .homeBanner li a .cover {
        height: 320px;
    }
    
    .aboutChairmanTopicCover {
        background: url(../img/aboutCover_02.webp) 75% 60% no-repeat;
        background-size: cover;
    }
    
    .aboutOperstionTitle {
        width: 25%;
        text-align: left;
    }
    
    .aboutOperstionCont {
        width: 75%;
    }
    
    .contact ul li {
        height: 300px;
    }
    
    .contact ul li .menu .txt {
        height: 20%;
        top: 50%;
        bottom: 0;
        left: 0;
        font-size: 36px;
    }
    
    .contact ul li:nth-child(1) .menu .txt {
        height: 65%;
    }
}
/*---------- RWD (end) ----------*/