@charset "UTF-8";
/* 기본 설정들 */
html {overflow-x: hidden;}
body{position: relative;overflow: hidden;}
html *{ word-break: keep-all;}
html, body {font-family: 'Pretendard' ,"Noto Sans KR", sans-serif;}
img, p, span, h1, h2, h3, h4, h5, h6 {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-user-drag: none; }
.p{display: block ;}
.t{display: none;}
.m{display: none ;}
.fb{font-family: 'Pretendard' ,"Noto Sans KR"; font-weight: 600; font-style: bold;}
html::-webkit-scrollbar {width: 8px; background: #fff }
html::-webkit-scrollbar-thumb {background-color: rgb(0, 171, 200); border-radius: 10px;}

.sub{position: relative;}
.sub_con{max-width: 1250px;margin: 0 auto;}

.b_1024{display: none;}
.b_767{display: none;}
.n_767{display: block;}

@media screen and (max-width: 1250px) {
    .p{display: none;}
    .t{display: block;}
    .cont{width: 90%;margin: 0 auto;max-width:1250px}
}

@media screen and (max-width: 1024px) {
    .sub_con{width: 90%;}
    .n_1024{display: none;}
    .b_1024{display: block;}
}



@media screen and (max-width:767px) {
    .m{display: block;}
    .n_767{display: none;}
    .b_767{display: block;}
    .cont{max-width:767px}
}
/* 기본 설정들 */

.none_768{
    display: block;
}
.block_768{
    display: none;
}

@media screen and (max-width:768px) {
    .none_768{
        display: none;
    }
    .block_768{
        display: block;
    }
    
}



/* header - 시작 */
header{display: flex;justify-content: center;align-items: center; position: fixed;z-index: 9999;top: 20px;left: 60px;right: 60px;background-color: rgb(0, 171, 200, 0.8);border-radius: 24px;height: 74px;}
header .logo{cursor: pointer;}
header .header_con{align-items: center; width: calc(100% - 80px);display: flex;justify-content: space-between;}
header .header_list_con{display: flex;gap: 72px;}
header .header_list{cursor: pointer;border-radius: 50px; color: #fff; font-size: 16px;transition: 0.4s ease;font-weight: 700; width: 112px;height: 32px;display: flex;align-items: center;justify-content: center;}
header .header_list:hover{background-color: #fff;color: #288FA0;}
header .header_list.on{background-color: #fff;color: #288FA0;}
header .header_ham{opacity: 0;pointer-events: none;}
header .header_mobile{display: none;}
header {}
header {}
header{}
header{}
header{}
header{}
.bottom_ham_group{display: none;}

.bottom_circle.pc{position: fixed;bottom: 80px;right: 61px;z-index: 999;cursor: pointer;transition: 0.6s ease;}
.bottom_circle.pc:hover{transform: scale(1.1);}
.bottom_circle_txt{transition: 0.4s ease; position: absolute;top: 50%;left: 50%;width: max-content;transform: translate(calc(-50%), calc(-50% - 10px));}
.bottom_circle.pc.color_on .bottom_circle_txt{filter: brightness(0);}
.bottom_circle_txt img{animation: rotateAni 6s linear  infinite forwards; }

@media screen and (max-width:1400px) {
    header .header_list_con{gap: 30px;}
}

@media screen and (max-width:1100px) {
    header .header_list{width: 80px;font-size: 14px;}
    header .header_list_con{gap: 20px;}
}
@media screen and (max-width:1024px) {
    header .header_list_con{display: none;}
    header .header_ham{position: relative; opacity: 1;pointer-events: inherit;cursor:  pointer;width: 18px;height: 12px;}
    .header_ham_line{transition: 0.6s ease; width: 100%;height: 2px;background-color: #fff;position: absolute;left: 0;}
    .header_ham_line:nth-child(1){top: 0;}
    .header_ham_line:nth-child(2){top: 5px;}
    .header_ham_line:nth-child(3){top: 10px;}

    .ham_on .header_ham_line{}
    .ham_on .header_ham_line:nth-child(1){transform: rotate(45deg);top: 5px;}
    .ham_on .header_ham_line:nth-child(2){width: 0;}
    .ham_on .header_ham_line:nth-child(3){transform: rotate(-45deg);top: 5px;}


    header{gap: 50px; flex-direction: column;align-items: flex-start;justify-content: flex-start; overflow: hidden; right: 12px;left: 12px;top: 8px;height: 48px;border-radius: 12px;}
    header .header_con{margin: 0 auto; width: calc(100% - 40px);transition: 0.6s ;padding: 10px 0;}
    header {transition: 0.6s ;align-items: flex-start;}
    header .logo{width: 83px;}

    header .header_mobile{opacity: 0;transition: 0.6s ease; width: calc(100% - 65px);margin: 0 auto; font-size: 26px;font-weight: 700;line-height: 1.5;letter-spacing: -0.02rem; display: flex;flex-direction: column;gap: 18px;color: #fff;}
    header .header_mobile{}
    header .header_mobile{}
    header .header_mobile{}
    
    .bottom_circle.pc{display: none;}
    .bottom_circle.mb{opacity: 0;transition: 0.6s ease;position: relative;}
    .bottom_ham_group{width: 100%;align-items: center; display: flex;justify-content: center;gap: 25px;}
    .bottom_ham_btn{width: 177px;}
    
    .ham_on header{background-color: #3C808C; top: 0;right: 0;bottom: 0;left: 0;border-radius: 0;height: 100vh;}
    .ham_on header .header_con{padding: 20px 0;width: calc(100% - 65px);}
    .ham_on .header_mobile{opacity: 1;}
    .ham_on .bottom_circle.mb{opacity: 1;}
    .ham_on {overflow: hidden;}
    .ham_on{}
    .ham_on{}
    
    
}


/* header - 끝 */
@keyframes rotateAni {
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}


/* footer - 시작 */
.footer{padding: 37px 0;background-color: #26383C;color: #fff;}
.footer .footer_con{width: 80%;margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-end}
.footer .footer_left{display: flex;flex-direction: column;gap: 24px;}
.footer .footer_left1{width: max-content; font-size: 16px;font-weight: 500;line-height: 1.5;border-bottom: 1px solid #fff;}
.footer .footer_left2{font-size: 16px;font-weight: 500;line-height: 1.5;display: flex;flex-direction: column; gap: 5px;}
.footer .footer_left2_group{display: flex;gap: 10px;align-items: center;}
.footer .footer_left2_line{width: 1px;height: 15px;background-color: #fff;}
.footer .footer_left3{font-size: 16px;line-height: 1.5;color: #C1C1C1;font-weight: 500;letter-spacing: -0.02rem;}
.footer .bottom_circle_img{position: relative;z-index: 3;}
.footer .footer_right .img_box{
    text-align: right;
    margin-bottom: 20px;
}
.footer .footer_right p{
    color: #C1C1C1;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5; 
    letter-spacing: -0.32px;
}
.footer{}
.footer{}
.footer{}
.footer{}

@media screen and (max-width:1024px) {
    .footer{padding: 32px 0;}
    .footer .footer_con{flex-direction: column;align-items: flex-start;gap: 24px;}
    .footer_right{width: 100%;}
    .footer .footer_left2_group{flex-wrap: wrap;}
    .footer .footer_left2_line{display: none;}
    .footer .footer_right .img_box{
        text-align: left;
    }
    .footer .footer_right p{
        text-align: left;
    }
}
/* footer - 끝 */