/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* PC Contents */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* loading */
#loading {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; display: block; text-align: center; transition: transform 0.7s cubic-bezier(0.49,0.47,0.48,0.79); z-index: 1000000000;} 
#loading div.loadcontents {position: absolute; bottom: 9%; left: 50%; margin-left: -35px; width: 70px;}
#loading div.loadcontents img {max-width: 80%; margin-bottom: 5px;}
#loading div.loadcontents span {font-family: "Noto Sans KR", sans-serif; font-size: 13px; color: #fff; font-weight: 500; text-shadow: 2px 2px 10px rgba(0,0,0,1);}

/* 인트로 메인 상단 타이틀 */
.intro-title {position: absolute; top: 50px; left: 50px; z-index: 10000;}
.title-contents {display: block; width: 100%; height: 100%; transform: rotate(-0.02deg);}
.title-contents span {font-family: "Noto Sans KR", sans-serif; font-size: 2.4rem; color: #fff; font-weight: 500; line-height: 25px; text-shadow: 2px 4px 8px rgba(0,0,0,0.2);}
.title-contents h2 {display: block; font-family: "Gmarket Sans", sans-serif; font-size: 3.2rem; color: #fff; font-weight: 700; line-height: 32px; margin: 10px 0 10px 0; text-shadow: 2px 4px 8px rgba(0,0,0,0.2);}
.title-contents p {font-family: "Noto Sans KR", sans-serif; font-size: 2rem; color: #fff; font-weight: 400; line-height: 24px; text-shadow: 2px 4px 8px rgba(0,0,0,0.2);}

/* 인트로 메인 영상 */
.intro-cover {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 300;}
.intro-cover::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 40%; background-image: linear-gradient(to bottom, rgba(0,0,0,.20), transparent); z-index: 310;}
.intro-cover::after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 10%; background-image: linear-gradient(to top, rgba(0,0,0,.64), transparent); z-index: 310;}
.intro-cover video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 300;}

/* 인트로 메인 바로가기 배너 */
.intro-banner {position: absolute; display: block; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%, -50%); z-index: 301;}
.intro-banner .inner {margin: 0 auto; width: 100%; max-width: 784px;}

.bann-contents {display: block;}
.bann-contents .bann-item {display: inline-block; width: 31.2rem; padding: 1rem; background: rgba(0,0,0,0.7);}
.bann-contents .bann-item:first-child {margin-right: 16%;}
.bann-contents .bann-item a {display: block; width: 100%; height: 100%;}
.bann-contents .bann-item a .thumbnail {position: relative; display: block; width: 100%; height: auto;}
.bann-contents .bann-item a .thumbnail figure {position: relative; float: left; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; z-index: 300;}
.bann-contents .bann-item a .thumbnail figure img {width: 100%; height: 100%; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}

.bann-contents .bann-item a .thumbnail .bann-title {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 310;}
.bann-contents .bann-item a .thumbnail .bann-title .tit-area {display: table; width: 100%; height: 100%;}
.bann-contents .bann-item a .thumbnail .bann-title .tit-area .tit-con {height: 130px; display: table-cell; vertical-align: middle; transform: rotate(-0.04deg); text-align: center;}
.bann-contents .bann-item a .thumbnail .bann-title .tit-area h3 {font-family: "Gmarket Sans", sans-serif; font-size: 2.8rem; color: #fff; font-weight: 700; line-height: 28px; letter-spacing: -0.8px; text-shadow: 2px 4px 10px rgba(0,0,0,0.8);}
.bann-contents .bann-item a .thumbnail .bann-title .tit-area span {display: inline-block; font-family: "Noto Sans KR", sans-serif; font-size: 2.6rem; color: #fff; font-weight: 400; line-height: 28px; margin-top: 5px; text-shadow: 2px 4px 10px rgba(0,0,0,0.8);}
.bann-contents .bann-item a .thumbnail .bann-title .tit-area span.data {font-size: 1.8rem; line-height: 22px;}

.bann-contents .bann-item a .iteminfo {float: left; width: 100%; height: 13rem; text-align: center; padding: 3rem 2rem 0;}
.bann-contents .bann-item a .iteminfo .btn-metabus {display: inline-block; width: 100%; font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 2.4rem; color: #fff; font-weight: 500; line-height: 25px; word-break: keep-all;}
.bann-contents .bann-item a .iteminfo .more-arrow {display: inline-block; width: 138px; height: 37px; font-family: "Noto Sans KR", sans-serif; font-size: 1.6rem; color: #fff; font-weight: 400; line-height: 35px; padding: 0 1rem; margin-top: 15px; background: rgba(255,255,255,0); border: 1px solid #fff;}
.bann-contents .bann-item a .iteminfo .more-arrow i.arrow {display: inline-block; width: 7px; height: 12px; margin-top: -3px; margin-left: 20%; vertical-align: middle;}

/* 인트로 메인 바로가기 배너 마우스 롤오버시 효과 */
.bann-contents .bann-item a:hover .thumbnail figure img, .bann-contents .bann-item a:focus .thumbnail figure img {-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.bann-contents .bann-item a:hover .iteminfo .more-arrow {background: rgba(100,28,6,1); border: 1px solid #441203;}

/* 인트로 메인 하단 컨텐츠 */
.intro-foot {position: absolute; bottom: -50px; left: 0; width: 100%; z-index: 302;}
.foot-contents {display: block; text-align: center; transform: rotate(-0.02deg);}
.foot-contents p {font-family: "Noto Sans KR", sans-serif; font-size: 1.6rem; color: #fff; font-weight: 400; line-height: 17px; word-break: keep-all; text-shadow: 2px 4px 10px rgba(0,0,0,0.8);}
.foot-contents .foot-logo {display: inline-block; width: 251px; margin-top: 2rem;}

/* 인트로1 디지털트윈 */
.intro-name {position: fixed; top: 10px; right: 5px; z-index: 300;}
.intro-name span {display: block; width: auto; font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 2rem; color: #fff; font-weight: 500; padding: 1.2rem 1.2rem 0.7rem; border: 1px solid #fff;}

.intro-cover2::after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 24%; background-image: linear-gradient(to top, rgba(0,0,0,.64), transparent); z-index: 5;}
.intro-banner .inner2 {max-width: 560px;}
.intrologo {margin-top: -50px;}
.intrologo img {width: 100%;}
.shortcuts-btns {display: none; width: 100%; margin-bottom: 100px;}
.shortcuts-btns a {display: inline-block; width: auto; height: 65px; font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.10deg); font-size: 1.8rem; color: #fff; font-weight: 500; line-height: 30px; padding: 0 25px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.4); border-radius: 10px; margin-top: -5px;}
.shortcuts-btns a.skip {margin-right: 10px;}
.shortcuts-btns a i.ico {display: inline-block; margin-right: 10px;}
.shortcuts-btns a i.ico img {vertical-align: middle; margin-top: -5px;}
.shortcuts-btns a:hover {background: #722608; border: 1px solid #5b1d05; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}

/* 인트로2 건축가들의 건축집단 전시 */
.intro-poster {display: block; padding: 0; margin-top: -30px; box-shadow: 2px 4px 10px rgba(0,0,0,0.6);}
.intro-poster img {width: 100%;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny_tablet 720,767 세로모드방향 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:720px) and (max-width:767px) {

.mobile {display: none;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny_tablet 768,1023 세로모드방향 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:768px) and (max-width:1023px) {

.mobile {display: none;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny_pc 1024,1279 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1024px) and (max-width:1279px) {

.intro-cover video {height: 120%; margin-top: -10%;}
.mobile {display: none;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny_pc 1280,1919 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1280px) and (max-width:1919px) {

.intro-cover video {width: 134%;}
.mobile {display: none;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny_pc 1920 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1920px) {

.mobile {display: none;}

}