@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'FiraSans';
    src: url('../layout/FiraSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../layout/Montserrat.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Krasar';
    src: url('../layout/Krasar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{margin:0; padding:0; background-color:#fff; color:#000; -webkit-overflow-scrolling:touch; transition:0.3s linear; -webkit-text-size-adjust:none; text-size-adjust:none;}
.print{display:none;}

a{text-decoration:none; color:#06C;}
a:hover{text-decoration:underline; color:#1B3351;}
:target{ /*fixed for sticky head*/
    display:inline-block;
    position:relative;     
    top:-200px;
    visibility:hidden;
}

.mask{background:url(../layout/bg_mask.png) repeat; width:100%; height:100%; position:fixed; top:0; left:0; display:none; z-index:99;}

/* HEAD */
.head-bg-sticky{height:192px; background-color:#1B3351;}
.head-sticky{position:fixed; width:100%; z-index:100; top:0;}
.head-bg{background-color:#1B3351; width:100%;}

.head-ctn{max-width:1200px; margin:0 auto; padding:33px 0 0; position:relative; text-align:left; height:96px; transition:0.3s linear;}
.head-ctn a .logo{width:250px; border:none; padding-left:20px; padding-bottom:5px; transition:0.3s linear;}
.sticky{padding:18px 0; height:39px;}
.sticky a .logo{width:145px;}

.info1_bg, .info_head_bg{position:fixed; bottom:0; width:100%; z-index:600; display:none;}
.info1, .info_head{margin:0 auto 20px; max-width:500px; padding:0 20px;}
.info1 div, .info_head div{padding:20px; color:#fff; background-color:#122133;}
.info1 div a, .info_head div a{color:#6cf;}
.info1 div a:hover, .info_head div a:hover{color:#fff;}
.info1 .info1_close, .info_head .info_close{padding:11px; text-align:center; margin-top:1px;}
/* END HEAD */

.nav-shadow{background:url(../layout/nav-shadow.png) repeat-x top; width:100%; position:absolute; bottom:-6px; height:6px;}

/* MENU */
.nav{background:#122133 url(../layout/shadow.png) repeat-x top; transition:0.3s linear; height:62px;}
.nav ul{margin:0 auto; padding:0; max-width:1200px; position:relative;}
.nav ul li{display:inline-block; position:relative;}
.nav ul li a{color:#fff; text-decoration:none; display:block; padding:23px 20px 20px; font-weight:700;}
.nav ul li a i{vertical-align:middle; padding-left:1px; font-size:15px;}
.nav ul li:hover{background:#1B3351;}
.nav ul li ul{display:none; margin:0; padding:0; position:absolute; width:280px; z-index:1000; border-top:1px solid #CEA939;}
.nav ul li ul li{border-top:1px solid #315C88; display:block;}
.nav ul li ul li:first-child{border-top:none;}
.nav ul li ul li a{background:#1B3351; display:block; padding:14px 20px; font-weight:normal; letter-spacing:1px;}
.nav ul li ul li a:hover {background:#2B4F73;}
.nav #active{color:#C29A39; font-weight:700;}
.nav ul .exchange{position:absolute; padding:20px; right:0; top:1px; color:#fff; font-size:90%; width:310px;}
ul.marquee{
	display: block; letter-spacing:0;
	padding: 0;
	margin: 0;
	list-style:none;
	position: relative;
	overflow: hidden;
	height: 28px;
	width:100%;
}

ul.marquee li{
	position: absolute;
	top: -999em;
	right:0;
	width:100%;
	text-align:right;
	display: block;
	white-space:nowrap;
}
ul.marquee div{padding-top:3px;}
ul.marquee li table{width:220px; border:none; margin:0; padding:0; float:right;}
ul.marquee li:hover{background:none;}
ul.marquee li img{height:13px; padding-right:5px; padding-bottom:3px; vertical-align:middle;}

#digital .nav .digital,
#card .nav .card,
#personal .nav .personal,
#business .nav .business,
#investor-relation .nav .investor-relation{background:#1B3351;}

.sticky .nav-head{bottom:13px;}
.nav-head{margin:0; padding:0; position:absolute; bottom:42px; right:65px; transition:0.3s linear;}
.nav-head li{display:inline-block; position:relative;}
.nav-head li a{color:#fff; text-decoration:none; display:block; padding:15px; font-size:85%; font-weight:600;}
.nav-head li a i{vertical-align:middle; padding-left:1px; font-size:15px;}
.nav-head li:hover{background:#122133;}
.nav-head li ul{display:none; margin:0; padding:0; position:absolute; width:240px; z-index:1000; right:0; border-top:1px solid #CEA939; letter-spacing:1px;}
.nav-head li ul li {border-top:1px solid #315C88; display:block; text-align:right;}
.nav-head li ul li:first-child{border-top:none;}
.nav-head li ul li a{background:#122133; display:block; padding:15px 20px; font-weight:normal;}
.nav-head li ul li a:hover {background:#2B4F73;}
.nav-head #active{font-weight:600; color:#C29A39;}

#about .nav-head .about,
#search .nav-head .search{background:#122133;}

.sticky .language{bottom:15px;}
.language{position:absolute; bottom:43px; right:10px; transition:0.3s linear;}
.language a{padding:13px 10px; display:inline-block;}
.language a:hover{background:#122133;}
.language a img{border:none; width:23px; border-radius:2px; border:1px solid #E9ECEF; padding:1px; vertical-align:text-bottom;}

.nav-mobile, .nav-icon-mobile{display:none}

/* END MENU */

/* BANNER */
.banner{position:relative; background-color:#E9ECEF; text-align:center;}
.banner-ctn{max-width:1160px; margin:0 auto; width:100%; position:relative;}
.banner-ctn div{position:absolute; left:6%; top:20%; font-size:230%; line-height:140%; width:35%; color:#C29A39; font-weight:700; text-align:left;}
.banner-ctn div.r{right:6%; left:auto; padding:0 20px 0 0; text-align:right;}
.banner-ctn div p{font-size:70%; margin:0; padding:10px 0 0; line-height:160%; color:#1B3351; text-transform:none; font-weight:normal;}
.banner img{width:100%; max-width:1160px; object-fit:cover;}
/* END BANNER */

/* BODY */
.body-ctn{max-width:1200px; margin:0 auto; padding:30px 0 0; position:relative; overflow:hidden;}
.body-ctn .qna{background-color:#E9ECEF; margin:0 calc(35% - 20px) 0 0; padding:20px; position:relative;}
.body-ctn .qna img{width:40px; vertical-align:middle; padding-right:10px; border:none;}
.body-ctn .qna-ctn{border-top:1px solid #fff; margin-top:10px; padding-top:20px; display:none;}
.body-ctn .qna .close{float:right; padding:10px 0; text-decoration:none; display:none;}
.body-ctn .qna ul, .body-ctn .qna ol{margin:8px 0 8px 20px; padding:0;}
.body-ctn .qna ul ul, .body-ctn .qna ol ul{margin:0 0 0 20px; padding:0;}
.body-ctn .qna li{padding:1px 0;}

.body-ctn .partner{background-color:#E9ECEF; margin:0 calc(35% - 20px) 20px 0; padding:20px; position:relative;}
.body-ctn .partner div ul{padding:0 0 0 10px; margin:10px 0; display:none; cursor:default; color:#173A67; list-style:none; border-left:2px solid #fff;}


.info_top{margin:10px auto 30px; padding:0 35% 0 20px;}
.info_top .info_ctn{background-color:#E9ECEF; padding:15px; margin:0 auto; max-width:1200px;}
.info_top .info_ctn1{float:left; padding-left:20px;}
.info_top .info_ctn2{text-align:right; padding-right:20px;}

.sub-menu{margin:10px 35% 15px 20px; position:relative;}
.sub-menu div{padding-bottom:10px; cursor:pointer; color:#06C; text-transform:uppercase; font-size:120%; border-bottom:1px solid #E9ECEF;}
.sub-menu div i{vertical-align:middle; padding-bottom:2px;}
.sub-menu div:hover{color:#1B3351;}
.sub-menu ul{list-style:none; display:none; width:100%; margin:0; padding:0;}
.sub-menu li{border-bottom:1px solid #E9ECEF;}
.sub-menu li a{display:block; padding:10px 0;}
.sub-menu #active{color:#CEA939; font-weight:bold;}

.share-menu{padding:15px 0 0 0; margin:45px 0 0; text-align:left; text-transform:uppercase; line-height:250%; clear:both; border-top:1px solid #E9ECEF;}
.share-menu a{padding:0; font-size:85%; display:inline-block; margin-right:20px;}
.share-menu a i{vertical-align:middle; padding:0 5px 5px 0;}
.share-content{display:none; z-index:500; position:fixed; bottom:0; left:0; width:100%;}
.share-content div{max-width:500px; background-color:#fff; margin:0 10px 10px; padding:20px 10px 25px; text-align:center; border-radius:5px;}
.share-content div a{display:inline-block; padding:0 8px; font-size:90%; font-family:Roboto;}
.share-content div a img{width:40px; vertical-align:middle; border:1px solid #fff;; border-radius:40px; padding:2px;}
.share-content div a:hover img{border:1px solid #1B3351;}

.main{margin:0; padding:0 35% 45px 20px; overflow:hidden; position:relative;}
.main2{padding-right:20px;}
.img-banner{width:100%; border-radius:3px; margin:10px 0 5px;}
.main h1{font-size:200%; padding:25px 0 10px; margin:0; color:#C29A39; line-height:140%; text-transform:uppercase; font-weight:normal;}
.main h1 span{color:#1B3351;}
.main h2{margin:0; padding:20px 0 5px; font-size:140%; color:#C29A39; font-weight:normal; line-height:140%; text-transform:uppercase;}
.main h3{margin:0; padding:20px 0 5px; font-size:120%; color:#173A87; font-weight:normal;}
.main h4{margin:0; padding:20px 0 5px; font-size:110%; color:#173A87; font-weight:normal;}
.main p{margin:0; padding:10px 0 5px; text-align:justify;}
.main a img{border:none;}
.main .txt{margin:0; padding:0;}
.main .date{margin:0; padding:0 0 5px; font-size:90%; color:#647DA8; text-indent:0;}
.main .nopadding {margin:0; padding:0 0 0 15px;}
.main .nopadding li{margin:0; padding:0;}
.main .note{color:#647DA8; padding:20px 0 0;}
.main .noteul{color:#647DA8;}
.main .note a, .main .noteul a{color:#06c;}
.main .noind{text-indent:0}
.main .remark{background:#FBF1F0; padding:15px 20px 15px 50px; margin:15px -20px; position:relative;}
.main .remark .material-icons{position:absolute; top:15px; left:20px; color:red;}

p.bread_crum{padding:0; margin:0; color:#647DA8; line-height:180%; text-align:left; font-size:80%;}
p.bread_crum a{color:#647DA8;}
p.bread_crum a:hover{color:#1B3351;}
p.bread_crum i{font-size:18px; vertical-align:middle; margin-bottom:2px; padding:0 2px;}
p.bread_crum a i{font-size:16px; vertical-align:middle; margin-bottom:5px; padding:0;}

.bg-line{background:url(../layout/line.gif) repeat-x center; margin:40px 0 30px; padding:0; font-size:140%; color:#1B3351;}
.bg-line span{background-color:#fff; padding:2px 0;}

.main .imgbox{text-align:center; color:#647DA8; width:100%; min-width:100px; overflow:hidden; position:relative; margin:25px 0 15px; z-index:1;}
.main .imgbox img, .main .imgbox a img{border:none; width:100%;}
.main .imgbox .title{padding:10px 20px 0; text-align:center; color:#678197; font-style:italic; line-height:140%;}
.main .imgbox_L{margin:25px 5% 20px 0; width:45%; float:left;}
.main .imgbox_R{margin:25px 0 20px 5%; width:45%; float:right; clear:right;}

.main .imgbox_profile{text-align:center; color:#647DA8; width:35%; max-width:250px; position:relative; float:right; margin:20px 0 20px 20px; font-size:90%;}
.main .imgbox_profile img{border-radius:250px; border:none; width:100%; margin-bottom:10px;}

.main .vdobox{width:45%; float:right; margin:25px 0 20px 5%; clear:right;}
.main .vdobox video{width:100%;}
.main .vdobox p{padding:10px 20px 0; text-align:center; text-indent:0; color:#678197; font-style:italic;}

.container{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;
	margin-bottom:10px;
}
.container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.main .qna{margin:18px 0 0; padding:0; border-top:1px solid #eee; list-style-position:inside;}
.main .qna li{padding:10px 20px 10px 0; cursor:pointer; color:#00c; border-bottom:1px solid #eee; background:url(../layout/icon_qna_down.gif) no-repeat right 9px; background-size:11px 28px;}
.main .qna .hover{font-weight:bold; background:url(../layout/icon_qna_up.gif) no-repeat right 9px; background-size:11px 28px;}
.main .qna .hover2{color:#CEA939;}
.main .qna div{padding:10px; margin-right:-20px; margin-top:5px; display:none; color:#003264; cursor:default; font-weight:normal; background-color:#eee;}
.main .qna div ul{margin:0; padding:0 0 0 30px; list-style-position:outside;}
.main .qna div ul ul{margin:0; padding:0 0 0 15px;}
.main .qna div li{color:#003264; padding-top:0; padding-bottom:0; cursor:default; border-bottom:none; font-weight:normal; background:none;}
.main .qna div .hover{font-weight:normal; color:#003264; background:none;}

.main .s15{padding-top:15px;}
.main .s10{padding-top:10px;}
.main .s5{padding-top:5px;}

.main ul, .main ol{margin:8px 0 8px 20px; padding:0;}
.main ul ul, .main ol ul{margin:0 0 0 20px; padding:0;}
.main li{padding:1px 0;}

.main .table-cover{margin-left:-20px; margin-right:-20px; margin-bottom:15px; overflow-x:auto;}
.main table{width:100%; margin:20px 0 0; padding:0; text-align:left;}
.main table caption{color:#1B3351; font-size:110%; text-align:left; text-transform:uppercase; padding:0 20px 15px;}
.main table th{background-color:#1B3351; color:#fff; text-align:left; margin:0; padding:7px 20px;}
.main table .sub_th td{background-color:#CEA939; color:#1B3351; margin:0; padding:6px 20px;}
.main table .sub_td td{color:#1B3351; font-weight:bold; border-bottom:1px solid #E9ECEF;}
.main table td{margin:0; padding:6px 20px; border-bottom:1px solid #E9ECEF;}
.main table .odd td{background-color:#f5f5f5; border-bottom:1px solid #E9ECEF;}
.main table tr:hover{background-color:#f5f5f5; transition:background-color .25s ease-in-out;}

.main .table_nobg td{background:none; vertical-align:top; padding:2px 0;}
.main .table_nobg th{background:none; border-bottom:1px solid #CEA939; font-size:120%; vertical-align:bottom; padding:3px 0; text-align:left;}
.main table tr .nobg{background:none;}

.nexpre{border-top:1px solid #E9ECEF; margin-top:30px; padding-top:20px; clear:both; overflow:hidden;}
.nexpre .pre a{float:left; width:40%; text-align:left; display:block;}
.nexpre .nex a{float:right; width:40%; text-align:right; display:block;}
.nexpre strong{font-size:120%;}

input[type=text],
input[type=password]{color:#1B3351; width:calc(100% - 22px); max-width:240px; padding:0 10px; margin:2px 0; height:38px; -webkit-appearance:none; border:1px solid #ccc; border-radius:3px;}

textarea{color:#1B3351; width:calc(100% - 22px); padding:6px 10px; margin:2px 0; resize:none; -webkit-appearance:none; border:1px solid #ccc; border-radius:3px;}

input[type=text]:focus,
input[type=password]:focus,
input[type=text]:hover,
input[type=password]:hover,
textarea:hover,
textarea:focus{border-color:#999;}

input[type=submit],
input[type=button]{cursor:pointer; padding:0 20px; background-color:#1B3351; height:40px; color:#fff; border:none; border-radius:3px; margin-top:20px; -webkit-appearance:none;}
input[type=submit]:hover,
input[type=button]:hover{color:#CEA939;}

select{padding:0 10px; color:#1B3351; width:calc(100% - 22px); max-width:262px; border:1px solid #ccc; height:40px; border-radius:3px; cursor:pointer;
-webkit-appearance: none;
-moz-appearance: none;
background:#fff url(../layout/icon-down.png) no-repeat right center;
background-size: 30px 30px;
}
select:hover,
select:focus{border-color:#999; background-image:url(../layout/icon-down-hvr.png);}

select::-ms-expand{display:none;} /*remove default dropdown in ie*/

input[type=file]{color:#1B3351; padding:7px; width:calc(100% - 16px); font-family:FiraSans, Verdana, sans-serif; background:none; -webkit-appearance:none; border:1px solid #E9ECEF;}

/* annual report */
.annRe-cover{margin:0 -1%;}
.annRe{width:48%; margin:25px 1% 0; padding-top:20px; float:left; border-top:1px solid #E9ECEF;}
.annRe img{float:left; padding:0 5px 0 0; max-width:138px; width:40%;}
.annRe h3{margin:0; padding:0 0 5px 0;}
.annRe p{margin:0; padding:10px 0 5px; text-align:left;}
.annRe .info{font-size:90%; color:#678197; padding:0; clear:left; line-height:150%; text-align:left;}
/* end annual report */

/* format financial report */
.main .tbl_fs{border:none;}
.main .tbl_fs td{vertical-align:bottom; border:none;}
.main .tbl_fs th{text-align:right; border:none;}
.main .tbl_fs .sub_th{background-color:#CEA939; color:#1B3351; text-align:center; margin:0; padding:2px; border:none;}
.main .tbl_fs .border0{border-top:1px solid #aaa; padding-bottom:15px;}
.main .tbl_fs .border1{border-top:1px solid #aaa; color:#1B3351; padding-bottom:15px;}
.main .tbl_fs .border2{border-top:1px solid #aaa; border-bottom:3px double #aaa; color:#1B3351; padding-top:5px; padding-bottom:15px;}
.main .tbl_fs .color1{color:#1B3351; padding-bottom:15px;}
.main .tbl_fs .color2{color:#1B3351; padding-top:5px; padding-bottom:15px;}
.main .tbl_fs tr:hover, .main .tbl_fs tr.highlight{background-color:#eee;}
/* end financial report */

/*-- tooltip --*/	
#tooltip{width:280px; display:none; position:absolute; border:none; z-index:101;}
#tooltip #ctn{padding:5px 8px; margin:0; position:relative; font-size:90%; background:#eee; border:1px solid #CEA939; line-height:150%; border-radius:3px; overflow:hidden;}
#tooltip #ctn div{border-top:1px solid #eee; margin:7px 0 0; padding:3px 0 0;}
/*-- end tooltip --*/

/* box */
.box-home1{width:43%; margin:30px 7% 30px 0; float:left; clear:left;}
.box-home2{width:43%; margin:30px 0 30px 7%; float:left;}
.box-title{padding:0; font-size:130%; line-height:150%; text-transform:uppercase;}
.box-home1 p, .box-home2 p{text-align:left; margin:0; padding:10px 0 0; text-indent:0;}
.box-home1 .box-img, .box-home2 .box-img{position:relative; overflow:hidden;}
.box-home1 a img, .box-home2 a img{width:100%; border-radius:5px; margin-bottom:15px;}
.box-home1 img, .box-home2 img{width:100%; border-radius:5px; margin-bottom:15px;}
/* end box */

/* image index */
.imghome{position:relative; margin:20px 0 0; padding:10px 0 0; border-top:1px solid #E9ECEF; z-index:0; clear:left;}
.imghome .img{text-indent:0;}
.imghome .img img, .imghome .img a img{margin:10px 15px 30px 0; padding:0; width:180px; float:left; border:none;}
.imghome .title{font-size:120%; color:#1B3351; margin:0 0 0 195px; padding:0; text-indent:0; text-align:left;}
.imghome .title a{padding-right:13px;}
.imghome .title span{padding-right:13px;}
.new{background:url(../layout/icon-new.png) no-repeat right center; background-size:7px 7px;}
.imghome .text, .imghome .date{margin:0 0 0 195px; padding:0; text-align:left; text-indent:0;}
.imghome .text{margin-top:5px;}
/* end image index */

/* END BODY */

.rictn{width:30%; margin:40px 20px 40px 5%; position:absolute; right:0; top:0;}
.rictn .rictn-ctn{background-color:#E9ECEF; padding:15px 20px 30px; margin-bottom:20px;}
.rictn .rictn-ctn .title{margin:0; padding:10px 0 5px; text-transform:uppercase; font-size:120%;}
.rictn .rictn-ctn p{margin:0; padding:10px 0 0;}
.rictn .rictn-ctn p img, .rictn .rictn-ctn p a img{border:none; width:100%; border-radius:5px;}
.rictn .rictn-ctn ul{margin:0; padding:5px 0 0; list-style:none;}
.rictn .rictn-ctn ul li{padding:5px 0;}
.rictn #active{color:#CEA939;}

.content2{color:#fff; background:#1B3351 url(../layout/shadow.png) repeat-x top; padding:0; position:relative;}
.content2 div{margin:0 auto; padding:80px 0; max-width:1200px; text-align:center; white-space:nowrap; overflow-x:auto;}
.content2 div a{padding:0; display:inline-block; margin:0 30px; text-align:center; color:#fff; font-weight:600; position:relative;}
.content2 div a img{border:none; width:40px; padding-bottom:20px;}

/* FOOT */
.foot{color:#fff; background:#1B3351 url(../layout/shadow.png) repeat-x top; text-align:center; padding:0 8px; line-height:200%;}
.foot .foot1{margin:0 auto; padding:50px 0 30px; font-size:80%; max-width:1200px;}
.foot .foot1 a, .foot .foot1 span{padding:5px 12px; color:#fff; white-space:nowrap;}
.foot .foot2{margin:0 auto; padding:0 0 50px; font-size:80%; max-width:1200px;}
.foot .foot2 a{padding:2px;}
.foot .foot2 a img{width:30px; border:none; border-radius:30px; border:1px solid #1B3351; padding:1px;}
.foot .foot2 a:hover img{border:1px solid #fff;}
/* END FOOT */