/* font setting */
* {font-family: 'Pretendard','Noto Sans KR';}
body {background-color: #111; z-index: 100;}

html{ cursor: none; }
html, body {width: 100vw;}

textarea {resize: none;}

* { cursor: none; }
/* 마우스 트랙킹 div 설정 */
.mouse-circle { position:fixed; top:-100px; left:-100px; width:90px; height:90px; border-radius: 50%; background-color: #111; opacity: 0.5; transform:translate(-50%,-50%) scale(0.25); z-index: 1000; pointer-events: none; will-change: top left transform; transition: scale 2s; border:5px solid #fff;}

/* 마우스 트랙킹 hover 설정 */
.mouse-circle-hover {transform: translate(-50%,-50%) scale(0.5); transition:transform 0.5s;}
.mouse-circle-leave {transform: translate(-50%,-50%) scale(0.25); transition:transform 0.5s;}
.mouse-circle-click {transform: translate(-50%,-50%) scale(0.6); transition:transform 0.3s;}

/* 마우스 트랙킹 div 반응형 show, hide setting */
@media (max-width: 575px) {.mouse-circle {display:none;} * {cursor:auto;}}
@media (min-width: 576px) {.mouse-circle {display:none;} * {cursor:auto;}}
@media (min-width: 768px) {.mouse-circle {display:block;} * {cursor:none;}}

/* scroll bar setting */

body::-webkit-scrollbar{/* 스크롤바 막대 너비 설정 */width: 5px;} 
/* 스크롤바 막대 설정*/ 
body::-webkit-scrollbar-thumb{background-color: #111111; 
/* 스크롤바 막대 높이 설정 */
/* height: 1%;  */    
/* 스크롤바 둥글게 설정 */ 
/* border-radius: 10px; */} 
/* 스크롤바 뒷 배경 설정*/ 
body::-webkit-scrollbar-track{background-color: #ffffff;}
/* body.open::-webkit-scrollbar-thumb {background-color: #111;}
body.open::-webkit-scrollbar-track{background-color: #111;} */
/* modal gnb scroll bar hide */
.section-split-cont::-webkit-scrollbar {display: none;}
.section-split-cont {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/*=========================================================== 0. page common style ===========================================================*/
.page-intro-section {width:100%; height: auto; position: relative; padding: var(--page-intro-padding);}
/*=========================================================== 1. main page style ===========================================================*/
section.main-page {width: 100%; height: 100vh; z-index: 1; position: relative;}
section.main-page #intro {width: 100%; height: 100vh; overflow: hidden; position: fixed; z-index: 1;}
section.main-page #intro video {width: 100%; height: 100%; object-fit: cover;}
section.main-page .main-title {color: #fff; font-weight: 800; line-height: 1.5; position: fixed; z-index: 1; top:50%; left: 50%; transform: translate(-50%,-50%); width: max-content; text-align: center;}
section.main-page .main-title span {color: #fff;}

@media (min-width: 1200px) {.main-title {font-size: 8rem;} .main-title span {font-size: 3rem;}}
@media (max-width: 1199.98px) {.main-title {font-size: 6rem;} .main-title span {font-size: 3rem;}}
@media (max-width: 767.98px) {.main-title {font-size: 4rem;} .main-title span {font-size: 2rem;}}
@media (max-width: 575.98px) {.main-title {font-size: 2rem;}}
/*=========================================================== 2. about page style ===========================================================*/

@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/*=========================================================== 3. work page style ===========================================================*/
.work-title {padding-top: 200px; }
.work-subtitle {padding-bottom: 200px; margin: 0px !important;}

.skin-wrap {margin-bottom: 100px !important;}
#wrap {z-index: 2; position: relative;}
#wrap .container {max-width: unset; padding: 0px;}

.wrap.board-list.board_gallery,
.wrap.ct-board.board-write,
.wrap.ct-board.board-read,
.wrap.board-write.board-edit {width: 100%; max-width: var(--max-width); padding: 90px 0 0; margin: 0 auto;}

.board_gallery .div-cate {margin: 30px 0; justify-content: center; gap: 50px;}
.board_gallery .div-cate button {width: auto; min-width: auto; height: auto; border: 0; padding: 0; color: #9d9d9d; line-height: 1; font-weight: 500;}
.board_gallery .div-cate button:hover {background-color: transparent; border: 0; color: #111;}
.board_gallery .div-cate button:hover, .board_gallery .div-cate button:focus, .board_gallery .div-cate button:active {background: transparent; box-shadow: none !important;}
.board_gallery .div-cate button.active {color: #111;}

.service .session-bar .info a i,
.service .session-bar .info a strong,
.service .session-bar .txt {color: #fff;}

@media (max-width: 1799.98px) {.wrap.board-list.board_gallery {padding: var(--padding); padding-top: 90px; padding-bottom: 0;}}
@media (max-width: 1199.98px) {.wrap.board-list.board_gallery {padding: var(--padding); padding-top: 90px; padding-bottom: 0;}}
@media (max-width: 991.98px) {.board_gallery .div-cate {gap: 0 30px;}}
@media (max-width: 767.98px) {.wrap.board-list.board_gallery {padding-left: 10px; padding-right: 10px;}}
@media (max-width: 575.98px) {.wrap.board-list.board_gallery {padding-left: 15px; padding-right: 15px;} .wrap.board-list.board_gallery #postList {margin: 0 !important;}}

/* 하단 버튼 */
.aui-flex.board-btn.wrap {width:100%; padding: 0px;}
.board-btn {margin-bottom: 0px;}
.board-btn .ts-btn {margin: 0px;}
.board-reply {padding: 0px;}
@media (max-width:768px) {.board-btn {padding: 0px;}}
@media (max-width:576px) {
    
}

/* read page */
.wrap.ct-board.board-read .div-tbl {border: 0;}
.wrap.ct-board.board-read .div-tbl .tr {border: 0;}
.wrap.ct-board.board-read .div-tbl .tr .thm-subject {display:none;}
.wrap.ct-board.board-read .div-tbl .tr:first-child {display: none;}
.wrap.ct-board.board-read .board-image {border: 0;}
.aui-btn-large.btn-board.ts-btn.list-btn {border:1px solid #111; background-color: transparent; border-radius: 0; transition: all 0.3s; padding: 27px 60px; position: absolute; left: 50%; transform:translateX(-50%); height: unset; margin-top: 60px; width: unset;}
.aui-btn-large.btn-board.ts-btn.list-btn span {font-size: 40px; font-weight: 900;}
.aui-btn-large.btn-board.ts-btn.list-btn:hover, .aui-btn-large.btn-board.ts-btn.list-btn:focus, .aui-btn-large.btn-board.ts-btn.list-btn:active {color:#fff; background-color: #111;}
.aui-btn-large.btn-board.ts-btn.list-btn span:last-child {display: none;}
@media (max-width:576px) {
    .aui-btn-large.btn-board.ts-btn.list-btn {padding:10px 30px; width: 70%;}
    .aui-btn-large.btn-board.ts-btn.list-btn span {font-size: 20px;}
}

.overlay-view {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; display: none; padding: 0 10px; box-sizing: border-box;}
.overlay-view::before{content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.overlay-view .overlay-view-content {width: 75%; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.overlay-view .overlay-view-iframe {position: relative; height: 0; padding-bottom: 56.25%; background: #000;}
.overlay-view .overlay-view-iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgb(0 0 0 / 60%);}
.overlay-view .overlay-view-controller {display: flex; justify-content: flex-end; gap: 14px; padding: 8px 0 0;}
.overlay-view .overlay-view-controller a {color: rgba(255,255,255,.9); font-size: 14px;}
.overlay-view .overlay-view-controller a:hover {color: rgba(255,255,255,1);}
.overlay-view .overlay-view-navigation .overlay-view-close {background: url('/assets/img/common/overlay-view.png') no-repeat -99px -6px transparent; width: 30px; height: 30px; position: absolute; top: 25px; right: 25px; cursor: pointer; outline: 0; user-select: none;}
.overlay-view .overlay-view-navigation .overlay-view-close:hover {background-position: -99px -52px;}
.overlay-view .overlay-view-navigation .overlay-view-prev {background: url('/assets/img/common/overlay-view.png') no-repeat 0 0 transparent; width: 44px; height: 44px; position: absolute; top: 0; bottom: 0; left: 20px; cursor: pointer; outline: 0; user-select: none; margin: auto;}
.overlay-view .overlay-view-navigation .overlay-view-prev:hover {background-position: 0 -46px;}
.overlay-view .overlay-view-navigation .overlay-view-next {background: url('/assets/img/common/overlay-view.png') no-repeat -46px 0 transparent; width: 44px; height: 44px; position: absolute; top: 0; bottom: 0; right: 20px; cursor: pointer; outline: 0; user-select: none; margin: auto;}
.overlay-view .overlay-view-navigation .overlay-view-next:hover {background-position: -46px -46px;}
@media (max-width: 767.98px) {
    .overlay-view .overlay-view-content {width: 95%;}
}
/*=========================================================== 4. contact page style ===========================================================*/
.contact-intro p {color:#111;}
.contact-intro > .cont-container {position: relative; height:auto;}
.contact-intro-title {position: relative;}
.contact-desc {padding:200px 0px; background-color: #fff; z-index: 2; position: relative;}
.contact-desc p {color:#111;}
.contact-desc p:nth-child(2) {padding-bottom:90px;}
.contact-title {padding-bottom: 25px !important; margin-bottom: 0px;}
.contact-contents {height:auto; background-color: #fff; padding:0px 0px; position: relative; z-index: 2;}
.page-subdesc {margin-bottom: 0px;}
.contact-section-3 .eng-title{font-weight: 900; margin-bottom: 0px; letter-spacing: -1px;}
.contact-section-3 .ko-title{font-weight: 800; margin-bottom: 0px; letter-spacing: -1px;}

.contact-section-stage {margin: 0 auto !important;}
    @media (max-width: 768px) {.contact-line{grid-template-columns: 1fr !important;}}
.contact-input {width: 100%;}
.contact-line {display: grid; grid-template-columns: 1fr 1fr; column-gap:40px;}
.contact-line-4,.contact-line-6 {grid-template-columns: 1fr;}

.contact-line .contact-box {padding-bottom: 100px;}
.contact-line div {margin: 0px; padding:0px;}
.contact-email-label {padding:0px!important; padding-bottom: 25px !important;}
.contact-email-text-box {display: grid; grid-template-columns: 1fr 1fr; gap:25px;}
.email-address-input-box {position: relative;}
.contact-contents input {border:none; border-bottom:1px solid #ddd; box-sizing: border-box; height: 100%; padding-bottom: 10px; transition: border 0.3s;}
.contact-contents input:focus {border:none; border-bottom:1px solid #111;}
.contact-line .contact-checkbox-stage {padding-bottom: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 15px;}
    @media (max-width: 768px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr;}}
    @media all and (min-width:769px) and (max-width: 992px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr 1fr;}}
.contact-line .contact-checkbox-stage p {font-size: 16px; text-align: center; width: 100%; padding: 0px; margin: 0px; line-height: 0px;}
.contact-line .contact-checkbox-stage .contact-checkbox-box label {width:100% !important; height: 100% !important; background-color: transparent; border:1px solid #111; border-radius: 25px; padding: 15px 0px 12px; position: relative; overflow: hidden;}

.contact-checkbox-box .contact-cat-checkbox {height:0px; margin:0px; padding:0px;}
.contact-checkbox-box label {transition: all 0.3s;}
.contact-checkbox-box p {transition: all 0.3s;}

.contact-checkbox-box label.active {background-color: #111 !important;}
.contact-checkbox-box p.active {color:#fff !important;}

.contact-line-5 select {width:100%; border:none; border-bottom:1px solid #ddd; position: relative; background:url('/page/img/contact/down-arrow.png') no-repeat 98% 30%; padding-bottom: 10px;}
.contact-message-box {height: 200px; padding:15px; border:1px solid #ddd; transition:border 0.3s;}
.contact-message-box:focus{border:1px solid #111;}
.col-xs-12.agree-text-box {height:160px; border:1px solid #111; overflow-y: scroll; padding:20px; margin-bottom: 25px;}
.contact-line-6 .padding-line {position: relative; width: 100%; height: 100%;}
.contact-line-6 .padding-line::before {content: ''; position: absolute; height:20px; width:calc(100% - 7px); background: #fff; left:0; top:0; z-index: 1; border: 1px solid #111; border-bottom: 0; border-right: 0;}
.contact-line-6 .padding-line::after {content: ''; position: absolute; height:20px; width:calc(100% - 7px); background: #fff; left:0; bottom:25px; z-index: 1; border: 1px solid #111; border-top: 0; border-right: 0;}
.agree-text-box::-webkit-scrollbar {width:6px;}
.agree-text-box::-webkit-scrollbar-thumb {background: #111;}
.contact-agree-checkbox {display: block; border:1px solid #111 !important; width:20px; height:20px !important; float: left;}
.contact-agree-checkbox:checked {background-color: #111;}
.contact-agree-box span.agree-btn-txt {line-height: 27px; font-weight: 900;}
.contact-line-6 {padding-bottom: 200px;}
.contact-line-6 p {line-height: 26px;}
.btn-submit-box {display: flex; justify-content: center; align-items: center;}
.btn-submit-box .btn {border-radius: 50%; padding:15px 15px; background-color: transparent; width: 120px; height:120px; position: relative; border: 1px solid #111; overflow: hidden;}
.btn-submit-box .btn::before {content: ''; position: absolute; bottom:-100%; width: 100%; height:100%; background-color: #111; left:0px; transition: bottom 0.4s; z-index: -1;}
.btn-submit-box .btn:hover::before {bottom:0%;}
.btn-submit-box .btn:hover span {color:#fff;}
.btn-submit-box .btn span {color:#111; width:100%; height:100%; transition: all 0.3s; font-weight: 900;}

/*=========================================================== 5. page common class responsiv style ===========================================================*/
.page-intro-title {font-weight: 900 !important; letter-spacing: -6px;}
.page-intro-subtitle {letter-spacing: -2px; padding-bottom: 80px;}

@media (max-width: 576px){.page-intro-title {font-size: 100px !important;} .page-intro-subtitle {font-size: 30px !important;}}
@media (min-width: 577px){.page-intro-title {font-size: 120px !important;} .page-intro-subtitle {font-size: 55px !important;}}
@media (min-width: 768px){.page-intro-title {font-size: 160px !important;} .page-intro-subtitle {font-size: 70px !important;}}
@media (min-width: 992px){.page-intro-title {font-size: 160px !important;} .page-intro-subtitle {font-size: 100px !important;}}
@media (min-width: 1200px){.page-intro-title {font-size: 160px !important;} .page-intro-subtitle {font-size: 60px !important;}}

/* page description responsive font setting */
@media (max-width: 576px){.page-desc{font-size: 30px !important;} .page-subdesc{font-size: 16px !important;} .page-desc:nth-child(2) {margin-top: -20px !important;} .contact-desc .page-desc {letter-spacing: -0.04em;}}
@media (min-width: 577px){.page-desc{font-size: 50px !important;} .page-subdesc{font-size: 20px !important;} .page-desc:nth-child(2) {margin-top: -35px !important;} .contact-desc .page-desc {letter-spacing: -0.04em;}}
@media (min-width: 768px){.page-desc{font-size: 60px !important;} .page-subdesc{font-size: 24px !important;} .page-desc:nth-child(2) {margin-top: -40px !important;} .contact-desc .page-desc {letter-spacing: normal;}}