@charset "utf-8";
#container_main {position:relative; overflow:hidden; 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:561px; color:#fff;}
#visual:before{content:''; position:absolute; top:0; left:50%; height:100%; width:calc(50% + 700px); margin:0 0 0 -700px; background:#e4788c url(/images/member/main/bg.png) no-repeat 100% 100%;}
#visual .inner{height:100%;}
#visual .pic{position:absolute; top:30px; right:50%; margin:0 -96px 0 0; box-shadow:10px 10px 15px rgba(0,0,0,0.15);}
#visual .txt{z-index:3; position:relative; width:100%; padding:50px 0 0 61.42%; box-sizing:border-box;}
#visual .slogan p{margin:0 0 8px;}
#visual .slogan strong{display:block; line-height:110%; font-size:43px; font-weight:600; color:#fff; letter-spacing:-3px; text-shadow:0 0 5px rgba(0,0,0,0.3);}
#visual .slogan strong span{color:#ffe384;}
#visual .detail{padding:40px 0 0 8px; font-size:19px; font-weight:500; text-shadow:0 0 5px rgba(0,0,0,0.3);}
#visual .detail > ul > li{line-height:110%; padding:0 0 20px 126px;}
#visual .detail > ul > li:before{width:4px; height:4px; background:#fff;}
#visual .detail strong{position:absolute; top:0; left:14px; font-weight:400;}
#visual .detail span{display:inline-block; vertical-align:top;}

#visual .sns{position:relative; display:inline-block; vertical-align:top; margin:-5px 0 0 25px;}
#visual .sns a{float:left; width:27px; height:27px; margin:0 7px 0 0; font-size:0; text-indent:-9999px; border-radius:50%; background:#1847a2 url(/images/common/ico_sns.png) no-repeat 8px 5px;}
#visual .sns .tw{background-color: #000;background-position: -28px 5px;}
#visual .sns .bl{background-color:#31b449; background-position:-66px 5px;}
#visual .sns .kko{background-color:#ffcc00; background-position:-143px 5px;}
#visual .sns .insta{background-color:#ed3183; background-position:-104px 4px;}
#visual .sns .off{background-color: #999;}

#visual .btns{padding:17px 0 0 0;}
#visual .btns a{display:inline-block; vertical-align:top; width:202px; height:55px; line-height:55px; font-size:18px; font-weight:400; color:#fff; border-radius:25px; background:#cb475f; text-align:center; text-decoration:none;}
#visual .btns a:before{content:''; display:inline-block; vertical-align:middle; width:23px; height:19px; margin:-3px 9px 0 0; background:url(/images/member/main/ico_profile.png) no-repeat;}
#visual .btns a:first-child{margin:0 25px 0 0;}
#visual .btns a:first-child:before{width:18px; background-image:url(/images/member/main/ico_greeting.png);}
#visual .btns a:hover{background-color: #c9314d;}
#visual .btns a:hover:before{animation:ani_bg 0.7s ease-out; transform-origin:50% 100%;}

#visual.party1:before{background-color:#2273b1; background-image:url(/images/member/main/bg2.png);}
#visual.party2:before{background-color:#d6af28; background-image:url(/images/member/main/bg3.png);}
#visual.party1 .btns a{background:#125192;}
#visual.party1 .btns a:hover{background-color: #003e7e;}
#visual.party2 .btns a{background:#8c6f0a;}
#visual.party2 .btns a:hover{background-color: #6b5300;}

@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:1430px) {
	#visual:before{left:15px; margin:0;}
	#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 strong{font-size:33px;}
	#visual .slogan img{height:65px;}
	#visual .detail > ul > li{padding:0 0 18px 109px;}
	#visual .btns a{width:150px;}
	#visual .btns a span{display:none;}
}
@media all and (max-width:1024px) {
	#visual{height:auto;}
	#visual:before{display:none;}
	#visual .inner{padding:0 15px;}
	#visual .slogan p{margin:0 0 4px;}
	#visual .slogan img{height:63px;}
	#visual .pic{position:static; width:100%; margin:0; box-shadow:none;}
	#visual .txt{padding:35px 20px 40px 20px; text-align:center; background: #e4788c url(/images/member/main/bg.png) no-repeat 50% 100%; background-size:cover;}
	#visual .detail {max-width:500px; margin:0 auto; padding-left:0; text-align:left; font-size:18px;}
	#visual .detail li:first-child span{font-size:110%;}
	#visual .btns a{width:46%; height:50px; line-height:50px; font-size:17px;}
	#visual .btns a:first-child{margin:0 5% 0 0;}
	#visual .btns a span{display:inline;}

	#visual.party1 .txt{background-color:#2273b1; background-image:url(/images/member/main/bg2.png);}
	#visual.party2 .txt{background-color:#d6af28; background-image:url(/images/member/main/bg3.png);}
}
@media all and (max-width:768px) {
	#visual .inner{padding:0 10px;}
	#visual .slogan strong{font-size:27px; letter-spacing:-2px;}
}
@media all and (max-width:568px) {
	#visual .txt{padding:30px 20px 40px 20px;}
	#visual .slogan strong{font-size:23px;}
	#visual .slogan img{height:48px;}
	#visual .detail{padding:25px 0 0 0; font-size:16px;}
	#visual .detail > ul > li{padding:0 0 15px 95px;}
	#visual .detail > ul > li:before{top:5px;}
	#visual .detail .colon{left:88px;}
	#visual .detail strong{left:10px;}
	#visual .sns{display:block; overflow:hidden; width:100%; margin:5px 0 0 0;}
	#visual .btns a{height:45px; line-height:45px; font-size:15px;}
	#visual .btns a span{display:none;}
}
@media all and (max-width:380px) {
	#visual .txt{padding:28px 20px 37px 20px;}
	#visual .slogan strong{font-size:22px;}
	#visual .slogan img{height:47px;}
	#visual .detail{font-size:15px;}
	#visual .detail > ul > li{padding:0 0 14px 90px;}
	#visual .btns{padding:14px 0 0 0;}
}

/* 바로가기 */
#link {height:208px; margin:61px auto; padding:37px 24.07% 0 5.85%; text-align:center; border:1px dotted #c0e0e7; ;background:#f0f7f5; box-sizing:border-box;}
#link h4{position:absolute; bottom:0; right:5.28%;}
#link ul{overflow:hidden; width:100%;}
#link li{float:left; width:20%; vertical-align:top;}
#link li a{z-index:1; position:relative; display:block; padding:116px 0 0 0; font-size:18px; line-height:110%;}
#link li a:before,
#link li a:after{z-index:1; content:''; position:absolute; top:0; left:50%; display:block; width:93px; height:93px; margin:0 0 0 -46px; border-radius:50%; border:1px solid #43a085; box-sizing:border-box; transition:border 0.25s ease-in-out; background:#fff;}
#link li a:before{z-index:2; border:none; background:url(/images/member/main/ico_lnk1.png) no-repeat 50% 50%;}
#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.list5 a:before{background-image:url(/images/member/main/ico_lnk5.png);}
#link li.list6 a:before{background-image:url(/images/member/main/ico_lnk6.png);}
#link li a:hover:after,
#link li a:focus:after,
#link li a:active:after{border:2px dashed #43a085;}
#link li a:hover:before{transform:rotateY(360deg); transition:transform 0.6s 0.05s ease-in-out;}

@media all and (max-width:1024px) {
	#link {height:auto; margin:40px auto; padding:33px 23% 33px 2%;}
	#link h4 {right:4%;}
	#link h4 img{height:140px;}
	#link li a{padding:100px 0 0 0; font-size:17px;}
	#link li a:before,
	#link li a:after{width:83px; height:83px; margin:0 0 0 -41px;}
	#link li a:before{background-size:auto 37px;}
}
@media all and (max-width:768px) {
	#link {margin:30px auto; padding:33px 2%;}
	#link h4 {display: none;}
	#link li a{padding:85px 0 0 0; font-size:16px;}
	#link li a:before,
	#link li a:after{width:69px; height:69px; margin:0 0 0 -34px;}
	#link li a:before{background-size:auto 32px;}
}
@media all and (max-width:568px) {
	#link {padding:28px 2%;}
	#link li{float:none; display:inline-block; vertical-align:top; width:40%;} 
	#link li:nth-child(-n + 3){width:32%; margin:0 0 20px;}
	#link li a{padding:76px 0 0 0; font-size:15px;}
	#link li a:before,
	#link li a:after{width:65px; height:65px; margin:0 0 0 -32px;}
	#link li a:before{background-size:auto 30px;}
}
@media all and (max-width:380px) {
	#link {padding:26px 2%;}
	#link li a{padding:71px 0 0 0;}
	#link li a:before,
	#link li a:after{width:60px; height:60px; margin:0 0 0 -30px;}
	#link li a:before{background-size:auto 27px;}
}

/* 갤러리 */
#gallery {z-index:1; position:relative; clear:both; width:100%; background:#f3f0e9 url(/images/member/main/bg_gallery.jpg) no-repeat 50% 100%; background-size:cover;}
#gallery .inner{height:510px; padding:0 0 0 266px;}
#gallery .title{position:absolute; top:80px; left:0; width:266px; line-height:165%; font-weight:200; font-size:15px; word-break:keep-all;}
#gallery .s_tit{line-height:100%; font-size:17px;}
#gallery h4{padding:10px 0 25px; line-height:100%; font-size:33px; font-weight:900; font-family:"Jalnan";}
#gallery .list_wrap{position:absolute; top:80px; left:266px;}
#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{overflow:hidden; position:relative; width:326px; margin:0 30px 20px 0; box-shadow:10px 10px 10px rgba(0,0,0,0.1); text-decoration:none; background:#fff; transition:margin-top 0.25s ease-in-out;}
#gallery .list a:hover{margin-top:20px;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%; height:250px;}
#gallery .sbj{height:101px; padding:20px 0 0 26px; transition:background 0.25s ease-in-out; box-sizing:border-box;}
#gallery .tit{position:relative; z-index:1; display:inline-block; max-width:90%; padding:0 20px 10px 0; color:#333; font-size:17px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .date{padding:0 0 0 24px; font-size:15px; color:#666; line-height:100%; background:url(/images/kr/main/ico_date.jpg) no-repeat;}
#gallery .new{position:relative; z-index:1; display:inline-block; width:17px; height:17px; line-height:18px; margin:5px 0 0 -20px; font-size:10px; border-radius:50%; text-transform:uppercase; text-align:center; color:#fff; background:#ff9c00; vertical-align:top;}
#gallery a:hover .tit{text-decoration:underline;}
#gallery .control {float:left;}
#gallery .control button{display:block; float:left; width:61px; height:57px; margin:0 11px 0 0; border:none; font-size:0; text-indent:-999px; border-radius:28px 0 0 28px; background:#4e4b34 url(/images/kr/main/ico_ctrl.png) no-repeat 26px -268px;}
#gallery .control .btn_next{border-radius:0 28px 28px 0; background-position:-49px -268px;}
#gallery .control button:hover{background-color:#3b3820; transition:0.25s ease-in-out;}
#gallery .view{display:block; position:static; margin:33px 0 44px; line-height:100%;}
#gallery .view:after{content:''; display:inline-block; vertical-align:middle; width:15px; height:15px; margin:-3px 0 0 10px; transition:0.25s ease-in-out; background:url(/images/kr/main/ico_ctrl.png) no-repeat -54px -138px;}
#gallery .view:hover:after{transform:rotate(90deg);}

@media all and (max-width:1430px) {
	#gallery .title{left:15px;}
}
@media all and (max-width:1024px) {
	#gallery .inner{height:auto; padding:50px 5px 25px 5px;}
	#gallery .title{position:relative; top:0; left:0; width:100%; padding:0 0 35px 10px; font-size:13px; box-sizing:border-box;}
	#gallery .s_tit{font-size:16px;}
	#gallery h4{padding:8px 0 10px; font-size:27px;}
	#gallery .info{font-size:14px;}
	#gallery .info br{display:none;}
	#gallery .list_wrap{position:relative; left:0; top:0;}
	#gallery .list a{width:calc(100% - 20px); margin:0 10px 45px; box-sizing:border-box;}
	#gallery .list a:hover{margin-top:0;}
	#gallery .img img{max-height:195px;}
	#gallery .sbj{height:auto; padding:20px 0 25px 20px;}
	#gallery .tit{font-size:16px;}
	#gallery .control{position:absolute; right:0; top:15px;}
	#gallery .control button{width:47px; height:45px; background-position: 20px -273px;}
	#gallery .control .btn_next{background-position:-54px -273px;;}
	#gallery .view{position:absolute; left:190px; top:30px; margin:0;}
}
@media all and (max-width:768px) {
	#gallery .inner{padding:45px 2px 20px;}
	#gallery .title{padding:0 0 28px 10px;}
	#gallery .s_tit{font-size:14px;}
	#gallery h4{padding:6px 0 0 0; font-size:24px;}
	#gallery .info{display:none;}
	#gallery .list a{width:calc(100% - 16px); margin:0 8px 45px;}
	#gallery .list img{max-height:148px;}
	#gallery .date{line-height:130%; font-size:14px;}
	#gallery .control{top:5px;}
	#gallery .control button{width:42px; height:40px; margin:0 7px 0 0; background-position:17px -275px;}
	#gallery .control .btn_next{background-position:-56px -275px;}
	#gallery .view{top:25px; left:170px}
}
@media all and (max-width:568px) {
	#gallery .s_tit{visibility:hidden;}
	#gallery h4{font-size:23px;}
	#gallery .sbj{padding:17px 0 20px 17px;}
	#gallery .tit{font-size:15px;}
	#gallery .date{font-size:13px;}
	#gallery .view{top:0; left:10px;}
}
@media all and (max-width:380px) {
	#gallery .inner{padding:43px 4px 20px;}
	#gallery h4{font-size:22px;}
	#gallery .list a{width:calc(100% - 12px); margin:0 6px 40px;}
	#gallery .list img{max-height:130px;}
	#gallery .tit{font-size:14px;}
}