@charset "utf-8";

body {background-color: #fff;}

.sub-title {width: 100%; height: auto; min-height: 300px; background: url(../images/sub_title_bg.png) no-repeat; background-size: cover;}
.sub-title .title-inner {width: 100%; max-width: 1420px; height: 100%; padding-top: 180px; margin: 0 auto;}
.sub-title h2 {font-family:'SCDream', sans-serif !important; font-size: 40px; font-weight: 500; color: #fff;}

.content-wrap {width: 100%; height: 100%;}
.content-inner {width: 100%; max-width: 1420px; height: 100%; padding: 100px 0 15px; margin: 0 auto;}

.content {margin-bottom: 125px;}
.content-title {padding-bottom: 25px; border-bottom: 1px solid #000;}
.content-title h4 {font-family:'SCDream', sans-serif !important; font-size: 30px; font-weight: 700;}
.content-text {padding-top: 55px;}

.design-proposal {display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 40px; row-gap: 60px;}
.design-proposal .inner-content {width:calc(100% / 2 - 20px);}

.inner-title {padding-bottom: 15px; font-family:'SCDream', sans-serif !important; font-size: 25px; font-weight: 500;}
.inner-text {font-size: 20px; color: #333;}
.text-box:not(:first-of-type) {padding-top: 40px;}
.text-list li {position: relative; padding-left: 30px; font-size: 16px; color:#333; line-height: 30px;}
.text-list li::before {content: ""; position: absolute; top:12px; left: 0; width: 15px; height: 3px; border-radius: 1.5px; background-color: #0a337a;}

.inner-img a {display: block; width: 100%; height: 100%;}
.inner-img img {border: 1px solid #eaeaea;}

.item-title {padding-top: 12px; line-height: 27px;}
.item-title h6 {font-size: 18px; color:#000;}
.item-title span {font-size: 14px; color: #adadad;}

/* top btn */
.top-btn {display:none; position: fixed; right: 40px; bottom: 40px; width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50px; box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.1); cursor: pointer; z-index: 100;}
.top-btn a {display: inline-block; width: 100%; height: 100%; font-size: 20px; text-align: center; line-height: 50px; color: gray; border-radius: 50px;}
.top-btn a::before {content: ""; position: absolute; left:50%; top: 54%; transform: translateX(-50%) translateY(-50%) rotate(315deg); width: 9px; height: 9px; border-top: 2px solid #333; border-right: 2px solid #333;}

.footer {width: 100%; height: 135px; border-top: 1px solid #d9d9d9;}
.footer .footer-inner {display: flex; width: 100%; max-width: 1420px; height: 100%; margin: 0 auto;}
.footer .footer-logo {margin: auto;}



.tab-swiper .swiper-slide {width: auto; flex: none;}
.tab-btn-wrap {display: flex; justify-content: center; padding-bottom: 25px; margin-bottom: 2.5px; border-bottom: 1px solid #000;}
.tab-btn {position: relative; width: auto; min-width: 100px; font-size: 20px; font-weight: 500; background: transparent; border: none;}
.tab-btn.on {font-weight: 700; color: #000;}
.tab-btn.on::before {content: ""; position: absolute; left: 50%; bottom: -27.5px; transform: translateX(-50%); width: 100%; height: 5px; background-color: #000;}
.tab-content {display: none;}
.tab-content.on {display: block;}

.search-zone {display: flex; justify-content: end; margin-top: 55px;}
.search-zone-inner {display: flex; width: 325px; height: 45px; border:1px solid #a7a7a7; border-radius: 0px;}
.search-select {width: 120px; padding:0 10px; font-size: 14px; border: none; border-right: 1px solid #a7a7a7; outline: none;}
.search-box {display: flex; width: calc(100% - 120px);}
.search-box select option {padding: 10px;}
.search-box input {width: calc(100% - 45px); padding: 0 10px; border: none; outline: none;}
.search-box .search-btn {display: flex; width: 45px; height: 45px;}
.search-box .search-btn img {width: 23px; margin: auto;}

.my-gallery-container {width: 100%; height: 100%; overflow-y: auto; background-color: transparent;}
.item {float: left; width: 25%; min-height: auto; padding:0 15px 70px; margin: 0; background-color: transparent; box-shadow: none;}
.item img {border: 1px solid #eaeaea;}

.content-item-list {display: grid; grid-column-gap: 40px; grid-row-gap: 40px; align-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 55px;}
.content-row-item {display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 70px;}
.content-item {width: 100%;}
.content-item a {display: block; width: 100%;}
.content-item img {border: 1px solid #eaeaea;}



.content-wrap.detail .content-title h4 {max-width: calc(100% - 240px);}
.right-menu {display: flex; align-items: end;}
.right-menu li {margin-left: 10px;}
.right-menu li a {position: relative; display: block; min-width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; background-color: #000; border-radius: 40px; transition: .3s;}
.right-menu li a:hover {opacity: 0.75; transition: .3s;}
.right-menu li .left-btn::before {content: ""; position: absolute; left:55%; top: 52%; transform: translateX(-50%) translateY(-50%) rotate(225deg); width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff;}
.right-menu li .right-btn:before {content: ""; position: absolute; left:45%; top: 52%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff;}
.right-menu li .list-btn {padding: 0 20px; margin-left: 5px; font-size: 16px; font-weight: 500;}

.content-bottom-bar {display: none; padding-top: 20px; margin-top: 30px; border-top: 1px solid #bbbbbb;}

.info-list {display: flex; flex-wrap: wrap; padding-top: 30px;}
.info-list li {margin-right: 25px; font-size: 17px; font-weight: 600; line-height: 30px; color: #000;}
.info-list li span {font-weight: 400; color: #444;}
.detail-img {max-width:100%; text-align: center;}
.detail-img:not(:first-of-type) {margin-top: 35px;}
.detail-img a {display: block; width: 100%; height: 100%;}
.detail-img img {border: 1px solid #eaeaea;}



/* error */
.error-content {width: 100%; height: 100%; min-height: 100vh; background: url(../images/error_bg.jpg) no-repeat center; background-size:cover;}
.error-inner {max-width: 1000px; padding: 100px 0 0; margin: 0 auto;}
.error-title {padding: 30px; border-bottom: 1px solid #000000;}
.error-title h1 {font-family:'SCDream', sans-serif !important; font-size: 32px; font-weight: 700; text-align: center;}
.error-text {padding: 30px 0 70px; text-align: center;}
.error-text ul li {font-size: 18px; line-height: 32px;}

.home-btn {padding: 15px 50px; margin-top: 70px; font-size: 16px; color: #fff; border-radius: 50px; background-color: #000; border: none;}



@media screen and (max-width: 1600px) {
    .sub-title .title-inner {max-width: none; padding: 195px 70px 0;}
    .sub-title h2 {font-size: 34px;}
    .sub-title .sub-logo {width: 185px;}


    .content-inner {max-width: none; padding: 100px 70px 140px;}
    .content-title h4 {font-size: 27px;}
    
    .inner-title {font-size: 22px;}
    .inner-text {font-size: 18px;}
    .text-list li {padding-left: 28px; font-size: 15px;}


    .footer .footer-inner {max-width: none; padding:0 70px;}
    .footer .footer-logo {width: 185px;}
}

@media screen and (max-width: 1400px) {
    .sub-title {min-height: 280px;}
    .sub-title .title-inner {padding: 175px 50px 0;}


    .content {margin-bottom: 105px;}
    .content-inner {padding: 80px 50px 15px;}

    .content-text {padding-top: 40px;}


    .footer {height: 125px;}
    .footer .footer-inner {padding:0 50px;}


    .content-item-list {grid-column-gap: 30px; margin-top: 40px;}
}

@media screen and (max-width: 1200px) {
    .sub-title {min-height: auto;}
    .sub-title .title-inner {padding:115px 50px 50px;}
    .sub-title-text {flex-direction: column-reverse; gap: 30px;}
    .sub-title .sub-logo {width: 160px;}


    .design-concept {flex-wrap: wrap; gap: 0;}
    .design-concept .content {width: 100%;}
    .content {margin-bottom: 80px;}


    .footer .footer-logo {width: 175px;}



    .content-item-list {grid-template-columns:repeat(3, minmax(0, 1fr)); grid-column-gap: 25px;}
    .content-row-item {grid-row-gap:60px;}



    .error-inner {max-width: none; padding: 90px 80px 0; margin: auto;}
    .error-title {padding: 0 0 30px;}
}


@media screen and (max-width: 1000px) {
    .design-proposal .inner-content {width: 100%;}



    .content-item-list {grid-column-gap:20px;}

    .search-zone {margin-top: 40px;}
}

@media screen and (max-width: 800px) {
    .sub-title {height: 100%; min-height: 260px;}
    .sub-title .title-inner {padding: 110px 35px 35px;}
    .sub-title h2 {font-size: 30px;}


    .content-inner {padding: 60px 35px 15px;}
    .content-title h4 {font-size: 25px;}
    .content-text {padding-top: 30px;}
    .inner-title {font-size: 20px;}
    
    .design-proposal {row-gap: 30px;}
    
    .text-box:not(:first-of-type) {padding-top: 30px;}
    .text-list li {padding-left: 25px;}
    .text-list li::before {width: 12px;}


    .top-btn {right: 25px; bottom: 25px; width: 40px; height: 40px;}


    .footer {height: 110px;}
    .footer .footer-inner {padding: 0 35px;}
    .footer .footer-logo {width: 160px;}


    .tab-btn-wrap {padding-bottom: 20px;}
    .tab-btn {min-width: 90px; font-size: 18px;}
    .tab-btn.on::before {bottom: -23px;}
    .content-item-list {margin-top: 35px; grid-column-gap:20px; grid-row-gap:35px;}
    .content-row-item {grid-row-gap:35px;}

    .search-zone {margin-top: 30px; justify-content: center;}
    .search-zone-inner {height: 40px;}
    .search-box .search-btn {height: 40px;}

    .info-list {padding-top: 20px;}
    .info-list li {font-size: 16px; margin-right: 20px;}



    .error-inner {padding: 50px 50px 0;}
    .error-title {padding: 0 0 25px;}
    .error-title h1 {font-size: 24px;}
    .error-text {padding: 25px 0 60px;}
    .error-text ul li {font-size: 15px; line-height: 27px;}
    .home-btn {padding: 12px 35px; margin-top: 50px; font-size: 15px;}
    
}

@media screen and (max-width: 800px) {
    .content-item-list {grid-template-columns: repeat(1, minmax(0, 1fr));} 



    .content-wrap.detail .content-title h4 {max-width: 100%; padding-top: 10px;}
    .project-name {flex-direction: column-reverse;}
    .right-menu {justify-content: end;}
    .right-menu.pc-ver {display: none;}
    .right-menu li {margin-left: 0; margin-right: 5px;}
    .right-menu li a {min-width: 35px; height: 35px; line-height: 35px;}
    .right-menu li .left-btn::before {width: 7px; height: 7px;}
    .right-menu li .right-btn:before {width: 7px; height: 7px;}
    .content-bottom-bar {display: block;}
}

@media screen and (max-width: 600px) {
    .sub-title {height: auto; min-height: auto;}
    .sub-title .title-inner {padding: 110px 35px 35px;}
    .sub-title-text {gap: 25px;}
    .sub-title h2 {font-size: 24px;}
    .sub-title .sub-logo {width: 140px;}


    .content {margin-bottom: 30px;}
    .content-inner {padding: 35px 35px 0;}
    .content-title {padding-bottom: 20px;}
    .content-title h4 {font-size: 20px;}
    .content-text {padding-top: 25px;}
    .inner-title {font-size: 17px;}

    .footer {height: 100px;}
    .footer .footer-logo {width: 145px;}


    .right-menu li a {min-width: 30px; height: 30px; line-height: 30px;}
    .right-menu li .list-btn {font-size: 14px; font-weight: 400;}
    .right-menu li .left-btn::before {border-top: 1px solid #fff; border-right: 1px solid #fff;}
    .right-menu li .right-btn:before {border-top: 1px solid #fff; border-right: 1px solid #fff;}
}

@media screen and (max-width: 500px) {
    .tab-swiper .swiper-slide {width: calc(100% / 5); min-width: auto;}
}


@media screen and (max-width: 400px) {
    .sub-title .title-inner {padding: 110px 25px 35px;}
    .sub-title-text {gap:20px;}
    .sub-title h2 {font-size: 22px;}
    .sub-title .sub-logo {width: 135px;}


    .content-inner {padding: 35px 25px 0;}


    .top-btn {right: 20px; bottom: 20px; width: 35px; height: 35px;}


    .footer .footer-inner {padding: 0 25px;}
    .footer .footer-logo {width: 135px;}



    .content-wrap.tab .content-inner {padding:35px 0;}
    .tab-btn-wrap {justify-content: unset; border-bottom: none; padding-bottom: 15px;}
    .tab-swiper {padding: 0 25px !important;}
    .tab-swiper .swiper-slide {width: auto; min-width: 95px;}
    .tab-btn {min-width: 85px; font-size: 16px;}
    .tab-btn.on::before {bottom: -17.5px;}
    .tab-btn::after {content: ""; position: absolute; left: 50%; bottom: -15.5px; transform: translateX(-50%); width: 100%; height: 1px; background-color: #000;}
    .tab-content-wrap {padding: 0 25px;}
    
    .search-zone-inner {width: 100%;}

    .content-item-list {grid-row-gap: 30px;}
    .content-row-item {grid-row-gap: 30px;}
    .item-title {padding-top: 12px; line-height: 24px;}
    .item-title h6 {font-size: 16.5px;}
    .item-title span {font-size: 13px;}

    .info-list {padding-top: 15px;}
    .info-list li {font-size: 13.5px; margin-right: 10px;}

    

    .error-inner {padding: 35px 20px 0;}
}

@media screen and (max-width: 370px) {
    .tab-swiper .swiper-slide {min-width: 90px;}
}