/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; color:inherit; }
img { vertical-align: top; }

/* common */
html { overflow-x: hidden; font:16px/1.6 neo; }
html.fix { overflow: hidden; }
.wrap { width:1400px; margin:0 auto; position: relative;  }
.wrap * { word-break: keep-all; }
.wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; }
.blind { position:absolute; width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; }
.fld { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.fl:after, .fld:after { display:none; }
.dn { display:none !important; }
.shd { box-shadow: 2px 2px 8px rgba(0,0,0,0.2); border-radius: 16px; overflow: hidden; }
.cp { color:#0eaec7; }
.himg:before { transition:0.3s; }
.himg:hover:before { transform: scale(1.05); }
.swiper-container { width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%; background-position: center;  background-size: cover; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 

/* header & footer */
#w_header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; transition:0.3s; height: 100px; overflow: hidden; color:#222; background: #fff; border-bottom:1px solid #ddd; }
#w_header.up { top:-110px; }

#w_header .wrap:before { content:""; width:800px; height: 100px; background: #0eaec7; position: absolute; right:-800px; top:0; }

#w_header h1 { padding-top: 32px;  }
#w_header .gnb { position: absolute; left: 240px; top: 42px; }
#w_header .gnb li { float:left; font:18px neob; margin-right: 55px; }
#w_header .tel { position: absolute; right:0; top:0; width: 400px; height: 100px; background: #0eaec7; color:#fff; }
#w_header .tel img { height: 50px; }
#w_header .tel p { margin-left: 20px; font-size:18px; }
#w_header .tel p strong { display: block; font:28px neoeb; }

.blank { height: 100px; }

#main { height: 680px; background: #000; border-radius: 0 0 100px 0; position: relative; overflow: hidden; }
#main:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height:100%; background: rgba(0,0,0,0.3); z-index:1; }
#main img { position: absolute; left:50%; top: calc(50% - 178px); z-index:5; width: 700px; }
#main video { width: 1920px; height: 1080px; }

#intro { padding-top: 160px; }
.msg h2 { font-size:40px; margin-top: 20px; font-weight: normal; line-height:1.4; }
.msg h2 strong { font-family: neoeb; display: block; }
.msg p { font-size:18px; line-height:1.8; color:#666; margin-top: 20px;  }
.msg p b { font-family: neoeb; color:#222; }
#intro .wrap { height: 375px; }
#intro .wrap > img { position: absolute; top:0; left:52%; border-radius: 100px 0 0 0; }

#intro ul { height: 280px; background: #0eaec7; color:#fff; }
#intro ul li { width: 400px; text-align: center; position: relative; }
#intro ul li:before { content:""; width: 2px; height: 140px; background: #fff; position: absolute; left: -1px; top:calc(50% - 70px); opacity: 0.4; }
#intro ul li:first-child:before { display: none; }
#intro ul li h3 { color:#ffdc50; font:24px neob; }
#intro ul li strong { font:44px neoeb; display: block; margin:20px 0; } 
#intro ul li p { font-size:18px; }

#service { padding:160px 0; }
#service ul { position: absolute; right:0; top:0; }
#service ul li { float:left; margin-left: 20px; position: relative; }
#service ul li:nth-child(2n) { margin-top: 50px; }
#service ul li > img { width: 200px; }
#service ul li p { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color:#fff; font:18px neob; }
#service ul li p span { margin-top: 14px; }
#service .wrap > img { position: absolute; z-index:-1; top:-80px; right:-200px; opacity: 0.3;}

#portfolio { text-align: center; background: #f8f8f8; padding:160px 0; }
#portfolio .pfSlide { margin-top: 60px; }
#portfolio .pfSlide .swiper-slide { position: relative; border-radius: 20px; overflow: hidden; background: #000; cursor: pointer; }
#portfolio .pfSlide .swiper-slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; opacity: 0.2; transition:1s opacity; }
#portfolio .pfSlide .swiper-slide-active img,
#portfolio .pfSlide .swiper-slide-prev img,
#portfolio .pfSlide .swiper-slide-next img { opacity: 1; }
#portfolio .pfSlide .swiper-slide p { position: absolute; left: 0; bottom: -52px; line-height:50px; background: #0eaec7; color:#fff; text-align: center; width: 100%; transition:0.3s; padding:0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#portfolio .pfSlide .swiper-slide-active p { bottom: 0; }
#portfolio .pfSlide > .btn { border:2px solid #fff; width: 40px; height: 40px; border-radius: 100px; margin-top: -22px; }
#portfolio .pfSlide > .btn:after { color:#fff; font-size:16px; font-weight: bold; }
#portfolio .pfSlide .swiper-button-prev { left:100px; }
#portfolio .pfSlide .swiper-button-next { right:100px; }

#qna { background:url(/_img/bg_qna.png) no-repeat center/cover; }
#qna .wrap { height: 500px; justify-content: space-between; }
#qna article { color:#fff; }
#qna article > img { filter: brightness(0) invert(1); }
#qna article p { margin-top: 10px; }
#qna article p, #qna article p b { color:#fff; }
#qna article a { width: 180px; height: 40px; background: #ffe479; color:#222; border-radius: 100px; margin-top: 40px; font-family: neoeb; }
#qna article a img { margin-right: 10px; }

#map { padding:160px 0;}
#map .wrap { justify-content: space-between; border-radius: 20px; overflow: hidden;  }
#map article { width: 600px; height: 380px; background: #0eaec7 url(/_img/window.png) no-repeat right -10px top -40px; padding-left: 50px; box-sizing: border-box; color:#fff; align-items:flex-start;  }
#map article > img { filter: brightness(0) invert(1); }
#map article ul { margin-top: 10px; }
#map article li { display:flex; align-items:center; justify-content:flex-start; margin-top: 20px;   }
#map article li figure { width: 40px; text-align: center; }
#map article li p { margin-top: 0; color:#fff; font-size:16px; }
#map article li p span { font-family: neoeb; }
#map .root_daum_roughmap .wrap_controllers { display: none; }
#map .map_border { border:none; }

footer { background: #ededed;  }
footer .wrap { justify-content: space-between; font-size:14px; height: 60px; }
footer ul li { float:left; }
footer ul li:after { content:"|"; margin:0 10px; }
footer ul li:last-child:after { display: none; }

.fblank { height: 100px; }

aside { height: 100px; background: #0eaec7; color:#f8ff34; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; border-top:1px solid #ddd; }
aside img { height: 60px; }
aside a { font:50px neoeb; }
aside a p { margin:0 20px; }

.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color:#fff; display:flex; align-items:center; justify-content:center; z-index: -1; display: none; }
.modal.on { z-index: 999; display: flex; }
.modal .box { width:800px; position: relative; max-height:80vh; overflow: auto; }
.modal .box .xi-close { top:0; font-size:20px; position: absolute; right:0; width: 40px; height: 40px; background: rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center;  }
.modal .box h3 { margin-bottom: 10px; padding-right: 50px; line-height:40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal .box img { width: 100%; }
.modal .box p { margin-top: 10px; padding-bottom: 20px; }