/* common */
html { scroll-behavior:smooth; }
#wrap { position:relative; max-width:100%; margin:0px auto; }
.inbox { max-width:1300px; margin:0px auto; }

.color_red { color:#cb152b; }


/* header */
#header { position:fixed; left:0; top:0; width:100%; background-color:#FFF; z-index:10; }
#header .inbox { position:relative; max-width:95%; }
#header > .inbox { min-height:80px; z-index:1; 
	-webkit-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-moz-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-ms-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); 

}
#header h1 { position:absolute; left:0; top:50%; transform:translateY(-50%); display:inline-block; font-size:0; z-index:1; }
#header .head_btn { position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:0; }
#header .head_btn a { position:relative; padding-left:30px; font-size:1.5rem; color:#a4a4a4; }
#header .head_btn a:before { position:absolute; left:15px; top:5px; display:block; width:1px; height:14px; background-color:#d4d4d4; content:''; }
#header .head_btn a:first-child:before { display:none; }

#gnb { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; }
#gnb ul { font-size:0; }
#gnb li { display:inline-block; padding:0 2.4vw; vertical-align:top; }
#gnb li a { font-size:1.9rem; font-weight:600; color:#242424; }
#gnb li a:hover,
#gnb li.on a { color:#cb152b; }

.sitemap { position:absolute; width:100%; background-color:#fff; border-top:1px solid #ddd; }
.sitemap .inbox { height:350px; font-size:0; }
.sitemap .inbox.s2 { height:750px; font-size:0; }
.sitemap .inbox:before { position:absolute; left:-100%; top:0; display:block; width:100%; height:100%; background-color:#f9f9f9; content:''; }
.sitemap .gnb_title { position:relative; float:left; width:186px; height:100%; padding:60px 0; background-color:#f9f9f9; }
.sitemap .gnb_title h2 { font-size:2.4rem; font-weight:900; color:#cb152b; letter-spacing:-1px; }
.sitemap .gnb_title p { position:absolute; left:0; bottom:60px; width:100%; }
.sitemap:after { position:absolute; left:0; bottom:0; display:block; width:100%; height:3px; content:''; 
	background: #a11e17;
	background: -moz-linear-gradient(left,  #a11e17 0%, #ed242b 100%); 
	background: -webkit-linear-gradient(left,  #a11e17 0%,#ed242b 100%); 
	background: linear-gradient(to right,  #a11e17 0%,#ed242b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a11e17', endColorstr='#ed242b',GradientType=1 ); 
}
.sitemap .depth_list { display:inline-block; width:calc(100% - 200px); padding:40px 0; text-align:center; vertical-align:top; }
.sitemap .depth_list a:hover { text-decoration:underline; }
.sitemap ul.depth2 > li { position:relative; display:inline-block; padding-left:14px; margin:0 4vw; text-align:left; vertical-align:top; }
.sitemap ul.depth2 > li > a { font-size:1.8rem; font-weight:900; }
.sitemap ul.depth2 > li:before { position:absolute; left:0; top:7px; display:block; width:5px; height:5px; background-color:#222; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; content:''; }
.sitemap ul.depth3 { padding-top:18px; padding-left:2px; }
.sitemap ul.depth3 > li { padding-bottom:12px; }
.sitemap ul.depth3 > li > a { font-size:1.6rem; font-weight:500; color:#444; }
.sitemap ul.depth4 { padding-left:10px; padding-top:4px; }
.sitemap ul.depth4 > li { position:relative; padding-left:12px; padding-bottom:1px; }
.sitemap ul.depth4 > li > a { font-family:'Noto Sans Korean'; font-size:1.5rem; font-weight:300; color:#999; line-height:1.2; }
.sitemap ul.depth4 > li:before { position:absolute; left:0; top:1px; display:block; font-size:1.5rem; font-weight:300; color:#999; content:'-'; }

/* .s1.sitemap .inbox { height:420px; }
.s1.sitemap ul.depth2 > li { margin:0 7vw; } */
.s2.sitemap ul.depth2 > li { margin:0 4vw; }

.sitemap .sitemap02 ul.depth2 > li { margin:0 2.8vw; }
.sitemap .sitemap03 ul.depth2 > li { margin:0 2vw; }

#header.main { position:fixed; left:0; top:0; width:100%; background-color:rgba(255,255,255,0); }
#header.main > .inbox  { height:110px; }
#header.main .head_btn a { color:#d5d5d5; }
#header.main .head_btn a:before { background-color:#b7b7b7; }
#header.main #gnb li a { font-weight:500; color:#fff; }

#header.main.over { background-color:#fff; }
#header.main.over #gnb li a { font-weight:600; color:#242424; }
#header.main.over #gnb li a:hover { color:#cb152b; }
#header.main.over .head_btn a { color:#a4a4a4; }
#header.main.over .head_btn a:before { background-color:#d4d4d4; }

#header.fix { position:fixed; left:0; top:0; width:100%; }
#header.fix > .inbox { min-height:64px; 
 	-webkit-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-moz-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-ms-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition: 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); 
}
#header.fix .sitemap {}

/* header [mobile] */
#header_m { display:none; position:fixed; left:0; top:0; width:100%; background-color:#fff; box-shadow:0px 0px 12px rgb(192 198 202 / 60%); z-index:10; }
#header_m h1 { display:inline-block; height:64px; padding:14px 0 14px 18px; font-size:0; vertical-align:middle; box-sizing:border-box; }
#header_m h1 a img { height:100%; }
#header_m .tabmenu { position:absolute; right:0; top:0; height:64px; }
#header_m .top_btn a { float:left; display:block; width:50%; height:42px; line-height:42px; background-color:#181818; font-size:1.7rem; color:#FFF; text-align:center; }
#header_m .tablist { position:absolute; right:-1000%; top:64px; width:100%; height:0; background-color:#fff; opacity:0; padding-bottom:150px; overflow-x:hidden; z-index:9; }
#header_m .list > a { display:block; height:44px; line-height:44px; font-size:1.9rem; font-weight:900; padding:0 22px; background-color:#fff; border-bottom:1px solid #c4c4c4; }
#header_m ul.depth2 { border-bottom:1px solid #c4c4c4; }
#header_m ul.depth2 > li { position:relative; border-top:1px solid #d4d4d4; }
#header_m ul.depth2 > li:before { position:absolute; left:36px; top:17px; display:block; width:4px; height:4px; background-color:#555; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; content:''; }
#header_m ul.depth2 > li > a { display:block; height:38px; line-height:38px; padding:0 48px; font-size:1.8rem; font-weight:600; background-color:#f4f4f4; }
#header_m ul.depth2 > li > a:active, #header_m ul.depth2 > li > a:hover { color:#cb152b; }
#header_m ul.depth2 > li:first-child { border-top:0; }
#header_m ul.depth3 { border-top:1px solid #ccc; padding:10px 0; background-color:#f4f4f4; }
#header_m ul.depth3 > li { position:relative; }
#header_m ul.depth3 > li:before { position:absolute; left:50px; top:13px; display:block; font-size:1.7rem; color:#555; content:'-'; }
#header_m ul.depth3 > li > a { display:block; height:38px; line-height:38px; padding:0 50px 0 62px; font-size:1.7rem; color:#555; }
#header_m .tabmenu.menu-open + .tablist { right:0; height:inherit; opacity:1; }

.nav-button { position:relative; top:0px; display:inline-block; height:100%; padding:25px 22px 22px; cursor:pointer; z-index:2; }
.nav-button .nav-button-line { position:relative; transition:0.2s ease; width:20px; height:2px; background:#444; }
.nav-button .nav-button-line:nth-of-type(2) { margin-top:5px; margin-bottom:5px; }
.nav-button-line-1 { transform: rotate(45deg); top:7px; position:absolute; }
.nav-button-line-2 { display:none; }
.nav-button-line-3 { transform: rotate(135deg); top:5px; position:absolute; }


/* footer */
#footer { padding:60px 0; background-color:#181818; }
#footer .inbox { position:relative; }
#footer [class^="address_"] { display:flex; flex-wrap:wrap; align-items:baseline; }
#footer [class^="address_"] .txt { color:#999; font-family:'Noto Sans Korean'; font-size:1.4rem; line-height:1.6; letter-spacing:0; vertical-align:top; }
#footer [class^="address_"] .logo { width:200px; }
#footer [class^="address_"] .logo img { max-width:100%; }
#footer .address_2 { margin-top:24px; }
#footer [class^="family_select"] { position:absolute; right:0; top:0; width:200px; height:38px; }
#footer [class^="family_select"] div { position:relative; display:block; width:100%; height:100%; padding:11px 16px 0px; font-family:'Noto Sans Korean'; font-size:1.5rem; font-weight:300; color:#777; border:1px solid #555; background:url('../images/common/select_arrow.png') 92% 50% no-repeat; cursor:pointer; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none; }
#footer [class^="family_select"] ul { display:none; position:absolute; left:0; bottom:38px; width:100%; border:1px solid #ccc; }
#footer [class^="family_select"] li { width:100%; }
#footer [class^="family_select"] li a { display:block; width:100%; height:38px; line-height:38px; padding:0px 16px; font-family:'Noto Sans Korean'; font-size:1.5rem; background-color:#fafafa; color:#444; }
#footer [class^="family_select"] li a:hover { background-color:#e8e8e8; }
#footer ul.foot_sns { display:flex; width:100%; margin-top:16px; margin-left:200px; }
#footer ul.foot_sns li { margin-right:9px; }
#footer ul.foot_sns li img { width:26px; }

/* top */
#top { display:none; position:fixed; right:20px; bottom:30px; z-index:8; }
#top a { display:block; width:58px; height:58px; background:url('../images/common/btn_top.png') center #FFF no-repeat; font-size:0; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; 
	-webkit-box-shadow:-4px 4px 18px 0px rgba(0, 0, 0, 0.2); 
	-moz-box-shadow:-4px 4px 18px 0px rgba(0, 0, 0, 0.2); 
	-ms-box-shadow:-4px 4px 18px 0px rgba(0, 0, 0, 0.2);
	-o-box-shadow:-4px 4px 18px 0px rgba(0, 0, 0, 0.2); 
	box-shadow:-4px 4px 18px 0px rgba(0, 0, 0, 0.2);
}

/* button */
[class^="btn_gradi_"] { display:inline-block; width:140px; height:40px; line-height:36px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; border-width:2px; border-style:solid; font-family:'Noto Sans Korean'; font-size:1.7rem; font-weight:500; margin-right:6px; text-align:center; vertical-align:top; transition:ease-out 0.2s; }
.btn_gradi_r { color:#fff !important; font-weight:400; 
	background: #eb3047; 
	background: -moz-linear-gradient(top,  #eb3047 0%, #cb152b 100%); 
	background: -webkit-linear-gradient(top,  #eb3047 0%,#cb152b 100%);
	background: linear-gradient(to bottom,  #eb3047 0%,#cb152b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb3047', endColorstr='#cb152b',GradientType=0 );
}
.btn_gradi_w {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%); 
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); 
	background: linear-gradient(to bottom,  #ffffff 0%,#e6e6e6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );
}
.btn_gradi_bk { color:#fff !important; font-weight:400; border-color:#222;
	background: #222; 
	background: -moz-linear-gradient(top,  #716b6b 0%, #222 100%); 
	background: -webkit-linear-gradient(top,  #716b6b 0%,#222 100%);
	background: linear-gradient(to bottom,  #716b6b 0%,#222 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#716b6b ', endColorstr='#222',GradientType=0 );
}
[class^="btn_gradi_"]:hover { box-shadow:1px 1px 8px rgba(0,0,0,0.4); transition:ease-out 0.2s; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
	-webkit-transition: background-color 9999s ease-out;
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}


/* hover effect */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}