@font-face{
	font-family:'regular';
	src: url('../styles_fonts/regular.ttf');
}
@font-face{
	font-family:'bold';
	src: url('../styles_fonts/bold.ttf');
}
@font-face{
	font-family:'novel';
	src: url('../styles_fonts/novel.otf');
}
@font-face{
	font-family:'script';
	src: url('../styles_fonts/script.ttf');
}

*{margin: 0px auto; padding: 0px;}
body{font-family: 'regular', verdana; font-size: 14px; color: var(--text_basic); background: var(--bg_base);}
a{color: var(--text_blue); text-decoration: none;}
a.ablack{color: var(--text_black); transition: all 0.2s ease;}
a.ablack:hover{color: var(--text_blue);}
.table{border-collapse: collapse; width: 100%; table-layout: fixed;}
.table th, .table td{text-align: left; padding: 10px;}
.table th{background-color: var(--bg_blue); color: var(--text_white);}
.table tr > th:first-child{border-radius: 10px 0px 0px 10px;}
.table tr > th:last-child{border-radius: 0px 10px 10px 0px;}
.table td img{width: 100%;}
.bold{font-family: 'bold';}

::-webkit-scrollbar {width: 5px; height: 5px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #cacaca;}
::-webkit-scrollbar-thumb:hover {background: #9d9d9d;}

div{word-wrap: break-word;}
[contenteditable=true]:empty:before{content: attr(placeholder); display: block; color: var(--text_silver); cursor: text;}
[setplaceholder=true]:empty:before{content: attr(placeholder); display: block; color: var(--text_silver); cursor: text;}
input.input_warning, textarea.input_warning{border: 1px solid red; box-shadow: 0px 0px 5px red;}
.input{padding: 10px; width: 100%; border-radius: 10px; border: 1.5px solid var(--bg_line); transition: var(--transition); outline: none; background: var(--bg_white); box-sizing: border-box;}
.input:not(textarea){border-radius: 50px;}
.input:hover, .input:focus{border: 1.5px solid var(--bg_blue);}
.input:disabled{background: var(--bg_silvercalm);}
textarea{font-family: 'regular'; resize: vertical;}
textarea.autogrow{overflow: hidden;}

.btn{padding: 7px 15px 7px 15px; border: 0px; position: relative; background: transparent; cursor: pointer; overflow: hidden; display: inline-block; border-radius: 50px; background: var(--bg_white); text-decoration: none; -webkit-tap-highlight-color: transparent; color: var(--text_white);}
.btn.full_btn{width: 100%;}
.btn.basic{background: var(--bg_blue);}
.btn.blue{background: var(--bg_bluedark);}
.btn.silver{background: var(--bg_silver);}
.btn.white{background: var(--bg_white); box-shadow: 0px 0px 0px 1px var(--bg_silver); color: var(--text_silver);}
.btn.whiteBlue{background: var(--bg_white); box-shadow: 0px 0px 0px 1px var(--bg_blue); color: var(--text_blue);}
.btn.orange{background: var(--bg_orange);}
.btn.red{background: var(--bg_red);}
.btn.green{background: var(--bg_green);}
.btn.yellow{background: #FFDF00; color: var(--text_black);}
.btn.transparent{background: transparent; color: var(--text_black); transition: var(--transition);}
.btn.transparent:hover{color: var(--text_blue); box-shadow: 0px 0px 0px 1px var(--bg_blue);}
.btn span.icon{float: left; width: 14px; height: 14px;}
.btn:focus {outline: -webkit-focus-ring-color auto 0px;}
.btn:disabled{background: #dfdfdf;}
.btn_effect{margin: -100px; width: 200px; height: 200px; border-radius: 100px; position: absolute; background: var(--bg_white); transform: scale(0); pointer-events: none; animation: clickeffect 1s ease; -webkit-animation: clickeffect 1s ease;}

.btnOpt{white-space: nowrap; width: 100%;}
.btnOpt > div{display: inline-block; cursor: pointer; padding: 3px 10px; background: var(--bg_silvercalm); border-radius: 5px;}
.btnOpt > div.blue{background: var(--bg_blue); color: var(--text_white);}
.btnOpt > div.red{background: var(--bg_red); color: var(--text_white);}
.btnOpt > div.green{background: var(--bg_green); color: var(--text_white);}
.btnOpt > div:not(:last-child){margin-right: 5px;}

.optionPath{display: grid; grid-gap: 15px;}
.optionPath.op2{grid-template-columns: 1fr 1fr;}
.optionPath > div{width: 100%;}

.button_group button{border: none; font-family: 'regular'; border-radius: 0px; background: var(--bg_silvercalm); padding: 8px 20px 10px 20px; float: left; outline: none; cursor: pointer;}
.button_group button:first-child{border-radius: 5px 0px 0px 5px;}
.button_group button:last-child{border-radius: 0px 5px 5px 0px;}
.button_group button:hover{box-shadow: inset 0px 0px 0px 1px var(--bg_blue); z-index: 2; position: relative;}
.button_group button:active{background: var(--bg_blue); color: var(--text_white);}
.button_group button span{margin-right: 7px;}
.button_group:after{content: ''; clear: both; display: table;}
.button_group button.active{background: var(--bg_blue); color: var(--text_white);}

.input_suggest{white-space: nowrap;}
.input_suggest > div{display: inline-block; padding: 3px 7px; margin-bottom: 5px; border-radius: 50px; background: var(--bg_bluecalm); color: var(--text_blue); border: 1px solid var(--bg_blue); font-size: 11px; font-weight: bold; cursor: pointer;}
.input_suggest > div:not(:last-child){margin-right: 5px;}

.option_bar{position: relative; overflow: auto; width: 100%;}
.option_hzl{display: table; width: 100%;}
.option_hzl > div{white-space: nowrap; font-size: 0px; float: left; background: var(--bg_silversoft); border-radius: 50px;}
.option_hzl > div > a{display: inline-block; font-size: 13px; cursor: pointer;}
.option_hzl > div > a > div{padding: 10px 15px; color: var(--text_silver);}
.option_hzl > div > a:first-child > div{border-radius: 50px 0px 0px 50px;}
.option_hzl > div > a:last-child > div{border-radius: 0px 50px 50px 0px;}
.option_hzl > div > a:hover > div{color: var(--text_blue);}
.option_hzl > div > a.active > div{background: var(--bg_blue); color: var(--text_white); border-radius: 50px;}

.checkbox input[type=checkbox]{display: none;}
.checkbox{line-height: 20px;}
.checkbox label{cursor: pointer;}
.checkbox label:before{display: inline-block; width: 20px; border-radius: 50%; margin-right: 5px; content: "\00a0"; text-align: center; background: #c9d1e9;}
.checkbox label:hover::before{box-shadow: inset 0px 0px 0px 2px #a3acc8;}
.checkbox input:checked ~ label:before{content: "\25EF"; background: #a3acc8; color: #fff;}
.checkbox input:disabled ~ label{color: #888;}
.checkbox input:disabled ~ label:before{background: #ccc;}

.description{line-height: 25px; font-size: 15px;}
.description img{margin: 5px auto; max-width: 100%;}
.description p{margin-bottom: 15px;}
.description p.aligncenter{text-align: center;}
.description p.alignright{text-align: right;}
.description pre{overflow: auto;}
.description img, .description iframe{margin: 10px auto;}
.description img{max-width: 100%; display: block;}
.description iframe{width: 100%; height: 400px;}
.description li{margin-left: 40px;}
.description h1{line-height: 40px;}
.description blockquote{padding: 10px 10px 11px 10px; border-left: 2px solid #DFDFE4;}

.tooltip_box{color: var(--text_white); background: var(--bg_black); box-shadow: 0 0 5px var(--bg_silver); position: absolute; z-index: 200; padding: 4px 7px 5px 7px;; text-align: left; border-radius: 5px; font-size: 11px;}
.tooltip_hide{display: none;}

.hover:hover, .hover_active{background: var(--bg_hover);}
.bg_white{background: var(--bg_white);}
.bg_new{background: var(--bg_new);}
.bg_silver{background-color: var(--bg_silver);}
.bg_silvercalm{background-color: var(--bg_silvercalm);}
.bg_blue{background-color: var(--bg_blue);}
.bg_bluedark{background-color: var(--bg_bluedark);}
.bg_red{background-color: var(--bg_red);}
.bg_yellow{background-color: var(--bg_yellow);}
.bg_yellowcalm{background-color: var(--bg_yellowcalm);}
.bg_orange{background-color: var(--bg_orange);}
.bg_facebook{background-color: rgb(75, 110, 188);}
.bg_twitter{background-color: rgb(93, 191, 244);}
.bg_novel{background-color: var(--bg_novel);}
.bg_comic{background-color: var(--bg_comic);}
.bg_scrpt{background-color: var(--bg_script);}
.bg_flash{background-color: var(--bg_flash);}
.bg_short{background-color: var(--bg_short);}
.bg_poetry{background-color: var(--bg_poetry);}
.bg_artwork{background-color: var(--bg_artwork);}
.bg_market{background-color: var(--bg_market);}
.bg_film{background-color: var(--bg_red);}

.text_white{color: var(--text_white);}
.text_silver{color: var(--text_silver);}
.text_blue{color: var(--text_blue);}
.text_black{color: var(--text_black);}
.text_red{color: var(--text_red);}

.fz_mini{font-size: 11px;}
.fz_normal{font-size: 13px;}
.fz_medium{font-size: 15px;}
.fz_big, h1{font-size: 20px;}

.pc{display: block;}
.mobile{display: none;}

.ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.border_shadow{box-shadow: 0px 0px 4px var(--shadow);}
.loading{width: 50px; height: 50px;}
.shake{animation: shake 0.5s; animation-iteration-count: infinite;}
.left{float: left;}
.right{float: right;}
.txtRight{text-align: right;}
.pointer{cursor: pointer;}
.bsfull{background-size: 100%; background-position: center;}
.bscover{background-size: cover; background-position: center;}
.imgfull img{max-width: 100%; display: block; margin: 0 auto;}
.line{height: 2px; background: #f6f6f6;}
.list10{margin: 10px 0px;}
.list{margin: 5px 0px;}
.list p{margin-bottom: 5px; font-weight: bold; color: var(--text_silver);}
.p15{padding: 15px;}
.p20{padding: 20px 20px 22px 20px;}
.p25{padding: 25px;}
.plr15{padding: 0px 15px}
.plr20{padding: 0px 20px 0px 20px;}
.ptb15{padding: 15px 0px}
.ptb25{padding: 25px 0px}
.pt25{padding-top: 25px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt35{margin-top: 35px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb35{margin-bottom: 35px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.br5{border-radius: 5px;}
.brt5{border-radius: 5px 5px 0px 0px;}
.brb5{border-radius: 0px 0px 5px 5px;}
.brl5{border-radius: 5px 0px 0px 5px;}
.brr5{border-radius: 0px 5px 5px 0px;}
.br10{border-radius: 10px;}
.ofh{overflow: hidden;}
.slow{-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease;}
.hidden{display: none;}
.opacity{opacity: 0;}
.clear{clear: both;}

.button-group{
	white-space: nowrap;
	overflow: auto;
	font-size: 0px;
}
.button-group a{
	
}
.button-group button{
	display: inline-block;
	font-size: 14px;
	border-radius: 0px;
}

.button-group a:first-child button{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.button-group a:last-child button{
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}