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

.more{z-index:2; position:absolute; top:13px; right:40px; display:block; font-size:15px; font-weight:500; letter-spacing:0;}
.more:after{content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:-1px 0 0 12px; background:url(/images/member/main/ico_more.gif) no-repeat;}
.more:hover:after{transform:rotate(90deg);}
@media all and (max-width:1024px) {
	.more{letter-spacing:-1px;}
	.more:after{margin:-1px 0 0 9px;}
}

/* 메인비주얼 */
#visual {position: relative;/* height: 550px; */}
#visual .inner {position: relative; background: #3a9fa3 url(/images/member/main/bg_member.png)no-repeat bottom right; z-index: 2;}
#visual .pic {position: absolute; top: 0; right: 45%; z-index: -1;}
#visual .txt {position: relative;width: 1500px;min-height: 485px;padding: 40px 0 40px 947px;color: #fff;box-sizing: border-box;z-index: 2;}
#visual .txt p {font-size: 29px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}
#visual .txt .sub_title {position: relative;}
#visual .txt .sub_title:after {content: '';display: inline-block;vertical-align: super;margin: 0 0 0 20px; width: 35%;height: 1px;background: rgba(255,255,255,0.3);}
#visual .txt .title {font-size: 38px; font-weight: 600;}
#visual .txt .title.fz {font-size:29px;}
#visual .txt .title span {color: #ffe69a;}

#visual .dot {margin: 30px 0 0;}
#visual .dot > li {padding: 0 0 15px 150px;font-size: 19px;font-weight: 500;min-height: 40px;}
#visual .dot > li em{position: absolute; top: 0; left: 25px; font-weight: 300;}
#visual .dot > li:before {top: 4px; width: 16px; height: 14px; background: url(/images/member/main/ico_dot.png)no-repeat;} 

#visual .sns {font-size: 0;}
#visual .sns li {display: inline-block;}
#visual .sns li:not(:last-child){margin: 0 10px 0 0;}
#visual .sns a {display: block; width: 27px; height: 27px; background: url(/images/member/main/ico_sns.jpg)no-repeat 0 0; text-indent: -9999px; border-radius: 50%;}
#visual .sns .tw {background-position: -27px 0;}
#visual .sns .kakao {background-position: -54px 0;}
#visual .sns .insta {background-position: -81px 0;}
#visual .sns .bl {background-position: -108px 0;}
#visual .sns .yt {background-position: -135px 0;}

#visual .btns {font-size: 0; margin: 25px 0 0;}
#visual .btns a {display: inline-flex; justify-content: space-between; align-items: center; padding: 0 30px; width: 185px; height: 45px; line-height: 45px; color: #fff; font-size: 16px; background:rgba(18,51,72,0.6); border-radius: 22.5px; box-sizing: border-box; text-decoration: none; transition: background-color 0.2s ease-in-out;}
#visual .btns a:hover {background: #123348;}
#visual .btns a:first-child {margin: 0 30px 0 0;}
#visual .btns a:after {content: ''; display: inline-block; width: 7px; height: 11px; background: url(/images/member/main/ico_arrow.png)no-repeat;}

@media all and (max-width:1600px){
    #visual .inner2 {padding: 0;}
    #visual .txt {float: right;width: 50%;padding: 40px 0 40px 50px;}
    #visual .txt:after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #3a9fa3 url(/images/member/main/bg_member.png)no-repeat bottom right; z-index: -1;}
}
@media all and (max-width:1260px){
    #visual {height: 500px;}
    #visual .pic {right: 40%;height: 100%;}
    #visual .txt {padding: 50px 0 0 50px;height: 485px;min-height: auto;}
    #visual .txt p {font-size: 24px;}
    #visual .txt .title {font-size: 32px;}
    
    #visual .dot > li {font-size: 18px;}
} 

@media all and (max-width:1024px){
    #visual {height: auto;}
    #visual .pic {position: static;}
    #visual .pic img {width: 100%; height: auto;}
    #visual .txt {float: none; padding: 40px 0 35px 40px; width: 100%; height: auto;}
    #visual .txt p {font-size: 22px;}
    #visual .txt .title {font-size: 30px;}
    
    #visual .dot {margin: 20px 0 0;}
    #visual .dot > li {font-size: 17px;}
    
    #visual .btns {margin: 10px 0 0;}
    #visual .btns a {font-size: 15px;}
}
@media all and (max-width:568px){
    #visual .txt {padding: 30px 0 35px 25px;} 
    #visual .txt p {font-size: 20px;}
    #visual .txt .title, #visual .txt .title.fz {font-size: 26px;}
    #visual .dot > li {padding: 0 0 10px 110px; font-size: 15px;}
    
    #visual .btns a {width: 150px; height: 40px; line-height: 40px;}
    #visual .btns a:first-child {margin: 0 20px 0 0;}
}
@media all and (max-width:380px){
    #visual .txt {padding: 25px 20px 30px;}
    #visual .txt p {font-size: 18px;}
    #visual .txt .sub_title:after {display: none;}
    #visual .txt .title, #visual .txt .title.fz {font-size: 22px;}
    
    #visual .dot > li {padding-left: 95px;}
    
    #visual .btns a {padding: 0 20px; width: 120px; height: 36px; line-height: 36px; font-size: 14px;}
    #visual .btns a:first-child {margin: 0 10px 0 0;}
    
}


/* 바로가기 */
#link {position: relative; padding: 34px 0; height: 228px; background: #eaf4f4; box-sizing: border-box;}
#link:after {content: ''; display: block; position: absolute; width: 100%; height: 264px; top: -264px; left: 0; background: #eaf4f4;}
#link .inner{padding:0 30px 0 408px;}
#link .inner:before{content:''; display:block; position:absolute; bottom: -52px; left:226px; width:160px; height:158px; background:url(/images/member/main/bg_link.png) no-repeat 0 100%;}
#link .tit_wrap{position:absolute; top:19px; left:0;}
#link h4 {font-size:20px; font-weight: 300;}
#link h4 strong {display: block; font-weight: 600; font-size: 30px; color: #3a9fa3;}
#link .tit_wrap p{line-height: 160%; padding:10px 0 0; font-size:15px; color:#6c6c6c; font-weight:300;}
#link ul{overflow:hidden; width:100%; text-align:right;}
#link li {float:left;width: 158px;line-height:120%;text-align:center;padding:0 0 0 40px;}
#link li + li{padding:0 0 0 10%;}
#link li a{z-index:1; position:relative; display:block; width:100%; padding:135px 0 0 0; color:#333; font-size: 18px; font-weight: 400; box-sizing:border-box; text-align:center; text-decoration: none;}
#link li a:before{content:''; display:block; position:absolute; top:0; left:13%; width:116px; height:116px; background: #fff url(/images/member/main/ico_link1.png) no-repeat 50% 50%; border-radius: 50%; box-shadow: 5px 9px 20px 0px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease-in-out;} 
#link li.list2 a:before{background-image:url(/images/member/main/ico_link2.png);}
#link li.list3 a:before{background-image:url(/images/member/main/ico_link3.png);}
#link li.list4 a:before{background-image:url(/images/member/main/ico_link4.png);}
#link li.list5 a:before{background-image:url(/images/member/main/ico_link5.png);}
#link li a:hover:before{background: #3a9fa3 url(/images/member/main/ico_link1_on.png)no-repeat 50% 50%;}
#link li.list2 a:hover:before{background-image:url(/images/member/main/ico_link2_on.png);}
#link li.list3 a:hover:before{background-image:url(/images/member/main/ico_link3_on.png);}
#link li.list4 a:hover:before{background-image:url(/images/member/main/ico_link4_on.png);}
#link li.list5 a:hover:before{background-image:url(/images/member/main/ico_link5_on.png);}

@media all and (max-width:1430px) {
    #link {padding: 34px 15px;}
	#link .inner{padding:0 0 0 390px;}
	#link h4{left:70px;}
	#link li{width:14.28%;}
    #link li a:before {left: 50%; transform: translateX(-50%);}
    #link li + li {padding: 0 0 0 12%;}
}
@media all and (max-width:1280px) {
    #link {height: 195px;padding: 30px 15px;}
    #link .inner {padding: 0 0 0 320px;}
    #link h4 {font-size: 19px;}
    #link h4 strong {font-size: 27px;}
    #link .tit_wrap {top: 7px;}
    #link .inner:before {width: 120px;bottom: -35px;left: 200px;background-size: contain;}
    
    #link li{width:23%;}
    #link li a {padding: 120px 0 0; font-size: 17px;}
    #link li a:before {width: 100px; height: 100px;}
    #link li + li {padding: 0;}
}
@media all and (max-width:1024px) {
    #link {height: auto;}
	#link .tit_wrap, #link .inner:before {display:none;}
    #link .inner {padding: 0; height: auto;}
}
@media all and (max-width:768px) {
    #link li a {padding: 95px 0 0; font-size: 16px;}
    #link li a:before {width: 75px; height: 75px; background-size: 30px auto;}
    #link li a:hover:before {background-size: 30px auto;}
    #link li {padding: 0 0 0 30px;}
    
}
@media all and (max-width:568px) {
    #link {padding-bottom: 20px;}
    #link ul {display: flex; flex-wrap: wrap; justify-content: center;}
    #link li {width: 33.33%; margin: 0 0 10px;}
    #link li.list1{padding:0px;}
    #link li a {padding: 90px 0 0; font-size: 15px;}
	
}
@media all and (max-width:380px) {
    #link li a {font-size: 14px;}
}


.main_bottom{padding: 45px 0 0 0;box-sizing:border-box;background:url(/images/member/main/bg_gallery.jpg) no-repeat 50% 100%;}

/* 갤러리 */
#gallery{z-index:1; position:relative; margin: 0 auto; max-width: 1920px; box-sizing:border-box;}
#gallery h4{font-size: 35px; text-align: center;}
#gallery .info{margin: 10px 0 0; font-weight:400; text-align: center;}
#gallery .info br {display: none;}
#gallery .list_wrap{margin: 50px 0 0; width:100%; text-align:left;}
#gallery .list{float:left;}
#gallery .list *{display:block;}
#gallery .list a{overflow:hidden; position:relative; width:326px; margin:0 32px 60px 0; padding: 10px; color: #000; box-shadow:10px 10px 10px rgba(0,0,0,0.1); text-decoration:none; background:#fff; box-sizing: border-box; transition: 0.3s ease-in-out;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%; height:250px; transition:0.4s ease;}
#gallery .sbj{padding:20px 0 20px 10px; transition:background 0.25s ease-in-out; box-sizing:border-box;}
#gallery .tit{position:relative; z-index:1; display:inline-block; max-width:90%; line-height:31px; padding:0 20px 0 0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .date{z-index:1;display: block;position:relative;padding: 0 0 0 22px;color:#656565;font-size:15px;font-weight: 300;transition:color 0.25s ease-in-out;}
#gallery .date:after{content:''; display:block; position:absolute; top: 4px; left:0; width:14px; height:14px; background:url(/images/kr/main/ico_date.png)no-repeat;}
#gallery .new{position:relative; z-index:1; display:inline-block;  vertical-align:middle; width:18px; height:18px; line-height:19px; margin:-2px 0 0 -20px; font-size:11px; border-radius:50%; text-transform:uppercase; text-align:center; color:#fff; background:#ff9c00;}
#gallery .list a:hover {background:#3a9fa3; color: #fff;}
#gallery .list a:hover .date {color: #fff;}
#gallery .list a:hover .date:after {filter: brightness(0) invert(1);}

#gallery .control{position:absolute; right:0; top:17px; font-size: 0;}
#gallery .control button,
#gallery .control .more{width:55px;height:55px;margin:0 0 0 11px;border-radius:50%;box-shadow: 2px 3px 7px 0px rgba(0, 0, 0, 0.3);background: #FFF url(/images/member/main/ico_ctrl.png)no-repeat 22px 18px;transition:0.3s ease-in-out;text-indent: -9999px;}
#gallery .control .btn_next{background-position: -75px 18px;}
#gallery .control .more{position:static;float:right;font-size:0;text-indent:-9999px;background-position: -158px 18px;}
#gallery .control .more:after{display:none;}
#gallery .control button:hover,
#gallery .control a:hover{box-shadow:2px 3px 3px rgba(0,0,0,0.3);}

@media all and (max-width:1420px){
    #gallery .control {right: 15px;}
}

@media all and (max-width:1024px){
    #gallery h4 {font-size: 30px;}
    #gallery .info {margin: 4px 0 0; font-size: 15px;}
    #gallery .info br {display: block;}
    #gallery .list_wrap {margin: 40px 0 0;}
    #gallery .list a {width: 230px; margin: 0 20px 45px 0;}
    #gallery .img img {height: auto;}
    #gallery .sbj {padding: 15px 0 10px 10px;}
    
    #gallery .control {top: 11px; right: 15px;}
    #gallery .control button, #gallery .control .more {margin: 0 0 0 7px; width: 45px; height: 45px; background-position: 18px 15px;}
    #gallery .control .btn_next {background-position: -80px 15px;}
    #gallery .control .more {background-position: -164px 14px;}
}

@media all and (max-width:768px){
    .main_bottom {background-size: cover;}

    #gallery h4 {font-size: 24px; text-align: left;}
    #gallery .info {display: none;}
    #gallery .control {top: -4px;}
    
    #gallery .list_wrap {margin: 35px 0 0;} 
    #gallery .list a {margin: 0 10px 45px; width: calc(100% - 15px);}
}

@media all and (max-width:568px){
    #gallery h4 {font-size: 22px;}
    #gallery .list_wrap {margin: 25px 0 0;}
    #gallery .list a {padding: 5px; margin-bottom: 30px;}
    #gallery .sbj {padding: 10px 0 10px 10px;}
    #gallery .img img {height: 140px;}
    #gallery .date {font-size: 14px;}
    
    #gallery .control button, #gallery .control .more {width: 36px; height: 36px; background-position: 14px 10px;}
    #gallery .control .btn_next {background-position: -85px 10px;}
    #gallery .control .more {background-position: -168px 10px;}
}

@media all and (max-width:380px){
    #gallery .tit {font-size: 15px;}
    #gallery .img img {height: 110px;}
}