@charset "utf-8";

.scrollMotion{opacity: 0;}
.listWrap .list .img{position: relative;}
.listWrap .list .img img{position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}

/* 메인비주얼 */
#mainVisual{overflow: hidden; position: relative; background: #201f1a; color: #fff;}
#mainVisual > img{position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%);}
#mainVisual .slogan h2{padding: 128px 0 30px; line-height: 130%; font-size: 70px; font-weight: 700;}
#mainVisual .slogan h2 span{font-size: 0.857em; font-weight: 400;}
#mainVisual .slogan h2 + p{opacity: 0.8; line-height: 140%; font-size: 30px; font-weight: 300;}
#mainVisual .slogan a{opacity: 0.8; display: inline-block; width: 307px; height: 87px; line-height: 85px; box-sizing: border-box; border: 1px solid #fff; border-radius: 64px; margin: 78px 0 137px; font-size: 25px; color: #fff; text-align: center; transition: 0.3s;}

#mainVisual .slogan a:hover{opacity: 1; border-color: #333; background: #333;}

/* 인성플렉스 소개 */
#info{display: flex; justify-content: space-between; padding-top: 120px; padding-bottom: 150px;}
#info h2{line-height: 140%; font-size: 60px; font-weight: 400;}
#info h2 em{position: relative; font-weight: 700;}
#info h2 em:before{z-index: -1; opacity: 0.2; content: ''; position: absolute; left: 0; bottom: 6px; width: 100%; height: 22px; background: #005FB3;}
#info .txt h3{line-height: 170%; padding: 26px 0 0; font-weight: 400;}

/* 인성플렉스 소개 슬라이더 */
#infoSlider{position: relative;}
#infoSlider:before{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 480px; background: #005FB3;}

#infoSlider .list{display: flex; justify-content: space-between; flex-direction: row-reverse;}
#infoSlider .list .img{width: 440px; height: 440px;}
#infoSlider .list .txt{line-height: 130%; padding: 180px 0 197px; font-size: 30px; color: #fff;}
#infoSlider .list .txt .tit{line-height: 150%; padding: 0 0 16px; font-size: 55px; font-weight: 500;}
#infoSlider .list .txt .tit span{color: #FFD62F;}

#infoSlider .slick-arrow{opacity: 0.7; position: absolute; bottom: 218px; left: -166px; width: 48px; height: 48px; box-sizing: border-box; border-top: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 0; text-indent: -999px; transform: rotate(-135deg);}
#infoSlider .slick-arrow.slick-next{left: auto; right: -166px; transform: rotate(45deg);}

.infoSliderPagingWrap{position: absolute; bottom: 120px; left: 0; display: flex; align-items: center;}
.infoSliderPaging > *{display: inline-block; font-weight: 500; color: #fff;}
.infoSliderPaging .total{opacity: 0.6; position: relative; padding: 0 0 0 66px;}
.infoSliderBtn{position: relative; width: 40px; height: 40px; border-radius: 50%; margin: 0 0 0 20px; background: #023e73;}
.infoSliderBtn:before{content: ''; position: absolute; top: 14px; left: 18px; border-left: 9px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
.infoSliderBtn.on:before{top: 15px; left: 17px; width: 4px; height: 12px; border-top: none; border-bottom: none; border-left-width: 2px; border-right: 2px solid #fff;}

.infoSliderPagingWrap .sliderProgress {position: absolute; top: 21px; left: 26px; width: 50px; height: 1px; background: rgba(255,255,255,0.6);}
.infoSliderPagingWrap .sliderProgress .progress {width: 0; height: 1px; background: #fff;}

/* 시작순서 */
#process{padding: 130px 0 180px;}
#process > .txt{position: relative; margin: 0 0 98px;}
#process > .txt:before,
#process > .txt:after{content: ''; position: absolute; bottom: 0;  left: 50%; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #a5bad8; border-radius: 50%; background: #fff; transform: translateX(-50%);}
#process > .txt:after{bottom: 4px; width: 12px; height: 12px; background: #a5bad8;}
#process > .txt p{line-height: 150%; font-weight: 500; text-align: center;}
#process > .txt .t2{padding: 12px 0 30px; font-size: 30px;}
#process > .txt .t3{font-weight: 400; color: #666;}
#process > .txt .t3:after{content: ''; display: block; width: 2px; height: 150px; margin: 46px auto 0; background: #a5bad8;}

#process .list{display: flex;}
#process .list .img{width: 45.3%; padding: 43.8% 0 0;}
#process .list .txt{padding: 133px 0 245px 7.8%;}

#process .list .txt .t2{padding: 12px 0 0; line-height: 150%; font-size: 30px;}
#process .list .txt .t2 span{font-size: 42px; font-weight: 700;}

#process .slick-dots{position: absolute; top: 50px; left: 0; right: 0; display: flex; box-sizing: border-box; padding: 0 0 0 53%;}
#process .slick-dots > li + li{margin: 0 0 0 10px;}
#process .slick-dots > li button{opacity: 0.5; width: 40px; height: 40px; line-height: 38px; box-sizing: border-box; border: 1px solid #1D539D; border-radius: 50%; font-size: 20px; color: #1D539D; text-align: center;}

#process .slick-dots > li.slick-active button{opacity: 1; border-color: #1D539D; background: #1D539D; color: #fff; font-weight: 500;}

#process .slick-arrow{z-index: 1; position: absolute; top: 338px; left: 55%; transform: translateX(-50%); width: 40px; height: 40px; box-sizing: border-box; border: 1px solid #DCDCDC; border-radius: 50%; font-size: 0; text-indent: -999px; transition: 0.3s;}
#process .slick-arrow:before{content: ''; position: absolute; top: 13px; left: 15px; width: 13px; height: 13px; box-sizing: border-box; border-top: 1px solid #999; border-right: 1px solid #999; transform: rotate(-135deg);}
#process .slick-arrow.slick-next{z-index: 0; margin: 0 0 0 56px;}
#process .slick-arrow.slick-next:before{left: 10px; transform: rotate(45deg);}

#process .slick-arrow:hover{border-color: #333; background: #333;}
#process .slick-arrow:hover:before{border-color: #fff;}

#process .processSlider{position: relative;}
#process .downLoad{position: absolute; bottom: 0; left: 0; right: 0; display: flex; box-sizing: border-box; padding: 0 0 0 53.6%;}
#process .downLoad a{display: block; width: 290px; box-sizing: border-box; padding: 24px 20px; border-radius: 8px; background: #F5F5F5; text-align: center;}
#process .downLoad a + a{margin: 0 0 0 20px;}
#process .downLoad a img{width: 100%;}

/* 게시판 */
#borad{background: #F9F9F9;}
#borad .more{display: inline-block; height: 47px; line-height: 45px; box-sizing: border-box; padding: 0 26px; border: 1px solid #DCDCDC; border-radius: 24px; margin: 30px 0 0; background: #fff; font-size: 16px; color: #000; transition: 0.3s;}
#borad .more:hover{border-color:  #333; background: #333; color: #fff;}

#borad .link{display: flex; align-items: center; width: 100%; height: 341px; padding: 75px 0 98px;}
#borad .link > li{position: relative; width: 33.33%; box-sizing: border-box; padding: 0 3.8%; vertical-align: middle;}
#borad .link > li:nth-child(2):before,
#borad .link > li:nth-child(2):after{content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 280px; background: #DCDCDC; transform: translateY(-50%);}
#borad .link > li:nth-child(2):after{left: auto; right: 0;}
#borad .link > li:last-child{padding-right: 0;}
#borad .link > li h2{padding: 0 0 30px; font-family: 'Roboto'; font-size: 20px; letter-spacing: 0; color: #666;}
#borad .link .tit{overflow: hidden; padding: 0 0 15px; font-size: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap;}
#borad .link .txt{overflow: hidden; line-height: 1.5; height: 3em; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px;}
#borad .link .date{display: block; padding: 21px 0 0; font-size: 15px; color: #999;}

#borad .location .con{display: flex; align-items: center; box-sizing: border-box; margin: -20px 0 0;}
#borad .location .con ul li{padding:0 0 10px 20px; line-height: 160%; font-size: 16px;}
#borad .location .con img{display:block; box-sizing: border-box; border: 1px solid #DCDCDC; border-radius: 5px;}

/* 유튜브 */
#youtube{padding: 120px 0 150px;}
#youtube .inner{display: flex; justify-content: space-between;}
#youtube .inner li{width: 600px;}
#youtube .inner li .media{overflow: hidden; position: relative; width: 100%; padding-top: 56%; border-radius: 20px;}
#youtube .inner li .media iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#youtube .inner li p{padding: 25px 0 0; text-align: center; font-size: 25px;}

@media all and (max-width:1920px) {
    #mainVisual > img{left: auto; right: -150px; transform: none;}
}

@media all and (max-width:1680px) {
    #infoSlider .slick-arrow{display: none !important;}
}

@media all and (max-width:1360px) {
    #process .downLoad a{width: 230px;}

    #borad .link{display: block; height: auto; padding: 15px 0 0;}
    #borad .link > li{width: 100%; padding: 40px 0;}
    #borad .link > li:nth-child(2):before{top: 0; width: 100%; height: 1px;}
    #borad .link > li:nth-child(2):after{top: auto; bottom: 0; width: 100%; height: 1px;}

    #borad .location .con{margin: 0;}

    #youtube .inner{display: block;}
    #youtube .inner li{margin: 0 auto;}
    #youtube .inner li + li{padding: 40px 0 0;}
}

@media all and (max-width:1280px) {
    .infoSliderPagingWrap{left: 30px;}
}

@media all and (max-width:1024px) {
    #info{display: block;}
    #info h2 br:last-of-type{display: none;}
    #info .txt img{display: none;}
    #info .txt h3{padding: 40px 0 0;}

    #process .list{display: block;}
    #process .list .img{width: 396px; height: 382px; padding: 0; margin: 0 auto;}
    #process .list .txt{padding: 110px 0 0; text-align: center;}

    #process .downLoad{position: static; justify-content: center; padding: 50px 0 0;}
    #process .downLoad a{width: auto; padding: 0; background: none;}
    #process .downLoad a img{display: none;}
    #process .downLoad a img.m{display: block !important;}

    #process .slick-arrow{left: 30px; width: 60px; height: 60px; border: none; margin: 0 !important;}
    #process .slick-arrow:before{left: 23px; width: 33px; height: 33px;}
    #process .slick-arrow.slick-next{left: auto; right: -20px;}
    
    #process .slick-arrow:hover{background: #fff;}
    #process .slick-arrow:hover:before{border-color: #333;}

    #process .slick-dots{top: 399px; right:auto; left: 50%; transform: translateX(-50%); padding: 0;}
}

@media all and (max-width:768px) {
    #mainVisual .slogan h2{padding: 75px 0 25px; font-size: 50px;}
    #mainVisual .slogan h2 + p{font-size: 20px;}
    #mainVisual .slogan a{width: 200px; height: 58px; line-height: 56px; margin: 50px 0 86px; font-size: 18px;}

    #info{padding-top: 60px; padding-bottom: 80px;}
    #info h2{font-size: 40px;}
    #info h2 em:before{bottom: 0; height: 20px;}

    #infoSlider:before{height: 280px;}
    #infoSlider .list .img{width: 270px; height: 270px;}
    #infoSlider .list .txt{padding: 100px 0 109px; font-size: 1rem;}
    #infoSlider .list .txt .tit{font-size: 35px;}

    .infoSliderPagingWrap{bottom: 67px;}
    .infoSliderPagingWrap .sliderProgress{top: 11px;}

    .infoSliderBtn,
    #process > .txt:before,
    #process > .txt:after,
    #process > .txt .t3:after{display: none;}

    #process{padding: 60px 0 80px;}
    #process > .txt{margin: 0 0 50px;}
    #process > .txt p{font-size: 16px;}
    #process > .txt .t2{padding: 15px 0 30px; font-size: 25px;}
    
    #process .list .txt .t1{font-size: 16px;}
    #process .list .txt .t2{font-size: 25px;}
    #process .list .txt .t2 span{font-size: 35px;}

    #youtube{padding: 60px 0 80px;}
    #youtube .inner li{width: 439px;}
    #youtube .inner li p{padding: 20px 0 0;}
}

@media all and (max-width:700px) {
    #infoSlider:before{height: 370px;}
    #infoSlider .list{display: block;}
    #infoSlider .list .img{margin: 0 auto;}
    #infoSlider .list .txt{padding: 16px 0 20px; text-align: center;}
    #infoSlider .list .txt br,
    #process .slick-arrow{display: none !important;}

    .infoSliderPagingWrap{position: static; width: max-content; padding: 0 0 26px; margin: 0 auto;}
    .infoSliderPagingWrap .sliderProgress{top: auto; bottom: 35px; left: 50%; transform: translateX(-50%);}
}

@media all and (max-width:500px) {
    #mainVisual .slogan h2{padding: 70px 0 25px; font-size: 40px;}
    #mainVisual .slogan h2 span{font-size: 25px;}
    #mainVisual .slogan h2 + p{font-size: 18px;}
    #mainVisual .slogan a{margin: 66px 0 80px;}

    #info{padding-bottom: 70px;}
    #info h2{font-size: 35px;}
    #info .txt h3{padding: 35px 0 0;}

    #infoSlider .list .txt .tit{font-size: 25px;}

    #process{padding: 60px 0;}
    #process .list .img{width: 300px; height: 300px;}
    #process .list .txt{padding: 90px 0 0;}
    #process .list .txt .t2{padding: 15px 0 0;}
    #process .slick-dots{top: 310px;}
    #process .downLoad{display: block; padding: 39px 0 0;}
    #process .downLoad a{width: 236px; margin: 0 auto;}
    #process .downLoad a + a{margin: 20px auto 0;}
    #process .downLoad a img.m{margin: 0 auto;}

    #borad .link > li{padding: 30px 0;}
    #borad .location .con{display: block; margin: 0;}
    #borad .location .con img{display: none;}
    #borad .location .con img.m{display: block !important; width: 100%; margin:0 0 15px;}
    #borad .location .con ul li{padding-left: 0;}

    #youtube .inner li{width: 100%;}
    #youtube .inner li + li{padding: 30px 0 0;}
    #youtube .inner li p{font-size: 18px;}
}

@media all and (max-width:380px) {
    #mainVisual .slogan h2{font-size: 30px;}
    #mainVisual .slogan h2 + p{font-size: 1rem;}
    #mainVisual .slogan a{width: 130px; height: 45px; line-height: 43px; margin: 45px 0 40px; font-size: 14px;}

    #info h2{font-size: 25px;}
    #info .txt h3 br:first-of-type{display: none;}

    .infoSliderPagingWrap .sliderProgress{bottom: 34px;}

    #process > .txt p{font-size: 1rem;}
    #process .slick-dots > li button{width: 24px; height: 24px; line-height: 22px; font-size: 13px;}

    #process .list .txt .t2{font-size: 20px;}
    #process .list .txt .t2 span{font-size: 25px;}

    #process .downLoad a{width: 180px;}
    #process .downLoad a + a{margin: 10px auto 0;}

    #borad .more{height: 40px; line-height: 38px; padding: 0 20px; font-size: 14px;}

    #borad .link > li h2{font-size: 18px;}
    #borad .link .tit{font-size: 17px;}
    #borad .link .txt{font-size: 15px;}

    #youtube .inner li p{font-size: 17px;}
}

/* 레이어팝업 */
#popupLayer {z-index: 50; display: block; position: fixed; top: 10px; left: 10px; /*width: 500px; background: rgba(0,0,0,0.9);*/ transition: .4s ease-in-out; font-family: 'Roboto', 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은고딕', 'Dotum', '돋움', 'Montserrat', 'Arial', sans-serif;}
#popupLayer a {display: block;}
#popupLayer img {max-width: 100%;}
#popupLayer .btnClose {display: block; width: 100%; box-sizing: border-box; padding: 10px; color: #fff; font-size: 14px; text-align: right;}
#popupLayer .btnClose span {position: relative; display: inline-block; padding: 0 20px 0 0;}
#popupLayer .btnClose span:hover {cursor :pointer;}
#popupLayer .btnClose span:before,
#popupLayer .btnClose span:after {content: ''; position: absolute; width: 15px; height: 2px; top: 8px; right: 0; transform: rotate(45deg); background: #fff; }
#popupLayer .btnClose span:after {transform: rotate(-45deg);}

#popupLayer ul {display: flex; align-items: flex-start;}
#popupLayer ul li {background: rgba(0,0,0,0.9); margin: 0 20px 0 0;}

@media all and (max-width:1024px) {
    #popupLayer {top: 30px; left: 50%; width: 450px; transform: translateX(-50%);}
    #popupLayer ul {position: relative;}
    #popupLayer ul li {position: absolute; top: 0; left: 0; margin: 0;}
}

@media all and (max-width:500px) {
    #popupLayer {width: 92%;}
}