/* Template: Tivo - SaaS App HTML Landing Page Template
   Author: Inovatik
   Created: Sep 2019
   Description: Master CSS file
*/

/*****************************************
Table Of Contents:

01. General Styles
Notice
FAQ
ServiceApplyDetails
02. Preloader
03. Navigation
04. Header
05. Customers
06. Description
07. Features
08. Features Lightboxes
09. Details
10. Video
11. Pricing
12. Testimonials
13. Newsletter
14. Footer
15. Copyright
16. Back To Top Button
17. Extra Pages
18. Sign Up and Log In Pages
19. Media Queries
******************************************/

/*****************************************
Colors:
- Backgrounds, buttons, bullets, icons - blue #162b4e
- Backgrounds, light button, light body text - light gray #f3f7fd
- Headings text - black #333
- Body text - dark gray #555
******************************************/


/******************************/
/*     01. General Styles     */
/******************************/
.main-image > img {
    width: 100%;
    height: 750px;
}

.h1HomeStyle {
    font: 400 1rem/1.625rem "Open Sans", sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 50px;
}

.h4HomeStyle {
    font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
    font-size: 1.5rem;
}

body,
html {
    width: 100%;
    height: 100%;
}

body, p {
    color: #555;
    font: 400 1rem/1.625rem "Open Sans", sans-serif;
}

.p-large {
    font: 400 1.125rem/1.75rem "Open Sans", sans-serif;
}

.p-small {
    font: 400 0.875rem/1.5rem "Open Sans", sans-serif;
}

h1 {
    color: #333;
    font: 700 2.5rem/3.125rem "Open Sans", sans-serif;
    letter-spacing: -0.2px;
}

h2 {
    color: #333;
    font: 700 2rem/2.625rem "Open Sans", sans-serif;
    letter-spacing: -0.2px;
}

h3 {
    color: #333;
    font: 700 1.625rem/2.125rem "Open Sans", sans-serif;
    letter-spacing: -0.2px;
}

h4 {
    color: #333;
    font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

h5 {
    color: #333;
    font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

h6 {
    color: #333;
    font: 700 1rem/1.375rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

.above-heading {
    color: #5f4dee;
    font: 700 1.625rem/2.125rem "Nanum Gothic", sans-serif;
    /*font: 700 1.375rem/1.75rem "Nanum Gothic", sans-serif;*/
    /*font: 700 1.375rem/1.75rem "IBM Plex Sans KR", sans-serif;*/
    text-align: center;
}

.p-heading {
    margin-bottom: 3.25rem;
}

.testimonial-text {
    font: italic 400 1rem/1.625rem "Open Sans", sans-serif;
}

.testimonial-author {
    font: 700 1rem/1.625rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

.li-space-lg li {
    margin-bottom: 0.375rem;
}

.indent {
    padding-left: 1.25rem;
}

a {
    color: #555;
    text-decoration: underline;
}

    a:hover {
        color: #555;
        text-decoration: underline;
    }

    a.white {
        color: #fff;
    }

.decorative-line {
    display: block;
    width: 5rem;
    height: 0.5rem;
    margin-right: auto;
    margin-left: auto;
}

.blue {
    color: #162b4e;
}

.btn-solid-reg {
    display: inline-block;
    padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: #162b4e;
    color: #fff;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-solid-reg:hover {
        background-color: transparent;
        color: #162b4e;
        text-decoration: none;
    }

.btn-solid-reg2 {
    display: inline-block;
    padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: #70768a;
    color: #fff;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-solid-reg2:hover {
        background-color: transparent;
        color: #162b4e;
        text-decoration: none;
    }

.btn-solid-reg3 { /* QnA 등록버튼 */
    display: inline-block;
    padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: #162b4e;
    color: #fff;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-solid-reg3:hover {
        background-color: transparent;
        color: #162b4e;
        text-decoration: none;
    }



.btn-solid-lg {
    display: inline-block;
    padding: 1.375rem 2.625rem 1.375rem 2.625rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: #162b4e;
    color: #fff;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-solid-lg:hover {
        background-color: transparent;
        color: #162b4e;
        text-decoration: none;
    }

.btn-outline-reg {
    display: inline-block;
    padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: transparent;
    color: #162b4e;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-outline-reg:hover {
        background-color: #162b4e;
        color: #fff;
        text-decoration: none;
    }

.btn-outline-lg {
    display: inline-block;
    padding: 1.375rem 2.625rem 1.375rem 2.625rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: transparent;
    color: #162b4e;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-outline-lg:hover {
        background-color: #162b4e;
        color: #fff;
        text-decoration: none;
    }

.btn-outline-sm {
    display: inline-block;
    padding: 0.875rem 1.5rem 0.875rem 1.5rem;
    border: 0.125rem solid #162b4e;
    border-radius: 2rem;
    background-color: transparent;
    color: #162b4e;
    font: 700 1rem/0 "Open Sans", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-outline-sm:hover {
        background-color: #162b4e;
        color: #fff;
        text-decoration: none;
    }

.form-group {
    position: relative;
    margin-bottom: 1.25rem;
}

    .form-group.has-error.has-danger {
        margin-bottom: 0.625rem;
    }

        .form-group.has-error.has-danger .help-block.with-errors ul {
            margin-top: 0.375rem;
        }

/* goeun */
/* .form-container {
	text-align: center;
} */

.label-control {
    position: absolute;
    top: 0.87rem;
    left: 1.25rem;
    color: #555;
    opacity: 1;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    cursor: text;
    transition: all 0.2s ease;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .label-control {
        top: 0.9375rem;
    }
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
    top: 0.125rem;
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 700;
}

.form-control-input,
.form-control-select {
    display: block; /* needed for proper display of the label in Firefox, IE, Edge */
    width: 100%;
    /* padding-top: 1.0625rem; */
    padding-bottom: 0.0625rem;
    padding-left: 1.25rem;
    border: 1px solid #c4d8dc;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #555;
    font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
    transition: all 0.2s;
    -webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

.form-control-select {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: 3rem;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .form-control-input {
        padding-top: 1.25rem;
        padding-bottom: 0.75rem;
        line-height: 1.75rem;
    }

    .form-control-select {
        padding-top: 0.875rem;
        padding-bottom: 0.75rem;
        height: 3.125rem;
        line-height: 2.125rem;
    }
}

select {
    /* you should keep these first rules in place to maintain cross-browser behavior */
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('../images/down-arrow.png');
    background-position: 96% 50%;
    background-repeat: no-repeat;
    outline: none;
}

    select::-ms-expand {
        display: none; /* removes the ugly default down arrow on select form field in IE11 */
    }

.form-control-textarea {
    display: block; /* used to eliminate a bottom gap difference between Chrome and IE/FF */
    width: 100%;
    height: 8rem; /* used instead of html rows to normalize height between Chrome and IE/FF */
    padding-top: 1.25rem;
    padding-left: 1.3125rem;
    border: 1px solid #c4d8dc;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #555;
    font: 400 0.875rem/1.75rem "Open Sans", sans-serif;
    transition: all 0.2s;
}

    .form-control-col:focus,
    .form-control-input:focus,
    .form-control-select:focus,
    .form-control-textarea:focus {
        border: 1px solid #a1a1a1;
        outline: none; /* Removes blue border on focus */
    }

    .form-control-col:hover,
    .form-control-input:hover,
    .form-control-select:hover,
    .form-control-textarea:hover {
        border: 1px solid #a1a1a1;
    }

.checkbox {
    font: 400 0.75rem/1.25rem "Open Sans", sans-serif;
}

input[type='checkbox'] {
    vertical-align: -15%;
    margin-right: 0.375rem;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

/* IE10+ hack to raise checkbox field position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    input[type='checkbox'] {
        vertical-align: -9%;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }
}

.form-control-submit-button {
    display: inline-block;
    width: 100%;
    height: 3.125rem;
    border: 1px solid #162b4e;
    border-radius: 1.5rem;
    background-color: #162b4e;
    color: #fff;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.form-group .form-control-submit-button {
    display: inline-block;
    width: 100%;
    height: 3.125rem;
    border: 1px solid #162b4e;
    border-radius: 1.5rem;
    background-color: #162b4e;
    color: #fff;
    font: 700 0.875rem/0 "Open Sans", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    padding: 1.2rem 0;
    text-decoration: none;
}

.form-control-submit-button:hover {
    background-color: transparent;
    color: #162b4e;
}

/* Form Success And Error Message Formatting */
#smsgSubmit.h3.text-center.tada.animated,
#lmsgSubmit.h3.text-center.tada.animated,
#nmsgSubmit.h3.text-center.tada.animated,
#pmsgSubmit.h3.text-center.tada.animated,
#smsgSubmit.h3.text-center,
#lmsgSubmit.h3.text-center,
#nmsgSubmit.h3.text-center,
#pmsgSubmit.h3.text-center {
    display: block;
    margin-bottom: 0;
    color: #555;
    font-size: 1.125rem;
    line-height: 1rem;
}

.help-block.with-errors .list-unstyled {
    color: #555;
    font-size: 0.75rem;
    line-height: 1.125rem;
    text-align: center;
}

.help-block.with-errors ul {
    margin-bottom: 0;
}
/* end of form success and error message formatting */

/* Form Success And Error Message Animation - Animate.css */
@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/* end of form success and error message animation - Animate.css */

/* Fade-move Animation For Details Lightbox - Magnific Popup */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
    opacity: 0;
    transition: all 0.2s ease-out;
    -webkit-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
    -ms-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
    transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: translateY(0) perspective(37.5rem) rotateX(0);
    -ms-transform: translateY(0) perspective(37.5rem) rotateX(0);
    transform: translateY(0) perspective(37.5rem) rotateX(0);
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
    opacity: 0;
    -webkit-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
    -ms-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
    transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
}

/* dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
    opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
    opacity: 0;
}
/* end of fade-move animation for details lightbox - magnific popup */

/* Fade Animation For Image Lightbox - Magnific Popup */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation: fadeIn 0.6s;
    animation: fadeIn 0.6s;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation: fadeOut 0.8s;
    animation: fadeOut 0.8s;
}
/* end of fade animation for image lightbox - magnific popup */

/****************************/
/* goeun */
/****************************/

.main_image {
    position: relative;
}

.main_image_text {
    position: relative;
    top: 50%;
    left: 0%;
    color: white;
}

/****************************/
/* Notice & QnA btn, search */
/****************************/
.board-top {
    overflow: hidden;
    margin-bottom: 15px;
}

#btn_search {
    float: left;
    width: 15%;
    margin-top: 0;
    height: 35px;
}

.search_form {
    float: right;
    width: 500px;
}

    .search_form .form-control-select {
        width: 150px;
        height: 35px;
        padding: 0 10px;
        box-sizing: border-box;
        appearance: none;
    }

/* 반응형 */
@media (max-width: 768px) {

    .btn-solid-reg3 { /* QnA 등록 qj */
        display: inline-block;
        padding: 1.1575rem 2rem 1.1575rem 2rem;
        border: 0.12rem solid #162b4e;
        border-radius: 2rem;
        background-color: #162b4e;
        color: #fff;
        font: 800 0.75rem/0 "Open Sans", sans-serif;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-solid-reg {
        display: inline-block;
        padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
        border: 0.125rem solid #162b4e;
        border-radius: 2rem;
        background-color: #162b4e;
        color: #fff;
        font: 800 0.875rem/0 "Open Sans", sans-serif;
        text-decoration: none;
        transition: all 0.2s;
    }

        .btn-solid-reg:hover {
            background-color: transparent;
            color: #162b4e;
            text-decoration: none;
        }

    .main-image > img {
        width: 100%;
        height: 250px;
    }

    .h1HomeStyle {
        font: 400 1rem/1.625rem "Open Sans", sans-serif;
        font-size: 2rem;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .h4HomeStyle {
        font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
        font-size: 1rem;
    }

    .board-top .search_form {
        float: right;
        width: 350px;
    }

    .board-top .form-control-select {
        display: none;
    }

    .board-top .form-control-input {
        width: 60%;
    }

    .board-top .form-control-submit-button {
        width: 20%;
    }

    .board-top .bt_wraps {
        padding: 50px 0px 20px 134px;
    }
}

/***************************************/
/*                 FAQ                 */
/***************************************/
.faq {
    max-width: 1000px;
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #162b4e;
    cursor: pointer;
}

.question {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .question h3 {
        font-size: 1.3rem;
        color: #4c505c;
    }

.answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.4s ease;
}

    .answer p {
        padding-top: 1rem;
        line-height: 1.6;
        font-size: 1rem;
    }

.faq.active .answer {
    max-height: 2000px;
    animation: fade 1s ease-in-out;
}

.faq.active svg {
    transform: rotate(180deg);
}

.faq svg {
    transition: transform .5s ease-in;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}


/***************************************/
/*   Service Apply(ApplicationDetails) - Moblie  goeun */
/***************************************/
.SA_list {
    width: 100%;
    border-top: 2px solid #6c757d;
}

.SA_tbody > tr {
    border-bottom: 1px solid #ccd3df;
    /*font-size: 0;*/
}

.SA_top > .top {
    border-bottom: 1px solid #6c757d;
}

.SA_top .top .title {
    text-align: center;
    text-decoration: none;
}

.SA_tbody > tr:last-child {
    border-bottom: 1px solid #555;
}

.SA_top > .top > th,
tbody > tr > td {
    /*display: inline-block;*/
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
}

.SA_top > .top > th {
    font-weight: 600;
}

.SA_tbody .num {
    width: 10%;
}

.SA_tbody .writer {
    width: 15%;
    text-align: left;
    text-decoration: none;
}

.SA_list .num .SAClass,
.SA_list .writer .SAClass,
.SA_list .company .SAClass,
.SA_list .business_type .SAClass,
.SA_list .ind_date .SAClass,
.SA_list .service_status .SAClass {
    text-indent: 10px;
    text-decoration: none;
}

.SA_tbody .company {
    width: 30%;
    text-align: center;
    text-decoration: none;
}


.SA_tbody .business_type,
.SA_tbody .ins_date,
.SA_tbody .service_status {
    width: 10%;
}


/***************************************/
/*   Service Apply(form-containerSA) - Moblie  goeun */
/***************************************/
.ex-2-header .form-containerSA {
    max-width: 70rem;
    margin-right: auto;
    margin-left: auto;
    padding: 2.25rem 1.25rem 1.25rem 1.25rem;
    border-radius: 0.5rem;
    background-color: #f3f7fd;
}


.form-group-SA .form-control-submit-button-SA-detail {
    display: inline-block;
    width: 20%;
    height: 2.125rem;
    border: 1px solid #162b4e;
    border-radius: 1.5rem;
    background-color: #162b4e;
    color: #fff;
    font: 700 1rem/0 "Open Sans", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    padding: 15px 0;
}

.formSA {
    border-top: 2px solid #343a40;
}

    .formSA .titles,
    .formSA .infos {
        padding-top: 15px;
        padding-left: 10px;
    }

    .formSA .infos {
        border-top: .5px dashed #ddd;
        font-size: 0;
    }

    .formSA .titles dl {
        font-size: 0;
    }

    .formSA .infos dl {
        width: 100%;
        vertical-align: middle;
    }

    .formSA .titles dt,
    .formSA .titles dd,
    .formSA .infos dt,
    .formSA .infos dd {
        display: inline-block;
        font-size: 14px;
    }

    .formSA .titles dt,
    .formSA .infos dt {
        width: 100px;
    }

    .formSA .title dd {
        width: calc(100% - 100px);
    }

    .formSA .titles input[type="text"],
    .formSA .titles input[type="email"],
    .formSA .infos input[type="text"],
    .formSA .infos input[type="tel"],
    .formSA .infos input[type="password"] {
        box-sizing: border-box;
    }

.form-group-SA {
    text-align: center;
}

    .form-group-SA .form-control-submit-button-SA {
        display: inline-block;
        width: auto;
        height: 2.125rem;
        border: 1px solid #162b4e;
        border-radius: 1.5rem;
        background-color: #162b4e;
        color: #fff;
        font: 700 0.875rem/0 "Open Sans", sans-serif;
        cursor: pointer;
        transition: all 0.2s;
        padding: 20px 0;
        font-size: 1.125rem;
    }

.board_writeSA {
    border-top: 2px solid #343a40;
    margin-top: 1rem;
}

.board_writeSA2 {
    border-top: 2px solid #343a40;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.formSA .form-control-input:focus + .label-control,
.formSA .form-control-input.notEmpty + .label-control {
    top: 0.125rem;
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 700;
}

.formSA dl {
    margin-top: 0;
    margin-bottom: 0;
}

.formSA .form-control-input {
    display: block; /* needed for proper display of the label in Firefox, IE, Edge */
    width: 9rem;
    padding-bottom: 0.0625rem;
    padding-left: 1.25rem;
    border: 1px solid #c4d8dc;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #555;
    font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
    transition: all 0.2s;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .formSA .form-control-input {
        padding-top: 1.25rem;
        padding-bottom: 0.75rem;
        line-height: 1.75rem;
    }
}

.formSA .form-control-input:focus {
    border: 1px solid #a1a1a1;
    outline: none; /* Removes blue border on focus */
}

.formSA .form-control-input:hover {
    border: 1px solid #a1a1a1;
}


/*************************/
/*     Notice(board)     */
/*************************/
#content {
    position: relative;
    max-width: 1045px;
    margin: 0 auto;
    min-height: 600px;
}

.board_title {
    margin-bottom: 30px;
}

    .board_title p {
        margin-top: 5px;
        font-size: 14px;
    }

.bt_wrap {
    margin-top: 30px;
    text-align: center;
    font-size: 0;
}

    .bt_wrap a:first-child {
        margin-left: 0;
    }

    .bt_wrap a {
        margin-left: 10px;
    }


.board_list {
    width: 100%;
    border-top: 2px solid #6c757d;
}

tbody > tr {
    border-bottom: 1px solid #ccd3df;
    /*font-size: 0;*/
}

.notice_top > .top {
    border-bottom: 1px solid #6c757d;
}

.notice_top .top .title {
    text-align: center;
    text-decoration: none;
}

tbody > tr:last-child {
    border-bottom: 1px solid #555;
}

.notice_top > .top > th,
tbody > tr > td {
    /*display: inline-block;*/
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
}

.notice_top > .top > th {
    font-weight: 600;
}

tbody .num {
    width: 10%;
}

tbody .title {
    width: 60%;
    text-align: left;
    text-decoration: none;
}


    tbody .title .NoticeClass {
        text-decoration: none;
    }


tbody .date {
    width: 10%;
}

tbody .count {
    width: 10%;
}

.pagination-container {
    margin-top: 30px;
    text-align: center;
    font-size: 0;
}

    .pagination-container .pagination {
        justify-content: center;
    }

    .pagination-container li:first-child {
        border-left: 1px solid #ddd;
    }

    .pagination-container li {
        display: inline-block;
        width: 32px;
        height: 32px;
        box-sizing: border-box;
        vertical-align: middle;
        border: 1px solid #ddd;
        border-left: 0;
        line-height: 100%;
        text-decoration: none;
    }


    .pagination-container li {
        padding-top: 10px;
        font-size: 12px;
        letter-spacing: -1px;
    }

        .pagination-container li:active,
        .pagination-container li:hover,
        .pagination-container li:focus {
            border-color: #162b4e;
            background: #162b4e;
            color: #fff;
        }

        .pagination-container span.first-child:active,
        .pagination-container li:hover,
        .pagination-container li:focus {
            border-color: #162b4e;
            background: #162b4e;
            color: #fff;
        }

    .pagination-container span.sr-only:first-child {
        padding-top: 9px;
        font-size: 14px;
    }



/* Notice/ Details.html */
.board_view {
    width: 100%;
    border-top: 2px solid #6c757d;
}

    .board_view .title .NoticeClass {
        text-indent: 10px;
        text-decoration: none;
    }

    .board_view .title {
        padding: 20px 15px;
        border-bottom: 1px dashed #ddd;
        font-size: 20px;
    }

    .board_view .info {
        padding: 15px 15px 0;
        border-bottom: 1px solid #999;
        font-size: 0;
    }

        .board_view .info dl {
            position: relative;
            display: inline-block;
            padding: 0 20px;
        }

            .board_view .info dl:first-child {
                padding-left: 0;
            }

            .board_view .info dl::before {
                content: "";
                position: absolute;
                top: 1px;
                left: 0;
                display: block;
                width: 1px;
                height: 13px;
            }

            .board_view .info dl:first-child::before {
                display: none;
            }

            .board_view .info dl dt,
            .board_view .info dl dd {
                display: inline-block;
                font-size: 14px;
            }

            .board_view .info dl dt {
            }

            .board_view .info dl dd {
                margin-left: 10px;
                color: #777;
            }

    .board_view .cont {
        height: 30rem;
        padding: 15px;
        border-bottom: 1px solid #6c757d;
        line-height: 160%;
        font-size: 14px;
    }

    .board_view input.cont {
        width: 50rem;
        height: 30rem;
        padding: 15px;
        border-bottom: 1px solid #6c757d;
        line-height: 160%;
        font-size: 14px;
    }

    .board_view .noticeCont { /* 공지사항 Deatils */
        height: 15rem;
        padding: 15px;
        border-bottom: 1px solid #6c757d;
        line-height: 160%;
        font-size: 14px;
    }

/* QnA / Create.html */
.board_writeQnA {
    border-top: 2px solid #343a40;
}

    .board_writeQnA .title input[type='text'] {
        width: 40rem;
    }

    .board_writeQnA .info input[type='text'],
    .board_writeQnA .info input[type='email'],
    .board_writeQnA .info input[type='tel'],
    .board_writeQnA .info select {
        width: 15rem;
        height: 2.1rem;
        padding: .1rem 1rem;
        box-sizing: border-box;
    }


    .board_writeQnA .form-group dd i {
        position: absolute;
        left: 30%;
        top: 19px;
    }

    .board_writeQnA .title,
    .board_writeQnA .info {
        padding: 10px;
    }

    .board_writeQnA .info {
        border-top: 1px dashed #ddd;
        /*border-bottom: 1px solid #343a40;*/
        font-size: 0;
    }

    .board_writeQnA .title dl {
        font-size: 0;
        margin-bottom: 0 !important;
    }

    .board_writeQnA .info dl {
        display: inline-block;
        width: 50%;
        vertical-align: middle;
    }

    .board_writeQnA .title dt,
    .board_writeQnA .title dd,
    .board_writeQnA .info dt,
    .board_writeQnA .info dd,
    .board_writeQnA dl dt,
    .board_writeQnA dl dd {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }

    .board_writeQnA .form-group dt {
        margin-right: 2rem;
    }

    .board_writeQnA .title dt,
    .board_writeQnA .info dt {
        width: 100px;
    }

    .board_writeQnA .title dd {
        width: calc(100% - 100px);
    }


    .board_writeQnA .cont {
        /*            border-bottom: 1px solid #343a40;*/
    }

        .board_writeQnA .cont input {
            display: block;
            width: 100%;
            height: 300px;
            /* padding: 15px; */
            box-sizing: border-box;
            border: 0;
            resize: vertical;
        }

    .board_writeQnA .form-group dd {
        width: 17rem;
    }

/* QnA / Edit.html */
/* ServiceApply /.html */
.board_write {
    border-top: 2px solid #343a40;
}

    .board_write .title input[type='text'] {
        width: 40rem;
    }

    .board_write .info input[type='text'],
    .board_write .info input[type='email'],
    .board_write .info input[type='tel'],
    .board_write .info select {
        width: 13rem;
        height: 2.1rem;
        padding: .1rem 1rem;
        box-sizing: border-box;
    }


    .board_write .form-group dd i {
        position: absolute;
        left: 34%;
        top: 19px;
    }

    .board_write .title,
    .board_write .info {
        padding: 10px;
    }

    .board_write .info {
        border-top: 1px dashed #ddd;
        border-bottom: 1px solid #343a40;
        font-size: 0;
    }

    .board_write .title dl {
        font-size: 0;
        margin-bottom: 0 !important;
    }

    .board_write .info dl {
        display: inline-block;
        width: 50%;
        vertical-align: middle;
    }

    .board_write .title dt,
    .board_write .title dd,
    .board_write .info dt,
    .board_write .info dd,
    .board_write dl dt,
    .board_write dl dd {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }

    .board_write .title dt,
    .board_write .info dt {
        width: 100px;
    }

    .board_write .title dd {
        width: calc(100% - 100px);
    }


    .board_write .cont {
        border-bottom: 1px solid #343a40;
    }

        .board_write .cont input {
            display: block;
            width: 100%;
            height: 300px;
            /* padding: 15px; */
            box-sizing: border-box;
            border: 0;
            resize: vertical;
        }

    .board_write .form-group dd {
        width: 17rem;
    }


/* ServiceApply - ApplicationDetails 반응형 */
@media (max-width: 768px) {
    .SA_list .num,
    .SA_list .ind_date,
    .SA_list .business_type,
    .SA_list .count {
        display: none;
    }

    .SA_list .writer,
    .SA_list ..company {
        width: 40%;
    }


    .SA_list .service_status {
        width: 20%;
    }

    .SA_list .writer .SAClass {
        text-indent: 10px;
        text-decoration: none;
    }
}

@media (max-width: 998px) {
    .board_write .title input[type='text'] {
        width: 28rem;
    }

    .board_write .form-group dd i {
        position: absolute;
        left: 40%;
        top: 45px;
    }

    .board_writeQnA .title input[type='text'] {
        width: 28rem;
    }

    .board_writeQnA .form-group dd i {
        position: absolute;
        left: 49%;
        top: 19px;
    }
}


/* 공지사항 반응형 */
@media (max-width: 768px) {
    .board_wrap {
        width: 100%;
        /*            min-width: 320px;*/
        padding: 0 30px;
        box-sizing: border-box;
    }

    .board_list .num,
    .board_list .count {
        display: none;
    }

    .board_list .date {
        width: 40%;
    }

    .board_list .title .NoticeClass {
        text-indent: 10px;
        text-decoration: none;
    }

    .board_list .top .title {
        text-indent: 0;
    }


    .board_page a {
        width: 26px;
        height: 26px;
    }

        .board_page a.bt {
            padding-top: 7px;
        }

        .board_page a.num {
            padding-top: 6px;
        }

    .board_view .info dl {
        width: 100%;
        padding: 0;
        display: flex;
    }

        .board_view .info dl:nth-child(-n+2) {
            margin-bottom: 5px;
        }

        .board_view .info dl::before {
            display: none;
        }

        .board_view .info dl dt,
        .board_view .info dl dd {
            font-size: 13px;
        }

    .board_view .noticeCont {
        height: 20rem;
        padding: 15px;
        border-bottom: 1px solid #6c757d;
        line-height: 160%;
        font-size: 14px;
    }

    .board_write .info dl {
        width: 50%;
    }

        .board_write .info dl:first-child {
            margin-right: 2%;
        }

    .board_write .title dt,
    .board_write .info dt {
        display: none;
    }

    .board_write .title dd,
    .board_write .info dd {
        width: 100%;
    }

    .board_write .title input[type="text"],
    .board_write .info input[type="text"],
    .board_write .info input[type="password"] {
        width: 100%;
    }

    /* QnA / Create */
    .board_writeQnA .info dl {
        width: 100%;
    }

    .board_writeQnA .title dd,
    .board_writeQnA .info dd {
        width: 100%;
    }

    .board_writeQnA .title input[type="text"],
    .board_writeQnA .info input[type='email'],
    .board_writeQnA .info input[type="text"],
    .board_writeQnA .info input[type='tel'],
    .board_writeQnA .info input[type="password"],
    .board_writeQnA .info select {
        width: 100%;
    }

    .board_writeQnA .form-group input[type="password"] { /* QnA 등록 비밀번호 */
        width: 100%;
    }

    .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
        position: absolute;
        left: 55%;
        top: 20px;
    }

    .form-group-SA .form-control-submit-button-SA { /* 서비스 신청 버튼 */
        display: inline-block;
        width: 40%;
        height: 3.125rem;
        border: 1px solid #162b4e;
        border-radius: 1.5rem;
        background-color: #162b4e;
        color: #fff;
        font: 700 0.875rem/0 "Open Sans", sans-serif;
        cursor: pointer;
        transition: all 0.2s;
        padding: 20px 0;
    }
}


/*************************/
/*          QnA          */
/*************************/
.qna_list {
    width: 100%;
    border-top: 2px solid #6c757d;
}

    .qna_list table {
        border-bottom: 1px solid #ccd3df;
        font-size: 0;
    }

    .qna_list tr.top {
        border-bottom: 1px solid #6c757d;
    }

    .qna_list tbody:last-child {
        border-bottom: 1px solid #555;
    }

    .qna_list thead.qna_top th {
        /*display: inline-block;*/
        padding: 15px 0;
        text-align: center;
        font-size: 16px;
    }

.qna_top tr.top th {
    font-weight: 600;
}

.qna_list .num,
.qna_list .count,
.qna_list .name,
.qna_list .date,
.qna_list .status {
    width: 10%;
}

.qna_list .title {
    width: 50%;
    text-align: left;
}

    .qna_list .title .title_content {
        text-decoration: none;
    }

.qna_list .title {
    text-align: center;
    text-decoration: none;
}

/* QnA / Details.html */
.qna_view {
    width: 100%;
    border-top: 2px solid #6c757d;
}

    .qna_view .title .QnAClass {
        text-indent: 10px;
        text-decoration: none;
    }

    .qna_view .title {
        padding: 20px 15px;
        border-bottom: 1px dashed #ddd;
        font-size: 20px;
    }

    .qna_view .info {
        padding: 15px 15px 0;
        border-bottom: 1px solid #999;
        font-size: 0;
    }

        .qna_view .info dl {
            position: relative;
            display: inline-block;
            padding: 0 20px;
        }

            .qna_view .info dl:first-child {
                padding-left: 0;
            }

            .qna_view .info dl::before {
                content: "";
                position: absolute;
                top: 1px;
                left: 0;
                display: block;
                width: 1px;
                height: 14px;
            }

            .qna_view .info dl:first-child::before {
                display: none;
            }

            .qna_view .info dl dt,
            .qna_view .info dl dd {
                display: inline-block;
                font-size: 14px;
            }

            .qna_view .info dl dt {
            }

            .qna_view .info dl dd {
                margin-left: 10px;
                color: #777;
            }

    .qna_view textarea.qancont {
        width: 100%;
        height: 15rem;
        padding: 2rem;
        border-bottom: 1px dashed #999;
        line-height: 200%;
        font-size: 14px;
    }

    .qna_view .reply {
        text-align: left !important;
        padding: .7rem;
        font-size: 15px;
        font-weight: bold;
        color: #888
    }

    .qna_view .reply-cont > p {
        font-size: 14px;
    }

    .qna_view .reply-cont {
        width: 100%;
        padding: 1rem;
        border-bottom: 1px solid #ddd;
        min-height: 250px;
        background-color: #e3edfc;
        padding: 30px 3%;
        text-align: left;
        font-size: 14px;
    }


/* QnA 반응형 */
@media (max-width: 768px) {
    .qna_list .num,
    /*        .qna_list .name,*/
    .qna_list .count,
    .qna_list .date {
        display: none;
    }

    .qna_list .name {
        width: 20%;
    }

    .qna_list .answer {
        width: 60%;
    }

    .qna_list .status {
        width: 30%;
    }

    .qna_list .title {
        text-indent: 0;
    }

    .board_page a {
        width: 26px;
        height: 26px;
    }

        .board_page a.bt {
            padding-top: 7px;
        }

        .board_page a.num {
            padding-top: 6px;
        }



    .qna_view .info dl {
        width: 50%;
        padding: 0;
    }

        .qna_view .info dl:nth-child(-n+2) {
            margin-bottom: 5px;
        }

        .qna_view .info dl::before {
            display: none;
        }

        .qna_view .info dl dt,
        .qna_view .info dl dd {
            font-size: 12px;
        }


    .qna_view textarea.qancont {
        width: 100%;
        height: 15rem;
        padding: 2rem;
        border-bottom: 1px dashed #999;
        line-height: 200%;
        font-size: 14px;
    }

    .board_write .info dl {
        width: 49%;
    }

        .board_write .info dl:first-child {
            margin-right: 2%;
        }

    .board_write .title dt,
    .board_write .info dt {
        display: none;
    }

    .board_write .title dd,
    .board_write .info dd {
        width: 80%;
    }

    .board_write .title input[type="text"],
    .board_write .info input[type="text"],
    .board_write .info input[type="email"],
    .board_write .info input[type="tel"],
    .board_write .form-group dd input[type="password"] {
        width: 100%;
    }

    .board_write .form-group dd i {
        position: absolute;
        left: 78%;
        top: 47px;
    }

    .board_write .form-group dd {
        width: 17rem;
    }

    .board_write .title input[type='text'] {
        width: 13rem;
    }
}




/*************************/
/*     02. Preloader     */
/*************************/
.spinner-wrapper {
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
}

.spinner {
    position: absolute;
    top: 50%; /* centers the loading animation vertically one the screen */
    left: 50%; /* centers the loading animation horizontally one the screen */
    width: 3.75rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */
    text-align: center;
}

    .spinner > div {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        background-color: #162b4e;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
    }
}


/**************************/
/*     03. Navigation     */
/**************************/
.navbar-custom {
    background-color: #162b4e;
    box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
    font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
    transition: all 0.2s;
}

    .navbar-custom .container {
        max-width: 87.5rem;
    }

    .navbar-custom .navbar-brand.logo-image img {
        width: 4.4375rem;
        height: 1.75rem;
    }

    .navbar-custom .navbar-brand.logo-text {
        font: 700 2rem/1.5rem "Open Sans", sans-serif;
        color: #fff;
        ;
        text-decoration: none;
    }

    .navbar-custom .navbar-nav {
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .navbar-custom .nav-item .nav-link {
        padding: 0.625rem 0.75rem 0.625rem 0.75rem;
        color: #f7f5f5;
        opacity: 0.8;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .navbar-custom .nav-item .nav-link:hover,
        .navbar-custom .nav-item .nav-link.active {
            color: #fff;
            opacity: 1;
        }

    /* Dropdown Menu */
    .navbar-custom .dropdown:hover > .dropdown-menu {
        display: block; /* this makes the dropdown menu stay open while hovering it */
        min-width: auto;
        animation: fadeDropdown 0.2s; /* required for the fade animation */
    }

@keyframes fadeDropdown {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.navbar-custom .dropdown-toggle:focus { /* removes dropdown outline on focus */
    outline: 0;
}

.navbar-custom .dropdown-menu {
    margin-top: 0;
    border: none;
    border-radius: 0.25rem;
    background-color: #162b4e;
}

.navbar-custom .dropdown-item {
    color: #f7f5f5;
    opacity: 0.8;
    font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
    text-decoration: none;
}

    .navbar-custom .dropdown-item:hover {
        background-color: #162b4e;
        color: #fff;
        opacity: 1;
    }

.navbar-custom .dropdown-items-divide-hr {
    width: 100%;
    height: 1px;
    margin: 0.75rem auto 0.725rem auto;
    border: none;
    background-color: #c4d8dc;
    opacity: 0.2;
}
/* end of dropdown menu */

.navbar-custom .nav-item .btn-outline-sm {
    margin-top: 0.25rem;
    margin-bottom: 1.375rem;
    margin-left: 0.5rem;
    border: 0.125rem solid #fff;
    color: #fff;
}

    .navbar-custom .nav-item .btn-outline-sm:hover {
        background-color: #fff;
        color: #162b4e;
    }

.navbar-custom .navbar-toggler {
    padding: 0;
    border: none;
    color: #fff;
    font-size: 2rem;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-times {
    display: none;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-bars {
    display: inline-block;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-bars {
    display: none;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-times {
    display: inline-block;
    margin-right: 0.125rem;
}


/*********************/
/*    04. Header     */
/*********************/
.header {
    background-color: #162b4e;
}

    .header .header-content {
        padding-top: 7rem;
        /* padding-bottom: 4rem; */
        text-align: center;
    }

    .header .text-container {
        margin-bottom: 3rem;
    }

    .header h1 {
        margin-bottom: 1rem;
        color: #fff;
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .header h4 {
        color: #fff;
    }

    .header .p-large {
        margin-bottom: 2rem;
        color: #f3f7fd;
    }

    .header .btn-solid-lg {
        margin-right: 0.5rem;
        margin-bottom: 1.125rem;
        margin-left: 0.5rem;
        border-color: #f3f7fd;
        background-color: #f3f7fd;
        color: #162b4e;
    }

        .header .btn-solid-lg:hover {
            background: transparent;
            color: #f3f7fd;
        }

    .header .btn-outline-lg {
        border-color: #f3f7fd;
        color: #f3f7fd;
    }

        .header .btn-outline-lg:hover {
            background-color: #f3f7fd;
            color: #162b4e;
        }

.header-frame {
    margin-top: -1px; /* To remove white margin in FF */
    width: 100%;
    height: 2.25rem;
    /* width: 400px !important;
	height: 450px !important; */
}


/*************************/
/*     05. Customers     */
/*************************/
.slider-1 {
    padding-top: 5rem;
    padding-bottom: 3.25rem;
}

    .slider-1 .slider-container {
        text-align: center;
    }


/***************************/
/*     06. Description     */
/***************************/
.cards-1 {
    padding-top: 3.25rem;
    padding-bottom: 3rem;
    text-align: center;
}

    .cards-1 .h2-heading {
        margin-bottom: 3.5rem;
        /*font-family : 'IBM Plex Sans KR', sans-serif;*/
        font-family: 'IBM Plex Sans KR', sans-serif;
    }

    .cards-1 .card {
        max-width: 21rem;
        margin-right: auto;
        margin-bottom: 3.5rem;
        margin-left: auto;
        padding: 0;
        border: none;
    }

    .cards-1 .card-image {
        max-width: 16rem;
        margin-right: auto;
        margin-bottom: 2rem;
        margin-left: auto;
    }

    .cards-1 .card-title {
        margin-bottom: 0.5rem;
    }

    .cards-1 .card-body {
        padding: 0;
    }


/************************/
/*     07. Features     */
/************************/
.tabs {
    padding-top: 8rem;
    padding-bottom: 8.125rem;
    background-color: #f3f7fd;
}

    .tabs .h2-heading,
    .tabs .p-heading {
        text-align: center;
    }

    .tabs .nav-tabs {
        display: block;
        margin-bottom: 2.25rem;
        border-bottom: none;
    }

    .tabs .nav-link {
        padding: 0.375rem 1rem 0.375rem 1rem;
        border: none;
        color: #86929b;
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 1.75rem;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .tabs .nav-link:hover,
        .tabs .nav-link.active {
            background: transparent;
            color: #5f4dee;
        }

        .tabs .nav-link .fas {
            margin-right: 0.625rem;
        }

    .tabs .image-container {
        margin-bottom: 2.75rem;
    }

    .tabs .list-unstyled .fas {
        color: #162b4e;
        font-size: 0.5rem;
        line-height: 1.625rem;
    }

    .tabs .list-unstyled .media-body {
        margin-left: 0.625rem;
    }

    .tabs #tab-1 h3 {
        margin-bottom: 0.75rem;
    }

    .tabs #tab-1 .list-unstyled {
        margin-bottom: 1.5rem;
    }

    .tabs #tab-2 h3 {
        margin-bottom: 0.75rem;
    }

    .tabs #tab-2 .list-unstyled {
        margin-bottom: 1.5rem;
    }

    .tabs #tab-3 h3 {
        margin-bottom: 0.75rem;
    }

    .tabs #tab-3 .list-unstyled {
        margin-bottom: 1.5rem;
    }


/***********************************/
/*     08. Features Lightboxes     */
/***********************************/
.lightbox-basic {
    margin: 2.5rem auto;
    padding: 2rem 1.5rem 2rem 1.5rem;
    border-radius: 0.25rem;
    background: #fff;
    text-align: left;
}

    .lightbox-basic .container {
        padding-right: 0;
        padding-left: 0;
    }

    .lightbox-basic .image-container {
        max-width: 33.75rem;
        margin-right: auto;
        margin-bottom: 3rem;
        margin-left: auto;
    }

    .lightbox-basic h3 {
        margin-bottom: 0.5rem;
    }

    .lightbox-basic hr {
        width: 2.5rem;
        height: 0.125rem;
        margin-top: 0;
        margin-bottom: 0.875rem;
        margin-left: 0;
        border: 0;
        background-color: #162b4e;
        text-align: left;
    }

    .lightbox-basic h4 {
        margin-bottom: 1rem;
    }

    .lightbox-basic .list-unstyled .fas {
        color: #162b4e;
        font-size: 0.5rem;
        line-height: 1.625rem;
    }

    .lightbox-basic .list-unstyled .media-body {
        margin-left: 0.625rem;
    }

    .lightbox-basic .btn-outline-reg,
    .lightbox-basic .btn-solid-reg {
        margin-top: 0.75rem;
    }

        /* Signup Button */
        .lightbox-basic .btn-solid-reg.mfp-close {
            position: relative;
            width: auto;
            height: auto;
            color: #fff;
            opacity: 1;
        }

            .lightbox-basic .btn-solid-reg.mfp-close:hover {
                color: #162b4e;
            }
    /* end of signup Button */

    /* Back Button */
    .lightbox-basic a.mfp-close.as-button {
        position: relative;
        width: auto;
        height: auto;
        margin-left: 0.375rem;
        color: #162b4e;
        opacity: 1;
    }

        .lightbox-basic a.mfp-close.as-button:hover {
            color: #fff;
        }
    /* end of back button */

    .lightbox-basic button.mfp-close.x-button {
        position: absolute;
        top: -0.125rem;
        right: -0.125rem;
        width: 2.75rem;
        height: 2.75rem;
        color: #707984;
    }

/***********************************/
/*     08-1. Lightbox title     */
/***********************************/
.lightbox-title {
    font-weight: bold;
    font-family: "Nanum Gothic", sans-serif;
    font-size: 14px;
}

.lightbox-content {
    font-size: 13px;
    font-family: "Nanum Gothic", sans-serif;
    margin-left: 0.625rem;
}


/***********************/
/*     09. Details     */
/***********************/
.basic-1 {
    padding-top: 7.5rem;
    padding-bottom: 8rem;
}

    .basic-1 .text-container {
        margin-bottom: 3.75rem;
    }

    .basic-1 .list-unstyled {
        margin-bottom: 1.375rem;
    }

        .basic-1 .list-unstyled .fas {
            color: #162b4e;
            font-size: 0.5rem;
            line-height: 1.625rem;
        }

        .basic-1 .list-unstyled .media-body {
            margin-left: 0.625rem;
        }


/*********************/
/*     10. Video     */
/*********************/
.basic-2 {
    padding-top: 8rem;
    padding-bottom: 6.75rem;
    background-color: #f3f7fd;
    text-align: center;
}

    .basic-2 .image-container {
        margin-bottom: 2rem;
    }

        .basic-2 .image-container img {
            border-radius: 0.75rem;
        }

    .basic-2 .video-wrapper {
        position: relative;
    }

    /* Video Play Button */
    .basic-2 .video-play-button {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        display: block;
        box-sizing: content-box;
        width: 2rem;
        height: 2.75rem;
        padding: 1.125rem 1.25rem 1.125rem 1.75rem;
        border-radius: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

        .basic-2 .video-play-button:before {
            content: "";
            position: absolute;
            z-index: 0;
            top: 50%;
            left: 50%;
            display: block;
            width: 4.75rem;
            height: 4.75rem;
            border-radius: 50%;
            background: #162b4e;
            animation: pulse-border 1500ms ease-out infinite;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }

        .basic-2 .video-play-button:after {
            content: "";
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            display: block;
            width: 4.375rem;
            height: 4.375rem;
            border-radius: 50%;
            background: #162b4e;
            transition: all 200ms;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }

        .basic-2 .video-play-button span {
            position: relative;
            display: block;
            z-index: 3;
            top: 0.375rem;
            left: 0.25rem;
            width: 0;
            height: 0;
            border-left: 1.625rem solid #fff;
            border-top: 1rem solid transparent;
            border-bottom: 1rem solid transparent;
        }

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}
/* end of video play button */

.basic-2 .p-heading {
    margin-bottom: 1rem;
}


/***********************/
/*     11. Pricing     */
/***********************/
.cards-2 {
    padding-top: 7.875rem;
    padding-bottom: 2.25rem;
    text-align: center;
}

    .cards-2 .h2-heading {
        margin-bottom: 3.75rem;
    }

    .cards-2 .card {
        display: block;
        max-width: 19rem;
        margin-right: auto;
        margin-bottom: 3rem;
        margin-left: auto;
        border: 1px solid #ccd3df;
        border-radius: 0.375rem;
    }

        .cards-2 .card .card-body {
            padding: 2.5rem 2rem 2.75rem 2em;
        }

        .cards-2 .card .card-title {
            margin-bottom: 0.5rem;
            color: #162b4e;
            font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
        }

        .cards-2 .card .price .currency {
            margin-right: 0.25rem;
            color: #434c54;
            font-weight: 700;
            font-size: 1.5rem;
            vertical-align: 40%;
        }

        .cards-2 .card .price .value {
            color: #434c54;
            font: 700 3.25rem/3.5rem "Open Sans", sans-serif;
            text-align: center;
        }

        .cards-2 .card .frequency {
            font-size: 0.875rem;
        }

        .cards-2 .card .divider {
            height: 1px;
            margin-top: 1.75rem;
            margin-bottom: 2rem;
            border: none;
            background-color: #ccd3df;
        }

        .cards-2 .card .list-unstyled {
            margin-top: 1.875rem;
            margin-bottom: 1.625rem;
            text-align: center;
        }

            .cards-2 .card .list-unstyled .media {
                margin-bottom: 0.5rem;
            }

            .cards-2 .card .list-unstyled .fas {
                color: #162b4e;
                font-size: 0.875rem;
                line-height: 1.625rem;
            }

                .cards-2 .card .list-unstyled .fas.fa-times {
                    margin-left: 0.1875rem;
                    margin-right: 0.125rem;
                    color: #555;
                }

            .cards-2 .card .list-unstyled .media-body {
                margin-left: 0.625rem;
            }


/****************************/
/*     12. Testimonials     */
/****************************/
.slider-2 {
    padding-top: 2.75rem;
    padding-bottom: 4rem;
}

    .slider-2 .slider-container {
        position: relative;
    }

    .slider-2 .swiper-container {
        position: static;
        width: 82%;
        text-align: center;
    }

    .slider-2 .image-wrapper {
        width: 6rem;
        margin-right: auto;
        margin-bottom: 1rem;
        margin-left: auto;
    }

        .slider-2 .image-wrapper img {
            border-radius: 50%;
        }

    .slider-2 .testimonial-text {
        margin-bottom: 0.5rem;
    }

    .slider-2 .testimonial-author {
        color: #333;
    }

    .slider-2 .swiper-button-prev,
    .slider-2 .swiper-button-next {
        width: 1.125rem;
    }

        .slider-2 .swiper-button-prev:focus,
        .slider-2 .swiper-button-next:focus {
            /* even if you can't see it chrome you can see it on mobile device */
            outline: none;
        }

    .slider-2 .swiper-button-prev {
        left: -0.375rem;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
        background-size: 1.125rem 1.75rem;
    }

    .slider-2 .swiper-button-next {
        right: -0.375rem;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
        background-size: 1.125rem 1.75rem;
    }


/**************************/
/*     13. Newsletter     */
/**************************/
.form {
    padding-top: 4rem;
    padding-bottom: 6rem;
}

    .form .text-container {
        margin-bottom: 3.5rem;
        padding: 3.5rem 1rem 2.5rem 1rem;
        border-radius: 0.5rem;
        background-color: #f3f7fd;
    }

    .form h2 {
        margin-bottom: 2.75rem;
        text-align: center;
    }

    .form .icon-container {
        text-align: center;
    }

    .form .fa-stack {
        width: 2em;
        margin-bottom: 0.75rem;
        margin-right: 0.375rem;
        font-size: 1.5rem;
    }

        .form .fa-stack .fa-stack-1x {
            color: #fff;
            transition: all 0.2s ease;
        }

        .form .fa-stack .fa-stack-2x {
            color: #162b4e;
            transition: all 0.2s ease;
        }

        .form .fa-stack:hover .fa-stack-1x {
            color: #162b4e;
        }

        .form .fa-stack:hover .fa-stack-2x {
            color: #f3f7fd;
        }


/**********************/
/*     14. Footer     */
/**********************/
.footer-frame {
    width: 100%;
    height: 1.5rem;
}

.footer {
    padding-top: 2rem;
    /* padding-bottom: 0.5rem; */
    background-color: #162b4e;
}

    .footer .footer-col {
        margin-bottom: 2.25rem;
    }

    .footer h4 {
        margin-bottom: 0.625rem;
        color: #fff;
    }


    .footer .list-unstyled,
    .footer p {
        color: #f3f7fd;
    }

    .footer .footer-col.middle .list-unstyled .fas {
        color: #fff;
        font-size: 0.5rem;
        line-height: 1.5rem;
    }

    .footer .footer-col.middle .list-unstyled .media-body {
        margin-left: 0.5rem;
    }

    .footer .footer-col.last .list-unstyled .fas {
        color: #fff;
        font-size: 0.875rem;
        line-height: 1.5rem;
    }

    .footer .footer-col.last .list-unstyled .media-body {
        margin-left: 0.625rem;
    }

    .footer .footer-col.last .list-unstyled .fas.fa-globe {
        margin-left: 1rem;
        margin-right: 0.625rem;
    }


/*************************/
/*     15. Copyright     */
/*************************/
.copyright {
    /* padding-top: 1rem; */
    /* padding-bottom: 0.375rem; */
    background-color: #162b4e;
    text-align: center;
}

    .copyright .p-small {
        padding-top: 0.875rem;
        border-top: 1px solid #707a99;
        color: #f3f7fd;
    }

    .copyright a {
        color: #f3f7fd;
        text-decoration: none;
    }


/**********************************/
/*     16. Back To Top Button     */
/**********************************/
a.back-to-top {
    position: fixed;
    z-index: 999;
    right: 0.75rem;
    bottom: 0.75rem;
    display: none;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 1.875rem;
    background: #162b4e url("../images/up-arrow.png") no-repeat center 47%;
    background-size: 1.125rem 1.125rem;
    text-indent: -9999px;
}

a:hover.back-to-top {
    background-color: #103f8f;
}


/***************************/
/*     17. Extra Pages     */
/***************************/
.ex-header {
    padding-top: 8rem;
    padding-bottom: 5rem;
    background-color: #162b4e;
    text-align: center;
}

    .ex-header h1 {
        color: #fff;
    }

.ex-basic-1 {
    padding-top: 2rem;
    padding-bottom: 0.875rem;
    background-color: #f3f7fd;
}

    .ex-basic-1 .breadcrumbs {
        margin-bottom: 1.125rem;
    }

        .ex-basic-1 .breadcrumbs .fa {
            margin-right: 0.5rem;
            margin-left: 0.625rem;
        }

.ex-basic-2 {
    /* goeun */
    padding-top: 4.75rem;
    /* padding-bottom: 4rem; */
}

    .ex-basic-2 h3 {
        margin-bottom: 1rem;
    }

    .ex-basic-2 .text-container {
        margin-bottom: 3.625rem;
    }

        .ex-basic-2 .text-container.last {
            margin-bottom: 0;
        }

    .ex-basic-2 .ol-out {
        margin-top: 15px;
        padding-right: 15px;
        line-height: 1.7;
    }

    .ex-basic-2 .text-container.dark {
        padding: 1.625rem 1.5rem 0.75rem 2rem;
        background-color: #f3f7fd;
    }

    .ex-basic-2 .image-container-large {
        margin-bottom: 4rem;
    }

        .ex-basic-2 .image-container-large img {
            border-radius: 0.25rem;
        }

    .ex-basic-2 .image-container-small img {
        border-radius: 0.25rem;
    }

    .ex-basic-2 .list-unstyled .fas {
        color: #162b4e;
        font-size: 0.5rem;
        line-height: 1.625rem;
    }

    .ex-basic-2 .list-unstyled .media-body {
        margin-left: 0.625rem;
    }

    .ex-basic-2 .form-container {
        margin-top: 3rem;
    }

    .ex-basic-2 .btn-outline-reg {
        margin-top: 1.75rem;
    }

.ex-footer-frame {
    width: 100%;
    height: 2.75rem;
    background-color: #f3f7fd;
}


/****************************************/
/*     18. Sign Up and Log In Pages     */
/****************************************/

.ex-2-header {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
    background-color: #162b4e;
    min-height: 100vh;
}

    .ex-2-header h1,
    .ex-2-header p {
        color: #fff;
    }

    .ex-2-header p {
        max-width: 24rem;
        margin-right: auto;
        margin-bottom: 1.5rem;
        margin-left: auto;
    }

    .ex-2-header .form-container {
        max-width: 26rem;
        margin-right: auto;
        margin-left: auto;
        padding: 2.25rem 1.25rem 1.25rem 1.25rem;
        border-radius: 0.5rem;
        background-color: #f3f7fd;
    }

    .ex-2-header .checkbox {
        text-align: center;
    }

.form-group .form-control-submit-button {
    margin: 15px 0 5px;
}

/* add goeun code */
.find_wrap {
    padding: 20px 0 5px;
    text-align: center;
    list-style-type: none;
}

    .find_wrap li {
        margin-left: 10px;
        display: inline-block;
    }

        .find_wrap li a {
            color: #dae1e6;
        }
/* end of goeun code */


/*****************************/
/*     19. Media Queries     */
/*****************************/

    /* Max-width width 700px  */
    @media (max-width: 750px) {
        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 25rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 92%;
                top: 45px;
            }
    }

    /* Max-width width 500px - iphone */
    @media (max-width: 550px) {
        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 25rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 92%;
                top: 45px;
            }
    }

    /* Max-width width 500px - iphone */
    @media (max-width: 500px) {
        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 20rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 90%;
                top: 45px;
            }

        .board_write .form-group dd { /* qna 작성 비밀번호*/
            width: 15rem;
        }
    }


    /* Max-width width 450px - iphone XR */
    @media (max-width: 450px) {
        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 17rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 90%;
                top: 45px;
            }
    }

    /* Max-width width 396px - iphone pro */
    @media (max-width: 396px) {
        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 15rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 87%;
                top: 45px;
            }

        .board_write .form-group dd { /* qna 작성 비밀번호*/
            width: 14rem;
        }
    }

    /* Max-width width 370px - z플립 */
    @media (max-width: 370px) {
        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 14rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 85%;
                top: 45px;
            }

        .btn-solid-reg3 { /* QnA 등록  */
            display: inline-block;
            padding: 1.1375rem 1.5rem 1.1375rem 1.5rem;
            border: 0.12rem solid #162b4e;
            border-radius: 2rem;
            background-color: #162b4e;
            color: #fff;
            font: 700 0.75rem/0 "Open Sans", sans-serif;
            text-decoration: none;
            transition: all 0.2s;
        }

        .board_write .form-group dd { /* qna 작성 비밀번호*/
            width: 13rem;
        }
    }

    /* Max-width width 280px - Galaxy Fol */
    @media (max-width: 280px) {
        .board_writeQnA .form-group dt {
            margin-right: 1rem;
        }

        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 9rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 90%;
                top: 45px;
            }

        .board_write .form-group dd { /* qna 작성 비밀번호*/
            width: 14rem;
        }
    }

    /* Min-width width 768px */
    @media (min-width: 768px) {
        /* General Styles */
        .p-heading {
            width: 85%;
            margin-right: auto;
            margin-left: auto;
        }

        .h2-heading {
            width: 80%;
            margin-right: auto;
            margin-left: auto;
        }
        /* end of general styles */


        /* Header */
        .header .text-container {
            margin-bottom: 4rem;
        }

        .header h1 {
            font-size: 3.5rem;
            line-height: 4.125rem;
        }

        .header h4 {
            line-height: 2rem;
        }

        .header .btn-solid-lg {
            margin-bottom: 0;
            margin-left: 0;
        }

        .header-frame {
            height: 5.5rem;
        }
        /* end of header */


        /* main_image_text*/
        .main_image_text {
            position: absolute;
            top: 20%;
            left: 12%;
            color: white;
        }
        /* end of main_image_text */


        /* Testimonials */
        .slider-2 .swiper-button-prev {
            width: 1.375rem;
            background-size: 1.375rem 2.125rem;
        }

        .slider-2 .swiper-button-next {
            width: 1.375rem;
            background-size: 1.375rem 2.125rem;
        }
        /* end of testimonials */


        /* Newsletter */
        .form .text-container {
            padding: 4rem 2.5rem 3rem 2.5rem;
        }

        .form form {
            margin-right: 4rem;
            margin-left: 4rem;
        }
        /* end of newsletter */


        /* Footer */
        .footer-frame {
            height: 5rem;
        }
        /* end of footer */


        /* Extra Pages */
        .ex-header {
            padding-top: 11rem;
            padding-bottom: 9rem;
        }

        .ex-basic-2 .text-container.dark {
            padding: 2.5rem 3rem 2rem 3rem;
        }

        .ex-basic-2 .form-container {
            margin-top: 0;
        }
        /* end of extra pages */


        /* Sign Up And Log In Pages */
        .ex-2-header {
            padding-top: 11rem;
        }

            .ex-2-header .form-container {
                padding: 2.25rem 1.75rem 1.25rem 1.75rem;
            }

            /***************************************/
            /*   Service Apply(form-containerSA) goeun  */
            /***************************************/
            .ex-2-header .form-containerSA {
                max-width: 70rem;
                margin-right: auto;
                margin-left: auto;
                padding: 2.25rem 1.25rem 1.25rem 1.25rem;
                border-radius: 0.5rem;
                background-color: #f3f7fd;
            }

            .ex-2-header .board_write_wrap h4 {
                padding-left: 1.5rem;
            }


        .form-group-SA .form-control-submit-button-SA-detail {
            display: inline-block;
            width: 10%;
            height: 2.125rem;
            border: 1px solid #162b4e;
            border-radius: 1.5rem;
            background-color: #162b4e;
            color: #fff;
            font: 700 1rem/0 "Open Sans", sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            padding: 15px 0;
        }


        .formSA {
            border-top: 2px solid #343a40;
        }

            .formSA .titles,
            .formSA .infos {
                padding-top: 1.25rem;
                padding-left: 5rem;
            }

            .formSA .infos {
                border-top: .5px dashed #ddd;
                font-size: 0;
            }

            .formSA .titles dl {
                font-size: 0;
            }

            .formSA .infos dl {
                display: inline-block;
                width: 50%;
                vertical-align: middle;
            }

            .formSA .titles dt,
            .formSA .titles dd,
            .formSA .infos dt,
            .formSA .infos dd {
                display: inline-block;
                font-size: 14px;
            }

            .formSA .titles dt,
            .formSA .infos dt {
                width: 100px;
            }

            .formSA .title dd {
                width: calc(100% - 100px);
            }

            .formSA .titles input[type="text"],
            .formSA .titles input[type="email"],
            .formSA .infos input[type="text"],
            .formSA .infos input[type="tel"],
            .formSA .infos input[type="password"] {
                box-sizing: border-box;
            }

        .form-group-SA {
            text-align: center;
        }

            .form-group-SA .form-control-submit-button-SA {
                display: inline-block;
                width: 20%;
                height: 3.125rem;
                border: 1px solid #162b4e;
                border-radius: 1.5rem;
                background-color: #162b4e;
                color: #fff;
                font: 700 0.875rem/0 "Open Sans", sans-serif;
                cursor: pointer;
                transition: all 0.2s;
                padding: 20px 0;
            }

        .board_writeSA {
            border-top: 2px solid #343a40;
            margin-top: 1rem;
        }

        .board_writeSA2 {
            border-top: 2px solid #343a40;
            margin-top: 1rem;
            margin-bottom: 2rem;
        }

        .formSA .form-control-input:focus + .label-control,
        .formSA .form-control-input.notEmpty + .label-control {
            top: 0.125rem;
            opacity: 1;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .formSA dl {
            margin-top: 0;
            margin-bottom: 0;
        }

        .formSA .form-control-input {
            display: block; /* needed for proper display of the label in Firefox, IE, Edge */
            width: 10rem;
            /* padding-top: 1.0625rem; */
            padding-bottom: 0.0625rem;
            padding-left: 1.25rem;
            border: 1px solid #c4d8dc;
            border-radius: 0.25rem;
            background-color: #fff;
            color: #555;
            font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
            transition: all 0.2s;
        }

        tbody .title .SAClass {
            text-decoration: none;
        }

        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 33rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 93%;
                top: 45px;
            }

        /* IE10+ hack to solve lower label text position compared to the rest of the browsers */
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            .formSA .form-control-input {
                padding-top: 1.25rem;
                padding-bottom: 0.75rem;
                line-height: 1.75rem;
            }
        }

        .formSA .form-control-input:focus {
            border: 1px solid #a1a1a1;
            outline: none; /* Removes blue border on focus */
        }

        .formSA .form-control-input:hover {
            border: 1px solid #a1a1a1;
        }

        tbody .title .SAClass {
            text-decoration: none;
        }

        /* end of sign up and log in pages */
    }
    /* end of min-width width 768px */

    /* end of min-width width 850px */
    /* main_image_text*/
    @media (min-width : 820px) {
        .main_image_text {
            position: absolute;
            top: 40%;
            left: 12%;
            color: white;
        }

        .board_writeQnA .form-group dt {
            margin-right: 2rem;
        }

        .board_writeQnA .form-group input[type="password"], /* QnA 등록 비밀번호 */
        .board_writeQnA .form-group dd {
            width: 20rem;
        }

            .board_writeQnA .form-group dd i { /* QnA 등록 비밀번호 */
                position: absolute;
                left: 38%;
                top: 20px;
            }
    }
    /* end of main_image_text */


    /* Min-width width 992px */
    @media (min-width: 992px) {
        /* Navigation */
        .navbar-custom {
            /* padding: 2.125rem 1.5rem 2.125rem 2rem; */
            padding: 0.5rem 1.5rem 0.5rem 2rem;
            background: transparent;
            box-shadow: none;
        }

            .navbar-custom .navbar-nav {
                margin-top: 0;
                margin-bottom: 0;
            }

            .navbar-custom .nav-item .nav-link {
                padding: 0.25rem 0.75rem 0.25rem 0.75rem;
            }

                .navbar-custom .nav-item .nav-link:hover,
                .navbar-custom .nav-item .nav-link.active {
                    opacity: 1;
                }

            .navbar-custom.top-nav-collapse {
                padding: 0.5rem 1.5rem 0.5rem 2rem;
                background-color: #162b4e;
                box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
            }

                .navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
                .navbar-custom.top-nav-collapse .nav-item .nav-link.active {
                    color: #fff;
                }

            .navbar-custom .dropdown-menu {
                padding-top: 1rem;
                padding-bottom: 1rem;
                border-top: 0.25rem solid rgba(0, 0, 0, 0);
                border-radius: 0.25rem;
            }

            .navbar-custom.top-nav-collapse .dropdown-menu {
                border-top: 0.25rem solid rgba(0, 0, 0, 0);
                box-shadow: 0 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.02);
            }

            .navbar-custom .dropdown-item {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
            }

            .navbar-custom .dropdown-items-divide-hr {
                width: 84%;
            }

            .navbar-custom .nav-item .btn-outline-sm {
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 1rem;
            }
        /* end of navigation */


        /* General Styles */
        .p-heading {
            width: 65%;
        }

        .h2-heading {
            width: 60%;
        }
        /* end of general styles */


        /* Header */
        .header .header-content {
            text-align: left;
        }

        .header .text-container {
            margin-top: 4rem;
            margin-bottom: 0;
        }

        .header .image-container {
            position: relative;
            margin-top: 3rem;
        }

            .header .image-container .img-wrapper {
                position: absolute;
                display: block;
                width: 470px;
            }

        .header-frame {
            height: 8rem;
        }
        /* end of header */


        /* Description */
        .cards-1 .card {
            display: inline-block;
            width: 17rem;
            max-width: 100%;
            margin-right: 1rem;
            margin-left: 1rem;
            vertical-align: top;
        }

        .cards-1 .card-image {
            width: 9rem;
        }
        /* end of description */


        /* Features */
        .tabs .nav-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 2.75rem;
        }

        .tabs .nav-link {
            padding-right: 1.25rem;
            padding-left: 1.25rem;
            border-bottom: 2px solid rgb(202, 202, 202);
        }

            .tabs .nav-link:hover,
            .tabs .nav-link.active {
                border-bottom: 2px solid #5f4dee;
            }

        .tabs .image-container {
            margin-bottom: 0;
        }
        /* end of features */


        /* Features Lightboxes */
        .lightbox-basic {
            max-width: 62.5rem;
            padding: 2.5rem 2.5rem 2.5rem 2.5rem;
        }

            .lightbox-basic .image-container {
                max-width: 100%;
                margin-right: 2rem;
                margin-bottom: 0;
                margin-left: 0.5rem;
            }

            .lightbox-basic h3 {
                margin-top: 0.5rem;
            }
        /* end of features lightboxes */


        /* Details */
        .basic-1 {
            padding-top: 8rem;
        }

            .basic-1 .text-container {
                margin-bottom: 0;
            }
        /* end of details */


        /* Video */
        .basic-2 .image-container {
            max-width: 53.125rem;
            margin-right: auto;
            margin-left: auto;
        }

        .basic-2 p {
            width: 65%;
            margin-right: auto;
            margin-left: auto;
        }
        /* end of video */


        /* Pricing */
        .cards-2 .card {
            display: inline-block;
            margin-right: 0.5rem;
            margin-left: 0.5rem;
            vertical-align: top;
        }
        /* end of pricing */


        /* Testimonials */
        .slider-2 .swiper-container {
            width: 92%;
            text-align: left;
        }

        .slider-2 .image-wrapper {
            float: left;
            width: 10rem;
            margin-bottom: 0;
        }

        .slider-2 .text-wrapper {
            max-width: 100%;
            margin-top: 1.25rem;
            margin-left: 13rem;
        }

        .slider-2 .swiper-button-prev {
            left: -0.75rem;
        }

        .slider-2 .swiper-button-next {
            right: -0.75rem;
        }
        /* end of testimonials */


        /* Newsletter */
        .form .text-container {
            width: 55rem;
            margin-right: auto;
            margin-left: auto;
            padding-top: 5rem;
            padding-bottom: 4.5rem;
        }

        .form h2 {
            margin-right: 7rem;
            margin-left: 7rem;
        }

        .form form {
            margin-right: 9rem;
            margin-left: 9rem;
        }
        /* end of newsletter */


        /* Extra Pages */
        .ex-header h1 {
            width: 80%;
            margin-right: auto;
            margin-left: auto;
        }

        .ex-basic-2 {
            /* goeun */
            /* padding-bottom: 5rem; */
        }
        /* end of extra pages */

        /***************************************/
        /*   Service Apply(form-containerSA) goeun  */
        /***************************************/
        .ex-2-header .form-containerSA {
            max-width: 70rem;
            margin-right: auto;
            margin-left: auto;
            padding: 2.25rem 1.25rem 1.25rem 1.25rem;
            border-radius: 0.5rem;
            background-color: #f3f7fd;
        }

        .ex-2-header .board_write_wrap h4 {
            padding-left: 1.5rem;
        }


        .formSA {
            border-top: 2px solid #343a40;
        }

            .formSA .titles,
            .formSA .infos {
                padding-top: 1.25rem;
                padding-left: 5rem;
                padding-right: 4rem;
            }

            .formSA .infos {
                border-top: .5px dashed #ddd;
                font-size: 0;
            }

            .formSA .titles dl {
                font-size: 0;
            }

            .formSA .infos dl {
                display: inline-block;
                width: 50%;
                vertical-align: middle;
            }

            .formSA .titles dt,
            .formSA .titles dd,
            .formSA .infos dt,
            .formSA .infos dd {
                display: inline-block;
                font-size: 14px;
            }

            .formSA .titles dt,
            .formSA .infos dt {
                width: 100px;
            }

            .formSA .title dd {
                width: calc(100% - 100px);
            }

            .formSA .titles input[type="text"],
            .formSA .titles input[type="email"],
            .formSA .infos input[type="text"],
            .formSA .infos input[type="tel"],
            .formSA .infos input[type="password"] {
                box-sizing: border-box;
            }

        .form-group-SA {
            text-align: center;
        }

            .form-group-SA .form-control-submit-button-SA {
                display: inline-block;
                width: 20%;
                height: 3.125rem;
                border: 1px solid #162b4e;
                border-radius: 1.5rem;
                background-color: #162b4e;
                color: #fff;
                font: 700 0.875rem/0 "Open Sans", sans-serif;
                cursor: pointer;
                transition: all 0.2s;
                padding: 20px 0;
            }


            .form-group-SA .form-control-submit-button-SA-detail {
                display: inline-block;
                width: 10%;
                height: 2.125rem;
                border: 1px solid #162b4e;
                border-radius: 1.5rem;
                background-color: #162b4e;
                color: #fff;
                font: 700 1rem/0 "Open Sans", sans-serif;
                cursor: pointer;
                transition: all 0.2s;
                padding: 15px 0;
            }

        .board_writeSA {
            border-top: 2px solid #343a40;
            margin-top: 1rem;
        }

        .board_writeSA2 {
            border-top: 2px solid #343a40;
            margin-top: 1rem;
            margin-bottom: 2rem;
        }

        .formSA .form-control-input:focus + .label-control,
        .formSA .form-control-input.notEmpty + .label-control {
            top: 0.125rem;
            opacity: 1;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .formSA dl {
            margin-top: 0;
            margin-bottom: 0;
        }

        .formSA .form-control-input {
            display: block; /* needed for proper display of the label in Firefox, IE, Edge */
            width: 18rem;
            /* padding-top: 1.0625rem; */
            padding-bottom: 0.0625rem;
            padding-left: 1.25rem;
            border: 1px solid #c4d8dc;
            border-radius: 0.25rem;
            background-color: #fff;
            color: #555;
            font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
            transition: all 0.2s;
        }

        tbody .title .SAClass {
            text-decoration: none;
        }

        /* IE10+ hack to solve lower label text position compared to the rest of the browsers */
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            .formSA .form-control-input {
                padding-top: 1.25rem;
                padding-bottom: 0.75rem;
                line-height: 1.75rem;
            }
        }

        .formSA .form-control-input:focus {
            border: 1px solid #a1a1a1;
            outline: none; /* Removes blue border on focus */
        }

        .formSA .form-control-input:hover {
            border: 1px solid #a1a1a1;
        }

        tbody .title .SAClass {
            text-decoration: none;
        }

        /* end of sign up and log in pages */
    }
    /* end of min-width width 992px */


    /* Min-width width 1200px */
    @media (min-width: 1200px) {

        /* General Styles */
        .h2-heading {
            width: 50%;
        }
        /* end of general styles */


        /* Header */
        .header .header-content {
            padding-top: 7rem;
            /* padding-bottom: 20rem; */
        }

        .header .text-container {
            margin-top: 5.5rem;
            margin-right: 0.5rem;
        }

        .header .image-container {
            margin-top: 1rem;
            margin-left: 1.5rem;
        }

            .header .image-container .img-wrapper {
                width: 630px;
            }

        .header-frame {
            height: 9.375rem;
        }
        /* end of header */

        .main_image {
            position: absolute;
        }

        .main_image_text {
            position: absolute;
            top: 40%;
            left: 12%;
            color: white;
        }


        /* Customer */
        .slider-1 .slider-container {
            margin-right: 3rem;
            margin-left: 3rem;
        }
        /* end of customer */


        /* Description */
        .cards-1 .card {
            width: 18.875rem;
            margin-right: 2rem;
            margin-left: 2rem;
        }

        .cards-1 .card-image {
            width: 12.5rem;
        }
        /* end of description */


        /* Features */
        .tabs .image-container {
            margin-right: 1.5rem;
            margin-left: 1rem;
        }

        .tabs .text-container {
            margin-top: 1.5rem;
            margin-right: 1rem;
            margin-left: 1.5rem;
        }
        /* end of features */


        /* Details */
        .basic-1 .image-container {
            margin-right: 1rem;
            margin-left: 1.5rem;
        }

        .basic-1 .text-container {
            margin-top: 1rem;
            margin-right: 1.5rem;
            margin-left: 1rem;
        }

        .basic-1 h2 {
            margin-bottom: 1rem;
        }
        /* end of details */


        /* Pricing */
        .cards-2 .card {
            width: 19.375rem;
            max-width: 100%;
            margin-right: 1.75rem;
            margin-left: 1.75rem;
        }

            .cards-2 .card .card-body {
                padding-right: 2.25rem;
                padding-left: 2.25rem;
            }
        /* end of pricing */


        /* Testimonials */
        .slider-2 .slider-container {
            width: 64.125rem;
            margin-right: auto;
            margin-left: auto;
        }
        /* end of testimonials */


        /* Newsletter */
        .form .text-container {
            width: 64.75rem;
            padding-top: 6rem;
            padding-bottom: 5.5rem;
        }

        .form h2 {
            margin-right: 12rem;
            margin-left: 12rem;
        }

        .form form {
            margin-right: 15rem;
            margin-left: 15rem;
        }
        /* end of newsletter */


        /* Footer */
        .footer .footer-col.first {
            margin-right: 1.5rem;
        }

        .footer .footer-col.middle {
            margin-right: 0.75rem;
            margin-left: 0.75rem;
        }

            .footer .footer-col.middle .media-body {
                font-weight: bold !important;
            }

        .footer .footer-col.last {
            margin-left: 1.5rem;
        }
        /* end of footer */


        /* Extra Pages */
        .ex-header h1 {
            width: 60%;
            margin-right: auto;
            margin-left: auto;
        }

        .ex-basic-2 .form-container {
            margin-left: 1.75rem;
        }

        .ex-basic-2 .image-container-small {
            margin-left: 1.75rem;
        }
        /* end of extra pages */

        /* end of min-width width 1200px */
    }