@import url("frontend-style/reset-input-box.css");
@import url("frontend-style/topbar.css?v=2");
@import url("frontend-style/broad-layout.css");

body.lock{overflow: hidden;}
a:hover{text-decoration: none;}
a[href="#"]{pointer-events: none;}
.table td, .table th{vertical-align: unset;}

.mob-only{ display:none;}

.flex-grow-0{-ms-flex-positive: 0!important; flex-grow: 0!important;}

.btn-r{ border-radius: 2em;}
.btn-w{padding-left: 2em; padding-right: 2em}
.btn-ex{font-size: 2rem; font-weight: bold;}

label{font-weight: bold;}
.req{color:#F00; line-height: 0; vertical-align: super;}
.lang-en{font-size: 0.825em}

.modal:not([aria-hidden=true]){
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
	   -ms-flex-align: center!important;
    align-items: center!important;
				-ms-flex-pack: center!important;
    justify-content: center!important;
}
/*.modal-dialog{ width: 96%; max-width: 800px; margin: auto;}*/

.form-fieldset{/*padding: 2em; border: 1px #222 solid;*/ margin-bottom: 2rem; border-bottom: 1px #e5e5e5 solid; }

.fitimg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.err-tips {
    top: 0;
    margin: 0 auto;
   -webkit-transform: translateY(-100%);
 			transform: translateY(-100%);
    padding: 0.5em 1em;
    color: #FFFFFF;
    background-color: #990000;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.25em;
    border-radius: 4px;
    position: absolute;
    z-index: 4;
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
    display: none;
    text-align: center;
	pointer-events: none;
}

.easy-tips, .easy-tips-down, .easy-tips-up{ position:relative; }

.easy-tips-js, .easy-tips::after, .easy-tips-down::after, .easy-tips-up::after{
	content: attr(aria-label);
	min-width: 120px;
	opacity: 0;
	display: block;
	visibility:hidden;
	background-color: rgba(0,0,0,0.75);
	color:#FFF;
 font-weight: normal;
 font-size: 12px;
	line-height: 1.25em;
	text-align: center;
 border-radius: 4px;
	padding: 0.5em 1em;
	margin: 0 auto;
	position: absolute;
	top: -1px;
	left:50%;
	z-index:3;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	-webkit-transform: translateX(-50%) translateY(-100%);
 transform: translateX(-50%) translateY(-100%);
	transition: 0.5s opacity;
 -webkit-transition: 0.5s opacity;
 -moz-transition: 0.5s opacity;
 -o-transition: 0.5s opacity;
 -ms-transition: 0.5s opacity;
}

.easy-tips-js, .easy-tips:hover::after, .easy-tips-down:hover::after, .easy-tips-up:hover::after{
    visibility:visible; display: block; opacity:1;
}

.easy-tips-js{ z-index: 4; background-color: #009688; }

.easy-tips-down::after{
				top:auto;
				bottom:0;
				-webkit-transform: translateX(-45px) translateY(100%);
 			transform: translateX(-45px) translateY(100%);
}
a[target=_lightbox], .lightbox-gallery a, .gallery-lightbox a{ display:block; position: relative;}
a[target=_lightbox]::after, .lightbox-gallery a::after, .gallery-lightbox a::after{content: ""; width: 64px; height: 64px; border-radius: 50%; text-align: center; color:#FFF; position: absolute; top:0; right:0; bottom:0; left:0; z-index: 1; margin: auto; background-color: rgba(0,0,0,0.75);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' width='36' height='36' viewBox='0 0 256 256'%3E%3Cpath d='M253.8 243.5L168.3 158c14.9-17.3 23.1-39.1 23.1-62.2 0-25.6-10-49.6-28-67.7C145.2 10 121.2 0 95.6 0 70.1 0 46.1 9.9 28 28c-37.3 37.3-37.3 98 0 135.4 18.7 18.7 43.2 28 67.7 28 22.2 0 44.4-7.8 62.2-23.1l85.5 85.6c1.4 1.4 3.3 2.2 5.2 2.2 1.9 0 3.8-.7 5.2-2.2 2.9-2.9 2.9-7.6 0-10.4zM38.4 153c-31.6-31.6-31.6-83 0-114.6C53.7 23.1 74 14.7 95.6 14.7s42 8.4 57.3 23.7c15.3 15.3 23.7 35.6 23.7 57.3 0 21.6-8.4 42-23.7 57.3-31.5 31.6-82.9 31.6-114.5 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; pointer-events: none; opacity: 0;
	transform: scale(1.1);
	transition:0.5s transform, 0.5s opacity;
	-webkit-transition:0.5s transform, 0.5s opacity;
	-moz-transition:0.5s transform, 0.5s opacity;
	-o-transition:0.5s transform, 0.5s opacity;
	-ms-transition:0.5s transform, 0.5s opacity;
}
a[target=_lightbox]:hover::after, .lightbox-gallery a:hover::after, .gallery-lightbox a:hover::after{
    opacity: 1;
    transform: scale(1);
}

.col-auto{padding: 0;}

#page-wrapper,#page_body{ width: 100%; overflow-x: hidden; min-height: 100vh; display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: start; justify-content: flex-start;}
#page-wrapper>div,#page_body>.layout_row{-ms-flex:1 1 auto; flex:1 1 auto;}
#page-wrapper>header, #page-wrapper>footer, #page_body>.layout_row:first-child, #page_body>.layout_row:last-child{ -ms-flex:0 0 auto; flex:0 0 auto; }
header,footer{position: relative;}
.system-message{ width: 100%; min-height: 50vh; display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center;}

.block-wrappper, .block-wrappper>.container{position: relative;}
.edit-btn-wrapper{ position: absolute; top:8px; right:8px; z-index: 9; pointer-events: none; font-size: 1.5rem;}
.edit-btn-wrapper.fixed{position: fixed; top:48vh; right:0; font-size: 2rem;}
.edit-layout-btn-wrapper{position: relative; pointer-events: none; text-align: right;margin-top: -1.8em; background-color: #333; right: 0; /*padding: 10px 0;*/ }
.edit-btn-wrapper>a, a.edit-btn{ pointer-events: auto; display:inline-block; padding: 0.5em; /*border: 1px #ddd solid;*/ color:#FFF !important; background-color: #F60; line-height: 1; border-radius: 1em 1em 1em 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); opacity: 0.6;} 
.edit-btn-wrapper.fixed>a{ border-radius: 1em 0 0 1em; padding-right: 0.35em}
.cms-edit-button:hover, a.edit-btn:hover{opacity: 1 !important}
.edit-layout-btn-wrapper>a{border: none; background-color: transparent; /*color:#7cb6ff;*/ padding-top: 0; padding-bottom: 0; border-radius:0; box-shadow: none; opacity: 1}
.edit-btn-wrapper .easy-tips::after, a.edit-btn::after{min-width: 60px; height: 1.75rem; top:0; right:110%; bottom:0; left: auto; margin: auto; transform: none !important; white-space: nowrap;}

.edit-btn-wrapper-inline{position: relative; z-index: 1; text-align: right; font-size: 1.5rem; padding: 0.25em 0;}
.edit-btn-wrapper-inline>a, .edit-btn-wrapper-inline .cms-edit-button{ display:inline-block; width: 2em; height: 2em; padding: 0.5em; border: none !important; margin-right: 0.25em; color:#FFF !important; background-color: #F60; line-height: 1; border-radius: 1em 1em 1em 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); opacity: 0.6;}

.widget-wrapper.show-area{position: relative; }
.widget-wrapper.show-area::before{ content: ""; display:block; position: absolute; top:0; right:0; bottom:0; left:0; z-index: 0; margin: 0; border: 2px #4cb9ea dashed; background-color: rgba(222,242,250,0.85); pointer-events: none;}

.grid_row{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; width: 100%;}
.grid_col{ -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap;flex-wrap: wrap; max-width: 100%; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch;}
.grid_col>div{-ms-flex:1 1 100% ;flex:1 1 100%;}
/* animation */
.slideUp{
-webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-transform-origin: center top;
  transform-origin: center top;
	-webkit-transition-duration: 250ms;
	transition-duration: 250ms;
	-webkit-animation-duration: 250ms;
 animation-duration: 250ms;
}

.mini-radio-player-wraper{}
.mini-radio-player-wraper .mfp-content{ width: 300px; margin: auto}
.mini-radio-player{ width: 300px; height: 48px;}
.mini-radio-player>iframe{ width: 100%; height: 100%;}
.mini-radio-player-wraper .mfp-title{padding: 0.5em 0;}

.mini-video-player-wraper{}
.mini-video-player-wraper .mfp-content{ width: 96%; max-width: 1280px; margin: auto}
.mini-video-player{ width: 100%; padding-top: 56.25%; position: relative;}
.mini-video-player>iframe{ position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; min-width: 100%; min-height: 100%;}
.mini-video-player-wraper .mfp-title{padding: 0.5em 0;}

.mini-message-sender-wraper{}
.mini-message-sender-wraper .mfp-content{ width: 98%; max-width: 480px; margin: auto}
.mini-message-sender{ height: 520px;}
.mini-message-sender>iframe{ width: 100%; height: 100%;}
.mini-message-sender-wraper .mfp-title{padding: 0.5em 0;}

.form-wrapper{ width: 100%; height: 100vh; padding: 15px; display: -webkit-box;display: -ms-flexbox;display: flex;
	-ms-flex-align: center!important;
    align-items: center!important;
				-ms-flex-pack: center!important;
    justify-content: center!important;
}
.form-wrapper>.container{padding-left: 15px; padding-right: 15px;}

.page-item.active{z-index: 1;}
.page-item.active .page-link{z-index: 0;}
.page-item.disabled, .page-item.active{ pointer-events: none;}
.page-item.disabled .page-link{ opacity: 0.5}

.min-h400, .min-h400>.container{min-height:400px}
.min-h500, .min-h500>.container{min-height:400px}
.min-h600, .min-h600>.container{min-height:400px}
.min-h800, .min-h800>.container{min-height:400px}


ul.list-arrow{padding-left: 0; list-style-type: none;}
ul.list-arrow>li{padding-left: 1.5em; position: relative;}
ul.list-arrow>li::before{content: ""; display:block; width: 0.5em; height: 0.5em; transform: rotate(45deg); border: 1px currentColor solid; border-width: 1px 1px 0 0; position: absolute; top: 0.5em; left:0;}

ul.list-social{padding-left: 0; list-style-type: none; display: block;}
ul.list-social>li{display:inline-block;}
ul.list-social>li>a{display: inline-block; padding: 0.5em;}
ul.list-social .fa, ul.list-social .fab, ul.list-social .far, ul.list-social .fas{ font-size: 2em;}

table>thead>tr>th a,table>thead>tr>td a, table>tbody>tr>th a, table>tbody>tr>td a,table>tfoot>tr>th a,table>tfoot>tr>td a{ word-break: break-all;}

.member-system{padding: 30px 0; background-color: #f5f5f5; background-size: cover; background-repeat: no-repeat; background-position: center top;}
.member-system button, .member-system .btn{line-height: 1.2;}
.member-system .text-eng{font-size: 0.625em; opacity: 0.7; padding-left: 0.5em}
.member-system button .text-eng, .member-system .btn .text-eng{display:block;}
.forget-link .text-eng{font-size: 1em; opacity: 1;}
.alert .text-eng{font-size: 0.875em; opacity: 1; padding-left: 0;}
#submit_mail .text-eng{display:inline-block; padding-left: 0.5em}
.member-system .container{ min-height: 74vh; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; }
.form-panel{ width: 96%; max-width: 640px; box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);}
.form-panel-sm{max-width: 320px;}
.form-panel-sm .captcha-img{height: 38px; min-width: 104px;}
.forget-link{margin-top: -0.8rem; margin-bottom: 1rem; font-size: 0.835rem; text-align: right}
.register-link{margin: 10px 0;}

@-webkit-keyframes slideUp {
  0%{
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@keyframes slideUp {
  0%{
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

.slideDown{
-webkit-animation-name: slideDown;
  animation-name: slideDown;
  -webkit-transform-origin: center top;
  transform-origin: center top;
	-webkit-transition-duration: 250ms;
	transition-duration: 250ms;
	-webkit-animation-duration: 250ms;
 animation-duration: 250ms;
}

@-webkit-keyframes slideDown {
  0%{
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes slideDown {
  0%{
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@media (max-width: 991px){
.pc-only{ display:none;}
.mob-only{ display:block;}
}

	
@media (max-width: 767px){
	.td-keep-all th, .td-keep-all td{ word-break: keep-all;}
	.table-responsive-breakline table, .table-responsive-breakline tbody, .table-responsive-breakline tfoot, .table-responsive-breakline td:not(.hidden-xs), .table-responsive-breakline tr:not(.hidden-xs){ display: block; width: 100% !important; max-width: none !important }
	.table-responsive-breakline thead, .table-responsive-breakline th{ display: none; speak: none;}
 .table-responsive-breakline tr { padding: 0; border: 1px #ccc solid; border-width: 0 1px 1px; margin-bottom: 1rem;}
 .table-responsive-breakline td { position: relative; white-space: normal; text-align: left; min-height: 2.42857143em;}
	.table-responsive-breakline td[aria-label]{padding-left: 8em !important; position: relative; width: 100% !important; max-width: 100% !important}
	.table-responsive-breakline.short-label td[aria-label]{padding-left: 5.5em !important;}
 .table-responsive-breakline td[aria-label]::before { content: attr(aria-label); display:block; position: absolute; left: 0; top:0; width: 7.5em; padding: 0.75em; white-space: nowrap; text-align: left; font-weight: bold; color: currentColor; line-height: 1.42857143; }
	.table-responsive-breakline.table-sm td[aria-label]::before{ padding: 0.3rem;}
	.table-responsive-breakline.short-labe td[aria-label]::before{width: 5em;}
	
	.table-responsive-breakline td.form-group{margin: 0; padding: 0.5em; width: 100% !important;}
	.table-responsive-breakline tfoot tr, .table-responsive-breakline tfoot th, .table-responsive-breakline tfoot td{ border: none; padding: 0;}
	
	tr.fields-wrap-hide{display:none !important;}
	.hidden-xs{ display: none !important;}
}

/*
@media (min-width: 576px){
	.modal-dialog-scrollable {
    max-height: 80vh;
		overflow: hidden
}
.modal-dialog-scrollable .modal-content{
    max-height: 80vh;
				overflow: hidden;
				position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}
	.modal-dialog-scrollable .modal-body{
		 max-height: calc(80vh - 3.5rem); -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto;
	}
}
*/