@charset "utf-8";



.subHeadImage{
    margin-bottom: 80px;
    @media screen and (max-width: 870px) {
        margin-bottom: 30px;
     }
    img{
        width: 100%;
    }
}


.service{
    position: relative;
    .serviceHead{
        margin-bottom: 90px;
            text-align: center;
            overflow: hidden;
            @media screen and (max-width: 1315px) {
                margin-bottom: 135px;
             }
        span{
            width: 100%;
            display: block;
            border-bottom: 5px solid #d9d9d9;
        }
        h3{
            font-size: 36px;
            font-weight: 700;
        }
    }

    .serviceBody{
        overflow: hidden;
                margin: 0 auto;
                width: 1300px;
                @media screen and (max-width: 1315px) {
                    overflow: visible;
                    width: auto;
                 }
        .bodyTop{
            display: flex;
           justify-content: space-around;
            align-items: center;
             height: 390px;
             @media screen and (max-width: 1315px) {
                flex-direction: column;
             }
             @media screen and (max-width:400px) {
                height: 375px;
            }

            .imgLeft{
                position: relative; /* 부모 요소 기준 */
                 width: 45%;
                 @media screen and (max-width: 870px) {
                    width: auto;
                 }
                ul{
                    position: relative; /* 부모 기준 설정 */
                    width: 620px;
                          @media screen and (max-width:635px) {
                            width: 100%;
                              }
                    li{
                        position: absolute; /* 겹쳐지도록 설정 */
                        top: -195px;
                        left: 0;
                        visibility: hidden;
                        transition: opacity 0.5s ease-in-out;
                        @media screen and (max-width:635px) {
                            width: 480px;
                            left: -243px;
                        }
                        @media screen and (max-width:480px) {
                            left: 50%;
                            transform: translateX(-50%);
                            width: 100vw;
                            max-width: 480px;
                        }

                         img{
                            width: 620px;
                            @media screen and (max-width:635px) {
                                width: 100%;
                            }
                   
                }
                    }
                }
               
            }
            .textRight{
                position: relative; /* 부모 요소 기준 */
               width: 55%;
                 @media screen and (max-width:1315px) {
                        text-align: center;
                        width: 620px;
                    }
                    @media screen and (max-width:635px) {
                  width: 100%;
                    }
                ul{
                    position: relative; /* 부모 기준 설정 */
                    li{
                        position: absolute; /* 겹쳐지도록 설정 */
                        top: -100px;
                        left: 160px;
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity 0.5s ease-in-out;
                       &:nth-child(1){
                        opacity: 1;
                        visibility: visible;
                       }

                       @media screen and (max-width: 1315px) {
                        top: 45px;
                        left: 88px;
                     }
                     @media screen and (max-width:635px) {
                        top: -50px;
                        left: 10px;
                     }
                     @media screen and (max-width:480px) {
                        top: -80px;
                    }
                    @media screen and (max-width:400px) {
                        top: -120px;
                    }
                      
                         h4{
                    font-size: 32px;
                    font-weight: 700;
                    margin-bottom: 5px;
                    @media screen and (max-width:480px) {
                        font-size: 30px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                        }
                        p{
                            font-size: 20px;
                            color: #181B1E;
                            line-height: 27px; 

                            @media screen and (max-width:480px) {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 5;
                            -webkit-box-orient: vertical;
                            }
                        }
                    }
                }
                       
            }
        }

         .bodyBottom{
        .textArea{
            display: flex;
            gap: 10px;
            justify-content: space-between;

             @media screen and (max-width: 1416px) {
                overflow: auto;
                white-space: nowrap;

                &::-webkit-scrollbar {
                    display: block;
                }
             } 

            ul{
                cursor: pointer;
                color: #fff;
                position: relative;
                margin-top: 84px;
                text-align: center;

                @media screen and (max-width: 1315px) {
                    margin-top: 102px;
                  }
                  @media screen and (max-width: 635px) {
                    margin-top: 20px;
                  }
                  @media screen and (max-width:460px) {
                    margin-top: 0;
                }
               
               

                &::before{
                    position: absolute;
                    content: '';
                    border: 1px solid #E3E5E2;
                    height: 50px;
                    top: 17px;
                    right: -47px;
                    @media screen and (max-width: 1315px) {
                        border: none;
                      }
                }
                
                li{
                    @media screen and (max-width: 1315px) {
                        background-color: #8E96AD;
                        width: 170px;
                        height: 60px;
                      }
                    &:nth-child(1){
                        font-size: 32px;
                        
                    }
                    &:nth-child(2){
                        font-size: 20px;
                        
                    }
                }
            }
        }
       

    }

    }

    .bodyBottomBg{
        position: absolute;
        bottom: -86px;
        background-color: #8E96AD;
        width: 100%;
        height: 408px;
        z-index: -1;
        @media screen and (max-width: 1315px) {
           background-color: transparent;
         }
        
    }

}
/* ////////////////////////////// */
.inner{
    width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    @media screen and (max-width: 1315px) {
        width: auto;
      }
}

.reserve{
    margin-top: 170px;
    margin-bottom: 63px;
    text-align: center;
    @media screen and (max-width: 1315px) {
        margin-top: 80px;
        margin-bottom: 40px;
      }
    

    h3{
        font-size: 32px;
        font-weight: 700;
    }
    
}
 .reserveBody{
        display: flex;
        gap: 96px;

         @media screen and (max-width: 1315px) {
            text-align: center;
            display: block;
          } 
          .calendar{
            img{
                @media screen and (max-width: 635px) {
                    width: 100%;
                  }
    
            }
          }
    }

        .calendarService{
            display: flex;
            flex-direction: column;
            
         @media screen and (max-width: 1315px) {
            text-align: center;
            display: block;
            margin-top: 20px;
          } 
            select{
                width: 520px;
                height: 90px;
                padding-left: 10px;
                font-size: 16px;
                color: #1D1D1B;
                @media screen and (max-width: 635px) {
                    width: auto;
                    height: auto;
                  }
                  @media screen and (max-width: 635px) {
                    width: 300px;
                    height: 40px;
                  }
                  }
    
            }
            .area{
                cursor: pointer;
                margin-bottom: 32px;
            }
            .time{
                margin-bottom: 190px;
                cursor: pointer;
                
        @media screen and (max-width: 1315px) {
            margin-bottom: 32px;
          }
            }
            button{
                width: 520px;
                height: 90px;
                font-size: 20px;
                background: #181B1E;
                color: #fff;
                margin-bottom: 90px;
                @media screen and (max-width: 635px) {
                    width: 80%;
                    margin-bottom: 80px;
                  }
    
            }
        

    

/* /////////////////////////////////////////////// */
.tax{

    .taxHead{
    margin-bottom: 90px;
        text-align: center;
        overflow: hidden;
        @media screen and (max-width:635px) {
            margin-bottom: 80px;
          }
    span{
        width: 100%;
        display: block;
        border-bottom: 5px solid #d9d9d9;
    }
    h3{
        font-size: 36px;
        font-weight: 700;
    }
}

.taxBody{
    .taxBodyTop{
        text-align: center;
        p{
            font-size: 20px;
            strong{
                font-size: 32px;
                font-weight: 700;
                @media screen and (max-width:635px) {
                    font-size: 26px;
                  }
            }
        }
    }
}

.taxMain{
    display: flex;
    justify-content: space-around;
    gap: 90px;
    @media screen and (max-width:635px) {
       display: block;
     }

    .taxMainButton{
        width: calc(50% - 45px);
        cursor: pointer;
        @media screen and (max-width:635px) {
            margin: 0 auto;
            width: 70%;
          }
        ul{
            margin-top: 177px;
            display: flex;
            text-align: center;
            @media screen and (max-width:635px) {
                margin-top: 50px;
              }
            li{
                display: flex; 
                align-items: center; 
                justify-content: center; 
                text-align: center; 
                font-size: 32px;
                border: 1px solid #000;
                width: 300px;
                height: 180px;
                @media screen and (max-width:635px) {
                    font-size: 24px;
                    width: 200px;
                height: 100px;
                  }
                
                &.active{
                    background: #181B1E;
                    color: #fff;
                }
            }
        }
    }
    .taxMainText{
        width: calc(50% - 45px);
        margin-top: 117px;

        @media screen and (max-width:635px) {
            margin: 0 auto;
            margin-top: 50px;
            width: 100%;
            padding: 0 10px 0 10px;
          }

        .text{

               ul{
                h3{
                    font-weight: 700;
                    font-size: 24px;
                    margin-bottom: 10px;
                }
             
             li{
                font-size: 16px;
                color: #181B1E;
             }
    
            &.line{
            border: 1px solid #E3E5E2;
            width: 82%;
            margin: 25px 0;
            @media screen and (max-width:635px) {
                width: 100%;
              }
        }  
       
      
        }
        }
        .branch{
            display: flex;
            margin-top: 51px;
            @media screen and (max-width:425px) {
                display: block;
              }

              ul.off{
            display: none;
        }
        ul.second{
            margin-top: 45px;
            @media screen and (max-width:425px) {
                margin-top: 0;
              }
        }
        }
    }
}


}