/*basic,header,footer,font, form style*/

    /* 1. 브라우저 기본 스타일 초기화 */
    *{margin: 0; padding: 0; box-sizing: border-box;}

        html{width: 100vw;}

    /* 2. 링크 스타일 초기화 */
    a{text-decoration: none; display: inline-block; color: #000;}

    /* 3. 목록(리스트) 스타일 초기화 */
    ul{list-style: none;}

    /* 4. 미디어 요소 기본 세팅 */
    img, video {display: block; max-width: 100%;}

    /* 5. 폰트 세팅 */
    body {font-family: 'Noto Sans KR', sans-serif; line-height: 1.5; font-size: 24px; overflow-x: hidden; font-weight: 400;}

    /*제일 큰 거 .extra, h1: 80(헤더 강조문)     .extraBig: 100(푸터), veiwMenu
    섹션제목 h2: 42 / 55
    부제목 : h3: 32
    본문 body : 24, 26, 28
    캡션 notice, caption : 20
    버튼 CTA button: 42*/

    h2{
        font-size: 1.5em; /* 36px */
        font-family: 'Geist', sans-serif;
        font-weight: 700;
    }
    h3 {font-size: 1.2em;} /* 서브타이틀 (26px) */
    h4 {font-size: 0.8em;} /* 32px */
    h5 {font-size: 0.8em;} /* 20px */

    .extra{ /*p style 타이틀*/
        font-size: 3.3em; /* 80px */
        font-family: 'Geist', sans-serif;
        font-weight: 800;
    }
    .extraBig{ /*p style 타이틀*/
        font-size: 3.3em; /* 80px */
        font-family: 'Geist', sans-serif;
        font-weight: 800;
    }
    .semiBold{
        font-weight: 600;
    }
    .CTA{ /*a style*/
        font-size: 1.3em; /* 30px */
        font-family: 'Geist', sans-serif;
        font-weight: 600;
        padding: 0 40px;
        border-radius: 9999px;
        line-height: 2;
    }
    .btn{ /*CTA style text align 따로 주기*/
        display: block;
    }
    button{
        font-family: 'Geist', sans-serif;
        font-weight: 600;
    }

    .CTA2{
        font-family: 'Geist', sans-serif;
        font-weight: 600;
        display: flex;
        gap: 22px;
        justify-content: center;
        border-radius: 999px;
        line-height: 38px;
        color: #fff;
    }
    .arrow{
        width: 38px;
        height: 38px;
        background: url(images/icon/smallCTA_iconBK.svg)no-repeat 0 0;
        background-size: contain;
        display: block;
    }

    .arrowWT{
        width: 38px;
        height: 38px;
        background: url(images/icon/smallCTA_iconWT.svg)no-repeat 0 0;
        background-size: contain;
        transform: rotate(-90deg);
    }

    
    /*layout*/
    .inner{
        width: 75vw;
        margin: 0 auto;
    }
    section{padding: 150px 0;}

    main>section:last-of-type{
        position: relative;
        padding-bottom: 300px !important;
    }

        
/*header, footer style*/

    /*header*/
    
    header{
        width: 100%; 
        position: fixed; 
        left: 0; 
        top: 0; 
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0;

    }

    header>h1>a{
        width: 220px;
        height: 60px;
        text-indent: -99999px;
        background: url(images/icon/brand_Logo.svg)no-repeat 0 0;
        background-size: contain;
        position: absolute;
        left: 40px;
        top: 25px;
    }

    
    nav{
        display: flex; 
        width: max-content;
        height: 56px;
        background-color: #ccc;
        position: relative;
        border-radius: 999px;
        padding: 5px 15px 5px 18px;
       
    }
    .nav_first{display: none;}
    nav ul{
        width: 580px;
        height: 43px;
        display: flex; 
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
  position: relative;
  z-index: 2; /* 텍스트가 타원 위로 오도록 설정 */
}

 
    nav li a{
        font-family: 'Geist', sans-serif;
        font-size: 20px; 
        font-weight: 600;
        padding: 0 20px; 
        color: #ffffff;
        line-height: 54px;
        display: block;
        border-radius: 50px;
  transition: color 0.5s ease;
  
    }


    nav li:nth-child(1)>a:hover{color: #ff7aaa;}
    nav li:nth-child(2)>a:hover{color: #ff5858;}
    nav li:nth-child(3)>a:hover{color: #13ff56;}
    nav li:nth-child(4)>a:hover{color: #ffe358;}
    nav li:nth-child(5)>a:hover{color: #ff2fd9;}
   
    #nav_bar{
        width: 109px;
        height: 47px;
        background: #000;
        position: absolute;
        left: 500px;
        border-radius: 999px;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95);
        transition: left 0.45s ease, width 0.45s ease, opacity 0.35s ease, transform 0.35s ease;
    }

    .mainNav:hover #nav_bar,
    #nav_bar.is-visible{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
    }



    /*footer*/
    footer{
        padding: 100px 0 50px; 
        position: relative;
        min-width: max-content;
    }

    footer .inner{
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    
    .footer_info{
        display: flex;
        gap: 80px;
        margin-left: 10px;
    }

    .footer_sns ul{
        display: flex;
        gap: 44px;
    }

    footer a{font-size: 20px;}
    footer li:first-child{margin-bottom: 8px;}

    .footer_input01{
        width: max-content; 
        font-size: 24px; 
        font-weight: 600; 
        margin-bottom: 5px;
    }
    .footer_input02{
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 15px;
    }
    .footer_input03{
        width: 90%;
        height: 60px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        /*배경은 페이지마다 다름*/
    }
    .footer_inputimg{
        padding: 0 20px;
        height: 100%;
        line-height: 60px;
        background: #000;
    }
    .footer_inputimg>img{
        margin-top: 10px;
    }

    .footer_inputText{
        width: 100%;
        font-size: 18px;
        padding-left: 18px;
        line-height: 60px;
        border:none;
    }
    
    .footer_inputSubmit{
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        font-weight: 600;
        padding: 0 19px;
    }
    .footer_input03 label::before{
        content: '';
        background: #333;
        width: 2px;
        height: 22px;
        position: absolute;
        top:19px
    }

    .footer_info02{width: max-content;}
    .footer_info03{width: max-content;}

    .footer_logo{
        font-size: 110px;
        font-family: 'Geist', sans-serif;
        font-weight: 900;
        opacity: 90%;
    }

    


    /*form*/
    input{border: none; background: none;}










@media screen and (max-width: 1024px){
    
    body{font-size: 19px;}

    .inner{width: 90vw;}

    section{
        padding: 120px 0;
    }

    .CTA{
        padding: 0 25px;
        line-height: 2.3;
    }


    /*header*/

    header{
        padding: 24px 0;
    }

    header > h1 > a{
        width: 170px;
        height: 46px;
        background-size: contain !important;
    }

    nav{
        width: 460px;
        height: 43px;
        padding: 0 !important;
        overflow: hidden;
    }

    nav ul{
        width: 460px;
        margin: 0 auto !important;
        justify-content: space-between !important;
        padding: 0 10px;
        
    }

    nav a{
        font-size: 0.8em !important;
        line-height: 43px;
    }

    #nav_bar{
        width: 100px !important;
        height: 36px;
        margin: 4px;
    }


    /*footer*/
    footer{
        height: max-content; 
        position: relative;
        padding-bottom: 30px;
    }

    footer .inner{
        gap: 25px;
    }
    
    .footer_info{
        gap: 45px;
        margin: 30px 0;
    }

    .footer_sns ul{
        gap: 35px;
    }
    .footer_sns li{margin-bottom: 0 !important;}
    .footer_sns img{
        width: 55px;
    }

    footer a{font-size: 16px;}

    
    .footer_input01{
        margin-left: 0; 
        font-size: 17px; 
    }
    .footer_input02{
        font-size: 15px;
    }
    .footer_input03{
        height: 48px;
    }
    .footer_inputimg{
        padding: 0 18px;
        height: 100%;
        line-height: 40px;
    }
    .footer_inputimg>img{
        margin-top: 5px;
        width: 37px;
    }

    .footer_inputText{
        font-size: 15px;
        padding-left: 15px;
        line-height: 25px;
        border:none;
    }
    
    .footer_inputSubmit{
        line-height: 40px;
        font-size: 16px;
        padding: 0 11px;
        color: #000;
    }
    .footer_input03 label::before{
        width: 2px;
        height: 18px;
        top:15px;
        background: #666;
    }


    .footer_logo{
        font-size: 12.3cqw;
        line-height: 1.2;
    }
}









@media screen and (max-width: 768px){

    html{overflow-y: scroll;}
     
    body {
        font-size: 15px; /*24px -> 15px*/
        line-height: 1.6;
    }
    h2{
        font-size: 22px;
    }

    .extra{
        font-size: 42px;
    }

    .extrabig{
        font-size: 70px;
    }

    .CTA {
        font-size: 1.1em; /* 16.5px */
        padding: 0 24px;
        line-height: 2.2;
    }

    .inner{width: 90vw;}

    section{
        padding: 120px 0;
    }

    .CTA{
        font-size: 20px;
        font-weight: 600;
        padding: 0 25px;
        line-height: 2.3;
    }
    main>section:last-of-type{
        padding-bottom: 200px !important;
    }


    /*header*/

    header{
        padding: 0;
    }

    header > h1 > a{
        background: none !important;
    }

    nav{
        width: 100vw;
        height: 45px;
        border-radius: 0;
    }

    .nav_first{display: block;}

    nav ul{
        justify-content: space-around !important;
        height: 100%;
        width: 100%;
    }

    nav a{
        font-size: 14px !important;
        padding: 0 14px !important;
        line-height: 45px;
    }

    #nav_bar{
        max-width: 23%;
        height: 100%;
        border-radius: 0;
        margin: 0 auto;
        overflow: hidden;
        left: 20px;
    }




    /*footer*/
    footer{
        height: max-content; 
        position: relative;
        display: ruby-text-container;
        padding-bottom: 30px;
    }

    footer .inner{
        gap: 25px;
    }
    
    .footer_info{
        gap: 45px;
        margin-bottom: 10px;
    }

    .footer_sns ul{
        display: flex;
        gap: 18px;
        margin-top: 100px;
    }
    .footer_sns li{margin-bottom: 0 !important;}
    .footer_sns img{
        width: 40px;
    }

    footer a{font-size: 13px;}

    .footer_info01{
        margin-left: 0; 
        position: absolute;
        top: 38px;
    }
    .footer_input01{
        margin-left: 0; 
        font-size: 14px; 
    }
    .footer_input02{
        font-size: 12px;
    }
    .footer_input03{
        width: 250px !important;
        height: 40px;
    }
    .footer_inputimg{
        padding: 0 15px;
        height: 100%;
        line-height: 40px;
    }
    .footer_inputimg>img{
        margin-top: 0;
        width: 37px;
    }

    .footer_inputText{
        font-size: 13px;
        padding-left: 12px;
        line-height: 25px;
        border:none;
    }
    
    .footer_inputSubmit{
        line-height: 40px;
        font-size: 13px;
        padding: 0 11px;
        color: #000;
    }
    .footer_input03 label::before{
        width: 1px;
        height: 12px;
        top:14px
    }


    .footer_logo{
        font-size: 12.3cqw;
        line-height: 1.2;
    }


    .CTA2{
        gap: 15px;
        line-height: 38px;
        color: #fff;
    }
    .CTA2_btn .arrow{
        width: 25px;
        height: 25px;
        background-size: contain !important;
    }

    .arrowWT{
        width: 25px;
        height: 25px;
        background-size: contain !important;
    }

}