@charset "utf-8";
#container_main {position:relative; float:left; width:100%;}

.more{position:absolute; top:10px; right:30px; display:block; width:26px; height:26px; font-size:0; text-indent:-999px; transition:0.25s ease-in-out; background:url(/images/member/main/ico_ctrl.png) no-repeat;}
.more:hover{transform:rotate(-90deg);}


/* 메인비주얼 */
#visual {position:relative; overflow:hidden; height:600px;}
#visual:before{content:''; position:absolute; top:0; left:50%; height:100%; width:100%; margin:0 0 0 -700px; background:#e2eff5 url(/images/member/main/bg_member.jpg) no-repeat 100% 100%;}
#visual .inner{height:100%;}
#visual .pic{position:absolute; top:30px; right:50%; margin:0 -75px 0 0; box-shadow:0 0 20px rgba(2,10,26,0.2);}
#visual .txt{z-index:3; position:relative; width:100%; padding:54px 0 0 60.5%; box-sizing:border-box;}
#visual .slogan{font-weight:400; font-size:24px; word-break:keep-all; letter-spacing:-2px;}
#visual .slogan strong{display:block; line-height:130%; font-size:40px; font-weight:600; color:#000; letter-spacing:-3px;}
#visual .detail{padding:0 0 0 8px; font-weight:400; font-size:18px;}
#visual .detail > ul > li{line-height:100%; padding:0 0 24px 109px;}
#visual .detail > ul > li:last-child{padding-left:27px;}
#visual .detail > ul > li:before{top:1px; width:15px; height:15px; background:url(/images/member/main/ico_list.png) no-repeat;}
#visual .detail > ul > li.list2:before{background-position:0 -41px;}
#visual .detail > ul > li.list3:before{background-position:0 -86px;}
#visual .detail > ul > li.list4:before{background-position:0 -125px;}
#visual .detail > ul > li.list5:before{background-position:0 -168px;}
#visual .detail strong,
#visual .detail .colon{position:absolute; top:0; left:27px; font-weight:600;}
#visual .detail .colon{left:99px;}
#visual .detail li:last-child strong{position:static;}
#visual .detail .lts1{letter-spacing:7px;}
#visual .detail .lts2{letter-spacing:31px;}

#visual .career div{overflow:hidden; height:140px; padding:25px 20px 25px 30px; margin:20px 0 0 -25px; font-size:16px; border-radius:10px; color:#fff; background:rgba(19,67,93,0.7); box-sizing:border-box;}
#visual .career ul{overflow-y:scroll; height:100%;}
#visual .career ul::-webkit-scrollbar{width:3px;}
#visual .career ul::-webkit-scrollbar-thumb{background-color:#fff;}
#visual .career ul::-webkit-scrollbar-track{background-color:rgba(255,255,255,0.4);}
#visual .career li{padding-bottom:18px;}
#visual .career li:before{width:4px; height:4px; background:#fff;}

#visual .sns{position:relative; padding:20px 0 30px 210px;}
#visual .sns:before{content:''; display:block; position:absolute; top:38px; left:0; width:200px; height:1px; background:rgba(0,0,0,0.3);}
#visual .sns a{display:inline-block; vertical-align:top; width:35px; height:35px; margin:0 4px 0 0; font-size:0; text-indent:-9999px; border-radius:50%; background:#1da1f2 url(/images/member/main/btn_sns.png) no-repeat;}
#visual .sns .bl{background-position:-84px 0;}
#visual .sns .tw{background-position:-42px 0;}
#visual .sns .kko{background-position:-168px 0;}
#visual .sns .insta{background-position:-126px 0;}
@media all and (max-width:1430px) {
	#visual:before{left:15px; margin:0; background-size:cover;}
	#visual .slogan strong{font-size:37px;}
}
@media all and (max-width:1280px) {
	#visual .pic{overflow:hidden; width:80%;}
	#visual .txt{padding-top:40px;}
	#visual .slogan {font-size:20px; letter-spacing:-1px;}
	#visual .slogan strong{padding:6px 0 0 0; line-height:130%; font-size:31px;}
	#visual .slogan strong span{display:block; font-size:40px;}
	#visual .detail > ul > li{line-height:110%; padding:0 0 18px 109px;}
	#visual .career li{padding-bottom:16px;}
	#visual .sns:before{width:170px;}
	#visual .sns{padding:22px 0 25px 180px;}
}
@media all and (max-width:1024px) {
	#visual{height:auto;}
	#visual:before{display:none;}
	#visual .inner{padding:0 15px;}
	#visual .pic{position:static; width:100%; margin:0;}
	#visual .txt{padding:30px 20px 23px 20px; text-align:center; background: #e2eff5 url(/images/member/main/bg_member.jpg) no-repeat 50% 100%; background-size:cover;}
	#visual .sns{padding-left:260px;}
	#visual .sns:before{left:50%; width:265px; margin:0 0 0 -250px;}
	#visual .slogan strong span{display:inline-block; font-size:31px;}
	#visual .detail {max-width:500px; padding:0; margin:0 auto; text-align:left; font-size:17px;}
	#visual .detail > ul > li{padding:0 0 15px 109px;}
	#visual .career div{height:125px; font-size:15px;}
	#visual .career li{padding-bottom:9px;}
	#visual .career li:before{top:6px;}
}
@media all and (max-width:768px) {
	#visual .inner{padding:0 10px;}
	#visual .txt{padding:26px 20px 20px 20px;}
	#visual .slogan{font-size:17px;}
	#visual .slogan strong,
	#visual .slogan strong span{font-size:27px; letter-spacing:-2px;}
	#visual .slogan strong{padding:4px 0 0 0;}
	#visual .career div{height:112px; padding:20px;}
}
@media all and (max-width:568px) {
	#visual .txt{padding:24px 17px 18px 17px;}
	#visual .slogan{font-size:16px;}
	#visual .slogan strong,
	#visual .slogan strong span{font-size:23px;}
	#visual .sns{padding:11px 0 21px;}
	#visual .sns:before{display:none;}
	#visual .detail{font-size:16px;}
	#visual .career div{height:107px; margin:10px 0 0 -27px;}
	#visual .detail > ul > li{padding:0 0 12px 100px;}
	#visual .detail .colon{left:88px;}
	#visual .detail strong{left:23px;}
	#visual .detail > ul > li:last-child{padding-left:23px;}
	#visual .detail > ul > li:before{top:0;}
	#visual .detail .lts1{letter-spacing:6px;}
	#visual .detail .lts2{letter-spacing:27px;}
}
@media all and (max-width:380px) {
	#visual .txt{padding:23px 15px 17px 15px;}
	#visual .slogan{font-size:15px;}
	#visual .slogan strong,
	#visual .slogan strong span{font-size:22px;}
	#visual .detail > ul > li{padding:0 0 12px 97px;}
	#visual .detail{font-size:15px;}
	#visual .detail .colon{left:85px;}
}
@media all and (max-width:340px) {
	#visual .slogan{font-size:14px;}
	#visual .slogan strong,
	#visual .slogan strong span{font-size:20px;}
}
.sec{padding:57px 574px 0 0;}
@media all and (max-width:1430px) {
	.sec{padding:57px 574px 0 15px;}
}
@media all and (max-width:1280px) {
	.sec{padding:57px 510px 0 15px;}
}
@media all and (max-width:1024px) {
	.sec{padding:40px 360px 0 15px;}
}
@media all and (max-width:768px) {
	.sec{padding:30px 10px 40px;}
}
@media all and (max-width:568px) {
	.sec{padding:33px 10px 36px;}
}
@media all and (max-width:380px) {
	.sec{padding:31px 10px 33px;}
}
@media all and (max-width:360px) {
	.sec{padding:36px 10px 34px;}
}

/* 게시판 */
#board{float:left; width:100%; height:424px; box-sizing:border-box;}
#board > ul{position:relative; float:left; width:100%; box-sizing:border-box; border-bottom:1px solid #e5e5e5;}
#board > ul > li{float:left;}
#board .bar{z-index:1; display:block; position:absolute; bottom:-1px; left:0; width:150px; height:5px; background:#0b7285; transition:0.3s;}
#board li h4{line-height:0; padding:0;}
#board li h4 br{display:none;}
#board li h4 a{z-index:1; position:relative; display:block; height:60px; line-height:60px; padding:0 30px; font-size:20px; font-weight:400; color:#828282; border-right:none; text-decoration:none; box-sizing:border-box; text-align:center;}
#board li.on h4 a{font-weight:600; color:#0b7285;}

#board .con{visibility:hidden; opacity:0; position:absolute; top:76px; left:0; width:100%;}
#board .on .con{visibility:visible; opacity:1; top:86px; transition:0.25s ease-in-out;}
#board .con ul{overflow:hidden; width:100%; padding:20px 0 5px 0; box-sizing:border-box; border-top:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2;}
#board .con li{position:relative; float:left; width:100%; height:43px; box-sizing:border-box;}
#board .con li a{position:relative; float:left; width:100%; padding:0 110px 0 30px; box-sizing:border-box; text-decoration:none;}
#board a:hover .tit,
#board a:focus .tit,
#board a:active .tit{color:#000; text-decoration:underline;}
#board .tit{display:inline-block; vertical-align:top; max-width:98%; height:28px; line-height:28px; color:#333; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#board .tit .s_tit{display:inline-block; vertical-align:top; height:28px; line-height:28px; padding:0 17px; margin:0 20px 0 0; font-weight:300; font-size:14px; border-radius:28px; color:#fff; background:#0b7285; text-align:center; transition:0.2s ease-in-out;}
#board .new{display:inline-block; vertical-align:top; margin:0 4px 0 0; font-size:12px; font-weight:600; color:#e05d48; text-transform:uppercase; letter-spacing:0;}
#board .date{display:block; position:absolute; right:35px; top:0; line-height:28px; font-size:14px; color:#828282; font-weight:400;}
#board .none{width:100%; padding:3em 0 0 0 !important; text-align:center; background:none;}
#board .more{display:none; height:40px; width:40px; border:3px solid #e5e5e5; box-sizing:border-box; border-radius:50%; background-position:-88px 9px;}
#board .on .more{display:block;}
#board .more:hover{border-color:#0b7285;}

#board .first a{display:block; position:relative; width:100%; height:122px; line-height:100%; padding:26px 120px 0 147px; box-sizing:border-box; text-decoration:none;}
#board .first a:before{content:''; display:block; position:absolute; top:0; left:30px; width:97px; height:97px; border-radius:50%; background:#eee url(/images/member/main/ico_board.png) no-repeat 50% 50%;}
#board .first .s_tit{display:block; margin:0 0 9px; color:#666; font-size:15px;}
#board .first .title{display:inline-block; vertical-align:top; max-width:100%; line-height:115%; font-weight:600; font-size:20px; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#board .first .date{top:46px; font-size:16px;}
#board .first .detail{display:block; width:100%; color:#666; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#board .first a:hover .title{text-decoration:underline;}

@media all and (max-width:1280px) {
	.more{right:0;}
	#board > ul {padding:0 15% 0 0;}
	#board > ul > li{width:25%;}
	#board li h4 a{padding:0;}
	#board .con li a{padding:0 80px 0 10px;}
	#board .date{right:5px;}
	#board .first a{padding:26px 92px 0 125px;}
	#board .first a:before{left:5px;}
	#board .first .title{font-size:19px;}
}
@media all and (max-width:1024px) {
	#board{height:357px;}
	#board li h4 a{font-size:18px;}
	#board .con{top:67px;}
	#board .on .con{top:77px;}
	#board .con ul{padding:20px 0 11px;}
	#board .con li{height:37px;}
	#board .con li a{padding:0 75px 0 5px;}
	#board .tit .s_tit{height:27px; line-height:28px; padding:0 12px; margin:0 10px 0 0; font-size:13px;}
	#board .first a{height:88px; padding:15px 80px 0 95px;}
	#board .first a:before{width:75px; height:75px; background-size:43px;}
	#board .first .s_tit{margin:0 0 7px; font-size:14px;}
	#board .first .date{top:33px; font-size:14px;}
	#board .first .title{font-size:18px;}
}
@media all and (max-width:768px) {
	#board > ul {padding:0 25% 0 0;}
}
@media all and (max-width:568px) {
	.more{top:-5px;}
	#board {height:300px;}
	#board li h4 br{display:inline-block;}
	#board li h4 a{height:52px; line-height:120%; font-size:17px;}
	#board .con{top:59px;}
	#board .on .con{top:69px;}
	#board .con ul{padding:16px 0 12px;}
	#board .con li{height:31px;}
	#board .date{font-size:13px;}
	#board .first a{height:72px; padding:20px 75px 0 78px;}
	#board .first a:before{width:60px; height:60px; background-size:34px;}
	#board .first .title{font-size:17px;}
	#board .first .date{top:15px; font-size:13px;}
	#board .tit .s_tit,
	#board .first .s_tit{display:none;}
}
@media all and (max-width:380px) {
	#board {height:278px;}
	#board li h4 a{height:49px; font-size:16px;}
	#board .con{top:56px;}
	#board .on .con{top:66px;}
	#board .con li{height:28px;}
	#board .first a{height:66px; padding:18px 75px 0 72px;}
	#board .first a:before{width:55px; height:55px; background-size:31px;}
	#board .first .title{font-size:16px;}
	#board .first .date{top:13px;}
	#board .tit .s_tit,
	#board .first .s_tit{display:none;}
}

/* 바로가기 */
#link{position:absolute; right:0; top:60px; width:524px; height:354px; padding:45px 0 0 38px; border-radius:10px; background:#3c71af; box-sizing:border-box;}
#link:before{content:''; display:block; position:absolute; bottom:45px; left:40px; width:115px; height:132px; background:url(/images/member/main/bg_lnk.png) no-repeat 0 100%;}
#link h4{float:left; width:173px; padding:8px 0 0 0; line-height:100%; font-size:38px; color:rgba(255,255,255,0.75);}
#link h4 span{display:block; padding:7px 0 0 0  line-height:100%; font-weight:400; font-size:22px;}
#link h4:after{content:''; display:block; width:20px; height:4px; margin:18px 0 0 0; background:rgba(255,255,255,0.3);}
#link ul{float:left; width:311px; height:264px; padding:0 15px 0 6px; border-left:1px solid rgba(255,255,255,0.3); box-sizing:border-box;}
#link li {float:left; width:50%; line-height:100%; font-weight:400; font-size:15px;}
#link li:nth-child(-n + 2){margin:0 0 26px;}
#link li a{z-index:1; position:relative; display:block; width:100%; color:#fff; box-sizing:border-box; text-align:center;}
#link li a:before,
#link li a:after{content:''; display:block; width:90px; height:90px; margin:0 auto 12px; background:url(/images/member/main/ico_lnk1.png) no-repeat 50% 50%;}
#link li a:after{z-index:-1; position:absolute; top:0; left:50%; transform:translateX(-50%); border-radius:50%; border:0 dashed #3c71af; transition:0.3s ease-in-out; background:#fff;}
#link li.list2 a:before{background-image:url(/images/member/main/ico_lnk2.png);}
#link li.list3 a:before{background-image:url(/images/member/main/ico_lnk3.png);}
#link li.list4 a:before{background-image:url(/images/member/main/ico_lnk4.png);}
#link li a:hover:before,
#link li a:focus:before,
#link li a:active:before{transform:rotateY(360deg); transition:0.65s 0.2s ease-in-out;}
#link li a:hover:after{border:3px dashed #3c71af;}

@media all and (max-width:1430px) {
	#link{right:15px;}
}
@media all and (max-width:1280px) {
	#link{width:460px; padding:45px 0 0 30px;}
	#link:before{bottom:50px; width:95px; background-size:contain;}
	#link h4{width:30%; font-size:34px;}
	#link ul{width:70%; padding:0;}
}
@media all and (max-width:1024px) {
	#link{top:43px; width:310px; height:306px; padding:33px 15px 0;}
	#link:before,
	#link h4{display:none;}
	#link ul{width:100%; padding:0; border:none;}
	#link li a:before,
	#link li a:after{width:80px; height:80px;}
	#link li a:before{background-size:auto 38px;}
}
@media all and (max-width:768px) {
	#link{position:static; float:left; width:100%; height:auto; padding:28px 15px 0;}
	#link ul{height:auto;}
	#link li{width:25%;}
}
@media all and (max-width:568px) {
	#link{padding:23px 0 23px 5%;}
	#link li{width:50%;}
	#link li:nth-child(-n + 2){margin:0 0 20px;}
	#link li a{line-height:55px; text-align:left;}
	#link li a:before,
	#link li a:after{display:inline-block; width:55px; height:55px; margin:0 10px 0 0; vertical-align:top;}
	#link li a:before{background-size:auto 28px;}
	#link li a:after{left:0; transform:none;}
}
@media all and (max-width:380px) {
	#link{padding:21px 0 21px 5%;}
	#link li{font-size:14px;}
	#link li:nth-child(-n + 2){margin:0 0 19px;}
	#link li a{line-height:50px;}
	#link li a:before,
	#link li a:after{width:50px; height:50px; margin:0 7px 0 0;}
	#link li a:before{background-size:auto 25px;}
}
@media all and (max-width:340px) {
	#link{padding:21px 0 21px 3%;}
	#link li a:before,
	#link li a:after{width:47px; height:47px; margin:0 5px 0 0;}
}

/* 갤러리 */
#gallery{z-index:1; position:relative; float:left; width:100%; padding:60px 0 0 0; box-sizing:border-box; background:url(/images/member/main/bg_gallery.jpg) no-repeat 50% 100%; background-size:cover;}
#gallery .inner{width:1456px;}
#gallery h4{position:relative; float:left; padding:19px 0 49px 28px; line-height:100%; font-size:34px; font-weight:400; color:#000; letter-spacing:-3px;}
#gallery h4 span{font-weight:600;}
#gallery h4:before{content:''; display:block; position:absolute; top:0; left:28px; width:20px; height:3px; background:#000;}
#gallery .more{position:static; float:left; margin:22px 0 0 18px;}
#gallery .list_wrap{float:left; width:100%; padding:0 0 0 8px; box-sizing:border-box;}
#gallery .list{float:left; width:330px;}
#gallery .list *{display:block;}
#gallery .list a{overflow:hidden; position:relative; width:320px; margin:0 20px 80px 20px; border-radius:35px 0 0 0; text-decoration:none; background:#fff;}
#gallery .list a:before,
#gallery .list a:after{opacity:0; visibility:hidden; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:35px 0 0 0; box-shadow:inset 0 0 0 0 #1d908a; transition:0.3s ease;}
#gallery .list a:before{left:auto; top:auto; right:0; bottom:0; width:55px; height:55px; border-radius:10px 0 0 0; background:#1d908a url(/images/member/main/ico_ctrl.png) no-repeat -29px 14px;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%; height:214px; transition:0.3s ease;}
#gallery .sbj{height:116px; padding:21px 15px 0 25px; box-sizing:border-box;}
#gallery .tit{position:relative; z-index:1; display:block; width:100%; height:44px; line-height:22px; color:#000; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; box-sizing:border-box;}
#gallery .date{padding:10px 0 0 20px; color:#828282; line-height:100%; font-size:14px; background:url(/images/member/main/ico_date.jpg) no-repeat 0 9px;}

#gallery .control{z-index:55; position:absolute; left:0; top:50%; width:100%; margin:-28px 0 0 0;}
#gallery .control button{position:absolute; left:0; top:0; width:56px; height:56px; font-size:0; text-indent:-999px; border:2px solid #d2d2d2; border-radius:50%; box-shadow:0 0 5px rgba(0,0,0,0.3); transition:0.3s ease-in-out; background:#fff url(/images/member/main/ico_ctrl.png) no-repeat 18px -31px;}
#gallery .control .btn_next{left:auto; right:0; background-position:-24px -31px;}
#gallery .control button:hover{box-shadow:0 0 4px #1d908a; border-color:#1d908a;}

#gallery .list a:hover{box-shadow:3px 5px 12px rgba(0,0,0,0.2);}
#gallery a:active img,
#gallery a:hover img,
#gallery a:focus img{transform:scale(1.1);}
#gallery .list a:hover:after,
#gallery .list a:hover:before{opacity:1; visibility:visible;}
#gallery .list a:hover:after{box-shadow:inset 0 0 0 4px #1d908a;}

@media all and (max-width:1486px){
	#gallery .inner{width:100%; padding:0 35px 0 15px;}
	#gallery .control .btn_prev{left:15px;}
	#gallery .control .btn_next{right:15px;}
}
@media all and (max-width:1024px){
	#gallery{padding:40px 0 0 0;}
	#gallery h4{padding:13px 0 30px 16px; font-size:23px; letter-spacing:-2px;}
	#gallery h4:before{left:16px;}
	#gallery .inner{padding:0 6px;}
	#gallery .list_wrap{padding:0;}
	#gallery .list a{width:calc(100% - 18px); margin:0 9px 65px;}
	#gallery .list a:before{width:35px; height:35px; background-size:130px; background-position:-31px 7px;}
	#gallery .img img{height:194px;}
	#gallery .tit{max-width:94%; font-size:17px; font-weight:800;}
	#gallery .date{font-size:15px;}
	#gallery a:active img,
	#gallery a:hover img,
	#gallery a:focus img{transform:none;}
	#gallery .more{width:21px; height:21px; margin:13px 0 0 13px; background-position:-2px -2px;}
	#gallery .control{top:0; left:auto; right:15px; width:auto; margin:0;}
	#gallery .control button{position:static; float:left; width:45px; height:45px; margin:0 0 0 8px; background-size:140px; background-position:13px -30px; box-shadow:none;}
	#gallery .control .btn_next{background-position:-23px -30px;}
	
}
@media all and (max-width:768px){
	#gallery h4{font-size:22px;}
	#gallery .inner{padding:0 2px;}
	#gallery .list a{width:calc(100% - 16px); margin:0 8px 60px; border-radius:20px 0 0 0;}
	#gallery .list a:after{border-radius:20px 0 0 0;}
	#gallery .img img{height:144px;}
	#gallery .sbj{height:auto; padding:15px 0 20px 15px;}
	#gallery .tit{font-size:16px;}
	#gallery .control{right:10px;}
	#gallery .control button{width:40px; height:40px; margin:0 0 0 5px; background-position:11px -28px; background-size:130px;}
	#gallery .control .btn_next{background-position:-23px -28px;}
}
@media all and (max-width:568px){
	#gallery{padding:25px 0 0 0;}
	#gallery h4{padding:12px 0 27px 15px; font-size:21px;}
	#gallery .inner{padding:0 3px;}
	#gallery .list a{width:calc(100% - 14px); margin:0 7px 55px;}
	#gallery .img img{height:155px;}
	#gallery .tit{font-size:15px;}
	#gallery .date{font-size:14px;}
	#gallery .more{margin:9px 0 0 10px;}
}
@media all and (max-width:380px){
	#gallery h4{padding:12px 0 25px 15px; font-size:20px;}
	#gallery .inner{padding:0 4px;}
	#gallery .list a{width:calc(100% - 12px); margin:0 6px 50px;}
	#gallery .img img{height:111px;}
	#gallery .sbj{padding:13px 0 18px 12px;}
	#gallery .tit{font-size:14px;}
	#gallery .date{font-size:13px;}
}