@charset "utf-8";

/*
 * 국문 전용 CSS — 공통 (헤더 / 푸터 / GNB / 전역 타이포)
 *
 * 로드 방식
 *   page_head.do 가 LOCALE !== 'en' 일 때만 <link> 를 출력한다.
 *   공용 style.css 다음에 로드되므로 같은 명시도에서는 이 파일이 이긴다.
 *   영문 페이지는 이 파일을 아예 내려받지 않는다.
 *
 * 파일 배치
 *   ko/common.css  헤더 / 푸터 / GNB / 전역 타이포 / --icon 훅   ← 이 파일
 *   ko/main.css    /ko 메인 (.sct-design .sct-welcome .sct-services .sct-worldwide .sct-trusted)
 *   ko/sub.css     그 외 모든 서브 페이지 섹션
 *
 */

/* 한글은 어절 중간에서 끊지 않는다 */
#wrap.lang-ko{word-break: keep-all; overflow-wrap: break-word; line-break: strict;}

/* 헤더 우측 예약하기 버튼. common.css 에서 .util.util-sub{display: none} 으로 숨겨 둔 것을 국문에서만 노출한다 */
#wrap.lang-ko .header-wrap .util-sub{display: flex; padding: 0;}
#wrap.lang-ko .header-wrap .util-sub .btn-link{position: relative; font-size: 0.938vw; font-weight: 500; color: #fff; padding: 0 1.042vw; height: 100%; display: flex; align-items: center; transition: all .3s ease-out;}
#wrap.lang-ko .header-wrap .util-sub .btn-link:hover{text-shadow: 0 0 1px #fff;}
#wrap.lang-ko .header-wrap .gnb-util-sub{display: none;}

/* section[class*="sct-"]:not(.sct-hero, .sct-visual, .sct-banner){padding-block: 4.17vw;} */
section[class*="sct-"]:not(.sct-hero, .sct-visual, .sct-banner){padding-block: 6.25vw;}
div[class*="case-studies"] section[class*="sct-"]{padding-block: 0;}
div[class*="term-conditions"] section[class*="sct-"], div[class*="privacy-policy"] section[class*="sct-"], div[class*="location-terms"] section[class*="sct-"]{padding-block: 0;}
#wrap.case-studies .sct-gallery .atc-content{}
/* section[class*="sct-"]:not(.sct-hero, .sct-visual, .sct-banner) .atc-text{margin-bottom: 1.67vw;} */
section[class*="sct-"]:not(.sct-hero, .sct-visual, .sct-banner) .atc-text{margin-bottom: 2.917vw;}
.comm-title{line-height: normal;}
.comm-title + .comm-desc{margin-top: 1.04vw;}
.comm-title + .comm-button{margin-top: 1.04vw;}
.comm-desc + .comm-button{margin-top: 1.04vw;}

.sct-grid-normal{}
#wrap:not(.main) .sct-grid-normal .atc-text{text-align: center;}
.grid-normal{}
.grid-normal ul{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.08vw;}
.grid-normal ul li{}
.grid-normal ul li .image{overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 56/32;}
.grid-normal ul li .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.grid-normal ul li .item{display: flex; flex-direction: column; row-gap: 1.67vw;}
.grid-normal ul li .text{display: flex; flex-direction: column; row-gap: 0.63vw;}

.sct-grid-zigzag{}
.grid-zigzag{}
.grid-zigzag ul{display: flex; flex-direction: column; row-gap: 2.08vw;}
.grid-zigzag ul li{}
.grid-zigzag ul li:nth-child(odd) .item{flex-direction: row;}
.grid-zigzag ul li:nth-child(even) .item{flex-direction: row-reverse;}
.grid-zigzag ul li .item{display: flex; align-items: center;}
.grid-zigzag ul li .image{overflow: hidden; width: 50%; aspect-ratio: 8/3;}
.grid-zigzag ul li .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.grid-zigzag ul li .text{display: flex; flex-direction: column; row-gap: 0.83vw; padding-inline: 4.17vw; width: 50%;}

.sct-grid-fill{}
.sct-grid-fill .atc-text{text-align: center;}
.grid-fill{}
.grid-fill ul{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.63vw;}
.grid-fill ul li{}
.grid-fill ul li .item{position: relative; overflow: hidden; aspect-ratio: 954/320;}
.grid-fill ul li .image{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.grid-fill ul li .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.grid-fill ul li .image::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.grid-fill ul li .text{position: relative; padding: 2.71vw 4.17vw; width: 100%; height: 100%; display: flex; flex-direction: column; row-gap: 0.63vw; justify-content: flex-end;}
.grid-fill ul li .text .comm-subtitle{color: #fff;}
.grid-fill ul li .text .comm-desc{color: #fff;}

.sct-qna .atc-text{text-align: center;}
.qna-accordion{}
.qna-accordion ul{}
.qna-accordion ul li{border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; column-gap: 1.04vw; cursor: pointer; padding: 2.08vw 0.83vw;}
.qna-accordion ul li::after{content: ''; display: block; width: 2.19vw; aspect-ratio: 1/1; flex-shrink: 0; background-image: url('/resources/images/common/ico-accordion-plus.svg'); background-size: contain; background-repeat: no-repeat; transition: all .3s ease-out;}
.qna-accordion ul li.active::after{transform: rotate(45deg);}
.qna-accordion ul li .item{display: flex; flex-direction: column; flex: 1;}
.qna-accordion ul li .comm-subtitle{}
.qna-accordion ul li .comm-desc{display: none; padding-top: 1.04vw;}

/* MEDIA QUERY */
@media (max-aspect-ratio: 10/9) {
    /* common.css 의 모바일 규칙 .header-wrap .util{position: fixed; top: 5.556vw; right: 4.444vw}
       는 util-sub 에도 걸린다(둘 다 .util 을 갖는다). 그대로 두면 예약하기가 같은 좌표에 겹쳐
       DOM 상 뒤에 있는 쪽이 위로 올라오면서 햄버거 버튼(.btn-nav)을 덮어 내비게이션이 열리지 않는다.
       util 필( padding 4.444×2 + 글로브 7.222 + gap 4.444 + 햄버거 7.222 ≈ 27.78vw ) 왼쪽으로 비켜 둔다.
       4.444(util 우측 여백) + 27.78(util 폭) + 2.222(간격) ≈ 34.444vw */
   #wrap.lang-ko .header-wrap .util.util-sub{display: none;}
   #wrap.lang-ko .header-wrap .gnb-util-sub{display: flex; position: relative; width: 100%; justify-content: center; padding-block: 5.56vw 11.11vw;}
   #wrap.lang-ko .header-wrap .gnb-util-sub .btn-link{font-size: 4.44vw; padding: 2.22vw 10vw; border-radius: 11.11vw; border: 1px solid #fff; display: block;}

   section[class*="sct-"]:not(.sct-hero, .sct-visual, .sct-banner){padding-block: 16.667vw;}
   div[class*="case-studies"] section[class*="sct-"]{padding-block: 0;}
   div[class*="term-conditions"] section[class*="sct-"], div[class*="privacy-policy"] section[class*="sct-"], div[class*="location-terms"] section[class*="sct-"]{padding-block: 0;}
   section[class*="sct-"]:not(.sct-hero, .sct-visual, .sct-banner) .atc-text{margin-bottom: 6.67vw;}
   .comm-title + .comm-desc{margin-top: 3.33vw;}
   .comm-title + .comm-button{margin-top: 3.33vw;}
   .comm-desc + .comm-button{margin-top: 3.33vw;}

   #wrap:not(.main) .sct-grid-normal .atc-text{text-align: left;}
   .grid-normal ul{grid-template-columns: repeat(1, 1fr); row-gap: 11.11vw;}
   .grid-normal ul li .item{row-gap: 5.56vw;}
   .grid-normal ul li .image{width: calc(100% + 8.89vw); margin-left: -4.444vw; aspect-ratio: 9/5; border-inline: none;}
   .grid-normal ul li .text{row-gap: 2.22vw;}

   .grid-zigzag ul{row-gap: 11.11vw;}
   .grid-zigzag ul li:nth-child(odd) .item, .grid-zigzag ul li:nth-child(even) .item{flex-direction: column-reverse;}
   .grid-zigzag ul li .item{row-gap: 3.33vw;}
   .grid-zigzag ul li .image{width: 100%; aspect-ratio: 9/5;}
   .grid-zigzag ul li .text{row-gap: 2.22vw; padding-inline: 4.444vw; width: 100%;}

   .sct-grid-fill .atc-text{text-align: left;}
   .grid-fill ul{grid-template-columns: repeat(1, 1fr); gap: 0;}
   .grid-fill ul li .item{aspect-ratio: 36 / 29;}
   .grid-fill ul li .text{padding: 6.67vw 4.444vw; flex-direction: column; row-gap: 2.22vw;}

   .qna-accordion ul li{column-gap: 4.444vw; padding: 6.67vw 0;}
   .qna-accordion ul li::after{width: 6.67vw;}
   .qna-accordion ul li .comm-desc{padding-top: 2.22vw;}
}