﻿@import url(../css/font_face.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    outline: none;
    background-repeat: no-repeat;
    font-family: "Pretendard", sans-serif;
    font-weight:500;
}

html,
body {
    position: relative;
    height: 100%;
    font-size:16px;
}

.costom_label {
    width: 120px;
    text-align: left;
    text-overflow: ellipsis;
    padding-right: 4px;
    font-size: 13px;
    letter-spacing: -0.03rem;
    color: rgba(90 97 107 / 9);
    font-weight: 520;
} 

/*[Chrome] input 자동완성 시 채워지는 배경 색상 글자 색상 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
}


.btn {
    border: 0;
    background-color: unset;
    cursor: pointer;
}

    .btn:hover {
        opacity: 0.5;
    }

    .btn.greenBtn {
        background-color: #00bfb2;
        color: #fff;
    }

    .btn.darkBtn {
        background-color: #464646;
        color: #fff;
    }

    .btn.whiteBtn {
        background-color: #fff;
        color: #464646;
        border: 1px solid #dedede;
    }


.Login_selectbox {
    font-size: 16px;
    height: 3.22rem;
}

.Login_userId {
    border: 0px solid #cecece;
    background-image: url(../Images/input_id.png);
    width: 25px;
    height: 1.42rem;
    background-color: #fff;
}

.Login_userPassword {
    border: 0px solid #cecece;
    background-image: url(../Images/input_password.png);
    width: 25px;
    height: 1.42rem;
    background-color: #fff;
}

.loginWrap {
    position: relative;
    background-position: center;
    background-size: cover;
    height: 100%;
    padding-left: calc(100% - 1340px);
}

    .loginWrap form {
        height: 100%;
    }

    .loginWrap.bg1 {
        background-image: url(../Images/Login/bg_01.jpg);
    }

    .loginWrap.bg2 {
        background-image: url(../Images/Login/bg_02.jpg);
    }

    .loginWrap.bg3 {
        background-image: url(../Images/Login/bg_03.jpg);
    }

    .loginWrap.bg4 {
        background-image: url(../Images/Login/bg_04.jpg);
    }

    .loginWrap.bg5 {
        background-image: url(../Images/Login/bg_05.jpg);
    }

    .loginWrap.bg6 {
        background-image: url(../Images/Login/bg_06.jpg);
    }

    .loginWrap.bg7 {
        background-image: url(../Images/Login/bg_07.jpg);
    }

    /* 20231116 수정 */
    .loginWrap .loginForm {
        background-image: url(../Images/bg_login_form.png);
        background-size: 100% 100%;
        height: 100%;
        width: 1340px;
        padding: 100px 100px 0 770px;
    }

        .loginWrap .loginForm .logo {
            width: 100%;
            height: 110px;
            background-image: url(../Images/logo.png);
            background-position: center;
            background-size: auto 100%;
            margin-bottom: 25px;
        }

        .loginWrap .loginForm .title {
            text-align: center;
            color: #666;
            margin-bottom: 40px;
        }

            .loginWrap .loginForm .title h1 {
                font-size: 34px;
                font-weight: 700;
            }

            .loginWrap .loginForm .title p {
                font-size: 18px;
            }

        .loginWrap .loginForm ul {
            width: 100%;
            margin-bottom: 50px;
        }

            .loginWrap .loginForm ul li {
                margin-bottom: 20px;
            }

                .loginWrap .loginForm ul li select {
                    width: 100%;
                    border: 1px solid #cdcdcd;
                    background-color: #fff;
                    border-radius: 8px;
                    padding: 15px 20px 10px 15px;
                    font-size: 16px;
                    color: #acacac;
                }

                .loginWrap .loginForm ul li .inpTxtWrap {
                    height: 77px;
                }

                    .loginWrap .loginForm ul li .inpTxtWrap label {
                        display: block;
                        font-size: 16px;
                        color: #666;
                        font-weight: 500;
                        margin-bottom: 5px;
                    }

                    .loginWrap .loginForm ul li .inpTxtWrap input {
                        width: 100%;
                        padding: 15px 20px 15px 15px;
                        color: #222;
                        border: 0px solid #cdcdcd;
                        border-radius: 8px !important;
                        font-size: 16px;
                        background-position: 10px center;
                    }

                        .loginWrap .loginForm ul li .inpTxtWrap input::-moz-placeholder {
                            color: #acacac;
                        }

                       /* .loginWrap .loginForm ul li .inpTxtWrap input::placeholder {
                            color: #acacac;
                        }
*/
                        .loginWrap .loginForm ul li .inpTxtWrap input:focus {

                            border: 0px solid #00bfb2 !important;
                        }


                .loginWrap .loginForm ul li .checkboxWrap {
                    margin-top: 15px;
                }

                .loginWrap .loginForm ul li .loginBtn{
                    text-align: center;
                    color: #fff;
                    font-size: 22px;
                    font-weight: bold;
                    background-color: #00bfb2;
                    border: 0;
                    border-radius: 8px;
                    padding: 15px 0;
                    width: 100%;
                }

                .loginWrap .loginForm ul li .linkBtn {
                    color: #666;
                    font-size: 19px;
                }

/** 20231121 모바일 로그인 페이지 CSS **/
@media screen and (max-width: 750px) {
    .loginWrap {
        position: relative;
        background-position: center;
        background-size: cover;
        height: 100%;
        padding-left: 0;
    }

        .loginWrap form {
            height: 100%;
        }

        .loginWrap.bg1 {
            background-image: url(../Images/bg_01.png);
        }

        .loginWrap.bg2 {
            background-image: url(../Images/bg_02.png);
        }

        .loginWrap .loginForm {
            position: absolute;
            top: calc(50% - 82.6677vw);
            left: 5%;
            background-image: unset;
            background-color: #fff;
            background-size: 100% 100%;
            height: 100%;
            width: 90%;
            padding: 5.3334vw 5.3334vw;
            border-radius: 2.6667vw;
        }

            .loginWrap .loginForm .logo {
                width: 100%;
                height: 18.6669vw;
                background-image: url(../Images/logo.png);
                background-position: center;
                background-size: auto 100%;
                margin-bottom: 3.333375vw;
            }

            .loginWrap .loginForm .title {
                text-align: center;
                color: #666;
                margin-bottom: 5.3334vw;
            }

                .loginWrap .loginForm .title h1 {
                    font-size: 6.66675vw;
                    font-weight: 700;
                }

                .loginWrap .loginForm .title p {
                    font-size: 4.80006vw;
                }

            .loginWrap .loginForm ul {
                width: 100%;
                margin-bottom: 10.6668vw;
            }

                .loginWrap .loginForm ul:last-child {
                    margin-bottom: 0;
                }

                .loginWrap .loginForm ul li {
                    margin-bottom: 2.6667vw;
                }

                    .loginWrap .loginForm ul li select {
                        width: 100%;
                        border: 1px solid #cdcdcd;
                        background-color: #fff;
                        border-radius: 2.13336vw;
                        padding: 4.00005vw 5.3334vw 2.6667vw 4.00005vw;
                        font-size: 4.26672vw;
                        color: #acacac;
                    }

                    .loginWrap .loginForm ul li .inpTxtWrap {
                        height: 20.53359vw;
                    }

                        .loginWrap .loginForm ul li .inpTxtWrap label {
                            display: block;
                            font-size: 16px;
                            color: #666;
                            font-weight: 500;
                            margin-bottom: 5px;
                        }

                        .loginWrap .loginForm ul li .inpTxtWrap input {
                            width: 100%;
                            padding: 2.40005vw 5.3334vw 2.40005vw 12.00015vw;
                            color: #222;
                            border: 1px solid #cdcdcd;
                            background-color: #fff;
                            border-radius: 2.13336vw;
                            font-size: 4.26672vw;
                            background-position: 2.6667vw center;
                            background-size: 6.66675vw;
                        }

                            .loginWrap .loginForm ul li .inpTxtWrap input::-moz-placeholder {
                                color: #acacac;
                            }

                            /*.loginWrap .loginForm ul li .inpTxtWrap input::placeholder {
                                color: #acacac;
                            }*/

                            .loginWrap .loginForm ul li .inpTxtWrap input:focus {
                                border: 2px solid #00bfb2;
                            }

                    /*                  .loginWrap .loginForm ul li .inpTxtWrap .Login_selectbox {
                                font-size: 16px;
                                height: 3.42rem;
                            }

                            .loginWrap .loginForm ul li .inpTxtWrap .Login_userId {
                                border: 0px solid #cecece;
                                background-image: url(../Images/input_id.png);
                                width: 25px;
                                height: 1.42rem;
                                background-color: #fff;
                            }

                            .loginWrap .loginForm ul li .inpTxtWrap .Login_userPassword {
                                border: 0px solid #cecece;
                                background-image: url(../Images/input_password.png);
                                width: 25px;
                                height: 1.42rem;
                                background-color: #fff;
                            }*/

                    .loginWrap .loginForm ul li .loginBtn {
                        text-align: center;
                        color: #fff;
                        font-size: 5.86674vw;
                        font-weight: bold;
                        background-color: #00bfb2;
                        border: 0;
                        border-radius: 2.13336vw;
                        padding: 3.3334vw 0;
                        width: 100%;
                        
                    }

                    .loginWrap .loginForm ul li .linkBtn {
                        color: #666;
                        font-size: 4.00005vw;
                    }

        .loginWrap .checkboxWrap {
            display: flex;
            align-items: center;
            margin-top: 4.00005vw;
        }

            .loginWrap .checkboxWrap input {
                display: none;
            }


    

}

.dx-texteditor-buttons-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: content;
    flex-basis: content;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left : 10px !important;
}
 

/* 텍스트 칼라 지정*/
.text-navy {
    color: #001f3f !important;
}

.text-olive {
    color: #3d9970 !important;
}

.text-lime {
    color: #01ff70 !important;
}

.text-fuchsia {
    color: #f012be !important;
}

.text-maroon {
    color: #d81b60 !important;
}

.text-blue {
    color: #007bff !important;
}

.text-indigo {
    color: #6610f2 !important;
}

.text-purple {
    color: #6f42c1 !important;
}

.text-pink {
    color: #e83e8c !important;
}

.text-red {
    color: #dc3545 !important;
}

.text-orange {
    color: #fd7e14 !important;
}

.text-yellow {
    color: #ffc107 !important;
}

.text-green {
    color: #28a745 !important;
}

.text-teal {
    color: #20c997 !important;
}

.text-cyan {
    color: #17a2b8 !important;
}

.text-white {
    color: #fff !important;
}

.text-gray {
    color: #6c757d !important;
}

.text-gray-dark {
    color: #343a40 !important;
}


.swal2-actions {
    display: flex;
    justify-content: center; /* 가운데 정렬, flex-end 등 사용 가능 */
 
}