/*
 *  Document   : main.css
 *  Author     : Jim
 *  Description: The main stylesheet of the template
 *
 *  Structure (with shortcodes):
 *      (#m01mls) MAIN LAYOUT
 *      (#m02-1hds) HEADER
 *		(#m02-2fts) FOOTER
 *      (#m03mcs) MAIN CONTENT
 *      (#m04bos) BOOTSTRAP OVERWRITE/EXTEND STYLES
 *      (#m05ths) THEME
 *      (#m06hes) HELPERS
 *      (#m07res) RESPONSIVE
 *      (#m08rts) RETINA
 *      (#m09rprl) PRELOAD
 */

/*
=================================================================
(#m01mls) MAIN
=================================================================
*/

span.alert-text { color: #E1645F; }
span.date-text { color: #a22253;}
.index-news-list span.date-text { color: #a22253;}
div#index-banner div.owl-dot span { background: #f7f3ec; width: 14px; height: 14px; }
div#index-banner div.owl-dot.active span { background: #a22253; }

/*
=================================================================
(#m02-1hds) HEADER
=================================================================
*/
header div.xs-title-line {
	background: url(../img/crpd/xs-main/top.png);
	background-size: auto 7px;
}
header div.md-title-line {
	background: url(../img/crpd/md-main/top.png);
}

header div.xs-title {
	background: url(../img/crpd/xs-main/bg.png);
	background-position: center;
}
header div.xs-title img.xs-logo { width: 256px; height: auto;}
header div.xs-title img.xs-logo.en { width: 256px; height: auto;margin-top: 0;}

/*@media screen and (max-width: 340px){
	header div.xs-title img.xs-logo { width: 105%; height: auto; margin-top: 5px;}
}*/

header div.md-title {
	background: url(../img/crpd/md-main/bg.png);
	background-position: center;
}

header div.md-title img.md-title-logo {
    margin-top: 18px;
    margin-left: 0;
}


header div.md-title div.share-box a {
	display: inline-block;
	color: #565656;
	font-size: 14px;
	font-weight: bold;
}

@media screen and (min-width: 992px) {
	div.main-area {margin-top: -147px;}
}

div.index-line-top { background: url(../img/crpd/index/bg.png) repeat-x 0px 46px; background-size: auto 23px; }
div.md-title div.zh-box a.zh-en {
	background: url(../img/crpd/md-main/en-tag.png);
}
div.md-title div.zh-box a.zh-tw {
	background: url(../img/crpd/md-main/ch-tag.png);
}

.pagination>li>a, .pagination>li>span {
    background-color: #ffffff;
}


div.nav-box{margin-top: 20px;}
ul.header-nav>li>img {margin: 0px 13px;}
ul.header-nav.en>li>img {margin: 0px 40px;}

#sidebar-alt{background-color: #e8e2e2;}
.sidebar-nav>li{background: #e8e2e2;}
.sidebar-nav>li:first-child{background: #ff0000;}
.sidebar-nav li.nav-title { background: #94af26; }
.sidebar-nav li.nav-title a{ border-bottom: 1px solid #94af26; }
.sidebar-nav li.nav-title a:hover { background: #94af26;  }
.sidebar-nav a { border-bottom: 1px solid #b3c8b8; }
.sidebar-nav a > .sidebar-nav-icon,.sidebar-nav a > .sidebar-nav-indicator {color: #94af26; opacity: 1;}
.sidebar-nav a:hover,.sidebar-nav a.open,.sidebar-nav li.active > a {background: #e3f2e6;}
.sidebar-nav ul a i {color: #94af26;}
.sidebar-nav ul a {background: #fbf8df;}

ul.header-nav>li:hover>a { border-bottom: 5px solid #94af26;}
ul.header-nav2>li a i { color: #ee9851;  }
ul.header-nav2>li a:hover,ul.header-nav2>li a.selected { color: #94af26; }
ul.header-nav>li>a{display:inline-block; height: 32px;}

div.index-row-title label.title { color: #2664af; margin-bottom: 5px; margin-top: 24px; }
div.index-row-title h2.title { color: #2664af; margin-bottom: 7px;
    margin-top: 20px; }
div.index-row-title label.publication-period {color: #DA251C;}
div.index-row-title label.publication-period-mb {background: #DA251C; color: #ffffff;}
ul.header-nav2 {display: none; position: absolute; z-index: 100; list-style: none; padding: 10px 0px; min-width: 102px;top: 32px; background: #f7f3ec; box-shadow: 1px 1px 2px #e1e1e1;}
div.xs-title>div>div.mobile-donate>a>img{margin-top: 13px !important;}

ul.sitemap-menu li.menu-title a {
    color: #94af26;
}


/*
=================================================================
(#m02-2fts) FOOTER
=================================================================
*/

footer div.copy-right { background: #2664af; }
footer div.copy-right img.copy-right-icon { width:36px; height: 30px; }
footer img.footer-img-xs {top: 0px;}

/*
=================================================================
(#m03mcs) MAIN CONTENT
=================================================================
*/

/*=========title-banner=========*/
div.title-banner-box { border: 3px solid #e8e2e2;
outline: 2px solid #fff;
outline-offset: -5px;}
div.title-banner-box .banner-title { color: #ffffff; text-shadow: unset; }


div.title-banner-box.about { background: url(../img/crpd/about/banner_about.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.news { background: url(../img/crpd/news/banner_news.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.help { background: url(../img/crpd/help/banner_help.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.service { background: url(../img/crpd/service/banner_service.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.shop { background: url(../img/crpd/shop/banner_shop.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.media { background: url(../img/crpd/media/banner_media.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.contact { background: url(../img/crpd/contact/banner_contact.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.sitemap { background: url(../img/crpd/sitemap/banner_about.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
div.title-banner-box.sustainability { background: url(../img/crpd/esg/banner_esg.png) 100% no-repeat; background-size: auto 66px; background-color: #2665af;}
/*=========breadcrumbs=========*/
div.breadcrumbs a:hover { color: #40943c; }
div.breadcrumbs span.path_alert { color: #40943c; }

/*=========banner-title-line=========*/
div.banner-title-line { background: url(../img/crpd/content-title/line-point2.png) repeat-x 50%; background-size: auto 2px; }

/*=========left menu=========*/

ul.left-menu li+li {
	border-top: 1px dashed #b4ac99;
}

ul.left-menu li.selected a { color: #94af26; }
ul.left-menu li a:hover { color: #94af26; }





/*=========news list=========*/
h2.news-header { color: #2665af; }
div.news-title { border-left: 5px solid #94af26;background: #f7f3ec; }

/*========= periodical ==========*/
div.periodical-main h3 a.periodical-download { background: #94af26; }

/*========= contact us ==========*/
div.form-title { background: #2665af; }
div.ori-form { border: 1px dashed #dcd4c7; background: #f7f3ec; }
div.ori-form div.button-area { border-top: 1px dashed #dcd4c7; }
div.ori-form div.form-line { border-top: 1px dashed #dcd4c7; }
div.ori-form div.row.form-table-title>div { border-top: 1px dashed #D59935; border-bottom: 1px dashed #D59935; }
div.ori-form div.row.form-table-content>div+div { border-left: 1px dashed #D59935; }
div.ori-form div.row.form-table-content-last>div { border-top: 1px dashed #D59935; border-bottom: 1px dashed #D59935; }
div#refresh_img i { background: #D59935; }
a#auth_code_audio {
    border: 2px solid #2665af;
}
a#auth_code_audio:hover {
    border: 2px solid #2665af;
    background: #2665af;
}
a#auth_code_audio i {
    color: #2665af;
}

#refresh_img i {
    background: #2665af;

}

div.news-date span.news-day {
    color: #a22253;
}
div.event-list span.event-date {
    color: #a22253;
}

/*========= donate form ==========*/
button.submit-button.donate-btn-color{ background-color: #2b9892; }

/*========= board ==========*/
a.leave-button { background: #2b9892; }
div.board-box { background: url(../img/crpd/contact/bird.png) 10px 20px no-repeat #f7f3ec; background-size: 42px 28px; }

/*========= detec ==========*/
div.pc-tab-box { border-bottom: 2px solid #2665af; }
div.pc-tab-box a { background: #f7f3ec; border-top-color: #f7f3ec; color: #404040; }
div.pc-tab-box a.selected { background: #2665af; border-color: #2665af; }
div.pc-tab-box a:hover { background: #2665af; border-color: #2665af; }
div.purple-line { background: url(../img/crpd/content-title/line-point2.png) 50% repeat-x; height: 8px; margin-bottom: 5px; }
div.detec-search { background: #f7f3ec; }
div.mb-tab-box select { border-color: #2665af; }
span.detec-detail { background: #2665af; }
button.search-button { background: #2b9892; }

/*========= index =========*/
div#index-banner { border: 3px solid #e8e2e2; padding: 1px; margin-bottom: 60px; }
div#index-banner div.owl-controls { position: absolute; right: 5px; }
div#index-banner div.owl-dot.active span { background: #94af26; }
div.index-row-title label.title { margin-top: 15px; }
div.index-row-title { background: url(../img/crpd/crpd_line.png) repeat-x 0% 100%; margin-bottom: 15px; }
div.index-row-title a.more { color: #a22253; position: absolute; left: -115px; top: 20px;}
div.index-line-bottom { background: url(../img/crpd/content-title/line-point2.png) repeat-x 50%; background-size: 9px 2px; }
div.index-airticle-area { border-radius: 10px; margin-top:45px;border: 3px solid #e8e2e2; background: url(../img/crpd/index/pic.png) no-repeat 98% 100% #f7f2ec; background-size: calc(294px * 0.8) calc(212px * 0.8); padding: 50px 50px 180px 50px;}

@media screen and (min-width: 992px) {
	div.index-airticle-area { border-radius: 10px; margin-top:45px;border: 3px solid #e8e2e2; background: url(../img/crpd/index/pic.png) no-repeat 98% 100% #f7f2ec; background-size: calc(294px * 1) calc(212px * 1); padding: 50px 50px 180px 50px;}

}


div#ad-banner div.owl { border: 5px solid #f2f2f2; }
div#ad-banner div.owl-nav>div.owl-prev { background: url(../img/crpd/index/pre.png); background-size: 40px 40px; }
div#ad-banner div.owl-nav>div.owl-next { background: url(../img/crpd/index/next.png); background-size: 40px 40px; }
div.ad-box{ background: #f2f2f2;}

div.index-row-title img.icon.news { width: 50px; height: 61px; position: absolute; right: 0; top: -18px;}
div.index-row-title img.icon.publication { width: 50px; height: 61px; position: absolute; right: 0; top: -18px;}
div.index-row-title img.icon.clipping { width: 50px; height: 61px; position: absolute; right: 0; top: -18px;}
div.index-row-title img.icon.love { width: 50px; height: 61px; position: absolute; right: -10px; top: -18px;}
div.index-row-title div.area-right {position: relative;}

div.index-airticle-area img.index-airticle-icon {     width: 92px;
    height: 56px; top: -30px; left: -10px;}

div.periodical-main h3 i.title-icon { color: #94af26; margin-top: -5px; }


/*========== pagination ==========*/
ul.pagination li a { color: #2664af;  }
ul.pagination li a:hover,ul.pagination li a:active,ul.pagination li a:focus { background: #2664af; color: #fff;    height: 34px; }
ul.pagination li.hover a { background: #2664af; color: #fff; height: 34px;}

ul.pagination li.last a>i, ul.pagination li.first a>i, ul.pagination li.left a>i, ul.pagination li.right a>i {
    font-size: 16px;
    line-height: 1.5;
}


/*========== button ===========*/
button.submit-button { background: #2b9892; }
button.reset-button {
    background: #a5a19b;}
/*
=================================================================
(#m04bos) BOOTSTRAP OVERWRITE/EXTEND STYLES
=================================================================
*/


/*
=================================================================
(#m05ths) THEME
=================================================================
*/


/*
=================================================================
(#m06hes) HELPERS
=================================================================
*/


/*
=================================================================
(#m07res) RESPONSIVE
=================================================================
*/




@media screen and (max-width: 550px) {
	
}

@media screen and (max-width: 450px) {
	
}

@media screen and (min-width: 400px) {
	
}

@media screen and (min-width: 550px) {
	/*div.title-banner-box.about { background: url(../img/crpd/about/banner_about.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.news { background: url(../img/crpd/news/banner_news.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.help { background: url(../img/crpd/help/banner_help.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.service { background: url(../img/crpd/service/banner_service.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.shop { background: url(../img/crpd/shop/banner_shop.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.media { background: url(../img/crpd/media/banner_media.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.contact { background: url(../img/crpd/contact/banner.png) 100% no-repeat; background-size: 100% 66px;}
	div.title-banner-box.sitemap { background: url(../img/sitemap/banner_news.png) 100% no-repeat; background-size: 100% 66px;}
*/
}


@media screen and (min-width: 768px) {

	div.title-banner-box.about { background: url(../img/crpd/about/banner_about.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.news { background: url(../img/crpd/news/banner_news.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.help { background: url(../img/crpd/help/banner_help.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.service { background: url(../img/crpd/service/banner_service.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.media { background: url(../img/crpd/media/banner_media.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.shop { background: url(../img/crpd/shop/banner_shop.png) 100% no-repeat; }
	div.title-banner-box.contact { background: url(../img/crpd/contact/banner_contact.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.sustainability { background: url(../img/crpd/esg/banner_esg.png) 100% no-repeat; background-color: #2665af;}
	div.title-banner-box.sitemap { background: url(../img/crpd/sitemap/banner_about.png) 100% no-repeat; background-color: #2665af;}
	
	div.index-airticle-area{padding: 50px 50px 165px 50px;}
	div.index-airticle-area img.index-airticle-icon { left: -32px;}

	footer div.footer-imf { 
		background: url(../img/crpd/footer/footer-pic.png) bottom 10px right -20px no-repeat;
	}
	footer div.footer-imf>div { 
		margin-bottom: 35px;
	}
}

@media screen and (min-width: 992px) {
	div#index-banner { width: 100%; }
	footer div.footer-imf { 
		background: url(../img/crpd/footer/footer-pic.png) 100% no-repeat; 
		background-position-y: -10px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	header div.md-title img.md-title-logo.en {
		margin-top: 0px;
		margin-left: -12px;
		width:42%;
		height: auto;
	}
}

@media screen and (min-width: 1200px) {
	/*header div.md-title img.md-title-logo {
	margin-left: -70px; }*/
	ul.header-nav>li>img { margin: 0px 17px; }
	footer div.footer-imf { 
		background: url(../img/crpd/footer/footer-pic.png) 50% no-repeat;  margin-bottom: 0px; 
	}
	footer div.footer-imf div.container{ padding: 50px 110px; }
}


/*
=================================================================
(#m08rts) RETINA
=================================================================
*/

/*
=================================================================
(#m09rprl) PRELOAD
=================================================================
*/