@charset "UTF-8";
.header_section {
     position: fixed;
     width: 100vw;
     height: auto;
     top: 0;
     left: 0;
     background-color: #FFFFFF;
     z-index: 6;
}

.header_inner_whole {
     width: calc(100% - 40px);
     height: auto;
     margin: 0 auto;
     padding: 0 20px;
}

.header_top_whole {
     position: relative;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding: 15px 0;
}

.header_logo {
     display: block;
     min-width: 118px;
     width: 118px;
     max-width: 118px;
     height: 40px;
}

.header_logo span {
     display: block;
     width: auto;
     height: 40px;
     background: url('/img/logo/reading_logo_bk.svg') no-repeat;
     background-size: contain;
}


.header_side_whole {
     position: fixed;
     width: 100%;
     height: 100vh;
     padding: 25px 20px;
     background-color: #FFFFFF;
     top: 0;
}

.header_side_whole.toggle_on {
     left: 0;
     transition: all .6s;
     box-sizing: border-box;
}

.header_side_whole.toggle_off {
     left: 200vw;
     transition: all .6s;
     box-sizing: border-box;
}

.header_side_top {
     width: 100%;
     height: auto;
     margin: 0 auto 44px auto;
}

.header_side_top a {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     color: #2BA9BC;
}

.header_side_top a + a {
     margin-left: 30px;
}

.header_side_top a:hover {
     font-weight: bold;
     color: #F05612;
}

.header_side_bottom {
     width: 100%;
     height: auto;
     max-height: calc(100vh - 50px);
     margin: 0 auto;
     overflow: hidden;
     overflow-y: auto;
}

.header_side_bottom::-webkit-scrollbar {
     display: none;
}

.header_side_bottom a {
     display: block;
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: #333544;
     margin-top: 20px;
}

.header_side_bottom a:first-child {
     margin-top: 0;
}

.header_side_bottom a:hover {
     font-weight: bold;
     color: #F05612;
}

.header_side_a.header_side_on {
     font-weight: bold;
     color: #F05612;
}

.header_side_sub {
     width: calc(100% - 20px);
     height: auto;
     padding: 0 0 0 20px;
     margin: 0 0 0 auto;
     display: none;
}

.header_side_sub li {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     color: #243242;
     margin: 10px auto 0 auto;
}

/*햄버거 메뉴*/
.header_hamburger_icon {
     position: fixed;
     display: block;
     min-width: 48px;
     width: 48px;
     max-width: 48px;
     min-height: 48px;
     height: 48px;
     max-height: 48px;
     top: 11px;
     right: 20px;
}

.header_hamburger_icon span {
     position: absolute;
     display: block;
     min-width: 24px;
     width: 24px;
     max-width: 24px;
     height: 2px;
     background-color: #243242;
     right: 0;
     transition: all .4s;
     box-sizing: border-box;
}

.header_hamburger_icon span:nth-child(1) {
     top: 17px;
}

.header_hamburger_icon span:nth-child(2) {
     top: 50%;
     transform: translateY(-50%);
}

.header_hamburger_icon span:nth-child(3) {
     bottom: 17px;
}

.header_hamburger_icon.header_hamburger_on span:nth-of-type(1) {
     top: 50%;
     -webkit-transform: translateY(-50%) rotate(-45deg);
     transform: translateY(-50%) rotate(-45deg);
}

.header_hamburger_icon.header_hamburger_on span:nth-of-type(2) {
     opacity: 0;
}

.header_hamburger_icon.header_hamburger_on span:nth-of-type(3) {
     top: 50%;
     -webkit-transform: translateY(-50%) rotate(45deg);
     transform: translateY(-50%) rotate(45deg);
}


.header_bottom_whole {
     display: none;
     width: 100%;
     height: auto;
     background-color: #FFFFFF;
}





@media (min-width: 1024px) {
     .header_inner_whole {
          width: calc(100% - 100px);
          padding: 0 50px;
     }

     .header_top_whole {
          position: relative;
          max-width: 1600px;
          padding: 41px 0;
     }

     .header_hamburger_icon {
          position: relative;
          top: 0;
          right: 0;
     }

     .header_side_whole {
          width: 100%;
          height: auto;
          padding: 0;
          flex-direction: row-reverse;
     }

     .header_side_whole.toggle_off {
          position: unset;
          left: auto;
     }

     .header_side_whole.toggle_on {
          position: unset;
          left: auto;
     }

     .header_side_bottom {
          position: fixed;
          width: max-content;
          left: 50%;
          transform: translateX(-50%);
     }

     .header_side_bottom a {
          font-size: 18px;
          line-height: 27px;
          font-weight: 500;
          width: max-content;
          margin: 0 0 0 20px;
     }

     .header_side_bottom a:first-child {
          margin-left: 0;
     }


     .header_side_sub {
          display: none!important;
     }

     .header_side_top {
          width: max-content;
          margin: 0 0 0 auto;
     }

     .header_side_top a {
          width: max-content;
          font-size: 18px;
          line-height: 27px;
          font-weight: 500;
          color: #243243;
     }

     

     .header_bottom_whole {
          width: calc(100% + 100px);
          margin: 0 -50px;
          border-top: 1px solid #EFF0F2;
     }

     .header_bottom_inner {
          width: max-content;
          height: auto;
          margin: 0 0 0 auto;
          padding: 60px 0 0 0;
     }
     
     .header_bottom_row {
          min-width: 100px;
          width: max-content;
          height: auto;
          margin: 0;
     }

     p.header_bottom_subtitle {
          min-width: max-content;
          font-size: 12px;
          line-height: 18px;
          font-weight: 500;
          color: #F05612;
          margin: 0 0 20px 20px;
     }

     .header_bottom_row2 {
          min-width: 80px;
          padding: 0 10px;
     }

     .header_bottom_row + .header_bottom_row > .header_bottom_row2 {
          min-height: 270px;
          margin: 0 0 0 10px;
          border-left: 1px solid #E4E6EE;
     }

     .header_bottom_row:first-child p.header_bottom_subtitle {
          margin-left: 10px;
     }

     p.header_bottom_title {
          font-size: 18px;
          line-height: 27px;
          font-weight: bold;
          color: #243243;
     }

     .header_bottom_row ul li {
          min-width: calc(50% - 8px);
          margin: 16px 0 0 0;
     }

     .header_bottom_row ul li a {
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #243243;
     }

     .header_bottom_row ul li:hover a {
          font-weight: 500;
          color: #F05612;
     }

     .header_bottom_row ul li:nth-child(1) {
          margin-top: 19px;
     }

     .header_bottom_row ul li:nth-child(2n) {
          margin-right: 0;
     }

     .header_bottom_row:nth-child(4),
     .header_bottom_row:nth-child(6) {
          padding-top: 38px;
     }

     .header_bottom_row.header_bottom_user {
          border-left: none;
          margin: -60px 0 0 0;
          padding: 60px 50px 94px 10px;
          background-color: #FAFAFA;
     }

     .header_bottom_box {
          width: 100%;
          height: auto;
          margin: 0 auto;
     }

     .header_bottom_box a {
          width: 100%;
          height: auto;
          margin: 0 auto;
     }

     .header_box_row {
          width: 100%;
          height: auto;
          margin: 0 auto;
     }

     .header_bottom_box a + a {
          display: block;
          margin-top: 20px;
     }

     .header_box_img {
          min-width: 58px;
          width: 58px;
          height: 58px;
          border-radius: 10px;
          border: 1px solid #707070;
          background-color: #FFFFFF;
          margin: 0 10px 0 0;
     }

     .header_box_img img {
          min-width: 36px;
          width: 36px;
          max-width: 36px;
          min-height: 36px;
          height: 36px;
          max-height: 36px;
          background-size: contain;
          margin: 11px;
     }

     .header_box_txt {
          width: max-content;
          height: auto;
     }

     .header_box_txt p {
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #8D92A5;
     }

     .header_box_txt p:nth-child(1) {
          display: flex;
          flex-wrap: nowrap;
          justify-content: start;
          align-items: center;
          font-size: 18px;
          line-height: 27px;
          font-weight: bold;
          color: #243243;
          margin-bottom: 9px;
     }

     .header_box_txt p img {
          min-width: 24px;
          width: 24px;
          max-width: 24px;
          height: 24px;
          background-size: contain;
     }


     .header_bottom_row:nth-child(5) ul {
          width: 90px;
          display: flex;
          flex-wrap: wrap;
     }

     .header_bottom_row:nth-child(5) ul li {
          min-width: 60px;
          width: 60px;
     }

     .header_bottom_row:nth-child(5) ul li:nth-child(1),
     .header_bottom_row:nth-child(5) ul li:nth-child(2) {
          margin-top: 19px;
     }

     .header_bottom_row.header_bottom_user {
          min-height: 230px;
     }

     .header_bottom_row.header_bottom_user p.header_bottom_subtitle {
          margin-left: 0;
     }
}



@media (min-width: 1200px) {
     .header_bottom_row2 {
          min-width: 60px;
          padding: 0 20px;
     }

     .header_bottom_row + .header_bottom_row > .header_bottom_row2 {
          min-height: 190px;
          margin: 0 0 0 20px;
     }

     p.header_bottom_subtitle {
          margin-left: 30px;
     }

     .header_bottom_row:first-child p.header_bottom_subtitle {
          margin-left: 20px;
     }

     .header_bottom_row.header_bottom_user {
          padding: 60px 50px 60px 20px;
     }

     .header_bottom_row:nth-child(5) ul {
          width: 140px;
     }

     .header_bottom_row:nth-child(5) ul li {
          min-width: 70px;
          width: 70px;
     }
}



@media (min-width: 1300px) {
     .header_inner_whole {
          width: calc(100% - 200px);
          padding: 0 100px;
     }

     .header_bottom_whole {
          width: calc(100% + 200px);
          margin: 0 -100px;
     }

     .header_bottom_row2,
     .header_bottom_row + .header_bottom_row .header_bottom_row2 {
          margin-top: 0;
     }

     p.header_bottom_subtitle {
          margin-left: 40px;
     }

     .header_bottom_row.header_bottom_user {
          padding-right: 100px;
     }

     .header_bottom_row2 {
          min-width: 90px;
     }
}



@media (min-width: 1500px) {
     .header_side_top {
          margin-right: 32px;
     }

     .header_side_top a + a {
          margin-left: 50px;
     }

     .header_side_bottom a {
          margin-left: 50px;
     }


     p.header_bottom_subtitle {
          font-size: 14px;
          line-height: 20px;
          margin-left: 60px;
     }

     .header_bottom_row:first-child p.header_bottom_subtitle {
          margin-left: 0;
     }

     .header_bottom_inner {
          margin: 0 auto;
     }

     .header_bottom_row2 {
          min-width: auto;
          padding: 0 0 40px 0;
     }

     .header_bottom_row + .header_bottom_row .header_bottom_row2 {
          margin-left: 30px;
          padding-left: 30px;
          padding-bottom: 0;
     }

     .header_bottom_row.header_bottom_user {
          padding: 60px 160px 60px 60px;
          margin-left: 30px;
     }
}





@media (min-width: 1600px) {
     p.header_bottom_subtitle {
          margin-left: 80px;
     }

     .header_bottom_row + .header_bottom_row .header_bottom_row2 {
          margin-left: 40px;
          padding-left: 40px;
     }

     .header_bottom_row.header_bottom_user {
          margin-left: 40px;
     }
}




@media (min-width: 1700px) {
     .header_bottom_row {
          min-width: max-content;
          width: max-content;
     }

     .header_bottom_row2 {
          min-width: max-content;
          width: max-content;
     }

     .header_bottom_row:nth-child(5) ul {
          min-width: 160px;
     }

     .header_bottom_row:nth-child(5) ul li {
          min-width: max-content;
          width: max-content;
     }

     .header_bottom_row:nth-child(5) ul li:nth-child(2n + 1) {
          margin-right: 40px;
     }


     .header_bottom_row.header_bottom_user {
          margin-left: 100px;
     }
}