@charset "utf-8";

body{position: relative;background: linear-gradient(90deg, rgb(0,87,149), rgb(1,145,148));}
body:before{display: block;position: absolute;top: 35px;right: 110px;width: 457px;height: 442px;background: url("../images/program/login_bg1.png") no-repeat;}

#header .logo{display: inline-block;}
#header .logo a{color: #fff;}
#header .logo a:before{background-image: url("../images/program/login_logo.png");}

#header .header_box .btn.back_btn{margin-left: 20px;border-width: 0;font-size: 16px;line-height: 24px;color: #005795;font-weight: 400;border-radius: 5px;}
#header .header_box .btn.back_btn:hover{color: #fff;}

#header .header_box .btn.back_btn span{position: relative;padding-left: 20px;}
#header .header_box .btn.back_btn span:before{display: block;position: absolute;top: calc(50% - 6px);left: 0;width: 12px;height: 12px;background: url("../images/program/back_icon.png") no-repeat;}
#header .header_box .btn.back_btn:hover span:before{background-position-x: -12px;color: #fff;}

@media all and (min-width: 1001px){
    #header{height: 130px;}
    #header .header_box{padding-top: 42px;padding-bottom: 40px;}
}

#container{position: relative;overflow: hidden;z-index: 1;}
#container:before{display: block;position: absolute;top:403px;left: 0;width: 100%;height: 100%;background-color: #f1f9fa;z-index: -1;}
#container:after{display: block;position: absolute;top: 154px;left: 60px;width: 721px;height: 199px;background: url("../images/program/login_bg2.png") no-repeat;z-index: -1;}

.login_title{margin-top: 30px;margin-bottom: 66px;font-size: 50px;line-height: 76px;letter-spacing: -0.02em;text-align: center;font-weight: 800;color: #fff;word-break: keep-all;}
.login_title span{display: block;color: #fdf7d3;}


.login_wrap{width: 1200px;margin: 0 auto 90px;padding: 70px;background-color: #fff;border-radius: 30px;font-size: 0;line-height: 0;box-shadow: 44px 41px 50px 0 rgba(126, 171, 174, 0.2);}

.login_wrap .login_box{display: inline-block;width: calc((100% - 30px) / 2);padding: 40px 80px 45px;margin-right: 30px;background-color: #ecf7fb;border-radius: 10px;text-align: center;}
.login_wrap .login_box:nth-child(2n){margin-right: 0;}

.login_wrap .login_box .login_con{position: relative;padding-top: 120px;}
.login_wrap .login_box .login_con:before{display: block;position: absolute;top: 0;left: calc(50% - 50px);width: 100px;height: 100px;background: url("../images/program/login_icon.png") no-repeat;}
.login_wrap .login_box.type2 .login_con:before{background-position-x: -100px;}

.login_wrap .login_box .login_con > .title{margin-bottom: 10px;font-size: 20px;line-height: 30px;font-weight: 500;color: #173465;}

.login_wrap .login_box .login_con > .text{margin-bottom: 24px;font-size: 15px;line-height: 20px;color: #7f8b9e;word-break: keep-all;}

.login_wrap .login_box .login_btn_wrap > .btn{width: 260px;height: 45px;padding: 9px 10px;font-size: 15px;line-height: 26px;}

@media all and (max-width: 1800px) {
    body:before{top: 90px;width: 360px;height: 348px;background-size: contain;}
}

@media all and (max-width: 1600px) {
    body:before{top: 175px;width: 250px;height: 242px;}
}

@media all and (max-width: 1400px) {
    body:before{top: 210px;right: 90px;width: 180px;height: 174px;}
}

@media all and (max-width: 1240px) {
    .login_wrap{width: 1000px;padding: 50px;}
}

@media all and (max-width: 1000px) {
    #container:after{display: none;}
    body:before{display: none;}

    .login_wrap{width: 94%;}

    .login_wrap .login_box{display: block;width: 100%;margin-right: 0;}
    .login_wrap .login_box:nth-child(n + 2){margin-top: 20px;}

    .login_wrap .login_box .login_con{padding-top: 0;padding-left: 140px;}
    .login_wrap .login_box .login_con:before{top: calc(50% - 50px);left: 0;}
}

@media all and (min-width: 801px) {
    .login_wrap .login_box .login_btn_wrap > .btn:hover{background-color: #061d48;}
}

@media all and (max-width: 800px) {
    #container:before{top: 280px;}

    .login_wrap{padding: 30px;}

    .login_title{margin-bottom: 30px;font-size: 35px;line-height: 50px;}

    .login_wrap .login_box{padding: 20px 50px;}

    .login_wrap .login_box .login_con{padding-left: 90px;}

    .login_wrap .login_box .login_con:before{top: calc(50% - 35px);width: 70px;height: 70px;background-size: 200%;}
    .login_wrap .login_box.type2 .login_con:before{background-position-x: -70px;}


    .login_wrap .login_box .login_con > .title{font-size: 18px;line-height: 26px;}
    .login_wrap .login_box .login_con > .text{margin-bottom: 15px;font-size: 14px;line-height: 18px;}

    .login_wrap .login_box .login_btn_wrap > .btn{max-width: 100%;height: 40px;padding: 8px 10px;font-size: 14px;line-height: 22px;}
}

@media all and (max-width: 640px) {
    .login_title{font-size: 20px;line-height: 30px;}

    .login_wrap{padding: 20px;border-radius: 10px;}

    .login_wrap .login_box{padding: 20px;}

    .login_wrap .login_box .login_con:before{top: 0;left: calc(50% - 25px);width: 50px;height: 50px;background-size: 200%;}
    .login_wrap .login_box.type2 .login_con:before{background-position-x: -50px;}

    .login_wrap .login_box .login_con{padding-top:65px;padding-left: 0;}
}

/* 팝업 */

.popup.login_adduction .bbs .p-search .form_title{width: 106px;height: 100%;margin-right: 5px;padding: 9px 10px 10px;font-size: 16px;line-height: 26px;color: #fff;text-align: center;background-color: #3a465b;border-radius: 5px;vertical-align: top;}
.popup.login_adduction .bbs .p-search .input_box{width: calc(100% - 111px);font-size: 16px;line-height: 26px;}

.popup.login_adduction .btn_wrap{margin-top: 30px;margin-bottom: 10px;}
.popup.login_adduction .btn{font-size: 15px;line-height: 26px;}

@media all and (max-width: 800px) {
    .popup.login_adduction .bbs .p-search .form_title{padding: 7px 10px;font-size: 14px;}

    .popup.login_adduction .btn_wrap{margin-top: 20px;margin-bottom: 10px;}
    .popup.login_adduction .btn{font-size: 14px;line-height: 24px;}
}

/* 2023.03.17 */


@media all and (min-width: 801px) {
    .login_wrap{width: 800px;text-align: center;}
    .login_wrap .login_box{width: 100%;margin-right: 0;}
}

@media all and (max-width: 1000px) {
    .login_wrap .login_box:nth-child(n + 2){margin-top: 0;}
}