@charset "UTF-8";




/* only pc */
@media (min-width: 1181px) {
    :root {
        font-size: 62.5%;
        /* 10px */
    }
}

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,
button {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 100%;
    font-weight: 400;
    font: inherit;
    vertical-align: baseline;
}

body {
    overflow-x: hidden;
    /* contain: paint; */
    width: 100%;
    line-height: 1;
    color: #565656;
    font-size: 1.8rem;
    font-family: 'Pretendard', AppleGothic, 'Malgun Gothic', '맑은 고딕', 'Dotum', sans-serif;
    word-break: keep-all;
}

*::before,
*::after {
    box-sizing: border-box;
}

.hidden {
    overflow: hidden;
}

ol,
ul,
li {
    list-style: none;
}

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #111;
    text-decoration: none;
}

em,
address {
    font-style: normal;
}

strong {
    font-weight: 700;
}

img {
    max-width: 100%;
    vertical-align: top;
}

h2,
h3,
h4,
h5 {
    color: #111;
    font-weight: 700;
}

textarea {
    resize: none;
    font-family: "Pretendard";
}

input {
    font-family: "Pretendard";
}

button {
    cursor: pointer;
}

/* 중앙정렬 */
.inner {
    width: 100%;
    max-width: calc(144rem + 120px);
    margin: 0 auto;
    padding: 0 60px;
}

@media (max-width: 1560px) {
    .inner {
        max-width: calc(144rem + calc(100vw * (120 / 1560)));
        padding: 0 calc(100vw * (60 / 1560));
    }
}

@media (max-width: 1180px) {
    .inner {
        max-width: 100%;
        padding: 0 calc(100vw * (50 / 1180));
    }
}

@media (max-width: 767px) {
    .inner {
        padding: 0 calc(100vw * (48 / 767));
    }
}

/* 말줄임 */
[class*="ellipsis"] {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.ellipsis01 {
    -webkit-line-clamp: 1;
}

.ellipsis02 {
    -webkit-line-clamp: 2;
}

/* button */
a[class^="mbtn_"] {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 1.6rem 2.8rem;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 600;
    /* transition: all .2s; */
}

a[class^="mbtn_"]::after {
    content: "";
    position: absolute;
    right: 2.8rem;
    top: 50%;
    width: .8rem;
    height: 1.2rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
}

a.mbtn_basic {
    border: 1px solid #CDDCE5;
    color: #555;
    background: #fff;
}

a.mbtn_basic::after {
    background-image: url("../images/common/ico_mbtn_arrow_gray.svg");
}

a[class^="lbtn_"],
button[class^="lbtn_"] {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 2.1rem 2rem;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 600;
    background: transparent;
}

a[class^="lbtn_"]::after {
    content: "";
    position: absolute;
    right: 2rem;
    top: 50%;
    width: .8rem;
    height: 1.2rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
}

a.lbtn_basic {
    color: #fff;
}

a.lbtn_basic::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1.5px solid #fff;
}

a.lbtn_basic::after {
    background-image: url("../images/common/ico_lbtn_arrow_white.svg");
}

a.lbtn_white {
    background: #fff;
}

a.lbtn_white span {
    display: inline-block;
    background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.lbtn_white::after {
    background-image: url("../images/common/ico_lbtn_arrow_color.svg");
}

a.lbtn_line,
button.lbtn_line {
    text-align: center;
    color: #555;
}

a.lbtn_line::before,
button.lbtn_line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1.5px solid #CDDCE5;
}

a.lbtn_color,
button.lbtn_color {
    text-align: center;
    color: #fff;
}

a.lbtn_color::before,
button.lbtn_color::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1.5px solid transparent;
    border-image: linear-gradient(316deg, #ff6600 0%, #ffba26 100%);
    border-image-slice: 1;
}

a.lbtn_color span,
button.lbtn_color span {
    background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

header img.linkBlack{
	display:none;
}

header img.linkBlue{
	display:none;
}


header.white img.linkWhite{
	display:none;
}


header.white img.linkBlack{
	display:inline;
}

header.white img.linkWhite{
	display:none;
}

header.black img.linkWhite{
	display:inline;
}
header.black img.linkBlack{
	display:none;
}


header.active img.linkWhite{
	display:inline;
}
header.active img.linkBlack{
	display:none;
}

header li.hv a img.linkBlue{
	display:inline;
}

header li.hv a img.linkBlack{
	display:none;
}
header li.hv a img.linkWhite{
	display:none;
}

/* only pc */
@media (min-width: 1181px) {
    a[class^="mbtn_"]:hover {
        color: #fff;
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    }

    a.mbtn_basic:hover::after {
        background-image: url("../images/common/ico_mbtn_arrow_white.svg");
    }

    a[class^="lbtn_"]:hover,
    a.lbtn_line:hover::before,
    a.lbtn_color:hover::before,
    button.lbtn_line:hover::before,
    button.lbtn_color:hover::before {
        border: none;
        color: #fff;
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    }

    a.lbtn_basic:hover::before {
        display: none;
    }

    a.lbtn_white:hover span,
    a.lbtn_line:hover span,
    a.lbtn_color:hover span,
    button.lbtn_line:hover span,
    button.lbtn_color:hover span {
        position: relative;
        z-index: 1;
        color: #fff;
        background: none;
        background-clip: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
    }

    a.lbtn_white:hover::after {
        background-image: url("../images/common/ico_lbtn_arrow_white.svg");
    }
}

@media (max-width: 1180px) {
    a[class^="mbtn_"] {
        padding: calc(100vw * (16 / 1180)) calc(100vw * (27 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }

    a[class^="mbtn_"]::after {
        right: calc(100vw * (28 / 1180));
        width: calc(100vw * (8 / 1180));
        height: calc(100vw * (12 / 1180));
    }

    a[class^="lbtn_"],
    button[class^="lbtn_"] {
        padding: calc(100vw * (21 / 1180)) calc(100vw * (20 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }

    a.lbtn_basic::before {
        border-width: calc(100vw * (1.5 / 1180));
    }

    a[class^="lbtn_"]::after {
        right: calc(100vw * (20 / 1180));
        width: calc(100vw * (8 / 1180));
        height: calc(100vw * (12 / 1180));
    }

    a.lbtn_line::before,
    button.lbtn_line::before {
        border-width: calc(100vw * (1.5 / 1180));
    }

    a.lbtn_color,
    button.lbtn_color {
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    }

    a.lbtn_color span,
    button.lbtn_color span {
        color: #fff;
        background: none;
        background-clip: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset
    }
}

@media (max-width: 767px) {
	header img.linkWhite{
		display: inline !important;
	}
	
	header img.linkBlack{
		display: none !important;
	}
	
	header img.linkBlue{
		display: none !important;
	}
	
    a[class^="mbtn_"] {
        padding: calc(100vw * (32 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    a[class^="mbtn_"]::after {
        right: calc(100vw * (40 / 767));
        width: calc(100vw * (15 / 767));
        height: calc(100vw * (24 / 767));
    }

    a[class^="lbtn_"],
    button[class^="lbtn_"] {
        padding: calc(100vw * (44 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    a.lbtn_basic::before {
        border-width: calc(100vw * (3 / 767));
    }

    a[class^="lbtn_"]::after {
        right: calc(100vw * (60 / 767));
        width: calc(100vw * (15 / 767));
        height: calc(100vw * (24 / 767));
    }

    a.lbtn_line::before,
    button.lbtn_line::before {
        border-width: calc(100vw * (3 / 767));
    }
}

/* 스크롤바 기본셋팅 */
.scroll::-webkit-scrollbar {
    width: 2px;
    -webkit-overflow-scrolling: touch;
}

.scroll::-webkit-scrollbar-thumb {
    background: #fff;
}

.scroll::-webkit-scrollbar-track {
    background: #404040;
}


/* header: 기본 투명, active가 블랙, 스크롤 화이트 */
#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 99;
    transition: all 0.2s;
}

#header.up {
    top: -10rem;
}

#header .head_box {
    position: relative;
    max-width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 6rem;
}

#header .head_box .logo {
    width: 200px;
    height: 29px;
    margin-right: auto;
}

#header .head_box .logo a {
    display: block;
    width: 100%;
    height: 100%;
}

#header .head_box .logo img {
    width: 100%;
    height: 100%;
}

#header .head_box #gnb {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;

}

#header .head_box #gnb .navbar {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 auto;
}


#header .head_box #gnb .navbar li.hide {
    display: none;
}

#header .head_box #gnb .navbar>li {
    height: 100%;
}

#header .head_box #gnb .navbar>li>a {
    position: relative;
    display: block;
    height: 100%;
    padding: 0 3rem;
    color: #fff;
    line-height: 10rem;
    font-size: 2rem;
    font-weight: 600;
    z-index: 101;
}

#header .head_box #gnb .navbar>li>button {

    display: none;
}


#header .head_box .sub-menu {
    display: none;
    transition: all 0.2s;
    z-index: 10;
}

#header .util_list {
    display: flex;
    align-items: center;
}

#header .util_list li.language {
    display: flex;
    gap: 1.4rem;
    margin-left: 21px;
}

#header .util_list li.language a {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    opacity: .4;
    transition: all .2s;
}

#header .util_list li.language a.on {
    opacity: 1;
}

#header .util_list.mo {
    display: none;
}

#header img.headerPloonet2 {
    display:none;
}

#header img.headerPloonet1 {
    display:block;
}


/* white */
#header.white {
    background: rgba(255, 255, 255, 0.95);
}

#header.white img.headerPloonet2 {
    display:block;
}

#header.white img.headerPloonet1 {
    display:none;
}

#header.white .head_box #gnb .navbar>li>a,
#header.white .head_box #gnb .navbar>li.link>a span {
    color: #111;
}

#header.white .util_list li.language a {
    color: #111
}

#header.active.white .util_list li.language a {
    color: #fff
}


/* black */
#header.black {
    background: #050505;
}

#header.black .head_box #gnb .navbar>li>a,
#header.black .head_box #gnb .navbar>li.link>a span {
    color: #fff;
}

#header.black .util_list li.language a {
    color: #fff
}

/* active  */
#header.active {
    background: #050505;
}

#header::after {
    content: "";
    position: absolute;
    left: 0;
    top: 10rem;
    width: 100%;
    height: 0;
    border-top: 1px solid transparent;
    background: transparent;
    transition: all 0.2s;
}

#header.active::after {

    border-color: rgba(217, 217, 217, 0.20);
    background: rgba(0, 0, 0, .9);
}

.fix_bg {
    position: absolute;
    top: 10rem;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .9);
    transition: all 0.2s;
}


#header.active .head_box #gnb .navbar>li>a,
#header.active .head_box #gnb .navbar>li.link>a span {
    color: #fff;
}

/* only pc */
@media (min-width: 1181px) {
	.util_list > li.gooverLi{margin-left:15px;}
    #header .head_box #gnb .navbar>li>a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        width: 0;
        height: .2rem;
        transform: translateX(-50%);
        transition: width .2s;
        z-index: 10;
    }

    #header .head_box #gnb .navbar>li:hover>a,
    #header .head_box #gnb .navbar>li.link:hover>a span,
    #header .head_box #gnb .navbar>li.on>a {
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
    }

    #header .head_box #gnb .navbar>li.link a span {
        position: relative;
        display: block;
        padding-right: 1.4rem;
        color: #fff;
    }

    #header .head_box #gnb .navbar>li.link a span::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 1.2rem;
        height: 1.2rem;
        transform: translateY(-50%);
        background: url("../images/common/ico_gnb_arrow_white.svg") no-repeat left top / 100% 100%;
    }

    #header.white .head_box #gnb .navbar>li.link a span::after {
        background-image: url("../images/common/ico_gnb_arrow_black.svg");
    }

    #header.active .head_box #gnb .navbar>li.link a span::after,
    #header.black .head_box #gnb .navbar>li.link a span::after {
        background-image: url("../images/common/ico_gnb_arrow_white.svg");
    }

    #header .head_box #gnb .navbar>li.link:hover a span::after {
        background-image: url("../images/common/ico_gnb_arrow_hover.svg");
    }

    /* 서브메뉴포함호버 */
    #header .head_box #gnb .navbar>li:hover>a::after {
        width: calc(100% - 6rem);
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    }

    #header .head_box .sub-menu {
        position: absolute;
        top: 10rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 6rem;
        width: 100%;
        max-width: calc(144rem + 12rem);
        padding: 8rem 6rem;
        gap: 4rem 6rem;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s;
    }

    /* 회사소개 */
    #header .head_box li.gnb-company .sub-menu {
        grid-template-columns: repeat(5, 1fr);
        gap: 6rem;
    }

    /* ir */
    /* #header .head_box li.gnb-ir { display: none; } */
    #header .head_box li.gnb-ir .sub-menu {
        grid-template-columns: repeat(4, 1fr);
        gap: 6rem;
    }

    #header .head_box #gnb .navbar>li.hv .sub-menu {
        display: grid !important;
        opacity: 1;
        pointer-events: all;
    }

    #header .head_box .sub-menu li a {
        display: block;
        line-height: 1;
        color: #fff;
        font-size: 1.6rem;
        transition: color 0.2s;
    }

    #header .head_box .sub-menu li a .group {
        display: flex;
        align-items: center;
        gap: 1.6rem;
    }

    #header .head_box .sub-menu li a .group>.block {
        width: calc(100% - 6rem);
    }

    #header .head_box .sub-menu li a .group .title {
        width: calc(100% - 6rem);
        word-break: break-word;
    }

    #header .head_box .sub-menu li a .group .title {
        color: #999;
        line-height: 1.4;
        font-size: 2rem;
        font-weight: 600;
    }

    #header .head_box .sub-menu li.new a .group .title::after {
        margin-left: 1rem;
        content: 'New';
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
    }

    #header .head_box .sub-menu li.new a:hover .group .title::after {
        display: none;
    }

    #header .head_box .sub-menu li a .group .txt {
        margin-top: .8rem;
        color: #999;
        line-height: 1.4;
        font-size: 1.5rem;
        font-weight: 500;
    }

    #header .head_box .sub-menu li a .group .ico {
        position: relative;
        width: 3rem;
        height: 3rem;
    }

    #header .head_box .sub-menu li a .group .ico img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #header .head_box .sub-menu li a .group .ico img:first-child {
        display: block;
    }

    #header .head_box .sub-menu li a .group .ico img:last-child {
        display: none;
    }

    #header .head_box .sub-menu li a:hover .group .title,
    #header .head_box .sub-menu li.on>a .group .title {
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #header .head_box .sub-menu li a:hover .group .txt,
    #header .head_box .sub-menu li.on>a .group .txt {
        color: #fff;
    }

    #header .head_box .sub-menu li a:hover .group .ico img:first-child,
    #header .head_box .sub-menu li.on>a .group .ico img:first-child {
        display: none;
    }

    #header .head_box .sub-menu li a:hover .group .ico img:last-child,
    #header .head_box .sub-menu li.on>a .group .ico img:last-child {
        display: block;
    }

    #header .btn_mb {
        display: none;
    }

}

@media (max-width: 1180px) {
    #header .util_list.pc {
        display: none;
    }

    #header.up {
        top: calc(100vw * (-125 / 1180));
    }

    #header::before {
        top: calc(100vw * (120 / 1180));
    }

    #header::after {
        display: none;
    }

    #header .head_box {
        max-width: 100%;
        padding: 0 calc(100vw * (50 / 1180));
        height: calc(100vw * (120 / 1180));
    }

    #header .head_box .logo {
        width: calc(100vw * (132 / 1180));
        height: calc(100vw * (40 / 1180));
    }

    #header .head_box #gnb {
        position: fixed;
        right: -100%;
        top: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        height: 100dvh;
        padding-top: calc(100vw * (120 / 1180));
        z-index: -1;
        background: #111;
        transition: all 0.2s;
    }

    #header.mb_active .head_box #gnb {
        right: 0;
    }

    #header .head_box #gnb .navbar {
        display: block;
        overflow-y: auto;
        margin: 0;
        padding-left: 0;
        width: 100%;
    }

    #header .head_box #gnb .navbar>li {
        position: relative;
        margin: 0 calc(100vw * (50 / 1180));
        height: auto;
    }

    #header .head_box #gnb .navbar>li::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #404040;
    }

    #header .head_box #gnb .navbar>li>a {
        position: relative;
        padding: calc(100vw * (46 / 1180)) 0;
        line-height: 1;
        font-size: calc(100vw * (28 / 1180));
        font-weight: 600;
    }

    #header .head_box #gnb .navbar>li>button {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vw * (120 / 1180));
        text-indent: -9999px;
        overflow: hidden;
        background-color: transparent;
        z-index: 102;

    }

    #header .head_box #gnb .navbar>li.sub-has>a::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: calc(100vw * (26 / 1180));
        height: calc(100vw * (15 / 1180));
        transform: translateY(-50%);
        background: url("../images/common/ico_gnb_arrow_down_m.svg") no-repeat left top / 100% 100%;
    }

    #header .head_box #gnb .navbar>li.sub-has.on a::after {
        background-image: url("../images/common/ico_gnb_arrow_up_m.svg")
    }

    #header .head_box #gnb .navbar>li.off a {
        opacity: .4;
    }

    #header .head_box #gnb .navbar>li.on a {
        opacity: 1;
    }

  /*   #header .head_box #gnb .navbar>li:last-child a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #404040;
    } */

    #header .head_box #gnb .navbar>li.link a span {
        position: relative;
        display: inline-block;
        padding-right: calc(100vw * (28 / 1180));
    }

    #header .head_box #gnb .navbar>li.link a span::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: calc(100vw * (19 / 1180));
        height: calc(100vw * (19 / 1180));
        transform: translateY(-50%);
        background: url("../images/common/ico_gnb_arrow_white_m.svg") no-repeat left top / 100% 100%;
    }

    #header.white .head_box #gnb .navbar>li>a,
    #header.white .head_box #gnb .navbar>li.link>a span {
        color: #fff;
    }

    #header .head_box .sub-menu {
        position: static;
        transition: none;
        height: 100%;
    }

    #header .head_box .sub-menu>li {
        position: relative;
        margin: 0;
    }

    #header .head_box .sub-menu>li:first-child a {
        margin: 0;
    }

    #header .head_box .sub-menu>li:last-child {
        padding-bottom: calc(100vw * (80 / 1180));
    }

    #header .head_box .sub-menu li a {
        display: block;
        margin-left: 0;
        padding: calc(100vw * (20 / 1180)) 0;
        color: #B6B6B6;
        font-size: calc(100vw * (22 / 1180));
        font-weight: 500;
    }

    #header .head_box .sub-menu li a .group .ico {
        display: none;
    }

    #header .head_box .sub-menu li a .group .block .txt {
        display: none;
    }

    #header .head_box #gnb .navbar>li .sub-menu li.current-menu-item a span {
        display: inline-block;
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    #header .util_list {
        margin-left: 0;
        padding: calc(100vw * (78 / 1180)) calc(100vw * (50 / 1180));
        width: 100%;
    }

    #header .util_list li img {
        width: calc(100vw * (170 / 1180));
        height: calc(100vw * (44 / 1180));
    }

    #header .util_list li.language {
        gap: calc(100vw * (14 / 1180));
        margin-left: calc(100vw * (36 / 1180));
    }

    #header .util_list li.language a {
        font-size: calc(100vw * (28 / 1180));
    }

    #header.active .util_list li.language a {
        color: #fff;
        opacity: .4;
    }

    #header.active .util_list li.language a.on {
        opacity: 1;
    }

    #header .btn_mb {
        position: relative;
        width: 32px;
        height: 32px;
        background: none;
    }

    #header .btn_mb::before,
    #header .btn_mb::after {
        position: absolute;
        left: 50%;
        content: '';
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.2s;
        transform: translate(-50%, -50%);
    }

    #header .btn_mb::before {
        top: 3px;
    }

    #header .btn_mb::after {
        bottom: 2px;
    }


    #header .btn_mb span {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        text-indent: -999px;
        overflow: hidden;
        background-color: #fff;
        transform: translateY(-50%);
    }

    #header .btn_mb.on span {
        display: none;
    }

    #header .btn_mb.on::before,
    #header .btn_mb.on::after {
        position: absolute;
        top: 50%;
        left: 50%;
    }

    #header .btn_mb.on::before {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    #header .btn_mb.on::after {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #header.white .btn_mb span,
    #header.white .btn_mb::before,
    #header.white .btn_mb::after {
        background: #111;
    }

    #header.white .util_list li.language a{
        color: #fff;
    }
    

    #header.mb_active .btn_mb span,
    #header.mb_active .btn_mb::before,
    #header.mb_active .btn_mb::after {
        background: #fff;
    }

    .fix_bg {
        display: none;
    }

}


@media (max-width: 767px) {
    #header.up {
        top: calc(100vw * (-165 / 767));
    }

    #header::before {
        top: calc(100vw * (160 / 767));
    }

    #header::after {
        display: none;
    }

    #header .head_box {
        max-width: 100%;
        padding: 0 calc(100vw * (48 / 767));
        height: calc(100vw * (160 / 767));
    }

    #header .head_box .logo {
        width: calc(100vw * (194 / 767));
        height: calc(100vw * (48 / 767));
    }

    #header .head_box #gnb {
        padding-top: calc(100vw * (160 / 767));
    }

    #header .head_box #gnb .navbar>li {
        margin: 0 calc(100vw * (48 / 767));
    }

    #header .head_box #gnb .navbar>li>a {
        padding: calc(100vw * (60 / 767)) 0;
        font-size: calc(100vw * (40 / 767));
    }

    #header .head_box #gnb .navbar>li.sub-has>a::after {
        width: calc(100vw * (36 / 767));
        height: calc(100vw * (21 / 767));
    }

    #header .head_box #gnb .navbar>li.link a span {
        padding-right: calc(100vw * (32 / 767));
    }

    #header .head_box #gnb .navbar>li.link a span::after {
        width: calc(100vw * (24 / 767));
        height: calc(100vw * (24 / 767));
    }

    #header .head_box #gnb .navbar>li>button {
        height: calc(100vw*(160 / 767));
    }

    #header .head_box .sub-menu>li:last-child {
        padding-bottom: calc(100vw * (100 / 767));
    }

    #header .head_box .sub-menu li a {
        padding-top: calc(100vw * (20 / 767));
        padding-bottom: calc(100vw * (20 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    #header .util_list {
        padding: calc(100vw * (46 / 767)) calc(100vw * (48 / 767));
    }

    #header .util_list li img {
        width: calc(100vw * (260 / 767));
        height: calc(100vw * (68 / 767));
    }

    #header .util_list li.language {
        gap: calc(100vw * (28 / 767));
        margin-left: calc(100vw * (40 / 767));
    }

    #header .util_list li.language a {
        font-size: calc(100vw * (32 / 767));
    }

    #header .head_box .btn_mb {
        width: calc(100vw * (60 / 767));
        height: calc(100vw * (60 / 767));
    }

    #header .btn_mb::before,
    #header .btn_mb::after {
        height: calc(100vw * (5 / 767));
    }

    #header .btn_mb::before {
        top: calc(100vw * (8 / 767));
    }

    #header .btn_mb::after {
        bottom: calc(100vw * (4 / 767));
    }

    #header .btn_mb span {
        height: calc(100vw * (5 / 767));
    }

}



/* footer */
#footer {
    position: relative;
    color: #999;
    background: #111;
}

#footer .foot_wrap {
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 6rem 6rem 8rem;
}

#footer .logo img {
    width: 200px;
    height: 29px;
}

#footer .sns_down {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 3rem;
}

#footer .sns_down .btnDown {
    display: inline-block;
    padding: 0 3rem;
    font-size: 1.4rem;
    font-weight: ;
    color: #fff;
    line-height: 4rem;
    border: 1px solid #555;
}

#footer .sns_down .btnDown:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

#footer .sns_list {
    display: flex;
    align-items: center;
    justify-content: end;
}

#footer .sns_list li a {
    position: relative;
    display: block;
    width: 4.8rem;
    height: 4.8rem;
    text-indent: -9999em;
}

#footer .sns_list li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    transition: all .2s;
}

#footer .sns_list li:nth-child(1) a::before {
    background-image: url("../images/common/ico_sns_blog.svg");
}

#footer .sns_list li:nth-child(2) a::before {
    background-image: url("../images/common/ico_sns_youtube.svg");
}

#footer .sns_list li:nth-child(3) a::before {
    background-image: url("../images/common/ico_sns_facebook.svg");
}

#footer .sns_list li:nth-child(4) a::before {
    background-image: url("../images/common/ico_sns_instagram.svg");
}

/* only pc */
@media (min-width: 1181px) {
    #footer .sns_list li:nth-child(1) a:hover::before {
        background-image: url("../images/common/ico_sns_blog_hover.svg");
    }

    #footer .sns_list li:nth-child(2) a:hover::before {
        background-image: url("../images/common/ico_sns_youtube_hover.svg");
    }

    #footer .sns_list li:nth-child(3) a:hover::before {
        background-image: url("../images/common/ico_sns_facebook_hover.svg");
    }

    #footer .sns_list li:nth-child(4) a:hover::before {
        background-image: url("../images/common/ico_sns_instagram_hover.svg");
    }
}

#footer address {
    margin-top: 1.5rem;
    margin-bottom: 8rem;
    grid-column: span 2;
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: 500;
}

#footer address span {
    display: block;
    margin-bottom: .4rem;
}

#footer .family_wrap {
    position: relative;
}


#footer .family_wrap button {
    position: relative;
    padding: 1.8rem 1.6rem;
    width: 20rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    border: 1px solid #555;
    background: none;
}

#footer .family_wrap button::before {
    content: "";
    position: absolute;
    right: 1.6rem;
    top: 50%;
    width: 1.4rem;
    height: .8rem;
    transform: translateY(-50%);
    background: url("../images/common/ico_family_arrow.svg") no-repeat left top / 100% 100%;
}

#footer .family_wrap.on button::before {
    background-image: url("../images/common/ico_family_arrow_white.svg");
}

#footer .family_wrap .family_site {
    display: none;
    position: absolute;
    left: 0;
    bottom: 6rem;
    width: 20rem;
    max-height: 16.2rem;
    padding: .4rem .4rem .4rem 0;
    border: 1px solid #555;
    background: #111;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
}

#footer .family_wrap.on .family_site {
    display: block;
}

#footer .family_wrap.on .txt a::before {
    background-image: url("../images/common/ico_family_arrow_white.svg");
}

#footer .family_wrap .family_site ul {
    overflow-y: auto;
    max-height: 15.4rem;
    padding: 2rem 0;
}

#footer .family_wrap .family_site li {
    margin-top: 1rem;
}

#footer .family_wrap .family_site li:first-child {
    margin-top: 0;
}

#footer .family_wrap .family_site li a {
    display: block;
    padding: 0 1.6rem;
    color: #fff;
    opacity: .5;
    line-height: 1.3;
    font-size: 1.6rem;
    font-weight: 500;
}

#footer .terms_list {
    display: flex;
    align-items: end;
    flex-direction: column;
}

#footer .terms_list li {
    margin-top: 1.9rem;
    font-size: 1.6rem;
    font-weight: 500;
}

#footer .terms_list li:first-child {
    margin-top: 0;
}

#footer .terms_list li:first-child a {
    background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* only pc */
@media (min-width: 1181px) {
    #footer .family_wrap .family_site li a:hover {
        opacity: 1;
    }
}

@media (max-width: 1180px) {
    #footer .foot_wrap {
        padding: calc(100vw * (60 / 1180));
        padding-bottom: calc(100vw * (100 / 1180));
    }

    #footer .logo img {
        width: calc(100vw * (109 / 1180));
        height: calc(100vw * (27 / 1180));
    }

    #footer .sns_down {
        gap: calc(100vw * (20 / 1180));
    }

    #footer .sns_down .btnDown {
        flex-shrink: 0;
        padding: 0 calc(100vw * (30 / 1180));
        font-size: calc(100vw * (20 / 1180));
        line-height: calc(100vw * (50 / 1180));
    }

    #footer .sns_list li a {
        width: calc(100vw * (48 / 1180));
        height: calc(100vw * (48 / 1180));
    }

    #footer address {
        margin-top: calc(100vw * (15 / 1180));
        margin-bottom: calc(100vw * (80 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    #footer address span {
        margin-bottom: calc(100vw * (4 / 1180));
    }

    #footer .family_wrap button {
        padding: calc(100vw * (18 / 1180)) calc(100vw * (16 / 1180));
        width: calc(100vw * (200 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    #footer .family_wrap button::before {
        right: calc(100vw * (16 / 1180));
        width: calc(100vw * (14 / 1180));
        height: calc(100vw * (8 / 1180));
    }

    #footer .family_wrap .family_site {
        bottom: calc(100vw * (60/ 1180));
        width: calc(100vw * (200 / 1180));
        max-height: calc(100vw * (162 / 1180));
        padding: calc(100vw * (4 / 1180)) calc(100vw * (4 / 1180)) calc(100vw * (4 / 1180)) 0;
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (4 / 1180)) rgba(0, 0, 0, 0.25);
    }

    #footer .family_wrap .family_site ul {
        overflow-y: auto;
        max-height: calc(100vw * (154 / 1180));
        padding: calc(100vw * (20 / 1180)) 0;
    }

    #footer .family_wrap .family_site li {
        margin-top: calc(100vw * (10 / 1180));
    }

    #footer .family_wrap .family_site li a {
        padding: 0 calc(100vw * (16 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    #footer .terms_list li {
        margin-top: calc(100vw * (19 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }
}

@media (max-width: 767px) {
    #footer .foot_wrap {
        padding-top: calc(100vw * (120 / 767));
        padding-left: calc(100vw * (48 / 767));
        padding-right: calc(100vw * (48 / 767));
        padding-bottom: calc(100vw * (150 / 767));
    }

    #footer .logo {
        order: 2;
    }

    #footer .logo img {
        width: calc(100vw * (218 / 767));
        height: calc(100vw * (54 / 767));
    }

    #footer .sns_list {
        grid-column: span 2;
        order: 4;
        justify-content: start;
    }

    #footer .sns_list li a {
        width: calc(100vw * (96 / 767));
        height: calc(100vw * (96 / 767));
    }

    #footer address {
        order: 3;
        margin-top: calc(100vw * (213 / 767));
        margin-bottom: calc(100vw * (80 / 767));
        font-size: calc(100vw * (28 / 767));
        font-weight: 600;
    }

    #footer address span {
        margin-bottom: calc(100vw * (4 / 767));
    }

    #footer .family_wrap {
        grid-column: span 2;
        order: 2;
        margin-top: calc(100vw * (60 / 767));
    }

    #footer .family_wrap button {
        padding: calc(100vw * (36 / 767)) calc(100vw * (32 / 767));
        width: calc(100vw * (400 / 767));
        font-size: calc(100vw * (32 / 767));
        border-width: calc(100vw * (2 / 767));
    }

    #footer .family_wrap button::before {
        right: calc(100vw * (32 / 767));
        width: calc(100vw * (26 / 767));
        height: calc(100vw * (15 / 767));
    }

    #footer .family_wrap .family_site {
        bottom: auto;
        top: calc(100vw * (120/ 767));
        width: calc(100vw * (400 / 767));
        max-height: calc(100vw * (322 / 767));
        padding: calc(100vw * (4 / 767)) calc(100vw * (4 / 767)) calc(100vw * (4 / 767)) 0;
        box-shadow: 0px calc(100vw * (4 / 767)) calc(100vw * (4 / 767)) rgba(0, 0, 0, 0.25);
    }

    #footer .family_wrap .family_site ul {
        overflow-y: auto;
        max-height: calc(100vw * (314 / 767));
        padding: calc(100vw * (20 / 767)) 0;
    }

    #footer .family_wrap .family_site li {
        margin-top: calc(100vw * (10 / 767));
    }

    #footer .family_wrap .family_site li a {
        padding: 0 calc(100vw * (32 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    #footer .terms_list li {
        margin-top: calc(100vw * (19 / 767));
        font-size: calc(100vw * (16 / 767));
    }

    #footer .terms_list {
        grid-column: span 2;
        order: 5;
        align-items: start;
        margin-top: calc(100vw * (32 / 767));
    }

    #footer .terms_list li {
        margin-top: calc(100vw * (24 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    #footer .sns_down {
        display: block;
        order: 4;
    }

    #footer .sns_down .btnDown {
        margin-bottom: calc(100vw*(20 / 767));
        padding: 0 calc(100vw*(40 / 767));
        font-size: calc(100vw*(32 / 767));
        line-height: calc(100vw*(90 / 767));
    }
}

/* 제품문의하기, top버튼*/

.rit_qucik {
    position: fixed;
    bottom: 11.8rem;
    right: 0;
    text-align: right;
    z-index: 95;
    transition: opacity .2s, bottom .2s;
}
.rit_qucik .company_info {
    position: relative;
    margin-top: 40px;
}

.rit_qucik .company_info button {
    position: relative;
    width: 6.2rem;
    height: 6.2rem;
    text-indent: -999px;
    overflow: hidden;
    background-color: #CCEAFD;
}

.rit_qucik .company_info button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.4rem;
    height: 0.2rem;
    content: '';
    background-color: #ff6600;
    transform: translate(-50%, -50%);
}

.rit_qucik .company_info button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.2rem;
    height: 2.4rem;
    content: '';
    background-color: #ff6600;
    transform: translate(-50%, -50%);
}

.rit_qucik .company_info button.on {
    background-color: #ff6600;
}

.rit_qucik .company_info button.on::before,
.rit_qucik .company_info button.on::after {
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.rit_qucik .company_info ul {
    display: none;
    position: absolute;
    right: 7.5rem;
    bottom: 0;
    padding: 3rem 0;
    width: 16.9rem;
    text-align: center;
    background-color: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
}

.rit_qucik .company_info ul li a {
    display: block;
    padding: 0.8rem 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.rit_qucik .company_info ul li a span {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1rem;
}

.rit_qucik .company_info ul li a span::before {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1.1rem;
    content: '';
    background-color: #ff6600;
    opacity: 0.2;
    transition: 0.2s ease;
}

.rit_qucik .company_info ul li a:hover span::before {
    left: 0;
    width: 100%;
}

.rit_qucik .live_chat {
    position: relative;
}

.rit_qucik .live_chat .btn_open {
    display: block;
    width: 6.2rem;
    height: 6.2rem;
    background: linear-gradient(90deg, #019BF2 4.39%, #08D39D 100%);
    box-shadow: 0.6rem 0.6rem 1rem 0 rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
}

.rit_qucik .live_chat .btn_open span {
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
    width: 6.2rem;
    z-index: 2;
}

.rit_qucik .live_chat .btn_open em {
    opacity: 0;
    display: flex;
    align-items: center;
    padding-left: 4rem;
    width: 28rem;
    height: 100%;
    font-size: 1.7rem;
    color: #fff;
    line-height: 1.2;
    text-align: left;
    transition: 0.2s ease;
}

.rit_qucik .live_chat.on .btn_open {
    width: 28rem;
    border-radius: 3.5rem 0 0 3.5rem;
}

.rit_qucik .live_chat.on .btn_open em {
    opacity: 1;
}

.rit_qucik .live_chat .close {
    display: none;
    position: absolute;
    top: -0.8rem;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    text-indent: -999px;
    overflow: hidden;
    background: #000 url('../images/common/ico_close.svg') no-repeat center center;
    border-radius: 50%;
}

.rit_qucik .live_chat.on .close {
    display: block;
}


.btn_floating {
    position: relative;
}

.btn_floating a {
    position: absolute;
    bottom: 124px;
    right: 75px;
    width: 200px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    transform: rotate(270deg);
    transform-origin: right top;
    background: linear-gradient(318deg, #ff1e00 0%, #ff8c80 100%);
    clip-path: polygon(90% 0, 100% 26%, 100% 100%, 0 100%, 0 0);
    z-index: 100;
    opacity: 1;
    pointer-events: visible;
}

.btn_top {
    position: relative;
    background: #111;
    z-index: 100;
    opacity: 1;
    pointer-events: visible;
}

.btn_top span {
    position: relative;
    display: block;
    width: 7.5rem;
    height: 6.2rem;
    padding-top: 3.2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    text-indent: -999px;
    overflow: hidden;
    background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn_top span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
    background: url("/images/ico_btn_top_arrow.svg") no-repeat center center / 100%;
}

.rit_qucik.off {
    opacity: 0;
    pointer-events: none;
}

.rit_qucik.bottom {
    /*bottom: 7rem;*/
}


@media (max-width: 1180px) {

    .btn_floating a {
        bottom: calc(100vw * (140 / 1180));
        right: calc(100vw * (75 / 1180));
        width: calc(100vw * (220 / 1180));
        height: calc(100vw * (75 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }

    .btn_top span {
        width: calc(100vw * (75 / 1180));
        height: calc(100vw * (75 / 1180));
        padding-top: calc(100vw * (34 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }

    .btn_top span::before {
        width: calc(100vw * (20 / 1180));
        height: calc(100vw * (15 / 1180));
    }

    .rit_qucik {
        bottom: calc(100vw * (10 / 1180));
    }

    .rit_qucik .company_info {
        margin-top: calc(100vw * (40 / 1180));
    }

    .rit_qucik .company_info button {
        width: calc(100vw * (75 / 1180));
        height: calc(100vw * (75 / 1180));
    }

    .rit_qucik .company_info button::before {
        width: calc(100vw * (30 / 1180));
        height: calc(100vw * (5 / 1180));
    }

    .rit_qucik .company_info button::after {
        width: calc(100vw * (5 / 1180));
        height: calc(100vw * (30 / 1180));
    }

    .rit_qucik .company_info ul {
        right: calc(100vw * (90 / 1180));
        padding: calc(100vw * (25 / 1180)) 0;
        width: calc(100vw * (200 / 1180));
    }

    .rit_qucik .company_info ul li a {
        padding: calc(100vw * (10 / 1180)) 0;
        font-size: calc(100vw * (22 / 1180));
    }

    .rit_qucik .company_info ul li a span {
        padding: calc(100vw * (5 / 1180)) calc(100vw * (10 / 1180));
    }

    .rit_qucik .company_info ul li a span::before {
        height: calc(100vw * (15 / 1180));
    }

    .rit_qucik .live_chat .btn_open {
        width: calc(100vw * (75 / 1180));
        height: calc(100vw * (75 / 1180));
    }

    .rit_qucik .live_chat .btn_open span {
        width: calc(100vw * (75 / 1180));
    }

    .rit_qucik .live_chat.on .btn_open {
        width: calc(100vw * (340 / 1180));
    }

    .rit_qucik .live_chat .btn_open em {
        padding-left: calc(100vw * (50 / 1180));
        width: calc(100vw * (280 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .rit_qucik .live_chat .close {
        top: calc(100vw * (-12 / 1180));
        width: calc(100vw * (30 / 1180));
        height: calc(100vw * (30 / 1180));
        background-size: calc(100vw * (10 / 1180));
    }

    /* 메인에 띠배너*/
    .rit_qucik.bottom {
        bottom: calc(100vw*(60 / 1180));
    }



}

@media (max-width: 767px) {

    .btn_floating a {
        font-size: calc(100vw * (40 / 767));
        bottom: calc(100vw*(190 / 767));
        right: calc(100vw*(120 / 767));
        width: calc(100vw*(320 / 767));
        height: calc(100vw*(120 / 767));
        clip-path: polygon(91% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
    }

    .btn_top span {
        width: calc(100vw * (120 / 767));
        height: calc(100vw * (120 / 767));
        padding-top: calc(100vw * (60 / 767));
        font-size: calc(100vw * (30 / 767));
    }

    .btn_top span::before {
        width: calc(100vw * (40 / 767));
        height: calc(100vw * (25 / 767));
    }

    .rit_qucik {
        bottom: calc(100vw * (10 / 767));
    }

    .rit_qucik .company_info {
        margin-top: calc(100vw * (40 / 767));
    }

    .rit_qucik .company_info button {
        width: calc(100vw * (120 / 767));
        height: calc(100vw * (120 / 767));
    }

    .rit_qucik .company_info button::before {
        width: calc(100vw * (40 / 767));
        height: calc(100vw * (5 / 767));
    }

    .rit_qucik .company_info button::after {
        width: calc(100vw * (5 / 767));
        height: calc(100vw * (40 / 767));
    }

    .rit_qucik .company_info ul {
        right: calc(100vw * (130 / 767));
        padding: calc(100vw * (35 / 767)) 0;
        width: calc(100vw * (250 / 767));
    }

    .rit_qucik .company_info ul li a {
        padding: calc(100vw * (15 / 767)) 0;
        font-size: calc(100vw * (30 / 767));
    }

    .rit_qucik .company_info ul li a span {
        padding: calc(100vw * (5 / 767)) calc(100vw * (10 / 767));
    }

    .rit_qucik .company_info ul li a span::before {
        height: calc(100vw * (15 / 767));
    }

    .rit_qucik .live_chat .btn_open {
        width: calc(100vw * (120 / 767));
        height: calc(100vw * (120 / 767));
    }

    .rit_qucik .live_chat .btn_open span {
        width: calc(100vw * (120 / 767));
    }

    .rit_qucik .live_chat.on .btn_open {
        width: calc(100vw * (510 / 767));
    }

    .rit_qucik .live_chat .btn_open em {
        padding-left: calc(100vw * (50 / 767));
        width: calc(100vw * (390 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .rit_qucik .live_chat .close {
        top: calc(100vw * (-12 / 767));
        width: calc(100vw * (45 / 767));
        height: calc(100vw * (45 / 767));
        background-size: calc(100vw * (18 / 767));
    }

    .rit_qucik.bottom {
        bottom: calc(100vw * (260 / 767));
    }


}


/* 개인정보처리방침 */
.terms {
    margin-top: 10rem;
    padding: 12.4rem 0 18rem;
}

.terms .flex {
    align-items: center;
}

.terms .box-green {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 1rem;
}

.terms .box-blue {
    width: 1rem;
    height: 1rem;
}

.terms .hgroup .txt {
    margin-top: 3.2rem;
    color: #999;
    line-height: 1.45;
    font-size: 2.4rem;
    font-weight: 600;
}

.terms .hgroup h2 {
    margin-top: 1.6rem;
    font-size: 6.8rem;
    font-weight: 600;
}

.terms .notice_txt {
    margin-top: 11rem;
    padding: 3rem 12rem;
    background: #F6F6F6;
}

.terms .notice_txt p {
    color: #555;
    line-height: 1.6;
    font-size: 1.9rem;
    font-weight: 500;
}

.terms .notice_txt+.terms_wrap {
    margin-top: 8rem;
}

.terms .terms_wrap {
    display: flex;
    gap: 9rem;
    margin-top: 10rem;
}

.terms .terms_wrap h3 {
    flex-basis: 30%;
    line-height: 1.45;
    font-size: 3.4rem;
    font-weight: 600;
}

.terms .terms_wrap .content {
    flex-basis: calc(100% - 30%);
    margin-top: .8rem;
}

.terms .terms_wrap .content .txt {
    color: #555;
    line-height: 1.6;
    font-size: 1.9rem;
    font-weight: 500;
}

.terms .terms_wrap .content .txt+.num_list li:first-child {
    margin-top: 3.6rem;
}

.terms .terms_wrap .content .num_list {
    margin-left: .8rem;
}

.terms .terms_wrap .content .num_list li {
    display: flex;
    margin-top: 2.4rem;
    color: #111;
    line-height: 1.6;
    font-size: 1.9rem;
    font-weight: 500;
}

.terms .terms_wrap .content .num_list li span {
    margin-right: .4rem;
}

.terms .terms_wrap .content .txt_list {
    margin-left: 3rem;
}

.terms .terms_wrap .content .txt_list li {
    display: flex;
    color: #555;
    line-height: 1.6;
    font-size: 1.6rem;
}

.terms .terms_wrap .content .num_list+.txt_list li:first-child {
    margin-top: 1.2rem;
}

.terms .terms_wrap .content .txt_list.unusual li {
    margin-top: 1.6rem;
}

.terms .terms_wrap .content .txt_list li span {
    margin-right: .4rem;
}

.terms .terms_wrap .content .dash_list {
    margin-left: 5.6rem;
}

.terms .terms_wrap .content .dash_list li {
    position: relative;
    padding-left: 1.2rem;
    color: #555;
    line-height: 1.6;
    font-size: 1.6rem;
}

.terms .terms_wrap .content .dash_list li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 1560px) {
    .terms {
        margin-top: calc(100vw * (100 / 1560));
        padding: calc(100vw * (124 / 1560)) 0 calc(100vw * (180 / 1560));
    }

    .terms .box-green {
        width: calc(100vw * (12 / 1560));
        height: calc(100vw * (12 / 1560));
        margin-right: calc(100vw * (10 / 1560));
    }

    .terms .box-blue {
        width: calc(100vw * (10 / 1560));
        height: calc(100vw * (10 / 1560));
    }

    .terms .hgroup .txt {
        margin-top: calc(100vw * (32 / 1560));
        font-size: calc(100vw * (24 / 1560));
    }

    .terms .hgroup h2 {
        margin-top: calc(100vw * (16 / 1560));
        font-size: calc(100vw * (68 / 1560));
    }

    .terms .notice_txt {
        margin-top: calc(100vw * (110 / 1560));
        padding: calc(100vw * (30 / 1560)) calc(100vw * (120 / 1560));
    }

    .terms .notice_txt p {
        font-size: calc(100vw * (19 / 1560));
    }

    .terms .notice_txt+.terms_wrap {
        margin-top: calc(100vw * (80 / 1560));
    }

    .terms .terms_wrap {
        gap: calc(100vw * (90 / 1560));
        margin-top: calc(100vw * (100 / 1560));
    }

    .terms .terms_wrap h3 {
        font-size: calc(100vw * (34 / 1560));
    }

    .terms .terms_wrap .content {
        margin-top: calc(100vw * (8 / 1560));
    }

    .terms .terms_wrap .content .txt {
        font-size: calc(100vw * (19 / 1560));
    }

    .terms .terms_wrap .content .txt+.num_list li:first-child {
        margin-top: calc(100vw * (36 / 1560));
    }

    .terms .terms_wrap .content .num_list {
        margin-left: calc(100vw * (8 / 1560));
    }

    .terms .terms_wrap .content .num_list li {
        margin-top: calc(100vw * (24 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .terms .terms_wrap .content .num_list li span {
        margin-right: calc(100vw * (4 / 1560));
    }

    .terms .terms_wrap .content .txt_list {
        margin-left: calc(100vw * (30 / 1560));
    }

    .terms .terms_wrap .content .txt_list li {
        font-size: calc(100vw * (16 / 1560));
    }

    .terms .terms_wrap .content .num_list+.txt_list li:first-child {
        margin-top: calc(100vw * (12 / 1560));
    }

    .terms .terms_wrap .content .txt_list.unusual li {
        margin-top: calc(100vw * (16 / 1560));
    }

    .terms .terms_wrap .content .txt_list li span {
        margin-right: calc(100vw * (4 / 1560));
    }

    .terms .terms_wrap .content .dash_list {
        margin-left: calc(100vw * (56 / 1560));
    }

    .terms .terms_wrap .content .dash_list li {
        padding-left: calc(100vw * (12 / 1560));
        font-size: calc(100vw * (16 / 1560));
    }
}

@media (max-width: 1180px) {
    .terms {
        margin-top: calc(100vw * (120 / 1180));
        padding: calc(100vw * (124 / 1180)) 0 calc(100vw * (180 / 1180));
    }

    .terms .box-green {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
        margin-right: calc(100vw * (10 / 1180));
    }

    .terms .box-blue {
        width: calc(100vw * (10 / 1180));
        height: calc(100vw * (10 / 1180));
    }

    .terms .hgroup .txt {
        margin-top: calc(100vw * (32 / 1180));
        font-size: calc(100vw * (24 / 1180));
    }

    .terms .hgroup h2 {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (68 / 1180));
    }

    .terms .notice_txt {
        margin-top: calc(100vw * (80 / 1180));
        padding: calc(100vw * (30 / 1180)) calc(100vw * (90 / 1180));
    }

    .terms .notice_txt p {
        font-size: calc(100vw * (20 / 1180));
    }

    .terms .notice_txt+.terms_wrap {
        margin-top: calc(100vw * (80 / 1180));
    }

    .terms .terms_wrap {
        display: block;
        margin-top: calc(100vw * (100 / 1180));
    }

    .terms .terms_wrap h3 {
        font-size: calc(100vw * (34 / 1180));
    }

    .terms .terms_wrap h3 br {
        display: none;
    }

    .terms .terms_wrap .content {
        margin-top: calc(100vw * (45 / 1180));
    }

    .terms .terms_wrap .content .txt {
        font-size: calc(100vw * (20 / 1180));
    }

    .terms .terms_wrap .content .txt+.num_list li:first-child {
        margin-top: calc(100vw * (36 / 1180));
    }

    .terms .terms_wrap .content .num_list {
        margin-left: calc(100vw * (8 / 1180));
    }

    .terms .terms_wrap .content .num_list li {
        margin-top: calc(100vw * (24 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .terms .terms_wrap .content .num_list li span {
        margin-right: calc(100vw * (4 / 1180));
    }

    .terms .terms_wrap .content .txt_list {
        margin-left: calc(100vw * (30 / 1180));
    }

    .terms .terms_wrap .content .txt_list li {
        font-size: calc(100vw * (17 / 1180));
    }

    .terms .terms_wrap .content .num_list+.txt_list li:first-child {
        margin-top: calc(100vw * (12 / 1180));
    }

    .terms .terms_wrap .content .txt_list.unusual li {
        margin-top: calc(100vw * (16 / 1180));
    }

    .terms .terms_wrap .content .txt_list li span {
        margin-right: calc(100vw * (4 / 1180));
    }

    .terms .terms_wrap .content .dash_list {
        margin-left: calc(100vw * (56 / 1180));
    }

    .terms .terms_wrap .content .dash_list li {
        padding-left: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (17 / 1180));
    }
}

@media (max-width: 767px) {
    .terms {
        margin-top: calc(100vw * (160 / 767));
        padding: calc(100vw * (136 / 767)) 0 calc(100vw * (180 / 767));
    }

    .terms .box-green {
        width: calc(100vw * (24 / 767));
        height: calc(100vw * (24 / 767));
        margin-right: calc(100vw * (20 / 767));
    }

    .terms .box-blue {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }

    .terms .hgroup .txt {
        margin-top: calc(100vw * (36 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .terms .hgroup h2 {
        margin-top: calc(100vw * (18 / 767));
        font-size: calc(100vw * (80 / 767));
    }

    .terms .notice_txt {
        margin-top: calc(100vw * (100 / 767));
        padding: calc(100vw * (48 / 767));
    }

    .terms .notice_txt p {
        font-size: calc(100vw * (32 / 767));
    }

    .terms .notice_txt+.terms_wrap {
        margin-top: calc(100vw * (100 / 767));
    }

    .terms .terms_wrap {
        margin-top: calc(100vw * (100 / 767));
    }

    .terms .terms_wrap h3 {
        font-size: calc(100vw * (52 / 767));
    }

    .terms .terms_wrap .content {
        margin-top: calc(100vw * (40 / 767));
    }

    .terms .terms_wrap .content .txt {
        font-size: calc(100vw * (32 / 767));
    }

    .terms .terms_wrap .content .txt+.num_list li:first-child {
        margin-top: calc(100vw * (32 / 767));
    }

    .terms .terms_wrap .content .num_list {
        margin-left: calc(100vw * (12 / 767));
    }

    .terms .terms_wrap .content .num_list li {
        margin-top: calc(100vw * (28 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .terms .terms_wrap .content .num_list li span {
        margin-right: calc(100vw * (4 / 767));
    }

    .terms .terms_wrap .content .txt_list {
        margin-left: calc(100vw * (50 / 767));
    }

    .terms .terms_wrap .content .txt_list li {
        margin-top: calc(100vw * (8 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .terms .terms_wrap .content .num_list+.txt_list li:first-child {
        margin-top: calc(100vw * (18 / 767));
    }

    .terms .terms_wrap .content .txt_list.unusual li {
        margin-top: calc(100vw * (28 / 767));
    }

    .terms .terms_wrap .content .txt_list li span {
        margin-right: calc(100vw * (8 / 767));
    }

    .terms .terms_wrap .content .dash_list {
        margin-left: calc(100vw * (90 / 767));
    }

    .terms .terms_wrap .content .dash_list li {
        margin-top: calc(100vw * (6 / 767));
        padding-left: calc(100vw * (18 / 767));
        font-size: calc(100vw * (28 / 767));
    }
}


/* 404 */
.error {
    overflow: hidden;
    position: relative;
    min-height: 88rem;
    margin-top: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
}

.error .box-green {
    width: 1.5rem;
    height: 1.5rem;
}

.error .box-blue {
    width: 1.2rem;
    height: 1.2rem;
}

.error .inner {
    max-width: 54rem;
    padding: 0;
}

.error .title {
    text-align: center;
}

.error .title h2 {
    margin-top: 2.2rem;
    color: #111;
    font-size: 6rem;
    font-weight: 600;
}

.error .title .flex {
    align-items: center;
    justify-content: center;
}

.error .title span {
    margin: 0 .6rem;
}

.error .txt {
    margin-top: 3.2rem;
    color: #555;
    line-height: 1.6;
    font-size: 1.9rem;
    font-weight: 500;
}

.error .btn_area {
    display: flex;
    margin: 6.8rem 0;
    gap: 2rem;
}

.error .btn_area a:first-child {
    justify-content: center;
    background: transparent;
    color: #555;
    font-weight: 600;
}

.error::before,
.error::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    z-index: -1;

}

.error::before {
    left: -30%;
    top: -10%;
    width: 188.3rem;
    height: 188.3rem;
    background-image: url("../images/common/bg_circle_green.png");
    transform: translate(0%, 0%);
    animation: bgCircleLeft 15s linear infinite;
}

.error::after {
    left: 0;
    top: 0%;
    width: 188.3rem;
    height: 188.3rem;
    background-image: url("../images/common/bg_circle_blue.png");
    transform: translate(0%, 0%);
    animation: bgCircleRight 15s linear infinite;
}

@media (max-width: 1560px) {
    .error {
        margin-top: calc(100vw * (100 / 1560));
    }

    .error .box-green {
        width: calc(100vw * (15 / 1560));
        height: calc(100vw * (15 / 1560));
    }

    .error .box-blue {
        width: calc(100vw * (12 / 1560));
        height: calc(100vw * (12 / 1560));
    }

    .error .inner {
        max-width: calc(100vw * (540 / 1560));
    }

    .error .title h2 {
        margin-top: calc(100vw * (22 / 1560));
        font-size: calc(100vw * (60 / 1560));
    }

    .error .title span {
        margin: 0 calc(100vw * (6 / 1560));
    }

    .error .txt {
        margin-top: calc(100vw * (32 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .error .btn_area {
        margin: calc(100vw * (68 / 1560)) 0;
        gap: calc(100vw * (20 / 1560));
    }

    .error .btn_area a {
        font-size: calc(100vw * (18 / 1560));
    }

    .error::before {
        width: calc(100vw * (1883 / 1560));
        height: calc(100vw * (1883 / 1560));
    }

    .error::after {
        width: calc(100vw * (1883 / 1560));
        height: calc(100vw * (1883 / 1560));
    }
}

@media (max-width: 1180px) {
    .error {
        min-height: calc(100vw * (1160 / 1180));
        margin-top: calc(100vw * (120 / 1180));
    }

    .error .box-green {
        width: calc(100vw * (15 / 1180));
        height: calc(100vw * (15 / 1180));
    }

    .error .box-blue {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }

    .error .inner {
        max-width: calc(100vw * (540 / 1180));
    }

    .error .title h2 {
        margin-top: calc(100vw * (22 / 1180));
        font-size: calc(100vw * (60 / 1180));
    }

    .error .title span {
        margin: 0 calc(100vw * (6 / 1180));
    }

    .error .txt {
        margin-top: calc(100vw * (32 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .error .btn_area {
        margin: calc(100vw * (68 / 1180)) 0 calc(100vw * (140 / 1180));
        gap: calc(100vw * (20 / 1180));
    }

    .error .btn_area a {
        font-size: calc(100vw * (18 / 1180));
    }

    .error::before {
        left: -70%;
        top: 10%;
        width: calc(100vw * (1883 / 1180));
        height: calc(100vw * (1883 / 1180));
    }

    .error::after {
        left: -10%;
        top: 20%;
        width: calc(100vw * (1883 / 1180));
        height: calc(100vw * (1883 / 1180));
    }
}

@media (max-width: 767px) {
    .error {
        min-height: calc(100vw * (1160 / 767));
        margin-top: calc(100vw * (160 / 767));
    }

    .error .title {
        margin-top: calc(100vw * (40 / 767));
    }

    .error .box-green {
        width: calc(100vw * (24 / 767));
        height: calc(100vw * (24 / 767));
    }

    .error .box-blue {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }

    .error .inner {
        max-width: calc(100vw * (654 / 767));
    }

    .error .title h2 {
        margin-top: calc(100vw * (38 / 767));
        font-size: calc(100vw * (76 / 767));
    }

    .error .title span {
        margin: 0 calc(100vw * (10 / 767));
    }

    .error .txt {
        margin-top: calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .error .btn_area {
        flex-direction: column;
        align-items: center;
        margin: calc(100vw * (80 / 767)) 0 calc(100vw * (68 / 767));
        gap: calc(100vw * (28 / 767));
    }

    .error .btn_area a {
        width: calc(100vw * (520 / 767));
        height: calc(100vw * (120 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .error::before {
        display: none;
    }

    .error::after {
        display: none;
    }
}

/* 레이어 팝업 */
.dim {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.layer_alert {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 64rem;
    transform: translate(-50%, -50%);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all .3s;
}

.layer_alert.on {
    opacity: 1;
    pointer-events: auto;
}

.layer_alert .layer_inner {
    padding: 7.8rem 8rem;
    text-align: center;
    word-break: break-all;
    background: #fff;
}

.layer_alert .title {
    color: #000;
    font-size: 3rem;
}

.layer_alert .txt {
    margin-top: 1.6rem;
    color: #000;
    line-height: 1.6;
    font-size: 1.6rem;
    font-weight: 500;
}

.layer_alert .btn_area {
    display: flex;
    gap: 2rem;
    margin-top: 4rem;
    align-items: center;
    justify-content: center;
}

.layer_alert .btn_area button {
    width: 22rem;
}

.layer_alert .layer_close {
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 2.6rem;
    height: 2.6rem;
    text-indent: -9999em;
}

.layer_alert .layer_close::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../images/common/ico_layer_close.svg") no-repeat left top / 100% 100%;
}

@media (max-width: 1180px) {
    .layer_alert {
        width: calc(100vw * (640 / 1180));
    }

    .layer_alert .layer_inner {
        padding: calc(100vw * (78 / 1180)) calc(100vw * (80 / 1180));
    }

    .layer_alert .title {
        font-size: calc(100vw * (30 / 1180));
    }

    .layer_alert .txt {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (17 / 1180));
    }

    .layer_alert .btn_area {
        gap: calc(100vw * (20 / 1180));
        margin-top: calc(100vw * (40 / 1180));
    }

    .layer_alert .btn_area button {
        width: calc(100vw * (220 / 1180));
    }

    .layer_alert .layer_close {
        right: calc(100vw * (20 / 1180));
        top: calc(100vw * (20 / 1180));
        width: calc(100vw * (26 / 1180));
        height: calc(100vw * (26 / 1180));
    }
}

@media (max-width: 767px) {
    .layer_alert {
        width: calc(100% - calc(100vw * (100 / 767)));
    }

    .layer_alert .layer_inner {
        padding: calc(100vw * (100 / 767)) calc(100vw * (54 / 767));
    }

    .layer_alert .title {
        font-size: calc(100vw * (44 / 767));
    }

    .layer_alert .txt {
        margin-top: calc(100vw * (20 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .layer_alert .btn_area {
        flex-direction: column;
        gap: calc(100vw * (28 / 767));
        margin-top: calc(100vw * (60 / 767));
    }

    .layer_alert .btn_area button {
        width: 100%;
    }

    .layer_alert .layer_close {
        right: calc(100vw * (30 / 767));
        top: calc(100vw * (30 / 767));
        width: calc(100vw * (40 / 767));
        height: calc(100vw * (40 / 767));
    }
}

/* banner */
.banner {
    position: relative;
    height: 40rem;
    padding: 9.4rem 0 !important;
    text-align: center;
    background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
}

.banner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 1.8rem;
    width: 94.3rem;
    height: 30.9rem;
    background: url("../images/product/contact-top-deco.png") no-repeat left top / 100% 100%;
    z-index: 1;
}

.banner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 87.9rem;
    height: 32.8rem;
    background: url("../images/product/contact-bot-deco.png") no-repeat left top / 100% 100%;
    z-index: 1;
}

.banner .inner {
    position: relative;
    z-index: 2;
}

.banner h2 {
    margin-bottom: 0;
    color: #fff;
    text-shadow: 0px 0px 15px rgba(0, 114, 121, 0.40);
}

.banner .title {
    display: none;
}

.banner .btn_area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 4rem;
}

.banner .btn_area a {
    flex-basis: 26rem;
}

/* 커서 스타일 */
.banner .typing02::after {
    content: "";
    display: inline-block;
    width: .2rem;
    height: 3.4rem;
    margin-left: .3rem;
    transform: translateY(.3rem);
    background: #fff;
    animation: blink 1.5s infinite;
}

.banner .typed-cursor {
    display: none;
}

@media (max-width: 1560px) {
    .banner::before {
        width: calc(100vw * (943 / 1560));
        height: calc(100vw * (309 / 1560));
        right: calc(100vw * (18 / 1560));
    }

    .banner::after {
        width: calc(100vw * (879 / 1560));
        height: calc(100vw * (328 / 1560));
    }
}

@media (max-width: 1180px) {
    .banner {
        height: calc(100vw * (400 / 1180));
        padding: calc(100vw * (94 / 1180)) 0 !important;
    }

    .banner::before {
        width: calc(100vw * (773 / 1180));
        height: calc(100vw * (309 / 1180));
        right: calc(100vw * (-240 / 1180));
    }

    .banner::after {
        width: calc(100vw * (773 / 1180));
        height: calc(100vw * (309 / 1180));
        left: calc(100vw * (-240 / 1180));
    }

    .banner h2 {
        text-shadow: 0px 0px calc(100vw * (15 / 1180)) rgba(0, 114, 121, 0.40);
    }

    .banner .btn_area {
        gap: calc(100vw * (20 / 1180));
        margin-top: calc(100vw * (40 / 1180));
    }

    .banner .btn_area a {
        flex-basis: calc(100vw * (260 / 1180));
    }

    /* 커서 스타일 */
    .banner .typing02::after {
        width: calc(100vw * (2 / 1180));
        height: calc(100vw * (34 / 1180));
        margin-left: calc(100vw * (5 / 1180));
        transform: translateY(calc(100vw * (5 / 1180)));
    }
}

@media (max-width: 767px) {
    .banner {
        height: calc(100vw * (944 / 767));
        padding: calc(100vw * (180 / 767)) 0 calc(100vw * (198 / 767)) !important;
    }

    .banner::before {
        width: calc(100vw * (1043 / 767));
        height: calc(100vw * (426 / 767));
        right: calc(100vw * (-384 / 767));
    }

    .banner::after {
        width: calc(100vw * (1043 / 767));
        height: calc(100vw * (426 / 767));
        left: calc(100vw * (-384 / 767));
    }

    .banner h2 {
        text-shadow: 0px 0px calc(100vw * (15 / 767)) rgba(0, 114, 121, 0.40);
    }

    .banner .btn_area {
        flex-direction: column;
        gap: calc(100vw * (24 / 767));
        margin-top: calc(100vw * (68 / 767));
        padding: 0 calc(100vw * (67 / 767));
    }

    .banner .btn_area a {
        flex-basis: 100%;
    }

    .banner .typing02 {
        padding: 0 calc(100vw * (20 / 767));
    }

    /* 커서 스타일 */
    .banner .typing02::after {
        width: calc(100vw * (3 / 767));
        height: calc(100vw * (48 / 767));
        margin-left: calc(100vw * (8 / 767));
        transform: translateY(calc(100vw * (3 / 767)));
    }
}

/* 다국어 */
/* :lang(en) .txt { word-break: break-all; } */

.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer {
    display: none;
}

/* 사이트 오픈시 삭제 */
@media (min-width: 1400px) {

    :lang(en) #header .head_box .sub-menu {
        grid-auto-rows: 8rem;
    }
}

@media (max-width: 1399px) and (min-width: 1181px) {

    :lang(en) #header .head_box .sub-menu {
        grid-auto-rows: 12rem;
    }

    :lang(en) #header .head_box li.gnb-company .sub-menu {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1181px) {
    :lang(en) #header .head_box #gnb .navbar>li>a {
        white-space: nowrap;
    }

    :lang(en) .product-success .btn {
        height: auto;
        min-height: 6rem;
    }
}

@media (max-width: 1180px) {
    :lang(en) .product-success .txt-box .btn {
        width: auto;
        display: inline-block;
    }
}

/* 띠배너 */
.notice {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.5rem;
    background: linear-gradient(318deg, #ff6600 0%, #ffba26 100%);
    z-index: 10;
}

.notice.on {
    display: block;
}

.notice .inner {
    position: relative;
    max-width: 100%;
    height: 100%;
    padding: .9rem 6rem;
}

.notice .left {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1.6rem;
}

.notice .left p {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}

.notice .left a {
    display: inline-block;
    padding: .6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: .8rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
}

.notice .right {
    position: absolute;
    right: 6rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2rem;
}

.notice .right label {
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: -0.65px;
}

.notice .right .close {
    position: relative;
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    text-indent: -9999em;
}

.notice .right .close::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background: url("../images/main/btn_today_close.svg") no-repeat left top / 100% 100%;
}

.notice .right .checkbox {
    display: inline-block;
    vertical-align: middle;
}

.notice .right .checkbox label {
    cursor: pointer;
}

.notice .right .checkbox input {
    display: none;
}

.notice .right .checkbox span {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    word-break: keep-all;
    padding-left: 2.6rem;
}

.notice .right .checkbox span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.9rem;
    background: url("../images/main/ico_checkbox_today.svg") no-repeat left top / 100% 100%;
}

.notice .right .checkbox input:checked+span:before {
    background-image: url("../images/main/ico_checkbox_today_chk.svg");
}

@media (max-width: 1180px) {
    .notice {
        height: calc(100vw * (55 / 1180));
        background: linear-gradient(135deg, #019FE9 0%, #07D09F 100%);
    }

    .notice .inner {
        padding: calc(100vw * (10 / 1180)) calc(100vw * (52 / 1180));
    }

    .notice .left {
        gap: calc(100vw * (16 / 1180));
    }

    .notice .left p {
        font-size: calc(100vw * (18 / 1180));
    }

    .notice .left a {
        padding: calc(100vw * (6 / 1180)) calc(100vw * (10 / 1180));
        border-radius: calc(100vw * (8 / 1180));
        font-size: calc(100vw * (15 / 1180));
    }

    .notice .right {
        right: calc(100vw * (52 / 1180));
        gap: calc(100vw * (20 / 1180));
    }

    .notice .right label {
        font-size: calc(100vw * (15 / 1180));
    }

    .notice .right .close {
        width: calc(100vw * (14 / 1180));
        height: calc(100vw * (14 / 1180));
    }

    .notice .right .checkbox span {
        padding-left: calc(100vw * (26 / 1180));
    }

    .notice .right .checkbox span::before {
        width: calc(100vw * (18 / 1180));
        height: calc(100vw * (19 / 1180));
    }
}

@media (max-width: 767px) {
    .notice {
        height: calc(100vw * (248 / 767));
    }

    .notice .inner {
        padding: calc(100vw * (30 / 767)) calc(100vw * (40 / 767)) calc(100vw * (36 / 767));
    }

    .notice .left {
        display: block;
        gap: calc(100vw * (16 / 767));
    }

    .notice .left p {
        line-height: 1.4;
        font-size: calc(100vw * (32 / 767));
    }

    .notice .left a {
        margin-top: calc(100vw * (48 / 767));
        padding: calc(100vw * (8 / 767)) calc(100vw * (14 / 767));
        border-radius: calc(100vw * (11 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .notice .right {
        right: calc(100vw * (40 / 767));
        top: auto;
        bottom: calc(100vw * (36 / 767));
        transform: translateY(0);
        gap: calc(100vw * (20 / 767));
    }

    .notice .right label {
        font-size: calc(100vw * (28 / 767));
    }

    .notice .right .close {
        width: calc(100vw * (28 / 767));
        height: calc(100vw * (28 / 767));
    }

    .notice .right .checkbox span {
        padding-left: calc(100vw * (52 / 767));
    }

    .notice .right .checkbox span::before {
        width: calc(100vw * (36 / 767));
        height: calc(100vw * (36 / 767));
    }
}

/* 다국어 */
:lang(en) .banner .btn_area a {
    flex-basis: 29rem;
}

@media (max-width: 1180px) {
    :lang(en) .banner .btn_area a {
        flex-basis: calc(100vw * (290 / 1180));
    }
}

@media (max-width: 767px) {
    :lang(en) .banner .btn_area a {
        flex-basis: 100%;
    }
}



.new_btn_area a {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 4.4rem;
    color: #fff;
    background: linear-gradient(318deg, #ff6600 0%, #ffba26 100%);
    padding: 0 4rem;
    border-radius: 1rem;
    background: linear-gradient(318deg, #ff6600 0%, #ffba26 100%);
}

.sub-visual .sub-title .new_btn_area a span {
    color: rgba(255, 255, 255, 1);
    font-size: 2rem;
    padding: 0;
}

.new_button {
    margin: -10rem 0 18rem;
}

@media (min-width: 1181px) {
    .new_btn_area a:hover {
        background: #fff;
    }

    .new_btn_area a:hover span {
        background: linear-gradient(305deg, #ff6600 0%, #ffba26 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media (max-width: 1180px) {
    .new_btn_area a {
        height: calc(100vw * (44 / 1180));
        padding: 0 calc(100vw * (40 / 1180));
        border-radius: calc(100vw * (10 / 1180));
    }

    .sub-visual .sub-title .new_btn_area a span {
        font-size: calc(100vw * (20 / 1180));
    }

    .new_button {
        margin: calc(100vw * (-100 / 1180)) 0 calc(100vw * (180 / 1180));
    }
}

@media (max-width: 767px) {
    .new_btn_area a {
        height: calc(100vw*(82 / 767));
        padding: 0 calc(100vw*(80 / 767));
        border-radius: calc(100vw*(10 / 767));
    }

    .sub-visual .sub-title .new_btn_area a span {
        font-size: calc(100vw*(32 / 767));
        margin: 0;
    }

    .new_button {
        margin: calc(100vw * (-100 / 767)) 0 calc(100vw * (180 / 767));
    }
}



/* 2024/11/21 추가 */
@media (min-width: 1181px) {

    #header .head_box .sub-menu {
        max-width: calc(170rem + 12rem);
    }


    /* 제품 */
    #header .head_box li.gnb-product .sub-menu {
        display:flex !important;
        gap: 0;
        padding: 0;
		overflow: auto; max-height: calc(100vh - 100px);
        
    }

    #header .head_box #gnb .navbar>li.gnb-product.hv .sub-menu {
        display: flex !important;
    }

    #header .head_box li.gnb-product .sub-menu .product-sub{
        flex: 1;
        padding: 3rem 6rem;
        background-color: rgba(255, 255, 255, 0);
        /* border-left: 1px solid rgba(255, 255, 255, 0.1); */
    }

    #header .head_box li.gnb-product .sub-menu .product-sub h2{
        display: inline-block;
        margin-bottom: 30px;
        padding: 0 20px;
        color: #fff;
        line-height: 40px;
        border-radius: 20px;
        border: 1px solid #fff;
    }
    /*#header .head_box li.gnb-product .sub-menu .product-sub:hover{background-color: rgba(255, 255, 255, 0);}*/
    #header .head_box li.gnb-product .sub-menu ul{display: flex !important;flex-direction: column;gap: 3rem;}

    #header .head_box li.gnb-product .sub-menu .product-sub.on h2,
    #header .head_box li.gnb-product .sub-menu .product-sub:hover h2{color: #ffba26;border-color: #ffba26;}

}

@media (max-width: 1180px) {

    #header .head_box li.gnb-product .sub-menu .product-sub{
        display: flex;
        align-items: flex-start;
        gap: calc(100vw * (44 / 1180));
        margin-bottom: calc(100vw * (50 / 1180));
        padding-left: calc(100vw * (50 / 1180));
    }
    #header .head_box li.gnb-product .sub-menu .product-sub:last-child{
        margin-bottom: 0;
    }
    #header .head_box li.gnb-product .sub-menu .product-sub h2{
        display: block;
        padding: 0;
        width: calc(100vw * (145 / 1180));
        font-size: calc(100vw * (22 / 1180));
        color: #ffba26;
        text-align: center;
        line-height: calc(100vw * (40 / 1180));
        border-radius: calc(100vw * (20 / 1180));
        border: 1px solid #ffba26;
        flex-shrink: 0;
    }

    #header .head_box li.gnb-product .sub-menu .product-sub ul{display: block !important;}

    #header .head_box li.opac{opacity: 0.4;}


}

@media (max-width: 767px) {

    #header .head_box li.gnb-product .sub-menu .product-sub{
        gap: calc(100vw * (42 / 767));
        margin-bottom: calc(100vw * (50 / 767));
        padding-left: calc(100vw * (14 / 767));
    }

    #header .head_box li.gnb-product .sub-menu .product-sub h2{
        width: calc(100vw * (186 / 767));
        font-size: calc(100vw * (28 / 767));
        line-height: calc(100vw * (60 / 767));
        border-radius: calc(100vw * (40 / 767));
    }
}

/* 2024/12/11 추가 */
.btn_try1{
    position:fixed;
    top: 150px;
    right: 80px;
    z-index: 100;
}
.btn_try1 a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 120px;
    height: 120px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    background-color: #D1FF74;
    border-radius: 50%;
}
.btn_try1 a::after{
    content: '';
    width: 25px;
    height: 20px;
    background: url('../images/common/ico_try1.svg') no-repeat center center / 100%;
}


.btn_try2 a{
    position: fixed;
    bottom: 520px;
    right: -87px;
    display: flex;
    width: 248px;
    height: 75px;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 2.2rem;
    font-weight: 700;
    transform: rotate(270deg);
    background-color: #D1FF74;
    clip-path: polygon(90% 0, 100% 26%, 100% 100%, 0 100%, 0 0);
    overflow: hidden;
    z-index: 100;
}
.btn_try2 a::after{
    margin-left: 10px;
    content: '';
    width: 12px;
    height: 12px;
    background: url('../images/common/ico_try2.svg') no-repeat center center / 100%;
    transform: rotate(90deg);
}

@media (max-width: 1180px) {

    .btn_try1{
        top: calc(100vw * (150 / 1180));
        right: calc(100vw * (20 / 1180));
    }
    .btn_try1 a{
        gap: calc(100vw * (8 / 1180));
        width: calc(100vw * (120 / 1180));
        height: calc(100vw * (120 / 1180));
        font-size: calc(100vw * (18 / 1180));
        line-height: 1.2;
    }
    .btn_try1 a::after{
        width: calc(100vw * (25 / 1180));
        height: calc(100vw * (20 / 1180));
    }

    .btn_try2 a {
        bottom: calc(100vw * (450 / 1180));
        right: calc(100vw * (-87 / 1180));
        width: calc(100vw * (248 / 1180));
        height: calc(100vw * (75 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }
    .btn_try2 a::after{
        margin-left: calc(100vw * (10 / 1180));
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }
}

@media (max-width: 767px) {
	.btn_try2{
	display: none;
	}
	
    .btn_try1{
        top: calc(100vw * (180 / 767));
        right: calc(100vw * (20 / 767));
    }
    .btn_try1 a{
        gap: calc(100vw * (10 / 767));
        width: calc(100vw * (150 / 767));
        height: calc(100vw * (150 / 767));
        font-size: calc(100vw * (24 / 767));
    }
    .btn_try1 a::after{
        width: calc(100vw * (35 / 767));
        height: calc(100vw * (30 / 767));
    }

    .btn_try2 a {
        bottom: calc(100vw * (650 / 767));
        right: calc(100vw * (-140 / 767));
        width: calc(100vw * (400 / 767));
        height: calc(100vw * (120 / 767));
        font-size: calc(100vw * (40 / 767));
    }
    .btn_try2 a::after{
        margin-left: calc(100vw * (15 / 767));
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }
}