@charset "utf-8";

	/*S : header*/
		.header {position:fixed; width:100%; height:80px; background:rgb(255 255 255 / 58%); z-index: 999}
		.header:after {content:""; display:block; clear:both; overflow:hidden}
		.header .innerbox {width:100%; margin:0 auto}
		.header .innerbox .header-logo {}
		.header .innerbox .header-logo h1 {width:70%; height:70px}
		.header .innerbox .header-logo h1 a {display:block; width:100%; max-width:250px; height:100%; margin-left:15px; background:url('../images/logo.png') no-repeat 50% 60%; background-size:contain; font-size:0; text-indent:-99999rem}

		.header .innerbox .header-login {padding-right:25px; background:#e8e7f5; text-align:right}
		.header .innerbox .header-login ul {display:flex; align-items:center; justify-content:flex-end; height:40px;margin-right:20px}
		.header .innerbox .header-login ul li::after {content: ""; display:inline-block; width:1px; height:6px; margin:0 10px 3px; background:#cacaca;} 
		.header .innerbox .header-login ul li:last-child::after {display:none}
		.header .innerbox .header-login ul li a {padding-left:15px}
		.header .innerbox .header-login ul li:nth-child(1) a {background:url('../images/header-login-home.png') no-repeat center left}
		.header .innerbox .header-login ul li:nth-child(2) a {background:url('../images/header-login-login.png') no-repeat center left}
		.header .innerbox .header-login ul li:nth-child(3) a {background:url('../images/header-login-join.png') no-repeat center left}

		.header .menu-box {overflow:scroll; position:absolute; right:-120%; top:75px; z-index:65; width:100%; height:auto; padding-top:0; background:#fff;-ms-overflow-style: none;scrollbar-width: none; box-shadow:0px 2px 6px #a9a9a9}
		.header .menu-box::-webkit-scrollbar {display: none;}
		.header .menu-box > ul {overflow-y: scroll; height:2000px; padding:0 20px; background:#fff}
		.header .menu-box > ul > li {float:none; width:auto; height:auto; margin-left:0; padding-left:0; border-bottom:1px solid #ddd}
		.header .menu-box > ul > li:last-child {margin-bottom:50px}
		.header .menu-box > ul > li:first-child {margin-left:0}
		.header .menu-box > ul > li > a {position:relative; display:block; height:70px; padding-left:10px; color:#333; line-height:70px; font-size:40px}
		.header .menu-box > ul > li:hover a {border:0; color:#333}
		.header .menu-box > ul > li.on > a {background:#227bc0;color:#fff; font-weight:800}
		.header .menu-box > ul > li ul {display:none; position:static; left:0; top:0; width:auto; height:auto; text-align:left; background:#f6f6f6}
		.header .menu-box > ul > li ul li {margin:0; text-align:left}
		.header .menu-box > ul > li ul li a {display:block; height:80px; padding:0 20px 0 40px; line-height:80px; font-size:40px; color:rgba(102,102,102,0.8)}
		.header .menu-box > ul > li ul li:hover a {color:#7db249}
		.header .menu-box > ul > li ul li.on a {color:#7db249}
		.header .menu-box > .dep1 {height:auto; padding:0 0 200px 0; color:#777;-ms-overflow-style: none;scrollbar-width: none; }
		.header .menu-box > .dep1::-webkit-scrollbar {display: none;}
		.header .menu-box > .dep1 li {margin-bottom: 0 !important}
		.header .menu-box > .dep1 a { padding:0 15px; color:#777; font-size:20px}
		.header .menu-box > .dep1 li:last-child a {padding-right:0}
		.header .innerbox .menu-box .dep1 ul.dep3 {background:#ececec; padding:10px 0}
		.header .innerbox .menu-box .dep1 li .dep2 ul li a {height:60px; padding-left:20px;line-height:60px; }
		.header .innerbox .menu-box .dep1 li ul.dep3 li a {height:40px; padding-left:20px; line-height:40px; font-size:16px}
		.header .innerbox .menu-box .dep1 ul.dep3 a::before { content: ""; display:inline-block; width:5px; height:5px; border-radius:10px; margin:0 5px 1px 5px; background:#227bc0}
		.header .innerbox .menu-box .dep1 li ul.dep3 li:hover a {color:#fd6f22cc}

		.header .header-btn {display:flex; position:absolute; top:-5px; right:25px; justify-content: end; width:18%}
		.header .header-btn .btn-allmenu {z-index:65; width:90px; height:80px; background:0;  border:none; outline:0; font-size:0; cursor:pointer}
		.header .header-btn .btn-allmenu span {display:flex; justify-content: end; align-items:end; flex-direction: column; height:50%; margin-top:10px}
		.header .header-btn .btn-allmenu i {display:block; height:3px; width:0px; margin-bottom:5px; background-color:#333; text-align:right;  transition:background-color 0.3s 0s, opacity 0.3s 0.3s, margin 0.3s 0.3s, transform 0.3s 0s; transition: 0.2s}
		.header .header-btn .btn-allmenu i:nth-child(1) {width:45px; transition-delay: 0.5s;}
		.header .header-btn .btn-allmenu i:nth-child(2) {width:30px; transition-delay: 0.1s;}
		.header .header-btn .btn-allmenu i:nth-child(3) {width:45px; transition-delay: 0.3s;}
		.header .header-btn .btn-allmenu i:nth-child(4) {width:30px; transition-delay: 0.2s;}
		.header .header-btn .btn-allmenu i:nth-child(5) {width:45px; transition-delay: 0.4s;}
		.header .header-btn .btn-allmenu:hover i {background-color:#ffc825}
	/*E : header*/	


	/*S : footer*/
		.footer { z-index: -999 }
		.footer .footer_menu { overflow: hidden; width: 100%; height: auto; border-bottom: 1px solid #38508f; background:#3c3e87}
		.footer .footer_menu ul.footer_text::after { display: block; clear: both; content: '' }
		.footer .footer_menu ul li { display: inline-block; width: 49%; color: white; text-align: center; line-height: 40px }
		.footer .footer_menu ul.footer-txt li:nth-child(odd) { border-right: 1px solid #12032c }
		.footer .footer_menu ul.footer-txt li:nth-child(even)::before {content: ""; display: block; float: left; width: 2px; height: 15px; margin-top: 25px; background: #7d8395}
		.footer .footer_menu ul li a { display: block; width: 100%; padding: 10px; font-size: 17px; font-weight: bold; color: white; transition: 0.5s all }
		.footer .footer_menu ul li span > strong {color:#fff; font-weight:400;transition: 0.5s all}
		.footer .footer_menu ul li span > strong:hover {color:#ffcd4a}
		.footer .footer_menu ul.footer-txt li:nth-child(even)::before { display: none }
		.footer .footer_box {padding: 25px 20px; background:#22225f; color: #999; text-align: center }
		.footer .footer_box .footer_text { padding-bottom: 25px; font-size: 16px; color: white }
		.footer .footer_box .footer_text h1 { width: 100%; height: 65px; margin-bottom: 10px; background: url('../images/logo-footer.png') no-repeat center; font-size: 0 !important; text-indent: -99999rem }
		.footer .footer_box .footer_quick { width: 300px; height: 80px; margin: 30px auto 0; text-align: center }
		.footer .footer_box .footer_quick a { display: block; width: 100%; height: 100%; padding-top: 5px; border: 10px solid #12032c; background: #fff; font-size: 30px; font-weight: bold; color: #333; border-radius: 10px }

		.footer .footer_box .footer-select-city { position: relative; width: 100% }
		.footer .footer_box .footer-select-city select { width: 100%; height: 76px; padding: 20px 25px; border: 0; border-top: 1px solid #12032c; background: url('../images/footer-select-city.png') no-repeat 90% center #3c3e87; font-size: 15px; color: #fff; -moz-appearance: none; -webkit-appearance: none; appearance: none }
		.footer .footer_box .footer-select-city select::-ms-expand { display: none }
		.footer .footer_box .footer-select-city select option { border: 1px solid #12032c; background: #12032c }
		.footer .footer_box .footer-select-city .icoArrow { display: flex; position: absolute; top: 0; right: 10%; height: 76px; align-items: center; justify-content: center; transition: all 0.2s }
		.footer .footer_box .footer-select-city .icoArrow img { width: auto; transition: all 1.5s }
		.footer .footer_box .footer-select-city select:focus + .icoArrow img { transform: rotate(180deg) }
	/*E : footer*/	

	@media all and (min-width:768px) and (max-width:1023px) {
		/*S : header*/
			.header .innerbox .header-logo h1 {width:20%}

			.header .innerbox .header-login {padding-right:25px; background:#e8e7f5; text-align:right}
			.header .innerbox .header-login ul {display:flex; align-items:center; justify-content:flex-end; height:40px;margin-right:20px}
			.header .innerbox .header-login ul li::after {content: ""; display:inline-block; width:1px; height:6px; margin:0 10px 3px; background:#cacaca;} 
			.header .innerbox .header-login ul li:last-child::after {display:none}
			.header .innerbox .header-login ul li a {padding-left:15px}
		/*E : header*/	
	}

	@media (min-width:1024px) {
		/*S : header*/
			.header {top:0; width:100%; height:auto; margin:0 auto; background:#ffffffde; z-index:60}
			.header .innerbox {align-items:center; height:100%; border-bottom:1px solid #cacaca}

			.header .innerbox .header-logo {display:flex; justify-content: space-between; align-items:center; width:1400px; height:80px; margin:0 auto}
			.header .innerbox .header-logo h1 {width:310px; height:50px}
			.header .innerbox .header-logo h1 a {display:block; width:100%; max-width:100%; height:100%; margin-left:0; background:url('../images/logo.png') no-repeat 50%; background-position-x:0; background-size:contain; font-size:0; text-indent:-99999rem}
			.header .innerbox .header-login ul li::after {margin:0 5px 3px;}
			.header .innerbox .header-logo .header-login {padding:0; background:none; border:0}
			
			.header .innerbox .menu-box {overflow:unset; display:flex; position:revert; max-width:1400px; height:60px; margin:0 auto; background:none; box-shadow:none}
			.header .innerbox .menu-box:after {content:""; display:block; clear:both; overflow:hidden}
			.header .innerbox .menu-box > ul {overflow: unset; float:left;height:auto;padding:0}
			.header .innerbox .menu-box  ul li a {height:60px; padding-left:40px; font-size:20px; font-weight:500; transition:all 0.3s; line-height:60px}
			.header .innerbox .menu-box .dep1 {display:flex; justify-content:space-between; width:100%; background: unset}
			.header .innerbox .menu-box .dep1 > li {display:inline-block; position:relative; width:100%; border-bottom:0; text-align:center}
			.header .innerbox .menu-box .dep1 > li::after { content: ""; opacity:0; position:absolute; left:40%; top:70%; width:50%; height:5px; transform:translate(-50%, -70%); border-radius:50px; background:#fcd77f8f; z-index:-5;transition: 0.2s}
			.header .innerbox .menu-box .dep1 > li:hover::after {opacity:1; left:50%}
			.header .innerbox .menu-box .dep1 > li > a {height:61px; padding:0; color:#444; line-height:60px}
			.header .innerbox .menu-box div.dep2{opacity:0; display: none; position:absolute; top:142px; left:50%; width:100%; min-height:350px; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; background:#f6f5f5; z-index:10; transform:translateX(-50%);transition:all 0.2s} 
			.header .innerbox .menu-box .dep1 li:hover div.dep2 {position: fixed; display: flex; opacity:1; justify-content: flex-start}
			.header .innerbox .menu-box .dep1 li div.dep2 .tit {display:none; padding:40px 0 50px 13%; width:25%; color:#227bc0; font-size:30px; text-align:left}
			.header .innerbox .menu-box .dep1 li div.dep2 .tit p {margin-top:10px; font-weight:600}
			.header .innerbox .menu-box .dep1 li div.dep2 .tit span {display:block; color:#333; font-size:15px; line-height:1.3}
			.header .innerbox .menu-box .dep1 li div.dep2 > ul {background:#f6f5f5}
			.header .innerbox .menu-box .dep1 li div.dep2 > ul > li {width:230px; margin-right:45px}
			.header .innerbox .menu-box .dep1 li div.dep2 > ul > li > a {position:relative; height:50px; padding-left:15px; border-radius:15px; background:#fff; font-size:16px; line-height:50px
}
			/*3차 on off */
			.header .innerbox .menu-box .dep1 li div.dep2 > ul > li.thirdin.on > a {background:url('../images/icon_top_arrow_1.png') no-repeat 90% center #227bc0; color:#fff}
			.header .innerbox .menu-box .dep1 li div.dep2 > ul > li.thirdin > a {background:url('../images/icon_bottom_arrow.png') no-repeat 90% center #fff} 
			.header .innerbox .menu-box .dep1 li div.dep2 > ul > li.thirdin > ul.dep3 {display:none}
			.header .innerbox .menu-box .dep1 li div.dep2 > ul > li.thirdin.on > ul.dep3 {display:block}

			.header .innerbox .menu-box .dep1 li div.dep2 .tit {background:url('../images/menu-titbg-img.png') no-repeat 90% 80% #fff;}
			.header .innerbox .menu-box .dep1 li:hover div.dep2 .tit {display:block}
			.header .innerbox .menu-box .dep1 li:hover div.dep2 > ul {display:flex; flex-wrap: wrap; width:65%; padding:40px 0 50px 40px}
			.header .innerbox .menu-box .dep1 ul.dep3 {display:none; margin:-15px 0 -15px 0; background:#fff}
			.header .innerbox .menu-box .dep1 li ul.dep3 li a {height:auto; padding:5px 0 0 20px; color:#666; font-size:14px; font-weight:500; line-height:25px}
			.header .innerbox .menu-box .dep1 ul.dep3 li:first-child  a {padding-top:0}
			.header .innerbox .menu-box .dep1 li:hover ul.dep3 {display:block; padding:20px 0 10px}

			.header .header-btn {display:none}
			.header .header-btn .btn-search {position: relative; width:50%; height:90px; border:0; background:url('../images/icon-search.png') no-repeat 50%; font-size:0; cursor: pointer; transition: 0.2s}
			.header .header-btn .btn-search:hover { background:url('../images/icon-search-hover.png') no-repeat 50% #ffc825;}
			.header .header-btn .btn-search.on {background:url('../images/icon-cancel.png') no-repeat 50% #7db249;}
			.header .header-btn .btn-search.on:hover {background:url('../images/icon-cancel.png') no-repeat 50% #ffc825;}
			.header .header-btn a {position:relative; display:block; width:50%; height:90px; text-align:center; overflow: hidden}
			.header .header-btn a::after { content: "사이트 맵"; position:absolute; right:-8%; opacity:0; width:100%; color:#333; font-weight:900; transition: 0.4s}
			.header .header-btn a:hover::after {opacity:1; right:0; color:#ffc825;}
			.header .header-btn a span {display:flex; justify-content: end; align-items: center; flex-direction: column; height:50%; margin-top:20px}
			.header .header-btn a i  {display:block; height:3px; width:0px; margin-bottom:5px; background-color:#333; text-align:right;  transition:background-color 0.3s 0s, opacity 0.3s 0.3s, margin 0.3s 0.3s, transform 0.3s 0s; transition: 0.2s}
			.header .header-btn a i:nth-child(1) {width:50%; transition-delay: 0.5s;}
			.header .header-btn a i:nth-child(2) {width:30%; transition-delay: 0.1s;}
			.header .header-btn a i:nth-child(3) {width:50%; transition-delay: 0.3s;}
			.header .header-btn a i:nth-child(4) {width:30%; transition-delay: 0.2s;}
			.header .header-btn a i:nth-child(5) {width:50%; transition-delay: 0.4s;}
			.header .header-btn a:hover i {background-color:#ffc825}

			.header .menu-bg {opacity:0; display:none; position:fixed; top:142px; left:0; width:100%; min-width:100vw; height:100%; min-height:100vw; background:#0000002e; z-index:-9}
			.header .menu-bg.on {opacity:1;display:block}

		 /*S : footer*/
			.footer {overflow: hidden}
			.footer .footer_menu {height:76px}
			.footer .footer-box {display:flex; align-items:center;}
			.footer .footer_menu .footer-box {margin:0 auto; width:100%; max-width:1400px}
			.footer .footer_menu ul {width:80%}
			.footer .footer_menu ul li	{margin-right:20px; width:auto; line-height:76px; text-align:left;padding:0px 15px;}
			.footer .footer_menu ul.footer-txt	li:nth-child(odd){border-right:0px;}
			.footer .footer_menu ul li:nth-child(even)::before {content: none;}
			.footer .footer_menu ul li a {padding:0; color:#bbb}
			.footer .footer_menu ul li a:hover {color:white;}
			.footer .footer_box {display:flex;padding:40px 0; text-align:left}
			.footer .footer_box::after {content:''; display:block;  clear:both}
			.footer .footer_box .footer_list {display:flex; width:100%; max-width:1400px; margin:0 auto}
			.footer .footer_box .footer_text {position:relative; width:65%; color:white; line-height:1.5}
			.footer .footer_box ul.footer_text::after {content:''; display:block;  clear:both}
			.footer .footer_box .footer_text h1 {float:left; display:block; width:270px; height:93px; margin-right:40px; background-position:left}
			.footer .footer_box .footer_text span {display:block; margin-top:5px; font-size:10px}

			.footer .footer_box .footer-select-city {display:flex; width:35%; height:100%;}
			.footer .footer_box .footer-select-city select {width:100%; max-width:240px; height:50px; padding:5px 35px;border-top:0; border-left:1px solid #12032c; border-right:1px solid #12032c}
		/*E : footer*/	

	}