@charset "utf-8";
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, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font:inherit;vertical-align: baseline; box-sizing: border-box;}

a:link { text-decoration: none; color: rgb(0 0 0 / 100%); }
a:hover{ text-decoration: none;   color: #ac0430;}
a:visited { text-decoration: none;}
a:active { text-decoration: none;}

body {line-height: 1; background: #ca5353; color: #000000;}
ol,ul { list-style:none; }
article, aside, canvas, details, figcaption, figure,
 header, hgroup, menu, nav, section, summary { display: block;}
nav ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent;     color: black;}
ins { background-color: #ff9; color: #000; text-decoration: none;}
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help;}
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0;}
/*caption { text-indent:-9999em; font-size:0; line-height:0;}*/
caption {width: 100%; height: 1px; color: transparent; overflow: hidden; position: relative;}
input, select { vertical-align: middle; font-family: inherit;}
button{ border: 0; padding: 0; margin: 0; background: transparent; }
input, textarea, select, button {font-family: inherit;}
table{font-size:inherit;}
pre,code,kbd,samp,tt{font-family:monospace; font-size:108%;line-height:100%;}
.content legend {overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
b {font-weight: bold;}


/* Default Document Style */
html {font-size:62.5%; }
body {
  margin: 0;
  padding: 0;
  border: none;
  color:#333;
  font-size: 1.6rem;
  font-style: normal;
  background: transparent;

  width: 100%;
  line-height: 1.4;
  letter-spacing: 0.5px;
  font-weight: 400;
  font-family: 'Open Sans', '맑은 고딕', 'Malgun Gothic', sans-serif;
  transform-origin:center center;
	-webkit-transform-origin:center center;
	word-break: keep-all;
}


* {box-sizing: border-box; margin:0; padding:0;}
img {vertical-align:top; border:0; margin:0; padding:0; max-width: 100%;}
span, a, strong, i, em {display: inline-block}
table {width: 100%; }
strong {font-weight: 600; color:#000;}

/* skipToContent */
#skipToContent a {position:absolute;top:0px;left:0px;z-index:9999;width:100%;height:1px;margin-top:-1px;display:block;background-color:#3875c1;font-size:14px;font-weight:500;color:#fff;line-height:1;text-align:center;overflow:hidden;}
#skipToContent a:focus,
#skipToContent a:active {margin-top:0px;height:auto;padding:10px 0px;}

/*input*/
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"] {  height: 45px; line-height: 45px; line-height: normal; padding:0 10px; border:1px solid #ddd; font-size: 1.6rem; vertical-align: middle;}
textarea {padding:20px; border:1px solid #ddd; min-height: 200px; width: 100%; font-size: 1.6rem;}
input:read-only { background-color: #eee;}

/*placeholder*/
::placeholder { color: #666; opacity:1;}

/*selectbox*/
select {position: relative; appearance: none; cursor: pointer; width:auto; width: 100%; height:45px; padding:0 40px 0 15px; border:1px solid #ddd; background:#fff url(../img/common/ico-select-s.png) no-repeat; background-position: calc(100% - 10px) 50%; font-size: 1.6rem; vertical-align: middle;}
select::-ms-expand {display:none;}
/*checkbox*/
.check-set input[type="checkbox"] {display:none;}
.check-set input[type="checkbox"] + label {margin-right:20px; cursor: pointer; font-weight: normal; font-size: 1.4rem;}
.check-set input[type="checkbox"]:last-of-type + label {margin-right: 0;}
.check-set input[type="checkbox"] + label:before {content: ''; display:inline-block; width:20px; height:20px; margin:-2px 5px 0 0; vertical-align:middle; background:url(../img/common/check-radio.png)no-repeat 0px 0; cursor:pointer;}
.check-set input[type="checkbox"]:checked + label:before {background-position: 0px -20px;}
.check-set input[type="radio"] {display:none;}
.check-set input[type="radio"] + label {margin-right:20px; cursor: pointer; font-weight: normal; font-size: 1.4rem;}
.check-set input[type="radio"] + label:before {content: ''; display:inline-block; width:20px; height:20px; margin:-2px 5px 0 0; vertical-align:middle; background:url(../img/common/check-radio.png)no-repeat 0px -40px; cursor:pointer;}
.check-set input[type="radio"]:checked + label:before {background-position: 0px -60px;}

/* Header Styles */
.header {
    max-width: 1470px;
    padding: 0 25px;
    height: 90px;
    margin: 0 auto;
    z-index: 3;
    position: relative;
    background: #000000;
}

.header-wrap {
    background-color: #000000;
    position: relative;
    z-index: 1000;
        border-bottom: 1px solid #ac0430;
}



.header h1 {
    float: left;
    width: 6vw;
    margin-right: 4%;
    height: 100%;
    position: relative;
    align-content: center;
    z-index: 9;
    max-width: 130px;
}



/* Global Navigation Bar (GNB) */
.header .gnb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw; /* Ensures it never exceeds screen width */
    margin: 0;
    display: block;
    text-align: center;
    background: #000000;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .header .gnb {
        font-size: 14px; /* Adjust text size for smaller screens */
        padding: 10px; /* Add padding for better spacing */
    }
}

.header .gnb > li {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin-left: -2px;
    background: #000000;
}

.header .gnb > li > a {
    font-size: 1.6rem;
    color: #ffffff; /* Dull white */
    display: block;
    padding: 0px 30px;
    line-height: 90px;
    position: relative;
    font-weight: 600; /* Normal font weight */
    transition: all 0.3s ease; /* Smooth transition */
}

.header .gnb > li > a:after {
  content: '';
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ac0430;
    z-index: 2;
    opacity: 0;
}

.header .gnb > li.on > a {
    color: #ac0430;
}

.header .gnb > li.on > a:after {
    opacity: 1;
}

.header .gnb > li .gnb-dep2 {
    width: 100%;
    z-index: 2;
    position: absolute;
    top: 90px;
    left: 0;
    display: none;
    text-align: center;
    background-color: #ac0430; /* Match dropdown with header */
    overflow: hidden;
    padding: 0 15px;
    border-top: 1px solid #ac0430;
}

.header .gnb > li .gnb-dep2.on {
    display: block;
    background: #000000;
    width: 100%;
        border-top: 1px solid #ac0430;
}

.header .gnb > li .gnb-dep2 .right-img {
    display: block;
    position: absolute;
    bottom: -5%;
    opacity: 0;
    right: 20px;
}

.header .gnb > li.on .gnb-dep2 .right-img {
    animation: navImg .5s .3s forwards;
    -webkit-animation: navImg .5s .3s forwards;
}

.header .gnb > li .gnb-dep2 .right-img span {
    position: absolute;
    top: 60%;
    right: 5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: right;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 100px;
    width: 100px;
    height: 100px;
    text-align: center;
    padding-top: 32px;
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
}

.header .gnb > li .gnb-dep2 .right-img:hover span {
    opacity: 1;
}

@keyframes navImg {
    0% { bottom: -5%; opacity: 0; }
    100% { bottom: 0px; opacity: 1; }
}

@-webkit-keyframes navImg {
    0% { bottom: -5%; opacity: 0; }
    100% { bottom: 0px; opacity: 1; }
}

.header .gnb .gnb-dep2 > dl {
    float: left;
    width: 23%;
    margin-right: 2%;
    text-align: left;
    padding: 20px 3% 50px 0;
    position: relative;
}

.header .gnb .gnb-dep2 > dl:after {
    content: '';
    display: block;
    width: 1px;
    height: 700px;
    position: absolute;
    top: 0;
    right: 0;
    background: #ccc;
}

.header .gnb .gnb-dep2 > dl dt {
    font-size: 1.8rem;
    font-weight: 500;
    color: #000000;
}

.header .gnb .gnb-dep2 > dl dd {
    line-height: 1.5;
    margin-top: 20px;
    color: white;
}

.header .gnb .gnb-dep2 > dl dd a {
    display: inline-block;
    padding: 10px 20px;
    color: white; /* Text color */
    background-color: black; /* Button background */
    border: 2px solid white; /* Add white border */
    border-radius: 30px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    font-family: 'Poppins', sans-serif; /* Modern and clean font */
    font-size: 16px; /* Slightly larger font size */
    font-weight: 500; /* Medium font weight for better emphasis */
    letter-spacing: 1px; /* Spacing between letters */
    line-height: 1.5; /* Better vertical spacing for readability */
    text-align: center; /* Center text */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Pointer cursor for better UX */
}

.header .gnb .gnb-dep2 > dl dd a:hover {
    color: black; /* Text color on hover */
    background-color: white; /* Background color on hover */
    border: 2px solid black; /* Change border to black on hover */
    border-radius: 30px; /* Keep the rounded corners */
}

.header .gnb .gnb-dep2 > dl dd a:hover:after {
    border-color: #fff;
}

.header .gnb .gnb-dep2 > dl dd a:after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-left: 5px;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}

.header .gnb .gnb-dep2 > ul {
    float: left;
    text-align: left;
    padding: 20px 10px;
}

.header .gnb .gnb-dep2 > ul > li {
    display: block;
    vertical-align: top;
    position: relative;
    padding: 5px 10px;
    margin-bottom: 15px;
}

.header .gnb .gnb-dep2 > ul > li > a {
font-size: 1.6rem;
    color: #000;
    display: block;
    line-height: 1.5;
    font-weight: 800;
}

.header .gnb .gnb-dep2 > ul > li > a:hover,
.header .gnb .gnb-dep2 > ul > li.on > a {
    color:#ac0430;
    font-weight: 600;
}

.header .gnb .gnb-dep3 {
    position: absolute;
    top: 0;
    left: 110%;
    display: none;
    border-left: 1px solid #ddd;
    padding-left: 25px;
    width: 300px;
    margin-top: 8px;
    z-index: 9999999;
}

.header .gnb .gnb-dep3.on {
    display: block;
    background: #000000;
}

.header .gnb .gnb-dep3 li {
    margin-bottom: 10px;
}

.header .gnb .gnb-dep3 li:last-of-type {
    margin-bottom: 0;
}

.header .gnb .gnb-dep3 li a {
    font-size: 1.2rem;
    color: #333;
    display: block;
    padding: 0;
    white-space: nowrap;
}

.header .gnb .gnb-dep3 li a:hover {
    text-decoration: underline;
    color: #ac0430;
}

.gnb-bg {
    position: absolute;
    top: 91px;
    left: 0;
    width: 100%;
    height: 350px;
    background: #000000;
    display: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.gnb-bg.on {
    display: block;
    background: #000000;
}

.header .gnb .sub-item {
    display: flex;
    white-space: nowrap;
    align-items: center;
    background: #000000;
}

.header .gnb .sub-item > a {
    font-weight: 600;
    margin-right: 30px;
    background: #000000;
    color: white;
}

.header .gnb .sub-item ul {
    display: flex;
    gap: 20px;
}

.header .gnb .sub-item ul li {
    font-size: 1.4rem;
}

.header .gnb .sub-item a:hover {
    text-decoration: underline;
}

/* Mobile GNB */
.header .mgnb-open {
    display: none;
    background: url(./menu.png) no-repeat 50% 50%;
    width: 30px;
    height: 30px;
    margin-top: 33px;
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 2;
}

.header .mgnb-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: url(./cross.png) no-repeat 50% 50%;
    z-index: 99999;
    width: 30px;
    height: 30px;
    background-size: 20px;
    display: none;
}

.mobile-top {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    display: none;
    background: #000000;
}

.gnb-right {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.gnb-right a {
    margin-left: 5px;
    vertical-align: middle;
    color: white;
}

/* Sitemap */
.site-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 5;
    padding: 80px 0;
    display: none;
}

.site-map .inner {
    position: relative;
}

.site-map .inner:after {
    content: '';
    clear: both;
}

.site-map dl {
    float: left;
    width: 17.6%;
    margin-right: 3%;
}

.site-map dl:last-of-type {
    margin-right: 0;
}

.site-map dl dt {
    font-weight: 600;
    color: #ac0430;
    font-size: 2rem;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
    margin-bottom: 15px;
}

.site-map dl dd {
    padding: 5px 0;
    font-size: 1.6rem;
    margin-bottom: 3px;
}

.site-map dl dd > a {
    color: #000;
    display: block;
}

.site-map dl dd > a:hover {
    color: #ac0430;
}

.site-map dl dd ul {
    margin-top: 8px;
}

.site-map dl dd ul li {
    font-size: 1.4rem;
    margin-top: 3px;
    padding-left: 10px;
    position: relative;
}

.site-map dl dd ul li a {
    color: #666;
    display: block;
}

.site-map dl dd ul li a:hover {
    color: #000;
    text-decoration: underline;
}

.site-map dl dd ul li:before {
    content: '';
    margin-right: 10px;
    width: 3px;
    height: 3px;
    background: #ac0430;
    border-radius: 100px;
    position: absolute;
    top: 9px;
    left: 0;
}

.site-map .close-btn {
    position: absolute;
    top: -60px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #000;
    background: url(/inbody.com/assets/img/ico-close-dark.png) no-repeat 50% 50%;
    background-size: 30px;
}

/* Dropdown */
.drop {
    position: relative;
}

.drop-list {
    display: none;
}

/* Responsive adjustments */
@media all and (max-width:768px){
	html {font-size:52.5%;}

	.btn-box {margin:25px 0;}
	.btn {min-width: 130px; padding:0 49px 0 17px; height: 45px; line-height: 45px;}
	.btn-m {min-width: 100px; padding:0 10px; height: 45px; line-height: 45px;}
	.btn:after {right: 15px;}
	.help-wrap .help-btn {width: 45px; height: 45px; line-height: 45px;}
	.help-wrap .help-txt {bottom: 60px; width: 160px; padding:10px; font-size: 1.5rem; }
	input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select {height: 45px}
	select {padding:0 30px 0 15px; background-size: 12px;}
}

@media all and (max-width:480px){
	.pc-view {display: none !important;}
	.mo-view {display: block !important;}
	.header {padding:0 15px; height: 60px;}
	.header h1 {width: 90px; max-width: 90px; margin-right: 0;}
	.header h1 a img {top:50%; width: 180%; height: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
	.header .gnb > li > a {padding:0 10px; line-height: 60px; font-size: 1.5rem;}
	.gnb-right {display: none;}
	.header .mgnb-open {display: block;}
	.mobile-top {display: block;}

	.header-wrap.on .top-search{top:71px;}
	.top-search {top:71px;}
}

@media all and (min-width: 769px) {
    .pc-view {display: block !important;}
    .mo-view {display: none !important;}
}

/* Additional common styles from original commonheader (3).css for inputs, etc. */
input[type="text"], input[type="tel"], input[type="email"], input[type="password"] {height: 40px}
.pc-view {display: block !important;}
.mo-view {display: none !important;}

/* For responsive design. This part was not explicitly in the header section but affects overall layout. */
@media all and (max-width:1440px){
	.inner {max-width: 100%;}
}
@media all and (max-width:1200px){
	.inner {padding:0 25px;}
	.header .gnb > li > a {padding:0 20px;}
}
@media all and (max-width:1024px){
	.header h1 {width: 100px; max-width: 100px; margin-right: 2%;}
	.header .gnb > li > a {padding:0 10px; font-size: 1.5rem;}
	.header .gnb > li .gnb-dep2 {padding:0 0px;}
	.header .gnb .gnb-dep2 > dl {width: 28%; margin-right: 2%; padding: 20px 2% 50px 0;}
	.header .gnb .gnb-dep2 > ul {padding:20px 0px;}
}
@media all and (max-width:768px){
	.header h1 {width: 100px; max-width: 100px; margin-right: 0;}
	.header {height: 80px; padding:0 20px;}
	.header .gnb > li > a {line-height: 80px;}
	.gnb-bg {top:81px;}
}
@media all and (max-width:480px){
	.header {padding:0 15px; height: 60px;}
	.header h1 {width: 90px; max-width: 90px; margin-right: 0;}
	.header h1 a img {top:50%; width: 100%; height: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
	.header .gnb > li > a {padding:0 10px; line-height: 60px; font-size: 1.5rem;}
	.gnb-right {display: none;}
	.header .mgnb-open {display: block;}
	.mobile-top {display: block;}

	.header-wrap.on .top-search{top:71px;}
	.top-search {top:71px;}
}
/* This part was not explicitly in the header section but affects overall layout. */
@media all and (max-width:768px){
	body {margin-bottom: -100px !important;}
	input[type="text"], input[type="tel"], input[type="email"], input[type="password"] {height: 40px}

	.pc-view {display: none !important;}
	.mo-view {display: block !important;}
}