@charset "utf-8";
/**
 * WD Cascading Style Sheets
 * File Name : layout.css
 * Description : layout 스타일시트
 * Email : kukuyani@naver.com
 * Date : 2023.02.08
 * Update : 2023.02.08
 * Copyright(c) WD. All Rights Reserved.
*/

/* ************************************** *
 * common style
 * ************************************** */
::selection { background: rgba(26,115,232,.1);}
.in-wrap { width: 90%; max-width: 1400px; margin: 0 auto;}
/* mobile컨텐츠 숨김 */
.con-m { display: none;}
/* pc에서 br태그 효과 적용 */
.br-pc { display: block;}
.img-max { max-width: 100%;}
.img-ct-max { display: block; max-width: 100%; margin: 0 auto;}
/* 상하좌우 center위치잡기 */
.responsive { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
/* 상하 center위치잡기 */
.responsive-h { position: absolute; top: 50%; left: 5%; width: 90%; transform: translate(0,-50%); -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); text-align: center;}
/* 레이어팝업 body background */
.bg-body { display: none; z-index: 500; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
/* 레이어팝업 */
.bg-body .modal-box { position: fixed !important; position: relative; width: 90%; max-width: 1000px; height: 650px; overflow-y: scroll; box-sizing: border-box; background: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.5); -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.5); -ms-box-shadow: 5px 5px 10px rgba(0,0,0,.5);}
.bg-body .modal-box .modal-con { padding: 40px;}
.bg-body .modal-box .btn-close { position: absolute; top: 20px; right: 20px;}
.bg-body .modal-box .btn-close button { font-size: 3.2rem;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* pc컨텐츠 숨김 */
	.con-pc { display: none !important;}
	/* mobile컨텐츠 보임 */
	.con-m { display: block !important;}
	/* pc에서 br태그 효과 해제 */
	.br-pc { display: inline-block;}
	/* mobile에서 br태그 효과 적용 */
    .br-m { display: block;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* mobile에서 font size 자동 축소 */
	html { font-size: 57% !important;}
	.none-m { display: none !important;}
	/* 레이어팝업 */
	.bg-body .modal-box { height: 500px;}
	.bg-body .modal-box .modal-con { padding: 20px;}
	.bg-body .modal-box .btn-close button { font-size: 2.3rem;}
}
/* keyframe */
@keyframes slideLeft {
	from { margin-left: 20%; opacity: 0;}
	to { margin-left: 0; opacity: 1;}
}
@-webkit-keyframes slideLeft {
	from { margin-left: 20%; opacity: 0;}
	to { margin-left: 0; opacity: 1;}
}
	@keyframes circleHover {
		0% { transform: scale(1);}
		50% { transform: scale(1.3);}
		100% { transform: scale(1);}
	}
	@-webkit-keyframes circleHover {
		0% { transform: scale(1);}
		50% { transform: scale(1.3);}
		100% { transform: scale(1);}
	}
	@-webkit-keyframes fadeIn {
		0% { opacity: 0;}
		100% { opacity: 1;}
	}
	@keyframes fadeIn {
		0% { opacity: 0;}
		100% { opacity: 1;}
	}
	@-webkit-keyframes fadeUp {
		0% { opacity: 0; -webkit-transform: translate3d(0,15%,0); -ms-transform: translate3d(0,15%,0); transform: translate3d(0,15%,0);}
		100% { opacity: 1; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); ; transform: translate3d(0,0,0);}
	}
	@keyframes fadeUp {
		0% { opacity: 0; -webkit-transform: translate3d(0,15%,0); -ms-transform: translate3d(0,15%,0); transform: translate3d(0,15%,0);}
		100% { opacity: 1; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); ; transform: translate3d(0,0,0);}
	}





/* ************************************** *
 * header layout
 * ************************************** */
/* header */
header { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 120px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); -ms-box-shadow: 0 0 10px rgba(0,0,0,.2);}
header .header-in { position: relative; width: 90%; margin: 0 auto;}
header h1 { position: absolute; left: 0; top: 0; padding-top: 28px;}
/* lnb : 네비게이션 메뉴 */
#lnb { z-index: 200;}
.lnb-pc { display: table; margin: 0 auto; padding-top: 30px;}
.lnb-pc .lnb-navi > li { position: relative; float: left;}
.lnb-pc .lnb-navi > li:before { content: ""; position: absolute; top: 25px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #bedef1;}
.lnb-pc .lnb-navi > li:after { content: ""; position: absolute; bottom: 25px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #bedef1;}
.lnb-pc .lnb-navi > li:first-child:before,
.lnb-pc .lnb-navi > li:first-child:after { background: none;}
.lnb-pc .lnb-navi > li > a { position: relative; display: inline-block; margin: 0 30px; line-height: 60px; font-size: 1.8rem; font-family: 'S-CoreDream-7ExtraBold',sans-serif !important; letter-spacing: -.4px; color: #283891;}
.lnb-pc .lnb-navi > li > a:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #283891; transform: scaleX(0); transition: transform .3s cubic-bezier(.25,.85,.57,1);}
.lnb-pc .lnb-navi > li > a:hover:before,
.lnb-pc .lnb-navi > li.focus > a:before,
.lnb-pc .lnb-navi > li.on > a:before { transform: scaleX(1);}
.lnb-pc .lnb-dep2 { display: none; z-index: 200; position: absolute; top: 60px; left: 50%; margin-left: -70px; width: 140px; border-radius: 0 0 10px 10px; padding: 15px 0; background: #f2f2f2; box-shadow: 3px 3px 5px rgba(0,0,0,.2); -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.2); -ms-box-shadow: 3px 3px 5px rgba(0,0,0,.2);}
.lnb-pc .lnb-dep2 > li a { display: block; padding: 7px; font-family: 'S-CoreDream-4Regular',sans-serif !important; font-size: 1.5rem; line-height: 1.4em; color: #283891; text-align: center;}
.lnb-pc .lnb-dep2 > li a:hover { background: #283891; color: #fff;}
.lnb-m { display: none;}
.lnb-m .btn-menu { z-index: 199; overflow: hidden; position: absolute; top: 30px; left: 0;}
.lnb-m .btn-menu i { display: block; font-size: 4rem; line-height: 60px; color: #283891;}
.lnb-m .btn-close { z-index: 201; position: absolute; top: 20px; left: 70%; margin-left: 20px; line-height: 30px; font-size: 3.5rem; color: #fff;}
.lnb-m .lnb-box { z-index: 200; display: none; overflow: hidden; position: fixed; top: 0; left: 0; width: 70%; height: 100%; background: #f2f2f2; box-shadow: 0 0 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); -ms-box-shadow: 0 0 10px rgba(0,0,0,.2);}
.lnb-m .lnb-box .lnb-navi { position: absolute; top: 50%; left: 0; width: 100%; box-sizing: border-box; transform: translate(0,-50%); -o-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
.lnb-m .lnb-box .lnb-navi > li { animation-duration: 700ms; animation-fill-mode: forwards; animation-name: slideLeft; margin-left: -20%; opacity: 0; text-align: center;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(1) { animation-delay: 70ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(2) { animation-delay: 140ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(3) { animation-delay: 210ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(4) { animation-delay: 280ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(5) { animation-delay: 350ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(6) { animation-delay: 420ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(7) { animation-delay: 480ms;}
.lnb-m .lnb-box .lnb-navi > li > a { display: block; font-family: 'S-CoreDream-6Bold',sans-serif !important; font-size: 2.4rem; line-height: 60px; color: #283891; letter-spacing: -.4px;}
.lnb-m .lnb-box .lnb-navi > li.focus > a,
.lnb-m .lnb-box .lnb-navi > li.on > a { background: #283891; color: #fff;}
.lnb-m .lnb-box .lnb-dep2 { display: none; padding: 12px 0; background: #fff;}
.lnb-m .lnb-box .lnb-dep2 a { display: block; font-size: 1.7rem; line-height: 32px; color: #283891; letter-spacing: -.4px;}
/* gnb : 글로벌 네비게이션 메뉴 */
#gnb { position: absolute; right: 0; top: 44px;}
#gnb li { float: left; margin-left: 5px;}
#gnb li a { display: block; padding: 0 15px; border-radius: 2px; line-height: 32px; font-size: 1.4rem; font-family: 'S-CoreDream-4Regular',sans-serif !important; color: #fff; -webkit-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; transition: all .1s ease-in-out;}
#gnb li a.btn-login { background: #74beea;}
#gnb li a.btn-login:hover { background: #238dcc;}
#gnb li a.btn-join { background: #4e7cbe;}
#gnb li a.btn-join:hover { background: #283891;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1300px) {
	/* header */
	header h1 { position: static; text-align: center;}
	/* lnb : 네비게이션 메뉴 */
	.lnb-pc { display: none;}
	.lnb-m { display: block;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* header */
	header { height: 80px;}
	header h1 { padding-top: 20px;}
	header h1 img { height: 40px;}
	/* lnb : 네비게이션 메뉴 */
	.lnb-m .btn-menu { top: 10px;}
	.lnb-m .btn-menu i { font-size: 3rem;}
	.lnb-m .btn-close { font-size: 2.5rem;}
	.lnb-m .lnb-box .lnb-navi > li > a { font-size: 2rem; line-height: 46px;}
	.lnb-m .lnb-box .lnb-dep2 a { font-size: 1.5rem; line-height: 26px;}
	/* gnb : 글로벌 네비게이션 메뉴 */
	#gnb { top: 14px;}
	#gnb li { float: none; margin-left: 0;}
	#gnb li:nth-of-type(2) { margin-top: 3px;}
	#gnb li a { padding: 0 10px; line-height: 25px; font-size: 1.2rem; text-align: center;}
}





/* ************************************** *
 * sub layout
 * ************************************** */
/* 컨텐츠영역 */
#container { z-index: 1; width: 100%; overflow: hidden; margin-top: 120px;}
.content-box { width: 90%; max-width: 1400px; margin: 0 auto 100px; min-height: 600px;}
.sub-visual { position: relative; width: 100%; height: 200px; background: url('image/sub_visual.jpg') no-repeat center; background-size: cover;}
.sub-visual p { font-size: 2.1rem; font-family: 'S-CoreDream-4Regular',sans-serif !important; line-height: 1.6em; letter-spacing: -.4px; color: #fff;}
.sub-visual p span { color: #abe0ff;}
/* snb */
#snb { width: 100%; background: #283891;}
#snb ul { display: table; margin: 0 auto;}
#snb li { float: left;}
#snb li a { display: block; width: 200px; line-height: 50px; font-size: 1.5rem; font-family: 'S-CoreDream-6Bold',sans-serif !important; color: #fff; letter-spacing: -.04px; text-align: center;}
#snb li a:hover,
#snb li.on a { background: #fff; color: #283891;}
/* stle */
#stle { padding: 60px 0 20px; margin-bottom: 40px; border-bottom: dotted 1px #ddd;}
#stle h2 { font-size: 3.5rem; font-family: 'Tenada',sans-serif !important; line-height: 1.2em; color: #111; text-align: center;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* snb */
	#snb ul { display: block; width: 100%;}
	#snb ul.snb-deps2 li { width: 50%;}
	#snb ul.snb-deps3 li { width: 33.33%;}
	#snb ul.snb-deps4 li { width: 25%;}
	#snb ul.snb-deps5 li { width: 20%;}
	#snb li a { width: 100%;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* 컨텐츠영역 */
	#container { margin-top: 80px;}
	.content-box { margin: 0 auto 70px; min-height: 400px;}
	.sub-visual { height: 140px;}
	.sub-visual p { font-size: 1.5rem;}
	/* snb */
	#snb li a { line-height: 36px; font-size: 1.3rem;}
	/* stle */
	#stle { padding: 40px 0 13px; margin-bottom: 30px;}
	#stle h2 { font-size: 2.7rem;}
}





/* ************************************** *
 * main layout
 * ************************************** */
/* visual 메인비주얼 */
.main-visual { position: relative; overflow: hidden;}
.main-visual .slick-slide { width: 100%; height: 700px; background-position: center !important; -webkit-background-size: cover !important; -ms-background-size: cover !important; background-size: cover !important;}
.main-visual .visual01 { background: url('image/visual01.jpg') no-repeat;}
.main-visual .visual02 { background: url('image/visual02.jpg') no-repeat;}
.main-visual .txt-box { z-index: 100; position: absolute; top: 50%; left: 10%; width: 80%; box-sizing: border-box; text-align: center; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);}
.main-visual .txt-box h3 { padding-bottom: 30px; font-size: 6rem; font-family: 'Tenada',sans-serif !important; line-height: 1.2em; color: #fff;}
.main-visual .txt-box h3 span { color: #abe0ff;}
.main-visual .txt-box p { font-size: 2.7rem; font-family: 'S-CoreDream-4Regular',sans-serif !important; line-height: 1.6em; letter-spacing: -.4px; color: #fff;}
/* sns 바로가기 */
.sns-wrap { width: 100%;}
.sns-wrap li { float: left; height: 200px;}
.sns-wrap li.btn-sns { width: 12.5%; text-align: center;}
.sns-wrap li.btn-sns a { display: block; padding-top: 140px; width: 100%; height: 100%; font-size: 2rem; font-family: 'S-CoreDream-6Bold',sans-serif !important; color: #fff; letter-spacing: -.4px; box-sizing: border-box; background-position: center 45px !important;}
.sns-wrap li.btn-sns a:hover { background-position: center 47px !important;}
.sns-wrap li.btn-sns.youtube a { background: #ed3023 url('image/ico-sns-youtube.png') no-repeat;}
.sns-wrap li.btn-sns.insta a { background: #c5299e url('image/ico-sns-insta.png') no-repeat;}
.sns-wrap li.btn-sns.blog a { background: #19ce60 url('image/ico-sns-blog.png') no-repeat;}
.sns-wrap li.btn-sns.facebook a { background: #257ce1 url('image/ico-sns-facebook.png') no-repeat;}
.sns-wrap li.btn-link { position: relative; width: 50%; background: #242f6a url('image/bg-btn-link.jpg') no-repeat right center; background-size: cover;}
.sns-wrap li.btn-link .txt { padding: 50px 0 0 10%;}
.sns-wrap li.btn-link .txt h3 { padding-bottom: 10px; font-size: 3.5rem; font-family: 'Tenada',sans-serif !important; line-height: 1.2em; color: #fff;}
.sns-wrap li.btn-link .txt p { font-size: 1.6rem; font-family: 'S-CoreDream-4Regular',sans-serif !important; line-height: 1.6em; letter-spacing: -.4px; color: #fff;}
.sns-wrap li.btn-link .btn-more { position: absolute; top: 40px; right: 40px;}
.sns-wrap li.btn-link .btn-more a { line-height: 30px; font-size: 3.5rem; color: #fff;}
/* board 게시글리스트  */
.section-board { width: 100%; padding: 100px 0;}
.section-board.media { background-color: #383838; background: linear-gradient(to right,#383838,#585858);}
.section-board.illness { background-color: #283891; background: linear-gradient(to right,#283891,#125e98);}
.section-board.research { background-color: #2d95bb; background: linear-gradient(to right,#2d95bb,#74beea);}
.board-txt { float: left; width: 45%; padding: 0 7% 40px 7%; box-sizing: border-box;}
.board-txt h3 { font-size: 6rem; font-family: 'Tenada',sans-serif !important; line-height: 1.2em; color: #fff;}
.board-txt h4 { padding: 30px 0 20px; font-size: 2.7rem; font-family: 'S-CoreDream-6Bold',sans-serif !important; line-height: 1.6em; letter-spacing: -.4px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.board-txt p { max-height: 57px; font-size: 1.7rem; font-family: 'S-CoreDream-4Regular',sans-serif !important; line-height: 1.7em; letter-spacing: -.4px; color: #fff; overflow: hidden; text-overflow: ellipsis;}
.board-txt a.btn-wd { margin: 30px 0 50px;}
.board-txt .slider-counter { z-index: 100; position: absolute; left: 14%; bottom: 0; margin-left: 35px; width: 70px; height: 23px; line-height: 23px; font-size: 1.5rem; font-family: 'S-CoreDream-6Bold',sans-serif !important; color: #fff; letter-spacing: .5em; text-align: center;}
.board-img-wrap { float: left; width: 55%;}
.board-img { width: 130%;}
.board-img .slick-slide { margin: 0 30px; opacity: .3;}
.board-img .slick-current { opacity: 1 !important;}
.board-img a { display: block;}
.board-img a i { display: block; width: 100%; height: 0; padding-bottom: 80%; box-shadow: 5px 5px 20px rgba(0,0,0,.4); -webkit-box-shadow: 5px 5px 20px rgba(0,0,0,.4); -ms-box-shadow: 5px 5px 20px rgba(0,0,0,.4);}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1200px) {
	/* board 게시글리스트  */
	.board-txt { float: none; width: 100%; margin-bottom: 70px;}
	.board-img-wrap { float: none; width: 93%; margin-left: 7%;}
	.board-txt a.btn-wd { margin: 30px 0 20px;}
	.board-txt .slider-counter { left: 7%;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* visual 메인비주얼 */
	.main-visual .visual01 { background: url('image/visual01-m.jpg') no-repeat;}
	.main-visual .visual02 { background: url('image/visual02-m.jpg') no-repeat;}
	.main-visual .txt-box h3 { font-size: 5rem;}
	.main-visual .txt-box p { font-size: 2rem;}
	/* sns 바로가기 */
	.sns-wrap li.btn-sns { width: 25%;}
	.sns-wrap li.btn-link { width: 100%;}
	/* section-program */
	.board-img .slick-slide { margin: 0 20px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* visual 메인비주얼 */
	.main-visual .slick-slide { height: 450px;}
	.main-visual .txt-box h3 { padding-bottom: 20px; font-size: 3.2rem;}
	.main-visual .txt-box p { font-size: 1.5rem;}
	/* sns 바로가기 */
	.sns-wrap li { height: 100px;}
	.sns-wrap li.btn-sns a { padding-top: 65px; font-size: 1.5rem; background-size: 40px 34px !important; background-position: center 20px !important;}
	.sns-wrap li.btn-sns a:hover { background-position: center 22px !important;}
	.sns-wrap li.btn-link { height: auto; padding: 35px 0;}
	.sns-wrap li.btn-link .txt { padding: 0 0 0 10%;}
	.sns-wrap li.btn-link .btn-more { top: 30px; right: 30px;}
	.sns-wrap li.btn-link .btn-more { top: 25px; right: 25px;}
	.sns-wrap li.btn-link .btn-more a { font-size: 3rem;}
	/* board 게시글리스트  */
	.section-board { padding: 50px 0;}
	.board-txt { padding: ; margin-bottom: 40px;}
	.board-txt h3 { font-size: 4rem;}
	.board-txt h4 { padding: 20px 0 10px; font-size: 2rem;}
	.board-txt p { max-height: 47px; font-size: 1.5rem;}
	.board-txt a.btn-wd { margin: 20px 0 10px;}
	.board-txt .slider-counter { width: 40px; height: 15px; line-height: 15px; font-size: 1.3rem;}
	.board-img .slick-slide { margin: 0 10px;}
}





/* ************************************** *
 * footer layout
 * ************************************** */
/* footer */
footer { padding: 50px 0; background: #232535;}
.footer-in { position: relative; width: 90%; margin: 0 auto;}
.foo-privacy li { float: left; margin-right: 15px;}
.foo-privacy li a { font-size: 1.5rem; color: #fff; line-height: 1.7em; opacity: .5;}
.foo-privacy li:first-child a { color: #74beea;}
address { padding: 30px 0 7px; font-size: 1.5rem; color: #fff; line-height: 1.7em; opacity: .3;}
.copyright small { font-size: 1.5rem; color: #fff; opacity: .3;}
.foo-call { position: absolute; top: 0; right: 0;}
.foo-call p { font-size: 1.5rem; color: #aaa; text-align: right; line-height: 1.8em;}
.foo-call p span { padding-left: 5px; font-size: 2rem; font-family: 'S-CoreDream-6Bold',sans-serif !important; color: #fff;}
footer .btn-top { display: none; z-index: 50; position: fixed; bottom: 30px; right: 30px;}
footer .btn-top button { width: 60px; height: 60px; line-height: 60px; background: rgba(0,0,0,.6); border-radius: 50%; text-align: center;}
footer .btn-top button i { font-size: 2.7rem; color: #fff;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:990px) {
	/* footer */
	.foo-privacy { display: table; margin: 0 auto;}
	.foo-privacy li { margin: 0 7px;}
	address,
	.copyright,
	.foo-call p { text-align: center;}
	.foo-call { position: static; padding-top: 30px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* footer */
	footer { padding: 30px 0;}
	.foo-privacy li a,
	address,
	.copyright small,
	.foo-call p { font-size: 1.3rem;}
	address { padding: 15px 0 5px;}
	footer .btn-top { bottom: 15px; right: 15px;}
	footer .btn-top button { width: 40px; height: 40px; line-height: 40px;}
	footer .btn-top button i { font-size: 1.8rem;}
}