@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
/*===========================================================================
	CSS 초기화
============================================================================*/
* {font-family: 'SCoreDream', 'Noto Sans KR', 'Open Sans' ,sans-serif; box-sizing:border-box; margin:0; padding:0; }
button {border:none 0;margin:0;padding:0;overflow:visible;cursor:pointer;background:none;}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a {border:0; outline:0; font-size:100%; color:#222; line-height:1;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul, ol, li {list-style:none;}
strong {display: inline-block;}
a {margin:0; padding:0; font-size:100%; }
button {margin:0; padding:0; font-size:100%; }
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
p {line-height:1.5; word-break:keep-all;}
img {width: 100%}
input {outline:none;}
button {cursor:pointer;}
a {text-decoration: none; font-family: 'Noto Sans KR';}
button {text-decoration: none; font-family: 'Noto Sans KR';}
textarea {resize: none;}
.col-group {display:flex;}
.container {width: 1440px; height: auto; margin: 0 auto;}
.container2 {width: 1200px; height: auto; margin: 0 auto;}
.orange-btn{width: 336px; height: 72px; display: flex; border: 2px solid #fe8f01; background-color: #fe8f01; font-weight: bold; justify-content: center; align-items: center; color: #fff; font-size: 16px; transition: all 0.3s;}
.orange-btn:hover{background: transparent; border: 2px solid #fe8f01; color: #fe8f01;}
.blue-btn{width: 336px; height: 72px; display: flex; background-color: #005ba1; font-weight: bold; justify-content: center; align-items: center; color: #fff; color: #fff; font-size: 16px;}
.gray-btn{width: 336px; height: 72px; display: flex; background-color: #7d7d7d; font-weight: bold; justify-content: center; align-items: center; color: #fff; color: #fff; font-size: 16px;}
.white-btn{width: 336px; height: 72px; display: flex; background-color: #fff; border: solid 1px #7d7d7d; font-weight: bold; justify-content: center; align-items: center; color: #fff; color: #7d7d7d; font-size: 16px;}

.mb{display: none;}
@media ( max-width: 1024px ) {
	.container{max-width: 100%; padding: 0 16px;}
	.container2{max-width: 100%; padding: 0 16px;}
}
@media ( max-width: 768px ) {
	.pc{display: none;}
	.mb{display: block;}
}
/* 해더 */
header{position: absolute; width: 100%; z-index:1000;}
header .header{height: 96px; position: relative;}


header .header.hv{background-color: #fff; z-index: 1;}
header .header.hv::after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.26); z-index: 0;}

header .header .container{height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; border-bottom: solid 1px rgba(255, 255, 255, 0.52);}
header .header h1.logo{position: relative; width: 177px; height: 40px; background-image: url(../images/logo-w.png);}
header .header h1.logo a{position: absolute; width: 100%; height: 100%;}
header .header.hv h1.logo{background-image: url(../images/logo.png);}

header .header ul.nav-b{display: flex; height: 100%; z-index: 2;}
header .header ul.nav-b > li{width: 160px; position: relative;}
header .header ul.nav-b > li:hover::after{content: ''; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 76px; height: 2px; background-color: #fe8f01;}

header .header ul.nav-b > li a{display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; color: #fff; font-weight: 300;}
header .header ul.nav-b > li a i{display: none;}
header .header.hv ul.nav-b > li > a{color: #333;}

header .header ul.nav-b > li .btn {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; color: #fff; font-weight: 300;}
header .header ul.nav-b > li .btn i{display: none;}
header .header.hv ul.nav-b > li > .btn {color: #333;}

header .header ul.nav-b > li ul.nav-s{display: none; position: absolute; width: 100%; min-height: 300px; top: 95px; padding: 9px 0;}
header .header.hv ul.nav-b > li ul.nav-s{display: block;}
header .header ul.nav-b > li ul.nav-s::before{position: absolute; content: ''; border-left: solid 1px #d5d5d5; height: 248px; top: 50%; transform: translateY(-50%);}
header .header ul.nav-b > li:last-child ul.nav-s::after{position: absolute; content: ''; border-left: solid 1px #d5d5d5; height: 248px; top: 50%; right: 0; transform: translateY(-50%); }
header .header ul.nav-b > li ul.nav-s li{width: 100%; height: 56px;}
header .header ul.nav-b > li ul.nav-s li a{color: #7d7d7d;}
header .header ul.nav-b > li ul.nav-s li a:hover{color: #fe8f01; text-decoration: underline;}

header .header .hd-bg{display: none; width: 100%; background-color: #f6f4f2; height: 300px; background-image: url(../images/pattern.png); background-repeat: no-repeat; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.26);}
header .header.hv .hd-bg{display: block;}
header .header ul.nav-b > li > .op-bt{display: none;}

/* 푸터 */
footer{background-color: #444;}
footer .footer{display: flex; height: 216px; align-items: center; flex-direction: column; justify-content: center; padding: 0 20px;}
footer .footer p span{color: #fff; font-size: 15px; margin-right: 24px; font-family: 'Noto Sans KR';}
footer .footer p span:last-child{margin: unset;}
footer .footer p:nth-child(2){margin-bottom: 32px;}
footer .footer > p:last-child{color: #b5b5b5; font-size: 15px; font-family: 'Noto Sans KR';}
footer .btn_gotop{position: fixed; z-index: 999; bottom: 15%; right: 5%; background-color: #fe8f01; border: unset; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px;}
footer .btn_gotop i{color: #fff; font-size: 20px;}

@media ( max-width: 768px ) {
    header .header .hd-bg {display:none !important;}
	header{position: relative;}
	header .header{height: 56px;}
	header .header h1.logo{width: 120px; height: 27px; background-image: url(../images/logo.png); background-size: cover;}
	header .header ul.nav-b{display: none; position: absolute; right: 0; top: 0; flex-direction: column; background-color: #fff; z-index: 999; width: 280px; height: 100vh;}
	header .header ul.nav-b.op{display: flex;}
	header .header ul.nav-b.op::before{content: ''; position: absolute; top: 0; right: 100%; width: calc(100vw - 100%); height: 100%; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background-color: var(--black-two);}
	header .header ul.nav-b.op::after{content: ''; position: absolute; top: 0; right: 100%; width: calc(100vw - 100%); height: 100%; background-color: #333; opacity: 0.65;}


	header .header ul.nav-b .m-logo{flex:0 0 auto; width: 100%; height: 56px; display: flex; justify-content: center; align-items: center; border-bottom: solid 1px #d5d5d5;}
	header .header ul.nav-b .m-logo a{width: 120px; height: 27px; background-image: url(../images/logo.png); background-size: cover;}
	header .header ul.nav-b > li{width: 100%; display: flex; flex-direction: column;}
	header .header ul.nav-b > li::after{display: none;}
	header .header ul.nav-b > li > a{color: #333; font-size: 15px; height: 48px; justify-content: space-between;  padding: 0 24px;}
	header .header ul.nav-b > li > .btn {color: #333; font-size: 15px; height: 48px; justify-content: space-between;  padding: 0 24px;}
	header .header ul.nav-b > li > .op-bt{position: absolute; width: 27px; height: 48px; display: flex; justify-content: center; align-items: center; right: 15px; top: 0; border: unset; background-color: unset;}
	header .header ul.nav-b > li .nav-bt{width: 15px; border: unset; background-color: transparent;}
	header .header ul.nav-b > li .nav-bt i{font-size: 15px;}
	header .header ul.nav-b > li ul.nav-s{display: none; position: static; min-height: unset; padding: unset; background-color: #f6f4f2;}
	header .header ul.nav-b > li.op ul.nav-s{display: block;}
	header .header ul.nav-b > li.op > a{color: #fe8f01;}
	header .header ul.nav-b > li.op > button{color: #fe8f01;}
	header .header ul.nav-b > li.op > .op-bt i{color: #fe8f01; transform: rotate(0.5turn);}
	header .header ul.nav-b > li ul.nav-s li{height: 40px;}
	header .header ul.nav-b > li ul.nav-s li a{justify-content: unset; padding-left: 24px; font-size: 14px;}
	header .header ul.nav-b > li ul.nav-s::before{display: none;}
	header .header ul.nav-b > li:last-child ul.nav-s::after{display: none;}
	header .header .mb-bt{width: 32px; height: 32px; border: unset; background-color: transparent;}
	header .header .mb-bt i{font-size: 32px; color: #fe8f01;}

	header .header ul.nav-b .m-bottom{margin-top:auto; bottom: 0; padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 24px;}
	header .header ul.nav-b .m-bottom > div{display: flex; gap: 8px; align-items: center;}
	header .header ul.nav-b .m-bottom > div .i-wrap{width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; background-color: #85725a; border-radius: 100%;}
	header .header ul.nav-b .m-bottom > div .i-wrap i{font-size: 20px; color: #fff;}
	header .header ul.nav-b .m-bottom > div .w-wrap h4{font-weight: 500; font-size: 14px; color: #85725a; margin-bottom: 8px;}
	header .header ul.nav-b .m-bottom > div .w-wrap p{font-size: 15px; letter-spacing: -0.38px; font-family: 'Noto Sans KR';}
	header .header ul.nav-b .m-bottom > div .w-wrap p span{font-size: 12px; font-family: 'Noto Sans KR';}
	header .header ul.nav-b .close{position: absolute; top: 0; left: -56px; width: 56px; height: 56px; border: unset; background-color: #fe8f01; z-index: 1;}
	header .header ul.nav-b .close i{color: #fff; font-size: 32px;}


	footer .footer{height: 180px;}
	footer .footer p{display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;}
	footer .footer p:first-child{margin-bottom: 8px;}
	footer .footer p:last-child{font-size: 11px;}
	footer .footer p span{font-size: 11px; font-weight: 300; margin: unset;}
	footer .btn_gotop{bottom: 40px; right: 16px;}
}