@charset "utf-8";

/*
프로젝트 : 영화진흥위원회 온라인상영관 통합전산망 구축
작성자 : 강정민
최종 업데이트일자 : 2020.08.04
*/

/*
  common.css : 모든 페이지 공통사항.
*/

/* Reset */
*{margin:0;padding:0; letter-spacing: -0.5px; }
body{overflow-x:hidden;}
body.hidden{overflow:hidden;}
ol, ul, li{list-style:none}
fieldset{border:none;}
caption, legend{font-size:0px;line-height:0px;width:0px;height:0px;overflow:hidden;visibility:hidden;/*display:none;*/}
legend{position:absolute;top:0px;left:-9999px}
img{border:0 none;vertical-align: middle;}
a{outline:0; text-decoration:none;cursor:pointer;color:#333;}
i, em, address{font-style:normal;font-weight:300;}
table{border-collapse:collapse;border-spacing:0px;table-layout:fixed;zoom:1;width:100%;empty-cells:show}
th,td{word-wrap:break-word;}
b{font-weight: 500;}
strong{font-weight:700;}
input, button, select{cursor:pointer;}
select{-webkit-appearance: none;-moz-appearance: none; appearance: none; padding:0 35px 0 5px;height:35px;background: url('../images/common/select_arr.png')no-repeat center right #fff;;-webkit-border-radius: 0; border:1px solid #dfdfe0; box-sizing: border-box;vertical-align: middle;}
select::-ms-expand{display: none;}
input{appearance: none;-webkit-appearance: none;-webkit-border-radius: 0;}
input[type="text"],input[type="password"],input[type="email"]{border:1px solid #dfdfe0; cursor:text; box-sizing: border-box; vertical-align: middle;}
input[type="button"],input[type="submit"]{background: none;border:0;box-sizing:border-box;vertical-align: middle;}
input[type="text"]:disabled,input[type="password"]:disabledinput[type="email"]:disabled{background: #eee;}
textarea{border:1px solid #dfdfe0;border-color: #dfdfe0;box-sizing: border-box;}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,select:focus,textarea:focus{border:1px solid #360afa;}
iframe{margin:0;padding:0;border:0;}
.placeholder{color:#333}


/*clear fix : .clfix*/
.clfix{*zoom:1}
.clfix:after,.clfix:before{
	line-height:0;
	display:table;
	content:''}
.clfix:after{clear:both}

/* SkipToContent 웹접근성*/
#skipToContent{margin:0}
#skipToContent a{position:absolute;left:-3000%}
#skipToContent a:focus{display:block;left:0;top:0;z-index:10000000000;width:100%;height:40px;line-height:40px;background:#360afa;color:#fff;text-align:center}


/* display */
.dBlock{display: block !important;}
.dInBlock{display: inline-block !important;}

/*float*/
.floatR{float:right !important;}
.floatL{float:left!important;}

/*margin*/
.mg0{margin:0 !important;}
.mg0auto{margin:0 auto !important;}

.mgt0{margin-top:0px !important;}
.mgt5{margin-top:5px !important;}
.mgt10{margin-top:10px !important;}
.mgt15{margin-top:15px !important;}
.mgt20{margin-top:20px !important;}
.mgt25{margin-top:25px !important;}
.mgt30{margin-top:30px !important;}
.mgt35{margin-top:35px !important;}
.mgt45{margin-top:45px !important;}
.mgt60{margin-top:60px !important;}
.mgt100{margin-top:100px !important;}

.mgl0{margin-left:0 !important;}
.mgl5{margin-left: 5px !important;}
.mgl10{margin-left: 10px !important;}
.mgl15{margin-left: 15px !important;}
.mgl20{margin-left: 20px !important;}
.mgl35{margin-left:35px !important;}
.mgl45{margin-left:45px !important;}

.mgr5{margin-right: 5px !important;}
.mgr10{margin-right: 10px !important;}
.mgr15{margin-right: 15px !important;}
.mgr20{margin-right: 20px !important;}
.mgr35{margin-right:35px !important;}
.mgr45{margin-right:45px !important;}

.mgb0{margin-bottom: 0px !important;}
.mgb5{margin-bottom: 5px !important;}
.mgb10{margin-bottom: 10px !important;}
.mgb20{margin-bottom: 20px !important;}
.mgb25{margin-bottom: 25px !important;}
.mgb30{margin-bottom:30px !important;}
.mgb35{margin-bottom:35px !important;}
.mgb45{margin-bottom:45px !important;}

/*padding*/
.pd0{padding:0 !important;}
.pd5{padding:5px !important;}
.pd10{padding:10px !important;}

.pdt5{padding-top:5px !important;}
.pdt10{padding-top:10px !important;}
.pdt15{padding-top:15px !important;}
.pdt20{padding-top:20px !important;}
.pdt25{padding-top:25px !important;}
.pdt30{padding-top:30px !important;}
.pdt35{padding-top:35px !important;}
.pdt40{padding-top:40px !important;}
.pdt100{padding-top:100px !important;}

.pdl0{padding-left:0 !important;}
.pdl10{padding-left: 10px !important;}
.pdl20{padding-left: 20px !important;}
.pdl35{padding-left:35px !important;}
.pdl45{padding-left:45px !important;}

.pdr10{padding-right: 10px !important;}
.pdr20{padding-right: 20px !important;}
.pdr35{padding-right:35px !important;}
.pdr45{padding-right:45px !important;}

.pdb10{padding-bottom: 10px !important;}
.pdb20{padding-bottom: 20px !important;}
.pdb35{padding-bottom:35px !important;}
.pdb40{padding-bottom:40px !important;}
.pdb45{padding-bottom:45px !important;}

/*vertical*/
.vat-align-t{vertical-align: top !important;}
.vat-align-b{vertical-align: bottom !important;}
.vat-align-m{vertical-align: middle !important;}

/*font,text*/
.txtl {text-align: left !important;}
.txtr {text-align: right !important;}
.txtc {text-align: center !important;}

.txtu{text-decoration: underline;}
a.txtu:hover,a.txtu:focus{font-weight:700 !important;}

/* font-weight */
.ftLight{font-weight: 100 !important;}
.ftMedium{font-weight: 500 !important;}
.ftBold{font-weight: 700 !important;}

.ft16{font-size:16px !important;}
.ft17{font-size:17px !important;}
.ft18{font-size:18px !important;}
.ft20{font-size:20px !important;}
.ft22{font-size:22px !important;}


/*color*/
.colorRed{color:#ff0000 !important;}
.colorBlue{color:#f18825 !important;}
.colorWhite{color:#fff !important;}


/* background */
.bg_yellow{background: #fff8d9;}
.bg_blue{background: #e3ebff;}
.bg_whiteGrey{background: #fbfbfb;}
.bg_whiteGrey2{background: #f9f9f9;}
.bg_grey{background:#fafafa;}

/* border */
.bd_Red{border-color:#f00 !important;}
.bdb_dash{border-bottom:1px dashed #ccc;}

/*말줄임*/
.dotdot {display: inline-block; max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;vertical-align: middle;}

/* 안보이는 텍스트 */
.hdtxt,.tit_none{font-size:0px !important;line-height:0px;width:0px;height:0px;overflow:hidden;visibility:hidden;text-indent: -9999px;}
figcaption{width:0;height:0;text-indent: -9999px;}

/* 커서 */
.csP{cursor: pointer;}

/*width*/
.w100{width:100% !important;}
.w90{width:90%;}
.w80{width:80%;}
.w70{width:70%;}
.w60{width:60%;}
.w50{width:50%;}
.w40{width:40%;}
.w30{width:30%;}
.w20{width:20%;}
.w10{width:10%;}

.wp50{width:50px;}
.wp70{width:70px;}
.wp100{width:100px;}

/*btn 버튼*/
/*btn크기*/
.btns{display: inline-block;padding:6px 10px;border-width:1px!important;border-style:solid !important; font-size:14px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
.btnsm{display: inline-block;padding:8px 15px;border-width:1px!important;border-style:solid !important; font-size:16px;font-weight:500;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
.btnm{display: inline-block;padding:8px 20px;border-width:1px 1px 1px 1px !important;border-style:solid !important; font-size:16px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
.btnL{display: inline-block;padding:12px 25px;border-width: 1px !important; font-size:15px;box-sizing: border-box !important; transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
/* .btnb{display: inline-block;padding:5px 14px;border-width:1px 1px 1px 1px !important;margin-left:800px  ; margin-top:-75px ;border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;} */
/* .detail{display: inline-block;padding:5px 14px; margin-left:1750px !important ; margin-top:-130px !important ;border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;} */
.detail{display: inline-block;padding:5px 14px; float:right;  margin-top:-90px; border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
.btnb{display: inline-block;padding:5px 14px;border-width:1px 1px 1px 1px !important; margin-left:800px; margin-top:-75px;border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}

.detail2{display: inline-block;padding:5px 14px; position: relative; left:100px; margin-top:-75px; border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
.btnb2{display: inline-block;padding:5px 14px;border-width:1px 1px 1px 1px !important; margin-top:15px; border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}

@media (max-width:1024px){
	.detail{display:none;}
	.btnb{display:none;}
}
@media (min-width:1024px){
	.detail2{display:none;}
	.btnb2{display:none;}
}

@media (max-width:580px){
	.detail2{display: inline-block;padding:5px 14px; position: relative; left:100px; bottom:5px; margin-top:-75px; border-style:solid !important; font-size:12px;box-sizing: border-box !important;transition: background 0.3s;word-break: keep-all;vertical-align: middle;}
}


/* btn색상 */
.btnBora{background: #623c91 !important;border-color:#623c91 !important;color:#fff !important}
.btnBlue{background: #623c91 !important;border-color:#623c91 !important;color:#fff !important}
.btnBlue:hover,.btnBlue:focus{background:#623c91 !important;}

.btnLightBlue{background: #048288 !important;border-color:#048288 !important;color:#fff !important}
.btnLightBlue:hover,.btnLightBlue:focus{background:#126c86 !important;}
.btnGrey{background: #777777 !important;border-color:#777777 !important;color:#fff !important}
.btnGrey:hover,.btnGrey:focus{background:#555 !important;}
.btnWhite{background: #fff !important;border-color:#aaa !important;color:#111 !important}
.btnWhite:hover,.btnWhite:focus{background:#eee !important;}
.btnWhiteBlue{background: #fff !important;border-color:#623c91 !important;color:#623c91 !important}
.btnWhiteBlue:hover,.btnWhiteBlue:focus{background:#eee !important;}
.btnRed{background: #ca3c30 !important;border-color: #ca3c30 !important;color:#fff !important}
.btnRed:hover,.btnOrange:focus{background:#b42519 !important;}
/* 라운드 */
.radius4{border-radius: 4px;}
.radius8{border-radius: 8px;}



/*필수항목표시*/
.necessary{display: inline-block; margin: 0 2px;color: #f00; font-size: 18px;font-weight: 700; vertical-align: middle; }


/*datepicker , timepicker */
.datepicker{background:url('../images/common/sch_datepicker.png')no-repeat center right !important;}
.datepicker_period{background:url('../images/common/sch_datepicker.png')no-repeat center right !important;}
.ui-datepicker th, .ui-datepicker td{border:1px solid #eeeeee}
.ui-datepicker td{padding:0;}
.ui-datepicker th:first-child, .ui-datepicker td:first-child{border-left:0px;}
.ui-datepicker th:last-child, .ui-datepicker td:last-child{border-right:0px;}
.ui-datepicker th, .ui-datepicker tbody tr:last-child td{border-bottom:0px;}
.ui-datepicker th, .ui-datepicker tbody tr:first-child td{border-top:0px;}
.ui-datepicker th{background-color:#a0a0a0; color:#fff; padding:0.5em .3em;}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{border:0px; background-color:#fff}
div#ui-datepicker-div{padding:0;}
.ui-datepicker table{margin:0}
.ui-widget-content{border:1px solid #a0a0a0; border-radius:2px}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{color:#666}
.ui-widget-header{border:0px; background-color:#fff; color:#444444}
.ui-datepicker .ui-datepicker-header{padding:7px 0;}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{border:0px; background-color:#fff;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top:8px;}
.ui-datepicker .ui-datepicker-next span{background:url('../images/common/datepicker_next.png') no-repeat 0 0; width:22px; height:22px;}
.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-next{right:8px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{display: block; position:static; left: 50%; margin-left: 0px; top: 50%; margin-top: 0px;}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top:8px;}
.ui-datepicker .ui-datepicker-prev span{background:url('../images/common/datepicker_prev.png') no-repeat 0 0; width:22px; height:22px;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-prev{left:8px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-prev span{display: block; position:static; left: 50%; margin-left: 0px; top: 50%; margin-top: 0px;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-month{padding-left:10px}
.ui-datepicker .ui-datepicker-title select{margin:0 .3em;width:38%;}
.ui-datepicker .ui-datepicker-year{padding:2px 20px 2px 5px;height:auto;background-size: 20px;}
.ui-datepicker .ui-datepicker-month{padding:2px 20px 2px 5px;height:auto;background-size: 20px;}

/*check radio 스타일*/
/*
사용방법
<div class="chkradio">
  <input type="radio" name="" id="">
  <label for="">텍스트</label>
</div>
*/
.chkradio{display: inline-block;margin-right:5px;}/* 기본 chkradio : display:inline-block */
.chkradio.dBlock {margin:4px 0;padding-left:22px;}/* display:block 적용시 */
.chkradio.dBlock label{display: inline;margin-left:-22px;}

input[type="checkbox"]:not(old),
input[type="radio"]:not(old) {margin:0; padding:0;width:0; background:url('../images/common/sch_chkradio.png') no-repeat 0 0;  opacity:0;}
input[type="checkbox"]:not(old) + label ,input[type="radio"]:not(old) + label {display: inline-block; padding-left:28px;height:22px;background: url('../images/common/sch_chkradio.png') no-repeat 0 0px; transition: background 0.1s;}
input[type="checkbox"]:not(old):checked + label {background-position: 0 -40px; color:#5077db;}
input[type="radio"]:not(old):checked + label {background-position: 0 -80px;}
input[type="checkbox"]:disabled + label,input[type="radio"]:disabled + label {background-position: 0 -115px;}

.chkradio.dBlock input[type="checkbox"]:not(old) + label{background-position: 0 0;}
.chkradio.dBlock input[type="checkbox"]:not(old):checked + label{background-position: 0 -48px;}
.chkradio.dBlock input[type="radio"]:not(old) + label{background-position: 0 0;}
.chkradio.dBlock input[type="radio"]:not(old):checked + label{background-position: 0 -80px;}

input[type="checkbox"]:not(old):focus + label,
input[type="radio"]:not(old):focus + label{outline:1px solid #360afa;}

/*태블릿 모바일 요소 숨김*/
.mb{display: none;}/* 1024부터 block */


/* 로딩바 */
#loading{display: block;position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.7;background-color: #fff;z-index: 9999999;text-align: center;}
#loading #loading-image{position: absolute;top: 50%;left: 50%;transform:translateX(-50%) translateY(-40px);z-index: 100;}

/* 레이어팝업 검은 배경*/
.layerBg{display: none; position: fixed;top:0;left:0;width:100%;height:100%; background: rgba(0,0,0,0.8);z-index: 4;}
.layerBg.on{display: block;}


/*erorpage*/
.errorpage{border-top:4px solid #360afa;text-align: center;}
.error_logo img{margin:100px auto 0 auto;height:32px;}
.pageState{margin:50px auto 0 auto;width:370px;text-align: center;}
.pageState h2{display: inline-block;position: relative; margin-bottom:50px;font-size:70px;font-weight: 700;color:#360afa;}
.pageState h2:after{display: block;content:"";position: absolute;bottom:-30px; left:50%;transform:translateX(-50%); width:100px;height:3px;background: #666;}
.pageState ul{margin-top: 50px;}
.pageState ul li{display: inline-block;margin:0 4px;}
.pageState ul li a{display: block;padding:8px 20px;}
.pageState ul li:nth-child(1) a{background: #555;color:#fff;}
.pageState ul li:nth-child(2) a{background: #360afa;color:#fff;}
.readyImg-size{position: relative;width: 100%;height: 600px; top: -20%;}
.readyImg-center{text-align: center; position: absolute; top: -20%; right: -200%; bottom: 0; left: -200%;}