@charset "utf-8";
@import "/front/JLAMP5/css/intro_common.css";
@import "/front/JLAMP5/css/intro_media_query.css";

/* CSS Document */
body.login-body {
    /* 켐트로닉스  데모 : 2020.09.02 rachel */
    /* background: #12396e  url(/image/shinhan/login_bg.jpg) no-repeat center top !important; */   
    /* background: #f9f9f9;  2021.08.09 이전 style  rachel */
    background: #f8f5ff !important;
    background-size: cover !important;
}

/* 신한 데모 : 2020.09.02 rachel */
body input[type=text], body input[type=password] {
    outline: unset;
}

.gnb-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: var(--space-80);
    padding: var(--space-20) 0 0 0;
    background-color: transparent;
}

.gnb-fixed.scroll {
    background-color: var(--color-white-fff);
    border-bottom: var(--size-1) solid var(--color-white-eee);
}

.gnb-max-width {
    max-width: var(--size-1200);
    margin: 0 auto;
}

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

.gnb-fixed .gnb-btn-logo {
    image-rendering: -webkit-optimize-contrast;
    content: url("/image/intro/top_logo.png?ver=1");
}
.gnb-fixed.scroll .gnb-btn-logo {
    image-rendering: -webkit-optimize-contrast;
    content: url("/image/intro/top_scroll_logo.png?ver=1");
}

/* buttons container right side */
.gnb-btn {
    display: flex;
    align-items: center;
}

/* google play btn */
.btn-google {
    margin-right: var(--space-10);
}

.gnb-fixed .gnb-btn-google {
    display: inline-block;
    position: relative;
    width: var(--size-124);
    height: var(--space-40);
    background: url("/image/intro/top_google.png");
}

.gnb-fixed .gnb-btn-google::after {
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    content: url("/image/intro/top_google_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed .gnb-btn-google:hover::after {
    image-rendering: -webkit-optimize-contrast;
    opacity: 1;
    content: url("/image/intro/top_google_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed.scroll .gnb-btn-google {
    image-rendering: -webkit-optimize-contrast;
    background: url("/image/intro/top_scroll_google.png");
}

.gnb-fixed.scroll .gnb-btn-google::after {
    image-rendering: -webkit-optimize-contrast;
    content: url("/image/intro/top_scroll_google_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed.scroll .gnb-btn-google:hover::after {
    image-rendering: -webkit-optimize-contrast;
    content: url("/image/intro/top_scroll_google_hover.png");
    transition: var(--animation-2);
}

/* app store btn */
.btn-apple {
    margin-right: var(--space-40);
}

.gnb-fixed .gnb-btn-apple {
    image-rendering: -webkit-optimize-contrast;
    display: inline-block;
    position: relative;
    width: var(--size-115);
    height: var(--space-40);
    background: url("/image/intro/top_apple.png");
}

.gnb-fixed .gnb-btn-apple::after {
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    content: url("/image/intro/top_apple_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed .gnb-btn-apple:hover::after {
    image-rendering: -webkit-optimize-contrast;
    opacity: 1;
    content: url("/image/intro/top_apple_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed.scroll .gnb-btn-apple {
    image-rendering: -webkit-optimize-contrast;
    background: url("/image/intro/top_scroll_apple.png");
}

.gnb-fixed.scroll .gnb-btn-apple::after {
    image-rendering: -webkit-optimize-contrast;
    content: url("/image/intro/top_scroll_apple_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed.scroll .gnb-btn-apple:hover::after {
    image-rendering: -webkit-optimize-contrast;
    content: url("/image/intro/top_scroll_apple_hover.png");
    transition: var(--animation-2);
}

/* youtube guide btn */
.btn-guide {
    color: var(--color-white-fff);
    font-size: var(--font-14);
}

.btn-guide a {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.gnb-fixed.scroll .btn-guide a {
    color: var(--color-black-222);
    transition: var(--animation-2);
}

.gnb-fixed.scroll .btn-guide:hover a {
    color: var(--color-main-original);
}

.gnb-fixed .btn-guide .gnb-btn-guide {
    display: inline-block;
    position: relative;
    width: var(--size-21);
    height: var(--size-14);
    background: url("/image/intro/top_youtube.png");
}

.gnb-fixed.scroll .btn-guide .gnb-btn-guide {
    image-rendering: -webkit-optimize-contrast;
    background: url("/image/intro/top_scroll_youtube_default.png");
}

.gnb-fixed.scroll .btn-guide .gnb-btn-guide::after {
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    content: url("/image/intro/top_scroll_youtube_hover.png");
    transition: var(--animation-2);
}

.gnb-fixed.scroll .btn-guide:hover .gnb-btn-guide::after {
    image-rendering: -webkit-optimize-contrast;
    opacity: 1;
    content: url("/image/intro/top_scroll_youtube_hover.png");
    transition: var(--animation-2);
}

/* buttons devider */
.gnb-devider {
    margin: 0 var(--space-15);
    width: var(--size-2);
    height: var(--size-13);
    background-color: var(--color-main-middle);
}

.gnb-fixed.scroll .gnb-devider {
    background-color: var(--color-white-ccc);
}

/* btn-login btn */
.btn-login {
    color: var(--color-white-fff);
    font-size: var(--font-14);
    font-weight: 400;
}

.gnb-fixed.scroll #btn-login {
    color: var(--color-black-222);
    transition: var(--animation-2);
}

.gnb-fixed.scroll #btn-login:hover {
    color: var(--color-main-original);
}

/* top-bg-wrapper */
.top-bg-wrapper {
    background : url('/image/intro/bg_section_01.png?v=2022090801') top center / auto no-repeat;
}

/* section1 */
.section1 {
    width : 100%;
    height : auto;
    min-height: var(--size-1220);
    padding: var(--space-200) 0 var(--space-130);
}

.section1-text-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
}

.section1-text-title {
    width: 100%;
    height: auto;
    color: var(--color-white-fff);
    font-size: var(--font-50);
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}

.section1-text-desc {
    margin: var(--space-15) 0 var(--space-50);
    width: 100%;
    height: auto;
    color:var(--color-main-light);
    font-size: var(--font-20);
    text-align: center;
}

.section1-text-button{
    display: flex;
    justify-content: center;
}

.btn-counseling {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-21) var(--space-44);
    color: var(--color-main-dark);    
    font-size: var(--font-16);
    font-weight: 500;
    line-height: 1;
    background-color: var(--color-white-fff);
    border-radius: var(--size-55);
    cursor: pointer;
    transition: var(--animation-2);
    font-family: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Arial, Sans-serif, serif;
    border: 0px red solid;
}

.btn-counseling:hover {
    box-shadow: 0px 0px var(--size-45) 0px rgba(22, 7, 64, 0.5);
}

.btn-counseling-icon {
    width: var(--size-18);
    height: var(--size-18);
}

.section1-img-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--space-m128);
    width: 100%;
}

/* section2, section4 (Slider title) */
.contents-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

.text-title {
    color:var(--color-main-original);
    font-size: var(--font-30);
    font-weight: 700;
}

.text-subtitle {
    margin: var(--space-40) 0 var(--space-25); 
    color:var(--color-black-222);
    font-size: var(--font-50);
    font-weight: 500;
}

.text-desc {
    color:var(--color-black-666);
    font-size: var(--font-20);
    font-weight: 400;
    line-height: 1.5;
}

.section2 {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: var(--size-550);
    padding-top: var(--space-37);
}

.section2 > .contents-wrapper {
    max-width: var(--size-1920);
}

.section2 .contents-img-wrapper {
    padding-right: var(--space-60);
}

.section2 .contents-img-wrapper .contents-img {
    width: 100%;
}

.section2-text-wrapper {
    width: 50vw;
    padding-top: calc(313 / 960 * 100%);
}

.section4 {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: var(--size-570);
    padding-top: var(--space-160);
    background: url("/image/intro/section_03_tit_bg.jpg") center top / cover no-repeat;
    border: 0px blue solid;
}

.section4 > .contents-wrapper {
    justify-items: end;
    width: var(--size-1920);
}

.section4-text-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-top: calc(322 / 960 * 100%);
    padding-right: var(--space-65);
}

.section4 .contents-img-wrapper {
    padding: 0 var(--space-77) 0 var(--space-90);
}

.section4 .contents-img-wrapper .contents-img {
    width: 100%;
}

/* slider1 background-images */
.slider1-bg1 {
    background: url(/image/intro/slider1_01.png) right center / contain no-repeat;
}
.slider1-bg2 {
    background: url(/image/intro/slider1_02.png) right center / contain no-repeat;
}
.slider1-bg3 {
    background: url(/image/intro/slider1_03.png) right center / contain no-repeat;
}
.slider1-bg4 {
    background: url(/image/intro/slider1_04.png) right center / contain no-repeat;
}
.slider1-bg5 {
    background: url(/image/intro/slider1_05.png) right center / contain no-repeat;
}
.slider1-bg6 {
    background: url(/image/intro/slider1_06.png) right center / contain no-repeat;
}

/* slider2 background-images */
.slider2-bg1 {
    background: url(/image/intro/slider2_01.png) left center / contain no-repeat;
}
.slider2-bg2 {
    background: url(/image/intro/slider2_02.png) left center / contain no-repeat;
}
.slider2-bg3 {
    background: url(/image/intro/slider2_03.png) -50px center / contain no-repeat;
}
.slider2-bg4 {
    background: url(/image/intro/slider2_04.png) -30px center / contain no-repeat;
}
.slider2-bg5 {
    background: url(/image/intro/slider2_05.png) left center / contain no-repeat;
}

/* section3, section5 (Slider1 - Slider2) */
#slider1,
#slider2 {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
}

.slider-wrapper {
    display: flex;
    justify-content: center;
    min-height: var(--size-770);
}

.slider-wrapper-inner {
    display: flex;
    width: var(--size-1200);
}

.slider-left {
    width: var(--size-408);
}

.slider-left-top {
    margin-bottom: var(--space-50);
}

.dt-subtitle {
    margin-bottom: var(--space-20);
    color: var(--color-main-original);
    font-size: var(--font-16);
    font-weight: 500;
}

.dt-title {
    color: var(--color-black-222);
    font-size: var(--font-35);
    font-weight: 500;
}

.dd-container {
    display: flex;
    gap: var(--space-25);
    margin-bottom: var(--space-40);
}

.slider-left .dd-container:last-child {
    margin-bottom: 0;
}

.dd-icon {
    image-rendering: -webkit-optimize-contrast;
    width: var(--size-40);
    height: var(--size-40);
}

.dd-text-wrapper dd:last-child {
    margin-bottom: 0;
}

.dd-text-bold {
    margin-bottom: var(--space-15);
    color: var(--color-black-222);
    font-size: var(--font-16);
    font-weight: 500;
}

.text-line-height {
    margin-bottom: var(--space-3);
}

.dd-text-normal {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
    color: var(--color-black-555);
    font-size: var(--font-16);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

.slider-right {
    max-width: var(--size-1152);
}

.slider-right-img {
    width: 100%;
}

.slick-slider-img {
    width: 100%;
}

.section3-wrapper {
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: auto;
    min-height: var(--size-770);
}

.section3 {
    max-width: var(--size-1920);
    width: 100%;
    height: auto;
} 

.section3 .slider-left {
    padding: var(--space-140) var(--space-63) 0 0;
}

.section5 .slider-wrapper-inner {
    justify-content: flex-end;
}

.section5 .slider-wrapper {
    flex-direction: row-reverse;
}

.section5 .slider-left {
    padding: var(--space-140) 0 0 var(--space-63);
}

/* slider buttons */

.slick-dotted.slick-slider {
    position: static;
    margin-bottom: 0;
}

#slider1 .slick-arrow,
#slider2 .slick-arrow {
    display: none !important;
}

#slider1 .slick-list,
#slider2 .slick-list {
    margin-top: -70px;
}

#slider1 .slick-list .slick-track .slick-slide,
#slider2 .slick-list .slick-track .slick-slide {
    height: auto !important;
}

#slider1 .slick-dots,
#slider2 .slick-dots {
    position: static;
    bottom: 0;
    margin: 0;
    width: auto;
    padding-top: var(--space-32);
    list-style: none;
}

#slider1 .slick-dots {
    margin: 0 auto;
    width: var(--size-1200);
    text-align: left;
}

#slider2 .slick-dots {
    margin: 0 auto;
    width: var(--size-1200);
    text-align: right;
}

#slider1 .slick-dots li,
#slider2 .slick-dots li {
    display: inline-block;
    position: relative;
    margin: 0 var(--space-10) 0 0;
    width: var(--size-100);
    height: var(--size-42);
    cursor: pointer;
    white-space: nowrap; 
    background-color: transparent;
    border: var(--size-1) solid var(--color-white-ccc);
    border-radius: var(--size-25);
    box-shadow: 0 0 0 0 rgba(82, 156, 219, 0);
}

#slider2 .slick-dots li {
    margin: 0 0 0 var(--space-10);
}

#slider1 .slick-dots .slick-active,
#slider2 .slick-dots .slick-active {
    background-color: var(--color-main-original);
    border: 0px var(--color-white-ccc) solid;
}

.slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
    font-size: var(--font-16);
    color: var(--color-black-999);
    font-weight: 400;
    text-align: center;
    outline: none;
    position: relative;
    font-family: "Montserrat", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Arial, Sans-serif, serif;
}

#slider1 .slick-dots li button:before,
#slider2 .slick-dots li button:before {
    display: none;
}

#slider1 .slick-dots li.slick-active button,
#slider2 .slick-dots li.slick-active button {
    color:var(--color-white-fff);
    font-weight: 500;
    background-color: transparent;
}

#slider1 .slick-dots li button .fa,
#slider2 .slick-dots li button .fa {
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -5px;
    opacity: 0;
    transition: var(--animation-3);
}

#slider1 .slick-dots li.slick-active button .fa,
#slider2 .slick-dots li.slick-active button .fa {
    bottom: -8px;
    opacity: 1;
}


.section5-wrapper {
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: auto;
    min-height: var(--size-850);
    background-color: var(--color-term-bg);
}

.section5 {
    width: 100%;
    height : auto;
    max-width : var(--size-1920);
}    

#slider2{
    margin-bottom: 0px !important;
}

/* section term */
.section-term-1 {
    width: 100%;
    height: calc(27 / 1920 * 100%);
    background-color: #fbfaff;
}

.section-term-2 {
    width: 100%;
    height: auto;
    min-height: var(--size-188);
    background: url(/image/intro/bg_section_05_bottom.jpg) center top / cover no-repeat;
}

/* section6 (함께하는 기업들) */
.section6 {
    width: 100%;
    height: auto;
    padding: var(--space-72) 0 var(--space-90);
}

.section6 > .contents-wrapper {
    display: block;
    top: var(--space-260);
}

.section6 .text-wrapper {
    width: 100%;
    text-align: center;
}

.section6 .text-subtitle {
    margin: 0;
}

.section6 .text-desc {
    margin: var(--space-25) 0 var(--space-40);
    
}

.section6-logos-wrapper {
    display: flex;
    justify-content: center;
}

.companies-logo-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-30) var(--space-20);
}

.companies-img {
    width: var(--space-183);
}

/* section7 (Payment) */
.section7 {
    width: 100%;
    height: auto;
    min-height: var(--size-1527);
    padding-top: calc(320 / 1920 * 100%);
    padding-bottom: var(--space-95);
    background: url(/image/intro/bg_section_04.png?ver=3) center center / cover no-repeat;
    border: 0px red solid;
}

.section7 > .contents-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-title-wrapper {
    width: 100%;
}

.section7 .text-subtitle {
    margin: 0;
    text-align: center;
}

.pay-info-small-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-60) 0 var(--space-20);
    width: var(--size-1200);
}

.pay-info-small-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}

.pay-info-small-title-wrapper p {
    color: var(--color-black-222);
    font-size: var(--font-20);
    font-weight: 400;
    margin-bottom: var(--space-1);
}

.pay-info-small-title-wrapper p > b {
    font-weight: 700;
}

.pay-info-small-text-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    margin-top: var(--space-3);
    font-size: var(--font-16);
}

.pay-info-small-text-wrapper p:first-child {
    color: var(--color-black-666);
    font-weight: 400;
}

.pay-info-small-text-wrapper p:last-child {
    color: var(--color-black-222);
    font-weight: 500;
}

.pay-info-devider {
    display: inline-block;
    margin-bottom: var(--space-2);
    width: var(--size-2);
    height: var(--size-14);
    background-color: var(--color-white-ccc);
}

.pay-contents-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
}

.pay-contents-box {
    border-radius: var(--size-30);
    background-color: var(--color-white-fff);
    border: var(--size-2) solid var(--color-white-fff);
    box-shadow: 0px 0px var(--size-75) 0px rgba(22, 7, 64, 0.09);
    cursor: pointer;
    transition: var(--animation-2);
}

.pay-contents-box:hover{
    border: var(--size-2) solid var(--color-main-original);
}

/* section7 - 박스 상단 */
.pay-contents-wrapper {
    width: var(--size-1200);
}

.pay-contents-box-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-50) var(--space-30) var(--space-40);
    width: 100%;
    text-align: center;
    border-bottom: var(--size-1) var(--color-white-eee) solid;
}

.pay-contents-box-icon-wrapper {
    width: 100%;
}

.pay-contents-box-icon {
    width: var(--size-70);
}

.pay-contents-box-top .text-desc {
    margin: var(--space-30) 0 var(--space-20);
    color: var(--color-black-222);
    font-weight: 500;
    line-height: 1;
}

.pay-contents-box-prices-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-15);
}

.pay-contents-box-price-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-15);
}

.pay-contents-box-price-margin {
    margin: var(--space-25) 0 var(--space-30);
}

.pay-contents-box-price-badge {
    width: var(--size-75);
    height: var(--size-30);
    padding-top: var(--space-7);
    color: var(--color-white-fff);
    font-size: var(--font-14);
    font-weight: 500;
    border-radius: var(--size-15);
}

.pay-contents-box-price-badge-purple {
    background-color: var(--color-main-original);
}

.pay-contents-box-price-badge-pink {
    background-color: var(--color-main-pink);
}

.pay-contents-box-price {
    color: var(--color-black-222);
    font-size: var(--font-40);
    font-weight: 700;
}

.pay-contents-box-price-small {
    color: var(--color-black-222);
    font-size: var(--font-20);
    font-weight: 400;
}

/* section7 - 박스 하단 */
.pay-contents-box-bottom {
    padding: var(--space-40) var(--space-40) var(--space-20);
}

.pay-contents-box-bottom_function-text {
    color: var(--color-black-999);
    font-size: var(--font-14);
    font-weight: 400;
}

.grid-div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
}

.detail-top-margin-25 {
    margin-top: var(--space-25);
}

.pay-contents-box-bottom-detail {
    margin-bottom: var(--space-30);
}

.pay-contents-box-bottom-detail-title {
    color: var(--color-black-222);
    font-size: var(--font-20);
    font-weight: 700;
    margin-bottom: var(--space-20);
}

.pay-contents-box-bottom-detail-text {
    color: var(--color-black-444);
    font-size: var(--font-16);
    font-weight: 400;
    margin-bottom: var(--space-15);
}

.pay-contents-box-bottom-detail-text:first-child {
    margin-top: var(--space-20);
}

.pay-contents-box-bottom-detail-text:last-child {
    margin-bottom: 0;
}

.pay-contents-box-bottom-detail-check-icon {
    image-rendering: -webkit-optimize-contrast;
    margin: var(--space-3) var(--space-7) 0 0;
}

.pay-etc-text-wrapper {
    width: 100%;
    padding-top: var(--space-40);
    text-align: center;
}

.pay-etc-text {
    color: var(--color-black-666);
    font-size: var(--font-14);
    font-weight: 400;
}

/* section8 (footer) */
.section8 {
    width: 100%;
    height: auto;
    padding-top: var(--space-155);
    padding-bottom: var(--space-50);
    background: url(/image/intro/bg_section_08.jpg) center center / cover no-repeat;
    border: 0px orange solid;
}   

.section8 > .contents-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-120);
}

.crm-container {
    width: var(--size-996);
    padding: var(--space-60) var(--space-78) ;
    background-color: var(--color-white-fff);
    border-radius: var(--size-30);
    box-shadow: 0px 0px var(--size-55) 0px rgba(42, 31, 59, 0.1);
}

.crm-text-title {
    margin-bottom: var(--space-40);
    color: var(--color-black-222);
    font-size: var(--font-40);
    text-align: center;
}

.crm-bottom-container {
    display: flex;
    gap: var(--space-40);
}

.crm-left-container{
    width: 100%;
}

.crm-right-container{
    width: 100%;
}

.crm-info-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-14);
    height: var(--size-15);
}

.crm-info-text-desc {
    color: var(--color-black-222);
    font-size: var(--font-14);
    font-weight: 700;
}

.crm-check-box-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.crm-checkbox {
    display: inline-block;
    width: var(--space-13);
    height: var(--space-13);
    cursor: pointer;
    background-color: var(--color-white-ccc);
    border-radius: var(--space-2);
}

.crm-checkbox.active {
    background-color: var(--color-main-original);
}

.crm-checkbox-text {
    color: var(--color-black-222);        
    font-size: var(--font-14);
    font-weight: 500;
    cursor: pointer;
    border: 0px red solid;
}

.crm-textarea-wrapper {
    height: var(--size-190);
    padding: var(--space-20) var(--space-10) var(--space-20) var(--space-20);
    background-color: var(--color-crm-bg);
    border-radius: var(--size-10);
}

.crm-private-txt {
    width:100%;
    height:100%;
    padding: var(--space-20);
    color: var(--color-black-555);
    font-size: var(--font-12);
    font-weight: 400;
    background: transparent;
    resize: none;         
    font-family: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Arial, Sans-serif, serif;
    border: none;
}

.crm-private-txt:focus{
    outline: none;
}

.scroll-wrapper{
    padding-right: var(--space-15) !important;
}

.crm-check-type {
    height: var(--size-25);
    padding: var(--space-3) var(--space-9);
    color: var(--color-black-999);
    font-size: var(--font-12);
    font-weight: 500;
    cursor: pointer;
    border: var(--size-1) solid var(--color-white-eee);
    border-radius: var(--size-5);
}

.crm-check-type.active{
    color: var(--color-black-222);
    border: var(--size-1) solid var(--color-black-222);
}

.crm-right-user-container {
    height: var(--size-190);
}

.input-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: var(--size-27) 1fr 1fr;
    gap: var(--size-10) var(--size-20);
}

.crm-input {
    width: 100%;
    padding: var(--space-10) 0;
    color: var(--color-black-222);
    border: none;
    border-bottom: var(--size-1) solid var(--color-white-eee);
}

.crm-input::placeholder {
    color: var(--color-black-999);
    font-family: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Arial, Sans-serif, serif;
}

.crm-input:focus{
    border-bottom: var(--size-1) solid var(--color-black-222);
}

.crm-input-company {
    grid-column: 1 / 3;
    padding-top: 0;
}

.crm-submit-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: var(--space-20);
    width: 100%;
    padding: var(--space-15);
    color: var(--color-white-fff);
    font-size: var(--font-14);
    font-weight: 400;
    background-color: var(--color-black-222);
    border-radius: var(--size-10);
    cursor: pointer;
}

.crm-submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0%;
    height: 100%;
    background-color: var(--color-main-original);
    transition: var(--animation-3);
}

.crm-submit-btn:hover::before {
    width: 100%;
    background-color: var(--color-main-original);
}

.footer {
    width: var(--size-1200);
    height: auto;
    color: var(--color-white-fff);
}

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

.footer-text-title {
    font-size: var(--font-25);
    font-weight: normal;
}

.footer-top-right {
    display: flex;
    gap: var(--space-50);
}

.footer-family-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    cursor: pointer;
}

.footer-family-wrapper img {
    width: var(--size-45);
}

.footer-family-wrapper a {
    font-size: var(--font-16);
    font-weight: 500;
}

.footer-devider {
    margin: var(--space-50) 0;
    width: 100%;
    height: var(--size-1);
    padding: 0 !important;
    background-color: var(--color-main-deep);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
}

.footer-logo {
    cursor: pointer;
}

.footer-bottom-right {
    text-align: right;
}

.footer-info-list {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-20);
    margin-bottom: var(--space-20);
    font-size: var(--font-14);
    font-weight: 600;
}

.footer-company-info p {
    margin-bottom: var(--space-10);
    font-size: var(--font-14);
    font-weight: 300;
}

.footer-company-copyright {
    color: var(--color-main-light);
    font-size: var(--font-12);
}

.footer-company-address {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-10);
    font-weight: 300;
}

.footer-company-address span {
    font-size: var(--font-14);
}

.footer-company-address span:last-child {
    font-weight: 500;
}

.phone-title {
    margin: 0 var(--space-5) 0 var(--space-20);
    font-weight: 600;
}

/* tablet (display: none) */
.floating-container,
.gnb-fixed .gnb-btn-logo-m,
.gnb-fixed.scroll .gnb-btn-logo-m,
.section1-text-title-t,
.section1-main-img-t,
.section2 .text-subtitle-t,
.section2 .contents-img-t,
.section4 .text-subtitle-t,
.section4 .contents-img-t,
.slider-right .slider-right-img-st,
.crm-text-title-m {
    display: none;
}

/* mobile (display: none;) */
.download-app-button,
.download-icon-hover,
.section1-text-title-m,
.section1-text-desc-m,
.section1-main-img-m,
.contents-img-m,
.section2 .text-subtitle-m,
.section2 .text-desc-m,
.section4 .text-subtitle-m,
.section6 .text-subtitle-m,
.section6 .text-desc-m,
.slider-right .slider-right-img-m,
.slick-slide .dd-icon-m,
.pay-contents-box-icon-m,
.footer-text-title-m,
.footer-family-m,
.footer-company-address-m {
    display: none;
}



:-ms-input-placeholder { color: #999999; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    /* IE10+ specific styles go here */  
    .scroll-wrapper {
        padding: 0 0 0 0 !important;
    }

    /* IE 호환 */
    .footer_anchor:link { color: #444444; text-decoration: none;}
    .footer_anchor:visited { color: #444444; text-decoration: none;}
    .footer_anchor:hover { color: #444444; text-decoration: none;}

    .login_anchor:link { color: #ffffff; text-decoration: none;}
    .login_anchor:visited { color: #ffffff; text-decoration: none;}
    .login_anchor:hover { color: #ffffff; text-decoration: none;}

    .gnb-fixed.scroll .login_anchor:link { color: #222222; text-decoration: none;}  
    .gnb-fixed.scroll .login_anchor:visited { color: #222222; text-decoration: none;}  
    .gnb-fixed.scroll .login_anchor:hover { color: #222222; text-decoration: none;}  
}