@charset "UTF-8";
@import url('font.css');



/********************************************************
■ 사이트 초기 설정
********************************************************/
.txt-bc1, i.txt-bc1, a.txt-bc1, a.txt-bc1:link, a.txt-bc1:visited, .txt-hover-bc1:hover, .txt-on-bc1.on { color: #ad0d3c !important; }
.bg-bc1, a.bg-bc1, .bg-hover-bc1:hover, .bg-on-bc1.on, .bg-before-bc1:before, .bg-after-bc1:after, .bg-hover-div-bc1:hover > div { background-color: #ad0d3c !important; color: white !important; }
.border-bc1, a.border-bc1, .border-hover-bc1:hover, .border-on-bc1.on, .border-before-bc1:before, .border-after-bc1:after { border-color: #ad0d3c !important; }
.txt-bc2, i.txt-bc2, a.txt-bc2, a.txt-bc2:link, a.txt-bc2:visited, .txt-hover-bc2:hover, .txt-on-bc2.on { color: #ad0d3c !important; }
.bg-bc2, a.bg-bc2, .bg-hover-bc2:hover, .bg-on-bc2.on, .bg-before-bc2:before, .bg-after-bc2:after, .bg-hover-div-bc2:hover > div { background-color: #ad0d3c !important; color: white !important; }
.border-bc2, a.border-bc2, .border-hover-bc2:hover, .border-on-bc2.on, .border-before-bc2:before, .border-after-bc2:after { border-color: #ad0d3c !important; }
.txt-bc3, i.txt-bc3, a.txt-bc3, a.txt-bc3:link, a.txt-bc3:visited, .txt-hover-bc3:hover, .txt-on-bc3.on { color: #a0744f !important; }
.bg-bc3, a.bg-bc3, .bg-hover-bc3:hover, .bg-on-bc3.on, .bg-before-bc3:before, .bg-after-bc3:after, .bg-hover-div-bc3:hover > div { background-color: #a0744f !important; color: white !important; }
.border-bc3, a.border-bc3, .border-hover-bc3:hover, .border-on-bc3.on, .border-before-bc3:before, .border-after-bc3:after { border-color: #a0744f !important; }


.txt-bc4, i.txt-bc4, a.txt-bc4, a.txt-bc4:link, a.txt-bc4:visited, .txt-hover-bc4:hover, .txt-on-bc4.on { color: #555 !important; }
.bg-bc4, a.bg-bc4, .bg-hover-bc4:hover, .bg-on-bc4.on, .bg-before-bc4:before, .bg-after-bc4:after, .bg-hover-div-bc4:hover > div { background-color: #555 !important; color: white !important; }
.border-bc4, a.border-bc4, .border-hover-bc4:hover, .border-on-bc4.on, .border-before-bc4:before, .border-after-bc4:after { border-color: #555 !important; }

/* 내용 드래그했을때 선택 블록 */
::selection { background: #ad0d3c !important; color: white; }
::-moz-selection { background: #ad0d3c !important; color: white; }

/********************************************************
■ HTML 요소 초기화
********************************************************/
* { box-sizing: border-box; }
/* 기반 글자크기 재정의 -- 상대단위(rem) 사용에 중요함. */
html, body { font-family: 'S-CoreDream-3Light', sans-serif; font-size: 16px; margin:0; padding:0; }
body { color: #333; transition: all 200ms; overflow-x:hidden; width:100%; transition: all .2s ease; }

.c { max-width:1400px; margin:0 auto; padding-left:15px; padding-right:15px; }

.h0, .h1, .h2, .h3, .h4, .h5, .h6, .h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n, h1, h2, h3, h4, h5, h6 { line-height: 150%; margin:0; }
h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; }
.h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n { font-weight: normal; }

.h0, .h0n { font-size: 4rem; }
h1, .h1, .h1n { font-size: 3.5rem; }
h2, .h2, .h2n { font-size: 3rem; }
h3, .h3, .h3n { font-size: 2.45rem; }
h4, .h4, .h4n { font-size: 2rem; }
h5, .h5, .h5n { font-size: 1.4rem; }
h6, .h6, .h6n { font-size: 1.125rem; }

a, a:link, a:visited, a:hover { color: #333; text-decoration: none; transition:all .3s ease; }
a:focus { outline: none; }

ul { list-style: none; margin:0; padding:0; }
.d-ele{ }
.m-ele{display:none;}
@media (max-width: 767px) { 
	html, body { font-size: 14px; }
	.m-ele{display:inline-block;}
	.d-ele{display:none;}
h3, .h3, .h3n { font-size: 2.0rem; }	
}

/********************************************************
■ Header : 상단 해더
********************************************************/
#top { position:fixed; left:0; top:0; right:0; height:100px; padding:0 60px; display:flex; justify-content:center; align-items:center; z-index:999; transition-duration: 300ms; }
body.scrolled #top { background:#fff; border-bottom:1px solid rgba(200,200,200,.3); }

#top .logo { width:200px; height:40px; }
#top .logo a { display:block; height:100%; background:url('../image/logo_txt.png') no-repeat left center/contain; }

#top #top-menu { width:calc(100% - 200px); height:100%; max-width:950px; margin:0 auto;}
#top #top-menu li { position:relative; }
#top #top-menu a { display:block; white-space:nowrap; }

#top #top-menu .depth1 { height:100%; display:flex; justify-content:space-evenly; align-items:center;}
#top #top-menu .depth1 ul { position:absolute; opacity:0; visibility:hidden; transition-duration: 300ms; }
#top #top-menu .depth1 ul.on { opacity:1; visibility:visible; }
#top #top-menu .depth1 > li > a { font-size:1.125rem; }

#top #top-menu .depth2 { top:100%; left:100%; transform:translateX(-50%); padding:30px 10px 15px 0; }
#top #top-menu .depth2:before { content:""; position:absolute; left:0; top:15px; right:0; bottom:0; background:#383a4a; }
#top #top-menu .depth2.on { left:50%; }
#top #top-menu .depth2 > li > a { position:relative; color:rgba(255,255,255,.7); padding:10px 25px; }
#top #top-menu .depth2 > li > a .fa { position:absolute; top:50%; transform:translateY(-50%); right:5px; display:none; color:rgba(255,255,255,.6); }
#top #top-menu .depth2 > li:hover > a .fa { display:block; }

#top #top-menu .depth3 { left:100%; top:20%; margin-left:10px; padding:15px 0; background:#fff; border:1px solid #ddd; }
#top #top-menu .depth3.on { top:-15px; }
#top #top-menu .depth3 > li > a { color:#888; padding:10px 20px; }
#top #top-menu .depth3 > li > a:hover { color:#111; text-decoration:underline; }

#top .links { margin-right:30px; }
#top .links a { position:relative; font-size:.813rem; margin-right:15px; padding-left:25px; }
#top .links a:before { content:""; position:absolute; left:0; top:50%; width:25px; height:20px; transform:translateY(-50%); background:none no-repeat center/contain; }
#top .links a.intro:before { background-image:url('../image/main/top-links-intro.png'); background-position:right center; }
#top .links a.member:before { background-image:url('../image/main/top-links-member.png'); }

#top .top-menu-btn { position:absolute; top:50%; transform:translateY(-50%); right:60px; width:20px; height: 40px; transition-duration: 300ms; }
#top .top-menu-btn > div { background:#333; position:absolute; left:50%; top:50%; width:20px; height:2px; border-radius:2px; transform: translate(-50%, -50%); transition: all 0.5s; }
#top .top-menu-btn > div:nth-child(1) { margin-top:-6px; }
#top .top-menu-btn > div:nth-child(3) { margin-top:6px; }

body.m-menu-on #top .top-menu-btn > div { margin-top:0; }
body.m-menu-on #top .top-menu-btn > div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.3); }
body.m-menu-on #top .top-menu-btn > div:nth-child(2) { opacity: 0; }
body.m-menu-on #top .top-menu-btn > div:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.3); }


@media (max-width: 1400px) { 
	#top #top-menu { max-width:700px; }

	#top #top-menu { margin-right:50px; }
	#top .links { display:none; }
}

@media (max-width: 1024px) { 
	#top { padding:0 30px; }
	#top #top-menu { display:none; }
	#top .links { display:block; }
	#top .top-menu-btn { right:30px; }
	#top .logo a {background-position: center center; }

}

@media (max-width: 767px) { 
	#top { height:70px; padding:0 15px; }
	#top .logo { height:30px; }
	#top .links { display:none; }
	#top .top-menu-btn { right:15px; }
}


/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴
********************************************************/
body.m-menu-on #m-menu { right:0; opacity: 1; }
body.m-menu-on.fix { overflow:hidden; }

#m-menu { position: fixed; right:-100%; width: 350px; opacity: 0.7; top: 0; bottom: 0; z-index: 1100; height: 100%; background-color: #fff; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.3); transition-duration: 400ms; }
#m-menu .m-menu-container { height:calc(100% - 60px); overflow-y:auto; }

#m-menu .m-menu-top { position:relative; height:70px; padding:15px; background:url("../image/logo_txt.png") 15px center no-repeat; background-size:150px; border-bottom:1px solid #ddd; }

#m-menu a.btn-close { position: absolute; top: 10px; right: 5px; color: #aaa; overflow: hidden; z-index:2; }
#m-menu a.btn-close > div { position: relative; width: 50px; height: 50px; }
#m-menu a.btn-close > div > div { position: absolute; width: 25px; height: 2px; left: 50%; top: 50%; border-radius: 2px; background-color: #333; }
#m-menu a.btn-close > div > div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.2); }
#m-menu a.btn-close > div > div:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2); }

#m-menu .depth1 > li { border-bottom:1px solid #ddd; }
#m-menu .depth1 > li > a { display: block; position: relative; width: 100%; padding: 10px 15px; color: #333; font-size: 1.1rem; }
#m-menu .depth1 > li > a .fa { position: absolute; top: 15px; right: 20px; transition: all .3s ease; }
#m-menu .depth1 > li > a.on .fa:nth-of-type(1) { display:none; }
#m-menu .depth1 > li > a .fa:nth-of-type(2) { display:none; }
#m-menu .depth1 > li > a.on .fa:nth-of-type(2) { display:block; }

#m-menu .depth2 { display:none; background:#f8f8f8; padding:15px 0; }
#m-menu .depth2 > li > a { position: relative; display: block; padding: 10px 15px; color:#888; transition: all .3s ease; }
#m-menu .depth2 > li:hover > a, #m-menu .depth2 > li > a.on { color: #333; }

#m-menu .depth3 { padding:0 5px; }
#m-menu .depth3 a { display:block; padding:0 15px 5px; color:#aaa; font-size:.875rem; }
#m-menu .depth3 a:last-child { padding-bottom:10px; }
#m-menu .depth3 a:before { content:"- "; }
#m-menu .depth3 a:hover, #m-menu .depth3 a.on { text-decoration:underline; }


#m-menu .sns-btn { padding:30px 20px; }
#m-menu .sns-btn a { border-radius:3px; display:inline-block; width:25px; height:25px; background:none center/contain no-repeat; margin-right:5px; }
#m-menu .sns-btn a.facebook { background-image:url('../image/sns_icon_facebook_bg.jpg'); }
#m-menu .sns-btn a.kakao { background-image:url('../image/sns_icon_kakao_bg.jpg'); }
#m-menu .sns-btn a.instagram { background-image:url('../image/sns_icon_instagram_bg.jpg'); }
#m-menu .sns-btn a.twitter { background-image:url('../image/sns_icon_twitter_bg.jpg'); }
#m-menu .sns-btn a.youtube { background-image:url('../image/sns_icon_youtube_bg.jpg'); }

#m-menu .m-menu-bottom { position: fixed; bottom: 0; right: -100%; width:350px; background:#f8f8f8; border-top-style:solid; border-top-width:2px; transition-duration: 400ms; z-index:3; }
#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { flex:1; border-right:1px solid #ddd; text-align:center; font-size:.875em; padding:10px 0; }
#m-menu .m-menu-login a:last-child { margin-right:0; }
#m-menu .m-menu-login a .icon { display:inline-block; vertical-align:middle; width:20px; height:20px; background:none center/contain no-repeat; margin-right:2px; }
#m-menu .m-menu-login a .icon.adm { background-image:url('../image/m-menu-login-adm.png'); }
#m-menu .m-menu-login a .icon.logout { background-image:url('../image/m-menu-login-logout.png'); }
#m-menu .m-menu-login a .icon.login { background-image:url('../image/m-menu-login-login.png'); }
#m-menu .m-menu-login a .icon.join { background-image:url('../image/m-menu-login-join.png'); }
#m-menu .m-menu-login a .icon.kakao { background-image:url('../image/m-menu-login-kakao.png'); }

body.m-menu-on #m-menu .m-menu-bottom { right:0; }


@media (max-width: 768px) { 
	#m-menu .m-menu-login { margin-top:0; }

	#m-menu .sub a { padding:5px 15px; }
	#m-menu, #m-menu .m-menu-bottom { right:-100%; width: 80%; transition-duration: 200ms; }
}

#m-menu-overlay { position: fixed; left: 0; top: 0; z-index: 1050; width: 100%; height: 100%; opacity: 0; display: none; }
body.m-menu-on #m-menu-overlay { display: block; }


/********************************************************
■ Sub : 서브비주얼 & 왼쪽메뉴
********************************************************/
#sub-top { padding:100px 60px 50px; }
/*.page{padding:0 60px 60px;}*/

.sub-visual { position:relative; height:200px; background-color:#888; overflow:hidden; }
.sub-visual::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.3); z-index:1; }

/*.sub-visual .swiper-container { height:100%; }*/
.sub-visual > div { height:100%; background:none no-repeat center/cover; }
.sub-visual .content { position:absolute; left:10px; right:10px; top:40%; text-align:center; color:#fff; z-index:2; }

@media (max-width: 1024px) {
	#sub-top { padding:100px 30px 50px; }
/*	.page{padding:0 30px;}*/
}

@media (max-width: 767px) {
	#sub-top { padding:70px 15px 40px; }
	.sub-visual { height: 200px; }
/*	.page{padding:0 15px;}*/
}

#sub-page { display:flex; justify-content: space-between; padding-bottom:50px; }

#left-menu { position:relative; width:300px; padding-right:50px; }
#left-menu:before { content:""; position:absolute; top:-50px; right:0; bottom:-50px; width:1px; background:#ddd; }
#left-menu li { position:relative; }
#left-menu a { position:relative; display:block; }

#left-menu .depth1 > li { display:none; }
#left-menu .depth1 > li.on { display:block; }
#left-menu .depth1 div { text-align:center; padding:30px 20px; border-top:2px solid #666; border-bottom:1px solid #ddd; }

#left-menu .depth2 { padding-top:10px; }
#left-menu .depth2 > li > a { font-size:1.125rem; padding:15px; }
#left-menu .depth2 > li.on > a { background:#a0744f; color:#fff; }	/* #666 */
#left-menu .depth2 > li > a .fa { position:absolute; top:50%; right:15px; transform:translateY(-50%); color:#aaa; }
#left-menu .depth2 > li.on > a .fa { color:#fff; }

#left-menu .depth3 { background:#f8f8f8; padding:10px 0; display:none; }
#left-menu .depth2 > li.on .depth3 { display:block; }
#left-menu .depth3 > li > a { color:#888; padding:5px 15px; }
#left-menu .depth3 > li.on a { font-weight:600; color:#111; }
#left-menu .depth3 > li a:hover { color:#111; }



@media (max-width: 1500px) {
	#sub-page { flex-direction: column; padding:0 60px 50px; max-width:100%; }
	#left-menu { width:100%; padding-right:0; display:none; }
	#left-menu:before { display:none; }

	#left-menu .depth1 div { padding:15px; display:none; }

	.sub-content { width:100%; }
}

@media (max-width: 1024px) {
	#sub-page { padding:0 30px 50px; }
}

@media (max-width: 767px) {
	#sub-page { padding:0 15px 50px; }
}

/********************************************************
■ Section : 내용 섹션
********************************************************/
#page .section { position:relative; overflow:hidden; }
#page .sec.padding { padding-top:70px; padding-bottom:70px; }
#page .sec .c { position:relative; z-index:2; }

#page .sec .header { text-align:center; }
#page .sec .header .subhead { animation-delay:300ms; }
#page .sec .header .head { line-height:1.3; margin:15px 0 30px; animation-delay:600ms; }
#page .sec .header .desc { animation-delay:1000ms; }

@media (min-width: 1200px) and (min-height: 750px) { 
	#page .sec .c { top:50%; transform:translateY(-50%);} /* margin-top:30px; */
}

/********** index & main 공통섹션 **********/
.fp-circle-bg { }

.fp-circle-bg .bg { position:absolute; width:1400px; left:50%; transform:translateX(-50%); top:0; bottom:0; }
.fp-circle-bg .bg div { position:absolute; border-radius:100%; transition-delay:600ms; }

.fp-circle-bg .bg .horizontal { background-size:100% 5px !important; }
.fp-circle-bg .bg .vertical { background-size:15px 15px !Important; }

.fp-circle-bg .bg .circle1 { left:-100px; width:150px; height:150px; background:#ffd700; top:20%; opacity:.2; }
.fp-circle-bg .bg .circle2 { right:-100px; width:250px; height:250px; background:linear-gradient(#ad0d3c 50%, transparent 50%); top:20%; }
.fp-circle-bg .bg .circle3 { left:20%; width:100px; height:100px; background:#f77100; top:50%; opacity:.5; }
.fp-circle-bg .bg .circle4 { left:50%; width:50px; height:50px; background:#bfff00; top:100%; }
.fp-circle-bg .bg .circle5 { left:70%; width:30px; height:30px; background:#666; top:80%; }
.fp-circle-bg .bg .circle6 { left:35%; width:20px; height:20px; background:#50bcdf; top:60%; }
.fp-circle-bg .bg .circle7 { right:30%; width:200px; height:200px; background:linear-gradient(45deg, #eee 25%, transparent 0, transparent 50%, #eee 0, #eee 75%, transparent 0); top:60%; }

.fp-circle-bg.active .bg .circle1 { top:50%; transition-duration:400ms; }
.fp-circle-bg.active .bg .circle2 { top:30%; transition-duration:600ms; }
.fp-circle-bg.active .bg .circle3 { top:60%; transition-duration:700ms; }
.fp-circle-bg.active .bg .circle4 { top:8%; transition-duration:600ms; }
.fp-circle-bg.active .bg .circle5 { top:50%; transition-duration:400ms; }
.fp-circle-bg.active .bg .circle6 { top:15%; transition-duration:300ms; }
.fp-circle-bg.active .bg .circle7 { top:80%; transition-duration:400ms; }




.fp-circle-bg2 { }

.fp-circle-bg2 .bg { position:absolute; width:1400px; left:50%; transform:translateX(-50%); top:0; bottom:0; }
.fp-circle-bg2 .bg div { position:absolute; border-radius:100%; transition-delay:600ms; }

.fp-circle-bg2 .bg .horizontal { background-size:100% 5px !important; }
.fp-circle-bg2 .bg .vertical { background-size:15px 15px !Important; }

.fp-circle-bg2 .bg .circle1 { left:-100px; width:150px; height:150px; background:#ffd700; top:20%; opacity:.2; }
.fp-circle-bg2 .bg .circle2 { right:-100px; width:250px; height:250px; background:linear-gradient(#ad0d3c 50%, transparent 50%); top:20%; }
.fp-circle-bg2 .bg .circle3 { left:20%; width:100px; height:100px; background:#f77100; top:50%; opacity:.5; }
.fp-circle-bg2 .bg .circle4 { left:50%; width:50px; height:50px; background:#bfff00; top:100%; }
.fp-circle-bg2 .bg .circle5 { left:70%; width:30px; height:30px; background:#666; top:80%; }
.fp-circle-bg2 .bg .circle6 { left:35%; width:20px; height:20px; background:#50bcdf; top:60%; }
.fp-circle-bg2 .bg .circle7 { right:30%; width:200px; height:200px; background:linear-gradient(45deg, #eee 25%, transparent 0, transparent 50%, #eee 0, #eee 75%, transparent 0); top:60%; }

.fp-circle-bg.active .bg .circle1 { top:50%; transition-duration:400ms; }
.fp-circle-bg2.active .bg .circle2 { top:30%; transition-duration:600ms; }
.fp-circle-bg2.active .bg .circle3 { top:60%; transition-duration:700ms; }
.fp-circle-bg2.active .bg .circle4 { top:8%; transition-duration:600ms; }
.fp-circle-bg2.active .bg .circle5 { top:50%; transition-duration:400ms; }
.fp-circle-bg2.active .bg .circle6 { top:15%; transition-duration:300ms; }
.fp-circle-bg2.active .bg .circle7 { top:80%; transition-duration:400ms; }

@media (min-width: 1200px) and (min-height: 750px) {  
	.fp-circle-bg .c { transform:translateY(0) !important; margin-top:-310px !important; }
}

.fp-circle-bg .sec1 { display:flex; justify-content: space-between; flex-wrap: wrap; }
.fp-circle-bg .sec1 > div  { width:calc(50% - 10px); }

.fp-circle-bg .sec1 .left { background:#f8f8f8; padding:35px; }
.fp-circle-bg .sec1 .left .head { margin-bottom:10px; }
.fp-circle-bg .sec1 .board-list a { position:relative; display:flex; width:100%; padding:5px 0; border-bottom:1px solid #ddd; padding-left:10px; }
.fp-circle-bg .sec1 .board-list a:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:99px; background:#aaa; }
.fp-circle-bg .sec1 .board-list a:hover { border-color:#333; }
.fp-circle-bg .sec1 .board-list a .subject { width:calc(100% - 100px); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.fp-circle-bg .sec1 .board-list a .date { width:100px; font-family: 'SpoqaHanSansNeo-Regular'; font-size:.875rem; color:#aaa; text-align:right; }

.fp-circle-bg .sec1 .right { display:flex; justify-content: space-between; flex-wrap: wrap; }
.fp-circle-bg .sec1 .right ul { position:relative; display:flex; flex-direction: column; justify-content:center; width:calc(50% - 10px); padding:20px 50px; background:#555; color:#fff; }
.fp-circle-bg .sec1 .right ul:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background-position:center; }
.fp-circle-bg .sec1 .right ul:nth-child(1):before { background-image:url('../image/fp-circle-bg-ptn1.png'); opacity:.03; }
.fp-circle-bg .sec1 .right ul:nth-child(2):before { background-image:url('../image/fp-circle-bg-ptn2.png'); opacity:.02; }
.fp-circle-bg .sec1 .right ul li { position:relative; }
.fp-circle-bg .sec1 .right ul .head { line-height:1; }
.fp-circle-bg .sec1 .right ul .desc { margin:10px 0 25px; }
.fp-circle-bg .sec1 .right ul .btn { display:flex; }
.fp-circle-bg .sec1 .right ul .btn a { display:flex; align-items:center; color:#fff; border:1px solid #fff; padding:5px 15px; font-size:.875rem; }
.fp-circle-bg .sec1 .right ul .btn a:hover { background:#fff; color:#111; }
.fp-circle-bg .sec1 .right ul .btn a:first-child { margin-right:5px; }

.fp-circle-bg .sec2 .a { margin-top:30px; text-align:left; }
.fp-circle-bg .sec2 .a:hover .image::after { background:rgba(255,255,255,.2); }
.fp-circle-bg .sec2 .a .content .head .fa { margin-left:10px; line-height:.3; }
.fp-circle-bg .sec2 .a .content .desc { margin-bottom:15px; }
.fp-circle-bg .sec2 .a .btn { display:inline-block; border-radius:99px; border:1px solid #666; padding:5px 15px; transition-duration: 200ms; font-size:.875rem; font-weight:600; }
.fp-circle-bg .sec2 .a:hover .btn { border:none; }

@media (max-width: 1400px) {
	.fp-circle-bg .sec1 .right ul { padding:20px 35px; }
}

@media (max-width: 1200px) {
	.fp-circle-bg .sec1 > div  { width:auto; }
	.fp-circle-bg .sec1 .left { width:calc(40% - 10px); }
	.fp-circle-bg .sec1 .right { width:calc(60% - 10px); }
}

@media (max-width: 1024px) {
	.fp-circle-bg .sec1 .left { width:100%; }
	.fp-circle-bg .sec1 .right { width:100%; margin-top:20px; }
	.fp-circle-bg .sec1 .right ul { padding:40px 35px; }
}


@media (max-width: 767px) {
	.fp-circle-bg .sec1 .right ul { width:100%; }
}



.fp-company { background:url('../image/fp-company5.jpg') bottom center/cover no-repeat fixed; }
.fp-company::after { content:""; position: absolute; left:0; right:0; top:0; bottom:0; background:rgba(0, 0, 0, 0.5); }

.fp-company > .c { text-align:left; margin-top:70px; margin-bottom:70px; }

.fp-company .header { margin-top:70px; margin-bottom:20px; color:#fff; }
.fp-company .header .num { margin:0 20px; display:inline-block; line-height:1; }
.fp-company .header .num span { font-size:1rem; }
.fp-company .header .num h1 { font-size:5rem; line-height:1; animation-delay: 1000ms; }
.fp-company .header .head { color:#fff; margin:30px 0 15px !important; }
.fp-company .header .desc { color:#aaa; font-size:1.25rem; }

.fp-company .content { visibility:hidden; animation-delay: 500ms; }
.fp-company.active .content { visibility:visible; }

.fp-company .content .btn-area { position:relative; margin:50px 0 0; width:200px; }
.fp-company .content .btn-area a { position:relative; display:block; border:2px solid rgba(255,255,255,.5); color:rgba(255,255,255,.5); padding:20px;  text-align:center;}
.fp-company .content .btn-area:hover a { color:#fff; }
.fp-company .content .btn-area:before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; transition-duration: 200ms; }
.fp-company .content .btn-area:hover:before { width:100%; }

.fp-company .img-btn { position:relative; left:0; right:0; bottom:0; z-index:2; display:flex; flex-wrap: wrap;}
.fp-company .img-btn .bg { position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; }
.fp-company .img-btn .bg:before, .fp-company .img-btn .bg:after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:none no-repeat center/cover; transition-duration: 300ms; }
.fp-company .img-btn .left-bg { right:50%; }
.fp-company .img-btn .left-bg:before { background-image:url('/image/fp-company-left.jpg'); }
.fp-company .img-btn .right-bg { left:50%; }
.fp-company .img-btn .right-bg:before { background-image:url('/image/fp-company-right.jpg'); }
.fp-company .img-btn .bg:after { background:rgba(0,0,0,.5); }
.fp-company .img-btn .bg.on:before { transform: scale(1.05); }
.fp-company .img-btn .left { position:relative; width:50%; }
.fp-company .img-btn .right { position:relative; width:25%; }

.fp-company .img-btn a { position:relative; padding:50px; color:#fff; text-align:center; }
.fp-company .img-btn a .btn { position:relative; display:inline-block; border:1px solid #fff; border-radius:99px; padding:10px 30px; margin-top:10px; overflow:hidden; }
.fp-company .img-btn a .btn:before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; transition-duration: 200ms; }
.fp-company .img-btn a:hover .btn:before { width:100%; }

.fp-company .img-btn a .btn font { position:relative; color:#fff; }

@media (min-width: 1200px) and (min-height: 750px) {  
	/*.fp-company > .c { margin-top:-50px !important; }*/

	.fp-company .header { margin-top:0; }  
	.fp-company .img-btn { position:absolute; }
}

@media (max-width: 767px) {  
	.fp-company .content .btn-area { width:150px; margin-top:30px; }
	.fp-company .content .btn-area a { padding:10px 15px; }

	.fp-company .img-btn .left-bg { right:0; bottom:73%; }
	.fp-company .img-btn .right-bg { left:0; top:27%; }
.fp-company .img-btn .left { position:relative; width:100%; }
.fp-company .img-btn .right { position:relative; width:100%; }
	.fp-company .img-btn a { width:100%; padding:30px 20px 50px !important; }
}


/********************************************************
■ Footer : 하단 푸터
********************************************************/
#sw-brand { position:relative; padding:20px 50px; }
#sw-brand .image { position:relative; height:60px; background-repeat:no-repeat; background-size:auto; background-position:center; transition:all .3s ease; }
#sw-brand .nav { position:absolute; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); z-index:2; cursor:pointer; color:#ddd; }
#sw-brand .prev { left:15px; }
#sw-brand .next { right:15px; }

@media (max-width: 1200px) {
	#sw-brand { padding:20px 30px; }
}

@media (max-width: 767px) {
	#sw-brand { padding:15px 20px; }
}

#bottom { border:1px solid #ddd; }
#bottom .footer { background:#333; color: #888; }
#bottom .footer .content { position:relative; padding-top:30px; padding-bottom:30px; }
#bottom .footer .content ul { width:60%; font-size:0; }
#bottom .footer .content ul li { position:relative; display:inline-block; margin-bottom:5px; font-size: 0.938rem; }
#bottom .footer .content ul li.line { margin:0 20px; width:1px; height:10px; background:#888; }
#bottom .footer .content ul li.address { width:100%; }
#bottom .footer .content .link a { color:#ddd; }
#bottom .footer .content .link a:hover { border-bottom:1px solid #ddd; }
#bottom .footer .content .desc { margin-top: 20px; }
#bottom .footer .content .desc span { animation:twinkle 1.5s infinite; }

@keyframes twinkle {
	0%   { font-weight:300; }
	100% { font-weight:700; }
}

/* 푸터 sns */
#bottom .footer .content .sns { position:absolute; right:50px; bottom:20px; display:flex; align-items:center; }
#bottom .footer .content .sns a { margin:0 5px; width:25px; height:25px; background:none no-repeat center/100%; border-radius:5px; overflow:hidden; text-indent:-9999em}
#bottom .footer .content .sns a.kakao { background-image:url('../image/sns_icon_kakao.png'); }
#bottom .footer .content .sns a.facebook { background-image:url('../image/sns_icon_facebook.png'); }
#bottom .footer .content .sns a.twitter { background-image:url('../image/sns_icon_twitter.png'); }
#bottom .footer .content .sns a.instagram { background-image:url('../image/sns_icon_instagram.png'); }
#bottom .footer .content .sns a.youtube { background-image:url('../image/sns_icon_youtube.png'); }

#bottom .footer .copyright { margin-top: 10px; font-size: 0.75rem; background:#222; padding:15px; text-align:center; }

#bottom .footer .content .linkSite { position:absolute; right:20px; bottom:60px; display:flex; align-items:center; }


@media (max-width: 1024px) { 
	#bottom .footer .content ul { width:100%; }
	#bottom .footer .content .sns { position:relative; bottom:auto; right:auto; margin-top:20px; }
	#bottom .footer .content .linkSite { position:relative; bottom:auto; right:auto; margin-top:20px; }
}

@media (max-width: 768px) { 
	#bottom .footer .content { text-align:center; }
	#bottom .footer .content ul li { font-size: 0.875rem; }
	#bottom .footer .content ul li.line { margin:0 10px; }
	#bottom .footer .content ul.desc li { display:block; }
	#bottom .footer .content ul.desc li.line { display:none; }
	#bottom .footer .content .desc { margin-top: 20px; }
	#bottom .footer .content .sns { justify-content:center; }
	#bottom .footer .content .linkSite { justify-content:center; }
}

/********************************************************
  ■ 우측 점박이 스크롤 (fullPage 플러그인 제공 기능)
********************************************************/
#fp-nav.left { left: 30px; transition-duration: 200ms; }
#fp-nav ul li { margin: 15px 0; width:20px; height:20px; }
#fp-nav ul li:last-child { display:none; }

#fp-nav ul li a span, #fp-nav ul li a:hover span, #fp-nav ul li a.active span, #fp-nav ul li a.active:hover span { width: 3px !important; height: 3px !important; margin: 0; transform:translate(-50%, -50%); }
#fp-nav ul li a span { background: #ccc; }
#fp-nav ul li a.active span:before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:20px; height:20px; border:1px solid #ccc; border-radius:100%; animation: zoom-out 1s ease-out infinite; }
#fp-nav ul li:hover a.active span, #fp-nav ul li:hover a span { margin: 0; }

@keyframes zoom-out {
	0%	{ width:10px; height:10px; }
	100%		{ width:20px; height:20px; opacity:0; }
}

#fp-nav ul li .fp-tooltip { width: auto; right: 100% !important; top: 50%; transform:translateY(-50%); color:#ccc; font-size: .75rem; padding: 0 10px; overflow: visible; opacity: 1; z-index:3; font-weight:300; }
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip { transition: opacity 0.2s ease-in; opacity: 1; }

@media (max-width: 767px) { 
	#fp-nav.right { display:none; }
}

/********************************************************
	■ 타일 스타일 공용
********************************************************/
.tiles { visibility: hidden; }
.tiles.loaded { visibility: visible; }
.tiles::before, .tiles::after { content: ""; clear: both; display: block; }

.tiles .tile { float:left; margin-bottom:10px; text-align:center; visibility: hidden; }
.tiles .tile .a { position:relative; display:block; width:100%; height:100%; padding:0; }
.tiles .tile .a::before { content:""; position:absolute; z-index:1; transition:all .3s ease; }
.tiles .tile .a::after { content:""; position:absolute; z-index:1; transition:all .3s ease; }

.tiles .tile .a .a2, .tiles .tile .a .a3 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.tiles .tile .a .a2::before, .tiles .tile .a .a2::after, .tiles .tile .a .a3::before, .tiles .tile .a .a3::after { content: ""; position: absolute; transition-timing-function: linear; z-index: 3; }

.tiles .image { position: relative; display: block; overflow: hidden; }
.tiles .image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .more { display:none; position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 2; }
.tiles .image .img { background-repeat:no-repeat; background-size:cover; background-position:center; transition:all .3s ease; }
.tiles .content { height:100%; text-align: left; }


@media (max-width: 767px) { 
	.tiles { margin: 0 -5px; }
	.tiles .tile { padding: 0 5px; } 
}

/* 트랜지션 (애니메이션 속도) */
.tran-2 .tile > .a::after, .tran-2 .tile .image::after, .tran-2 .tile .image .img { transition: all .2s ease; }
.tran-3 .tile > .a::after, .tran-3 .tile .image::after, .tran-3 .tile .image .img { transition: all .3s ease; }
.tran-4 .tile > .a::after, .tran-4 .tile .image::after, .tran-4 .tile .image .img { transition: all .4s ease; }
.tran-5 .tile > .a::after, .tran-5 .tile .image::after, .tran-5 .tile .image .img { transition: all .5s ease; }
.tran-6 .tile > .a::after, .tran-6 .tile .image::after, .tran-6 .tile .image .img { transition: all .6s ease; }
.tran-7 .tile > .a::after, .tran-7 .tile .image::after, .tran-7 .tile .image .img { transition: all .7s ease; }
.tran-8 .tile > .a::after, .tran-8 .tile .image::after, .tran-8 .tile .image .img { transition: all .8s ease; }
.tran-9 .tile > .a::after, .tran-9 .tile .image::after, .tran-9 .tile .image .img { transition: all .9s ease; }
.tran-10 .tile > .a::after, .tran-10 .tile .image::after, .tran-10 .tile .image .img { transition: all 1.0s ease; }
.tran-12 .tile > .a::after, .tran-12 .tile .image::after, .tran-12 .tile .image .img { transition: all 1.2s ease; }
.tran-15 .tile > .a::after, .tran-15 .tile .image::after, .tran-15 .tile .image .img { transition: all 1.5s ease; }
.tran-20 .tile > .a::after, .tran-20 .tile .image::after, .tran-20 .tile .image .img { transition: all 2.0s ease; }

/********************************************************
	■ 왼쪽에 아이콘이미지 / 오른쪽에 head, desc
********************************************************/
.ts-lefticon1 { margin: 0 -10px; }
.ts-lefticon1 .tile { padding: 0 10px; }
.ts-lefticon1 .tile > .a { display: table; border: 1px solid #d2d2d2; height: 130px; padding: 0 15px 0 20px; }

.ts-lefticon1 .image { display: table-cell; width: 100px; }
.ts-lefticon1 .image .img { width: 100%; height: 100%; background-size: contain; }

.ts-lefticon1 .content { display: table-cell; padding-left: 30px; height: 100%; vertical-align: middle; }
.ts-lefticon1 .content .desc { margin-top:10px; font-weight: 300; }

@media (max-width: 1199px) { 
	.ts-lefticon1 { margin: 0 -5px; }
	.ts-lefticon1 .tile { padding: 0 5px; }
	.ts-lefticon1 .content { padding-left: 10px; }
	.ts-lefticon1 .content .desc { display: none; } 
}
@media (max-width: 1023px) {
	.ts-lefticon1 .tile > a { height: 90px; padding: 0 5px; }
	.ts-lefticon1 .image { width: 70px; } 
}
@media (max-width: 767px) { 
	.ts-lefticon1 .tile > a { height: 75px; }
	.ts-lefticon1 .image { height: 60px; } 
 }
/********************************************************
	■ 왼쪽에 이미지 / 오른쪽에 head, desc
********************************************************/
.ts-rectimg-left-1 { margin: 0 -10px; }

.ts-rectimg-left-1 .tile { position: relative; padding: 0 10px; }
.ts-rectimg-left-1 .tile > .a { position: relative; }

.ts-rectimg-left-1 .image { position: relative; width: 60%; }
.ts-rectimg-left-1 .image .img { width: 100%; height: 100%; }

.ts-rectimg-left-1 .content { position: absolute; z-index: 2; left: 60%; right: 0; top: 0; bottom: 0; height: auto; }
.ts-rectimg-left-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 1199px) { 
	.ts-rectimg-left-1 { margin: 0 -5px; }
	.ts-rectimg-left-1 .tile { padding: 0 5px; } 
}
/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-top-1 .tile { margin-bottom: 50px; }
.ts-squareimg-top-1 .image .img { position: relative; padding-bottom: 100%; }

/* 이미지 직사각 비율로 표현하려면 padding-bottom(%)을 재정의한다. */
.ts-squareimg-top-1 .content { margin-top: 20px; height: 100%; }
.ts-squareimg-top-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 767px) { 
	.ts-squareimg-top-1 { margin: 0 -5px; }
	.ts-squareimg-top-1 .tile { padding: 0 5px; } 
}
/********************************************************
	■ 정사각 이미지 / 내부에 head, desc
********************************************************/
.ts-squareimg-full .tile { margin: 0; }
.ts-squareimg-full .tile > .a { position: relative; }

.ts-squareimg-full .image .img { position: relative; padding-bottom: 100%; }
.ts-squareimg-full .content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; }

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ 롤오버효과 (Hover Effects)
********************************************************/
/* 일반적으로 타일(tile) 요소에 적용 */
/* 타일(tile) 요소가 아닌 경우에 적용하려면 hover-effect 클래스를 활용한다. */
/* hover-effect 클래스는 효과를 적용할 a 또는 .image 요소에 추가한다. */
a.hover-effect { position: relative; display: block; }

.image.hover-effect { position: relative; overflow: hidden; }

a.hover-effect::after, .image.hover-effect::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

/* 실제 효과 */
/* 다음의 롤오버효과 클래스는 효과를 적용할 a / .image / .img 의 상위 요소에 추가해야한다. */
/* ----- a 요소 - 테두리 내부 그림자 :: a-shadow-inset ----- */
.hover-a-shadow-inset .a::after { box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2); opacity: 0; }
.hover-a-shadow-inset .a:hover::after { opacity: 1; }

/* ----- 이미지 - 테두리 내부 그림자 :: img-shadow-inset ----- */
.hover-img-shadow-inset .a .image::after { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2); opacity: 0; }
.hover-img-shadow-inset .a:hover .image::after { opacity: 1; }

/* ----- a 요소 - 테두리 7px :: a-border7 ----- */
.hover-a-border7 .a::after { border: 2px solid rgba(100, 100, 100, 0); }
.hover-a-border7 .a:hover::after { border-width: 7px; border-color: #646464; }

/* ----- 이미지 - 테두리 7px :: img-border7 ----- */
.hover-img-border7 .a .image::after { border: 2px solid rgba(100, 100, 100, 0); }
.hover-img-border7 .a:hover .image::after { border-width: 7px; border-color: #646464; }

/* ----- 이미지 - 배경마스크 알파 x% :: img-alphaXX ----- */
.hover-img-alpha30 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.3) !important; }
.hover-img-alpha40 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.4) !important; }
.hover-img-alpha50 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.5) !important; }
.hover-img-alpha60 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.6) !important; }
.hover-img-alpha70 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.7) !important; }
.hover-img-alpha80 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.8) !important; }
.hover-img-alpha90 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.9) !important; }
.hover-img-alpha100 .a:hover .image::after { background-color: black !important; }

/* ----- 이미지 - 확대 x% :: img-zoomXXX ----- */
.hover-img-zoom110 .a:hover .img { transform: scale(1.1); }
.hover-img-zoom115 .a:hover .img { transform: scale(1.15); }
.hover-img-zoom120 .a:hover .img { transform: scale(1.2); }
.hover-img-zoom130 .a:hover .img { transform: scale(1.3); }

/* ----- a 요소 - more 클래스 객체 보이기 :: a-more ----- */
.hover-a-more .a:hover .more { display: block; }
.hover-a-more-flex .a:hover .more { display: flex; }
.hover-a-height1 .a::before { background: white; transition: all .8s; }
.hover-a-height1 .a::after { top: 100% !important; transition: all .8s; }
.hover-a-height1 .a:hover::before { top: -20px; bottom: -20px; }
.hover-a-height1 .a:hover::after { top: -20px !important; bottom: -20px; }

/* ----- a 요소 - a2, a3 클래스 테두리 2px 애니매이션1 :: a-border2-ani1 ----- */
.hover-a-border2-ani1 .a .a2::before, .hover-a-border2-ani1 .a .a2::after, .hover-a-border2-ani1 .a .a3::before, .hover-a-border2-ani1 .a .a3::after { transition-duration: 100ms; transition-delay: 0ms; opacity: 0; }
.hover-a-border2-ani1 .a:hover .a2::before, .hover-a-border2-ani1 .a:hover .a2::after, .hover-a-border2-ani1 .a:hover .a3::before, .hover-a-border2-ani1 .a:hover .a3::after { opacity: 1; }
.hover-a-border2-ani1 .a .a2::before { left: 0; right: 100%; top: 0; height: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a2::before { right: 0; }
.hover-a-border2-ani1 .a .a2::after { right: 0; top: 0; bottom: 100%; width: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a2::after { bottom: 0; transition-delay: 100ms; }
.hover-a-border2-ani1 .a .a3::before { left: 100%; right: 0; bottom: 0; height: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a3::before { left: 0; transition-delay: 200ms; }
.hover-a-border2-ani1 .a .a3::after { left: 0; top: 100%; bottom: 0; width: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a3::after { top: 0; transition-delay: 300ms; }

/* ----- a 요소 - 볼록 효과 - 위로 5px/10px 이동 및 적절한 그림자효과 :: a-top5shadow , a-top10shadow ----- */
.hover-a-top5shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-5px) !important; }
.hover-a-top10shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-10px) !important; }







/* 20211206 인트로 하단 바로가기 수정 */
.img-btn2{position:relative;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap: wrap; background:rgba(0,0,0,.5); color:#fff;overflow:hidden;}
.img-btn2:after{content:''; display:block; clear:both;}
.img-btn2 > div{padding:50px}
.img-btn2 .left2 {float:left; position:relative; width:50%; text-align:center;}
.img-btn2 .right2 {float:left; position:relative; width:25%; text-align:center;}
.img-btn2 .btn {position:relative; display:inline-block; border:1px solid #fff; border-radius:99px; padding:10px 30px; margin-top:10px;color:#fff !important; overflow:hidden;}
.img-btn2 .btn > span{position:relative; color:#fff; z-index:1}
.img-btn2 .btn:hover{color:#fff !important; border:1px solid #ad0d3c}
.img-btn2 .btn:before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; transition-duration: 200ms; z-index:0;}
.img-btn2 .btn:hover:before{width:100%; background-color: #ad0d3c !important; color:#fff !important}

@media (min-width: 1200px) and (min-height: 750px) {  
	.img-btn2 { position:absolute; }
}
@media (max-width: 767px) {
	.img-btn2{position:relative; left:0; right:0; top:0; bottom:0;}
	.img-btn2 > div{padding:50px 3%}
	.img-btn2 .left2, .img-btn2 .right2{float:none; width:100%;}
	.img-btn2 .left2 { right:0; bottom:73%; }
	.img-btn2 .right2 { left:0; top:27%; }
}