@charset "utf-8";

/* 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; vertical-align: top; }
html { font-size: 62.5%; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html, body { width:100%; height:100%; color:#2d2d2d; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.2rem; color:#2d2d2d; letter-spacing: 0; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.5px; }
a { text-decoration:none; color:#2d2d2d; }
::selection {background:#1481c4; color:#FFF; text-shadow:none;}
::-moz-selection {background:#1481c4; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#1481c4; color:#FFF; text-shadow:none;}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.2rem; color:#2d2d2d; letter-spacing:-1px; }
input[type=text],input[type=password],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { font-family: 'Noto Sans KR','Sans-serif'; font-size:1.2rem; color:#2d2d2d; letter-spacing: -1px; width: 150px; height: 30px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-color: #dcdcdc; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearfix:after { content: ''; display:block; clear:both; font-size:0; height:0; }

/*헤더*/
#header-container { height: 165px; background: #fff; position: relative; }
#header-container .header { width: 1200px; margin: 0 auto; height: 165px; }
#header-container .header .logo-area { float: left; margin-top: 40px; text-align: center; }
#header-container .header .logo-area a { display: inline-block; width: 100%; height: 100%;}
#header-container .header .logo-area a h1 { display: flex; gap: 40px; align-items: center; width: 100%; height:100% }
#header-container .header .logo-area a h1 img { display: block; width: 100%; height: 100%; }
#header-container .header .logo-area a h1 .main-logo { width: 144px; height: auto; }
#header-container .header .logo-area a h1 .sub-logo { position: relative; width: 140px; height: auto;}
#header-container .header .logo-area a h1 .sub-logo:after { content: ''; width: 2px; height: 28px; background: #c8d0d9; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); }

#header-container .header .gnb-area { float: right; height: 90px; margin-top:60px; text-align:right; }
#header-container .header .gnb-area ul { overflow: hidden; height: 100%; }
#header-container .header .gnb-area ul li { float: left; margin-right: 70px; height: 100%; }
#header-container .header .gnb-area ul li:last-child { margin-right: 0; }
#header-container .header .gnb-area ul li>a { display: block; height: 100%; position: relative; }
#header-container .header .gnb-area ul li>a:after { position: absolute; content: ''; width: 0%; height: 4px; background: #52a2e4; bottom: 0; left: 0; transition: width .25s ease; }
#header-container .header .gnb-area ul li>a h2 { font-size: 2rem; line-height: 70px; transition: color .25s ease; }
#header-container .header .gnb-area ul li>a:hover h2 { color: #52a2e4; }
#header-container .header .gnb-area ul li>a:hover:after { width: 100%; }
#header-container .header .gnb-area ul .select a h2 { color: #52a2e4; }
#header-container .header .gnb-area ul li .sub-menu-wrap { height: 0; background: #52a2e4; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; overflow: hidden; transition: height .25s ease,bottom .25s ease; }
#header-container .header .gnb-area ul li .sub-menu-wrap .sub-menu { width: 1200px; margin: 0 auto; text-align: center; padding-left: 50px; }
#header-container .header .gnb-area ul li .sub-menu-wrap .sub-menu a { color: #fff; line-height: 50px; font-size: 1.5rem; height: 50px; padding: 0 20px; display: inline-block; transition: background .25s ease; }
#header-container .header .gnb-area ul li .sub-menu-wrap .sub-menu a:hover { background: #2f8cd8; }
#header-container .header .gnb-area ul li:hover .sub-menu-wrap { height: 50px; bottom: -50px; }
#header-container .header .gnb-area ul li .sub-menu-wrap:hover { height: 50px; bottom: -50px; }
#header-container .header .gnb-area ul li:nth-child(1) .sub-menu-wrap .sub-menu { padding-left: 0; padding-right: 180px; }
#header-container .header .gnb-area ul li:nth-child(2) .sub-menu-wrap .sub-menu { padding-right: 0; padding-left: 240px; }
#header-container .header .gnb-area ul li:nth-child(3) .sub-menu-wrap .sub-menu { text-align: right; padding-right: 230px; }
#header-container .header .gnb-area ul li:nth-child(4) .sub-menu-wrap .sub-menu { text-align: right; padding-right: 80px; padding-left: 0;}
#header-container .header .gnb-area ul li:nth-child(5) .sub-menu-wrap .sub-menu { text-align: right; padding-left: 1020px; }
#header-container .header .gnb-area .user-tool { font-size: 1.4rem; font-weight: bold; display:inline-block; }
#header-container .header .gnb-area .user-tool a { color: #afafaf; margin-left: 25px; position: relative; line-height: 18px; }
#header-container .header .gnb-area .user-tool a:before { width: 1px; height: 10px; background: #eaeaea; position: absolute; content: ''; left: -14px; top: 2px; cursor: default; }
#header-container .header .gnb-area .user-tool a:first-child:before { display: none; }
#header-container .header .gnb-area .user-tool a.main-text-go-btn .ico { width: 18px; height: 18px; background: #A4A4A4; border-radius: 50%; display: inline-block; text-align: center; margin-right: 5px; }
#header-container .header .gnb-area .user-tool a.main-text-go-btn .ico img { width: 10px; margin-top: 4px; }
#header-container .header .gnb-area .user-tool a:hover { color: #555; }
#header-container .header .gnb-area .user-tool a.main-text-go-btn:hover .ico { background: #555; }

#header-container .header .gnb-area .login a:first-child { color: #555; }

@media all and (max-width: 1199px) 
{
	#header-container { padding: 0 15px; }
	#header-container .header { width: 100%; }
	#header-container .header .logo-area { width: 250px; }
	#header-container .header .gnb-area ul li .sub-menu-wrap .sub-menu { width: 100%; }
}
@media all and (max-width: 999px) 
{
	#header-container .header { height: 100%; }
	#header-container .header .logo-area { width: 250px; height: auto; margin-top: 50px; }
	
	#header-container .header .gnb-area ul li { margin-right: 40px; }
	#header-container .header .gnb-area ul li a h2 { font-size: 1.7rem; }
	
	#header-container .header .gnb-area .user-tool { top: -10px; font-size: 1.2rem; }
	#header-container .header .gnb-area .user-tool a:last-child:before { top: 1px; }
	#header-container .header .logo-area a h1 .sub-logo:after { height: 20px; }
}
@media all and (max-width: 799px) 
{
	#header-container { height: 110px; }
	#header-container .header label { top: 25px; }
	#header-container .header .logo-area  { width: 230px; margin-top: 25px; }
}
@media all and (max-width: 650px)
{
	#header-container .header .logo-area { width: 200px; margin-top: 30px; }
	#header-container .header .logo-area a h1 { gap: 30px;}
	#header-container .header .logo-area a h1 .sub-logo:after { left: -15px; }
}

/*버튼효과*/
.bttn-fill { padding: 0; border-width: 0; border-color: transparent; background: transparent; font-weight: 400; cursor: pointer; position: relative; font-family: inherit; z-index: 0; border: none; background-color: #fff; color: #1d89ff; -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); }
.bttn-fill { color: #20bd9e; }
.bttn-fill:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #3775d0; content: ''; opacity: 0; -webkit-transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; z-index: -1; -webkit-transform: scaleX(0); transform: scaleX(0); }
.bttn-fill:hover,
.bttn-fill:focus { box-shadow: 0 1px 8px rgba(58,51,53,0.3); color: #fff; -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); }
.bttn-fill:hover:before,
.bttn-fill:focus:before { opacity: 1; -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; -webkit-transform: scaleX(1); transform: scaleX(1); }

/* 푸터 */

#footer-container { height: 200px; background: #9c9c9c; overflow: hidden;}
#footer-container .footer { width: 1200px; margin: 0 auto; overflow: hidden; height: 100%; }
#footer-container .footer .logo-area { width: 160px; float: left; margin-top: 57px; }
#footer-container .footer .txt-area { padding: 80px 0; padding-left: 250px; height: 100%; }
#footer-container .footer .txt-area .tos-area { float: left; width: 250px; position: relative; }
#footer-container .footer .txt-area .tos-area:before { position: absolute; content: ''; width: 1px; height: 25px; background: #b9b9b9; top: 10px; left: -40px; }
#footer-container .footer .txt-area .tos-area:after { position: absolute; content: ''; width: 1px; height: 25px; background: #b9b9b9; top: 10px; right: 35px; }
#footer-container .footer .txt-area .tos-area h6 { font-size: 1.6rem; color: #e4e5e9; margin-bottom: 10px; }
#footer-container .footer .txt-area .tos-area ul li { display: inline-block; }
#footer-container .footer .txt-area .tos-area ul li:first-child { margin-right: 20px; position: relative; }
#footer-container .footer .txt-area .tos-area ul li:first-child:after { position: absolute; content: ''; width: 1px; height:13px; background: #909090; top: 1px; right: -12px; }
#footer-container .footer .txt-area .tos-area ul li a { display: block; color: #e4e5e9; font-size: 1.4rem;  }
#footer-container .footer .txt-area .tos-area ul li a:hover { text-decoration: underline; }

#footer-container .footer .txt-area .copyright-area { color: #dcdcdc; height: 100%; padding: 2px 0; }
#footer-container .footer .txt-area .copyright-area p { font-size: 1.4rem; margin-bottom:10px; }
#footer-container .footer .txt-area .copyright-area span { font-size: 1.3rem; }

@media all and (max-width: 1199px) 
{
	#footer-container .footer { width: 100%; }
	#footer-container .footer .logo-area { display: none; }
	#footer-container .footer .txt-area { padding: 80px 15px; }
	#footer-container .footer .txt-area .tos-area { width: 40%; }
	#footer-container .footer .txt-area .tos-area:before,
	#footer-container .footer .txt-area .tos-area:after { display: none; }
	#footer-container .footer .txt-area .copyright-area { width: 60%; float: right; }
}
@media (max-width: 799px) {
	#footer-container .footer .txt-area { padding: 40px 15px; }
}
@media all and (max-width: 599px) 
{
	#footer-container { height: 150px; }
	#footer-container .footer .txt-area .tos-area { float: none; width: 100%; text-align: center; margin-bottom: 20px; }
	#footer-container .footer .txt-area .tos-area h6 { display: none; }
	#footer-container .footer .txt-area .copyright-area { float: none; width: 100%;  text-align: center;  }
}

#header-container .header #toggle { position: absolute; opacity: 0; filter: alpha(opacity=0); top: -999px; }
#header-container .header label { display: block; position: absolute; background: url(../../img/common/toggle-ico.png); width: 50px; height: 50px; background-repeat: no-repeat; background-position: center; right: 15px; top: 55px; opacity: 0; z-index: 1; transform: translate3d(0, 0, 0); transition: transform .4s; background-size: 25px 25px; }
#header-container .header input[type=checkbox]:checked ~ label { transform: translate3d(0, 0, 0); }

#header-container .header .slide-gnb { right: -50px; }
#header-container .header .slide-gnb ul { margin-top: 120px; }
#header-container .header .slide-gnb ul li { line-height: 5rem; }
#header-container .header .slide-gnb ul li:hover { background: #2f8cd8; }
#header-container .header .slide-gnb ul li:nth-child(5) { margin-bottom: 50px; }
#header-container .header .slide-gnb ul .select { background: #3647B8; }
#header-container .header .slide-gnb ul li a { display: block; color: #E6F8FF; font-size: 2rem; font-weight: normal; padding-left: 3rem; }
#header-container .header .slide-gnb .close-btn { float: right; margin-right: 30px; margin-top: 70px; display: block; width: 25px; height: 25px; }
#header-container .header .slide-gnb .close-btn img { width: 100%; height: 100%; }
#header-container .header .slide-gnb { height: 100%; position: fixed; right: 0; top: 0; z-index: 99999; background: #52a2e4; width: 300px; box-sizing: border-box; transform: translate3d(35rem, 0, 0); transition: all .5s; display: none; }
#header-container .header input[type=checkbox]:checked ~ .slide-gnb { transform: translate3d(0, 0, 0); right: 0; }

/* 헤더 슬라이드 */

@media all and (max-width: 799px) 
{
	#header-container .header .gnb-area { display: none; }
	#header-container .header label { opacity: 1; filter: alpha(opacity=100); top: 30px; }
	#header-container .header .slide-gnb .close-btn { margin-top: 55px; }
	#header-container .header .slide-gnb { display: block; }
}

/* 폰트사이즈 조절 */
@media all and (max-width: 1199px)
{
	html { font-size: 60%; }
}
@media all and (max-width: 999px)
{
	html { font-size: 57.5%; }
}
@media all and (max-width: 799px)
{
	html { font-size: 55%; }
}
@media all and (max-width: 599px)
{
	html { font-size: 52.5%; }
}
@media all and (max-width: 399px)
{
	html { font-size: 50%; }
}