/* header */
header{ z-index: 1000; transition: .3s; background:#fff; box-shadow: 2px 0 6px rgba(0,0,0,.2); height: 80px; border-bottom: 1px solid #ddd;}
header h1.logo img{opacity: 0;}
header h1.logo img.scroll{ opacity: 1;}
header .wrap1740 a p{ color: #333;}
header .wrap1740 #reser-btn{ border: 1px solid #333; transition: .3s; color: #333;}
/* =================== 1460px =================== */
@media (max-width: 1460px) {
    header{ height: 130px;}
    header .wrap1740 .flex-wrap{ padding-top: 10px;}
    header.scrolldown{ top: -130px;}
    header.scroll{ height: 130px;}
    header h1.logo{ order: 0;}
    header .gnb{ order: 2; width: 100%; text-align: center;}
    header #reser-btn{ order: 1; }
    header .subnavbg.active{ top: 130px; opacity: 1;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{height: 50px; transition: .3s;}
    header .wrap1740 .flex-wrap{ padding-top:0;}
    header.scrolldown{ top: -50px;}
    header.scroll{ height: 50px;}
    header #panelbtn span{background-color: #333;} 
    header #m-reser-btn{ color: #333;}
    header:hover{ box-shadow: 2px 0 6px rgba(0,0,0,.2); border-bottom: 1px solid #ddd; background:#fff; }
    header:hover h1.logo img{opacity: 0;}
    header:hover h1.logo img.scroll{ opacity: 1;}
    header:hover .wrap1740 a p{ color: #333;}
    header:hover .wrap1740 #reser-btn{ border: 1px solid #333; transition: .3s; color: #333;}
}

#section01{ padding: 200px 0 180px;}
#section01 .wrap1740 > h3{ width: 100%; font-size: 24px; line-height: 36px; padding-bottom: 40px; text-align: center;}
#section01 .content > .flex-wrap{ margin-bottom: 20px;}
#section01 .content > .flex-wrap .bgi{ height: 482px; position: relative; overflow: hidden;} 
#section01 .content > .flex-wrap:hover .img{ transform: scale(1.1);}
#section01 .content > .flex-wrap .text-wrap{ height: 482px; padding-left: 84px; position: relative; flex-direction: column; justify-content: center; align-items: flex-start;} 
#section01 .content .text-wrap h3{ font-size: 40px; padding-bottom: 40px; line-height: 56px;}
#section01 .content .text-wrap div.text{ font-size: 15px; line-height: 25px; font-weight: 300; word-break: keep-all;}
#section01 .content .text-wrap span{ font-size: 20px; position: absolute; right: 30px; bottom: 30px; transition: .5s;}
#section01 .content > .flex-wrap:hover .text-wrap span{ color: #F29600;}
/* =================== 1780px =================== */
@media (max-width: 1780px) {
    #section01 .content > .flex-wrap .bgi{ height: 27.08vw; position: relative; overflow: hidden;}
    #section01 .content > .flex-wrap .text-wrap{ height: 27.08vw; padding-left: 4.72vw; position: relative; flex-direction: column; justify-content: center; align-items: flex-start;} 
    #section01 .content .text-wrap h3{ font-size: 2.25vw; padding-bottom: 2.25vw; line-height: 3.15vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ padding: 40px 0 140px;}
    #section01 .wrap1740{ padding: 0;}
    #section01 .content > .flex-wrap{ margin-bottom: 60px;}
    #section01 .content > .flex-wrap .bgi{ width: calc(100% - 30px); height: 68.53vw; position: relative; overflow: hidden;} 
    #section01 .content > .flex-wrap:nth-child(2n-1) .bgi{ margin-right: 30px;}
    #section01 .content > .flex-wrap:nth-child(2n) .bgi{ margin-left: 30px;}
    #section01 .content > .flex-wrap .text-wrap{ height: auto; padding-left: 84px; position: relative; flex-direction: column; justify-content: center; align-items: flex-start;} 
    #section01 .content > .flex-wrap:nth-child(2n-1) .text-wrap{ padding: 20px 15px 0 15px;}
    #section01 .content > .flex-wrap:nth-child(2n) .text-wrap{ padding: 20px 15px 0 30px;}
    #section01 .content .text-wrap h3{ font-size: 24px; padding-bottom: 20px; line-height: 36px;}
    #section01 .content .text-wrap div.text{ font-size: 14px; line-height: 24px; padding-bottom: 74px;}
    #section01 .content .text-wrap span{ font-size: 14px; position: absolute; right: 15px; bottom: 0;  }
}