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


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

body{
    font-weight: bold;
	color:#222;
    width:100%;
    font-family: 'Pretendard' sans-serif ;
    letter-spacing:-.02em !important;
	line-height: 1.6;
    font-size:1rem;
}


 /* root */
 :root {
	--c-01: #8FC31F;
	--c-02:#92D600;
	--b-01: #222;
	--f: #fff;
	--g-01: #666;
	--g-02: #aaa;
	--g-03: #888;
	--l-01: #eee;
	--l-02: #ddd;
	--font-en: 'Montserrat';
}

.fc-g{color: var(--c-01);}
.fc-g2{color: var(--c-02);}

.radius-lg{border-radius: 40px;}
.radius-sm{border-radius: 20px;}

.mon{font-family: 'Montserrat';}

.hover_btn{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; opacity: 0;}
.hover_btn i{display: block; background: url(../img/arrow_w_right.svg) no-repeat center var(--c-01); width: 50px; height: 50px; border-radius: 50%; position: relative;}
.hover_btn i:before{content:''; display: block; width: 66px; height: 66px; position: absolute; border-radius: 50%; background-color: var(--c-01); opacity: .2; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.none{display: none;}


.tab-content{display: none;}
.tab-content.on{display: block;}



/* text-shadow */
.text-shadow{text-shadow: 0 0 8px rgba(0,0,0,.1);}

/* no-content */
.no-content div {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 16px;}
.no-content div p{color: #888;}
.no-content div i img{width: 50px;}


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

/* 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-lg2{max-width: 1660px;} .bd-xl{max-width: 1760px; padding-left: 16px; padding-right: 16px;}

/* 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);}



/* 체크 */
.check{position: relative;}
.check-label { display: inline-block; position: relative;  font-size: 16px; font-weight: 500; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; line-height: 1.7; font-family: 'Pretendard';
    text-align: left; padding-left:1.8em; vertical-align: middle;}
.check-label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}


/* 체크 크기 */
.check-label .checkmark {position: absolute; top:50%; -ms-transform:translateY(-50%); transform:translateY(-50%);
    left: 0; width: 1.35em; height: 1.35em; background-color: #fff; border-radius:50%;
    border:1px solid #ccc; background-color: #fff;
}
.check-label .checkmark.square{border-radius: 0.2em; }
.check-label:hover input ~ .checkmark { background-color: #f1f1f1;}
.check-label input:checked ~ .checkmark {background-color: var(--c-01); border: 1px solid var(--c-01);}
.check-label .checkmark:after { content: ""; position: absolute; display: none;}
.check-label input:checked ~ .checkmark:after {display: block;}

/* 체크박스 */
.check-label .checkmark:after {left: .425em; top:.175em; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); 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; }


.select_con{display: flex; flex-wrap: wrap; gap: 4px 16px;}
.select_con input[type=radio]{display: none;}
.select_con label.case{padding: 0.2em 0; cursor: pointer;}
.select_con label.case span{border: 0; font-size: 1em; justify-content: flex-start; align-items: center; padding: 0; color: #333; line-height: 1.8; margin-top: .2em; font-weight: 500; width: max-content;}
.select_con label.case span::after{}
.select_con label.case span i{display: inline-block; position: relative; margin-right: 0.4em; vertical-align: middle; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #d9d9d9; margin-bottom: .2em;}
.select_con label.case span i::after{content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #d9d9d9; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.select_con label.case input:checked ~ span{background-color: transparent; font-weight: 600;}
.select_con label.case input:checked ~ span i{border: 1px solid var(--c-01);}
.select_con label.case input:checked ~ span i::after{background-color: var(--c-01);}


/* 페이지네이션 */
/* .pagination{text-align: center; margin-top: 60px; width: auto; font-size: 0;} */
.pagination{text-align: center; margin-top: 0px; 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:#000;opacity:0.5;z-index:9999; display: none;/* 이 값으로 레이어의 위치를 조정합니다. */}
.loading_img{position:absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%,-50%)}


.marquee{font-size: 220px; font-weight: 800; font-family: 'Montserrat'; display: flex; color: #f5f5f5; position: absolute; z-index: 1; bottom: -14px; white-space: nowrap; overflow: hidden; flex: 0 0 auto; z-index: -1;  animation: marquee 30s linear infinite; gap: 6vw;}
.marquee-reverse{animation: marquee-reverse 30s linear infinite;}

@keyframes marquee {
  0% { right: 0; }
  100% { right: -100%; }
}

@keyframes marquee-reverse {
    0% { left: 0; }
    100% { left: -100%; }
  }
  

/* --------------------------------------------------
------------------------inputbox------------------ */
form input{width: 100%;}
form input[type=text],form input[type=password]{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;}

/* ********************************************* *
 * 1800px max
 * ********************************************* */
 @media (max-width:1800px){
    [class*='bd']{padding-left: 16px; padding-right:16px;}
    .bd-xl {padding-left: 20px; padding-right: 20px;}

   
    
}


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


   
    
}


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


   
    
}

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

    /* loading */
    .loading_img{width: 150px; height: 150px;}

    .radius-lg{border-radius: 20px;}
    .radius-sm{border-radius: 10px;}

    .marquee{font-size: 180px;}

    
}

    
/* ********************************************* *
* 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%;}


    .bd-xl {padding-left: 16px; padding-right: 16px;}
    
    .marquee{font-size: 150px;}


}


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

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

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


.radius-lg{border-radius: 12px;}
.radius-sm{border-radius: 6px;}


}

/* ********************************************* *
* 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%;}

    .no-content div{gap: 10px; }
    .no-content div p{font-size: 15px;}
    .no-content div i img{width: 40px;}

    /* loading */
    .loading_img{width: 100px; height: 100px;}

}

@media screen and (max-device-width: 500px){
    .marquee{font-size: 100px;}

}

@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;
    }

    /* loading */
    .loading_img{width: 80px; height: 80px;}

    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@200;300;400&display=swap');



  }