@charset "utf-8";

@font-face {
    font-family: 'SCDream';
    font-style: normal;
    font-weight: 900;
    src: local('SCDream9'),
        url('/design/common/css/s-core/S-CoreDream-9Black.eot'),
         url('/design/common/css/s-core/S-CoreDream-9Black.eot?#iefix') format('embedded-opentype'),
         url('/design/common/css/s-core/S-CoreDream-9Black.woff2') format('woff2'),
         url('/design/common/css/s-core/S-CoreDream-9Black.woff') format('woff'),
         url('/design/common/css/s-core/S-CoreDream-9Black.ttf') format('truetype'),
         url('/design/common/css/s-core/S-CoreDream-9Black.svg#S-CoreDream-9Black') format('svg');
  }

@keyframes bg_move {
	0% { background-position:center 0;}
	20% { background-position:center 30%;}
	50% { background-position:center 70%;}
	75% { background-position:center 30%;}
	100% { background-position:center 0;}
}

.arrow2 {position:relative;}
.arrow2:before {content:''; position:absolute; top:50%; width:6rem; height:6rem; border-bottom:2px solid #272727; border-right:2px solid #272727; transform:translateY(-50%) rotate(45deg);}

.sub_vis{width: 100%; height: 360rem; background: url('/design/smartairdome/img/sub/sub_vis02.jpg') no-repeat center top / cover; position: relative; animation: bg_move 20s linear;}

.sub_vis .center{text-align: center; color: #fff; padding: 100rem 50rem 0 0;}
.sub_vis .center h3{font-size: 43rem; font-family: 'GmarketSans';}
.sub_vis .center .loca{display: flex; align-items: center; justify-content: center; gap: 30rem; margin-top: 5rem; padding-left: 10rem;}
.sub_vis .center .loca a{font-family: 'Pretendard'; color: #fff; font-size: 17rem; font-weight: 500; position: relative;}

.sub_vis .center .loca a::before{position: absolute; content: ""; background: url('/design/smartairdome/img/sub/loca_arrow.png') no-repeat center center; width: 6rem; height: 8rem; left: -15rem; top: 50%; transform: translateY(-50%);}
.sub_vis .center .loca a.home{width: 18rem; height: 16rem; text-indent: -9999px; display: inline-block; background: url('/design/smartairdome/img/sub/loca_home.png') no-repeat center right;}
.sub_vis .center .loca a.home::before{display: none;}
.sub_vis .center .loca a:last-child{color: #f7eb32; font-weight: 600; }
.sub_vis .center .loca a:last-child::after{position: absolute; content: ""; background: #f7eb32; width: 100%; height: 1rem; bottom: 0; left: 0;}

.sub_vis p{position: absolute; left: 2%; bottom: -6rem; color: #fff; font-size: 80rem; line-height: 1; text-transform: uppercase; opacity: 0.2; z-index: 20; font-weight: 900;}

.util-wrap{max-width: 1300px; width: 100%; bottom: 0; left: 50%; transform: translateX(-50%); position: absolute;}
.util{position: absolute; right: 0; bottom: 15rem; display: flex; gap: 6rem;}
.util > a{display: block; text-indent: -99999px; background: url('/design/smartairdome/img/sub/util.png') no-repeat; width: 42rem; height: 42rem; border: 1px solid #fff; border-radius: 14px; background-position: -4px -6px;}
.util > a.minus{background-position-x: -55px;}
.util > a.print{background-position-x: -155px;}
.util > a.share{background-position-x: -107px;}

.util .icon {display: none; position:absolute; top: -148rem; right: 0; }
.util .icon > a{display: block; text-indent: -99999px; background: url('/design/smartairdome/img/sub/util_share.png') no-repeat; width: 42rem; height: 42rem; border-radius: 14px; background-position: -1px 0; background-color: #455e99; margin-top: 5rem;}
.util .icon > a.twitter {background-color:#000; background-position:-44px 0;}
.util .icon > a.kakao {background-color:#f2d711; background-position:-86px 0;}

.wrap2{max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 10rem;}


#snb{margin-top: 45rem;}
.mMenu02{display: none;}

#snb .depth02{display: table; table-layout: fixed; width: 100%; height: 58rem; border-radius: 16rem; background: #f8f8f8;}
#snb .depth02 > li{display: table-cell; text-align: center;}
#snb .depth02 > li > a{display: block; line-height: 58rem; border-radius: 16rem;font-family: 'Pretendard'; font-size: 21rem; font-weight: 500; color: #363636; position: relative;}
#snb .depth02 > li > a::before{position: absolute; content: ""; bottom: -10rem; left: 50%; transform: translateX(-50%); transition: all 0.3s; opacity: 0; border-top: 10rem solid #1b5c1c; border-left: 10rem solid transparent; border-right: 10rem solid transparent;}
#snb .depth02 > li.on > a:before,
#snb .depth02 > li:hover > a:before {opacity:1;}

#snb .depth02 > li > a::after{position: absolute; content: ""; background: #e6e6e6; height: 22rem; width: 1rem; left: 0; top: 50%; transform: translateY(-50%);}
#snb .depth02 > li:first-child > a::after{display: none;}
#snb .depth02 > li.on > a::after,
#snb .depth02 > li:hover > a::after{display: none;}

#snb .depth02 > li.on > a,
#snb .depth02 > li:hover > a{background: #1b5c1c; color: #fff; font-weight: 600; box-shadow: 0 3rem 17rem 0rem rgb(0, 0, 0, 0.1);}

/* 서브메뉴타겟 */
#snb .depth02 > li > a[target="_blank"] span{position: relative; display: inline-block; padding-right: 20rem;}
#snb .depth02 > li > a[target="_blank"] span::before{position: absolute; content: ""; background: url('/design/smartairdome/img/layout/blank_all.png') no-repeat right center; width: 13rem; height: 14rem; background-position: 0, -14px; right: 0; top: 50%; transform: translateY(-50%);}
#snb .depth02 > li > a[target="_blank"]:hover span::before{background-position: -13px, 0;}

@media all and (max-width: 1660px) {
    .sub_vis p{font-size: 60rem;}
    .util{bottom: 10rem; right: 10rem;}
}
@media all and (max-width: 1130px) {
    .sub_vis{height: 300rem; background: url('/design/smartairdome/img/sub/sub_vis02.jpg') no-repeat 50% center / cover;}
    .sub_vis .center{padding: 80rem 0;}
    .sub_vis p{display: none;}
    #snb .depth02 > li > a{font-size: 22rem;}
}
@media all and (max-width: 1023px) {
    .sub_vis .center{padding: 50rem 0;}
    .util{bottom: 63rem;}
    .mMenu02{display: block; }
    .mMenu02 a{display: block; position: relative; background: #1b5c1c; color: #fff; padding: 0 20rem; font-weight: 500;  font-size: 16rem; line-height: 50rem; border-radius: 10rem 10rem 0 0;}
    .mMenu02 a .arrow2 {display:block;}
	.mMenu02 a .arrow2:before {right:0; margin-top:-1rem; border-color:#fff;}
	.mMenu02.on a .arrow2:before {margin-top:2rem; transform:translateY(-50%) rotate(-135deg)}
    #snb{margin-top: -50rem;}
    #snb .depth02{display: none; table-layout: auto; flex-wrap: wrap; height: auto; border-radius: 0; }
    #snb .depth02 > li{width: 100%; display: block; text-align: left; border-bottom: 1px dashed #d5d5d5;}
    #snb .depth02 > li:last-child{border-bottom: none;}
    #snb .depth02 > li > a{line-height: 50rem; font-size: 17rem; padding: 0 20rem; background: none;}
    #snb .depth02 > li.on > a, #snb .depth02 > li:hover > a{background: none; color: #363636; border: none; box-shadow: none;}
    #snb .depth02 > li > a::after{display: none;}
    #snb .depth02 > li > a::before{display: none;}
    #snb .depth02 > li.on > a, #snb .depth02 > li:hover > a{font-weight: 700; color: #1b5c1c;}
}
@media all and (min-width:1024px) {
	#snb .depth02 {display:table !important;}
}

@media all and (max-width: 780px) {
    .sub_vis{height: 280rem;}
    .sub_vis .center h3{font-size: 38rem;}
}
@media all and (max-width: 480px) {
    .sub_vis{height: 230rem;}
    .sub_vis .center h3{font-size: 30rem;}
    .sub_vis .center .loca a{font-size: 15rem;}
    .util{display: none;}
}