@charset "utf-8";
/* CSS Document */

#wrap{width:100%; height:100%; min-width:1100px; min-height:1000px; background:url(../../images/main/main_contents_bg.jpg) no-repeat center top;}
    
.header_bg{width:100%; height:auto;}
.header_box{width:1100px; margin:0 auto;}
.header{height:72px;}

.visual{height:196px; position:relative; width: 1100px; margin: 0 auto;}
.visual_text{position:absolute; top:50px; left:25px;}
.btn_login{position:absolute; right:0; top:20px;}
.btn_login li{float:left; margin-left:5px; position: relative;}

.btn_login1{background:url(../../images/main/icon_img_login1.png) no-repeat 13px 8px #3a5bc9; padding: 6px 45px 6px 33px; color:#fff !important; font-size:12px; border-radius: 4px 4px; border:solid 1px #203ea2;}
.btn_login1:hover{background:url(../../images/main/icon_img_login1.png) no-repeat 13px 8px #2945a1;}

.btn_login2{background:url(../../images/main/icon_img_login2.png) no-repeat 13px 8px #3a5bc9; padding: 6px 15px 6px 33px; color:#fff !important; font-size:12px; border-radius: 4px 4px; border:solid 1px #203ea2;}
.btn_login2:hover{background:url(../../images/main/icon_img_login2.png) no-repeat 13px 8px #2945a1;}

.btn_login3{background:url(../../images/main/icon_img_login3.png) no-repeat 13px 8px #3a5bc9; padding: 6px 15px 6px 33px; color:#fff !important; font-size:12px; border-radius: 4px 4px; border:solid 1px #203ea2;}
.btn_login3:hover{background:url(../../images/main/icon_img_login3.png) no-repeat 13px 8px #2945a1;}

.btn_login4{background:url(../../images/main/icon_img_login4.png) no-repeat 13px 8px #3a5bc9; padding: 6px 15px 6px 33px; color:#fff !important; font-size:12px; border-radius: 4px 4px; border:solid 1px #203ea2;}
.btn_login4:hover{background:url(../../images/main/icon_img_login4.png) no-repeat 13px 8px #2945a1;}

.btn_login5{margin-top: -7px; background:url(../../images/main/icon_img_login51.png) no-repeat 13px 8px #3a5bc9; padding: 6px 15px 6px 33px; color:#fff !important; font-size:12px; border-radius: 4px 4px; border:solid 1px #203ea2;}
.btn_login5:hover{background:url(../../images/main/icon_img_login51.png) no-repeat 13px 8px #2945a1;}
.btn_login5 a{color: #fff;}

.smart_menu_box{height:129px; width:1100px; margin:0 auto; background:url(../../images/main/smart_menu_bg.png) no-repeat 0 bottom; position:relative;}
.smart_menu{position: absolute; top: 35px; left:30px; width: 97%;}
.smart_menu_ul{float: left;}
.smart_menu li{text-align: center; margin:0 15px 0 30px; line-height: 26px;}
.smart_menu li a{display: inline-block; font-size: 13px; color: #fff;}
.smart_menu li a:hover{color: #c3d2ff;}

.btn_smart_menu01{float:left; background:url(../../images/main/btn_smart_menu_off01.png) no-repeat 0 0; padding: 32px 70px 32px 100px; font-size: 0; margin: 10px 0 0 5px;}
.btn_smart_menu01:hover{background:url(../../images/main/btn_smart_menu_on01.png) no-repeat 0 0;}
.btn_smart_menu02{position:absolute; top:0px; right:235px; background:url(../../images/main/btn_smart_menu_off02.png) no-repeat 0 0; padding: 32px 100px 32px 100px; font-size: 0; margin: 10px 0 0 125px;}
.btn_smart_menu02:hover{background:url(../../images/main/btn_smart_menu_on02.png) no-repeat 0 0;}
.btn_smart_menu03{position:absolute; top:0px; right:0px; background:url(../../images/main/btn_smart_menu_off03.png) no-repeat 0 0; padding: 32px 90px 32px 100px; font-size: 0; margin: 10px 30px 0 0;}
.btn_smart_menu03:hover{background:url(../../images/main/btn_smart_menu_on03.png) no-repeat 0 0;}

.btn_smart_menu{float: right; background:url(../../images/main/btn_smart_menu1.png) no-repeat 0 0; padding: 18px 5px 20px 71px; font-size: 18px; color:#304a7e !important; margin-right: 6px;}

.smart_menu dl{float:left; margin-top: 2px;}
.smart_menu dt{text-align: center; font-size: 40px; color: #fff; font-weight: 600; line-height: 40px;}
.smart_menu dd{text-align: center; font-size: 11px; color: #fff;}

.smart_menu dt:hover{color: #d3d3d3;}
.smart_menu dd:hover{color: #d3d3d3;}
.smart_menu_span:hover{color: #d3d3d3;}

.smart_menu_span{float:left; background:url(../../images/main/btn_smart_menu2.png) no-repeat top center; font-size: 15px; color: #fff; text-align: center; padding-top: 21px; margin: 9px 0 0 24px;}

.notice_reference{float: right; margin-left: 7px}

.container{width:100%; clear:both; background:url(../../images/main/main_contents_bg1.jpg) no-repeat center bottom  #fff;}
.contents{width:1100px; margin:0 auto; padding-top:11px;}

.business_box{clear:both;}
.notice_box{background-color:#fff; width:821px; height:307px;  border:solid 1px #cecece; float:left; margin-right: 16px;}
.notice_tit{clear:both;}
.notice_tit li{float:left; height: 52px; line-height: 51px;}
.notice_tit a{display:inline-block; width:100%;}

.notice_on{width:29.6%; font-size:15px; text-align:center; border-right:solid 1px #cecece;}
.notice_on a{display:inline-block; color:#2c5ba9; font-weight:600;}

.notice_off{width:29.6%; background:#faf9fa; border-bottom:solid 1px #cecece; border-right:solid 1px #cecece; font-size:15px; text-align:center;}
.notice_off a{color:#414141; font-weight:600;}
.notice_off a:hover{display:inline-block; color:#2c5ba9; font-weight:600;}

.notice_more{border-bottom: solid 1px #cecece; width:10%; text-align:center; font-size:15px; color:#2c5ba9; background:url(../../images/main/icon_more_img.png) no-repeat 8px 18px; padding-left: 6px !important;}

.notice_cnt{clear:both; padding: 7px 20px 0px 20px; overflow:hidden;}
.notice_cnt li{font-size:14px; line-height:30px;}

.proceeding{color:#fff; background-color:#2c5ba9; border-radius: 3px 3px; padding: 3px 7px;}
.deadline{color:#fff; background-color:#838383; border-radius: 3px 3px; padding: 3px 14px;}

.notice_cnt_text{color:#747474; margin-left:13px; font-weight:600;}
.notice_cnt_text:hover{color:#2c5ba9;}

.notice_cnt_text_none{color:#747474; margin-left:13px; font-weight:600;}

.notice_day{color:#414141; font-size:13px !important; float:right;}

.notice_table1{width:100%;}
.notice_table1 th{}
.notice_table1 td{color: #414141; font-size: 13px;}
.notice_table1 td:last-child{text-align: right !important; height: 30px;}

.popup_box{width:259px; height:307px;  border:solid 1px #cecece; float:left; position:relative; overflow:hidden;}
.bullet{position:absolute; bottom:10px; right:13px;}
.bullet li{float:left; margin-left:5px;}

/*배너*/
.popzone_right {overflow:hidden; width:259px; margin-right:5px;}
.visualBg01 {height:307px;}
.indexImg {position:relative;width:259px;margin:0 auto;}
.visuals li {position:absolute;left:0;top:0;display:none;}
.visuals li:first-child {display:block;}
.control_wrap {position:absolute;top:275px;right:8px;}
.control_wrap button {display:block;background:url(../../images/main/banner_controller.png) no-repeat;}
.play_controll {float:left;width:26px;}
.play_controll button{width:20px;height:20px;cursor:pointer;text-indent:-9999px;border:none;background-position:0px 0px;}
.roll_control,.roll_control li {float:left;}
.roll_control li button {width:13px;height:21px;margin-right:3px;cursor:pointer;text-indent:-9999px;border:none;background-position:-67px 0px;}
.roll_control li.active button {background-position:-46px 0px;}


.banner {margin-top:30px;}
.banner ul li {float:left;}
.banner ul li a {display:block; float:left; background:#999; width:215px; height:80px; margin-right:5px;}

.banner_box{width:1100px; height:97px; clear:both; float:left; margin: 15px 0;}
.banner_box li{float:left; width:259px;}
.banner_box li dd{font-size:15px; color:#787879; font-weight:600; clear:both; line-height: 18px; margin-left:17px; letter-spacing:-1px;}
.banner_box li dd:hover{color:#2c5ba9;}
.banner_way1{margin:0 21px 0 22px;}
.banner_way2{margin-left: 19px;}

.btn_banner1{border:solid 1px #cecece; display:inline-block; width:100%; background:url(../../images/main/icon_img_banner1.png) no-repeat 166px 10px; padding: 15px 0 15px 0;}
.btn_banner1:hover{border:solid 1px #446fb7; color:#2c5ba9 !important;}
.btn_banner1 dt{font-size:13px; color:#ffffff; font-weight:600; background-color:#fe6452; border:solid 1px #d2402f; float:left; padding: 4px 13px; border-radius: 5px 5px; margin-bottom: 8px; margin-left:17px;}

.btn_banner2{border:solid 1px #cecece; display:inline-block; width:100%; background:url(../../images/main/icon_img_banner2.png) no-repeat 166px 10px; padding: 15px 0 15px 0}
.btn_banner2:hover{border:solid 1px #446fb7;}
.btn_banner2 dt{font-size:13px; color:#ffffff; font-weight:600; background-color:#2b9fda; border:solid 1px #2177a3; float:left; padding: 4px 13px; border-radius: 5px 5px; margin-bottom: 8px; margin-left:17px;}

.btn_banner3{border:solid 1px #cecece; display:inline-block; width:100%; background:url(../../images/main/icon_img_banner3.png) no-repeat 166px 10px; padding: 15px 0 15px 0;}
.btn_banner3:hover{border:solid 1px #446fb7;}
.btn_banner3 dt{font-size:13px; color:#ffffff; font-weight:600; background-color:#41ba98; border:solid 1px #239676; float:left; padding: 4px 13px; border-radius: 5px 5px; margin-bottom: 8px; margin-left:17px;}

.btn_banner4{border:solid 1px #cecece; display:inline-block; width:100%; background:url(../../images/main/icon_img_banner4.png) no-repeat 166px 10px; padding: 15px 0 15px 0;}
.btn_banner4:hover{border:solid 1px #446fb7;}
.btn_banner4 dt{font-size:13px; color:#ffffff; font-weight:600; background-color:#6888e2; border:solid 1px #415fb4; float:left; padding: 4px 13px; border-radius: 5px 5px; margin-bottom: 8px; margin-left:17px;}

.alliance_box{width:1100px; clear:both; float:left; margin: 5px 0 0 0;}
.blind{overflow: hidden; position: absolute; top: -1px; left: -1px; z-index: -1; width: 1px; height: 0px; font-size: 0; line-height: 0; white-space: nowrap;}

/* banner */
.footer_banner_zone{position:relative; width:100%; margin-bottom: 20px;}
.footer_banner_zone .flow_banner_box{position:relative; width:100%;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul{*zoom:1;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul:after{content:""; display:block; clear:both;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul li{float:left; padding-right:27px;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul li img{width: 130px; height: 43px;}
.flow_bann_area{padding:0 0 0 0;}

/*푸터*/
.footer_bg{clear:both; margin-top:18px; width:100%;background:#efefef url(../../images/kofac/sub/footer-line.png) top left repeat-x; height:120px;}

.footer {position:relative;max-width:1100px;margin:0 auto;}
.footer .footerguide {margin-bottom:15px;}
.footer .footerguide a{display:inline-block;color:#000;height:40px;line-height:40px;padding-right:12px; font-weight:600; text-transform: none !important; color:#636363; font-size:13px;}
.footer .footerguide a:hover {text-decoration:underline;}
.footer .footerguide .footerguide-color {font-weight:bold;color:#597fd9;}

.footer .footerguide .footerguide-last {;padding-left:12px;}
.footer .footerguide .ftguide {padding-left:12px;}

.footer .address {margin:17px 0 0 170px;}
.footer .copy {margin:3px 0 0 170px;}
.footer .copy .address-color {font-weight:normal;color:#597fd9;}
.footer .logo{position:absolute;width:135px;height:32px;top:60px;left:0;background:url(../../images/kofac/sub/logo.png) no-repeat}
.footer .logo span{display:none;}
.footer .footer-bn {position:absolute;top:60px;right:150px;display:inline-block;width:70px;height:32px;background-image:url(../../images/kofac/sub/foot-bn.png);background-position: top left;background-repeat:no-repeat;background-size:100%;}
.footer .footer-bn span {display:none;}

#footersitelink {float:right;width:215px; margin-top:-1px;}
#footersitelink .footersitelinkwrap{min-height:0;overflow:hidden}
#footersitelink .footersitelinkwrap strong,
#footersitelink .footersitelinkwrap ul{display:none}
#footersitelink .footersitelinkwrap form{display:block;margin:0;overflow:hidden}
.familyset{float:left;width:80%;overflow:hidden}
#footersitelink .footersitelinkwrap input[type="submit"]{float:left}
#footersitelink .footersitelinkwrap select{width:100%;border:1px solid #d1d1d1;height:40px;line-height:20px;padding:10px 5px 10px 5px;font-weight:600;}
#footersitelink .footersitelinkwrap input[type="submit"]{width:20%;padding:0;border:0;height:40px;background:#555859;color:#fff;}
#footersitelink .footersitelinkwrap input[type="submit"]{width:20%;padding:0;border:0;height:40px;background:#555859;color:#fff;font-family:'NotoSans';}=======
#footersitelink .footersitelinkwrap input[type="submit"]{width:20%;padding:0;border:0;height:40px;background:#555859;color:#fff;font-family:'NotoSans';}>>>>>>> .r1422

/*하얀색 점*/
.star-group .locate {background-color:#fff; border-radius:100%; opacity:0;  -webkit-transition:opacity 0.5s ease;   transition:opacity 0.5s ease;   z-index:60}

.star-group .locate strong {
    width:3px;
    height:3px;
    font-size:0;
    color:#cecece;
    line-height:0;
    display:block;
    position:relative;
    z-index:32;
    background:#fff;
    border-radius:100%;
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
    -webkit-box-shadow:0 0 10px #fff;
    box-shadow:0 0 10px #fff
}

/*하얀색 테리리 원*/
.star-group .locate strong:after {
    border:1px solid rgba(255,255,255,0.5);
    -webkit-animation:circleWave 1s ease infinite;
    animation:circleWave 1s ease infinite;
    display:none;
    width:5px;
    height:5px;
    border-radius:50%;
    position:absolute;
    top:-2px;
    left:-2px;
    content:"";
    opacity:0;
}

.star-group .locate .shine:after {display:block}
.star-group.active .locate {opacity:1}


/*점 위치 영역 */
.star-group .locate.rnd1 {position: absolute; top:105px; left:243px;}

/*rnd4 테두리원 속도 조절*/
.star-group .locate.rnd1 strong:after {-webkit-animation-duration:1.5s; animation-duration:2s}

/*점 위치 영역 */
.star-group .locate.rnd2 {position: absolute; top:21px; left:130px;}

/*rnd4 테두리원 속도 조절*/
.star-group .locate.rnd2 strong:after {-webkit-animation-duration:1.5s; animation-duration:4s}

/*점 위치 영역 */
.star-group .locate.rnd3 {position: absolute; top:73px; left:8px;}

/*rnd4 테두리원 속도 조절*/
.star-group .locate.rnd3 strong:after {-webkit-animation-duration:1.5s; animation-duration:3s}

/*점 위치 영역 */
.star-group .locate.rnd4 {position: absolute; top:155px; right:257px;}

/*rnd4 테두리원 속도 조절*/
.star-group .locate.rnd4 strong:after {-webkit-animation-duration:1.5s; animation-duration:1.5s}

@-webkit-keyframes circleWave {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes circleWave {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

/*메인 메뉴*/
.content {position:relative;width:1110px;height:100%;margin:0 auto;}
#container {position:relative; width:100%;}
.depth_font1{font-size:13px !important; color:#707070 !important; font-weight:400 !important;}

/* header */
.header {position:relative; top:0; z-index:10;width:100%;box-shadow:0px -8px 26px 5px rgba(0,0,0,0.2); height:75px;}
.header .logo {}
.header .logo a {display:inline-block;position:absolute;left:0px;top:20px;z-index:0;width:171px;height:33px;background:url(../../images/main/logo.png) no-repeat 0 0;font-size:0;}
.header .top {position:relative;width:100%;height:40px;background:#71ad2c;}

.header .menu {overflow:hidden;position:relative;width:100%;height:72px;}
.header .menu .content:after {
    content:'';
    display:inline-block;
    position:absolute;left:-420px;top:72px;z-index:-1;
    width:1920px;height:400px;
    background: url(../../images/kofac/gnb_menu_bg.jpg) no-repeat center top;
}
        
.header .menu .gnb {display:inline-block;position:absolute;left:200px;top:25px;z-index:0;}
.header .menu .gnb:after {content:'';clear:both;display:block;}
.header .menu .gnb > li {float:left;position:relative;display:inline-block;text-align:center;}
.header .menu .gnb > li:first-child {background:none;}
.header .menu .gnb .depth1 {display:inline-block;position:relative;z-index:20;font-size:18px;color:#fff;line-height:1em;text-align:center;font-weight:600;}
.header .menu .gnb .depth1:hover{color: #ffe400;}

/* 대메뉴 */
.header .menu .gnb #menu_width1 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width1 .depth2:before {
    content:'';
    display:inline-block;
    position:absolute;right:10px;top:60px;z-index:0;
    width:1px;height:333px;
    background:#e5e5e5;
}

.header .menu .gnb #menu_width2 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width2 > a {text-align:center;}
.header .menu .gnb #menu_width2 .depth2:before {
    content:'';
    display:inline-block;
    position:absolute;right:10px;top:60px;z-index:0;
    width:1px;height:333px;
    background:#e5e5e5;
}

.header .menu .gnb #menu_width3 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width3 > a {text-align:center;}
.header .menu .gnb #menu_width3 .depth2:before {
    content:'';
    display:inline-block;
    position:absolute;right:10px;top:60px;z-index:0;
    width:1px;height:333px;
    background:#e5e5e5;
}

.header .menu .gnb #menu_width4 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width4 > a {text-align:center;}
.header .menu .gnb #menu_width4 .depth2:before {
    content:'';
    display:inline-block;
    position:absolute;right:10px;top:60px;z-index:0;
    width:1px;height:333px;
    background:#e5e5e5;
}

.header .menu .gnb #menu_width5 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width5 > a {text-align:center;}
.header .menu .gnb #menu_width5 .depth2:before {
    content:'';
    display:inline-block;
    position:absolute;right:10px;top:60px;z-index:0;
    width:1px;height:333px;
    background:#e5e5e5;
}

.header .menu .gnb #menu_width6 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width6 > a {text-align:center;}
.header .menu .gnb #menu_width6 .depth2:before {
    content:'';
    display:inline-block;
    position:absolute;right:10px;top:60px;z-index:0;
    width:1px;height:333px;
    background:#e5e5e5;
}

.header .menu .gnb #menu_width7 {position:relative;width:130px;height:430px;}
.header .menu .gnb #menu_width7 > a {text-align:center;}

/* 서브 메뉴 */
.header .menu .gnb .depth2 {display:inline-block;position:absolute;left:0;top:0;z-index:0;width:130px;height:430px;padding:60px 0 0 13px;text-align:left;}
.header .menu .gnb .depth2 > li {margin:0 0 5px 0; }
.header .menu .gnb .depth2 > li > a {display:inline-block;color:#000;font-weight:400; font-size:13px; line-height:1.1em;letter-spacing:-0.5px;text-transform:uppercase;border-bottom:1px solid #fff;}
.header .menu .gnb .depth2 > li > a span {display:block;margin:9px 0 0 0;font-size:14px;color:#555;line-height:0.8em;text-transform:none;border-bottom:1px solid #fff;}
.header .menu .gnb .depth2 > li:hover > a,
.header .menu .gnb .depth2 > li.active > a {color:#224ebd;border-bottom:1px solid #224ebd;}
.header .menu .gnb .depth2 > li > a:focus {color:#224ebd;border-bottom:1px solid #224ebd;}
.header .menu .gnb .depth2 > li:hover span,
.header .menu .gnb .depth2 > li.active span,
.header .menu .gnb .depth2 > li > a:focus span {color:#224ebd;}

.login_modal {padding-top:200px;}

.login_box {
    width: 477px;
    height: 496px;
    z-index: 10001;
    background: url(../../images/login/login_box_bg3.jpg) no-repeat 0 0;
}

.login_box input {
    color: #636363;
}

.login_tit_box {
    position: relative;
    padding-top:71px;
    margin-bottom: 30px;
}

.login_tit {
    color: #7c7c7c;
    font-size: 0;
    display:inline-block;
    font-weight: 600;
    text-align:center;
    margin: 0 0 0 73px;
    height:30px;
    /* background: url(../../images/login/kosac_logo.png) no-repeat 0 0;  */
}
.login_tit img {width: 100%; max-width: 224px;}
.login_tit:after {content: ""; display: block; width: 88px; height: 2px; margin-top:18px; background-color: #2485ee;}


.login_id {
    margin: 15px 73px 15px 73px;
}

.id_input {
    box-sizing: border-box;
    height: 45px !important;
    border: 1px solid #ccc;
    padding-bottom: 3px;
    padding-left: 8px;
    background: #f8f8f8 !important;
    font-size: 12px;
    width: 525px;
    color: #636363 !important;
}

.md_login_int {margin-bottom: 20px; padding:7px 14px; border-bottom:1px solid #b6b6b6;background:#fff;}
.md_login_int p{padding: 0 0 0 26px; background:url(../../images/login/modal_login_icon.png) no-repeat 0 9px;}
.md_login_int p input {  height: 32px; border:0px; width:100%; max-width: 253px;}
.md_login_int .pw_int_p  {  background:url(../../images/login/modal_login_icon.png) no-repeat 0 -48px; }

.login_pass {
    margin: 15px 73px 35px 73px;
}

.password_input {
    box-sizing: border-box;
    height: 45px !important;
    border: 1px solid #ccc;
    padding-bottom: 3px;
    padding-left: 8px;
    background: #f8f8f8 !important;
    font-size: 12px;
    width: 525px;
    color: #636363 !important;
}

.check_area {
    font-size: 14px;
    margin:0 auto;
    width:85%;
    border-top: solid 1px #cecece;
    text-align: center;
    padding-top: 30px;
}

.check_area a{color: #333; padding: 7px 20px; border: solid 1px #d2d2d4;}
.check_area a:hover{color: #2861a0;}

.check_area .find_area {
    margin-right: 3px;
     font-weight: 600;
}

.check_area .join_area {
    font-weight: 600;
     margin-right: 3px;
}

.login_btn {
    margin: 0 0 0 72px;
    width: 332px;
    height: 50px;
    text-align: center;
    line-height: 48px;
    display: inline-block;
    font-weight: 600;
    background-color: #006ab8;
    font-size: 15px;
    color: #fff !important;
}

.login_btn:hover,.login_btn:focus {
    background-color: #085d9c;
    color: #fff;
}
.login_btn:focus{
    outline-offset: 2px;
    outline-width: 2px;
    outline-style: dotted;
}

.login_clse {
    position: absolute;
    top:25px;
    right:30px;
}


/*2018-02-02*/

$circle-size: 120px;
$circle-background: #D9D9D9;
$circle-color: #1291D4;
$inset-size: 105px;
$inset-color: #fbfbfb;
$transition-length: 1s;

.ko-progress-circle {
	margin: 20px auto;
	width:  $circle-size;
	height: $circle-size;

	background-color: $circle-background;
	border-radius: 50%;
		.ko-progress-circle__slice, .ko-progress-circle__fill {
			width:    $circle-size;
			height:   $circle-size;
			position: absolute;
			-webkit-backface-visibility: hidden;
			transition: transform $transition-length;
			border-radius: 50%;
		}
		.ko-progress-circle__slice {
			clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
			.ko-progress-circle__fill {
				clip: rect(0px, $circle-size/2, $circle-size, 0px);
				background-color: $circle-color;
			}
	}
	.ko-progress-circle__overlay {
		width:       $inset-size;
		height:      $inset-size;
		position:    absolute;
		margin-left: ($circle-size - $inset-size)/2;
		margin-top:  ($circle-size - $inset-size)/2;

		background-color: $inset-color;
		border-radius: 50%;
	}

	$i: 0;
	$increment: 180deg / 100;
	@while $i <= 100 {
		&[data-progress='#{$i}'] {
				.ko-progress-circle__slice.full, .ko-progress-circle__fill {
          transform: rotate($increment * $i);
				}	
				.ko-progress-circle__fill.ko-progress-circle__bar {
					transform: rotate($increment * $i * 2);
				}
      $i: $i + 1;
		}
	}
}

/* 2023-09-12 otp */

.otp_wrap *{box-sizing: border-box;}
.otp_wrap{width: 100%; height: 100vh; background:url(/images/login/login_bg.jpg) no-repeat 0 0;}
.otp_wrap .login_box{width: 682px; height: 685px; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);background: #fff;}
.otp_wrap .box_in{width: 100%; height: 100%; padding: 40px; overflow-y: auto;}
.otp_wrap .tit{text-align: center; margin-bottom: 36px;}
.otp_wrap .tit h1{font-size: 24px; color: #000; padding-bottom: 15px;}
.otp_wrap .tit p{font-size: 18px; color:#7D7D7D;}
.otp_wrap .cont{max-width: 480px; margin: 0 auto 40px;}
.otp_wrap .cont h2{color: #333333;font-size: 18px;padding-bottom: 20px;}

.otp_wrap .cont.app .item{max-width: 450px; margin: 0 auto 8px; background: #F3F3F3;}
.otp_wrap .cont.app .item a{padding: 13px; display: flex; align-items: center;}
.otp_wrap .cont.app .item .logo{width: 32px;height: 32px;margin-right: 14px;position: relative;background-repeat: no-repeat;background-position: center;}
.otp_wrap .cont.app .item.google .logo{background-image: url(/images/login/ico_google_play.png);}
.otp_wrap .cont.app .item.apple .logo{ background-image: url(/images/login/ico_apple.png);}
.otp_wrap .cont.app .item .logo::after{position: absolute; width: 1px; height: 30px; top: 50%; transform: translateY(-50%); right: -14px; background: #CBCBCB; content: '';}
.otp_wrap .cont.app .item .info{padding-left: 17px;}
.otp_wrap .cont.app .item .info p{font-size: 16px;color: #000;font-weight: 600;}
.otp_wrap .cont.app .item .info span{font-size: 14px; color: #909090;}
.otp_wrap .cont.qr_code .code_box{max-width: 450px; padding: 35px; margin: 0 auto; text-align: center; background: #F3F3F3;}
.otp_wrap .cont.qr_code .key_wrap{display: flex;justify-content: center;align-items: center;margin-top: 15px;}
.otp_wrap .cont.qr_code .key_wrap input.form-control {border: none; background: transparent; box-shadow: unset; width: auto;}
.otp_wrap .cont.qr_code .key_wrap a.copy{padding: 5px 13px; font-size: 12px; border-radius: 5px; border: 1px solid #B4B4B4; background: #fff;}
.otp_wrap .cont.otp_code input{height: 50px; max-width: 450px; margin: 0 auto;}
.otp_wrap .cont.otp_code span.warning{color: #CB4444; margin-left: 14px; padding-top: 10px; display: block;}

.otp_wrap .btn_wrap{max-width: 450px; margin: 0 auto; text-align: center;}
.otp_wrap .btn_wrap .btn{font-size: 18px;width: 220px;height: 50px;line-height: 47px;border-radius: 0;}
.otp_wrap .btn_wrap .btn.blue{color: #fff;background: #2882BF;margin-right: 7px;}
.otp_wrap .btn_wrap .btn.white{background: #fff; border: 1px solid #C5C5C5; color: #333333; }

.login_box.otp .otp_box{padding: 0 47px}
.login_box.otp strong{text-align: center;font-size: 20px;display: block;color: #333;padding-bottom: 20px;}
.login_box.otp .id_box{text-align: center;background: #EDEDED;border-radius: 5px;color: #333;font-size: 16px;padding: 14px 0;margin-bottom: 10px;} 
.login_box.otp .form-control{box-sizing: border-box;height: 50px;font-size: 18px;}
.login_box.otp .warning{color: #CB4444;font-size: 12px;line-height: 1.6;}
.login_box.otp .btn_wrap{border-bottom: 1px solid #CECECE; padding: 14px 0;}
.login_box.otp .login_btn{margin: 0; width: 100%; background: #006ab8; font-size: 18px; border: 0; cursor: pointer;}


/* 20250217 로그인 패스워드 숨김 버튼 */

.login_pass{display: flex; align-items: center; gap: 5px;}
.login_pass .pw_int_p{flex: 1;}
.login_pass .pw_view_btn{padding-left: 5px; font-size: 14px;}
.pw_view_btn.on .bi-eye{display: none;}
.pw_view_btn .bi-eye-slash{display: none;}
.pw_view_btn.on .bi-eye-slash{display: block;}