/*#####################
	slick slide custom
#####################*/
.slick-prev{
	left: 15px;
}
.slick-next{
	right: 15px;
}

/*
slick slide arrow one
*/
.slick-slide-arrow-one .slick-prev:before,
.slick-slide-arrow-one .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




/*#####################
	slide-book
#####################*/
.slide-book-mod{}
.slide-book-mod .book-scroll{
	padding: 0 0 10px 0;
	margin-right: -15px;
    margin-left: -15px;
}
.slide-book-mod .book-scroll > li{
    display: inline-block;
	/*width: 195px;*/
	width: 231px;
    height: auto;
    overflow: hidden;
    margin: 0;
	padding: 5px 15px 15px 15px;
}
.slide-book-mod .book-scroll > li:first-child{ margin-left: 0;}

.slide-book-mod .book-scroll > li .book-item .img-responsive{
	position: relative;
	overflow: hidden;
	padding-top:144%;
}
.slide-book-mod .book-scroll > li .book-item .img-responsive img{
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


@media (max-width: 1199px) {
	.slide-book-mod .book-scroll > li{
		/*width: 161px;*/
		width: 191px;
	}
}
@media (max-width: 991px) {
	.slide-book-mod .book-scroll{
		margin-right: -8px;
		margin-left: -8px;
	}
	.slide-book-mod .book-scroll > li{
		/*width: 125px;*/
		width: 147px;
		padding: 5px 8px 15px 8px;
	}
	.slide-book-mod .book-scroll > li .book-row-ratting-pricebtn{ display: block;}
	.slide-book-mod .book-scroll > li .book-row-ratting-pricebtn .col-ratting{ display: none;}
	.slide-book-mod .book-scroll > li .book-row-ratting-pricebtn .col-pricebtn .btn{ width: 100%;}
}
@media (max-width: 767px) {
	.slide-book-mod .book-scroll > li{
		width: 150px;
	}
}



/*
fancybox-slide
*/
.fancybox-slide:before{ display: none!important; }

/*##############################################*/
.background-transparent {
    background: transparent !important;
}
/*########################## Buydimonend #######################*/
.Modal_Buydimonend .list-info{ margin-bottom: 0;}
.Modal_Buydimonend .list-info > li{
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	margin: 5px 0;
}
.Modal_Buydimonend .list-info > li:nth-child(1) > div:nth-child(1){ width: 45px; }
.Modal_Buydimonend .list-info > li:nth-child(1) > div:nth-child(2){
	font-size: 30px;
	font-weight: 700;
}
.Modal_Buydimonend .list-info > li:nth-child(2) > div:nth-child(2){
	color:#A5A5A5;
	padding-left: 5px;
	font-size: 18px;
	font-weight: 700;
}
.Modal_Buydimonend .list-info > li:nth-child(3){ margin-bottom: 0;}
.Modal_Buydimonend .list-info > li:nth-child(3) > div:nth-child(2){
	color:#E56B6B;
	padding-left: 5px;
	font-size: 22px;
	font-weight: 700;
}


/*########################## BuyEbook #######################*/
.Modal_BuyEbook{}
.Modal_BuyEbook .width400{ max-width: 350px;}
@media (max-width: 767px) {
    .Modal_Buydimonend,
    .Modal_BuyEbook{
        top:15%;
    }
}

/*########################## Rent Ebook Select #######################*/
.ren_select .radio label {
	font-size: 18px !important;
}
.ren_select .icon{
	width: 16px;
    height: 16px;
    line-height: 18px;
    vertical-align: middle;
}


/*########################## TOP BANNER #######################*/
.alltop_banner{ margin-top: 10px; padding-bottom: 20px; }
.alltop_banner .top-banner{
    margin: 0 10px;
}
.alltop_banner .top-banner a{
	display: block;
	border-radius: 15px;
	overflow: hidden;
}
.alltop_banner .top-banner a:focus,
.alltop_banner .top-banner a:hover {
    text-decoration: none;
	outline: none;
}
.alltop_banner.slick-dotted.slick-slider{ margin-bottom: 0px!important; }
.alltop_banner .slick-dots{
    bottom: 5px;
}
.alltop_banner .slick-dots li{
    width: 12px;
    height: 12px;
}
.alltop_banner .slick-dots li button{
    width: 12px;
    height: 12px;
    background: #DDDDDD;
    border: solid 1px #DDDDDD;
}
.alltop_banner .slick-dots li button:hover,
.alltop_banner .slick-dots li button:focus,
.alltop_banner .slick-dots li.slick-active button
{
    outline: none;
	background: #E5A56B;
	border-color: #E5A56B;
}
@media (max-width: 991px) { .alltop_banner{ margin-top: 0; } }
@media (max-width: 767px) {
    .alltop_banner .top-banner{
		margin: 0;
		padding: 0 10px;
	}

}


/*#################### DOWNLOAD APP STORE #################*/
.download_app_well{
    background: #E2B267;
}
.download_app_well .dls_row{
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}
.download_app_well .dls_col{
    width: 50%;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
.download_app_well .dls_col:nth-child(2) img{
    width: 100%;
    max-width: 305px;
}

.download_app_well .dls_col .rows{
    display: block;
    width: 100%; 
}
.download_app_well .dls_col .rows img{
    height: 56px;
}

.download_app_well h3{ font-size: 20px; }

@media (max-width: 991px) {
    .download_app_well .dls_col:nth-child(1){ width: 55%; }
    .download_app_well .dls_col:nth-child(2){ width: 45%; }
    .download_app_well .dls_col:nth-child(2) img{ width: 80%; }
    .download_app_well .dls_row{ padding: 30px 0; }
    .download_app_well h3{ margin: 0;}
}
@media (max-width: 767px) {
    .download_app_well .dls_col:nth-child(1){ width: 100%; }
    .download_app_well .dls_col:nth-child(2){ display: none; }
}
@media (max-width: 424px) {
    .download_app_well .dls_col .rows img{ height: 40px; }
}

/***********
category
***********/
.section-scolling.category-dropdown ul{
    color: #000000;
    background: none;
    padding: 16px 0px 0px 0px;
    overflow: hidden;
}
.section-scolling.category-dropdown ul li{
    display:inline-block;
    width: 83px;
    height: 83px;
    vertical-align: middle;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.section-scolling.category-dropdown ul li a{
    display: table-cell;
    width: 83px;
    height: 83px;
    padding: 0;
    text-align: center;
	white-space: normal;
    vertical-align: middle;
    color: #ffffff;
    font-size: 13px;
    line-height: 16px;
    text-shadow: 0px 3px 3px rgba(0,0,0,0.16);
}

.section-scolling.category-dropdown ul li:nth-child(14n+1) a{ background: #F2BFE1; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+2) a{ background: #F284CD; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+3) a{ background: #EDD0B8; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+4) a{ background: #6C6554; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+5) a{ background: #D56550; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+6) a{ background: #D5AB21; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+7) a{ background: #554B6C; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+8) a{ background: #94B6BE; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+9) a{ background: #D07EDB; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+10) a{ background: #F0AD6A; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+11) a{ background: #905F7F; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+12) a{ background: #8ECBCB; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+13) a{ background: #A8B168; padding: 0px 10px; }
.section-scolling.category-dropdown ul li:nth-child(14n+14) a{ background: #9B773C; padding: 0px 10px; }
.section-scolling.category-dropdown ul li a:hover{ background: #C49A6C; }





/*#################### myprofile #################*/
.font_droidsans_read{ font-family:'droid_sans_thairegular'!important; font-size: 18px; line-height: 1.7; font-weight: lighter;}
.font_droidsans{ font-family: 'droid_sans_thairegular'!important;}

#myprofile h1,
#myprofile h2,
#myprofile h3,
#myprofile h4,
#myprofile h5,
#myprofile h6,
#myprofile h7{font-weight: bold;}
#myprofile #list-income div{ border-right: solid 1px #e8e3da; margin-bottom: 20px;}
#myprofile #list-income div:last-child{border: none;}
#myprofile #list-income h2{ line-height: 0.4em;}

#myprofile .book-overflow-top{
	margin-top: 70px;
	
}

#myprofile .profile-pic-btn{
	text-align: right;
	margin-top: -25px;
}

#myprofile .text-title-dd{ line-height: 32px;}
#myprofile #user-usedimond .bookimg{float: left;}
#myprofile #user-usedimond .bookname{ float: left; width: 85%; padding-left: 10px;}
#myprofile #user-usedimond .bookname div:nth-child(1){ font-size: 16px;}

/*
Samary table
*/
#myprofile .tlist-total{
	width: 100%;
	max-width: 300px;
	height: auto;
	overflow: hidden;
	padding: 10px;
	font-weight: bold;
}

/*
Exchange
*/
#myprofile .exchange-dt{
	height: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#myprofile .exc-tdimg{ width: 120px;}

/*
Promote
*/
#myprofile #user-promote{}
#myprofile #user-promote .btntop{ text-align: right; }
#myprofile #user-promote .btntop .btn{ width: 210px; }

#myprofile .fileupload-preview{ display: block; max-width:160px!important; overflow: hidden;}



@media (max-width: 1199px) {
	#myprofile #user-usedimond .bookname{ float: left; width: 80%; padding-left: 10px;}
}
@media (max-width: 991px) {
	#myprofile #user-usedimond .bookname{ float: left; width: 70%; padding-left: 10px;}

	#myprofile .exchange-dt{ height: auto!important;}
	#myprofile .exchange-stat .text-right{ text-align: left;}
    
    /*
    Promote
    */
    #myprofile #user-promote .btntop{ text-align: left; }
}

@media (max-width: 767px) {
	#myprofile .padding-20{ padding: 20px 0px!important;}
	#myprofile #list-income div:nth-child(2n+2){ border: none;}
	
	#myprofile .td-cell-a{
		float: left;
		width: 75%;
	}
	#myprofile .td-cell-b{
		float: left;
		width: 25%;
	}
	#myprofile #user-usedimond .bookname div:nth-child(2){ font-size: 12px; line-height: 16px;}
	#myprofile .td-cell-b .mobile-dimond{ padding-top: 5px; font-size: 14px;}
	#myprofile .td-cell-b .mobile-dimond img{ width: 24px;}
	#myprofile .td-cell-b .mobile-date{ font-size: 12px; margin-top: 5px;}
	
	
	#myprofile .td-cell-a .td-cell-a-dimond{ float: left; width: 42px; margin-top: 3px;}
	#myprofile .td-cell-a .td-cell-a-sub{ float: left; width: 70%; padding-left: 10px;}
	#myprofile .td-cell-a .td-cell-a-sub .bankgatew{ font-size: 12px; margin-top: 5px; }
	#myprofile .td-cell-a .td-cell-a-sub .code-z{ overflow: hidden; width: 100%;}
	#myprofile .td-cell-a .td-cell-a-sub .code-z div:nth-child(1){ float: left; width: 30px; height: auto; line-height: 27px; overflow: hidden; }
	#myprofile .td-cell-a .td-cell-a-sub .code-z div:nth-child(2){ float: left; width: 78%; height: auto; overflow: hidden; }
	#myprofile .td-cell-a .td-cell-a-sub .code-z input{ width: 100%; border: none; line-height: 25px; background: none; outline: none;}
	@media (max-width: 330px) {
		#myprofile .td-cell-a .td-cell-a-sub .code-z div:nth-child(2){ width:103px;}
	}

	#myprofile .exchange-stat .col-md-6{ float: left; width: 50%; }
	#myprofile .exchange-stat .text-right{ text-align: right;}
}
@media (max-width: 480px) {
	#myprofile .exc-tracking{
		width: 100%;
		float: none;
		left: 0;
	}
	#myprofile .profile-ebook-btn-zone .btn{ width:100%;}
}
@media (max-width: 580px) {
	#myprofile .exchange-stat .col-md-6{ width: 100%; }
	#myprofile .exchange-stat .text-right{ text-align: left;}
}


/***
COVER BOOK
***/
.modal-book-cover{ font-size: 15px;}


/***
storydetail
***/
#storydetail .font_droidsans_read{
	font-family: 'droid_sans_thairegular'!important; font-size: 18px; line-height: 1.9;
	/*font-weight: lighter;*/
	font-weight: normal;
	/*
	text-indent: 10%;
	padding-left:14%;
	padding-right: 14%;
	*/
	/*width: 678px;*/
	width: 86%;
	max-width: 960px;
	margin: auto;
}
#storydetail .font_droidsans_read p{ text-indent: 10%;}
#storydetail .font_droidsans_read

#storydetail .bywriter{ position: relative; overflow: hidden;}
#storydetail .bywriter img{ width: 50px;}
#storydetail .bywriter span{
	position: absolute;
	top:0;
	line-height: 50px;
	margin-left: 5px;
}
#storydetail .bywriter a,
#storydetail .bywriter span a{ color: #000000;}
#storydetail .bywriter a:hover,
#storydetail .bywriter span a:hover{ color: #734b25;}



#storydetail .story-option{ position: relative;}
#storydetail .story-option img{
	position: absolute;
	width: 82px;
}
#storydetail .story-option .story-option-desc{
	padding-left: 100px;
	min-height: 110px;
}
#storydetail .story-option .btn{
	position: absolute;
	bottom: 0;
}
#storydetail .story-desc h3{ margin-top: 0px!important;}
#storydetail .dropdown #change_story{ font-size: 14px!important;}



#storydetail .bookdirec-table-op{ font-size: 14px; float: right;}
#storydetail .bookdirec-table-rule{
	display: inline-block;
	width: 160px;
}
#storydetail .bookdirec-table-op .bookdirec-table-rule .bookdirec-rule-col{
	display: inline-block;
	width: 75px;
}
#storydetail .bookdirec-table-op .bookdirec-counttext{
	display: inline-block;
	width: 60px;
}
#storydetail .bookdirec-table-op .bookdirec-viewer{
	display: inline-block;
	width: 70px;
}
#storydetail .bookdirec-table-op .bookdirec-comment{
	display: inline-block;
	width: 70px;
}

@media (min-width: 992px) {
	#storydetail .col-edit-desktop{
		display: inline-block;
		width: 14.2%;
	}
}



@media (max-width: 991px) {
	#storydetail .font_droidsans_read{
		width: 620px;
	}
	.bookdirec-desc{ margin-top:10px!important;}
	#storydetail .bookdirec-table-op{ font-size: 14px; float: none;}
}


@media (max-width: 767px) {
	#storydetail .mobile-book-cat{ font-size: 13px;}
	#storydetail .mobile-book-cat img{ width: 24px;}
	
	
	#storydetail .font_droidsans_read{
		width: 90%;
	}
	#storydetail .story-option .btn{
		position: relative;
		bottom: 0;
	}
	
	
	#storydetail #btn{ margin-right: -15px;}
	#storydetail #btn li{ float: left; padding-right: 0; width: 33.333%;}
	#storydetail #btn li:nth-child(1){width: 100%;}
	/*
	#storydetail #btn li:nth-child(2){float: left;}
	#storydetail #btn li:nth-child(3){float: right;}
	*/
	#storydetail #btn .story-share button{ width: 100%;}
	#storydetail #btn li a,
	#storydetail #btn li button,
	#storydetail #btn li input[type=button],
	#storydetail #btn li input[type=submit]{ width: 100%; padding-left:0; padding-right: 0; text-align: center;}
	#storydetail #btn li .dropdown-menu li{ float: none; width: 100%;}
	#storydetail #btn li .dropdown-menu li a{ text-align: left; padding-left: 10px;}
	#storydetail .book-recoment{
		padding-left: 13px;
		padding-right: 13px;
	}
	#storydetail .book-recoment .col-xs-3{
		padding-left: 5px;
		padding-right: 5px;
	}
	
	
}

@media (max-width: 539px) {
	#storydetail .table-striped .bookdirec-desc .col-xs-5{ width: 100%; margin-bottom: 5px; }
	#storydetail .table-striped .bookdirec-desc .col-xs-5 .col-xs-6{ width: auto; max-width: 48%;}
	#storydetail .table-striped .bookdirec-desc .col-xs-3{ width: 40%; }
	#storydetail .table-striped .bookdirec-desc .col-xs-2{ width: 30%; }
}

@media (max-width: 480px) {
	#storydetail .bookdirec-table-op{ font-size: 12px;}
	#storydetail .bookdirec-table-rule{
		display: inline-block;
		width: 110px;
	}
	#storydetail .bookdirec-table-op .bookdirec-table-rule .bookdirec-rule-col{
		display: inline-block;
		width: 52px;
	}
	#storydetail .bookdirec-table-op .bookdirec-table-rule .bookdirec-rule-col .icon16{ width: 12px; height: 12px;}
	#storydetail .bookdirec-table-op .bookdirec-counttext{
		display: inline-block;
		width: 50px;
	}
	#storydetail .bookdirec-table-op .bookdirec-viewer{
		display: inline-block;
		width: 50px;
	}
	#storydetail .bookdirec-table-op .bookdirec-comment{
		display: inline-block;
		width: 50px;
	}
	
}


@media (max-width: 320px) {
	#storydetail #btn li{ padding-right: 0; width:100%;}
}

/***
translate
***/
#storydetail .bywriter-translate a{ color: #000000;}
#storydetail .bywriter-translate a:hover{ color: #734b25;}
#storydetail img{ float: left;}
#storydetail .bywriter-translate .writername{
	float: left;
	width: auto;
	height: 50px;
	line-height: 50px;
	padding-left: 5px;
}
#storydetail .writercreadit{ float: left; width: 90%; overflow: hidden; margin-left: 3px;}
#storydetail .writercreadit .creaditname{
	float: left;
	width: auto;
	max-width: 90%;
	line-height: 50px;
	height:50px;
	overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	margin-right: 10px;
}
#storydetail .writercreadit .creaditname .ell:last-child .ell-dot{ display: none;}
#storydetail .creaditname-more{ height:50px; line-height: 50px; }
#storydetail .creaditname-more a{ color: #734b25;}
#storydetail .creaditname-more a:hover{ color: #a07a55; cursor: pointer;}
@media (max-width: 991px) {
	#storydetail .writercreadit .creaditname{
		max-width: 84%;
	}
}
@media (max-width: 524px) {
	#storydetail .writercreadit{ width: 84%; }
}
@media (max-width: 427px) {
	#storydetail .writercreadit .creaditname{
		max-width: 75%;
	}
}
@media (max-width: 344px) {
	#storydetail .writercreadit{ width: 80%; }
}




/***
save-book
***/
#savebook .hsm-accordion .panel-heading .hsm-accordion-dd .dropdown-toggle .fa{
	font-size: 30px;
	line-height: 70px;
	color: #b6b6b6;
}
#savebook #read_function{ text-align: right; margin-top: 20px;}
#savebook #read_function .dropdown-menu{
	margin-top: 5px;
	border-radius: 0;
}
/*
#savebook .hsm-accordion-h{
	width:90%;
}
#savebook .hsm-accordion-dd{
	width: 10%;
}
*/
#savebook #read_function .readcfonts{
	width: 120px;
	border: solid 1px #cccccc;
	border-radius: 3px;
	padding: 5px;
	position: relative;
	overflow: hidden;
}
#savebook #read_function .readcfonts select{
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
    border: 0;
    background: none;
}
#savebook #read_function .readcfonts::after{
	position: absolute;
	right: 10px;
	top: 45%;
    width: 0;
	height: 0;
	content: '';
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}


#savebook #read_function .readcfonts select option{ color: #000000;}

#savebook .hsm-accordion-text{
	font-family: 'garudabook';
	padding: 15px!important;
}
#savebook .hsm-accordion-text div{
	max-width: 678px;
	margin: auto;
}
#savebook .hsm-accordion-text p{
	/*
	padding: 0!important;
	margin: 0!important;
	overflow: hidden;
	text-indent: 4%;
	*/
	line-height: 1.7;
	padding: 0!important;
	margin-bottom: 22px;
	overflow: hidden;
	text-indent: 10%;
}
#savebook .hsm-accordion-text img{ max-width: 100%!important; height: auto!important; padding: 0!important; margin: 0!important;}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#savebook #barimg{ padding-right: 5px;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#savebook #barimg img{ max-width: 60px;}
	#savebook #bartext{ padding-left: 0;}
}
@media (max-width: 991px) {
	#savebook #read_function{
		float: none;
		position: relative;
		margin-top: 0;
		margin-bottom: 5px;
		text-align: center;
	}
	#savebook .hsm-accordion-h{
		width:87%;
	}
	#savebook .hsm-accordion-dd{
		width: 13%;
	}
	
}
@media (max-width: 991px) {
	#savebook .hsm-accordion-text{ margin-top: 0!important;}
	
}
@media (max-width: 375px) {
	#savebook .hsm-accordion-h{
		width:85%;
	}
	#savebook .hsm-accordion-dd{
		width: 15%;
	}
}

/***
SHOP LIST
***/
#shop-page h2{ font-size: 22px;}
/*.col-edit-shop{ padding-right: 0;}*/

.col-edit-shop-big .book-hraf .hrafbook-img{ display: inline-block; width: 39.7%; height: auto; overflow: hidden;}
.col-edit-shop-big .book-hraf .hrafbook-desc{ display: inline-block; width: 58.5%; height: auto; overflow: hidden; padding-left: 15px;}
.col-edit-shop-big .book-hraf .hrafbook-desc h3{margin-left: 0; margin-right: 0;}
.col-edit-shop-big .book-hraf .hrafbook-footer{ width: 52%;}
.col-edit-shop-big .book-hraf .hrafbook-footer .price{ font-size: 1em; line-height: 2.4em; }
.col-edit-shop-big .book-hraf .hrafbook-footer .price span:nth-child(2){ font-size: 0.8em; }
.col-edit-shop-big .book-hraf .hrafbook-footer .sku{ font-size: 0.8em; line-height: 3.4em; }
.col-edit-shop-big .book-hraf .hrafbook-footer .btncol .btn{ font-size: 13px;}
@media (min-width: 1200px) {
	.col-edit-shop-big{
		display: inline-block;
		width: 42.75%;
	}
	.col-edit-shop{
		display: inline-block;
		width: 14.25%;
	}
	.col-edit-shop .book-item .shop-bookname{
		font-size: 0.8em;
		line-height: 1.2em;
		height: 2.4em;
		margin-bottom: 7px;
	}
	.col-edit-shop .book-item .shop-bookprice{ background: #dfd4c1; text-align: center; font-size: 0.92em; line-height: 2.4em; height: 2.5em;}
	.col-edit-shop .book-item .shop-bookprice span:nth-child(2){ font-size: 0.8em; margin-left: 5px; text-decoration: line-through; color: #817f7c;}
}

@media (max-width: 1199px) {
	.col-edit-shop-big{
		display: inline-block;
		width: 42.75%;
	}
	.col-edit-shop-big .book-hraf .hrafbook-img{ width: 38.4%; }
	.col-edit-shop-big .book-hraf .hrafbook-desc{ width: 60.5%; font-size: 12px; line-height: 16px; height: 98px; }
	.col-edit-shop-big .book-hraf .hrafbook-desc h3{ font-size: 20px;}
	.col-edit-shop-big .book-hraf .hrafbook-footer{ width: 52%;}
	.col-edit-shop-big .book-hraf .hrafbook-footer .price{ font-size: 0.8em; line-height: 2.6em; }
	.col-edit-shop-big .book-hraf .hrafbook-footer .price span:nth-child(2){ font-size: 0.7em; }
	.col-edit-shop-big .book-hraf .hrafbook-footer .sku{ font-size: 0.7em; line-height: 3.2em; }
	.col-edit-shop-big .book-hraf .hrafbook-footer .btncol .btn{ font-size: 11px;}
	
	.col-edit-shop{
		display: inline-block;
		width: 14.25%;
	}
	.col-edit-shop .book-item-shop-detail .col-md-12{
		padding-left: 3px;
		padding-right: 3px;
	}
	.col-edit-shop .book-item .shop-bookname{
		font-size: 0.7em;
		line-height: 1.2em;
		height: 2.3em;
		margin-bottom: 7px;
	}
	.col-edit-shop .book-item .shop-bookprice{ background: #dfd4c1; text-align: center; font-size: 0.8em; line-height: 2.2em; height: 2.3em;}
	.col-edit-shop .book-item .shop-bookprice span:nth-child(2){ font-size: 0.8em; margin-left: 2px; text-decoration: line-through; color: #817f7c;}
}

@media (max-width: 991px) {
	.col-edit-shop-big{
		display: inline-block;
		width: 80%;
	}
	.col-edit-shop-big .book-hraf .hrafbook-img{ width: 27.2%; }
	.col-edit-shop-big .book-hraf .hrafbook-desc{ width: 71.5%; font-size: 14px; line-height: 18px; height: 104px;}
	.col-edit-shop-big .book-hraf .hrafbook-desc h3{ font-size: 22px;}
	.col-edit-shop-big .book-hraf .hrafbook-footer{ width: 66%;}
	.col-edit-shop-big .book-hraf .hrafbook-footer .price{ font-size: 1em; line-height: 2.4em; }
	.col-edit-shop-big .book-hraf .hrafbook-footer .price span:nth-child(2){ font-size: 0.8em; }
	.col-edit-shop-big .book-hraf .hrafbook-footer .sku{ font-size: 0.8em; line-height: 3.4em; }
	.col-edit-shop-big .book-hraf .hrafbook-footer .btncol .btn{ font-size: 13px;}
	.col-edit-shop{
		display: inline-block;
		width: 20%;
	}
	
}
@media (max-width: 767px) {
	.col-edit-shop-big{
		display: block;
		width: 100%;
	}
	.col-edit-shop{
		display: block;
		width: 100%;
	}
	.col-edit-shop .img-responsive{
		float: left;
		width: 13%!important;
	}
	.col-edit-shop .book-item-shop-detail{
		float: left;
		width: 87%!important;
		padding-left: 15px;
		overflow: hidden;
	}
	.col-edit-shop .shop-bookname{
		text-align: left;
		font-size: 16px!important;
		line-height: 20px!important;
		height: auto!important;
		max-height: 60px;
		overflow: hidden;
	}
	.col-edit-shop .shop-bookprice{
		position: absolute;
		bottom: 0;
		background: none!important;
		overflow: hidden;
		height: auto!important;
	}
	.col-edit-shop .shop-bookprice .rows{
		color: #734b25;
		font-size: 13px!important;
		text-align: left;
	}
	.col-edit-shop .shop-bookprice span:nth-child(2){ color: #817f7c;}
	.col-edit-shop:hover .shop-bookprice{ background: none; color: #734b25;}
	.col-edit-shop:hover .shop-bookprice span:nth-child(2){ color: #817f7c;}
	.col-edit-shop .bookitem-shopstat{ position: relative; margin-top: -2px; margin-bottom: 5px;}
	.col-edit-shop .bookitem-shopstat div{
		padding-left: 8px;
		padding-right: 8px;
		font-size: 13px;
	}
}
@media (max-width: 730px) {
	.col-edit-shop .img-responsive{ width: 14%!important; }
	.col-edit-shop .book-item-shop-detail{ width: 86%!important; }
}
@media (max-width: 684px) {
	.col-edit-shop .img-responsive{ width: 15%!important; }
	.col-edit-shop .book-item-shop-detail{ width: 85%!important; }
}
@media (max-width: 640px) {
	.col-edit-shop-big .book-hraf .hrafbook-img{ display: block; width: 100%; text-align: center;}
	.col-edit-shop-big .book-hraf .hrafbook-img img{ max-width: 150px;}
	.col-edit-shop-big .book-hraf .hrafbook-desc{ float: none; display:block; width: 100%; padding-left: 0; margin: 15px 0;}
	.col-edit-shop-big .book-hraf .hrafbook-desc h3{ text-align: center;}
	.col-edit-shop-big .book-hraf .hrafbook-footer{
		display: block;
		position: relative;
		width: 100%;
		bottom: 0;
		right: 0;
		padding-bottom: 5px;
	}
}
@media (max-width: 630px) {
	.col-edit-shop .img-responsive{ width: 16%!important; }
	.col-edit-shop .book-item-shop-detail{ width: 84%!important; }
}
@media (max-width: 600px) {
	.col-edit-shop .img-responsive{ width: 90px!important; }
	.col-edit-shop .book-item-shop-detail{
		width:96%!important;
		height: 117px!important;
		padding-left: 100px;
		padding-right: 20px;
		position: absolute;
	}
}
@media (max-width: 480px) {
	.col-edit-shop .shop-bookname{
		font-size: 12px!important;
		line-height: 16px!important;
	}
}



/***
SHOP FOOTER
***/
.shop-footer{ background: #dfd4c1;}
.shop-footer .circle{
	width: 58px;
	height: 58px;
	background: #f89344;
	color: #ffffff;
	margin-top: -20px;
	margin-right: 5px;
}
.shop-footer .circle i{ line-height: 58px; font-size: 26px;}
.shop-footer h4{ display: inline-block; color: #a65719;}
.shop-footer h4 small{ color: #000000;}
.shop-footer a:hover .circle{ background: #734b25;}
.shop-footer a:hover h4{ color: #734b25;}

.shop-footer #circle-contact{ margin-bottom: 34px;}

@media (max-width: 1199px) {
	.shop-footer h4{ font-size: 1em;}
}
@media (max-width: 991px) {
	.shop-footer h4{ font-size: 1.2em;}
}

/***
SHOP BOOK DETAIL
***/
#bookdetail .book-image{ padding-left: 0; }
#bookdetail .book-desc{ padding-left: 0; padding-right: 0; }
#bookdetail .book-desc h3{ margin-top: 0px!important; }
@media (max-width: 767px) {
	#bookdetail .book-desc h3{ margin-top: 15px!important; }
}
@media (max-width: 355px) {
	#bookdetail #custom-btn{
		padding-left: 5px;
		padding-right: 0;
	}
	#bookdetail #custom-btn .btn{
		font-size: 12px;
		line-height: 34px;
		padding-top: 0;
		padding-bottom: 0;
	}
}


/***
TRACING
***/
#tracking .tracking-in{
	padding-left: 50px;
	padding-right:  50px;
}
#tracking .table tr th,
#tracking .table tr td{
	width: 50%;
}

@media (max-width: 767px) {
	#tracking .tracking-in{
		padding-left: 0px;
		padding-right: 0px;
	}
}
@media (max-width: 320px) {
	#tracking .bg-light-gray .col-md-12{
		padding-left: 0px;
		padding-right: 0px;
	}
}


/*########################################
	CONFIRM PAYMENT
########################################*/
.confirm_payment .order-number{
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F3F4F6;
	padding:25px 15px;
	border-radius: 10px;
}
.confirm_payment .order-number .order-label{
	flex: 0 0 250px;
	font-size: 16px;
	font-weight: 600;
}
.confirm_payment .order-number .order-form{
	flex: 0 0 300px;
}
.confirm_payment .order-number .order-form .form-group{
	margin: 0;
}
.confirm_payment .order-number .order-form .help-block-error{
	position: absolute;
}
.confirm_payment .order-number .order-form-inp{
	display: flex;
	justify-content: center;
	align-items: center;
}
.confirm_payment .order-number .order-form-inp .form-group{
	width: calc(100% - 85px);
	margin-right: 5px;
}
.confirm_payment .order-number .order-form-inp .btn{ width: 80px;}


.confirm_payment .payment-form{
	width: 720px;
	max-width: 100%;
	margin: 15px auto;
}
.confirm_payment .payment-form label{ font-weight: 600;}
.confirm_payment .payment-form .form-control{
	height: 40px;
}
.confirm_payment .payment-form textarea.form-control{
	min-height: 90px;
}
.confirm_payment .select2-container--default .select2-selection--single {
	height: 40px;
	line-height: 40px;
}
.confirm_payment .select2-container .option-div{
	height: 40px;
	line-height: 40px;
}
.confirm_payment .select2-container .select2-selection__rendered img,
.option-div img{
    width:24px;
    height:24px;
    margin-right: 5px;
    vertical-align: middle;
}

.confirm_payment .payment-form .radio2 label img{
	margin: 0 5px;
}

.confirm_payment .fileupload-b .input-group{
	height: 40px;
}
.fileupload-b .btn-file{ height: 40px; }


.confirm_payment .recaptcha-zone{
	width: 305px;
	margin: 15px auto;
}
.confirm_payment .recaptcha-zone input[type='text']{
	font-size: 14px;
	font-weight: normal;
	color: #333333;
	background-color: #FFFFFF;
	border: 1px solid #DBDBDB;
	border-radius: 5px;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.confirm_payment .recaptcha-zone input[type='text']:focus {
	border-color: #999999;
	outline: 0;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

@media (max-width: 767px) {
	.confirm_payment h2{ text-align: center;}
}
@media (max-width: 640px) {
	.confirm_payment .order-number{
		display: block;
		background:none;
		padding:0;
		border-radius: 0;
	}
}



/*
reward  ( รอลบ )
*
.reward .buydimond-stat{
	display: table;
	width: 100%;
	border-radius: 10px;
	background: #edc73b;
	-webkit-box-shadow: inset 0px -4px 0px -1px rgba(227,182,14,1);
	-moz-box-shadow: inset 0px -4px 0px -1px rgba(227,182,14,1);
	box-shadow: inset 0px -4px 0px -1px rgba(227,182,14,1);
	overflow: hidden;
}
.reward .buydimond-stat .buydimond-stat-col{ display: table-cell; padding: 15px; }
.reward .buydimond-stat .buydimond-stat-col:nth-child(1){ width: 30%; }
.reward .buydimond-stat .buydimond-stat-col:nth-child(2){ width: 40%; }
.reward .buydimond-stat .buydimond-stat-col:nth-child(3){ width: 30%; }
.reward .buydimond-stat .buydimond-stat-col:nth-child(4){ display: none; }
.reward .buydimond-stat .buydimond-stat-col-2x{ width: 50%!important;}

.reward .buydimond-stat .buydimond-stat-col .small{ font-size: 9px; line-height: 12px; margin-top: 5px;}
.reward .buydimond-stat .buydimond-stat-col .btn-reward{
	background: #c60000;
	border-radius: 15px;
	color: #ffffff;
	font-size: 11px; line-height: 12px;
}
.reward .buydimond-stat .buydimond-stat-col .btn-reward-2{
	background:#e8e8e8;
	border-radius: 15px;
	color: #000000;
	font-size: 11px; line-height: 12px;
}
.reward .buydimond-stat .buydimond-stat-col .btn-reward-2:hover,
.reward .buydimond-stat .buydimond-stat-col .btn-reward:hover{ background: #ee3e3e; color: #ffffff;}
.reward .buydimond-stat .buydimond-stat-col .rw-num{ display: inline-grid; min-width: 50px; text-align: center; font-size: 18px;}


@media (min-width: 1199px) { #shopconfirmpay .reward .payment-in{ padding-left: 30px; padding-right: 30px;} }
@media (max-width: 1199px) {
    .reward .payment-in{ padding-left: 0px; padding-right: 0px;}
	#shopconfirmpay .reward .payment-in{
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media (max-width: 991px) and (min-width: 600px) {
    .reward .dcd{
        display: block;
        width: 100%;
        margin-top:5px; 
    }
}
@media (max-width: 767px) {
    #shopconfirmpay .reward{ padding: 0;}
	.reward .payment-in{
		padding-left: 0px;
		padding-right: 0px;
	}
}
@media (max-width: 599px) {
    .reward .buydimond-stat{
        background: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .reward .buydimond-stat .buydimond-stat-col{
        display: block;
        width: 100%!important;
        height: auto;
        min-height: 120px;
        border: none;
        background: #edc73b!important;
        margin-bottom: 10px;
        border-radius: 15px;
        overflow: hidden;
    }
    .reward .buydimond-stat .buydimond-stat-col:nth-child(3){
        display: flex;
        align-items: center;
    }
    
}
*/

/*
@media (max-width: 496px) {
	.reward #subconfr{margin-left: 0!important; margin-top: 20px;}
}
@media (max-width: 375px) {
	.reward .uneditable-input{ min-width: 180px!important;}
}
*/


/***
SHOP CHECKOUT
***/
#shopcheckout thead{ background: #e0e0e0;}
#shopcheckout thead tr td{ padding-top: 15px; padding-bottom: 15px;}
#shopcheckout .cartlist .mobile-data .form-control-select{ max-width:60px;}
#shopcheckout .checkout-row{ padding: 20px;}
#shopcheckout .checkout-row .radio label{ width: 80%;}
#shopcheckout .checkout-row .radio label .pull-right{ width: 70px;}
#shopcheckout .checkout-row .radio2 label{ width: 80.7%;}
#shopcheckout .checkout-row .radio2 label .pull-right{ width: 70px;}
#shopcheckout .summary .summary-con{
	padding: 10px 20px 20px 20px;
}
#shopcheckout .summary .summary-total{
	padding: 10px 20px 10px 20px;
	background: #C6AB80;
	border-radius: 6px;
	color: #ffffff;
}
#shopcheckout .summary .summary-con hr{ display: none;}


#shopcheckout .summary .summary-option li{
	padding: 0 8px 15px 8px;
	border-top: solid 1px #D1D1D1;
}
#shopcheckout .summary .summary-option li h3{ font-size: 20px; }

#shopcheckout .summary .summary-option .mypoint{
	padding: 8px 20px 5px 20px;
	background: #E2B267;
	border-radius: 7px;
	color: #ffffff;
	text-align: center;
}
#shopcheckout .summary .summary-option .mypoint div:first-child{
	font-size: 13px;
	line-height: 14px;
}
#shopcheckout .summary .summary-option .mypoint div:last-child{
	font-size: 17px;
	font-family: 'promptbold';
}


#shopcheckout .summary .summary-option .mypoint-select{
	display: flex;
	align-items:center;
}
#shopcheckout .summary .summary-option .mypoint-select li{ border: none;}
#shopcheckout .summary .summary-option .mypoint-select li{
	font-size: 13px;
	text-align: center;
	line-height: 1;
	padding: 0;
}
#shopcheckout .summary .summary-option .mypoint-select li:first-child{ width: calc(100% - 120px);}
#shopcheckout .summary .summary-option .mypoint-select li div:first-child{
	font-family: 'promptmedium';
	font-size: 17px;
}
#shopcheckout .summary .summary-option .mypoint-select li div:last-child{
	font-family: 'promptmedium';
	font-size: 13px;
	color: #E85D1F;
}
#shopcheckout .summary .summary-option .mypoint-select li .form-control{
	height: 40px;
	border-radius: 5px;
}
#shopcheckout .summary .summary-option .mypoint-select li:nth-child(2){
	width: 89px;
	padding-left: 5px;
}
#shopcheckout .summary .summary-option .mypoint-select li:nth-child(3){
	width: 30px;
}



#shopcheckout .summary .summary-option .code-form .form-inline .form-group{
    display: inline-block;
    width: calc(100% - 120px);
}
#shopcheckout .summary .summary-option .code-form .form-inline .form-group .form-control{
    width: 100%;
    border-radius: 5px;
	height: 40px;
}
#shopcheckout .summary .summary-option .code-form .btn{
    color: #ffffff;  
    text-shadow: none;	
    background-color: #383838;
    border: solid 1px #383838;
    min-width: 110px;
}


#shopcheckout .summary .summary-get-point{
	padding-top: 5px;
}
#shopcheckout .summary .summary-get-point span:nth-child(2),
#shopcheckout .summary .summary-get-point span:nth-child(3){
	font-family: 'promptbold'!important;
	font-size: 16px;
}
#shopcheckout .summary .summary-get-point .icon{
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* discount coupon */
#shopcheckout .discount-list{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#shopcheckout .discount-list .dcol{ width: 50%;}
#shopcheckout .discount-list .dcol:nth-child(2){ text-align: right;}
#shopcheckout .discount-list .list li{
	border: none;
	margin-bottom: 5px;
	padding-bottom: 0;
}
#shopcheckout .discount-list .list li .ticket{
	cursor: default;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
	width: auto;
    z-index: 1;
    background: rgba(255, 255, 255, 1);
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgba(255, 255, 255, 1);
    padding: 3px 7px;
    /*border: solid 1px #000000;*/
    white-space: nowrap;
    color: #222222;
}
#shopcheckout .discount-list .list li .ticket:after{
	content: "";
    width: 6px;
    height: calc(100% - 5px);
    position: absolute;
    top: 2.5px;
    background-image: radial-gradient(#e7e2da 2px,transparent 0);
    background-size: 6px 26px;
    background-position-x: -6px;
	right: -3px;
}
#shopcheckout .discount-list .list li .ticket:before {
    content: "";
    width: 6px;
    height: calc(100% - 5px);
    position: absolute;
    top: 2.5px;
    background-image: radial-gradient(#e7e2da 2px,transparent 0);
    background-size: 6px 26px;
    background-position-x: -6px;
	left: -3px;
}



@media (max-width: 991px) {
	#shopcheckout .row-mypoint{
		display: flex;
	}
	#shopcheckout .row-mypoint .col:first-child{ width: 200px;}
	#shopcheckout .row-mypoint .col:last-child{
		margin-right: 0;
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	#shopcheckout .cartlist{ border-left: none; border-right: none;}
	#shopcheckout .cartlist .vertical-align{ display: block;}
	#shopcheckout .cartlist .cartlist-pd{
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#shopcheckout .cartlist .cartlist-pd{ margin-bottom: 5px; }
	#shopcheckout .cartlist .mobile-name{ display: inline-block; width: 40%; clear: both; margin-bottom: 5px; }
	#shopcheckout .cartlist .mobile-data{ display: inline-block; width: 55%; margin-bottom: 5px; }
	#shopcheckout .cartlist .mobile-data .form-control-select{ max-width:60px;}
	#shopcheckout .choice-user-btn .btn{
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (max-width: 580px) {
	#shopcheckout .row-mypoint{
		display: block;
	}
	#shopcheckout .row-mypoint .col:first-child{ width: 100%;}
	#shopcheckout .row-mypoint .col:last-child{
		margin-top: 15px;
	}
}

@media (max-width: 375px) {
	#shopcheckout .checkout-row{
		padding-left: 0;
		padding-right: 0;
	}
	#shopcheckout .choice-user-btn{ width: 100%; }
	#shopcheckout .choice-user-btn .btn{ width: 100%; }
}
@media (max-width: 320px) {
	#shopcheckout .summary .summary-con .col-xs-7,
	#shopcheckout .summary .summary-con .col-xs-5{ float: none; width: 100%; }
	#shopcheckout .summary .summary-con hr{ display: block; margin: 5px 0;}
	#shopcheckout .summary .summary-total .col-xs-7{ width: 70%;}
	#shopcheckout .summary .summary-total .col-xs-5{ width: 30%;}
}






/***
Term & Privacy
***/

#writer_guidelines .bg-wr1{ background: #c3a33b; }
#writer_guidelines h2{ word-wrap: break-word;}
@media (min-width: 992px) {
	#writer_guidelines .tab-content{
		padding-left: 30px;
		padding-right: 30px;
	}
}


/***
WRITER GUIDELINES
***/
/*
#writer_guidelines .tab-content ol li,
#writer_guidelines .tab-content ul li{ margin-bottom: 10px;}
*/

#writer_guidelines .list-tab{ margin-left: 0; }
#writer_guidelines .writer_guidelines_banner{ margin-top:20px; margin-bottom: 20px; position: relative; overflow: hidden; }
#writer_guidelines .writer_guidelines_banner .writer_guidelines_banner_text{
	position: absolute;
	top: 40%;
	right: 10px;
	z-index: 5;
	font-size: 5vw;
	color: #ffffff;
	
}

#writer_guidelines .dl-horizontal dt{ width: 40px!important; text-align: left;}
#writer_guidelines .dl-horizontal dt i{ font-size: 32px; }
#writer_guidelines .dl-horizontal dd{ margin-left: 45px;}

#writer_guidelines .dl-horizontal-text-choice dt{ width: 50px!important; }
#writer_guidelines .dl-horizontal-text-choice dd{ margin-left: 55px;}

@media (max-width: 991px) {
	/*
	#writer_guidelines .list-tab-content{ border: none; padding-left: 0; padding-right: 0; padding-top: 20px; }
	#writer_guidelines .list-tab{ padding-left: 0; padding-right: 0;}
	*/
	#writer_guidelines .writer_guidelines_banner{ margin-top:0; margin-bottom: 0; }
	#writer_guidelines .list-tab{ margin-left: -15px; }
	#writer_guidelines .list-tab-content{ border: none; padding-top: 20px;  }
	#writer_guidelines .nav-tabs.list-tab > li.active > a,
	#writer_guidelines .nav-tabs.list-tab > li.active > a:hover,
	#writer_guidelines .nav-tabs.list-tab > li.active > a:focus {
		background-color: #a07a55!important;
		color: #ffffff!important;
	}
	#writer_guidelines .responsive-tabs.nav-tabs span.glyphicon { color: #ffffff!important;}
	#writer_guidelines .responsive-tabs.nav-tabs > li > a:hover { background: #a07a55; color: #ffffff!important; }
	
}

@media (max-width: 380px){
	#writer_guidelines .ebook-campaign-h2{
		font-size: 24px;
	}
}


/***
SHOP HOW TO
***/
#shophowto .quot{ position: relative; overflow: hidden; }
#shophowto .quot img{ position: absolute; left: 30px; z-index: 999;}
#shophowto .quot .quote-bg{
	background: #ece6d5;
	padding: 40px 80px;
}

#shophowto ol { counter-reset: item; padding-left: 25px;}
#shophowto ol>li { display: block; margin-bottom: 10px; }
#shophowto ol>li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
    margin-left: -25px;
}


@media (max-width: 767px) {
	#shophowto .quot .quote-bg{ padding: 40px 40px; }
}

/***
CONTACT
***/
#Contact .modal-body{ font-size: 14px; overflow: hidden;}
#Contact .border-left{ border-left: solid 1px #e1e1e1;}
#Contact .border-right{ border-right: solid 1px #e1e1e1;}
#Contact input{ height: 34px!important; outline: none;}
#Contact .modal-body .form-control {
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
}
#Contact .modal-body .form-control:focus {
  border-color: #c49a6c;
  outline: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
#Contact .socail{ margin-top: 5px;}
#Contact .socail li a{
	display: block;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 100%;
	color: #ffffff;
	line-height: 38px;
	font-size: 20px;
}
#Contact .fb a{ background: #3b5998;}
#Contact .ig a{ background: #6a453b;}
#Contact .lc a{ background: #31c139;}
#Contact .socail li a:hover{ background: #000000; }
#Contact .socail li a:hover{ background: #000000; }
#Contact .close span{ font-size: 30px;}




/***
CONTACT HONGSAMUT
***/
#HongsamutContact .modal-body .form-control {
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
}
#HongsamutContact .modal-body .form-control:focus {
  border-color: #c49a6c;
  outline: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
#HongsamutContact .contact-desc{ font-size: 14px;}
#HongsamutContact .border{
	border-bottom: none;
	border-top: none;
	border-right: none;
}
#HongsamutContact .socail{ margin-top: 5px;}
#HongsamutContact .socail li a{
	display: block;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 100%;
	color: #ffffff;
	line-height: 38px;
	font-size: 20px;
	text-align: center;
}
#HongsamutContact .fb a{ background: #3b5998;}
#HongsamutContact .ig a{ background: #6a453b;}
#HongsamutContact .lc a{ background: #31c139;}
#HongsamutContact .socail li a:hover{ background: #000000; }
@media (max-width: 991px) {
	#HongsamutContact .border{ border: none;}
}

/*############################################
Authfrm
############################################*/
@media (max-width: 360px) {
	#Authfrm .form-group .btn{
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}
}

/*############################################
BUY DIMOND
############################################*/
.buydimond{}
.buydimond h3{ line-height: 1.3;}
.buydimond .remaining{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.6em;
	font-weight: 500;
}
.buydimond .remaining img{
	width: 40px;
	margin: 0 5px;
}

.buydimond .payment-method{
	width: 790px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px 20px;
	margin:15px auto;
}
.buydimond .payment-method .item{
	flex: 0 0 250px;
	height: auto;
	position: relative;
}
.buydimond .payment-method .item input{ display: none;}
.buydimond .payment-method .item label{
	display: block;
	width: 100%;
	height: 220px;
	border: solid 1px #E5E2E2;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}
.buydimond .payment-method .item label::before{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 10px;
	border: solid 3px #E5A56B;
	content: "";
	z-index: 1;
	display: none;
}
.buydimond .payment-method .item label{ cursor: pointer;}
.buydimond .payment-method .item:hover label,
.buydimond .payment-method .item :checked + label{
	border-color: transparent;
}
.buydimond .payment-method .item:hover label::before,
.buydimond .payment-method .item :checked + label::before{ display: block; }
.buydimond .payment-method .item.is-discount label::after{
	content: "ลดราคา";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
	background: #E56B6B;
	text-align: center;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	line-height: 40px;
	z-index: 2;
}
.buydimond .payment-method .item label .inside{
	padding: 60px 15px 15px 15px;
}
.buydimond .payment-method .item label .inside .icon{
	width: 100%;
	height: 70px;
	text-align: center;
}
.buydimond .payment-method .item label .inside .icon img{ height: 100%;}
.buydimond .payment-method .item label .inside .name{
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	margin: 20px 0 0 0;
}
.buydimond .payment-method .item label .inside .desc{
	text-align: center;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
}

/**/
.buydimond .packages{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px 20px;
	margin:15px auto;
}
.buydimond .packages .item{
	flex: 0 0 calc(25% - 15px);
	height: auto;
	position: relative;
}
.buydimond .packages .item input{ display: none;}
.buydimond .packages .item label{
	display: block;
	width: 100%;
	height: 230px;
	border: solid 1px #E5E2E2;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
	cursor: pointer;
}
.buydimond .packages .item label::before{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 10px;
	border: solid 3px #E5A56B;
	content: "";
	z-index: 1;
	display: none;
}

.buydimond .packages .item:hover label,
.buydimond .packages .item :checked + label{
	border-color: transparent;
}
.buydimond .packages .item:hover label::before,
.buydimond .packages .item :checked + label::before{ display: block; }
.buydimond .packages .item.is-discount label::after{
	content: "ลดราคา";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
	background: #E56B6B;
	text-align: center;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	line-height: 40px;
	z-index: 2;
}
.buydimond .packages .item .icon{
	width: 100%;
	height: 50px;
	text-align: center;
	margin: 50px 0 10px 0;
}
.buydimond .packages .item .icon img{ height: 100%;}
.buydimond .packages .item .amount{
	display: flex;
	justify-content: center;
	align-items: center;
}
.buydimond .packages .item .amount div:nth-child(1){ flex: 0 0 20px; }
.buydimond .packages .item .amount div:nth-child(1) img{ width: 100%;}
.buydimond .packages .item .amount div:nth-child(2){
	color: #E56B6B;
	font-weight: 500;
	font-size: 18px;
}
.buydimond .packages .item .price{
	width: 150px;
	padding: 5px;
	border-radius: 15px;
	background: #FDEFE2;
	text-align: center;
	margin: 0 auto;
	font-size: 16px;
	font-weight: 600;
}
.buydimond .packages .item .info{
	text-align: center;
	font-size: 12px;
	color: #9D9D9D;
}
.buydimond .packages .item .plus{
	text-align: center;
}

.buydimond .btn-buy{
	width: 250px;
}

@media (max-width: 991px) {
	.buydimond .payment-method{
		width: 100%;
	}
	.buydimond .payment-method .item{
		flex: 0 0 calc(33.34% - 14px);
	}

	.buydimond .packages .item{
		flex: 0 0 calc(33.34% - 14px);
	}
}
@media (max-width: 575px) {
	.buydimond .payment-method .item{
		flex: 0 0 calc(50% - 10px);
	}
	.buydimond .packages .item{
		flex: 0 0 calc(50% - 10px);
	}
}
@media (max-width: 425px) {
	.buydimond .payment-method{
		gap: 10px 10px;
	}
	.buydimond .payment-method .item{
		flex: 0 0 calc(50% - 5px);
	}
	.buydimond .payment-method .item label{
		height: 175px;
	}
	.buydimond .payment-method .item.is-discount label::after{
		height: 30px;
		line-height: 30px;
	}
	.buydimond .payment-method .item label .inside{
		padding: 42px 10px 10px 10px;
	}
	.buydimond .payment-method .item label .inside .icon{
		height: 50px;
	}
	.buydimond .payment-method .item label .inside .name{
		font-size: 16px;
		margin: 10px 0 0 0;
	}


	.buydimond .packages{
		gap: 10px 10px;
	}
	.buydimond .packages .item{
		flex: 0 0 calc(50% - 5px);
	}
	.buydimond .packages .item label{
		height: 205px;
	}
	.buydimond .packages .item.is-discount label::after{
		height: 30px;
		line-height: 30px;
	}
	.buydimond .packages .item .icon{
		height: 40px;
		margin: 40px 0 10px 0;
	}
	.buydimond .packages .item .price{
		width: 120px;
	}
	.buydimond .packages .item .info{
		text-align: center;
		font-size: 12px;
		color: #9D9D9D;
	}
	.buydimond .packages .item .plus{
		text-align: center;
	}
}




/*############################################
BUY MODAL
############################################*/
@media (min-width: 768px) {
	.modal-baydimon-col .col-xs-8 div{ padding-left: 15px; font-size: 16px;}
	.modal-baydimon-col .col-xs-8 div:nth-child(1){font-size: 18px;}
	.modal-baydimon-btn{font-size: 18px;}
}
@media (max-width: 767px) {
	@media (max-width: 460px) {
		.modal-baydimon-text{ width: 100%!important; text-align: center; margin-bottom: 10px;}
		.modal-baydimon-amount .col-xs-4{ width: 50%; font-size: 14px;}
		.modal-baydimon-amount .col-xs-4 img{ width: 26px;}
	}
	.modal-baydimon-col .col-xs-4{ padding: 0;}
	.modal-baydimon-col .col-xs-4 img{ width: 32px; margin-top: 5px;}
	.modal-baydimon-col .col-xs-8 div{ padding-left: 5px;}
	.modal-baydimon-col .col-xs-8 div:nth-child(1){font-size: 10px;}
	.modal-baydimon-use .col-xs-2{ padding-left: 0; padding-right: 0; font-size: 12px; padding-top: 30px!important; }
	.modal-baydimon-use .radio-btn-yellow label{
		padding-top: 10px!important;
		padding-bottom: 10px!important;
	}
	.modal-baydimon-btn{
		font-size: 18px;
		padding-top: 10px!important;
		padding-bottom: 10px!important;
	}
	
}
/*
SUCCESS MODAL
*/
.Buydimonend { width: 300px; margin: auto; overflow: hidden; clear: both;}
.Buydimonend .dimond-icon{ float: left; width: 125px; height: 125px; background: url(../images/bg_buy_ss.png) no-repeat; background-size: cover;}
.Buydimonend .dimond-icon img{ width: 79px; margin: 35px 23px 0 23px;}
.Buydimonend .dimond-icon-text{ float: left; width: 170px; height: 125px;}


/*############################################
FIRM DIMOND
############################################*/
#dimondconfirmpay .bg-light-gray{ background: none !important; padding: 0;}
#dimondconfirmpay .bank-gate{ clear: both;}
#dimondconfirmpay .bank-gate span{ float: left;}
#dimondconfirmpay .bank-gate span:nth-child(1){ margin-right: 10px; padding-top: 10px;}
#dimondconfirmpay form .row{
	margin-left: 0;
	margin-right: 0;
}
#dimondconfirmpay form .bg-gray-2{
	border-radius: 0.735rem;
	background: rgba(229, 165, 107, .16);
}
#dimondconfirmpay form .btn{ margin: auto !important;}
#dimondconfirmpay .btn-primary{
	padding: 10px 15px;
	color: #ffffff;  
  	text-shadow: none;	
  	background: #E5A56B;
  	border: solid 1px #E5A56B;
}
#dimondconfirmpay .btn-primary:hover, 
#dimondconfirmpay .btn-primary:focus, 
#dimondconfirmpay .btn-primary:active, 
#dimondconfirmpay .btn-primary.active{    
  background: #B55E0F !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #B55E0F;
}


/*############################################
EBOOK CART  ( รอลบ )
############################################*
.ebook-cart thead{ background: #d8cfc1; }
.ebook-cart > tbody > tr{ background: #f8f8f8!important; }
.ebook-cart > tbody > tr:last-child{ background: #f3f2ef!important;}
.ebook-cart > tbody > tr i{
	font-size: 20px;
	color: #000000;
}
.ebook-cart > tbody > tr i:hover{ color: #fcdc5b;}
.ebook-cart > tbody > tr img,
.ebook-cart > tbody > tr span{ display: inline-block;}

.ebook-store-ic{ margin-top: 10px;}
.ebook-store-ic img{ width: 100%; max-width:150px;}


.ebook-pch{
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
}
.ebook-pch label{ width: 100%;}
.ebook-pch table{ width: 100%;}
.ebook-pch table tbody tr td{
	padding-left: 15px;
}
.ebook-pch label img{ height: 40px;}
.ebook-pch table tbody tr td:nth-child(1){ width: 180px;}
.ebook-pch label::before{ margin-top: 10px; }
.ebook-pch label::after{ margin-top: 10px; }
.ebook-pch .lb_text_z div{
	display: inline-block;
}
.ebook-pch .btn-label{
	background: #bc4621;
	color: #ffffff;
	border-radius: 15px;
}
.ebook-pch table tbody tr td:nth-child(1) .btn-label{ display: none;}

.ebook-pch table tbody tr:nth-child(1) td img{ float: left; margin-right: 10px; }
.ebook-pch table tbody tr:nth-child(1) td .lb_text_z{ float: left; line-height: 40px;}

@media (max-width: 767px) {
	.ebook-pch table tbody tr td:nth-child(1){ width: 130px;}
	.ebook-pch label img{ height: 25px;}
	.ebook-pch .btn-label{ font-size: 10px;}
	.ebook-pch table tbody tr:nth-child(1) td .lb_text_z{ line-height: 20px;}
}
@media (max-width: 479px) {
	.ebook-pch table tbody tr td{ display: block; width: 100%!important;}
	.ebook-pch .lb_text_z .btn-label{ display: none; }
	.ebook-pch table tbody tr td:nth-child(1) .btn-label{ display: inline-block; margin-left: 15px;}
	
	.ebook-pch table tbody tr:nth-child(1) td img{ float: left; }
	.ebook-pch table tbody tr:nth-child(1) td .lb_text_z{ float: left; width: 80%; }
	
}
*/

/*
*/

.ebook_slider .item{
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 8px 10px;
}
.ebook_slider .item a{
	display: block;
	-webkit-box-shadow: 0px 4px 5px 0px rgba(199,195,199,1);
	-moz-box-shadow: 0px 4px 5px 0px rgba(199,195,199,1);
	box-shadow: 0px 4px 5px 0px rgba(199,195,199,1);
	background: #ffffff;
}
.ebook_slider .ebook_slider_text{
	width: 96%;
	overflow: hidden;
	padding: 0 2%;
	height: 43px;
	line-height: 43px;
	font-size: 13px;
	color: #000000;
}
.ebook_slider .item a:hover .ebook_slider_text{ color: #734b25; }


/*#################
E BOOK INDEX ( HOME )
##################*/
.ebookH_area{ padding: 20px 14%; }
.book-item-type-3 .book-name{
    max-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
@media (max-width: 1199px) { .ebookH_area{ padding: 20px 10%; } }
@media (max-width: 991px) {
    .ebookH_area{ padding: 20px 30px; }
    .book-item-type-3 .book-name{
        max-height: 44px;
        font-size: 18px;
        line-height: 22px;
    }
    .book-item-type-3 .book-by{ font-size: 14px; }
}
@media (max-width: 767px) {
    #Ebook_Home .container{
        margin: 0!important;
        padding: 0!important;
    }
}
@media (max-width: 375px) {
    .ebookH_area{ padding: 20px 10px; }
    .book-item-type-3{ padding: 12px 15px; }
    .book-item-type-3 .book-name{ white-space: nowrap; }
}


/*#################
device
##################*/
#device .table-device .btn-default{
	padding: 0;
	border: none;
}
#device .table-device .btn-default:hover{
	color: #734b25;
	background: none;
}
@media (max-width: 767px){
	#device .table-device .actions{
		width: 90px;
		vertical-align: middle;
	}
}

/*#################
New Year Tax
##################*/
#newyear-tax .table tr:first-child td{ border: none!important; }


/*#################
EXCHANGE
##################*/
.exchangez .exccol img{ cursor: pointer;}
.exchangez .exccol .exccol-rw li span{
	height: 20px!important;
	line-height: 20px;
}
.exchangez .exccol .exccol-text{ height: 48px; overflow: hidden;}
.exchangez .exccol .exccol-rw{ margin-bottom: 0;}
.exchangez .exccol .exccol-rw li span img{ margin-top: -8px;}
.exchangez .exccol .progress{
	margin-top: 7px;
	margin-bottom: 0!important;
	background: #ddd2c0;
	border-radius: 20px;
	position: relative;
}
.exchangez .exccol .progress .progress-bar{
	background: #fbcb1c;
	color: #000000;
}
.exchangez .exccol .progress .progress-text{
	width: 100%;
	position: absolute;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
}

.exchangez .modal-dialog{ max-width: 400px;}
.exchangez .modal-content{ padding: 15px; margin: 0!important; position: relative;}
.exchangez .modal-body{
	margin: 0!important;
	padding: 0!important;
}
.exchangez .modal-header{
	position: absolute;
	top:-10px;
	right: -5px;
	z-index: 50;
}


.exchangez .carousel-control{ background: none;}

.exchangez .exccol-outofstock .progress .progress-bar{ background: #D0D0D0;}
.exchangez .exccol-outofstock .progress .progress-text{ color: #ffffff;}
.exchangez .exccol-outofstock .btn-yellow{
	background: #D0D0D0;
	pointer-events: none;
}
.exchangez .form-control{
	padding-left: 2px;
	padding-right: 2px;
}


/* @media (min-width: 406px) and (max-width: 500px){ */
@media (max-width: 500px){
	.exchangez{ background: none!important;}
	.exchangez .excrows{ padding: 0!important;}
	.exccol{
		width: 100%;
		/*border-bottom: solid 1px #E7E7E7;*/
	}
	.exchangez .exccol:first-child{ margin-top: 15px;}
	.exchangez .exccol .exccol-imgz{
		float: left;
		width: 40%;
	}
	.exchangez .exccol .exccol-descz{
		float: left;
		width: 60%;
		padding-left: 0!important;
	}
	.exchangez .exccol .exccol-descz .btn{
		display: inline;
		width: auto;
	}
	
	@media (min-width: 406px) and (max-width: 424px){
		.exchangez .exccol .exccol-imgz{ width: 42%; }
		.exchangez .exccol .exccol-descz{ width: 58%; }
	}
}
/*
@media (max-width: 500px){
	.exccol{ width: 100%;}
	.exchangez .exccol .exccol-imgz{ width: 100%; }
	.exchangez .exccol .exccol-descz{ width: 100%; }
}
*/


/*#################
Issue-tax-invoice.html
##################*/
#issue_tax .issue_date{ clear: both; }
#issue_tax .issue_date .date-picker{
    float: left;
    width: 48%;
    position: relative;
}
#issue_tax .issue_date .date-picker:nth-child(1){ margin-right: 4%; }
#issue_tax .issue_date .date-picker .form-control,
#issue_tax .issue_date .date-picker input[readonly]{
    background: none!important;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 70px;
    z-index: 5;
}

#issue_tax .issue_date div{
    position: absolute;
    font-size: 14px;
    line-height: 34px;
    top: 0;
    z-index: 1;
}

#issue_tax .issue_date  .input-group-btn{
    display: block;
    width: 100%;
}


#issue_tax .issue_list{ font-size: 14px; }
#issue_tax .issue_list .issue_list_row:first-child .issue_list_hr{ display: none; }
#issue_tax .issue_list .issue_tax_h{ font-size: 16px;}


@media (max-width: 991px){
    #issue_tax .issue_date{ margin-bottom: 15px;}
}
@media (max-width: 767px){
    #issue_tax .issue_date .date-picker{ margin-bottom: 15px; }
    
}
@media (max-width: 410px){
    #issue_tax .issue_date .date-picker{ float: none; width: 100%; }
}


/*########################## GAME #######################*/
#game .game_frame{
    padding-left: 15px;
    padding-right: 15px;
}
#game .game_img{}
#game .game_aws .aws_c1{ text-align: right; }
#game .btn{
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
}

@media (max-width: 500px){
    #game .game_aws .aws_c1{ text-align: left; }
    #game .game_aws .col-xs-6{ width: 100%; }
}


/*########################## GAME #######################*
.bookcover_gallery{}
.bookcover_gallery .bookcover_gallery_item{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.bookcover_gallery .overl{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.bookcover_gallery .overl button{
    width: 100%;
    position: absolute;
    bottom: 0;
}
.bookcover_gallery .bookcover_gallery_item:hover .overl{
    display: block;
}
.bookcover_gallery .bookcover_gallery_item_img{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.bookcover_gallery .bookcover_gallery_item_img img{
    transition: transform .5s ease;
}
.bookcover_gallery .bookcover_gallery_item:hover .bookcover_gallery_item_img img{
    transform: scale(1.5);
}



/*########################## GO TO APP MODAL #######################*/
.gotoapp_md .box{
    background: #F0F0E9;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 14px;
    color: #212121;
}

.gotoapp_md .box .row{
    margin-right: -5px;
    margin-left: -5px;
}
.gotoapp_md .box .col-xs-6{
    padding: 0 5px;
}

/*########################## MODAL PRICE #######################*/
.modal_price{ font-size: 14px; }
.modal_price table{
    width: 100%;
    font-size: 14px; 
}
.modal_price table th,
.modal_price table td{ text-align:center; }
.modal_price table td:nth-child(4){ color: #b90c0c; }


/*########################## MODAL CHANGE BOOK #######################*/
#modal_changebook{}
#modal_changebook ol { counter-reset: item; padding-left: 25px;}
#modal_changebook ol>li { display: block; margin-bottom: 10px; }
#modal_changebook ol>li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
    margin-left: -25px;
}


/*#################
EBOOK PAGE 
##################*/
.ebook-card .img-responsive {
    padding-top: calc(100% + 67px);
    overflow: hidden;
    position: relative;
}
.ebook-card .img-responsive img {
    width: auto;
    min-width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
}
.ebook-card .author {
    color: #bdbdbd;
    font-weight: normal;
    font-size: 13px;
    margin: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*#################
PROMO Guidelines
##################*/
#promo_guidelines .content_in{ padding: 20px 80px; }
#promo_guidelines .content_in img{
	width: 100%;
	max-width: 800px;
}
@media (max-width: 991px){
	#promo_guidelines .content_in{ padding: 20px 35px; }
}

/*#################
Promotion Guidelines
##################*/
.promotion_g .pmcontent_in{ padding: 20px 80px; }
.promotion_g .content_in img{
	width: 100%;
	max-width: 800px;
}
@media (max-width: 991px){
	.promotion_g .pmcontent_in{ padding: 20px 35px; }
}

/*#################
default Guidelines
##################*/
#default_guidelines .content_in{ padding: 20px 80px; }
#default_guidelines .content_in img{
	width: auto;
	max-width: 100%;
}
@media (max-width: 991px){
	#default_guidelines .content_in{ padding: 20px 35px; }
}

/*#################
fiction-form
##################*/
#fiction-form .boolcover_zone{
	width: 100%;
	height: auto;
}
#fiction-form .img_upload_normal .fileinput{
	display: block;
	width: 100%;
}
#fiction-form .img_upload_normal .fileinput .thumbnail {
    overflow: hidden;
    margin-bottom: 5px;
    vertical-align: middle;
	text-align: center;
	width: 100%;
	border-radius: 0;
}
#fiction-form .img_upload_normal .thumbnail a>img,
#fiction-form .img_upload_normal .thumbnail>img {
	width: 100%;
}

/*
*/
#fiction-form .indimg_frame{
    display: block;
    position: relative;
    width: 200px;
    overflow: hidden;
}
#fiction-form .indimg_frame .fileinput{ margin-bottom: 0;}
#fiction-form .indimg_frame .fileinput input[type="file"]{ opacity: 0; position: absolute; top: 0; left: 0;}
#fiction-form .indimg_frame .fileinput .thumbnail{
    width: 200px;
    height: 200px;
    background: #A7A7A7;
    overflow: hidden;
    cursor: pointer;
}
#fiction-form .indimg_frame .thumbnail .ic{
    width: 66px;
    height: 39px;
    background: #ffffff;
    margin: 80px auto 0 auto;
    line-height: 39px;
    border-radius: 30px;
    font-size: 20px;
}
#fiction-form .indimg_frame .thumbnail:hover{
    background: #E5A56B;
}
#fiction-form .indimg_frame .fileinput .thumbnail>img {
    width: 100%;
    max-height: none !important;
}
#fiction-form .indimg_frame .profile-pic-btn{
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#fiction-form .indimg_frame .profile-pic-btn .btn{
    float: left;
    width: 50%;
    min-width: 20px;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px){
	#fiction-form .boolcover_zone{
		width: 200px;
		margin: auto;
	}
}

/*#################### OTP #################*/
#otp .rows-otp{
	width: 250px;
	height: auto;
	overflow: hidden;
	margin: auto;
}
#otp .otpref{
	padding: 0 12px;
	margin-top: 15px;
	margin-bottom: 5px;
}
#otp .digit-group{
	display: flex;
	align-items: center;
	justify-content: center;
}
#otp .digit-group input{
	-ms-flex: 0 0 30px;
    flex: 0 0 30px;
	width: 30px;
	height: 50px;
	border: solid 1px #cccccc;
	line-height: 50px;
	text-align: center;
	font-size: 24px;
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	color: #333333;
	margin: 0 2px;
	-webkit-box-shadow: none;
  	box-shadow: none;
	outline: none;
}
#otp .digit-group input:focus{
	border: 1px solid #c49a6c;
}
#otp .digit-group .splitter {
	padding: 0 5px;
	color: #cccccc;
	font-size: 24px;
}
#otp .reotp{ color: #656565; }
#otp .reotp:hover{ color: #E5A56B; }
#otp .btn-z{
	padding: 0 15px;
}

/*#################################################################
	COUPON
#################################################################*/
.coupon-mobile-topbar{ display: none;}

/*
*/
.coupon-mobile-topbar{
	display: none;
	width: 100%;
	height: auto;
	background: #FFFFFF;
	position: fixed;
	top: 0;
	z-index: 50;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
.coupon-topbar{
	width: 100%;
	height: 59px;
	position: relative;
	overflow: hidden;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	font-size: 18px;
}
.coupon-topbar button{
	border: none;
	border-radius: 0;
	background: none;
	width: 40px;
}
.coupon-topbar button .icon-svg{
	width: 20px;
	height: 20px;
}
.coupon-topbar .title{
	width: calc(100% - 80px);
}

/*
*/
.coupon-mobile-footerbar{
	width: 100%;
	height: auto;
	background: #ffffff;
	position: fixed;
	overflow: hidden;
	display: none;
	justify-content: space-between;
	bottom: 0;
	z-index: 50;
	font-size: 12px;
}
.coupon-mobile-footerbar i{
	font-size: 18px;
}
.coupon-mobile-footerbar .footerbar-nav-left{
	padding: 10px 15px;
	text-align: center;
	color: #000000;
}
.coupon-mobile-footerbar .footerbar-nav-right{
	padding: 10px 15px;
	text-align: center;
	color: #000000;
}

/*
coupon-search-bar
*/
.coupon-search-bar{ margin: 15px 0;}
.coupon-search-bar .form{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.coupon-search-bar .form .frm-inp{
	width: calc(100% - 90px);
	padding-right: 15px;
}
.coupon-search-bar .form .frm-inp .form-control{
	height: 38px;
	border-radius: 5px;
}
.coupon-search-bar .form .frm-btn{
	width: 90px;
}
.coupon-search-bar .form .frm-btn .btn{
	width: 100%;
	height: 38px;
	border-radius: 5px;
}


/*
no-coupon
*/
.no-coupon{
	margin-top: 30px;
	text-align: center;
}
.no-coupon .img{
	width: 300px;
	height: auto;
	margin: auto;
}
.no-coupon .img img{ width: 100%;}
.no-coupon .text{
	font-size: 22px;
	line-height: 1.5;
	color:#767575;
	margin-top: 30px;
}

/*
coupon-list
*/
.coupon-list{ margin: 5px 0;}
.coupon-list li{ margin-bottom: 5px;}
.coupon-list li .invalid-feedback{ margin-top: 3px;}
.coupon-list .item{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}
.coupon-list .stub-coupon{
	display: inline-flex;
	-ms-flex: 0 0 130px;
    flex: 0 0 130px;
	width: 130px;
	height: 107px;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
	z-index: 2;
	position: relative;
	border-right: .12em dashed #fff;
}

.coupon-list .stub-coupon:before {
    content: '';
    position: absolute;
	/*
    top: 0;
    right: 0;
    border-top: 10px solid #ffffff;
    border-left: 10px solid transparent;
	width: 0;
	*/
	width: .9em;
    height: .9em;
    background: #fff;
    border-radius: 50%;
	right: -.5em;
	top: -.4em;
}
.coupon-list .stub-coupon:after {
    content: '';
    position: absolute;
	/*
    bottom: 0;
    right: 0;
    border-bottom: 10px solid #ffffff;
    border-left: 10px solid transparent;
    width: 0;
	*/
	width: .9em;
    height: .9em;
    background: #fff;
    border-radius: 50%;
	right: -.5em;
	bottom: -.4em;
}
body.bg-dark-cream .content-result .coupon-list .stub-coupon:before,
body.bg-dark-cream .content-result .coupon-list .stub-coupon:after{ background: #F4F2EF; border-bottom-color: #F4F2EF; }

.coupon-list .is-enabled .stub-coupon{ background: #E2B267; }
.coupon-list .is-enabled.shipping-discount .stub-coupon{ background:#4B4B4B; }
.coupon-list .is-enabled.percentage-discount .stub-coupon{ background: #E26775; }
.coupon-list .is-enabled.ebook-discount .stub-coupon{ background: #2AAF5C; }
.coupon-list .is-enabled.fiction-discount .stub-coupon{ background: #FCA721; }
.coupon-list .is-enabled.diamond-discount .stub-coupon{ background: #D60E0E; }
.coupon-list .is-enabled.pig-discount .stub-coupon{ background: #AEAEAE; }
.coupon-list .is-disabled .stub-coupon{ background: #E4D5BE; }

/*
.coupon-list .is-enabled .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg.svg'); }
.coupon-list .is-enabled.shipping-discount .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-8.svg'); }
.coupon-list .is-enabled.percentage-discount .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-1.svg'); }
.coupon-list .is-enabled.ebook-discount .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-4.svg'); }
.coupon-list .is-enabled.fiction-discount .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-7.svg'); }
.coupon-list .is-enabled.diamond-discount .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-3.svg'); }
.coupon-list .is-enabled.pig-discount .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-5.svg'); }
.coupon-list .is-disabled .stub-coupon{ background: url('../images/coupon/img/coupon-tags-bg-2.svg'); }
*/

.coupon-list .stub-coupon .ico{
	position: relative;
	width: 70%;
	margin: auto;
	overflow: hidden;
}
.coupon-list .stub-coupon .ico img{
	width: 100%;
	height: auto;
}

.coupon-list .body-coupon{
	width: calc(100% - 140px);
	height: 107px;
	margin-left: 0;
	padding: 8px 8px 8px 25px;
	font-size: 14px;
	color: #656565;
	background: #fff2dd;
	border-radius: 0;
	border-left: none;
	z-index: 1;

	position: relative;
}
/*
.coupon-list .body-coupon:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 10px solid #ffffff;
    border-right: 10px solid transparent;
    width: 0;
}
.coupon-list .body-coupon:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 10px solid #ffffff;
    border-right: 10px solid transparent;
    width: 0;
}
*/
body.bg-dark-cream .content-result .coupon-list .body-coupon{ background: #ffffff;}
body.bg-dark-cream .content-result .coupon-list .body-coupon:before{ border-top-color: #F4F2EF; }
body.bg-dark-cream .content-result .coupon-list .body-coupon:after{ border-bottom-color: #F4F2EF; }


.coupon-list .body-coupon .coupon-row{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.coupon-list .body-coupon .coupon-row .col-left{ width: calc(100% - 120px);}
.coupon-list .body-coupon .coupon-row .col-right{
	width: 120px;
	position: relative;
}
.coupon-list .body-coupon .title{
	font-family: 'PromptMedium';
	font-size: 18px;
	margin-bottom: 5px;
}
.coupon-list .body-coupon .desc{
	font-size: 13px;
}
.coupon-list .body-coupon .progress-bar{
	width: 100%;
	height: 6px;
	background: #EBEBEB;
	border: none;
	border-radius: 5px;
	margin: 5px 0;
}
.coupon-list .body-coupon .progress-bar .percent{
	height: 6px;
	background: #E85D1F;
	border: none;
	border-radius: 5px;
}
.coupon-list .body-coupon .stat{ font-size: 13px; }
.coupon-list .body-coupon .chk{
	width: 50px;
	height: 54px;
	text-align: center;
	position: absolute;
	right: 0;
	bottom: 15px;
}

.coupon-list .is-disabled .title,
.coupon-list .is-disabled .desc,
.coupon-list .is-disabled .stat{ color: #BDBDBD;}
.coupon-list .is-disabled .progress-bar{ background: #EBEBEB;}
.coupon-list .is-disabled .progress-bar .percent{ background: #E8BBA7;}

.coupon-list .body-coupon .btn-zone{
	text-align: center;
	margin-top: 5%;
}
.coupon-list .body-coupon .btn-zone .btn{
	font-size: 16px;
	padding: 10px 20px;
	margin-bottom: 5px;
}

.coupon-list .condition-btn-mobile{
    display: none;
}

.coupon-list .is_soildout{
	width: 100px;
	margin: auto;
}
.coupon-list .is_soildout img{ width: 100%;}

.coupon-list .body-coupon .btn-zone-b{
	text-align: right;
	position: relative;
	overflow: hidden;
	padding-top: 40%;
	width: 100%;
	height: auto;
}
.coupon-list .body-coupon .btn-zone-b a{
	position: absolute;
	bottom: 0;
	right: 15px;
}

.coupon-cover .stub-coupon .ico{
	max-width: 70px;
	border: solid 2px #ffffff;
    border-radius: 5px;
}
@media (max-width: 480px){
	.coupon-cover .stub-coupon .ico{
		max-width: 55px;
	}
}

/*
coupon-list-col
*/
.coupon-list-col{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;

}
.coupon-list-col > li{
	flex: 0 0 50%;
	width: 50%;
	position: relative;
    padding-right: 10px;
    padding-left: 10px;
	margin-bottom: 15px;
}
.coupon-list-col .body-coupon .stat li:nth-child(1){
	padding-left: 8px;
}

.coupon-list-col .body-coupon .btn-zone {
    text-align: center;
    margin-top: calc(50% - 25px);
}
.coupon-list-col .body-coupon .coupon-row .col-left{ width: calc(100% - 80px);}
.coupon-list-col .body-coupon .coupon-row .col-right{
	width: 80px;
	position: relative;
}
.coupon-list-col .body-coupon .btn-zone .btn{
	font-size: 14px;
	padding: 5px 8px;
	margin-bottom: 5px;
	border-radius: 5px;
}

@media (max-width: 1199px){
	.coupon-list-col .stub-coupon{
		-ms-flex: 0 0 120px;
		flex: 0 0 120px;
		width: 120px;
		height: 102px;
		background-repeat: no-repeat;
		background-size: cover !important;
		background-position: right !important;
		vertical-align: middle;
	}
	.coupon-list-col .body-coupon{
		width: calc(100% - 120px);
		height: 102px;
	}
}
@media (max-width: 991px){
	.coupon-list-col .stub-coupon{
		-ms-flex: 0 0 100px;
		flex: 0 0 100px;
		width: 100px;
		height: 102px;
	}
	.coupon-list-col .body-coupon{
		padding-left: 20px;
		width: calc(100% - 100px);
		height: 102px;
	}
	.coupon-list-col .body-coupon .desc{
		line-height: 1.5;
	}
}
@media (max-width: 767px){
	.coupon-list-col .stub-coupon{
		-ms-flex: 0 0 80px;
		flex: 0 0 80px;
		width: 80px;
		height: 102px;
	}
	.coupon-list-col .body-coupon{
		width: calc(100% - 80px);
		height: 102px;
	}
}
@media (max-width: 679px){
	.coupon-list-col > li{
		flex: 0 0 100%;
		width: 100%;
		position: relative;
		padding-right: 10px;
		padding-left: 10px;
		margin-bottom: 15px;
	}
}


/* PAGES */
#coupon-pages .banner{ margin: 0 0 20px 0;}
#coupon-pages .tab-coupon{
	background: #ffffff;
	border-radius: 6px;
	padding: 10px 0px 0 0px;
	margin-bottom: 15px;
	text-align: left;
}
#coupon-pages .tab-coupon li{ padding: 0;}
#coupon-pages .tab-coupon li a{
	padding: 3px 15px;
	margin: 0;
}

#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-left{
	width: calc(100% - 200px);
}
#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right{
	width: 200px;
	position: relative;
}
#coupon-pages .coupon-list.in .body-coupon .progress-bar{ max-width: 150px;}
#coupon-pages .coupon-list.in .body-coupon .stat{ clear: both;}
#coupon-pages .coupon-list .condition-btn-mobile{ display: none;}


/* MODAL COUPON */
.modal-coupon .coupon-topbar{ display: none; }
.modal-coupon .coupon-frm{ margin-top: 30px;}
.modal-coupon .coupon-frm .form-inline-coupon .form-control{
	border-radius: 7px;
	height: 42px;
	width: 100%;
	border-color: #D5D5D5;
}
.modal-coupon .coupon-frm .form-inline-coupon .form-group{ width: calc(100% - 94px); }
.modal-coupon .coupon-frm .form-inline-coupon .btn{
	font-size: 16px;
	width: 86px;
	height: 42px;
}
.modal-coupon .invalid-feedback{
	font-size: 12px;
	color: #E85D1F;
}

/*
*/
.modal-coupon-cross{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 15px;
}
.modal-coupon-cross .modal-header .close{
	top: 22px;
	right: 2px;
	box-shadow: none;
}
.modal-coupon-cross .modal-header .close .icon-svg{
	width: 14px;
	height: 14px;
}
.modal-coupon-cross .modal-body{
	padding-bottom: 30px;
}



/* COUPON PAGES MODAL */
.coupon-pages-modal .coupon-pages-modal-zone{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #9B9B9B;
	z-index: 10;
	display: flex;
}
.coupon-pages-modal .cpm-body{
	position: relative;
	width: 360px;
	height: auto;
	margin: auto;
}
.coupon-pages-modal .cpm-body .close{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 2px;
	right: 2px;
	background: #ffffff;
	color: #000000;
	opacity: 1;
	border-radius: 100%;
	line-height: 26px;
	padding: 0;
	z-index: 4;
}
.coupon-pages-modal .cpm-body .close .icon-svg{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: -2px;
}
.coupon-pages-modal .cpm-body .cpm-content{
	font-family: 'Noto Sans Thai', sans-serif;
	position: relative;
	width: 100%;
	height: auto;
	background: #ffffff;
	border-radius: 10px;
	padding: 30px 15px;
	z-index: 3;
}

/*
coupon modal option
*/
.cpm-option .headline{
	text-align: center;
	color: #404040;
}
.cpm-option .headline h3{
	margin: 10px 0;
	font-weight: 600;
	line-height: 1.4;
	font-size: 28px;
}
.cpm-option .text-buynow{
	text-align: center;
	font-weight: 600;
}
.cpm-option .zone-btn{
	margin: auto;
	width: 230px;
}
.cpm-option .zone-btn > li{ margin-bottom: 15px; }
.cpm-option .zone-btn > li:last-child{ margin-bottom: 0; }

.cpm-option .zone-btn .btn-inside{
	display: flex;
	justify-content: center;
}
.cpm-option .zone-btn .btn-inside span:nth-child(1){ width: 30px; }
.cpm-option .zone-btn .btn-inside span:nth-child(1) img{ width: 100%;}
.cpm-option .zone-btn .btn-inside span:nth-child(2){ padding-left: 8px;}

.cpm-option .zone-btn .btn-inside-2{
	display: flex;
	justify-content: center;
}
.cpm-option .zone-btn .btn-inside-2 span:nth-child(1){ padding-right: 8px; }
.cpm-option .zone-btn .btn-inside-2 span:nth-child(2){ width: 30px; }
.cpm-option .zone-btn .btn-inside-2 span:nth-child(2) img{ width: 100%;}
.cpm-option .zone-btn .btn-inside-2 span:nth-child(3){ padding-left: 8px;}

.cpm-option .zone-btn .line-center span{
    margin:0;
	padding:0 10px;
    background:#fff;
    display:inline-block;
	color: #B5B5B5;
}
.cpm-option .zone-btn .line-center{
	text-align:center;
    position:relative;
    z-index:2;
}
.cpm-option .zone-btn .line-center:after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:solid 1px #D3D3D3;
    z-index:-1;
}

.cpm-option .balance{
	text-align: center;
	margin: 15px 0;
}
.cpm-option .balance .balance-text{
	font-size: 19px;
	font-weight: 500;
	color: #919191;
	margin-bottom: 5px;
}
.cpm-option .balance .balance-item{
	display: flex;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
}
.cpm-option .balance .balance-item .img{
	width: 26px;
	margin-right: 5px;
}
.cpm-option .balance .balance-item .img img{ width: 100%;}


/* cpm-body-s1 */
.modal-coupon-cross .cpm-body-s1{ width: 360px; }
.modal-coupon-cross .cpm-body-s1 .modal-content{
	min-height: 200px;
	box-shadow: none;
	z-index: 2;
}

.modal-coupon-cross .cpm-body-s1 .mascot,
.coupon-pages-modal .cpm-body-s1 .mascot{
	position: absolute;
	width: 116px;
	left: -104px;
	top: 0;
	z-index: 2;
}
.coupon-pages-modal .cpm-body-s1 .mascot img{ width: 100%;}
.coupon-pages-modal .cpm-body-s1 .cpm-content{
	min-height: 200px;
}

/* cpm-body-s2 */
.modal-coupon-cross .cpm-body-s2{ width: 360px; }
.modal-coupon-cross .cpm-body-s2 .modal-content{
	/*padding-bottom: 118px;*/
	box-shadow: none;
}
.modal-coupon-cross .cpm-body-s2 .mascot,
.coupon-pages-modal .cpm-body-s2 .mascot{
	position: relative;
	width: 300px;
	left: 0;
	right: 0;
	margin: 15px auto 0 auto;
	z-index: 5;
}
/*
.coupon-pages-modal .cpm-body-s2 .cpm-content{
	padding-bottom: 138px;
}
*/

/* isapp */
.coupon-pages-modal .coupon-pages-modal-zone.isapp{
	display: block;
}
.coupon-pages-modal .coupon-pages-modal-zone.isapp .cpm-body{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #ffffff;
	padding-top: 60px;
}
.coupon-pages-modal .coupon-pages-modal-zone.isapp .cpm-body .cpm-content{
	background: none;
	border-radius: 0;
}
.coupon-pages-modal .coupon-pages-modal-zone.isapp .cpm-body-s1 .mascot{ display: none;}
.coupon-pages-modal .coupon-pages-modal-zone.isapp .cpm-body-s2.cpm-content{
	padding-bottom: 30px;
}
.coupon-pages-modal .coupon-pages-modal-zone .cpm-body-s2 .headline h3{
	font-size: 28px;
}



/* MODAL COUPON DESC */
.modal-coupon-desc .modal-body{
	margin-top: -50px;
	margin-left: -30px;
	margin-right: -30px;
}
.modal-coupon-desc .close{ z-index: 15;}
.modal-coupon-desc .coupon-desc{
	padding: 15px;
	background: #F2E4D8;
}
.modal-coupon-desc .coupon-desc .item{
	-webkit-box-shadow: 6px 7px 2px 0px rgba(247,218,191,1);
-moz-box-shadow: 6px 7px 2px 0px rgba(247,218,191,1);
box-shadow: 6px 7px 2px 0px rgba(247,218,191,1);
}
.modal-coupon-desc .coupon-desc .coupon-list .body-coupon{ background: #ffffff;}
.modal-coupon-desc .coupon-desc .coupon-list .body-coupon .col-left{ width: 100%;}
.modal-coupon-desc .coupon-desc .progress-bar{
	display: block;
	width: 180px;
	max-width: 100%;
}
.modal-coupon-desc .coupon-desc .stat{
	position: relative;
	display: block;
 	width: 100%;
	clear: both;
}
.modal-coupon-desc .detail{
	padding-left: 20px;
	padding-right: 20px;
	font-size: 14px;
	color: #656565;
}
.modal-coupon-desc .detail h4{
	font-family: 'PromptMedium';
	font-size: 18px;
	margin-bottom: 0px;
}
.modal-coupon-desc .detail li{ margin: 15px 0;}

/*
coupon-step-modal-story-list
*/
.coupon-step-modal-story-list .header-title-story{
	text-align: center;
	font-size: 20px;
	font-weight: 500;
}
.coupon-step-modal-story-list .modal-body{
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 15px;
	min-height: 200px;
}
.coupon-step-modal-story-list .story-bar{
	margin-top: 15px;
	padding: 0 15px;
	font-size: 16px;
	font-weight: 500;
}
.coupon-step-modal-story-list .story-bar .story-bar-in{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.coupon-step-modal-story-list .story-bar .btn{
	font-size: 16px;
	font-weight: 500;
}
.coupon-step-modal-story-list .story-list{
	max-height: 400px;
	overflow-x: scroll;
}
.coupon-step-modal-story-list .story-list::-webkit-scrollbar{ display: none;}
.coupon-step-modal-story-list .story-list > ul > li{
	padding:10px 15px;
}
.coupon-step-modal-story-list .story-list > ul > li:hover,
.coupon-step-modal-story-list .story-list > ul > li.is_reading{
	background: #F4F4F4;
}
.coupon-step-modal-story-list .story-list > ul > li .story-list-item{
	display: flex;
	align-items: center;
	color: #404040;
}
.coupon-step-modal-story-list .story-list-item .num{
	width: 50px;
	color: #E5A56B;
	overflow: hidden;
	text-overflow: ellipsis;
}
.coupon-step-modal-story-list .story-list-item .price{
	width: 120px;
	display: flex;
	align-items: center;
	justify-content: end;
}
.coupon-step-modal-story-list .story-list-item .price .priceicon{
	width: 20px;
	height: 20px;
	background-size: cover;
}
.coupon-step-modal-story-list .story-list-item .price .priceicon.gem{
	background: url('../images/icon/svg/icon_gem0.svg') no-repeat;
}
.coupon-step-modal-story-list .story-list-item .price .priceicon.pig{
	background: url('../images/icon/svg/icon_pig0.svg') no-repeat;
}
.coupon-step-modal-story-list .story-list-item .price div:nth-child(2),
.coupon-step-modal-story-list .story-list-item .price div:nth-child(4){
	width: 40px;
	padding-left: 3px;
}
.coupon-step-modal-story-list .story-list-item .name{
	width: calc(100% - 170px);
	font-weight: 500;
}
.coupon-step-modal-story-list .story-list > ul > li.is_reading .price{ color: #AA5508; }
.coupon-step-modal-story-list .story-list > ul > li.is_readed .name{ color: #B1B1B1;}
.coupon-step-modal-story-list .story-list > ul > li.is_readed .price{
	display: none;
}

@media (max-width: 767px){
	/* PAGES */
	.coupon-pages-wapper{
		padding-left: 20px;
		padding-right: 20px;
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-left{
		width: calc(100% - 120px);
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right{
		width: 120px;
		position: relative;
	}

	/* MODAL COUPON */
	.modal-coupon .modal-dialog{
		margin: 0;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.modal-coupon .modal-content{
		border: none;
		border-radius: 0;
		height: 100%;
		overflow: hidden;
	}
	.modal-coupon .modal-header{
		position: fixed;
		width: 100%;
		height: 59px;
		padding: 0;
		top: 0;
		left: 0;
		background: #ffffff;
		z-index: 50;

		-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
		-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
		box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	}
	.modal-coupon .modal-header .close{ display: none;}
	.modal-coupon .coupon-topbar{ display: flex; }

	.modal-coupon .modal-body{
		padding-top: 59px;
		padding-left: 0;
		padding-right: 0;
	}
	.modal-coupon .modal-body .text-title{ display: none;}
	.modal-coupon .coupon-list-zone{
		overflow: scroll;
		height: calc(100vh - 225px);
	}
	.modal-coupon .coupon-list-zone::-webkit-scrollbar{ display: none;}


	.modal-coupon .coupon-frm .form-inline-coupon{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.modal-coupon .coupon-frm .form-inline-coupon .form-group{
		width: calc(100% - 94px);
		padding-right: 5px;
	}

	.modal-coupon .btn-zone{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 15px;
		background: #C6C6C6;
	}
	.modal-coupon .btn-zone .btn{
		background: #4B4B4B;
		border-color: #4B4B4B;
	}

	/*
	*/
	.modal-coupon-cross .modal-body{
		padding-top: 30px;
		margin-top: 59px;
	}
	.modal-coupon-cross .coupon-mobile-footerbar{ display: flex; }

	/*
	coupon-step-modal-story-list
	*/
	.coupon-step-modal-story-list .modal-header{ box-shadow: none;}
	.coupon-step-modal-story-list .coupon-topbar .title.story{ text-align: center; }
	.coupon-step-modal-story-list .header-title-story{ display: none;}
	.coupon-step-modal-story-list .modal-body{
		padding: 0;
		height: calc(100% - 80px);
		overflow: hidden;
	}
	.coupon-step-modal-story-list .story-bar{
		margin: 0;
		padding-top: 5px;
		padding-bottom: 10px;
		-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
		-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
		box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	}
	.coupon-step-modal-story-list .story-list{
		position: absolute;
		width: 100%;
		height: calc(100% - 50px);
		max-height: 100%;
		padding-top: 15px;
	}
	
}

@media (max-width: 680px){

	/* COUPON PAGES MODAL */
	.coupon-pages-modal .coupon-mobile-topbar{ display: block; }
	.coupon-pages-modal .coupon-mobile-footerbar{ display: flex; }

	.coupon-pages-modal .coupon-pages-modal-zone{
		display: block;
	}
	.coupon-pages-modal .coupon-pages-modal-zone .cpm-body{
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
		padding-top: 60px;
	}
	.coupon-pages-modal .coupon-pages-modal-zone .cpm-body .cpm-content{
		background: none;
		border-radius: 0;
	}
	.coupon-pages-modal .coupon-pages-modal-zone .cpm-body-s1 .mascot{ display: none;}
	.coupon-pages-modal .cpm-body .close{ display: none;}

	.coupon-pages-modal .coupon-pages-modal-zone .cpm-body-s2 .mascot{
		width: 100%;
		max-width: 300px;
	}
	.coupon-pages-modal .coupon-pages-modal-zone .cpm-body-s2 .mascot img{ width: 100%;}
	.coupon-pages-modal .coupon-pages-modal-zone .cpm-body-s2.cpm-content{
		padding-bottom: 30px;
	}
}

@media (max-width: 640px){
	/* MODAL COUPON */
	.modal-coupon .coupon-list .body-coupon .coupon-row .col-left{
		width: calc(100% - 70px);
	}
	.modal-coupon .coupon-list .body-coupon .coupon-row .col-right{
		width: 70px;
		position: relative;
	}
	.modal-coupon .coupon-list .body-coupon .coupon-row .col-right .is_soildout{ width: 100%;}
}

@media (max-width: 570px){
	/* page */
	#coupon-pages .coupon-list .stub-coupon {
		display: inline-flex;
		-ms-flex: 0 0 90px;
		flex: 0 0 90px;
		width: 90px;
		background-repeat: no-repeat;
		background-size: cover !important;
		vertical-align: middle;
		z-index: 2;
	}
	#coupon-pages .coupon-list .body-coupon {
		width: calc(100% - 80px);
	}

	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-left {
		width: calc(100% - 90px);
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right {
		width: 90px;
		position: relative;
	}
	#coupon-pages .coupon-list .body-coupon .btn-zone .btn{
		font-size: 16px;
		padding: 8px 10px;
		margin-bottom: 5px;
	}
	.coupon-list .is_soildout {
		width: 100%;
	}

	/*
	#coupon-pages .coupon-list .stub-coupon{ display: none; }
	#coupon-pages .coupon-list .body-coupon{
		width: 100%;
		min-height: 107px;
		height: auto;
		margin-left: 0;
		border-radius: 6px;
		padding: 8px 15px;
	}
	#coupon-pages .tab-coupon li a{ font-size: 16px; }
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-left {
		width: 100%;
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right{ width: 100%; }
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right .btn{ width: 100%; }
	*/
	.coupon-list .body-coupon .btn-zone-b {
		text-align: right;
		position: relative;
		overflow: hidden;
		padding-top: 60%;
		width: 100%;
		height: auto;
	}
	

	/* MODAL COUPON DESC */
	/*
	.modal-coupon-desc .coupon-desc .stub-coupon{ display: none; }
	.modal-coupon-desc .coupon-desc .body-coupon{
		width: 100%;
		margin-left:0px;
		border-radius: 6px;
	}
	.modal-coupon-desc .coupon-desc .body-coupon .coupon-row .col-left {
		width: 100%;
	}
	*/
	.modal-coupon-desc .coupon-desc .stub-coupon{
		display: inline-flex;
		-ms-flex: 0 0 90px;
		flex: 0 0 90px;
		width: 90px;
		background-repeat: no-repeat;
		background-size: cover !important;
		vertical-align: middle;
	}
	.modal-coupon-desc .coupon-desc .body-coupon {
		width: calc(100% - 80px);
	}

	/* MODAL COUPON */
	/*
	.modal-coupon .stub-coupon{ display: none; }
	.modal-coupon .body-coupon{
		width: 100%;
		margin-left:0px;
		border-radius: 6px;
		border: solid 1px #E6E6E6;
		height: auto;
	}
	*/
	.modal-coupon .stub-coupon{
		-ms-flex: 0 0 90px;
		flex: 0 0 90px;
		width: 90px;
		background-repeat: no-repeat;
		background-size: cover !important;
		vertical-align: middle;
	}
	.modal-coupon .body-coupon{
		width: calc(100% - 80px);
	}


}

@media (max-width: 480px){
	#coupon-pages .coupon-list .item{
		display: table;
		width: 100%;
	}
	#coupon-pages .coupon-list .stub-coupon {
		display: table-cell;
		width: 70px;
		height: auto;
	}
	.coupon-list .stub-coupon .ico {
		width: 80%;
		margin: auto;
	}

	.coupon-list .is-enabled .stub-coupon{ background: #e2b267; }
	.coupon-list .is-enabled.shipping-discount .stub-coupon{ background: #4b4b4b; }
	.coupon-list .is-enabled.percentage-discount .stub-coupon{ background: #e26775; }
	.coupon-list .is-enabled.ebook-discount .stub-coupon{ background: #2aaf5b; }
	.coupon-list .is-enabled.fiction-discount .stub-coupon{ background: #fca721; }
	.coupon-list .is-enabled.diamond-discount .stub-coupon{ background: #d60f0e; }
	.coupon-list .is-enabled.pig-discount .stub-coupon{ background: #afafaf; }
	.coupon-list .is-disabled .stub-coupon{ background: #e4d5be; }

	#coupon-pages .coupon-list .body-coupon {
		display: table-cell;
		width: calc(100% - 70px);
		height: auto;
		padding-left: 15px;
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-left {
		width: 100%;
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right{ width: 100%; }
	#coupon-pages .coupon-list.in .body-coupon .btn-zone {
		margin-top: 0;
	}
	#coupon-pages .coupon-list .condition-btn-desktop{ display: none;}
	#coupon-pages .coupon-list .condition-btn-mobile{
		display: inline-block;
		margin-right: 15px;
	}
	#coupon-pages .coupon-list.in .body-coupon .coupon-row .col-right .btn{ width: auto; }

	.coupon-list .is_soildout {
		width: 100px;
	}

	/* my-coupon */
	#coupon-pages .coupon-list.in.my-coupon .body-coupon .coupon-row .col-right .btn-zone-b{
		padding: 0;
		text-align: center;
	}
	#coupon-pages .coupon-list.in.my-coupon .body-coupon .coupon-row .col-right .btn-zone-b a{
		position: relative;
		left: 0;
		right: 0;
	}

	/* MODAL COUPON DESC */
	.modal-coupon-desc .coupon-desc .item{
		display: table;
		width: 100%;
	}
	.modal-coupon-desc .coupon-desc .stub-coupon{
		display: table-cell;
		width: 70px;
	}
	.modal-coupon-desc .coupon-desc .body-coupon {
		display: table-cell;
		width: calc(100% - 60px);
		padding-left: 15px;
	}

	/* MODAL COUPON */
	.modal-coupon .coupon-list .item{
		display: table;
		width: 100%;
	}
	.modal-coupon .coupon-list .stub-coupon{
		display: table-cell;
		width: 70px;
	}
	.modal-coupon .coupon-list .body-coupon{
		display: table-cell;
		width: calc(100% - 70px);
		padding-left: 15px;
	}
	.modal-coupon .coupon-list .body-coupon .chk {
		width: 50px;
		height: 54px;
		text-align: center;
		position: absolute;
		right: 0;
		bottom: calc(50% - 29px);
	}

}

/*##################################################
	coupon-how-to-use
##################################################*/
#coupon-how-to-use .desktop{
	max-width: 800px;
	margin: auto;
}
#coupon-how-to-use .desktop img{ width: 100%;}
#coupon-how-to-use .footer-btn-zone{
	margin-top: 30px;
	margin-bottom: 15px;
}
#coupon-how-to-use .footer-btn-zone .btn{
	font-size: 16px;
	padding: 13px 25px;
}



#coupon-how-to-use .mobile{ display: none;}
@media (max-width: 600px){
	#coupon-how-to-use .desktop{ display: none;}
	#coupon-how-to-use .mobile{ display: block;}
	#coupon-how-to-use .mobile > div{ margin-bottom: 15px;}
	#coupon-how-to-use .mobile img{ width: 100%;}

	#coupon-how-to-use .footer-btn-zone{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #E5A56B;
		z-index: 1200;
		left: 0;
		margin-bottom: 0;
		padding: 12px;
	}
	#coupon-how-to-use .footer-btn-zone .btn{
		font-size: 14px;
		padding: 6px 10px;
		background: #5F5D59;
		border-color: #5F5D59;
	}
	
}


/*###########################################
 	BOOK RENT
###########################################*/
/*
book-rent-rate
*/
.book-rent-step-rate{
	width: 100%;
	margin: auto;
}
.book-rent-step-rate .my-total{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-size: 16px;
}
.book-rent-step-rate .my-total > div{
	border: solid 1px #D1D1D1;
	border-radius: 60px;
	width: auto;
	margin: auto;

	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 15px;
}
.book-rent-step-rate .my-total > div div:nth-child(2){
	margin-left: 5px;
	margin-right: 5px;
}
.book-rent-step-rate .my-total > div div:nth-child(2) img{ width: 30px;}
.book-rent-step-rate .my-total > div div:nth-child(3){ color: #E05E59;}

.book-rent-step-rate .detail{
	display: flex;
	justify-content: center;
	margin: 15px 0;
}
.book-rent-step-rate .detail .book-info{
	flex: 0 0 150px;
	width: 150px;
}
.book-rent-step-rate .detail .book-info .book-cover{
    width: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.book-rent-step-rate .detail .book-info .book-cover img{ width: 100%;}
.book-rent-step-rate .detail .book-info .desc .name{
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 5px;
}
.book-rent-step-rate .detail .book-info .desc .writer{
	font-size: 12px;
	line-height: 1.2;
	font-weight: 500;
	color: #B1B1B1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.book-rent-step-rate .detail .rate-option{
	flex: 0 0 350px;
	width: 350px;
	padding-left: 15px;
}
.book-rent-step-rate .detail .rate-option .list-select-price{
	margin-bottom: 0;
}
.book-rent-step-rate .detail .rate-option .list-select-price li{
	margin: 5px 0;
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
.book-rent-step-rate .detail .rate-option .list-select-price li input[type="radio"] {
	display: none;
}
.book-rent-step-rate .detail .rate-option .list-select-price li label{
	width: 100%;
	position: relative;
	color: #585655;
	cursor: pointer;
	display: block;
	align-items: center;
	gap: 0.8em;
	border: 1px solid #E5E2E2;
	padding: 10px 10px 10px 50px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
}
.book-rent-step-rate .detail .rate-option .list-select-price li label:before {
	display: none;
}
.book-rent-step-rate .detail .rate-option .list-select-price li input[type="radio"]:checked + label:before {
	font-family: "FontAwesome";
	content: "\f00c";
	display: block;
	position: absolute;
	left: 15px;
	top: 10px;
	border-radius: 50%;
	height: 25px;
	width: 25px;
	background: #E5A56B;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
}
.book-rent-step-rate .detail .rate-option .list-select-price li  input[type="radio"]:checked + label {
	background: #F8F3EC;
}

@media (max-width: 575px){
	.book-rent-step-rate{
		width: 100%;
		max-width: 400px;
		margin: auto;
		padding: 0 15px;
	}
	.book-rent-step-rate .detail{
		display: block;
		margin: 15px 0;
	}
	.book-rent-step-rate .detail .book-info{
		flex: 0 0 100%;
		width: 100%;
		display: flex;
		align-items: center;
		background: #F8F8F8;
		padding: 10px;
		border-radius: 10px;
	}
	.book-rent-step-rate .detail .book-info .book-cover{
		flex: 0 0 40px;
		width: 40px;
		border-radius: 0;
	}
	.book-rent-step-rate .detail .book-info .book-cover img{ width: 100%;}
	.book-rent-step-rate .detail .book-info .desc{
		flex: 0 0 calc(100% - 40px);
		width: calc(100% - 40px);
		padding-left: 10px;
		padding-right: 10px;
	}
	.book-rent-step-rate .detail .book-info .desc .name{
		font-size: 18px;
		font-weight: 600;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.book-rent-step-rate .detail .book-info .desc .writer{
		font-size: 12px;
		font-weight: 500;
		color: #B1B1B1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.book-rent-step-rate .detail .rate-option{
		flex: 0 0 100%;
		width: 100%;
		padding-left: 0;
	}

}

/*
book-rent-step-alert
*/
.book-rent-step-alert{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}
.book-rent-step-alert .top-mascot{
	flex: 0 0 350px;
	width: 350px;
}
.book-rent-step-alert .top-mascot img{ width: 100%;}
.book-rent-step-alert .detail{
	flex: 0 0 300px;
	width: 300px;
	margin-left: 15px;
}
.book-rent-step-alert .footer-mascot{
	display: none;
}
.book-rent-step-alert .footer-mascot img{
	width: 100%;
}


/* balance */
.book-rent-step-alert .detail .balance{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 15px 0;
}
.book-rent-step-alert .detail .balance .balance-text{
	font-size: 19px;
	font-weight: 500;
	color: #171717;
	padding-right: 10px;
}
.book-rent-step-alert .detail .balance .balance-item{
	display: flex;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
	color: #E05E59;
}
.book-rent-step-alert .detail .balance .balance-item .img{
	width: 26px;
	margin-right: 5px;
}
.book-rent-step-alert .detail .balance .balance-item .img img{ width: 100%;}

.book-rent-step-alert .detail .btn-zone{
	max-width: 250px;
	margin: auto;
}

@media (max-width: 767px){
	.book-rent-step-alert{
		display: block;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.book-rent-step-alert .top-mascot{
		flex: 0 0  100%;
		width:  100%;
	}
	.book-rent-step-alert .top-mascot-hide{ display: none;}
	.book-rent-step-alert .footer-mascot{
		display: block;
		margin-top: 20px;
	}
	.book-rent-step-alert .detail{
		flex: 0 0 100%;
		width: 100%;
		margin: auto;
	}

}



/*#####################################
	search-list
#####################################*/
@media (max-width: 991px){
	.search-list .book-item-type2-b{
		min-height: 170px;
	}
}