@charset "utf-8";

/* 비밀번호 변경 */
.form_area{width:385px;margin:0 auto}
.form_area .logo{padding:10px 0;text-align:center}
.form input[type=radio]{width:15px;height:15px;margin-top:0;vertical-align:bottom;border:2px solid #c6cacc;border-radius:10px;cursor:pointer}
.form input[type=radio]:checked{border-color:#007ac3;background-color:#007ac3}
.form input[type=radio] + label{color:#60666a;font-size:14px;cursor:pointer}
.form .tit_area{margin-bottom:20px;padding:20px 10px;text-align:center;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}
.form .tit{display:inline-block;color:#007ac3;font-size:14px;font-weight:500;font-family:'CJOnlyoneNewTitle';vertical-align:top}
.form .tip{padding-top:30px;color:#666;font-size:13px;line-height:1.5;text-align:center}
.form .tbl_write + .tip{margin-top:20px;border-top:1px solid #e0e0e0}
.tbl_write tbody th{color:#1a1a1a;font-size:15px;vertical-align:middle}
.tbl_write tbody td{padding:3px;text-align:center;vertical-align:middle}
.tbl_write tbody td.tl{padding:10px 10px 0;font-size:13px;line-height:1.5}
.tbl_write tbody td input{width:100%;height:27px;border:1px solid #999}
.tbl_write tbody td .btn{width:90%}
.tbl_write tbody .tr_pd.en.app_pd th,
.tbl_write tbody .tr_pd.en.app_pd td{padding-bottom:19px}
.radio{display:inline-block;vertical-align:top}

/* VPN 사용신청서 */
.fc_red{color:#f00 !important}
.epaper_area{width:750px;color:#666}
.epaper_area *{font-family:Dotum, AppleGothic, 'Lucida Grande', Arial, Verdana, sans-serif}
.epaper_area ::placeholder{color:rgba(255,0,0,.5);opacity:1}
.epaper_area :-ms-input-placeholder{color:rgba(255,0,0,.5);vertical-align:top}
.epaper_area ::-ms-input-placeholder{color:rgba(255,0,0,.5)}
.epaper_area input[type=radio],
.epaper_area input[type=checkbox]{height:auto;margin-top:0;margin-left:0;vertical-align:text-top;appearance:auto;cursor:pointer}
.epaper_area input[type=radio] + label,
.epaper_area input[type=checkbox] + label{cursor:pointer}
.epaper_area .layer_alert{padding:20px;color:#f00;font-size:16px;font-weight:700;background-color:#ffd800}
.epaper_area .tit{text-align:center}
.epaper_area .sec{padding:20px 15px 0}
.epaper_area .sec .sec_tit{margin-bottom:10px;font-size:14px;font-weight:700;line-height:1.5}
.epaper_area .sec .df .sec_tit{flex-shrink:0;margin-right:20px}
.epaper_area .sec .df .sec_tit .en{display:block;margin-top:13px;font-size:14px}
.epaper_area .sec .df .tip{font-size:14px;color:red;font-weight:700;line-height:1.3}
.epaper_area .sec .sec_tit .fc_red{margin-left:20px;font-size:13px;font-weight:400}
.epaper_area .sec .table{width:100%;table-layout:fixed;border:2px solid #ccc;border-collapse:collapse}
.epaper_area .sec .table tbody th{padding:8px;color:#444;font-size:12px;font-weight:700;line-height:1.5;text-align:left;border-right:1px solid #ccc;border-bottom:1px solid #ccc;background-color:#f5f5f5}
.epaper_area .sec .table tbody td{padding:8px;font-size:12px;line-height:1.5;vertical-align:middle;border-right:1px solid #ccc;border-bottom:1px solid #ccc}
.epaper_area .sec .table tbody td input:not([type=radio]):not([type=checkbox]){width:100%;height:22px;padding:0 3px;font-size:12px;border:1px solid #999;background-color:#fff}
.epaper_area .sec .table tbody td select{width:calc(33.33% - 6.66px);height:22px;padding:0 3px;font-size:12px;border:1px solid #999;background-color:#fff;appearance:auto}
.epaper_area .sec .table tbody td .clearfix > *{margin-right:10px}
.epaper_area .sec .table tbody td .clearfix > *:last-child{margin-right:0}
.epaper_area .sec .table tbody td .alert_msg{color:#f00;font-weight:700}
.epaper_area .sec .table tbody td:last-child{border-right:0}
.epaper_area .sec .table tbody tr:last-child th,
.epaper_area .sec .table tbody tr:last-child td{border-bottom:0}
.epaper_area .sec .vpn_apply tbody th{padding-right:0}
.epaper_area .sec .term_form{font-size:0}
.epaper_area .sec .term_form input{width:120px !important;background:#fff url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="18" height="18" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23999" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Crect width="16" height="16" x="4" y="5" rx="2"%2F%3E%3Cpath d="M16 3v4M8 3v4m-4 4h16M8 15h2v2H8z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat right 2px top 50%;cursor:pointer}
.epaper_area .sec .term_form .swung{display:inline-block;margin:0 5px;font-size:12px;line-height:22px;vertical-align:top}
.epaper_area .sec .box{padding:15px;font-size:12px;line-height:1.5;background-color:#eee}
.epaper_area .sec .box + .box{margin-top:10px}
.epaper_area .sec .box .checkbox{padding-left:20px;text-indent:-20px}
.epaper_area .sec .box .checkbox *{text-indent:0}
.epaper_area .sec .box .list li{padding-left:14px;text-indent:-14px}
.epaper_area .btn_area{margin-top:30px;font-size:0;text-align:center}
.epaper_area .btn_area .btn{margin-right:10px;padding:0 14px;font-size:14px;line-height:28px;border:1px solid #ccc;border-radius:2px;background-color:#f9f9f9}
.epaper_area .btn_area .btn:last-child{margin-right:0}
.epaper_area + .ui-datepicker *{font-family:Dotum, AppleGothic, 'Lucida Grande', Arial, Verdana, sans-serif}
.epaper_area .en{font-size:11px}

/* otp login */
.otp_login{position:relative;min-height:100vh;text-align:center;background-color:#eee}
.otp_login img{max-width:100%}
.otp_login .login_area{position:absolute;top:47.5%;left:50%;width:570px;transform:translate(-50%,-47.5%)}
.otp_login .login_area p{margin-top:10px;color:#1a1a1a;font-size:13px;line-height:1.5;word-break:keep-all}
.otp_login .login_form .row{margin-bottom:20px}
.otp_login .login_form .row input{width:100%;height:90px;padding:20px 5% 20px 80px;font-size:30px;font-family:'SeoulNamsanM';border-radius:45px;border-color:#cacaca;background-color:#fff;background-repeat:no-repeat;background-position:6% 50%}
.otp_login .login_form .row_id input{background-image:url(../images/icon/ico_id.png)}
.otp_login .login_form .row_pw input{background-image:url(../images/icon/ico_pw.png)}
.otp_login .login_form .btn_login{display:block;width:100%;height:90px;color:#fff;font-size:33px;font-family:'SeoulNamsanM';border:0;border-radius:45px;background-color:#007ac3}

/* otp app down */
.otp_app_down{position:relative;min-height:100vh;background-color:#eee}
.otp_app_down img{max-width:100%}
.otp_app_down > div{position:relative;max-width:750px;margin:0 auto}
.otp_app_down a{position:absolute;top:45.1%;width:48%;height:136px}
.otp_app_down .btn_android{left:0}
.otp_app_down .btn_ios{right:0}

/* gate */
.gate{letter-spacing:0}
.gate .bg{min-height:calc(100vh - 100px);padding:37px 0;text-align:center;background:url(../images/contents/login_bg.png) no-repeat 50% 50%;background-size:cover;box-sizing:border-box}
.gate .logo{margin-bottom:36px}
.gate .type_list{display:inline-flex}
.gate .type_list li{width:273px;height:282px;margin:0 16px;border-radius:20px;background-color:#fff;box-shadow:-5px -5px 15px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.1)}
.gate .type_list li dl{padding:40px}
.gate .type_list li dl dt{margin-bottom:20px;color:#007dc3;font-size:18px;font-weight:600;font-family:'CJOnlyoneNewTitle'}
.gate .type_list li dl dd:before{content:'';display:block;width:101px;height:100px;margin:0 auto 16px;background:url(../images/icon/ico_user.png) no-repeat 0 0}
.gate .type_list li dl dd .btn{display:inline-block;padding:0 29px;color:#fff;font-size:16px;font-weight:600;font-family:'CJOnlyoneNewTitle';line-height:48px;vertical-align:top;border-radius:40px;background:linear-gradient(90deg, #3747a6 0%, #2483bd 51.56%, #1bbdcc 100%);outline:none}
.gate .type_list li.new dl dd:before{background-image:url(../images/icon/ico_new_user.png)}
.gate .txt{margin-top:24px;color:#fff;font-size:14px;line-height:1.5}
.gate #footer{padding:32px 0;text-align:center;background-color:#f0f5f7}
.gate #footer .copyright{display:inline-block;padding-left:53px;color:#666;font-size:14px;font-weight:300;line-height:36px;vertical-align:top;background:url(../images/common/bi.png) no-repeat 0 50%}

/* VPN 계정 활성화 */
.vpn_body{min-width:900px;height:auto;padding:20px;letter-spacing:0;background-color:#ececec;box-sizing:border-box}
.vpn_body #wrap{min-height:calc(100vh - 40px);padding:40px 50px 50px;border-radius:20px;background-color:#fff}
.vpn_body #header{margin-bottom:60px}
.vpn_body #header .logo{text-align:center}
.vpn_body .login_box{width:50%;margin:40px auto;padding:72px;border:2px solid #e2e2e2;border-radius:10px;box-sizing:border-box}
.vpn_body .login_box .tit{display:block;margin-bottom:45px;font-size:35px;font-weight:600;font-family:'CJOnlyoneNewTitle';line-height:1;text-align:center}
.vpn_body .login_form .row{margin-bottom:40px}
.vpn_body .login_form .row label{font-weight:500;font-family:'CJOnlyoneNewTitle'}
.vpn_body .login_form .row dt{font-size:16px;line-height:1}
.vpn_body .login_form .row dt label{vertical-align:top}
.vpn_body .login_form .row dd{position:relative;border-bottom:2px solid #000}
.vpn_body .login_form .row dd input{width:100%;height:64px;padding:0;font-size:21px;border:0;outline:none}
.vpn_body .login_form .row dd input[readonly]{background-color:#fff}
.vpn_body .login_form .row dd input[type=radio]{width:18px;margin:0;cursor:pointer}
.vpn_body .login_form .row dd input[type=radio] + label{position:relative}
.vpn_body .login_form .row dd input[type=radio]:checked + label:before{content:'';position:absolute;top:50%;left:-13px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background-color:#2f2f2f}
.vpn_body .login_form .row dd input.pr150{padding-right:150px}
.vpn_body .login_form .row dd .btn{position:absolute;top:10px;right:0;width:140px;font-size:18px;line-height:42px;text-align:center;border:1px solid #1a1a1a;border-radius:5px;background-color:#fff}
.vpn_body .login_form .btn_login{display:block;width:100%;height:90px;color:#fff;font-size:21px;line-height:88px;text-align:center;border:1px solid #1a1a1a;border-radius:5px;background-color:#1a1a1a}
.vpn_body .agree_area{width:50%;margin:40px auto 60px;padding-bottom:60px;border-bottom:2px solid #e2e2e2;box-sizing:border-box}
.vpn_body .agree_area .agree_box{overflow-y:auto;max-height:680px;padding:60px 72px;line-height:1.5;border:2px solid #e2e2e2;border-radius:10px;box-sizing:border-box}
.vpn_body .agree_area .agree_box > *:not(:last-child){margin-bottom:10px}
.vpn_body .agree_area .agree_box .agree_tit{display:block;margin-bottom:15px;font-size:20px;font-family:'CJOnlyoneNewTitle';text-align:center}
.vpn_body .agree_area .agree_box .sign{text-align:right}
.vpn_body .agree_area .agree_box .sign table{margin-left:auto}
.vpn_body .agree_area .agree_box .sign table th{padding-right:5px;font-weight:400;word-spacing:10px}
.vpn_body .agree_area .txt{margin-top:40px;font-weight:500;font-family:'CJOnlyoneNewTitle';line-height:1.5;text-align:center}
.vpn_body .agree_area .agree{display:flex;justify-content:space-between;margin-top:40px}
.vpn_body .agree_area .agree p{font-size:14px}
.vpn_body .agree_area .agree .checkbox{position:relative}
.vpn_body .agree_area .agree .checkbox input{position:absolute;width:1px;height:1px;margin:0}
.vpn_body .agree_area .agree .checkbox label{display:block;position:relative;padding-left:23px;font-size:16px;line-height:18px}
.vpn_body .agree_area .agree .checkbox label:before{content:'';left:0;position:absolute;width:18px;height:18px;border:2px solid #e2e2e2;border-radius:4px;box-sizing:border-box}
.vpn_body .agree_area .agree .checkbox :checked + label:before{border-color:#007ac3;background-color:#007ac3}

/* 공지사항 팝업 */
.pop_contents{position:relative;width:95%;margin:0 auto;padding:10px 0}
.pop_contents .logo{margin-bottom:10px;text-align:center}
.pop_contents .page_tit{margin-bottom:10px;padding:5px 0 5px 8px;color:#1a1a1a;font-size:16px;font-weight:500;font-family:'CJOnlyoneNewTitle';text-align:left;background:url(../images/contents/bul_page_tit.png) no-repeat 0 50%}
.pop_contents .btn_sm{height:33px;font-size:14px;line-height:31px}
.pop_contents .btn_grey{color:#fff}
.pop_contents .btn_down:before{content:'file_download';font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:20px;line-height:1;vertical-align:top;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.pop_contents .blind{display:block;overflow:hidden;position:absolute;left:-9999px;width:0;height:0;font-size:0;line-height:0;text-indent:-9999px}
.pop_contents .search_form{margin-bottom:20px;padding:20px;border-radius:5px;background-color:#f6f6f6}
.pop_contents .search_form .form{display:flex;flex-wrap:wrap}
.pop_contents .search_form .form .col{display:flex}
.pop_contents .search_form .form .col > *{margin-right:10px}
.pop_contents .search_form .form .col > *:last-child{margin-right:0}
.pop_contents .search_form .form .col input{background-color:#fff}
.pop_contents .search_form .form .btn_area{margin-left:10px}
.pop_contents .board_top{margin-bottom:10px}
.pop_contents .board_top .page_tit{margin-top:4px;margin-bottom:0}
.pop_contents .board_top .total_num{margin-top:9px}
.pop_contents .board_top select{width:80px;height:33px;padding:0 10px;border-color:#e0e0e0;background:url(../images/common/bg_select.png) no-repeat right 5px top 50%;cursor:pointer}
.pop_contents .table_list{width:100%;border-top:2px solid #1a1a1a}
.pop_contents .table_list th{height:40px;color:#1a1a1a;font-size:14px;font-weight:600;font-family:'CJOnlyoneNewTitle';text-align:center;vertical-align:middle;border-bottom:1px solid #e0e0e0;background-color:#f6f6f6;box-sizing:border-box}
.pop_contents .table_list td{height:40px;color:#1a1a1a;font-size:14px;vertical-align:middle;text-align:center;border-bottom:1px solid #e0e0e0;box-sizing:border-box}
.pop_contents .table_list td .material-icons{font-size:16px}
.pop_contents .table_list td.tl a{display:inline-block;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}
.pop_contents .table_write{width:100%;border-top:2px solid #1a1a1a}
.pop_contents .table_write th{height:40px;font-family:'CJOnlyoneNewTitle';font-weight:600;vertical-align:middle;border-bottom:1px solid #e0e0e0;background-color:#f6f6f6;box-sizing:border-box}
.pop_contents .table_write td{height:40px;padding:10px;vertical-align:middle;border-bottom:1px solid #e0e0e0;box-sizing:border-box}
.pop_contents .pagination_area{margin-top:20px;text-align:center}
.pop_contents .pagination{display:inline-block;vertical-align:top}
.pop_contents .pagination a{display:inline-block;padding:0 5px;color:#666;line-height:20px;vertical-align:top}
.pop_contents .pagination a.active{color:#006ecd;font-weight:700}
.pop_contents .pagination .page_nav:before{color:#666;font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:20px;line-height:1;vertical-align:top;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.pop_contents .pagination .page_nav.mostprev:before{content:'keyboard_double_arrow_left'}
.pop_contents .pagination .page_nav.prev:before{content:'keyboard_arrow_left'}
.pop_contents .pagination .page_nav.next:before{content:'keyboard_arrow_right'}
.pop_contents .pagination .page_nav.mostnext:before{content:'keyboard_double_arrow_right'}

/** login **/
table.notice_list td{height:20px}

@media screen and (max-width:750px) {
    .otp_app_down a{height:18.133vw}
}
@media screen and (max-width:650px) {
    .otp_login .login_area{width:100%;padding:0 5%;box-sizing:border-box}
    .otp_login .login_area p{margin-top:5px}
    .otp_login .login_form .row input{height:70px;padding:10px 5% 10px 80px}
    .otp_login .login_form .btn_login{height:70px;padding:10px 5%}
}
@media screen and (max-width:550px) {
    .otp_login .login_form .row input::placeholder{font-size:24px}
    .otp_login .login_form .row input:-ms-input-placeholder{font-size:24px}
    .otp_login .login_form .row input::-ms-input-placeholder{font-size:24px}
    .otp_login .login_form .row input{height:60px;font-size:24px}
    .otp_login .login_form .btn_login{height:60px;font-size:28px}
}
@media screen and (max-width:450px) {
    .otp_login .login_form .row{margin-bottom:10px}
    .otp_login .login_form .row input::placeholder{font-size:20px}
    .otp_login .login_form .row input:-ms-input-placeholder{font-size:20px}
    .otp_login .login_form .row input::-ms-input-placeholder{font-size:20px}
    .otp_login .login_form .row input{height:50px;font-size:20px}
    .otp_login .login_form .row_id input{background-size:25px 25px}
    .otp_login .login_form .row_pw input{background-size:22px 28px}
    .otp_login .login_form .btn_login{height:50px;font-size:24px}
}
@media screen and (max-width:414px) {
    .otp_login .login_form .row input::placeholder{font-size:16px}
    .otp_login .login_form .row input:-ms-input-placeholder{font-size:16px}
    .otp_login .login_form .row input::-ms-input-placeholder{font-size:16px}
    .otp_login .login_form .row input{height:45px;padding:10px 5% 10px 60px;font-size:16px}
    .otp_login .login_form .row_id input{background-size:20px 20px}
    .otp_login .login_form .row_pw input{background-size:18px 23px}
    .otp_login .login_form .btn_login{height:50px;font-size:18px}
}