@charset "utf-8";
#container_main {position:relative; float:left; width:100%;}
#container_main h4{line-height:100%; font-size:32px; font-weight: 900; letter-spacing:-2px;}
#container_main h4 span {color: #06a496;}

.more{display:block; position:absolute; width: 25px; right:3px; top:10px; z-index: 10;}
.more .bar{float:right; display:block; width:18px; height:3px; margin:2px 0 3px; border-radius:3px; background:#06a496; transition:0.25s ease-in-out;}
.more .bar2{width:25px;}
.more:hover .bar{width:25px;}

@media all and (max-width:1024px) {
	#container_main h4{font-size:28px;}
}
@media all and (max-width:768px) {
	#container_main h4{font-size:26px;}
}
@media all and (max-width:568px) {
	#container_main h4{font-size:24px;}
}
@media all and (max-width:380px) {
	#container_main h4{font-size:22px;}
}

.main_bottom{height: 348px; background: url(/images/member/main/bg_assembly.png)no-repeat center center; background-size: cover;}
@media all and (max-width:1230px) {
	.main_bottom{padding:10px 15px 45px; height: 370px;}
}
@media all and (max-width:768px) {
	
}
@media all and (max-width:568px) {
    .main_bottom {padding: 30px 10px 20px; height: 430px;}
}
@media all and (max-width:380px) {
    .main_bottom {padding: 25px 10px 15px; height: 420px;}
}

/* 메인비주얼 */
#visual {z-index:1;position:relative;height:530px;max-width: 1920px;margin: 0 auto; filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.1));}
#visual:after{content:'';position:absolute;top:0;right: 32%;width: 50%;height:100%;margin: 0 360px 0 0;background: #4d4a96 url(/images/member/main/bg_visual.jpg) no-repeat;}
#visual .inner{z-index:1;}
#visual .txt{z-index:1; position:absolute; top:75px; left:0; color:#fff;}
#visual .pic{overflow:hidden; border-radius:0 10px 10px 0;}
#visual .slogan{line-height:140%; font-size:22px; text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);}
#visual .slogan img{vertical-align:bottom;}
#visual .slogan strong{font-weight:500; font-size:31px;}
#visual .slogan .txt2{padding:20px 0 0 0; font-weight:900; font-size:35px;}
#visual .slogan .txt2 span{color:#bcfcff;}

#visual .sns{position: relative; margin: 40px 0; padding:0 0 0 30px;}
#visual .sns:after {content: ''; display: block; position: absolute; width: 20px; height: 1px; top: 50%; left: 0; background: rgba(255,255,255,0.2);}
#visual .sns *{display:inline-block; vertical-align:top;}
#visual .sns dt{line-height:100%; padding:10px 0 0 0; font-size:22px; text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);}
#visual .sns dd{padding:0 0 0 15px;}
#visual .sns a{width:37px; height:37px; margin:0 5px 0 0; font-size:0; text-indent:-9999px; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.3)); background: url(/images/member/main/ico_sns.png) no-repeat 0 0;}
#visual .sns a.off {display: none;}
#visual .sns .tw{background-position: -39px 0;}
#visual .sns .bl{background-position: -78px 0;}
#visual .sns .kakao{background-position: -116px 0;}
#visual .sns .insta{background-position: -155px 0;}
#visual .sns .youtube{background-position: -193px 0;}


.link{overflow:hidden; width:100%;}
.link li {display:inline-block; vertical-align:top; width:100px; line-height:120%; text-align:center;}
.link li + li{padding:0 0 0 30px;}
.link li a{z-index:1; position:relative; display:block; width:100%; padding:120px 0 0 0; color:#fff; font-weight:400; box-sizing:border-box; text-align:center; text-decoration:none;}
.link li a:before,
.link li a:after{content:''; display:block; position:absolute; top:29px; left:0; width:100%; height:40px; background:url(/images/member/main/ico_chair1.png) no-repeat 50% 100%; background-size: contain;}
.link li a:after{z-index:-1; top:0; left:50%; width:100px; height:100px; border-radius:20px; background:rgba(0,0,0,0.2); transform:translateX(-50%);}
.link li.list2 a:before{background-image:url(/images/member/main/ico_chair2.png);}
.link li.list3 a:before{background-image:url(/images/member/main/ico_chair3.png);}
.link li a:hover:before{transform:rotateY(360deg); background-position:50% 0; transition:transform 0.6s 0.25s ease-in-out;}
.link li a:hover:after{box-shadow:inset 0 0 0 45px #292e44; transition:0.4s ease-in-out;}
.link li a[target="_blank"] span:after{content:''; display:inline-block; vertical-align:middle; width:10px; height:10px; margin:-4px 0 0 5px; background:url(/images/kr/main/ico_ctrl.png) no-repeat -83px -38px;}

@media all and (max-width:1230px) {
	#visual{height:auto;}
	#visual:after{right:auto; left:0; margin:0; width:15px;}
	#visual .pic img{max-width:100%; vertical-align:top;}
	#visual .txt{left:15px; top:45px;}
    #visual .slogan {font-size: 20px;}
    
    .link li a {padding: 105px 0 0;}
    .link li a:before {top: 24px;}
    .link li a:after {width: 90px; height: 90px;}
}
@media all and (max-width:1024px) {
    #visual {filter: none;}
	#visual:after{display:none;}
	#visual .inner{padding:0;}
	#visual .txt{position:static; padding:30px 5px; background:#3c648a; text-align:center;}
    
    #visual .sns {padding: 0; margin: 30px 0;}
    #visual .sns:after {display: none;}
	#visual .sns dt{font-size:22px;}
	#visual .slogan{font-size:20px;}
	#visual .slogan img{height:50px;}
	#visual .slogan strong{font-size:28px;}
    #visual .slogan br {display: none;}
	#visual .slogan .txt2{padding:10px 0 0 0; font-size:30px;}
	#visual .pic{border-radius:0;}
	
	.link li{width:86px;}
	.link li a{padding:98px 0 0 0;}
	.link li a:before{top:28px; height:31px; background-size:contain;}
	.link li a:after{width:86px; height:86px;}
}
@media all and (max-width:768px) {
	#visual .txt{padding:25px 5px 36px;}
	#visual .sns dt{font-size:20px;}
	#visual .slogan{font-size:18px;}
	#visual .slogan strong{font-size:23px;}
	#visual .slogan img{height:40px;}
	#visual .slogan .txt2{font-size:26px;}

	.link li{width:75px;}
	.link li + li{padding:0 0 0 25px;}
	.link li a{padding:87px 0 0 0; font-size:16px;}
	.link li a:before{top:24px; height:28px;}
	.link li a:after{width:75px; height:75px;}
}
@media all and (max-width:568px) {
	#visual .txt{padding:21px 5px 32px;}
    #visual .sns {margin: 25px 0;}
    #visual .sns a {width: 31px; height: 30px; background-size: cover;}
    #visual .sns .tw {background-position: -31px 0;}
    #visual .sns .bl {background-position: -63px 0;}
    #visual .sns .kakao {background-position: -94px 0;}
    #visual .sns .insta {background-position: -125px 0;}
    #visual .sns .youtube {background-position: -156px 0;}
	#visual .sns dt{padding:7px 0 0 0; font-size:18px;}
	#visual .sns dd{padding:0 0 0 10px;} 
	#visual .slogan{font-size:16px;}
	#visual .slogan strong{font-size:21px;}
	#visual .slogan img{height:35px;}
	#visual .slogan .txt2{font-size:23px;}

	.link li {width:70px;}
	.link li + li{padding:0 0 0 20px;}
	.link li a{padding:82px 0 0 0;}
	.link li a:before{top: 22px; height:26px;}
	.link li a:after{width:70px; height:70px;}
}
@media all and (max-width:380px) {
	#visual .txt{padding:19px 5px 30px;}
	#visual .sns dt{padding:8px 0 0 0; font-size:17px;}
	#visual .sns dd{padding:0 0 0 8px;} 
	#visual .slogan{font-size:15px;}
	#visual .slogan strong{font-size:20px;}
	#visual .slogan img{height:33px;}
	#visual .slogan .txt2{font-size:22px;}
	
	.link li {width:65px;}
	.link li + li{padding:0 0 0 17px;}
	.link li a{padding:75px 0 0 0; font-size:15px;}
	.link li a:before{top:21px; height:25px;}
	.link li a:after{width:65px; height:65px;}
}
@media all and (max-width:350px) {
	#visual .slogan{font-size:14px;}
	#visual .slogan strong{font-size:19px;}
	#visual .slogan img{height:32px;}
	#visual .slogan .txt2{font-size:21px;}
}

/* 바로가기 */
#quick {position:relative; height:300px; text-align:center; box-sizing:border-box; background:#cfe0e1;}
#quick:before,
#quick:after{content:''; display:block; position:absolute; top:-300px; left:0; width:100%; height:400px; background: rgb(235,38,131);
background: -moz-linear-gradient(180deg, rgba(235,38,131,0) 0%, rgba(207,224,225,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(235,38,131,0) 0%, rgba(207,224,225,1) 100%);
background: linear-gradient(180deg, rgba(235,38,131,0) 0%, rgba(207,224,225,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eb2683",endColorstr="#cfe0e1",GradientType=1);}
#quick .inner {height: 300px;}
#quick li{position:relative; float:left; padding: 60px 0 0; width:25%; height: 100%; line-height:100%; vertical-align:top; box-sizing: border-box;}
#quick li:before, #quick li:last-child:after{content:''; display:block; position:absolute; width: 1px; height: 100%; top: 0; left: 0; background: rgba(255,255,255,0.4); z-index: 2;}
#quick li:last-child:after {left: auto; right: 0;}
#quick li a{z-index:1; position:relative; display:block; line-height:150%; color:#43797c;}
#quick li a:after{content:''; position:absolute; top:0; left:50%; transform: translate(-50%, 0); display:block; width:150px; height:150px; border-radius: 50%; box-sizing:border-box; background:#fff url(/images/member/main/ico_link1.png) no-repeat 50% 50%; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);} 
#quick li a strong{display:block; padding:170px 0 0; font-size:21px; color:#43797c;}
#quick li a span{display:inline-block; max-width:140px; word-break:keep-all;}
#quick li.list2 a:after{background-image:url(/images/member/main/ico_link2.png);}
#quick li.list3 a:after{background-image:url(/images/member/main/ico_link3.png);}
#quick li.list4 a:after{background-image:url(/images/member/main/ico_link4.png);}

#quick li a:focus,
#quick li a:hover,
#quick li a:active {text-decoration: none;}

#quick li a:focus:after,
#quick li a:hover:after,
#quick li a:active:after{opacity:1; animation:ani_link 0.9s ease-in-out; text-decoration: none;}

@keyframes ani_link {
	0%{transform:translate(-50%, 0);}
	25%{transform:translate(-50%, 6px);}
	50%{transform:translate(-50%, 0);}
	75%{transform:translate(-50%, 8px);}
	100%{transform:translate(-50%, 0);}
}

@media all and (max-width:1550px) {
	#quick:after{width:200px; background-size:contain;}
}
@media all and (max-width:1230px) {
	#quick:after{opacity:0.5; width:170px;}
    #quick li a:after {width: 120px; height: 120px; background-size: auto 62px;}
    #quick li a strong {padding: 135px 0 0;}
}
@media all and (max-width:1024px) {
	#quick{height:auto;}
    #quick .inner {height: 260px;}
	#quick:before, #quick:after {display: none;} 
    #quick li {padding: 50px 0 0;}
	#quick li a strong{font-size:20px;}
	#quick li a span{line-height:130%; font-size:14px;}
}
@media all and (max-width:768px) {
    #quick .inner {height: 210px;}
    #quick li {padding: 35px 0 0;}
    #quick li a:after {width: 95px; height: 95px; background-size: auto 55px;}
    #quick li a strong {padding: 110px 0 0; font-size: 17px; line-height: 1.2;}
}
@media all and (max-width:568px){
    #quick .inner {height: 170px;}
    #quick li {padding: 25px 0 0;}
    #quick li a:after {width: 80px; height: 80px; background-size: auto 45px;}
    #quick li a strong {padding: 95px 0 0; font-size: 15px;}
}
@media all and (max-width:380px){
    #quick .inner {height: 155px;}
    #quick li a:after {width: 70px; height: 70px; background-size: auto 40px;}
    #quick li a strong {padding: 80px 0 0; font-size: 14.5px;}
}

/* 포토갤러리 */
#gallery{position:relative; padding: 50px 0; box-sizing:border-box;}
#gallery .inner {padding-left: 490px;}
#gallery .info{padding: 10px 0 0; font-size: 18px;}
#gallery .list_wrap{position: absolute; top: 0; left: 0; width: 440px; height: 330px; border-radius: 10px;}
#gallery .list *{display:block;}
#gallery .list {float:left; position: relative;}
#gallery .list img{width:100%; height:100%; transition:transform 0.3s ease-in-out;}
#gallery .list .img{position:relative; height: 330px; overflow:hidden; border-radius:10px;}
#gallery .list .img:after{z-index:1; content:''; opacity:0; position:absolute; top:50%; left:50%; width:24px; height:24px; transform:translate(-50%, -50%) scale(0); transition:0.3s ease; background:url(/images/kr/main/ico_ctrl.png) no-repeat 100% -172px;}
#gallery .list .sbj{z-index:2; position:absolute; bottom:0; left:0; width:100%; height:90px; padding:24px 15px 0 30px; color:#fff; border-radius: 0 0 10px 10px; background:rgba(0,0,0,0.5); box-sizing:border-box;}
#gallery .list .tit{display:inline-block; vertical-align:top; max-width:98%; padding:0 20px 0 0; line-height:110%; font-size: 18px; font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#gallery .list .date{line-height:100%; font-size:18px;}
#gallery .new{display:inline-block; vertical-align:middle; width:18px; height:18px; line-height:18px; margin:-7px 0 0 -20px; font-size:11px; font-weight:400; text-align:center; color:#fff; border-radius:50%; background:#ffa517; text-transform:uppercase;}
#gallery .list a:hover .sbj{background:rgba(0,0,0,0.75);}
#gallery .list a:active img,
#gallery .list a:hover img,
#gallery .list a:focus img{transform:scale(1.1);}
#gallery .list a:hover .img:after{opacity:1; transform:translate(-50%, -50%) scale(1);}

#gallery .next_wrap {margin: 115px 0 0;}
#gallery .next_wrap .list a{position:relative; margin:0 10px 0 0; width: 230px; height: 150px; text-decoration:none; border-radius:10px; box-sizing:border-box; overflow: hidden;}

#gallery .control{position:absolute; width: 80px; height: 40px; top:112px; left: 490px; border-radius:15px; background: #f5f5f5;}
#gallery .control:after {content: ''; display: block; position: absolute; width: 1px; height: 100%; top: 0; left: 50%; background: #ccc;}
#gallery .control button{position:relative; float:left; width:40px; height:40px; font-size:0; text-indent:-9999px; background:url(/images/member/main/ico_ctrl.png) no-repeat 16px 11px;}
#gallery .control .btn_next{background-position:-25px 11px;}
#gallery .more{top:7px;}
#gallery .none{width:100%; padding:50px 0; text-align:center;}

@media all and (max-width:1024px){
    #gallery .inner {padding: 0 0 0 380px;}
    #gallery .list_wrap {width: 340px; height: auto; left: 15px;} 
    #gallery .list .img {height: 265px;}
    #gallery .info {font-size: 16px;}
    
    #gallery .next_wrap {margin: 90px 0 0;}
    #gallery .next_wrap .list a {width: 180px; height: 115px;}
    
    #gallery .control {top: 95px; left: 380px;}
    #gallery .more {right: 15px;}
}
@media all and (max-width:768px){
    .slick-slide {margin: 0 10px 0 0;}
    #gallery {padding: 35px 0;}
    #gallery .inner {padding: 0 10px;}
    #gallery .list_wrap {position: static; margin: 25px 0 0; width: 100%;}
    #gallery .list .img {height: 230px;}
    #gallery .list .sbj {height: 80px; padding: 20px 15px 0 20px;}
    #gallery .list .tit, #gallery .list .date {font-size: 17px;}
    
    #gallery .next_wrap {display: none;}
    
    #gallery .control {top: 0; left: auto; right: 55px; height: 35px; border-radius: 8px;}
    #gallery .control button {height: 35px; background-position: 18px 12px; background-size: 40px;}
    #gallery .control .btn_next {background-position: -15px 12px;}
}
@media all and (max-width:568px){
    #gallery .title {padding: 7px 0 0;}
    #gallery .info {display: none;}
    #gallery .list .img {height: 200px;} 
    #gallery .list .sbj {padding: 12px 10px 0 15px; height: 60px;}
    #gallery .list .tit, #gallery .list .date {font-size: 15px;}
    
}
@media all and (max-width:380px){
    .slick-slide {margin: 0 5px 0 0;}
    #gallery {padding: 25px 0;}
    #gallery .list .img {height: 180px;}
}


/* 게시판 */
#assembly{position:relative; padding: 35px 0 0; box-sizing:border-box;}
#assembly > h4{position: absolute; top: 49px; z-index: 4;}
#assembly > ul{position:relative; width:100%;}
#assembly > ul > li {padding: 0 0 0 29.5%}
#assembly li h4{line-height:0; padding:0; float: left; width: 29.55%; margin: 0 1.18% 0 0; letter-spacing:-1px;}
#assembly li h4 br{display:none;}
#assembly li h4 a{z-index:2; position:relative; display:block; width: 100%; height:60px; line-height:60px; margin:0 0 3px; font-size:20px; font-weight:800; text-decoration:none; text-align: center; background: rgba(255,255,255,0.5); border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);}
#assembly li h4 a:after{top:50%; left:auto; right:30px; width:9px; height:9px; margin:-4px 0 0 0; border-bottom:1px solid #fff; border-right:1px solid #fff; transform:rotate(-45deg); background:none; transition:right 0.25s ease-in-out;}
#assembly li h4 a:hover,
#assembly li.on h4 a{color:#fff; border: none; background: #f05952;}

#assembly .con{z-index:1; opacity:0; visibility:hidden; position:absolute; top:0; left:-10px; width:100%; padding:90px 0 0; box-sizing:border-box;}
#assembly .on .con{opacity:1; visibility:visible; left:0; transition:0.25s ease-in-out;}
#assembly .con li{position:relative; float:left; width:23.75%;  margin:0 1.6% 0 0;}
#assembly .con li:last-child {margin: 0;}
#assembly .con a{position:relative; float:left; width:100%; height:174px; padding:25px; border-radius:10px; border:1px solid #ccc; box-sizing:border-box; text-decoration:none; background:#fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);} 
#assembly .con a:hover{border-color:#3a9fa3;}
#assembly .con a:hover .tit{text-decoration:underline;}
#assembly .con .more{right:22px; top:50%; margin:-20px 0 0 0;}
#assembly .con a:hover .more{transform:rotate(90deg);}
#assembly .tit{display:inline-block; vertical-align:top; max-width:98%; line-height:26px; padding:0 20px 5px 0; font-weight:900; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#assembly .new{display:inline-block; vertical-align:middle; width:18px; height:18px; line-height:18px; margin:0 0 0 -20px; font-size:10px; font-weight:400; text-align:center; color:#fff; border-radius:50%; background:#ffa517; text-transform:uppercase;}
#assembly .detail{max-width:98%; line-height:140%; font-size:18px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;  box-sizing:border-box;}
#assembly .date{display:block; margin: 20px 0 0; font-size: 18px; color: #aaa;}
#assembly .con .none{width:100%; padding:3em 0 0 0 !important; text-align:center; background:none;}
#assembly .view{display:none; z-index:1; position:absolute; top:55px; right:0; text-indent: -999px;}
#assembly .view .more{right:auto; left:-10px; top:-10px;}
#assembly .view:hover .more{transform:rotate(90deg);}
#assembly .on .view{display:block;}

#assembly .more {display: none; top: 18px;}
#assembly .on .more {display: block;}

@media all and (max-width:1024px){
    #assembly > h4 {top: 45px;}
    #assembly li h4 a {height: 50px; line-height: 50px; font-size: 18px;} 
    #assembly .con {padding: 75px 0 0;}
    #assembly .con li {width: 49%; margin: 0 1% 1% 0;}
    #assembly .con li:nth-child(2n) {margin-right: 0;}
    #assembly .con a {padding: 20px; height: 125px;}
    #assembly .tit, #assembly .detail, #assembly .date{font-size: 16px;}
    #assembly .date {margin: 10px 0 0;}
    #assembly .detail {-webkit-line-clamp:1;}
    #assembly .more {top: 14px;}
}

@media all and (max-width:568px){
    #assembly {padding: 0;}
    #assembly > h4 {position: static;}
    #assembly > ul > li {padding: 0; margin: 25px 0 0;}
    #assembly li h4 {width: 32.5%;}
    #assembly li h4 a {height: 45px; line-height: 45px; font-size: 16px;}
    #assembly li:last-child h4{margin: 0;}
    #assembly .con {padding: 60px 0 0;}
    #assembly .con a {padding: 15px 20px; height: auto;}
    #assembly .con li {width: 100%; margin: 0 0 1% 0;}
    #assembly .con li:nth-child(4) {display: none;}
    #assembly .tit, #assembly .detail, #assembly .date {font-size: 15px;}
    #assembly .tit {padding-bottom: 0;}
    #assembly .date {line-height: 1; margin: 5px 0 0;}
    #assembly .more {top: -44px;}
}