@charset "utf-8";

/* layout
------------------------------*/
.contents_right {
float: right;
width: 780px;
text-align: center;
}
.contents_right ul {
list-style: none;
}
#top_area,
#pickup,
#only_small_banner,
.recommendCampaign,
#otoku_small_banner,
#special_small_banner {
margin-bottom: 50px;
}
#topics_small_banner {
margin-bottom: 30px;
}

/* main_title
------------------------------*/
.main_title {
position:relative;
border-bottom: 2px solid #ef0156;
margin:0 0 10px;
padding:0 0 4px 13px;
text-align:left;
}
.main_title:before {
content:'';
display:block;
clear:both;
position:absolute;
top:4%;
left:5px;
width:5px;
height:70%;
background:#ef0156;
border-radius:3px;
text-indent:-9999px;
overflow:hidden;
}
.main_title h1 {
font-size: 20px;
font-weight: bold;
color: #666;
}
.main_title span {
margin-left: 5px;
font-size:14px;
color: #999;
}

/* sub_title
------------------------------*/
.sub_title{
position: relative;
height: 32px;
margin: 0 auto 8px;
line-height: 32px;
text-align: left;
}
.sub_title a {
display: block;
padding: 0 8px;
background: #ffe3ed;
text-decoration: none;
}
.sub_title h2 {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #ef0156;
}
.sub_title .right_link {
display: block;
position: absolute;
top: 0;
right: 10px;
padding-right: 10px;
font-size: 16px;
font-weight: bold;
color: #ef0156;
}
.sub_title a:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 8px;
width: 6px;
height: 6px;
margin-top: -5px;
border-top: 2px solid #ef0156;
border-right: 2px solid #ef0156;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

/* sec_title
------------------------------*/
.sec_title {
position: relative;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: left;
}
.sec_title a {
display: block;
padding: 0 8px;
text-decoration: none;
}
.sec_title h2 {
display: inline-block;
font-size: 20px;
font-weight: bold;
color: #444;
}
.sec_title .right_link {
display: block;
position: absolute;
top: 0;
right: 10px;
padding-right: 8px;
font-size: 16px;
font-weight: bold;
color: #444;
}
.sec_title a:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 6px;
width: 6px;
height: 6px;
margin-top: -6px;
border-top: 2px solid #666;
border-right: 2px solid #666;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

/* seo_txt
------------------------------*/
.seo_txt {
margin-bottom: 8px;
padding: 0 8px;
text-align: left;
font-size: 13px;
color: #666;
}

/* tab_wrapper
------------------------------*/
.tab_wrapper {
display: flex;
margin-bottom: 20px;
padding-top: 3px;
border-bottom: 1px solid #ef0156;
list-style:none;
}
.tab_content {
flex: 1;
padding: 0 4px;
text-align: center;
}
.tab_content:first-child {
padding-left: 0;
}
.tab_content:last-child {
padding-right: 0;
}
.tab_content .explain {
display: block;
height: 44px;
margin-top: 11px;
background: #fff;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 5px 5px 0 0;
line-height: 46px;
font-size: 16px;
font-weight: bold;
color: #666;
}
.tab_content.selected {
position: relative;
bottom: -1px;
}
.tab_content.selected .explain {
height: 49px;
margin-top: 0;
border-top: 7px solid #ef0156;
border-color: #ef0156;
line-height: 48px;
color: #ef0156;
pointer-events: none;
}
.tab_content .explain:hover {
background: #eee;
opacity: 1;
color: #666;
text-decoration: none;
}
.tab_content.selected .explain:hover {
color: #ef0156;
}

/* subBtns
------------------------------*/
.subBtns {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 80%;
margin: 0 auto 20px;
text-align: center;
}
.subBtns a {
display: block;
width: 28%;
margin: 0 auto;
padding: 13px 0;
background: #fff;
border: 1px solid #ef0156;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
color: #ef0156;
text-decoration: none;
}
.subBtns a.selected {
background: #ffe3ed;
}
.subBtns a:hover {
background: #f3f3f3;
}

/* sort_area
------------------------------*/
.sort_area {
margin:0 7px 15px 8px;
padding-bottom: 8px;
border-bottom: 1px dotted #aaa;
}
.sort_title {
margin-bottom:10px;
text-align:left;
font-size:16px;
font-weight:bold;
color: #666;
}
.sort_title img{
margin: 0 2px 3px 0;
}
.sort_contents{
display: flex;
margin-bottom: 8px;
}
.sort_area .sort_contents:last-child{
margin-bottom: 0;
}
.sort_contents .label{
position: relative;
width: 70px;
height: 18px;
margin: 0 15px 8px 0;
padding: 6px 0;
background: #fafafa;
border: 1px solid #bbb;
border-radius: 3px;
line-height: 18px;
text-align: center;
font-weight: bold;
font-size: 13px;
color: #666;
}
.sort_contents .label:before{
position: absolute;
top: -1px;
right: -7px;
content: "";
width: 0;
height: 0;
margin: 0;
border-top: transparent 16px solid;
border-bottom: transparent 16px solid;
border-left: 7px solid #bbb;
}
.sort_contents .label:after{
position: absolute;
top: -1px;
right: -6px;
content: "";
width: 0;
height: 0;
margin: 0;
border-top: transparent 16px solid;
border-bottom: transparent 16px solid;
border-left: 7px solid #fafafa;
}
.sort_contents.genre ul {
width: 680px;
}
.sort_contents ul li{
position: relative;
float:left;
margin: 0 8px 8px 0;
padding: 6px 12px 6px 6px;
background: #fff;
border: 1px solid #bbb;
border-radius: 3px;
line-height: 18px;
text-align: center;
font-weight: bold;
font-size: 13px;
color: #666;
}
.sort_contents ul li.current{
background: #ef0156;
}
.sort_contents ul li:hover{
background: #ef0156;
}
.sort_contents ul li a,
.sort_contents ul li a:hover{
color: #666;
}
.sort_contents ul li.current a,
.sort_contents ul li.current a:hover{
color:#fff;
}
.sort_contents ul li a:hover,
.sort_contents ul li.current a:hover{
text-decoration: none;
}
.sort_contents ul li:hover a{
color:#fff;
}
.sort_contents ul li span.arrow {
position: absolute;
top: 11px;
right: 3px;
border-width: 3px 0 3px 5px;
border-style: solid;
border-color: transparent transparent transparent #555;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.sort_contents ul li.current span.arrow {
position: absolute;
top: 11px;
right: 3px;
border-width: 3px 0 3px 5px;
border-style: solid;
border-color: transparent transparent transparent #fff;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.sort_contents ul li:hover span.arrow {
position: absolute;
top: 11px;
right: 3px;
border-width: 3px 0 3px 5px;
border-style: solid;
border-color: transparent transparent transparent #fff;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* small_banner_area
------------------------------*/
.list_cnt {
padding-left: 10px;
text-align:left;
font-size: 12px;
color:#666;
}
.list_cnt .show_cnt {
font-size: 16px;
font-weight: bold;
color: #ef0156;
}
.small_banner{
display: flex;
flex-wrap: wrap;
}
.small_banner a{
position: relative;
width: 250px;
min-height: 160px;
margin: 0 10px 10px 0;
padding: 10px 0 30px;
border: 1px solid #ccc;
border-radius: 7px;
}
.small_banner a:nth-child(3n) {
margin-right: 0;
}
.small_banner a:hover{
border: 1px solid #fcd0d9;
text-decoration: none;
}
.small_banner li{
width: 247px;
}
#special_small_banner .small_banner a {
min-height: 111px;
padding: 10px 0 5px;
}
.small_banner li img{
width: 100%;
max-width: 225px;
max-height: 111px;
margin-bottom:5px;
}
.small_banner li .banner_txt{
width:225px;
margin: 0 auto 5px;
line-height:1.2em;
text-align:left;
}
.small_banner li p.banner_title{
height:14px;
margin-bottom:5px;
font-size:12px;
overflow:hidden;
}
.small_banner li p.banner_title span.em-large{
display:none;
}
.small_banner li p.banner_term{
margin-bottom:3px;
font-size:11px;
color:#f00;
}
.small_banner li p.banner_point{
margin-bottom:5px;
font-size:11px;
color:#999;
}
.small_banner .banner_btn{
position: absolute;
right: 8px;
bottom: 8px;
padding:3px 10px 3px 5px;
background: #ef0156;
border-radius: 3px;
text-align:right;
font-size:12px;
font-weight:bolsd;
color:#fff;
}
.small_banner .banner_btn span.arrow {
position: absolute;
top: 9px;
right: 3px;
border-width: 3px 0 3px 3px;
border-style: solid;
border-color: transparent transparent transparent #fff;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* cam_wrapper2
------------------------------*/
.cam_wrapper2 .title_cnt {
padding-left: 5px;
text-align:left;
font-size: 12px;
color:#666;
}
.cam_wrapper2 .title_cnt .show_cnt {
font-size: 16px;
font-weight: bold;
color: #ef0156;
}
.cam_wrapper2 .cam_sub_list {
display: table;
width:800px;
margin: 16px auto 9px;
background: #fff;
border-collapse: separate;
border-spacing: 4px 0;
text-align: left;
}
.cam_wrapper2 .cam_sub_list:nth-child(2) {
margin: 8px auto 9px;
}
.cam_wrapper2 .cam_sub_list li {
display: table-cell;
width: 154px;
margin: 0px 6px 6px 0;
vertical-align: top;
text-align: center;
}
.cam_wrapper2 .genre_name a {
display: block;
height: 18px;
margin: 0 10px 5px;
border: 1px #0088cf solid;
border-radius: 3px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
line-height: 18px;
text-align: center;
font-size: 11px;
color: #0088cf;
overflow: hidden;
}
.cam_wrapper2 .genre_name a:hover {
text-decoration: none;
}
.cam_wrapper2 .genre_name.hq a {
font-size: 10px;
letter-spacing: -1px;
}
.cam_wrapper2 .sub_contents_box {
vertical-align: middle;
}
.cam_wrapper2 .cam_sub_list li .ie_radius3 {
width:122px;
height: auto;
margin:0 auto;
padding:5px;
color:#333;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .thumb_box {
width: 122px;
height: 172px;
padding-bottom: 5px;
vertical-align: middle;
text-align: center;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .thumb_box img {
max-width: 120px;
max-height: 170px;
margin-bottom: 3px;
border: 1px solid #ddd;
border-radius: 2px;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .btn_box{
margin-bottom:5px;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .free_btn{
width:110px;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .titile_name{
height: 14px;
margin: 0 6px 3px;
line-height: 1.5em;
text-align: left;
font-size:12px;
font-weight:bold;
overflow: hidden;
word-break: break-all;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .titile_name a,
.cam_wrapper2 .cam_sub_list .ie_radius3 .titile_name a:hover{
color:#444;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .author_name{
height: 14px;
margin: 0 6px 3px;
line-height: 1.5em;
text-align: left;
font-size:12px;
overflow: hidden;
word-break: break-word;
}
.cam_wrapper2 .cam_sub_list .ie_radius3 .author_name a,
.cam_wrapper2 .cam_sub_list .ie_radius3 .author_name a:hover{
color:#444;
}

/* slider
------------------------------*/
.slider .es-carousel-wrapper {
position: relative;
padding:2px 26px;
background-color:#e1e1e1;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.slider .es-carousel {
width: 100%;
overflow: hidden;
}
.slider ul{
display: block;
width: 77px;
margin-left: 0px;
}
.slider .es-carousel ul li {
float: left;
display: block;
width: 64px;
margin-right: 3px;
text-align: center;
}
.slider .es-carousel ul li div.p_active,
.slider .es-carousel ul li a:hover {
padding: 9px 5px;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
font-weight: bold;
color: #373737;
}
.slider .es-carousel ul li a {
display: block;
padding: 9px 5px;
background: #ccc;
border: 1px solid #999;
border-radius: 3px;
font-weight: bold;
color: #373737;
}
.slider .es-nav span {
position: absolute;
top: 50%;
left: 1px;
width: 20px;
height: 37px;
margin-top: -19px;
background: transparent url(/sol/pcc/images/common/new_vol/nav2.png) no-repeat top left;
text-indent: -9000px;
cursor: pointer;
}
.slider .es-nav span.es-nav-next,
.slider .es-nav span.es-nav-next:hover {
right: 0px;
left: auto;
background-position: top right;
}
.slider .es-nav span:hover {
background: transparent url(/sol/pcc/images/common/new_vol/nav2_on.png) no-repeat top left;
}

/* cam_mark
------------------------------*/
.cam_mark {
display: flex;
flex-wrap: wrap;
}
.cam_wrapper2 .cam_sub_list li .ie_radius3 .cam_mark {
justify-content: center;
}
.cam_mark .cam_icon{
display: inline-block;
height: 20px;
margin: 0 2px 3px;
padding: 2px;
background: #fff;
border:1px solid #f06;
box-sizing: border-box;
line-height: 18px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #f06;
}
.cam_mark .cam_icon.girl{
background: #ff646e;
border:1px solid #ff646e;
color: #fff;
}
.cam_mark .cam_icon.boy{
background: #0185e5;
border:1px solid #0185e5;
color: #fff;
}
.cam_mark .cam_icon.bl{
background: #00aae6;
border:1px solid #00aae6;
color: #fff;
}
.cam_mark .cam_icon.tl{
background: #ffc926;
border:1px solid #ffc926;
color: #fff;
}
.cam_mark .cam_icon.hq{
background: #ed8aef;
border:1px solid #ed8aef;
color: #fff;
}
.cam_mark .cam_icon.novel{
background: #6fdd00;
border:1px solid #6fdd00;
color: #fff;
}
.cam_mark .cam_icon.book{
background: #21a42e;
border:1px solid #21a42e;
color: #fff;
}
.cam_mark .cam_icon.media{
background: #ffa218;
border:1px solid #ffa218;
color: #fff;
}
.cam_mark .cam_icon.sexy{
background: #da4fa8;
border:1px solid #da4fa8;
color: #fff;
}
.cam_mark .cam_icon.adult{
background: #da4fa8;
border:1px solid #da4fa8;
color: #fff;
}
.cam_mark .cam_icon.only{
padding: 0 4px;
border: 1px solid #21a42e;
color: #21a42e;
}
.cam_mark .cam_icon.free{
background: #fff;
border:1px solid #06f;
color: #06f;
}
.cam_mark .cam_icon.sale{
background: #fff;
border:1px solid #ef0156;
color: #ef0156;
}
.cam_mark .cam_icon.kangen{
background: #fff;
border:1px solid #63f;
color: #63f;
}
.cam_mark .cam_icon.other{
padding: 0 4px;
border: 1px solid #ef0156;
color: #ef0156;
}
.cam_mark .cam_icon.coupon{
background: #fff;
border:1px solid #0fa1e2;
color: #0fa1e2;
}
.cam_mark .cam_icon.inc{
background: #fff;
border: 1px solid #ffa218;
color: #ffa218;
}
.alert_text {
margin: 5px 0 20px;
padding: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
text-align: left;
font-size: 14px;
color: #333;
}

/* top_area
------------------------------*/
#top_area .bottomLinks {
display: flex;
flex-wrap: wrap;
margin: 20px auto 0;
}
#top_area .bottomLinks li {
float: left;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: center;
}
#top_area .bottomLinks li,
#top_area .bottomLinks.cells3 li {
width: 33.33%;
}
#top_area .bottomLinks.cells3 li:nth-child(-n+3) {
border-top: 1px solid #ddd;
}
#top_area .bottomLinks.cells3 li:nth-child(3n+3) {
border-right: 1px solid #ddd;
}
#top_area .bottomLinks li a {
display: block;
position: relative;
width: 100%;
height: 35px;
line-height: 37px;
font-size: 13px;
color: #333;
text-decoration: none;
font-feature-settings: "palt";
}
#top_area .bottomLinks li a:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 8px;
width: 6px;
height: 6px;
margin-top: -5px;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#top_area .bottomLinks li a:hover {
background: #fff7fa;
}

/* pickup
------------------------------*/
#pickup .fixBox{
margin: 0 auto 10px;
}
#pickup .fixBox ul{
display: table;
width: 785px;
margin: 0 auto;
border-bottom: 1px dotted #ccc;
}
#pickup .fixBox li{
display: table-cell;
width: 392px;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
overflow: hidden;
}
#pickup .fixBox li:nth-child(odd){
padding: 13px 7px 13px 0;
border-right: 1px dotted #ccc;
}
#pickup .fixBox li:nth-child(even){
padding: 13px 0 13px 8px;
}
#pickup .fixBox ul:nth-child(1) li{
padding-top: 0;
}
#pickup .fixBox .thum_box{
float: left;
width: 130px;
margin:0 auto;
vertical-align: top;
text-align: center;
}
#pickup .fixBox .thum_box a{
display:inline-block;
}
#pickup .fixBox .thum_box img {
max-width: 130px;
max-height: 205px
border: 1px solid #eee;
}
#pickup .fixBox .text_box {
float: right;
width: 246px;
margin-left: 8px;
}
#pickup .fixBox .title_name,
#pickup .fixBox .author_name {
word-break: break-word;
}
#pickup .fixBox .title_name {
margin-bottom: 3px;
line-height: 16px;
text-align: left;
font-size: 12px;
font-weight: normal;
color: #333;
overflow: hidden;
}
#pickup .fixBox .title_name a {
line-height: 20px;
font-size: 16px;
font-weight: bold;
color: #333;
}
#pickup .fixBox .author_name {
height: 17px;
margin-bottom: 3px;
line-height: 16px;
text-align: left;
font-size: 10px;
color: #888;
overflow: hidden;
}
#pickup .fixBox .author_name a {
line-height: 17px;
font-size: 13px;
color: #888;
}
#pickup .fixBox .cam_mark {
margin-bottom: 10px;
text-align: left;
}
#pickup .fixBox .cam_mark .cam_icon{
display: inline-block;
margin-right: 3px;
width: auto;
height: 21px;
padding: 4px;
background: #fff;
border:1px solid #ef0156;
box-sizing: border-box;
-webkit-box-sizing: border-box;
vertical-align: top;
text-align: center;
line-height: 13px;
font-size: 13px;
color: #ef0156;
}
#pickup .fixBox .intro {
height: 64px;
margin-bottom: 13px;
text-align: left;
line-height: 16px;
font-size: 13px;
overflow: hidden;
}
#pickup .fixBox .intro a {
display: block;
height: 64px;
color: #333;
text-decoration: none;
overflow: hidden;
}
#pickup .fixBox .btn_box{
width: auto;
height: 26px;
margin: 5px auto;
}
#pickup .fixBox .btn_box a{
display: inline-block;
width: 105px;
padding: 6px 0 4px;
margin: auto;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #f6f6f6));
background: -webkit-linear-gradient(top, #fff 0%, #f6f6f6 100%);
background: linear-gradient(to bottom, #fff 0%, #f6f6f6 100%);
border: 1px solid #b3b3b3;
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #797979;
text-decoration: none;
font-feature-settings: "palt";
}
#pickup .fixBox .btn_box .btn02{
background: #fff;
border: 1px solid #ec1e0d;
color: #ec1e0d;
}
#pickup .fixBox .btn_box .btn03{
margin-left: 5px;
background: #fff;
border: 1px solid #b8a98f;
color: #6e5b39;
}

/* sale_recommend
------------------------------*/
.campaign.top .recommendCampaign .sale_recommend .secTitle {
height: 40px;
margin: 0 auto;
background: #fff;
border-top: none !important;
border-bottom: none !important;
line-height: 40px;
text-align: left;
color: #444;
}
.campaign.top .recommendCampaign .sale_recommend .fixBox ul {
width: 797px !important;
margin: 0 auto 0 4px !important;
}
.campaign.top .recommendCampaign .sale_recommend .fixBox li {
padding: 0 5px !important;
}
.campaign.top .recommendCampaign .sale_recommend .title_name {
display: block;
padding: 0 13px;
background: #fff;
text-decoration: none;
line-height: 40px;
font-size: 20px;
font-weight: bold;
color: #333;
}
.campaign.top .recommendCampaign .sale_recommend .subTitle {
display: none;
}

/* otoku_small_banner
------------------------------*/
#otoku_small_banner .bannerArea.small {
width: 797px;
margin: 0 auto 0 4px;
text-align: center;
}
#otoku_small_banner .bannerArea.small a {
position: relative;
float: left;
display: block;
width: 25%;
margin: 0 0px 17px;
background: #fff;
}
#otoku_small_banner .bannerArea.small img {
width: 95%;
max-width: 225px;
}
#otoku_small_banner .bannerArea .bottom_txt{
position: absolute;
bottom: -23px;
display:block;
width: 98%;
max-width: 225px;
height: 20px;
text-align: center;
font-size: 12px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* special_small_banner
------------------------------*/
#special_small_banner .sliderUpperBannerArea {
margin: 25px auto 0;
background: #fff;
}
#special_small_banner .sliderUpperBannerArea .swiper-container {
width: 770px;
height: 360px;
margin: 0 auto;
}
#special_small_banner .sliderUpperBannerArea a {
display: block;
text-decoration: none;
}
#special_small_banner .sliderUpperBannerArea .catch {
display: block;
margin: 8px auto;
color: #333;
font-size: 14px;
}
#special_small_banner .bottomBtns {
display: flex;
justify-content: space-between;
align-items: center;
width: 778px;
margin: 0 auto;
}
#special_small_banner .bottomBtns a {
display: block;
width: 24%;
margin: 0 auto;
padding: 13px 0;
background: #fff;
border: 1px solid #bbb;
border-radius: 3px;
font-size: 16px;
color: #444;
text-decoration: none;
}
#special_small_banner .bottomBtns .current {
background: #ffa522;
color: #fff;
}

/* topics_small_banner
------------------------------*/
#topics_small_banner .bottomBtns {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 90%;
margin: 30px auto 0;
text-align: center;
}
#topics_small_banner .bottomBtns a {
display: block;
width: 44%;
margin: 0 auto;
padding: 13px 0;
background: #fff;
border: 1px solid #bbb;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
color: #666;
text-decoration: none;
}
#topics_small_banner .bottomBtns a:hover {
background: #fff7fa;
}

/* recommendListBox
------------------------------*/
.recommendListBox * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.recommendListBox .fix6Area {
margin: 10px auto 30px;
}
.recommendListBox .secTitle {
height: 28px;
margin: 25px auto 0;
background: #FAFAFA;
border-top: 2px solid #EF0156;
border-bottom: 1px solid #EAEAEA;
line-height: 29px;
text-align: left;
font-weight: bold;
color: #333;
}
.recommendListBox .secTitle .title_name {
padding-left: 8px;
font-size: 17px;
color: #333;
}
.recommendListBox .subTitle {
background: transparent;
border: none;
padding: 4px 8px;
text-align: left;
color: #989898;
}
.recommendListBox .fixBox {
margin: auto;
}
.recommendListBox .fix6Area ul {
display: table;
table-layout: fixed;
width: 762px;
margin: 0 auto;
border: none;
}
.recommendListBox .fixBox ul:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.recommendListBox .fix6Area li {
display: table-cell;
width: 127px;
padding: 5px;
background: #FFF;
overflow: hidden;
vertical-align: top;
float: none;
border: none;
}
.recommendListBox .genre_name p {
height: 18px;
font-size: 11px;
line-height: 18px;
margin: 0 auto 5px;
border: 1px #0088CF solid;
border-radius: 3px;
overflow: hidden;
text-align: center;
color: #0088CF;
display: block;
}
.recommendListBox li .genre_name.hq p {
font-size: 10px;
letter-spacing: -1px;
}
.recommendListBox .fix6Area .thum_box {
height: 160px;
width: auto;
margin: 0;
text-align: center;
position: relative;
}
.recommendListBox .thum_box a {
display: inline-block;
}
.recommendListBox .thum_box img {
border: solid 1px #eee;
}
.recommendListBox .fix6Area .thum_box img {
max-width: 116px;
max-height: 160px;
}
.recommendListBox .text_box {
padding: 0 4px;
margin: 2px auto 0;
}
.fixBox .title_name,
.fixBox .author_name {
word-break: break-word;
}
.recommendListBox .text_box .title_name {
width: auto;
height: 16px;
line-height: 17px;
color: #333;
font-size: 13px;
text-align: center;
font-weight: normal;
overflow: hidden;
margin: auto;
}
.recommendListBox .text_box .title_name a {
line-height: 16px;
color: #000;
font-size: 13px;
font-weight: normal;
}
.recommendListBox .text_box .author_name {
width: auto;
height: 15px;
line-height: 16px;
font-size: 10px;
color: #666;
text-align: center;
overflow: hidden;
margin: auto;
}
.recommendListBox .text_box .author_name a {
line-height: 16px;
color: #666;
font-size: 10px;
}

/* cam_mark */
.recommendListBox .cam_mark {
position: absolute;
display: inline-block;
z-index: 2;
top: 0;
right: 0;
font-size: 12px;
line-height: 14px;
vertical-align: middle;
background: #fff;
}
.recommendListBox .cam_mark.free {
border: 1px #36C solid;
color: #36C;
letter-spacing: 2px;
padding: 1px 1px 0 5px;
}
.recommendListBox .cam_mark.sale {
border: 1px solid #F06;
color: #F06;
letter-spacing: 0;
padding: 1px 2px 0 3px;
}
.recommendListBox .cam_mark.point {
border: 1px #6633FF solid;
color: #6633FF;
letter-spacing: 1px;
padding: 1px 0 0 3px;
}