@charset "utf-8";
@import "header.css";
@import "footer.css";

.contTitle{font-family: "Poppins", serif;font-size:9rem;color:#fff;font-weight:500;letter-spacing:-0.02em;margin-left:-6px;}

/* Sub Banner */
.subTop{position:relative;z-index:21;}
.subTop .visualImg{width:100%;height:280px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;overflow:hidden;letter-spacing:-0.05em;background:#1b4894;border-bottom:1px solid #325b9f;}
.subTop .visualImg h2{font-size:4.0rem;line-height:100%;text-transform:uppercase;font-weight:700;}
.subTop .visualImg p{margin-top:14px;font-size:2.3rem;}
.subTop .visualImg p br{display:none;}

/* Sub Nav */
#lnb{border-bottom:1px solid #d8d8d8;}
#lnb dl dt{display:none;}
#lnb dl dd{max-width:1261px;text-align:center;font-size:0;margin:0 auto;}
#lnb dl dd ul{display:flex;}
#lnb dl dd ul li{position:relative;flex:1 0 auto;border:1px solid #d8d8d8;border-top:0;border-bottom:0;margin-left:-1px;}
#lnb dl dd ul li:first-child{margin-left:1px;}
#lnb dl dd ul li a{display:block;color:#424242;font-size:1.7rem;padding:11px 0;font-weight:300;}
#lnb dl dd ul li.depth02Active a{background:#141a98;color:#fff;}
#lnb > span{display:none;}

/* Contnet */
/*#subCon{margin:35px auto 100px;}*/
#subCon .pageTitle{padding-bottom:45px;font-size:3.5rem;color:#888;font-weight:700;text-align:center;}
#membersGroup #subCon{max-width:100%;}
.pageCont{max-width:1370px;margin:0 auto;}
.pageFull{width:100vw;position:relative;left:0;}

/* Layer */
.layerDesign{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;background:rgba(0,0,0,.9);display:none;}

.layerDesign .layerSwiper{height:100%;max-width:1370px;margin:0 auto;position:relative;}
.layerDesign .layerSwiper .info{height:100%;overflow:hidden;position:relative; }
.layerDesign .layerSwiper ul{width:100%;height:100%;}
 
.layerDesign .swiper-slide{width:100% !important;display:flex;align-items:center;justify-content:center;}
.layerDesign .swiper-slide iframe{opacity:0;}
.layerDesign .swiper-slide.swiper-slide-active iframe{opacity:1;} 
.layerDesign .swiper-slide img{opacity:0;max-height:95vh;}
.layerDesign .swiper-slide.swiper-slide-active img{opacity:1;} 
.layerDesign .layerSwiper .swiper-wrapper{}
.layerDesign .close{position:absolute;top:0;right:0;z-index:10;}

.layerDesign .layerSwiper .swiper-button-prev,
.layerDesign .layerSwiper .swiper-button-next{z-index:9;}
.layerDesign .layerSwiper .swiper-button-prev{left:-130px;}
.layerDesign .layerSwiper .swiper-button-next{right:-130px;}
.layerDesign .layerSwiper .swiper-button-prev:after, .layerDesign .layerSwiper .swiper-button-next:after{width:21px;height:35px;font-size:0;}
.layerDesign .layerSwiper .swiper-button-prev:after{background-image:url('/img/common/layer_prev.png');}
.layerDesign .layerSwiper .swiper-button-next:after{background-image:url('/img/common/layer_next.png');}

.iframeBox{width:100% !important;height:0;padding-top:54%;position: relative;}
.iframeBox iframe{width:100%;height:100%;position: absolute;top:0;left:0;}


/* PORTFOLIST MENU */
.tabList{height:50px;padding:4px 5px;background:rgba(255,255,255,.05);display:inline-block;border-radius:25px;}
.tabList ul{height:100%;display:inline-flex;align-items:center;}
.tabList ul li{height:100%;}
.tabList ul li a{height:100%;display:inline-block;padding:0 25px;opacity:.35;font-weight:500;color:#fff;border-radius:21px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.5rem;position:relative;}
.tabList ul li a span{position:absolute;left:0;top:0;z-index:-1;padding:inherit;font-weight:700;white-space:nowrap;opacity:0;}
.tabList ul li.active a{background:#fff;opacity:1;font-weight:700;color:#000;}
.tabList ul li a#bo_cate_on{background:#fff;opacity:1;font-weight:700;color:#000;}

.portfolio{padding:10.657% 0 10.95%;position:relative;}
.portfolio .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4.599%;}
.portfolio .cont .portfolioList{display:flex;flex-wrap:wrap;align-items:flex-start;min-height:586px;}
.portfolio .cont .portfolioList > li.empty{width:100% !important;height:293px;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;margin:0 !important;}
.portfolio .cont .portfolioList li dl dt{font-size:1.8rem;font-weight:700;color:#fff;margin:18px 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.portfolio .cont .portfolioList li dl dd{font-weight:500;color:#878ebb;}
.portfolio .cont .portfolioList.col05{min-height:auto;}
.portfolio .cont{position:relative;}

.portfolio .portfolioMenu{width:180px;position:absolute;right:calc(100% + 60px);top:345px;display:none;}
.portfolio .portfolioMenu dl dt{display:none;color:#fff;font-size:1.5rem;font-weight:500;color:#fff;position:relative;}
.portfolio .portfolioMenu dl dt a{border-bottom:1px solid #fff;display:inline-block;}
.portfolio .portfolioMenu dl dt:before{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;margin-right:9px;content:'';}
.portfolio .portfolioMenu ul{text-align:right;}
.portfolio .portfolioMenu ul li{font-size:1.5rem;font-weight:500;color:#878ebb;text-align:right;display:flex;align-items:center;justify-content:flex-end;}
.portfolio .portfolioMenu ul li a{border-bottom:1px solid transparent;}
.portfolio .portfolioMenu ul li + li{margin-top:25px;}
.portfolio .portfolioMenu ul li.active:before{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;margin-right:9px;content:'';}
.portfolio .portfolioMenu ul li.active a{border-bottom:1px solid #fff;color:#fff;}

@media all and (min-width:1921px){
.layerDesign .close{position:absolute;top:0;right:auto;left:calc(50% + 870px);z-index:10;}
}

@media all and (max-width:1830px){
.portfolio .top{display:block;}
.portfolio .portfolioMenu{width:100%;position:relative;right:auto !important;top:auto !important;background:rgba(255,255,255,.05);margin-bottom:30px;padding:20px;cursor:pointer;}
.portfolio .portfolioMenu dd{width:100%;display:none;padding:30px 0;position:absolute;left:0;top:57px;background:rgba(255,255,255,.9);z-index:99;}
.portfolio .portfolioMenu ul li{display:block;text-align:left;padding:0 20px;}
.portfolio .portfolioMenu ul li.active:before{display:none;}
.portfolio .portfolioMenu ul li.active a{color:#878ebb;border-color:transparent;}
.portfolio .portfolioMenu ul li:hover{color:#000;}

.portfolio .portfolioMenu:before,
.portfolio .portfolioMenu:after{width:11px;height:2px;background:#fff;position:absolute;top:30px;content:"";}
.portfolio .portfolioMenu:before{right:26px;transform:rotate(-135deg);}
.portfolio .portfolioMenu:after{right:19px;transform:rotate(135deg);}
.portfolio .portfolioMenu dl dt{display:block;}

.layerDesign .layerSwiper .swiper-button-prev{left:-5vw;}
.layerDesign .layerSwiper .swiper-button-next{right:-5vw;}
}

@media all and (max-width:1600px){
.layerDesign .layerSwiper .swiper-button-prev{left:-.5vw;}
.layerDesign .layerSwiper .swiper-button-next{right:-.5vw;}
}



@media all and (max-width:1410px){
/* Contnet */
.pageCont{max-width:100%;padding-left:20px !important;padding-right:20px !important;}

.layerDesign .layerSwiper{padding:0 20px;}
.layerDesign .layerSwiper .swiper-button-prev{left:40px;}
.layerDesign .layerSwiper .swiper-button-next{right:40px;}
.layerDesign .layerSwiper .swiper-button-prev,
.layerDesign .layerSwiper .swiper-button-next{width:50px;}
.layerDesign .layerSwiper .swiper-button-prev:after, .layerDesign .layerSwiper .swiper-button-next:after{width:50px;height:50px;border-radius:50%;background-color:rgba(255,255,255,.1);background-repeat: no-repeat;background-size:14px auto;}
.layerDesign .layerSwiper .swiper-button-prev:after{background-position:left 16px center;}
.layerDesign .layerSwiper .swiper-button-next:after{background-position:right 16px center;}
}

@media all and (max-width:1279px){
/* Sub Banner */
.subTop .visualImg{height:260px;}

/* Sub Nav */
#lnb{width:100%;position:absolute;left:0;bottom:0;border:0;background:#333;}
#lnb .mNavTitle{display:block;padding:15px 20px;font-size:1.5rem;color:#fff;position:relative;cursor:pointer;}
#lnb .mNavTitle:before,
#lnb .mNavTitle:after{width:11px;height:2px;background:#fff;position:absolute;top:50%;content:"";}
#lnb .mNavTitle:before{right:17px;transform:rotate(-135deg);}
#lnb .mNavTitle:after{right:10px;transform:rotate(135deg);}
#lnb dl dd{width:100%;display:none;position:absolute;left:0;top:100%;background:#fff;text-align:left;}
#lnb dl dd ul{display:block;border-bottom:1px solid #ccc;}
#lnb dl dd ul li{padding:7px 20px;border:0;margin:0;}
#lnb dl dd ul li:nth-child(n+2){border-top:1px solid #cbcbcb;}
#lnb dl dd ul li:first-child{margin-left:0;border-top:0;}
#lnb dl dd ul li a{color:#142441;padding:3px 0 3px 10px;font-size:1.5rem;font-weight:400;position:relative;display:inline-block;}
#lnb dl dd ul li a:before{position:absolute;left:0;top:50%;content:"-";line-height:0;}
#lnb dl dd ul li.depth02Active a{background:none;color:#142441;font-weight:700;}

/* PORTFOLIST MENU */
.portfolio .portfolioMenu:before, .portfolio .portfolioMenu:after{top:27px;}

.portfolio .cont .portfolioList{min-height:550px;}
.portfolio .cont .portfolioList > li.empty{height:275px;}


}

@media all and (max-width:767px){
.contTitle{font-size:6.5rem;margin-left:0;}

/* Sub Banner */
.subTop .visualImg{height:200px;}
.subTop .visualImg p br{display:block;}

/* Contnet */
/*#subCon{margin:20px auto 50px;}*/
#subCon .pageTitle{padding-bottom:20px;}

/* PORTFOLIST MENU */
.tabList{height:46px;}
.tabList ul li a{padding:0 15px;}

.portfolio{padding:73px 0 75px;}
.portfolio .portfolioMenu{padding:15px;margin-bottom:15px;}
.portfolio .portfolioMenu:before{right:21px;}
.portfolio .portfolioMenu:after{right:14px;}
.portfolio .portfolioMenu dd{padding:20px 0;top:46px;}
.portfolio .portfolioMenu dl dt:before{width:5px;height:5px;margin-right:6px;margin-bottom:2px;}
.portfolio .portfolioMenu ul li{padding:0 15px;}
.portfolio .portfolioMenu:before, .portfolio .portfolioMenu:after{top:23px;}

.portfolio .cont .portfolioList{min-height:567px;}
.portfolio .cont .portfolioList > li.empty{height:283.5px;}

.layerDesign .layerSwiper .swiper-button-prev{left:30px;}
.layerDesign .layerSwiper .swiper-button-next{right:30px;}
.layerDesign .layerSwiper .swiper-button-prev,
.layerDesign .layerSwiper .swiper-button-next{width:40px;}
.layerDesign .layerSwiper .swiper-button-prev:after, .layerDesign .layerSwiper .swiper-button-next:after{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.1);background-repeat: no-repeat;background-size:10px auto;box-shadow:2px 2px 3px rgba(0,0,0,.2);}
.layerDesign .layerSwiper .swiper-button-prev:after{background-position:left 14px center;}
.layerDesign .layerSwiper .swiper-button-next:after{background-position:right 14px center;}
.layerDesign .close{width:60px;}
}

@media all and (max-width:501px){
.portfolio .cont .portfolioList{min-height:419px;}
.portfolio .cont .portfolioList > li.empty{height:209.5px;}
}

@media print{
#header .headerWrap{position:relative;}
}