/* 공통 & utility */
p{
    line-height: 150%;;
}
:root{
    --mainNavLiDeco1: 0;
    --mainNavLiDeco2: 0;
    --mainNavLiDeco3: 0;
    --mainNavLiDeco4: 0;
    --header_After: none;
}
#mainNavItem1::before{
    width: var(--mainNavLiDeco1);
    transition: var(--mainNavLiDecoTransition1, width 0.3s ease);
}
#mainNavItem2::before{
    width: var(--mainNavLiDeco2);
    transition: var(--mainNavLiDecoTransition2, width 0.3s ease);
}
#mainNavItem3::before{
    width: var(--mainNavLiDeco3);
    transition: var(--mainNavLiDecoTransition3, width 0.3s ease);
}
#mainNavItem4::before{
    width: var(--mainNavLiDeco4);
    transition: var(--mainNavLiDecoTransition4, width 0.3s ease);
}

.tooltipTrigger {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 점선으로 밑줄 */
    cursor: pointer;
}

.tooltipText {
    visibility: hidden;
    width: 340px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 20px; /* 툴팁이 텍스트 위에 위치 */
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltipTrigger:hover .tooltipText {
    visibility: visible;
    opacity: 1;
}

/* 애니메이션 완전 비활성화 클래스 */
.no-transition,
.no-transition *,
.no-transition::before,
.no-transition::after {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
}

/*************** 스마트폰 세로 ***************/
@media all and (min-width: 1px) and (max-width: 599px) {
    
    .mainNav .nav {
        font-size:15px;
    }
    .header__middle{
        height: 45px;
    }
    .header__middle .mainNav{
        gap: 20px;
    }
    .headerBottom{
        display: flex;
    }
}

/*************** 스마트폰 가로 ***************/
@media all and (min-width: 600px) and (max-width: 959px) {
    #wrapper{
        
        max-width: 640px;
    }
    .header__middle{
        height: 60px;
    }
    .header__middle .mainNav{
        gap: 30px;
    }
    .mainNav .nav {
        font-size:20px;
    }
    .headerBottom{
        display: flex;
    }
}

/*************** 태블릿 가로 ~ 모니터 ***************/
@media all and (min-width: 960px) {
    html, body{
        overflow-x:hidden;
        overflow-y:visible;
        width: 100%;
    }
    #wrapper{
        width:100%;
        overflow-y:hidden;
        position:relative;
    }
    #wrapper::after{
        display:block;
        width:100%;
        height:1000vh;
        -m-top:-300px;
        content: "";
        position: absolute;
        background-color: rgba(0,0,0,0.5);
        z-index:3;
    }
    /* header */
    .header{
        min-width: 920px;
        max-width: 1280px;
        margin: 15px auto 0;
    }
    .header__top {
        border-bottom: 1px solid #D9D9D9;
        height: 40px;
    }
    .header__top__contents{
        display: flex;
        justify-content: space-between;
        padding:0 5px 5px 5px;
    }
    .header__top img{
        height:25px;
    }
    .header__top__contents__logo{
        display: flex;
        align-items: center;
    }
    .header__top__contents__logo span {
        font-size:24px;
        font-weight: bold;
    }
    .header__top__contents__totalMenu{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .header__top__contents__totalMenu__totalMenuLine{
        background-color: rgb(117, 117, 117);
        border-radius: 2px;
        height:5px;
        transition: width 0.1s;
    }
    .header__top__contents__totalMenu__totalMenuLine:nth-of-type(1){
        width: 20px;
    }
    .header__top__contents__totalMenu__totalMenuLine:nth-of-type(2){
        width: 25px;
        background-color:rgb(255, 103, 103);
        margin-top:6px;
        margin-bottom:6px;
    }
    .header__top__contents__totalMenu__totalMenuLine:nth-of-type(3){
        width: 12px;
    }
    .header__top__contents__totalMenu:hover .header__top__contents__totalMenu__totalMenuLine{
        width:30px;
    }
    .header__middle{
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        height: 80px;
    }
    .header__middle__contents__mainNav{
        font-size:25px;
        height:100%;
        display: flex;
        justify-content: flex-start;
        gap: 50px;
        align-items: center;
    }
    .header__middle__contents__mainNav li{
        font-size: 25px;
        font-weight: 500;
        position:relative;
        padding:0 10px;
        height: 100%;
        align-content: center;
    }
    .header__middle__contents__mainNav li::before{
        content:"";
        display: block;
        height: 16px;
        background-color:rgb(209, 255, 105);
        position:absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        transition: all 0.3s;
        transition-behavior: normal;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        transition-delay: 0s;
        transition-property: all;
    }
    .header__bottom{
        width:100%;
        height:auto;
        border-bottom: 1px solid #D9D9D9;
        position: absolute;
        background-color: white;
        left:50%;
        right:0;
        transform: translateX(-50%);
        z-index:4;
    }
    .header__bottom__contents{
        min-width: 920px;
        max-width: 1280px;
        margin: 0 auto;
    }
    .header__bottom__contents__subNav{
        height: auto;
        left:0;
        top:0;
        display: none;
    }
    .header__bottom__contents__subNav__navDesc{
        float:left;
        height: 100%;
        width: 200px;
        line-height:30px;
        margin-right:20px;
        padding-right:20px;
        border-right: 1px solid #D9D9D9;
        font-size: 0.8rem;
    }
    .header__bottom__contents__subNav a:first-of-type li{
        margin-top: 0;
    }
    .header__bottom__contents__subNav a:last-of-type li{
        /* margin-bottom: 0; */
    }
    .header__bottom__contents__subNav__subNavItem{
        position: relative;
        height: 30px;
        line-height:30px;
        margin:10px 0 10px 240px;
        font-weight: bold;
        font-size: 1rem;
        list-style-type: none;
    }
    .header__bottom__contents__subNav__subNavItem:hover::before{
        content:'';
        display: block;
        position: absolute;
        height:35px;
        width:calc(100% + 20px);
        left:-20px;
        top:0;
        background-color:aliceblue;
        z-index: -1;
    }
    .header__bottom__contents__subNav__subNavItem:hover{
        color:red;
        margin-left:240px;
        /* list-style-type: none; */
    }

    /* main */
    .main{
        border-bottom:1px solid #D9D9D9;
        background-color: rgb(249, 249, 251);
    }
    .main__contents{
        min-width: 920px;
        max-width: 1280px;
        margin: 0 auto;
        padding: 30px 10px 30px 10px;
        container-name: container-mainContents;
        container-type: inline-size;
    }
    /* footer */
    .footer{
        font-size: 0.8rem;
        min-width: 920px;
        max-width: 1280px;
        margin: 20px auto 0;
        color:rgb(126, 127, 127);
    }
    .footer select{
        color:rgb(49, 51, 194);
    }
    .footer__contents {
        position: relative;
        margin: 20px auto;
        padding: 0 5px;
    }
    .footer__contents address{
        margin: 15px 0;
    }
    .footer__contents ul li{
        display: inline-block;
        margin-right: 20px;
    }
    .footer__contents__relatedSites {
        position: absolute;
        right:0;
        top:0;
        width: auto;
    }
    .footer__contents__relatedSites select{
        display: block;
        margin-left: auto;
        margin-bottom: 10px;
    }
    .footer__contents__relatedSites a img{
        vertical-align: middle;
        height:1.8rem;
        margin-left: 15px;
    }
    .footer__contents__relatedSites a:first-of-type img{
        vertical-align: text-top;
    }
    
}