@charset "utf-8";

/* 공통 */
.doc-tit {font-family:"Times New Roman",serif; font-size:var(--font-size-52); font-weight:400; line-height:1.1em;}
.doc-tit.fw200 { font-weight:200; }

.sub-section {display:grid; grid-template-columns:repeat(6, 1fr); gap:0 40px; margin-bottom:190px;}
.sub-section:last-child {margin-bottom:0;}
.sub-section .title {grid-column:1/3;}
.sub-section .content {grid-column:3/7;}
.sub-section.st2 {margin-bottom:250px;}

/* main */
.main {display:grid; grid-template-columns:repeat(3, 1fr); gap:0 40px;}
.main .content {grid-column:1/3;}
.main .aside {position:sticky; position:-webkit-sticky; top:190px; align-self:self-start; overflow:hidden; transition:.25s;}

.scroll-up .main .aside {top:0;}

.main .row {display:grid; grid-template-columns:repeat(4, 1fr); gap:80px 40px;}
.main .col {grid-column:span 2;}
.main .col.col-2 {grid-column:span 3;}
.main .col.col-3 {grid-column:span 4;}
.main .col.col-4 {grid-column:2/5;}
.main .thumb {overflow:hidden;}
.main .thumb img {display:block; transition:.4s;}
.main .tit {font-size:var(--font-size-24); line-height:1.33em;}
.main .txt {font-size:var(--font-size-18); line-height:1.33em; color:#898989; margin-top:3px;}
.main .link {display:block;}
.main .link .thumb {margin-bottom:25px;}
.main .link:hover .thumb img {transform:scale(1.05);}
.main .bnr {display:block; position:relative;}
.main .bnr .cnt {position:absolute; bottom:5%; left:5%; right:5%; color:#fff; display:flex; align-items:center; justify-content:space-between;}
.main .bnr .cnt:after {content:""; width:38px; height:38px; background:url("../images/main/arrow.svg") 50% 50% no-repeat; background-size:contain;}

.float-bnr {display:block; position:relative;}
.float-bnr .tit {position:absolute; bottom:5%; left:5%; right:5%; color:#fff; display:flex; align-items:center; justify-content:space-between; z-index:10;}
.float-bnr .tit:after {content:""; width:38px; height:38px; background:url("../images/main/arrow.svg") 50% 50% no-repeat; background-size:contain;}

.mobile-fixed-banner {display:none;}

/* About */
.about-top {position:relative; height:calc(100vh - 190px); max-height:910px; margin-bottom:90px; overflow:hidden;}
.about-top .back {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../images/sub/box_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.about-top .cnt {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px;}

.about-cnt {font-family:'Pretendard', sans-serif; font-size:var(--font-size-28); font-weight:400; line-height:1.429em;}

.service-area {display:grid; grid-template-columns:repeat(2, 1fr); gap:130px 40px; overflow:hidden;}
.service-area .tit {position:relative; padding-bottom:10px;}
.service-area .tit:after {content:""; position:absolute; bottom:0; left:0; right:-40px; height:1px; background:#ccc;}
.service-area .tit h3 {font-size:var(--font-size-22); font-weight:600; line-height:1.455em;}
.service-area .list {font-family:'Pretendard', sans-serif; padding-top:35px;}
.service-area .list > ul > li {font-size:var(--font-size-28); line-height:1.455em; margin-bottom:3px;}
.service-area .list > ul > li:last-child {margin-bottom:0;}
.service-area .list > ul > li > ul {margin-top:8px;}
.service-area .list > ul > li > ul > li {font-size:var(--font-size-22); line-height:1.455em;}

/* Project */
.post-info {font-size:var(--font-size-24); font-weight:500; line-height:1.33em; margin-bottom:27px;}

.project-list ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:100px 40px;}
.project-list ul li a {display:block;}
.project-list ul li .thumb {position:relative; padding-bottom:75%; overflow:hidden; margin-bottom:27px;}
.project-list ul li .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; transition:.4s; object-fit:cover;}
.project-list ul li .tit {font-size:var(--font-size-24); font-weight:500; line-height:1.33em;}
.project-list ul li .txt {font-size:var(--font-size-18); line-height:1.33em; color:#898989; margin-top:3px;}
.project-list ul li a:hover .thumb img {transform:scale(1.05);}

.project-view {text-align:center; margin-bottom:50px;}
.project-view .prj-info {padding:90px 0 75px; font-family:'Pretendard', sans-serif;}
.project-view .prj-info .tit {font-family:"Times New Roman",serif; font-size:var(--font-size-92); font-weight:400; line-height:1.33em;}
.project-view .prj-info .txt1 {font-size:var(--font-size-32); font-weight:700; line-height:1.33em; margin-top:15px;}
.project-view .prj-info .txt2 {font-size:var(--font-size-20); font-weight:400; line-height:1.33em; margin-top:5px;}
.project-view .prj-info .txt3 {font-size:var(--font-size-18); font-weight:300; line-height:1.33em; color:#898989; margin-top:20px;}
.project-view .prj-cnt {max-width:1175px; margin:0 auto;}

/* Contact */
.contact-area {display:grid; grid-template-columns:repeat(2, 1fr); gap:130px 40px; overflow:hidden;}
.contact-area .tit {position:relative;  display:flex; align-items:center; align-items:flex-end; height:86px; padding:0 0 12px; margin-top:-20px;}
.contact-area .tit:after {content:""; position:absolute; bottom:0; left:0; right:-40px; height:1px; background:#ccc;}

.contact-area .sns-link {margin-top:5px; color:#808080; font-size:var(--font-size-18); font-weight:600; line-height:1.455em;}
.contact-area .sns-link a:hover span:after {width:100%;}
.contact-area .sns-link a span {position:relative;}
.contact-area .sns-link a span:after {content:""; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:#999; transition:.3s;}

.contact-area .tit h3 {font-size:var(--font-size-18); font-weight:600; line-height:1.455em;}
.contact-area .list {font-family:'Pretendard', sans-serif; font-size:var(--font-size-20); line-height:1.6em; padding-top:35px;}
.contact-area .list dl {display:flex; flex-wrap:wrap;}
.contact-area .list dt {min-width:130px; margin-right:50px;}

.office-area {border-top:1px solid #ccc; padding-top:35px; margin-top:10px; font-family:'Pretendard', sans-serif; font-size:var(--font-size-20); line-height:1.6em;}
.office-area .map-link {margin-top:25px; color:#808080; font-size:var(--font-size-18); font-weight:600; line-height:1.455em;}
.office-area .map-link a {display:flex; align-items:center;}
.office-area .map-link a span {position:relative;}
.office-area .map-link a span:after {content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:#999; transition:.3s;}
.office-area .map-link a img {width:15px; vertical-align:middle; margin:0 0 0 14px;}
.office-area .map-link a:hover span:after {width:100%;}

.bottom-banner {display:flex; align-items:center; height:600px; color:#fff; text-align:center; background:url("../images/sub/box_bg.jpg") 50% 0 no-repeat; background-size:cover;}
.bottom-banner .inner {width:100%; padding:30px;}
.bottom-banner .img {margin-bottom:35px; margin-top:37px;}
.bottom-banner .img svg {width:80%; max-width:769px; height:auto;}
.bottom-banner p {font-size:var(--font-size-24); line-height:1.5em; margin-bottom:80px;}
.bottom-banner .btn {display:inline-flex; align-items:center; justify-content:center; width:310px; height:70px; font-size:var(--font-size-18); line-height:1.33em; font-weight:700; border:1px solid #ebebeb;}
.bottom-banner .btn:after {content:""; margin-left:10px; width:19px; height:19px; background:url("../images/sub/icon_down.svg") 50% 50% no-repeat; background-size:contain;}
.bottom-banner .btn:hover {background:#fff; color:#000;}
.bottom-banner .btn:hover::after {background-image:url("../images/sub/icon_down_black.svg");}

/* Studio */
.studio-hero {display:grid; grid-template-columns:repeat(6, 1fr); gap:50px 40px; margin-bottom:40px;}
.studio-hero .img {grid-column: 1/ 7;}
.studio-hero .cnt {grid-column:3 / span 4; font-size:var(--font-size-26); font-weight:500; line-height:1.538em;}

.studio-content {margin-bottom:70px;}
.studio-content .doc-tit {margin-bottom:30px;}
.studio-content .imgs {display:grid; grid-template-columns:repeat(6, 1fr); gap:80px 40px;}
.studio-content .col-2 {grid-column:span 2;}
.studio-content .col-3 {grid-column:span 3;}
.studio-content .col-4 {grid-column:1 / 5;}
.studio-content .col-4.end {grid-column:3 / 7;}

.studio-contact {display:grid; grid-template-columns:repeat(6, 1fr); gap:0 40px; margin-top:150px;}
.studio-contact .info-area {grid-column:1 / 3;}
.studio-contact .info-area .doc-tit {margin-bottom:100px;}
.studio-contact .info-area dl {display:flex; font-size:var(--font-size-24); line-height:1.417em; margin-right:-60px; margin-bottom:2px;}
.studio-contact .info-area dl.mgb {margin-bottom:45px;}
.studio-contact .info-area dt {font-weight:600; min-width:180px; margin-top:-3px;}
.studio-contact .info-area dd {width:100%; font-family:'Pretendard', sans-serif;}
.studio-contact .map-area {grid-column:4 / 7; position:relative;}
.studio-contact .map-area:before {content:""; display:block; padding-bottom:100%;}
.studio-contact .map-area iframe {display:block; position:absolute; top:0; left:0; filter: grayscale(100%);}


/* Rental */
.rental-info-txt {font-size:var(--font-size-18); font-weight:500; line-height:1.556em; margin-top:25px;}

.rental-info {margin-top: 3px;}
.rental-info .group {margin-bottom:150px;}
.rental-info .group:last-child {margin-bottom:0;}
.rental-info h3 {font-size:var(--font-size-22); font-weight:500; line-height:1.455em; margin-bottom:10px;}
.rental-info .list {font-family:'Pretendard', sans-serif; font-size:var(--font-size-20); line-height:1.6em; padding-top:35px; border-top:1px solid #ccc;}
.rental-info .list .sm {font-size:var(--font-size-16); font-weight:600; color: #808080;}
.rental-info .list .sm1 {font-size:var(--font-size-18); font-weight:500;  color: #000; }


.rental-info .list dl {margin-bottom:40px;}
.rental-info .list dl:last-child {margin-bottom:0;}
.rental-info .list dd {font-size:var(--font-size-28); font-weight:600; line-height:1.6em;}


.rental-equipment {margin-top: 3px;}
.rental-equipment-txt {font-size:var(--font-size-15); font-weight:400; line-height:1.556em; margin-top:25px;}
.rental-equipment table {width:100%; border-collapse:collapse; border-spacing:0px;}
.rental-equipment table th {width:50%; text-align:left; font-size:var(--font-size-22); font-weight:500; line-height:1.455em; padding:0 0 10px; border-bottom:1px solid #ccc;}
.rental-equipment table td {padding:4px 0; font-family:'Pretendard', sans-serif; font-size:var(--font-size-24); line-height:1.33em;}
.rental-equipment table tbody tr:first-child td {padding-top:35px;}
.rental-equipment table th:nth-child(2),
.rental-equipment table td:nth-child(2) {padding-left:20px;}

/* Reservation */
.reservation-contact {font-family:'Pretendard', sans-serif; font-size:var(--font-size-20); line-height:1.5em; margin:-30px 0 140px;}
.reservation-contact p {margin-bottom:22px;}
.reservation-contact dl {display:flex;}
.reservation-contact dt {min-width:70px; font-weight:600;}

.reservation-top {padding:15px 0 95px; border-top:1px solid #000; display:flex; justify-content:space-between;}
.reservation-top .control {display:flex; align-items:center;}
.reservation-top select {display:inline-block; padding-right:55px; font-family:"Times New Roman",serif; font-size:var(--font-size-56); line-height:1.33em; border:0; background:transparent url("../images/sub/select.svg") right center no-repeat; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.reservation-top select::-ms-expand {display:none;}
.reservation-top .help-text {margin:10px 0; font-size:var(--font-size-18); font-weight:500; line-height:1.33em; opacity:.6}
.reservation-top h2 {display:inline-block; margin-right:10px; font-family:"Times New Roman",serif; font-size:var(--font-size-56); font-weight:400; line-height:1.33em;}
.reservation-top button {display:inline-block; margin-top:17px; vertical-align:middle; border:0; background:transparent; width:15px; height:18px; background-position:50% 50%; background-repeat:no-repeat;}
.reservation-top .prev {background-image:url("../images/sub/date_prev.svg");}
.reservation-top .next {background-image:url("../images/sub/date_next.svg");}

.reservation-table {margin:0 -16px;}
.reservation-table table {width:100%; border-collapse:collapse; border-spacing:0px; table-layout:fixed;}
.reservation-table table th {height:44px; text-align:center; font-size:12px;}
.reservation-table table td {height:44px; text-align:center; font-size:15px; font-weight:500;}
.reservation-table .link {display:inline-block; width:30px; height:30px; line-height:30px; border-radius:100%; background:#b4b1b2}

.reservation-event {display:none; margin-top:40px; padding-top:15px; border-top:1px solid #757575;}
.reservation-event .date {margin-bottom:12px; font-size:14px; font-weight:500; line-height:1.33em;}
.reservation-event .item {display:flex; padding:12px 15px; background:#d7d7d7; margin-bottom:5px;}
.reservation-event .item dt {margin-right:9px; font-size:14px; font-weight:600; line-height:1.33em;}
.reservation-event .item dd {flex:1 1 auto; min-width:0; width:1%; font-size:13px; line-height:1.5em;}
.reservation-event .item:last-child {margin-bottom:0;}
.reservation-event .item.type1 {}
.reservation-event .item.type2 {background:#000; color:#fff;}