@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* ************************************************************************************************ */
/* 공통스타일 적용 시작 */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,li,dt,dd,hr,table,tr,th,td,button,form,input,select,textarea{margin:0; padding:0;}
/* font 공백 초기화 */
body,h1,h2,h3,h4,h5,h6,p,div,hr{font-size:16px;}
li{list-style:none;}
a{text-decoration:none; color:#000000;}
input{border:0;}
iframe{border:0;}
select{border:0;}
img, video{border:0; margin:0; padding:0; width:100%;}
button{border:0; background:none;}
body{
    font-family: 'Pretendard-Regular','Roboto','sans-serif';
    font-size:16px;
    /*background:#e3ebf8;*/
    background:#ffffff;
    /*background: url(../images/uber_bg_logo.png) no-repeat 90% 1% / 40% #e3ebf8;*/
    overflow-x:hidden;
    word-break:keep-all;
    -webkit-overflow-scrolling: touch;
}
button:hover{cursor:pointer;}
/* ************************************************************************************************ */


/* Section병 title 공통스타일 */
.titleArea {
    padding: 160px 4rem 50px 4rem;
    box-sizing: border-box;
}
.titleArea .titleArea_inner p:first-child{font-size:4rem; font-weight:600;}
.titleArea .titleArea_inner p:nth-of-type(2){font-size:1.4rem;}

/* section_2 */
#sec2 .detail {
    box-sizing: border-box;
    padding: 0 4rem 50px 4rem;
    width: 100%;
    height: 73%;

    display: flex;
    flex:auto;
    flex-wrap: wrap;
    /*justify-content: space-between;*/ /* optional: for spacing between boxes */
    justify-content: flex-start;
    gap: 1rem; /* optional: spacing between items */
}

#sec2 .det_box {
    width: calc((100% - 2rem * 2) / 3); /* 3 in a row with gap */
    box-sizing: border-box;
    background-color: #ffffff; /* optional: for visual aid */
    /*padding: 1.5rem;*/
    border-radius: 1rem;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sec2 .product_img img {
    max-width: 100%;
    height: auto;
    display: block;
}
#sec2 .product_img img.pc{display:block;}
#sec2 .product_img img.mob{display:none;}

#sec2 .product_info{
    box-sizing:border-box;
    padding:0 2rem;
}

#sec2 .product_info .name {
    font-weight: bold;
    font-size: 1.2rem;
    margin: 1rem 0.5rem;
}

#sec2 .product_info .details {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}
#sec2 .product_info .details p{
    width:100%;
    text-overflow:ellipsis;
    overflow:hidden;
    word-break:break-all;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#sec2 .moreBtn {
    margin-top: auto;
    text-align: left;
    height:10%;
    margin-left:1.8rem;
    padding:20px 0;
}

#sec2 .moreBtn a {
    /*color: #007bff;*/
    text-decoration: none;
    font-weight: 500;
    box-sizing:border-box;
    background:#000000;
    color:#ffffff;
    padding:0.5rem 1.6rem;
    border-radius:2rem;
    transition: opacity 0.2s ease;
}

#sec2 .moreBtn a:hover {
    opacity:0.6;
}


/* section_3 */
#sec3 .detail {
    box-sizing: border-box;
    padding: 0 4rem 50px 4rem;
    width: 100%;
    height: 76%;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/ /* optional: for spacing between boxes */
    justify-content: flex-start;
    gap:2rem;
}

#sec3 .det_box {
    /*width: calc((96%) / 4);*/
    width: calc((80%) / 4);
    box-sizing: border-box;
    background-color: #ffffff; /* optional: for visual aid */
    /*padding: 1.5rem;*/
    border-radius: 1rem;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    flex:auto;
    justify-content: space-between;
}

#sec3 .product_img img {
    max-width: 90%;
    height: auto;
    display: block;
    margin:0 auto;
}

#sec3 .product_img{
    height:100%;
}

#sec3 .det_box .product_info {
    width:100%;
    text-align:center;
    padding:1.4rem 2rem;
    box-sizing:border-box;
}

#sec3 .det_box .product_info button{
    width:100%;
    background:#093e88;
    color:#ffffff;
    padding:0.6rem 0;
    box-sizing:border-box;
    border-radius:1.4rem;
    font-size:1.2rem;
    font-weight:700;
    transition: opacity 0.2s ease;
}
#sec3 .det_box .product_info button:hover{opacity:0.8;}

/* section 4 */
/* marque.css & marque.js 별도 제작 */

/* section 5 */
#sec5{
    height:110vh;
    border-radius:0 0 6rem 6rem;

    transition: transform 0.3s ease;
    transform-origin: top center;
}

.sec5_inner {
    position:sticky;
    top:180px;
    z-index:2;
    width:20%; word-break:keep-all;
    background:rgba(0,0,0,.5);
    /*height:24vh;*/
    backdrop-filter: blur(10px); /* 박스배경 블러처리 */
    border-radius:20px;
    padding:40px 36px;
    margin: 0 10% 100px 10%;
    color:#ffffff;
}

.sec5_inner .txtArea h3 {
    font-size: 20px;
    margin-bottom: 30px;
}

.sec5_inner .txtArea .txt_det > p:nth-of-type(1) {
    font-size: 36px;
    margin-bottom: 20px;
}

.sec5_inner .txtArea .txt_det > p:nth-of-type(2) {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 40px;
}

.sec5_inner .txtArea .txt_det .moreBtn a {
    background: #ffffff;
    color: #000000;
    border-radius: 30px;
    padding:0.6rem 1.6rem;
    font-weight:700;
    transition: opacity 0.2s ease;
}
.sec5_inner .txtArea .txt_det .moreBtn a:hover{opacity:0.8;}
.sec5_space_box{height:100px;}

.footer{background:#ffffff;}

/* ************************************************************************************************ */
/* 모바일 */
@media screen and (max-width:1279px){
    /* OUR SOLUTIONS */
    #sec2 .product_img img.pc{display:none;}
    #sec2 .product_img img.mob{display:block;}

    .titleArea{
        padding:12vh 4vw 4vh 4vw;
        box-sizing:border-box;
    }
    .titleArea .titleArea_inner p:first-child{
        font-size:1.6rem;
        font-weight:800;
        text-align: center;
    }
    .titleArea .titleArea_inner p:nth-of-type(2){
        font-size:1.1rem;
        text-align:center;
        padding-top:0.6rem;
    }

    #sec2 .detail{
        padding:0 4vw;
        box-sizing:border-box;
    }
    #sec2 .det_box{
        width:calc((100% - 2rem * 2) / 2);
        flex:auto;
        box-sizing:border-box;
        /*display: flex;
        flex-direction: column;
        justify-content: space-between;*/
        display:block;
    }

    #sec2 .product_info {
        padding:0 0.6rem;
        box-sizing:border-box;
        text-align: center;
    }
    #sec2 .product_info .name{
        font-size:1rem;
        margin:0.4rem;
    }

    #sec2 .product_info .details{
        line-height:revert;
    }

    #sec2 .product_info .details p {
        font-size: 1.0rem;
        overflow:revert;
        text-overflow:revert;
        -webkit-line-clamp:revert;
        line-height:1.4rem;
        min-height:22vh;
    }

    #sec2 .moreBtn {
        margin: 0;
        padding:0.4vh 0;
    }
    #sec2 .moreBtn a{
        font-size:0.8rem;
        display:block;
        text-align:center;
        padding:0.2rem 1rem;
        border:0.4rem solid #ffffff;
        box-sizing:border-box;
    }

    /* CERTIFICATION & ACHIEVEMENTS */
    #sec3 .detail{
        padding:0 4vw;
        box-sizing:border-box;
        gap:0.4rem;
    }
    #sec3 .det_box{
        width:calc(96%/2);
    }
    #sec3 .det_box .product_info{
        padding:0.4rem;
        box-sizing:border-box;
    }
    #sec3 .det_box .product_info button{
        font-size:0.5rem;
    }

    /* CUSTOMERS */
    section#sec4 {
        padding-bottom: 4vh;
        box-sizing:border-box;
    }

    /* EXPLORE */
    #sec5{
        border-radius:0 0 3rem 3rem;
    }
    .sec5_inner {
        width: 70%;
        margin:0 auto 6vh auto;
        top:14vh;
    }
    .sec5_inner .txtArea h3{
        font-size:1.6rem;
        margin-bottom:2vh;
    }
    .sec5_inner .txtArea .txt_det > p:nth-of-type(1){
        font-size:1.6rem;
    }
    .sec5_inner .txtArea .txt_det > p:nth-of-type(2){
        font-size:1.2rem;
    }
    .sec5_space_box{height:4vh;}
}

/* 모니터 중대형 */
@media screen and (min-width:2560px) and (max-width:3839px){

}

/* 모니터 대형 */
@media screen and (min-width:3840px){

}

/* ************************************************************************************************ */
/* 화면 세로 크기 지원 */
@media screen and (min-height:800px) and (max-height:1000px){
    .titleArea{
        padding:18vh 4rem 4vh 4rem;
    }
    .titleArea .titleArea_inner p:first-child{
        font-size:1.8rem;
    }
    .titleArea .titleArea_inner p:nth-of-type(2){
        font-size:1.2rem;
    }

    #sec2 .det_box{
        height:50%;
        width:calc((100% - 2rem * 2) / 4);
    }
    #sec2 .product_img{
        height:48%;
    }
    #sec2 .product_img img.pc{
        height:100%;
    }
    #sec2 .product_info .name{
        margin:0.6rem 0;
    }
    #sec2 .product_info .details p{
        font-size:0.8rem;
    }
    #sec2 .moreBtn a{
        font-size:0.8rem;
    }

    #sec3 .detail{
        height:revert;
        gap:1rem;

    }
    #sec3 .det_box{
        /*width:calc((80%) / 4);
        flex:revert;
        gap:revert;*/
        height:calc(100vh/4.4);
    }
    #sec3 .product_img{
        display:flex;
        justify-content: center;
        align-items: center;
    }
    #sec3 .product_img img{
        max-width:64%;
        height:auto;
    }
    #sec3 .det_box .product_info{
        padding:0 1.2rem 1rem 1.2rem;
    }
    #sec3 .det_box .product_info button{
        font-size:calc(100vw/130);
        padding:0.3rem 0;
    }
}