/*font soze*/
/*color*/
/*bg color*/
/*font family*/
/*padding*/
@import url(fonts.css);
html { text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }

body { margin: 0; padding: 0; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

figure { width: 100%; height: auto; margin: 0; padding: 0; }

figure img { width: 100%; line-height: 0; }

.bg-c1 { background-color: #e87285; }

.bg-c2 { background-color: #81a163; }

.bg-c3 { background-color: #dfdecd; }

.bg-theme-dark { background-color: #1D1D1D; color: #ffffff; padding: 30px 0; }

/*news verticle*/
h2, h3, h4 { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; margin: 0; padding: 0; position: relative; }

p { line-height: 20px; font-size: 14px; color: #666666; margin: 0; padding: 0; }

.f-icon, .f-icon a { color: #999999; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; }

ul, li { list-style: none; margin: 0; padding: 0; }

a { color: #121212; webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; -webkit-transition: all .25s; transition: all .25s; }

a:hover { text-decoration: none; color: #2B63D1; }

/* i { vertical-align: middle; } */

.icon-update { color: #EA1111; }

hr { max-width: 1200px; display: block; }

hr.solid { border-top: 1px solid #DDDDDD; }

hr.solid-color { border-top: 1px solid #132F65; }

hr.dott { position: relative; height: 2px; border: none; }

hr.dott:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, color-stop(80%, transparent), color-stop(50%, #2B63D1)); background-image: -webkit-linear-gradient(left, transparent 80%, #2B63D1 50%); background-image: -o-linear-gradient(left, transparent 80%, #2B63D1 50%); background-image: linear-gradient(to right, transparent 80%, #2B63D1 50%); background-size: 6px 100%; }

hr.dot-double { position: relative; height: 4px; border: none; }

hr.dot-double:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, color-stop(80%, transparent), color-stop(50%, #2B63D1)); background-image: -webkit-linear-gradient(left, transparent 80%, #2B63D1 50%); background-image: -o-linear-gradient(left, transparent 80%, #2B63D1 50%); background-image: linear-gradient(to right, transparent 80%, #2B63D1 50%); background-size: 6px 100%; }

hr.dot-double:after { content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, color-stop(80%, transparent), color-stop(50%, #2B63D1)); background-image: -webkit-linear-gradient(left, transparent 80%, #2B63D1 50%); background-image: -o-linear-gradient(left, transparent 80%, #2B63D1 50%); background-image: linear-gradient(to right, transparent 80%, #2B63D1 50%); background-size: 6px 100%; }

.mt-default { margin: 30px 0 0 0; display: block; }

.h-ic { display: inline-block; overflow: hidden; vertical-align: middle; line-height: 20px; margin-top: -5px; }

/*hide on mobile*/
@media screen and (max-width: 767px) { .block-hide { display: none; } }

.block-show { display: none; }

@media screen and (max-width: 767px) { .block-show { display: block; } }

/*padding side for mobile*/
.block-side { padding: 0 20px; }

.header h2 { font-family: 'arial_black',Helvetica Neue,Helvetica,sans-serif; font-size: 32px; line-height: 42px; text-transform: uppercase; margin: 30px 0; }

/***************************** genneral *****************************/
.play-time { display: inline-block; padding: 3px 5px; background: #2B63D1; font-size: 13px; }

.play-time-nobg { background: transparent; }

.f-icon { font-size: 11px; margin: 10px 0 0; line-height: 12px; }

.f-icon span { margin: 0 5px 0 0; }

.f-icon i { font-size: 12px; vertical-align: middle; }

/*chanel*/
.chanel { font-family: "arial_black"; text-transform: uppercase; font-size: 12px; color: #333333; padding: 10px 0; }

.chanel a { color: #333333; position: relative; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.chanel a:hover { text-decoration: none; }

.chanel a:hover i { margin: 0 0 0 3px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.chanel i { font-size: 9px; color: #2B63D1; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

@media screen and (max-width: 575px) { .chanel { padding: 0 20px; } }

.h-topic { font-family: "arial_black"; text-transform: uppercase; font-size: 15px; color: #000000; padding: 10px 0; }

.time { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; font-size: 11px; color: #999999; position: relative; display: block; }

.time::after { content: ""; position: absolute; display: block; overflow: hidden; width: 100%; height: 1px; bottom: 5px; margin: auto; background-color: #DDDDDD; }

.h-line { font-size: 9px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; color: #2B63D1; text-transform: uppercase; margin: 0; line-height: normal; }

.h-line a { display: inline-block !important; }

.list-detail { margin: 0; }

.list-detail h2 { font-size: 36px; line-height: 42px; margin: 5px 0; }

.list-detail h3 { font-size: 18px; line-height: 24px; padding: 5px 0; }

.list-detail p { line-height: 18px; margin: 0; }

.list-detail-mt { margin: 15px 0 0; }

.list-detail-mt h2 { font-size: 36px; line-height: 40px; }

.list-detail-mt h2 a { color: #121212; }

.list-detail-mt h3 { font-size: 18px; padding: 5px 0; line-height: 24px; }

.list-detail-mt p { margin: 0; }

.list-h { overflow: hidden; }

.list-h figure { width: 50%; padding-left: 15px; float: left; }

@media screen and (max-width: 767px) { .list-h figure { width: 40%; } }

.list-h .list-detail { width: 50%; padding-right: 15px; float: left; margin: 0; }

@media screen and (max-width: 767px) { .list-h .list-detail { width: calc(60% - 30px); } }

.list-h .list-detail p { margin: 0; }

.list-vdo { height: 275px; background-color: #1D1D1D; }

.list-vdo .play-time { position: absolute; bottom: 0; right: 15px; }

.list-vdo .list-detail-mt { margin: 0; padding: 10px; border-top: solid 2px #132F65; }

.list-vdo h3 a { color: #ffffff; }

.list-vdo h3 a:hover { color: #2B63D1; }

.list-vdo p { margin: 0; }

.add-line { border-bottom: solid 1px #DDDDDD; padding: 10px 0; }

.sec-header { display: block; font-size: 12px; font-family: 'arial_black'; text-transform: uppercase; text-align: center; position: relative; margin: 0 0 20px; }

.sec-header span { display: inline-block; background-color: #132F65; color: #ffffff; padding: 5px 30px; position: relative; z-index: 1; }

.sec-header:before { content: ""; width: 100%; height: 2px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; overflow: hidden; position: absolute; background-color: #132F65; }

.sec-header a { color: #ffffff; position: relative; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.sec-header a:hover { text-decoration: none; }

.sec-header a:hover i { margin: 0 0 0 3px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.sec-header a i { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.box-reporter { display: block; overflow: hidden; margin: 25px 0 0; position: relative; }

.box-reporter .img-profile { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 50px; height: 50px; overflow: hidden; float: left; }

.box-reporter .img-profile img { width: 100%; }

.box-reporter .name { margin-left: 10px; display: inline-block; position: absolute; bottom: 0; text-transform: uppercase; font-size: 11px; }

.box-reporter .name a { color: #2B63D1; }

.box-border { display: block; position: relative; border: solid 1px #DDDDDD; display: block; padding: 30px 20px 20px; position: relative; }

.box-border .sec-header { position: absolute; top: -15px; left: 0; right: 0; }

.box-border-top { display: block; position: relative; border-top: solid 1px #132F65; display: block; padding: 0; position: relative; }

.box-for-hs { display: block; position: relative; }

.box-bg { display: block; position: relative; background-color: #EDF5FF; padding: 20px; position: relative; }

.box-bg .sec-header { position: absolute; top: -15px; left: 0; right: 0; }

.bg-qoute { font-family: "wa-font-1"; padding-bottom: 35px; }

.bg-qoute:before { content: "\75"; position: absolute; top: -35px; font-size: 45px; color: #132F65; }

.bg-qoute:after { content: "\74"; position: absolute; bottom: 0px; font-size: 45px; color: #132F65; right: 20px; }

.bg-darken { background-color: #000000; padding: 20px; position: relative; color: #ffffff; }

.list-person li { display: block; padding: 20px 0; overflow: hidden; border-bottom: solid 1px #ffffff; }

.list-person li:last-of-type { border-bottom: none; }

.list-person .list-detail { width: calc(100% - 90px); }

.list-person .box-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 80px; height: 80px; overflow: hidden; float: left; }

.list-person .box-circle img { width: 100%; }

.list-group { margin: 0; padding: 0; font-family: arial; }

.list-group li { list-style: none; border-bottom: solid 1px #EEEEEE; padding: 10px 0; display: block; overflow: hidden; }

.list-group li:last-of-type { border-bottom: none; }

.list-group li a { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; color: #121212; }

.list-group li a:hover { color: #2B63D1; }

/* .list-group li:first-of-type { font-size: 18px; } */
.list-group li figure { margin-bottom: 5px; }

.list-group p { padding-top: 15px; margin: 0; }

.bg-list { background-color: #F5F5F5; padding: 20px; }

.boombox-adver { /*max-width: 300px;*/ overflow: auto; position: -webkit-sticky; position: sticky; top: 65px; left: 0; right: 0; margin: auto; }

.boombox-adver .adver { width: 100%; color: #ffffff; vertical-align: text-top; display: inline-block; display: -webkit-inline-flex; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.full-width { background-color: #F5F5F5; padding: 20px 0; text-align: center; }

.full-width img { max-width: 80%; margin: 0 auto; }

.img-hover { padding: 0; float: left; width: 100%; }

.img-hover .title { color: #1a1a1a; text-align: center; margin-bottom: 10px; }

.caption { position: relative; width: 100%; max-width: 400px; margin: auto; overflow: hidden; }

.caption .caption-overlay { background: rgba(19, 76, 154, 0.2); position: absolute; height: 100%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }

.caption .caption-overlay:hover .caption-overlay { opacity: 1; }

.caption-image { width: 100%; }

.caption-details { position: absolute; text-align: center; padding: 50% 0 0; width: 100%; bottom: -47px; left: 0; right: 0; opacity: 1; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(19, 76, 154, 0)), to(#134c9a)); background-image: -webkit-linear-gradient(top, rgba(19, 76, 154, 0), #134c9a); background-image: -o-linear-gradient(top, rgba(19, 76, 154, 0), #134c9a); background-image: linear-gradient(to bottom, rgba(19, 76, 154, 0), #134c9a); }

.caption:hover .caption-details { bottom: 0; opacity: 1; }

.caption-details h4 { color: #fff; font-size: 15px; margin: 0 0 15px; }

.view-all { display: block; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; margin: 0 0 20px; padding-top: 10px; color: #ffffff; position: relative; text-transform: uppercase; font-size: 11px; }

.view-all:before { content: ""; position: absolute; display: block; overflow: hidden; width: 15%; height: 1px; background-color: rgba(225, 225, 225, 0.8); left: 0; right: 0; top: 0; margin: auto; }

.caption:hover .view-all { display: block; }

.box-photo { display: block; position: relative; }

.box-photo figure { position: relative; }

.box-photo figure figcaption { position: absolute; display: block; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); padding: 10px 40px 10px 10px; color: #ffffff; }

.box-photo h3 { font-size: 18px; }

.box-photo .num { position: absolute; display: block; right: 20px; bottom: 20px; z-index: 1; color: #ffffff; width: 42px; height: 42px; line-height: 42px; vertical-align: middle; text-align: center; border: solid 1px #2B63D1; }

.box-photo .num:after { content: ""; display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; right: -5px; bottom: -5px; z-index: -1; border-bottom: solid 1px #2B63D1; border-right: solid 1px #2B63D1; }

/***************************** end genneral *****************************/
/*home*/
.box-recent { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; line-height: 20px; padding: 20px; background-color: #EDF5FF; display: block; overflow: hidden; }

.box-recent a { font-size: 15px; }

.box-recent .time { margin: 0 0 3px; }

.box-recent .time span { background-color: #EDF5FF; padding: 0 5px 0 0; position: relative; z-index: 2; }

.box-recent li { margin: 0 0 20px; }

.box-recent li:first-child a { font-size: 18px; }

.box-recent li:first-child .time { font-size: 18px; color: #2B63D1; }

.box-recent li:first-child .time::after { background-color: #2B63D1; }

.home-highlights .list-detail { padding: 20px; background-color: #F5F5F5; }

.home-highlights .list-detail { margin: 0 0 10px; border-top: solid 5px #132F65; }

.home-highlights .list-detail p { margin: 0; }

.highlights-side .list-h { border-top: solid 1px #DDDDDD; padding: 20px 0; }

@media screen and (max-width: 991px) { .highlights-side .list-h:first-of-type { border-top: none; } }

.box-enews { padding: 35px 25px; color: #ffffff; background: #1e7abd url(../images/bg-epaper.jpg); background-size: cover; overflow: hidden; text-transform: uppercase; }

.box-enews .menu { width: calc(100% - 150px); float: left; }

.box-enews .menu h4 { border-bottom: solid 1px #ffffff; margin: 0 0 18px; padding: 0 0  18px; }

.box-enews figure { width: 130px; float: left; margin: 0 0 0 20px; position: relative; }

.box-enews figure figcaption { position: absolute; display: block; overflow: hidden; left: 3px; right: 3px; bottom: -10px; max-width: 150px; margin: auto; background: #132F65; font-size: 11px; padding: 5px 10px; text-align: center; }

.box-enews ul { margin: 0; padding: 0; font-size: 12px; }

.box-enews ul li { display: block; width: 50%; float: left; padding: 0 0 0 10px; position: relative; margin: 0 0 5px; }

.box-enews ul li:before { content: ""; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 5px; height: 5px; background: #ffffff; position: absolute; display: block; overflow: hidden; left: 0; top: 0; bottom: 0; margin: auto; }

.box-enews ul li a { color: #ffffff; }

@media screen and (max-width: 992px) { .box-enews .menu, .box-enews figure { width: 100%; }
  .box-enews figure { margin: 30px 0 0; } }

/*tabs*/
.box-tab .tabs { background-color: #F5F5F5; padding: 0 30px; }

.tabs-nav li { float: left; width: 50%; display: block; margin-right: 0; font-family: 'arial_black'; font-size: 13px; }

.tabs-nav li:last-child { margin-right: 0; }

.tabs-nav a { text-transform: uppercase; padding: 18px 0; color: #CCCCCC; display: block; text-align: center; text-decoration: none; }

.tabs-nav a:hover { color: #132F65; }

.tab-active a { color: #132F65; cursor: default; position: relative; }

.tab-active a:after { content: ""; width: 100%; height: 5px; position: absolute; display: block; background-color: #2B63D1; bottom: -3px; z-index: 1; }

.tabs-stage { border-top: solid 3px #ffffff; clear: both; position: relative; top: -1px; }

.list-num { overflow: hidden; display: block; font-family: charis_silbold, Georgia,Times,Times New Roman,serif; }

.list-num li { font-size: 18px; line-height: 22px; padding: 18px 0 18px 0; position: relative; border-bottom: solid 1px #ffffff; display: block; overflow: hidden; }

.list-num li:last-child { border-bottom: none; }

.list-num .num { font-size: 40px; color: #2B63D1; display: block; float: left; width: 48px; line-height: 30px; font-weight: lighter; }

.list-num a { display: block; float: left; width: calc(100% - 58px); }

/*slide*/
.tab-slider--nav { width: 100%; position: absolute; padding: 0; left: 0px; right: 0px; top: 0; z-index: 9; }

@media screen and (max-width: 991px) { .tab-slider--nav { display: none; } }

.tab-slider--tabs { display: block; margin: 0; padding: 0; list-style: none; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.tab-slider--tabs:after { content: ""; width: 20%; background: #345F90; height: 2px; position: absolute; bottom: 0; left: 0; -webkit-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; z-index: 4; display: none; }

.tab-slider--tabs .active { border-bottom: 2px solid; }

/* .tab-slider--tabs .active:nth-child(1) { color: #00A950; border-color: #00A950; }

.tab-slider--tabs .active:nth-child(2) { color: #174481; border-color: #174481; }

.tab-slider--tabs .active:nth-child(3) { color: #2D625D; border-color: #2D625D; }

.tab-slider--tabs .active:nth-child(4) { color: #14742A; border-color: #14742A; }

.tab-slider--tabs .active:nth-child(5) { color: #B57A2A; border-color: #B57A2A; } */

.tab-slider--tabs li.active[rel="tab1"] { color: #00A950; border-color: #00A950; }

.tab-slider--tabs li.active[rel="tab2"] { color: #174481; border-color: #174481; }

.tab-slider--tabs li.active[rel="tab3"] { color: #2D625D; border-color: #2D625D; }

.tab-slider--tabs li.active[rel="tab4"] { color: #14742A; border-color: #14742A; }

.tab-slider--tabs li.active[rel="tab5"] { color: #B57A2A; border-color: #B57A2A; }

.tab-slider--tabs.slide:after { left: 20px; }

.tab-slider--trigger { font-size: 12px; line-height: 12px; font-weight: bold; color: #666; text-transform: uppercase; text-align: center; padding: 15px 0 10px 0; margin: 0 20px; position: relative; z-index: 2; cursor: pointer; display: inline-block; /*-webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.tab-slider--body { margin-bottom: 20px; }

@media screen and (max-width: 991px) { .tab-slider--body { display: block !important; } }

/*diary info*/
@media screen and (max-width: 991px) { .today-info .block-hide { display: none; } }

@media screen and (max-width: 991px) { .today-info .block-show { display: block; } }

.box-full { display: block; overflow: hidden; }

.box-half { width: 50%; float: left; }

@media screen and (max-width: 991px) { .box-half { width: 100%; } }

.box-diary-info { position: relative; }

.box-diary { padding: 50px 20px 20px; font-size: 13px; line-height: 20px; overflow: hidden; position: relative; height: 185px; }

.box-diary h4 { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 12px; font-weight: bold; border-bottom: 2px solid #ffffff; padding: 0 0 10px; }

.box-diary .box-sponser { display: block; margin: 5px 0 0; text-align: right; }

.box-diary .t-head { font-weight: bold; color: #333333; margin-bottom: 10px; font-size: 11px; }

@media screen and (max-width: 991px) { .box-diary .t-head { margin-top: 15px; } }

.box-diary:before { display: none; content: ""; display: block; overflow: hidden; position: absolute; left: 20px; right: 20px; height: 2px; background-color: #ffffff; top: 37px; }

@media screen and (max-width: 991px) { .box-diary:before { display: none; } }

@media screen and (max-width: 1199px) { .box-diary { height: 270px; } }

@media screen and (max-width: 991px) { .box-diary { padding: 20px; height: 380px; } }

.box-diary .active { border-bottom: 2px solid; }

.box-exchange { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; }

.box-exchange .t-row { margin-bottom: 3px; overflow: hidden; }

.box-exchange .t-row .t-col { width: 30%; display: block; float: left; text-align: center; }

.box-exchange .t-row .t-col:first-child { text-align: left; }

@media screen and (max-width: 991px) { .box-exchange .t-row .t-col { width: 33.33%; } }

@media screen and (max-width: 991px) { .box-exchange .t-row { margin-bottom: 8px; } }

.box-weather ul { overflow: hidden; }

.box-weather ul li { display: block; float: left; overflow: hidden; margin: 0 0 10px; padding: 0 15px; position: relative; }

.box-weather ul li:before { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; left: 0; }

@media screen and (max-width: 991px) { .box-weather ul li:before { display: none; } }

.box-weather ul li:first-child { padding: 0 9px 0 0; }

.box-weather ul li:first-child:before { display: none; }

@media screen and (max-width: 1199px) { .box-weather ul li:first-child { padding: 0; } }

@media screen and (max-width: 1199px) { .box-weather ul li { width: 23.333%; } }

@media screen and (max-width: 991px) { .box-weather ul li { width: 100%; float: right; margin: 0; padding: 0; border-bottom: 1px solid #fff; } }

@media screen and (max-width: 991px) { .box-weather ul { margin-top: 6px; } }

.box-weather .w-info { display: block; float: left; margin: 0 10px 0 0; }

@media screen and (max-width: 991px) { .box-weather .w-info { float: inherit; width: 100%; } }

.box-weather .w-ic { max-width: 60px; display: block; float: left; }

.box-weather .w-ic img { width: 100%; }

@media screen and (max-width: 991px) { .box-weather .w-ic { max-width: 40px; width: 10%; }
  .box-weather .w-ic img { margin-top: 5px; } }

.box-weather .w-ic i { display: inline-block; width: 40px; height: 40px; margin: auto; background: url(../images/icon/w-icon.svg) no-repeat; background-size: 100%; }

.box-weather .w-ic .sunny { background-position: center top; }

.box-weather .w-ic .cloudy { background-position: center -67px; }

.box-weather .w-ic .drizzle { background-position: center -139px; }

.box-weather .w-ic .rainy { background-position: center -226px; }

.box-weather .w-ic .stormy { background-position: center -306px; }

.box-weather .w-ic .wave1 { background-position: center -385px; }

.box-weather .w-ic .wave2 { background-position: center -457px; }

.box-weather .w-ic .cool { background-position: center -540px; }

.box-weather .w-ic .cold { background-position: center -625px; }

.box-weather .w-ic .freezing { background-position: center -67px; }

.box-weather .name { text-transform: uppercase; font-weight: bold; }

@media screen and (max-width: 991px) { .box-weather .name { width: 50%; display: block; float: left; line-height: 50px; } }

.box-weather span { display: block; }

@media screen and (max-width: 991px) { .box-weather span { display: inline-block; } }

@media screen and (max-width: 991px) { .box-weather .w-type { width: 20%; } }

.box-weather .degree { font-size: 20px; margin: 4px 0 0; }

.box-weather .degree span { display: inline-block !important; }

.box-weather .degree .color-1 { color: #AF4242; }

.box-weather .degree .color-2 { color: #1E79BC; }

@media screen and (max-width: 991px) { .box-weather .degree { display: inline-block; width: 40%; text-align: center; line-height: 40px; font-size: 16px; } }

/* @media screen and (max-width: 1199px) { .box-set .row .row { margin-left: 0; margin-right: 0; }
  .box-set .row .row [class*='col'] { padding-left: 0; padding-right: 0; } } */

.box-set .row .row [class*='col'] { padding-left: 0; padding-right: 0; } 


@media screen and (max-width: 1199px) { .box-set { margin-top: 15px; } }

@media screen and (max-width: 767px) { .box-set .row [class*='col'] { width: 100%; overflow: hidden; } }


.box-set .up { font-weight: bold; color: #3A964F; }

.box-set .down { font-weight: bold; color: #CC0000; }

/*color*/
.theme-1 { background-color: #E5F6ED; color: #666666; }

.theme-1 h4 { color: #00A950; border-color: #00A950; }

.theme-1 strong { color: #00A950; font-weight: bold; }

.theme-1 .add-border { position: relative; }

.theme-1 .add-border:before { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; left: -10%; }

.theme-2 { background-color: #E7EFF5; color: #666666; }

.theme-2 h4 { color: #174481; border-color: #174481; }

.theme-2 strong { color: #174481; font-weight: bold; text-transform: uppercase; }

.theme-2 .add-border { position: relative; }

.theme-2 .add-border:before { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; }

.theme-3 { background-color: #E2EDEC; color: #666666; }

.theme-3 h4 { color: #2D625D; border-color: #2D625D; }

.theme-3 strong { color: #2D625D; font-weight: bold; text-transform: uppercase; }

.theme-3 .add-border { position: relative; }

.theme-3 .add-border:before { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; left: 0px; width: 1px; }

.theme-3 .add-border:after { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; right: 15px; top: 0; }

.theme-3 .row { margin: 0 0 8px; }

@media screen and (max-width: 991px) { .theme-3 .row { margin: 4px 0 4px; } }

.theme-4 { background-color: #E9F2E9; color: #666666; }

.theme-4 h4 { color: #14742A; border-color: #14742A; }

.theme-4 strong { color: #14742A; font-weight: bold; text-transform: uppercase; }

.theme-4 .add-border { position: relative; }

.theme-4 .add-border:before { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; left: -50px; }

@media screen and (max-width: 991px) { .theme-4 .text-center { text-align: right !important; }
  .theme-4 .row { margin-bottom: 8px; } }

.theme-4 .row { margin-bottom: 4px; }

.theme-5 { background-color: #F8F3E2; color: #666666; }

.theme-5 h4 { color: #B57A2A; border-color: #B57A2A; }

.theme-5 strong { color: #B57A2A; font-weight: bold; text-transform: uppercase; }

.theme-5 .add-border { position: relative; }

.theme-5 .add-border:before { content: ""; width: 1px; height: 100%; background-color: #ffffff; position: absolute; }

@media screen and (max-width: 767px) { .theme-5 span { display: inline-block; } }

.theme-5 .row { margin-bottom: 8px; }

@media screen and (max-width: 991px) { .theme-5 .row { margin-top: 15px; }
  .theme-5 .col-15 { margin-bottom: 5px; } }

.theme-5 .t-bold { display: inline-block; margin-right: 10px; font-weight: bold; }

.non-tab .box-diary { padding: 20px; height: auto; margin: 0 0 20px; }

.non-tab .box-diary:before { display: none; }

.non-tab .box-diary .t-head { margin: 10px 0 10px; }

@media screen and (max-width: 991px) { .non-tab .box-diary { height: auto; } }

.non-tab .box-set .row { margin-top: 10px; }

.non-tab .box-set [class*='col'] { padding-left: 0; padding-right: 0; }

/*section**************************************************************************************/
.section-nav { display: block; overflow: hidden; margin: 30px 0 15px 0; }

.section-nav ul li { display: block; float: left; margin: 0 10px; line-height: 32px; position: relative; }

.section-nav ul li:first-child { margin: 0 20px 0 0; font-size: 32px; font-family: 'arial_black'; }

.section-nav ul li a { font-size: 16px; margin: 0 10px; line-height: 43px; position: relative; }

.section-nav ul li:after { content: ""; position: absolute; display: block; overflow: hidden; width: 1px; height: 15px; top: 0; bottom: 0; margin: auto 0; right: -10px; background-color: #2B63D1; }

.hilight_sec .list-detail h2 { font-size: 30px; line-height: 38px; }

.hilight_sec .list-h figure { width: 134px; }

.hilight_sec .list-h .list-detail { width: calc(100% - 134px); padding-right: 0; }

@media screen and (max-width: 991px) { .hilight_sec [class*='col-'] { margin: 0 0 20px; } }

/*article news**************************************************************************************/
.article-news h3 { font-size: 22px; line-height: 30px; }

.article-news h4 { font-size: 19px; line-height: 30px; }

.article-news p, .article-news li { font-family: Georgia,Times,Times New Roman,serif; font-size: 19px; line-height: 32px; color: #121212; }

.article-news p { margin: 0 0 30px; }

.article-news a { color: #2B63D1; }

.article-headline { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; }

.article-headline h2 { font-size: 40px; line-height: 48px; border-bottom: 1px solid #DDDDDD; padding: 0 0 20px; margin: 0 0 15px; }

.article-headline p { font-family: Georgia,Times,Times New Roman,serif; font-style: italic; font-size: 20px; line-height: 30px; padding: 0 0 15px; margin: 0 0 15px; border-bottom: 1px solid #DDDDDD; }

.article-info { text-transform: uppercase; margin: 0 0 20px; }

.article-info p { font-size: 11px; margin: 0; padding: 0; line-height: 18px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; color: #666666; }

.article-info span { color: #2B63D1; }

.box-img { margin: 0 0 30px; }

.box-img figcaption { font-family: Georgia,Times,Times New Roman,serif; font-size: 14px; position: relative; margin: 10px 10px 10px 20px; color: #666666; }

.box-img figcaption:before { content: ""; position: absolute; width: 1px; top: 5px; bottom: 5px; left: -10px; background-color: #2B63D1; }

.articl-content ol { margin: 0 0 30px; padding: 0; }

.articl-content ol li { list-style: decimal; margin: 0 0 0 20px; }

.articl-content ul { margin: 0 0 30px; }

.articl-content ul li { position: relative; padding: 0 0 0 20px; }

.articl-content ul li:before { content: ""; width: 5px; height: 5px; display: block; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #2B63D1; top: 13px; left: 0; }

.articl-content p img { max-width: 100%; margin: auto; text-align: center; }

.box-tag { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; margin-top: 60px; }

.box-tag ul { margin: 30px 0; }

.box-tag ul li { display: inline-block; margin-right: 1px; }

.box-tag ul li:first-child { margin-right: 20px; font-weight: bold; }

.box-tag ul li a { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; color: #132F65; font-size: 13px; display: block; padding: 2px 15px; border: solid 1px #EEEEEE; }

.box-tag ul li a:hover { border-color: #2B63D1; color: #2B63D1; }

.box-share { text-align: center; position: -webkit-sticky; position: sticky; display: block; top: 70px; }

.box-share label { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 12px; color: #999999; line-height: 12px; margin: 0; }

.box-share a { width: 40px; height: 40px; line-height: 40px; margin: 0 auto; border: solid 1px #dddddd; color: #132F65; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

.box-share li { margin: 0 0 10px; text-align: center; position: relative; }

.box-share li.comment-icon { margin: 10px 0 0; }

.box-share li.comment-icon a { border: none; }

.box-share li.comment-icon:before { content: ""; width: 40px; height: 1px; position: absolute; left: 0; right: 0; top: 0; margin: auto; display: block; background-color: #EEEEEE; }

.box-share li.comment-icon label { position: absolute; bottom: -10px; left: 0; right: 0; margin: auto; }

.box-share-h ul li { margin: 0 5px 0; text-align: center; position: relative; display: block; font-size: 11px; line-height: 40px; float: left; color: #666666; }

.box-share-h a { width: 40px; height: 40px; line-height: 40px; font-size: 23px; margin: 0 auto; border: solid 1px #dddddd; color: #132F65; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-share-h a:hover { color: #ffffff; background-color: #2B63D1; }

.box-comment { width: 100%; max-width: 600px; overflow: scroll; position: fixed; background-color: #ffffff; top: 0; bottom: 0; z-index: 900; right: 0; -webkit-box-shadow: -1px 0px 8px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px 0px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: -1px 0px 8px 0px rgba(0, 0, 0, 0.2); }

@media screen and (max-width: 767px) { .box-comment { max-width: inherit; } }

.box-comment .box-list-comment { padding: 40px; }

.box-comment .box-btn { position: absolute; top: 10px; right: 45px; z-index: 901; }

.box-comment .box-btn:hover { color: #2B63D1; cursor: pointer; }

.box-comment .h-comment { font-family: 'arial_black'; font-size: 18px; line-height: 26px; border-top: 1px solid #000; border-bottom: 1px solid #DDDDDD; padding: 7px 0; color: #333333; }

.box-comment p { margin: 25px 0; }

.box-comment ul { overflow: hidden; }

.box-comment ul li { display: block; border-top: 1px dotted #2B63D1; padding: 30px 0; overflow: hidden; }

.box-comment ul li ul { margin-left: 90px; }

.box-comment ul li ul li { border-top: 1px solid #EEEEEE; }

.box-comment ul li ul li .box-info { margin: 0 0 0 20px; }

.box-comment ul li ul li:last-child { padding: 30px 0 0 0; }

.box-comment .img-profile { width: 70px; height: 70px; float: left; line-height: 70px; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #DDDDDD; }

.box-comment .img-profile img { width: 100%; }

.box-comment .box-info { width: calc(100% - 90px); float: left; font-size: 15px; margin: 0 0 20px 20px; }

.box-comment .box-info .top-info { font-size: 11px; margin: 0 0 5px; }

.box-comment .box-info .top-info span { display: inline-block; margin: 0 3px 0 0; color: #999999; }

.box-comment .box-info .top-info .user-name { font-size: 12px; color: #132F65; }

.box-comment .box-info .top-info .nation { width: 16px; height: 11px; line-height: 11px; overflow: hidden; }

.box-comment .box-info .top-info .nation img { width: 100%; }

.box-comment .box-info h5 { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; font-size: 15px; }

.box-comment .box-info .f-comment { display: block; overflow: hidden; font-size: 11px; margin-top: 10px; }

.box-comment .box-info .f-comment span { margin-right: 3px; position: relative; }

.box-comment .box-info .f-comment span:last-child { padding-left: 15px; }

.box-comment .box-info .f-comment span a:hover { color: #2B63D1; }

.box-comment .box-info .f-comment i { font-size: 14px; margin-right: 4px; }

.box-comment .box-info .f-comment .icon-unlike { line-height: 25px; vertical-align: bottom; font-family: "wa-font-1"; }

.box-comment .box-info .f-comment .icon-unlike:before { content: "\78"; position: absolute; top: -3px; width: 15px; height: 15px; display: block; z-index: 2; left: 0; }

.box-comment .box-info .f-comment .f-left { width: 50%; display: block; overflow: hidden; float: left; }

.box-comment .box-info .f-comment .f-left a { color: #999999; }

.box-comment .box-info .f-comment .f-right { width: 50%; display: block; overflow: hidden; float: right; text-align: right; text-transform: uppercase; }

.box-comment .box-info .f-comment .f-right a { color: #2B63D1; }

.box-comment .box-more { display: block; text-transform: uppercase; text-align: center; }

.box-comment .box-more a { display: block; color: #132F65; background-color: #fff; border: 2px solid #132F65; font-size: 12px; color: #132F65; padding: 8px 20px; }

.box-comment .box-more a:hover { background-color: #2B63D1; color: #fff; border-color: #2B63D1; }

.box-comment .box-add-comment { background-color: #F5F5F5; margin: 30px 0 0; position: relative; padding: 20px 40px; }

.box-comment .box-add-comment .h-comment { border: none; }

.box-comment .box-add-comment .text-comment { width: 100%; height: 170px; margin: 10px 0; border: none; padding: 20px; }

.box-comment .box-add { display: block; text-transform: uppercase; text-align: center; }

.box-comment .box-add a { display: block; color: #132F65; background-color: #132F65; border: 2px solid #132F65; font-size: 12px; color: #fff; padding: 8px 20px; }

.box-comment .box-add a:hover { background-color: #2B63D1; color: #fff; border-color: #2B63D1; }

.box-reply { display: block; overflow: hidden; margin: 15px 0 0; }

.box-reply .text-comment { width: 100%; padding: 10px; border: 1px solid #666666; }

/*Topic******************************************************************/
.list-hover { position: relative; overflow: hidden; }

.list-hover a { color: #ffffff; }

.list-hover a:hover { text-decoration: underline; }

.list-hover figure { display: block; overflow: hidden; }

.list-hover figcaption { position: absolute; left: 30px; right: 30px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }

.list-hover figcaption h3 { position: absolute; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); text-align: center; color: #fff; padding: 0 0 20px; left: 0; right: 0; }

.list-hover figcaption h4 { font-size: 16px; line-height: 20px; position: absolute; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); text-align: center; color: #fff; padding: 0 0 10px; left: 0; right: 0; }

.list-hover figcaption ul { border-top: 1px #fff solid; display: block; padding: 20px 0 0; margin-bottom: 20px; }

.list-hover figcaption ul li { list-style: disc; margin-left: 20px; margin-bottom: 10px; color: #fff; }

.list-hover figcaption ul li a { color: #fff; }

.list-hover:hover figcaption { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }

.list-hover .view-all { text-align: center; }

.list-hover .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: -webkit-linear-gradient(rgba(19, 76, 154, 0), #134c9a); background-image: -o-linear-gradient(rgba(19, 76, 154, 0), #134c9a); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(19, 76, 154, 0)), to(#134c9a)); background-image: linear-gradient(rgba(19, 76, 154, 0), #134c9a); }

.list-hover .overlay-dark { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.list-hover:hover .overlay-dark { background-color: rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

/*Opinion************************************************************************/
.wrap-list { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; }

.wrap-list .col-list { width: 33%; float: left; border-right: 1px #cccccc solid; padding: 20px; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.wrap-list .col-list:hover { background-color: #edf5ff; }

.wrap-list .col-list:last-child { border-right: 0; }

@media screen and (max-width: 767px) { .wrap-list .col-list { width: 100%; border-bottom: 1px #cccccc solid; border-right: 0; display: block; margin: 0 0 20px; } }

@media screen and (max-width: 767px) { .wrap-list { display: block; } }

.box-other { background-color: #EDF5FF; padding: 45px 0; }

.box-columnist { display: block; overflow: hidden; font-size: 11px; font-weight: bold; }

.box-columnist .box-border-p { display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 122px; height: 122px; overflow: hidden; border: 2px #EDF5FF solid; text-align: center; vertical-align: middle; margin: 0 auto; padding: 3px; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-columnist .box-circle { display: block; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 100%; height: 100%; overflow: hidden; margin: auto; opacity: 0.6; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-columnist .box-circle img { width: 100%; position: relative; z-index: 1; }

.box-columnist .columnist-info { text-align: center; padding-top: 15px; text-transform: uppercase; }

.box-columnist .columnist-info p { font-size: 12px; color: #121212; }

.box-columnist .columnist-info span { color: #555555; }

.box-columnist:hover p { color: #2B63D1; }

.box-columnist:hover span { color: #2B63D1; }

.box-columnist:hover .box-circle { opacity: 1; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-columnist:hover .box-border-p { border: 2px #2B63D1 solid; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-postbag { background-color: #EDF5FF; margin: 0 0 30px; padding: 20px; }

.box-postbag .link-postbag { display: block; padding-left: 70px; max-width: 260px; margin: auto; font-size: 15px; line-height: 20px; font-weight: bold; color: #2B63D1; background: url(../images/icon/ic-post.svg) no-repeat left center; background-size: 60px; }

.box-character ul { display: block; overflow: hidden; margin-top: 20px; }

.box-character ul li { width: calc(50% - 20px); float: left; margin: 0; padding: 20px 0; text-transform: uppercase; border-top: 1px solid #ccc; }

.box-character ul li:nth-child(even) { margin-left: 40px; }

@media screen and (max-width: 767px) { .box-character ul li:nth-child(even) { margin-left: 0; } }

.box-character ul li:nth-child(1) { border: none; }

.box-character ul li:nth-child(2) { border: none; }

@media screen and (max-width: 767px) { .box-character ul li:nth-child(2) { border-top: 1px solid #ccc; } }

.box-character ul li a { display: block; color: #333333; }

.box-character ul li a:hover { color: #2B63D1; }

@media screen and (max-width: 767px) { .box-character ul li { width: 100%; } }

.nav-alphabet { background-color: #EDF5FF; padding: 5px 10px; text-transform: uppercase; font-weight: bold; }

.nav-alphabet span { margin-right: 10px; }

.nav-alphabet span a { color: #999999; }

.nav-alphabet span a:hover { color: #2B63D1; }

.nav-alphabet .active { color: #2B63D1; }

.box-view { display: block; overflow: hidden; }

.box-view .info { width: calc(100% - 180px); float: left; padding: 30px 0; }

@media screen and (max-width: 767px) { .box-view .info { width: 100%; float: inherit; padding-top: 170px; margin-top: 30px; } }

.box-view .info .name { font-size: 24px; line-height: 24px; font-weight: bold; text-transform: uppercase; color: #000000; }

.box-view .info .position { font-size: 11px; position: relative; text-transform: uppercase; margin: 5px 0 20px; padding: 0 0 20px; }

.box-view .info .position:before { content: ""; position: absolute; width: 40px; height: 2px; display: block; overflow: hidden; bottom: 0px; background-color: #2B63D1; }

.box-view .info .contact a { color: #555555; }

.box-view .info .contact a:hover { color: #2B63D1; }

.box-view .box-img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 170px; height: 170px; overflow: hidden; max-width: 100%; max-height: 100%; float: right; border: 4px solid #2B63D1; margin: auto; }

.box-view .box-img img { width: 100%; }

@media screen and (max-width: 767px) { .box-view .box-img { position: absolute; float: inherit; margin-bottom: 30px; top: 30px; left: 0; right: 0; } }

.head-postbag { display: block; border-bottom: solid 1px #333333; padding-bottom: 20px; margin: 10px 0; }

.head-postbag h2 { font-size: 24px; margin-bottom: 15px; }

.postbags-info { display: block; overflow: hidden; }

.postbags-info .date { float: left; display: inline-block; padding: 5px 10px; background-color: #F5F5F5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 20px; font-weight: bold; color: #2B63D1; }

.postbags-info .date a { color: #2B63D1; }

.postbags-info .date i { font-size: 10px; }

.postbags-info .date .icon-cal { display: inline-block; width: 20px; height: 25px; margin-right: 7px; overflow: hidden; position: relative; background: url(../images/icon/icon-cal.svg) no-repeat; background-size: 100%; }

@media screen and (max-width: 767px) { .postbags-info .date { float: inherit; } }

.postbags-info .box-share-h { float: right; position: relative; top: inherit; }

@media screen and (max-width: 767px) { .postbags-info .box-share-h { float: inherit; margin-top: 10px; } }

.box-user-postbag { display: block; overflow: hidden; }

.box-user-postbag h4 { font-size: 19px; margin-bottom: 10px; }

.box-user-postbag ul { text-align: center; margin: 30px 0 0; }

.box-user-postbag ul li { display: block; border-bottom: solid 1px #DEDEDE; margin: 30px 0 0; }

.box-user-postbag p { font-size: 19px; line-height: 32px; font-family: Georgia,Times,Times New Roman,serif; text-align: left; }

.box-user-postbag .name { display: block; text-align: right; font-size: 15px; font-weight: bold; margin: 20px 0 30px; }

.icon-next { display: inline-block; width: 30px; height: 60px; margin-left: 10px; line-height: 60px; vertical-align: middle; margin-right: 7px; overflow: hidden; position: relative; background: url(../images/icon/icon-next.svg) no-repeat center center; background-size: 100%; }

.icon-prev { display: inline-block; width: 30px; height: 60px; margin-right: 10px; line-height: 60px; vertical-align: middle; margin-right: 7px; overflow: hidden; position: relative; background: url(../images/icon/icon-prev.svg) no-repeat center center; background-size: 100%; }

.box-control-page { display: block; overflow: hidden; margin-top: 30px; font-weight: bold; }

.box-control-page .box-prev { float: left; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-control-page .box-prev:hover .icon-prev { webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; background: url(../images/icon/icon-prev-h.svg) no-repeat center center; background-size: 100%; }

.box-control-page .box-next { float: right; webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

.box-control-page .box-next:hover .icon-next { webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; background: url(../images/icon/icon-next-h.svg) no-repeat center center; background-size: 100%; }

.box-submit-postbag { display: block; background-color: #EDF5FF; padding: 33px; text-align: center; margin: 60px 0 0; }

.box-submit-postbag strong { font-family: 'arial_black',Helvetica Neue,Helvetica,sans-serif; }

.box-submit-postbag p { width: 300px; margin: 10px auto 20px; }

.box-submit-postbag a { display: block; color: #132F65; background-color: #132F65; border: 2px solid #132F65; font-size: 12px; color: #fff; padding: 8px 20px; max-width: 300px; margin: auto; }

.box-submit-postbag a:hover { background-color: #2B63D1; color: #fff; border-color: #2B63D1; }

/*photo**************************************************************************/
.media-page .box-border-top { margin-bottom: 10px; }

.media-page .box-photo { margin-bottom: 30px; }

.media-page .box-photo figcaption { position: relative; background-color: black; }

.media-page .box-photo figcaption:hover { background-color: black; }

.media-page .box-photo figure:hover { background-color: black; }

.media-page .block-photo { overflow: hidden; margin: 50px 0; display: block; }

.media-page .block-photo img { width: 100%; }

.media-page .block-photo p { padding: 15px; background-color: #F5F5F5; }

.box-photo-overview { display: block; position: relative; overflow: hidden; margin: 0 0 30px; }

.box-photo-overview .box-img { width: calc(100% - 410px); position: relative; margin: 0; }

@media screen and (max-width: 991px) { .box-photo-overview .box-img { width: 100%; } }

.box-photo-overview .box-img img { width: 100%; }

.section-video-highlight .box-photo-overview .box-img img { width: auto; }

.box-photo-overview .box-caption { width: 410px; display: block; position: absolute; right: 0; bottom: 0; top: 0; background-color: black; padding: 30px; color: #CCCCCC; }

@media screen and (max-width: 991px) { .box-photo-overview .box-caption { width: 100%; position: relative; top: inherit; } }

.box-photo-overview h3 { font-size: 30px; margin-bottom: 10px; }

.box-photo-overview h3 a { color: #ffffff; }

.box-photo-overview h3 a:hover { color: #2B63D1; }

.box-photo-overview p { margin-bottom: 20px; }

.box-photo-overview .num { position: absolute; display: block; right: 20px; bottom: 20px; z-index: 1; color: #ffffff; width: 42px; height: 42px; line-height: 42px; vertical-align: middle; text-align: center; border: solid 1px #2B63D1; }

.box-photo-overview .num:after { content: ""; display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; right: -5px; bottom: -5px; z-index: -1; border-bottom: solid 1px #2B63D1; border-right: solid 1px #2B63D1; }

.head-photo { background-color: #111111; color: #ffffff; display: block; overflow: hidden; padding: 0; }

.head-photo .num { width: 110px; float: left; text-align: center; margin: 30px 0; }

.head-photo .num span { font-family: charis_silbold, Georgia,Times,Times New Roman,serif; display: block; font-size: 48px; line-height: 40px; }

.head-photo .detail { width: calc(100% - 410px); float: left; border-left: solid 2px #2B63D1; padding: 0 30px; margin: 30px 0; }

.head-photo .detail h3 { font-size: 30px; margin-bottom: 5px; }

@media screen and (max-width: 992px) { .head-photo .detail { width: calc(100% - 110px); margin: 30px 0 0; } }

.box-photo-share { width: 300px; float: left; margin: 20px 0 0; }

.box-photo-share ul { text-align: center; }

.box-photo-share ul li { display: inline-block; position: relative; padding-top: 20px; margin: 0 5px; text-align: center; }

.box-photo-share ul li:last-child { margin: 0 0 0 5px; padding: 20px 20px 0 15px; border-left: solid 1px #333333; }

.box-photo-share ul li:last-child a { border: none; font-size: 25px; }

.box-photo-share ul li label { position: absolute; top: 0; left: 0; right: 0; margin: auto; color: #999999; font-size: 12px; }

.box-photo-share ul a { color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 40px; height: 40px; overflow: hidden; line-height: 40px; border-left: solid 2px #2B63D1; display: block; border: solid 1px #ffffff; font-size: 20px; }

.box-photo-share ul a:hover { border: solid 1px #2B63D1; background-color: #2B63D1; }

@media screen and (max-width: 992px) { .box-photo-share { margin-left: 110px; margin-bottom: 30px; } }

.box-overview-share { display: block; overflow: hidden; position: absolute; bottom: 30px; right: 30px; }

.box-overview-share ul { text-align: right; }

.box-overview-share ul li { display: inline-block; position: relative; padding-top: 20px; margin: 0 5px; text-align: center; }

.box-overview-share ul li label { position: absolute; top: 0; left: 0; right: 0; margin: auto; color: #999999; font-size: 12px; }

.box-overview-share ul a { color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 40px; height: 40px; overflow: hidden; line-height: 40px; display: block; border: solid 1px #ffffff; font-size: 23px; }

.box-overview-share ul a:hover { border: solid 1px #2B63D1; background-color: #2B63D1; }

@media screen and (max-width: 992px) { .box-overview-share { position: relative; } }

.bg-theme-dark { margin-top: 30px; }

.bg-theme-dark .box-border-top { border-color: #333333; }

.bg-theme-dark .list-vdo { height: auto; margin-bottom: 30px; position: relative; }

.bg-theme-dark .list-vdo .play-time { bottom: 30px; }

.bg-theme-dark .chanel { color: #ffffff; }

.bg-theme-dark .chanel a { color: #ffffff; }

.bg-theme-dark .box-loadmore .btn-loadmore { border-color: #ffffff; color: #ffffff; }

.bg-theme-dark .box-loadmore .btn-loadmore:hover { border-color: #2B63D1; }

.media-page .list-detail-mt { background-color: #111111; padding: 20px 20px 40px; }

.other-vdo .list-detail-mt { background-color: #111111; padding: 10px 10px 40px; }

.other-vdo .play-time { padding: 5px 10px; }

.main-player { background-color: #111111; margin-top: -30px; padding: 20px; }

.sub-content { padding: 30px; }

.sub-content .play-time { bottom: 0 !important; right: 0; }

.sub-content .box-overview-share { bottom: inherit; }

.sub-content .box-overview-share li:last-child { margin-left: 7px; padding-left: 10px; border-left: solid 1px #333333; }

.sub-content .box-overview-share li:last-child a { border: none; font-size: 25px; }

.sub-content .box-overview-share li:last-child label { margin-left: 5px; }

.media-headline h2 { font-size: 30px; margin: 0 0 20px; }

.media-headline .f-icon { margin: 20px 0 0; }

/*link header section**************************************************************************/
.bg-qoute .sec-header span { width: 140px; }

.home-topics-editor .sec-header span { width: 130px; }

/***************************************************************************/
.pad-20 { padding: 20px !important; }

.pad-30 { padding: 30px !important; }

/*Member****************************************************************************************/
.box-login { width: 100%; max-width: 400px; margin: 10% auto; }

.box-login .box-login-head { background: #132F65; padding: 10px 25px; color: #ffffff; text-transform: uppercase; font-family: 'arial_black',Helvetica Neue,Helvetica,sans-serif; font-size: 13px; }

.box-login .login-content { padding: 10px 25px 25px; border: solid 1px #ddd; }

.box-login .line-sep { text-align: center; position: relative; margin: 20px 0; }

.box-login .line-sep span { display: inline-block; background-color: #ffffff; position: relative; z-index: 1; padding: 10px; color: #132F65; }

.box-login .line-sep::before { content: ""; position: absolute; width: 100%; height: 1px; display: block; overflow: hidden; background-color: #E8E8E8; top: 0; bottom: 0; margin: auto; }

.box-login h4 { color: #000000; text-transform: uppercase; font-family: 'arial_black',Helvetica Neue,Helvetica,sans-serif; font-size: 13px; margin: 0 0 15px; }

.box-login p { margin: 30px 0 0; color: #666666; }

.box-login p a { color: #2B63D1; }

.box-login .box-btn { display: block; margin: 10px 0; }

.box-login .box-next { margin: 10px 0; display: block; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.box-login .box-next a { color: #2B63D1; width: 120px; font-weight: bold; padding: 6px 30px 5px 30px; display: inline-block; border: solid 2px #2B63D1; font-size: 12px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.box-login .box-next a:hover i { margin-left: 5px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.box-login .box-next i { font-size: 10px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.btn-fb { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #3C5A99; text-align: left; line-height: 45px; padding: 2px; display: block; overflow: hidden; color: #ffffff; }

.btn-fb span { width: 45px; height: 45px; background-color: #ffffff; display: block; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 25px 0 0; text-align: center; }

.btn-fb i { color: #3C5A99 !important; line-height: 45px !important; font-size: 25px; }

.btn-fb:hover { cursor: pointer; color: #ffffff; }

.btn-gg { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #4285F3; text-align: left; color: #ffffff; padding: 2px; display: block; overflow: hidden; line-height: 45px; }

.btn-gg span { width: 45px; height: 45px; background-color: #ffffff; display: block; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 25px 0 0; }

.btn-gg .icon { background: #ffffff url(../images/icon/ic-google-login.svg) no-repeat center center; background-size: 55%; }

.btn-gg:hover { cursor: pointer; }