@charset "utf-8";
#container_main{position:relative; overflow:hidden; width:100%;}
#container_main h4{font-size:30px; font-family:"NanumSquare"; font-weight:800; color:#21365b;}

.more{z-index:1; position:absolute; top:0; right:0; display:block; width:30px; height:30px; font-size:0; text-indent:-999px; border-radius:10px; border:1px solid #ddd; background:url(/images/kr/main/ico_ctrl.png) no-repeat -97px -33px;}

@media all and (max-width:1024px) {
	#container_main h4{font-size:26px;}
}
@media all and (max-width:768px) {
	#container_main h4{font-size:24px;}
	.sec{padding:0 15px;}
}
@media all and (max-width:568px) {
	#container_main h4{font-size:22px;}
}
@media all and (max-width:380px) {
	#container_main h4{font-size:21px;}
}

/* animation */
#visual.on .slogan{animation:slideup 1.3s both;}
#visual.on .dot{visibility:hidden;}

#visual.on .dot li,
#visual.on .btns{animation:slideup 1s both;}
#visual.on .dot li:nth-child(1){animation-delay:0.6s;}
#visual.on .dot li:nth-child(2){animation-delay:1s;}
#visual.on .dot li:nth-child(3){animation-delay:1.2s;}
#visual.on .dot li:nth-child(4){animation-delay:1.6s;}
#visual.on .btns{animation-delay:1.8s;}

@keyframes slideup{
	0%{transform:translateY(20px); opacity:0; visibility:hidden;}
	100%{transform:translateY(0); opacity:100%; visibility:visible;}
}

/* 메인비주얼 */
#visual{z-index:2; position:relative; width:100%; height:680px;}
#visual .inner{height:600px;}
#visual:before{content:''; position:absolute; top:0; left:50%; height:550px; width:100%; margin:0 0 0 90px; background:#3f4ec1 url(/images/member/main/bg_member.jpg) no-repeat;}
#visual .pic{overflow:hidden; position:absolute; top:0; right:50%; margin:0 -90px 0 0; border-radius:0 0 15px 0; background:#e6e7e9;}
#visual .txt{z-index:1; position:relative; padding:0 0 0 60%; box-sizing:border-box; color:#fff;}
#visual .slogan{padding:78px 0 38px; line-height:150%; font-size:40px; letter-spacing:-2px;}
#visual .slogan strong{font-size:55px; font-weight:700; color:#fefcde; font-family:"Welcome";}
#visual .dot{line-height:110%; font-size:18px; letter-spacing:-0.5px;}
#visual .dot li{padding:0 0 29px 124px;}
#visual .dot li:before{top:0; width:17px; height:16px; border-radius:0; background:url(/images/member/main/ico_check.png) no-repeat;}
#visual .dot span{position:absolute; top:0; left:24px;}
#visual .dot strong{font-weight:700;}
#visual .lts2{letter-spacing:15px;}

#visual .btns{overflow:hidden; width:100%; padding:21px 0 94px;}
#visual .btns a{position:relative;overflow:hidden; float:left; width:210px; height:50px; line-height:49px; border-radius:25px; letter-spacing:-0.5px; font-weight:700; color:#fff; text-align:center; box-sizing:border-box; text-decoration:none; border:1px solid rgba(255,255,255,0.5);}
#visual .btns a:first-child{margin:0 20px 0 0;}
#visual .btns a:hover{color:#222; font-weight:800; box-shadow:0 0 25px rgba(0,0,0,0.2); border-color:#fff; transition:0.25s ease-in-out;}
#visual .btns a:before{z-index:-1; opacity:0; content:''; display:block; position:absolute; top:-5%; left:-130%; width:120%; height:110%; margin:0; background:#fff; transform:skew(-20deg); transition:0.25s linear;}
#visual .btns a:after{content:''; display:inline-block; vertical-align:middle; width:26px; height:6px; margin:-4px 0 0 30px; background:url(/images/member/main/bg_arrow.png) no-repeat 100% 0;}
#visual .btns a:hover:before{opacity:1; left:-10%;}
#visual .btns a:hover:after{background-position:0 0; transition:0s 0.2s ease-in-out;}

#visual .en{position:absolute; left:60%; bottom:0; color:#bbb; font-size:10px; font-weight:200; font-family:"gmarket"; letter-spacing:6px; text-transform:uppercase;}
#visual .en:before{content:''; display:inline-block; width:70px; height:1px; margin:0 27px 0 0; vertical-align:middle; background:#e7e7e7;}

@media all and (max-width:1280px) {
	#visual:before{margin:0 0 0 50px;}
	#visual .pic{margin:0 -50px 0 0;}
	#visual .pic img{max-height:100%; margin:0 -170px 0 0;}
	#visual .slogan{font-size:35px;}
	#visual .slogan strong{font-size:50px;}
	#visual .btns a{width:180px;}
	#visual .btns a:after{margin:-4px 0 0 10px;}
}
@media all and (max-width:1024px) {
	#visual{margin:0 0 50px;}
	#visual,
	#visual .inner{height:auto;}
	#visual:before{display:none;}
	#visual .slogan{padding:40px 0 30px; line-height:170%; font-size:28px; text-align:center; letter-spacing:-1px;}
	#visual .slogan strong{font-size:42px;}
	
	#visual .pic{position:static; height:auto; margin:0; border-radius:0; text-align:center;}
	#visual .pic img{margin:0; max-height:400px;}
	#visual .txt{padding:0; border-radius:0 0 15px; background:#1386c7 url(/images/member/main/bg_member.jpg) no-repeat 100% 0;}
	#visual .dot{padding:0 0 0 27%;}
	#visual .dot li{padding:0 0 18px 124px;}
	#visual .btns{display:flex; flex-wrap:wrap; justify-content:center; padding:21px 0 50px;}

	#visual .en{left:auto; right:15px; bottom:-20px; font-size:8px; letter-spacing:4px;}
	#visual .en:before{width:50px;}
}
@media all and (max-width:768px) {
	#visual{margin:0 0 40px;}
	#visual .slogan{padding:37px 0 27px; font-size:25px;}
	#visual .slogan strong{font-size:38px;}

	#visual .dot li{padding:0 0 18px 113px;}
	#visual .lts3{letter-spacing:18px;}
}
@media all and (max-width:568px) {
	#visual .slogan{padding:32px 0 25px; font-size:21px;}
	#visual .slogan strong{font-size:33px;}

	#visual .dot {padding:0 0 0 22%; font-size:17px;}
	#visual .dot li{padding:0 0 13px 100px;}
	#visual .btns{padding:17px 0 40px;}
	#visual .btns a{width:124px; height:46px; line-height:45px;}
	#visual .btns a:first-child{margin:0 15px 0 0;}
	#visual .btns a span{display:none;}
	#visual .btns a:after{width:20px;}

	#visual .en{bottom:-15px; font-size:7px;}
	#visual .en:before{width:45px;}
}
@media all and (max-width:380px) {
	#visual .slogan{padding:30px 0 22px; font-size:20px;}
	#visual .slogan strong{font-size:31px;}
	
	#visual .dot {padding:0 0 0 20%; font-size:16px;}
}
@media all and (max-width:350px) {	
	#visual .dot {padding:0 0 0 17%;}
}

/* 게시판 */
#board{position:relative; float:left; width:67.857%; height:449px;}
#board h3{display:inline-block; vertical-align:middle; height:49px; padding:0 15px 0 0; font-size:30px;}
#board h3 span{color:#e65245;}
#board .info{display:inline-block; font-size:14px; font-weight:400; color:#777;}
#board > ul{z-index:2; position:relative; float:left; width:100%; padding:0 50px 0 0; border:1px solid #e9e9e9; border-radius:15px; background:#fbfbfb; box-sizing:border-box; transition:0.3s ease-out;}
#board > ul.all{padding-right:0;}
#board > ul > li{float:left; width:27%; border-left:1px solid #e9e9e9; box-sizing:border-box;}
#board > ul > li:nth-child(1){border:none; width:18%;}
#board > ul > li:nth-child(3){width:24%;}
#board > ul > li:nth-child(4){width:30%;}
#board li h4{line-height:0; padding:0;}
#board li h4 a{z-index:2; position:relative; display:block; height:48px; line-height:48px; font-size:18px; font-weight:400; color:#555; text-decoration:none; text-align:center;}
#board li.on h4 a{color:#fff; font-weight:700;}
#board li h4 a:before{z-index:-1; opacity:0; visibility:hidden; content:''; position:absolute; top:-1px; left:-10px; width:calc(100% + 2px); height:calc(100% + 2px); border-radius:15px; background:#356bd1; box-shadow:5px 0 15px rgba(153,153,153,0.6); transition:left 0.25s ease-in-out;}
#board li.on h4 a:before{opacity:1; visibility:visible; left:-1px;}

#board .con{opacity:0;  visibility:hidden; position:absolute; top:63px; left:0; width:100%; box-sizing:border-box;}
#board .on .con{opacity:1; visibility:visible; top:70px; transition:0.25s ease-in-out;}
#board .con .list{position:relative; width:100%; margin:0 0 10px;}
#board .con a{position:relative; display:block; width:100%; height:55px; line-height:53px; padding:0 200px 0 19px; color:#222; box-sizing:border-box; text-decoration:none; box-shadow:0 0 7px rgba(221,221,221,0.5); border:1px solid #fff; border-radius:15px;}
#board .con a:hover{border-color:#cadaf8;}
#board .s_tit{display:inline-block; vertical-align:top; width:80px; height:30px; line-height:30px; margin:12px 14px 0 0; font-weight:800; font-size:14px; border-radius:10px; color:#4194c3; background:#f2f7f9; text-align:center; transition:0.2s ease-in-out;}
#board .pho{color:#516dbb; background:#f2f5fe;}
#board .pre{color:#40a495; background:#f2f9f8;}
#board .tit{display:inline-block; vertical-align:middle; max-width:96%; padding:0 20px 0 0; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; font-family:"Noto Sans KR";}
#board a:hover .tit,
#board a:focus .tit,
#board a:active .tit{text-decoration:underline;}
#board .new{display:inline-block; vertical-align:middle; width:16px; height:17px; line-height:17px; margin:-2px 0 0 -20px; font-size:12px; font-weight:400; border-radius:3px; text-transform:uppercase; text-align:center; color:#fff; background:#e65245;}
#board .detail{position:absolute; right:20px; top:0; color:#888; letter-spacing:-0.5px;}
#board .date{padding:0 0 0 20px; background:url(/images/kr/main/ico_date.png) no-repeat 0 50%;}
#board .hit{padding:0 0 0 20px; background:url(/images/kr/main/ico_hit.png) no-repeat 0 50%;}
#board .hit:after{content:''; display:inline-block; vertical-align:middle; width:1px; height:10px; margin:-2px 12px 0 15px; background:#ddd;}
#board .none{width:100%; padding:4em 0 0 0; text-align:center;}
#board .more{display:none; width:49px; height:48px; border:none; border-left:1px solid #e9e9e9; border-radius:0; background-position:14px -124px;}
#board .on .more{display:block;}

@media all and (max-width:1024px) {
	#board{height:435px;}
	#board h3{height:45px; font-size:26px;}
	#board .info{display:none;}
	#board li h4 a{font-size:17px;}
	#board .con a{padding:0 120px 0 13px;}
	#board .hit{display:none;}
	#board .detail{right:13px; font-size:15px;}
}
@media all and (max-width:768px) {
	#board{height:390px; width:100%;}
	#board h3{height:auto; font-size:24px;}
	#board > ul{margin:12px 0 0 0;}
	#board .con a{height:50px; line-height:48px; padding:0 180px 0 12px;}
	#board .hit{display:inline;}
	#board .s_tit{margin:8px 8px 0 0;}
}
@media all and (max-width:568px) {
	#board{height:370px;}
	#board h3{font-size:22px;}
	#board > ul{padding:0 45px 0 0; border-radius:10px;}
	#board li h4 a{height:45px; line-height:45px; font-size:16px;}
	#board li h4 a:before{border-radius:10px;}
	#board .con{top:55px;}
	#board .on .con{top:63px;}
	#board .con a{height:48px; line-height:47px; padding:0 105px 0 10px;}
	#board .s_tit{width:62px; height:27px; line-height:28px; margin:9px 8px 0 0; font-size:13px;}
	#board > ul > li:not(:first-child) .s_tit{display:none;}
	#board .hit{display:none;}
	#board .detail{font-size:14px;}
	#board .more{width:45px; height:44px; background-position:12px -125px;}
}
@media all and (max-width:380px) {
	#board{height:350px;}
	#board h3{font-size:21px;}
	#board > ul{padding:0 42px 0 0;}
	#board li h4 a{height:42px; line-height:42px; font-size:15px;}
	#board .on .con{top:60px;}
	#board .con .list{margin:0 0 8px;}
	#board .con a{height:46px; line-height:45px;}
	#board .more{width:42px; height:41px;}
}

/* 바로가기 */
#link{float:right; width:28.571%; box-sizing:border-box;}
#link h4 {height:49px;}
#link h4 span{color:#e65245;}
#link li {position:relative; width:100%; line-height:120%; margin:0 0 17px;}
#link li:after{z-index:1; content:''; display:block; position:absolute; top:0; right:40px; width:10px; height:100%; background:url(/images/member/main/ico_arrow2.png) no-repeat 0 50%;}
#link li a{z-index:1; position:relative; display:block; width:100%; height:95px; line-height:95px; padding:0 0 0 130px; font-size:18px; font-weight:800; color:#222; box-sizing:border-box; border-radius:15px; box-shadow:3px 3px 15px rgba(187,187,187,0.2);}
#link li a:before,
#link li a:after{content:''; display:block; position:absolute; top:0; left:37px; width:48px; height:100%; background:url(/images/member/main/ico_lnk1.png) no-repeat 0 50%;}
#link li a:after{z-index:-1; left:0; width:100%; border-radius:15px; border:0 solid transparent; background:transparent; transition:border 0.25s ease-in-out;}
#link li.list2 a:before{width:67px; background-image:url(/images/member/main/ico_lnk2.png);}
#link li.list3 a:before{width:54px; background-image:url(/images/member/main/ico_lnk3.png);}
#link li a:hover{box-shadow:3px 3px 15px rgba(187,187,187,0.4);}
#link li a:hover:after{border-width:1px; background: linear-gradient(#fff, #fff), linear-gradient(90deg, #2fadf3 0%, #495dea 100%) border-box; background-clip:content-box, border-box;}
#link li a:hover:before{animation:ani_bg 0.5s ease-in-out;}

@keyframes ani_bg{
	0%{transform:rotate(0);}
	20%{transform:rotate(-8deg);}
	40%{transform:rotate(8deg);}
	60%{transform:rotate(-8deg);}
	80%{transform:rotate(8deg);}
	100%{transform:rotate(0deg);}
}
@media all and (max-width:1024px) {
	#link h4{height:45px;}
	#link li:after{right:20px;}
	#link li a{padding:0 0 0 92px; font-size:17px;}
	#link li a:before{left:21px; background-size:auto 50px;}
}
@media all and (max-width:768px) {
	#link{width:100%; margin:0 0 40px;}
	#link h4{height:auto; padding:0 0 12px;}
	#link li {float:left; width:30%; margin:0;}
	#link li + li{margin:0 0 0 5%;}
	#link li a{height:auto; padding:74px 0 16px; line-height:120%; text-align:center;}
	#link li a:before{left:0; top:15px; width:100%; background-position:50% 0;}
	#link li.list2 a:before,
	#link li.list3 a:before{width:100%;}
	#link li:after{display:none;}
}
@media all and (max-width:568px) {
	#link li a{font-size:16px;}
}
@media all and (max-width:380px) {
	#link li a{padding:70px 0 15px; font-size:15px;}
	#link li a:before{background-size:auto 47px;}
}

/* 갤러리 */
#gallery{clear:both; float:left; z-index:1; position:relative; width:100%; height:606px; padding:78px 0 0 0; box-sizing:border-box; text-align:center; background:url(/images/member/main/bg_gallery.jpg) no-repeat 50% 50% / cover;}
#gallery .inner{width:1600px; padding:0 80px;}
#gallery .title{height:94px;}
#gallery h4{height:53px; font-size:40px; text-align:center; color:#e65245; letter-spacing:-2px;}
#gallery h4 span{color:#21365b;}
#gallery .info{color:#777;}
#gallery .list_wrap{overflow:hidden; width:100%; text-align:left; box-sizing:border-box;}
#gallery .slick-center{position:relative; z-index:1;}
#gallery .list_wrap .list:not(:first-of-type){display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type){display:block;}

#gallery .list{float:left;}
#gallery .list *{display:block;}
#gallery .list a{position:relative; margin:20px 20px 111px 20px;}

#gallery .img{overflow:hidden; position:relative; width:440px; text-decoration:none; border-radius:15px; box-shadow:5px 5px 20px rgba(102,102,102,0.3);}
#gallery .img:before{z-index:1; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,#000 100%);}
#gallery .img img{width:100%; height:310px;}
#gallery .sbj{z-index:1; position:absolute; bottom:0; left:0; height:100px; width:100%; padding:27px 0 0 6.5%; box-sizing:border-box; color:#fff; transition:left 0.25s ease-in-out, bottom 0.25s ease-in-out;}
#gallery .sbj:before,
#gallery .sbj:after{overflow:hidden; z-index:-1; opacity:0; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:15px 0; background:url(/images/member/main/bg_tit.jpg) no-repeat 0 0 / cover;}
#gallery .sbj:after{opacity:1; left:auto; right:30px; top:50%; width:35px; height:35px; margin:-18px 0 0 0; border-radius:0; background:url(/images/member/main/ico_arrow3.png) no-repeat;}
#gallery .tit{display:inline-block; max-width:80%; height:31px; line-height:120%; padding:0 20px 0 0; font-family:"Noto Sans KR"; font-size:18px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .date{padding:0 0 0 24px; line-height:110%; font-weight:400; color:rgba(255,255,255,0.8); background:url(/images/member/main/ico_date2.png) no-repeat;}
#gallery .new{display:inline-block; width:15px; height:16px; line-height:17px; margin:1px 0 0 -20px; font-size:10px; border-radius:3px; text-transform:uppercase; text-align:center; font-weight:200; color:#fff; background:#c32a4a; vertical-align:top;}
#gallery a:hover .img:before{display:none;}
#gallery a:hover .sbj{left:30px; bottom:-20px; width:calc(100% - 60px);}
#gallery a:hover .sbj:before{opacity:1;}

#gallery .control{z-index:1; position:absolute; top:50%; left:50%; width:100%; margin:-25px 0 0 -800px;}
#gallery .control button{position:absolute; top:0; left:0; width:50px; height:50px; font-size:0; text-indent:-9999px; border-radius:10px; border:1px solid #cadaf8; background:rgba(255,255,255,0.6) url(/images/member/main/ico_ctrl.png) no-repeat 17px 15px;}
#gallery .control .btn_next{left:auto; right:0; background-position:-41px 15px;}
#gallery .control button:hover{border-color:#96b6f1; background-color:rgba(255,255,255,0.8); background-position:17px -31px;}
#gallery .control .btn_next:hover{background-position:-41px -31px;}

#gallery .view{z-index:1; position:absolute; top:0; right:100px; display:block; width:150px; height:50px; line-height:51px; color:#333; transition:0.25s ease-in-out; border-radius:15px; text-align:center; box-sizing:border-box; background:rgba(255,255,255,0.8); box-shadow:2px 2px 10px rgba(221,221,221,0.35);}
#gallery .view:after{content:''; display:inline-block; vertical-align:middle; width:33px; height:20px; margin:-2px 0 0 20px; background:url(/images/member/main/bg_more.png) no-repeat 100% 50%;}
#gallery .view:hover{font-weight:800; text-decoration:none; background-color:#fff;}


@media all and (max-width:1630px){
	#gallery .inner{width:100%;}
	#gallery .control{left:0; margin:-25px 0 0 0;}
	#gallery .control .btn_prev{left:15px;}
	#gallery .control .btn_next{right:15px;}
}
@media all and (max-width:1585px){
	#gallery .view{right:80px;}
}
@media all and (max-width:1280px){
	#gallery .inner{padding:0 15px;}
	#gallery .title{height:auto;}
	#gallery h4{height:auto; font-size:33px;}
	#gallery .info{padding:10px 0 20px;}
	#gallery .control .btn_prev,
	#gallery .control .btn_prev:hover{background-position:17px -31px;}
	#gallery .control .btn_next,
	#gallery .control .btn_next:hover{background-position:-41px -31px;}
	#gallery .view{right:15px;}
}
@media all and (max-width:1024px) {
	#gallery {height:auto; padding:55px 0 0; background-position:100% 100%;}
	#gallery .inner{padding:0 6px;}
	#gallery .title{padding:0;}
	#gallery h4 {font-size:26px;}
	#gallery .info{font-size:14px;}
	#gallery .list a{width:calc(100% - 18px); margin:15px 9px 65px 9px; border-radius:15px; background:#fff; box-shadow:5px 5px 15px rgba(119,119,119,0.1);}
	#gallery .img{width:100%; box-shadow:none;}
	#gallery .img img{height:166px;}
	#gallery .sbj{position:relative; height:auto; padding:20px 0 17px 15px; color:#333;}
	#gallery a:hover .sbj{left:0; bottom:0; width:100%;}
	#gallery .img:before,
	#gallery .sbj:before{display:none;}
	#gallery .tit{height:auto; max-width:96%; padding:0 20px 8px 0; font-size:16px;}
	#gallery .date{font-size:14px; color:#555; background:url(/images/kr/main/ico_date.png) no-repeat 0 -1px;}
	#gallery .new{margin-top:-1px;}
	#gallery .view{top:-7px; width:110px; height:40px; line-height:40px; border-radius:12px; font-size:15px;}
	#gallery .view:after{width:30px; margin:-2px 0 0 13px; background-size:contain;}
}
@media all and (max-width:768px) {
	#gallery {padding:50px 0 0; text-align:left;}
	#gallery .inner{padding:0 7px;}
	#gallery .title{padding:0 0 0 7px;}
	#gallery h4 {font-size:24px; text-align:left;}
	#gallery .info{padding:10px 0 20px; font-size:13px;}
	#gallery .list a{width:calc(100% - 16px); margin:10px 8px 60px 8px;}
	#gallery .img img{height:122px;}
	#gallery .tit{padding:0 20px 6px 0; font-size:15px;}
	#gallery .date{font-size:13px;}
}
@media all and (max-width:568px) {
	#gallery{padding:43px 0 0;}
	#gallery .inner{padding:0 8px;}
	#gallery h4 {font-size:21px;}
	#gallery .list a{width:calc(100% - 14px); margin:10px 7px 50px;}
	#gallery .img img{height:120px;}
	#gallery .sbj{padding:17px 0 15px 15px;}
	#gallery .control{margin:-20px 0 0 0;}
	#gallery .control button{width:40px; height:40px;}
	#gallery .control .btn_prev,
	#gallery .control .btn_prev:hover{background-position:12px -35px;}
	#gallery .control .btn_next,
	#gallery .control .btn_next:hover{background-position:-47px -35px;}
	#gallery .view{width:90px; height:35px; line-height:35px; border-radius:10px; font-size:14px;}
	#gallery .view:after{width:27px; height:17px; margin:-2px 0 0 10px;}
}
@media all and (max-width:380px) {
	#gallery h4 {font-size:21px;}
	#gallery .img img{height:103px;}
}