@import url(layout.css);
@import url(common.css);
@import url(font.css);
@import url(default.css);

.visual{ /* 넓이는 알아서 들어감 안줘도 됨. */
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: url(../images/main/visual_bg.jpg)no-repeat center center /cover;
}
.visual .txt_wrap{
    color: rgba(255, 255, 255, 0.8);
    font-size: 8vw; /* 150px // vw / vh - 가변사이즈 (브라우저 넓이/높이를 기준으로 계산함 )*/
    font-weight: var(--bold-weight);
}

.visual .txt_wrap{
    transform: translateY(0);
    animation-name: visual_txt;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition-delay: 1.8s;
    opacity: 1;
}
@keyframes visual_txt {
    0%{ transform: translateY(100%); }
    100%{ transform: translateY(0); }
}/* keyframes */
@media screen and (max-width:1100px){
    .visual{ /* 넓이는 알아서 들어감 안줘도 됨. */
        height: 750px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0 20px;
        background: url(../images/main/visual_bg.jpg)no-repeat center center /cover;
    }
}

/* .new_rest swiper slide 적용 해야되는데....!!*/

.new_rest .tit{
    display: block;
    align-items: center;
    text-align: center;
    margin: 139px 0 150px 0;
    font-weight: var(--bold-weight);
}
.new_rest .tit p{
    font-size: var(--tit-font-size);
}
.new_rest .list {
    width: 1690px;
    margin: 0 auto;
    position: relative;
}
.new_rest .list .swiper {
    padding-top: 81px;
}
.new_rest .list ul li{
    width: 405px;
    background-position: center center;
    background-repeat: no-repeat;
}
.new_rest .list ul li.up{
    transform: translateY(-81px);
}
.new_rest .list ul li a {
    padding: 50px 33px 18px 33px;
    display: flex;
    flex-direction: column;
    height: 482px;
    color: #fff;
    position: relative;
    justify-content: space-between;
} 
.new_rest .list ul li a .photo{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.new_rest .list ul li a .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:0.5s;
}
.new_rest .list ul li a:hover .photo img{
    transform:scale3d(1.2,1.2,1);
}
.new_rest .list ul li a .list_top{
    position: relative;
    font-size: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 10px;
}
.new_rest .list ul li a .list_top::after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_79_1087' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3Crect x='0.5' y='0.5' width='23' height='23' stroke='white' stroke-opacity='0.8'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_79_1087)'%3E%3Cpath d='M12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V13H4C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H11V4C11 3.71667 11.0958 3.47917 11.2875 3.2875C11.4792 3.09583 11.7167 3 12 3C12.2833 3 12.5208 3.09583 12.7125 3.2875C12.9042 3.47917 13 3.71667 13 4V11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.2833 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H13V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21Z' fill='white' fill-opacity='0.8'/%3E%3Cpath d='M12 3.0127C12.2802 3.0127 12.5149 3.10669 12.7041 3.2959C12.8933 3.48511 12.9873 3.71981 12.9873 4V11.0127H20C20.2802 11.0127 20.5149 11.1067 20.7041 11.2959C20.8933 11.4851 20.9873 11.7198 20.9873 12C20.9873 12.2802 20.8933 12.5149 20.7041 12.7041C20.5149 12.8933 20.2802 12.9873 20 12.9873H12.9873V20C12.9873 20.2802 12.8933 20.5149 12.7041 20.7041C12.5149 20.8933 12.2802 20.9873 12 20.9873C11.7198 20.9873 11.4851 20.8933 11.2959 20.7041C11.1067 20.5149 11.0127 20.2802 11.0127 20V12.9873H4C3.71981 12.9873 3.48511 12.8933 3.2959 12.7041C3.10669 12.5149 3.0127 12.2802 3.0127 12C3.0127 11.7198 3.10669 11.4851 3.2959 11.2959C3.48511 11.1067 3.71981 11.0127 4 11.0127H11.0127V4C11.0127 3.71981 11.1067 3.48511 11.2959 3.2959C11.4851 3.10669 11.7198 3.0127 12 3.0127Z' stroke='white' stroke-opacity='0.8' stroke-width='0.025'/%3E%3C/g%3E%3C/svg%3E%0A");   
}
.new_rest .list .list_sub{
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.new_rest .list .list_sub .name{
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px 0 6px 0;
}
.new_rest .list .list_sub .name strong{
    font-size: 30px;
    position: relative;
}
.new_rest .list .list_sub .name strong::after{
    content: "";
    position: absolute;
    right: -10px;
    top: 9px;
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    height: 24px;
}
.new_rest .progress {
    display: none;
}
@media screen and (max-width:1630px) {
    .new_rest .tit{
        margin: 120px 0 0 0;
    }
    .new_rest .list ul li.up{
        transform: translateY(0);
    }
    /* 스크롤바 */
    .new_rest .progress {
        display: block;
        position: absolute;
        width: 100%;
        height: 4px;
        left: 0;
        bottom: 26px;
        top: auto;
    }
    .new_rest .list .swiper {
        padding-bottom: 81px;
    }
    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: #42181B;
    }
}
@media screen and (max-width: 768px){
    .new_rest .list {
        width: auto;
        margin: 0 20px;
    }
    .new_rest .list ul li{
        width: 320px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .new_rest .list ul li a {
        padding: 32px 26px 19px 27px;
        height: 368px;
    } 
    .new_rest .list .list_sub .name strong{
        font-size: 20px;
    }
    .new_rest .list ul li a .list_top::after{
        width: 20px;
        height: 20px;
        top: 3px;
    }
    .new_rest .list ul li a .local{
        font-size: 13px;
    }
    .new_rest .list .swiper {
        padding-top: 70px;
    }
    .new_rest .tit {
        margin: 70px 0 0 0;
    }
}

/* popular */

.popular {
    background: url(../images/main/pop_bg03.jpg) no-repeat center center / cover;
    height: 400px;
    margin: 170px 0 0 0;
}
.popular .p_txt{
    color: #fff;
    padding: 128px 0 0 60px;
}
.popular .p_txt h2{
    font-size: 50px;
    padding: 0 0 24px 0;
}
.popular .p_txt a{
    display: inline-block;
    position: relative;
    padding-right: 30px;
}
.popular .p_txt a::after{
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 91px;
    bottom: 3px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_79_1108' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_79_1108)'%3E%3Cpath d='M14.7009 14.0003L10.1509 9.45026C9.93702 9.23637 9.83008 8.96415 9.83008 8.63359C9.83008 8.30304 9.93702 8.03082 10.1509 7.81693C10.3648 7.60304 10.637 7.49609 10.9676 7.49609C11.2981 7.49609 11.5704 7.60304 11.7842 7.81693L17.1509 13.1836C17.2676 13.3003 17.3502 13.4266 17.3988 13.5628C17.4474 13.6989 17.4717 13.8447 17.4717 14.0003C17.4717 14.1558 17.4474 14.3016 17.3988 14.4378C17.3502 14.5739 17.2676 14.7003 17.1509 14.8169L11.7842 20.1836C11.5704 20.3975 11.2981 20.5044 10.9676 20.5044C10.637 20.5044 10.3648 20.3975 10.1509 20.1836C9.93702 19.9697 9.83008 19.6975 9.83008 19.3669C9.83008 19.0364 9.93702 18.7641 10.1509 18.5503L14.7009 14.0003Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");

}
.popular .p_txt a:hover::after{
    transform: translateX(5px);
    transition: 0.5s;
}
@media screen and (max-width:1100px){
    .popular {
        height: 300px;
        margin: 80px 0 0 0;
    }
    .popular .p_txt{
        color: #fff;
        padding: 90px 0 0 20px; 
    }
    .popular .p_txt h2{
        font-size: 30px;
        padding: 0 0 24px 0;
    }
    .popular .p_txt a:hover::after{
        transform: none;
    }
}

/* idea */
.idea .idea_txt{
    margin: 139px 20px 100px 20px;
    text-align: center;
}
.idea .idea_txt h2{
    font-weight: var(--bold-weight);
}
.idea .idea_txt p br{
    display: none;
}
.idea .idea_txt p{
    font-weight: var(--bold-weight);
    font-size: var(--tit-font-size);
    margin: 12px 0 38px 0;
}
.idea .idea_txt span{
    line-height: 2;
    font-family: 'S-CoreDream';
}
.idea .photo {
    position: relative;
    max-width: 50%;
    width: calc(100% - 600px);
    height: 800px;
}
.idea .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.idea .guide_box{
    display: flex;  
}
.idea .guide_box.black .g_txt{
    background-color: #1d1d1d;
    color: #fff;
}
.idea .guide_box.brown{
    flex-direction: row-reverse;
}
.idea .guide_box.brown .g_txt{
    background-color: #42181B;
    color: #fff;
}
.idea .guide_box .g_txt{
    padding: 203px 0 0 0;
    position: relative;
    width: 50%;
    min-width: 600px;
    height: 800px;
    text-align: center;
} 
.idea .guide_box .g_txt .main_txt {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 20px;
    position: relative;
}
.idea .guide_box .g_txt .main_txt h2{
    font-size: var(--tit-font-size);
    font-weight: var(--bold-weight);
    position: relative;
}   
.idea .guide_box .g_txt .main_txt h2::after{
    content: "";
    position: absolute;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    width: 415px;
    left: 0;
    bottom: 10px;
}
.idea .guide_box .g_txt .sub_txt h3{
    font-size: 30px;
    font-weight: var(--bold-weight);
    padding: 45px 0 40px 0;
}
.idea .guide_box .g_txt .sub_txt p{
    line-height: 2;
}
.idea .guide_box .g_txt a{
    display: block;
    position: absolute;
    right: 110px;
    bottom: 64px;
    font-size: 20px;
    padding: 0 30px 0 0;
}
.idea .guide_box .g_txt a::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_79_1108' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_79_1108)'%3E%3Cpath d='M14.7009 14.0003L10.1509 9.45026C9.93702 9.23637 9.83008 8.96415 9.83008 8.63359C9.83008 8.30304 9.93702 8.03082 10.1509 7.81693C10.3648 7.60304 10.637 7.49609 10.9676 7.49609C11.2981 7.49609 11.5704 7.60304 11.7842 7.81693L17.1509 13.1836C17.2676 13.3003 17.3502 13.4266 17.3988 13.5628C17.4474 13.6989 17.4717 13.8447 17.4717 14.0003C17.4717 14.1558 17.4474 14.3016 17.3988 14.4378C17.3502 14.5739 17.2676 14.7003 17.1509 14.8169L11.7842 20.1836C11.5704 20.3975 11.2981 20.5044 10.9676 20.5044C10.637 20.5044 10.3648 20.3975 10.1509 20.1836C9.93702 19.9697 9.83008 19.6975 9.83008 19.3669C9.83008 19.0364 9.93702 18.7641 10.1509 18.5503L14.7009 14.0003Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
@media screen and (max-width:768px){
    .idea .idea_txt{
        margin: 70px 20px 54px 20px;
    }
    .idea .idea_txt p br{
        display: block;
    }
    .idea .idea_txt p{
        margin: 12px 0 38px 0;
    }
    .idea .idea_txt span{
        display: none;
    }
    .idea .photo {
        position: relative;
        width: auto;
        height: 218px;
        max-width: 100%;
    }

    .idea .guide_box{
        display: block;  
    }
    .idea .guide_box .g_txt{
        padding: 21px 0 39px 20px;
        width: 100%;
        min-width: 0;
        height: auto;
        text-align: left;
    } 
    .idea .guide_box .g_txt .main_txt {
        display: block;
    }
    .idea .guide_box .g_txt .main_txt h2{
        font-size: 20px;
        display: inline-block;
    }   
    .idea .guide_box .g_txt .main_txt h2::after {
        width: 163px;
        left: 0;
        bottom: 4px;
    }
    .new_rest .list .list_sub .name strong::after {
        top: 5px;
        height: 17px;
    }
    .idea .guide_box .g_txt .main_txt p {
        display: none;
    }
    .idea .guide_box .g_txt .sub_txt h3{
        font-size: 20px;
        font-weight: 400;
        padding: 16px 0 40px 0;
    }
    .idea .guide_box .g_txt .sub_txt p{
        display: none;
    }
    .idea .guide_box .g_txt a{
        right: 46px;
        bottom: 20px;
        font-size: 16px;
    }
    .idea .guide_box .g_txt a::after{
        width: 24px;
        height: 24px;
    }
}

/* guide */
.guide {
    margin: 139px 24px 68px 24px;
}
.guide .g_txt{
    text-align: center;
}
.guide .g_txt h2{
    display: inline-block;
    font-size: var(--tit-font-size);
    font-weight: var(--bold-weight);
    position: relative;
}
.guide .g_txt h2::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 11px;
    width: 100%;
    height: 1px;
    background-color: #1d1d1d;
}
.guide .g_txt p{
    margin: 32px 0 70px 0;
}
.guide .g_group .g_photo .g_list h3{
    margin-top: 20px;
}
.guide .g_group{
    display: flex;
    gap: 24px;
}
.guide .g_group .g_photo{
    width: 25%;
}
.guide .g_group .g_photo02{
    width: 50%;
}
.guide .g_group .g_photo a{
    display: block;
    overflow: hidden;
    width: 100%;
    height: 437px;
    border-radius: 10px;
}
.guide .g_group .g_photo02 a{
    display: block;
    overflow: hidden;
    width: 100%;
    height: 542px;
    border-radius: 10px;
}
.guide .g_group .g_photo a img,
.guide .g_group .g_photo02 a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.guide .g_group .g_photo a:hover img,
.guide .g_group .g_photo02 a:hover img{
    transform:scale3d(1.2,1.2,1);
}
.guide .g_group .g_list h3,
.guide .g_group .g_list02 h3{
    font-size: var(--tit-font-size);
    font-weight: var(--bold-weight);
}
.guide .g_group .g_photo02{
    position: relative;
}
.guide .g_group .g_photo02 .g_list02 {
    position: absolute;
    left: 50px;
    top: 50px;
    color: #fff;
}   
@media screen and (max-width:1380px){
    .guide .g_group .g_photo02 .g_list02 {
        left: 30px;
        top: 30px;
    }
}
@media screen and (max-width:768px){
    .guide {
        margin: 139px 20px 110px 20px;
    }
    .guide .g_group{
        gap: 20px;
        flex-direction: column;
    }
    .guide .g_txt p{
        margin: 20px 0 50px 0;
    }
    .guide .g_group .g_photo .g_list h3{
        margin-top: 0;
    }
    .guide .g_group .g_photo02,
    .guide .g_group .g_photo{
        width: 100%;
    }
    .guide .g_group .g_photo02 a ,
    .guide .g_group .g_photo a {
        height: 182px;
    }
    .guide .g_group .g_photo a:hover img,
    .guide .g_group .g_photo02 a:hover img{
        transform: none;
    }
    .guide .g_group .g_list{
        position: absolute;
        left: 20px;
        top: 20px;
        color: #fff;
    }
    .guide .g_group .g_photo02 .g_list02 {
        left: 20px;
        top: 20px;
    }  
}

/* magazine */
.magazine{
    background: url(../images/main/Issue01.jpg) no-repeat center center /cover;
    padding: 109px 0 106px 50px;
    margin-top: 68px;
    position: relative;
}
.magazine .magazine_txt{
    margin: 0 0 53px 0;
}
.magazine .magazine_txt h2{ 
    color: #fff;
    font-size: var(--tit-font-size);
    font-weight: var(--bold-weight);
    position: relative;
}
.magazine .magazine_txt h2::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    border-bottom: 1px solid #fff;
    width: 365px;
}
.magazine .list{
    color: #fff;
}
.magazine .list ul li{
    width: 288px;
}
.magazine .list ul li a{
    display: block;
}
.magazine .list ul li a .photo{
    overflow: hidden;
    border-radius: 10px;
    height: 381px;
}
.magazine .list ul li a .photo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.magazine .list ul li a h3{
    padding-top: 10px;
}
.magazine .list ul li a h3 span{
    position: relative;
}
.magazine .list ul li a h3 span::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}
.magazine .list ul li a strong{
    display: block;
    padding: 10px 0;
    font-size: 20px;
}
/* 기존 스타일에 추가 */
.magazine .scrollbar{
    margin: 32px 0 0 0;
}
.magazine .scrollbar .swiper-scrollbar {
    position: relative;
    left: auto;
    bottom: auto;
    width: calc(100% - 50px);  
    height: 2px;  
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
.magazine .scrollbar .swiper-scrollbar-drag {
    background-color: #fff;
}
@media screen and (max-width:768px){
    .magazine{
        padding: 70px 0 65px 20px;
    }
    .magazine .magazine_txt{
        text-align: left;
    }
    .magazine .magazine_txt h2{ 
        font-size: 30px;
    }
    .magazine .magazine_txt h2::after{
        bottom: 2px;
        width: 225px;
    }
    .magazine .list ul li{
        width: 207px;
    }
    .magazine .list ul li a .photo{
        height: 274px;
        border-radius: 5px;
    }
    .magazine .list ul li a strong{
        padding: 10px 0;
        font-size: 16px;
    }
    .magazine  .scrollbar {
        display: none;
    }
}