@charset "UTF-8";

:root {
    --base-color : #002b60;
    --color-000-opacity-80 : rgba(0, 0, 0, 0.8);
    --color-fff-opacity-80 : rgba(255, 255, 255, 0.8);
}

.color-000-opacity-80 { color : var(--color-000-opacity-80) !important; }
.color-fff { color: #fff !important;}
.color-fff-opacity-80 { color : var(--color-fff-opacity-80) !important; }
.color-151515 { color: #151515 !important;}

.bg-f9f9f9 { background-color: #f9f9f9; }

.radius-10px { border-radius: 10px; }

.fs-16px { font-size: 16px; }
.fs-18px { font-size: 18px; }
.fs-20px { font-size: 20px; }
.fs-22px { font-size: 22px; }
.fs-24px { font-size: 24px; }
.fs-40px { font-size: 40px; }
.fs-44px { font-size: 44px; }

.fb-300 { font-weight: 300; }
.fb-400 { font-weight: 400; }
.fb-500 { font-weight: 500; }
.fb-600 { font-weight: 600; }
.fb-700 { font-weight: 700; }
.fb-800 { font-weight: 800; }
.fb-900 { font-weight: 900; }

.lh-1 {line-height: 1;}
.lh-12 {line-height: 1.2;}
.lh-14 {line-height: 1.4;}
.lh-15 {line-height: 1.5;}
.lh-16 {line-height: 1.6;}
.lh-2 {line-height:2; }

.mt-5px { margin-top: 5px; }
.mt-10px { margin-top: 10px; }
.mt-20px { margin-top: 20px; }
.mt-30px { margin-top: 30px; }
.mt-40px { margin-top: 40px; }
.mt-50px { margin-top: 50px; }
.mt-60px { margin-top: 60px; }

.pt-none {padding-top: 0 !important;}
.pb-none {padding-bottom: 0 !important;}

.padding-y-20px { padding-top: 20px; padding-bottom: 20px; }

.padding-x-30px { padding-left: 30px; padding-right: 30px; }  

.inner-body { padding: 120px 0; }

.con-box + .con-box {
    padding-top: 180px;
    margin-top: 60px;
    border-top: 1px solid #dedede;
}

.t-c { text-align: center; }
.t-l { text-align: left; }
.t-r { text-align: right; }

.thumbnail-box figure {
    position: relative;
    height: auto;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio : 1 / 1;
}
.thumbnail-box figure.type1 { aspect-ratio : 340 / 275; }
.thumbnail-box figure.type2 { aspect-ratio : 340 / 280; }
.thumbnail-box figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);  
    z-index: 5;
}

.video-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 550;
    overflow: hidden;
}
.video-box iframe,
.video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-relative { position: relative; }

.sub-tit { line-height: 1.2; }

.dot-list li {
    position: relative;
    padding-left: 10px;
}

.dot-list li::before {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--base-color);
    position: absolute;
    left: 0;
    top: 13px;
}

/********************************************************************/

.row-cols-4.gap-10px {
    width: calc(100% + 10px);
    margin-top: -10px;
    margin-left: -10px;
}

.row-cols-4.gap-10px > * {
    -ms-flex: 0 0 calc(calc(100% / 4) - 10px);
    flex: 0 0 calc(calc(100% / 4) - 10px);
    max-width: calc(calc(100% / 4) - 10px);
    margin-top: 10px;
    margin-left: 10px;
}

@media (max-width: 767px) {
    .row-cols-4.gap-10px > * {
        -ms-flex: 0 0 calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

/* @media (max-width: 575px) {
    .row-cols-4.gap-10px > * {
        -ms-flex: 0 0 calc(100% - 10px);
        flex: 0 0 calc(100% - 10px);
        max-width: calc(100% - 10px);
    }
} */

.row-cols-5.gap-20px {
    width: calc(100% + 20px);
    margin-top: -20px;
    margin-left: -20px;
}

.row-cols-5.gap-20px > * {
    -ms-flex: 0 0 calc(calc(100% / 5) - 20px);
    flex: 0 0 calc(calc(100% / 5) - 20px);
    max-width: calc(calc(100% / 5) - 20px);
    margin-top: 20px;
    margin-left: 20px;
}

@media (max-width: 1280px) {
    .row-cols-5.gap-20px > * {
        -ms-flex: 0 0 calc(25% - 20px);
        flex: 0 0 calc(25% - 20px);
        max-width: calc(25% - 20px);
    }
}

@media (max-width: 991px) {
    .row-cols-5.gap-20px > * {
        -ms-flex: 0 0 calc(33.333% - 20px);
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

@media (max-width: 767px) {
    .row-cols-5.gap-20px {
        width: calc(100% + 10px);
        margin-top: -10px;
        margin-left: -10px;
    }

    .row-cols-5.gap-20px > * {
        -ms-flex: 0 0 calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        margin-top: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 480px) {
    .row-cols-5.gap-20px > * {
        -ms-flex: 0 0 calc(100% - 10px);
        flex: 0 0 calc(100% - 10px);
        max-width: calc(100% - 10px);
    }
}

/************************* ray10 페이지 ******************************/

.ray10-point li { 
    padding-left: 60px; 
    background-position: left center;
    background-repeat: no-repeat;
}

.ray10-point li:nth-child(1) { background-image: url(/html/_skin/img/sub/ray10/ico_pci-pts.png); background-size: 49px; }
.ray10-point li:nth-child(2) { background-image: url(/html/_skin/img/sub/ray10/ico_nfc-tap-on-display.png); background-size: 44px; }
.ray10-point li:nth-child(3) { background-image: url(/html/_skin/img/sub/ray10/ico_android-13.png); background-size: 39px; }

#contArea.ray10 .swiper-button {
    width: 55px;
    height: 55px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px;
    background-color: var(--base-color);
    opacity: 1 !important;
}
#contArea.ray10 .swiper-button.swiper-button-disabled { background-color: #151515;}
#contArea.ray10 .swiper-button.swiper-button-prev { left: calc(-55px / 2); background-image: url(/html/_skin/img/sub/ray10/ico_swiper-prev.png); }
#contArea.ray10 .swiper-button.swiper-button-next { right: calc(-55px / 2); background-image: url(/html/_skin/img/sub/ray10/ico_swiper-next.png); }

.ray10-swiper .thumbnail-box span {
    width: 100%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 5;
}

.modular-popup {
    padding: 20px !important; 
}
.modular-popup .row {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.modular-popup .row > * {
    padding: 0 !important;
}
.modular-popup .modal-dialog {
    max-width: 1400px !important;
}
.modular-popup .close {
    width: 71px;
    height: 71px;
    border-radius: 50%;
    background: var(--base-color) url(/html/_skin/img/sub/ray10/ico_close-pop.png) no-repeat center / 20px ;
    position: absolute;
    top: calc(-71px / 2);
    right: calc(-71px / 2);
    opacity: 1 !important;
    z-index: 10;
}
.modular-popup .close:hover {
    opacity: 0.8 !important;
}
.modular-popup .modal-body {
    padding: 0;
}
.modular-popup .modal-body__inner .row {
    height: 100%;
}
.modular-popup .modal-body__inner .bg  {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.modular-popup .modal-body__inner .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modular-popup .modal-body__inner .txt {
    padding: 40px 20px !important;
}

#contArea.ray10 .sub-con-section.bg-full {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#contArea.ray10 .sub-con-section.bg-full .row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
#contArea.ray10 .sub-con-section.bg-full .inner,
#contArea.ray10 .sub-con-section.bg-full .inner-body,
#contArea.ray10 .sub-con-section.bg-full .row,
#contArea.ray10 .sub-con-section.section-07 .gray-box {
    height: 100%;
}
#contArea.ray10 .sub-con-section.bg-full .row > div.right {
    margin-left: auto;
    padding: 0 !important;
}
#contArea.ray10 .sub-con-section.bg-full .sub-tit {
    white-space: nowrap;
}
#contArea.ray10 .sub-con-section.bg-full .bg {
    display: none;
}

#contArea.ray10 .sub-con-section.section-02 {
    height: 690px;
    background-image: url(/html/_skin/img/sub/ray10/bg_ray10_sec02.jpg);
}

#contArea.ray10 .sub-con-section.section-04 {
    height: 645px;
    background-image: url(/html/_skin/img/sub/ray10/bg_ray10_sec04.jpg);
}

#contArea.ray10 .sub-con-section.section-05 {
    height: 565px;
    background-image: url(/html/_skin/img/sub/ray10/bg_ray10_sec05.jpg);
}

#contArea.ray10 .sub-con-section.section-06 {
    height: 645px;
    background-image: url(/html/_skin/img/sub/ray10/bg_ray10_sec06.jpg);
}

#contArea.ray10 .sub-con-section.section-07 .gray-box p,
#contArea.ray10 .sub-con-section.section-07 .gray-box ul {
    letter-spacing: -1px;
}



/************************* 반응형 ******************************/

@media (max-width: 1510px) {
    .modular-popup .close {
        /* width: 71px;
        height: 71px; */
        top: calc(71px / 2);
        right: calc(71px / 2);
    }
}

@media (max-width: 1240px) {
    .fs-16px { font-size: 14px; }
    .fs-18px { font-size: 16px; }
    .fs-20px { font-size: 18px; }
    .fs-22px { font-size: 20px; }
    .fs-24px { font-size: 22px; }
    .fs-40px { font-size: 36px; }
    .fs-44px { font-size: 40px; }

    .inner-body { padding: 100px 0; }

    .con-box + .con-box {
        padding-top: 140px;
        margin-top: 40px;
    }

    .mt-20px { margin-top: 15px; }
    .mt-30px { margin-top: 25px; }
    .mt-40px { margin-top: 35px; }
    .mt-50px { margin-top: 45px; }
    .mt-60px { margin-top: 55px; }

    .padding-y-20px { padding-top: 15px; padding-bottom: 15px; }
    .padding-x-30px { padding-left: 25px; padding-right: 25px; }  

    .modular-popup .close {
        width: 50px;
        height: 50px;
        top: calc(50px / 2);
        right: calc(50px / 2);
    }

    #contArea.ray10 .sub-con-section.bg-full .sub-tit {
        white-space: wrap;
    }
    #contArea.ray10 .sub-con-section.bg-full {
        background-position: left 30% center;
    }
    #contArea.ray10 .sub-con-section.bg-full.position-right {
        background-position: right 30% center;
    }
    #contArea.ray10 .sub-con-section.bg-full .row > div.col-6 {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }
    #contArea.ray10 .sub-con-section.bg-full .row > div.right {
        /* margin-left: auto; */
    }
}

@media (max-width: 1024px) {
    /* .fs-16px { font-size: 12px; } */
    .fs-18px { font-size: 15px; }
    .fs-20px { font-size: 17px; }
    .fs-22px { font-size: 19px; }
    .fs-24px { font-size: 21px; }
    .fs-40px { font-size: 34px; }
    .fs-44px { font-size: 38px; }

    .inner-body { padding: 80px 0; }

    .con-box + .con-box {
        padding-top: 120px;
        margin-top: 20px;
    }
    
    .dot-list li::before {
        top: 10px;
    }

}

@media (max-width: 900px) {

    .mt-20px { margin-top: 10px; }
    .mt-30px { margin-top: 20px; }
    .mt-40px { margin-top: 30px; }
    .mt-50px { margin-top: 40px; }
    .mt-60px { margin-top: 50px; }

    .padding-y-20px { padding-top: 10px; padding-bottom: 10px; }
    .padding-x-30px { padding-left: 20px; padding-right: 20px; } 

    #contArea.ray10 .sub-con-section.bg-full .row > div.col-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

}

@media (max-width: 767px) { 
    .modular-popup .modal-dialog {
        max-width: 60vh !important;
    }

    .modular-popup .close {
        width: 30px;
        height: 30px;
        top: calc(30px / 2);
        right: calc(30px / 2);
        background-size: 15px;
    }

}

@media (max-width: 680px) {
    /* .fs-16px { font-size: 10px; } */
    /* .fs-18px { font-size: 13px; } */
    .fs-20px { font-size: 15px; }
    .fs-22px { font-size: 17px; }
    .fs-24px { font-size: 19px; }
    .fs-40px { font-size: 30px; }
    .fs-44px { font-size: 34px; }

    .inner-body { padding: 60px 0; }

    .con-box + .con-box {
        padding-top: 100px;
    }
    
    .dot-list li::before {
        top: 9px;
    }

    #contArea.ray10 .swiper-button {
        width: 40px;
        height: 40px;
        background-size: 17px;
    }
    #contArea.ray10 .swiper-button.swiper-button-prev { left: calc(-40px / 2); }
    #contArea.ray10 .swiper-button.swiper-button-next { right: calc(-40px / 2); }
    

    #contArea.ray10 .sub-con-section.bg-full {
        background: none;
        height: auto !important;
    }
    #contArea.ray10 .sub-con-section.bg-full.color-fff {
        color: #000 !important;
    }
    #contArea.ray10 .sub-con-section.bg-full .bg {
        display: block;
    }
    #contArea.ray10 .sub-con-section.bg-full .row > div.col-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    #contArea.ray10 .sub-con-section.bg-full .row > div.right {
        margin-left: 0;
    }

    #contArea.ray10 .sub-con-section.section-02 .inner-body,
    #contArea.ray10 .sub-con-section.section-04 .inner-body {
        padding-top: 0;
    }
}


@media (max-width: 480px) {
    .fs-40px { font-size: 24px; }
    .fs-44px { font-size: 28px; }

    .con-box + .con-box {
        padding-top: 60px;
    }

}