@charset "utf-8";
/* ************ modal ************ */
.modal{position: fixed;z-index: 10;left: 0;top: 0;display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;overflow: auto;background-color: rgba(0,0,0,0.6); visibility: hidden; opacity: 0; transition:all 0.2s ease;}
.modal.on{visibility: visible; opacity: 1;}
.modal .modal_con{position: relative; display: flex; flex-direction: column; width: 800px; height: 700px; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); font-size: 1.2rem;}
.modal .modal_con [class*="md_"]{padding: 0 20px;}
.modal .modal_con .md_hd{ height: 60px; background: #1D2B36; }
.modal .modal_con .md_con{ flex: 1; padding: 20px 20px 40px; overflow: auto;}
.modal .modal_con .md_con section{margin-bottom: 20px; font-size: 1.2rem; line-height: 30px;}
.modal .modal_con .md_ft{ height: 60px; border-top: 1px solid #DFDFDF;}

/* modal header */
.md_hd h2 {color: #fff; font-size: 2.4rem; font-weight: 800; line-height: 60px;}
.md_hd .md_hd_btns {position: absolute; right: 10px; top: 10px; padding: 0 !important;}
.md_hd .md_hd_btns > a { position: relative; width: 40px; height: 40px; float: left;}
.md_hd a > span{display: none;}
.md_hd a.close::before{content: ''; position: absolute; left: 50%; top: 50%; margin-left: -9px; width: 20px; height: 2px; background: #fff; transform: rotate(45deg); transition:all 0.2s ease;}
.md_hd a.close::after {content: ''; position: absolute; left: 50%; top: 50%; margin-top: -9px; width: 2px; height: 20px; background: #fff; transform: rotate(45deg); transition:all 0.2s ease;}
.md_hd a.close:hover::before{background: #FF922B;}
.md_hd a.close:hover::after{background: #FF922B;}
.md_hd a.refresh .ic_refresh2{margin: 11px 0 0 11px; width: 18px; height: 18px;}
.md_hd a.fullsc .ic_fullsc{margin: 11px 0 0 11px; width: 18px; height: 18px;}
.md_hd a.fullsc_exit .ic_fullsc_exit{margin: 11px 0 0 11px; width: 18px; height: 18px;}


/* modal footer */
.md_ft [class*="btnset"]{ margin: 15px 0;}


/* modalpage - Alert */
.modal.alert{}
.modal.alert .modal_con{width: 350px; height: 170px; background: #fff;}
.modal.alert .md_hd{ height: 40px; background: #F1F3F5; border-bottom: 1px solid #DFDFDF; }
.modal.alert .md_hd h2{ color: #1D2B36; font-size: 1.8rem; line-height: 40px;}
.modal.alert .md_hd a.close{position: absolute; right: 10px; top: 0px; width: 40px; height: 40px; }
.modal.alert .md_hd a.close::after{background: #1D2B36;}
.modal.alert .md_hd a.close::before{background: #1D2B36;}
.modal.alert .md_hd a.close:hover::before{background: #FF922B;}
.modal.alert .md_hd a.close:hover::after{background: #FF922B;}
.modal.alert .md_con{ padding: 20px 20px 0; overflow: hidden; text-align: center;}
.modal.alert .md_con p{ text-align: center; line-height: 1.5em;}
.modal.alert .md_ft{ height: 40px; border-top: none}
.modal.alert .md_ft [class*="btnset"]{ margin: 0}


/* Smartphones ----------- */
@media only screen and (max-width : 800px) {
	.modal{display: block; }
	.modal.alert{display: flex; }
	.modal .modal_con{ width: auto !important; height: calc( 100% - 20px ) !important; margin: 10px;}
}