/*@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);*/
.header_top, .header_main, .main_nav, .maincontent, .topad, .bottomad, .relatedpost .wrapper, .desktop-nav > ul, .footer-1200, .orderbanner .container { max-width:1200px; margin:0 auto;width: 92% }
h1, h2, h3, h4 {font-weight: 400}
h1{font-size: 175%}
h2{font-size: 150%}
h3{font-size: 130%}
h4{font-size: 120%}
.small{font-size: 80%}
a:link, a:visited {text-decoration: none;outline: none;color: #000;}
.mainR_content .detail a:link, .mainR_content a :visited {color: #666;}
a:hover, .mainR_content .detail a:link, .mainR_content a :visited {color: #cd0505;}
.mainR_content a.buttonStyle :visited, .burger-nav .title a {color: #FFF}
.burger-nav .title:hover {background-color: #B40505}
button, a {border: none;outline: none}
.clear {clear: both;}
.clearfix:after, .article_item:after, .topnav:after {
	content: ".";
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}
.thumb {display: block}
.thumb img {width: 100%}
.text-right {text-align: right}
.buttonStyle, a.buttonStyle, .tips .text-right a {
	background: #cd0505;
	display: inline-block;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 0 12px;
	line-height: 2em;
	color: #FFF;
	transition-property: background, border-radius;
	transition-duration: .2s, 1s;
	transition-timing-function: linear, ease-in;
	transition-delay: 0s, 1s;
}
.buttonStyle:hover, a.buttonStyle:hover {background: #333;color:#FFF}
.disableBtn, .disableBtn:hover {background: #EEE;color: #555}
.orderlink a {text-align: center}
/*文內連結*/
a.redlk { color:#cd0505; text-decoration: underline;padding: 0 5px}
a.redlk:hover { color:#b40505; text-decoration:none;}

/* MainNav */
.header_main>.header-left, .header_main>.header-right {width: calc(99.999999% * 1/2);}
.header_main .bwcom_logo {margin-left: 15px}
.header.-top .bwmag_logo {height: 62px;}
.desktop-nav {top: -1px}
.desktop-nav>ul>li {border: none}
.desktop-nav > ul > li.BWcom {max-width: 50px;}
.desktop-nav.-mag ul>li.BWcom>a {font-size: 1.25em;}
.desktop-nav.-mag ul>li.BWcom>a span{display: block;line-height: 50px;}
.desktop-nav > ul > li.blackstyle {background: #333}
.desktop-nav > ul > li.blackstyle {border-right: 1px solid #555;}
.header_content {border-bottom: #cd0505 1px solid;}
.com_ann2 span{ border:1px solid #cd0505; color:#cd0505; margin:0 10px 0 0; padding:2px 4px 1px 4px; }
	.com_ann2,.com_ann2 a{ font-size:1rem; line-height:1.5rem;  color:#cd0505; float:right;}
	.com_ann2 a:hover{ color:#b40505; text-decoration:underline;}

.com_ann2 span{ border:1px solid #cd0505; color:#fff;  margin:0 7px 0 0; padding:2px 4px 1px 4px; background:#cd0505; }
.com_ann3 span{ border:1px solid #cd0505; color:#cd0505; margin:0 7px 0 0; padding:2px 4px 1px 4px; }
	.com_ann2,.com_ann2 a,.com_ann3,.com_ann3 a{ font-size:1rem; line-height:1.5rem;  color:#cd0505; float:right; }
	.com_ann3{ margin-right:25px;}
	.com_ann2 a:hover,.com_ann3 a:hover{ color:#b40505; text-decoration:underline;}

/* Layout */
/*body {font-family: 'Noto Sans TC',Arial,sans-serif;}*/
.statustop {font-size: 15px;padding: 10px 0 20px;}
.statustop .path {
    color: #AAA;
    float: left;
    overflow: hidden;
}
.statustop .path span.title, .statustop .path a {
    background: url(https://ibw.bwnet.com.tw/bw/images/arrowformore_2.png?20161231) right -39px no-repeat;
	color: #555;
    padding-right: 15px;
}
.statustop .path span.title {
    color: #AAA;
}
.contbody {
    float: left;
	width: calc(99.999999% - 340px);
	padding-right: 3.5rem;
	border-right: #DDD 1px solid;
}
.single .contbody {
	border: none;
    float: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.single .sidebar {
    display: none
}
.mainL_content, .mainR_content {
    border-top: 10px solid #e6e6e6;
    padding-bottom: 25px;
    width: 100%;
}
.area_name, .area_name a {
    color: #cd0505;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.channelname {
	color: #cd0505;
	border-bottom: #cd0505 4px solid;
	padding-bottom: 5px;
}
.channelname h1 {
	display: inline-block;
}
.channelname .h2, .channelname h2 {
	font-weight: 100;
  font-size: 1.5rem;
	line-height: 1em;
}
.channelname.clearfix h2 {
	float: left;
	margin-top: 10px;
}
.channelname.clearfix .sortView {
	float: right
}
.channelname small {font-size:1rem ; border-left:1px solid #cd0505; padding-left:10px; line-height: 1rem; margin-left:10px;}

/* side */
.sidebar {
	float: right;
	width: calc(99.999999% * 4/10);
	max-width: 300px;
}
.promoR ul, .sidehotnew ul {
    list-style-image: url('../images/default/red-li.png');
    padding-left: 17px;
    font-size: 1rem;
    line-height: 1.6rem;
    text-align: left;
}
.sidehotnew li {
    list-style-image: url('../images/default/red-li.png');
}
.promoR li {margin: 8px 0;list-style-image: inherit;}
.promoR li a:link {
    color: #666;
}
.bw_event {
    width: 100%;
    height: auto;
	text-align: center;
    margin: 0 auto;
}
.bw_event .bwevent-txt {
	border: #CCC 1px solid;
	border-top: none;
	padding: 5px 15px 15px;
}
.bw_event .bwevent-txt h4 {
	font-size: 1.35rem;
	margin-bottom: 5px;
}
.bw_event .bwevent-txt small {
	display: block;
	font-size: 0.8rem;
	margin-top: -5px;
}
.bookList {border-bottom: #CCC 2px solid;}
.bookList .bookitem:last-child {margin-bottom: 0}
.bookitem {
	clear: both;
	border-bottom: #CCC 1px solid;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.bookitem .thumb {
	float: left;
	width: 40%;
	margin-right: 15px
}
.bookitem h4 {font-size: 0.95rem;line-height: 1.35em}
.bookitem .sort {font-size: 0.7rem;margin: 10px auto}
.bookitem .addToCart strong {font-size: 1.15rem;margin-top: 4px;display: inline-block}
.mainR_content .bookitem .detail .buttonStyle {float: right;font-size: 0.8rem;color: #FFF}

/* AD */
.topad, .bottomad  {text-align: center;}
.topad .container, .bottomad .container, .contad  {margin: 30px auto;text-align: center;display: inline-block}
.topad .container {margin: 20px auto 10px}
.topad .container > srcipt > div, .topad .container > div {margin: 30px auto;}
.sidebar .sidead {margin: 0 auto 25px}
.mainR_content .sidead {margin: 10px auto 0;}
.topad span, .sidead span, .bottomad span, .leftcolumn_ad span, .contad span {
    background: url(https://ibw.bwnet.com.tw/bw/images/ad_text.gif?20161231) 0 0 no-repeat;
    color: gray;
    display: block;
    font-size: 8px;
    text-indent: -9999em;
    width: 62px;
    height: 10px;
}
.bw_ad {text-align: center;}
.bw_ad a strong {
	background-color: #CD0505;
	display: inline-block;
	padding: 5px 15px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #FFF;
	margin-right: 5px
}
.header_top, .header_main, .main_nav, .maincontent, .topad, .bottomad, .relatedpost .wrapper, .desktop-nav > ul, .footer-1200 { max-width:1200px; margin:0 auto;width: 90% }
.sidehotnew,.travelarea{ width:360px; overflow:hidden; background-color:#eee; padding:0 30px 30px;}
.sidehotnew li a { display:block; font-size:1rem; line-height:1.25rem; color:#666; border-top:1px solid #ccc;padding:15px 0;}
.sidehotnew li a:hover { color:#000;}
.sidehotnew > ul li.top_none a,.channelhot > ul li.top_none a { border-top:none;}
.mainR_content .sidehotnew {width: auto;padding: 0 20px 0px}
.sidehotnew ul li:first-child a { border-top: none}

/* List */
.sortView {
	position: relative;
	top: 0px
}
.sortView a {
	border: #CCC 1px solid;
	padding: 0;
    font-size: 0.75rem;
    color: #555;
    display: inline-block;
	padding: 10px 18px;
	text-align: center;
}
.sortView a:hover {color: #000;}
.sortView a:first-child {
	border-right: none
}
.sortView a.select {
	background: #F0F0F0;
	color: #000;
	-moz-box-shadow:    inset 0 0 5px #CCC;
	-webkit-box-shadow: inset 0 0 5px #CCC;
	box-shadow: inset 0 0 5px #CCC;
}
.articleType {
	border-bottom: #CCC 1px solid;
	margin: 2rem auto;
	padding-bottom: 4px;
}
.articleType .detail {float: left}
.articleType .thumb {
	float: right;
	margin: 0 0 10px 25px;
	max-width: 40%;
	overflow: hidden
}
.articleType .thumb img {
	width: auto;
	max-height: 194px;
	margin: 0 auto -4px;
}
.articleType .articleDetail p {font-size: 0.95rem;line-height: 1.75em;text-align: justify;text-justify: distribute;}
.articleType .articleDetail p a, .spMainbanner p a {text-decoration: underline}
.articleType h1 {font-size: 1.45rem;line-height: 1.25em}
.articleType h1 small {display: block;font-size: 1rem}
.articleType header small { display: block; line-height: 30px; font-size: 1rem; }
.articleType header h3 { font-size: 1.45rem; }
.articleType .articleInfo {font-size: 0.8rem;color: #555;overflow: hidden;margin: 12px auto}
.articleType .articleInfo h4 { display: inline; font-size: 0.8rem; }
.articleType .articleInfo .dateinfo, .articleType .counts {background: url("../images/default/gray_line.gif") 0 0 repeat-y;display: inline-block;margin-left: 10px;padding-left: 10px;}
.articleType .author .title {background: #555;color: #FFF;display: inline-block;font-size: 11px;margin-right: 5px;padding: 2px 5px 4px 6px;}
.articleType .bottomtoolbar, .spMainbanner .bottomtoolbar {border-top: #CCC 1px dotted;font-size: 0.8rem;padding-top: 8px;margin-top: 20px;color: #555;clear: both}
.articleType .socialshare > div, .spMainbanner .socialshare > div {margin-left: 15px;float: left}
.articleType .socialshare > div:first-child, .spMainbanner .socialshare > div:first-child {margin: 0}
.articleType .bottomtoolbar .socialshare a {color: #888}
.articleType .socialshare > div span {font-size: 1.25rem;padding: 0 0 0 5px;color: #333;position: relative;top: 1px;}
.articleType .bottomtoolbar .socialshare a:hover, .articleType .bottomtoolbar .socialshare a:hover span {color: #CD0505}
.articleType .bottomtoolbar .tag {float: left}
.articleType .bottomtoolbar .socialshare, .spMainbanner .bottomtoolbar .socialshare {float: right}
.gridView .articleType {float: left;width: 48%;border: none;padding: 0}
.gridView .articleType:nth-child(odd) {margin: 1.25rem 2% 1.5rem 0;}
.gridView .articleType:nth-child(even) {margin: 1.25rem 0 1.5rem 2%;}
.gridView .articleType .thumb {float: none;width: 100%;margin: 0 auto 5px}
.gridView .articleType header {margin: 0 auto 10px}

/* sale / mag */
.fullbanner {position: relative}
.fullbanner .container {
	position: absolute;
	width: 50%;
	left: 25%;
	top: 22.5%;
	text-align: center;
	color: #FFF;
}
.fullbanner h1 {font-size: 2rem}
.search_year {position: relative;width: 360px;margin: 0 auto;}
.search_year .dropdown_toggle {
	background: #FFF;
	color: #333;
	display: block;
	margin: 0.5rem auto;
	padding: 10px 20px;
	width: 100%;
	text-align: left;
	position: relative;
}
.dropdown_toggle .fa-caret-down {position: absolute; right: 20px;top: 10px;}
.search_year .dropdown_menu {
    background-color: #FFF;
    box-shadow: 0 0 5px #333;
    display: none;
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 49;
    width: 100%;
}
.search_year .dropdown_menu.active {
    display: block;
}
.search_year .dropdown_menu a {display: block;padding: 10px;border-bottom: #DDD 1px solid}
.search_year .dropdown_menu li:last-child a {border-bottom: none}
.search_year .dropdown_menu a:hover {background:#F0F0F0;}
.single80 {width: 80%;max-width: 900px;margin: 2rem auto 6rem}
.magType {
	margin-bottom: 2rem;
	padding: 0 2rem 2rem 0;
	position: relative;
    background: #F0F0F0;
}
.magType .thumb {
	float: left;
    margin-right: 2rem;
	padding: 1.8rem 1rem 0 7.5rem;
    width: 40%;
}
.magType .thumb img {
	border: #DDD 1px solid;
	-webkit-box-shadow: 0 8px 6px -5px #888;
	   -moz-box-shadow: 0 8px 6px -5px #888;
	        box-shadow: 0 8px 6px -5px #888;
}
.magType .ranking {
	display: inline-block;
	text-align: center;
	background: #CD0505;
	color: #FFF;
	width: 44px;
	height: 44px;
	line-height: 44px;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.75em
}
.magType .articleInfo {overflow:hidden;padding-top: 1rem;}
.magType .articleInfo small {display: block;margin-top: 12px;border-bottom: #CCC 1px dotted;padding-bottom: 10px}
.magType .addToCart {
	font-size: 0.9rem;
	margin-top: 2rem;
	overflow: hidden;
}
.magType .addToCart .text-right {float: right}
.magType .addToCart .text-right a {display: inline-block;color: #FFF;padding: 0 16px;background: #CD0505;line-height:32px;margin: 0 5px}
.eventType, .headevent {
	margin: 0.5rem auto 3.5rem auto;
	position: relative;
	text-align: center;
}
.headevent .detail {
	background: #FFF;
	margin: -13.5% auto 0;
	width: 80%;
	padding: 1.5rem 2.5rem 1.5rem;
	position: relative
}
.eventType .thumb {
	background: #FFF;
	float: left;
    width: 45.5%;
}
.eventType .detail {
	border-top: #DDD 1px solid;
	padding: 1rem 0 0;
	box-sizing: border-box;
	float: right;
	width: 52.5%;
}
.eventType .articleInfo, .headevent .eventiofo  .articleInfo {float: left}
.eventDetail .articleInfo {margin-top: 12px}
.headevent .articleInfo small, .eventDetail .articleInfo small {margin: 0 0.5rem;display: inline-block}
.eventType .articleInfo small, .headevent .eventiofo .articleInfo small {margin: 0 0.5rem;display: block}
.eventType .articleInfo span, .headevent .articleInfo span {padding-right: 5px}
.eventiofo  {
	display: table;
	border-top: #DDD 1px solid;
	border-bottom: #DDD 1px solid;
	font-size: 0.9rem;
	width: 100%
}
.eventiofo li {
	display: table-cell;
	padding: 8px 12px 4px 0;
	border-right: #DDD 1px solid;
	text-align: left;
	color: #333;
	line-height: 26px;
	clear: both;
}
.eventiofo .websiteLink {text-align: center}
.eventiofo li:last-child {border: none;vertical-align: middle;}
.magType p, .eventType p, .headevent p {line-height: 2em;text-align: justify;text-justify: distribute;margin: 1.25rem auto 2rem;font-size: 112.5%;}
.eventiofo .buttonStyle {float: right;margin-top: 12px;}
.eventType.story .detail .buttonStyle {width: 50%}

/* Event */
.eventDetail .tabs {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: -4rem auto 2rem;
	font-weight: 300;
}
.eventDetail .tabs nav {
	margin-top: 25px;
	text-align: center;
}

.eventDetail .tabs nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: inline-block;
}

.eventDetail .tabs nav ul li {
	border: 1px solid #333;
	border-bottom: none;
	margin: 0 0.5em;
	display: block;
	float: left;
	position: relative;
}

.eventDetail .tabs nav li.tab-current {
	border: 1px solid #333;
	box-shadow: inset 0 2px #333;
	border-bottom: none;
}

.eventDetail .tabs nav li.tab-current:before,
.eventDetail .tabs nav li.tab-current:after {
	content: '';
	position: absolute;
	height: 1px;
	right: 100%;
	bottom: 0;
	width: 1000px;
	background: #333;
}

.eventDetail .tabs nav li.tab-current:after {
	right: auto;
	left: 100%;
	width: 4000px;
}

.eventDetail .tabs nav a {
	display: block;
	font-size: 1.05em;
	line-height: 2.5;
	padding: 0 1.25em;
	white-space: nowrap;
	color: #333
}

.eventDetail .tabs nav a:hover {
	color: #000;
}
.eventDetail section {
	font-size: 1.25em;
	padding: 1rem 0 2rem;
	margin: 0 auto;
	border-bottom: 1px solid #47a3da;
}

/* order */
.orderbanner {
	background: url("../images/default/shutterstock_411942079.jpg") 0 0 no-repeat #0c5fa2;
	background-size: cover;
	color: #FFF;
	padding: 3.2rem 0 2rem
}
.orderbanner .container > div {float: left; width: 28.5%; margin-top: 2rem;}
.orderbanner .container .thumb {float: left;width: 38%}
.orderbanner .container .thumb img {width: auto}
.orderbanner .container .onright {margin-left: 4%;}
.orderbanner .storyItem small {display: block;font-size: 0.9rem}
.orderType {margin: 2rem auto}
.orderType .articleDetail {
	border: #CCC 1px solid;
	float: left;
	padding: 1.5% 2%;
	width: 31%;
	margin: 1rem auto;
	text-align: center;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	box-shadow: 0 0 5px #CCC;
}
.orderType .articleDetail:first-child {margin-right: 3%}
.orderType .articleDetail:last-child {margin-left: 3%}
.orderType .headtitle {font-size: 1.125rem;color: #555;padding: 0 0 10px}
.orderType h3 {margin: 1rem auto;}
.orderType h3 small {display: block;font-size: 0.8rem;margin-top: -5px}
.orderType .orderlist {text-align: left}
.orderType .promoR {border-top: #CCC 3px solid;margin-top: 2rem}
.orderType .promoR a:hover {color: #000}
.orderType .more {margin: 1rem auto}
.orderType li small {display: block}
.orderType li a.buttonStyle {float: right;font-size: 0.8rem;color: #FFF}
.orderType li a.buttonStyle:hover {color: #FFF}
.orderType .addToCart .buttonStyle, .orderbanner .buttonStyle {padding: 4px 2rem}
.orderbanner a.buttonStyle {border: #FFF 1px solid;background: transparent}
.orderbanner a.buttonStyle:hover {color: #0c5fa2;background: #FFF}
.orderbanner p {margin: 1rem auto 3.25rem;line-height:1.8rem;font-weight: 600;font-size: 1.25em}
.orderbanner p small {font-weight: 400}
.orderbanner ul {margin: 1rem auto 1.5em;line-height:1.8rem}

/* 特別企劃 */
.fullpage.spModule, .single.spModule, .single.eventModule {padding: 30px 0;}
.fullpage.spModule {width: 100%}
.gridView .articleType .google, .spMainbanner .google {width: 60px;overflow: hidden}
.gridView .articleType .line {display: none}
.spMainbanner {margin: 10px auto 30px;position: relative}
.spMainbanner p {line-height: 1.75em;margin: 0.5rem auto;}
.fullpage.spMainbanner {margin: 0 auto}
.fullpage.spMainbanner .container {position: absolute;width: 100%;top: 0;z-index: 99;}
.fullpage.spMainbanner .container header {position:relative;width: 50%;max-width: 720px;text-align: center;margin: 17.5% auto 0;}
.fullpage.spMainbanner .container h1 {font-size: 3.2rem;line-height: 3.6rem}
.fullpage.spMainbanner .container h1 small {display: block}

/* relatedpost */
.relatedpost { margin: 4rem auto 2rem;}
.mainModule+.recommend {background: #F0F0F0;margin: 4rem auto 0;padding: 25px 0}
.relatedpost .article a {color: #000}
.relatedpost .article a:hover {color: #cd0505}
.relatedpost .title {font-size: 1.125rem;line-height: 1.6rem;padding-top: 8px}
.relatedpost .article {
	float: left;
	width: 32.2%;
	margin-right: 15px;
	position: relative
}
.relatedpost .thumb {
	position: relative;
	overflow: hidden;
	height: 218px;
}
.relatedpost .article:last-child {margin: 0}
.relatedpost .article span {
    position: absolute;
    height: 45px;
    padding: 5px 7px 0 7px;
    background: rgba(205,5,5,0.8);
    color: #fff;
    font-size: 0.9rem;
	bottom: 0px;
	left: 10px;
	z-index: 49
}
.relatedpost.gallery h3{
	background: #FFF;
	padding: 12px 18px;
	min-height: 74px
}
.relatedpost.gallery .thumb:hover:after {
	background: url("../images/default/play.png") 0 0 no-repeat;
	background-size: cover;
	content: "";
	width: 72px;
	height: 72px;
	position: absolute;
	top: 25%;
	left: 40%;
    -webkit-transition: 1000ms;
    -moz-transition: 1000ms;
    -ms-transition: 1000ms;
    transition: 1000ms;
	cursor: pointer
}
.relatedpost.gallery .article:hover {
	background: #000;
}
.relatedpost.gallery .article:hover img {
	opacity: .75;
    -webkit-filter: grayscale(1);
    -webkit-transition: 800ms;
    -moz-transition: 800ms;
    -ms-transition: 800ms;
    transition: 800ms;
}
.effect {overflow: hidden}
.effect img {
    /*opacity: 0.6;*/
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
.effect:hover img {
    opacity: 1;
    -moz-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

/*++ page ++*/
.pagearea {
	margin-bottom:2rem;
    font-size:1rem;
    text-align: center;
    width: 100%;
    overflow: hidden;
}
.pagearea li {
	color: #AAA;
	display: inline-block;
	margin: 0 2px;
}
.pagearea a, .pagearea .select, .pagearea span  {
	display: inline-block;
	line-height: 40px;
	width: 40px;
	height: 40px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.pagearea a  {background-color: #ddd; color:#000;}
.pagearea .select { background-color: #cd0505; color: #fff;}
.pagearea li.first a, .pagearea li.last a,
.pagearea li.first span, .pagearea li.last span {
    background-color: #fff;
    width: 60px;
}
.pagearea li.goback a {
    background: #ddd;
    color: #000;
    padding: 0 10px;
    white-space: nowrap;
    width: auto;
}
.pagearea li.goback a:hover {
   color: #fff; background: #cd0505;
}
.pagearea .prepage a, .pagearea .prepage span, .pagearea .nextpage a, .pagearea .nextpage span {
    background-image: url(../images/default/read_ctrl.png);
    background-repeat: no-repeat;
    margin: 0 1px;
    text-indent: -9999px;
}
.pagearea .prepage a, .pagearea .prepage span {
    background-position: 0px -161px;
}

.pagearea .prepage a:hover{
    background-position: -40px -161px;
}
.pagearea .nextpage a, .pagearea .nextpage span {
    background-position: 0px -121px;}

.pagearea .nextpage a:hover {
    background-position: -40px -121px;}

.pagearea a:hover {
    background-color: #cd0505;
    color: #fff;
}
.pagearea li.first a:hover, .pagearea li.last a:hover {
    color: #000;
}

.pagearea li.single a {
    background: #ddd;
    color: #000;
    padding: 0 10px;
    white-space: nowrap;
    width: auto;
}
.pagearea li.single a:hover {
   color:#fff; background:#cd0505;
}

/* tag */
.tag li {
    float: left;
	font-style: italic;
    padding: 0 6px 5px 0;
}
.tag li a {
	border: #333 1px solid;
	color: #333;
    line-height: 100%;
	padding: 0px 15px;
	display: block;
    line-height: 2em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.tag li a:hover {
	background: #CD0505;
	color: #FFF;
	border-color: #CD0505;
}

/* Lightbox */
.overlayer {
    background: rgba(0, 0, 0, 0.87);
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.fullsize .overlayer {
	display: block;
	opacity: 1;
}
.overlayer .socialshare  {
    background-color: #FFF;
    color: #000;
    margin: 0 auto;
    padding: 30px 40px 30px;
    text-align: center;
    width: 480px;
    overflow: hidden;
	box-shadow: 0 2px 6px 0 rgba(0,0,0,.44);
	border-radius: 3px;
	position: relative;
	opacity: 0;
}
.animate.socialshare {
	margin-top: 20%;
	opacity: 1;
}
.overlayer .socialshare > div {
	display: inline-block;
	font-size: 1.8rem;
	margin: 0 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.headevent .socialshare > div {
	display: inline-block;
	margin: 0 3px;
}
.overlayer .socialshare > div a, .headevent .socialshare > div a {padding: 12px 0px 10px;width: 54px;display: block;color: #FFF;transition-property: background;transition-duration: 0.25s;transition-timing-function: linear;}
.overlayer .socialshare .facebook, .headevent .socialshare .facebook {background: #365899;}
.overlayer .socialshare .twitter, .headevent .socialshare .twitter {background: #1da1f2;}
.overlayer .socialshare .google, .headevent .socialshare .google {background: #d32f2f;}
.overlayer .socialshare .line a, .headevent .socialshare .line a {background: url("../images/default/LINE_logotype_White.png") center center no-repeat;background-color:#00c402;background-size: contain}
.overlayer .socialshare .mailto, .headevent .socialshare .mailto {background: #CD0505;}

/* RSS */
.featuredGrid li {
	float: left;
	width: 23%;
	margin: 20px 2.5% 10px 0;
}
.featuredGrid li:nth-child(4n+0) {
	margin: 20px 0 10px
}
.featuredGrid li a {
	border: #CCC 1px solid;
	padding: 1.75em;
	display: block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #333;
}
.featuredGrid .bw a {border-top: #CD0505 5px solid}
.featuredGrid .wealth a {border-top: #facd0f 5px solid}
.featuredGrid .smart a {border-top: #F60 5px solid}
.featuredGrid .golf a {border-top: #18552C 5px solid}
.featuredGrid .bw a:hover {border-color: #CD0505;color: #FFF;background: #CD0505}
.featuredGrid .wealth a:hover {border-color: #facd0f;color: #FFF;background: #facd0f}
.featuredGrid .smart a:hover {border-color: #F60;color: #FFF;background: #F60}
.featuredGrid .golf a:hover {border-color: #18552C;color: #FFF;background: #18552C}
.featuredGrid li strong {display: block;margin: 0.5em auto 1.5em;font-size: 1.35em;font-weight: 400}
.featuredGrid .line {border-bottom: 1px #333 solid;display: inline-block;padding-bottom: 4px;text-decoration: none;}
.featuredGrid a:hover .line {border-color: #FFF}
.text-center {text-align: center}
.note {
	background: #F0F0F0;
	margin: 3em auto;
	padding: 2em;
	line-height: 200%;
}
.note > p {margin: 1.25em auto 0.75em}
.note .rule {
	border-top: #CCC 1px dotted;
	padding: 1em 0 0 18px;
	list-style-type: square
}
.line {text-decoration: underline}

/* Media queries */
@media screen and (max-width: 1680px) {
}

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

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

@media screen and (max-width: 1280px) {
	.relatedpost .thumb {height: 208px;}
}

@media screen and (max-width: 1152px) {
	.gridView .articleType {height: 540px}
	.sidebar {min-width: 300px;border: none;padding: 0;max-width: inherit;}
	.contbody {width: calc(99.999999% - 320px);padding-right: 1rem;}
	.sidebar {width: calc(99.999999% * 3/10);}
	.bottomad .container { margin:15px auto;}
	.container a img{ max-width:100%;}
}

/* TABLET */
@media screen and (max-width: 1024px) {
	body {font-size: 15px}
	.header_top, .header_main, .main_nav, .maincontent, .topad, .bottomad, .relatedpost, .desktop-nav > ul, .footer-1200, .mainBanner .container, .mainModule .wrapper {width: 100%;padding-left: 15px;padding-right: 15px}
	.relatedpost .wrapper {width: 100%}
	.headevent .detail {width: 90%}
	.gridView .articleType .line {display: block}
	.topad, .bottomad, .contad  {display: none}
	.relatedpost .thumb {height: 168px;}
}
@media screen and (max-width: 768px) {
	h1, h2, h3, h4, .postnav .previou strong, .postnav .next strong, .channelname h2 {font-weight: 400;}
	.maincontent.single.spModule, .maincontent.single.eventModule {width: 100%;padding-left: 15px;padding-right: 15px}
	.statustop .path {display: none}
	.single .contbody {float: none;width: 100%;border: none;padding: 0;margin: 0 auto}
	.articleType .thumb, .articleType .bottomtoolbar .tag, .articleType .bottomtoolbar .socialshare {float: none;width: 100%;margin:0 auto;text-align: center;max-width: inherit;}
	.com_ann2, .com_ann2 a {float: none}
	.relatedpost .article {width: 31.8%}
	.relatedpost .thumb {height: 130px}
	.contbody {padding: 0;border: none}
	.moduleView .articleType {margin-top: 15px;padding-bottom: 10px;}
	.articleType .bottomtoolbar .socialshare {border-top: #CCC 1px dotted;padding-top: 5px;margin-top: 4px}
	.articleType .socialshare > div {width: 30%;text-align: center;border-left: #CCC 1px dotted;}
	.articleType .socialshare > div:first-child {border: none;}
	.moduleView.gridView .articleType .socialshare > div {width: auto;border: none}
	.moduleView.gridView .articleType .socialshare .fb-like {margin: 0 -4px}
	.moduleView.gridView .articleType .socialshare .google {width: 58px}
	.moduleView.gridView .articleType .socialshare .twitter {width: 50px}
	.gridView .articleType .bottomtoolbar .socialshare {border: none}
	.gridView .articleType {height: 470px;position: relative;border-bottom: #CCC 1px solid}
	.gridView .articleType .bottomtoolbar .socialshare {margin: 0;padding: 0;}
	.gridView .dateinfo {position: absolute;top: 40px;left: 10px;color: #FFF}
	.spMainbanner {border-bottom: #CCC 1px solid;padding-bottom: 4px;margin-bottom: 25px}
	.fullbanner .thumb {width: 100%;overflow: hidden}
	.fullbanner .thumb img {width: 180%}
	.magType .thumb {padding: 2rem 0rem 0 4rem}
	.articleType .thumb img {max-height: 225px;}
.com_ann2,.com_ann2 a{ float:none;}
.com_ann3,.com_ann3 a{ float:none; margin-top:10px;}
}
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
	.featuredGrid li a {padding: 1em;}
	.featuredGrid li strong {font-size: 1.1em;}
}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

}

/* MOBILE */
@media screen and (min-width: 320px) and (max-width: 736px) {
	.footer-center, .footer-bottom .left .link, .footer-bottom .left .sitemap, .sidebar {display: none}
	.relatedpost .article, .magType .thumb, .magType .detail, .footer-bottom .left, .footer-bottom .right, .eventType .thumb, .eventType .detail, .gridView .articleType, .contbody, .orderbanner .container .thumb, .orderType .articleDetail, .orderbanner .container > div {float: none;width: 100%}
	.header_main > .bwcom_logo, .header_main > .header-left, .header_main > .header-right {height: 52px}
	.header_main .bwcom_logo a img {max-width: 90%;display: block;margin: 0 auto;text-align: center}
	.relatedpost .article {margin: 0 0 25px}
	.fullbanner {min-height: 100px;background: #CD0505}
	.fullbanner .container {width: 80%;left: 10%;top: 5%}
	.fullbanner h1, .spMainbanner h1 {font-size: 145%;line-height: 1.25em;}
	.search_year {width: 240px}
	.eventType, .headevent {margin: 0.5rem -15px 3.5rem}
	.headevent .detail, .eventType .detail {padding: 1rem 0.75rem 0;width: 92%;border: none;margin: -13.5% auto 0;background: #FFF;position: relative;}
	.eventDetail .content.article {width: 85%;margin: 0 auto}
	.eventiofo {border: none;width: 90%;margin: -1rem auto 0}
	.eventiofo li, .eventiofo li:last-child {display: block;overflow: hidden;border: none;border-bottom:#CCC 1px solid;text-align: left;}
	.eventType .articleInfo small, .headevent .eventiofo .articleInfo small {margin: 0}
	.magType p, .eventType p, .headevent p {margin: 0.5rem auto 1rem}
	.magType {padding: 2rem 1rem;}
	.magType .thumb {padding: 0 4rem}
	.magType .ranking {position: absolute;top: 0}
	.gridView .articleType:nth-child(odd), .gridView .articleType:nth-child(even) {min-height: inherit;margin: 1em auto 2.5rem}
	.articleType .socialshare > div, .spMainbanner .socialshare > div {margin-left: 8px}
	.spMainbanner .socialshare > div:first-child {margin-left: -5px}
	.articleType {margin: 0.5rem auto;border: none;}
	.articleType .articleInfo .author {display: block;margin-bottom: 8px}
	.articleType .articleInfo .dateinfo {background: none;margin-left: 0;padding: 0}
	.articleType .bottomtoolbar .socialshare {border-top: #CCC 1px dotted;border-bottom: #CCC 1px solid;padding: 10px 0;margin-top: 2px}
	.gridView .dateinfo {top: 10px}
	.gridView .articleType {height: auto;padding-bottom: 5px;}
	.moduleView.gridView .articleType .socialshare .twitter {width: auto}
	.moduleView.gridView .articleType .socialshare .fb-like {margin-right: 8px}
	.orderbanner {padding: 1rem 0}
	.orderbanner h2 {font-size: 120%}
	.orderbanner .container div:first-child {border-bottom: #FFF 1px dotted;padding-bottom: 1.25rem;margin-bottom: 1.25rem}
	.orderbanner .container .onright {margin: 10px auto 0}
	.orderType .articleDetail:last-child {margin: 0}
	.orderbanner p, .orderbanner ul {margin: 0.5rem auto 0.75rem auto;line-height: 1.5rem}
	.featuredGrid li, .featuredGrid li:nth-child(4n+0) {width: 46%; margin: 20px 2% 0px}
	.featuredGrid li a {padding: 1.5em}
	.featuredGrid li strong {font-size: 1.1em;}
	.articleDetail header {margin-top: 8px}
	.channelname.clearfix h2 {margin-top: 5px}
	.sortView a {padding: 6px 10px}
}
@media screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
	.header_top {display: none}
	.header_content {border-top: 3px solid #CD0505;}
	.relatedpost .article {float: left;width: 32.2%;margin-right: 10px;}
	.magType .thumb {float: left;width: 36%;}
	.magType .ranking {position: relative}
}

@media screen and (min-width: 320px) and (max-width: 568px) {
	.header_top, .header_main, .main_nav, .maincontent, .topad, .bottomad, .relatedpost, .desktop-nav > ul, .footer-1200, .mainBanner .container, .mainModule .wrapper {padding-left: 10px;padding-right: 10px;}
	.magType .thumb {padding: 0 2rem}
	.featuredGrid li a {padding: 0.75em}
	.featuredGrid li strong {font-size: 0.9em;}
}
@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: landscape) {
	.relatedpost .thumb {height: 116px}
	.footer-bottom h6 {text-align: center}
}