@charset "utf-8";

/* @import url(base.css);
@import url(main.css?v=2025);
@import url(sub.css); */

#skipnavi{height:0px;position:relative;z-index:100000;}
#skipnavi > ul > li{text-align:center;}
#skipnavi > p {width:0; height:0; overflow:hidden; white-space:nowrap;}
#skipnavi > ul > li > a {position:absolute; display: block; color:#fff; font-size:18px; top:-10000px; left:0; border:2px solid #262626; z-index:10000;}
#skipnavi > ul > li > a:hover, #skipnavi > ul > li > a:focus, #skipnavi > ul > li > a:active {position:absolute; top:0; height:7px; padding:12px 0 31px; background:#2f3a70; z-index:10000; width:100%; overflow: hidden;}


/*--------------------------*/
/* body */
/*--------------------------*/

body {width:100%; min-width:280px;}

@media screen and (min-width:2560px) {
	
	body {max-width:2560px; margin:0 auto;}
	
}

/*--------------------------*/
/* header */
/*--------------------------*/

@media screen and (min-width:2560px) {
	
	header {left:50% !important; width:2560px !important; margin-left:-1280px !important;}
	
}

@media screen and (min-width:1000px) {

	header {position:fixed; left:0; top:0; z-index:999; width:100%; height:95px; padding-left:350px; background:white; border-top:5px solid #00c060; border-bottom:1px solid #e6e6e6;}

	header h1 {position:absolute; left:25px; top:24px;}
	header h1 img{height: 40px;}

	header .navOpen {display:none;}

	header #gnv {float:right; width:100%; height:100%; max-width:1200px; margin-right:25px;}
	header #gnv p, header #gnv .navClose {display:none;}
	header #gnv > ul {height:100%;}
	header #gnv > ul > li {position:relative; float:left; width:20%; height:100%;}
	header #gnv > ul > li > a {
		position:relative; 
		display:block; 
		width:100%; 
		height:100%; 
		padding-top:30px; 
		font-size:1.5rem; 
		font-family:"TmoneyRoundWindRegular"; 
		font-weight: 600;
		text-align:center;
	}
	header #gnv > ul > li:hover > a, header #gnv > ul > li > a:focus {		
		color:#ff8a00;
	}
	header #gnv > ul ul {position:absolute; left:0; top:90px; z-index:99999; overflow:hidden; width:100%; height:0; background:white; border-right:1px solid #e6e6e6;
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		transition:all 0.5s ease;
	}
	body.navOn header #gnv > ul ul {height:300px;}
	header #gnv > ul > li:first-child ul {border-left:1px solid #e6e6e6;}
	header #gnv > ul ul a {display:block; padding:10px 10px 10px 15px; font-size:15px;}
	header #gnv > ul ul a:hover, header #gnv > ul > li ul a:focus {color:white; background:#00c060 ;}

	header div[data-nav-bg] {position:absolute; left:0; top:90px; z-index:9999; width:100%; height:0; background:white;
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		transition:all 0.5s ease;
	}
	body.navOn header div[data-nav-bg] {height:301px; border-bottom:1px solid #e6e6e6;}

}

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

	header {position:fixed; left:0; top:0; z-index:999; width:100%; height:60px; background:white; border-top:2px solid #54700a; border-bottom:1px solid #e6e6e6;}

	header h1 {position:absolute; left:25px; top:8px;}
	header h1 img {width:auto; height:30px;}

	header .navOpen {position:absolute; right:15px; top:0; width:60px; height:100%; background:url("../img/common/navOpen.png") 50% 50% no-repeat;}

	header #gnv {position:fixed; right:-300px; top:0; z-index:99999; display:none; overflow:auto; width:280px; height:100%; background:white; border-left:1px solid #e6e6e6;}
	body.navOn header #gnv {display:block; right:0;}
	header #gnv p {width:100%; height:60px; padding:12px 0 0 20px; font-size:24px; font-family:"notoMedium"; color:white; background:#54700a;}
	header #gnv .navClose {position:absolute; right:0; top:0; width:60px; height:60px; background:url("../img/common/navClose.png") 50% 50% no-repeat;}
	header #gnv > ul > li > a {display:block; width:100%; height:50px; padding:13px 0 0 20px; border-bottom:1px solid #e6e6e6;}
	header #gnv > ul ul {display:none;}
	header #gnv a.on + ul {display:block; background:#f6f6f6;}
	header #gnv > ul ul a {display:block; width:100%; height:50px; padding:15px 0 0 25px; font-size:14px; border-bottom:1px solid #e6e6e6;}


}

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

	header {height:50px;}

	/*header h1 {top:0; left:15px;}*/
	header h1 img {width:auto; height:24px;}

	header .navOpen {width:50px; background-size:20px;}

	header #gnv p {height:50px; padding:9px 0 0 20px; font-size:22px;}
	header #gnv .navClose {width:50px; height:50px; background-size:16px;}

	header div[data-nav-bg] {position:fixed; left:0; top:0; z-index:9999; display:none;}
	body.navOn header div[data-nav-bg] {display:block; width:100%; height:100%; background:black; opacity:0.7;}

}

/*--------------------------*/
/* banner */
/*--------------------------*/

@media screen and (min-width:1000px) {

	#cmm_banner {clear:both; padding:20px 0; text-align:center; border-top:1px solid #eaeae2;}
	#cmm_banner a {display:inline-block; margin:0 20px;}

}

@media screen and (min-width:416px) and (max-width:999px) {

	#cmm_banner {clear:both; padding:15px 0; text-align:center; border-top:1px solid #eaeae2;}
	#cmm_banner a {display:inline-block; margin:0 10px;}
	#cmm_banner img {width:150px;}

}

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

	#cmm_banner {clear:both; padding:15px 0; text-align:center; border-top:1px solid #eaeae2;}
	#cmm_banner a {display:inline-block; margin:5px;}
	#cmm_banner img {width:120px;}

}

/*--------------------------*/
/* footer */
/*--------------------------*/

@media screen and (min-width:1000px) {

	footer {float:left; width:100%; background:#eaeae2;}
	footer > div {position:relative; width:100%; max-width:1250px; margin:0 auto; padding:35px 25px;}

	footer address span {display:inline-block; width:1px; height:12px; margin:0 10px; background:#aeaeae;}
	footer p {margin-top:15px; font-size:14px;}

	footer img {position:absolute; right:0; top:50%; margin-top:-43px;}

}

@media screen and (min-width:416px) and (max-width:999px) {

	footer {position:relative; float:left; width:100%; padding:25px 120px 25px 25px; background:#eaeae2;}

	footer address {font-size:15px;}
	footer address span {display:inline-block; width:1px; height:12px; margin:0 5px; background:#aeaeae;}
	footer p {margin-top:5px; font-size:13px;}

	footer img {position:absolute; right:25px; top:50%; margin-top:-27px; width:80px; height:53px;}

}

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

	footer {float:left; width:100%; padding:20px 15px; text-align:center; background:#eaeae2;}

	footerbox optnum05 address {font-size:14px;}
	footer address span:nth-child(2) {position:relative; top:1px; display:inline-block; width:1px; height:12px; margin:0 5px; background:#aeaeae;}
	footer address span:nth-child(3) {display:block;}

	footer p {margin-top:10px; font-size:13px;}

	footer a {display:none;}

}

/*--------------------------*/
/* sub */
/*--------------------------*/

/* visual */

#cmm_sbVisual {float:left; width:100%; height:250px; margin-top:68px; padding-top:65px; text-align:center;}
#cmm_sbVisual.bg01, #cmm_sbVisual.bg02, #cmm_sbVisual.bg03, #cmm_sbVisual.bg04, #cmm_sbVisual.bg05 {
	background:url("../img/common/sbVisual01.jpg?v=0324")no-repeat;
	background-size: cover;
    background-color: #c3e0fe;
}
#cmm_sbVisual h2 {font-size:52px; font-family:"TmoneyRoundWindExtraBold";
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color=#ffffff)";/*IE 8*/
	/*text-shadow: 0 0 5px #ffffff; FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
#cmm_sbVisual p {
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color=#ffffff)";/*IE 8*/
	/* text-shadow: 0 0 5px #ffffff; FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
	padding-top: 0.5rem;
}

@media screen and (min-width:416px) and (max-width:999px) {

	#cmm_sbVisual {
		margin-top:0; 
		height:210px; 
		padding-top:65px;
	}
	#cmm_sbVisual h2 {font-size:38px;}

}

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

	#cmm_sbVisual {margin:50px 0 20px; height:130px; padding-top:30px;}
	#cmm_sbVisual {background-position:65% 50% !important;}
	#cmm_sbVisual h2 {font-size:32px;}
	#cmm_sbVisual p {font-size:15px;}

}

/* snv */

#cmm_snv {position:relative; top:-30px; width:100%; max-width:1250px; margin:0 auto; padding:0 25px;}
#cmm_snv ul {float:left; width:100%; margin-bottom:30px; text-align:center;}

#cmm_snv a {
	float:left; 
	display:block; 
	height:60px; 
	padding-top:18px; 
	font-size:18px; 
	line-height:1.3em; 
	color:white; 
	border-left: 1px solid #fff;
	border-radius: 3rem;
    background-color: #00c060;
}
#cmm_snv a.on {
	background-color: #ff8a00 ;
}

#cmm_snv.num01 a {width:100%;}
#cmm_snv.num02 a {width:50%;}

#cmm_snv.num03 a {width:33.3%;}
#cmm_snv.num03 li:first-child a {width:33.4%;}

#cmm_snv.num04 a {width:25%;}

#cmm_snv.num05 a {width:20%;}

#cmm_snv.num06 a {width:16.6%;}
#cmm_snv.num06 li:first-child a {width:17%;}

/* 활성화된 메뉴 항목 */
/* a에 직접 on이 붙는 경우 */
.menu-item.on {
	background-color: #ff8200;
	color: white;
	
	border-radius: 30px;
  }
  
  /* li에 on이 붙는 경우 */
  #cmm_snv li.on a {
	background-color: #ff8200;
	color: white;
	font-weight: bold;
	border-radius: 30px;
  }

@media screen and (min-width:416px) and (max-width:999px) {

	#cmm_snv ul {margin-bottom:5px;}
	#cmm_snv a {display:flex; padding:0; font-size:15px; justify-content:center; align-items:center;}

}

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

	#cmm_snv {display:none;}

}

/* content */

.cmm_sub {width:100%; max-width:1250px; margin:0 auto; padding:0 25px;}
.cmm_sub > div {float:left; width:100%; min-height:200px; margin-bottom:80px;}

.cmm_sub .pageTitle {/*float:left;*/ width:100%; margin-bottom:25px; text-align:center;}
.cmm_sub .pageTitle h3 {position:relative; display:inline-block; padding:0 10px 2px;}
.cmm_sub .pageTitle h3::after {
	position:absolute; 
	left:0; 
	bottom:0; 
	display:block; 
	width:100%; 
	height:25px; 
	content:""; 
	/* background:#fad3c9; */
}
.cmm_sub .pageTitle h3 span {position:relative; z-index:9; font-family:"TmoneyRoundWindExtraBold"; font-size:38px; line-height:1.2em;}

.cmm_sub .route {/*float:left;*/ width:100%; margin-bottom:60px; text-align:center;}
.cmm_sub .route li {position:relative; display:inline-block; margin-right:30px;}
.cmm_sub .route li::after {position:absolute; right:-20px; top:6px; display:block; width:6px; height:11px; content:""; background:url("../img/common/route.png") no-repeat;}
.cmm_sub .route li:last-child {margin-right:0;}
.cmm_sub .route li:last-child::after {display:none;}

.cmm_sub .tab {float:left; width:100%; margin-bottom:40px; padding-bottom:15px; text-align:center; border-bottom:2px solid #d2dabc;}
.cmm_sub .tab li {position:relative; display:inline-block; margin-right:40px;}
.cmm_sub .tab li:last-child {margin-right:0;}
.cmm_sub .tab li::after {position:absolute; right:-24px; top:7px; display:block; width:1px; height:23px; content:""; background:#bcbcbc;}
.cmm_sub .tab li:last-child::after {display:none;}
.cmm_sub .tab a {position:relative; display:inline-block; font-size:26px;}
.cmm_sub .tab .on {font-family:"notoBold"; color:#4a6308;}
.cmm_sub .tab .on::after {position:absolute; right:-6px; top:-6px; display:block; width:9px; height:9px; content:""; background:#e83e17; border-radius:50%;}

@media screen and (min-width:416px) and (max-width:999px) {

	.cmm_sub > div {margin-bottom:60px;}

	.cmm_sub .pageTitle {margin-bottom:15px;}
	.cmm_sub .pageTitle h3::after {height:20px;}
	.cmm_sub .pageTitle h3 span {font-size:32px;}

	.cmm_sub .route {margin-bottom:30px;}

	.cmm_sub .tab li::after {height:20px;}
	.cmm_sub .tab a {font-size:22px;}
	.cmm_sub .tab .on::after {top:-4px; width:7px; height:7px;}

}

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

	.cmm_sub {padding:0 15px;}
	.cmm_sub > div {margin-bottom:40px;}

	.cmm_sub .pageTitle {margin-bottom:12px;}
	.cmm_sub .pageTitle h3::after {height:15px;}
	.cmm_sub .pageTitle h3 span {font-size:28px;}

	.cmm_sub .route {margin-bottom:25px;}
	.cmm_sub .route li {font-size:15px; margin-right:15px;}
	.cmm_sub .route li::after {right:-12px;}

	.cmm_sub .tab li::after {height:18px;}
	.cmm_sub .tab a {font-size:20px;}
	.cmm_sub .tab .on::after {top:-3px; width:6px; height:6px;}

}