@charset "utf-8";

/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
a{
    text-decoration: none;
}
ul,li{
    list-style: none;
}
html{
    height: 100%;
}
body{
    background-color: var(--html-color);
    height: 100%;
    font-size: 18px;
    font-family: pretendard-medium;
    font-weight: 400;
}
.wrap{
    position: relative;
    top:0;
    width: 100%;
    height: 100%;
    transition: wrap;
    height: 100%;
    /* overflow-x: hidden; */

}
.container{
    position: relative;
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.mo{
    display: none;
}
.title-box{
    margin: 0 auto;
    padding: 0 150px;
    max-width: 1920px;
    height: 115px;
    background-color:var(--brown);
    border-top-right-radius: 35px;
    border-top-left-radius: 35px;
  }
:root{
    --black:#000;
    --white:#fff;
    --red:#C40000;
    --brown:#3D3636;
    --html-color:#FFFEFB;
    --gap: 40px;               /* 이미지 사이 여백 0 */
    --duration: 20s;        /* 스크롤 속도 */
   /*  --tile-height: 500px; */  /* 타일 높이 */
}
/* aside*/
.btn-wr{
    position: fixed;
    bottom: 65px;
    right: 25px;
    z-index: 100;
}
.btn-wr .gotop-btn{
}
.btn-wr .gotop-btn .gotop{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: var(--red);
    text-align: center;
    position: relative;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: normal;
    display: none;
   /*  margin-left: 20px; */
}
.btn-wr .gotop-btn .gotop img{

}
.btn-wr .gotop-btn .godown{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: var(--black);
    text-align: center;
    position: relative;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: normal;
    /* margin-left: 20px; */
    /* display: none; */
}
.btn-wr .gotop-btn .godown img{
    transform: translate(-55%, -50%) rotateZ(180deg);
    position: absolute;
    top: 50%;
    left: 50%;

}

.line{
    display:block;
    height:6px;
    width:70px;
    background:#3c3c3c;
    /* border-radius:3px; */
    position:absolute;
  }
  .line:first-of-type::after{
    content:"";
    position:absolute;
    right:63px;  /* 오른쪽으로 꼬리 */
    top: 20%;
    transform:translateY(-50%);
    width:70px;
    height:2px;
    background:#3c3c3c;
    opacity:.7;
  }
  /* 오른쪽 라인: 꼬리가 왼쪽으로 */
  .line:last-of-type::after{
    content:"";
    position:absolute;
    left:63px;   /* 왼쪽으로 꼬리 */
    top: 20%;
    transform:translateY(-50%);
    width:70px;
    height:2px;
    background:#3c3c3c;
    opacity:.7;
  }
  .line01{
    position: absolute;
    left: 63px;
    top: 0;
}
  .line02{
    position: absolute;
    right: 63px;
    top:0;
  }

@keyframes topdown {
    0% {
      transform: translateY(0%);
    }
    50% {
        transform: translateY(-10%);
      }
    100% {
      transform: translateY(0%);
    }
  }