@charset "utf-8";

/* ************************ 셋팅 ************************ */
:root { 
    --f_Pretendard:'Pretendard';
    --base1:#F27845;
    --base2:#E8BC0D;
    --base3:#4BAA84;
    --bg1:#F8F6F2;
    --border1:#E5E5E5;
    
    --fs12:1.2rem;
    --fs13:1.3rem;
    --fs14:1.4rem;
    --fs15:1.5rem;
    --fs16:1.6rem;
    --fs18:1.8rem;
    --fs19:1.9rem;
    --fs20:2rem;
    --fs22:2.2rem;
    --fs24:2.4rem;
    --fs26:2.6rem;
    --fs30:3rem;
    --fs24:2.4rem;
    --fs36:3.6rem;
    --fs40:4rem;
    --fs45:4.5rem;
    --fs50:5rem; 
    --fs55:5.5rem; 
    --fs65:6.5rem; 
    --fs70:7rem; 
} 

@media (max-width: 991px) {
    :root {

        --fs40:3.5rem;

    }
}


@media (max-width: 767px) {
    :root { 

		--fs24:2.2rem;
		--fs55:4rem;
        --fs65:4.5rem;

    } 
}


@media (max-width: 500px) {
    :root { 
        
        --fs16:1.5rem;
        --fs19:1.8rem;
        --fs20:1.8rem;
        --fs22:1.9rem;
        --fs24:1.9rem;
        --fs55:3rem;
        --fs65:3.5rem;
        --fs70:5rem;

    } 
}


select {
	cursor:pointer; padding:6px 35px 6px 10px !important;
	background-image:url(/img/common_responsive/select.png) !important;
	background-repeat:no-repeat !important; 
	background-position:right 15px center !important;
	width:100%; height:50px; border:1px solid var(--border1); border-radius:10px;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
	font-size: 16px !important;
	color:#666;
}


input[readonly] {background-color:#f7f7f7 !important;}
input:disabled{background:#d7d7d7 !important; color:#333 !important; pointer-events: none !important;}
/*input:read-only {color:#333 !important; background:#efefef !important; pointer-events: none !important;}*/
input:focus,select:focus,textarea:focus {outline:none !important; }
/* ---------- 19-11-21 form css ::start ---------- */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
	border:1px solid var(--border1); border-radius:10px;
	width:100%; height:50px; padding:6px 10px; 
	font-size:var(--fs16); line-height:1;
	background-color:#FFF;
	-webkit-appearance: none; /*모바일에서 입체효과 없애기*/
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
}
input::placeholder {color:#999 !important;}
input::-webkit-input-placeholder {color:#999 !important;} /*크롬,사파리*/
input::-moz-placeholder {color:#999 !important;} /*파폭*/
input::-ms-input-placeholder {color:#999 !important;} /*ie*/

textarea {min-height:150px;resize:none;}
button {background: none;}




html { overflow-x:hidden; font-size:0.625rem; } 
body {max-width:100%; min-width:320px; font-family:'Pretendard', sans-serif !important; font-size:var(--fs19); font-weight:300; line-height:1.6; color:#666; word-break:keep-all;}
button {cursor:pointer;}

a {color:inherit; transition:var(--ani); -webkit-transition:var(--ani); -moz-transition:var(--ani);}
h1, h2, h3, h4 {transform:var(--textRotate);}

body .contents {padding:0 0 100px;}

.content-tit {display:flex; justify-content:space-between; padding:100px 0 70px; flex-wrap:wrap; gap:10px 20px;}
.content-tit h2 {position:relative; font-size:var(--fs36); color:#000; padding-left:22px;}
.content-tit h2:before {content:""; width:10px; height:100%; border-radius:100px; background:var(--base2); position:absolute; left:0; top:0;}
.content-tit .site-route ul {display:flex; color:#666; font-size:14px; align-items:center;}
.content-tit .site-route ul li.home {color:#000;}
.content-tit .site-route ul li+li {padding-left:30px; position:relative;}
.content-tit .site-route ul li+li:before {content:""; display:block; width:8px; height:13px; background:url(/images/common/site-route_arrow.svg) no-repeat center / contain; position:absolute; left:13px; top:5px;}


/*footer*/
footer {position:relative; padding:50px 0; background:#fff; color:#666; font-size:var(--fs16); z-index:5;border-top: 3px solid var(--border1);}
footer .footer-info {display:flex; gap:30px; align-items: center;}
footer .footer-info h1 img {height:45px;}
footer .footer-info h2 {font-size:20px; font-weight:700; color:#000; line-height:1.2;}
footer .footer-info .infoWrap {text-align:left;}
footer .footer-info .infoWrap li span+span {padding-left:15px;}

/* ************************ 데스크탑 (1249~) ************************ */
@media screen and (min-width: 1249px), print {

	.mobile {display:none !important;}
	.w1400 {max-width:1400px; margin:0 auto;}
	.d-page div.w1400 {max-width:1400px; margin:0 auto;}
	
	/*헤더**/
	header {z-index:999; position:absolute; width:100%; top:0; left:0;}
	header .head {position:relative; background-color:#fff;}
	header .head .wrap {position:relative; max-width:1400px; height:100px; margin:0 auto;}
	header .head .logo {position:absolute; z-index:999; top: 50%; left: 50%; transform: translate(-50%, -50%);}
	header .head .logo a {height:100px; display:flex; align-items:center;}
	header .head .logo a img {height:55px;}
	
	header .head-zoom ul {display:flex; align-items: center; gap:5px;  height:100px;}
	header .head-zoom ul li a {display:block; padding:12px 15px; border-radius:100px; color:#000; background:#F5F5F5; border:1px solid #E0E0E0; font-size:var(--fs16); line-height:1;}
	header .head-zoom ul li:first-child a {color:#fff; background:#72B79B; border:1px solid #72B79B;}
	
	header .head aside {position:absolute; right:0; top:5px; z-index:999; display:flex; gap:5px; margin-top:28px;}
	header .head aside a {display:block; color:#fff; font-size:var(--fs16); background:var(--base2); padding:12px 20px; border-radius:100px; line-height:1;}
	header .head aside a.home {background:var(--base1)}
	
	/*gnb*/
	nav.mobile {visibility:hidden;}
	nav.pc {z-index:99; visibility:hidden; position:absolute; display:block; width:100%; overflow:hidden; border-top:1px solid #e7ebfa; box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.05);}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%;}
	nav.pc .navbg .dep1 {height:70px; background-color:#fff;}
	nav.pc .navbg .dep2 {height:100%; background-color:#fff; }
	
	nav.pc .gnb {position:relative; display:block; border-bottom:1px solid var(--border1);}
	nav.pc .gnb ul.dep1 {height:70px; display:flex; gap:4.5vw; justify-content:space-between; align-items:center; background:#fff; max-width:1400px; margin:0 auto;}
	nav.pc .gnb ul.dep1>li {position:relative;}
	nav.pc .gnb ul.dep1>li>a {display:block; color:#000; font-size:24px; font-weight:500; border-bottom:3px solid transparent;transition:.3s;}
	nav.pc .gnb ul.dep1>li.on>a {color:var(--base3);}
	nav.pc.on .gnb ul.dep1>li>a {color:#000;}
	nav.pc .gnb ul.dep1>li:hover>a {color:var(--base3)!important;}
	nav.pc .gnb ul.dep2 {position:absolute; top:50px; left:0; padding:35px 0; height:310px;}
	nav.pc .gnb ul.dep2>li {}
	nav.pc .gnb ul.dep2>li>a {position:relative; display:inline-block; border-bottom:1px solid transparent; white-space:nowrap; font-weight:300; color:#333; font-size:var(--fs19);}
	nav.pc .gnb ul.dep2>li>a:after { position:absolute; content:""; display:block; border-bottom:2px solid var(--base3); transition:width 250ms ease-out; left:auto; right:0; width:0; bottom:2px;}
	nav.pc .gnb ul.dep2>li>a:hover:after,
	nav.pc .gnb ul.dep2>li.on>a:after{width:100%; left:0; right:auto;}
	nav.pc .gnb ul.dep2>li+li {padding-top:10px;}
	nav.pc .gnb ul.dep2>li:hover>a {color:var(--base3);}
	nav.pc .gnb ul.dep2>li.on>a {color:var(--base3);}
	.sub-visual {height:220px; position:relative; margin-top:170px; background:#000 url(/images/common/lnb_bg.webp) no-repeat center / cover;}
	/* .sub-visual.intro {background:#000 url(/images/common/bg_depth1.webp) no-repeat center / cover;} */
	
	.sub-visual .sub-visual-wrap {position:absolute; display:flex; align-items:center;
	justify-content:center; max-width:1400px; height:100%; left:50%; transform:translateX(-50%); width:100%; text-align:center;}
	.sub-visual .sub-visual-wrap:before, .sub-visual .sub-visual-wrap:after {display:none;}
	.sub-visual .sub-visual-text {}
	/*.sub-visual-text {opacity:0;transform: translateY(30px); transition:opacity 1.2s ease 0.5s, transform 1.2s ease 0.5s;}
	.sub-visual-text.show {opacity:1; transform:translateY(0);}*/
	.sub-visual .sub-visual-text h2 {font-size:var(--fs45); font-weight:700; letter-spacing:-.5px; color:var(--base3); z-index:5; position:relative; line-height:1.2;}
	/*.sub-visual .sub-visual-text h2:before {content:""; display:block; width:30px; height:5px; background:#fff; position:absolute; left:0; top:0;  }*/
	.sub-visual .sub-visual-text p {font-size:var(--fs18); font-weight:300; position:relative; color:#000; margin-top:10px;}
	/*.sub-visual .cover {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5);}*/

	
	
	/* lnb */
	.lnb {width:100%; height:70px; background:#fff; border-bottom:1px solid #e5e5e5; box-sizing:border-box;}
	.lnb.products {display:none;}
	
	.lnb .lnb-wrap {display:flex; align-items:center; position:relative; height:100%; width: 100%; max-width : 1400px; margin : 0 auto; justify-content:space-between; background:#fff; }
	/*.lnb .lnb-wrap:before {content:""; display:block; width:8%; position:absolute; height:calc(100% + 1px); left:-8%; bottom:-1px; background:#fff; border-radius:20px 0 0 0;}
	.lnb .lnb-wrap:after {content:""; display:block; width:100vw; height:calc(100% + 1px); background:#fff; position:absolute; left:100%; bottom:-1px; }*/
	/*.lnb .lnb-wrap>* {float:left;}*/
	.lnb .lnb-wrap a {font-size:16px; color:#000;}
	.lnb .lnb-wrap h3 {background:var(--green); color:#fff; font-weight:500; height:100%; padding:20px 30px; box-sizing:border-box; font-size:18px;}
	.lnb .lnb-wrap .home {display:block; width:30px; height:30px; font-weight:300; background:#fff url(../images/common/lnb-home.svg) no-repeat center / 15px; border-radius:50%; border:1px solid #e5e5e5; text-indent:-9999px;}	
	.lnb .lnb-wrap .lnb-depth {position:relative; display:flex; align-items:center; gap:70px;}
	.lnb .lnb-wrap .lnb-depth h2 {white-space:nowrap; font-size:var(--fs19); font-weight:400; position:relative; color:#000;}
	.lnb .lnb-wrap .lnb-depth h2:before {content:""; display:block; width:8px; height:12px; background:url(/images/common/lnb_arrow.svg) no-repeat center; position:absolute; top:6px; right:-40px;}
	.lnb .lnb-wrap .lnb-depth .onmenu {display:block; font-size:16px; font-weight:400; color:#000; cursor:pointer; line-height:60px; background:url(../images/common/lnb_arrow.png)100% center no-repeat}
	.lnb .lnb-wrap .lnb-depth.dep2 .onmenu { color : var(--base); background:url(../images/common/lnb_arrow2.png)100% center no-repeat; }
	.lnb .lnb-wrap .lnb-depth>ul {display:flex; width:100%; gap:50px; height:70px; align-items:center;}
	.lnb .lnb-wrap .lnb-depth>ul li:last-child {border-bottom:none;}
	.lnb .lnb-wrap .lnb-depth>ul li a {display:flex; align-items: center; height:70px; color:#000; text-align:center; font-size:var(--fs19); line-height:1; font-weight:400;}
	.lnb .lnb-wrap .lnb-depth>ul li:hover a {opacity:1; }
	.lnb .lnb-wrap .lnb-depth>ul li+li:before {content:""; display:block; }
	.lnb .lnb-wrap .lnb-depth>ul li.on a {position:relative; color:var(--base3); border-bottom:3px solid var(--base3);}
	/*.lnb .lnb-wrap .lnb-depth>ul li.on a:after {content:""; display:block; position:absolute; width:100%; height:2px; background:var(--base1); bottom:19px;}*/
	.lnb .lnb-wrap .lnb-depth.on>ul { display:block;}
	.lnb #gotop {position:absolute; right:0; top:50%; transform:translateY(-50%); display:block; width:40px; height:40px; background:url(/images/common/i-top.svg) no-repeat center; border:1px solid var(--border1); border-radius:100px;}
	
	.lnb.fixOn {position:sticky; width:100%; z-index:1000 !important; top:0 !important; background:rgba(0,0,0,1);}
	.lnb.fixOn {background:#fff; box-shadow: rgba(33, 35, 38, 0.1) 0px 15px 10px -10px;}
	.lnb.fixOn .lnb-wrap {border-bottom:0;}
	.lnb.fixOn .lnb-wrap:before, .lnb.fixOn .lnb-wrap:after {bottom:0;}
	
	
	
}


/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px) {

	.pc {display:none !important;}

	/*헤더*/
	header {position:absolute; left:0; top:0; width:100%; z-index:999; height:70px; background:#fff;}
	header .head {position:relative; border-bottom:1px solid #e7ebfa;}
	header .head .logo a {height:70px; display:inline-block; line-height:70px; padding-left:20px;}
	header .head .logo a img {height:45px;}
	header .head .gnbView {position:absolute; right:0; top:0; width:60px; height:70px; background:url(../images/common/icon_allmenu.png)center /22px no-repeat;}

	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; top:0; width:50%; min-width:320px; height:100%; overflow:hidden; background:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px;border-bottom: 1px solid rgba(0,0,0,.15); overflow:hidden; font-weight : 700;}
	nav.mobile .closeWrap .gnbClose {display:block; width:60px; height:60px; background:#fff url(../images/common/icon_close.png)center no-repeat; background-size:20px; border-left:1px solid rgba(0,0,0,.15); float:right;}
	nav.mobile .closeWrap .link {float:left; padding:0 20px;line-height:60px; font-size:13px;}
	nav.mobile .closeWrap .link+.link {padding-left:0;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left !important; font-weight:400;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative; border-bottom:1px solid #e5e5e5;}
	nav.mobile .gnb>ul>li>a {display:block; padding:15px 20px; font-size:17px; font-weight:500;}
	nav.mobile .gnb>ul>li.on {border-color:var(--base3);}
	nav.mobile .gnb>ul>li.on>a {background:var(--base3); color:#fff;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;border-top: 1px solid #eee;}
	nav.mobile .gnb>ul>li>ul>li a {display:block; padding:15px 40px; font-size:15px; color:#444; background:#fff;}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#000; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:var(--base3);}
	nav.mobile .gnb>.side {display:none;}
	
	nav.mobile .gnb ul.dep3 {display:none;}
	
	
	/* lnb */
	.lnb {position:relative;}
	.lnb-img {margin-top:60px; height:300px; color:#fff; position:relative;}
	.lnb.intro .lnb-img {background:url(../images/common/sub-bg01.webp)no-repeat center/cover;}
	.lnb.member .lnb-img {background:url(../images/common/sub-bg02.webp)no-repeat center/cover;}
	.lnb.research .lnb-img {background:url(../images/common/sub-bg03.webp)no-repeat center/cover;}
	.lnb.publication .lnb-img {background:url(../images/common/sub-bg04.webp)no-repeat center/cover;}
	.lnb.community .lnb-img {background:url(../images/common/sub-bg05.webp)no-repeat center/cover;}
	.lnb-img-wrap {display:flex; height:100%; position:relative; align-items:center; justify-content:right; padding:0 20px;}
	.lnb-img-wrap img {position:absolute; left:150px; bottom:0;}
	
	.lnb-img-txt {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; width:100%;}
	.lnb-img-txt h2 {font-size:42px; font-weight:500; line-height:1; text-align:center;}
	.lnb-img-txt ul {display:flex; font-weight:500; align-items:center; justify-content:center; font-size:16px; margin-top:20px;}
	.lnb-img-txt ul li:first-child {position:relative; padding-right:20px;}
	.lnb-img-txt ul li:first-child:before {content:""; display:block; position:absolute; background:url(../images/common/arrow-right.png)no-repeat right center; width:17px; height:16px; right:0; top:3px;}
	.lnb-img-txt ul li+li {position:relative; margin-left:20px;}
	
	.sub-visual {height:200px; position:relative; margin-top:70px; background:#000 url(/images/common/lnb_bg.webp) no-repeat center / cover;}
	
	.sub-visual .sub-visual-wrap {position:absolute; display:flex; align-items:center;
	justify-content:center; max-width:1400px; height:100%; left:50%; transform:translateX(-50%); width:100%; text-align:center;}
	.sub-visual .sub-visual-wrap:before, .sub-visual .sub-visual-wrap:after {display:none;}
	.sub-visual .sub-visual-text {}
	/*.sub-visual-text {opacity:0;transform: translateY(30px); transition:opacity 1.2s ease 0.5s, transform 1.2s ease 0.5s;}
	.sub-visual-text.show {opacity:1; transform:translateY(0);}*/
	.sub-visual .sub-visual-text h2 {font-size:var(--fs40); font-weight:700; letter-spacing:-.5px; color:var(--base3); z-index:5; position:relative; padding-top:15px; line-height:1.2;}
	/*.sub-visual .sub-visual-text h2:before {content:""; display:block; width:30px; height:5px; background:#fff; position:absolute; left:0; top:0;  }*/
	.sub-visual .sub-visual-text p {font-size:18px; font-weight:400; text-align:center; position:relative; color:#000; margin-top:10px;}
	
	body .contents {padding:0 0 80px;}
	
	.content-tit {padding:80px 30px 60px;}
	.content-tit h2 {font-size:30px;}
	
	.contents .inner {padding:0 30px;}
	
	/* footer */
	footer {padding:50px 30px 35px;}
	footer .f_btnWrap article {padding:40px;}
	footer .f_btnWrap article dt {font-size:24px;}
	footer .f_btnWrap article dd {font-size:16px;}
	footer .f_btnWrap article .white_btn {padding:12px 35px; font-size:16px;}
	footer .footer-info .top .callnum a {font-size:32px;}
	footer .footer-info .top .callnum .icon {width:40px; height:40px; background: var(--base1) url(/images/common/i-callW.png) no-repeat center / 17px;}
	footer .footer-info .top .logoWrap > div a {font-size:15px;}

	
}
/* ************************ 모바일 (~991) ************************ */
@media screen and (max-width: 991px) {

header {height:60px;}
header .head .logo a {height:60px; line-height:60px;}
header .head .logo a img {height:40px;}
header .head .gnbView {width:60px; height:60px;}

.sub-visual {height:160px;}
.sub-visual .sub-visual-text h2 {font-size:30px;}
.sub-visual .sub-visual-text p {font-size:16px; margin-top:5px;}

body .contents {padding:0 0 60px;}
.content-tit {padding:60px 30px 40px;}
.content-tit h2 {font-size:26px;}	
.sub-visual {margin-top:60px;}

footer {font-size:14px;}

footer .footer-info h1 img {height:45px;}
footer .footer-info .infoWrap {order:2;text-align:left;}
footer .footer-info .bottom {margin-top:20px;}
footer .f_btnWrap {grid-template-columns: 1fr;}
footer .f_btnWrap article {padding:30px;}
footer .f_btnWrap article dt {font-size:20px;}
footer .footer-info .top .logoWrap img {width:150px;}
footer .footer-wrap .footer_btn ul {bottom:50px;}	
	
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	/* lnb */
	.lnb-img {height:250px;}
	.lnb-img-txt h2 {font-size:38px;}
	
	.sub-visual {height:150px;}
	.sub-visual .sub-visual-text h2 {font-size:26px;}
	.sub-visual .sub-visual-text p {font-size:15px; margin-top:5px;}
	
	body .contents {padding:0 0 50px;}
	.content-tit {padding:50px 20px 30px;}
	.content-tit h2 {font-size:24px;}
	
	.contents .inner {padding:0 20px;}
	
	/*footer*/
  
	footer {padding:30px 20px;}
	footer .footer-info {gap:20px;}
	footer .footer-info h1 img {height:40px;}
	footer .footer-info .infoWrap {order:2;}
	footer .footer-info .infoWrap ul li span {display:block;}
	footer .footer-info .infoWrap li span+span {padding-left:0;}
	footer .footer-info .top {gap:10px;}
	footer .footer-info .bottom {font-size:14px; margin-top:5px;}
	footer .footer-info .bottom > p {margin-top:20px; font-size:14px;}
	footer .footer-info .bottom ul:first-child {flex-direction:column;}
	footer .footer-info .bottom ul:first-child li+li {padding-left:0; margin-left:0;}
	footer .footer-info .top .callnum a {font-size:24px;}
	footer .footer-info .bottom ul:first-child li+li:before {display:none;}
	footer .footer-info .bottom_toggle {display:block; margin-top:15px; padding-right:20px; background:url(/images/common/select_arrow.png) no-repeat right center/11px; color:#666;}
	footer .footer-info .bottom_toggle+.bottom {display:none;}
	
}

/* ************************ 모바일 (0~500) ************************ */
@media screen and (max-width:500px) {  
.sub-visual {height:140px;}
.sub-visual .sub-visual-text h2 {font-size:24px;}
.sub-visual .sub-visual-text p {font-size:14px; margin-top:5px;line-height: 1.2;}

footer {padding:30px 20px;}
footer .footer-info {gap:10px; flex-direction:column;}

footer .footer-info h2 {line-height:1.4;}
footer .f_btnWrap article dt {font-size:18px;}
footer .f_btnWrap article dd {font-size:16px;}
footer .f_btnWrap article:nth-child(1) {background-size:50px;}
footer .f_btnWrap article:nth-child(2) {background-size:50px;}
footer .f_btnWrap article:nth-child(3) {background-size:33px;}
footer .f_btnWrap article .white_btn {padding:8px 30px;}
footer .footer-info .bottom ul:nth-child(2) li strong {display:block;}


header {height: 80px;}
header .head .gnbView {width: 80px; height: 80px; border-left: 1px solid #efefef; border-top: 1px solid #efefef;}
header .head .logo a {width: calc(100% - 80px); border-top: 1px solid #efefef; height: 80px; line-height: 80px; display: flex; align-items: center; justify-content: center; padding-left: 0; }

}