/* CSS RESET */

* {margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: 1em; font-style: normal; font-weight: normal; text-decoration: none; border: 0 solid transparent; vertical-align: middle; text-indent: 0; outline: 0; box-sizing: border-box; background-repeat: no-repeat; list-style: none;}
b,strong {font-weight: bold;}
ul,ol {list-style: none;}
table {table-layout: fixed; border-collapse: collapse;}
input[type="button"],input[type="submit"],button,a,label {cursor: pointer;}
/*:only-child {display: block;}*/

/* Common : 앞으로 쓸 CSS 클래스 정의 */
.clearfix:after {content: ""; display: block; clear: both;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 넘치는 글자 ... 표시 */
.inner {margin: auto; padding: 0 40px; position: relative; height: 100%;} /* 네이버 컨텐츠 내부 사이즈를 정의 */
.inner:after {content: ""; display: block; clear: both;}

/* Global */ /* Global부터는 네이버에 맞춰 최적화, Common까지는 어느 페이지든 복,붙해서 쓰면 된다. */
.fll {float: left;}
.flr {float: right;}

/* Bg Img */



/* Global */
u:hover {text-decoration: underline;}
.inner {max-width: 1200px;}
input[type=checkbox] {display: none;}
input[type=radio] {display: none;}
h2 {position: relative; font-size: 2.25em; font-weight: bold;}
h2:before {content: ""; position: absolute; top: -16px; left: 0; width: 100px; height: 5px; background-color: #2faeff;}
::selection {_color: #fff; background-color: skyblue;}	/* 마우스 드래그 색 변화 */



/* LayOut */
#wrap {overflow: hidden; display: inline-block; min-width: 100%; font-family: 'Lato', 'Noto Sans KR', sans-serif;font-size: 0.75em; line-height: 1.5; }


/* Header */
header {margin: 0 20px;}
header .inner {padding: 0; max-width: 100%;}
header h1 {padding-top: 8px;}
header h1 a {display: block; text-indent: -9999px; width: 225px; height: 81px; background-image: url(../img/logo_01.png); background-size: 90%;}

header .cate_show {position: fixed; z-index: 13; bottom: 106px; left: 20px; width: 54px; height: 54px;}
header .cate_show i {position: absolute; left: 50%; margin-left: -27px; margin-top: -1px; width: 54px; height: 7px; background-color: #d6d6d6; border-radius: 10px; transition: top 0.3s 0.3s, width 0s 0.3s, margin-left 0s 0.3s, transform 0.3s;}
header #cate_show:checked~.cate_show i {transition: top 0.3s, width 0s 0.3s, margin-left 0s 0.3s, transform 0.3s 0.3s;}
header .cate_show i:nth-child(1) {top: 20%;}
header .cate_show i:nth-child(2) {top: 50%;}
header .cate_show i:nth-child(3) {top: 80%;}
header #cate_show:checked~.cate_show i:nth-child(1) {top: 50%; transform: rotate(45deg);}
header #cate_show:checked~.cate_show i:nth-child(2) {top: 50%; width: 0; margin-left: 0;}
header #cate_show:checked~.cate_show i:nth-child(3) {top: 50%; transform: rotate(-45deg);}
header .cate_pop {position: fixed; top: 0; left: -100%; z-index: 12; padding-top: 160px; width: 100%; height: 100%; background-color: #fff; transition: 0.3s;}
header #cate_show:checked~.cate_pop {left: 0;}
header .cate_pop:after {content: ""; position: absolute; top: 230px; left: 40px; z-index: 12; width: 90%; height: 2px; background-color: #222;}
header .cate_pop .cate_list {display: inline-block; width: 24%; vertical-align: top; text-align: center;}
header .cate_pop .cate_list .cate_btn {font-size: 3em;}
header .cate_pop .cate_list ul {padding-top: 60px;}
header .cate_pop .cate_list ul li {font-size: 1.75em;}
header .cate_pop .cate_list ul li+li {padding-top: 20px;}
header nav {position: absolute; top: 0; left: 50%; transform: translate(-50%,0); padding: 25px 0;}
header nav ul {white-space: nowrap;}
header nav ul li {display: inline-block; position: relative; font-size: 2em;}
header nav ul li:after {content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; transition: 0.3s;}
header nav ul li:hover:after {width: 100%; background-color: #2faeff; opacity: 1;}
header nav ul li+li {margin-left: 130px;}
header nav ul li a {}
header .gnb {padding: 40px 0 20px;}
header .gnb #lang_1:checked~label:nth-of-type(1) {font-weight: bold; color: #2faeff;}
header .gnb #lang_2:checked~label:nth-of-type(2) {font-weight: bold; color: #2faeff;}
header .gnb #lang_3:checked~label:nth-of-type(3) {font-weight: bold; color: #2faeff;}
header .gnb #lang_4:checked~label:nth-of-type(4) {font-weight: bold; color: #2faeff;}
/* top 버튼 */
header .top {position: fixed; z-index: 11; bottom: 83px; right: 20px; width: 46px; height: 46px; background-color: rgba(256,256,256,0.5); border-radius: 50%;}
header .top:before {content: ""; top: 12px; right: 19px; position: absolute; width: 16px; height: 2px; background-color: #2faeff; transform: rotate(-45deg);}
header .top:after {content: ""; top: 12px; right: 8px; position: absolute; width: 16px; height: 2px; background-color: #2faeff; transform: rotate(45deg);}
header .top span {display: inline-block; margin: 21px 0 0 12px; color: #222;}
/*header #cate_show:checked~.top {display: none;}
header #cate_show:checked~.top:before {content: none;}
header #cate_show:checked~.top:after {content: none;}*/

/* FOOTER */
footer {margin-top: 20px; height: 110px; color: #fff; background-color: #222;}
footer .inner {padding: 0;}
footer h1 {float: left; margin: 20px 30px 0 0;}
footer .info {float: left; font-family: 'Noto Sans', sans-serif; font-size: 0.938em; letter-spacing: -1px;}
footer p {display: inline-block; padding: 46px 13px 0 0;}
footer .info p br {display: none;}

footer .ft_sub {padding: 30px 20px 0 0;}
footer .ft_sub .sns {}
footer .ft_sub .sns a {display: inline-block; width: 34px; height: 34px;}
footer .ft_sub .sns a img {display: inline-block; width: 100%;}
footer .ft_sub .fm_site {margin-top: 15px; width: 146px; height: 18px; background-color: #666; font-size: 0.688em;}


/* Media query */
@media screen and (max-width: 1280px) {
	.inner {max-width: 1240px;}
	header h1 a {width: 170px; height: 62px;}
	header nav {padding: 23px 0;}
	header nav ul li {font-size: 1.688em;}
	header nav ul li+li {margin-left: 100px;}
	header .gnb .lang {font-size: 0.875em;}
	footer .info {font-size: 0.875em;}

}

@media screen and (max-width: 1024px) {
	.inner {padding: 6px 12px; max-width: 1000px;}
	header h1 a {width: 120px; height: 55px;}
	/*header .cate_pop:after {top: 210px;}*/
	header .cate_pop .cate_list .cate_btn {font-size: 2em; font-weight: bold;}
	header .cate_pop .cate_list ul {}
	header nav {padding: 18px 0;}
	header nav ul li {font-size: 1.438em;}
	header nav ul li {}
	header .gnb {padding: 20px 0;}
	header .gnb .lang {font-size: 0.75em;}
	footer h1 {margin-right: 28px;}

	footer p:first-child {display: block; padding: 32px 140px 0 0;}
	footer p+p {padding: 4px 22px 0 0;}
}

@media screen and (max-width: 880px) {
	.inner {max-width: 856px;}
	header {}
	header h1 a {width: 120px; height: 55px;}
	header .cate_pop:after {left: 30px;}
	header .cate_pop .cate_list {}
	header .cate_pop .cate_list ul li {font-size: 1.25em;}
	header nav ul li {}
	header nav ul li+li {margin-left: 60px;}
	header .gnb {padding: 20px 0;}
	header .gnb .lang {font-size: 0.563em;}
	footer p+p {padding: 4px 10px 0 0;}
	footer .ft_sub {padding-right: 16px;}
	/*footer .info {font-size: 1em;}*/
	
}

@media screen and (max-width: 768px) {

	.inner {max-width: 744px;}
	h2 {font-size: 1.5em;}
	h2:before {top: -10px; width: 64px;}
	header {position: fixed; z-index: 11; margin: auto; padding: 0 20px; height: 65px; width: 100%; background-color: #fff;}
	header .cate_show {position: fixed; top: 8px; left: auto; right: 20px;} /* left: auto; position 위치값 초기화 */
	header .cate_show i {}
	header h1 a {width: 135px; height: 55px;}
	header .cate_pop {position: fixed; top: 0px; bottom: 0; left: auto; right: -100%; padding-top: 120px; transition: 0.4s;}
	header #cate_show:checked~.cate_pop {left: auto; right: 0;}
	header .cate_pop:after {content: none;}
	header .cate_pop .cate_list {display: block; width: 100%;}
	header .cate_pop .cate_list .cate_btn {font-size: 1.875em; font-weight: bold;}
	header .cate_pop .cate_list ul {padding-top: 12px;}
	header .cate_pop .cate_list ul li+li {padding-top: 12px;}
	header .cate_pop .cate_list ul li:last-child {padding-bottom: 20px;}
	header nav {display: none;}
	header nav ul li {font-size: 0.813em;}
	header nav ul li+li {margin-left: 50px;}
	header .gnb {display: none;}

	footer {margin-top: 70px;}
	footer h1 {margin: 28px 16px 20px 0;}
	footer p {display: block;}
	footer p:first-child {padding-right: 16px;}
	footer .info p+p {display: block; padding-right: 0;}
	/*footer .ft_sub .sns a {width: 20px; height: 20px;}*/
	footer .ft_sub {padding: 36px 14px 0 0}
	footer .ft_sub .fm_site {display: none;}
	
}

@media screen and (max-width: 560px) {

	footer {height: 148px;}
	_footer .ft_sub {float: left; padding-top: 20px;}
	footer .ft_sub .fm_site {margin-left: 20px;}
	footer .ft_sub {float: left; padding: 24px 14px 0 0;}
	footer .ft_sub>* {float: left;}
}

@media screen and (max-width: 480px) {
	#wrap {min-width: 320px;}
	.inner {max-width: 456px;}
	header {}
	header .cate_show {}
	header .cate_show i {}
	header .cate_pop {padding-top: 68px;}
	header h1 a {width: 120px; height: 55px;}
	header nav {display: none;}
	header nav ul li {font-size: 0.813em;}
	header nav ul li+li {margin-left: 50px;}
	header .gnb {display: none;}

	footer {height: 158px;}
	
	
	footer p:first-of-type {padding: 20px 0 0;}
	footer h1 {width: 92px; margin: 40px 4px 40px -6px;}
	footer h1 img {width: 100%;}
	footer .info {font-size: 0.75em;}
	footer .info p br {display: block; line-height: 1.8;}
	footer .ft_sub {padding-top: 20px;}
	footer .ft_sub .sns a img {width: 32px; height: 32px;}
}