@charset "utf-8";


/* ================================================ */
/* 日本の古本屋css                         */
/* 来歴-------------------------------------------- */
/* 2014/5/12　新規作成                              */
/* ================================================ */

/*============================共通部品============================*/
* {
    margin: 0px;
    padding :0px;
}


/* ----- リンク ----- */

a:link {
    color: #003399;
}

a:visited {
    color: #6927AB;
}

A:hover{
    color: #8D1D4D;
}

A:active{
    color: #8D1D4D;
}


img {
    border: 0px;
}

.f-left{
    float: left;
}

.f-right{
    float: right;
}

.f-clear {
    clear: both;
    overflow: hidden;
}

.txt-small{
    font-size: 90%;
}

/*============================共通部品============================*/
.error_message{
  margin-top: 20px;
  color:#ff0000;
}

.button_delete {
  border: none;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #e7574c 0%, #d93420 100%) repeat scroll 0 0;
  box-shadow: 0 1px 0 rgba(232, 149, 149, 0.6) inset, 0 2px 0 rgba(95, 11, 11, 0.8);
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  margin: 10px 0 0 0;
}

.button_delete:hover,
.button_cart:hover{
  opacity: 0.8;
}

.button_cart {
  border: none;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #0000ff 0%, #0066ff 100%) repeat scroll 0 0;
  box-shadow: 0 1px 0 rgba(149, 149, 232, 0.6) inset, 0 2px 0 rgba(11, 11, 95, 0.8);
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  margin: 10px 0 0 0;
}

.button_delete:hover{
  opacity: 0.8;
}


.favorite-cart{
  cursor: pointer;
}

/*============================古本祭りボタン=======================*/
.now-event-btn{
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px;
}

.old-event-btn{
  font-size: 12px;
  margin-right: 5px;
}

.event-btn{
  color: #003399;
  cursor : pointer;
}

.disabled-event-btn{
  color: #000;
}

/*============================古本祭りボタン=======================*/

/*============================共通ボタン============================*/
.common-page-footer-btn-top {
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  text-align:center;
  line-height:140%;
  background: #91191b url("/user_data/packages/default/img/common/common_top.png") no-repeat scroll 35px 6px;
  height:46px;
  width:180px;
  display: inline-block;
  padding-left: 20px;
  color:#ffffff;
  font-size:16px;
  cursor: pointer;
}

.common-page-footer-btn-top:hover{
  background: #691314 url("/user_data/packages/default/img/common/common_top.png") no-repeat scroll 35px 6px;
}

.common-btn{
  cursor: pointer;
  font-size: 16px;
  font-weight:bold;
  text-align:center;
}

.product_list .common-btn a{
  font-size: 16px;
  color: #ffffff;
  margin-bottom:5px;
}

.product_button{
  margin-bottom:10px;
}

.common-btn span{
  display: inline-block;
  margin: 0px;
  
}

.product_list div.common-btn-cart,
.product_list div.common-btn-quick,
.product_list div.common-btn-favorite{
  text-align: left;
}

.sold-out .product_list div.common-btn-favorite {
  display: none;
}

.common-btn-aboutnew {
background-color: #57b832;
  color: #ffffff;
}

.common-btn-aboutnew:hover{
  background-color: #2f601c;
}

.common-btn-aboutnew span{
  margin: 2px 0 0 0;
  background: url("/user_data/packages/default/img/common/btn_aboutnew.png") no-repeat scroll 0 1px;
  padding: 8px 0 8px 30px;
  line-height: 100%;
}

/*================ キャリア決済用追加クラス============*/

.common-btn-payment {
  padding: 6px 6px 8px 25px;
  background: url("/user_data/packages/default/img/common/btn_payment.png") no-repeat scroll 0px 0px;
  background-size: 24px;
  line-height: 100%;
}

.common-btn-payment-color {
  background-color: #e50d0e;
  color: #ffffff;
}

.common-btn-payment:hover{
  background-color: #a11f24;
}

/*================ キャリア決済用追加クラス============*/

/*================ 書誌カタログボタン用追加クラス============*/
.common-btn-search{
  background-color: #e50d0e;
  color: #ffffff;
  font-size: 13px;
}

.common-btn-search:hover{
  background-color: #a11f24;
}

.common-btn-search span{
  margin: 2px 0 0 0;
  padding: 6px 6px 8px 25px;
  background: url("/user_data/packages/default/img/common/btn_search.png") no-repeat scroll 2px 2px;
  line-height: 100%;
}

.common-btn-request{
  background-color: #0d85c1;
  color: #ffffff;
  font-size: 13px;
}

.common-btn-request:hover{
  background-color: #095378;
}

.common-btn-request span{
  margin: 2px 0 0 0;
  padding: 6px 6px 8px 25px;
  background: url("/user_data/packages/default/img/common/btn_request.png") no-repeat scroll 0 2px;
  line-height: 100%;
}

/*================ 書誌カタログボタン用追加クラス============*/

/*============================季節ごとの部品============================*/

/* ----- 春 ----- */

.wrap_spring{
    border-top:#E6D7E6 solid 4px;
}

.header_top_spring{
    background-color:#E6D7E6;
}

.header_middle_spring{
    background:#8D1D4D url('/user_data/packages/default/img/common/common_header_middle_bg1.png') repeat-x;
}

.header_bottom_spring{
    background-color:#F0ECE9;
    border-bottom:#520722 solid 6px;
}

.footer_middle_spring{
    background-color:#F0ECE9;
    border-bottom:#DCC5D2 solid 4px;
}

.footer_bottom_spring{
    background-color:#8D1D4D;
    border-top:#F0ECE9 solid 1px;
}

/* ----- 夏 ----- */

.wrap_summer{
    border-top:#C9E2AC solid 4px;
}

.header_top_summer{
    background-color:#C9E2AC;
}

.header_middle_summer{
    background:#4B6721 url('/user_data/packages/default/img/common/common_header_middle_bg2.png') repeat-x;
}

.header_bottom_summer{
    background-color:#F0ECE9;
    border-bottom:#304407 solid 6px;
}

.footer_middle_summer{
    background-color:#F0ECE9;
    border-bottom:#C9E2AC solid 4px;
}

.footer_bottom_summer{
    background-color:#4B6721;
    border-top:#F0ECE9 solid 1px;
}

/* ----- 秋 ----- */

.wrap_fall{
    border-top:#E0C78E solid 4px;
}

.header_top_fall{
    background-color:#E0C78E;
}

.header_middle_fall{
    background:#7D4901 url('/user_data/packages/default/img/common/common_header_middle_bg3.png') repeat-x;
}

.header_bottom_fall{
    background-color:#F0ECE9;
    border-bottom:#714101 solid 6px;
}

.footer_middle_fall{
    background-color:#F0ECE9;
    border-bottom:#E0C78E solid 4px;
}

.footer_bottom_fall{
    background-color:#7D4901;
    border-top:#F0ECE9 solid 1px;
}

/* ----- 冬 ----- */

.wrap_winter{
    border-top:#BDDBED solid 4px;
}

.header_top_winter{
    background-color:#BDDBED;
}

.header_middle_winter{
    background:#285A8A url('/user_data/packages/default/img/common/common_header_middle_bg4.png') repeat-x;
}

.header_bottom_winter{
    background-color:#EBF0F3;
    border-bottom:#092642 solid 6px;
}

.footer_middle_winter{
    background-color:#DCE1E0;
    border-bottom:#BDDBED solid 4px;
}

.footer_bottom_winter{
    background-color:#285A8A;
    border-top:#DCE1E0 solid 1px;
}


/*-----------------------------------------------
 #frame_outer 全体
-----------------------------------------------*/
body {
    margin:0;
    padding:0;
    font-size: 81.25%;	/* 13px相当 */
    color: #333333;
    line-height: 150%;
    text-align: center;
    font-family:"メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック","Verdana","ヒラギノ角ゴ Pro W3",Sans-Serif;
    background-color: #FFF;
    min-width: 910px;
}


#frame_outer {
    _zoom:1;
    text-align: center;
}

/*-----------------------------------------------
 #header_wrap ヘッダエリア
-----------------------------------------------*/

#header_wrap {
    text-align: center;
    position: relative;
    vertical-align: middle;
    line-height: 100%;
}

#header_wrap p.header_logo{
    padding: 0 5px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -464px
}

#header_wrap div.header_top{
    min-height: 30px;
    font-size: 90%;
}

#header_wrap div.header_middle{
    min-height: 45px;
    color: #FFF;
    font-size: 110%;
    padding-bottom: 7px;
}

#header_wrap div.header_bottom{
    min-height: 38px;
}


#header_wrap div.header_top div.header_top_box,
#header_wrap div.header_middle div.header_middle_box,
#header_wrap div.header_bottom p{
    width: 910px;
    margin: 0 auto;
    text-align: right;
}

#header_wrap div.header_top div.header_top_box ul,
#header_wrap div.header_middle div.header_middle_box ul{
    display: inline-block;
    overflow:hidden;
    height:100%;
}

#header_wrap div.header_top div.header_top_box ul.header_top_menu li,
#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li{
    float: left;
    list-style: none;
    padding: 0 6px 0 6px;
    margin: 4px 0;
}

/* ------------- header_top ------------- */
#header_wrap div.header_top a{
    text-decoration: none;
    color: #333;
}

#header_wrap div.header_top div.header_top_box ul.header_top_menu li{
    border-left: #333 solid 1px;
}

#header_wrap div.header_top div.header_top_box ul.header_top_menu li.last{
    border-right: #333 solid 1px;
}

#header_wrap div.header_top div.header_top_box ul.header_top_menu li#header_top_menu_mobile a {
    padding: 0 2px;
	background-color: #ff4455;
	color: #ffffff;
}
#header_wrap div.header_top div.header_top_box ul.header_top_menu li#header_top_menu_mobile a:hover{
    background-color: #ff8899;
}

/*
#header_top_mobile a{
    background: #aaa none repeat scroll 0 0;
	border-radius: 3px;
	color: #fff;
	padding: 3px 5px;
	line-height: 100%;
}
*/


/* --- フォントサイズ変更ボタン --- */
#header_wrap div.header_top_fsize_change{
    display: inline-block;
    padding: 0;
    overflow: hidden;
    _zoom: 1;
    vertical-align: bottom;
    margin-top: 2px;
}

#header_wrap div.header_top_fsize_change p{
    float: left;
    margin: 6px 10px 0 0;
    display: inline;
}

#header_wrap div.header_top_fsize_change ul{
    float: left;
    overflow: hidden;
    _zoom: 1;
    margin-top: 2px;
}

#header_wrap div.header_top_fsize_change ul li{
    float: left;
    margin: 0 4px 0 0;
    display: inline;
}

/* --- フォントサイズ変更 --- */
/*大*/
.fsize_large{
    font-size: 120%;
}

/*中*/
.fsize_middle{
    font-size: 100%;
}

/*小*/
.fsize_small{
    font-size: 80%;
}



/* ------------- header_middle ------------- */

#header_wrap div.header_middle a{
    text-decoration: none;
    color: #FFF;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu{
    margin-top: 4px;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li{
    border-right: #FFF solid 1px;
    padding: 5px 10px 5px 40px;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.kininaru{
    background: transparent url("/user_data/packages/default/img/common/common_header_kago.png") no-repeat 10px 1px;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.regist{
    background: transparent url("/user_data/packages/default/img/common/common_header_adduser.png") no-repeat 10px 1px;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.request{
    background: transparent url("/user_data/packages/default/img/common/common_header_kago.png") no-repeat 10px 1px;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.rireki{
    background: transparent url("/user_data/packages/default/img/common/common_header_kago.png") no-repeat 10px 0;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.mypage{
    background: transparent url("/user_data/packages/default/img/common/common_header_mypage.png") no-repeat 10px 0;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.kago{
    background: transparent url("/user_data/packages/default/img/common/common_header_kago.png") no-repeat 10px 0;
    padding-left: 44px;
}

#header_wrap div.header_middle div.header_middle_box ul.header_middle_menu li.guide{
    background: transparent url("/user_data/packages/default/img/common/common_header_guide.png") no-repeat 10px 0;
}


/* ------------- header_bottom ------------- */

#header_wrap div.header_bottom p{
    padding: 0 0 3px 0;
}

#header_wrap div.header_bottom p span.header_bottom_txt{
    display: inline-block;
    margin-bottom: 10px;
    vertical-align: bottom;
}

#header_wrap div.header_bottom p span.header_bottom_txt_position{
    font-size: 10px;
    float: right;
 }

#header_wrap div.header_bottom p span.header_bottom_search {
    background: url("/user_data/packages/default/img/common/common_header_search.png") no-repeat 0 0;
    display: inline-block;
    font-size: 120%;
    font-weight: bold;
    margin: 0 5px 5px 8px;
    padding: 2px 3px 6px 20px;
    color: #26000C;
    vertical-align: bottom;
}

#header_wrap div.header_bottom p input.header_bottom_search{
    width: 67px;
    height: 34px;
    background: transparent url("/user_data/packages/default/img/common/common_header_searchbtn.png") no-repeat 0 0;
    border: none;
    margin-left: 3px;
    vertical-align: top;
}

#header_wrap div.header_bottom p input.text-form{
    margin-top: 2px;
    height: 24px;
    width: 55%;
}

/*-----------------------------------------------
 #gnavi グローバルナビ
-----------------------------------------------*/

#gnavi {
    width: 910px;
    height: 47px;
    margin: 20px auto 0 auto;
}

#gnavi ul{
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding-bottom: 9px;
    background: transparent url("/user_data/packages/default/img/common/common_gnavi_bg_home.png")  repeat-x bottom;
}



#gnavi ul li{
    list-style: none;
    float: left;
    margin-bottom: 0px;
    margin-left: 0px;
    line-height: 1%;
    font-size: 1%;
}

#gnavi ul li a{
    display: inline-block;
    width: 181px;
    height: 47px;
}

#gnavi ul li a span{
    text-indent: -9999px;
    display: inline-block;
}

/*---Home---*/

#gnavi ul li.home a{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat 0 0;
}

#gnavi ul li.home a:hover{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat 0 -94px;
}

#gnavi ul li.home a:active{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat 0 -47px;
}

#gnavi ul.current_home {
    background: transparent url("/user_data/packages/default/img/common/common_gnavi_bg_home.png")  repeat-x bottom;
}

#gnavi ul.current_home li.home a,
#gnavi ul.current_home li.home a:hover {
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat 0 -47px;
}



/*---古書を探す---*/

#gnavi ul li.book a{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -181px 0;
}

#gnavi ul li.book a:hover{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -181px -94px;
}

#gnavi ul li.book a:active{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -181px -47px;
}

#gnavi ul.current_book {
    background: transparent url("/user_data/packages/default/img/common/common_gnavi_bg_book.png")  repeat-x bottom;
}

#gnavi ul.current_book li.book a,
#gnavi ul.current_book li.book a:hover {
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -181px -47px;
}


/*---古書屋を探す---*/

#gnavi ul li.shop a{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -362px 0;
}

#gnavi ul li.shop a:hover{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -362px -94px;
}

#gnavi ul li.shop a:active{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -362px -47px;
}

#gnavi ul.current_shop {
    background: transparent url("/user_data/packages/default/img/common/common_gnavi_bg_shop.png")  repeat-x bottom;
}

#gnavi ul.current_shop li.shop a,
#gnavi ul.current_shop li.shop a:hover {
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -362px -47px;
}


/*---古本まつりに行こう---*/

#gnavi ul li.event a{
    width: 147px;
    height: 36px;
    margin-top: 11px;
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -543px 0;
}

#gnavi ul li.event a:hover{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -543px -94px;
}

#gnavi ul li.event a:active{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -543px -47px;
}

#gnavi ul.current_event {
    background: transparent url("/user_data/packages/default/img/common/common_gnavi_bg_home.png")  repeat-x bottom;
}

#gnavi ul.current_event li.event a,
#gnavi ul.current_event li.event a:hover {
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -543px -47px;
}


/*---探求書---*/

#gnavi ul li.quest a{
    width: 147px;
    height: 36px;
    margin-top: 11px;
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -690px 0;
}

#gnavi ul li.quest a:hover{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -690px -94px;
}

#gnavi ul li.quest a:active{
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -690px -47px;
}

#gnavi ul.current_quest {
    background: transparent url("/user_data/packages/default/img/common/common_gnavi_bg_home.png")  repeat-x bottom;
}

#gnavi ul.current_quest li.quest a,
#gnavi ul.current_quest li.quest a:hover {
    background: #FFFFFF url("/user_data/packages/default/img/common/common_gnavi.png") no-repeat -690px -47px;
}


/*-----------------------------------------------
 #container
-----------------------------------------------*/

#container {
    width: 910px;
    margin: 0 auto;
    padding: 0;
    overflow:hidden;
    height:100%;
    text-align: left;
}

/*-----------------------------------------------
 #pnavi パンくずナビ
-----------------------------------------------*/

#pnavi {
    padding: 12px 0 6px;
    text-align: left;
    vertical-align: middle;
    border-bottom: #5E4830 dotted 1px;
    vertical-align:middle;
}

#pnavi ul.horizontal-list{
    overflow: hidden;
    height: 100%;
    margin: 0 auto;
}


#pnavi ul li{
    margin: 2px 0;
}

#pnavi ul li a{
    background: url("/user_data/packages/default/img/common/common_pnavi_arrow.png") no-repeat right center;
    padding-right: 17px;
    display: inline-block;
    white-space: nowrap;
}



/*-----------------------------------------------
 #main_column
-----------------------------------------------*/

#main_column {
    width: 700px;
    margin-right: 10px;
    float: left;
}

/*-----------------------------------------------
 #rightcolumn
-----------------------------------------------*/

#rightcolumn {
    width: 200px;
    float: left;
    margin-top: 45px;
}

#rightcolumn div.rightcolumn_box{
    border: #CACACD solid 1px;
    margin-bottom: 11px;
    padding: 3px 5px;
}

/*-----------------------------------------------
 #footer フッターエリア
-----------------------------------------------*/

#footer_wrap {
    line-height: 100%;
    padding-top: 20px;
}

#footer_wrap div.footer_top{
    height: 46px;
    text-align: right;
}

#footer_wrap div.footer_middle{
    min-height: 46px;
    font-size: 110%;
}

#footer_wrap div.footer_bottom{
    color: #FFF;
    text-align: left;
    font-size: 90%;
}


#footer_wrap div.footer_top p.footer_pagetop,
#footer_wrap div.footer_middle ul.footer_menu,
#footer_wrap div.footer_bottom div.footer_bottom_box{
    width: 910px;
    margin: 0 auto;
}

/* ------------- footer_middle ------------- */

#footer_wrap div.footer_middle ul.footer_menu{
    display: inline-block;
    overflow:hidden;
    height:100%;
    margin-top: 12px;
}

#footer_wrap div.footer_middle ul.footer_menu li{
    float: left;
    list-style: none;
    padding: 0 8px 0 8px;
    margin: 4px 0;
    border-right: #333 solid 1px;
}

/* ------------- footer_bottom ------------- */

#footer_wrap div.footer_bottom div.footer_bottom_box{
    min-height: 82px;
    margin-top: 5px;
    background: transparent url("/user_data/packages/default/img/common/common_footer_chara.png") no-repeat right top;
}

#footer_wrap div.footer_bottom div.footer_bottom_box p.footer_info span.name{
    display: inline-block;
    font-weight: bold;
    font-size: 120%;
    margin: 8px 0 8px 0;
}

#footer_wrap div.footer_bottom div.footer_bottom_box p.footer_info span.address{
    margin-right: 20px;
}

#footer_wrap div.footer_bottom div.footer_bottom_box p.footer_copyright{
    margin-top: 13px;
}

.product_search_value span {
  font-size: 130%;
  font-weight:bold;
  color: #ffffff;
  background-color: #6792e0;
  line-height:150%;
}

.product_search_facet_publisher {
  color: #ff0000;
  font-size: 16px;
  margin: 10px;
}

.product_search_facet_publisher a{
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  background-color:#ffd700;
  font-size:12px;
  padding: 4px 8px;
  border: 1px solid #000000;
  cursor: pointer;
}

.product_search_facet_publisher a:hover{
  background-color:#E1BE00;
}

.notice_single_speed_order{
  display: block;
  margin-top:15px;
}

.special_topic_list {
  width:90%;
  float:left;
  padding:5px;
  margin-bottom:10px;
}

.tokusyu-link {
  color: blue;
  text-decoration: underline;
  margin-right: 10px;
  cursor: pointer;
}

.tokusyulist{
  border: solid #CCC;
  border-width: 1px 0 0 0;
  padding: 5px;
}

.new-product-link {
  width:200px;
  display: inline-block;
  color: white !important;
}
.no-image-book-parent {
  position: relative;
  display: inline-block;
}
.no-image-book-child {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  text-align: left;
  padding: 16px 10px 0 1px;
  color: black;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
}
.no-image-book-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.no-image-book-child-detail {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  text-align: left;
  padding: 85px 40px 0 10px;
  color: black;
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
}

/*-----------------------------------------------
  初めての方へ バナー
-----------------------------------------------*/
.beginner-bnr {
  width: 910px;
  margin: 10px auto;
  position: relative;
  display: none;
}

.beginner-bnr.active {
    display: block;
}

.beginner-bnr a {
  display: block;
  border: 2px solid #003399;
  border-radius: 3px;
  box-sizing: border-box;
}

.beginner-bnr img {
  width: 100%;
}

.beginner-bnr .close {
  background: #ccc;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: block;
  border: 0;
  outline: none;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}

.beginner-bnr .close::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.beginner-bnr .close::after {
  content: '';
  display: block;
  width: 2px;
  height: 18px;
  background: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.rightcolumn_guid img {
  max-width: 100%;
}