@charset "utf-8";
@import url('main.css');
@import url('sub.css');
@import url('board.css');

@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');

@font-face {
	font-family: "Pretendard";
	font-weight: 900;
	src: url(../css/font/Pretendard-Black.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 800;
	src: url(../css/font/Pretendard-ExtraBold.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 700;
	src: url(../css/font/Pretendard-Bold.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 600;
	src: url(../css/font/Pretendard-SemiBold.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 500;
	src: url(../css/font/Pretendard-Medium.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 400;
	src: url(../css/font/Pretendard-Regular.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 300;
	src: url(../css/font/Pretendard-Light.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 200;
	src: url(../css/font/Pretendard-ExtraLight.woff) format('woff');
  }
  @font-face {
	font-family: "Pretendard";
	font-weight: 100;
	src: url(../css/font/Pretendard-Thin.woff) format('woff');
  }

  @font-face {
    font-family: 'iceJaram-Rg';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/iceJaram-Rg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

/*common*/
* {margin:0; padding:0;}

/* 세로 이중스크롤 제거 */
#container{
  -ms-overflow-style: none;
}
#container::-webkit-scrollbar{
 display:none;
}

/*html, body {overflow-x:hidden;}*/
html {font-size:62.5%; scroll-behavior: smooth;}
body {background:#fff; overflow-x: hidden;}
body::-webkit-scrollbar-thumb {height:15%;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,.board05 .write .send input {font-family: 'Pretendard';}




/* div {font-size: ;} */

a {display: block; color:#000; text-decoration:none;}
/* p {font-size:1.9rem; color:#1b1b1b; line-height:25px; font-weight:300; word-break:keep-all;} */

ul, ol {list-style:none}

table {border-collapse:collapse; border-spacing:0;}
table caption {width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}


/*container*/
#container {position:relative; width:100%; overflow: hidden;}

/*wrap*/
#wrap {position:relative; width:100%;  min-width:320px;}


/*top*/
#header { width:100%; height:98px; top:0; left:0;  z-index:999; transition: all 0.5s ease; background: #deedff;}


.mobile-menu-btn {display:none;}



/*nav*/
#nav {position:relative; width:100%; height:100%; box-sizing:border-box; z-index: 999;}

.navigation {position:relative;}
.navigation .inwrap {display:flex; align-items: center;  margin:auto; width: 100%; max-width: 1180px; height: 98px; justify-content: space-between;}
.navigation a {z-index: 99;}
.navigation .h-logo{width: 180px;}
.navigation .h-logo img{width: 100%; }
.mainmenu-container .mainmenu{display: flex;}
.mainmenu .menu{font-size: 1.9rem; font-weight: 700; line-height: 1.39; letter-spacing: -0.72px; color: #222; height: 100%; padding: 36px 0 36px 20px; width: 170px;}

/*submenu*/
.submenu-container{background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 100; position: absolute; top: 98px; width: 100%; margin: 0 auto; left: 0; right: 0;}
.submenu-container.open-submenu {display: block;}
.wrapper-submenu.flex-box{width: 100%; max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between;}
.wrapper-submenu.flex-box img{width: 380px;}
.submenu-wrapper.flex-box{display: flex;}
.submenu-wrapper.flex-box ul{width: 170px; padding: 36px 0 36px 20px;}
.submenu-wrapper.flex-box ul li a{font-size: 1.7rem; color: #fff;}
.submenu-wrapper.flex-box ul li:hover a{font-weight: 700;}
.submenu-container .submenu li:not(:last-child){padding-bottom: 24px;}



.mobile-menu {visibility: hidden; opacity: 0;}





/*footer*/
#footer .inwrap{padding: 50px 0 50px;}
#footer {position:relative; width:100%; background: #000; bottom:0;}
#footer .inwrap {display:flex; width:1180px; margin:auto; padding: 50px 0 100px; text-align:center; align-items: flex-start; gap: 40px;}
#footer .f-logo img{width: 180px;}
#footer .f-info{display: flex; justify-content: space-between; align-items: center; padding-left: 75px;}
#footer .f-info .info-wrap{width:50%}
#footer .f-info .policy{display: flex; gap: 40px; margin-bottom: 25px;}
#footer .f-info .policy li a{font-size: 1.6rem; color: #fff;}
#footer .f-info .f-txt{display: flex; flex-wrap: wrap; gap: 50px; row-gap: 5px; }
#footer .f-info .f-txt p{font-size: 1.6rem; color: #8d8d8d;}
#footer .f-info .f-txt p.copyright{color: #fff; opacity: 0.4; margin-top: 15px;}
#footer .f-info .phone-wrap h2{font-size: 4rem; font-weight: 700; text-align: left; color: #ccc; line-height: 55px;}
#footer .phone-wrap-mo{display: none;}

/* quick */
.q-top {display: none;}
.quick{position: fixed; z-index: 100; top: 50%; right: 2%; transform: translateY(-50%);}
.quick li:not(:last-child){margin-bottom: 10px;}
.quick li a{display: flex; align-items: center; justify-content: flex-end; cursor: pointer;}
.quick-mo{display: none;}






@media screen and (max-width: 1499px){
 .navigation .inwrap{width: 94%; margin: 0 auto;}
 .submenu-container{width: 94%; padding: 0 3%;}

 #footer .inwrap{padding: 50px 0 80px;}
 #footer .f-info .phone-wrap h2{font-size: 3.5rem; line-height: 50px;}
}


@media (max-width: 1279px){


#header{height: 80px;}
.navigation .inwrap{height: 80px;}
.mainmenu .menu{line-height: 80px; padding: 0 0 0 20px; width: 150px;}
.submenu-container{top: 80px;}
.wrapper-submenu.flex-box img{width: 280px;}


/*footer*/
#footer .inwrap{width: 94%; margin: 0 auto; padding: 50px 0 60px;}
#footer .f-logo img{width: 140px;}
#footer .f-info{padding-left: 30px;}
#footer .f-info .info-wrap{width: 55%;}
#footer .f-info .phone-wrap h2{font-size: 3rem; line-height: 40px;}


}

@media (max-width: 1024px){

.navigation .inwrap{ justify-content: center;}
.navigation .h-logo{width: 154px;}

.mainmenu-container{display: none;}

#header{position: relative; height: 70px;}
.navigation .inwrap{height: 70px;}

.mobile-menu-btn{display: block;}
.mobile-menu-btn{position: absolute; top: 50%; left: 3%; z-index: 99999999; cursor: pointer; transform: translateY(-50%);}
.mobile-menu-btn .line{display: block; background: #000; margin: 0 auto; width: 25px; height: 3px; border-radius: 0px; transition: 0.25s;}
.mobile-menu-btn .line:not(:last-child){margin-bottom: 5px;}

.mobile-menu::-webkit-scrollbar {width:0;}
.mobile-menu { right: 0; width:100%; height:calc(100vh); background:#000; overflow-y:scroll; padding-top: 20px; z-index: 99999;}
.mobile-menu.active{display: block; visibility: visible; opacity: 1;}
.mobile-menu > .inwrap {display:block; width: 94%; margin: 0 auto;}
.mobile-menu .mobile-area {display:block; width:100%; border:0}
.mobile-menu .mobile-area .area-title {display:flex; justify-content:space-between; cursor:pointer;}
.mobile-menu .mobile-area .area-title p {text-align:left; font-size:3rem; font-weight: 700; line-height:80px; color:#fff;}

.mobile-menu .mobile-area .plus {padding: 30px 0; transition:0.4s ease;}
.mobile-menu .mobile-area .area-title.on .plus {transform:rotate(180deg);}
.mobile-menu .mobile-area .plus span {display:block; width:12px; height:2px; background:#fff;}
.mobile-menu .mobile-area .plus span:first-child {transform:rotate(45deg);}
.mobile-menu .mobile-area .plus span:last-child {transform:rotate(-45deg); margin:-2px 0 0 8px;}
.mobile-menu .mobile-area .title {display:none; padding-top: 0; }
.mobile-menu .mobile-area .title > li {margin-bottom: 5px}
.mobile-menu .mobile-area .title > li:last-child{margin-bottom: 20px}
.mobile-menu .mobile-area .title > li > a {display:flex; font-size:2.5rem; font-weight:500; line-height:30px; color: rgba(255, 255, 255, 0.7); text-align:left; padding-left:15px;}
.mobile-menu .mobile-area .title > li > a:after{display:block; content:""; left:0; bottom:0; width:0%; height:3px; background:#000; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

#footer .inwrap {flex-wrap: wrap; }
#footer .f-logo{width: 100%; text-align: left;}
#footer .f-info{padding-left: 0; align-items: flex-start;}
#footer .f-info .policy{justify-content: space-between;}

.quick li a img{width: 55px;}


}


@media (max-width: 767px){

	#container{overflow: unset;}
	#header,
	.navigation .inwrap{height: 58px;}

	#footer{bottom: -70px;}
	#footer .inwrap{margin: -70px auto 0;}
	#footer .f-info{display: block ;}
	#footer .f-info .info-wrap{width:100%; margin-bottom: 40px;}
	#footer .f-info .policy{justify-content: flex-start;}

}
@media (max-width: 480px){
	#footer .f-info .f-txt{gap: 20px; row-gap: 5px;}
	#footer .f-info .f-txt p{font-size: 1.4rem;}
	#footer .f-info .policy{gap: unset; justify-content: space-between;}
	#footer .f-info .phone-wrap{display: none;}
	#footer .phone-wrap-mo{display: block;}
	#footer .phone-wrap-mo h2{font-size: 2.2rem; line-height: 32px; color: #fff;}
	#footer .f-logo{display: flex; justify-content: space-between; align-items: center;}
	#footer .f-logo img{width: 130px;}
	#footer .f-info .info-wrap{margin-bottom: 0;}
	body.noscroll {overflow: hidden;}
	.quick{display: none;}
	.quick-mo{display: block; position: fixed; bottom: 3%; left: 4%;  z-index: 9999;}
	.quick-mo .q-plus{width: 52px; height: 52px;}
	.quick-mo .q-plus img{width: 100%;}
	.quick-mo .q-menu{display: none;}
	.quick-mo .q-menu li:not(:last-child){margin-bottom: 25px;}
	.quick-mo .q-menu li{display: flex; align-items: center; gap: 15px;}
	.quick-mo .q-menu li div{width: 52px; height: 52px;}
	.quick-mo .q-menu li div img{width: 100%;}
	.quick-mo .q-menu li a p{font-size: 2rem; color: #fff; font-weight: 500;}
	.quick-mo .q-plus.close-menu{display: none ;}
	.quick-mo .q-menu.open-menu{display: block;}
	.mask{display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 999;}

}