/* header */
.header .header-wrapper{ border-bottom: 1px solid rgba(74,74,72,.3);}
.header .logo-wrap img.logo-normal{display: none;}
.header .logo-wrap img.logo-scroll{display: inline-block;}
.header + .header-btn{ top: 0; opacity: 1; pointer-events: inherit;}
.header + .header-btn.active{top: 120px;}
.header {position: fixed; border-bottom: unset; transition: tranform 0.3s;  top: 0;}
.header:after{height: 100%; background-color: rgba(255,255,255,1); transform: scaleY(1); z-index: -1;}
.header .menu-icon__line{ background-color: #4A4A48;}
.header .header-icon > a.reser-btn{ display: inline-block; border: 1px solid rgba(112,112,112,.5); color: #707070; }
.header .header-icon > a i{ color: #707070;}
body.nav-active .header .header-wrapper{ border-bottom: 1px solid rgba(255,255,255,.3);}
body.nav-active .header:after{height: 100%; background-color: rgba(112,112,112,1); transform: scaleY(1); z-index: -1;}
body.nav-active .header .logo-wrap img.logo-normal{display: inline-block;}
body.nav-active .header .logo-wrap img.logo-scroll{display: none;}
body.nav-active .header .header-icon > a.reser-btn{ display: inline-block; border: 1px solid #fff; background-color: transparent; color: #fff; }
body.nav-active .header .header-icon > a i{ color: #fff;}
body.nav-active .header .menu-icon__line{ background-color: #fff; }
.cm-header .op_show{ opacity: 1; transition: .5s; animation: unset;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  .header .header-wrapper{ border-bottom: 0;}
  body.nav-active .header .header-wrapper{ border-bottom: 0;}
  body.nav-active .header.scroll .header-wrapper{ border-bottom: 0;}
  body.nav-active .header{ border-bottom: 1px solid rgba(255,255,255,.3);}
  body.nav-active .header.scroll{ border-bottom: 1px solid rgba(255,255,255,.3);}
}


#section01{ padding: 120px 0; position: relative; text-align: center; }
#section01 .flex-wrap{ display: flex; width: 100%; justify-content: center; align-items: center;}
#section01 .flex-wrap .wrap{ display: block; width: 380px; border-left: 1px solid rgba(174,173,173,.7); opacity: .4; transition: .3s;}
#section01 .flex-wrap .wrap:hover{ opacity: 1;}
#section01 .flex-wrap .wrap.active{ opacity: 1;}
#section01 .flex-wrap .wrap:first-child{ border-left: 0;}
#section01 .flex-wrap .wrap svg{ margin-bottom: 20px;}
#section01 .flex-wrap .wrap p{ line-height: 20px;}
#section01 .svg-ani{
    stroke-dasharray: 500px;    
    stroke-dashoffset: 500; 
}
#section01 .svg-ani.active{
    animation: ani 5s linear normal 1 forwards;
    animation-delay: 2s;
}
@keyframes ani {
    0% {
      stroke-dashoffset: 500px;  
    }
    100% {
      stroke-dashoffset: 0;
    }
}

#section01 .content-wrap .con .img-wrap{ width: 100%; height: 721px; background-size: cover; background-repeat: no-repeat; background-position: center;}
#section01 .content-wrap .con .text-wrap{ width: 100%; padding-top: 120px; display: flex; justify-content: flex-start; text-align: left; }
#section01 .content-wrap .con .text-wrap .tit{ width: 350px;}
#section01 .content-wrap .con .text-wrap .content{ width: calc(100% - 350px); line-height: 20px;}
#section01 .content-wrap .con .text-wrap h3{ padding-right: 10px; display: inline-block;}
#section01 .content-wrap .con .text-wrap p{ display: inline-block;}
.tab-con .con{ display: none;}
.tab-con .con.active{ display: block;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ padding: 50px 0; }
    #section01 .flex-wrap .wrap{ width: 100%; border-left: 0; padding-top: 40px;}
    #section01 .flex-wrap .wrap svg{ margin-bottom: 15px; height: 56px;}
    #section01 .flex-wrap .wrap:nth-child(2) svg,#section01 .flex-wrap .wrap:nth-child(3) svg{ transform: scale(0.7);}
    #section01 .flex-wrap .wrap p{ line-height: 20px;}
    #section01 .content-wrap .con .img-wrap{height: 54.27vw; }
    #section01 .content-wrap .con .text-wrap{ padding-top: 35px; flex-direction: column; }
    #section01 .content-wrap .con .text-wrap .tit{ width: 100%;}
    #section01 .content-wrap .con .text-wrap .content{ width:100%;}
    #section01 .content-wrap .con .text-wrap h3{ padding-right: 20px; }
}