/* -----------------------------------------
A.  Responsive: w1025+
B.  Responsive: w900 - w1024 
C.  Responsive: w480 - w899
D.  Responsive: w768 / w780
E.  Responsive: w320 - w479
P.  Print

    1. Common
    2. Header
    3. Main Page
    4. Page Heading
    5. Page
        5.1 Board-Directors Page Content
        5.2 Services Page Content
        5.2.2 Products Page Content
        5.3 Investor Page Content
        5.4 Joinus Page Content
        5.5 Financial Page Content
        5.6 Stock Price Page Content
        5.7 Our-customers Page Contant
        5.8 Social Responsibility Page Content
        5.9 New Page Content
        5.9.2 New Details Page Content
        5.10 Disclaimer Page Content
        5.11 Location Page Content
        5.12 Sitemap Page Content
        5.14 Supporting-team Page Content
    6. Page Sidebar
    7. Page Control Number
    8. Form - Contact (investor-enquiries.php, contact.php)
    9. Form - Apply (joinus.php)
    10. Footer
    11. Related_links

----------------------------------------- */
@charset 'UTF-8';
@charset 'iso-8859-15';
@import url(https://fonts.googleapis.com/css?family=Tenor+Sans);


/* A1. Common
----------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} 

body {line-height: 1;}
ol, ul{list-style:none;} 
blockquote, q{quotes:none;} 
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;}
del{text-decoration:line-through;} 
table{border-collapse:collapse; border-spacing:0;}

body { 
    width: 100%;
    min-width: 320px;
    height: 100%;
    float: left;
	font-size: 1em;
	line-height: 1.25em;
	font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important;
	color: #333;
    background: url(../images/inner_bg.jpg) top center no-repeat #3D3D3D/*#f3eee5*/;
    background-attachment: fixed;
    background-size: cover;

}

h1, h2, h3, h4 {letter-spacing: -1px;}
h1, h2, h3, h4, h5, h6 {color: #181818;	line-height: 1.60;}
h1 { font-size: 2em; color: #2262AD; line-height: 1.15em; margin: 20px 0 ;}
h4 { font-size: 1em;margin-bottom: 11px;}

p { line-height: 1.45em;margin-bottom: 20px;font-size: 13px;}


ul, ol {margin-bottom: 18px;}
ul {list-style: none outside;}
li {margin-bottom: 12px;}

a, a:visited {color: #444444; text-decoration: none;}
a:hover {color: rgb(32,178,170); text-decoration: none;}
a.highlight {color: rgb(32,178,170); font-weight: bold; }

.right {text-align: right}

.font-red {color:red}



::selection {color: #fff; background: rgba(32,178,170,0.8);}
::-webkit-selection {color: #fff; background: rgba(32,178,170,0.8);}
::-moz-selection {color: #fff; background: rgba(32,178,170,0.8);}
::-o-selection {color: #fff; background: rgba(32,178,170,0.8);}
::-ms-selection {color: #fff; background: rgba(32,178,170,0.8);}


/* A2. Header
----------------------------------------- */
header {
	background-color: rgba(0,0,0,0.7);
    background: url(../images/menubg.png) repeat-x center top rgba(0,0,0,0.5);
	width: 100%;
	min-height: 150px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}

.header_inner {
    background-color: rgba(0,0,0,0.7);
    background: url(../images/menubg.png) repeat-x center top rgba(0,0,0,0.9);
}

header .wrapper {width: 100%; }

header, #logo, nav, #menu-icon, 
.main-nav,  .main-nav li i,
.drop-nav li, .drop-nav li a{
    
    /* transition */
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
	transition: 0.3s;
} 

#logo{
    margin: 0px;
	width: 260px;
	height: 150px;
    left: 0;
    float: left;
	background: url(../images/Xinyi-Hong-Kong.png) no-repeat;
    background-position: left top;
    background-size: auto 108%;
	display: block;
    position: absolute;
    z-index: 100
}
#logo > h1{ text-indent: -999px}

nav {float: right;padding: 20px; }

#menu-icon { display: hidden;}


.main-nav { float: right; position: relative; z-index: 99; background-color: transparent; margin-top: 45px; }

  .main-nav > li { float: left; text-align: center; border-bottom: 3px solid rgba(0,0,0,0); min-width: 96px}
  .main-nav > li:hover {border-bottom: 0; }
  .main-nav > li:hover > a{ color: #fff;  border-bottom: 3px solid rgba(163,248,246,0.6)}

  .main-nav .dropdown:nth-child(3) {width: 110px}
/*.main-nav .dropdown:nth-child(4) {width: 110px}*/

/*.main-nav > li > a > i { color: rgba(255,255,255,0.2); width: 100%; height: auto; float: none; clear: both; text-align: center; padding-bottom:15px; margin-top: -10px}
.main-nav > li:hover > a > i {color: rgba(163,248,246,0.6)}
.main-nav > li:nth-child(1):hover > a > i {color: rgba(32,178,170,0.8)}*/

.page1 .main-nav > li:nth-child(1):hover > a,
.page2 .main-nav > li:nth-child(2):hover > a,
.page3 .main-nav > li:nth-child(3):hover > a,
.page4 .main-nav > li:nth-child(4):hover > a,
.page5 .main-nav > li:nth-child(5):hover > a,
.page6 .main-nav > li:nth-child(6):hover > a,
.page7 .main-nav > li:nth-child(7):hover > a,
.page8 .main-nav > li:nth-child(8):hover > a
{ border-bottom: 3px solid rgba(32,178,170,0.8) }


.main-nav li .current { width: 60px; min-width: inherit}
.main-nav > li > a{ padding-bottom:20px; font-weight: bold}
.main-nav > li > a > img {margin: 15px 0}
.main-nav a {
color: #eee;
display: block;
text-decoration: none;  }

.main-nav .menu_sitemap {display: none}   

.dropdown:after {
  /*content: "\25BC";*/
  font-size: .5em;
  display: block;
  position: absolute;
  color: #bbb;
  top: 70%;
  right: 0%;
}
.dropdown:hover .drop-nav { display: block; height: auto; width: 200px; }
.dropdown:hover .drop-nav li { display: block; top:0}


.drop-nav {z-index: 100; top:105px; min-height: 0px; height: 0; width: 0; position: absolute; background-color: rgba(0,0,0,0.8);}

    .drop-nav li { border-bottom: none;font-size: 0.95em; color: #bbb; top:-100px; width: auto; white-space: nowrap; display: none; background: url(../images/line.png) center top no-repeat; background-size: 80% 1px}
    .drop-nav li:first-child{background: none}
    .drop-nav > li > a{color: #bbb; padding: 10px 10px 10px 30px; text-align: left;}
    .drop-nav > li > a > i {padding-right: 10px}
    .drop-nav li:hover a {color: #fff; background: rgba(101, 200, 198,0.6)}

.lang {float: right; position: absolute; right: 10px; top: 10px;}
.lang-wrapper { display: inline-block;}
.lang-wrapper .lang_btn { cursor: pointer; display: inline-block; color: #fff; border: 1px solid #fff; width: 30px; padding: 5px 0; text-align: center; margin-right: 5px; opacity: 0.5; font-size: 0.9em}
.lang-wrapper .lang_btn:hover {opacity: 1}

.social {display: none}
.slicknav_menu .lang {display: none}

.slicknav_menu, .mobile_menu, .mobile_link {display:none;}


/* A3. Main Page
----------------------------------------- */
.homepage{width:100%;height:11.25rem;height:100vh; text-align: center;}

#gradient {width: 100%; height: 100%}


.homepage>article{
    position:relative;
    top:50%;
  
        -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        transform:translateY(-50%);
    
        -webkit-transform-style:preserve-3d;
        -moz-transform-style:preserve-3d;
        transform-style:preserve-3d;}

.homepage>article>img{width: 90%}
.homepage>article>h2{
    color:white;
    text-align:center;
    font-weight:normal;
    font-style:normal;
    font-size:5em;
    line-height:1.5em;
    color:#fff;
    text-transform: uppercase;
    font-family: 'Tenor Sans', sans-serif;
    text-shadow:0 0 10px rgba(16,16,16,0.8)}

    .homepage>article>h2>span{
        white-space: nowrap   
    }

.homepage>article>h3{
    color:white;
    text-align:center;
    font-weight:300;
    font-style:normal;
    font-size:2em;
    line-height:1.5em;
    color:#fff;
    text-transform: capitalize;
    font-family: 'Tenor Sans', sans-serif;
    text-shadow:5px 5px 6px rgba(16,16,16,0.8)}

#arrow_left {display: none} 
#arrow_right {display: none} 


.in-slide-content { 
        color:#fff;
        float:right;
        font-size:1em;
        font-weight: normal;
        padding: 20px 40px;
        position:absolute;
        /* top: 45%; */
        top: 50%;
        left: 50px;
        width:500px;
        z-index:9999; /* Show above .gradient */
        text-shadow: 0 3px 0 #000;
        /*border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;*/
    }

    .in-slide-content .line {width: 100%;height: 3px}

    .in-slide-content .title {font-size:3em; margin-bottom:10px;font-weight:bold; padding:40px 20px 0 20px; float: left}

    .in-slide-content p {font-size:1em; margin-top: 10px;position: relative; padding:0 20px 30px 20px; text-shadow: 1px 1px 1px #000; float: left; font-weight: bold; color: #fff}

.in-slide-content.first-slide {
        color:#fff;
        float:none;
        font-size: inherit;
        font-weight: inherit;
        margin:inherit;
        padding:inherit;
        position:inherit;
        top:inherit;
        left: inherit;
        width:inherit;
        z-index:9999; /* Show above .gradient */
        text-shadow:  0 0 10px #000;
        border: 0;
        background-color: rgba(0,0,0,0)
}

/* A4. Page Heading
----------------------------------------- */
h1.title, h2.title{
	font-weight:400;
	margin-bottom:20px;
	float:left;
	width:100%;
}

h1.title{
	font-size:46px;
	line-height:90px !important;
}

h2.title{
	font-size:36px;
	line-height:80px !important;
}

#heading-wrapper small{
	line-height:0px;	
}

#heading-wrapper {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	min-height:350px;
	z-index:-99;
	margin-bottom:40px;
}

#heading-wrapper.heading-image .hs-content {
	margin-top:94px;
}

#heading-wrapper.heading-image .center h1 {
    text-align: right;
    opacity: 0;
}

#heading-wrapper img{
	position:absolute;
	top:-250px;
	left:0px;
	width:100%;
	z-index: -99;
	max-width:none !important;
}

.hs-content {
	z-index: 300;
	position:relative;
	display:none;
	color:#fff;
}

#heading-wrapper .bgc{
	background:#222;
	opacity: 0.80;
	filter:alpha(opacity=80);
	text-shadow:0px -2px 0px #000;
	color:#fff;
	padding:20px 15px; 
}

/* A5. Page
----------------------------------------- */
.main_inner {width: auto; height: auto; float: left; position: relative; margin: 150px 6% 50px 6%}
.main_inner .row {text-align: center; margin: 0 auto; width: 100%; height: 100%; float: left}

#top {position:absolute; top:-150px}
#content-wrapper {width: 100%; float: left; margin: 0 auto;}


.columns{float: left; padding: 50px 0px 50px 300px }
.columns .wrapper {  }

.columns h4{    
    font-size: 1.2em;
	line-height: 1;
	font-weight: bold;
	color: #fff;
    box-shadow: 0 0 5px #ccc; 
    border-bottom: 2px solid #ccc;
}

.row .content {margin:0 auto; }
.row .content .wrapper {width: 100%; float: left; position: relative}
.row .content .header{
    width: 100%;
    font-size: 1.8em;
	line-height: 1.6;
	font-weight: bold;
	margin-bottom: 11px;
    text-align: left;
    display: inline-block;
    overflow: hidden;
    float: left;
}

.row .content .header .header-wrapper { width: 100%; float: left}
.row .content .header .header-wrapper span {float: left}
.row .content .header .header-wrapper:before{content: ''; background: url(../images/titleline_l.png) left center no-repeat; width: 4%; max-width: 20px; height: 1.6em; float: left; margin-right: 10px}
.row .content .header .header-wrapper:after{content: ''; background: url(../images/titleline_r.png) left center no-repeat; width: 30%; height: 1.6em; float: left; margin-left: 10px}


/* A5.1 Board-Directors Page Content
----------------------------------------- */
.board-directors .row1 h3 {font-size: 1.2em; font-weight: bold; margin-bottom: 5px}
.board-directors .row1 p {font-size:0.95em; line-height: 1.7em; margin-bottom: 20px}
.board-directors .row1 .line {height: 1px; width: 100%; background: url(../images/line2.jpg) left center no-repeat #aaa; background-size: cover; margin: 20px 0;}

.board-directors .highlight {color:rgba(25, 162, 155, 1); font-size: 1.05em; font-weight: bold; font-family: initial;}


/* A5.2 Services Page Content
----------------------------------------- */
.row-wrapper {float: left; width: 100%;}
.row1 {float: left; width: 100%; text-align: left; }
.row1 p {text-align: justify; line-height: 1.5em; margin-bottom: 30px}

.row2 {float: left; width: 100%; }
.row2-wrapper {text-align: center; margin: 0 auto; max-width: 100%}
.wrapper div {
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    -o-animation-duration: 0.3s;
    -ms-animation-duration: 0.3s;
    animation-duration: 0.3s;}
.row2-wrapper div:nth-child(1) {-webkit-animation-delay: 0.3s; -ms-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s;}
.row2-wrapper div:nth-child(2) {-webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s;}
.row2-wrapper div:nth-child(3) {-webkit-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s;}
.row2-wrapper div:nth-child(4) {-webkit-animation-delay: 1.2s; -ms-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s;}
.row2-wrapper div:nth-child(5) {-webkit-animation-delay: 1.5s; -ms-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s;}
.row2-wrapper div:nth-child(6) {-webkit-animation-delay: 1.8s; -ms-animation-delay: 1.8s; -moz-animation-delay: 1.8s; -o-animation-delay: 1.8s; animation-delay: 1.8s;}
.row2-wrapper div:nth-child(7) {-webkit-animation-delay: 2.1s; -ms-animation-delay: 2.1s; -moz-animation-delay: 2.1s; -o-animation-delay: 2.1s; animation-delay: 2.1s;}
.row2-wrapper div:nth-child(8) {-webkit-animation-delay: 2.4s; -ms-animation-delay: 2.4s; -moz-animation-delay: 2.4s; -o-animation-delay: 2.4s; animation-delay: 2.4s;}
.row2-wrapper div:nth-child(9) {-webkit-animation-delay: 2.7s; -ms-animation-delay: 2.7s; -moz-animation-delay: 2.7s; -o-animation-delay: 2.7s; animation-delay: 2.7s;}
.row2-wrapper div:nth-child(10){-webkit-animation-delay: 3.0s; -ms-animation-delay: 3.0s; -moz-animation-delay: 3.0s; -o-animation-delay: 3.0s; animation-delay: 3.0s;}

.row2 .services_unit { width: 100%; position: relative; margin: 0px}
.row2 .services_unit:nth-child(1) {}
.row2 .services_unit:nth-child(odd) {text-align: left}
.row2 .services_unit:nth-child(even) {text-align: right}
.row2 .services_unit div .service_photo { 
    position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
	transition: all 0.3s;}
.row2 .services_unit div:hover .service_photo {
    -moz-transform:scale(1.05); 
    -webkit-transform:scale(1.05);
    -o-transform:scale(1.05);
    -ms-transform:scale(1.05);
    transform:scale(1.05)
    }
.row2 .services_unit .service_des {float: left; position: absolute; top:-15px; width: 350px; height: 150px; font-size: 0.95em; text-align: justify; font-weight: 600; line-height: 1.7em; color: #fff; background-size: cover; }
.row2 .services_unit:nth-child(odd) .service_des {left: 180px;}
.row2 .services_unit:nth-child(even) .service_des {right: 300px;}
.row2 .services_unit .service_des p{height: 100%; padding: 20px 0}
.row2 .services_unit:nth-child(even) .service_des p {padding: 30px 0}



/* A5.3 Investor Page Content
----------------------------------------- */
.notice_list {margin-bottom: 30px; }
.notice_list li {margin: 10px 0; font-size: 0.9em; border-bottom: 1px dotted #bbb; padding-bottom: 5px }
.notice_list li div {display: inline-block; text-align: left; vertical-align: top}
.notice_list li:nth-child(1) {border-bottom: 1px solid #aaa; font-size: 1em; font-weight: bold; padding-bottom: 10px}

.notice_list li div.date {width: 9%; min-width: 90px; max-width: 90px}

.notice_list li div.type, .notice_list li div.type_h {width: 15%; min-width: 100px; max-width: 100px; text-align: center}
.notice_list li div.type::before {content: '【' /*url(../images/type_l.png)*/; vertical-align:sub}
.notice_list li div.type::after {content: '】' /*url(../images/type_r.png)*/; vertical-align: sub}

.notice_list li div.download {width: 6% ;min-width:50px; text-align: center; padding-right: 10px}
.notice_list li div.download img {cursor: pointer; 
    /*transition*/
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
	transition: all 0.3s;}
.notice_list li div.download img:hover {margin-top: 5px}
.notice_list li div.download a:hover {color: rgb(32,178,170)}

.notice_list li div.description {width: 55%; }


/* A5.4 Joinus Page Content
----------------------------------------- */
.joinus_list {margin-bottom: 30px; }
.joinus_list li {margin: 10px 0; font-size: 0.9em; border-bottom: 1px dotted #bbb; padding-bottom: 5px; padding-left: 25px }
.joinus_list li div {display: inline-block; text-align: left; vertical-align: top; line-height: 1.2em}
.joinus_list li:nth-child(1) {border-bottom: 1px solid #aaa; font-size: 1em; font-weight: bold; padding-bottom: 10px}

.joinus_list li div.post_name {width: 15%}
.joinus_list li div.post_location {width: 15%; }
.joinus_list li div.post_res {width: 20%; }
.joinus_list li div.post_exp {width: 40%; }


/* A5.5 Financial Page Content
----------------------------------------- */
.financial_box {padding-bottom: 30px; margin-right: 3%;  width: 47%; max-width: 300px; height: auto; font-size: 1em; border-top: 3px solid rgb(19, 150, 144); float: left}
.financial_box div a:hover {color: rgb(32,178,170)}

.financial_box div.topic {background-color: rgba(0,0,0,0.7); padding: 10px 10px 10px 20px; margin-bottom: 10px; font-size: 1.2em; color: #fff}
.financial_box div.topic img {margin-right: 10px}


.financial_box .report {float: left; width: 100%; height: 100%; text-align: center; background: rgba(255,255,255,0.1); box-shadow: 0 0 3px #999; margin-bottom: 10px; }
.financial_box .report-wrapper {padding:10px; overflow: hidden;
    /*transition*/
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
	transition: all 0.3s;}
.financial_box .report-wrapper:hover {background: rgba(255,255,255,0.5)}
.financial_box .report-wrapper .photo {float: left; width: 50%}
.financial_box .report-wrapper .photo img {width: 40%; float: left}
.financial_box .report-wrapper .text {line-height: 1.5em; padding: 5px 10px; float: left}
.financial_box .report-wrapper .text::before {width: 15px; content: url('../images/btn_download.png'); padding-right: 10px }

/*.financial_box .text span.new::after {content: '最新'; color: red; font-size: 0.8em; font-weight: bold; padding-left: 10px}*/


/* A5.6 Stock Price Page Content
----------------------------------------- */
.stock-price_row {float: left; width: 100%; text-align: left; width: 720px; height: 530px; /*background-color: rgba(0,0,0,0.2)*/}

.stock_price_more {position: relative; float: left; height: 50px}
.stock_price_more img {
    position: absolute;
    /*transition*/
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
	transition: all 0.5s;}
.stock_price_more img:nth-child(1) {opacity: 1}
.stock_price_more img:nth-child(2) {opacity: 0}
.stock_price_more:hover img:nth-child(1) {opacity: 0;}
.stock_price_more:hover img:nth-child(2) {opacity: 1}

.stock-price_row iframe {
    transform:scale(0.8,0.8);
    position: absolute;
	top: 0;
	left: -10%; 
    }


/* A5.7 Our-customers Page Contant
----------------------------------------- */
.logo_insurance {width: 300px;  float: left; box-shadow: 0 0 5px #ccc; margin-right: 20px; margin-bottom: 20px }




/* A5.8 Social Responsibility Page Content
----------------------------------------- */
.social_responsibility_row {float: left; width: 100%; margin-bottom: 10px}
.social_responsibility_row .photo {width: 100%; max-width: 720px; float: left; }
.social_responsibility_row .photo img {width: 100%; height: auto; float: left} 

/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div           (normal)
.jssorb01 div:hover     (normal mouseover)
.jssorb01 .av           (active)
.jssorb01 .av:hover     (active mouseover)
.jssorb01 .dn           (mousedown)
*/
.jssorb01 {
    position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
    position: absolute;
    /* size of bullet elment */
    width: 12px;
    height: 12px;
    filter: alpha(opacity=70);
    opacity: .7;
    overflow: hidden;
    cursor: pointer;
    border: transparent 1px solid;
}

.jssorb01 div { background-color: rgba(255,255,255,0.3); }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #64C7C6; }
.jssorb01 .av { background-color: #139690; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #fff; }

/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l                  (normal)
.jssora02r                  (normal)
.jssora02l:hover            (normal mouseover)
.jssora02r:hover            (normal mouseover)
.jssora02l.jssora02ldn      (mousedown)
.jssora02r.jssora02rdn      (mousedown)
*/
.jssora02l, .jssora02r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 55px;
    height: 55px;
    cursor: pointer;
    background: url('../images/arrow.png') no-repeat;
    overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }



/* A5.9 New Page Content
----------------------------------------- */
.new_list {margin-bottom: 50px; font-size: 0.9em;}
.new_list li, .new_list a li {border-bottom: 1px dotted #bbb; padding: 10px 0}
.media a li {background: url(../images/btn_enter.png) right center no-repeat rgba(255,255,255,0.0);
    /* transition */
	-webkit-transition: background 0.3s ease-in;
	-moz-transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
    -ms-transition: background 0.3s ease-in;
	transition: background 0.3s ease-in}
.media a:hover li {background-color: rgba(255,255,255,0.6)}
.new_list li div, .new_list a li div {display: inline-block; text-align: left; vertical-align: top}
.new_list > li {border-bottom: 1px solid #aaa; font-size: 1.3em; font-weight: bold; }

.new_list a li div.photo {padding-right: 10px;}

.new_list a li .text {width: 75%; font-weight: normal; }
.new_list a li .text .date {padding: 0 10px;color: #888; font-size: 0.8em}
.new_list a li .text .date::before {content: '['}
.new_list a li .text .date::after {content: ']'}
.new_list a li .text span.new::after {content: '最新'; background-color: #CC0606; color: #fff; font-size: 0.8em; font-weight: bold;padding: 2px 5px}

.new_list a li .text .description {padding: 10px}
.new_list a:hover li .text .description {color: #444;}
.new_list a li .text .description #more::before {content: ' '; margin-left: 10px}
/*.new_list a li .text .description #more::after {content: '更多...'; color: #19A29B; font-size: 0.8em; font-weight: bold}*/
.new_list a:hover li .text .description #more::after { border-bottom: 1px solid #19A29B; color: #19A29B;}


div.media_address {font-size: 1.05em; line-height: 1.5em}

table.media_contact {margin-top: 20px;}
table.media_contact tr td {padding-bottom: 10px}
table.media_contact tr td:nth-child(1) {width: 120px; vertical-align: top}
table.media_contact tr td:nth-child(1):after {float: right; content: '：'; margin-right: 5px}
table.media_contact tr td img {padding-right: 10px;}


.new_list.details {margin-bottom: 10px;} 
.new_list li .topic {width: 100%; font-weight: normal; }
.new_list li .topic .date {padding-bottom: 10px;color: #888; font-size: 0.8em}
.new_list li .topic .date::before {content: '發佈日期： '}
.new_list li .topic .description {font-weight: bold; font-size: 1.25em; line-height: 1.32em}

.new_list li .content {margin: 10px 0}
.new_list li .content .photo {float: right; margin-left: 20px; margin-bottom: 20px}
.new_list li .content p {font-weight: normal; font-size: 0.85em; line-height: 1.8em; text-align: justify; margin-bottom: 30px}

.row3 {float: left; width: 48%; margin-right: 1%}


/* A5.10 Disclaimer Page Content
----------------------------------------- */
.disclaimer ul {list-style-type: disc; padding-left: 20px}
.disclaimer ul li {margin: 20px 0; font-size: 1em; line-height: 1.7em}


/* A5.11 Location Page Content
----------------------------------------- */
.location_table {margin-bottom: 10px; color: #616161; width: 100%; max-width: 800px}
.location_table tr td {padding: 10px 0; float: left}
.location_table tr:nth-child(1) td {font-size: 1.4em; letter-spacing: -0.05em; }
.location_table tr:nth-child(1) td span {margin-left: 10px}
.location_table tr:nth-child(2) td {font-size: 1em; width: auto; padding-right: 3%}
.location_table tr td img {margin-right: 15px}
.location_table tr td span { color:#35383B; font-family: 'Tenor Sans', sans-serif; font-weight: bold; }

#maptb .maptb_row { width: 100%; float: left}
#maptb .maptb_col { text-align:center; padding: 20px 20px 20px 0;float: left; max-width: 360px}
#maptb .maptb_col img {	width: 100%;}

#maptb .maptb_row:nth-child(1) .maptb_col:nth-child(1) img {-webkit-animation-delay: 0.3s; -ms-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s;}
#maptb .maptb_row:nth-child(1) .maptb_col:nth-child(2) img {-webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s;}
#maptb .maptb_row:nth-child(2) .maptb_col:nth-child(1) img {-webkit-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s;}
#maptb .maptb_row:nth-child(2) .maptb_col:nth-child(2) img {-webkit-animation-delay: 1.2s; -ms-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s;}


/* -----------------------------------------
   A5.12 Sitemap Page Content
----------------------------------------- */
.sitemap {float: none}
.sitemap .wrapper div {min-width: 550px}

#all_show, #all_hidden { float: right; display: inline; background-color: rgba(255,255,255,0.2); border: 0; padding:5px 10px; margin-bottom: 10px; cursor: pointer; font-size: 0.7em; border-radius: 2px ;font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important;}
#all_show:hover, #all_hidden:hover { 	background-color: rgb(93, 93, 93) ; color: #fff; }
.all_selected {background-color: rgba(255,255,255,0.6) !important; color: #000 !important}

/* A6. Page Sidebar
----------------------------------------- */
.row .sidebar {width: 250px; height: 100%; position: fixed; /*background: url(../images/sidebar/sidebar_bg.png) top center repeat-x;*/ background-color: rgba(255,255,255,0.1); box-shadow: 0 2px 5px #ccc}
.row .sidebar img {margin-top:50px; width: 100%}

#sidebar .title span.screen {display: block}
#sidebar .title span.mobile {display: none} 

ul.links {font-weight: 700; }
ul.links a {line-height: 20px;width: 100%; float: left; background: url(../images/sidebar/sidebar_arrow1.png) -250px center no-repeat transparent; 	background-size: 500px 100%;
    /* transition */
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
    -o-transition: background 0.3s;
    -ms-transition: background 0.3s;
	transition: background 0.3s;
}
ul.links a:hover{color: #fff; background: url(../images/sidebar/sidebar_arrow1.png) 0px center no-repeat transparent; background-size: 500px 100%;}
ul.links a li {font-size: 1.1em; padding: 20px 0; border-top: 1px solid #ccc ;cursor:  pointer; }
ul.links a:first-child li {border: 0}

#tothetop {position: fixed; right: 50px; bottom: 80px; width: 50px; height: 50px;
	/* transition */
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;}
#tothetop a {
    content: url(../images/btn_tothetop.png);
    background-color: #383838;
    text-decoration: none;
	/* transition */
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;}
#tothetop a:hover{background-color: #00a69c;}
#tothetop:hover, #tothetop a:hover {opacity: 1}


/* A7. Page Control Number
----------------------------------------- */
.page_control {text-align: center;}
.page_control button {outline: 0; padding: 3px 5px; margin: auto 2px; cursor: pointer; width: 30px; height: 25px; text-align: center; vertical-align: middle; color: #000; border: 0;background: rgba(0,0,0,0.0); 
	/* transition */
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
	-ms-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}
.page_control button:hover {color: rgba(25, 162, 155, 1); background: rgba(255,255,255,0.3)}

.page_control button.number {width: 40px; height: 30px; background: rgba(0,0,0,0.0); color:#000; font-weight: bold}
.page_control button.number.status {background: rgba(25, 162, 155, 1);  color: #fff}
.page_control button.number:hover  {background: rgba(0,0,0,0.7); color: #fff}

.new_details_control {text-align: left}
.new_details_control button {width: auto; min-width: 140px; text-align: left; border-left: 20px solid rgba(25, 162, 155, 1); background: rgba(255,255,255,0.2);}
.new_details_control button i {padding-right: 5px}



/* A8. Form - Contact (investor-enquiries.php, contact.php)
----------------------------------------- */
.form_row {margin: 10px 30px 40px 30px ; float: left; width: 100%;}

.form_col1 {width: 20%; min-width: 100px; float: left}
.form_col2 {width: 70%; min-width: 200px; float: left}

.form_row_input {width: 100%; float: left; margin-top: 5px }
.form_style p {text-align: left}
.form_style input, .form_style textarea {width: 100%; max-width: 400px; border: 1px solid #bbb; background: rgba(255,255,255,0.3); padding:5px; font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important; letter-spacing: 0em;}
.form_style input:focus, .form_style textarea:focus {outline: 2px solid rgba(101,200,199,1); border: 1px solid transparent; font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important;}
/*.form_style input::before, .form_style textarea::before {content: '： '; vertical-align: top;}*/
.form_style textarea {height: 100px; outline: 1px; outline-color: rgba(101,200,199,1)}
.form_style input[type="radio"] { width: 10%; max-width:15px; margin: 5px 30px 10px 0; } 
.form_style input[type="radio"]:nth-child(2) { margin-left: 30px; } 
.form_style select { margin-bottom: 10px; }

.form_style button {margin: 0 5px; background-color: rgba(255,255,255,0.3); border: 0; cursor: pointer; border:1px solid #bbb ; padding: 5px 30px; font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important;
	/* transition */
	-webkit-transition: 0.5s;
    -o-transition: 0.5s;
	-ms-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;}
.form_style button:hover { background-color: rgba(19,150,144,1); color: white; border: 1px solid rgba(19,150,144,1);}


.form_row_wrapper {margin: 5px auto; width: 100%; float: left}
.form_row_wrapper:nth-child(1) {margin-bottom: 20px; margin-left: 0}
.form_row_wrapper img {margin-right: 15px; margin-top: 5px; float: left}

.form_col {float: left}
.form_col:nth-child(1) {width: 95px}

.form_btn {width: auto;	margin-left: 20%; margin-top: 5px;}


/* A9. Form - Apply (joinus.php)
----------------------------------------- */
.joinus .form_row {margin-top: 5px; margin-bottom: 20px; font-size: 0.85em}
.joinus .form_row.form_details {margin-top: 5px; margin-bottom: 10px} 

.joinus .form_style h3 {margin: 0 0 5px 0; font-weight: bold; font-size: 1.2em; float: left; box-shadow: 0 0 2px #1D8086}
.joinus .form_style input[type=radio] {width: 18px; height: 18px; margin: 0 5px 0 0 ; vertical-align: middle; float: left; cursor: pointer;}
.joinus .form_style input[type=radio]:hover, .joinus .form_style input[type=radio]:focus, .joinus .form_style input[type=radio]:checked {outline: 0}
.joinus .form_style label {float: left}
.joinus .form_style input[type=date] {max-width: 150px; cursor: pointer}
.joinus .form_style input[type=file] {cursor: pointer; }
.joinus .form_style input, .joinus .form_style textarea {width: 60%; margin-bottom: 5px; padding: 2px; }
.joinus .form_style input::before, .joinus .form_style textarea::before {content: ''}
.joinus .form_style select {max-width: 400px; border: 1px solid #bbb; background: rgba(255,255,255,0.3); padding:2px; font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important; letter-spacing: 0em; margin-bottom: 5px; cursor: pointer}

.joinus .form_list {float: left;}
.joinus .form_list li {float: left; margin: 10px 0 10px 0; border-bottom: 1px dotted #999; padding-bottom: 10px}
.joinus .form_list li:last-child {margin-bottom: 10px; border: 0; padding: 0}

.joinus .form_col {width: 50%; min-width: 200px; float: left}
.joinus .form_col2 {width: 100%;}
.joinus .form_col h3, .joinus .form_col2 h3 {margin-top: 10px; font-size: 1.1em; box-shadow: 0 0 0}
.joinus .form_col h3 span, .joinus .form_col2 h3 span {font-size: 0.8em; font-style: italic; color: rgba(19,150,144,1);}
.joinus .form_col label, .joinus .form_col2 label {min-width: 100px;float: left}

.joinus .more {float: right; font-size: 0.8em; color: rgba(19,150,144,1); font-weight: bold; text-decoration: underline; margin-right: 10%}
.joinus .more:hover {text-decoration: underline}

.joinus .form_col2 label.work_date {min-width: auto; margin-right: 10px;}
.joinus .form_col2 input.work_date_desciption {width: 200px !important}
.joinus .agreement {margin-top: 10px; font-size: 0.9em; line-height: 1.2em}
.joinus .agreement input[type=checkbox] {float: left; width: 18px; height: 18px; cursor: pointer}
.joinus .agreement label {min-width: 50px; font-weight: bold; min-height: 50px}

.joinus .form_style button {margin: 20px 0; margin-right: 10px}


/* A10. Footer
----------------------------------------- */
footer .footer-wrapper {
	width: 100%;
	padding: 15px 0 15px 0;
	margin: 0 auto;
	text-align: center;
	position: fixed;
	float: left;
	color: #fff;
	font-size: 0.7em;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
}

.footer-wrapper div {display: inline-block; width: auto; padding: 0 5px}
.footer-wrapper .left {text-align: left; float: left;}
.footer-wrapper .center {text-align: center}
.footer-wrapper .right {text-align: right; float: right;}

.footer-wrapper div ul {}
.footer-wrapper div ul li {display: inline-block; margin: 0px 5px}

.footer-wrapper a {color: #fff !important; text-decoration: none;
    
    /* transition */
	-webkit-transition: color 0.3s ;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
    
}
.footer-wrapper a:hover {color: rgba(32,178,170,0.8) !important;}

a.youtube:hover {color: #CF3427 !important}
a.facebook:hover {color: #3D5A98 !important}
a.related_links_icon:hover {color: #19A29B !important}

.btn_screen {display: inline-block}
.btn_mobile {display: none}

.footer-wrapper .lang {display: none}

/* A11. Related_links
----------------------------------------- */
.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.popup_links {
    width: auto;
    margin: auto;
    position: absolute;
    top: 30%;
    left: 30%;
}

#related_links {
    z-index: 1001;
    width: 50%;
    min-width: 500px;
    max-width: 500px;
    position: relative;
    padding-bottom: 2px;
    display:none;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid #666; 
    border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 2px rgba(200,200,200,0.7); -moz-box-shadow: 0 0px 2px rgba(0,0,0,0.7);
}
            
#related_links-header { background: url(../images/popup_bg.png); padding: 18px 18px 14px 18px; border-bottom: 1px solid #CCC; border-top-left-radius: 5px; -moz-border-top-left-radius: 0px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-top-right-radius: 0px; -webkit-border-top-right-radius: 5px; }

#related_links-header  h2 { color: #444; font-size: 1.5em; font-weight: 700; margin-bottom: 3px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); }
#related_links-header  p { color: #444; font-size: 1em; margin: 0; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); text-shadow: none; }

#related_links .txt-fld { position: relative; padding: 14px 20px; text-align: center; }
#related_links .btn-fld { width: 254px; overflow: hidden; padding: 12px 20px 12px 130px; }

#related_links .txt-fld ul {width: 80%; height: 40px; padding: 0; font-size: 1.2em; font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important; cursor: pointer; margin: 0; border: 0; background: rgba(74,74,74,0.81); box-shadow: 0px 0px 2px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 2px rgba(200,200,200,0.7); -moz-box-shadow: 0 0px 2px rgba(0,0,0,0.7); color: #fff; outline: 0; border: 0;
    /* transition */
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
	-ms-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}
#related_links .txt-fld ul li {color: #fff; font-size: 1em; line-height: 2.2em; border-radius: 2px; font-weight: normal;
    /* transition */
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
	-ms-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;}
#related_links .txt-fld ul li:hover {background: rgba(255,255,255,0.3);}
#related_links .txt-fld ul li:checked {background: rgb(19, 150, 144);}
#related_links .txt-fld span { position: absolute; top: 12px; right: 10px; font-size: 0.9em; width: auto; padding: 10px 25px; margin: 0; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 1.2em; background: transparent; outline: none; border: 0; box-shadow: 0px 0px 8px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.7);cursor: pointer; color: #fff; font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif !important; cursor: pointer; background: rgba(0,0,0,0.6);
    /* transition */
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
	-ms-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}
#related_links .txt-fld span:hover, #related_links .txt-fld ul li:hover span {background: rgba(0,0,0,0.8); color: rgb(19, 150, 144); font-weight: normal}

.modal_close { position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../images/close2.png); z-index: 2; }
      


/* -----------------------------------------

   B.  Responsive: w900 - w1024 

----------------------------------------- */
@media only screen and (max-width:1024px){
    
/* B2. Header
----------------------------------------- */
.main-nav > li {min-width: 75px; font-size: 0.9em}
    
.main-nav .dropdown:nth-child(3), .main-nav .dropdown:nth-child(4) {width: 85px}
    
.dropdown:hover .drop-nav {width: auto}
.drop-nav > li > a {padding: 10px 20px}

  
/* -----------------------------------------
   B4. Page Heading
----------------------------------------- */
.row .content .header .header-wrapper img:nth-child(1) {width: 2.3%}
.row .content .header .header-wrapper img:nth-child(2) {width: 55%}
    
    
/* B5. Page
----------------------------------------- */
.main_inner { margin-left: 15px; margin-right: 15px}
.columns {padding-left: 22.5%}        
    
.row .sidebar {width: 20%;}
.row .sidebar ul.links a li {padding: 15px 0; font-size: 1em}
.row .sidebar img {width: 100%;}
    
ul.links a:hover {background: url(../images/sidebar/sidebar_arrow1.png) 12% center no-repeat #03A79D; background-size: 500px 100%;}
    
#tothetop {right: 30px}
    
    
/* B5.2 Services Page Content
----------------------------------------- */
.row2 .services_unit {min-height: 200px}
.row2 .services_unit:nth-child(even) .service_des {right: 150px}
.row2 .services_unit .service_des {width: auto}
    
/* B5.2.2 Products Page Content
----------------------------------------- */  
.row2-wrapper .services_unit div img {max-width: 600px}
    
    
/* B5.2.2 Products Page Content
----------------------------------------- */
.products .row2 .services_unit:nth-child(even) {text-align: left}

    
/* B5.3 Investor Page Content
----------------------------------------- */ 
.notice_list li {min-height: 50px}
.notice_list li:nth-child(1) {min-height: inherit}
.notice_list li div.description {width: 58%;}
 
    
/* B5.6 Stock Price Page Content
----------------------------------------- */ 
.stock-price_row img {width: 600px}
    

/* B5.8 Social Responsibility Page Content
----------------------------------------- */
#jssor_1, #jssor_2 {width: 100% !important}
    
    
/* B5.9 New Page Content
----------------------------------------- */
.row3 {width: 100%; max-width: 520px; text-align: left; margin: 0}
    
    
/* B5.11 Location Responsibility Page Content
----------------------------------------- */
#maptb .maptb_col {padding-right: 5px}    
    
    
/* B5.12 Sitemap Page Content
----------------------------------------- */
.sitemap .wrapper div {min-width: 600px}
    
    
/* B8. Form - Contact (investor-enquiries.php, contact.php)
----------------------------------------- */
.form_row {width: auto}    
    
    
/* B11. Related_links
----------------------------------------- */ 
.popup_links {top:100px; left: auto;width: 100%}

#related_links {width: auto; margin: 120px 25%; min-width: inherit;}   
#related_links .txt-fld span {top: 15px; }
    
    
}


/* -----------------------------------------

   C.  Responsive: w480 - w899 

----------------------------------------- */
@media only screen and (max-width:899px){
    
    
/* C1. Common
----------------------------------------- */    
.fixed {position: fixed}

/* C2. Header
----------------------------------------- */
.page_main header {min-height: 40px;top:100px;}   
.page_main #menu-icon {margin-top: 50px}
    
header { min-height: 40px; }
#logo{height: 40px; width: 50%; position: relative; top: 0; left: 0; background-position: center top; margin-left: 28%; background: url(../images/Xinyi-Hong-Kong_mobile.png) center center no-repeat; background-size: auto 100% }
    .page_main #logo {height: 100px; width: 175px; position: fixed; margin: 0; background: url(../images/Xinyi-Hong-Kong.png) left top no-repeat; background-size: auto 108%}
    
#menu-icon {display:inline-block; width: 50px; height: 50px; background: rgba(0,0,0,0.3) url(../images/menu-icon.png) center no-repeat; background-size: 30px 30px; margin-top: 0px}
a:hover#menu-icon {	background-color: #444;	border-radius: 0;}

.main-nav .dropdown:nth-child(3), .main-nav .dropdown:nth-child(4) {width: 100%; min-width: inherit; max-width: none}
.drop-nav {position: relative; top: auto; background: rgba(49, 49, 49, 0.8)}
.drop-nav > li > a {padding-left: 70px}
.drop-nav li:hover a {background: rgba(209, 211, 213, 0.16)}
    
.main-nav {margin-top: 0px}    
.main-nav > li > a {padding-bottom: 10px}
.main-nav > li:hover > a {border-bottom: 0}    
.main-nav > li > a > img {margin: 0 20px}
    
.main-nav .menu_sitemap {display: block}    
    
.lang {display: none} 
    
.menu_black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:99;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}

.menu_btn {border-top: 1px solid rgba(255,255,255,0.3); width: 100%; text-align: center; float: left; position: relative; padding: 20px;}   
.slicknav_menu .lang {display: block; position: relative; text-align: left; right: 0; top:0px; margin: 0; float: left}    
.slicknav_menu .lang .lang-wrapper .lang_btn {margin-right: 0; border: 0; width: 30px; background: rgba(66, 66, 66, 0.58); padding:5px; opacity: 1; }
.slicknav_menu .lang .lang-wrapper .lang_btn:hover {background: rgba(66,66,66,1)}
.slicknav_menu .lang .lang-wrapper .lang_btn.current {box-shadow: 1px 1px 1px #848080}
.slicknav_menu .lang div a {display: inline-block; padding: 0; margin: 0 5px; width: auto}
    
.mobile_menu {position: fixed; top: 0px; right: 0;z-index: 100} 
    .page_main .mobile_menu {top: 100px; width: 66%}
    
.mobile_menu a {text-align: center; color: #fff;float: left;}
    .page_main .mobile_menu a {float: none; margin: 0}
    
.mobile_menu a span {width: 40px; float: left; padding: 13px 0;line-height: 0.8em;}
.mobile_menu a span:hover {	background-color: rgba(0,0,0,0.3);}  
    .page_main .mobile_menu a span {width: 49.5%; }
    
.mobile_menu a span div {display: none}
    .page_main .mobile_menu a span div {display: inline-block}
    
.mobile_menu a span img {height:14px;
    /* transition */
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
	transition: 0.3s;}
    .mobile_menu a span:hover img {margin-top: -5px; padding-bottom: 5px}
    
.page_main .mobile_menu a span img {margin-left: 5px; }
.mobile_menu a:nth-child(1) span {border-left: 1px solid #2d2d2d; border-right: 1px solid #2d2d2d}

.mobile_link .social { display: block; position: relative; text-align: right; float: right;}
.mobile_link .social a {float: left; width: auto; padding:7px 10px }
.mobile_link .social .btn_mobile {display: block}
    
.js #menu{display:none;}
.js .slicknav_menu, .mobile_menu, .mobile_link {display:block;}  
    

/* C3. Main Page
----------------------------------------- */    
.homepage>article>h2 {font-size:3em;line-height:1.5em;}
.homepage>article>h2>span {font-size:2rem}
    
.homepage>article>h3 {margin-top: 50px; font-size:1em; line-height:1.5em;}
    
.in-slide-content {width: 70%; left: 10px; /* top: 40% */ top: 55%}
.in-slide-content img {width: 100%; max-width: 500px}
.first-slide img {max-width: none}

/* C4. Page Heading
----------------------------------------- */    
.row .content .header {font-size: 1.5em}

    
    
/* C5. Page
----------------------------------------- */  
.main_inner {margin: 2% 0 auto 2%}  
    
#content-wrapper {min-height: 100vh}
    
.columns {width: 75%; padding: 70px 2% 20px 2%}
    
.row-wrapper, .row1 p {line-height: 1.7em}    
    
#tothetop {height: 40px; width: 40px; bottom: 60px; right: 0; opacity: 0.4}  
#tothetop a {background-size: 40px 40px; height: 40px; width: 40px;}  
    
    
/* C5.2 Services Page Content
----------------------------------------- */
.row2 .services_unit:nth-child(odd) .service_des {left: 90px;}
.row2 .services_unit:nth-child(even) .service_des {right: 70px;}
.row2 .services_unit .service_des { top: 0px; margin: 0}
.row2 .services_unit div.service_des img {width: 100%}
.row2 .services_unit div .service_photo {width: 30%}
.row2 .services_unit {min-height: 140px}
    
    
/* C5.2.2 Products Page Content
----------------------------------------- */   
.products .row2-wrapper .services_unit div img {width: 100%}

    
/* B5.3 Investor Page Content
----------------------------------------- */ 
.notice_list li {min-height: 80px; line-height: 1.5em}
.notice_list li:nth-child(1) {display: none; }
.notice_list li:nth-child(2) {border-top: 1px solid #aaa; padding-top: 10px}
.notice_list li div.description {width: 100%; margin-top: 10px}    
.notice_list li div.date, .notice_list li div.type, .notice_list li div.type_h, .notice_list li div.download {width: 13%; vertical-align: middle;}
    
    
/* C5.4 Joinus Page Content
----------------------------------------- */
.joinus_list li:nth-child(1) {font-size: 0.8em;}    
    
    
/* C5.6 Stock Price Page Content /**
----------------------------------------- */ 
.stock-price_row {width: 100%; overflow: auto; position: relative}
.stock-price_row img {width: 100%}    
.stock-price_row iframe {transform:scale(1,1);	left: 0; }
    
    
/* C5.7 Our-customers Page Contant
----------------------------------------- */
.logo_insurance {margin: auto auto 20px auto; float: none}    
    
   
/* C5.9 New Page Content
----------------------------------------- */      
.row3 iframe {width: 100%}
    
    
/* C5.9.2 New Details Page Content
----------------------------------------- */    
.new_list li .content .photo {width: 100%; text-align: center; margin: auto; margin-bottom: 20px}    

    
/* C5.11 Location Page Content
----------------------------------------- */
.location_table td  {width: auto; min-width: 127px; text-align: center}
.location_table tr:nth-child(1) td {font-size: 1.3em; width: 100%; padding-right: 3%; border-bottom: 1px dotted #666; line-height: 1.5em}
.location_table tr:nth-child(1) td span {width: 100%; display: block}
.location_table tr:nth-child(2) td {display: block; width: 100%; padding: 2px 0; } 
    
#maptb .maptb_col {width: 100%; max-width: inherit}  
#maptb .maptb_col img {max-width: 360px}
#maptb .maptb_col .map {overflow: hidden}  
    
    
/* C5.12 Sitemap Page Content
----------------------------------------- */
.sitemap .wrapper div {min-width: inherit}
     
    
/* C6. Page Sidebar
----------------------------------------- */     
.row .sidebar {position: relative; float: left}
.row .sidebar ul.links a li {padding: 10px 0; font-size: 0.8em}
.row .sidebar img {margin-top: 60px}      
    
.row #sidebar .links {display: block}
    
    
/* C8. Form - Contact
----------------------------------------- */  
.form_btn  {margin-top: 10px; margin-left: 0}
.form_col2 {width: 90%}
    
.form_col:nth-child(3) {width: 70%}
    
    
/* C10. Footer
----------------------------------------- */
footer { width: 100%; min-width: 320px;}
footer .footer-wrapper { padding: 10px 0; position: relative} 
.page_main footer .footer-wrapper { position: absolute}     
.footer_fixed {position: absolute; bottom: 0; }    
    
.footer-wrapper .left {float: left; display: none}
    
.page_main .footer-wrapper div.social {top:50px}    
    
.footer-wrapper div.social { display: inline-block; right: 0px; top: 0px; position: fixed; padding: 0; margin: 0; z-index: 99}
.social ul a li.btn_screen {display: none}
.social ul a li.btn_mobile {display: inline-block}
.social ul a li { margin: 0; width: 50px; text-align: center; overflow: hidden; margin: 0; float: left}
.social ul a.facebook:hover li {background-color: rgba(61, 90, 152, 1); color: #fff;}
.social ul a.youtube:hover li{background-color: rgba(207, 52, 39, 1); color: #fff; }
.social ul a.related_links_icon:hover li{background-color: rgba(32,178,170,0.8); color: #fff; }

.social ul li i{padding: 20px 0}
.social a {color: #fff; text-decoration: none; }
    
.footer-wrapper .lang {display: inline-block; position: relative; text-align: center; width: 100%; margin-top: 10px; right: inherit; top: inherit}    
.footer-wrapper .lang-wrapper .lang_btn {width: 80px; color: #fff; border: 1px solid #fff; }
.footer-wrapper .lang-wrapper .lang_btn:hover {width: 80px; border: 1px solid #fff; opacity: 1}
    

/* C11. Related_links
----------------------------------------- */ 
#related_links {margin: 120px 15%}
#related_links-header {padding: 5px 20px}
#related_links-header h2 {font-size: 1.2em;}
#related_links-header p {font-size: 0.9em}

#related_links .txt-fld {padding: 5px 10px}
#related_links .txt-fld span {top: 5px; padding: 10px 15px}
#related_links .txt-fld ul li {font-size: 0.9em;}
    
}

/* -----------------------------------------

   D.  Responsive: w767 / w780 

----------------------------------------- */
@media only screen and (max-width:780px){
    
/* D10. Footer
----------------------------------------- */
.footer-wrapper .left{float: none}    
.footer-wrapper .center{float: none}
}
    

@media only screen and (max-width:767px){
    
/* D5.5 Financial Page Content
----------------------------------------- */ 
.financial_box {width: 100%; margin-bottom: 10px}
.financial_box div.topic {font-size: 1em}  
.financial_box .report-wrapper .text {padding: 8% 0; width: 50%; font-size: 1.2em; font-weight: bold}
}

/* -----------------------------------------

   E.  Responsive: w320 - w479

----------------------------------------- */
@media only screen and (max-width:479px){

/* E4. Page Heading
----------------------------------------- */    
.row .content .header {font-size: 1.3em}
.row .content .header .header-wrapper:after {width: 24%}
    
    
/* E5. Page
----------------------------------------- */  
.row .sidebar {width: 100%;}
.row .sidebar ul.links a li {font-size: 1em}
.row-wrapper, .row1 p {line-height: 1.5em}  
.row1 h3 {font-size: 1.1em; color: #139690}  
.sitemap .row1 h3 {color: #676767}  
    
.columns {width: auto; padding: 0px 0 30px 0}  
.row .content {padding: 30px 20px 20px 20px}

ul.links a {background: url(../images/sidebar/sidebar_arrow1.png) 10000% center no-repeat #FEFEFE;background-size: 500px 100%;}
ul.links a:hover {background: url(../images/sidebar/sidebar_arrow1.png) -1160% center no-repeat #03A79D;background-size: 500px 100%;}

.main_inner {margin:0px 0 50px 0;} 
    
.wrapper div {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none;
    animation: none}
    
/* E5.1 Board-Directors Page Content
----------------------------------------- */     
.board-directors .row1 h3 {color: #000}  
    
/* E5.2 Services Page Content
----------------------------------------- */
.row2 .services_unit:nth-child(odd) .service_des {left: 0px;}
.row2 .services_unit:nth-child(even) .service_des {right: 0px;}
.row2 .services_unit .service_des {top:150px;}
.row2 .services_unit div .service_photo {width: 210px}
.row2 .services_unit {min-height: 250px}
    
ul.links a {background: url(../images/sidebar/sidebar_arrow1.png) -250px center no-repeat #FEFEFE;background-size: 500px 100%;}
ul.links a:hover {background: url(../images/sidebar/sidebar_arrow1.png) 250px center no-repeat #03A79D;background-size: 500px 100%;}
    
    
/* E5.2.2 Products Page Content
----------------------------------------- */    
.products .row2 .services_unit {min-height: inherit;}
    
    
/* E5.4 Joinus Page Content
----------------------------------------- */
.joinus_list li div {}
.joinus_list li div.post_name {width: 50%}
.joinus_list li div.post_location {width: 30%; }
.joinus_list li div.post_res {width: 100%; }
.joinus_list li div.post_exp {width: 100%; }
    
.joinus_list li div.post_name:before, .joinus_list li div.post_location:before, .joinus_list li div.post_res:before, .joinus_list li div.post_exp:before{ width: 16px; height: 14px; margin-right: 10px; margin-left: -25px}
    
.joinus_list li div.post_name:before {content: url(../images/icon_post_name.png) }
.joinus_list li div.post_location:before {content: url(../images/icon_location.png) }
.joinus_list li div.post_res:before {content: url(../images/icon_post_res.png) }
.joinus_list li div.post_exp:before {content: url(../images/icon_post_exp.png) }
    
    
.joinus_list li:nth-child(1) {display: none} 
.joinus_list li:nth-child(2) {border-top: 1px solid #aaa; padding-top: 10px}


/* E5.5 Financial Page Content
----------------------------------------- */
.financial_box {padding-bottom: 0px; max-width: none}
.financial_box .report-wrapper .photo {width: 40%}
.financial_box .report-wrapper .text {width: auto; 	font-size: 1em; margin: auto 5px; padding: 0}
    
    
/* E5.6 Stock-price Content /**
----------------------------------------- */
.stock-price .row .content { width: 85%;}
    
    
/* E5.7 Our-customers Page Contant
----------------------------------------- */
.logo_insurance, .logo_insurance img {width: 100%; }
    
    
/* E5.8 New Details Page Content
----------------------------------------- */    
.new_list li .content .photo img {width: 100%;} 
.new_list li .content p {line-height: 1.4em;}
.new_details_control > a > button {width: 60px }
    
    
/* E5.11 Location Responsibility Page Content
----------------------------------------- */
.location #maptb .maptb_col img, .location #maptb .maptb_col iframe {width: 100%} 
#maptb .maptb_col img {max-width: inherit}  
    
    
/* E5.14 Supporting-team Page Content
----------------------------------------- */    
.supporting-team .row1 img, .supporting-team .row1 iframe {width: 100%}
    
    
/* E6. Page Sidebar
----------------------------------------- */
#sidebar {position: relative;}
#sidebar .title {width: 100%; margin-top: 40px; overflow: hidden; position: relative}
#sidebar .title span {width: 100%}
#sidebar .title span:after {content: ''; background: url(../images/btn_down.png) center center no-repeat; background-size: 100% 100%; width: 25px ; height: 18px; position: absolute; right: 10px; bottom:10px}
#sidebar .title span img {margin-top: -5px}   
#sidebar .title span.screen {display: none}
#sidebar .title span.mobile {display: block; max-height: 40px}
    
.row #sidebar .links {display: none}
    
/* E7. Page Control Number
----------------------------------------- */
.page_control button {width: 30px; height: 30px; margin: 0; background: rgba(255, 255, 255, 0.3);}
    


/* E8. Form - Contact (investor-enquiries.php, contact.php)
----------------------------------------- */
.form_row {margin: 10px 0 30px 0}
.form_row_wrapper {margin: 10px 0}
.form_row_wrapper:nth-child(1) {margin-bottom: 0px;}
.form_col {width: 60px;} 
.form_col:nth-child(1) {width: auto}
.form_col:nth-child(3) {width: 90%; margin-left: 30px}


/* E11. Related_links
----------------------------------------- */    
#related_links{width: 90%; margin: 20px 5%}
#related_links-header {padding: 10px 20px}
#related_links-header h2 {font-size: 1.1em; margin-bottom: 0;}
#related_links-header p {font-size: 0.9em}

#related_links .txt-fld {width: auto; padding: 0}
#related_links .txt-fld span {display: none}
#related_links .txt-fld ul {width: 100%}
#related_links .txt-fld ul li {font-size: 0.9em;}
    
}