@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=optional');

/* **************************************** 전체 영역 **************************************** */
html{font-family: 'Roboto', sans-serif; font-size: 10px;}
body{ font-size: 14px; font-weight: 400;}
.wrap{display: flex; flex-direction: column; height: 100vh; min-height: 700px; min-width: 800px;}

header{background: #A41F35; flex: none;}
header .container{ height: 120px; display: flex; align-items: center; justify-content: space-between; max-width: 1162px; margin: 0 auto; padding: 0 20px;}
header .container>div{display: inline-block;}
header .logo a{color: #fff; display: flex; align-items: center; font-size: 28.69px; font-weight: 500;}
header .logo a img{ margin-right: 13px;}
header .menu ul li{display: inline-block; margin-right: 40px;font-size: 1.8rem; }
header .menu ul li:last-child{ margin-right: 0;}
header .menu ul li a{color: #fff;}

.contents{width: 100%; height: 100%; background-color: #2b2b2b; background-image: url(../images/background2.png); background-repeat: no-repeat;
    background-position: center; background-size: auto; display: flex; justify-content: center; align-items: center; flex-direction: column;}

.contents h1{ color: #6f7271; font-size: 1.8rem;  font-weight: 500; }
.contents button.basic{width: 350px; height: 50px; background-color: #a32035; outline: none; border: 0px; border-radius: 5px;
    font-size: 1.6rem; color: #ffffff;  }
.contents button.basic:hover, .contents button.basic:active{background-color: #601420; color: #fff;}
.contents .popup_wrap{width: 900px; height: 700px; flex: none;}
.contents .popup_wrap .popup_header{ height: 80px; width: 100%; background-color: #a32035; border-radius: 10px 10px 0 0; display: flex; justify-content: space-between;
    align-items: center; padding: 0 54px;}
.contents .popup_wrap .popup_header .left_box{display: flex; align-items: center;}
.contents .popup_wrap .popup_header .logo_iris_id{ text-indent: -99999px; overflow: hidden; width: 119px; height: 32px; background: url(../images/logo_irisid.png)no-repeat; margin-right: 45px;}
.contents .popup_wrap .popup_header .logo{ font-size: 1.67rem; color: #fff;}
.contents .popup_wrap .popup_header .logo_iris_time{ text-indent: -99999px; overflow: hidden; width: 90px; height: 29px; background: url(../images/logo_iristime.png)no-repeat;}

.contents .container{height: 620px; border: 1px solid #a32035; border-radius: 0 0 10px 10px; display: flex; flex-direction: column; align-items: center; position: relative;
    background-color: #dddddd; background-image: url(../images/background2.png); background-position: center 60%; background-size: auto; justify-content: space-between;}
.contents .container .top_box{ height: 340px; width: 350px; text-align: center; margin-top: 105px; display: flex; flex-direction: column;
    justify-content: space-between; align-items: center; position: relative;}
.contents .container .top_box button{ margin-bottom: 30px;}
.contents .footer_box{ width: 350px;}
.contents .password_box{ display: flex; justify-content: space-between;}
.contents .password_box button{ width: 171px; height: 32px; background-color: #f7f7f7; color: #6f7271; border-radius: 5px; outline: none;}
.contents .password_box button:hover{ background-color: #949494; color: #ffffff;}
.contents p.copyright{ text-align: center; color: #777778; font-size: 1rem; margin-top: 35px; margin-bottom: 25px;}


/* **************************************** 개별 영역 **************************************** */


/* 페이지별 마진 값 */
body.login_page .contents .password_box{justify-content: center;}

/* **************************************** 로그인 페이지 */
.contents .form{margin-bottom: 20px;}
.contents .form li{ position: relative; width: 350px; height: 50px; font-weight: 400;}
.contents .form li:last-child{ margin-bottom: 0;}
/*.contents .form li label{ position: absolute; left: 23px; height: 100%; line-height: 50px; font-size: 1.2rem; color: #6f7271;}*/
.contents .form li input{ padding: 0 27.192px; width: 100%; height: 100%; font-size: 1.2rem; color: #6f7271; background-color: #f7f7f7;
    outline: none;   border: 0.25px solid #b5b5b5;}
.contents .form li input::placeholder{font-size: 1.2rem; color: #6f7271;}
.contents .form li:first-of-type input{border-radius: 5px 5px  0 0;}
.contents .form li:last-of-type input{ border-radius:  0 0 5px 5px ; border-top: 0px;}

/* **************************************** 리셋 패스워드 페이지 */
body.reset_pw_page .contents .form li:last-of-type input{border-radius: 5px; border: 0.25px solid #b5b5b5}

/* **************************************** 파일 업로드 페이지 */
.file_box{ width: 107px; height: 135px; margin-bottom: 20px;}
.file_box p{ text-align: center; font-size: 1.487rem; color: #6f7271;}

/* 파일 그림 교체 */
.contents.ready .container .top_box .file_box{background: url(../images/ready_icon.png)no-repeat; background-size: contain; background-position: center;}
.contents.ready .container .top_box .file_box:hover{ background: url(../images/ready_icon_on.png)no-repeat; background-size: contain; background-position: center;}
.contents.ready .container .top_box .file_box p{ text-indent: -5px; margin-top: 85px;}

.contents.complete .container .top_box .file_box{ background: url(../images/check_file_icon.png)no-repeat; background-size: contain; background-position: center;}
.contents.complete .container .top_box .file_box:hover{ background: url(../images/check_file_icon_on.png)no-repeat; background-size: contain; background-position: center;}
.contents.complete .container .top_box .file_box p{ display: none;}

.contents.download .container .top_box .file_box{ background: url(../images/download_icon.png)no-repeat; background-size: contain; background-position: center;}
.contents.download .container .top_box .file_box p{display: none;}

.loading_bar{width: 350px; height: 50px; margin-bottom: 30px; background-color: #8E8E8E; border-radius: 5px; text-align: center; line-height: 50px; position: relative; display: none;}
.loading_bar p{ position: absolute; left: 50%; transform: translateX(-50%); color: #fff; z-index: 5; font-size: 2.4rem;}
.loading_bar .fill_bar{ width: 0%; height: 100%; background-color: #a32035; border-radius: 5px; position: absolute; left: 0; top: 0; transition-duration: 1s;}
.contents .container button.sub_btn{position: absolute; left: 50%; transform:translateX(-50%);  bottom: 173px; font-size: 1.2rem; color: #6f7271; border-bottom: 1px solid #9e9e9f; outline: none; display: none;}

.contents.complete button.sub_btn{display: block;}
.contents.progress_bar.complete button.sub_btn{display: none;}

/* 프로그레스 바 활성화 */
.contents.progress_bar button.basic{display: none;}
.contents.progress_bar .loading_bar{display: block;}

/*.contents.sub_btn_active button.sub_btn{display: block;}*/

/* **************************************** 비밀번호 교체 페이지 */
.contents.password .form li input{ padding-left: 180px;}
.contents.password button.cancel_btn{ display: block; font-size: 1.8rem; color: #6f7271; border-bottom: 1px solid #9e9e9f; margin: 30px auto 0; outline: none;}
body.chang_pw_page .contents .form li:first-of-type input{ border-bottom: 0px;}