@charset "utf-8";

/* common.css */

.fa {
	vertical-align: baseline;
}

.dp_flex {
	display: flex;
}

.align-center {
	align-items: center;
}

.bor_gr {
	border: 1px solid #ccc;
}

.bor_gr2 {
	border: 1px solid #777;
}

.bg_arrow {
	/* background: url('../../img/common/arrow.png') no-repeat 96% center; */
}

.hr_text {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	font-size: 14px;
	margin: 8px 0px;
}

.hr_text::before {
	content: "";
	flex-grow: 1;
	margin: 0px 16px;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
}

.hr_text::after {
	content: "";
}

.hr_text.after::before {
	display:none;
}

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left,
.arrow-top,
.arrow-bottom,
.long-arrow-top,
.long-arrow-bottom {
	display: block;
	margin: 30px auto;
	width: 25px;
	height: 25px;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
}

.arrow-right,
.long-arrow-right {
	transform: rotate(135deg);
}

.arrow-left,
.long-arrow-left {
	transform: rotate(-45deg);
}

.arrow-top,
.long-arrow-top {
	transform: rotate(45deg);
}

.arrow-bottom,
.long-arrow-bottom {
	transform: rotate(225deg);
}

.long-arrow-right::after,
.long-arrow-left::after {
	content: "";
	display: block;
	width: 2px;
	height: 45px;
	background-color: black;
	transform: rotate(-45deg) translate(15px, 4px);
	left: 0;
	top: 0;
}

.triangle-left,
.triangle-right,
.triangle-top,
.triangle-bottom {
	width: 0;
	height: 0;
	margin: 30px auto;
}

.triangle-left,
.triangle-right {
	border-top:
		18px solid transparent;
	border-bottom:
		18px solid transparent;


}

.triangle-top,
.triangle-bottom {
	border-left:
		18px solid transparent;
	border-right:
		18px solid transparent;
}

.triangle-right {
	border-left:
		30px solid black;
}

.triangle-left {
	border-right:
		30px solid black;
}

.triangle-top {
	border-bottom:
		30px solid black;
}

.triangle-bottom {
	border-top:
		30px solid black;
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"] {
	/* box-sizing: border-box; */
	/*  -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;  */
	/* border: 1px solid #dddddd; */
	/* padding: 1rem; */
}

input[type="radio"] {
	vertical-align: middle;
}

input[type="checkbox"] {
	vertical-align: middle;
	/* width: auto !important; */
}

.select_outer {
	overflow: hidden;
	/* background: #fff url('../../img/icon/select_bg.png') no-repeat right center; */
	background-position-x: calc(100% - 6px);
}

.select_outer select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	width: 200%;
}

.select_outer select::-ms-expand {
	display: none;
}

select.custom {
	/* background: url('../../img/icon/select_bg.png') no-repeat 93% center #fff; */
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	/* background-position-x: calc(100% - 8px); */
	border: 1px solid #d3d6db;
	padding: 10px 50px 7px 10px;
}

select.custom::-ms-expand {
	display: none;
}

input[type="radio"].custom {
	/* background: url('../../img/icon/radio_bg.png') no-repeat left #fff; */
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	cursor: pointer;
}

input[type="radio"].custom:checked {
	/* background-image: url('../../img/icon/radio_bg_on.png'); */
}

input[type="radio"].custom::-ms-expand {
	display: none;
}

input[type="checkbox"].custom {
	/* background: url('../../img/icon/checkbox_bg.png') no-repeat left #fff; */
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	cursor: pointer;
}

input[type="checkbox"].custom:checked {
	/* background-image: url('../../img/icon/checkbox_bg_on.png'); */
}

input[type="checkbox"].custom::-ms-expand {
	display: none;
}

.relative {
	position: relative;
}

.h3 {
	font-size: 1.8em;
	margin: 4% 0;
	color: #0b3259;
	font-weight: bold;
}

.h4 {
	display: inline-block;
	margin: 20px auto;
	padding-top: 10px;
	/* background: url('../../img/icon/bu_h4_bar.gif') no-repeat top left; */
	font-weight: bold;
	font-size: 1.2em;
}

.h5 {
	display: inline-block;
	margin: 20px auto;
	padding-left: 20px;
	/* background: url('../../img/icon/bu_h5_dot.png') no-repeat left 8px; */
	font-weight: bold;
	font-size: 1.2em;
}

.h6 {
	display: inline-block;
	margin: 10px auto;
	padding-left: 20px;
	/* background: url('../../img/icon/bu_h5_dot.png') no-repeat left 6px; */
	font-weight: bold;
}

.ul3>li {
	float: left;
	width: 33.33%;
}

.ul3>li:nth-child(2) {
	width: 33.34%;
}

.ul4>li {
	float: left;
	width: 25%;
}

.ul5>li {
	float: left;
	width: 20%;
}

.ul6>li {
	float: left;
	width: 16.6%;
}

.ul6>li:first-child,
.ul6>li:last-child {
	width: 16.8%;
}

.ul7>li {
	float: left;
	width: 14.28%;
}

.ul7>li:first-child,
.ul7>li:last-child {
	width: 14.3%;
}

.ul8>li {
	float: left;
	width: 12.5%;
}


.ul2 li {
	float: left;
	width: 49%;
	margin-left: 2%;
}

.ul3_2>li {
	float: left;
	width: 31%;
	margin-left: 3.5%;
}

.ul4_2>li {
	float: left;
	width: 24%;
	margin-left: 1.33%;
}

.ul4_3>li {
	float: left;
	width: 24%;
	margin-left: 1.33%;
}

.ul2>li img,
.ul3_2>li img,
.ul4_2>li img,
.ul4_3>li img {
	width: 100%;
}

ul.small_dot li {
	padding-left: 12px;
	/* background: url('../../img/icon/bu_small_dot.png') no-repeat left 8px; */
	margin: 5px 0;
}

.pos_fixed {
	position: fixed !important;
	top: 0;
	background-color: #fff;
}

.clear_div {
	display: block;
	height: 0;
	clear: both;
	float: none;
	content: "";
}

.hide {
	display: none !important;
}

.m_auto {
	margin: auto;
}

.red {
	color: #e11837 !important;
}

.red2 {
	color: #bb2a41 !important;
}

.redbrown {
	color: #790307 !important;
}

.blue {
	color: #1d80c3 !important;
}

.darkblue {
	color: #064a97 !important;
}

.yellow {
	color: #fed207 !important;
}

.green {
	color: #21b973 !important;
}

.white {
	color: #fff !important;
}

.black {
	color: #000 !important;
}

.black2 {
	color: #191919 !important;
}

.gold {
	color: #b19f7c !important;
}

.orange {
	color: #e8641b !important;
}

.orange2 {
	color: #ff6000 !important;
}

.gray {
	color: #a5a5a5 !important;
}

.darkgray {
	color: #333 !important;
}

.lightgray {
	color: #edf1f3 !important;
}

.lightgray2 {
	color: #ebebeb !important;
}

.lightgray3 {
	color: #f7f7f7 !important;
}

.purple {
	color: #702c91 !important;
}

.bg_white {
	background-color: #fff !important;
}

.bg_red {
	background-color: #e11837 !important;
}

.bg_red2 {
	background-color: #bb2a41 !important;
}

.bg_redbrown {
	background-color: #790307 !important;
}

.bg_gray {
	background-color: #aaa !important;
}

.bg_darkgray {
	background-color: #5d5d5d !important;
}

.bg_lightgray {
	background-color: #edf1f3 !important;
}

.bg_lightgray2 {
	background-color: #ebebeb !important;
}

.bg_lightgray3 {
	background-color: #f7f7f7 !important;
}

.bg_mint {
	background-color: #00bbd6 !important;
}

.bg_blue {
	background-color: #0168b5 !important;
}

.bg_darkblue {
	background-color: #064a97 !important;
}

.bg_deepblue {
	background-color: #0b3259 !important;
}

.bg_lightblue {
	background-color: #7da1ca !important;
}

.bg_gold {
	background-color: #b19f7c !important;
}

.bg_purple {
	background-color: #702c91 !important;
}

.bg_brown {
	background-color: #694b3f !important;
}

.bg_green {
	background-color: #3d7640 !important;
}

.dp_block {
	display: block;
}

.dp_inblock {
	display: inline-block;
}

.dp_table {
	display: table;
}

.dp_tcell {
	display: table-cell;
}

.w_auto {
	width: auto;
}

.w_inh {
	width: inherit !important;
}

.h_inh {
	height: inherit !important;
}

.cursor {
	cursor: pointer;
}

.border0 {
	border: 0 !important;
}

.border1 {
	border: 1px solid #e8e8e8;
}

.border1w {
	border: 1px solid #fff;
}

.bor_t1 {
	border-top: 1px solid #c7c7c7;
}

.bor_t3 {
	border-top: 3px solid #c7c7c7;
}

.btn {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 0;
	padding: 0.5rem 1.2rem;
	font-weight: 500;
	font-size: 1rem;
	line-height: 22px;
}

/*
	.board_btn {height: 39px;line-height: 39px;}
	.board_btn .btn {padding: 0 25px;height: inherit;line-height: inherit;}
*/

.small_btn {
	margin-top: 1%;
}

.small_btn .btn {
	padding: 3px 10px;
	height: inherit;
	line-height: inherit;
}


.d_tc {
	display: table-cell;
}

.va_t {
	vertical-align: top !important;
}

.va_m {
	vertical-align: middle !important;
}

.ta_c {
	text-align: center !important;
}

.ta_r {
	text-align: right !important;
}

.ta_l {
	text-align: left !important;
}

.ta_j {
	text-align: justify !important;
}

.keep_all {
	word-break: keep-all;
}

.f_left {
	float: left !important;
}

.f_right {
	float: right !important;
}

.strong {
	font-weight: bold;
}

.f12px {
	font-size: 12px !important;
}

.f14px {
	font-size: 14px !important;
}

.f16px {
	font-size: 16px !important;
}

.f18px {
	font-size: 18px !important;
}

.f08em {
	font-size: 0.8em;
}

.f09em {
	font-size: 0.9em;
}

.f11em {
	font-size: 1.1em;
}

.f12em {
	font-size: 1.2em;
}

.f13em {
	font-size: 1.3em;
}

.f14em {
	font-size: 1.4em;
}

.f24em {
	font-size: 2.4em;
}

.pad0 {
	padding: 0 !important;
}

.pad5 {
	padding: 5px;
}

.pad10 {
	padding: 10px;
}

.pad15 {
	padding: 15px;
}

.pad20 {
	padding: 20px;
}

.pad25 {
	padding: 25px;
}

.pad30 {
	padding: 30px;
}

.pad40 {
	padding: 40px;
}

.pad50 {
	padding: 50px;
}

.pt_0 {
	padding-top: 0;
}

.pt_5 {
	padding-top: 5px;
}

.pt_10 {
	padding-top: 10px;
}

.pt_15 {
	padding-top: 15px;
}

.pt_20 {
	padding-top: 20px;
}

.pt_25 {
	padding-top: 25px;
}

.pt_30 {
	padding-top: 30px;
}

.pt_40 {
	padding-top: 40px;
}

.pt_50 {
	padding-top: 50px;
}

.pt_60 {
	padding-top: 60px;
}

.pt_90 {
	padding-top: 90px;
}

.pb_0 {
	padding-bottom: 0;
}

.pb_5 {
	padding-bottom: 5px;
}

.pb_10 {
	padding-bottom: 10px;
}

.pb_15 {
	padding-bottom: 15px;
}

.pb_20 {
	padding-bottom: 20px;
}

.pb_25 {
	padding-bottom: 25px;
}

.pb_30 {
	padding-bottom: 30px;
}

.pb_40 {
	padding-bottom: 40px;
}

.pb_50 {
	padding-bottom: 50px;
}

.pb_60 {
	padding-bottom: 60px;
}

.pl_0 {
	padding-left: 0;
}

.pl_5 {
	padding-left: 5px !important;
}

.pl_10 {
	padding-left: 10px !important;
}

.pl_15 {
	padding-left: 15px;
}

.pl_20 {
	padding-left: 20px !important;
}

.pl_25 {
	padding-left: 25px !important;
}

.pl_30 {
	padding-left: 30px !important;
}

.pl_40 {
	padding-left: 40px;
}

.pl_50 {
	padding-left: 50px;
}

.pl_60 {
	padding-left: 60px;
}

.pl_2p {
	padding-left: 2%;
}

.pr_0 {
	padding-right: 0;
}

.pr_5 {
	padding-right: 5px !important;
}

.pr_10 {
	padding-right: 10px !important;
}

.pr_15 {
	padding-right: 15px;
}

.pr_20 {
	padding-right: 20px !important;
}

.pr_25 {
	padding-right: 25px !important;
}

.pr_30 {
	padding-right: 30px !important;
}

.pr_40 {
	padding-right: 40px !important;
}

.pr_50 {
	padding-right: 50px;
}

.pr_60 {
	padding-right: 60px;
}

.pr_2p {
	padding-right: 2%;
}

.mt_5 {
	margin-top: 5px;
}

.mt_10 {
	margin-top: 10px !important;
}

.mt_15 {
	margin-top: 15px;
}

.mt_20 {
	margin-top: 20px;
}

.mt_25 {
	margin-top: 25px;
}

.mt_30 {
	margin-top: 30px;
}

.mt_40 {
	margin-top: 40px;
}

.mt_50 {
	margin-top: 50px;
}

.mt_60 {
	margin-top: 60px;
}

.mb_0 {
	margin-bottom: 0 !important;
}

.mb_5 {
	margin-bottom: 5px;
}

.mb_10 {
	margin-bottom: 10px !important;
}

.mb_15 {
	margin-bottom: 15px;
}

.mb_20 {
	margin-bottom: 20px;
}

.mb_25 {
	margin-bottom: 25px;
}

.mb_30 {
	margin-bottom: 30px;
}

.mb_40 {
	margin-bottom: 40px;
}

.mb_50 {
	margin-bottom: 50px;
}

.mb_60 {
	margin-bottom: 60px;
}

.mb_70 {
	margin-bottom: 70px;
}

.ml_4p {
	margin-left: 4%;
}

.ml_0 {
	margin-left: 0 !important;
}

.ml_5 {
	margin-left: 5px;
}

.ml_10 {
	margin-left: 10px;
}

.ml_15 {
	margin-left: 15px;
}

.ml_20 {
	margin-left: 20px;
}

.ml_25 {
	margin-left: 25px;
}

.ml_30 {
	margin-left: 30px;
}

.ml_40 {
	margin-left: 40px;
}

.ml_50 {
	margin-left: 50px;
}

.ml_60 {
	margin-left: 60px;
}

.mr_5 {
	margin-right: 5px;
}

.mr_10 {
	margin-right: 10px !important;
}

.mr_15 {
	margin-right: 15px;
}

.mr_20 {
	margin-right: 20px;
}

.mr_25 {
	margin-right: 25px;
}

.mr_30 {
	margin-right: 30px;
}

.mr_40 {
	margin-right: 40px;
}

.mr_50 {
	margin-right: 50px;
}

.mr_60 {
	margin-right: 60px;
}

.w40 {
	width: 40px !important;
}

.w100 {
	width: 100px;
}

.w150 {
	width: 150px;
}

.w170 {
	width: 170px;
}

.w250 {
	width: 250px !important;
}

.w680 {
	width: 680px !important;
}

.w50p {
	width: 50%
}

.w60p {
	width: 60%;
}

.w70p {
	width: 70%;
}

.w100p {
	width: 100% !important;
}

.lh_140 {
	line-height: 140% !important;
}

.lh_160 {
	line-height: 160% !important;
}

.lh_180 {
	line-height: 180% !important;
}

.clear_b {
	clear: both;
}

.tof {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.nowrap {
	white-space: nowrap;
}

.rotate90 {
	-webkit-transform: rotate(90deg);
	/* chrome and other webkit browsers */
	-moz-transform: rotate(90deg);
	/* ff */
	-o-transform: rotate(90deg);
	/* opera */
	-ms-transform: rotate(90deg);
	/* ie9 */
	transform: rotate(90deg);
	/* w3c compliant browsers */
}

.rotate180 {
	-webkit-transform: rotate(180deg);
	/* chrome and other webkit browsers */
	-moz-transform: rotate(180deg);
	/* ff */
	-o-transform: rotate(180deg);
	/* opera */
	-ms-transform: rotate(180deg);
	/* ie9 */
	transform: rotate(180deg);
	/* w3c compliant browsers */
}

.rotate270 {
	-webkit-transform: rotate(270deg);
	/* chrome and other webkit browsers */
	-moz-transform: rotate(270deg);
	/* ff */
	-o-transform: rotate(270deg);
	/* opera */
	-ms-transform: rotate(270deg);
	/* ie9 */
	transform: rotate(270deg);
	/* w3c compliant browsers */
}

.mt_3p {
	margin-top: 3%;
}

input.is-invalid, .was-validated input:invalid {
	border-color: #e11837;
}
input.is-valid, .was-validated input:valid {
	border-color: #202228;
}

/*
	@media (max-width:1200px) {
		.ul4_2 > li {width: 43%; margin-left: 14%;}
		.ul4_2 > li:nth-child(odd) { clear:both; margin-left:0; }
		.ul4_2 > li:nth-child(n+3) { margin-top:5%; }
	}
	@media (max-width:800px) {
		.h5 {background: url('../../img/icon/bu_h5_dot.png') no-repeat left 6px;}
	}
	@media (max-width:640px) {
		.ul2 > li {width:100%;margin-top:10px;clear:both;margin-left: 0;}
	}

	@media (max-width:800px) {
		.ul4_2 > li {width: 48%; margin-left: 4%; }
	}

	@media (max-width:480px) {
		.ul4_3 > li {width: 43%; margin-left: 14%;}
		.ul4_3 > li:nth-child(odd) { clear:both; margin-left:0; }
	}
*/
/* common.css*/