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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ------------------------- Reset : Start ------------------------- */
html { font-size: 0; }
html, body { width: 100%; height: 100%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { padding: 0; margin: 0;}
fieldset, img { border: none; }
dl, ul, ol, menu, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; }
input, select, textarea, button { vertical-align: middle; }
input, input:focus, button:focus, textarea:focus { outline: none; }
button { border: 0 none; background-color: transparent; cursor: pointer; }
body { overflow-x: hidden; position: relative; background: #FFFFFF; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
body, th, td, input, select, textarea, button, pre { font-weight: 400; line-height: 1; font-family: 'Pretendard', 'Montserrat', 'MalgunGothic', sans-serif; letter-spacing: 0; }
a {text-decoration: none; cursor: pointer; color: #A3A4A6; }
address, caption, cite, code, dfn, em, var, i { font-style: normal; font-weight: 400; }
.clear { clear: both; }
figure { line-height: 0; }
img { max-width: 100%; vertical-align: top; }
strong, b, em { font-weight: 400; }
table { border-collapse: collapse; }
:disabled { cursor: not-allowed; }
br { font-family: 'Dotum'; }

/* MediaQuery : Start */
@media screen and (max-width: 1920px) {
    body {
        overflow-x: auto;
        width: 100%;
        min-width: 1887px;
    }

    body.login {
        overflow-x: auto;
        width: 100%;
        min-width: auto;
    }
}

/* MediaQuery : End */
/* ------------------------- Reset : End ------------------------- */





/* ------------------------- Common : Start ------------------------- */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.block {
    display: block !important;
}
.inline {
    display: inline !important;
}
.inline-block {
    display: inline-block !important;
}
.none {
    display: none !important;
}
.expand,
.input-group.expand .tf-comm {
    width: 100% !important;
    min-width: 100% !important;
}
.form-group .expand,
.form-group .tf-comm.expand,
.form-group .expand .select2-container {
    width: calc(100% - 32px) !important;
    min-width: calc(100% - 32px) !important;
}
.h-expand {
    height: 100% !important;
}
.GuideArea {
    width: 100%;
    min-height: 50px;
    font-size: 14px;
    background: rgba(235, 61, 61, 0.15);
}
.w-auto {
    width: auto !important;
    min-width: auto !important;
}
/* ------------------------- Common : End ------------------------- */





/* ------------------------- Bootstrap : Start ------------------------- */
.container {
    width: 1024px;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: auto;
    margin-right: auto;
}
.container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.row {
    margin-left: -16px;
    margin-right: -16px;
}
.col {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 16px;
    padding-right: 16px;
}
.content-header > .container > .row,
.content-body > .container > .row {
    margin-left: -40px;
    margin-right: -40px;
}
.content-header > .container > .row > .col,
.content-body > .container > .row > .col {
    padding-left: 40px;
    padding-right: 40px;
}


.col-12 {
    width: 100%;
}
.col-11 {
    width: 91.66666667%;
}
.col-10 {
    width: 83.33333333%;
}
.col-9 {
    width: 75%;
}
.col-8 {
    width: 66.66666667%;
}
.col-7 {
    width: 58.33333333%;
}
.col-6 {
    width: 50%;
}
.col-5 {
    width: 41.66666667%;
}
.col-4 {
    width: 33.33333333%;
}
.col-3 {
    width: 25%;
}
.col-2 {
    width: 16.66666667%;
}
.col-1 {
    width: 8.33333333%;
}
.col-pull-12 {
    right: 100%;
}
.col-pull-11 {
    right: 91.66666667%;
}
.col-pull-10 {
    right: 83.33333333%;
}
.col-pull-9 {
    right: 75%;
}
.col-pull-8 {
    right: 66.66666667%;
}
.col-pull-7 {
    right: 58.33333333%;
}
.col-pull-6 {
    right: 50%;
}
.col-pull-5 {
    right: 41.66666667%;
}
.col-pull-4 {
    right: 33.33333333%;
}
.col-pull-3 {
    right: 25%;
}
.col-pull-2 {
    right: 16.66666667%;
}
.col-pull-1 {
    right: 8.33333333%;
}
.col-pull-0 {
    right: auto;
}
.col-push-12 {
    left: 100%;
}
.col-push-11 {
    left: 91.66666667%;
}
.col-push-10 {
    left: 83.33333333%;
}
.col-push-9 {
    left: 75%;
}
.col-push-8 {
    left: 66.66666667%;
}
.col-push-7 {
    left: 58.33333333%;
}
.col-push-6 {
    left: 50%;
}
.col-push-5 {
    left: 41.66666667%;
}
.col-push-4 {
    left: 33.33333333%;
}
.col-push-3 {
    left: 25%;
}
.col-push-2 {
    left: 16.66666667%;
}
.col-push-1 {
    left: 8.33333333%;
}
.col-push-0 {
    left: auto;
}
.col-offset-12 {
    margin-left: 100%;
}
.col-offset-11 {
    margin-left: 91.66666667%;
}
.col-offset-10 {
    margin-left: 83.33333333%;
}
.col-offset-9 {
    margin-left: 75%;
}
.col-offset-8 {
    margin-left: 66.66666667%;
}
.col-offset-7 {
    margin-left: 58.33333333%;
}
.col-offset-6 {
    margin-left: 50%;
}
.col-offset-5 {
    margin-left: 41.66666667%;
}
.col-offset-4 {
    margin-left: 33.33333333%;
}
.col-offset-3 {
    margin-left: 25%;
}
.col-offset-2 {
    margin-left: 16.66666667%;
}
.col-offset-1 {
    margin-left: 8.33333333%;
}
.col-offset-0 {
    margin-left: 0;
}



.col-10-10 {
    width: 100%;
}
.col-10-9 {
    width: 90%;
}
.col-10-8 {
    width: 80%;
}
.col-10-7 {
    width: 70%;
}
.col-10-6 {
    width: 60%;
}
.col-10-5 {
    width: 50%;
}
.col-10-4 {
    width: 40%;
}
.col-10-3 {
    width: 30%;
}
.col-10-2 {
    width: 20%;
}
.col-10-1 {
    width: 10%;
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
    clear: both;
}
/* ------------------------- Bootstrap : End ------------------------- */





/* ------------------------- Icon Common : Start ------------------------- */
.ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/* ------------------------- Icon Common : End ------------------------- */





/* ------------------------- Typo : Start ------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}
.fz-64,
.fz-48,
.fz-40,
.fz-36,
.fz-32,
.fz-30,
.fz-28,
.fz-26,
.fz-24,
.fz-20,
.fz-19,
.fz-18,
.fz-17,
.fz-16,
.fz-15,
.fz-14,
.fz-13,
.fz-12,
.fz-11,
.fz-10,
.txt-link,
.txt-positive,
.txt-negative,
.txt-end,
.txt-delete {
    vertical-align: middle;
    word-break: break-all;
}
span.fz-64,
span.fz-48,
span.fz-40,
span.fz-36,
span.fz-32,
span.fz-30,
span.fz-28,
span.fz-26,
span.fz-24,
span.fz-20,
span.fz-19,
span.fz-18,
span.fz-17,
span.fz-16,
span.fz-15,
span.fz-14,
span.fz-13,
span.fz-12,
span.fz-11,
span.fz-10,
span.txt-link,
span.txt-positive,
span.txt-negative,
span.txt-end,
span.txt-delete {
    display: inline-block;
}


.fz-64 {
    font-size: 64px;
}
.fz-48 {
    font-size: 48px;
}
.fz-40 {
    font-size: 40px;
}
.fz-36 {
    font-size: 36px;
}
.fz-32 {
    font-size: 32px;
}
.fz-30 {
    font-size: 30px;
}
.fz-28 {
    font-size: 28px;
}
.fz-26 {
    font-size: 26px;
}
.fz-24 {
    font-size: 24px;
}
.fz-20 {
    font-size: 20px;
}
.fz-19 {
    font-size: 19px;
}
.fz-18 {
    font-size: 18px;
}
.fz-17 {
    font-size: 17px;
}
.fz-16 {
    font-size: 16px;
}
.fz-15 {
    font-size: 15px;
}
.fz-14 {
    font-size: 14px;
}
.fz-13 {
    font-size: 13px;
}
.fz-12 {
    font-size: 12px;
}
.fz-11 {
    font-size: 11px;
}
.fz-10 {
    font-size: 10px;
}




.fc-0 {
    color: #FFFFFF;
}
.fc-1 {
    color: #DDDDDD;
}
.fc-2 {
    color: #AAAAAA;
}
.fc-3 {
    color: #999999;
}
.fc-4 {
    color: #777777;
}
.fc-5 {
    color: #555555;
}
.fc-6 {
    color: #333333;
}



.fc-10 {
    color : #8C150D
}






.fw-thin {
    font-weight: 100;
}
.fw-exlig {
    font-weight: 200;
}
.fw-lig {
    font-weight: 300;
}
.fw-reg {
    font-weight: 400;
}
.fw-med {
    font-weight: 500;
}
.fw-smbold {
    font-weight: 600;
}
.fw-bold {
    font-weight: 700;
}
.fw-exbold {
    font-weight: 800;
}
.fw-black {
    font-weight: 900;
}

.txt-highlight {
    margin-left: 5px;
    font-size: 14px;
    color: #1167d0;
    text-decoration: underline;
}

.txt-essential {
    margin-left: 5px;
    font-size: 14px;
    color: #8C150D;
}
.txt-essential::before {
    content: '*';
    font-weight: 700;
    color: #8C150D;
}
/* ------------------------- Typo : End ------------------------- */





/* ------------------------- Input Text : Start ------------------------- */
.tf-comm {
    width: 300px;
    height: 40px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    border-radius: 8px;
    color: #555555;
}
.tf-textarea {
    overflow-y: auto;
    width: 100%;
    height: 200px;
    padding: 15px 16px;
    border: 1px solid #CCCCCC;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    background: #FFFFFF;
    resize: none;
    border-radius: 8px;
    color: #555555;
}




.tf-comm::placeholder,
.tf-textarea::placeholder {
    color: #AAAAAA;
}
.tf-comm:focus,
.tf-textarea:focus {
    border: 1px solid #8C150D;
    box-shadow: 0 0 0 2px rgba(255, 216, 214, 0.5);
}
.tf-comm:disabled,
.tf-textarea:disabled {
    border: 1px solid #DDDDDD;
    background: #EEEEEE;
    color: #777777;
}



.input-group.xxsmall .tf-comm,
.tf-comm.xxsmall {
    min-width: 80px;
    width: auto;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 20px;
}
.input-group.xsmall .tf-comm,
.tf-comm.xsmall {
    width: 100px;
    height: 32px;
    font-size: 12px;
    line-height: 28px;
}
.input-group.small .tf-comm,
.tf-comm.small {
    height: 36px;
    font-size: 12px;
    line-height: 32px;
}
.input-group.expand .tf-comm,
.tf-comm.expand {
    width: 100% !important;
}
.input-group.w-100 .tf-comm {
    width: 100px !important;
}
.input-group.w-150 .tf-comm {
    width: 150px !important;
}
.input-group.w-300 .tf-comm {
    width: 300px !important;
}
.input-group.w-400 .tf-comm {
    width: 400px !important;
}
.input-group.w-500 .tf-comm {
    width: 500px !important;
}




.input-group.xxsmall .tf-textarea,
.tf-textarea.xxsmall {
    height: 50px;
}
.input-group.xsmall .tf-textarea,
.tf-textarea.xsmall {
    height: 100px;
}
.input-group.small .tf-textarea,
.tf-textarea.small {
    height: 150px;
}
.input-group.large .tf-textarea,
.tf-textarea.large {
    width: 500px;
    height: 300px;
}
.input-group.h-expand .tf-textarea,
.tf-textarea.h-expand {
    height: 100%;
}



.input-group {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.input-group.check .tf-comm,
.input-group.check .tf-textarea {
    border: 1px solid #19BE95;
}
.input-group.check .tf-comm:focus,
.input-group.check .tf-textarea:focus {
    outline: 2px solid #CFF7ED;
}
.input-group.error .tf-comm,
.input-group.error .tf-textarea {
    border: 1px solid #FF6C6C;
}
.input-group.error .tf-comm:focus,
.input-group.error .tf-textarea:focus {
    outline: 2px solid #FFDEDE;
}
.input-group .ico-search {
    position: absolute;
    top: 13px;
    left: 16px;
    width: 16px;
    height: 16px;
    background-position: -40px -320px;
}
.input-group .ico-search + .tf-comm {
    padding-left: 46px;
}



.input-group .fz-12 {
    display: none !important;
    margin-top: 8px;
    margin-left: 8px;
    font-weight: 500;
    line-height: 1.5;
}
.input-group.check .fz-12 {
    display: block !important;
    color: #19BE95;
}
.input-group.error .fz-12 {
    display: block !important;
    color: #FF6C6C;
}
.input-group.complete .fz-12 {
    display: block !important;
    color: #6C85FF;
}
.input-group .fz-12.fc-5 {
    display: block !important;
    color: #939499 !important;
}
.input-group .unit-text {
    display: inline-block;
    position: absolute;
    top: 16px;
    right: 16px;
    margin-left: 4px;
    font-size: 12px;
    color: #8D8B8C;
    vertical-align: middle;
}
.input-group .tf-comm:focus ~ .unit-text {
    color: #272933;
}
/* ------------------------- Input Text : End ------------------------- */






/* ------------------------- Button : Start ------------------------- */
.btn {
    display: inline-block;
    overflow: hidden;
    position: relative;
    min-width: 100px;
    height: 44px;
    padding: 15px 24px;
    font-weight: 400;
    font-size: 14px;
    border-radius: 8px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
}
.btn:disabled {
    cursor: default;
}
.btn.line {
    padding: 14px 23px;
}


/* Btn Size : Start */
.btn.xxsmall {
    width: auto;
    min-width: auto;
    height: 24px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 400;
}
.btn.btn-line.xxsmall {
    padding: 0 15px;
}
.btn.xsmall {
    min-width: 54px;
    height: 36px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 400;
}
.btn.btn-line.xsmall {
    padding: 8px 15px;
}
.btn.small {
    min-width: 70px;
    height: 36px;
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 400;
}
.btn.btn-line.small {
    padding: 8px 23px;
}
.btn.large {
    min-width: 200px;
    height: 44px;
    font-size: 14px;
}
.btn.btn-line.large {
    padding: 0 23px;
}
.btn.xlarge {
    min-width: 280px;
    height: 48px;
    padding: 0 32px;
    font-size: 14px;
    font-weight: 500;
}
.btn.btn-line.xlarge {
    padding: 0 31px;
}
.btn.xxlarge {
    width: auto;
    min-width: auto;
    height: 56px;
    padding: 0 32px;
    font-size: 16px;
}
.btn.btn-line.xxlarge {
    padding: 0 31px;
}
.btn.w-100 {
    width: 100px !important;
    min-width: 100px !important;
}
.btn.w-130 {
    width: 130px !important;
    min-width: 130px !important;
}
/* Btn Size : End */




.btn.solid.red {
    background: #8C150D;
    color: #FFFFFF;
}
.btn.solid.red:hover {
    background: #B9352C;
}
.btn.solid.red:active {
    background: #5A0D08;
}
.btn.solid:disabled,
.btn.solid:disabled:hover {
    background: #EEEEEE;
    color: #AAAAAA;
}



.btn.line.red {
    border: 1px solid #BBBBBB;
    background: #FFFFFF;
    color: #8C150D;
}
.btn.line.red:hover {
    border: 1px solid #8C150D;
}
.btn.line.red:active {
    border: 1px solid #8C150D;
    background: #FFF2F1;
}



.btn.line.gray:hover {
    border: 1px solid #777777;
}
.btn.line.gray:active {
    border: 1px solid #777777;
    background: #EEEEEE;
}
.btn.line.gray {
    border: 1px solid #BBBBBB;
    background: #FFFFFF;
    color: #777777;
}


.btn.line:disabled,
.btn.line:disabled:hover {
    border: 1px solid #DDDDDD;
    background: #EEEEEE;
    color: #AAAAAA;
}
/* ------------------------- Button : End ------------------------- */





/* ------------------------- Comp-Checkbox : Start ------------------------- */
.comp-checkbox {
    display: inline-block;
    min-height: 40px;
    padding-right: 16px;
    vertical-align: middle;
}
.comp-checkbox input[type="checkbox"] {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0,0,0,0);
}
.comp-checkbox input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    padding: 14px 0 14px 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #777777;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    word-break: break-all;
}
.comp-checkbox input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 14px;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    border-radius: 4px;
    vertical-align: middle;
}


/* Hover : Start */
.comp-checkbox input[type="checkbox"] + label:hover::before {
    border: 1px solid #8C150D;
}
.comp-checkbox input[type="checkbox"] + label:hover {
    color: #555555;
}
/* Hover : End */




/* Checked : Start */
.comp-checkbox input[type="checkbox"]:checked + label {
    color: #8C150D;
}
.comp-checkbox input[type="checkbox"]:checked + label::before {
    border: 1px solid #8C150D;
    background: url(../images/ico-checkbox-checked-16px.svg) no-repeat center / 16px;
    box-shadow: 0 0 0 2px rgba(255, 216, 214, 0.5);
}
/* Checked : End */



/* Disabled : Start */
.comp-checkbox input[type="checkbox"]:disabled + label {
    color: #AAAAAA;
    cursor: default;
}
.comp-checkbox input[type="checkbox"]:disabled + label:hover {
    color: #AAAAAA;
}
.comp-checkbox input[type="checkbox"]:checked:disabled + label,
.comp-checkbox input[type="checkbox"]:checked:disabled + label:hover {
    color: #777777;
}
.comp-checkbox input[type="checkbox"]:checked:disabled + label::before {
    border: 1px solid #CCCCCC;
    background: url(../images/ico-checkbox-checked-disabled-16px.svg) no-repeat center / 16px;
    box-shadow: none;
}
.comp-checkbox input[type="checkbox"]:disabled + label:hover::before,
.comp-checkbox input[type="checkbox"]:checked:disabled + label:hover::before {
    border: 1px solid #CCCCCC;
}
/* Disabled : End */
/* ------------------------- Comp-Checkbox : End ------------------------- */





/* ------------------------- Comp-Radio : Start ------------------------- */
.comp-radio {
    display: inline-block;
    position: relative;
    min-height: 40px;
    padding-right: 16px;
    vertical-align: middle;
}
.comp-radio input[type="radio"],
.inp-radio {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0,0,0,0);
}
.comp-radio input[type="radio"] + label {
    display: inline-block;
    position: relative;
    padding: 14px 0 14px 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #777777;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    word-break: break-all;
}
.comp-radio input[type="radio"] + label:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 14px;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    vertical-align: middle;
    border-radius: 50%;
}



/* Hover : Start */
.comp-radio input[type="radio"] + label:hover {
    color: #555555;
}
.comp-radio input[type="radio"] + label:hover::before {
    border: 1px solid #8C150D;
}
/* Hover : End */



/* Checked : Start */
.comp-radio input[type="radio"]:checked + label {
    color: #8C150D;
}
.comp-radio input[type="radio"]:checked + label:before {
    border: 1px solid #8C150D;
}
.comp-radio input[type="radio"]:checked + label:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #8C150D;
    border-radius: 50%;
}
/* Checked : End */



/* Disabled : Start */
.comp-radio input[type="radio"]:disabled + label {
    cursor: pointer;
}
.comp-radio input[type="radio"]:disabled + label,
.comp-radio input[type="radio"]:disabled + label:hover {
    color: #AAAAAA;
}
.comp-radio input[type="radio"]:checked:disabled + label,
.comp-radio input[type="radio"]:checked:disabled + label:hover {
    color: #777777;
}
.comp-radio input[type="radio"]:disabled + label:hover::before {
    border: 1px solid #CCCCCC;
}
.comp-radio input[type="radio"]:checked:disabled + label::before {
    border: 1px solid #CCCCCC;
}
.comp-radio input[type="radio"]:checked:disabled + label::after {
    background: #777777;
}
/* Disabled : End */
/* ------------------------- Comp-Radio : End ------------------------- */





/* ------------------------- Comp-Dropdown : Start ------------------------- */
.dropdown,
.comp-dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    left: auto;
    width: 100%;
    z-index: 1000000;
}
.dropdown.open > .dropdown-menu,
.comp-dropdown.open > .dropdown-menu {
    display: block;
}



.comp-dropdown {
    display: inline-block;
}
.comp-dropdown .dropdown-toggle {
    display: flex;
    width: 300px;
    height: 40px;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
}
.comp-dropdown.open .dropdown-toggle {
    border: 1px solid #8C150D;
    box-shadow: 0 0 0 2px rgba(255, 216, 214, 0.5);
}
.comp-dropdown .dropdown-toggle .box-title {
    display: flex;
    width: calc(100% - 42px);
}
.comp-dropdown .dropdown-toggle .box-title input {
    height: 38px;
    padding: 0 16px;
    border: none;
    background: transparent;
}
.comp-dropdown .dropdown-toggle .box-arrow {
    width: 40px;
    padding: 6px;
    border-radius: 8px;
}
.comp-dropdown .dropdown-toggle .ico-arrow {
    width: 24px;
    height: 24px;
    background: url(../images/ico-arrow-default-24px.svg) no-repeat center / 100%;
}
.comp-dropdown.open .dropdown-toggle .ico-arrow {
    transform: rotate(180deg);
}

.comp-dropdown .dropdown-menu {
    min-width: 200px;
    padding: 8px 0;
    margin-top: 2px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
    text-align: left;
}
.dropdown-menu .item {
    display: block;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #555555;
}
.dropdown-menu .item:hover {
    background: #FFF6F5;
}



.comp-dropdown.right .dropdown-menu {
    bottom: 0;
    right: 0;
    left: calc(100% + 24px);
    width: 100%;
    z-index: 1000000;
}
/* ------------------------- Comp-Dropdown : End ------------------------- */








/* ------------------------- Comp-File-Upload (Single) : Start ------------------------- */
/* Common : Start */
.comp-file-upload.single {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}



.comp-file-upload.single input[type="file"] {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width :100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    cursor: default;
}

.comp-file-upload.single input[type="file"] {
    clip: rect(0,0,0,0);
}



.comp-file-upload.single .ico-file {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 11;
    width: 16px;
    height: 16px;
    background-position: -120px -320px;
}
.comp-file-upload.single .ico-file::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 13px;
    margin-top: 2px;
    margin-left: 32px;
    background-color: #E6E9EA;
    vertical-align: middle;
}
.comp-file-upload.single .tf-comm {
    position: relative;
    z-index: 10;
    width: 345px;
    padding-left: 65px;
    padding-right: 48px;
    margin-right: 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.comp-file-upload.single .tf-comm::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: 400;
    color: #BEBEC1;
    text-align: left;
}
.comp-file-upload.single .tf-comm::-moz-placeholder { /* Firefox 19+ */
    font-weight: 400;
    color: #BEBEC1;
    text-align: left;
}
.comp-file-upload.single .tf-comm:-ms-input-placeholder { /* IE 10+ */
    font-weight: 400;
    color: #BEBEC1;
    text-align: left;
}
.comp-file-upload.single .tf-comm:-moz-placeholder { /* Firefox 18- */
    font-weight: 400;
    color: #BEBEC1;
    text-align: left;
}
.comp-file-upload.single .tf-comm:focus {
    border: 0;
    box-shadow: 0 0 0 2px transparent;
}
.comp-file-upload.single .tf-comm:disabled {
    opacity: 1;
}
.comp-file-upload.single .btn-reset {
    display: none;
    position: absolute;
    z-index: 11;
    top: 14px;
    right: 116px;
    width: 16px;
    height: 16px;
    background: url(../images/img-comm.png) no-repeat;
    background-position: -80px -360px;
}
.comp-file-upload.single input[type="file"]:valid ~ .btn-reset {
    display: block;
}
.comp-file-upload.single input[type="file"]:not(:vaild) ~ .btn-reset {
    display: none;
}
.comp-file-upload.single .btn {
    display: inline-block;
    position: absolute;
    right: 0;
    z-index: 11;
    min-width: 100px;
    height: 44px;
    padding: 0 23px;
    line-height: 44px;
    font-size: 14px;
    background: #EFF2FF;
    cursor: pointer;
    color: #7B91FF;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: center;
    vertical-align: top;
}
.comp-file-upload.single .btn:hover {
    color: #4262FF;
}



.comp-file-upload.single.disabled .ico-file {
    opacity: 0.6;
}
.comp-file-upload.single.disabled .btn,
.comp-file-upload.single.disabled .btn:disabled {
    cursor: default;
    opacity: 0.6;
}
.comp-file-upload.single.disabled .btn:hover {
    color: #7B91FF;
}
/* ------------------------- Comp-File-Upload (Single) : End ------------------------- */




/* ------------------------- Comp-File-List : Start ------------------------- */
.comp-file-list .file-list-top {
    height: 36px;
}
.comp-file-list .file-list-top .fc-4 {
    margin-top: 12px;
}
.comp-file-list .file-list-top .btn {
    float: right;
}



.comp-file-list .file-list-middle {
    display: block;
}
.comp-file-list .file-item {
    display: flex;
    position: relative;
    margin: 8px 0;
    cursor: default;
}
.comp-file-list .file-item .ico-file {
    width: 24px;
    height: 24px;
    background: url(../images/ico-filelist-default-24px.svg) no-repeat center / 100%;
}
.comp-file-list .file-item .fc-5 {
    position: relative;
    width: calc(100% - 80px);
    line-height: 1.5;
    vertical-align: middle;
}
.comp-file-list .file-item .fc-3 {
    margin: 0 4px 0 8px;
    line-height: 1.5;
}
.comp-file-list .file-item .ico {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    cursor: pointer;
}
.comp-file-list .file-item .ico-download {
    background: url(../images/ico-file-download-default-24px.svg) no-repeat center / 100%;
}
.comp-file-list .file-item .ico-delete {
    background: url(../images/ico-file-delete-default-24px.svg) no-repeat center / 100%;
}

/* ------------------------- Comp-File-List : End ------------------------- */





/* ------------------------- Comp-Datepicker : Start ------------------------- */
.comp-datepicker {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 40px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    border-radius: 8px;
    vertical-align: middle;
}
.comp-datepicker:focus {
    border: 1px solid #8C150D;
    box-shadow: 0 0 0 2px rgba(255, 216, 214, 0.5);
}
.comp-datepicker:focus-visible {
    outline: 0;
}

.comp-datepicker .ico-calendar {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 38px;
    padding: 7px 12px 7px 0;
    border-radius: 8px;
    cursor: pointer;
}
.comp-datepicker .ico-calendar::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/ico-calendar-default-24px.svg) no-repeat center / 100%;
}
.comp-datepicker .tf-comm {
    width: 147px;
    height: 38px;
    border: none;
    font-weight: 500;
    font-size: 14px;

    color: #555555;
    cursor: pointer;
    vertical-align: top;
    text-align: justify;
    user-select: none;
    clip: rect(0,0,0,0);
}



/* Disabled : Start */
.comp-datepicker.disabled {
    border: 1px solid #DDDDDD;
    background: #EEEEEE;
    cursor: default;
}
.comp-datepicker.disabled .tf-comm,
.comp-datepicker.disabled .ico-calendar {
    cursor: default !important;
    color: #777777;
}
/* Disabled : End */
/* ------------------------- Comp-Datepicker : End ------------------------- */




/* ------------------------- Comp-Datepicker Range : Start ------------------------- */
.comp-datepicker.range {
    display: flex;
    width: 331px;
    padding-right: 16px;
    border: 1px solid #CCCCCC;
}
.comp-datepicker.range .fc-5 {
    order: -1;
    width: 95px;
    height: 38px;
    padding: 11px 16px;
    margin-right: 0;
    line-height: 16px;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}
.comp-datepicker.range .tf-comm {
    width: 196px;
    height: 38px;
    padding-left: 0;
    border: none;
    border-radius: 0;
}
/* ------------------------- Comp-Datepicker : End ------------------------- */