@charset "utf-8";

:root{
	--header-width : 16rem;
	font-family: 'GmarketSans','맑은고딕','나눔고딕', '돋움', sans-serif;
}
html {font-size:62.5%;}
body {font-size:1.6rem;}
@media only screen and (max-width: 1439px){
	html {font-size:58%;}
}
@media only screen and (max-width: 1239px){
	html {font-size:54%;}
}
@media only screen and (max-width: 767px) {
	html {font-size:50%;}
}
/* 접근성 : 건너뛰기 */
#accessibility{position:absolute;left:0;top:0;z-index:9999}
#accessibility li{float:left}
#accessibility a{position:absolute;width:1px;height:1px;top:-20px;overflow:hidden;text-align:center;font-size:1.6rem;}
#accessibility a:focus, #accessibility a:active{position:absolute;top:0;width:20rem;height:auto;padding:5px;background-color:#fff;border:solid 1px #0079c6;color:#0079c6;z-index:2}

.blind {overflow:hidden; font-size:0; line-height:0; position:absolute; height:0; width:0;}

/* tm */
.tm {position:relative; z-index:101; height:4.3rem; background:#303342; font-size:13px; font-weight: 400;}
.tm:after { content:"."; clear:both; display:block; height:0; visibility:hidden;}
.tm strong {float:left; padding:1rem 0 1.2rem 1.5rem;}
.tm strong img {width: 13.5rem;}
.tm>ul {float:right;} 
.tm>ul>li {position:relative; float:left; line-height:4.3rem;} 
.tm>ul>li a {color:#c4c4c4; font-size:1.3rem; transition: .3s;}
.tm>ul>li a:hover {color: #fff;}
.tm .srch_link {padding-left:2.9rem; margin-right:3.4rem; background:url(../images/tm/tm_bg_srch.svg) no-repeat 0 1.1rem; background-size: 1.8rem;}
.tm .site_link {padding-left:4.7rem; margin-right:2.2rem; background:url(../images/tm/tm_bg_link.svg) no-repeat 0 1px; background-size: 3.7rem;}
.tm .site_link .site_link_layer {display:none; position:absolute; top:4.3rem; left:0; width:21.5rem; padding:0 1.6rem; background:#303342;}
.tm .site_link:hover .site_link_layer {display:block;}
.tm .site_link .site_link_layer>ul>li {padding:1.5rem 0 1rem 2.5rem;  line-height:1.2; color:#fff; border-top:1px solid #59514e;}
.tm .h_bt_sns {padding-top:1rem; margin-right:1.2rem; line-height:0 !important;}
.tm .h_bt_sns > a {padding-right:.5rem;}

/* container */
.content-title {height: 208px; width: 100%; display: flex; justify-content: center;}
.content-title h2 {width: 121rem; background:url(../images/img_top.png) center top no-repeat; text-align: center; padding-top: 70px; font-size: 7.2rem; font-weight: 300; color: #333333;}
.content-title h2 p {font-size: 2.4rem;}
section {width: 100%; display: flex; justify-content: center; padding: 9rem 0;}
section.content-out {background-color: #79dede; position: relative;}
section.content-out::after {content: ''; display: block; width: 13rem; height: 20.2rem; background: url(../images/pattern01.svg) center no-repeat; background-size: contain; position: absolute; left: calc(50% - 62rem); bottom: 0;}
section.content-in {background-color: #f1f1f1;}
.list-wrap {width: 121rem; display: flex; flex-wrap: wrap; gap: 5rem;}
.list-wrap h4 {border-bottom: .3rem solid #3c3c3c; font-size: 3rem; color: #3c3c3c; font-weight: 700;}
.list-wrap h4 p {font-size: 1.3rem; font-weight: 400; padding: 2.1rem 0 1.8rem; line-height: 1.2; word-break: keep-all;}
.list-wrap .list.col2 h4 p {width: calc(50% - (5rem / 2));}
.list-wrap .list {width: calc(25% - (15rem / 4));}
.list-wrap .list.col2 {width: calc(50% - (5rem / 2));}
.list-wrap .list.col2 .list-2col {display: flex; flex-wrap: wrap; gap: 5rem;}
.list-wrap .list.col2 .list-2col ul {width: calc(50% - (5rem / 2));}
.list-wrap .list.col2 .list-2col ul.list-sub {width: 100%;}
.list-wrap .list ul {margin: 3.8rem 0 0 0;}
.list-wrap .list ul.list-sub {width: 100%; padding: 1rem 0 0 0; margin: 0;}
.list-wrap .list li {padding: 1rem 0; font-size: 2.1rem; line-height: 1.3; font-weight: 400; word-break: keep-all; color: #767676; position: relative;}
.list-wrap .list li a {color: rgba(68,68,68,1); padding-right: 1.5rem; display: inline-block; vertical-align: baseline;}
.list-wrap .list li a::after {content: ''; display: inline-block; margin-left: .8rem; width: 2.1rem; height: 1.5rem; background: url(../images/arrow_black.svg) center bottom no-repeat; background-size: contain; filter: invert(99%) sepia(7%) saturate(540%) hue-rotate(194deg) brightness(116%) contrast(95%); transition: .3s;}
section.content-in .list-wrap .list li a::after {filter: invert(89%) sepia(38%) saturate(1555%) hue-rotate(131deg) brightness(89%) contrast(77%); transition: .3s;}
.list-wrap .list li a:hover:after, section.content-in .list-wrap .list li a:hover:after {filter: invert(23%) sepia(9%) saturate(19%) hue-rotate(314deg) brightness(96%) contrast(86%); transform: translate(.5rem, -.5rem) scale(1.2); opacity: .5;}
.list-wrap .list li a:hover {color: rgba(68,68,68,.5); transition: .3s;}
.list-wrap .list ul.list-sub {position: relative;}
.list-wrap .list ul.list-sub::before {content: ''; position: absolute; left: .8rem; top:1rem; display: inline-block; width: 1px; height: 6.8rem; background-color: #999999;}
.list-wrap .list ul.list-sub li a::before {content: ''; display: inline-block; width: 1.4rem; height: 1px; background-color: #999999; margin-right: 1.3rem; margin-left: .8rem; margin-bottom: .6rem;}


/* footer */
footer {width: 100%; display: flex; justify-content: center; padding: 5rem 0;} 
.footer-wrap {width: 121rem; display: flex; flex-wrap: wrap; gap: 5rem;} 
.footer-wrap .organ {width: calc(25% - (15rem / 4));}	
.footer-wrap .organ img {height: 3.6rem;}
.footer-wrap .organ-info {width: calc(75% - (5rem / 2)); font-size: 1.5rem; font-weight: 300; color: #9b9fa3; line-height: 1.2;}

@media only screen and (max-width: 1239px){	
	section.content-out::after {left: calc(50% - 58rem);}
}

@media only screen and (max-width: 1100px){	
	.list-wrap, .footer-wrap {width: calc(100% - 4rem);}
}

@media only screen and (max-width: 1024px){
	.list-wrap .list {width: calc(50% - (5rem / 2));}
	.list-wrap .list.col2 {width: 100%;}
	.list-wrap .list.col2 h4 p {width: 100%;}
	section.content-out::after {display: none;}
	
	.footer-wrap {gap: 2rem;} 
	.footer-wrap .organ {width: 100%;}	
	.footer-wrap .organ-info {width: 100%; font-size: 1.4rem; color: #666666;}
}

@media only screen and (max-width: 767px){
	.tm {display: none;}
	
	.content-title {height: 20rem;}
	.content-title h2 {font-size: 5.4rem; font-weight: 700; background:url(../images/img_top.png) center bottom no-repeat; padding-top: 8rem;}
	.content-title h2 p {font-weight: 300;}
	
	.list-wrap .list {width: 100%;}
	.list-wrap .list.col2 .list-2col ul {width: 100%;}
	.list-wrap .list li {padding: .8rem 0; font-size: 1.9rem;}	
	.list-wrap .list li a {padding-right: 1rem;}
	.list-wrap h4 p {font-size: 11px;}

	.list-wrap .list.col2 .list-2col ul:not(:first-child) {margin: -5rem 0 0 0;}
	.list-wrap .list ul.list-sub::before {height: 5.9rem;}
}