@charset "utf-8";


.pcbr{display: block;}
.mbr{ display: none;}

/* header */
header{ width: 80px; height: 100vh; display: flex; justify-content: space-between; flex-direction: column; align-items: center; padding: 30px 0; position: fixed; top: 0; left: 0; z-index: 99999; transition: all 0.3s ease-in-out; }
.headLogo h1{ position: relative; z-index: 9999;}
.headLogo h1 img{ width: 36px; filter: invert(1);}

.hamBtn{ position: relative; top: 0; width: 30px; background-color: transparent; border: none; cursor: pointer; z-index: 999; }
.hamBtn::before, .hamBtn::after, .hamBtn div{ content: ''; display: block; height: 2px; margin: 8px 0; transition: all 0.3s ease-in-out; background-color: #F0F2F5;}
.hamBtnOn .hamBtn::before{ transform: translateY(9px) rotate(135deg); background-color: #2E3A3E;}
.hamBtnOn .hamBtn::after{ transform: translateY(-11px) rotate(-135deg); background-color: #2E3A3E; width: 100%;}
.hamBtnOn .hamBtn div{ transform: scale(0); opacity: 0;}

header:hover{ background: #F0F2F5;}
header:hover .headLogo h1 img{ filter: invert(0);}
header:hover .hamBtn::before, header:hover .hamBtn::after, header:hover .hamBtn div{ background: #2E3A3E;}
header:hover .scrollDown p{ color: #2E3A3E;}
header:hover .scrollDown .scrArrow{ background: #2E3A3E;}
header:hover .scrollDown .scrArrow::before{ background: #2E3A3E;}
/* header:hover .scrollDown{ display: none;} */

/* header.scroll{ background: #F0F2F5;} */
header.scroll .headLogo h1 img{ filter: invert(0);}
header.scroll .hamBtn::before, .scroll .hamBtn::after, .scroll .hamBtn div{ background: #2E3A3E;}
header.hamBtnOn{ background: #F0F2F5; }
header.scroll .scrollDown p{ color: #2E3A3E;}
header.scroll .scrollDown .scrArrow{ background: #2E3A3E;}
header.scroll .scrollDown .scrArrow::before{ background: #2E3A3E;}

header.scroll .subMenu ul{ overflow: hidden; min-height: 0; opacity: 0; transition: opacity 0.3s ease-in-out;}
header.scroll .subMenu ul li{ margin: 8px 0;}
header.scroll .subMenu ul li a{ font-weight: 400; font-size: 14px; color: #F0F2F5;}

/* rightmenu */
.rightMenu{ width: 100%; display: none; position: absolute;}
.rightMenu .menuIn{ width: 20%; height: 100vh; position: fixed; top: 0; left: -100%; background-color: #2E3A3E; display: flex; flex-direction: column; align-items: center; transition: left 0.5s ease-in-out; z-index: 99;}
.menuIn > ul{ width: 60%;  display: flex; justify-content: space-between; flex-direction: column; align-items: center; position:absolute; top: 50%; transform: translateY(-50%); }
.menuIn > ul > li{ width: 100%; margin: 10px 0; text-align: center;  cursor: pointer;}
.menuIn > ul > li:nth-child(2) > a::after{ content: '+';  position: absolute; top: 50%; right: 0px; transform: translateY(-50%);}
.menuIn > ul > li:nth-child(3) > a::after{ content: '+';  position: absolute; top: 0; right: 0px;}
.menuIn > ul > li:nth-child(4) > a::after{ content: '+';  position: absolute; top: 0; right: 0px;}
.menuIn > ul > li:nth-child(5) > a::after{ content: '+';  position: absolute; top: 0; right: 0px;}
.menuIn > ul > li.open > a::after{ content: '+'; transform: rotate(45deg); top: 0; }
.menuIn > ul > li:first-child.on > a::after{content: '';}
.menuIn > ul > li:last-child.on > a::after{content: '';}
.menuIn > ul > li > .subMenu{ overflow: hidden; max-height: 0; transition: max-height 0.35s ease-in-out;}
.menuIn > ul > li > .subMenu > *{ overflow: hidden; min-height: 0;}
.menuIn > ul > li.open .subMenu{ max-height: 350px;}
.menuIn > ul > li.open .subMenu ul{ opacity: 1; transition: opacity 0.3s ease-in-out 0.1s;}
.menuIn > ul > li > a{ width: 100%; font-weight: 600; font-size: 16px; color: #F0F2F5; position: relative; display: block;}
.subMenu ul{ overflow: hidden; min-height: 0; opacity: 0; transition: opacity 0.3s ease-in-out;}
.subMenu ul li{ margin: 8px 0;}
.subMenu ul li a{ font-weight: 400; font-size: 14px; color: #F0F2F5;}

.scrollDown{ height: 7vh; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.scrollDown p{ writing-mode: vertical-lr; color: #F0F2F5; padding: 0 0 10px;}
.scrollDown .scrArrow{ display: flex; width: 1px; height: 30px; background: #F0F2F5; position: relative; animation: rolldown 0.45s linear 0s infinite alternate; padding-top: 0; }
.scrollDown .scrArrow::before{ content: ''; display: block; width: 10px; border-top: 1px solid #F0F2F5; transform: rotate(145deg); transform-origin: right bottom; position: absolute; right: 0; bottom: 0; }

@keyframes rolldown {
  0% {margin-bottom: 0px;}
  100% {margin-bottom: 10px;}
}

/* hamBtnOn */
.hamBtnOn .rightMenu{ display: flex; }
.hamBtnOn .rightMenu .menuIn{ left: 80px;}
.hamBtnOn .headLogo h1 img{ filter: invert(1);}
.hamBtnOn .scrollDown p{ color: #2E3A3E;}
.hamBtnOn .scrollDown .scrArrow{ background: #2E3A3E;}
.hamBtnOn .scrollDown .scrArrow::before{ background: #2E3A3E;}

/* resTxtBtn */
#resTxtBtn{ position: relative; z-index: 99999;}
#resTxtBtn a{ display: block; position: fixed; top: 30px; right: 30px; font-family: "Vollkorn", serif; font-size: 14px; color: #F0F2F5;  padding: 10px 20px; }
#resTxtBtn.scroll a{background: #2E3A3E; }

/* footer */
footer{ width: calc(100% - 80px); margin-left: auto; background: rgba(46, 58, 62, 0.05);}
#footIn{ padding: 40px 30px; display: flex; justify-content: space-between; align-items: flex-end;}
.footHalf .footLogo img{ width: 120px;}
.footHalf .footLeftTxt{ margin-top: 30px;}
.footHalf .footLeftTxt p{ font-size: 18px; }
.footHalf .footRightTxt{ display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column;}
.footHalf .footRightTxt p{ text-align: right;}
.footHalf .footRightTxt img{ width: 24px; margin: 10px 0;}

/* 반응형 */
@media all and ( max-width: 1920px){
    .scrollDown{ height: 9vh;}
}
@media all and (max-width: 1024px){
    .rightMenu .menuIn{ width: 30%;}
}

@media all and (max-width: 768px){
    .rightMenu .menuIn{ width: 100%;}
    .hamBtnOn .rightMenu .menuIn{ width: calc(100% - 80px);}
    .headLogo h1 img{ filter: invert(0);}
    .hamBtn::before, .hamBtn::after, .hamBtn div{ background-color: #2E3A3E;}
    .scrollDown p{ color: #2E3A3E;}
    .scrollDown .scrArrow{ background: #2E3A3E;}
    .scrollDown .scrArrow::before{ background: #2E3A3E;}

    #resTxtBtn a{ top: 20px; right: 20px;}

    #footIn{ flex-direction: column; align-items: flex-start; padding: 40px;}
    .footHalf .footLeftTxt{ margin-top: 10px;}
    .footHalf .footLeftTxt p{ font-size: 14px;}
    .footHalf .footRightTxt{ align-items: flex-start;}
    .footHalf .footRightTxt p{ text-align: left;}
}
@media all and (max-width: 520px){
    .pcbr{ display: none;}
    header{ width: 60px;}
    .hamBtnOn .rightMenu .menuIn{ width: calc(100% - 60px); left: 60px; z-index: 999999;}
    #header.hamBtnOn #resTxtBtn.scroll a{ color: #F0F2F5; }

    #resTxtBtn a{ top: 0; right: 0;}

    footer{ width: calc( 100% - 60px );}
    #footIn{ padding: 40px 20px;}
    .footHalf .footLogo img{ width: 80px;}
    .footHalf .footLeftTxt p{ font-size: 12px;}
    .footHalf .footRightTxt p{ font-size: 12px;}
    .footHalf .footRightTxt p a{ font-size: 12px;}
}