@import url('../css/font.css'); /*폰트*/

   html,
    body {
      position: relative;
      height: 100%;
    }

    body {
     background-color: #fff; 
     color: #0a0a0a;
      margin: 0;
      padding: 0;
	  font-family: 'SUIT','Noto Sans KR', sans-serif; word-break: break-all; word-wrap: break-word; word-break: keep-all;
	  font-size: 0.80rem;
	  font-weight: 400;
    }


h1, h2, h3, h4, h5, h6 { font-family: 'SUIT','Noto Sans KR', sans-serif;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p, button {margin: 0; padding: 0; -webkit-text-size-adjust: none;}
fieldset, img, abbr, acronym {border: 0 none;}
legend {position: absolute; height: 0; line-height: 0; font-size: 0; overflow: hidden;}
legend.showlegend {position: static; line-height: 14px; font-size: 12px; overflow: visible;}
address, caption, cite, code, dfn, em, var {font-style: normal; font-weight: normal;}
ol, ul {list-style: none;}
q:before, q:after {content:'';}
table {border-collapse: collapse; border-spacing: 0;}
caption {height: 0; line-height: 0; font-size: 0; overflow: hidden; text-indent: -10000px;}
hr {display: none;}
a { display: block; color: inherit; text-decoration: none; cursor: pointer;}
b{ font-weight: inherit;}
button {border: 0 none; background: none;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}
button, input, select, textarea { color: inherit; vertical-align: middle;}
select { -webkit-border-radius: 0; font-family: 'SUIT';}
select 
{
  width: 100%;
  background-color: #fff;
border:1px solid #cacece;
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
    display: none;
}

input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="email"],input[type="button"],input[type="submit"],textarea {
    border-radius:0 ;-webkit-appearance: none;-moz-appearance: none; border: none; background: transparent; font-family: inherit;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {cursor: pointer; overflow: visible; -webkit-appearance: button;}
input[type="checkbox"] {width: 14px; height: 14px; line-height: 14px; box-sizing: border-box; -webkit-border-radius: 0;}
input[type="radio"] {width: 14px; height: 14px; line-height: 14px; box-sizing: border-box; -webkit-border-radius: 50%;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

input::-webkit-input-placeholder{color:#888;}
input:-moz-input-placeholder{color:#888;}
input::-moz-input-placeholder{color:#888;}
input:-ms-input-placeholder{color:#888;}
img { vertical-align: top; }


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, object {display: block; margin: 0; padding: 0;}
audio[controls], canvas, video {display: block; *zoom: 1;}

/* Disable orange highlight */
label, a, button {-o-tap-highlight-color:rgba(0, 0, 0, 0);-ms-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tap-highlight-color rgba(0, 0, 0, 0);-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}


	/*************** PUBLIC ***************/

/* default */
*{ box-sizing: border-box; outline: none !important; font-style: normal; outline: none;}
img { display: block; width:100%;}


/* PC or M */
.pc {display:block;}
.m {display:none;}

@media all and (max-width:767px){
.pc {display:none;}
.m {display:block;}
}

.flex{ display: flex; flex-wrap: wrap;}
.flex_sb{ display: flex; justify-content: space-between; align-items: top;}

/* FONT */
.noto {font-family: 'Noto Sans CJK KR', 'Noto Sans KR';}
.notoKR {font-family: 'Noto Sans Kr', 'Noto Sans KR';}
.mont {font-family: 'Montserrat', 'Noto Sans KR';}
.roboto {font-family: 'Roboto', 'Noto Sans KR';}
.poppins {font-family: 'Poppins', 'Noto Sans KR';}
.cg {font-family: 'Cormorant Garamond', 'Noto Sans KR';}
.cairo {font-family: 'Cairo', 'Noto Sans KR';}


/* BG용 IMG : 이미지태그를 배경으로 쓸때 쓰임 */
.cover{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; object-fit: cover;}

/* ETC */
.vh100{ height: 100vh;}
.btn{ cursor: pointer;}/* 커스텀커서에 반응하기 위한 */
.wImg{ filter: brightness(0) invert(1);}/* 이미지 하얀색으로 만들기*/
.bImg{ filter: brightness(0);}/* 이미지 검정색으로 만들기 */
.tcX{ touch-action: none; pointer-events: none;}


#wrap {float:left;width:100%;height:100vh;padding:0;margin:0;display:block;}

/******************** MAIN LOGO ********************/
#logo {position: absolute; top:6%; left:3%;z-index:999;}
#logo img {width:65%;}

@media all and (max-width:767px){
#logo {position:absolute;top:25px;left:25px;border:0px solid red;}
#logo img {width:60px;height:56px;}
}

/******************** SUB LOGO ********************/
#slogo {position: absolute; top:6%; left:3%;z-index:701;}
#slogo img {width:65%;}

@media all and (max-width:767px){
#slogo {position:absolute;top:25px;left:25px;border:0px solid red;}
#slogo img {width:60px;height:56px;}
}

/*************** HEADER ***************/
#header {display:flex;justify-content: center;  /*justify-content: space-between; align-items: center;*/ width: 100%; position: fixed; left: 0; top: 0; z-index: 99999;  transition: .5s ease, top .5s ease; border:0px solid blue;}
#header.load, #header.nav-up{ top: 0;}
#header.nav-down{top: 0rem;}

#header #gnb{display:flex;color:#fff;padding: 0 0rem 0 0rem; position: relative; font-weight: 500;/* align-items: center; */}

#header #gnb .allMenuBtn {width:150px;height:50px; border:0; cursor:pointer; z-index:9900; position: absolute; left:45%;margin:1.2rem 0 0 0;}
#header #gnb .allMenuBtn::before,
#header #gnb .allMenuBtn::after {content: ''; display: block; width: 1.5rem; height: 4px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - .3rem)); border-radius: 2px; transition: .5s ease;}
#header #gnb .allMenuBtn::after {transform: translate(-50%, calc(-50% + .3rem)); transform-origin: center center;}
#header.active #gnb .allMenuBtn::before{ transform: translate(-50%, -50%) rotate(45deg);}
#header.active #gnb .allMenuBtn::after{ transform: translate(-50%, -50%) rotate(-45deg);}

#header #gnb .allMenuBtn .allMenuText {border:0; z-index:9800;position: absolute; left:6.4rem;margin:0.9rem 0 0 0;font-size:0.95rem;letter-spacing:0.05em;color:#fff;}
#header #gnb #scroll {float:left;width:100vw;height:9.5vh;background-Color:transparent;display:block;border:0px solid red;z-index:9200;}
#header #gnb #scroll.scroll_motion {opacity:0;transition:all 0.3s; }
#header #gnb #scroll.scroll_motion.on {opacity:1; }

/* HEADER : all-menu */
.allMenuWrap {position:absolute; left:0; top:2; transition: .8s cubic-bezier(0.22, 1, 0.36, 1); color:#888; border-radius: 0rem;  opacity: 0; touch-action: none; pointer-events: none; padding: 0rem 0rem 0rem; z-index: 1;/*overflow: hidden;*/border:0px solid blue;}

#header.active .allMenuWrap{opacity:1; touch-action: auto; pointer-events: auto;}
.allMenuWrap{}
.allMenuWrap .inner {position: relative;left:0;top:0;width:100vw; height:100vh;border:0px solid blue;overflow: hidden; overflow-y: none;background: #0a0a0a; opacity: 0.94;padding:0rem 0rem;display:block; }
.allMenuWrap .allMenu {float:left;margin:18rem 20rem;padding:0;font-family: 'SUIT','Noto Sans KR', sans-serif !important;display:block;}
.allMenuWrap .allMenu ul {float:left;border:0px solid red;margin:2.5rem 2.0rem;padding:0;display:inline-block;}
.allMenuWrap .allMenu .menu {font-size:1.6rem;font-weight: 600;color:#fff !important;margin:0 0 15px 0;letter-spacing:0.050em;}
.allMenuWrap .allMenu .menu li:hover {color:#00BBD3 !important;}
.allMenuWrap .allMenu .dep1 {font-size:1.2rem; line-height:1.8em;font-weight:400;color:#fff !important;margin:.6rem 0 .2rem 0;}
.allMenuWrap .allMenu > li span{line-height:1.8em;color:#fff !important;}
.allMenuWrap .allMenu > li a:hover {color:#00BBD3 !important;text-decoration: underline;}
.allMenuWrap .allMenu .dep1 a:link {color: #fff !important;}
.allMenuWrap .allMenu .dep1 a:hover {color: #00BBD3 !important;}
.allMenuWrap .allMenu .dep2 {font-size:1rem;line-height:1.8em;font-weight:400;margin:0 0 0rem 0;}
.allMenuWrap .allMenu .dep2 a:link {color: #878884 !important;}
.allMenuWrap .allMenu .dep2 a:hover {color: #00BBD3 !important; text-decoration: underline;}

.allMenuWrap .allMenu > li {transition: .3s ease;}
.allMenuWrap .allMenu > li + li { margin-top: 2rem;}


.allMenuWrap .inner .Right_Btn {position:absolute;right:50px;top:40px;font-size:.8rem; border:0px solid red;z-index:999999;}


@media all and (max-width:1820px){
.allMenuWrap .inner {padding:9rem 8%;border:0px solid blue;}
.allMenuWrap .allMenu {margin:2rem 2rem;}
.allMenuWrap .allMenu .menu {font-size:1.3rem;}
.allMenuWrap .allMenu .dep1 {font-size:1.1rem;line-height:1.8em;}
.allMenuWrap .allMenu .dep2 {font-size:0.95rem;line-height:1.8em;}
}
@media all and (max-width:1450px){
.allMenuWrap .inner {padding:8rem 3%;border:0px solid blue;}
.allMenuWrap .allMenu {margin:2rem 2rem;}
.allMenuWrap .allMenu .menu {font-size:1.2rem;}
.allMenuWrap .allMenu .dep1 {font-size:1.0rem;line-height:1.8em;}
.allMenuWrap .allMenu .dep2 {font-size:0.90rem;line-height:1.8em;}
#header #gnb #scroll {height:11vh;}
}
@media all and (max-width:1024px){
.allMenuWrap .inner {padding:8rem 1%;border:0px solid blue;}
.allMenuWrap .allMenu {margin:1rem 0rem;}
.allMenuWrap .allMenu .menu {font-size:1.0rem;}
.allMenuWrap .allMenu .dep1 {font-size:0.90rem;line-height:1.5em;}
.allMenuWrap .allMenu .dep2 {font-size:0.85rem;line-height:1.5em;}
#header #gnb #scroll {height:11vh;}
}
/*@media all and (max-width:767px){
#header {display:none;}
}*/

.dropdown{
  position : relative;
  display : inline-block;
}

.dropbtn{
  border : 0px solid rgb(37, 37, 37);
  border-radius : 0px;
  background-color: transparent;
  font-weight: 600;
  color : rgb(255, 255, 255);
  padding : 10px 10px;
  width : 80px;
  text-align: left;
  cursor : pointer;
  font-size : 0.95rem;
}
.dropdown-content{
  display : none;
  position : absolute;
  z-index : 1; /*다른 요소들보다 앞에 배치*/
  font-weight: 600;
  background-color: transparent;
  min-width : 65px;
  text-align:center;
}

.dropdown-content a{
  display : block;
  text-decoration : none;
  color : rgb(255, 255, 255);
   font-size : 0.95rem;
  padding : 10px 10px;
}

.dropdown-content a:hover{
color : rgb(255, 255, 255);
  background-color : #00BBD3
}

.dropdown:hover .dropdown-content {
  display: block;
}

/************ FOOTER(PC) ************/
.footer {position: relative; background-color:#181818;  z-index: 100;}
.footer .top_box {padding:130px 0 60px; }
.footer .top_box:after {content:''; display:block; clear:both; }
.footer .menu_link {float:right; width:20%; text-align:right; border:0px solid red;}
.footer .menu_link a {display:inline-block; vertical-align:middle; font-weight:600; color:#fff;font-family: 'SUIT','Noto Sans KR', sans-serif;font-size:0.90rem;}
.footer .menu_link .select_custom {display:inline-block; vertical-align:middle; width:120px; margin-left:60px; text-align:left;}

.footer_sitemap {display:inline-block; width:80%; font-size:0; letter-spacing:-4px; }
.footer_sitemap ul {display:inline-block;vertical-align:top; margin-bottom:20px; letter-spacing:0;font-family: 'SUIT','Noto Sans KR', sans-serif;float:left;border:0px solid red;}
.footer_sitemap ul li {font-size:1.2rem; font-weight:600; color:#fff; }
.footer_sitemap ul li:first-of-type {margin-bottom:20px; }
.footer_sitemap ul li + li {margin-bottom:8px; }
.footer_sitemap ul li a {font-family: 'SUIT','Noto Sans KR', sans-serif; font-size:0.95rem; font-weight:400; color:#666666; line-height:1.4em; transition:all 0.2s; }
.footer_sitemap ul li a:hover {color:#00BBD3; }

.footer_sitemap ul li:lang(en) {font-family: 'SUIT','Noto Sans KR', sans-serif;}

.footer .bottom_box {padding-bottom:74px; font-size:0;}
.footer .fnb {padding-bottom:20px; }
.footer .fnb:after {content:''; display:block; clear:both; }
.footer .fnb > a {display:inline-block; padding:5px 0; margin-right:30px; font-weight:400; color:#fff; font-size:0.90rem; font-family: 'SUIT','Noto Sans KR', sans-serif;}
.footer .fnb > a:last-of-type {margin-right:0; }
.footer .fnb .sns_link {float:right; }
.footer .fnb .sns_link a {margin-left:40px; }
.footer .fnb .sns_link a:first-of-type {margin-left:0; }
.footer .address_box {padding-top:40px; border-top:1px solid #333; font-size:0; }
.footer .address_box:after {content:''; display:block; clear:both; }
.footer .footer_logo {display:inline-block; vertical-align:top;  width:8%; }
.footer .footer_logo img {max-width:70%; }
.footer .address {font-family: 'SUIT','Noto Sans KR', sans-serif;display:inline-block; vertical-align:top;  width:calc(85% - 220px);}
.footer .address span {display:inline-block; min-width:330px; margin-bottom:5px; font-size:0.90rem; color:#666666; font-weight:400; line-height:1.4em; }
.footer .address p.copy {margin-top:15px; font-size:12px; color:#666; font-weight:400; }
.footer .family_site {display:inline-block; vertical-align:top;width:220px; height:40px; }
.footer .family_site p {font-family: 'SUIT','Noto Sans KR', sans-serif;}


@media all and (max-width:1820px){
}
@media all and (max-width:1450px){
.footer .top_box {padding:60px 0 25px; }
.footer .menu_link {width:10%; }
.footer_sitemap ul {margin-bottom:20px;}
.footer_sitemap ul li {font-size:1.0rem;}
.footer_sitemap ul li a {font-size:0.90rem;line-height:1.2em;}
.footer .menu_link .select_custom {width:100px; margin-left:0px;}
.footer_sitemap {width:90%;}
.footer .bottom_box {padding-bottom:30px;}
.footer .fnb {padding-bottom:10px; }
.footer .fnb > a {padding:3px 0; margin-right:10px; font-size:0.85rem;}
.footer_sitemap ul li a {font-size:0.90rem; margin-right:10px;}
.footer .address_box {padding-top:30px; }
.footer .address span {font-size:0.85rem;line-height:1.2em;}
}
@media all and (max-width:1024px){
}


/************ FOOTER(모바일) ************/
.footer_mo {position: relative; background-color:#181818;  z-index: 100;}
.footer_mo .top_box {padding:40px 0 40px; }
.footer_mo .top_box:after {content:''; display:block; clear:both; }
.footer_mo .sns_link {padding:0 0px;line-height:1.5em;display:block; }
.footer_mo .sns_link img {width:25px;height:auto;}
.footer_mo .address_box {padding:0 0px;color:#efefef;font-size:0.75rem;line-height:1.5em;display:block;}
.footer_mo .address_box:after {content:''; display:block; clear:both; }
.footer_mo .address_box a {display:inline-block;}
.footer_mo .address_box .link_t {margin:20px 0 10px 0;display:block;}
.footer_mo .address_box .copy {margin:10px 0 0 0;font-size:0.65rem;display:block;}

/* quick_banner */
.floating_banner {position: fixed; bottom:40px; right: 60px; height: 67px;transition: all 0.5s; z-index:200; }
.floating_banner.on {height: 148px; transition: all 0.5s;}
.floating_banner button {display: block; width: 68px; height: 68px; border-radius: 50%; z-index: 10;}
.floating_banner .top_btn {visibility: hidden; opacity: 0; margin-top: 12px; background: #ccc; font-weight: 700; color:#fff; transition: all 0.5s;}
.floating_banner .top_btn.on {visibility: visible; opacity: 1; transition: 0.5s;}
.floating_banner .hidden_btn {overflow:hidden; position: absolute; right: 0; bottom:calc(100% + 10px); display:block; width:150px; height:0; z-index: 5; }
.floating_banner .hidden_btn.on {height:152px; opacity:1; }
.floating_banner .hidden_btn a {position:absolute; left:0; top:100%; display: block; width:150px; height: 68px; padding-left: 24px; color: #fff; border-radius: 68px; line-height: 68px; transition:all 0.7s; opacity:0; }
.floating_banner .hidden_btn.on a.on {opacity:1; transition:all 0.5s; }
.floating_banner .hidden_btn.on a.on:nth-of-type(1) {z-index:1; top:0; }
.floating_banner .hidden_btn.on a.on:nth-of-type(2) {top:calc(100% - 68px); }

@media all and (max-width:1024px){
    .floating_banner {right:20px; bottom:30px; }
}
@media all and (max-width:767px){
    .floating_banner {bottom:15px; height:48px; }
    .floating_banner.on {height:108px; }
    .floating_banner button {width:48px; height:48px; }
    .floating_banner .top_btn {font-size:14px; }
    .floating_banner .hidden_btn {width:120px; }
    .floating_banner .hidden_btn.on {height:108px; }
    .floating_banner .hidden_btn a {width:120px; height:50px; line-height:50px; }
    .floating_banner .hidden_btn.on a.on:nth-of-type(2) {top:calc(100% - 50px); }
}



/************ select custom ************/
.select_custom {position:relative; width:100%; height:40px; border:1px solid #c4c4c4; box-sizing:border-box; background-color:#fff; }
.select_custom p {position:relative; padding:0 18px; font-size:1.2em; font-weight:400; color:#666; line-height:38px; cursor:pointer; }
.select_custom p:after {content:''; position:absolute; right:20px; top:calc(50% - 2.5px); width:14px; height:9px; background:url('../img/common/select_arrow.png') no-repeat center center; transition:all 0.5s; }
.select_custom p.on:after {transform:translateY(-1px) rotate(180deg); }
.select_custom ul {display:none; position:absolute; left:-1px; top:100%; width:calc(100% + 2px); padding:2px 18px; box-sizing:border-box; background-color:#fff; font-size:1.2em;}
.select_custom ul.on {display:block; }
.select_custom ul.bottom {top:auto; bottom:100%; }
.select_custom ul li {padding:10px 0;}
.select_custom ul li a {display:block; font-weight:500; font-size:1.2em; color:#666; box-sizing:border-box; font-family:"Montserrat";}
.select_custom.black {border-color:#000; background-color:#000; }
.select_custom.black ul.bottom {border-top:0 none; border-bottom:1px solid #333; }
.select_custom.black ul {border-top:1px solid #333; background-color:#000;}
.select_custom.black ul li a {color:#fff; }
.select_custom.transparent {border-color:#666666; background-color:transparent; }
.select_custom.transparent ul {border:1px solid #666; background-color:#181818; }
.select_custom.transparent ul li a {color:#fff; }
.select_custom.txt_white p {color:#fff; font-weight:700; font-family: 'SUIT','Noto Sans KR', sans-serif;}
.select_custom.txt_white p:after {background:url('../img/common/select_arrow2.png') no-repeat center center;}