/* ------------------------------------------------------------- */
/* ------------------- 공통으로 들어가는 부분  ------------------- */
/* ------------------------------------------------------------- */


html {overflow-y:scroll; overflow-x:hidden; font-size: 16px; scroll-behavior: smooth; }

body{
    font-weight: 500;
	color:#111;
    width:100%;
    font-family: 'SUIT Variable', sans-serif !important;
    /* letter-spacing:-.02em; */
	line-height: 1.5;
    font-size:1rem;
}

/* 전체 */
.wrap{width: 100%; min-height: 100%; position: relative; }

/* clearfix */
.cf::before, .cf::after{display:block; content:''; clear: both;}


/* blind */
.blind{position: absolute; top: -9999999px; text-indent: -9999px; font-size: 0!important;}
.hidden{opacity: 0; visibility: hidden;}
.hide{position: absolute; width: 1px; height: 1px; margin:-1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

/* boundary */
[class*='bd']{width: 100%; margin-left:auto; margin-right:auto; position: relative;}
.bd-xs{max-width: 640px;} .bd-sm{max-width: 960px;} .bd-md{max-width: 1200px;} .bd-lg{max-width: 1440px;} .bd-xl{max-width: 1600px;}

/* responsive */
.mo_ver{display: none;}

/* font-size */
.xsmall{font-size:0.9em;}
.medium{font-size:1.225em;}



.font_big_tit{font-size:1.85rem;}
.font_tit{font-size:1.25rem;}
.font_txt{font-size:1rem;}
.font_text{font-size:0.9rem;}

.dis_flex{display: flex;align-items: center;}
.dis_flex.side{justify-content: space-between;}
.dis_flex.right{    justify-content: flex-end;}

.width_30{width:30%}
.width_40{width:40%}
.width_50{width:50%}
.width_60{width:60%}
.width_70{width:70%}
.width_80{width:80%}


.text_cut01{width: 100%; white-space:normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;text-align: left;}

.border_color{  border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient( #3373c9, #00b9d4);
    background-origin: border-box;
    background-clip: content-box, border-box;}
.text_color{background: linear-gradient( #3373c9, #00b9d4 );
    /* -webkit-background-clip: text; */
    -webkit-text-fill-color: transparent;}


/* --------------------------------------------------
-------------------------text--------------------- */
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.text-center{text-align: center !important;}



/* --------------------------------------------------
-------------------------ellipsis--------------------- */
.ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ellipsis2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
  -webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word; line-height:1.7;}
.ellipsis3{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
    -webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word; line-height:1.7;}


/* --------------------------------------------------
------------------------display------------------- */
.dis-block{display: block;}
.dis-in-block{display: inline-block;}
.dis-none{display: none;}

.fl-left{float:left;}
.fl-right{float: right;}



/* --------------------------------------------------
------------------------margin-------------------- */
.mt-0{margin-top:0;} .mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;} .mt-5{margin-top:40px;} .mt-6{margin-top:48px;} .mt-7{margin-top:56px;} .mt-8{margin-top:64px;} .mt-9{margin-top:72px;} .mt-10{margin-top:80px;}
.mb-0{margin-bottom:0;} .mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:32px;} .mb-5{margin-bottom:40px;} .mb-6{margin-bottom:48px;} .mb-7{margin-bottom:56px;} .mb-8{margin-bottom:64px;} .mb-9{margin-bottom:72px;} .mb-10{margin-bottom:80px;}
.mr-0{margin-right:0;} .mr-1{margin-right:8px;} .mr-2{margin-right:16px;} .mr-3{margin-right:24px;} .mr-4{margin-right:32px;} .mr-5{margin-right:40px;} .mr-6{margin-right:48px;} .mr-7{margin-right:56px;} .mr-8{margin-right:64px;} .mr-9{margin-right:72px;} .mr-10{margin-right:80px;}
.ml-0{margin-left:0;} .ml-1{margin-left:8px;} .ml-2{margin-left:16px;} .ml-3{margin-left:24px;} .ml-4{margin-left:32px;} .ml-5{margin-left:40px;} .ml-6{margin-left:48px;} .ml-7{margin-left:56px;} .ml-8{margin-left:64px;} .ml-9{margin-left:72px;} .ml-10{margin-left:80px;}



/* --------------------------------------------------
------------------------padding------------------- */
.pt-0{padding-top:0;} .pt-1{padding-top:8px;} .pt-2{padding-top:16px;} .pt-3{padding-top:24px;} .pt-4{padding-top:32px;} .pt-5{padding-top:40px;} .pt-6{padding-top:48px;} .pt-7{padding-top:56px;} .pt-8{padding-top:64px;} .pt-9{padding-top:72px;} .pt-10{padding-top:80px;}
.pb-0{padding-bottom:0;} .pb-1{padding-bottom:8px;} .pb-2{padding-bottom:16px;} .pb-3{padding-bottom:24px;} .pb-4{padding-bottom:32px;} .pb-5{padding-bottom:40px;} .pb-6{padding-bottom:48px;} .pb-7{padding-bottom:56px;} .pb-8{padding-bottom:64px;} .pb-9{padding-bottom:72px;} .pb-10{padding-bottom:80px;}
.pr-0{padding-right:0;} .pr-1{padding-right:8px;} .pr-2{padding-right:16px;} .pr-3{padding-right:24px;} .pr-4{padding-right:32px;} .pr-5{padding-right:40px;} .pr-6{padding-right:48px;} .pr-7{padding-right:56px;} .pr-8{padding-right:64px;} .pr-9{padding-right:72px;} .pr-10{padding-right:80px;}
.pl-0{padding-left:0;} .pl-1{padding-left:8px;} .pl-2{padding-left:16px;} .pl-3{padding-left:24px;} .pl-4{padding-left:32px;} .pl-5{padding-left:40px;} .pl-6{padding-left:48px;} .pl-7{padding-left:56px;} .pl-8{padding-left:64px;} .pl-9{padding-left:72px;} .pl-10{padding-left:80px;}


/* --------------------------------------------------
------------------------revers------------------- */
.revers{flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;}
    


/* --------------------------------------------------
------------------------button------------------ */

.button{position: relative;}
.button button{ -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}



/* --------------------------------------------------
------------------------checkbox------------------ */
.check-mark{cursor: pointer;}
.check-mark > input{position: absolute; box-sizing: border-box; width: 20px; height: 20px; vertical-align: top; border:0;-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* -webkit-border-radius: 0; */
    opacity: 0; }
.check-mark em{display: inline-block; position: relative; font-size: 14px; padding-left: 30px; text-align: left; box-sizing: border-box;vertical-align: top; line-height: 19px;}
.check-mark em::before{border: 1px solid #ddd; background-color:#fff; content: ""; display: block; left: 0; position: absolute; width: 20px; height: 20px;}
.check-mark em::after{content: ""; display: block; position: absolute;}
.check-mark input:checked + em::before{background-color: #E2C344; border-color: #E2C344}
.check-mark input:checked + em::after{width: 11px; height: 6px; top: 5px; left: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}


/* --------------------------------------------------
------------------------radiobox------------------ */
.check-mark em.radio::before{border-radius: 50%;}
.check-mark input:checked + em.radio::before{background-color: #18b0e2; border-color: #18b0e2}
.check-mark input:checked + em.radio::after{width: 10px;height: 10px; left: 5px; top: 5px; border-radius: 50%;background: #fff; }




/* 페이지네이션 */
.pagination{text-align: center; margin-top: 60px; width: auto; font-size: 0;}
.pagination .page a{display: inline-block; height: 34px; font-weight: bold; font-size: 15px; line-height: 34px; cursor:pointer;
 box-sizing: border-box; /* border: 1px solid #ddd; */ vertical-align: top; text-align: center; margin: 0 7px;  }
.pagination .page a + a{margin-left: 20px;}
.pagination .page a.active, .pagination .page a:hover{color:#E2C344; border-bottom: 2px solid;}

/* loading */
.loading{width:100%;height:100%;position:fixed;left:0px;top:0px;background:#fff;opacity:0.5;z-index:9999;display:none; /* 이 값으로 레이어의 위치를 조정합니다. */}
.loading_img{position:absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translateX(-50%); transform: translateY(-50%)}





/* --------------------------------------------------
------------------------inputbox------------------ */
form input{width: 100%;}
form input[type=text],form input[type=password], form input[type=phone] {border: none; outline: none;background-color: #fff; border: 1px solid #ddd; padding: 2px 8px; width: 100%; height: 50px; line-height: 50px; border-radius: 3px; }
form input{ height:40px;}
form input[type=text]:disabled{background-color:#dcdee1; color:#939496;}
/* form input[type=text], .form input[type=password]{background-color:#fff;border:1px solid #ececec; padding-left:8px; padding-right:8px; width: 100%;} */
form input[type=button]{font-weight:700; outline: none; border:0; border-radius: 4px; cursor: pointer; padding-left:24px; padding-right:24px;}
form input.btn-default{background-color: #fff;  border: 1px solid #ddd;}

input.input-min{max-width: 48px;}
input.input-xs{max-width: 128px;}
input.input-sm{max-width: 360px}
input.input-md{max-width: 480px;}
input.input-lg{max-width: 100%;}



/* --------------------------------------------------
---------------------grid system------------------ */
.row {margin-left:-16px; margin-right:-16px;}
.row-too-short{margin-left:-2px; margin-right:-2px;}
.row-short{margin-left:-8px; margin-right:-8px;}
.row-wide{margin-left:-32px; margin-right:-32px;}
.row-too-wide{margin-left:-48px; margin-right:-48px;}

[class*='row']:before, [class*='row']:after{display: table; content: " "; clear: both;}

.row > [class*='col']{padding-right: 16px; padding-left: 16px;}
.row-too-short > [class*='col']{padding-right: 2px; padding-left: 2px;}
.row-short > [class*='col']{padding-right: 8px; padding-left: 8px;}
.row-wide > [class*='col']{padding-right: 32px; padding-left: 32px;}
.row-too-wide > [class*='col']{padding-right:48px; padding-left:48px;}

.col-xs-1, .col-sm-1, .col-md-1, .col-xs-2, .col-sm-2, .col-md-2, .col-xs-3, .col-sm-3, .col-md-3, .col-xs-4, .col-sm-4, .col-md-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-xs-6, .col-sm-6, .col-md-6, .col-xs-7, .col-sm-7, .col-md-7, .col-xs-8, .col-sm-8, .col-md-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-xs-10, .col-sm-10, .col-md-10, .col-xs-11, .col-sm-11, .col-md-11, .col-xs-12, .col-sm-12, .col-md-12 {
    position:relative;
    min-height:1px; 
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left;}

.col-xs-12 {width:100%;}
.col-xs-11 {width:91.66666667%;}
.col-xs-10 {width:83.33333333%;}
.col-xs-9 {width:75%;}
.col-xs-8 {width:66.66666667%;}
.col-xs-7 {width:58.33333333%;}
.col-xs-6 {width:50%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-1 {width: 8.33333333%;}



.col-sm-12 {width: 100%;}
.col-sm-11 {width: 91.66666667%;}
.col-sm-10 {width: 83.33333333%;}
.col-sm-9 {width: 75%;}
.col-sm-8 {width: 66.66666667%;}
.col-sm-7 {width: 58.33333333%;}
.col-sm-6 {width: 50%;}
.col-sm-5 {width: 41.66666667%;}
.col-sm-4 {width: 33.33333333%;}
.col-sm-3 {width: 25%;}
.col-sm-2 {width: 16.66666667%;}
.col-sm-1 {width: 8.33333333%;}



.col-md-12 {width: 100%;}
.col-md-11 {width: 91.66666667%;}
.col-md-10 {width: 83.33333333%;}
.col-md-9 {width: 75%;}
.col-md-8 {width: 66.66666667%;}
.col-md-7 {width: 58.33333333%;}
.col-md-6 {width: 50%;}
.col-md-5 {width: 41.66666667%;}
.col-md-4 {width: 33.33333333%;}
.col-md-3 {width: 25%;}
.col-md-2 {width: 16.66666667%;}
.col-md-1 {width: 8.33333333%;}

#content img{display: inline-block;}

/* ********************************************* *
 * 1620px max
 * ********************************************* */
 @media (max-width:1620px){

    .bd-xl {padding:0 20px;}

   
    
}


/* ********************************************* *
 * 1440px max
 * ********************************************* */
 @media (max-width:1440px){

    [class*='bd']{padding-left: 16px; padding-right:16px;}

   
    
}
/* ********************************************* *
* 1024px max
* ********************************************* */
@media (max-width:1200px){

   
    
}

    
/* ********************************************* *
* 1024px max
* ********************************************* */
@media (max-width:1024px){

    html{font-size: 15px;}

    /* responsive */
    .mo_ver{display: block;}
    .pc_ver{display: none;}

    .col-sm-12 {width:100%;}
    .col-sm-11 {width:91.66666667%;}
    .col-sm-10 {width:83.33333333%;}
    .col-sm-9 {width:75%;}
    .col-sm-8 {width:66.66666667%;}
    .col-sm-7 {width:58.33333333%;}
    .col-sm-6 {width:50%;}
    .col-sm-5 {width: 41.66666667%;}
    .col-sm-4 {width: 33.33333333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66666667%;}
    .col-sm-1 {width: 8.33333333%;}


    
}


/* ********************************************* *
* 760px max
* ********************************************* */

@media (max-width:768px)
{
    html{font-size: 13px;}

    .font_big_tit {font-size: 1.5rem;}
    .font_txt {font-size: 0.85rem;}


    
}

/* ********************************************* *
* 640px max
* ********************************************* */

@media (max-width:640px)
{

    .col-xs-12 {width:100%;}
    .col-xs-11 {width:91.66666667%;}
    .col-xs-10 {width:83.33333333%;}
    .col-xs-9 {width:75%;}
    .col-xs-8 {width:66.66666667%;}
    .col-xs-7 {width:58.33333333%;}
    .col-xs-6 {width:50%;}
    .col-xs-5 {width: 41.66666667%;}
    .col-xs-4 {width: 33.33333333%;}
    .col-xs-3 {width: 25%;}
    .col-xs-2 {width: 16.66666667%;}
    .col-xs-1 {width: 8.33333333%;}


}

@media screen and (max-device-width: 480px){
    body{
        -webkit-text-size-adjust : 120% ;
    }

    body{
        font-weight: normal;
        width:100%;
        font-family: 'Montserrat','IBM Plex Sans KR', sans-serif;
        /* letter-spacing:-.02em; */
        line-height: 1.6;
        font-size:1rem;
    }
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@200;300;400&display=swap');
  }

/* Page Title Section Styling */
.sub .pg_title {
    position: relative;
    padding: 180px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    overflow: hidden;
}

.sub .pg_top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.sub .pg_text {
    flex: 1;
    max-width: 600px;
}

.sub .bread {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.sub .bread .home {
    width: 20px;
    height: 20px;
    background: url('../img/icon_home.png') no-repeat center;
    background-size: contain;
}

.sub .bread i {
    width: 6px;
    height: 6px;
    background: #00D1E9;
    border-radius: 50%;
    margin: 0 12px;
}

.sub .bread .now {
    color: #00D1E9;
    font-size: 1rem;
}

.sub .pg_tit {
    font-size: 3.5rem;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sub .deco {
    font-size: 1.2rem;
    color: rgba(0, 209, 233, 0.1);
    font-weight: 700;
    letter-spacing: 3px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s ease;
}

.sub .pg_bg {
    position: relative;
    width: 100%;
    height: 500px;
    margin-top: 40px;
}

.sub .img_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.sub .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive Design for Page Title */
@media (max-width: 768px) {
    .sub .pg_title {
        padding: 130px 0 30px;
    }

    .sub .pg_top {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .sub .pg_text {
        max-width: 100%;
    }

    .sub .bread {
        margin-bottom: 1px;
    }

    .sub .pg_tit {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .sub .deco {
        display: block;
        right: 20px;
        font-size: 1rem;
        opacity: 0.5;
    }

    .sub .pg_bg {
        height: 300px;
        margin-top: 25px;
    }
}

/* 이미지 팝업 모달 스타일 */
.gs-image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gs-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.gs-popup-content {
    position: relative;
    z-index: 1001;
    max-width: 90%;
    max-height: 90vh;
    padding: 0;
}

.gs-popup-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

.gs-popup-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;
}

/* 이미지 갤러리 스타일 */
.gs-image-gallery {
    margin: 20px 0;
}

.gs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.gs-gallery-item {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.gs-gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: background 0.3s ease;
}

.gs-gallery-item:hover {
    transform: scale(1.05);
}

.gs-gallery-item:hover::before {
    background: rgba(0, 0, 0, 0.1);
}

.gs-gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

@media screen and (max-width: 768px) {
    .gs-image-popup {
        align-items: flex-end;
        padding-bottom: 20px;
    }
    
    .gs-popup-content {
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        margin: 0;
        padding: 0;
        position: relative;
        bottom: 20px;
    }
    
    .gs-popup-content img {
        max-height: 65vh;
        width: 100%;
        object-fit: contain;
    }
    
    .gs-popup-close {
        top: 10px;
        right: 10px;
        color: white;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .gs-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 8px;
    }
    
    .gs-gallery-item img {
        height: 100px;
    }
}

@media screen and (max-width: 480px) {
    .gs-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gs-gallery-item img {
        height: 90px;
    }
}