/* 
* @project  Hanwha Ocean
* @author   www.fave.kr
* @build    2024-09-06 18:01:01
 */
@charset "UTF-8";

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
    font-weight: 400;
    font-style: normal
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

:root {
    --header-height: 99px;
    --logo-w: 251px;
    --logo-h: 44px;
    --depth2-h: 411px;
    --max-w: 1920px;
    --default-pad-side: 120px
}

@media (max-width: 1200px) {
    :root {
        --default-pad-side: 75px
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 52px
    }
}

@font-face {
    font-family: Hanwha;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/HanwhaB.woff) format("woff")
}

@font-face {
    font-family: Hanwha;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/HanwhaR.woff) format("woff")
}

@font-face {
    font-family: Hanwha;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/HanwhaL.woff) format("woff")
}

@font-face {
    font-family: Hanwha Gothic;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/HanwhaGothicB.woff) format("woff")
}

@font-face {
    font-family: Hanwha Gothic;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/HanwhaGothicR.woff) format("woff")
}

@font-face {
    font-family: Hanwha Gothic;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/HanwhaGothicL.woff) format("woff")
}

@font-face {
    font-family: Hanwha Gothic;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/HanwhaGothicEL.woff) format("woff")
}

@font-face {
    font-family: Hanwha Gothic;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/HanwhaGothicT.woff) format("woff")
}

@font-face {
    font-family: YDIYGO;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/YDIYGO310.woff2) format("woff")
}

@font-face {
    font-family: YDIYGO;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/YDIYGO320.woff2) format("woff")
}

@font-face {
    font-family: YDIYGO;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/YDIYGO330.woff2) format("woff")
}

@font-face {
    font-family: YDIYGO;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/YDIYGO340.woff2) format("woff")
}

@font-face {
    font-family: YDIYGO;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/YDIYGO350.woff2) format("woff")
}

@font-face {
    font-family: YDIYGO;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/YDIYGO360.woff2) format("woff")
}

@font-face {
    font-family: NotoSans;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NotoSans-Regular.woff2) format("woff")
}

@font-face {
    font-family: NotoSans;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/NotoSans-Medium.woff2) format("woff")
}

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,
input,
textarea,
button,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
hgroup,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ol,
ul {
    list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    text-decoration: none;
    color: inherit
}

a:hover {
    text-decoration: none
}

legend,
caption,
hr {
    display: none
}

th {
    font-weight: inherit
}

em {
    font-style: normal
}

img {
    vertical-align: top
}

input {
    vertical-align: middle;
    border-radius: 0
}

p,
h3,
h2,
h1 {
    letter-spacing: normal
}

input,
textarea,
button,
select {
    font-family: Hanwha Gothic, sans-serif;
    border-radius: 0;
    background: inherit;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible
}

html {
    height: auto;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    word-break: keep-all;
    word-wrap: break-word
}

body {
    font-family: Hanwha Gothic, sans-serif;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    color: #151515;
    font-weight: 400
}

.only_mobile {
    display: none !important
}

@media (max-width: 1023px) {
    body {
        font-size: 14px;
        line-height: 1.68
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.72
    }

    .only_mobile {
        display: block !important
    }
}

html,
body {
    height: 100%
}

body {
    font-family: Hanwha Gothic;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%
}

body {
    scrollbar-width: none;
    -ms-overflow-style: none
}

body::-webkit-scrollbar {
    width: 0
}

a {
    text-decoration: none
}

button {
    font-family: inherit;
    color: inherit;
    cursor: pointer
}

@media (max-width: 768px) {
    br.pc {
        display: none
    }
}

br.tablet {
    display: none
}

@media (min-width: 769px) and (max-width: 1023px) {
    br.tablet {
        display: initial
    }
}

br.mobile {
    display: none
}

@media (max-width: 768px) {
    br.mobile {
        display: initial
    }
}

.orange {
    color: #f60
}

.capitalize {
    text-transform: capitalize
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        opacity: 1 !important;
        transform: translateY(0) !important
    }

    body .load_ocean {
        display: none !important
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    body.page-in-active .sub_top .top_tit_area .sub_top_tit p span br.pc {
        display: block !important
    }
}

.font-hh {
    font-family: Hanwha !important
}

html[lang=en] .font-hh {
    font-weight: 500
}

.hidden {
    display: none !important
}

#skip_content a {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: #000;
    color: #fff;
    text-align: center;
    z-index: 99999;
    box-sizing: border-box
}

#skip_content a:focus {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px
}

.swiper-wrapper,
[data-swiper-parallax] {
    transition-timing-function: cubic-bezier(.23, 1, .32, 1)
}

.m_hanwhaL {
    font-family: Hanwha !important;
    font-weight: 200 !important
}

.m_hanwhaR {
    font-family: Hanwha !important;
    font-weight: 400 !important
}

.m_hanwhaB {
    font-family: Hanwha !important;
    font-weight: 700 !important
}

.m_h1 {
    font-size: min(5.2083333333vw, 100px) !important;
    line-height: min(6.9791666667vw, 134px) !important
}

.m_h2 {
    font-size: min(4.375vw, 84px) !important;
    line-height: min(5.6vw, 107.52px) !important
}

.m_h3 {
    font-size: min(3.75vw, 72px) !important;
    line-height: min(4.95vw, 95.04px) !important
}

.m_h4 {
    font-size: min(3.125vw, 60px) !important;
    line-height: min(4.125vw, 79.2px) !important
}

.m_h5 {
    font-size: min(2.7083333333vw, 52px) !important;
    line-height: min(3.575vw, 68.64px) !important
}

.m_h6 {
    font-size: min(1.875vw, 36px) !important;
    line-height: min(2.85vw, 54.72px) !important
}

.m_h7 {
    font-size: min(1.6666666667vw, 32px) !important;
    line-height: min(2.6666666667vw, 51.2px) !important
}

.m_h8 {
    font-size: min(1.4583333333vw, 28px) !important;
    line-height: min(2.45vw, 47.04px) !important
}

.m_h9 {
    font-size: min(1.25vw, 24px) !important;
    line-height: min(2vw, 38.4px) !important
}

.m_etc {
    font-size: min(.9375vw, 18px) !important;
    line-height: min(1.3125vw, 25.2px) !important
}

.m_desc {
    font-size: min(.8333333333vw, 16px) !important;
    line-height: min(1.25vw, 24px) !important
}

.m_caption {
    font-size: min(.7291666667vw, 14px) !important;
    line-height: min(1.0208333333vw, 19.6px) !important
}

.m_point {
    color: #f60 !important
}

@media (max-width: 1023px) {
    .m_h1 {
        font-size: 60px !important;
        line-height: 1.34 !important
    }

    .m_h2 {
        font-size: 52px !important;
        line-height: 1.28 !important
    }

    .m_h3 {
        font-size: 44px !important;
        line-height: 1.32 !important
    }

    .m_h4 {
        font-size: 40px !important;
        line-height: 1.32 !important
    }

    .m_h5 {
        font-size: 32px !important;
        line-height: 1.32 !important
    }

    .m_h6 {
        font-size: 24px !important;
        line-height: 1.52 !important
    }

    .m_h7 {
        font-size: 20px !important;
        line-height: 1.6 !important
    }

    .m_h8 {
        font-size: 18px !important;
        line-height: 1.68 !important
    }

    .m_h9 {
        font-size: 16px !important;
        line-height: 1.6 !important
    }

    .m_etc {
        font-size: 14px !important;
        line-height: 1.4 !important
    }

    .m_desc {
        font-size: 12px !important;
        line-height: 1.5 !important
    }

    .m_caption {
        font-size: 12px !important;
        line-height: 1.4 !important
    }
}

@media (max-width: 768px) {
    .m_h1 {
        font-size: 40px !important;
        line-height: 1.32 !important
    }

    .m_h2 {
        font-size: 32px !important;
        line-height: 1.4 !important
    }

    .m_h3 {
        font-size: 28px !important;
        line-height: 1.44 !important
    }

    .m_h4 {
        font-size: 24px !important;
        line-height: 1.56 !important
    }

    .m_h5,
    .m_h6,
    .m_h7,
    .m_h8 {
        font-size: 20px !important;
        line-height: 1.56 !important
    }

    .m_h9 {
        font-size: 16px !important;
        line-height: 1.72 !important
    }

    .m_etc,
    .m_desc {
        font-size: 14px !important;
        line-height: 1.72 !important
    }

    .m_caption {
        font-size: 12px !important;
        line-height: 1.68 !important
    }

    .m_input_label {
        font-size: 18px !important;
        line-height: 1.56 !important
    }
}

.m_btn[type=button],
[hover=ripple] {
    display: inline-block;
    text-align: center;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .5s, color .1s;
    margin: 0;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    transition-delay: 0s, .1s
}

.m_btn[hover=ripple] span {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.m_btn[hover=ripple]:before {
    --size: 0;
    content: "";
    width: var(--size);
    height: var(--size);
    position: absolute;
    left: var(--x);
    top: var(--y);
    background-color: #151515;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    transition: all .5s ease, left 0s, top 0s
}

.m_btn[hover=ripple]:hover {
    border-color: #2a2a2a;
    color: #fff
}

.m_btn[hover=ripple]:hover:before {
    --size: 800px
}

.m_btn[hover=ripple][icon=left][color=white]:hover span.icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(36deg) brightness(106%) contrast(101%) !important
}

.m_btn[hover=ripple][icon=left][color=black]:hover span.icon {
    filter: invert(0%) sepia(99%) saturate(10%) hue-rotate(54deg) brightness(98%) contrast(100%) !important
}

.m_btn[hover=ripple][icon=right][color=white]:hover span.icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(36deg) brightness(106%) contrast(101%) !important
}

.m_btn[hover=ripple][icon=right][color=black]:hover span.icon {
    filter: invert(0%) sepia(99%) saturate(10%) hue-rotate(54deg) brightness(98%) contrast(100%) !important
}

.m_btn[size=l] {
    height: min(2.5vw, 48px);
    padding: 0 min(1.0416666667vw, 20px);
    min-width: min(4.4270833333vw, 85px)
}

.m_btn[size=l] span.txt {
    font-weight: 300;
    line-height: min(2.5vw, 48px);
    font-size: min(.9375vw, 18px);
    vertical-align: middle;
    display: inline-block
}

.m_btn[size=m] {
    height: min(2.9166666667vw, 56px);
    padding: 0 min(1.0416666667vw, 20px);
    min-width: min(7.9166666667vw, 152px)
}

.m_btn[size=m] span.txt {
    font-weight: 300;
    line-height: min(2.9166666667vw, 56px);
    font-size: min(1.0416666667vw, 20px);
    vertical-align: middle;
    display: inline-block
}

.m_btn[size=h] {
    height: min(3.3333333333vw, 64px);
    min-width: min(20.7291666667vw, 398px)
}

.m_btn[size=h] span.txt {
    font-weight: 400;
    line-height: min(3.3333333333vw, 64px);
    font-size: min(1.0416666667vw, 20px);
    vertical-align: middle;
    display: inline-block
}

.m_btn[line=round] {
    border-radius: min(5.2083333333vw, 100px);
    padding: 0 min(1.0416666667vw, 20px)
}

.m_btn[line=squire] {
    border-radius: min(.2083333333vw, 4px);
    padding: 0 min(1.25vw, 24px)
}

.m_btn[color=black] {
    background-color: #2a2a2a;
    color: #fff;
    border-color: #2a2a2a
}

.m_btn[color=none] {
    pointer-events: none;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    color: #999
}

.m_btn[icon=left] span.icon {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: min(.4166666667vw, 8px);
    transition-delay: .1s
}

.m_btn[icon=right] span.icon {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: min(.4166666667vw, 8px);
    transition-delay: .1s
}

.m_btn[line=squire][icon=left] span.icon {
    margin-right: min(.8333333333vw, 16px)
}

.m_btn[line=squire][icon=right] span.icon {
    margin-left: min(.8333333333vw, 16px)
}

.ex_btn1 span.icon,
.ex_btn2 span.icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg)
}

.ex_btn3 span.icon,
.ex_btn4 span.icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_w.svg)
}

.m_btn[type=text] {
    position: relative;
    display: inline-block;
    font-weight: 400;
    color: #151515;
    pointer-events: all;
    cursor: pointer;
    vertical-align: middle;
    font-size: 0
}

.m_btn[type=text][hover=none] {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.m_btn[type=text] span.txt {
    display: inline-block;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.1666666667vw, 22.4px);
    vertical-align: middle
}

.m_btn[type=text] span.icon {
    position: relative;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    background-color: #fff;
    border-radius: 100%;
    display: inline-block;
    margin-right: min(.625vw, 12px);
    overflow: hidden;
    transition: all .5s .2s ease;
    vertical-align: middle
}

.m_btn[type=text][hover=none] span.txt {
    display: inline;
    position: relative;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.m_btn[type=text][hover=none]:hover span.txt {
    background-size: 100% 1px
}

.m_btn[type=text][hover=arrow] {
    overflow: hidden
}

.m_btn[type=text][hover=arrow][bg=w] span.icon {
    display: inline-block;
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    border: 1px solid #E5E5E5;
    background-color: transparent;
    position: relative;
    vertical-align: middle
}

.m_btn[type=text][hover=arrow][bg=b] span.icon {
    display: inline-block;
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    border: 1px solid rgba(184, 184, 184, .5);
    background-color: transparent;
    position: relative;
    vertical-align: middle
}

.m_btn[type=text][hover=arrow] span.icon:before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transform: translate(-200%);
    transition: all .3s ease-in-out
}

.m_btn[type=text][hover=arrow] span.icon:after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transition: all .3s ease-in-out
}

.m_btn[type=text][hover=arrow] span.txt {
    position: relative;
    transition: all .34s ease-in-out;
    display: inline-block;
    vertical-align: middle
}

.m_btn[type=text][hover=arrow] span.txt:after {
    content: attr(data-txt);
    position: absolute;
    top: 150%;
    left: 0
}

@media (hover: hover) and (pointer: fine) {
    .m_btn[type=text][hover=arrow]:hover span.txt {
        transform: translateY(-150%);
        opacity: .5
    }

    .m_btn[type=text][hover=arrow]:hover span.icon:before {
        transform: translate(0)
    }

    .m_btn[type=text][hover=arrow]:hover span.icon:after {
        transform: translate(200%)
    }
}

.m_btn[type=text][hover=underline] span.icon {
    display: inline-block;
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    border: 1px solid rgba(184, 184, 184, .5);
    background-color: transparent;
    position: relative;
    vertical-align: middle;
    transition: all .3s ease
}

.m_btn[type=text][hover=underline] span.icon:before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transform: translateY(-300%);
    transition: all .3s ease
}

.m_btn[type=text][hover=underline] span.icon:after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border-radius: min(2.6041666667vw, 50px);
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transition: all .3s ease
}

.ex_btn5 span.icon:before,
.ex_btn6 span.icon:before,
.ex_btn5 span.icon:after,
.ex_btn6 span.icon:after,
.ex_btn7 span.icon:before,
.ex_btn8 span.icon:before,
.ex_btn7 span.icon:after,
.ex_btn8 span.icon:after {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_o.svg);
    width: 12px;
    height: 8px;
    top: calc(50% - 4px);
    left: calc(50% - 6px)
}

.m_btn[type=text][hover=underline] span.txt {
    display: inline;
    position: relative;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s ease
}

.m_btn[type=text][hover=underline]:hover span.icon {
    background-color: #151515;
    border-color: #151515
}

.m_btn[type=text][hover=underline]:hover span.icon:before {
    transform: translateY(0)
}

.m_btn[type=text][hover=underline]:hover span.icon:after {
    transform: translateY(300%)
}

.m_btn[type=text][hover=underline]:hover span.txt {
    background-size: 100% 1px
}

.m_btn[type=icon][hover=ripple] .blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}

.m_btn[type=icon][hover=ripple] {
    display: inline-block;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    border: 1px solid #E5E5E5;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 100%;
    position: relative;
    vertical-align: middle
}

.m_btn[type=icon][hover=ripple]:after {
    content: "";
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    background: url(https://www.hanwhaocean.com/images/common/icon_print_b_28x28.svg) no-repeat center/contain;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s
}

.m_btn[type=icon][hover=ripple]:hover {
    border-color: #2a2a2a;
    color: #fff
}

.m_btn[type=icon][hover=ripple]:hover:after {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(152deg) brightness(103%) contrast(100%)
}

@media (max-width: 1023px) {
    .m_btn[size=l] {
        height: 30px !important;
        padding: 0 12.5px !important;
        min-width: 55px !important
    }

    .m_btn[size=m] {
        height: 35px !important;
        padding: 0 10px !important;
        min-width: 95px !important
    }

    .m_btn[size=h] {
        height: 40px !important;
        min-width: 249px !important
    }

    .m_btn[size=l] span.txt {
        line-height: 30px !important;
        font-size: 12px !important
    }

    .m_btn[size=m] span.txt {
        line-height: 35px !important;
        font-size: 14px !important
    }

    .m_btn[size=h] span.txt {
        line-height: 40px !important;
        font-size: 16px !important
    }

    .m_btn[line=round] {
        border-radius: 100px !important;
        padding: 0 34px !important
    }

    .m_btn[line=squire] {
        border-radius: 2.5px !important;
        padding: 0 12.5px !important
    }

    .m_btn[hover=ripple]:hover:before {
        --size: 500px
    }

    .m_btn[icon=left] span.icon {
        width: 12px !important;
        height: 12px !important;
        margin-right: 5px !important
    }

    .m_btn[icon=right] span.icon {
        width: 12px !important;
        height: 12px !important;
        margin-left: 5px !important
    }

    .m_btn[line=squire][icon=left] span.icon {
        margin-right: 5px !important
    }

    .m_btn[line=squire][icon=right] span.icon {
        margin-left: 5px !important
    }

    .m_btn[type=text] span.txt {
        font-size: 12px !important;
        line-height: 1.68 !important
    }

    .m_btn[type=text] span.icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 12px !important
    }

    .m_btn[type=text][hover=arrow][bg=w] span.icon,
    .m_btn[type=text][hover=arrow][bg=b] span.icon {
        width: 20px !important;
        height: 20px !important;
        border-radius: 20px !important
    }

    .m_btn[type=text][hover=arrow] span.icon:before {
        border-radius: 20px !important
    }

    .m_btn[type=text][hover=arrow] span.icon:after {
        border-radius: 20px !important
    }

    .m_btn[type=text][hover=underline] span.icon {
        width: 20px !important;
        height: 20px !important;
        border-radius: 20px !important
    }

    .m_btn[type=text][hover=underline] span.icon:before {
        border-radius: 20px !important
    }

    .m_btn[type=text][hover=underline] span.icon:after {
        border-radius: 20px !important
    }

    .m_btn[type=icon][hover=ripple] {
        width: 32px !important;
        height: 32px !important
    }

    .m_btn[type=icon][hover=ripple]:after {
        width: 20px !important;
        height: 20px !important
    }
}

@media (max-width: 768px) {
    .m_btn[size=l] {
        height: 40px !important;
        padding: 0 16px !important;
        min-width: 42px !important
    }

    .m_btn[size=m] {
        height: 44px !important;
        padding: 0 20px !important;
        min-width: 80px !important
    }

    .m_btn[size=h] {
        height: 48px !important;
        min-width: 161px !important
    }

    .m_btn[size=l] span.txt {
        line-height: 40px !important;
        font-size: 16px !important
    }

    .m_btn[size=m] span.txt {
        line-height: 44px !important;
        font-size: 16px !important
    }

    .m_btn[size=h] span.txt {
        line-height: 48px !important;
        font-size: 16px !important
    }

    .m_btn[line=round],
    .m_btn[line=squire] {
        border-radius: 100px !important;
        padding: 0 12px !important
    }

    .m_btn[icon=left] span.icon {
        width: 16px !important;
        height: 16px !important;
        margin-right: 8px !important
    }

    .m_btn[icon=right] span.icon {
        width: 16px !important;
        height: 16px !important;
        margin-left: 8px !important
    }

    .m_btn[line=squire][icon=left] span.icon {
        margin-right: 8px !important
    }

    .m_btn[line=squire][icon=right] span.icon {
        margin-left: 8px !important
    }

    .m_btn[type=text] span.icon {
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important
    }

    .m_btn[type=text] span.txt {
        font-size: 14px !important;
        line-height: 1.72 !important
    }

    .m_btn[type=text][hover=arrow][bg=w] span.icon,
    .m_btn[type=text][hover=arrow][bg=b] span.icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 24px !important
    }

    .m_btn[type=text][hover=arrow] span.icon:before {
        border-radius: 24px !important
    }

    .m_btn[type=text][hover=arrow] span.icon:after {
        border-radius: 24px !important
    }

    .m_btn[type=text][hover=underline] span.icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 24px !important
    }

    .m_btn[type=text][hover=underline] span.icon:before {
        border-radius: 24px !important
    }

    .m_btn[type=text][hover=underline] span.icon:after {
        border-radius: 24px !important
    }

    .m_btn[type=icon][hover=ripple] {
        width: 40px !important;
        height: 40px !important
    }

    .m_btn[type=icon][hover=ripple]:after {
        width: 20px !important;
        height: 20px !important
    }
}

.m_popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    display: none;
    z-index: 99999
}

.m_popup.show {
    display: block
}

.m_popup .dim {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: #0006
}

.m_popup .pop_inner {
    position: relative;
    left: 50%;
    right: 0;
    top: 50%;
    opacity: 0;
    width: min(33.3333333333vw, 640px);
    transform: translate(-50%)
}

.m_popup .pop_inner .pop_contents {
    position: relative;
    background-color: #fff;
    text-align: left;
    width: 100%;
    width: min(33.3333333333vw, 640px);
    min-height: min(16.3020833333vw, 313px);
    max-height: min(33.3333333333vw, 640px);
    padding: min(2.2916666667vw, 44px) min(2.5vw, 48px);
    box-sizing: border-box;
    border-radius: min(1.0416666667vw, 20px);
    overflow: hidden
}

.m_popup .pop_inner .pop_contents .btn_close_pop {
    position: absolute;
    top: min(1.6666666667vw, 32px);
    right: min(1.6666666667vw, 32px);
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    pointer-events: all;
    cursor: pointer;
    transition: all .4s;
    z-index: 1;
    background: none
}

.m_popup .pop_inner .pop_contents .btn_close_pop img {
    display: block;
    width: 100%
}

.m_popup .pop_inner .pop_contents .btn_close_pop:hover {
    transform: rotate(180deg)
}

.m_popup .pop_inner .pop_contents .pop_cnt_head {
    margin-bottom: min(1.6666666667vw, 32px);
    padding-right: min(.9375vw, 18px)
}

.m_popup .pop_inner .pop_contents .pop_cnt_main {
    max-height: min(18.75vw, 360px);
    overflow: auto;
    margin-bottom: min(2.9166666667vw, 56px)
}

.m_popup .pop_inner .pop_contents .pop_cnt_main::-webkit-scrollbar {
    background-color: transparent;
    width: min(.2083333333vw, 4px)
}

.m_popup .pop_inner .pop_contents .pop_cnt_main::-webkit-scrollbar-thumb {
    background-color: #4b4b4b
}

.m_popup .pop_inner .pop_contents .pop_foot {
    text-align: right;
    margin-left: auto;
    font-size: 0
}

.m_popup .pop_inner .pop_contents .pop_foot button {
    margin-left: min(.8333333333vw, 16px)
}

.m_popup .pop_inner .pop_contents .pop_foot button:first-child {
    margin-left: 0
}

.m_popup .pop_inner .pop_contents table {
    width: 100%;
    border-top: 2px solid #151515
}

.m_popup .pop_inner .pop_contents table tr {
    border-bottom: 1px solid #E5E5E5
}

.m_popup .pop_inner .pop_contents table tr th {
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.4vw, 26.88px);
    padding: min(1.0416666667vw, 20px)
}

.m_popup .pop_inner .pop_contents table tr td {
    width: 100%;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.4vw, 26.88px);
    font-weight: 300;
    color: #4b4b4b;
    padding: min(1.0416666667vw, 20px)
}

.m_popup .pop_inner .pop_contents table tr td .circle {
    display: inline-block;
    width: min(.4166666667vw, 8px);
    height: min(.4166666667vw, 8px);
    background-color: #151515;
    border-radius: 50%;
    transform: translateY(calc(-50% + 3px))
}

.m_popup .pop_inner .pop_contents table tr td .circle:not(:last-child) {
    margin-right: min(.1041666667vw, 2px)
}

@media (max-width: 1023px) {
    .m_popup .pop_inner {
        width: 400px
    }

    .m_popup .pop_inner .pop_contents {
        padding: 30px;
        width: 400px;
        min-height: 209px;
        max-height: 389px;
        border-radius: 20px
    }

    .m_popup .pop_inner .pop_contents .btn_close_pop {
        top: 20px;
        right: 20px;
        width: 24px;
        height: 24px
    }

    .m_popup .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 20px;
        padding-right: 12px
    }

    .m_popup .pop_inner .pop_contents .pop_cnt_main {
        max-height: 200px;
        margin-bottom: 32px
    }

    .m_popup .pop_inner .pop_contents table {
        width: 100%;
        max-width: 100%;
        border-top: 2px solid #151515
    }

    .m_popup .pop_inner .pop_contents table tr {
        border-bottom: 1px solid #E5E5E5;
        box-sizing: border-box
    }

    .m_popup .pop_inner .pop_contents table tr th {
        font-size: 10px;
        line-height: 16px;
        padding: 12px
    }
}

@media (max-width: 1023px) and (max-width: 768px) {
    .m_popup .pop_inner .pop_contents table tr th {
        font-size: 14px;
        line-height: 24.08px;
        padding: 12px 0 12px 20px;
        border-right: 1px solid #E5E5E5;
        width: 120px;
        box-sizing: border-box
    }

    .m_popup .pop_inner .pop_contents table tr th span {
        display: block;
        width: 100px
    }
}

@media (max-width: 1023px) {
    .m_popup .pop_inner .pop_contents table tr td {
        font-size: 10px;
        line-height: 16px;
        padding: 12px
    }
}

@media (max-width: 1023px) and (max-width: 768px) {
    .m_popup .pop_inner .pop_contents table tr td {
        font-size: 14px;
        line-height: 24.08px;
        padding: 12px 20px;
        width: 160px;
        max-width: 160px;
        box-sizing: border-box
    }
}

@media (max-width: 1023px) {
    .m_popup .pop_inner .pop_contents table tr td .circle {
        width: 3px;
        height: 3px;
        transform: translateY(calc(-50% + -0px))
    }

    .m_popup .pop_inner .pop_contents table tr td .circle:not(:last-child) {
        margin-right: 0
    }
}

@media (max-width: 1023px) and (max-width: 768px) {
    .m_popup .pop_inner .pop_contents table tr td .circle {
        width: 4px;
        height: 4px;
        transform: translateY(calc(-50% + 0px))
    }

    .m_popup .pop_inner .pop_contents table tr td .circle:not(:last-child) {
        margin-right: 1px
    }
}

@media (max-width: 768px) {
    .m_popup .pop_inner {
        width: 335px
    }

    .m_popup .pop_inner .pop_contents {
        padding: 24px 28px;
        width: 335px;
        min-height: 223px;
        max-height: 463px
    }

    .m_popup .pop_inner .pop_contents .btn_close_pop {
        top: 24px;
        right: 24px;
        width: 20px;
        height: 20px
    }

    .m_popup .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 28px
    }

    .m_popup .pop_inner .pop_contents .pop_cnt_main {
        max-height: 200px;
        margin-bottom: 36px
    }
}

body.hide-hd #HEADER {
    opacity: 0 !important;
    transition: none !important;
    transform: translateY(-100%) !important;
    visibility: hidden
}

#HEADER {
    height: min(5.625vw, 108px);
    background-color: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    transition: all .3s, transform .8s
}

#HEADER:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
    opacity: 0;
    pointer-events: none;
    transition: all .3s;
    transition-delay: .2s
}

#HEADER.fix {
    top: calc(min(5.625vw, 108px)*-1)
}

#HEADER .header_wrap {
    position: relative;
    height: min(5.625vw, 108px);
    transition: padding .5s, background-color .5s;
    overflow: hidden;
    padding-bottom: 0;
    transition: all .5s;
    z-index: 100
}

#HEADER .header_wrap:before {
    content: "";
    background-color: #fff9;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    position: absolute;
    top: 6px;
    width: 100%;
    height: calc(100% - 6px);
    opacity: 0;
    display: block;
    pointer-events: none
}

#HEADER #GNB {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 min(3.125vw, 60px);
    box-sizing: border-box;
    transition: all .3s;
    z-index: 33;
    max-width: 1920px
}

#HEADER #GNB:after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    background-color: #e3e3e3;
    bottom: 0;
    left: 50%;
    right: 0;
    transform: translate(-50%)
}

#HEADER .gnb_dim {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #15151599;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    z-index: 0
}

#HEADER #GNB .gnb_inner {
    position: relative;
    width: 100%;
    height: min(5.625vw, 108px);
    text-align: center;
    max-width: 1980px;
    margin: 0 auto
}

#HEADER #GNB .gnb_inner .gnb_bg {
    width: 110vw;
    height: 0;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 3;
    background: #fff9;
    transform: translate(-50%);
    box-sizing: border-box;
    transition: all .3s;
    opacity: 0;
    z-index: 0
}

#HEADER #GNB .logo_area {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: min(13.0729166667vw, 251px);
    height: min(2.2916666667vw, 44px)
}

#HEADER #GNB .logo_area .logo {
    display: block;
    width: min(13.0729166667vw, 251px);
    height: min(2.2916666667vw, 44px)
}

#HEADER #GNB .logo_area .logo svg {
    width: 100%;
    height: 100%;
    vertical-align: top
}

#HEADER #GNB .logo_area .logo svg path {
    transition: fill .3s
}

#HEADER #GNB .depth1_area {
    position: relative;
    z-index: 5;
    height: min(5.625vw, 108px);
    line-height: min(5.625vw, 108px);
    transition: transform .8s cubic-bezier(.17, .96, .75, .88)
}

#HEADER #GNB .depth1_area .depth1_ul {
    display: flex;
    justify-content: center;
    align-items: center
}

#HEADER #GNB .depth1_area .depth1_ul>li {
    display: inline-block;
    height: min(5.625vw, 108px);
    position: relative;
    text-align: center
}

#HEADER #GNB .depth1_area>ul>li.depth1_8 {
    display: none
}

#HEADER #GNB .depth1_area .depth1_ul>li>a {
    font-size: min(.9375vw, 18px);
    font-weight: 400;
    color: #fff;
    line-height: min(1.3125vw, 25.2px);
    position: relative;
    display: block;
    padding: 0 min(1.25vw, 24px);
    transition: all .3s
}

#HEADER #GNB .depth1_area .depth1_ul>li>a>span {
    position: relative;
    display: block;
    padding: min(2.1562499479vw, 41.399999px) 0;
    pointer-events: none
}

#HEADER #GNB .depth1_area .depth1_ul>li>a>span:before {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    background-color: #151515;
    bottom: 0;
    height: 2px;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s
}

#HEADER #GNB .depth1_area .depth1_ul>li>a.active>span:before {
    transform: scaleX(1)
}

#HEADER #GNB .depth1_area .depth1_ul.over>li>a {
    padding: 0 min(2.0833333333vw, 40px)
}

#HEADER #GNB .depth1_area .depth1_ul>li.is-hover>a>span:before {
    transform: scaleX(1)
}

#HEADER #GNB .depth1_area .depth1_ul>li .depth2_box {
    padding-top: min(1.7708333333vw, 34px);
    height: min(19.2708333333vw, 370px);
    box-sizing: border-box;
    transition: all .5s;
    pointer-events: none
}

#HEADER #GNB .depth1_area .depth1_ul>li .depth2_box li {
    display: block;
    margin-bottom: min(1.0416666667vw, 20px);
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.1666666667vw, 22.4px)
}

#HEADER #GNB .depth1_area .depth1_ul>li .depth2_box li a {
    display: inline-block
}

#HEADER #GNB .depth1_area .depth1_ul>li .depth2_box li a span {
    display: inline;
    position: relative;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

#HEADER #GNB .depth1_area .depth1_ul>li .depth2_box li a:hover span {
    background-size: 100% 1px
}

#HEADER #GNB .depth1_area .depth1_ul>li .depth2_box li a.active span {
    background-size: 100% 1px
}

#HEADER #GNB .depth1_area .depth1_ul.over>li .depth2_box {
    pointer-events: auto
}

#HEADER #GNB .other_services {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 34;
    display: flex;
    gap: min(2.0833333333vw, 40px);
    align-items: center
}

#HEADER #GNB .other_services .other_btn_investors {
    margin-right: min(1.0416666667vw, 20px)
}

#HEADER #GNB .other_services .other_btn_investors a {
    background-color: transparent;
    height: min(2.1875vw, 42px);
    line-height: min(2.1875vw, 42px);
    color: #fff;
    padding: 0 min(.8333333333vw, 16px);
    min-height: min(2.1875vw, 42px);
    border: min(.0520833333vw, 1px) solid rgba(255, 255, 255, .5)
}

#HEADER #GNB .other_services .other_btn_investors a span.txt {
    line-height: min(2.1875vw, 42px);
    font-size: min(.7291666667vw, 14px);
    padding-right: min(.5208333333vw, 10px);
    transition: color .1s
}

#HEADER #GNB .other_services .other_btn_investors a span.icon {
    width: min(1.1458333333vw, 22px);
    height: min(1.1458333333vw, 22px);
    background: url(https://www.hanwhaocean.com/images/common/icon_round_arrow_o_w_22x22.svg) no-repeat center/contain;
    margin-left: 0;
    border-radius: 100px
}

#HEADER #GNB .other_services .other_btn_investors a:hover span.icon {
    filter: none !important;
    background-color: #fff;
    transition: background .3s
}

#HEADER #GNB .other_services .other_btn_investors a:hover {
    color: #fff;
    border-color: #151515
}

#HEADER #GNB .other_services .other_btn_investors a:hover span.txt {
    color: #fff !important
}

html[lang=en] #HEADER #GNB .other_services .other_btn_investors {
    margin-right: 0;
    display: none !important
}

#HEADER.on #GNB .other_services .other_btn_investors a:hover {
    border-color: #151515
}

#HEADER #GNB .other_services .other_menu {
    font-size: 0;
    vertical-align: middle
}

#HEADER #GNB .other_services .other_menu a {
    display: inline-block;
    color: #fff;
    position: relative;
    font-size: min(.8333333333vw, 16px);
    vertical-align: middle
}

#HEADER #GNB .other_services .other_menu a:after {
    content: "";
    width: min(.4166666667vw, 8px);
    height: min(.4166666667vw, 8px);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(135deg);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-left: min(.4166666667vw, 8px)
}

#HEADER #GNB .other_services .other_menu a:after {
    display: none
}

#HEADER #GNB .other_services .other_menu a.lang_kr {
    display: none
}

#HEADER #GNB .other_services .other_menu a.lang_en,
html[lang=en] #HEADER #GNB .other_services .other_menu a.lang_kr {
    display: inline-block
}

html[lang=en] #HEADER #GNB .other_services .other_menu a.lang_en {
    display: none
}

#HEADER #GNB .other_services .other_all_menu {
    display: inline-block;
    vertical-align: middle;
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px)
}

#HEADER #GNB .other_services .other_all_menu .btn_all_menu {
    background: url(https://www.hanwhaocean.com/images/common/icon_menu.png) no-repeat center/contain;
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    display: inline-block;
    filter: invert(96%) sepia(4%) saturate(0%) hue-rotate(359deg) brightness(105%) contrast(104%)
}

#HEADER #GNB .other_services .other_all_menu .btn_all_menu:hover {
    animation: jelly .5s
}

@keyframes jelly {
    25% {
        transform: scale(.9, 1.1)
    }

    50% {
        transform: scale(1.1, .9)
    }

    75% {
        transform: scale(.95, 1.05)
    }
}

#HEADER.on .header_wrap:before {
    opacity: 1
}

#HEADER.on #GNB .logo_area .logo svg path:not(.path-ci) {
    fill: #231815
}

#HEADER.on #GNB .depth1_area .depth1_ul>li>a {
    color: #151515
}

#HEADER.on #GNB .other_services .other_btn_investors a {
    border-color: #e5e5e5
}

#HEADER.on #GNB .other_services .other_menu a {
    color: #151515
}

#HEADER.on #GNB .other_services .other_menu a:after {
    border-color: #151515
}

#HEADER.on #GNB .other_services .other_all_menu .btn_all_menu {
    filter: none
}

#HEADER.on #GNB .other_services .other_btn_investors a span.txt {
    color: #151515
}

#HEADER.on #GNB .other_services .other_btn_investors a span.icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_round_arrow_o_tr_22x22.svg)
}

#HEADER.gnb_enter .header_wrap {
    padding-bottom: min(19.2708333333vw, 370px)
}

#HEADER.gnb_enter #GNB:after {
    width: 100vw;
    transition: width .5s ease-in-out
}

#HEADER.gnb_enter #GNB .logo_area .logo svg path:not(.path-ci) {
    fill: #231815
}

#HEADER.gnb_enter #GNB .depth1_area .depth1_ul>li>a {
    color: #000
}

#HEADER.gnb_enter #GNB .other_services .other_all_menu .btn_all_menu {
    filter: none
}

#HEADER.gnb_enter #GNB .other_services .other_btn_investors a,
#HEADER.gnb_enter #GNB .other_services .other_menu a {
    color: #151515
}

#HEADER.gnb_enter #GNB .other_services .other_menu a:after {
    border-color: #151515
}

#HEADER.gnb_enter #GNB .depth2_area {
    height: min(21.40625vw, 411px)
}

#HEADER.gnb_enter #GNB .depth2_area .depth2_area_inner {
    transform: translateY(0);
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    opacity: 1;
    transition-delay: .1s
}

#HEADER.on.gnb_enter #GNB:after {
    width: 100vw;
    transition: width .5s ease-in-out
}

html[lang=en] #HEADER.gnb_enter .header_wrap {
    padding-bottom: min(25vw, 480px)
}

#HEADER.noBgOn .header_wrap {
    background-color: transparent
}

#HEADER.noBgOn .header_wrap:before {
    opacity: 1
}

#HEADER.noBgOn #GNB .logo_area .logo svg path:not(.path-ci) {
    fill: #231815
}

#HEADER.noBgOn #GNB .depth1_area .depth1_ul>li>a {
    color: #151515
}

#HEADER.noBgOn #GNB .depth1_area .depth1_ul>li>a:hover {
    color: #151515
}

#HEADER.noBgOn #GNB .other_services .other_menu a {
    filter: none;
    color: #151515
}

#HEADER.noBgOn #GNB .other_services .other_menu a:after {
    border-color: #151515
}

#HEADER.noBgOn #GNB .other_services .other_all_menu .btn_all_menu {
    filter: none
}

#HEADER.noBgOn.on .header_wrap:before {
    opacity: 1
}

#HEADER.noBgOn.gnb_enter .header_wrap:before {
    opacity: 1
}

#HEADER.noBgOn #GNB .other_services .other_btn_investors a {
    border-color: #e5e5e5
}

#HEADER.noBgOn #GNB .other_services .other_btn_investors a:hover {
    border-color: #151515
}

#HEADER.noBgOn #GNB .other_services .other_btn_investors a span.txt {
    color: #151515
}

#HEADER.noBgOn #GNB .other_services .other_btn_investors a span.icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_round_arrow_o_tr_22x22.svg)
}

#HEADER.main_ver .header_wrap:before {
    transition: all .3s;
    transition-delay: .3s
}

#HEADER.main_ver.gnb_enter .header_wrap:before {
    opacity: 1;
    transition-delay: 0s
}

#HEADER.main_ver.gnb_enter.on .header_wrap {
    background-color: transparent
}

#HEADER.main_ver #GNB .depth1_area .depth1_ul>li>a>span:before {
    opacity: 0
}

#HEADER.main_ver #GNB .depth1_area .depth1_ul.over>li>a>span:before {
    opacity: 1
}

body .load_ocean {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    display: block;
    opacity: 1;
    transition: opacity .3s
}

body .load_ocean .load_ocean_logo {
    position: absolute;
    width: 240px;
    height: 220px;
    left: calc(50% - 120px);
    top: calc(50% - 90px)
}

body .load_ocean .load_ocean_logo img {
    animation: loadOcean 3s infinite cubic-bezier(.39, 0, .12, .99);
    display: block;
    width: 100%
}

body.pace-done.page-in-active .load_ocean {
    opacity: 0;
    z-index: -99999;
    pointer-events: none
}

.pace {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    transform: translateY(0);
    transition: transform .3s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 10001
}

.pace .pace-progress {
    position: fixed;
    right: 100%;
    width: 100%;
    height: 6px;
    background: #f60;
    z-index: 10000
}

.pace.p-hide {
    transform: translateY(-100%)
}

body #HEADER {
    transform: translateY(-200%);
    opacity: 0
}

body.page-in-active #HEADER {
    transform: translateY(0);
    opacity: 1
}

body.hide-hd .pace {
    display: none
}

@keyframes loadOcean {
    0% {
        transform: translateY(-20px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-20px)
    }
}

@media (max-width: 1023px) {
    body .load_ocean .load_ocean_logo {
        width: 160px;
        height: 148px;
        top: calc(50% - 79px);
        left: calc(50% - 80px)
    }
}

@media (max-width: 768px) {
    body .load_ocean .load_ocean_logo {
        width: 120px;
        height: 110px;
        left: calc(50% - 60px);
        top: calc(50% - 55px)
    }
}

body.all_menu {
    overflow: hidden
}

body.all_menu #HEADER {
    height: 100vh;
    transition-delay: 0s
}

body.all_menu #HEADER:before {
    opacity: 1;
    transition-delay: 0s
}

body.all_menu #HEADER .header_wrap {
    overflow: visible
}

body.all_menu #HEADER.on .header_wrap:before {
    opacity: 0;
    transition-delay: 0s
}

body.all_menu #HEADER.main_ver .header_wrap:before {
    opacity: 0;
    transition-delay: 0s
}

body.all_menu #HEADER.noBgOn .header_wrap:before {
    opacity: 0;
    transition-delay: 0s
}

body.all_menu #HEADER.noBgOn #GNB .other_services .other_menu a,
body.all_menu #HEADER.noBgOn #GNB .other_services .other_btn_investors a span.txt {
    color: #fff
}

body.all_menu #HEADER #GNB .logo_area .logo svg path:not(.path-ci) {
    fill: #fff
}

body.all_menu .depth1_area {
    transform: translateY(100%);
    opacity: 0
}

body.all_menu #HEADER #GNB .depth1_area {
    line-height: normal;
    transition: none
}

body.all_menu #HEADER #GNB .depth1_area>ul>* {
    color: #fff
}

body.all_menu #HEADER #GNB .depth1_area>ul>li.depth1_8 {
    display: inline-block
}

body.all_menu #HEADER #GNB .depth1_area>ul>li>a>span {
    padding: 0;
    color: #fff
}

body.all_menu #HEADER #GNB .depth1_area>ul>li>a {
    overflow: hidden
}

body.all_menu #HEADER #GNB .depth1_area>ul>li>a>span {
    transform: translateY(100%);
    transition: transform .8s cubic-bezier(.17, .96, .75, .88)
}

body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span {
    transform: translateY(0)
}

body.all_menu #HEADER #GNB .depth1_area ul li>.depth2_box {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.17, .96, .75, .88)
}

body.all_menu #HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box {
    opacity: 1;
    transition-delay: .3s
}

body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
    background: none;
    filter: none;
    display: block
}

body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu:before {
    content: "";
    width: min(1.25vw, 24px);
    height: 1px;
    background-color: #fff;
    display: block;
    transform: rotate(45deg) translate(1px)
}

body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu:after {
    content: "";
    width: min(1.25vw, 24px);
    height: 1px;
    background-color: #fff;
    display: block;
    transform: rotate(-45deg) translate(1px)
}

body.all_menu #HEADER #GNB {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden
}

body #HEADER #GNB .depth1_area>ul:before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(min(3.125vw, 60px)*-1);
    right: 0;
    bottom: 0;
    width: calc(100% + min(6.25vw, 120px));
    height: var(--before-height)
}

body.close_all_menu #HEADER.on .header_wrap:before {
    transition-delay: .7s;
    opacity: 1
}

body.close_all_menu #HEADER.main_ver.on .header_wrap:before {
    transition-delay: .7s;
    opacity: 1
}

body.close_all_menu #HEADER.noBgOn .header_wrap:before {
    transition: all .3s;
    transition-delay: .7s;
    opacity: 1
}

body.close_all_menu #HEADER #GNB .depth1_area {
    transition-delay: .5s
}

#HEADER #GNB .depth1_area.all_menu_grid {
    width: 100%;
    height: 100%;
    opacity: 1
}

#HEADER #GNB .depth1_area.all_menu_grid>ul {
    display: block;
    margin: 0 auto;
    padding: min(5.2083333333vw, 100px) min(6.25vw, 120px);
    max-width: min(81.25vw, 1560px);
    box-sizing: border-box
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>* {
    color: #fff
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>li {
    display: block;
    width: 100%;
    text-align: left;
    height: auto;
    font-size: 0;
    padding-top: min(.5208333333vw, 10px);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding-bottom: min(1.0416666667vw, 20px);
    margin-bottom: min(.5208333333vw, 10px)
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>li:first-child {
    padding-top: 0
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>li:last-child {
    border-bottom: 0
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>li>a {
    display: inline-block;
    vertical-align: top;
    width: min(12.5vw, 240px);
    margin-right: min(8.3333333333vw, 160px);
    padding: 0;
    color: #fff;
    font-size: min(1.25vw, 24px);
    line-height: min(1.75vw, 33.6px);
    transition: none
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span {
    padding: 0;
    color: #fff
}

#HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span:before {
    display: none
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box {
    display: inline-block;
    vertical-align: top;
    height: auto;
    padding-top: 0;
    transition: none
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul {
    font-size: 0;
    vertical-align: top;
    max-width: min(47.9166666667vw, 920px)
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li {
    display: inline-block;
    width: min(10.4166666667vw, 200px);
    margin-left: min(2.0833333333vw, 40px);
    vertical-align: top;
    margin-bottom: min(1.0416666667vw, 20px)
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li:nth-child(4n+1) {
    margin-left: 0
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li a {
    width: auto;
    margin-right: 0;
    pointer-events: all;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.1666666667vw, 22.4px)
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li a span {
    background-image: linear-gradient(#fff, #fff)
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li a span br {
    display: none
}

#HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li.outlink a span img {
    display: inline-block;
    vertical-align: middle;
    width: min(.8333333333vw, 16px);
    filter: invert(100%) sepia(0%) saturate(7468%) hue-rotate(111deg) brightness(108%) contrast(109%)
}

#HEADER #GNB .depth1_area.all_menu_grid .depth1_ul>li>a.active>span:before {
    display: none
}

body.all_menu #HEADER:before {
    display: none
}

#HEADER .mo_bg {
    display: none
}

#HEADER .pc_bg {
    background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
    display: block;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 0;
    transition: transform .5s cubic-bezier(.39, 0, .12, .99)
}

body.all_menu #HEADER .pc_bg {
    height: 100vh
}

html.notWeb .pace,
html.notWeb .pace .pace-progress {
    height: 4px
}

html.notWeb #HEADER {
    height: 80px
}

html.notWeb #HEADER.fix {
    top: -80px
}

html.notWeb #HEADER .header_wrap {
    height: 80px
}

html.notWeb #HEADER .header_wrap:before {
    top: 4px;
    height: calc(100% - 4px)
}

html.notWeb #HEADER #GNB {
    padding: 0 40px
}

html.notWeb #HEADER #GNB .gnb_inner {
    height: 80px
}

html.notWeb #HEADER #GNB .logo_area,
html.notWeb #HEADER #GNB .logo_area .logo {
    width: 182px;
    height: 32px
}

html.notWeb #HEADER .pc_bg {
    display: none
}

html.notWeb #HEADER .mo_bg {
    background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
    display: block;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100vh;
    transition: transform .5s cubic-bezier(.39, 0, .12, .99), width .5s cubic-bezier(.39, 0, .12, .99)
}

html.notWeb body.all_menu #HEADER .mo_bg {
    width: 100vw
}

html.notWeb #HEADER #GNB .other_services .other_menu a {
    font-size: 12px
}

html.notWeb #HEADER #GNB .other_services .other_menu a:after {
    width: 5px;
    height: 5px;
    margin-left: 6px;
    top: -1px
}

html.notWeb #HEADER #GNB .other_services .other_all_menu {
    width: 24px;
    height: 24px
}

html.notWeb #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
    width: 24px;
    height: 24px;
    position: relative
}

html.notWeb body.all_menu .depth1_area {
    transform: translateY(0)
}

html.notWeb body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu:before {
    width: 18px
}

html.notWeb body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu:after {
    width: 18px
}

html.notWeb body.all_menu #HEADER:before {
    display: none
}

html.notWeb #HEADER .mo_bg {
    background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
    display: block;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100vh;
    transition: transform .5s cubic-bezier(.39, 0, .12, .99), width .5s cubic-bezier(.39, 0, .12, .99)
}

html.notWeb body.all_menu #HEADER .mo_bg {
    width: 60vw
}

html.notWeb #HEADER #GNB .depth1_area {
    width: 100%;
    height: auto;
    opacity: 1;
    transition: none
}

html.notWeb #HEADER #GNB .depth1_area>ul {
    display: block;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    padding-top: 102px;
    max-width: min(68.75vw, 1320px);
    width: 100%;
    transition: none;
    min-width: 100%
}

html.notWeb #HEADER #GNB .depth1_area>ul>* {
    color: #fff;
    transition: none
}

html.notWeb #HEADER #GNB .depth1_area>ul>li {
    display: block;
    width: 100%;
    text-align: left;
    height: auto;
    font-size: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition: border .3s;
    margin: 0;
    height: 66px;
    overflow: hidden;
    box-sizing: border-box
}

html.notWeb #HEADER #GNB .depth1_area>ul>li:first-child {
    padding-top: 0
}

html.notWeb #HEADER #GNB .depth1_area>ul>li:last-child {
    border-bottom: 0
}

html.notWeb #HEADER #GNB .depth1_area>ul>li>a {
    display: block;
    vertical-align: top;
    width: 100%;
    margin-right: 0;
    font-size: 18px;
    line-height: 1.4;
    padding: 20px 0;
    color: #fff;
    transition: none
}

html.notWeb #HEADER #GNB .depth1_area>ul>li>a:after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_w.svg) no-repeat center/contain;
    width: 20px;
    height: 20px;
    display: block;
    transform: rotate(180deg);
    transition: transform .3s;
    opacity: 0
}

html.notWeb #HEADER #GNB .depth1_area>ul>li.active>a:after {
    transform: rotate(0)
}

html.notWeb #HEADER #GNB .depth1_area>ul>li>a>span {
    padding: 0;
    color: #fff;
    transform: translateY(100%)
}

html.notWeb #HEADER #GNB .depth1_area>ul>li>a>span:before {
    display: none
}

html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box {
    display: inline-block;
    vertical-align: top;
    height: auto;
    padding-top: 0;
    transition: none;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s
}

html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul {
    max-width: 100%;
    font-size: 0;
    vertical-align: top;
    padding: 4px 0 12px 32px;
    box-sizing: border-box
}

html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li {
    width: 100%;
    margin-left: 0;
    display: block;
    vertical-align: top;
    font-size: 16px;
    line-height: 1.72;
    margin-bottom: 8px
}

html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li.only_mobile {
    display: block !important
}

html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li a {
    font-size: 16px;
    line-height: 1.72;
    color: #fffc;
    display: block;
    padding: 8px 0
}

html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li a.active {
    color: #fff
}

html.notWeb #HEADER #GNB .depth1_area .depth1_ul>li>a.active>span:before {
    display: none
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area {
    overflow-x: hidden;
    height: calc(100vh - 82px);
    transform: translateY(82px);
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul {
    padding-top: 0;
    padding-bottom: 40px
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul>li {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    transition-delay: .5s
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul>li.only_mobile {
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area ul li>.depth2_box {
    transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s;
    transition-delay: 0s;
    width: 100%
}

html.notWeb #HEADER #GNB .depth1_area>ul>li>a>span {
    transform: translateY(200%)
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul>li>a>span {
    transform: translateY(200%);
    opacity: 0;
    transition: transform 1s cubic-bezier(.39, 0, .12, .99), opacity .5s cubic-bezier(.39, 0, .12, .99)
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span {
    transform: translateY(0);
    opacity: 1
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a:after {
    opacity: 1;
    transition: transform .3s, opacity .3s;
    transition-delay: 0s, .5s
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area ul li>.depth2_box {
    transition-delay: .3s
}

html.notWeb body #HEADER #GNB .depth1_area .other_btn_investors {
    display: block !important;
    text-align: left;
    padding-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s cubic-bezier(.41, .2, .53, .84)
}

html.notWeb body #HEADER #GNB .depth1_area .other_btn_investors a {
    border: none;
    background-color: transparent;
    padding: 0 !important
}

html.notWeb body #HEADER #GNB .depth1_area .other_btn_investors a span.txt {
    color: #fff;
    font-size: 16px !important;
    padding-right: 12px
}

html.notWeb body #HEADER #GNB .depth1_area .other_btn_investors a span.icon {
    width: 22px !important;
    height: 22px !important;
    background: url(https://www.hanwhaocean.com/images/common/icon_round_arrow_o_tr_22x22.svg) no-repeat center/contain;
    margin-left: 0 !important;
    border-radius: 100px
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area .other_btn_investors {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s
}

html.notWeb[lang=en] body #HEADER #GNB .depth1_area .other_btn_investors {
    display: none !important
}

html.notWeb #HEADER #GNB .other_services {
    width: 100%;
    justify-content: space-between;
    pointer-events: none;
    box-sizing: border-box
}

html.notWeb #HEADER #GNB .other_services .other_btn_investors {
    display: none
}

html.notWeb #HEADER #GNB .other_services .other_menu {
    opacity: 0
}

html.notWeb #HEADER #GNB .other_services .other_menu a {
    color: #fff6 !important
}

html.notWeb #HEADER #GNB .other_services .other_menu a.active {
    color: #fff !important
}

html.notWeb #HEADER #GNB .other_services .other_menu a.lang_kr,
html.notWeb #HEADER #GNB .other_services .other_menu a.lang_en,
html.notWeb[lang=en] #HEADER #GNB .other_services .other_menu a.lang_kr,
html.notWeb[lang=en] #HEADER #GNB .other_services .other_menu a.lang_en {
    display: inline-block
}

html.notWeb #HEADER #GNB .other_services .other_menu a.lang_kr {
    margin-left: 0;
    padding: 10px 12px 10px 28px
}

html.notWeb #HEADER #GNB .other_services .other_menu a.lang_kr:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: url(https://www.hanwhaocean.com/images/common/icon_lang_globe_w_20x20.svg) center/contain;
    left: 0
}

html.notWeb #HEADER #GNB .other_services .other_menu a.lang_en {
    margin-left: 1px;
    color: #fff6;
    padding: 10px 10px 10px 12px
}

html.notWeb #HEADER #GNB .other_services .other_menu a.lang_en:before {
    content: "";
    width: 1px;
    height: 14px;
    display: inline-block !important;
    vertical-align: middle;
    background-color: #fff6;
    pointer-events: none;
    position: absolute;
    top: calc(50% - 7px);
    left: 0
}

html.notWeb #HEADER #GNB .other_services .other_all_menu {
    pointer-events: all;
    width: 30px;
    height: 40px
}

html.notWeb #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
    padding: 10px 0 10px 10px;
    width: 30px;
    height: 40px
}

html.notWeb body.all_menu #HEADER #GNB {
    margin: 0 0 0 auto;
    width: 60vw
}

html.notWeb body.all_menu #HEADER #GNB .other_services .other_menu {
    opacity: 1;
    pointer-events: all
}

html.notWeb body.all_menu #HEADER #GNB .logo_area {
    opacity: 0;
    pointer-events: none
}

html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul {
    min-width: auto
}

html.notWeb body.all_menu #HEADER .gnb_dim {
    visibility: visible;
    opacity: 1;
    z-index: -1
}

html.notWeb #HEADER #GNB .depth1_area.all_menu_grid ul li.depth1_1>.depth2_box ul li:nth-child(4n+1) {
    margin-left: 0
}

html.notWeb #HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li.outlink a span img {
    width: 16px
}

@media (max-width: 768px) {
    html.notWeb #HEADER #GNB {
        padding: 0
    }

    html.notWeb #HEADER #GNB .gnb_inner {
        height: 82px
    }

    html.notWeb #HEADER #GNB .logo_area a {
        padding: 0 20px
    }

    html.notWeb body.all_menu #HEADER #GNB {
        margin: 0;
        width: 100%
    }

    html.notWeb body.all_menu #HEADER {
        height: 100vh
    }

    html.notWeb body.all_menu #HEADER:before {
        display: none
    }

    html.notWeb #HEADER .mo_bg {
        background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
        display: block;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 100vh;
        transition: transform .5s cubic-bezier(.39, 0, .12, .99), width .5s cubic-bezier(.39, 0, .12, .99)
    }

    html.notWeb body.all_menu #HEADER .mo_bg {
        width: 100vw
    }

    html.notWeb #HEADER #GNB .depth1_area {
        width: 100%;
        height: auto;
        opacity: 1;
        transition: none
    }

    html.notWeb #HEADER #GNB .depth1_area>ul {
        display: block;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 102px;
        max-width: min(68.75vw, 1320px);
        width: 100%;
        transition: none;
        min-width: 100%
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>* {
        color: #fff;
        transition: none
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li {
        display: block;
        width: calc(100% - 40px);
        text-align: left;
        height: auto;
        font-size: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        transition: border .3s;
        margin: 0 20px;
        height: 66px;
        overflow: hidden;
        box-sizing: border-box
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li:first-child {
        padding-top: 0
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li:last-child {
        border-bottom: 0
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li>a {
        display: block;
        vertical-align: top;
        width: 100%;
        margin-right: 0;
        font-size: 18px;
        line-height: 1.4;
        padding: 20px 0;
        color: #fff;
        transition: none
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li>a:after {
        content: "";
        position: absolute;
        right: 0;
        top: calc(50% - 10px);
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_w.svg) no-repeat center/contain;
        width: 20px;
        height: 20px;
        display: block;
        transform: rotate(180deg);
        transition: transform .3s;
        opacity: 0
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li.active>a:after {
        transform: rotate(0)
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li>a>span {
        padding: 0;
        color: #fff;
        transform: translateY(100%)
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li>a>span:before {
        display: none
    }

    html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box {
        display: inline-block;
        vertical-align: top;
        height: auto;
        padding-top: 0;
        transition: none;
        opacity: 0;
        transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s
    }

    html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul {
        max-width: 100%;
        font-size: 0;
        vertical-align: top;
        padding: 4px 0 12px 32px;
        box-sizing: border-box
    }

    html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li {
        width: 100%;
        margin-left: 0;
        display: block;
        vertical-align: top;
        font-size: 16px;
        line-height: 1.72;
        margin-bottom: 8px
    }

    html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li a {
        font-size: 16px;
        line-height: 1.72;
        color: #fffc;
        display: block;
        padding: 8px 0
    }

    html.notWeb #HEADER #GNB .depth1_area ul li>.depth2_box ul li a.active {
        color: #fff
    }

    html.notWeb #HEADER #GNB .depth1_area .depth1_ul>li>a.active>span:before {
        display: none
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area {
        overflow-x: hidden;
        height: calc(100vh - 82px);
        transform: translateY(82px);
        overflow-y: auto;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul {
        padding-top: 0;
        padding-bottom: 40px;
        min-width: 100%
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul>li {
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        transition-delay: .5s
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul>li.only_mobile {
        border-bottom: 1px solid rgba(255, 255, 255, .2)
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area ul li>.depth2_box {
        transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s;
        transition-delay: 0s;
        width: 100%
    }

    html.notWeb #HEADER #GNB .depth1_area>ul>li>a>span {
        transform: translateY(200%)
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area>ul>li>a>span {
        transform: translateY(200%);
        opacity: 0;
        transition: transform 1s cubic-bezier(.39, 0, .12, .99), opacity .5s cubic-bezier(.39, 0, .12, .99)
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span {
        transform: translateY(0);
        opacity: 1
    }

    html.notWeb body.all_menu #HEADER #GNB .depth1_area ul li>.depth2_box {
        transition-delay: .3s
    }

    html.notWeb body #HEADER #GNB .depth1_area .other_btn_investors {
        padding-left: 20px;
        padding-right: 20px
    }

    html.notWeb #HEADER #GNB .other_services {
        width: 100%;
        justify-content: space-between;
        pointer-events: none;
        padding: 0 20px;
        box-sizing: border-box
    }

    html.notWeb #HEADER #GNB .other_services .other_menu {
        opacity: 0
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a {
        color: #fff6
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a.active {
        color: #fff
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a:after {
        display: none
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a:first-child {
        margin-left: 0;
        padding: 10px 12px 10px 28px
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a:first-child:before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        background: url(https://www.hanwhaocean.com/images/common/icon_lang_globe_w_20x20.svg) center/contain;
        left: 0
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a.only_mobile:before {
        content: "";
        width: 1px;
        height: 14px;
        display: inline-block !important;
        vertical-align: middle;
        background-color: #fff6;
        pointer-events: none;
        position: absolute;
        top: calc(50% - 7px);
        left: 0
    }

    html.notWeb #HEADER #GNB .other_services .other_menu a.only_mobile {
        display: inline-block !important;
        margin-left: 1px;
        color: #fff6;
        padding: 10px 10px 10px 12px
    }

    html.notWeb #HEADER #GNB .other_services .other_all_menu {
        pointer-events: all;
        width: 30px;
        height: 40px
    }

    html.notWeb #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
        padding: 10px 0 10px 10px;
        width: 30px;
        height: 40px
    }

    html.notWeb body.all_menu #HEADER #GNB .other_services .other_menu {
        opacity: 1;
        pointer-events: all
    }

    html.notWeb body.all_menu #HEADER #GNB .logo_area {
        opacity: 0;
        pointer-events: none
    }

    html.notWeb[lang=en] body.all_menu #HEADER #GNB .depth1_area ul li>.depth2_box br {
        display: none
    }
}

@media (min-width: 769px) {
    #HEADER #GNB .depth1_area.all_menu_grid ul li.depth1_1>.depth2_box ul li:nth-child(4n+1) {
        margin-left: 24px
    }

    #HEADER #GNB .depth1_area.all_menu_grid ul li.depth1_1>.depth2_box ul li:nth-child(2) {
        margin-left: 0
    }

    #HEADER #GNB .depth1_area.all_menu_grid ul li.depth1_1>.depth2_box ul li:nth-child(6) {
        margin-left: 0
    }
}

@media (max-width: 1023px) {

    .pace,
    .pace .pace-progress {
        height: 4px
    }

    #HEADER {
        height: 80px
    }

    #HEADER.fix {
        top: -80px
    }

    #HEADER .header_wrap {
        height: 80px
    }

    #HEADER .header_wrap:before {
        top: 4px;
        height: calc(100% - 4px)
    }

    #HEADER #GNB {
        padding: 0 40px
    }

    #HEADER #GNB .gnb_inner {
        height: 80px
    }

    #HEADER #GNB .logo_area,
    #HEADER #GNB .logo_area .logo {
        width: 182px;
        height: 32px
    }

    #HEADER .pc_bg {
        display: none
    }

    #HEADER.in-tablet .mo_bg {
        background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
        display: block;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 100vh;
        transition: transform .5s cubic-bezier(.39, 0, .12, .99), width .5s cubic-bezier(.39, 0, .12, .99)
    }

    body.all_menu #HEADER.in-tablet .mo_bg {
        width: 100vw
    }

    #HEADER #GNB .other_services .other_menu a {
        font-size: 12px
    }

    #HEADER #GNB .other_services .other_menu a:after {
        width: 5px;
        height: 5px;
        margin-left: 6px;
        top: -1px
    }

    #HEADER #GNB .other_services .other_all_menu {
        width: 24px;
        height: 24px
    }

    #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
        width: 24px;
        height: 24px;
        position: relative
    }

    body.all_menu .depth1_area {
        transform: translateY(0)
    }

    body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu:before {
        width: 18px
    }

    body.all_menu #HEADER #GNB .other_services .other_all_menu .btn_all_menu:after {
        width: 18px
    }

    body.all_menu #HEADER:before {
        display: none
    }

    #HEADER.in-tablet .mo_bg {
        background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
        display: block;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 100vh;
        transition: transform .5s cubic-bezier(.39, 0, .12, .99), width .5s cubic-bezier(.39, 0, .12, .99)
    }

    body.all_menu #HEADER.in-tablet .mo_bg {
        width: 60vw
    }

    #HEADER.in-tablet #GNB .depth1_area {
        width: 100%;
        height: auto;
        opacity: 1;
        transition: none
    }

    #HEADER.in-tablet #GNB .depth1_area>ul {
        display: block;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 102px;
        max-width: min(68.75vw, 1320px);
        width: 100%;
        transition: none;
        min-width: 100%
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>* {
        color: #fff;
        transition: none
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li {
        display: block;
        width: 100%;
        text-align: left;
        height: auto;
        font-size: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        transition: border .3s;
        margin: 0;
        height: 66px;
        overflow: hidden;
        box-sizing: border-box
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li:first-child {
        padding-top: 0
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li:last-child {
        border-bottom: 0
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li>a {
        display: block;
        vertical-align: top;
        width: 100%;
        margin-right: 0;
        font-size: 18px;
        line-height: 1.4;
        padding: 20px 0;
        color: #fff;
        transition: none
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li>a:after {
        content: "";
        position: absolute;
        right: 0;
        top: calc(50% - 10px);
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_w.svg) no-repeat center/contain;
        width: 20px;
        height: 20px;
        display: block;
        transform: rotate(180deg);
        transition: transform .3s;
        opacity: 0
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li.active>a:after {
        transform: rotate(0)
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li>a>span {
        padding: 0;
        color: #fff;
        transform: translateY(100%)
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li>a>span:before {
        display: none
    }

    #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box {
        display: inline-block;
        vertical-align: top;
        height: auto;
        padding-top: 0;
        transition: none;
        opacity: 0;
        transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s
    }

    #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box ul {
        max-width: 100%;
        font-size: 0;
        vertical-align: top;
        padding: 4px 0 12px 32px;
        box-sizing: border-box
    }

    #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box ul li {
        width: 100%;
        margin-left: 0;
        display: block;
        vertical-align: top;
        font-size: 16px;
        line-height: 1.72;
        margin-bottom: 8px
    }

    #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box ul li.only_mobile {
        display: block !important
    }

    #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box ul li a {
        font-size: 16px;
        line-height: 1.72;
        color: #fffc;
        display: block;
        padding: 8px 0
    }

    #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box ul li a.active {
        color: #fff
    }

    #HEADER.in-tablet #GNB .depth1_area .depth1_ul>li>a.active>span:before {
        display: none
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area {
        overflow-x: hidden;
        height: calc(100vh - 82px);
        transform: translateY(82px);
        overflow-y: auto;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area>ul {
        padding-top: 0;
        padding-bottom: 40px
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area>ul>li {
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        transition-delay: .5s
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area>ul>li.only_mobile {
        border-bottom: 1px solid rgba(255, 255, 255, .2)
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box {
        transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s;
        transition-delay: 0s;
        width: 100%
    }

    #HEADER.in-tablet #GNB .depth1_area>ul>li>a>span {
        transform: translateY(200%)
    }

    body.all_menu #HEADER #GNB .depth1_area>ul>li>a>span {
        transform: translateY(200%);
        opacity: 0;
        transition: transform 1s cubic-bezier(.39, 0, .12, .99), opacity .5s cubic-bezier(.39, 0, .12, .99)
    }

    body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span {
        transform: translateY(0);
        opacity: 1
    }

    body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a:after {
        opacity: 1;
        transition: transform .3s, opacity .3s;
        transition-delay: 0s, .5s
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area ul li>.depth2_box {
        transition-delay: .3s
    }

    body #HEADER #GNB .depth1_area .other_btn_investors {
        display: block !important;
        text-align: left;
        padding-bottom: 40px;
        opacity: 0;
        transform: translateY(20px);
        transition: all .5s cubic-bezier(.41, .2, .53, .84)
    }

    body #HEADER #GNB .depth1_area .other_btn_investors a {
        border: none;
        background-color: transparent;
        padding: 0 !important
    }

    body #HEADER #GNB .depth1_area .other_btn_investors a span.txt {
        color: #fff;
        font-size: 16px !important;
        padding-right: 12px
    }

    body #HEADER #GNB .depth1_area .other_btn_investors a span.icon {
        width: 22px !important;
        height: 22px !important;
        background: url(https://www.hanwhaocean.com/images/common/icon_round_arrow_o_tr_22x22.svg) no-repeat center/contain;
        margin-left: 0 !important;
        border-radius: 100px
    }

    body.all_menu #HEADER #GNB .depth1_area .other_btn_investors {
        opacity: 1;
        transform: translateY(0);
        transition-delay: .3s
    }

    html[lang=en] body #HEADER #GNB .depth1_area .other_btn_investors {
        display: none !important
    }

    #HEADER #GNB .other_services {
        width: 100%;
        justify-content: space-between;
        pointer-events: none;
        box-sizing: border-box
    }

    #HEADER #GNB .other_services .other_btn_investors {
        display: none
    }

    #HEADER #GNB .other_services .other_menu {
        opacity: 0
    }

    #HEADER #GNB .other_services .other_menu a {
        color: #fff6 !important
    }

    #HEADER #GNB .other_services .other_menu a.active {
        color: #fff !important
    }

    #HEADER #GNB .other_services .other_menu a.lang_kr,
    #HEADER #GNB .other_services .other_menu a.lang_en,
    html[lang=en] #HEADER #GNB .other_services .other_menu a.lang_kr,
    html[lang=en] #HEADER #GNB .other_services .other_menu a.lang_en {
        display: inline-block
    }

    #HEADER #GNB .other_services .other_menu a.lang_kr {
        margin-left: 0;
        padding: 10px 12px 10px 28px
    }

    #HEADER #GNB .other_services .other_menu a.lang_kr:before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        background: url(https://www.hanwhaocean.com/images/common/icon_lang_globe_w_20x20.svg) center/contain;
        left: 0
    }

    #HEADER #GNB .other_services .other_menu a.lang_en {
        margin-left: 1px;
        color: #fff6;
        padding: 10px 10px 10px 12px
    }

    #HEADER #GNB .other_services .other_menu a.lang_en:before {
        content: "";
        width: 1px;
        height: 14px;
        display: inline-block !important;
        vertical-align: middle;
        background-color: #fff6;
        pointer-events: none;
        position: absolute;
        top: calc(50% - 7px);
        left: 0
    }

    #HEADER #GNB .other_services .other_all_menu {
        pointer-events: all;
        width: 30px;
        height: 40px
    }

    #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
        padding: 10px 0 10px 10px;
        width: 30px;
        height: 40px
    }

    body.all_menu #HEADER.in-tablet #GNB {
        margin: 0 0 0 auto;
        width: 60vw
    }

    body.all_menu #HEADER #GNB .other_services .other_menu {
        opacity: 1;
        pointer-events: all
    }

    body.all_menu #HEADER #GNB .logo_area {
        opacity: 0;
        pointer-events: none
    }

    body.all_menu #HEADER.in-tablet #GNB .depth1_area>ul {
        min-width: auto
    }

    body.all_menu #HEADER.in-tablet .gnb_dim {
        visibility: visible;
        opacity: 1;
        z-index: -1
    }

    #HEADER #GNB .depth1_area.all_menu_grid ul li.depth1_1>.depth2_box ul li:nth-child(4n+1) {
        margin-left: 0
    }

    #HEADER #GNB .depth1_area.all_menu_grid ul li>.depth2_box ul li.outlink a span img {
        width: 16px
    }
}

@media (max-width: 768px) {
    #HEADER #GNB {
        padding: 0
    }

    #HEADER #GNB .gnb_inner {
        height: 82px
    }

    #HEADER #GNB .logo_area a {
        padding: 0 20px
    }

    body.all_menu #HEADER:before {
        display: none
    }

    #HEADER.in-mobile .mo_bg {
        background: url(https://www.hanwhaocean.com/images/common/bg_header_sitemap.webp) no-repeat center/cover;
        display: block;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 100vh;
        transition: transform .5s cubic-bezier(.39, 0, .12, .99), width .5s cubic-bezier(.39, 0, .12, .99)
    }

    body.all_menu #HEADER.in-mobile .mo_bg {
        width: 100vw
    }

    #HEADER.in-mobile #GNB .depth1_area {
        width: 100%;
        height: auto;
        opacity: 1;
        transition: none
    }

    #HEADER.in-mobile #GNB .depth1_area>ul {
        display: block;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 102px;
        max-width: min(68.75vw, 1320px);
        width: 100%;
        transition: none;
        min-width: 100%
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>* {
        color: #fff;
        transition: none
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li {
        display: block;
        width: calc(100% - 40px);
        text-align: left;
        height: auto;
        font-size: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        transition: border .3s;
        margin: 0 20px;
        height: 66px;
        overflow: hidden;
        box-sizing: border-box
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li:first-child {
        padding-top: 0
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li:last-child {
        border-bottom: 0
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li>a {
        display: block;
        vertical-align: top;
        width: 100%;
        margin-right: 0;
        font-size: 18px;
        line-height: 1.4;
        padding: 20px 0;
        color: #fff;
        transition: none
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li>a:after {
        content: "";
        position: absolute;
        right: 0;
        top: calc(50% - 10px);
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_w.svg) no-repeat center/contain;
        width: 20px;
        height: 20px;
        display: block;
        transform: rotate(180deg);
        transition: transform .3s;
        opacity: 0
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li.active>a:after {
        transform: rotate(0)
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li>a>span {
        padding: 0;
        color: #fff;
        transform: translateY(100%)
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li>a>span:before {
        display: none
    }

    #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box {
        display: inline-block;
        vertical-align: top;
        height: auto;
        padding-top: 0;
        transition: none;
        opacity: 0;
        transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s
    }

    #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box ul {
        max-width: 100%;
        font-size: 0;
        vertical-align: top;
        padding: 4px 0 12px 32px;
        box-sizing: border-box
    }

    #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box ul li {
        width: 100%;
        margin-left: 0;
        display: block;
        vertical-align: top;
        font-size: 16px;
        line-height: 1.72;
        margin-bottom: 8px
    }

    #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box ul li a {
        font-size: 16px;
        line-height: 1.72;
        color: #fffc;
        display: block;
        padding: 8px 0
    }

    #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box ul li a.active {
        color: #fff
    }

    #HEADER.in-mobile #GNB .depth1_area .depth1_ul>li>a.active>span:before {
        display: none
    }

    body.all_menu #HEADER.in-mobile #GNB .depth1_area {
        overflow-x: hidden;
        height: calc(100vh - 82px);
        transform: translateY(82px);
        overflow-y: auto;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    body.all_menu #HEADER.in-mobile #GNB .depth1_area>ul {
        padding-top: 0;
        padding-bottom: 40px
    }

    body.all_menu #HEADER.in-mobile #GNB .depth1_area>ul>li {
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        transition-delay: .5s
    }

    body.all_menu #HEADER.in-mobile #GNB .depth1_area>ul>li.only_mobile {
        border-bottom: 1px solid rgba(255, 255, 255, .2)
    }

    body.all_menu #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box {
        transition: opacity .3s cubic-bezier(.17, .96, .75, .88), height .3s;
        transition-delay: 0s;
        width: 100%
    }

    #HEADER.in-mobile #GNB .depth1_area>ul>li>a>span {
        transform: translateY(200%)
    }

    body.all_menu #HEADER #GNB .depth1_area>ul>li>a>span {
        transform: translateY(200%);
        opacity: 0;
        transition: transform 1s cubic-bezier(.39, 0, .12, .99), opacity .5s cubic-bezier(.39, 0, .12, .99)
    }

    body.all_menu #HEADER #GNB .depth1_area.all_menu_grid>ul>li>a>span {
        transform: translateY(0);
        opacity: 1
    }

    body.all_menu #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box {
        transition-delay: .3s
    }

    body #HEADER #GNB .depth1_area .other_btn_investors {
        padding-left: 20px;
        padding-right: 20px
    }

    #HEADER #GNB .other_services {
        width: 100%;
        justify-content: space-between;
        pointer-events: none;
        padding: 0 20px;
        box-sizing: border-box
    }

    #HEADER #GNB .other_services .other_menu {
        opacity: 0
    }

    #HEADER #GNB .other_services .other_menu a {
        color: #fff6
    }

    #HEADER #GNB .other_services .other_menu a.active {
        color: #fff
    }

    #HEADER #GNB .other_services .other_menu a:after {
        display: none
    }

    #HEADER #GNB .other_services .other_menu a:first-child {
        margin-left: 0;
        padding: 10px 12px 10px 28px
    }

    #HEADER #GNB .other_services .other_menu a:first-child:before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        background: url(https://www.hanwhaocean.com/images/common/icon_lang_globe_w_20x20.svg) center/contain;
        left: 0
    }

    #HEADER #GNB .other_services .other_menu a.only_mobile:before {
        content: "";
        width: 1px;
        height: 14px;
        display: inline-block !important;
        vertical-align: middle;
        background-color: #fff6;
        pointer-events: none;
        position: absolute;
        top: calc(50% - 7px);
        left: 0
    }

    #HEADER #GNB .other_services .other_menu a.only_mobile {
        display: inline-block !important;
        margin-left: 1px;
        color: #fff6;
        padding: 10px 10px 10px 12px
    }

    #HEADER #GNB .other_services .other_all_menu {
        pointer-events: all;
        width: 30px;
        height: 40px
    }

    #HEADER #GNB .other_services .other_all_menu .btn_all_menu {
        padding: 10px 0 10px 10px;
        width: 30px;
        height: 40px
    }

    body.all_menu #HEADER #GNB .other_services .other_menu {
        opacity: 1;
        pointer-events: all
    }

    body.all_menu #HEADER #GNB .logo_area {
        opacity: 0;
        pointer-events: none
    }

    html[lang=en] body.all_menu #HEADER.in-mobile #GNB .depth1_area ul li>.depth2_box br {
        display: none
    }
}

main {
    padding-top: min(5.625vw, 108px)
}

.main-inner {
    padding-top: min(10.4166666667vw, 200px)
}

.main-inner .top_kv_area {
    position: relative;
    overflow: hidden;
    display: block
}

.main-inner .top_kv_area {
    width: calc(100% - min(6.25vw, 120px));
    margin: 0 auto
}

.main-inner .top_kv_area img {
    width: 100%;
    display: block;
    margin: 0 auto
}

.sub_top {
    position: relative
}

.sub_top .top_tit_area {
    width: 100%;
    margin: 0 auto;
    padding: 0 min(6.25vw, 120px) min(16.6666666667vw, 320px);
    max-width: 1920px;
    position: relative;
    box-sizing: border-box
}

.sub_top .top_tit_area:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
    left: 0;
    z-index: 2;
    pointer-events: none
}

.in .sub_top .top_tit_area:before {
    display: none
}

.sub_top .top_tit-inner:nth-of-type(1) {
    position: relative;
    z-index: 1
}

.sub_top .top_tit-inner:nth-of-type(2) {
    position: absolute;
    top: 0;
    color: #fff;
    z-index: 0
}

.sub_top .top_tit_area .sub_top_desc {
    margin-bottom: min(2.0833333333vw, 40px)
}

.sub_top .top_tit_area .sub_top_desc p {
    position: relative;
    overflow: hidden
}

.sub_top .top_tit_area .sub_top_desc p span {
    display: inline-block;
    transform: translateY(100%)
}

.sub_top .top_tit_area .sub_top_tit p {
    position: relative;
    overflow: hidden
}

.sub_top .top_tit_area .sub_top_tit p span {
    display: inline-block;
    transform: translateY(100%)
}

.sub_top .top_tit_area {
    position: static
}

.sub_top.top_img .top_tit_area.sticky {
    position: sticky;
    top: calc(min(10.4166666667vw, 200px) + min(5.625vw, 108px));
    height: 100%;
    padding-bottom: 0;
    z-index: 99;
    overflow: hidden
}

.sub_top .top_tit_area .top_tit-inner {
    padding-bottom: min(6.25vw, 120px)
}

.sub_top .top_tit_area .top_tit-inner.absol {
    position: absolute;
    top: 0;
    z-index: -1;
    color: #fff;
    width: 91.57%
}

.sub_top .overflow-ct .top_kv_area {
    position: relative;
    width: auto;
    margin-top: min(8.3333333333vw, 160px);
    overflow: hidden;
    opacity: 0;
    animation: fadeInKv 1.3s 1.6s forwards;
    z-index: -1
}

.sub_top .overflow-ct .top_kv_area .core-wrap {
    overflow: hidden;
    display: block;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    max-width: 100%
}

.sub_top .overflow-ct .top_kv_area .core-wrap-inner {
    display: block
}

.sub_top .overflow-ct .top_kv_area .core {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sub_top .overflow-ct .top_kv_area .dim {
    position: relative
}

.sub_top .overflow-ct .top_kv_area .dim:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #15151533;
    z-index: 1
}

.sub_top.top_txt .top_tit_area,
.sub_top.top_txt .top_tit_area .top_tit-inner {
    padding-bottom: 0
}

.sub_top .top_tit-inner .desc {
    position: relative;
    overflow: hidden
}

.sub_top .top_tit-inner .desc p {
    transform: translateY(300%)
}

body.page-in-active .sub_top .top_tit-inner .desc p {
    transform: translateY(0);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99);
    transition-delay: .2s
}

@keyframes fadeInKv {
    0% {
        opacity: 0;
        transform: translateY(30%) scale(.8)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@media (max-width: 1023px) {
    main {
        padding-top: 80px
    }

    .main-inner {
        padding-top: 112px
    }

    .sub_top .top_tit_area {
        padding: 0 50px 120px
    }

    .sub_top.top_img .top_tit_area.sticky {
        top: 192px
    }

    .sub_top .top_tit_area .top_tit-inner {
        padding-bottom: 120px
    }

    .sub_top .top_tit_area .sub_top_desc {
        margin-bottom: 24px
    }

    .sub_top .overflow-ct .top_kv_area {
        margin-top: 80px
    }
}

@media (max-width: 768px) {
    .main-inner {
        padding-top: 60px
    }

    .sub_top .top_tit_area {
        padding: 0 20px
    }

    .sub_top.top_img .top_tit_area.sticky {
        top: 60px
    }

    .sub_top .top_tit_area .top_tit-inner {
        padding-bottom: 60px
    }

    .sub_top .top_tit_area .sub_top_desc {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px
    }

    .sub_top .overflow-ct .top_kv_area {
        margin-top: 52px;
        height: 130.7vw
    }

    .sub_top .top_tit_area .top_tit-inner.absol {
        width: 89.335%
    }

    .sub_top .overflow-ct .top_kv_area .core-wrap {
        height: auto
    }

    .sub_top .overflow-ct .top_kv_area .core-wrap-inner {
        height: 130.7vw
    }
}

body.page-in-active .sub_top .top_tit_area .sub_top_tit p:nth-of-type(2) span {
    transition-delay: .2s
}

body.page-in-active .sub_top .top_tit_area .sub_top_tit p:nth-of-type(3) span {
    transition-delay: .3s
}

body.page-in-active .sub_top .top_tit_area .sub_top_tit p:nth-of-type(4) span {
    transition-delay: .4s
}

body.page-in-active .sub_top .top_tit_area .sub_top_tit p:nth-of-type(5) span {
    transition-delay: .5s
}

body.page-in-active .sub_top .top_tit_area .sub_top_desc p span {
    transform: translateY(0);
    transition: all .8s cubic-bezier(.39, 0, .12, .99)
}

body.page-in-active .sub_top .top_tit_area .sub_top_tit p span {
    transform: translateY(0);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.sub_container {
    position: relative;
    margin: 0 auto;
    height: 100%
}

.sub_container .sec_inner {
    position: relative;
    margin: 0 auto;
    padding-left: min(6.25vw, 120px);
    padding-right: min(6.25vw, 120px);
    max-width: 1680px;
    height: 100%
}

.main-inner.grid8 .sub_container .sec_inner,
.main-inner.grid8 .sub_top .top_tit_area {
    max-width: 1104px
}

@media (max-width: 1023px) {
    .sub_container .sec_inner {
        padding-left: 50px;
        padding-right: 50px;
        width: 100%;
        box-sizing: border-box
    }

    .main-inner.grid8 .sub_container .sec_inner {
        max-width: 1200px;
        min-width: 100%;
        padding: 0 150px
    }
}

@media (max-width: 768px) {

    .sub_container .sec_inner,
    .main-inner.grid8 .sub_container .sec_inner {
        padding: 0 20px
    }
}

body.hide-ft #FOOTER,
body.pace-done.hide-ft .load_ocean {
    display: none
}

#FOOTER.no-pd {
    padding-top: 0
}

#FOOTER {
    padding-top: min(14.5833333333vw, 280px);
    position: relative;
    background-color: #fff
}

#FOOTER .footer-container {
    position: relative;
    text-align: center
}

#FOOTER .footer-container .btn_go_top {
    position: absolute;
    top: calc(min(5.2083333333vw, 100px)*-1);
    right: min(6.25vw, 120px);
    z-index: 3
}

#FOOTER .footer-container .btn_go_top.m_btn[type=icon][hover=ripple] {
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    border-radius: min(.5208333333vw, 10px);
    background-color: #151515;
    border: none
}

#FOOTER .footer-container .btn_go_top.m_btn[type=icon][hover=ripple]:before {
    background-color: #f60
}

#FOOTER .footer-container .btn_go_top.m_btn[type=icon][hover=ripple]:after {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_arroe_top_w_28x28.svg)
}

#FOOTER .footer-container .footer-inner {
    box-sizing: border-box;
    text-align: left;
    padding: min(4.0625vw, 78px) min(6.25vw, 120px) 0;
    background-color: #151515;
    position: relative
}

#FOOTER .footer-container .footer-content {
    margin: 0 auto;
    max-width: 1680px;
    position: relative
}

#FOOTER .footer-container .footer-menu {
    width: min(49.5833333333vw, 952px)
}

#FOOTER .footer-container .footer-menu ul.f_depth1_ul {
    display: flex;
    flex-wrap: wrap;
    width: min(49.5833333333vw, 952px)
}

#FOOTER .footer-container .footer-menu ul.f_depth1_ul>li {
    width: min(8.9583333333vw, 172px);
    margin-left: min(4.5833333333vw, 88px);
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    margin-bottom: min(2.7083333333vw, 52px)
}

#FOOTER .footer-container .footer-menu ul.f_depth1_ul>li.f_depth1:nth-child(4n+1) {
    margin-left: 0
}

#FOOTER .footer-container .footer-menu ul li.f_depth1>a {
    color: #fff;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    display: inline-block;
    margin-bottom: min(.9375vw, 18px)
}

#FOOTER .footer-container .footer-menu ul.f_depth2 li {
    margin-bottom: min(.8333333333vw, 16px);
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.25vw, 24px)
}

#FOOTER .footer-container .footer-menu ul.f_depth2 li a {
    display: inline-block
}

#FOOTER .footer-container .footer-menu ul.f_depth2 li a span {
    color: #999;
    display: inline;
    position: relative;
    background-image: linear-gradient(#999, #999);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

#FOOTER .footer-container .footer-menu ul.f_depth2 li a:hover>span {
    background-size: 100% 1px
}

#FOOTER .footer-container .footer-menu ul.f_depth2 li.outlink a span img {
    display: inline-block;
    vertical-align: middle;
    width: min(.8333333333vw, 16px)
}

#FOOTER .footer-container .footer-copyright {
    width: min(22.65625vw, 435px);
    position: absolute;
    top: 0;
    right: 0;
    color: #999;
    text-align: right
}

#FOOTER .footer-container .footer-copyright .f_info_logo {
    width: min(19.7916666667vw, 380px);
    margin-bottom: min(.625vw, 12px);
    margin-left: auto
}

#FOOTER .footer-container .footer-copyright .f_info_logo img {
    width: 100%;
    display: block
}

#FOOTER .footer-container .footer-copyright .f_info_address,
#FOOTER .footer-container .footer-copyright .f_info_tel1 {
    margin-bottom: min(.4166666667vw, 8px)
}

#FOOTER .footer-container .footer-copyright .f_sns {
    margin-top: min(3.125vw, 60px)
}

#FOOTER .footer-container .footer-copyright .f_sns ul {
    font-size: 0;
    vertical-align: middle
}

#FOOTER .footer-container .footer-copyright .f_sns ul li {
    display: inline-block;
    margin-left: min(2.0833333333vw, 40px)
}

#FOOTER .footer-container .footer-copyright .f_sns ul li a {
    display: inline-block;
    width: min(3.9583333333vw, 76px);
    height: min(3.9583333333vw, 76px)
}

#FOOTER .footer-container .footer-copyright .f_sns ul li a img {
    display: block;
    width: 100%
}

#FOOTER .footer-container .footer-copyright .f_sns ul li a:hover {
    animation: jelly .5s
}

#FOOTER .footer-container .footer-copyright .f_copyright {
    line-height: min(1.3125vw, 25.2px);
    font-size: min(.7291666667vw, 14px);
    margin-top: min(5.7291666667vw, 110px)
}

#FOOTER .footer-container .footer-copyright .f_subsidiary {
    margin-top: min(2.2916666667vw, 44px);
    position: relative;
    width: min(15vw, 288px);
    right: 0;
    margin-left: auto
}

#FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more {
    background-color: transparent;
    border: 1px solid #4B4B4B;
    border-radius: 8px;
    position: relative;
    padding: min(.9895833333vw, 19px) min(1.09375vw, 21px) min(.9375vw, 18px);
    color: #fff;
    font-size: min(.7291666667vw, 14px);
    line-height: min(1.0208333333vw, 19.6px);
    width: min(15vw, 288px);
    text-align: left;
    box-sizing: border-box;
    background-color: #151515
}

#FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more:before {
    content: "";
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_w.svg) no-repeat center/contain;
    position: absolute;
    right: 21px;
    top: calc(50% - min(.4166666667vw, 8px));
    transition: transform .3s
}

#FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more.on:before {
    transform: rotate(180deg)
}

#FOOTER .footer-container .footer-copyright .f_subsidiary .f_subsidiary_list {
    overflow: hidden;
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: min(3.1770833333vw, 61px);
    right: 0;
    transition: height .3s;
    z-index: 3
}

#FOOTER .footer-container .footer-copyright .f_subsidiary .f_subsidiary_list.on {
    height: min(23.75vw, 456px)
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul {
    width: 100%;
    height: min(23.75vw, 456px);
    overflow-y: scroll;
    padding: min(.5208333333vw, 10px) min(1.0416666667vw, 20px);
    box-sizing: border-box;
    border: 1px solid #4B4B4B;
    border-radius: 8px;
    background-color: #151515;
    text-align: left;
    pointer-events: all;
    display: block;
    position: relative
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li {
    margin-top: min(.2083333333vw, 4px)
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li:first-child {
    margin-top: 0
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li a {
    display: block;
    color: #999;
    font-size: min(.7291666667vw, 14px);
    line-height: min(1.0208333333vw, 19.6px);
    padding: min(.5208333333vw, 10px) 0
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li a span {
    display: inline-block;
    position: relative;
    transition: color .3s
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li a span:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #fff;
    display: block;
    transition: width .3s
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li a:hover {
    color: #fff
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul li a:hover span:before {
    width: 100%
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul::-webkit-scrollbar {
    background-color: transparent;
    width: min(.2083333333vw, 4px);
    border-radius: 8px
}

#FOOTER .footer-container .footer-copyright .f_subsidiary ul::-webkit-scrollbar-thumb {
    background-color: #4b4b4b;
    border-radius: 8px
}

#FOOTER .footer-container .footer-etc_menu {
    color: #999;
    margin-top: min(1.6145833333vw, 31px);
    border-top: 1px solid #4B4B4B;
    width: 100%;
    padding: min(1.9270833333vw, 37px) 0 0
}

#FOOTER .footer-container .footer-etc_menu ul {
    font-size: 0;
    vertical-align: middle
}

#FOOTER .footer-container .footer-etc_menu ul li {
    display: inline-block;
    font-size: min(.7291666667vw, 14px);
    line-height: 1;
    margin-right: min(1.5625vw, 30px);
    vertical-align: middle;
    padding-bottom: min(2.0833333333vw, 40px)
}

#FOOTER .footer-container .footer-etc_menu ul li:last-child {
    margin-left: 0
}

#FOOTER .footer-container .footer-etc_menu ul li a {
    display: inline-block
}

#FOOTER .footer-container .footer-etc_menu ul li a span {
    color: #999;
    display: inline;
    position: relative;
    background-image: linear-gradient(#999, #534444);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

#FOOTER .footer-container .footer-etc_menu ul li a:hover span,
#FOOTER .footer-container .footer-etc_menu ul li a.active span {
    background-size: 100% 1px
}

#FOOTER .footer-container .footer-etc_menu ul li a img {
    display: inline-block;
    vertical-align: middle;
    width: min(.7291666667vw, 14px)
}

@media (max-width: 1023px) {
    #FOOTER {
        padding-top: 164px
    }

    #FOOTER .footer-container .btn_go_top.m_btn[type=icon][hover=ripple] {
        right: 50px;
        top: -64px;
        width: 40px;
        height: 40px;
        border-radius: 6.25px
    }

    #FOOTER .footer-container .btn_go_top.m_btn[type=icon][hover=ripple]:after {
        width: 17.5px;
        height: 17.5px
    }

    #FOOTER .footer-container .footer-inner {
        padding: 48px 50px 0
    }

    #FOOTER .footer-container .footer-menu,
    #FOOTER .footer-container .footer-menu ul.f_depth1_ul {
        width: 432px
    }

    #FOOTER .footer-container .footer-menu ul.f_depth1_ul>li {
        width: 122px;
        margin-left: 33px;
        margin-bottom: 26px
    }

    #FOOTER .footer-container .footer-menu ul li.f_depth1>a {
        font-size: 14px;
        line-height: 1.68;
        margin-bottom: 9px
    }

    #FOOTER .footer-container .footer-menu ul.f_depth2 li {
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.5
    }

    #FOOTER .footer-container .footer-menu ul.f_depth1_ul>li.f_depth1:nth-child(4n+1) {
        margin-left: 33px
    }

    #FOOTER .footer-container .footer-menu ul.f_depth1_ul>li.f_depth1:nth-child(3n+1) {
        margin-left: 0
    }

    #FOOTER .footer-container .footer-copyright {
        width: calc(100% - 432px)
    }

    #FOOTER .footer-container .footer-copyright .f_info_logo {
        width: 238px;
        height: 42px;
        margin-bottom: 7px
    }

    #FOOTER .footer-container .footer-copyright .f_info_address,
    #FOOTER .footer-container .footer-copyright .f_info_tel1,
    #FOOTER .footer-container .footer-copyright .f_info_tel2 {
        font-size: 12px;
        line-height: 1.5
    }

    #FOOTER .footer-container .footer-copyright .f_sns {
        margin-top: 29px
    }

    #FOOTER .footer-container .footer-copyright .f_sns ul li {
        margin-left: 25px
    }

    #FOOTER .footer-container .footer-copyright .f_sns ul li a {
        width: 48px;
        height: 48px
    }

    #FOOTER .footer-container .footer-copyright .f_copyright {
        margin-top: 68px;
        font-size: 12px;
        line-height: 1.85
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary {
        margin-top: 21px;
        width: 180px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more {
        width: 180px;
        border-radius: 5px;
        padding: 10px 12px 9px;
        font-size: 12px;
        line-height: 1.4
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more:before {
        width: 12px;
        height: 12px;
        right: 12px;
        top: calc(50% - 6px)
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .f_subsidiary_list {
        bottom: 42px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .f_subsidiary_list.on {
        height: 260px;
        bottom: 42px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary ul {
        padding: 10px 15px;
        height: 260px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary ul li {
        padding: 5px 0;
        margin-top: 0
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary ul li a {
        font-size: 12px;
        line-height: 1.4
    }

    #FOOTER .footer-container .footer-menu ul.f_depth2 li.outlink a span img {
        width: 12px
    }

    #FOOTER .footer-container .footer-etc_menu {
        margin-top: 11px;
        padding: 22px 0 0
    }

    #FOOTER .footer-container .footer-etc_menu ul li {
        font-size: 12px;
        margin-right: 18px;
        padding-bottom: 26px
    }

    #FOOTER .footer-container .footer-etc_menu ul li a img {
        width: 12px
    }
}

@media (max-width: 768px) {
    #FOOTER {
        padding-top: 140px
    }

    #FOOTER .footer-container .btn_go_top.m_btn[type=icon][hover=ripple] {
        right: 20px;
        border-radius: 8px;
        top: -60px
    }

    #FOOTER .footer-container .footer-inner {
        padding: 40px 20px 36px
    }

    #FOOTER .footer-container .footer-content {
        display: flex;
        flex-direction: column-reverse
    }

    #FOOTER .footer-container .footer-menu {
        display: none
    }

    #FOOTER .footer-container .footer-copyright {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column-reverse
    }

    #FOOTER .footer-container .footer-copyright .f_info_address,
    #FOOTER .footer-container .footer-copyright .f_info_tel1,
    #FOOTER .footer-container .footer-copyright .f_info_tel2 {
        display: none
    }

    #FOOTER .footer-container .footer-copyright .f_sns {
        order: 1;
        margin-top: 40px
    }

    #FOOTER .footer-container .footer-copyright .f_sns ul li {
        margin-left: 0;
        margin-right: 24px
    }

    #FOOTER .footer-container .footer-copyright .f_info_logo {
        margin: 36px 0 0;
        width: 240px;
        height: 44px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary {
        margin-top: 36px;
        width: 100%
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more {
        width: 100%;
        border-radius: 8px;
        padding: 18px 20px;
        font-size: 14px;
        line-height: 1.72
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .btn-subsidiary_more:before {
        width: 16px;
        height: 16px;
        right: 20px;
        top: calc(50% - 8px)
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .f_subsidiary_list {
        bottom: 66px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary .f_subsidiary_list.on {
        height: 456px;
        bottom: 66px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary ul {
        height: 456px;
        padding: 10px 20px;
        border-radius: 8px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary ul li {
        padding: 10px 0;
        margin-top: 4px
    }

    #FOOTER .footer-container .footer-copyright .f_subsidiary ul li a {
        font-size: 14px;
        line-height: 1.4
    }

    #FOOTER .footer-container .footer-copyright .f_copyright {
        order: -1;
        margin-top: 34px;
        line-height: 1.8
    }

    #FOOTER .footer-container .footer-etc_menu {
        border-top: 0;
        margin: 0;
        padding: 0
    }

    #FOOTER .footer-container .footer-etc_menu ul li {
        display: block;
        margin-right: 0;
        padding-bottom: 0;
        font-size: 16px;
        line-height: 1.72;
        margin-top: 12px
    }

    #FOOTER .footer-container .footer-etc_menu ul li:first-child {
        margin-top: 0
    }

    #FOOTER .footer-container .footer-etc_menu ul li a img {
        width: 14px
    }
}

.layer_pop_area {
    position: absolute;
    top: 160px;
    z-index: 22;
    width: 100%;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    padding: 0 min(3.125vw, 60px);
    box-sizing: border-box;
    max-width: 2040px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%)
}

.page-in-active .layer_pop_area {
    visibility: visible;
    opacity: 1
}

.layer_pop_area .layer_pop_inner {
    display: flex;
    gap: 28px;
    flex-wrap: wrap
}

.layer_pop.m_popup {
    width: 420px;
    height: 500px;
    background-color: #fff;
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 22
}

.layer_pop.m_popup {
    pointer-events: all
}

.layer_pop.m_popup .layer_head {
    font-size: 24px;
    line-height: 1.6;
    padding: 32px 24px 24px;
    text-align: center
}

.layer_pop.m_popup .layer_body {
    font-size: 16px;
    line-height: 1.5;
    padding: 0 24px
}

.layer_pop.m_popup .layer_body .l_body_btn {
    padding: 16px 0 20px;
    text-align: center
}

.layer_pop.m_popup .layer_body .l_body_btn .m_btn {
    height: 48px;
    line-height: 48px;
    padding: 0 45.5px;
    color: #fff
}

.layer_pop.m_popup .layer_body .l_body_btn .m_btn span.txt {
    font-size: 18px;
    line-height: 48px;
    font-weight: 300
}

.layer_pop.m_popup .layer_footer {
    border-top: 1px solid #E5E5E5;
    padding: 16px 24px 20px;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    pointer-events: all
}

.layer_pop.m_popup .layer_footer>div {
    display: inline-block;
    vertical-align: middle
}

.layer_pop.m_popup .layer_footer .l_ft_today span,
.layer_pop.m_popup .layer_footer .l_ft_today span label {
    pointer-events: all;
    cursor: pointer;
    display: inline-block
}

.layer_pop.m_popup .layer_footer .l_ft_today input[type=checkbox] {
    display: none
}

.layer_pop.m_popup .layer_footer .l_ft_close button {
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    vertical-align: middle
}

.layer_pop.m_popup .layer_footer .l_ft_close button span.icon {
    background: url(https://www.hanwhaocean.com/images/common/icon_close_b_36x36.png) no-repeat center/contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle
}

.layer_pop.m_popup[type=txt_more] .layer_body .l_body_inner {
    max-height: 262px;
    overflow-y: auto;
    padding-right: 10px
}

.layer_pop.m_popup[type=img] .layer_body {
    padding: 0
}

.layer_pop.m_popup[type=img] .layer_body img {
    display: block;
    width: 100%
}

.layer_pop.m_popup[type=img] .layer_body .l_body_inner {
    height: 440px !important;
    overflow-y: auto
}

.layer_pop.m_popup[type=img_more] .layer_body .l_body_inner {
    max-height: 262px;
    overflow-y: auto
}

.layer_pop.m_popup[type=img_more] .layer_body .l_body_inner img {
    display: block;
    width: 100%
}

.layer_pop.m_popup[type=txt] .layer_body {
    padding: 0 24px 32px
}

.layer_pop.m_popup[type=txt] .layer_body .l_body_inner {
    max-height: 314px;
    overflow-y: auto;
    padding-right: 20px
}

.layer_pop.m_popup .layer_body .l_body_inner::-webkit-scrollbar {
    background-color: #e5e5e5;
    width: min(.2083333333vw, 4px)
}

.layer_pop.m_popup .layer_body .l_body_inner::-webkit-scrollbar-thumb {
    background-color: #4b4b4b
}

.layer_pop.m_popup .layer_body .l_body_inner img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media (max-width: 1023px) {
    .layer_pop.m_popup {
        height: 462px
    }

    .layer_pop_area {
        width: 100%;
        padding: 0 50px
    }

    .layer_pop.m_popup .layer_head {
        font-size: 16px;
        line-height: 1.6;
        padding: 22px 20px 20px
    }

    .layer_pop.m_popup .layer_body .l_body_inner::-webkit-scrollbar {
        width: 4px
    }

    .layer_pop.m_popup .layer_body {
        font-size: 14px;
        line-height: 1.68;
        padding: 0 20px
    }

    .layer_pop.m_popup .layer_body .l_body_btn .m_btn {
        height: 35px;
        line-height: 35px
    }

    .layer_pop.m_popup .layer_body .l_body_btn .m_btn span.txt {
        font-size: 14px !important;
        line-height: 1.68 !important;
        font-weight: 400
    }

    .layer_pop.m_popup[type=img] .layer_body .l_body_inner {
        height: 400px !important
    }

    .layer_pop.m_popup[type=img_more] .layer_body .l_body_inner {
        max-height: 260px
    }

    .layer_pop.m_popup[type=txt] .layer_body .l_body_inner {
        max-height: 300px
    }
}

@media (max-width: 768px) {
    .layer_pop_area {
        padding: 0 20px;
        top: 136px
    }

    .layer_pop_area .layer_pop_inner {
        justify-content: center
    }

    .layer_pop.m_popup {
        height: 540px;
        max-width: 335px;
        position: absolute;
        left: 50%;
        transform: translate(-50%)
    }

    .layer_pop.m_popup .layer_head {
        font-size: 20px;
        line-height: 1.56;
        padding: 24px 28px 20px
    }

    .layer_pop.m_popup .layer_body .l_body_inner::-webkit-scrollbar {
        width: 4px
    }

    .layer_pop.m_popup .layer_body {
        font-size: 14px;
        line-height: 1.72;
        padding: 0 28px
    }

    .layer_pop.m_popup .layer_body .l_body_btn {
        padding: 32px 0
    }

    .layer_pop.m_popup .layer_body .l_body_btn .m_btn {
        height: 44px;
        line-height: 44px !important;
        padding: 0 32px !important
    }

    .layer_pop.m_popup .layer_body .l_body_btn .m_btn span.txt {
        line-height: 40px !important;
        vertical-align: middle
    }

    .layer_pop.m_popup .layer_footer {
        padding: 14px 28px 13px;
        font-size: 14px;
        line-height: 1.72
    }

    .layer_pop.m_popup .layer_footer .l_ft_close button {
        font-size: 14px;
        line-height: 1.72
    }

    .layer_pop.m_popup .layer_footer .l_ft_close button span.icon {
        width: 16px;
        height: 16px
    }

    .layer_pop.m_popup[type=txt_more] .layer_body .l_body_inner {
        max-height: 306px;
        color: #4b4b4b
    }

    .layer_pop.m_popup[type=img] .layer_body .l_body_inner {
        height: 489px !important
    }

    .layer_pop.m_popup[type=img_more] .layer_body .l_body_inner {
        max-height: 306px
    }

    .layer_pop.m_popup[type=txt] .layer_body .l_body_inner {
        max-height: 382px
    }
}

.copy_popup {
    opacity: 0;
    visibility: hidden;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    position: fixed;
    width: min(17.2395833333vw, 331px);
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
    bottom: 0;
    padding: min(.625vw, 12px) min(1.0416666667vw, 20px);
    box-sizing: border-box;
    border: 1px solid #151515;
    background-color: #fff;
    box-shadow: 0 0 min(.5208333333vw, 10px) 0 #0003;
    border-radius: min(1.5625vw, 30px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.copy_popup.active {
    opacity: 1;
    visibility: visible;
    bottom: min(3.125vw, 60px)
}

.copy_popup .txt {
    position: relative;
    padding-left: min(1.875vw, 36px);
    font-weight: 300
}

.copy_popup .txt:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_check_o.svg) no-repeat center center/contain
}

.copy_popup .icon {
    position: relative;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    padding: min(.2416666667vw, 4.64px);
    box-sizing: border-box
}

.copy_popup .icon:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://www.hanwhaocean.com/images/common/icon_x_btn.svg) no-repeat center center/contain;
    transition: all .2s cubic-bezier(.41, .2, .53, .84)
}

.copy_popup .icon:hover:after {
    transform: rotate(90deg)
}

@media (max-width: 1023px) {
    .copy_popup {
        width: 27.8571428571%;
        padding: 8px 16px;
        border-radius: 30px
    }

    .copy_popup.active {
        bottom: 60px
    }

    .copy_popup .txt {
        padding-left: 24px
    }

    .copy_popup .txt:after {
        width: 16px;
        height: 16px
    }

    .copy_popup .icon {
        width: 16px;
        height: 16px;
        padding: 3px
    }
}

@media (max-width: 768px) {
    .copy_popup {
        width: 267px;
        padding: 10px 16px;
        border-radius: 40px
    }

    .copy_popup.active {
        bottom: 40px
    }

    .copy_popup .txt {
        padding-left: 28px
    }

    .copy_popup .txt:after {
        width: 20px;
        height: 20px
    }

    .copy_popup .icon {
        width: 20px;
        height: 20px;
        padding: 3.87px
    }
}

.txt_ef.txt_ef_up p {
    overflow: hidden;
    position: relative
}

.txt_ef.txt_ef_up p span {
    display: inline-block;
    position: relative;
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(.67, .11, .39, .97)
}

.txt_ef.txt_ef_up.active p span {
    transform: translateY(0)
}

.txt_ef.txt_ef_op {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .4s, transform 1s
}

.txt_ef.txt_ef_op.active {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .4s
}

.txt_ef.txt_ef_scr>p {
    overflow: hidden;
    position: relative;
    padding-top: 5px;
    margin-bottom: -5px
}

.txt_ef.txt_ef_scr>p>span {
    display: block;
    opacity: 0;
    transform: translate3d(0, 120%, 0)
}

section .in_sec_copy {
    opacity: 0;
    transform: translateY(48%)
}

.page-in-active section .in_sec_copy.in_sec {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(.39, 0, .12, .99), transform 1.2s cubic-bezier(.39, 0, .12, .99)
}

section .in_sec_box_area .in_sec_box {
    opacity: 0;
    transform: translateY(20%)
}

.page-in-active section .in_sec_box_area .in_sec_box.in_sec {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(.39, 0, .12, .99), transform 1.2s cubic-bezier(.39, 0, .12, .99)
}

#landscape {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
    touch-action: none;
    flex-flow: column;
    text-align: center
}

#landscape .icon {
    position: relative
}

#landscape .icon img:first-child {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(6deg);
    animation: landscapeArrow 1.8s ease infinite
}

#landscape .desc {
    font-size: 16px;
    line-height: 1.72;
    color: #fff;
    margin-top: 20px
}

@keyframes landscapeArrow {
    0% {
        transform: rotate(6deg)
    }

    50% {
        transform: rotate(-6deg)
    }

    to {
        transform: rotate(6deg)
    }
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {
    #landscape {
        display: flex
    }
}

.line-tab {
    display: flex;
    column-gap: min(1.6666666667vw, 32px)
}

@media (max-width: 1023px) {
    .line-tab {
        column-gap: 20px;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        max-width: none
    }

    .line-tab::-webkit-scrollbar {
        display: none
    }
}

.line-tab>* {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.line-tab .tab-item {
    position: relative;
    display: flex;
    align-items: center;
    color: #b8b8b8;
    transition: .3s !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    margin: 0 !important;
    font-size: min(1.6666666667vw, 32px) !important;
    line-height: 1.6 !important
}

@media (max-width: 1023px) {
    .line-tab .tab-item {
        font-size: 20px !important
    }
}

@media (max-width: 768px) {
    .line-tab .tab-item {
        font-size: 20px !important;
        line-height: 1.56 !important
    }
}

.line-tab .tab-item:before {
    display: none !important
}

.line-tab .tab-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #151515;
    transform: scaleX(0) !important;
    transform-origin: left;
    transition: .3s !important
}

.line-tab .tab-item .icon {
    width: min(1.3020833333vw, 25px) !important;
    height: min(1.3020833333vw, 25px) !important;
    opacity: .3 !important;
    margin-left: min(.15625vw, 3px);
    transition: .3s !important
}

@media (max-width: 1023px) {
    .line-tab .tab-item .icon {
        width: 18px !important;
        height: 18px !important;
        margin-left: 3px
    }
}

.line-tab .tab-item.on,
.line-tab .tab-item.active,
.line-tab .tab-item:hover {
    color: #151515 !important
}

.line-tab .tab-item.on:after,
.line-tab .tab-item.active:after,
.line-tab .tab-item:hover:after {
    transform: scaleX(1) !important
}

.line-tab .tab-item.on .icon,
.line-tab .tab-item.active .icon,
.line-tab .tab-item:hover .icon {
    opacity: 1 !important
}

@media (min-width: 769px) and (max-width: 1023px) {
    .input_box {
        border-bottom: 1px solid #999999 !important
    }

    .input_box .del_btn {
        width: 15px !important;
        height: 15px !important
    }

    .input_box .del_btn:before,
    .input_box .del_btn:after {
        width: 8px !important;
        height: 1px !important
    }

    .input_box:after {
        bottom: -1px !important;
        height: 1px !important
    }

    .input_box input[type=number],
    .input_box input[type=text] {
        padding: 12px 0 !important;
        font-size: 12px !important;
        line-height: 20px !important
    }

    .input_box .select_btn {
        width: 12px !important;
        height: 12px !important
    }
}

.ocean_error .main-inner section {
    position: relative;
    padding: min(12.5vw, 240px) min(6.25vw, 120px) 0;
    max-width: 1104px;
    margin: 0 auto;
    min-height: min(16.6145833333vw, 319px);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.ocean_error .main-inner .err_tit {
    margin-bottom: min(2.0833333333vw, 40px)
}

.ocean_error .main-inner .err_txt {
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    font-weight: 300
}

.ocean_error .main-inner .err_btn {
    display: flex;
    justify-content: flex-end;
    gap: min(1.0416666667vw, 20px)
}

.ocean_error .main-inner .err_btn .m_btn {
    min-width: min(12.5vw, 240px)
}

@media (max-width: 1023px) {
    .ocean_error .main-inner section {
        padding: 112px 50px 0;
        min-height: 280px
    }

    .ocean_error .main-inner .err_tit {
        margin-bottom: 37px
    }

    .ocean_error .main-inner .err_txt {
        font-size: 14px;
        line-height: 1.68
    }

    .ocean_error .main-inner .err_btn {
        gap: 20px
    }

    .ocean_error .main-inner .err_btn .m_btn {
        min-width: 95px
    }
}

@media (max-width: 768px) {
    .ocean_error .main-inner section {
        padding: 160px 20px 0;
        min-height: 400px
    }

    .ocean_error .main-inner .err_tit {
        margin-bottom: 40px;
        font-size: 24px !important;
        line-height: 1.6 !important
    }

    .ocean_error .main-inner .err_txt {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 400;
        color: #4b4b4b
    }

    .ocean_error .main-inner .err_btn {
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 12px;
        align-items: center
    }

    .ocean_error .main-inner .err_btn .m_btn {
        min-width: 158px;
        width: 158px
    }
}

#MAIN {
    padding-top: 0;
    opacity: 0
}

.page-in-active #MAIN {
    opacity: 1;
    transition: opacity .3s ease-in-out
}

#MAIN .main-inner {
    padding-top: 0
}

#MAIN section {
    width: 100%;
    text-align: left;
    background: #fff;
    position: relative
}

#MAIN #KV {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden
}

#MAIN #KV .sec_inner {
    position: sticky;
    width: 100%;
    height: 100vh;
    top: 0;
    overflow: hidden
}

#MAIN #KV .sec_copy_area {
    position: absolute;
    z-index: 2;
    width: 100%;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    bottom: min(3.9583333333vw, 76px)
}

#MAIN #KV .sec_copy_area .s_copy_inner {
    max-width: 1920px;
    margin: 0 auto;
    position: relative
}

#MAIN #KV .sec_copy_area .kv_tit {
    color: #fff;
    margin-top: 0
}

#MAIN #KV .sec_copy_area .kv_desc {
    color: #fff;
    font-size: min(1.25vw, 24px);
    line-height: min(1.7vw, 32.64px);
    margin-top: min(1.25vw, 24px)
}

#MAIN #KV .kv_bg_area,
#MAIN #KV .kv_bg_area ul {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 1080px
}

#MAIN #KV .kv_bg_area ul li {
    opacity: 0;
    z-index: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 1080px;
    height: 100vh
}

#MAIN #KV .video-wrap {
    position: relative;
    width: 100%;
    height: 100%
}

#MAIN #KV .video-wrap:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: min(20.8333333333vw, 400px);
    display: block;
    background: url(https://www.hanwhaocean.com/images/main/kv_dim.png) repeat-x center/contain;
    z-index: 0
}

#MAIN #KV .video-wrap.paused:after {
    background: #fff
}

#MAIN #KV .video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#MAIN #KV video {
    object-fit: fill
}

#MAIN #KV .kv_scroll {
    position: absolute;
    right: min(-.78125vw, -15px);
    bottom: min(2.3958333333vw, 46px);
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    animation: KVscroll 2s infinite cubic-bezier(.39, 0, .12, .99)
}

#MAIN #KV .kv_scroll img {
    display: block;
    width: 100%
}

#MAIN #KV .video_progress {
    position: relative;
    width: 100%;
    height: min(.1041666667vw, 2px);
    background-color: #d9d9d980;
    display: flex;
    z-index: 1;
    margin-top: min(4.1666666667vw, 80px)
}

#MAIN #KV .video_progress .video_progress_fill {
    height: min(.2083333333vw, 4px);
    background-color: #fff;
    transition: all .8s;
    margin-top: calc(min(.1041666667vw, 2px)*-1)
}

@media (max-width: 1023px) {
    #MAIN br.pc {
        display: block
    }

    #MAIN #KV .sec_copy_area {
        padding: 0 50px;
        bottom: 50px
    }

    #MAIN #KV .sec_copy_area .kv_desc {
        margin-top: 15px;
        font-size: 16px;
        line-height: 1.36
    }

    #MAIN #KV .video_progress {
        margin-top: 50px;
        height: 2px
    }

    #MAIN #KV .kv_scroll {
        width: 38px;
        height: 38px;
        right: -7px;
        bottom: 28px
    }

    #MAIN #KV .video_progress .video_progress_fill {
        height: 4px;
        margin-top: -2px
    }
}

@media (max-width: 768px) {
    #MAIN br.pc {
        display: none
    }

    #MAIN #KV .sec_copy_area {
        padding: 0 20px;
        bottom: 40px
    }

    #MAIN #KV .sec_copy_area .kv_desc {
        font-size: 16px;
        line-height: 1.72;
        margin-top: 20px
    }

    #MAIN #KV .video_progress {
        margin-top: 56px
    }

    #MAIN #KV .kv_bg_area {
        min-height: 812px
    }

    #MAIN #KV .kv_scroll {
        display: none
    }
}

#MAIN .m_btn[type=text][hover=arrow] span.txt {
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

#MAIN .m_btn[type=text][hover=arrow] span.icon:before,
#MAIN .m_btn[type=text][hover=arrow] span.icon:after {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_o.svg);
    width: min(.625vw, 12px);
    height: min(.4166666667vw, 8px);
    top: calc(50% - min(.2083333333vw, 4px));
    left: calc(50% - min(.3125vw, 6px))
}

#MAIN .m_btn[type=text][hover=arrow][bg=b] span.txt {
    color: #fff
}

#MAIN .sec_tit p {
    overflow: hidden;
    position: relative
}

#MAIN .sec_tit p span {
    display: inline-block;
    position: relative;
    transform: translateY(100%);
    transition: all 1s cubic-bezier(.67, .11, .39, .97)
}

.page-in-active #MAIN.in .sec_tit p span {
    transform: translateY(0);
    transition-delay: .1s
}

#MAIN .sec_desc p {
    overflow: hidden;
    position: relative
}

#MAIN .sec_desc p span {
    display: inline-block;
    position: relative;
    transform: translateY(100%);
    transition: all 1s cubic-bezier(.67, .11, .39, .97)
}

.page-in-active #MAIN.in .sec_desc p span {
    transform: translateY(0);
    transition-delay: .35s
}

@keyframes KVscroll {
    0% {
        transform: translateY(-20px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-20px)
    }
}

#MAIN #WHOWEARE .sec_inner {
    height: 250vh
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner {
    position: sticky;
    top: 0;
    padding: min(8.3333333333vw, 160px) 0;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-video {
    position: relative;
    width: min(36.40625vw, 699px);
    text-align: left;
    margin-right: min(6.09375vw, 117px)
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-video span {
    overflow: hidden;
    display: inline-block;
    font-size: min(3.75vw, 72px);
    color: #1c1c1c;
    line-height: min(5.25vw, 100.8px);
    vertical-align: top
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-video span strong {
    transform: translateY(100%);
    display: inline-block
}

#MAIN #WHOWEARE .sec_inner .title-video .text3 {
    margin-left: calc(min(6.25vw, 120px) + min(3.125vw, 60px))
}

#MAIN #WHOWEARE .vid-container {
    position: absolute;
    width: min(6.25vw, 120px);
    height: min(3.5416666667vw, 68px);
    top: min(14.2708333333vw, 274px);
    left: calc(50% + min(16.9791666667vw, 326px))
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .video-wrap {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .video-wrap video {
    width: 100%;
    height: 100%;
    display: inline-block;
    object-fit: cover;
    transform: translateY(120%)
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr {
    position: absolute;
    opacity: 0;
    transform: translateY(100px);
    right: 127px;
    bottom: 160px
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr p {
    line-height: min(4.875vw, 93.6px);
    font-size: min(3.125vw, 60px);
    color: #fff
}

#MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr .sec_btn_more {
    margin-top: min(3.125vw, 60px)
}

#MAIN #WHOWEARE .m_btn[type=text][hover=arrow] span.txt {
    color: #fff
}

@media (max-width: 1023px) {
    #MAIN #WHOWEARE .sec_inner .whoweare-inner {
        padding: 100px 0
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-wrap {
        padding: 0 156px 0 50px
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-video span {
        font-size: 44px;
        line-height: 1.4
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-video {
        margin-right: 0;
        width: auto
    }

    #MAIN #WHOWEARE .vid-container {
        top: 174px;
        right: 325px;
        width: 60px;
        height: auto;
        aspect-ratio: 30/17;
        left: auto
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr {
        right: 51px;
        bottom: 90px
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr p {
        font-size: 40px;
        line-height: 1.56
    }
}

@media (max-width: 768px) {
    #MAIN #WHOWEARE .sec_inner .whoweare-inner {
        padding: 60px 0
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-wrap {
        padding: 0 20px;
        flex-direction: column;
        gap: 20px
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-wrap .title-eyebrow {
        font-size: 14px !important;
        line-height: 1.72 !important
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-video span {
        font-size: 28px;
        line-height: 1.44
    }

    #MAIN #WHOWEARE .sec_inner .title-video .text3 {
        margin-left: 72px
    }

    #MAIN #WHOWEARE .vid-container {
        width: 66px;
        height: 36px;
        top: 144px;
        right: auto;
        left: 132px
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr {
        right: auto;
        left: 20px;
        bottom: 60px
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr p {
        font-size: 28px;
        line-height: 1.44
    }

    #MAIN #WHOWEARE .sec_inner .whoweare-inner .title-kr .sec_btn_more {
        margin-top: 40px
    }
}

#MAIN #WHATWEDO .sec_inner {
    padding: min(6.25vw, 120px) 0 min(7.2916666667vw, 140px) min(6.25vw, 120px);
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: end
}

#MAIN #WHATWEDO .txt-con .sec_desc {
    font-weight: 300;
    font-size: min(1.25vw, 24px);
    line-height: min(2.1vw, 40.32px);
    color: #151515;
    margin-top: min(2.0833333333vw, 40px)
}

#MAIN #WHATWEDO .txt-con .sec_tit {
    margin: min(1.1041666667vw, 290px) 0 min(1.0416666667vw, 20px)
}

#MAIN #WHATWEDO .img-con {
    position: relative;
    width: min(48.9583333333vw, 940px);
    height: min(31.9270833333vw, 613px);
    overflow: hidden
}

#MAIN #WHATWEDO .img-con img {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    object-fit: cover
}

@media (max-width: 1023px) {
    #MAIN #WHATWEDO .sec_inner {
        padding: 75px 0 86px 50px
    }

    #MAIN #WHATWEDO .txt-con .sec_desc {
        font-size: 16px;
        line-height: 1.68;
        margin-top: 25px
    }

    #MAIN #WHATWEDO .txt-con .sec_tit {
        margin-top: 175px;
        margin-bottom: 18px
    }
}

@media (max-width: 768px) {
    #MAIN #WHATWEDO .sec_inner {
        padding: 80px 0 60px 20px;
        flex-direction: column;
        align-items: start;
        gap: 120px
    }

    #MAIN #WHATWEDO .txt-con {
        display: flex;
        flex-direction: column;
        padding-right: 20px
    }

    #MAIN #WHATWEDO .txt-con .sec_cnt_nav {
        font-size: 14px;
        line-height: 1.72;
        order: 1
    }

    #MAIN #WHATWEDO .txt-con .sec_desc {
        order: 3;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.72;
        margin-top: 16px
    }

    #MAIN #WHATWEDO .txt-con .sec_tit {
        order: 2;
        margin: 20px 0 0
    }

    #MAIN #WHATWEDO .img-con {
        width: 100%;
        aspect-ratio: 71/48;
        height: 100%
    }

    #MAIN #WHATWEDO .img-con img {
        top: -40%
    }
}

@media (min-width: 769px) {
    #MAIN #SHIPCAROUSEL .ship-swiper {
        width: 100%;
        height: 100%
    }

    #MAIN #SHIPCAROUSEL .ship-swiper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh
    }

    #MAIN #SHIPCAROUSEL .ship-swiper .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    #MAIN #SHIPCAROUSEL .text-wrap {
        margin-bottom: min(2.0833333333vw, 40px);
        position: absolute;
        top: min(6.25vw, 120px);
        z-index: 2
    }

    #MAIN #SHIPCAROUSEL .text-wrap .text-wrap-inner {
        display: none
    }

    #MAIN #SHIPCAROUSEL .text-wrap .text-wrap-inner.active {
        display: block;
        animation: textMotion 1s cubic-bezier(.39, 0, .12, .99)
    }

    @keyframes textMotion {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_tit {
        display: block;
        font-size: min(3.125vw, 60px);
        line-height: min(4.75vw, 91.2px);
        margin-bottom: min(1.6666666667vw, 32px)
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_desc {
        font-size: min(1.0416666667vw, 20px);
        font-weight: 300;
        line-height: min(1.8333333333vw, 35.2px);
        margin-bottom: min(2.0833333333vw, 40px)
    }

    #MAIN #SHIPCAROUSEL .ship-wrap {
        position: relative;
        height: 300vh
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky {
        position: sticky;
        top: 0;
        left: 0;
        height: 80vh;
        padding: min(5.2083333333vw, 100px) min(6.25vw, 120px) min(10.4166666667vw, 200px);
        overflow: hidden
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-ul {
        display: flex;
        gap: min(10.4166666667vw, 200px);
        width: max-content;
        will-change: transform;
        padding-top: min(15.625vw, 300px)
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item {
        position: relative
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship1,
    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship2,
    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship3 {
        width: min(62.7083333333vw, 1204px)
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item .img {
        display: inline-block;
        width: 100%
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item .img img {
        width: 100%
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item .name {
        position: absolute;
        top: calc(50% - min(19.7916666667vw, 380px));
        left: 6%;
        color: #f4f4f4;
        font-size: min(11.9791666667vw, 230px);
        font-weight: 700;
        line-height: min(14.375vw, 276px);
        z-index: -1
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item strong {
        overflow: hidden;
        display: inline-block
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item strong span {
        transform: translateY(100%);
        transition: all .6s cubic-bezier(.67, .11, .39, .97);
        display: inline-block
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship-item.active strong span {
        transform: translateY(0)
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_tit {
        overflow: hidden;
        display: inline-block
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_tit span {
        transform: translateY(100%);
        transition: all 1.2s cubic-bezier(.67, .11, .39, .97);
        display: inline-block
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner.active .sec_tit span {
        transform: translateY(0)
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_desc {
        overflow: hidden
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_desc span {
        transform: translateY(100%);
        transition: all 1.2s cubic-bezier(.67, .11, .39, .97);
        display: inline-block
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner.active .sec_desc span {
        transform: translateY(0)
    }

    #MAIN #SHIPCAROUSEL .ship-pagination-wrap {
        overflow: hidden;
        position: absolute;
        left: calc(50% + min(10.3125vw, 198px));
        top: min(6.25vw, 120px)
    }

    #MAIN #SHIPCAROUSEL .ship-pagination {
        display: flex;
        gap: min(1.0416666667vw, 20px);
        transform: translateY(100%);
        transition: all 1.2s cubic-bezier(.67, .11, .39, .97)
    }

    #MAIN #SHIPCAROUSEL .more-wrap {
        overflow: hidden
    }

    #MAIN #SHIPCAROUSEL .sec_btn_more {
        transform: translateY(100%);
        transition: all 1.5s cubic-bezier(.67, .11, .39, .97)
    }

    #MAIN #SHIPCAROUSEL .sec_btn_more.active,
    #MAIN #SHIPCAROUSEL .ship-pagination.active {
        transform: translateY(0);
        opacity: 1
    }

    #MAIN #SHIPCAROUSEL .ship-pagination .pagination {
        width: min(10.4166666667vw, 200px);
        padding-bottom: min(.9375vw, 18px);
        border-bottom: 1px solid #d6d6d6;
        transition: .3s;
        position: relative;
        cursor: pointer
    }

    #MAIN #SHIPCAROUSEL .ship-pagination .pagination:before {
        content: "";
        position: absolute;
        display: inline-block;
        left: 0;
        bottom: -1px;
        width: 0;
        height: min(.1041666667vw, 2px);
        background-color: #151515;
        transition: .6s cubic-bezier(0, 1, .34, .99)
    }

    #MAIN #SHIPCAROUSEL .ship-pagination .pagination.active:before {
        content: "";
        width: 100%
    }

    #MAIN #SHIPCAROUSEL .ship-pagination .pagination span {
        color: #b8b8b8;
        font-weight: 700
    }

    #MAIN #SHIPCAROUSEL .ship-pagination .pagination.active span {
        color: #151515
    }

    #MAIN #SHIPCAROUSEL .ship-swiper-pagination {
        display: none
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .mo_swiper_wrap {
        pointer-events: none
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .ship-pagination .pagination {
        width: min(11.9791666667vw, 230px)
    }
}

@media (max-width: 1023px) {

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship1,
    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship2,
    #MAIN #SHIPCAROUSEL .ship-wrap .ship-ul .ship3 {
        width: min(73.5092864125vw, 752px)
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky {
        padding: 80px 50px
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_tit {
        font-size: 40px;
        line-height: 1.52
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_desc {
        font-size: 14px;
        line-height: 1.76
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-ul {
        padding-top: 228px
    }

    #MAIN .m_btn[type=text][hover=arrow] span.icon:before,
    #MAIN .m_btn[type=text][hover=arrow] span.icon:after {
        width: 8px;
        height: 5px;
        top: calc(50% - 2.5px);
        left: calc(50% - 4px)
    }

    #MAIN #SHIPCAROUSEL .text-wrap {
        top: 80px
    }

    #MAIN #SHIPCAROUSEL .ship-pagination-wrap {
        top: 80px;
        right: 50px;
        left: auto
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-ul {
        padding-top: 268px
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .ship-pagination {
        align-items: flex-end
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .ship-pagination button {
        text-align: left
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .ship-pagination li {
        min-width: 88px;
        width: 33.33%
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .text-wrap {
        margin-bottom: 0;
        width: 50%
    }
}

@media (max-width: 768px) {
    #MAIN #SHIPCAROUSEL .ship-wrap {
        padding: 0 0 60px;
        position: relative;
        width: 100%;
        box-sizing: border-box
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky {
        position: sticky;
        top: 0;
        left: 0;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        padding: 0
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .text-wrap {
        order: 3;
        width: calc(100% - 40px);
        margin-top: 60px;
        padding: 0 20px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .mo_swiper_wrap {
        order: 2;
        width: 100%;
        pointer-events: all
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap {
        order: 1;
        margin-bottom: 82px;
        padding: 0 20px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .text-wrap .sec_inner {
        display: flex
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .text-wrap .sec_inner .text-wrap-inner {
        width: 100%
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_tit {
        margin-bottom: 32px;
        font-size: 28px;
        line-height: 1.44;
        display: block
    }

    #MAIN #SHIPCAROUSEL .text-wrap .sec_inner .sec_desc {
        margin-bottom: 32px;
        font-size: 16px;
        line-height: 1.72;
        display: block
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul {
        display: flex;
        gap: 16px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul li {
        width: 52px;
        transition: all .3s cubic-bezier(.39, 0, .12, .99)
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul li:after {
        content: "";
        width: 100%;
        height: 1px;
        display: block;
        background-color: #b8b8b8;
        margin-top: 4px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul li.active:after {
        background-color: #151515;
        height: 2px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul li span {
        color: #b8b8b8;
        font-size: 16px;
        line-height: 1.72;
        pointer-events: none
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul li.active {
        width: 129px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-pagination-wrap ul li.active span {
        color: #151515;
        pointer-events: none
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .mo_swiper_wrap ul {
        display: flex;
        padding-top: 20px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .mo_swiper_wrap ul li {
        width: 100%;
        position: relative
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .mo_swiper_wrap ul li img {
        display: block;
        width: 100%;
        object-fit: cover
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .mo_swiper_wrap ul li strong {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        text-align: center;
        color: #f4f4f4;
        font-size: 64px;
        font-weight: 700;
        line-height: 1.2;
        z-index: -1
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-swiper-pagination {
        display: block;
        position: relative;
        order: 4;
        margin: 120px auto 0
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-swiper-pagination span {
        width: 32px;
        height: 2px;
        display: inline-block;
        vertical-align: middle;
        background-color: #b8b8b8;
        margin: 0 4px
    }

    #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-swiper-pagination span.active {
        background-color: #151515
    }

    html[lang=en] #MAIN #SHIPCAROUSEL .ship-wrap .ship-sticky .ship-ul {
        padding-top: 20px
    }
}

#MAIN #SHOWROOM {
    overflow: hidden
}

#MAIN #SHOWROOM .sec_inner {
    position: relative
}

#MAIN #SHOWROOM .txt-con {
    position: absolute;
    top: min(6.7708333333vw, 130px);
    width: 100%;
    max-width: 1920px;
    margin: 0 min(6.25vw, 120px);
    left: 50%;
    transform: translate(-50%);
    z-index: 9
}

#MAIN #SHOWROOM .txt-con .sec_tit {
    font-size: min(3.125vw, 60px);
    color: #fff;
    line-height: min(4.75vw, 91.2px)
}

#MAIN #SHOWROOM .txt-con .sec_desc {
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.8333333333vw, 35.2px);
    margin: min(1.6666666667vw, 32px) 0 min(2.0833333333vw, 40px);
    color: #fff
}

#MAIN #SHOWROOM .txt-con .sec_btn_more a {
    padding-left: 0
}

#MAIN #SHOWROOM .img-con {
    position: relative;
    overflow: hidden;
    padding-top: 54.271%
}

#MAIN #SHOWROOM .img-con img {
    position: absolute;
    top: -52%;
    left: 0;
    width: 100%;
    object-fit: cover
}

#MAIN #SHOWROOM .sec_btn_more {
    position: relative;
    overflow: hidden
}

#MAIN #SHOWROOM .sec_btn_more a {
    display: inline-block;
    position: relative;
    transform: translateY(100%);
    transition: all 1s cubic-bezier(.67, .11, .39, .97)
}

#MAIN #SHOWROOM.active .sec_btn_more a {
    transform: translateY(0);
    transition-delay: .5s
}

@media (max-width: 1023px) {
    #MAIN #SHOWROOM .txt-con .sec_tit {
        font-size: 40px;
        line-height: 1.52
    }

    #MAIN #SHOWROOM .txt-con .sec_desc {
        font-size: 14px;
        line-height: 1.76;
        margin: 20px 0 25px
    }
}

@media (max-width: 768px) {
    #MAIN #SHOWROOM .sec_inner {
        min-height: 100vh
    }

    #MAIN #SHOWROOM .img-con {
        overflow: visible;
        padding-top: 230%
    }

    #MAIN #SHOWROOM .txt-con {
        top: 100px;
        margin: 0;
        padding: 0 20px;
        box-sizing: border-box
    }

    #MAIN #SHOWROOM .txt-con .sec_tit {
        font-size: 28px;
        line-height: 1.44
    }

    #MAIN #SHOWROOM .txt-con .sec_desc {
        margin: 20px 0 40px;
        font-size: 16px;
        line-height: 1.72
    }
}

#MAIN #INNOVATE .title-box {
    width: 100%;
    padding: 0 min(3.5416666667vw, 68px) 0 min(6.25vw, 120px);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    max-width: 1920px;
    margin: 0 auto
}

#MAIN #INNOVATE .title-wrap {
    width: 50%;
    padding-left: min(1.25vw, 24px);
    box-sizing: border-box
}

#MAIN #INNOVATE .title-wrap .title {
    font-weight: 700;
    margin-bottom: min(2.5vw, 48px);
    margin-top: 0
}

#MAIN #INNOVATE .title-wrap .desc {
    font-size: min(1.1979166667vw, 23px);
    font-weight: 300;
    line-height: min(2.0125vw, 38.64px)
}

#MAIN #INNOVATE .title-wrap .sec_btn_more {
    margin-top: min(2.0833333333vw, 40px)
}

#MAIN #INNOVATE .title-wrap .sec_btn_more span.txt {
    color: #151515
}

#MAIN #INNOVATE .sticky-ct {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: min(10.7291666667vw, 206px)
}

#MAIN #INNOVATE .sticky-inner {
    position: sticky;
    top: 0
}

#MAIN #INNOVATE .parallax-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 100vh
}

#MAIN #INNOVATE .parallax-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    contain: paint
}

#MAIN #INNOVATE .parallax-item .clip {
    position: relative;
    width: 100%;
    height: 100%
}

#MAIN #INNOVATE .parallax-item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

#MAIN #INNOVATE .parallax-item.pr1 .bg {
    background: url(https://999box.net/sample/transport6/images/top/bg01.jpg) no-repeat center/cover
}

#MAIN #INNOVATE .parallax-item.pr1 .bg img {
    display: none !important
}

#MAIN #INNOVATE .parallax-item.pr1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 10%;
    background: #2a7ad0;
    background: -moz-linear-gradient(180deg, rgb(42, 122, 208) 0%, rgba(42, 122, 208, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgb(42, 122, 208) 0%, rgba(42, 122, 208, 0) 100%);
    background: linear-gradient(180deg, #2a7ad0, #2a7ad000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a7ad0", endColorstr="#2a7ad0", GradientType=1)
}

#MAIN #INNOVATE .parallax-item.pr2 .bg {
    background: url(https://999box.net/sample/transport6/images/top/bg02.jpg) no-repeat center/cover
}

#MAIN #INNOVATE .parallax-item.pr2 .bg img {
    display: none !important
}

#MAIN #INNOVATE .parallax-item.pr2 .bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://999box.net/sample/transport6/images/top/innovate-img-02.webp) no-repeat center bottom/cover
}

#MAIN #INNOVATE .parallax-item .bg .img-wrap {
    position: relative;
    width: 100%;
    height: 100%
}

#MAIN #INNOVATE .parallax-item .bg .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#MAIN #INNOVATE .parallax-item .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center
}

#MAIN #INNOVATE .parallax-item .content .pin {
    position: sticky;
    top: 0;
    width: 50%;
    padding-left: min(8.75vw, 168px);
    box-sizing: border-box
}

#MAIN #INNOVATE .parallax-item .txt-wrap {
    color: #fff;
    display: flex;
    flex-direction: column
}

#MAIN #INNOVATE .parallax-item .txt-wrap .tit {
    font-size: min(3.125vw, 60px);
    line-height: min(4.75vw, 91.2px)
}

#MAIN #INNOVATE .parallax-item .txt-wrap .desc {
    margin-top: min(1.25vw, 24px);
    font-weight: 300
}

@media (max-width: 1023px) {
    #MAIN #INNOVATE .title-wrap .title {
        margin-bottom: 30px
    }

    #MAIN #INNOVATE .title-wrap .desc {
        font-size: 16px;
        line-height: 1.68
    }

    #MAIN #INNOVATE .title-wrap .sec_btn_more {
        margin-top: 25px
    }

    #MAIN #INNOVATE .parallax-item .content .pin {
        padding-left: 32px
    }

    #MAIN #INNOVATE .parallax-item .txt-wrap .tit {
        font-size: 40px;
        line-height: 1.52
    }

    #MAIN #INNOVATE .parallax-item .txt-wrap .desc {
        margin-top: 15px
    }
}

@media (max-width: 768px) {
    #MAIN #INNOVATE .title-box {
        display: block;
        padding: 0 20px
    }

    #MAIN #INNOVATE .intro {
        font-size: 14px;
        line-height: 1.72
    }

    #MAIN #INNOVATE .title-wrap {
        margin-top: 20px;
        margin-right: 0;
        width: 100%;
        padding-left: 0
    }

    #MAIN #INNOVATE .title-wrap .title {
        margin-bottom: 20px
    }

    #MAIN #INNOVATE .title-wrap .desc {
        font-size: 16px;
        line-height: 1.72
    }

    #MAIN #INNOVATE .title-wrap .sec_btn_more {
        margin-top: 20px
    }

    #MAIN .m_btn[type=text][hover=arrow] span.icon:before,
    #MAIN .m_btn[type=text][hover=arrow] span.icon:after {
        width: 12px;
        height: 8px;
        top: calc(50% - 4px);
        left: calc(50% - 6px)
    }

    #MAIN #INNOVATE .parallax-item .content .pin {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box
    }

    #MAIN #INNOVATE .parallax-item .txt-wrap .tit {
        font-size: 28px;
        line-height: 1.44
    }

    #MAIN #INNOVATE .parallax-item .txt-wrap .desc {
        margin-top: 20px;
        font-weight: 400
    }

    #MAIN #INNOVATE .sticky-ct {
        margin-top: 128px
    }
}

#MAIN #BUSINESS {
    height: 150vh
}

#MAIN #BUSINESS .business-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    overflow: hidden
}

#MAIN #BUSINESS .business-inner:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#MAIN #BUSINESS.fade .business-inner:after {
    transition: visibility 0s 1s;
    visibility: hidden
}

#MAIN #BUSINESS .item {
    width: 20%;
    height: 100%;
    transition: all 1.5s cubic-bezier(0, 1, .34, .99)
}

#MAIN #BUSINESS .item>div {
    position: relative;
    height: 100%;
    transform: translateY(100%);
    transition: all 2.5s cubic-bezier(0, 1, .34, .99)
}

#MAIN #BUSINESS.fade .item>div {
    transform: translateY(0)
}

#MAIN #BUSINESS .item.item-02>div {
    transition-delay: .2s
}

#MAIN #BUSINESS .item.item-03>div {
    transition-delay: .4s
}

#MAIN #BUSINESS .item.item-04>div {
    transition-delay: .6s
}

#MAIN #BUSINESS .item.item-05>div {
    transition-delay: .8s
}

#MAIN #BUSINESS .item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#MAIN #BUSINESS .item.item-02 img {
    object-position: 65%
}

#MAIN #BUSINESS .item.item-03 img {
    object-position: 20%
}

#MAIN #BUSINESS .item.item-04 img {
    object-position: 88%
}

#MAIN #BUSINESS .item.item-05 img {
    object-position: 85%
}

#MAIN #BUSINESS .item .txt {
    position: absolute;
    left: min(2.0833333333vw, 40px);
    bottom: min(5.2083333333vw, 100px);
    z-index: 9;
    color: #fff;
    white-space: nowrap
}

#MAIN #BUSINESS .item .txt dt {
    font-size: min(2.0833333333vw, 40px);
    line-height: min(3.25vw, 62.4px);
    transition: font-size .6s cubic-bezier(0, 1, .34, .99)
}

#MAIN #BUSINESS .item .txt dd {
    font-weight: 300;
    transition: all .6s cubic-bezier(0, 1, .34, .99);
    padding-top: 0
}

#MAIN #BUSINESS .item .txt dd>div {
    overflow: hidden
}

#MAIN #BUSINESS .item:hover .txt dt br.hover_n {
    display: none
}

#MAIN #BUSINESS .item:hover .txt dt br.hover_y {
    display: block
}

@media (min-width: 769px) {
    #MAIN #BUSINESS .item {
        flex: 1;
        will-change: flex-basis
    }

    #MAIN #BUSINESS .item .txt dd {
        display: grid;
        grid-template-rows: 0fr;
        will-change: grid-template-rows
    }

    #MAIN #BUSINESS .item:hover {
        flex-basis: 51.7%
    }

    #MAIN #BUSINESS .item:hover .txt dt {
        font-size: min(3.125vw, 60px);
        line-height: min(4.875vw, 93.6px)
    }

    #MAIN #BUSINESS .item:hover .txt dd {
        grid-template-rows: 1fr;
        padding-top: min(1.25vw, 24px)
    }
}

@media (max-width: 1023px) {
    #MAIN #BUSINESS .item .txt {
        left: 42px;
        bottom: 62px
    }

    #MAIN #BUSINESS .item .txt dt {
        font-size: 24px;
        line-height: 1.56
    }

    #MAIN #BUSINESS .item:hover .txt dt {
        font-size: 40px;
        line-height: 1.56
    }

    #MAIN #BUSINESS .item:hover .txt dd {
        padding-top: 15px
    }
}

@media (max-width: 768px) {
    #MAIN #BUSINESS .business-inner {
        flex-direction: column
    }

    #MAIN #BUSINESS .item {
        width: 100%;
        height: 20%;
        overflow: hidden
    }

    #MAIN #BUSINESS .item .txt {
        left: 20px;
        bottom: 24px;
        width: calc(100% - 40px);
        transform: translateY(calc(100% - 24px));
        transition: transform .6s cubic-bezier(.39, 0, .12, .99)
    }

    #MAIN #BUSINESS .item .txt dt {
        font-size: 20px;
        line-height: 1.56
    }

    #MAIN #BUSINESS .item .txt dd>div {
        padding-top: 16px;
        white-space: normal
    }

    #MAIN #BUSINESS .item.unactive {
        height: 92px
    }

    #MAIN #BUSINESS .item.unactive .txt {
        transform: translateY(calc(100% - 24px))
    }

    #MAIN #BUSINESS .item.active {
        height: calc(100% - 362px)
    }

    #MAIN #BUSINESS .item.active .txt {
        transform: translateY(0)
    }

    #MAIN #BUSINESS .item.active .txt dt {
        font-size: 24px;
        line-height: 1.56
    }

    #MAIN #BUSINESS .item.active .txt dd {
        height: 100%;
        opacity: 1
    }

    #MAIN #BUSINESS .item.item-03 img {
        object-position: 0% 65%
    }

    #MAIN #BUSINESS .item .txt.txt_two_line {
        bottom: 48px
    }

    #MAIN #BUSINESS .item:hover .txt dt {
        font-size: 20px;
        line-height: 1.56
    }

    #MAIN #BUSINESS .item.active .txt.txt_two_line {
        bottom: 16px
    }

    #MAIN #BUSINESS .item.active .txt.txt_two_line dd>div {
        max-height: 216px;
        overflow-y: auto
    }

    html[lang=en] #MAIN #BUSINESS .item.unactive {
        height: 82px
    }

    html[lang=en] #MAIN #BUSINESS .item.active {
        height: calc(100% - 322px)
    }
}

#MAIN #STORY {
    overflow: hidden
}

#MAIN #STORY .title-wrap {
    padding: min(9.7916666667vw, 188px) 0 min(3.75vw, 72px);
    display: flex;
    justify-content: end
}

#MAIN #STORY .title-wrap .title {
    width: 50%;
    font-size: min(3.125vw, 60px);
    line-height: min(4.625vw, 88.8px)
}

#MAIN #STORY .slide-ct {
    position: relative;
    width: 100%;
    height: 100vh
}

#MAIN #STORY .slide-wrap {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(27.5vw, 528px);
    height: min(16.6666666667vw, 320px);
    max-width: 100% !important;
    max-height: 100% !important
}

#MAIN #STORY .slide-wrap.posF {
    position: fixed
}

#MAIN #STORY .slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#MAIN #STORY .slide-item .img-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%
}

#MAIN #STORY .slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#MAIN #STORY .video-item .video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center
}

#MAIN #STORY .video-item .video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#MAIN #STORY .video-item .txt-wrap {
    position: absolute;
    bottom: min(6.25vw, 120px);
    right: min(9.1145833333vw, 175px);
    color: #fff;
    z-index: 3;
    opacity: 0
}

#MAIN #STORY .video-item .txt-wrap .tit {
    font-size: min(3.75vw, 72px);
    line-height: min(4.95vw, 95.04px)
}

#MAIN #STORY .__motions {
    margin-top: -50vh;
    margin-top: -50lvh;
    padding-bottom: 100vh;
    padding-bottom: 100lvh
}

#MAIN #STORY .__motions .__motion-scale-up,
#MAIN #STORY .__motions .__motion-show-desc {
    height: 100vh;
    height: 100lvh
}

@media (max-width: 1023px) {
    #MAIN #STORY .title-wrap {
        padding: 118px 0 38px
    }

    #MAIN #STORY .title-wrap .title {
        font-size: 40px;
        line-height: 1.48
    }
}

@media (max-width: 768px) {
    #MAIN #STORY .title-wrap {
        padding: 80px 20px;
        justify-content: start
    }

    #MAIN #STORY .title-wrap .title {
        width: 100%;
        font-size: 28px;
        line-height: 1.44
    }

    #MAIN #STORY .slide-wrap {
        width: 288px;
        height: 163px;
        left: 20px
    }

    #MAIN #STORY .video-item .txt-wrap {
        bottom: 60px;
        right: auto;
        left: 20px
    }
}

#MEDIA {
    overflow: hidden;
    height: 100%;
    margin-top: -28vh;
    margin-top: -28lvh
}

#MEDIA .media_contain {
    padding: min(10.0520833333vw, 193px) 0 0;
    position: relative
}

#MEDIA .sec_tit_top {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding: 0 min(4.9479166667vw, 95px);
    box-sizing: border-box;
    display: flex;
    gap: min(1.8229166667vw, 35px);
    align-items: center
}

#MEDIA .sec_tit_top .sec_tit {
    margin-top: 0;
    font-size: min(3.125vw, 60px);
    line-height: 1
}

#MEDIA .sec_tit_top .btn_enter_media {
    display: inline-block;
    width: min(2.1875vw, 42px);
    height: min(2.1875vw, 42px);
    padding: 5px
}

#MEDIA .sec_tit_top .btn_enter_media img {
    width: 100%;
    display: block
}

#MEDIA .sec_tit_top .btn_enter_media:hover {
    animation: jelly .5s
}

#MEDIA .cnt_media {
    max-width: 1920px;
    padding: 0 min(4.9479166667vw, 95px);
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto
}

#MEDIA .cnt_media .feed-wrapper {
    margin-top: min(3.0208333333vw, 58px);
    padding-bottom: min(4.5833333333vw, 88px);
    overflow: visible;
    position: relative
}

#MEDIA .cnt_media .feed-wrapper ul {
    position: relative
}

#MEDIA .cnt_media .feed-wrapper ul li {
    width: min(20.1041666667vw, 386px)
}

#MEDIA .cnt_media .feed-wrapper ul li a {
    display: block
}

#MEDIA .cnt_media .feed-wrapper ul li a .img-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    aspect-ratio: 132/79
}

#MEDIA .cnt_media .feed-wrapper ul li a .img-wrap.default {
    border: 1px solid #D7D7D7
}

#MEDIA .cnt_media .feed-wrapper ul li a .img-wrap picture {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block
}

#MEDIA .cnt_media .feed-wrapper ul li a .img-wrap picture img {
    display: block;
    object-fit: cover;
    transition: transform 14s cubic-bezier(0, 1, .34, .99);
    width: 100%;
    height: 100%
}

#MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap {
    padding-top: min(1.875vw, 36px)
}

#MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap span {
    display: block
}

#MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .topic {
    color: #f60;
    padding-bottom: min(.78125vw, 15px)
}

#MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .info-tit {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

#MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .date {
    padding-top: min(.625vw, 12px)
}

#MEDIA .cnt_media .feed-wrapper ul li a:hover .img-wrap picture img {
    transform: scale(1.1)
}

#MEDIA .cnt_media .feed-wrapper ul li a:hover .txt-wrap .info-tit {
    background-size: 100% 1px
}

#MEDIA .swiper-scrollbar {
    background: #e5e5e5
}

#MEDIA .swiper-horizontal>.swiper-scrollbar {
    height: min(.0520833333vw, 1px);
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute
}

#MEDIA .swiper-scrollbar-drag {
    height: min(.15625vw, 3px);
    width: 100%;
    position: relative;
    background: #151515;
    left: 0;
    top: calc(min(.1041666667vw, 2px)*-1)
}

@media (max-width: 1023px) {
    #MEDIA .media_contain {
        padding: 120px 0 0
    }

    #MEDIA .sec_tit_top {
        padding: 0 50px;
        gap: 35px
    }

    #MEDIA .sec_tit_top .sec_tit {
        font-size: 32px;
        line-height: 1.6
    }

    #MEDIA .sec_tit_top .btn_enter_media {
        width: 24px;
        height: 24px
    }

    #MEDIA .cnt_media {
        padding: 0 50px
    }

    #MEDIA .cnt_media .feed-wrapper {
        margin-top: 20px;
        padding-bottom: 56px
    }

    #MEDIA .cnt_media .feed-wrapper ul li {
        width: 272px
    }

    #MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap {
        padding-top: 20px
    }

    #MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .topic {
        padding-bottom: 8px
    }

    #MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .date {
        padding-top: 14px
    }

    #MEDIA .swiper-horizontal>.swiper-scrollbar {
        height: 1px
    }

    #MEDIA .swiper-scrollbar-drag {
        height: 3px;
        top: -2px
    }
}

@media (max-width: 768px) {
    #MEDIA .media_contain {
        padding: 80px 0 0
    }

    #MEDIA .sec_tit_top {
        padding: 0 20px;
        gap: 15px
    }

    #MEDIA .sec_tit_top .sec_tit {
        font-size: 28px;
        line-height: 1.44
    }

    #MEDIA .sec_tit_top .btn_enter_media {
        width: 32px;
        height: 32px;
        box-sizing: border-box
    }

    #MEDIA .cnt_media {
        padding: 0 20px
    }

    #MEDIA .cnt_media .feed-wrapper {
        margin-top: 24px;
        padding-bottom: 40px
    }

    #MEDIA .cnt_media .feed-wrapper ul li {
        width: 248px
    }

    #MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap {
        padding-top: 20px
    }

    #MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .topic {
        padding-bottom: 12px
    }

    #MEDIA .cnt_media .feed-wrapper ul li a .txt-wrap .date {
        padding-top: 24px
    }

    #MEDIA .swiper-horizontal>.swiper-scrollbar {
        height: 1px
    }

    #MEDIA .swiper-scrollbar-drag {
        height: 3px;
        top: -2px
    }
}

.side-sticky-wrap {
    position: absolute;
    right: min(2.0833333333vw, 40px);
    top: 0;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    z-index: 1;
    pointer-events: none
}

.side-sticky-wrap.no-side-nav .sticky:before {
    content: "";
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.side-sticky-wrap .sticky {
    position: sticky;
    bottom: 0;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.side-sticky-wrap .sticky .side-nav {
    position: relative;
    font-size: min(.7291666667vw, 14px);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
    margin-left: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transform: translateY(25px);
    transform: translateY(25px)
}

.side-sticky-wrap .sticky .side-nav .inwrap {
    position: absolute;
    right: 0;
    top: 50%;
    width: min(2.0833333333vw, 40px);
    min-height: min(8.5416666667vw, 164px);
    -webkit-transform: translate3d(10px, -50%, 0);
    transform: translate3d(10px, -50%, 0);
    pointer-events: auto
}

.side-sticky-wrap .sticky .side-nav .mask {
    position: absolute;
    right: 0;
    top: 0;
    width: min(10.4166666667vw, 200px);
    height: min(1.875vw, 36px);
    pointer-events: none;
    -webkit-transition: -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: transform .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1)
}

.side-sticky-wrap .sticky .side-nav:not(:hover) ul a:not(.active) {
    opacity: 0
}

.side-sticky-wrap .sticky .side-nav:hover .mask {
    -webkit-transform: translate3d(0, var(--mask-y-for-center), 0);
    transform: translate3d(0, var(--mask-y-for-center), 0)
}

.side-sticky-wrap .sticky .side-nav:hover ul a {
    pointer-events: auto
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(1) a {
    -webkit-transform: translate3d(0, 0px, 0) !important;
    transform: translateZ(0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(2) a {
    -webkit-transform: translate3d(0, min(1.875vw, 36px), 0) !important;
    transform: translate3d(0, min(1.875vw, 36px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(3) a {
    -webkit-transform: translate3d(0, min(3.75vw, 72px), 0) !important;
    transform: translate3d(0, min(3.75vw, 72px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(4) a {
    -webkit-transform: translate3d(0, min(5.625vw, 108px), 0) !important;
    transform: translate3d(0, min(5.625vw, 108px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(5) a {
    -webkit-transform: translate3d(0, min(7.5vw, 144px), 0) !important;
    transform: translate3d(0, min(7.5vw, 144px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(6) a {
    -webkit-transform: translate3d(0, min(9.375vw, 180px), 0) !important;
    transform: translate3d(0, min(9.375vw, 180px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(7) a {
    -webkit-transform: translate3d(0, min(11.25vw, 216px), 0) !important;
    transform: translate3d(0, min(11.25vw, 216px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(8) a {
    -webkit-transform: translate3d(0, min(13.125vw, 252px), 0) !important;
    transform: translate3d(0, min(13.125vw, 252px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(9) a {
    -webkit-transform: translate3d(0, min(15vw, 288px), 0) !important;
    transform: translate3d(0, min(15vw, 288px), 0) !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.side-sticky-wrap .sticky .side-nav:hover .progress {
    opacity: 0;
    -webkit-transform: scaleY(.2) translate3d(0, min(1.5625vw, 30px), 0);
    transform: scaleY(.2) translate3d(0, min(1.5625vw, 30px), 0)
}

.side-sticky-wrap .sticky .side-nav:hover .total {
    opacity: 0;
    -webkit-transform: translate3d(0, min(1.5625vw, 30px), 0);
    transform: translate3d(0, min(1.5625vw, 30px), 0)
}

.side-sticky-wrap .sticky .side-nav.dark a,
.side-sticky-wrap .sticky .side-nav.dark .total {
    color: #000
}

.side-sticky-wrap .sticky .side-nav.dark .progress {
    background: #00000073
}

.side-sticky-wrap .sticky .side-nav.dark .progress:before {
    background: #000
}

.side-sticky-wrap .sticky .side-nav ul {
    position: relative
}

.side-sticky-wrap .sticky .side-nav ul li {
    position: absolute;
    right: 0;
    top: 0
}

.side-sticky-wrap .sticky .side-nav ul a {
    padding: min(.5729166667vw, 11px);
    opacity: .3;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-transition: color .3s ease-out, opacity .2s ease-out, -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: color .3s ease-out, opacity .2s ease-out, -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: color .3s ease-out, opacity .2s ease-out, transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: color .3s ease-out, opacity .2s ease-out, transform .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1)
}

.side-sticky-wrap .sticky .side-nav ul a span {
    font-weight: 600;
    padding-left: min(1.25vw, 24px);
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

.side-sticky-wrap .sticky .side-nav ul a.active {
    opacity: 1
}

@media (hover: hover) and (pointer: fine) {
    .side-sticky-wrap .sticky .side-nav:hover ul:hover a:hover {
        opacity: 1
    }

    .side-sticky-wrap .sticky .side-nav:hover ul:hover a:not(:hover) {
        opacity: .3
    }
}

.side-sticky-wrap .sticky .side-nav .progress,
.side-sticky-wrap .sticky .side-nav .progress:before {
    -webkit-transition: background .3s ease-out, opacity .3s, -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: background .3s ease-out, opacity .3s, -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: background .3s ease-out, opacity .3s, transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: background .3s ease-out, opacity .3s, transform .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1)
}

.side-sticky-wrap .sticky .side-nav .total {
    -webkit-transition: color .3s ease-out, opacity .3s, -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: color .3s ease-out, opacity .3s, -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: color .3s ease-out, opacity .3s, transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: color .3s ease-out, opacity .3s, transform .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1)
}

.side-sticky-wrap .sticky .side-nav .progress {
    position: absolute;
    right: min(.9895833333vw, 19px);
    top: min(2.1875vw, 42px);
    width: min(.0520833333vw, 1px);
    height: min(4.1666666667vw, 80px);
    background: #fff;
    overflow: hidden;
    pointer-events: none;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.side-sticky-wrap .sticky .side-nav .progress:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(min(4.1666666667vw, 80px)*-1);
    height: min(4.1666666667vw, 80px);
    background: #000;
    -webkit-transform: translate3d(0, calc(var(--progress) * min(4.1666666667vw, 80px)), 0);
    transform: translate3d(0, calc(var(--progress) * min(4.1666666667vw, 80px)), 0)
}

.side-sticky-wrap .sticky .side-nav .total {
    position: absolute;
    right: min(.5208333333vw, 10px);
    top: min(7.1875vw, 138px);
    font-weight: 600;
    pointer-events: none
}

.side-sticky-wrap .sticky .network-button {
    position: static;
    pointer-events: auto;
    -webkit-transform: translateY(calc(min(1.25vw, 24px)*-1));
    transform: translateY(calc(min(1.25vw, 24px)*-1))
}

.side-sticky-wrap .sticky .side-nav.dark a,
.side-sticky-wrap .sticky .side-nav.dark .total {
    color: #fff
}

.side-sticky-wrap .sticky .side-nav.dark .progress {
    background: #ffffff80
}

.side-sticky-wrap .sticky .side-nav.dark .progress:before {
    background: #fff
}

@media (max-width: 1023px) {
    .side-sticky-wrap {
        right: 17px
    }

    .side-sticky-wrap .sticky .side-nav {
        font-size: 12px
    }

    .side-sticky-wrap .sticky .side-nav .inwrap {
        min-height: 135px;
        width: 24px
    }

    .side-sticky-wrap .sticky .side-nav .mask {
        width: 140px;
        height: 30px
    }

    .side-sticky-wrap .sticky .side-nav .progress {
        height: 75px;
        width: 1px;
        top: 29px;
        right: 16px
    }

    .side-sticky-wrap .sticky .side-nav .progress:before {
        top: -75px;
        height: 75px
    }

    .side-sticky-wrap .sticky .side-nav .total {
        right: 9px;
        top: 110px
    }

    .side-sticky-wrap .sticky .side-nav ul a {
        padding: 9px
    }

    .side-sticky-wrap .sticky .side-nav ul a span {
        padding-left: 20px
    }

    .side-sticky-wrap .sticky .side-nav:hover .mask {
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(2) a {
        -webkit-transform: translate3d(0, min(3.125vw, 60px), 0) !important;
        transform: translate3d(0, min(3.125vw, 60px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(3) a {
        -webkit-transform: translate3d(0, min(6.25vw, 120px), 0) !important;
        transform: translate3d(0, min(6.25vw, 120px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(4) a {
        -webkit-transform: translate3d(0, min(9.375vw, 180px), 0) !important;
        transform: translate3d(0, min(9.375vw, 180px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(5) a {
        -webkit-transform: translate3d(0, min(12.5vw, 240px), 0) !important;
        transform: translate3d(0, min(12.5vw, 240px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(6) a {
        -webkit-transform: translate3d(0, min(15.625vw, 300px), 0) !important;
        transform: translate3d(0, min(15.625vw, 300px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(7) a {
        -webkit-transform: translate3d(0, min(18.75vw, 360px), 0) !important;
        transform: translate3d(0, min(18.75vw, 360px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .side-sticky-wrap .sticky .side-nav:hover ul li:nth-child(8) a {
        -webkit-transform: translate3d(0, min(21.875vw, 420px), 0) !important;
        transform: translate3d(0, min(13.125vw, 252px), 0) !important;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }
}

@media (max-width: 768px) {
    .side-sticky-wrap {
        display: none
    }
}

.news .sub_container,
.news .sec_inner {
    background-color: transparent
}

.news-feed .feed-ct {
    padding-top: min(2.0833333333vw, 40px)
}

.news-feed .feed-ct .feed-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: min(2.6041666667vw, 50px)
}

.news-feed .feed-ct .feed-search .search-num .num-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.news-feed .feed-ct .feed-search .search-num.active .num-box {
    display: block;
    opacity: 1;
    visibility: visible
}

.news-feed .feed-ct .feed-search .search {
    position: relative;
    width: min(27.5vw, 528px);
    padding: min(.625vw, 12px) min(1.875vw, 36px) min(.625vw, 12px) 0;
    box-sizing: border-box;
    border-bottom: 1px solid #151515
}

.news-feed .feed-ct .feed-search .search .search-bar {
    width: 100%;
    background: none;
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.news-feed .feed-ct .feed-search .search input::placeholder {
    color: #b8b8b8
}

.news-feed .feed-ct .feed-search .search .search-bar:focus {
    outline: none
}

.news-feed .feed-ct .feed-search .search .search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    padding: min(.3645833333vw, 7px);
    box-sizing: border-box;
    border: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - min(.3645833333vw, 7px)) calc(100% - min(.3645833333vw, 7px));
    transition: all .5s ease
}

.news-feed .feed-ct .feed-search .search .search-btn.off {
    opacity: 50%
}

.news-feed .feed-ct .feed-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.news-feed .feed-ct .feed-wrapper.none {
    display: none
}

.news-feed .feed-ct .feed-wrapper .feed-list {
    position: relative;
    display: grid;
    justify-content: center;
    grid-gap: min(8.3333333333vw, 160px) min(2.5vw, 48px);
    grid-template-columns: repeat(3, min(27.5vw, 528px))
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item {
    width: 100%
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item>.link-viewer {
    display: block;
    cursor: pointer
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 132/79;
    margin-bottom: min(1.875vw, 36px);
    overflow: hidden
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.hanwhaocean.com/images/common/hanwha_default.png) no-repeat center center/contain
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap.default {
    border: 1px solid #D7D7D7
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap picture {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 14s cubic-bezier(0, 1, .34, .99);
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap {
    width: 100%;
    padding: 0 min(.4166666667vw, 8px);
    box-sizing: border-box
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: min(.625vw, 12px)
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-box .topic {
    color: #f60
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-box .date {
    font-weight: 300;
    color: #4b4b4b
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-tit {
    width: 100%
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-tit span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item:hover img {
    transform: scale(1.1)
}

.news-feed .feed-ct .feed-wrapper .feed-list .feed-item:hover .info-tit span {
    background-size: 100% 1px
}

.news-feed .feed-ct .feed-wrapper .feed-paginate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(3.5416666667vw, 68px);
    margin-top: min(5.625vw, 108px)
}

.news-feed .feed-ct .feed-wrapper .feed-paginate.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.news-feed .feed-ct .feed-wrapper .feed-paginate>div {
    display: flex
}

.news-feed .feed-ct .feed-wrapper .feed-paginate button {
    border: none
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box {
    position: relative;
    gap: min(1.25vw, 24px)
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box button {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    transform-origin: center center;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_btn.svg) no-repeat center center/contain
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box button.all {
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_2x_btn.svg) no-repeat center center/contain
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box button.prev {
    transform: rotate(180deg)
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box.disable {
    opacity: 30%;
    pointer-events: none
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .page-box {
    width: min(11.25vw, 216px);
    gap: 0 min(1.0416666667vw, 20px);
    justify-content: center
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button {
    position: relative;
    opacity: 30%;
    background: none;
    font-weight: 300;
    padding: min(.2083333333vw, 4px) min(.4166666667vw, 8px)
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button span {
    position: relative;
    display: inline-block
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.1041666667vw, 2px);
    background-color: #151515;
    transition: all .5s ease
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button.active {
    opacity: 100%
}

.news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button.active span:after {
    width: 100%
}

.news-feed .feed-ct .feed-wrapper .feed-more {
    width: 100%;
    margin-top: 44px
}

.news-feed .feed-ct .feed-wrapper .feed-more.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.news-feed .feed-ct .feed-wrapper .feed-more .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto
}

.news-feed .feed-ct .feed-wrapper .feed-more .load .txt {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.news-feed .feed-ct .feed-wrapper .feed-more .load .icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background-color: #f5f5f5;
    margin-left: 8px
}

.news-feed .feed-ct .feed-wrapper .feed-more .load .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.33px;
    height: 8.33px;
    background: url(https://www.hanwhaocean.com/images/common/icon_plus.svg) no-repeat center center/contain
}

.news-feed .feed-ct .feed-empty {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.news-feed .feed-ct .feed-empty.none {
    display: none
}

.news-feed .feed-ct .feed-empty .empty-box {
    padding: min(9.4270833333vw, 181px) 0;
    text-align: center
}

@media (max-width: 1023px) {
    .news-feed .feed-ct {
        padding-top: 28px
    }

    .news-feed .feed-ct .feed-search {
        margin-bottom: 44px
    }

    .news-feed .feed-ct .feed-search .search {
        width: 30.4761904762%;
        padding: 8px 24px 8px 0
    }

    .news-feed .feed-ct .feed-search .search .search-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - 4px) calc(100% - 4px)
    }

    .news-feed .feed-ct .feed-search .search .search-bar {
        font-size: 14px;
        line-height: 1.68
    }

    .news-feed .feed-ct .feed-wrapper .feed-list {
        grid-gap: 100px 30px;
        grid-template-columns: repeat(3, calc((100% - 60px) / 3))
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap {
        margin-bottom: 22.5px
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap {
        padding: 0 8px
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-box {
        margin-bottom: 12px
    }

    .news-feed .feed-ct .feed-wrapper .feed-paginate {
        column-gap: 40px;
        margin-top: 64px
    }

    .news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box {
        gap: 12px
    }

    .news-feed .feed-ct .feed-wrapper .feed-paginate .nev-box button {
        width: 20px;
        height: 20px
    }

    .news-feed .feed-ct .feed-wrapper .feed-paginate .page-box {
        width: auto;
        gap: 12px
    }

    .news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button {
        padding: 4px 6px
    }

    .news-feed .feed-ct .feed-wrapper .feed-paginate .page-box button span:after {
        height: 2px
    }

    .news-feed .feed-ct .feed-empty .empty-box {
        padding: 16.6666666667% 0
    }
}

@media (max-width: 768px) {
    .feed-ct {
        padding-top: 20px
    }

    .news-feed .feed-ct .feed-search {
        margin-bottom: 40px;
        flex-direction: column-reverse;
        align-items: flex-start
    }

    .news-feed .feed-ct .feed-search .search-num .num-box {
        font-size: 14px;
        line-height: 24.08px;
        margin-top: 16px
    }

    .news-feed .feed-ct .feed-search .search {
        width: 100%;
        padding: 12px 28px 12px 0
    }

    .news-feed .feed-ct .feed-search .search .search-bar {
        font-size: 16px;
        line-height: 27.52px
    }

    .news-feed .feed-ct .feed-search .search .search-btn {
        width: 28px;
        height: 28px;
        padding: 3px;
        background-size: calc(100% - 3px) calc(100% - 3px)
    }

    .news-feed .feed-ct .feed-wrapper .feed-list {
        grid-gap: 64px 0;
        grid-template-columns: 100%
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap {
        margin-bottom: 24px
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .img-wrap .swiper-slide:first-child {
        z-index: 1
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-tit {
        font-size: 20px !important;
        line-height: 31.2px !important
    }

    .news-feed .feed-ct .feed-wrapper .feed-list .feed-item .txt-wrap .info-box {
        margin-bottom: 12px
    }

    .news-feed .feed-ct .feed-empty .empty-box {
        padding: 88px 0
    }
}

.news10 .sub_container,
.news10 .sec_inner {
    background-color: transparent
}

.news10 .news-viewer .viewer-head {
    padding-bottom: min(2.1354166667vw, 41px);
    border-bottom: 1px solid #E5E5E5
}

.news10 .news-viewer .viewer-head .txt-wrap .head-topic {
    font-weight: 300;
    margin-bottom: min(1.0416666667vw, 20px);
    color: #f60
}

.news10 .news-viewer .viewer-head .txt-wrap .head-title {
    margin-bottom: min(1.4583333333vw, 28px)
}

.news10 .news-viewer .viewer-head .txt-wrap .head-date {
    font-weight: 300;
    color: #4b4b4b
}

.news10 .news-viewer .viewer-cont .article-ct {
    padding-top: min(3.75vw, 72px)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-summary {
    position: relative;
    width: 100%;
    padding-left: min(1.25vw, 24px);
    box-sizing: border-box;
    border-left: 4px solid #B8B8B8
}

.news10 .news-viewer .viewer-cont .article-ct .arti-summary .sum-list {
    display: flex;
    flex-direction: column;
    gap: min(1.0416666667vw, 20px)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-img {
    position: relative;
    width: 100%;
    margin: min(3.75vw, 72px) 0
}

.news10 .news-viewer .viewer-cont .article-ct .arti-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.news10 .news-viewer .viewer-cont .article-ct .arti-text {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    margin-top: min(3.75vw, 72px);
    padding-bottom: min(5.2083333333vw, 100px)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-text img {
    margin-top: min(3.75vw, 72px);
    margin-bottom: min(3.75vw, 72px);
    width: 100%;
    height: auto;
    object-fit: contain
}

.news10 .news-viewer .viewer-cont .article-ct .arti-files {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
    padding: min(1.6666666667vw, 32px) min(1.875vw, 36px);
    box-sizing: border-box;
    display: flex;
    font-weight: 300
}

.news10 .news-viewer .viewer-cont .article-ct .arti-files .refer {
    min-width: min(3.4895833333vw, 67px)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list {
    display: flex;
    flex-direction: column;
    gap: min(.625vw, 12px);
    margin-left: min(1.4583333333vw, 28px)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
.news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    left: calc(50% - min(.4166666667vw, 8px));
    top: calc(50% - min(.4166666667vw, 8px));
    background-image: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after {
    filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(203deg) brightness(115%) contrast(101%)
}

.news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .txt {
    font-weight: 300;
    color: #4b4b4b;
    background-image: linear-gradient(#4b4b4b, #4b4b4b)
}

.news10 .news-viewer .viewer-link {
    position: relative;
    display: flex;
    justify-content: center;
    margin: min(1.6666666667vw, 32px) 0 min(2.2916666667vw, 44px)
}

.news10 .news-viewer .viewer-link .link-news .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_list_hamburger.svg);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    margin-right: min(.625vw, 12px)
}

.news10 .news-viewer .viewer-nav {
    padding-top: min(2.2916666667vw, 44px);
    border-top: 1px solid #E5E5E5
}

.news10 .news-viewer .viewer-nav .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box {
    position: relative;
    max-width: min(25.7291666667vw, 494px)
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box>a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    cursor: pointer
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .icon {
    display: inline-block;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px)
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .desc {
    position: relative;
    width: min(17.9166666667vw, 344px);
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .desc:after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #4B4B4B;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev {
    justify-content: start
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev .icon {
    left: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
    margin: 0 min(1.6666666667vw, 32px) 0 min(1.0416666667vw, 20px)
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next {
    justify-content: end;
    flex-direction: row-reverse
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
    right: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next strong {
    margin: 0 min(1.0416666667vw, 20px) 0 min(1.6666666667vw, 32px)
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .none {
    display: none
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box .notPost {
    pointer-events: none
}

.news10 .news-viewer .viewer-nav .nav-wrap .nav-box>a:hover .desc:after {
    width: 100%
}

#NEWS10 .m_btn[type=text][hover=underline] span.icon {
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    border: none
}

@media (max-width: 1023px) {
    .news10 .news-viewer .viewer-head {
        padding-bottom: 25px
    }

    .news10 .news-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 12px
    }

    .news10 .news-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 16px
    }

    .news10 .news-viewer .viewer-cont .article-ct {
        padding-top: 48px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-summary {
        padding-left: 15px;
        border-left: 2.5px solid #B8B8B8
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 12.5px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-img {
        margin: 48px 0
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-text {
        font-size: 14px;
        line-height: 23.52px;
        margin-top: 48px;
        padding-bottom: 64px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-text img {
        margin-top: 48px;
        margin-bottom: 48px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files {
        padding: 29px 22px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: 42px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 11px;
        margin-left: 20px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 14px;
        height: 14px;
        left: calc(50% - 7px);
        top: calc(50% - 7px)
    }

    .news10 .news-viewer .viewer-link {
        margin: 20px 0 28px
    }

    .news10 .news-viewer .viewer-link .link-news .icon {
        width: 16px;
        height: 16px;
        margin-right: 7.5px
    }

    .news10 .news-viewer .viewer-nav {
        padding-top: 32px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 50%
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 12.5px;
        line-height: 21px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 24px;
        height: 24px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .desc {
        width: 50%
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
        margin: 0 20.5px 0 12.5px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        margin: 0 12.5px 0 20.5px
    }

    #NEWS10 .m_btn[type=text][hover=underline] span.icon {
        width: 16px;
        height: 16px;
        border: none
    }
}

@media (max-width: 768px) {
    .news10 .news-viewer .viewer-head {
        padding-bottom: 36px
    }

    .news10 .news-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 16px
    }

    .news10 .news-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 20px;
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .news10 .news-viewer .viewer-cont .article-ct {
        padding-top: 48px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-summary {
        border-left: 2px solid #B8B8B8;
        padding-left: 18px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 20px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-img {
        padding: 48px 0;
        margin: 0
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-text {
        font-size: 16px;
        line-height: 27.52px;
        padding-bottom: 80px;
        margin: 0
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 24px;
        flex-direction: column
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: auto;
        margin-bottom: 16px
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 10px;
        margin-left: 0
    }

    .news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .news10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 10px;
        height: 10px;
        left: calc(50% - 5px);
        top: calc(50% - 5px)
    }

    #NEWS10 .news-viewer .viewer-cont .article-ct .arti-files .files-list .file .m_btn[type=text][hover=underline] span.icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important
    }

    .news10 .news-viewer .viewer-link {
        margin: 28px 0 32px
    }

    #NEWS10 .news-viewer .viewer-link .m_btn[line=round] {
        padding: 0 20px !important
    }

    #NEWS10 .news-viewer .viewer-link .link-news .icon {
        width: 20px !important;
        height: 20px !important
    }

    .news10 .news-viewer .viewer-nav {
        padding-top: 32px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap {
        flex-direction: column
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 100%
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box:nth-child(n+2) {
        margin-top: 28px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 16px;
        line-height: 27.52px
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 18px;
        height: 18px;
        order: 2
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev strong,
    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        order: 1;
        margin: 0 8px 0 0;
        font-weight: 300
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev .icon,
    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next {
        justify-content: flex-start;
        flex-direction: row
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        transform: rotate(180deg)
    }

    .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .desc {
        order: 3;
        flex-grow: 1;
        padding-left: 20px;
        box-sizing: border-box
    }

    html[lang=en] .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .prev strong,
    html[lang=en] .news10 .news-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        width: 62px
    }
}

.broc .sub_container,
.broc .sec_inner {
    background-color: transparent
}

.broc .brochure-ct {
    margin-top: min(4.1666666667vw, 80px);
    padding: 0 min(7.5vw, 144px);
    box-sizing: border-box
}

.broc .brochure-ct .brochure-list .brochure-item {
    display: flex;
    justify-content: space-between
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box {
    margin-top: min(1.8682291667vw, 35.87px)
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .title {
    font-weight: 300
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc {
    margin-top: min(3.125vw, 60px)
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc p {
    font-weight: 300;
    margin-top: min(.625vw, 12px);
    color: #4b4b4b
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box {
    display: flex
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box>a:nth-child(n+2) {
    margin-left: min(4.1666666667vw, 80px)
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:before,
.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:after {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    top: calc(50% - min(.4166666667vw, 8px));
    left: calc(50% - min(.4166666667vw, 8px));
    background-image: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg)
}

.broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:after {
    filter: invert(54%) sepia(98%) saturate(3838%) hue-rotate(359deg) brightness(102%) contrast(110%)
}

.broc .brochure-ct .brochure-list .brochure-item .img-wrap {
    position: relative;
    width: min(18.75vw, 360px);
    aspect-ratio: 360/499
}

.broc .brochure-ct .brochure-list .brochure-item .img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

#BROC .m_btn[type=text][hover=underline] span.txt {
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    font-weight: 300
}

#BROC .m_btn[type=text][hover=underline] span.icon {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    margin-right: 0;
    margin-left: min(.625vw, 12px)
}

@media (max-width: 1023px) {
    .broc .brochure-ct {
        margin-top: 28px;
        padding: 0 8.3333333333%
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box {
        margin-top: 0
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc {
        margin-top: 16px
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc p {
        margin-top: 8px
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box>a:nth-child(n+2) {
        margin-left: 8.3333333333%
    }

    .broc .brochure-ct .brochure-list .brochure-item .img-wrap {
        width: 25%
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:before,
    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:after {
        width: 10px;
        height: 10px;
        top: calc(50% - 5px);
        left: calc(50% - 5px)
    }

    #BROC .m_btn[type=text][hover=underline] span.icon {
        width: 16px !important;
        height: 16px !important;
        margin-right: 0 !important;
        margin-left: 7.41px !important
    }
}

@media (max-width: 768px) {
    .broc .brochure-ct {
        margin-top: 60px;
        padding: 0
    }

    .broc .brochure-ct .brochure-list .brochure-item {
        flex-direction: column-reverse
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box {
        margin-top: 60px
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .title {
        font-size: 36px !important;
        line-height: 54.72px !important;
        font-weight: 400
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .sub-tit {
        font-size: 24px !important;
        line-height: 1.52 !important
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc {
        margin-top: 40px
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc p {
        font-size: 16px;
        line-height: 27.52px;
        margin-top: 20px;
        font-weight: 400
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box {
        margin-top: 48px
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box>a:nth-child(n+2) {
        margin-left: 32px
    }

    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:before,
    .broc .brochure-ct .brochure-list .brochure-item .txt-wrap .down-box .icon:after {
        width: 14px;
        height: 14px;
        top: calc(50% - 7px);
        left: calc(50% - 7px)
    }

    .broc .brochure-ct .brochure-list .brochure-item .img-wrap {
        width: 180px;
        margin: 0 auto
    }

    #BROC .m_btn[type=text][hover=underline] span.txt {
        font-size: 16px !important;
        line-height: 24px !important;
        font-weight: 400
    }

    #BROC .m_btn[type=text][hover=underline] span.icon {
        width: 24px !important;
        height: 24px !important;
        margin-left: 8px !important
    }
}

.hr .talent-ct {
    padding-top: min(8.3333333333vw, 160px)
}

.hr .talent-ct .talent-box {
    position: relative;
    width: min(72.34375vw, 1389px)
}

.hr .talent-ct .talent-box .txt-wrap .desc {
    margin-top: min(1.0416666667vw, 20px);
    font-weight: 300
}

.hr .talent-ct .talent-box .video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1389/782;
    margin-top: min(3.125vw, 60px)
}

.hr .talent-ct .talent-box .video-wrap .video-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.hr .talent-ct .talent-box .video-wrap .video-btn:after {
    content: "";
    width: min(5.2083333333vw, 100px);
    height: min(5.2083333333vw, 100px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: url(https://www.hanwhaocean.com/images/common/icon_video_play.svg) no-repeat center center/contain
}

.hr .talent-ct .talent-box .video-wrap .video-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.hr .talent-ct .talent-box .video-wrap .video-box {
    position: relative;
    width: 100%;
    height: 100%
}

.hr .talent-ct .keyword-box {
    margin-top: min(8.3333333333vw, 160px);
    display: grid;
    grid-row-gap: min(8.3333333333vw, 160px)
}

.hr .talent-ct .keyword-box .key-wrap {
    display: flex;
    justify-content: space-between
}

.hr .talent-ct .keyword-box .key-wrap .key-tit {
    width: min(30vw, 576px)
}

.hr .talent-ct .keyword-box .key-wrap .key-tit .icon {
    display: block;
    margin-bottom: min(5.2083333333vw, 100px)
}

.hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key01 {
    width: min(4.8958333333vw, 94px);
    aspect-ratio: 94/121;
    background: url(https://www.hanwhaocean.com/images/careers/hr/talent-icon-keyword01.png) no-repeat center center/contain
}

.hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key02 {
    width: min(5vw, 96px);
    aspect-ratio: 96/121;
    background: url(https://www.hanwhaocean.com/images/careers/hr/talent-icon-keyword02.png) no-repeat center center/contain
}

.hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key03 {
    width: min(5vw, 96px);
    aspect-ratio: 94/121;
    background: url(https://www.hanwhaocean.com/images/careers/hr/talent-icon-keyword03.png) no-repeat center center/contain
}

.hr .talent-ct .keyword-box .key-wrap .key-tit .desc {
    margin-top: min(2.0833333333vw, 40px);
    color: #4b4b4b;
    font-weight: 300
}

.hr .talent-ct .keyword-box .key-wrap .key-list {
    width: min(42.5vw, 816px);
    margin-top: min(21.71875vw, 417px)
}

.hr .talent-ct .keyword-box .key-wrap .key-list .item:nth-child(n+2) {
    margin-top: min(4.1666666667vw, 80px)
}

.hr .talent-ct .keyword-box .key-wrap .key-list .item .num {
    margin-bottom: min(1.25vw, 24px);
    color: #818181
}

.hr .talent-ct .keyword-box .key-wrap .key-list .item .desc {
    margin-top: min(.4166666667vw, 8px);
    color: #4b4b4b
}

@media (max-width: 1023px) {
    .hr .talent-ct {
        padding-top: 120px
    }

    .hr .talent-ct .talent-box {
        width: 83.3333333333%
    }

    .hr .talent-ct .talent-box .txt-wrap .desc {
        margin-top: 36px
    }

    .hr .talent-ct .talent-box .video-wrap {
        margin-top: 52px
    }

    .hr .talent-ct .talent-box .video-wrap .video-btn:after {
        width: 60px;
        height: 60px
    }

    .hr .talent-ct .keyword-box {
        margin-top: 80px;
        grid-row-gap: 80px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit {
        width: 34.7619047619%
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon {
        margin-bottom: 60px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key01,
    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key02,
    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key03 {
        width: 16.6666666667%
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit .desc {
        margin-top: 36px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list {
        width: 48.5714285714%;
        margin-top: 140px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list .item:nth-child(n+2) {
        margin-top: 80px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list .item .num {
        margin-bottom: 27px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list .item .desc {
        margin-top: 36px
    }
}

@media (max-width: 768px) {
    .hr .talent-ct {
        padding-top: 60px
    }

    .hr .talent-ct .talent-box {
        width: 100%
    }

    .hr .talent-ct .talent-box .txt-wrap .desc {
        margin-top: 20px;
        font-weight: 400
    }

    .hr .talent-ct .talent-box .video-wrap {
        margin-top: 40px
    }

    .hr .talent-ct .talent-box .video-wrap .video-btn:after {
        width: 60px;
        height: 60px
    }

    .hr .talent-ct .keyword-box {
        margin-top: 80px;
        grid-row-gap: 80px
    }

    .hr .talent-ct .keyword-box .key-wrap {
        flex-direction: column
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit {
        width: 100%
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon {
        margin-bottom: 36px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key01,
    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key02,
    .hr .talent-ct .keyword-box .key-wrap .key-tit .icon.key03 {
        width: 62px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-tit .desc {
        margin-top: 20px;
        font-weight: 400
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list {
        width: 100%;
        margin-top: 60px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list .item:nth-child(n+2) {
        margin-top: 48px
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list .item .num {
        margin-bottom: 8px;
        font-size: 14px !important;
        line-height: 19.6px !important
    }

    .hr .talent-ct .keyword-box .key-wrap .key-list .item .desc {
        margin-top: 16px
    }
}

.sub_container,
.sub_container .sec_inner {
    background: none
}

.hr10 .recruit-ct {
    padding-top: min(8.8541666667vw, 170px)
}

.hr10 .recruit-ct .title-box {
    margin-bottom: min(6.25vw, 120px)
}

.hr10 .recruit-ct .title-box .desc {
    font-weight: 300;
    margin-top: min(3.125vw, 60px)
}

.hr10 .recruit-ct .process-box .process-wrap {
    width: min(42.5vw, 816px);
    margin-left: auto
}

.hr10 .recruit-ct .process-box .process-wrap .step-list {
    position: relative;
    margin-top: min(4.1666666667vw, 80px);
    padding-right: min(5vw, 96px);
    box-sizing: border-box
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 2
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step:nth-child(n+2) {
    margin-top: min(5.625vw, 108px)
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step .num {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: min(2.9166666667vw, 56px);
    height: min(2.9166666667vw, 56px);
    background-color: #e5e5e5;
    border-radius: 100%
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step:first-child .num {
    background-color: #fff;
    border: 2px solid #E5E5E5;
    min-width: min(2.7083333333vw, 52px);
    height: min(2.7083333333vw, 52px)
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step:last-child .num {
    background-color: #f60;
    color: #fff
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step .txt {
    width: min(30vw, 576px)
}

.hr10 .recruit-ct .process-box .process-wrap .step-list .step .txt .desc {
    font-weight: 300;
    margin-top: min(1.0416666667vw, 20px);
    color: #4b4b4b
}

.hr10 .recruit-ct .process-box .process-wrap .step-list:after {
    content: "";
    position: absolute;
    top: min(2.2916666667vw, 44px);
    left: min(1.40625vw, 27px);
    width: min(.1041666667vw, 2px);
    height: calc(100% - min(4.5833333333vw, 88px));
    box-sizing: border-box;
    background-color: #e5e5e5
}

.hr10 .recruit-ct .process-box .process-wrap .refer {
    margin-top: min(2.5vw, 48px)
}

.hr10 .recruit-ct .process-box .process-wrap .refer p {
    position: relative;
    font-weight: 300;
    padding-left: min(.625vw, 12px);
    color: #999
}

.hr10 .recruit-ct .process-box .process-wrap .refer p:nth-child(n+2) {
    margin-top: min(.4166666667vw, 8px)
}

.hr10 .recruit-ct .process-box .process-wrap .refer p:after {
    content: "";
    position: absolute;
    top: min(.5208333333vw, 10px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: min(.0520833333vw, 1px);
    background-color: #999
}

.hr10 .recruit-ct .img-box {
    max-width: min(100vw, 1920px);
    width: 100%;
    margin: min(8.3333333333vw, 160px) auto;
    padding-left: min(6.25vw, 120px);
    box-sizing: border-box
}

.hr10 .recruit-ct .img-box .img-wrap {
    width: 100%;
    height: 100%;
    padding-left: min(7.5vw, 144px);
    box-sizing: border-box;
    display: block
}

.hr10 .recruit-ct .img-box .img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

html[lang=en] .hr10 .recruit-ct .process-box .process-wrap .step-list:after {
    top: 2px;
    height: calc(100% - min(4.4270833333vw, 85px))
}

@media (max-width: 1023px) {
    .hr10 .recruit-ct {
        padding-top: 120px
    }

    .hr10 .recruit-ct .title-box {
        margin-bottom: 80px
    }

    .hr10 .recruit-ct .title-box .desc {
        margin-top: 37px
    }

    .hr10 .recruit-ct .process-box .process-wrap {
        width: 48.5714285714%
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list {
        margin-top: 36px;
        padding-right: 10.9523809524%
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step:nth-child(n+2) {
        margin-top: 64px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step .num,
    .hr10 .recruit-ct .process-box .process-wrap .step-list .step:first-child .num {
        min-width: 48px;
        height: 48px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step .txt {
        width: 66.6666666667%
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step .txt .desc {
        margin-top: 15px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list:after {
        top: 0;
        left: 23.5px;
        width: 2px;
        height: calc(100% - 80px)
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer {
        margin-top: 18px
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer p {
        padding-left: 7.5px
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer p:nth-child(n+2) {
        margin-top: 8px
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer p:after {
        top: 7.5px;
        left: 0;
        width: 2.5px;
        height: 1px
    }

    .hr10 .recruit-ct .img-box {
        margin: 120px auto;
        padding-left: 50px
    }

    .hr10 .recruit-ct .img-box .img-wrap {
        padding-left: 8.3333333333%
    }

    html[lang=en] .hr10 .recruit-ct .process-box .process-wrap .step-list:after {
        top: 0;
        height: calc(100% - 85px)
    }
}

@media (max-width: 768px) {
    .hr10 .recruit-ct {
        padding-top: 60px
    }

    .hr10 .recruit-ct .title-box {
        margin-bottom: 80px
    }

    .hr10 .recruit-ct .title-box .desc {
        margin-top: 20px
    }

    .hr10 .recruit-ct .process-box .process-wrap {
        width: 100%
    }

    .hr10 .recruit-ct .process-box .process-wrap .title {
        font-size: 24px !important;
        line-height: 36.48px !important
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list {
        margin-top: 40px;
        padding-right: 0;
        padding-left: 12px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step {
        justify-content: start
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step:nth-child(n+2) {
        margin-top: 60px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step:last-child {
        background-color: #fff
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step .num {
        min-width: 32px;
        height: 32px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step:first-child .num {
        min-width: 29px;
        height: 29px;
        border: 1.5px solid #E5E5E5
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step .txt {
        width: 260px;
        margin-left: 31px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list .step .txt .desc {
        margin-top: 8px
    }

    .hr10 .recruit-ct .process-box .process-wrap .step-list:after {
        left: 27.25px;
        width: 1.5px;
        height: calc(100% - 88px)
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer {
        margin-top: 28px;
        padding-left: 12px
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer p {
        padding-left: 12px
    }

    .hr10 .recruit-ct .process-box .process-wrap .refer p:after {
        top: 10px;
        left: 0;
        width: 4px;
        height: 1px
    }

    .hr10 .recruit-ct .img-box {
        margin: 80px auto;
        padding-left: 20px
    }

    .hr10 .recruit-ct .img-box .img-wrap {
        padding-left: 0
    }
}

.hr20 .sub_container,
.hr20 .sub_container .sec_inner {
    background: none
}

.hr20 .applying-ct {
    padding-top: min(8.3333333333vw, 160px)
}

.hr20 .applying-ct .title-box {
    margin-bottom: min(6.25vw, 120px)
}

.hr20 .applying-ct .title-box .sub-tit {
    margin-top: min(1.25vw, 24px);
    color: #4b4b4b
}

.hr20 .applying-ct .notice-box .noti-list {
    display: grid;
    gap: min(4.1666666667vw, 80px) min(2.5vw, 48px);
    grid-template-columns: repeat(3, min(27.5vw, 528px))
}

.hr20 .applying-ct .notice-box .noti-list .notice {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: min(2.0833333333vw, 40px);
    box-sizing: border-box;
    outline: 1px solid #E5E5E5;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    height: min(19.21875vw, 369px)
}

.hr20 .applying-ct .notice-box .noti-list .notice:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 2px solid #151515;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.hr20 .applying-ct .notice-box .noti-list .notice .date-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: min(1.6666666667vw, 32px)
}

.hr20 .applying-ct .notice-box .noti-list .notice .date-wrap .date {
    padding: min(.2083333333vw, 4px) min(.5208333333vw, 10px);
    color: #fff;
    border-radius: min(.2083333333vw, 4px);
    background-color: #f60
}

.hr20 .applying-ct .notice-box .noti-list .notice .date-wrap .period {
    font-weight: 300;
    color: #4b4b4b
}

.hr20 .applying-ct .notice-box .noti-list .notice .title {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all
}

.hr20 .applying-ct .notice-box .noti-list .notice .title span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.hr20 .applying-ct .notice-box .noti-list .notice .link-wrap {
    display: flex;
    align-items: end;
    flex-grow: 1
}

.hr20 .applying-ct .notice-box .noti-list .notice .link-wrap span {
    pointer-events: none
}

.hr20 .applying-ct .notice-box .noti-list .notice .link-wrap .outLink .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/outlink.svg);
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px)
}

.hr20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink {
    margin-left: 12px
}

.hr20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_copylink.svg);
    width: min(1.0416666667vw, 20px);
    height: min(.9895833333vw, 19px)
}

.hr20 .applying-ct .notice-box .noti-list .notice:hover:after {
    opacity: 1
}

.hr20 .applying-ct .notice-box .noti-list .notice:hover .title span {
    background-size: 100% 1px
}

.hr20 .applying-ct .banner-box {
    position: relative;
    margin-top: min(4.1666666667vw, 80px);
    border-radius: min(.4166666667vw, 8px);
    color: #fff
}

.hr20 .applying-ct .banner-box .txt-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: min(2.8645833333vw, 55px) min(4.1666666667vw, 80px);
    box-sizing: border-box
}

.hr20 .applying-ct .banner-box .txt-wrap desc {
    font-weight: 300
}

.hr20 .applying-ct .banner-box .link-wrap {
    position: absolute;
    right: min(3.125vw, 60px);
    bottom: min(2.2916666667vw, 44px)
}

.hr20 .applying-ct .banner-box .link-wrap .icon:before,
.hr20 .applying-ct .banner-box .link-wrap .icon:after {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_o.svg);
    width: min(.625vw, 12px);
    height: min(.4166666667vw, 8px);
    left: calc(50% - min(.3125vw, 6px));
    top: calc(50% - min(.2083333333vw, 4px))
}

.hr20 .applying-ct .banner-box .link-wrap .txt {
    color: #fff
}

.hr20 .applying-ct .banner-box .img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.hr20 .applying-ct .banner-box .banner-wrap {
    min-height: 216px;
    border-radius: 8px;
    overflow: hidden
}

.hr20 .applying-ct .banner-box .banner-wrap picture {
    min-height: 216px
}

.hr20 .applying-ct .banner-box .banner-wrap picture img {
    object-fit: cover;
    object-position: right;
    min-height: 216px
}

@media (max-width: 1023px) {
    .hr20 .applying-ct {
        padding-top: 120px
    }

    .hr20 .applying-ct .title-box {
        margin-bottom: 52px
    }

    .hr20 .applying-ct .title-box .sub-tit {
        margin-top: 24px
    }

    .hr20 .applying-ct .notice-box .noti-list {
        gap: 64px 2.8571428571%;
        grid-template-columns: repeat(3, 31.4285714286%)
    }

    .hr20 .applying-ct .notice-box .noti-list .notice {
        padding: 16px;
        height: 208px
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .date-wrap {
        margin-bottom: 12px
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .date-wrap .date {
        padding: 2px 6px;
        border-radius: 4px
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .link-wrap .outLink .icon {
        width: 20px;
        height: 20px
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .outLink.m_btn {
        padding: 0 16px !important
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink.m_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 30px !important;
        padding: 0 8px !important
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink {
        display: flex;
        align-items: center;
        margin-left: 10px
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink .icon {
        margin-left: 0 !important
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink .txt {
        display: none
    }

    .hr20 .applying-ct .banner-box {
        margin-top: 64px;
        border-radius: 8px
    }

    .hr20 .applying-ct .banner-box .txt-wrap {
        padding: 12px 16px
    }

    .hr20 .applying-ct .banner-box .link-wrap {
        right: 16px;
        bottom: 12px
    }

    .hr20 .applying-ct .banner-box .link-wrap .icon:before,
    .hr20 .applying-ct .banner-box .link-wrap .icon:after {
        width: 7.5px;
        height: 5px;
        left: calc(50% - 3.25px);
        top: calc(50% - 2.5px)
    }
}

@media (max-width: 768px) {
    .hr20 .applying-ct {
        padding-top: 60px
    }

    .hr20 .applying-ct .title-box {
        margin-bottom: 40px
    }

    .hr20 .applying-ct .title-box .sub-tit {
        margin-top: 20px;
        font-size: 16px !important;
        line-height: 27.52px !important
    }

    .hr20 .applying-ct .notice-box .noti-list {
        gap: 12px 0;
        grid-template-columns: 100%
    }

    .hr20 .applying-ct .notice-box .noti-list .notice {
        padding: 28px;
        height: auto
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .date-wrap {
        margin-bottom: 24px
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .date-wrap .date {
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 19.6px !important
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .date-wrap .period {
        font-size: 14px;
        line-height: 19.6px
    }

    .hr20 .applying-ct .notice-box .noti-list .notice .link-wrap {
        margin-top: 40px
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .outLink.m_btn {
        padding: 0 16px !important
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink.m_btn {
        padding: 0 11px !important;
        margin-left: 12px;
        min-width: 40px !important
    }

    #HR20 .applying-ct .notice-box .noti-list .notice .link-wrap .copyLink .txt {
        display: none
    }

    .hr20 .applying-ct .banner-box {
        margin-top: 40px;
        border-radius: 8px
    }

    .hr20 .applying-ct .banner-box .txt-wrap {
        padding: 24px 28px
    }

    .hr20 .applying-ct .banner-box .link-wrap {
        right: auto;
        left: 28px;
        bottom: 24px
    }

    .hr20 .applying-ct .banner-box .link-wrap .icon:before,
    .hr20 .applying-ct .banner-box .link-wrap .icon:after {
        width: 9px;
        height: 6px;
        left: calc(50% - 4.5px);
        top: calc(50% - 3px)
    }

    #HR20 .applying-ct .banner-box .link-wrap .m_btn[type=text] span.icon {
        margin-right: 16px !important
    }
}

.fr .sub_container,
.fr .sec_inner {
    background-color: transparent
}

.fr .earning-ct {
    margin-top: min(2.0833333333vw, 40px)
}

.fr .earning-ct .notice-con .notice-search {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(2.6041666667vw, 50px);
    padding: 0 min(6.25vw, 120px);
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: min(3.125vw, 60px)
}

.fr .earning-ct .notice-con .notice-search .search-num .num-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.fr .earning-ct .notice-con .notice-search .search-num.active .num-box {
    display: block;
    opacity: 1;
    visibility: visible
}

.fr .earning-ct .notice-con .notice-search .search {
    position: relative;
    width: min(27.5vw, 528px);
    padding: min(.625vw, 12px) min(1.875vw, 36px) min(.625vw, 12px) 0;
    box-sizing: border-box;
    border-bottom: 1px solid #151515
}

.fr .earning-ct .notice-con .notice-search .search .search-bar {
    width: 100%;
    background: none;
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.fr .earning-ct .notice-con .notice-search .search input::placeholder {
    color: #b8b8b8
}

.fr .earning-ct .notice-con .notice-search .search .search-bar:focus {
    outline: none
}

.fr .earning-ct .notice-con .notice-search .search .search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    padding: min(.3645833333vw, 7px);
    box-sizing: border-box;
    border: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - min(.3645833333vw, 7px)) calc(100% - min(.3645833333vw, 7px));
    transition: all .5s ease
}

.fr .earning-ct .notice-con .notice-search .search .search-btn.off {
    opacity: 50%
}

.fr .earning-ct .notice-con .notice-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.fr .earning-ct .notice-con .notice-wrapper.none {
    display: none
}

.fr .earning-ct .notice-con .notice-wrapper .post-list {
    width: 100%
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box {
    border-bottom: 1px solid #E5E5E5;
    transition: background-color .3s
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box:first-child {
    border-top: 1px solid #E5E5E5
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post {
    max-width: 1680px;
    margin: 0 auto;
    padding: min(2.1354166667vw, 41px) min(6.25vw, 120px);
    box-sizing: content-box;
    display: flex;
    align-items: center
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
    flex-grow: 1;
    pointer-events: none;
    width: min(62.5vw, 1200px)
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
    margin: 0 min(2.5vw, 48px)
}

#FR .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
    padding: 0 min(1.25vw, 24px) !important
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
    margin-left: min(.625vw, 12px)
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .icon {
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center center/contain
}

.fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
    color: #4b4b4b
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(3.5416666667vw, 68px);
    margin-top: min(3.3333333333vw, 64px)
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate>div {
    display: flex
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate button {
    border: none
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box {
    position: relative;
    gap: min(1.25vw, 24px)
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    transform-origin: center center;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_btn.svg) no-repeat center center/contain
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box button.all {
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_2x_btn.svg) no-repeat center center/contain
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box button.prev {
    transform: rotate(180deg)
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box.disable {
    opacity: 30%;
    pointer-events: none
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box {
    width: min(11.25vw, 216px);
    gap: 0 min(1.0416666667vw, 20px);
    justify-content: center
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button {
    position: relative;
    opacity: 30%;
    background: none;
    font-weight: 300;
    padding: min(.2083333333vw, 4px) min(.4166666667vw, 8px)
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button span {
    position: relative;
    display: inline-block
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.1041666667vw, 2px);
    background-color: #151515;
    transition: all .5s ease
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button.active {
    opacity: 100%
}

.fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button.active span:after {
    width: 100%
}

.fr .earning-ct .notice-con .notice-wrapper .post-more {
    width: 100%;
    margin-top: 44px
}

.fr .earning-ct .notice-con .notice-wrapper .post-more.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.fr .earning-ct .notice-con .notice-wrapper .post-more .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto
}

.fr .earning-ct .notice-con .notice-wrapper .post-more .load .txt {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.fr .earning-ct .notice-con .notice-wrapper .post-more .load .icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background-color: #f5f5f5;
    margin-left: 8px
}

.fr .earning-ct .notice-con .notice-wrapper .post-more .load .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.33px;
    height: 8.33px;
    background: url(https://www.hanwhaocean.com/images/common/icon_plus.svg) no-repeat center center/contain
}

.fr .earning-ct .notice-con .notice-empty {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.fr .earning-ct .notice-con .notice-empty .empty-box {
    padding: min(9.4270833333vw, 181px) 0;
    text-align: center;
    color: #4b4b4b
}

.fr .earning-ct .notice-con .notice-empty.none {
    display: none
}

html[lang=en] #FR .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
    width: min(52.0833333333vw, 1000px)
}

@media (max-width: 1023px) {
    .fr .earning-ct {
        margin-top: 28px
    }

    .fr .earning-ct .notice-con .notice-search {
        margin-bottom: 44px;
        padding: 0 50px;
        min-height: 40px
    }

    .fr .earning-ct .notice-con .notice-search .search {
        width: 30.4761904762%;
        padding: 8px 24px 8px 0
    }

    .fr .earning-ct .notice-con .notice-search .search .search-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - 4px) calc(100% - 4px)
    }

    .fr .earning-ct .notice-con .notice-search .search .search-bar {
        font-size: 14px;
        line-height: 1.68
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 50px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 55.4761904762%
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        margin: 0 30px
    }

    #FR .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 15px !important
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 10px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-paginate {
        column-gap: 40px;
        margin-top: 64px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box {
        gap: 12px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
        width: 20px;
        height: 20px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box {
        width: auto;
        gap: 12px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button {
        padding: 4px 6px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
        height: 2px
    }

    .fr .earning-ct .notice-con .notice-empty .empty-box {
        padding: 16.6666666667% 0
    }

    html[lang=en] #FR .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 25%
    }
}

@media (max-width: 768px) {
    .fr .sub_top .sub_top_tit.m_h2 {
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .fr .earning-ct {
        margin-top: 20px
    }

    .fr .earning-ct .notice-con .notice-search {
        margin-bottom: 40px;
        padding: 0 20px;
        flex-direction: column-reverse;
        align-items: flex-start;
        min-height: auto
    }

    .fr .earning-ct .notice-con .notice-search .search-num .num-box {
        font-size: 14px;
        line-height: 24.08px;
        margin-top: 16px
    }

    .fr .earning-ct .notice-con .notice-search .search {
        width: 100%;
        padding: 12px 28px 12px 0
    }

    .fr .earning-ct .notice-con .notice-search .search .search-bar {
        font-size: 16px;
        line-height: 27.52px
    }

    .fr .earning-ct .notice-con .notice-search .search .search-btn {
        width: 28px;
        height: 28px;
        padding: 3px;
        background-size: calc(100% - 3px) calc(100% - 3px)
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 20px;
        flex-direction: column;
        align-items: start
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 100%
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
        font-size: 18px !important;
        line-height: 28.08px !important;
        -webkit-line-clamp: 2
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
        order: 2;
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px;
        margin-top: 12px
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        order: 3;
        margin: 24px 0 0
    }

    #FR .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 16px !important
    }

    .fr .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 12px
    }

    .fr .earning-ct .notice-con .notice-empty .empty-box {
        padding: 88px 0;
        font-weight: 300
    }

    html[lang=en] #FR .earning-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 100%
    }
}

.fr10 .sub_container,
.fr10 .sec_inner {
    background-color: transparent
}

.fr10 .earning-viewer .viewer-head {
    padding-bottom: min(2.1354166667vw, 41px);
    border-bottom: 1px solid #E5E5E5
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-head {
        padding-bottom: 48px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-head {
        padding-bottom: 36px
    }
}

.fr10 .earning-viewer .viewer-head .txt-wrap .head-topic {
    font-weight: 300;
    margin-bottom: min(1.0416666667vw, 20px);
    color: #f60
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 12px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 16px
    }
}

.fr10 .earning-viewer .viewer-head .txt-wrap .head-title {
    font-weight: 400;
    margin-bottom: min(1.4583333333vw, 28px);
    color: #151515
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 16px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 20px
    }
}

.fr10 .earning-viewer .viewer-head .txt-wrap .head-date {
    font-weight: 300;
    color: #4b4b4b
}

.fr10 .earning-viewer .viewer-cont .article-ct {
    padding-top: min(3.75vw, 72px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct {
        padding-top: 48px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct {
        padding-top: 48px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-summary {
    position: relative;
    width: 100%;
    padding-left: min(1.25vw, 24px);
    box-sizing: border-box;
    border-left: 4px solid #B8B8B8
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-summary {
        border-left: 2.5px solid #B8B8B8;
        padding-left: 15px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-summary {
        border-left: 2px solid #B8B8B8;
        padding-left: 18px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-summary .sum-list {
    display: flex;
    flex-direction: column;
    gap: min(1.0416666667vw, 20px);
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: min(2vw, 38.4px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 12.5px;
        font-size: 18px;
        line-height: 28.8px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 20px;
        font-size: 18px;
        line-height: 28.8px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-img {
    position: relative;
    width: 100%;
    margin: min(3.75vw, 72px) 0
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-img {
        padding: 48px 0
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-img {
        padding: 48px 0
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-text {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    margin-top: min(3.75vw, 72px);
    padding-bottom: min(5.2083333333vw, 100px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-text {
        font-size: 14px;
        line-height: 23.52px;
        padding-bottom: 64px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-text {
        font-size: 16px;
        line-height: 27.52px;
        padding-bottom: 80px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
    padding: min(1.6666666667vw, 32px) min(1.875vw, 36px);
    box-sizing: border-box;
    display: flex;
    font-weight: 300
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 22px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 24px;
        flex-direction: column
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .refer {
    min-width: min(3.4895833333vw, 67px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: 42px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: auto;
        margin-bottom: 16px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list {
    display: flex;
    flex-direction: column;
    gap: min(.625vw, 12px);
    margin-left: min(1.4583333333vw, 28px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 11px;
        margin-left: 23.5px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 10px;
        margin-left: 28px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon {
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    border: none
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon {
        width: 16px;
        height: 16px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon {
        width: 20px;
        height: 20px
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:after,
.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    left: calc(50% - min(.4166666667vw, 8px));
    top: calc(50% - min(.4166666667vw, 8px));
    background: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg) no-repeat center center/contain
}

@media (max-width: 1200px) {

    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:after,
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:before {
        width: 12px;
        height: 12px;
        left: calc(50% - 6px);
        top: calc(50% - 6px)
    }
}

@media (max-width: 768px) {

    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:after,
    .fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:before {
        width: 10px;
        height: 10px;
        left: calc(50% - 5px);
        top: calc(50% - 5px)
    }
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .icon:after {
    filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(203deg) brightness(115%) contrast(101%)
}

.fr10 .earning-viewer .viewer-cont .article-ct .arti-files .files-list .file>a .txt {
    font-weight: 300;
    color: #4b4b4b;
    background-image: linear-gradient(#4b4b4b, #4b4b4b)
}

.fr10 .earning-viewer .viewer-link {
    position: relative;
    display: flex;
    justify-content: center;
    margin: min(1.6666666667vw, 32px) 0 min(2.2916666667vw, 44px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-link {
        margin: 20px 0 27.5px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-link {
        margin: 28px 0 32px
    }
}

.fr10 .earning-viewer .viewer-link .link-news {
    display: flex;
    justify-content: center;
    align-items: center
}

.fr10 .earning-viewer .viewer-link .link-news .icon {
    background: url(https://www.hanwhaocean.com/images/common/icon_list_hamburger.svg) no-repeat center center/contain
}

.fr10 .earning-viewer .viewer-nav {
    padding-top: min(2.2916666667vw, 44px);
    border-top: 1px solid #E5E5E5
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav {
        padding-top: 32px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav {
        padding-top: 32px
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap {
        flex-direction: column
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box {
    position: relative;
    width: min(25.7291666667vw, 494px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box {
        width: 311px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box {
        width: 100%
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.75vw, 33.6px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 12.5px;
        line-height: 21px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 16px;
        line-height: 27.52px
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.prev {
    justify-content: start
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.prev strong {
    margin: 0 min(1.6666666667vw, 32px) 0 min(1.0416666667vw, 20px)
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.prev .icon {
    left: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.prev strong {
        margin: 0 20px 0 12.5px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.prev strong {
        margin: 0
    }

    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.prev .icon {
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next {
    justify-content: end;
    flex-direction: row-reverse
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next strong {
    margin: 0 min(1.0416666667vw, 20px) 0 min(1.6666666667vw, 32px)
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next .icon {
    right: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next strong {
        margin: 0 12.5px 0 20px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next {
        justify-content: start;
        flex-direction: row;
        margin-top: 28px
    }

    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next strong {
        margin: 0
    }

    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.next .icon {
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
        transform: rotate(180deg)
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .icon {
    margin: 0;
    width: min(1.8229166667vw, 35px);
    height: min(1.8229166667vw, 35px)
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .icon {
        width: 24px;
        height: 24px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .icon {
        width: 20px;
        height: 20px;
        order: 1;
        margin: 0 20px 0 8px
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .desc {
    position: relative;
    width: min(17.9166666667vw, 344px);
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    font-weight: 300;
    color: #4b4b4b
}

@media (max-width: 1200px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .desc {
        width: 215px
    }
}

@media (max-width: 768px) {
    .fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .desc {
        width: 233px;
        order: 3
    }
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a .desc:after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #4B4B4B;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a:hover .desc:after {
    width: 100%
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.none {
    display: none
}

.fr10 .earning-viewer .viewer-nav .nav-wrap .nav-box>a.notPost {
    pointer-events: none
}

.fr10 .blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}

.m_btn[type=text][hover=underline] span.icon {
    background-color: #fff
}

.sch .sub_container,
.sch .sec_inner {
    background-color: transparent
}

.sch .sch-ct {
    margin-top: min(4.1666666667vw, 80px)
}

.sch .sch-ct .schedule-con {
    position: relative;
    max-width: 1680px;
    padding: 0 min(6.25vw, 120px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(8.3333333333vw, 160px)
}

.sch .sch-ct .schedule-con .schedule-wrapper {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #151515;
    padding-top: min(2.1354166667vw, 41px)
}

.sch .sch-ct .schedule-con .calender {
    position: relative;
    width: min(50vw, 960px)
}

.sch .sch-ct .schedule-con .calender .c-head {
    position: relative;
    width: 100%;
    padding: 0 min(1.25vw, 24px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center
}

.sch .sch-ct .schedule-con .calender .c-head .date {
    display: flex;
    align-items: center
}

.sch .sch-ct .schedule-con .calender .c-head .date .sel-btn {
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    margin-left: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_open.svg) no-repeat center center/contain;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.sch .sch-ct .schedule-con .calender .c-head .date .sel-btn.on {
    transform: rotate(-180deg)
}

.sch .sch-ct .schedule-con .calender .c-head .nav>a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px)
}

.sch .sch-ct .schedule-con .calender .c-head .nav .prev-btn {
    left: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

.sch .sch-ct .schedule-con .calender .c-head .nav .next-btn {
    right: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

.sch .sch-ct .schedule-con .calender .c-main {
    position: relative;
    margin-top: min(1.875vw, 36px)
}

.sch .sch-ct .schedule-con .calender .c-main table {
    width: 100%;
    border-collapse: separate
}

.sch .sch-ct .schedule-con .calender .c-main table tr,
.sch .sch-ct .schedule-con .calender .c-main table td {
    position: relative;
    width: min(6.875vw, 132px);
    padding: min(.8333333333vw, 16px);
    box-sizing: border-box;
    vertical-align: top;
    cursor: pointer
}

.sch .sch-ct .schedule-con .calender .c-main table tr span,
.sch .sch-ct .schedule-con .calender .c-main table td span {
    font-size: min(.9375vw, 18px);
    font-weight: 400;
    line-height: min(1.3125vw, 25.2px);
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    display: flex;
    justify-content: center;
    align-items: center
}

.sch .sch-ct .schedule-con .calender .c-main .week th {
    padding: min(.5208333333vw, 10px) min(.8333333333vw, 16px);
    border-bottom: 1px solid #E5E5E5
}

.sch .sch-ct .schedule-con .calender .c-main .days td {
    padding: min(.8333333333vw, 16px);
    height: min(5.8333333333vw, 112px);
    min-height: min(5.8333333333vw, 112px)
}

.sch .sch-ct .schedule-con .calender .c-main .off span {
    color: #b8b8b8
}

.sch .sch-ct .schedule-con .calender .c-main .wk span {
    color: #f60
}

.sch .sch-ct .schedule-con .calender .c-main .today span {
    border: 1px solid #151515;
    border-radius: 100%
}

.sch .sch-ct .schedule-con .calender .c-main .schDay span {
    position: relative;
    border-radius: 100%;
    transition: all .5s ease
}

.sch .sch-ct .schedule-con .calender .c-main .schDay span:after {
    content: "";
    position: absolute;
    width: min(.5208333333vw, 10px);
    height: min(.5208333333vw, 10px);
    bottom: min(-.6770833333vw, -13px);
    left: 50%;
    transform: translate(-50%);
    background-color: #f60;
    border-radius: 100%
}

.sch .sch-ct .schedule-con .calender .c-main .schDay:hover span {
    background-color: #f5f5f5
}

.sch .sch-ct .schedule-con .calender .c-main .active span {
    color: #fff;
    background-color: #f60 !important;
    border-radius: 100%
}

.sch .sch-ct .schedule-con .calender .c-sel {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: min(5.3125vw, 102px);
    left: 50%;
    transform: translate(-50%);
    width: min(34.21875vw, 657px);
    height: min(20.625vw, 396px);
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    display: flex;
    z-index: 10;
    overflow: auto
}

.sch .sch-ct .schedule-con .calender .c-sel.on {
    display: flex;
    opacity: 1;
    visibility: visible
}

.sch .sch-ct .schedule-con .calender .c-sel ul>li {
    padding: min(.8333333333vw, 16px);
    box-sizing: border-box;
    text-align: center;
    cursor: pointer
}

.sch .sch-ct .schedule-con .calender .c-sel ul>li span {
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: min(2vw, 38.4px);
    color: #b8b8b8;
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: all .3s ease
}

.sch .sch-ct .schedule-con .calender .c-sel ul>li.on span {
    color: #151515
}

.sch .sch-ct .schedule-con .calender .c-sel ul>li:hover span {
    color: #151515;
    background-size: 100% 1px
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-year {
    position: relative;
    width: min(9.5833333333vw, 184px);
    height: 100%;
    border-right: 1px solid #ccc
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-year ul {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar {
    width: 3px
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar-thumb {
    background-color: #ddd;
    cursor: pointer
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-month {
    width: min(24.6354166667vw, 473px);
    height: 100%;
    padding: min(2.0833333333vw, 40px);
    box-sizing: border-box
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-month ul {
    display: grid;
    grid-gap: min(.625vw, 12px) 0;
    grid-template-columns: repeat(3, 33.3333333333%)
}

.sch .sch-ct .schedule-con .calender .c-sel .sel-month li {
    text-align: center
}

.sch .sch-ct .schedule-con .planning {
    position: relative;
    width: min(35vw, 672px)
}

.sch .sch-ct .schedule-con .planning .planDate .date-type {
    width: 100%;
    border-bottom: 1px solid #E5E5E5
}

.sch .sch-ct .schedule-con .planning .planDate .date-type .local-box {
    text-align: right;
    padding: min(.5729166667vw, 11px) min(2.0833333333vw, 40px);
    box-sizing: border-box
}

.sch .sch-ct .schedule-con .planning .planDate .date-type .month-box {
    text-align: left;
    padding: min(.8854166667vw, 17px) min(1.1458333333vw, 22px);
    box-sizing: border-box;
    margin-top: min(1.875vw, 36px)
}

.sch .sch-ct .schedule-con .planning .planDate .date-type .local {
    font-weight: 300
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type {
    width: 100%;
    height: auto
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0 min(1.6666666667vw, 32px);
    box-sizing: border-box;
    margin-top: min(2.2916666667vw, 44px)
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list::-webkit-scrollbar {
    width: 3px
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list::-webkit-scrollbar-thumb {
    background-color: #e5e5e5
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan {
    padding: min(2.2916666667vw, 44px) 0;
    display: flex;
    flex-direction: column;
    transition: all .3s ease
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan:first-child {
    padding-top: 0
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan .day {
    font-weight: 300;
    color: #4b4b4b
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan .tit {
    position: relative;
    margin-top: min(1.0416666667vw, 20px);
    font-weight: 300;
    color: #151515
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan .tit:before {
    content: "";
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    position: absolute;
    top: min(.5729166667vw, 11px);
    left: 0;
    width: min(.625vw, 12px);
    height: min(.625vw, 12px);
    border-radius: 100%;
    background-color: #f60
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan.active .day {
    color: #151515
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan.active .tit {
    color: #f60;
    padding-left: 24px
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan.active .tit:before {
    opacity: 1;
    visibility: visible
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not {
    width: 100%;
    height: 100%;
    padding: min(14.9479166667vw, 287px) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .tit {
    margin-bottom: min(1.6666666667vw, 32px);
    text-align: center
}

.sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn {
    font-weight: 300
}

.SCH .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn .txt {
    font-size: min(1.0416666667vw, 20px) !important;
    line-height: min(1.75vw, 33.6px) !important
}

.SCH .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn .icon {
    margin-right: 0;
    margin-left: min(1.0416666667vw, 20px) !important
}

.sch .sch-ct .notice-con .notice-title {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(1.875vw, 36px);
    padding: 0 min(6.25vw, 120px)
}

.sch .sch-ct .notice-con .notice-search {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(2.6041666667vw, 50px);
    padding: 0 min(6.25vw, 120px);
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: min(3.125vw, 60px)
}

.sch .sch-ct .notice-con .notice-search .search-num .num-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.sch .sch-ct .notice-con .notice-search .search-num.active .num-box {
    display: block;
    opacity: 1;
    visibility: visible
}

.sch .sch-ct .notice-con .notice-search .search {
    position: relative;
    width: min(27.5vw, 528px);
    padding: min(.625vw, 12px) min(1.875vw, 36px) min(.625vw, 12px) 0;
    box-sizing: border-box;
    border-bottom: 1px solid #151515
}

.sch .sch-ct .notice-con .notice-search .search .search-bar {
    width: 100%;
    background: none;
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.sch .sch-ct .notice-con .notice-search .search input::placeholder {
    color: #b8b8b8
}

.sch .sch-ct .notice-con .notice-search .search .search-bar:focus {
    outline: none
}

.sch .sch-ct .notice-con .notice-search .search .search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    padding: min(.3645833333vw, 7px);
    box-sizing: border-box;
    border: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - min(.3645833333vw, 7px)) calc(100% - min(.3645833333vw, 7px));
    transition: all .5s ease
}

.sch .sch-ct .notice-con .notice-search .search .search-btn.off {
    opacity: 50%
}

.sch .sch-ct .notice-con .notice-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.sch .sch-ct .notice-con .notice-wrapper.none {
    display: none
}

.sch .sch-ct .notice-con .notice-wrapper .post-list {
    width: 100%
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box {
    border-bottom: 1px solid #E5E5E5;
    transition: background-color .3s
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box:first-child {
    border-top: 1px solid #E5E5E5
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post {
    max-width: 1680px;
    margin: 0 auto;
    padding: min(2.1354166667vw, 41px) min(6.25vw, 120px);
    box-sizing: content-box;
    display: flex;
    align-items: center
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
    display: block;
    width: 60%;
    flex-grow: 1;
    pointer-events: none
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
    margin: 0 min(2.5vw, 48px)
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down a.m_btn {
    min-width: min(5.2083333333vw, 100px)
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
    margin-left: min(.625vw, 12px)
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .icon {
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center center/contain
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
    font-weight: 300;
    color: #4b4b4b
}

.sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(3.5416666667vw, 68px);
    margin-top: min(3.3333333333vw, 64px)
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate>div {
    display: flex
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate button {
    border: none
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box {
    position: relative;
    gap: min(1.25vw, 24px)
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    transform-origin: center center;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_btn.svg) no-repeat center center/contain
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box button.all {
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_2x_btn.svg) no-repeat center center/contain
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box button.prev {
    transform: rotate(180deg)
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box.disable {
    opacity: 30%;
    pointer-events: none
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box {
    width: min(11.25vw, 216px);
    gap: 0 min(1.0416666667vw, 20px);
    justify-content: center
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button {
    position: relative;
    opacity: 30%;
    background: none;
    font-weight: 300;
    padding: min(.2083333333vw, 4px) min(.4166666667vw, 8px)
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button span {
    position: relative;
    display: inline-block
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.1041666667vw, 2px);
    background-color: #151515;
    transition: all .5s ease
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button.active {
    opacity: 100%
}

.sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button.active span:after {
    width: 100%
}

.sch .sch-ct .notice-con .notice-wrapper .post-more {
    width: 100%;
    margin-top: 44px
}

.sch .sch-ct .notice-con .notice-wrapper .post-more.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.sch .sch-ct .notice-con .notice-wrapper .post-more .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto
}

.sch .sch-ct .notice-con .notice-wrapper .post-more .load .txt {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.sch .sch-ct .notice-con .notice-wrapper .post-more .load .icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background-color: #f5f5f5;
    margin-left: 8px
}

.sch .sch-ct .notice-con .notice-wrapper .post-more .load .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.33px;
    height: 8.33px;
    background: url(https://www.hanwhaocean.com/images/common/icon_plus.svg) no-repeat center center/contain
}

.sch .sch-ct .notice-con .notice-empty {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.sch .sch-ct .notice-con .notice-empty .empty-box {
    padding: min(9.4270833333vw, 181px) 0;
    text-align: center
}

.sch .sch-ct .notice-con .notice-empty .empty-box span {
    font-weight: 400
}

.sch .sch-ct .notice-con .notice-empty.none {
    display: none
}

@media (max-width: 1023px) {
    .sch .sch-ct {
        margin-top: 28px
    }

    .sch .sch-ct .schedule-con {
        padding: 0 50px;
        margin-bottom: 120px
    }

    .sch .sch-ct .schedule-con .schedule-wrapper {
        padding-top: 24px
    }

    .sch .sch-ct .schedule-con .calender {
        width: 56.9047619048%
    }

    .sch .sch-ct .schedule-con .calender .c-head {
        padding: 0 15px
    }

    .sch .sch-ct .schedule-con .calender .c-head .date .sel-btn {
        width: 24px;
        height: 24px;
        margin-left: 15px
    }

    .sch .sch-ct .schedule-con .calender .c-head .nav>a {
        width: 24px;
        height: 24px
    }

    .sch .sch-ct .schedule-con .calender .c-head .nav .prev-btn {
        left: 15px
    }

    .sch .sch-ct .schedule-con .calender .c-head .nav .next-btn {
        right: 15px
    }

    .sch .sch-ct .schedule-con .calender .c-main {
        margin-top: 18px
    }

    .sch .sch-ct .schedule-con .calender .c-main table {
        border-spacing: 0px 0px
    }

    .sch .sch-ct .schedule-con .calender .c-main table tr,
    .sch .sch-ct .schedule-con .calender .c-main table td {
        width: 14.2857142857%;
        padding: 10px
    }

    .sch .sch-ct .schedule-con .calender .c-main table tr span,
    .sch .sch-ct .schedule-con .calender .c-main table td span {
        font-size: 14px;
        line-height: 1.4;
        width: 30px;
        height: 30px
    }

    .sch .sch-ct .schedule-con .calender .c-main .week th {
        padding: 6px 10px
    }

    .sch .sch-ct .schedule-con .calender .c-main .days td {
        padding: 10px;
        height: 74px;
        min-height: 74px
    }

    .sch .sch-ct .schedule-con .calender .c-main .schDay span:after {
        width: 6px;
        height: 6px;
        bottom: -9px
    }

    .sch .sch-ct .schedule-con .calender .c-sel {
        top: 54px;
        width: 68.5714285714%;
        height: 224px
    }

    .sch .sch-ct .schedule-con .calender .c-sel ul>li {
        padding: 10px
    }

    .sch .sch-ct .schedule-con .calender .c-sel ul>li span {
        font-size: 16px;
        line-height: 1.6
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year {
        width: 30%
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar {
        width: 2px
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-month {
        width: 70%;
        padding: 16px
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-month ul {
        grid-gap: 8px 0;
        grid-template-columns: repeat(3, 33.3333333333%)
    }

    .sch .sch-ct .schedule-con .planning {
        width: 40.2380952381%
    }

    .sch .sch-ct .schedule-con .planning .planDate .date-type .local-box {
        padding: 6px 20px
    }

    .sch .sch-ct .schedule-con .planning .planDate .date-type .month-box {
        padding: 10px;
        margin-top: 28px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list {
        padding: 0 20px;
        margin-top: 28px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list::-webkit-scrollbar {
        width: 2px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan {
        padding: 28px 0
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan .tit {
        margin-top: 14px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan.active .tit:before {
        top: 7px;
        width: 7px;
        height: 7px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan.active .tit {
        padding-left: 15px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not {
        padding: 160px 0
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .tit {
        margin-bottom: min(1.6666666667vw, 32px)
    }

    .SCH .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn .txt {
        font-size: 14px !important;
        line-height: 24.52px !important
    }

    .SCH .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn .icon {
        margin-left: 20px !important
    }

    .sch .sch-ct .notice-con .notice-title {
        margin-bottom: 24px;
        padding: 0 50px
    }

    .sch .sch-ct .notice-con .notice-search {
        margin-bottom: 44px;
        padding: 0 20px;
        min-height: 40px
    }

    .sch .sch-ct .notice-con .notice-search .search {
        width: 30.4761904762%;
        padding: 8px 24px 8px 0
    }

    .sch .sch-ct .notice-con .notice-search .search .search-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - 4px) calc(100% - 4px)
    }

    .sch .sch-ct .notice-con .notice-search .search .search-bar {
        font-size: 14px;
        line-height: 1.68
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 50px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        margin: 0 30px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down a.m_btn {
        min-width: 72px !important
    }

    #SCH .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 15px !important
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 10px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-paginate {
        column-gap: 40px;
        margin-top: 64px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box {
        gap: 12px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
        width: 20px;
        height: 20px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box {
        width: auto;
        gap: 12px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button {
        padding: 4px 6px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
        height: 2px
    }

    .sch .sch-ct .notice-con .notice-empty .empty-box {
        padding: 16.6666666667% 0
    }
}

@media (max-width: 768px) {
    .sch .sch-ct {
        margin-top: 40px
    }

    .sch .sch-ct .schedule-con {
        padding: 0 20px;
        margin-bottom: 80px
    }

    .sch .sch-ct .schedule-con .schedule-wrapper {
        padding-top: 22px;
        flex-direction: column
    }

    .sch .sch-ct .schedule-con .calender {
        width: 100%
    }

    .sch .sch-ct .schedule-con .calender .c-head {
        padding: 0 8px
    }

    .sch .sch-ct .schedule-con .calender .c-head .date .sel-btn {
        width: 28px;
        height: 28px;
        margin-left: 12px
    }

    .sch .sch-ct .schedule-con .calender .c-head .nav>a {
        width: 28px;
        height: 28px
    }

    .sch .sch-ct .schedule-con .calender .c-head .nav .prev-btn {
        left: 8px
    }

    .sch .sch-ct .schedule-con .calender .c-head .nav .next-btn {
        right: 8px
    }

    .sch .sch-ct .schedule-con .calender .c-main {
        margin-top: 20px;
        overflow-x: auto
    }

    .sch .sch-ct .schedule-con .calender .c-main table tr,
    .sch .sch-ct .schedule-con .calender .c-main table td {
        width: 14.2857142857%;
        padding: 8px 5.5px 12px
    }

    .sch .sch-ct .schedule-con .calender .c-main table tr span,
    .sch .sch-ct .schedule-con .calender .c-main table td span {
        font-size: 14px;
        line-height: 19.6px;
        width: 36px;
        height: 36px
    }

    .sch .sch-ct .schedule-con .calender .c-main .week th {
        padding: 4px 5.5px
    }

    .sch .sch-ct .schedule-con .calender .c-main .days td {
        padding: 8px 5.5px 12px;
        height: 56px;
        min-height: 56px
    }

    .sch .sch-ct .schedule-con .calender .c-main .schDay span:after {
        width: 6px;
        height: 6px;
        bottom: -6px
    }

    .sch .sch-ct .schedule-con .calender .c-sel {
        top: 51px;
        width: 100%;
        height: 336px;
        flex-direction: column
    }

    .sch .sch-ct .schedule-con .calender .c-sel ul>li {
        padding: 11.5px
    }

    .sch .sch-ct .schedule-con .calender .c-sel ul>li span {
        font-size: 18px;
        line-height: 25.2px
    }

    .sch .sch-ct .schedule-con .calender .c-sel {
        overflow: hidden;
        height: auto
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year {
        width: 100%;
        height: 76px;
        border-right: 0;
        border-bottom: 1px solid #E5E5E5
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to right, #fff, #fff0);
        z-index: 10
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to left, #fff, #fff0);
        z-index: 10
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year ul {
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: scroll;
        padding: 14px 11px;
        box-sizing: border-box
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year ul li {
        min-width: 96px
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar {
        width: 100px;
        height: 2px;
        z-index: 11
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-month {
        width: 100%;
        padding: 16px 5px
    }

    .sch .sch-ct .schedule-con .calender .c-sel .sel-month ul {
        grid-gap: 12px 0;
        grid-template-columns: repeat(3, 33.3333333333%)
    }

    .sch .sch-ct .schedule-con .planning {
        width: 100%;
        margin-top: 60px
    }

    .sch .sch-ct .schedule-con .planning .localDate {
        padding: 8px 0 6px
    }

    .sch .sch-ct .schedule-con .planning .planDate .date-type {
        padding-bottom: 17px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }

    .sch .sch-ct .schedule-con .planning .planDate .date-type .local-box {
        padding: 0
    }

    .sch .sch-ct .schedule-con .planning .planDate .date-type .month-box {
        padding: 0;
        margin: 0
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list {
        padding: 0 20px;
        margin-top: 24px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list::-webkit-scrollbar {
        width: 2px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan {
        padding: 24px 0
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan .tit {
        margin-top: 12px;
        font-size: 18px !important;
        line-height: 28.08px !important
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan .tit:before {
        width: 8px;
        height: 8px;
        top: 10px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-list .plan.active .tit {
        padding-left: 20px
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not {
        padding: 70px 0
    }

    .sch .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .tit {
        margin-bottom: 12px
    }

    .SCH .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn .txt {
        font-size: 16px !important;
        line-height: 27.52px !important
    }

    .SCH .sch-ct .schedule-con .planning .planDate .plan-type .plan-not .m_btn .icon {
        margin-left: 12px !important
    }

    .sch .sch-ct .notice-con .notice-title {
        padding: 0 20px;
        margin-bottom: 20px;
        font-size: 24px !important;
        line-height: 36.48px !important
    }

    .sch .sch-ct .notice-con .notice-search {
        margin-bottom: 40px;
        padding: 0 20px;
        flex-direction: column-reverse;
        align-items: flex-start;
        min-height: auto
    }

    .sch .sch-ct .notice-con .notice-search .search-num .num-box {
        font-size: 14px;
        line-height: 24.08px;
        margin-top: 16px
    }

    .sch .sch-ct .notice-con .notice-search .search {
        width: 100%;
        padding: 12px 28px 12px 0
    }

    .sch .sch-ct .notice-con .notice-search .search .search-bar {
        font-size: 16px;
        line-height: 27.52px
    }

    .sch .sch-ct .notice-con .notice-search .search .search-btn {
        width: 28px;
        height: 28px;
        padding: 3px;
        background-size: calc(100% - 3px) calc(100% - 3px)
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 20px;
        flex-direction: column;
        align-items: start
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        display: inline;
        width: auto
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
        font-size: 18px !important;
        line-height: 28.08px !important
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
        width: auto;
        white-space: normal;
        overflow: unset;
        text-overflow: unset;
        display: inline
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
        order: 2;
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px;
        margin-top: 12px
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        order: 3;
        margin: 24px 0 0
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down a.m_btn {
        min-width: 42px !important
    }

    #SCH .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 16px !important
    }

    .sch .sch-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 12px
    }

    .sch .sch-ct .notice-con .notice-empty .empty-box {
        padding: 88px 0
    }
}

.in .in-ct>div {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 min(6.25vw, 120px)
}

.in .in-ct .finan-tab {
    margin-top: min(2.2916666667vw, 44px)
}

.in .in-ct .finan-tab .tab-list {
    display: flex;
    align-items: center
}

.in .in-ct .finan-tab .tab-list .tab {
    color: #b8b8b8
}

.in .in-ct .finan-tab .tab-list .tab:nth-child(n+2) {
    margin-left: min(1.6666666667vw, 32px)
}

.in .in-ct .finan-tab .tab-list .tab span {
    position: relative;
    font-weight: 700
}

.in .in-ct .finan-tab .tab-list .tab.on {
    color: #151515
}

.in .in-ct .chart-con {
    margin-top: min(4.1666666667vw, 80px)
}

.in .in-ct .chart-con .chart-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: min(3.3333333333vw, 64px)
}

.in .in-ct .chart-con .chart-info .info {
    display: flex
}

.in .in-ct .chart-con .chart-info .info>div {
    position: relative;
    padding: min(.5989583333vw, 11.5px) min(.5208333333vw, 10px)
}

.in .in-ct .chart-con .chart-info .info>div:nth-child(n+2) {
    margin-left: min(.4166666667vw, 8px)
}

.in .in-ct .chart-con .chart-info .info span {
    padding-left: min(1.0416666667vw, 20px);
    font-weight: 300
}

.in .in-ct .chart-con .chart-info .info span:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: min(.5208333333vw, 10px);
    width: min(.625vw, 12px);
    height: min(.625vw, 12px);
    border-radius: 100%
}

.in .in-ct .chart-con .chart-info .info .asset span:before {
    background: #4b4b4b
}

.in .in-ct .chart-con .chart-info .info .equ span:before {
    background: #999
}

.in .in-ct .chart-con .chart-info .info .reven span:before {
    background: #f60
}

.in .in-ct .chart-con .unit {
    color: #999
}

.in .in-ct .chart-con .chart-graph {
    position: relative;
    width: 100%;
    padding-bottom: min(3.3854166667vw, 65px);
    margin-bottom: min(10.4166666667vw, 200px)
}

.in .in-ct .chart-con .chart-graph .board-box {
    width: 100%;
    height: auto
}

.in .in-ct .chart-con .chart-graph .board-box .unit {
    display: block;
    text-align: right;
    font-weight: 300
}

.in .in-ct .chart-con .chart-graph .board-box .values {
    width: 100%;
    height: min(19.4791666667vw, 374px);
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between
}

.in .in-ct .chart-con .chart-graph .board-box .values .val {
    position: relative
}

.in .in-ct .chart-con .chart-graph .board-box .values .val:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(83.3333333333vw, 1600px);
    height: 1px;
    background-color: #e5e5e5
}

.in .in-ct .chart-con .chart-graph .board-box .values .val span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: min(2.4479166667vw, 47px);
    text-align: right;
    font-size: min(.625vw, 12px);
    font-weight: 400;
    line-height: min(.875vw, 16.8px);
    color: #b8b8b8
}

.in .in-ct .chart-con .chart-graph .data-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-left: min(15.7291666667vw, 302px);
    box-sizing: border-box;
    display: flex;
    z-index: 1
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap {
    display: flex;
    flex-direction: column-reverse
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap:nth-child(n+2) {
    margin-left: min(11.8229166667vw, 227px)
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .tit {
    text-align: center;
    color: #999;
    margin-top: min(2.0833333333vw, 40px)
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph {
    display: flex
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph>div {
    width: min(4.0625vw, 78px);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .count {
    text-align: center;
    opacity: 0;
    margin-bottom: min(.625vw, 12px)
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .bar {
    width: min(2.5vw, 48px);
    height: 0;
    border-top-left-radius: min(.5208333333vw, 10px);
    border-top-right-radius: min(.5208333333vw, 10px)
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .asset>.bar {
    background-color: #5a5a5a
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .equ>.bar {
    background-color: #999
}

.in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .reven>.bar {
    background-color: #f60
}

.in .in-ct .chart-con .chart-graph .swiper-icon {
    opacity: 0;
    transition: opacity .3s ease;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%);
    width: 80px;
    height: 80px;
    background: url(https://www.hanwhaocean.com/images/common/icon_swiper_mouse.png) no-repeat center center/contain;
    z-index: 10;
    pointer-events: none;
    animation: swiper-ic 2s infinite cubic-bezier(.41, .2, .53, .84)
}

.in .in-ct .chart-con .chart-graph .swiper-icon.active {
    opacity: 1
}

.in .in-ct .table-con:nth-child(n+2) {
    margin-top: min(8.3333333333vw, 160px)
}

.in .in-ct .table-con .tit-wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: min(1.875vw, 36px)
}

.in .in-ct .table-con .tit-wrap .unit {
    display: block;
    margin-top: min(1.1979166667vw, 23px);
    color: #999;
    font-weight: 300
}

.in .in-ct .table-con .table-wrap table {
    width: 100%
}

.in .in-ct .table-con .table-wrap>table {
    width: 100%;
    border-top: 2px solid #151515
}

.in .in-ct .table-con .table-wrap tr {
    border-bottom: 1px solid #E5E5E5
}

.in .in-ct .table-con .table-wrap tr th,
.in .in-ct .table-con .table-wrap tr td {
    width: min(22.9166666667vw, 440px);
    height: min(5.2083333333vw, 100px);
    padding: 0 min(4.375vw, 84px);
    text-align: right;
    box-sizing: border-box
}

.in .in-ct .table-con .table-wrap tr th.cate {
    width: min(18.75vw, 360px);
    padding: 0 min(2.2916666667vw, 44px);
    text-align: left
}

.in .in-ct .table-con .table-wrap tbody {
    font-weight: 300;
    color: #4b4b4b
}

.in .in-ct .table-con .table-wrap .curr {
    color: #f60
}

.in .in-ct .table-con .refer-wrap {
    margin-top: min(1.4583333333vw, 28px)
}

.in .in-ct .table-con .refer-wrap p {
    position: relative;
    width: 100%;
    padding-left: min(.625vw, 12px);
    box-sizing: border-box;
    color: #999
}

.in .in-ct .table-con .refer-wrap p:nth-child(n+2) {
    margin-top: min(.4166666667vw, 8px)
}

.in .in-ct .table-con .refer-wrap p:after {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: 4px;
    height: 1px;
    background-color: #999
}

.in .in-ct .table-con.status-con .subTable {
    background-color: #f5f5f5;
    font-weight: 400;
    color: #151515
}

.in .in-ct .table-con.status-con .sub-cate {
    padding: 0
}

.in .in-ct .table-con.status-con .sub-cate .cate {
    padding: 0 min(3.75vw, 72px)
}

.in .in-ct .m_only {
    display: none;
    opacity: 0;
    visibility: hidden
}

.in.en .con-in .table-con .table-wrap table {
    line-height: 1.4
}

@media print and (orientation: portrait) {
    .in .in-ct .chart-con .chart-graph .data-box {
        position: relative;
        justify-content: center
    }

    .in .in-ct .chart-con .chart-graph .board-box {
        position: absolute;
        top: 0;
        width: 100%;
        height: calc(100% - 80px);
        border-bottom: 1px solid #E5E5E5
    }

    .in .in-ct .chart-con .chart-graph .swiper-icon,
    .in .in-ct .chart-con .chart-graph .board-box .values .val span {
        display: none
    }

    .in .in-ct .chart-con .chart-graph .board-box .values {
        height: 374px
    }
}

@media print and (orientation: landscape) {
    .main-inner {
        padding-top: 0
    }

    .in .in-ct .chart-con .chart-graph .board-box .values .val:nth-child(n+2) {
        display: none
    }
}

@media (max-width: 1023px) {
    .in .in-ct>div {
        padding: 0 50px
    }

    .in .in-ct .finan-tab {
        margin-top: 28px
    }

    .in .in-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .in .in-ct .chart-con {
        margin-top: 44px
    }

    .in .in-ct .chart-con .chart-info {
        margin-bottom: 44px
    }

    .in .in-ct .chart-con .chart-info .info>div {
        padding: 4px 6px
    }

    .in .in-ct .chart-con .chart-info .info>div:nth-child(n+2) {
        margin-left: 4px
    }

    .in .in-ct .chart-con .chart-info .info span {
        padding-left: 12px
    }

    .in .in-ct .chart-con .chart-info .info span:before {
        left: 6px;
        width: 8px;
        height: 8px
    }

    .in .in-ct .chart-con .chart-graph {
        padding-bottom: 32px;
        margin-bottom: 120px
    }

    .in .in-ct .chart-con .chart-graph .board-box .values {
        height: 182px
    }

    .in .in-ct .chart-con .chart-graph .board-box .values .val:after {
        width: 91.6666666667%
    }

    .in .in-ct .chart-con .chart-graph .board-box .values .val span {
        width: 6.9047619048%;
        font-size: 12px;
        line-height: 16.8px
    }

    .in .in-ct .chart-con .chart-graph .data-box {
        padding-left: 16.6666666667%
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap:nth-child(n+2) {
        margin-left: 11.1904761905%
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .tit {
        margin-top: 12px
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph>div {
        width: auto
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .count {
        margin-bottom: 6px
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .bar {
        width: 24px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px
    }

    .in .in-ct .table-con:nth-child(n+2) {
        margin-top: 120px
    }

    .in .in-ct .table-con .tit-wrap {
        padding-bottom: 24px
    }

    .in .in-ct .table-con .tit-wrap .unit {
        margin-top: 11px
    }

    .in .in-ct .table-con .table-wrap tr th,
    .in .in-ct .table-con .table-wrap tr td {
        width: 25%;
        height: 64px;
        padding: 0 56px;
        font-size: 12.5px;
        line-height: 17.5px
    }

    .in .in-ct .table-con .table-wrap tr th.cate {
        width: 22.1428571429%;
        padding: 0 28px
    }

    .in .in-ct .table-con .refer-wrap {
        margin-top: 18px
    }

    .in .in-ct .table-con .refer-wrap p {
        padding-left: 7.5px
    }

    .in .in-ct .table-con .refer-wrap p:nth-child(n+2) {
        margin-top: 5px
    }

    .in .in-ct .table-con .refer-wrap p:after {
        top: 7.5px;
        width: 2.5px
    }

    .in .in-ct .table-con.status-con .sub-cate .cate {
        padding: 0 48px
    }

    .in.en .in-ct .table-con .table-wrap tr th.cate {
        padding: 10px 28px
    }
}

@media (max-width: 768px) {
    .in .in-ct>div {
        padding: 0
    }

    .in .in-ct .finan-tab {
        margin-top: 24px;
        padding: 0
    }

    .in .in-ct .finan-tab .tab-list {
        padding: 0 20px
    }

    .in .in-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .in .in-ct .chart-con {
        padding: 0
    }

    .in .in-ct .chart-con {
        margin-top: 40px
    }

    .in .in-ct .chart-con .chart-info {
        margin-bottom: 41px;
        padding: 0 20px
    }

    .in .in-ct .chart-con .chart-info .info>div {
        padding: 4px
    }

    .in .in-ct .chart-con .chart-info .info>div:nth-child(n+2) {
        margin-left: 8px
    }

    .in .in-ct .chart-con .chart-info .info span {
        padding-left: 16px
    }

    .in .in-ct .chart-con .chart-info .info span:before {
        left: 4px;
        width: 8px;
        height: 8px
    }

    .in .in-ct .chart-con .chart-info .print {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    .in .in-ct .chart-con .chart-graph {
        padding-bottom: 40px;
        margin-bottom: 80px
    }

    .in .in-ct .chart-con .chart-graph .board-box {
        border-bottom: 1px solid #E5E5E5
    }

    .in .in-ct .chart-con .chart-graph .board-box .unit {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    .in .in-ct .chart-con .chart-graph .board-box .values {
        height: 184px
    }

    .in .in-ct .chart-con .chart-graph .board-box .values .val:after {
        display: none
    }

    .in .in-ct .chart-con .chart-graph .board-box .values .val span {
        opacity: 0
    }

    .in .in-ct .chart-con .chart-graph .data-box {
        overflow: auto;
        padding: 0 32px;
        box-sizing: border-box
    }

    .in .in-ct .chart-con .chart-graph .data-box::-webkit-scrollbar {
        display: none
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap:nth-child(n+2) {
        margin-left: 48px
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .tit {
        margin-top: 16px
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .count {
        margin-bottom: 4px
    }

    .in .in-ct .chart-con .chart-graph .data-box .year-wrap .graph .bar {
        width: 24px;
        margin: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px
    }

    .in .in-ct .table-con:nth-child(n+2) {
        margin-top: 80px
    }

    .in .in-ct .table-con .tit-wrap {
        padding-bottom: 20px;
        align-items: center;
        margin: 0 20px
    }

    .in .in-ct .table-con .tit-wrap .unit {
        margin-top: 0
    }

    .in .in-ct .table-con .table-wrap {
        overflow-x: scroll;
        overflow-y: hidden;
        max-width: 100%
    }

    .in .in-ct .table-con .table-wrap>table {
        margin: 0 20px;
        max-width: calc(100% - 40px)
    }

    .in .in-ct .table-con .table-wrap tr th,
    .in .in-ct .table-con .table-wrap tr td {
        width: auto;
        min-width: 72px;
        height: 88px;
        padding: 0 8px;
        font-size: 14px;
        line-height: 24.08px
    }

    .in .in-ct .table-con .table-wrap tr th.cate {
        width: 32.1428571429%;
        min-width: 119px;
        padding: 0 11px 0 8px
    }

    .in .in-ct .table-con .refer-wrap {
        margin-top: 16px
    }

    .in .in-ct .table-con .refer-wrap p {
        padding-left: 8px
    }

    .in .in-ct .table-con .refer-wrap p:nth-child(n+2) {
        margin-top: 4px
    }

    .in .in-ct .table-con .refer-wrap p:after {
        top: 12px;
        width: 4px
    }

    .in .in-ct .table-con.status-con .table-wrap tr th,
    .in .in-ct .table-con.status-con .table-wrap tr td {
        height: 64px
    }

    .in .in-ct .table-con.status-con .sub-cate .cate {
        padding: 0 0 0 20px
    }

    .in .in-ct .m_only {
        display: block;
        opacity: 1;
        visibility: visible
    }

    .in.en .in-ct .table-con .table-wrap tr th.cate {
        padding: 20px 11px 20px 8px;
        color: #151515;
        line-height: 19.6px
    }

    .in.en .in-ct .table-con.status-con .sub-cate .cate {
        padding: 0 0 0 20px
    }

    .in .in-ct .table-con .refer-wrap {
        padding: 0 20px
    }

    html[lang=en] #IN .in-ct .chart-con .chart-info {
        flex-direction: column;
        align-items: end
    }

    html[lang=en] #IN .in-ct .chart-con .chart-info .info {
        width: 100%;
        justify-content: start
    }
}

@media screen and (max-width: 374px) {
    html[lang=en] .in .in-ct .table-con .tit-wrap {
        flex-direction: column;
        align-items: flex-start
    }
}

.con .con-ct>div {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 min(6.25vw, 120px)
}

.con .con-ct .finan-tab {
    margin-top: min(2.2916666667vw, 44px)
}

.con .con-ct .finan-tab .tab-list {
    display: flex;
    align-items: center
}

.con .con-ct .finan-tab .tab-list .tab {
    color: #b8b8b8
}

.con .con-ct .finan-tab .tab-list .tab:nth-child(n+2) {
    margin-left: min(1.6666666667vw, 32px)
}

.con .con-ct .finan-tab .tab-list .tab span {
    position: relative;
    font-weight: 700
}

.con .con-ct .finan-tab .tab-list .tab.on {
    color: #151515
}

.con .con-ct .chart-con {
    margin-top: min(4.1666666667vw, 80px)
}

.con .con-ct .chart-con .chart-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: min(3.3333333333vw, 64px)
}

.con .con-ct .chart-con .chart-info .info {
    display: flex
}

.con .con-ct .chart-con .chart-info .info>div {
    position: relative;
    padding: min(.5989583333vw, 11.5px) min(.5208333333vw, 10px)
}

.con .con-ct .chart-con .chart-info .info>div:nth-child(n+2) {
    margin-left: min(.4166666667vw, 8px)
}

.con .con-ct .chart-con .chart-info .info span {
    padding-left: min(1.0416666667vw, 20px);
    font-weight: 300
}

.con .con-ct .chart-con .chart-info .info span:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: min(.5208333333vw, 10px);
    width: min(.625vw, 12px);
    height: min(.625vw, 12px);
    border-radius: 100%
}

.con .con-ct .chart-con .chart-info .info .asset span:before {
    background: #4b4b4b
}

.con .con-ct .chart-con .chart-info .info .equ span:before {
    background: #999
}

.con .con-ct .chart-con .chart-info .info .reven span:before {
    background: #f60
}

.con .con-ct .chart-con .unit {
    color: #999
}

.con .con-ct .chart-con .chart-graph {
    position: relative;
    width: 100%;
    padding-bottom: min(3.3854166667vw, 65px);
    margin-bottom: min(10.4166666667vw, 200px)
}

.con .con-ct .chart-con .chart-graph .board-box {
    width: 100%;
    height: auto
}

.con .con-ct .chart-con .chart-graph .board-box .unit {
    display: block;
    text-align: right;
    font-weight: 300
}

.con .con-ct .chart-con .chart-graph .board-box .values {
    width: 100%;
    height: min(19.4791666667vw, 374px);
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between
}

.con .con-ct .chart-con .chart-graph .board-box .values .val {
    position: relative
}

.con .con-ct .chart-con .chart-graph .board-box .values .val:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(83.3333333333vw, 1600px);
    height: 1px;
    background-color: #e5e5e5
}

.con .con-ct .chart-con .chart-graph .board-box .values .val span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: min(2.4479166667vw, 47px);
    text-align: right;
    font-size: min(.625vw, 12px);
    font-weight: 400;
    line-height: min(.875vw, 16.8px);
    color: #b8b8b8
}

.con .con-ct .chart-con .chart-graph .data-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-left: min(15.7291666667vw, 302px);
    box-sizing: border-box;
    display: flex;
    z-index: 1
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap {
    display: flex;
    flex-direction: column-reverse
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap:nth-child(n+2) {
    margin-left: min(11.8229166667vw, 227px)
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .tit {
    text-align: center;
    color: #999;
    margin-top: min(2.0833333333vw, 40px)
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph {
    display: flex
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph>div {
    width: min(4.0625vw, 78px);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .count {
    text-align: center;
    opacity: 0;
    margin-bottom: min(.625vw, 12px)
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .bar {
    width: min(2.5vw, 48px);
    height: 0;
    border-top-left-radius: min(.5208333333vw, 10px);
    border-top-right-radius: min(.5208333333vw, 10px)
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .asset>.bar {
    background-color: #5a5a5a
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .equ>.bar {
    background-color: #999
}

.con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .reven>.bar {
    background-color: #f60
}

.con .con-ct .chart-con .chart-graph .swiper-icon {
    opacity: 0;
    transition: opacity .3s ease;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%);
    width: 80px;
    height: 80px;
    background: url(https://www.hanwhaocean.com/images/common/icon_swiper_mouse.png) no-repeat center center/contain;
    z-index: 10;
    pointer-events: none;
    animation: swiper-ic 2s infinite cubic-bezier(.41, .2, .53, .84)
}

.con .con-ct .chart-con .chart-graph .swiper-icon.active {
    opacity: 1
}

.con .con-ct .table-con:nth-child(n+2) {
    margin-top: min(8.3333333333vw, 160px)
}

.con .con-ct .table-con .tit-wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: min(1.875vw, 36px)
}

.con .con-ct .table-con .tit-wrap .unit {
    display: block;
    margin-top: min(1.1979166667vw, 23px);
    color: #999;
    font-weight: 300
}

.con .con-ct .table-con .table-wrap table {
    width: 100%
}

.con .con-ct .table-con .table-wrap>table {
    width: 100%;
    border-top: 2px solid #151515
}

.con .con-ct .table-con .table-wrap tr {
    border-bottom: 1px solid #E5E5E5
}

.con .con-ct .table-con .table-wrap tr th,
.con .con-ct .table-con .table-wrap tr td {
    width: min(22.9166666667vw, 440px);
    height: min(5.2083333333vw, 100px);
    padding: 0 min(4.375vw, 84px);
    text-align: right;
    box-sizing: border-box
}

.con .con-ct .table-con .table-wrap tr th.cate {
    width: min(18.75vw, 360px);
    padding: 0 min(2.2916666667vw, 44px);
    text-align: left
}

.con .con-ct .table-con .table-wrap tbody {
    font-weight: 300;
    color: #4b4b4b
}

.con .con-ct .table-con .table-wrap .curr {
    color: #f60
}

.con .con-ct .table-con .refer-wrap {
    margin-top: min(1.4583333333vw, 28px)
}

.con .con-ct .table-con .refer-wrap p {
    position: relative;
    width: 100%;
    padding-left: min(.625vw, 12px);
    box-sizing: border-box;
    color: #999
}

.con .con-ct .table-con .refer-wrap p:nth-child(n+2) {
    margin-top: min(.4166666667vw, 8px)
}

.con .con-ct .table-con .refer-wrap p:after {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: 4px;
    height: 1px;
    background-color: #999
}

.con .con-ct .table-con.status-con .subTable {
    background-color: #f5f5f5;
    font-weight: 400;
    color: #151515
}

.con .con-ct .table-con.status-con .sub-cate {
    padding: 0
}

.con .con-ct .table-con.status-con .sub-cate .cate {
    padding: 0 min(3.75vw, 72px)
}

.con .con-ct .m_only {
    display: none;
    opacity: 0;
    visibility: hidden
}

.con.en .con-in .table-con .table-wrap table {
    line-height: 1.4
}

@media print and (orientation: portrait) {
    .con .con-ct .chart-con .chart-graph .data-box {
        position: relative;
        justify-content: center
    }

    .con .con-ct .chart-con .chart-graph .board-box {
        position: absolute;
        top: 0;
        width: 100%;
        height: calc(100% - 80px);
        border-bottom: 1px solid #E5E5E5
    }

    .con .con-ct .chart-con .chart-graph .swiper-icon,
    .con .con-ct .chart-con .chart-graph .board-box .values .val span {
        display: none
    }

    .con .con-ct .chart-con .chart-graph .board-box .values {
        height: 374px
    }
}

@media print and (orientation: landscape) {
    .main-inner {
        padding-top: 0
    }

    .con .con-ct .chart-con .chart-graph .board-box .values .val:nth-child(n+2) {
        display: none
    }
}

@media (max-width: 1023px) {
    .con .con-ct>div {
        padding: 0 50px
    }

    .con .con-ct .finan-tab {
        margin-top: 28px
    }

    .con .con-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .con .con-ct .chart-con {
        margin-top: 44px
    }

    .con .con-ct .chart-con .chart-info {
        margin-bottom: 44px
    }

    .con .con-ct .chart-con .chart-info .info>div {
        padding: 4px 6px
    }

    .con .con-ct .chart-con .chart-info .info>div:nth-child(n+2) {
        margin-left: 4px
    }

    .con .con-ct .chart-con .chart-info .info span {
        padding-left: 12px
    }

    .con .con-ct .chart-con .chart-info .info span:before {
        left: 6px;
        width: 8px;
        height: 8px
    }

    .con .con-ct .chart-con .chart-graph {
        padding-bottom: 32px;
        margin-bottom: 120px
    }

    .con .con-ct .chart-con .chart-graph .board-box .values {
        height: 182px
    }

    .con .con-ct .chart-con .chart-graph .board-box .values .val:after {
        width: 91.6666666667%
    }

    .con .con-ct .chart-con .chart-graph .board-box .values .val span {
        width: 6.9047619048%;
        font-size: 12px;
        line-height: 16.8px
    }

    .con .con-ct .chart-con .chart-graph .data-box {
        padding-left: 16.6666666667%
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap:nth-child(n+2) {
        margin-left: 11.1904761905%
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .tit {
        margin-top: 12px
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph>div {
        width: auto
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .count {
        margin-bottom: 6px
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .bar {
        width: 24px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px
    }

    .con .con-ct .table-con:nth-child(n+2) {
        margin-top: 120px
    }

    .con .con-ct .table-con .tit-wrap {
        padding-bottom: 24px
    }

    .con .con-ct .table-con .tit-wrap .unit {
        margin-top: 11px
    }

    .con .con-ct .table-con .table-wrap tr th,
    .con .con-ct .table-con .table-wrap tr td {
        width: 25%;
        height: 64px;
        padding: 0 56px;
        font-size: 12.5px;
        line-height: 17.5px
    }

    .con .con-ct .table-con .table-wrap tr th.cate {
        width: 22.1428571429%;
        padding: 0 28px
    }

    .con .con-ct .table-con .refer-wrap {
        margin-top: 18px
    }

    .con .con-ct .table-con .refer-wrap p {
        padding-left: 7.5px
    }

    .con .con-ct .table-con .refer-wrap p:nth-child(n+2) {
        margin-top: 5px
    }

    .con .con-ct .table-con .refer-wrap p:after {
        top: 7.5px;
        width: 2.5px
    }

    .con .con-ct .table-con.status-con .sub-cate .cate {
        padding: 0 48px
    }

    .con.en .con-ct .table-con .table-wrap tr th.cate {
        padding: 10px 28px
    }
}

@media (max-width: 768px) {
    .con .con-ct>div {
        padding: 0
    }

    .con .con-ct .finan-tab {
        margin-top: 24px;
        padding: 0
    }

    .con .con-ct .finan-tab .tab-list {
        padding: 0 20px
    }

    .con .con-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .con .con-ct .chart-con {
        padding: 0
    }

    .con .con-ct .chart-con {
        margin-top: 40px
    }

    .con .con-ct .chart-con .chart-info {
        margin-bottom: 41px;
        padding: 0 20px
    }

    .con .con-ct .chart-con .chart-info .info>div {
        padding: 4px
    }

    .con .con-ct .chart-con .chart-info .info>div:nth-child(n+2) {
        margin-left: 8px
    }

    .con .con-ct .chart-con .chart-info .info span {
        padding-left: 16px
    }

    .con .con-ct .chart-con .chart-info .info span:before {
        left: 4px;
        width: 8px;
        height: 8px
    }

    .con .con-ct .chart-con .chart-info .print {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    .con .con-ct .chart-con .chart-graph {
        padding-bottom: 40px;
        margin-bottom: 80px
    }

    .con .con-ct .chart-con .chart-graph .board-box {
        border-bottom: 1px solid #E5E5E5
    }

    .con .con-ct .chart-con .chart-graph .board-box .unit {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    .con .con-ct .chart-con .chart-graph .board-box .values {
        height: 184px
    }

    .con .con-ct .chart-con .chart-graph .board-box .values .val:after {
        display: none
    }

    .con .con-ct .chart-con .chart-graph .board-box .values .val span {
        opacity: 0
    }

    .con .con-ct .chart-con .chart-graph .data-box {
        overflow: auto;
        padding: 0 32px;
        box-sizing: border-box
    }

    .con .con-ct .chart-con .chart-graph .data-box::-webkit-scrollbar {
        display: none
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap:nth-child(n+2) {
        margin-left: 48px
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .tit {
        margin-top: 16px
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .count {
        margin-bottom: 4px
    }

    .con .con-ct .chart-con .chart-graph .data-box .year-wrap .graph .bar {
        width: 24px;
        margin: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px
    }

    .con .con-ct .table-con:nth-child(n+2) {
        margin-top: 80px
    }

    .con .con-ct .table-con .tit-wrap {
        padding-bottom: 20px;
        align-items: center;
        margin: 0 20px
    }

    .con .con-ct .table-con .tit-wrap .unit {
        margin-top: 0
    }

    .con .con-ct .table-con .table-wrap {
        overflow-x: scroll;
        overflow-y: hidden;
        max-width: 100%
    }

    .con .con-ct .table-con .table-wrap>table {
        margin: 0 20px;
        max-width: calc(100% - 40px)
    }

    .con .con-ct .table-con .table-wrap tr th,
    .con .con-ct .table-con .table-wrap tr td {
        width: auto;
        min-width: 72px;
        height: 88px;
        padding: 0 8px;
        font-size: 14px;
        line-height: 24.08px
    }

    .con .con-ct .table-con .table-wrap tr th.cate {
        width: 32.1428571429%;
        min-width: 119px;
        padding: 0 11px 0 8px
    }

    .con .con-ct .table-con .refer-wrap {
        margin-top: 16px
    }

    .con .con-ct .table-con .refer-wrap p {
        padding-left: 8px
    }

    .con .con-ct .table-con .refer-wrap p:nth-child(n+2) {
        margin-top: 4px
    }

    .con .con-ct .table-con .refer-wrap p:after {
        top: 12px;
        width: 4px
    }

    .con .con-ct .table-con.status-con .table-wrap tr th,
    .con .con-ct .table-con.status-con .table-wrap tr td {
        height: 64px
    }

    .con .con-ct .table-con.status-con .sub-cate .cate {
        padding: 0 0 0 20px
    }

    .con .con-ct .m_only {
        display: block;
        opacity: 1;
        visibility: visible
    }

    .con.en .con-ct .table-con .table-wrap tr th.cate {
        padding: 20px 11px 20px 8px;
        color: #151515;
        line-height: 19.6px
    }

    .con.en .con-ct .table-con.status-con .sub-cate .cate {
        padding: 0 0 0 20px
    }

    .con .con-ct .table-con .refer-wrap {
        padding: 0 20px
    }

    html[lang=en] #IN .con-ct .chart-con .chart-info {
        flex-direction: column;
        align-items: end
    }

    html[lang=en] #IN .con-ct .chart-con .chart-info .info {
        width: 100%;
        justify-content: start
    }

    html[lang=en] .con .con-ct .chart-con .chart-info {
        flex-direction: column
    }

    html[lang=en] .con .con-ct .chart-con .chart-info .info {
        width: 100%
    }

    html[lang=en] .con .con-ct .chart-con .chart-info .unit {
        width: 100%;
        text-align: right
    }
}

@media screen and (max-width: 374px) {
    html[lang=en] .con .con-ct .table-con .tit-wrap {
        flex-direction: column;
        align-items: flex-start
    }
}

@keyframes swiper-ic {
    0% {
        left: 45%
    }

    50% {
        left: 55%
    }

    to {
        left: 45%
    }
}

.si .m_navigation {
    display: none;
    opacity: 0;
    visibility: hidden
}

#majPer {
    opacity: 0
}

.si .si-ct>div:nth-child(n+2) {
    margin-top: min(8.3333333333vw, 160px)
}

.si .si-ct .div-con {
    display: flex;
    justify-content: space-between
}

.si .si-ct .div-con>div {
    width: calc((100% - min(2.5vw, 48px))/2)
}

.si .si-ct .div-con .tit-wrap {
    padding-bottom: min(1.875vw, 36px)
}

.si .si-ct .div-con .title-wrap .desc {
    margin-top: min(.8333333333vw, 16px);
    font-weight: 300
}

.si .si-ct .table-wrap {
    border-top: 1px solid #151515
}

.si .si-ct .table-wrap table {
    width: 100%;
    word-break: break-word
}

.si .si-ct .table-wrap tr {
    border-bottom: 1px solid #B8B8B8
}

.si .si-ct .table-wrap th,
.si .si-ct .table-wrap td {
    font-weight: 300;
    color: #4b4b4b;
    word-break: break-word
}

.si .si-ct .table-wrap th.cate {
    font-weight: 400;
    color: #151515
}

.si .si-ct .refer-wrap {
    margin-top: min(1.4583333333vw, 28px)
}

.si .si-ct .refer-wrap p {
    position: relative;
    width: 100%;
    color: #999;
    padding-left: min(.625vw, 12px);
    box-sizing: border-box;
    font-weight: 300
}

.si .si-ct .refer-wrap p:nth-child(n+2) {
    margin-top: min(.4166666667vw, 8px)
}

.si .si-ct .refer-wrap p:after {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: 1px;
    background-color: #999
}

.si .si-ct .exhibit-wrap {
    border-top: 1px solid #151515;
    margin-top: min(5vw, 96px)
}

.si .si-ct .exhibit-wrap .exhibit-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.si .si-ct .exhibit-wrap .exhibit-list .broc {
    position: relative;
    padding: min(3.1682291667vw, 60.83px) 0;
    box-sizing: border-box;
    display: flex;
    align-items: center
}

.si .si-ct .exhibit-wrap .exhibit-list .broc .img-box {
    width: min(7.8125vw, 150px);
    border: 1px solid #E5E5E5;
    box-shadow: 5px 5px 10px #0000001a;
    overflow: hidden
}

.si .si-ct .exhibit-wrap .exhibit-list .broc .img-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.si .si-ct .exhibit-wrap .exhibit-list .broc .img-box:hover img {
    transform: scale(1.1)
}

.si .si-ct .exhibit-wrap .exhibit-list .broc .txt-box {
    padding-left: min(2.0833333333vw, 40px)
}

.si .si-ct .exhibit-wrap .exhibit-list .broc .txt-box .year,
.si .si-ct .exhibit-wrap .exhibit-list .broc .txt-box .date {
    font-weight: 300
}

.si .si-ct .compon-con {
    margin-top: min(4.1666666667vw, 80px)
}

.si .si-ct .compon-con .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: min(1.875vw, 36px);
    border-bottom: 1px solid #151515
}

.si .si-ct .compon-con .title-wrap .desc {
    font-weight: 300;
    color: #999
}

.si .si-ct .compon-con .compon-ct {
    position: relative;
    width: 100%
}

.si .si-ct .compon-con .compon-wrap {
    position: relative;
    width: 100%;
    padding: min(7.3958333333vw, 142px) min(2.5vw, 48px) 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
}

.si .si-ct .compon-con .compon-wrap .compon-info {
    position: relative;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    height: min(35.4166666667vw, 680px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(20.8333333333vw, 400px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
    position: relative;
    padding: 0 min(2.3958333333vw, 46px) min(1.09375vw, 21px) min(.625vw, 12px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt {
    display: flex;
    align-items: end;
    min-height: min(4.1145833333vw, 79px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .name {
    opacity: 0;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    padding: min(.4166666667vw, 8px) 0;
    display: inline-block;
    margin-right: min(1.25vw, 24px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .name.on {
    opacity: 1
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .percent {
    position: relative;
    font-weight: 300;
    color: #f60
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .percent span {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .percent span.on {
    opacity: 1;
    transform: translateY(0)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line {
    opacity: 0;
    width: 0;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    border-bottom: 1px solid #B8B8B8
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line.on {
    opacity: 1;
    width: 100%
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line .color_chip {
    display: block;
    position: absolute;
    right: 0;
    bottom: calc(min(.2604166667vw, 5px)*-1);
    width: min(.5208333333vw, 10px);
    height: min(.5208333333vw, 10px);
    border-radius: 100%
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list {
    opacity: 0;
    transform: translateY(30px);
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    margin-top: min(2.5vw, 48px);
    display: grid;
    grid-gap: min(1.6666666667vw, 32px) 0;
    padding-right: min(1.0416666667vw, 20px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list.on {
    opacity: 1;
    transform: translateY(0)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info {
    display: flex;
    align-items: center;
    font-weight: 300;
    justify-content: space-between
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info .name {
    display: inline-block;
    margin-right: min(.8333333333vw, 16px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info .percent {
    width: min(3.6458333333vw, 70px);
    text-align: right
}

.si .si-ct .compon-con .compon-wrap .compon-info .right {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
    display: grid;
    max-height: min(35.4166666667vw, 680px);
    height: 100%;
    min-height: min(23.9583333333vw, 460px);
    align-content: space-around
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info {
    position: relative;
    justify-self: end;
    padding: 0 min(.625vw, 12px) min(.625vw, 12px) 0px;
    box-sizing: border-box;
    width: min(20.5729166667vw, 395px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt {
    opacity: 0;
    display: flex;
    justify-content: end;
    align-items: center
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .name {
    display: inline-block;
    font-weight: 300;
    margin-right: min(.8333333333vw, 16px);
    text-align: right;
    width: calc(100% - min(5.2604166667vw, 101px))
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .percent {
    font-weight: 300;
    width: min(4.4270833333vw, 85px);
    text-align: right
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line {
    opacity: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    border-bottom: 1px solid #B8B8B8;
    z-index: -1
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line .color_chip {
    position: absolute;
    bottom: calc(min(.2604166667vw, 5px)*-1);
    left: 0;
    width: min(.5208333333vw, 10px);
    height: min(.5208333333vw, 10px);
    border-radius: 100%;
    display: block
}

.si .si-ct .compon-con .compon-wrap .compon-graph {
    position: absolute;
    width: min(35vw, 672px);
    height: min(35vw, 672px);
    aspect-ratio: 1/1;
    top: min(7.3958333333vw, 142px);
    left: 50%;
    transform: translate(-50%);
    z-index: 10
}

.si .si-ct .compon-con .compon-wrap .compon-graph .graph-box {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(-14deg)
}

.si .si-ct .compon-con .compon-wrap .compon-graph .graph-box .pie {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.si .si-ct .compon-con .compon-wrap .compon-graph .graph-box .major {
    transform: scale(1.05);
    z-index: 2
}

.si .si-ct .compon-con .compon-wrap .compon-graph .graph-box .major canvas {
    width: 100%;
    height: 100%
}

.si .si-ct .compon-con .compon-wrap .compon-graph .graph-box .minor {
    z-index: 1
}

.si .si-ct .compon-con .compon-wrap .compon-graph .graph-box .minor canvas {
    width: 100%;
    height: 100%
}

.si .si-ct .compon-con .compon-wrap .compon-graph .logo-box {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(17.9166666667vw, 344px);
    aspect-ratio: 1/.977;
    background-color: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.si .si-ct .compon-con .compon-wrap .compon-graph .logo-box .logo {
    width: min(12.65625vw, 243px);
    height: min(2.1875vw, 42px);
    aspect-ratio: 251/44;
    background: url(https://www.hanwhaocean.com/images/common/logo_b.svg) no-repeat center center/contain
}

.si .si-ct .ipo-con .tit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.si .si-ct .ipo-con .tit-wrap .info-box {
    display: flex;
    color: #999;
    font-weight: 300
}

.si .si-ct .ipo-con .tit-wrap .info-box>span {
    display: inline-block
}

.si .si-ct .ipo-con .tit-wrap .info-box>span:nth-child(n+2) {
    margin-left: min(1.25vw, 24px)
}

.si .si-ct .ipo-con .con-wrapper {
    margin-top: min(2.8645833333vw, 55px)
}

.si .si-ct .ipo-con .con-wrapper>div:nth-child(n+2) {
    margin-top: min(6.25vw, 120px)
}

.si .si-ct .ipo-con .stock-wrap .table-wrap th,
.si .si-ct .ipo-con .stock-wrap .table-wrap td {
    box-sizing: border-box;
    text-align: left
}

.si .si-ct .ipo-con .stock-wrap .table-wrap th.cate {
    width: min(12.5vw, 240px);
    padding: min(1.71875vw, 33px) min(2.2916666667vw, 44px)
}

.si .si-ct .ipo-con .stock-wrap .table-wrap td {
    width: auto;
    padding: min(1.71875vw, 33px) min(2.0833333333vw, 40px)
}

.si .si-ct .ipo-con .ticker-wrap .table-wrap th,
.si .si-ct .ipo-con .ticker-wrap .table-wrap td {
    width: 25%;
    min-height: 100px;
    padding: min(1.875vw, 36px) 0;
    box-sizing: border-box;
    text-align: center
}

.si .si-ct .ipo-con .ticker-wrap .table-wrap tbody td {
    padding: min(1.1458333333vw, 22px) 0
}

.si .si-ct .report-con .exhibit-wrap .broc {
    width: 50%;
    border-bottom: 1px solid #E5E5E5
}

.si .si-ct .report-con .exhibit-wrap .broc:last-child {
    border: none
}

.si .si-ct .report-con .exhibit-wrap .broc:nth-child(2n) {
    padding-left: min(2.0833333333vw, 40px)
}

.si .si-ct .report-con .exhibit-wrap .broc .txt-box .year {
    margin-bottom: min(1.25vw, 24px)
}

.si .si-ct .associa-con .exhibit-wrap .broc .txt-box .date {
    margin-bottom: min(2.6041666667vw, 50px)
}

#SI .exhibit-wrap .txt-box .m_btn {
    display: flex;
    align-items: center
}

#SI .exhibit-wrap .txt-box .m_btn .txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px)
}

#SI .exhibit-wrap .txt-box .m_btn .icon {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    margin-left: min(.625vw, 12px)
}

#SI .exhibit-wrap .txt-box .m_btn .icon:after {
    filter: invert(44%) sepia(70%) saturate(2046%) hue-rotate(358deg) brightness(98%) contrast(110%)
}

#SI .exhibit-wrap .txt-box .m_btn .icon:after,
#SI .exhibit-wrap .txt-box .m_btn .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    top: calc(50% - min(.4166666667vw, 8px));
    left: calc(50% - min(.4166666667vw, 8px));
    background: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg) no-repeat center center/contain
}

#SI .m_only {
    display: none;
    opacity: 0;
    visibility: hidden
}

#SI .pc_only {
    display: block;
    opacity: 1;
    visibility: visible
}

html[lang=en] #SI .si-ct .compon-con .compon-wrap {
    padding: min(7.3958333333vw, 142px) min(7.5vw, 144px) 0 min(6.40625vw, 123px)
}

html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
    padding: 0 0 min(1.09375vw, 21px) 0
}

html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line.on {
    width: min(16.8229166667vw, 323px);
    left: 0
}

html[lang=en] #SI .si-ct .div-con>div {
    width: calc((100% - min(2.7083333333vw, 52px))/2)
}

html[lang=en] #SI .si-ct .ipo-con .stock-wrap .table-wrap th.cate {
    padding: min(1.71875vw, 33px) 0 min(1.71875vw, 33px) min(2.2916666667vw, 44px)
}

.si .si-ct .compon-con .compon-wrap {
    padding: min(8.6979166667vw, 167px) min(3.75vw, 72px) 0 min(3.75vw, 72px)
}

.si .si-ct .compon-con .compon-wrap .compon-info {
    align-items: center
}

.si .si-ct .compon-con .compon-wrap .compon-info .left {
    width: min(20.8333333333vw, 400px)
}

.si .si-ct .compon-con .compon-wrap .compon-info .right {
    width: min(20.5729166667vw, 395px);
    margin: 0
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list {
    padding-right: min(1.0416666667vw, 20px);
    padding-left: 0
}

.si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info {
    justify-content: space-between
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: min(32.5520833333vw, 625px);
    grid-gap: unset
}

.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bgO,
.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg1Bg,
.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg2Bg,
.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg3Bg,
.si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg4Bg {
    width: 100%
}

html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left {
    width: min(18.59375vw, 357px)
}

html[lang=en] #SI .si-ct .compon-con .compon-wrap {
    padding-left: min(3.75vw, 72px);
    padding-right: min(3.75vw, 72px)
}

html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line.on {
    width: 100%
}

@media (max-width: 1023px) {
    .si .si-ct>div:nth-child(n+2) {
        margin-top: 120px
    }

    .si .si-ct .div-con>div {
        width: calc((100% - 30px)/2)
    }

    .si .si-ct .div-con .tit-wrap {
        padding-bottom: 24px
    }

    .si .si-ct .div-con .title-wrap .desc {
        margin-top: 10px
    }

    .si .si-ct .refer-wrap {
        margin-top: 18px
    }

    .si .si-ct .refer-wrap p {
        padding-left: 7.5px
    }

    .si .si-ct .refer-wrap p:nth-child(n+2) {
        margin-top: 5px
    }

    .si .si-ct .refer-wrap p:after {
        top: 7.5px;
        width: 2.5px
    }

    .si .si-ct .exhibit-wrap {
        margin-top: 64px
    }

    .si .si-ct .exhibit-wrap .exhibit-list .broc {
        padding: 36px 0
    }

    .si .si-ct .exhibit-wrap .exhibit-list .broc .img-box {
        width: 60px
    }

    .si .si-ct .exhibit-wrap .exhibit-list .broc .txt-box {
        padding-left: 16px
    }

    .si .si-ct .compon-con {
        margin-top: 28px
    }

    .si .si-ct .compon-con .title-wrap {
        padding-bottom: 24px
    }

    .si .si-ct .compon-con .compon-wrap {
        padding: 8.3333333333% 0 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info {
        height: 100%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left {
        justify-content: start;
        width: 27%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
        padding: 0 0 8px 4px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt {
        min-height: auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .name {
        padding: 4px 0;
        margin-right: 15px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line .color_chip {
        width: 8px;
        height: 8px;
        bottom: -4px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list {
        margin-top: 30px;
        grid-gap: 24px 0;
        padding-right: 8px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info .name {
        margin-right: 10px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info .percent {
        width: 48px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right {
        margin: 24px 0 48px;
        width: 25%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
        grid-gap: 16px 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info {
        padding: 0 8px 8px 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .name {
        margin-right: 10px;
        width: calc(100% - 76px)
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .percent {
        width: 56px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line .color_chip {
        bottom: -4px;
        width: 8px;
        height: 8px
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph {
        width: 39.0476190476%;
        height: auto;
        top: 25%
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph .logo-box {
        width: 56%;
        height: auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph .logo-box .logo {
        width: 80%
    }

    .si .si-ct .ipo-con .tit-wrap {
        flex-direction: column;
        align-items: start
    }

    .si .si-ct .ipo-con .tit-wrap .info-box {
        margin-top: 10px
    }

    .si .si-ct .ipo-con .tit-wrap .info-box>span:nth-child(n+2) {
        margin-left: 15px
    }

    .si .si-ct .ipo-con .con-wrapper {
        margin-top: 40px
    }

    .si .si-ct .ipo-con .con-wrapper>div:nth-child(n+2) {
        margin-top: 80px
    }

    .si .si-ct .ipo-con .stock-wrap .table-wrap th.cate {
        width: 33.3333333333%;
        padding: 16px 28px
    }

    .si .si-ct .ipo-con .stock-wrap .table-wrap td {
        width: auto;
        padding: 16px 24px
    }

    .si .si-ct .ipo-con .ticker-wrap .table-wrap th,
    .si .si-ct .ipo-con .ticker-wrap .table-wrap td {
        padding: 24px 0
    }

    .si .si-ct .ipo-con .ticker-wrap .table-wrap tbody td {
        padding: 12px 0
    }

    .si .si-ct .report-con .exhibit-wrap .broc:nth-child(2n) {
        padding-left: 0
    }

    .si .si-ct .report-con .exhibit-wrap .broc .txt-box .year {
        margin-bottom: 15px
    }

    .si .si-ct .associa-con .exhibit-wrap .broc .txt-box .date {
        margin-bottom: 32px
    }

    #SI .exhibit-wrap .txt-box .m_btn .txt {
        font-size: 20px;
        line-height: 33.6px
    }

    #SI .exhibit-wrap .txt-box .m_btn .icon {
        width: 20px;
        height: 20px;
        margin-left: 8px
    }

    #SI .exhibit-wrap .txt-box .m_btn .icon:after,
    #SI .exhibit-wrap .txt-box .m_btn .icon:before {
        width: 12px;
        height: 12px;
        top: calc(50% - 6px);
        left: calc(50% - 6px)
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap {
        padding: 8.3333333333% 0 0
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
        padding: 0 0 8px
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line.on {
        width: 100%
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right {
        width: 30%
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt {
        text-align: right
    }

    html[lang=en] #SI .si-ct .div-con>div {
        width: calc((100% - 30px)/2)
    }

    html[lang=en] #SI .si-ct .ipo-con .stock-wrap .table-wrap th.cate {
        width: 40%;
        padding: 16px 28px
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .si .si-ct .compon-con .compon-wrap {
        padding: 106px 46px 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left {
        width: 252px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right {
        width: 248px;
        margin: 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list {
        padding-right: 12px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
        min-height: 394px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg1Bg,
    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg2Bg,
    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info.bg3Bg {
        width: 100%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left {
        width: 25%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
        padding-right: 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .percent {
        font-size: 26px !important
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right {
        width: 25%
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph,
    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left {
        width: 30%
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-graph {
        width: 35%;
        top: 32%
    }
}

@media (max-width: 768px) {
    .si .m_navigation {
        display: block;
        opacity: 1;
        visibility: visible
    }

    .si .m_navigation {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fffc;
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        z-index: 50;
        transition: all .3s cubic-bezier(.41, .2, .53, .84)
    }

    .si .m_navigation.fix {
        top: 78px
    }

    .si .m_navigation .nav-list {
        position: relative;
        display: flex;
        overflow-x: scroll;
        padding: 18px 20px 19px
    }

    .si .m_navigation .nav-list::-webkit-scrollbar {
        display: none
    }

    .si .m_navigation .nav-list .nav-item {
        font-size: 16px;
        line-height: 26.88px;
        color: #b8b8b8;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap
    }

    .si .m_navigation .nav-list .nav-item:nth-child(n+2) {
        margin-left: 40px
    }

    .si .m_navigation .nav-list .nav-item.active {
        color: #151515
    }

    .si .si-ct>div:nth-child(n+2) {
        margin-top: 80px
    }

    .si .si-ct .div-con {
        flex-direction: column
    }

    .si .si-ct .div-con>div {
        width: 100%
    }

    .si .si-ct .div-con .tit-wrap,
    .si .si-ct .div-con .title-wrap {
        padding-bottom: 20px
    }

    .si .si-ct .div-con .title-wrap .desc {
        margin-top: 8px
    }

    .si .si-ct .refer-wrap {
        margin-top: 16px
    }

    .si .si-ct .refer-wrap p {
        padding-left: 8px
    }

    .si .si-ct .refer-wrap p:nth-child(n+2) {
        margin-top: 4px
    }

    .si .si-ct .refer-wrap p:after {
        top: 12px;
        width: 4px
    }

    .si .si-ct .exhibit-wrap {
        margin-top: 0
    }

    .si .si-ct .exhibit-wrap .exhibit-list .broc {
        width: 100%;
        padding: 24px 0
    }

    .si .si-ct .exhibit-wrap .exhibit-list .broc .img-box {
        width: 120px
    }

    .si .si-ct .exhibit-wrap .exhibit-list .broc .txt-box {
        padding-left: 40px
    }

    .si .si-ct .compon-con {
        margin-top: 40px
    }

    .si .si-ct .compon-con .title-wrap {
        padding-bottom: 20px;
        flex-direction: column;
        align-items: start
    }

    .si .si-ct .compon-con .title-wrap .title {
        font-size: 24px !important
    }

    .si .si-ct .compon-con .title-wrap .desc {
        margin-top: 8px
    }

    .si .si-ct .compon-con .compon-ct {
        overflow-x: auto
    }

    .si .si-ct .compon-con .compon-wrap {
        width: 335px;
        margin: 0 auto;
        padding: 35px 0 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info {
        flex-direction: column-reverse
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left {
        margin: 0 11.5px 0 44.5px;
        width: 279px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
        padding: 0 0 0 20px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt {
        min-height: auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .name {
        padding: 5px 0 0;
        margin-right: 16px;
        font-size: 18px !important
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line {
        top: -102px;
        left: -20px;
        border: none;
        width: 26px !important;
        height: 125px;
        background: url(https://www.hanwhaocean.com/images/investors/si/si_chart_info_line-m.svg) no-repeat center center/contain
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line .color_chip {
        top: auto;
        bottom: -4px;
        right: -4px;
        transform: translate(-50%, -50%)
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list {
        width: auto;
        margin-top: 16px;
        grid-gap: 10px 0;
        padding-left: 20px;
        padding-right: 0
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info {
        justify-content: space-between
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info .name {
        margin-right: 8px;
        color: #4b4b4b;
        font-size: 12px !important
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left .major-info .txt .percent {
        font-size: 28px !important;
        line-height: 33.6px !important
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right {
        margin: 0 0 60px;
        width: auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
        grid-gap: 10px 0;
        min-height: 150px;
        max-height: 100%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info {
        padding: 0;
        width: 41%
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt {
        justify-content: flex-start;
        padding-left: 16px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .name {
        font-size: 12px !important;
        line-height: 19.2px !important;
        margin-right: 4px;
        text-align: left;
        width: calc(100% - 55px)
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .percent {
        font-size: 14px !important;
        line-height: 18.48px !important;
        width: 48px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line {
        width: 0% !important
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line .color_chip {
        bottom: 50%;
        transform: translateY(50%)
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph {
        width: 176px;
        height: 176px;
        top: 35px;
        left: 4px;
        transform: translate(0)
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph .logo-box {
        width: 88px;
        height: 86px
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph .logo-box .logo {
        width: 36px;
        height: 33px;
        aspect-ratio: 37/33;
        background: url(https://www.hanwhaocean.com/images/common/hanwha_logo_icon.svg) no-repeat center center/contain
    }

    .si .si-ct .ipo-con .title {
        font-size: 24px !important
    }

    .si .si-ct .ipo-con .con-wrapper {
        margin-top: 40px
    }

    .si .si-ct .ipo-con .con-wrapper>div:nth-child(n+2) {
        margin-top: 60px
    }

    .si .si-ct .ipo-con .tit-wrap .info-box>span:nth-child(n+2) {
        margin-left: 8px
    }

    .si .si-ct .ipo-con .stock-wrap .table-wrap th.cate {
        width: 119px;
        padding: 20px 0;
        font-size: 14px !important
    }

    .si .si-ct .ipo-con .stock-wrap .table-wrap td {
        padding: 20px 0;
        font-size: 14px !important
    }

    .si .si-ct .ipo-con .ticker-wrap .table-wrap th,
    .si .si-ct .ipo-con .ticker-wrap .table-wrap td {
        width: 25%;
        min-height: 64px;
        padding: 12px 0;
        text-align: left;
        font-size: 14px !important
    }

    .si .si-ct .ipo-con .ticker-wrap .table-wrap tbody td {
        min-height: 88x;
        padding: 14px 0
    }

    .si .si-ct .report-con .exhibit-wrap .broc {
        width: 100%
    }

    .si .si-ct .report-con .exhibit-wrap .broc:last-child {
        border-bottom: 1px solid #E5E5E5
    }

    .si .si-ct .report-con .exhibit-wrap .broc:nth-child(2n) {
        padding-left: 0
    }

    .si .si-ct .report-con .exhibit-wrap .broc .txt-box .year,
    .si .si-ct .associa-con .exhibit-wrap .broc .txt-box .date {
        margin-bottom: 20px
    }

    #SI .exhibit-wrap .txt-box .m_btn .txt {
        font-size: 14px;
        line-height: 19.6px
    }

    #SI .exhibit-wrap .txt-box .m_btn .icon {
        width: 24px;
        height: 24px;
        margin-left: 12px
    }

    #SI .exhibit-wrap .txt-box .m_btn .icon:after,
    #SI .exhibit-wrap .txt-box .m_btn .icon:before {
        width: 12px;
        height: 12px;
        top: calc(50% - 6px);
        left: calc(50% - 6px)
    }

    #SI .m_only {
        display: block;
        opacity: 1;
        visibility: visible
    }

    #SI .pc_only {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    html[lang=en] #SI .si-ct .compon-con .title-wrap .desc {
        margin-left: auto
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap {
        padding: 35px 0 0
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt {
        flex-direction: column;
        align-items: start;
        text-align: left
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line:after {
        top: 6px;
        bottom: auto;
        transform: translateY(0)
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .name {
        margin-right: 0
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right {
        width: 137px;
        margin: 0 0 27px auto
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left {
        margin: 0 0 0 54px
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .info-list .info {
        justify-content: space-between
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info {
        padding: 0 0 0 20px
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line {
        width: 26px !important;
        height: 235px;
        top: -216px;
        background: url(https://www.hanwhaocean.com/images/investors/si/si_chart_info_line-en-m.svg) no-repeat center center/contain
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line.on {
        left: -18px
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left .major-info .line:after {
        bottom: -4px
    }

    html[lang=en] #SI .si-ct .div-con>div {
        width: 100%
    }

    html[lang=en] #SI .si-ct .ipo-con .tit-wrap .info-box {
        flex-direction: column
    }

    html[lang=en] #SI .si-ct .ipo-con .tit-wrap .info-box .m_desc {
        font-size: 16px !important;
        line-height: 24px !important
    }

    html[lang=en] #SI .si-ct .ipo-con .tit-wrap .info-box>span:nth-child(n+2) {
        margin-left: 0;
        margin-top: 4px
    }

    html[lang=en] #SI .si-ct .ipo-con .stock-wrap .table-wrap th.cate {
        padding: 20px 19px 20px 0;
        width: 119px
    }

    html[lang=en] #SI .si-ct .ipo-con .stock-wrap .table-wrap td {
        vertical-align: top
    }

    html[lang=en] #SI .exhibit-wrap .txt-box .m_btn {
        align-items: end
    }

    html[lang=en] #SI .exhibit-wrap .txt-box .m_btn .txt {
        text-align: left
    }

    html[lang=en] #SI .exhibit-wrap .txt-box .m_btn .icon {
        margin-right: 0 !important;
        margin-bottom: 3px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info {
        gap: 40px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .left {
        width: auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right {
        margin: 0 0 0 auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
        min-height: 205px;
        min-width: 142px;
        grid-gap: unset;
        max-height: none
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info {
        width: auto
    }

    .si .si-ct .compon-con .compon-wrap .compon-graph {
        top: 48px
    }

    .si .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .line .color_chip {
        bottom: auto;
        transform: translateY(0);
        top: 5px
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .left {
        width: auto
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list {
        grid-gap: unset;
        min-height: 322px
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .name {
        width: 100%
    }

    html[lang=en] #SI .si-ct .compon-con .compon-wrap .compon-info .right .info-list .info .txt .percent {
        text-align: left
    }
}

.cd .sub_container,
.cd .sub_container .sec_inner {
    background: none
}

.cd .cd-ct .tit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: min(1.875vw, 36px);
    border-bottom: 2px solid #151515
}

.cd .cd-ct .tit-wrap .title-box {
    display: flex;
    flex-direction: column
}

.cd .cd-ct .exhibit-wrap .exhibit-list {
    display: flex;
    flex-wrap: wrap
}

.cd .cd-ct .exhibit-wrap .exhibit-list .broc {
    position: relative;
    display: flex;
    padding: min(2.2916666667vw, 44px) 0;
    box-sizing: border-box
}

.cd .cd-ct .exhibit-wrap .exhibit-list .broc .img-box {
    border: 1px solid #E5E5E5;
    box-shadow: 5px 5px 10px #0000001a
}

.cd .cd-ct .exhibit-wrap .exhibit-list .broc .img-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.cd .cd-ct .exhibit-wrap .exhibit-list .broc .txt-box {
    padding-left: min(2.7083333333vw, 52px)
}

.cd .cd-ct .exhibit-wrap .exhibit-list .broc .txt-box .date {
    font-weight: 300
}

.cd .cd-ct .dart-con {
    position: relative;
    width: 100%;
    margin-top: min(4.1666666667vw, 80px)
}

.cd .cd-ct .dart-con iframe {
    width: 100%;
    height: 980px;
    border: 0
}

.cd .cd-ct .policy-con {
    margin-top: min(8.3333333333vw, 160px)
}

.cd .cd-ct .policy-con .exhibit-wrap .broc {
    min-width: min(29.1666666667vw, 560px);
    align-items: center
}

.cd .cd-ct .policy-con .exhibit-wrap .broc .img-box {
    width: min(9.375vw, 180px)
}

.cd .cd-ct .policy-con .exhibit-wrap .broc .txt-box .date {
    margin-bottom: min(2.6041666667vw, 50px);
    color: #4b4b4b
}

.cd .cd-ct .policy-con .exhibit-wrap .broc .txt-box .m_btn {
    display: flex;
    align-items: center
}

.cd .cd-ct .policy-con .exhibit-wrap .broc .txt-box .m_btn .txt {
    font-weight: 300
}

#CD .policy-con .m_btn .icon {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    margin-left: min(.625vw, 12px)
}

#CD .policy-con .m_btn .icon:after,
#CD .policy-con .m_btn .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    top: calc(50% - min(.4166666667vw, 8px));
    left: calc(50% - min(.4166666667vw, 8px));
    background: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg) no-repeat center center/contain
}

#CD .policy-con .m_btn .icon:after {
    filter: invert(54%) sepia(98%) saturate(3838%) hue-rotate(359deg) brightness(102%) contrast(110%)
}

@media (max-width: 1023px) {
    .cd .cd-ct .tit-wrap {
        padding-bottom: 24px
    }

    .cd .cd-ct .exhibit-wrap .exhibit-list .broc {
        padding: 28px 0
    }

    .cd .cd-ct .exhibit-wrap .exhibit-list .broc .txt-box {
        padding-left: 32px
    }

    .cd .cd-ct .dart-con {
        margin-top: 28px
    }

    .cd .cd-ct .policy-con {
        margin-top: 120px
    }

    .cd .cd-ct .policy-con .exhibit-wrap .broc {
        min-width: 33.3333333333%
    }

    .cd .cd-ct .policy-con .exhibit-wrap .broc .img-box {
        width: 33.3333333333%
    }

    .cd .cd-ct .policy-con .exhibit-wrap .broc .txt-box .date {
        margin-bottom: 32px
    }

    #CD .policy-con .m_btn .icon {
        width: 20px;
        height: 20px;
        margin-left: 8px
    }

    #CD .policy-con .m_btn .icon:after,
    #CD .policy-con .m_btn .icon:before {
        width: 10px;
        height: 10px;
        top: calc(50% - 5px);
        left: calc(50% - 5px)
    }
}

@media (max-width: 768px) {
    .cd .cd-ct .tit-wrap {
        padding-bottom: 20px;
        border-bottom: 1px solid #151515
    }

    .cd .cd-ct .exhibit-wrap .exhibit-list .broc {
        padding: 24px 0
    }

    .cd .cd-ct .exhibit-wrap .exhibit-list .broc .txt-box {
        padding-left: 40px
    }

    .cd .cd-ct .dart-con {
        margin-top: 40px
    }

    .cd .cd-ct .policy-con {
        margin-top: 80px
    }

    .cd .cd-ct .policy-con .exhibit-wrap .broc {
        min-width: none;
        width: 100%
    }

    .cd .cd-ct .policy-con .exhibit-wrap .broc .img-box {
        width: 120px
    }

    .cd .cd-ct .policy-con .exhibit-wrap .broc .txt-box .date {
        margin-bottom: 20px
    }

    #CD .policy-con .m_btn .icon {
        width: 24px;
        height: 24px;
        margin-left: 12px
    }

    #CD .policy-con .m_btn .icon:after,
    #CD .policy-con .m_btn .icon:before {
        width: 10px;
        height: 10px;
        top: calc(50% - 5px);
        left: calc(50% - 5px)
    }

    #CD .policy-con .m_btn .icon:after,
    #CD .policy-con .m_btn .icon:before {
        width: 14px;
        height: 14px;
        top: calc(50% - 7px);
        left: calc(50% - 7px)
    }

    .cd.en .cd-ct .policy-con .exhibit-wrap .broc .txt-box .date {
        font-size: 14px !important;
        line-height: 24.08px
    }

    .cd.en .cd-ct .policy-con .exhibit-wrap .broc .txt-box .m_btn {
        text-align: left;
        align-items: flex-end
    }

    .cd.en .cd-ct .policy-con .exhibit-wrap .broc .txt-box .m_btn .txt {
        line-height: 19.6px !important
    }
}

html[lang=en] .cd .cd-ct .policy-con {
    display: none
}

.ann .sub_container,
.ann .sub_container .sec_inner {
    background: none
}

.ann-ct {
    margin-top: min(2.0833333333vw, 40px)
}

.ann .ann-ct .finan-tab {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 min(6.25vw, 120px);
    box-sizing: content-box
}

.ann .ann-ct .finan-tab .tab-list {
    display: flex;
    align-items: center
}

.ann .ann-ct .finan-tab .tab-list .tab {
    color: #b8b8b8
}

.ann .ann-ct .finan-tab .tab-list .tab:nth-child(n+2) {
    margin-left: min(1.6666666667vw, 32px)
}

.ann .ann-ct .finan-tab .tab-list .tab span {
    position: relative;
    font-weight: 700
}

.ann .ann-ct .notice-con .notice-search {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(2.6041666667vw, 50px);
    padding: 0 min(6.25vw, 120px);
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: min(3.125vw, 60px)
}

.ann .ann-ct .notice-con .notice-search .search-num .num-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.ann .ann-ct .notice-con .notice-search .search-num.active .num-box {
    display: block;
    visibility: visible;
    opacity: 100%
}

.ann .ann-ct .notice-con .notice-search .search {
    position: relative;
    width: min(27.5vw, 528px);
    padding: min(.625vw, 12px) min(1.875vw, 36px) min(.625vw, 12px) 0;
    box-sizing: border-box;
    border-bottom: 1px solid #151515
}

.ann .ann-ct .notice-con .notice-search .search .search-bar {
    width: 100%;
    background: none;
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.ann .ann-ct .notice-con .notice-search .search input::placeholder {
    color: #b8b8b8
}

.ann .ann-ct .notice-con .notice-search .search .search-bar:focus {
    outline: none
}

.ann .ann-ct .notice-con .notice-search .search .search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    padding: min(.3645833333vw, 7px);
    box-sizing: border-box;
    border: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - min(.3645833333vw, 7px)) calc(100% - min(.3645833333vw, 7px));
    transition: all .5s ease
}

.ann .ann-ct .notice-con .notice-search .search .search-btn.off {
    opacity: 50%
}

.ann .ann-ct .notice-con .notice-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.ann .ann-ct .notice-con .notice-wrapper.none {
    display: none
}

.ann .ann-ct .notice-con .notice-wrapper .post-list {
    width: 100%
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box {
    border-bottom: 1px solid #E5E5E5;
    transition: background-color .3s;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:first-child {
    border-top: 1px solid #E5E5E5
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    padding: min(1.875vw, 36px) min(6.25vw, 120px);
    box-sizing: content-box;
    display: flex;
    align-items: center
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
    opacity: 0;
    visibility: hidden;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    left: min(3.5416666667vw, 68px);
    position: absolute;
    width: min(2.7083333333vw, 52px);
    height: min(2.7083333333vw, 52px);
    background-color: #000;
    border-radius: 100%
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
    content: "";
    position: absolute;
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert(93%) sepia(96%) saturate(0%) hue-rotate(82deg) brightness(104%) contrast(105%);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next_b_42x42.svg) no-repeat center center/contain
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
    flex-grow: 1;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    cursor: pointer
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
    margin: 0 min(2.5vw, 48px);
    min-width: min(5.7291666667vw, 110px)
}

#ANN .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
    padding: 0 min(1.25vw, 24px) !important
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .icon {
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center center/contain
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
    font-weight: 300;
    color: #4b4b4b
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover {
    background-color: #e5e5e5
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
    opacity: 1;
    visibility: visible;
    left: min(6.25vw, 120px)
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
    padding-left: min(4.7916666667vw, 92px);
    box-sizing: border-box
}

.ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer .title>span {
    background-size: 100% 1px
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(3.5416666667vw, 68px);
    margin-top: min(3.3333333333vw, 64px)
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate>div {
    display: flex
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate button {
    border: none
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box {
    position: relative;
    gap: min(1.25vw, 24px)
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    transform-origin: center center;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_btn.svg) no-repeat center center/contain
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box button.all {
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_2x_btn.svg) no-repeat center center/contain
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box button.prev {
    transform: rotate(180deg)
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box.disable {
    opacity: 30%;
    pointer-events: none
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box {
    width: min(11.25vw, 216px);
    gap: 0 min(1.0416666667vw, 20px);
    justify-content: center
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button {
    position: relative;
    opacity: 30%;
    background: none;
    font-weight: 300;
    padding: min(.2083333333vw, 4px) min(.4166666667vw, 8px)
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button span {
    position: relative;
    display: inline-block
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.1041666667vw, 2px);
    background-color: #151515;
    transition: all .5s ease
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button.active {
    opacity: 100%
}

.ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button.active span:after {
    width: 100%
}

.ann .ann-ct .notice-con .notice-wrapper .post-more {
    width: 100%;
    margin-top: 44px
}

.ann .ann-ct .notice-con .notice-wrapper .post-more.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.ann .ann-ct .notice-con .notice-wrapper .post-more .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto
}

.ann .ann-ct .notice-con .notice-wrapper .post-more .load .txt {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.ann .ann-ct .notice-con .notice-wrapper .post-more .load .icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background-color: #e5e5e5;
    margin-left: 8px
}

.ann .ann-ct .notice-con .notice-wrapper .post-more .load .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.33px;
    height: 8.33px;
    background: url(https://www.hanwhaocean.com/images/common/icon_plus.svg) no-repeat center center/contain
}

.ann .ann-ct .notice-con .notice-empty {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.ann .ann-ct .notice-con .notice-empty .empty-box {
    padding: min(9.4270833333vw, 181px) 0;
    text-align: center;
    color: #4b4b4b
}

.ann .ann-ct .notice-con .notice-empty.none {
    display: none
}

@media (max-width: 1023px) {
    .ann .ann-ct {
        margin-top: 28px
    }

    .ann .ann-ct .finan-tab {
        padding: 0 50px
    }

    .ann .ann-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .ann .ann-ct .notice-con .notice-search {
        margin-bottom: 44px;
        padding: 0 50px;
        min-height: 40px
    }

    .ann .ann-ct .notice-con .notice-search .search {
        width: 30.4761904762%;
        padding: 8px 24px 8px 0
    }

    .ann .ann-ct .notice-con .notice-search .search .search-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - 4px) calc(100% - 4px)
    }

    .ann .ann-ct .notice-con .notice-search .search .search-bar {
        font-size: 14px;
        line-height: 1.68
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 50px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
        width: 32px;
        height: 32px;
        top: 25px;
        left: 0
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
        width: 18px;
        height: 18px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 55.4761904762%
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        margin: 0 30px;
        min-width: auto
    }

    #ANN .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 15px !important
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 10px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
        left: 50px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
        padding-left: 48px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-paginate {
        column-gap: 40px;
        margin-top: 64px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box {
        gap: 12px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
        width: 20px;
        height: 20px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box {
        width: auto;
        gap: 12px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button {
        padding: 4px 6px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
        height: 2px
    }

    .ann .ann-ct .notice-con .notice-empty .empty-box {
        padding: 16.6666666667% 0
    }
}

@media (max-width: 768px) {
    .ann .sub_top .sub_top_tit.m_h2 {
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .ann .ann-ct {
        margin-top: 24px
    }

    .ann .ann-ct .finan-tab {
        padding: 0 20px;
        margin-bottom: 20px
    }

    .ann .ann-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .ann .ann-ct .finan-tab .tab-list .tab span {
        font-weight: 400
    }

    .ann .ann-ct .notice-con .notice-search {
        margin-bottom: 40px;
        padding: 0 20px;
        flex-direction: column-reverse;
        align-items: flex-start;
        min-height: auto
    }

    .ann .ann-ct .notice-con .notice-search .search-num .num-box {
        font-size: 14px;
        line-height: 24.08px;
        margin-top: 16px
    }

    .ann .ann-ct .notice-con .notice-search .search {
        width: 100%;
        padding: 12px 28px 12px 0
    }

    .ann .ann-ct .notice-con .notice-search .search .search-bar {
        font-size: 16px;
        line-height: 27.52px
    }

    .ann .ann-ct .notice-con .notice-search .search .search-btn {
        width: 28px;
        height: 28px;
        padding: 3px;
        background-size: calc(100% - 3px) calc(100% - 3px)
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 20px;
        flex-direction: column;
        align-items: start
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
        width: 24px;
        height: 24px;
        top: 25px;
        left: 0
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
        width: 12px;
        height: 12px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 100%
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
        font-size: 18px !important;
        line-height: 28.08px !important;
        -webkit-line-clamp: 2
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
        order: 2;
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px;
        margin-top: 12px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        order: 3;
        margin: 24px 0 0
    }

    #ANN .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 16px !important
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 12px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
        padding-left: 36px
    }

    .ann .ann-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
        left: 20px
    }

    .ann .ann-ct .notice-con .notice-empty .empty-box {
        padding: 88px 0;
        font-weight: 300
    }
}

.ann10 .sub_container,
.ann10 .sec_inner {
    background-color: transparent
}

.ann10 .ann-viewer .viewer-head {
    padding-bottom: min(2.1354166667vw, 41px);
    border-bottom: 1px solid #E5E5E5
}

.ann10 .ann-viewer .viewer-head .txt-wrap .head-topic {
    font-weight: 300;
    margin-bottom: min(1.0416666667vw, 20px);
    color: #f60
}

.ann10 .ann-viewer .viewer-head .txt-wrap .head-title {
    margin-bottom: min(1.4583333333vw, 28px);
    color: #151515
}

.ann10 .ann-viewer .viewer-head .txt-wrap .head-date {
    font-weight: 300;
    color: #4b4b4b
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-summary {
    position: relative;
    width: 100%;
    padding-left: min(1.25vw, 24px);
    margin-top: min(3.75vw, 72px);
    box-sizing: border-box;
    border-left: 4px solid #B8B8B8
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-summary .sum-list {
    display: flex;
    flex-direction: column;
    gap: min(1.0416666667vw, 20px)
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-img {
    position: relative;
    width: 100%;
    margin: min(3.75vw, 72px) 0
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-text {
    font-weight: 300;
    margin-top: min(3.75vw, 72px);
    padding-bottom: min(5.2083333333vw, 100px)
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-text img {
    position: relative;
    margin: min(3.75vw, 72px) 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-files {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
    padding: min(1.6666666667vw, 32px) min(1.875vw, 36px);
    box-sizing: border-box;
    display: flex;
    font-weight: 300
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-files .refer {
    min-width: min(3.4895833333vw, 67px)
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list {
    display: flex;
    flex-direction: column;
    gap: min(.625vw, 12px);
    margin-left: min(1.4583333333vw, 28px)
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
.ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    left: calc(50% - min(.4166666667vw, 8px));
    top: calc(50% - min(.4166666667vw, 8px));
    background-image: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg)
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after {
    filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(203deg) brightness(115%) contrast(101%)
}

.ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .txt {
    font-weight: 300;
    color: #4b4b4b;
    background-image: linear-gradient(#4b4b4b, #4b4b4b)
}

.ann10 .ann-viewer .viewer-link {
    position: relative;
    display: flex;
    justify-content: center;
    margin: min(1.6666666667vw, 32px) 0 min(2.2916666667vw, 44px)
}

.ann10 .ann-viewer .viewer-link .link-list .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_list_hamburger.svg);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    margin-right: min(.625vw, 12px)
}

.ann10 .ann-viewer .viewer-nav {
    padding-top: min(2.2916666667vw, 44px);
    border-top: 1px solid #E5E5E5
}

.ann10 .ann-viewer .viewer-nav .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box {
    position: relative;
    width: min(25.7291666667vw, 494px)
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box>a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .icon {
    display: inline-block;
    margin: 0;
    width: min(1.875vw, 36px);
    height: min(1.8229166667vw, 35px)
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .desc {
    position: relative;
    max-width: min(17.9166666667vw, 344px);
    width: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .desc:after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #4B4B4B;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .prev {
    justify-content: start
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .prev .icon {
    left: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
    margin: 0 min(1.6666666667vw, 32px) 0 min(1.0416666667vw, 20px)
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next {
    justify-content: end;
    flex-direction: row-reverse
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
    right: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next strong {
    margin: 0 min(1.0416666667vw, 20px) 0 min(1.6666666667vw, 32px)
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .none {
    display: none
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .notPost {
    pointer-events: none
}

.ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box>a:hover .desc:after {
    width: 100%
}

#ANN10 .m_btn[type=text][hover=underline] span.icon {
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    border: none
}

@media (max-width: 1023px) {
    .ann10 .ann-viewer .viewer-head {
        padding-bottom: 24px
    }

    .ann10 .ann-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 12px
    }

    .ann10 .ann-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 16px;
        font-size: 36px !important;
        line-height: 47.52px !important
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-summary {
        padding-left: 15px;
        margin-top: 48px;
        border-left: 2.5px solid #B8B8B8
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 12.5px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-img {
        margin: 48px 0
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-text {
        margin-top: 48px;
        padding-bottom: 64px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-text img {
        margin: 48px 0
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 22px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: 42px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 11px;
        margin-left: 20px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 14px;
        height: 14px;
        left: calc(50% - 7px);
        top: calc(50% - 7px)
    }

    .ann10 .ann-viewer .viewer-link {
        margin: 20px 0 28px
    }

    .ann10 .ann-viewer .viewer-link .link-news .icon {
        width: 16px;
        height: 16px;
        margin-right: 7.5px
    }

    .ann10 .ann-viewer .viewer-nav {
        padding-top: 32px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 50%
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 12.5px;
        line-height: 21px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 24px;
        height: 24px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .desc {
        width: 50%
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
        margin: 0 20.5px 0 12.5px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        margin: 0 12.5px 0 20.5px
    }

    #ANN10 .m_btn[type=text][hover=underline] span.icon {
        width: 16px !important;
        height: 16px !important;
        border: none
    }
}

@media (max-width: 768px) {
    .ann10 .ann-viewer .viewer-head {
        padding-bottom: 36px
    }

    .ann10 .ann-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 16px
    }

    .ann10 .ann-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 20px;
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-summary {
        border-left: 2px solid #B8B8B8;
        padding-left: 18px;
        margin-top: 48px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 20px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-summary .sum-list span {
        font-size: 18px !important;
        line-height: 28.08px !important
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-img {
        margin: 48px 0
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-text {
        margin-top: 48px;
        padding-bottom: 80px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-text img {
        margin: 48px 0
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 24px;
        flex-direction: column
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: auto;
        margin-bottom: 16px
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 10px;
        margin-left: 0
    }

    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .ann10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 12px;
        height: 12px;
        left: calc(50% - 6px);
        top: calc(50% - 6px)
    }

    #ANN10 .ann-viewer .viewer-cont .article-ct .arti-files .files-list .file .m_btn[type=text][hover=underline] span.icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important
    }

    .ann10 .ann-viewer .viewer-link {
        margin: 28px 0 32px
    }

    #ANN10 .ann-viewer .viewer-link .m_btn[line=round] {
        padding: 0 20px !important
    }

    #ANN10 .ann-viewer .viewer-link .link-list .icon {
        width: 20px !important;
        height: 20px !important
    }

    .ann10 .ann-viewer .viewer-nav {
        padding-top: 32px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap {
        flex-direction: column
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 100%
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box:nth-child(n+2) {
        margin-top: 28px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 16px;
        line-height: 27.52px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 18px;
        height: 18px;
        order: 2;
        margin: 0 20px 0 8px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .prev strong,
    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        order: 1;
        margin: 0;
        font-weight: 300;
        width: 62px
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .prev .icon,
    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next {
        justify-content: flex-start;
        flex-direction: row
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        transform: rotate(180deg)
    }

    .ann10 .ann-viewer .viewer-nav .nav-wrap .nav-box .desc {
        order: 3;
        width: 233px;
        max-width: none
    }
}

.br .sub_container,
.br .sub_container .sec_inner {
    background: none
}

.br-ct {
    margin-top: min(2.0833333333vw, 40px)
}

.br .br-ct .finan-tab {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 min(6.25vw, 120px);
    box-sizing: content-box
}

.br .br-ct .finan-tab .tab-list {
    display: flex;
    align-items: center
}

.br .br-ct .finan-tab .tab-list .tab {
    color: #b8b8b8
}

.br .br-ct .finan-tab .tab-list .tab:nth-child(n+2) {
    margin-left: min(1.6666666667vw, 32px)
}

.br .br-ct .finan-tab .tab-list .tab span {
    position: relative;
    font-weight: 700
}

.br .br-ct .notice-con .notice-search {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(2.6041666667vw, 50px);
    padding: 0 min(6.25vw, 120px);
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: min(3.125vw, 60px)
}

.br .br-ct .notice-con .notice-search .search-num .num-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.br .br-ct .notice-con .notice-search .search-num.active .num-box {
    display: block;
    visibility: visible;
    opacity: 100%
}

.br .br-ct .notice-con .notice-search .search {
    position: relative;
    width: min(27.5vw, 528px);
    padding: min(.625vw, 12px) min(1.875vw, 36px) min(.625vw, 12px) 0;
    box-sizing: border-box;
    border-bottom: 1px solid #151515
}

.br .br-ct .notice-con .notice-search .search .search-bar {
    width: 100%;
    background: none;
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.br .br-ct .notice-con .notice-search .search input::placeholder {
    color: #b8b8b8
}

.br .br-ct .notice-con .notice-search .search .search-bar:focus {
    outline: none
}

.br .br-ct .notice-con .notice-search .search .search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    padding: min(.3645833333vw, 7px);
    box-sizing: border-box;
    border: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - min(.3645833333vw, 7px)) calc(100% - min(.3645833333vw, 7px));
    transition: all .5s ease
}

.br .br-ct .notice-con .notice-search .search .search-btn.off {
    opacity: 50%
}

.br .br-ct .notice-con .notice-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.br .br-ct .notice-con .notice-wrapper.none {
    display: none
}

.br .br-ct .notice-con .notice-wrapper .post-list {
    width: 100%
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box {
    border-bottom: 1px solid #E5E5E5;
    transition: background-color .3s;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box:first-child {
    border-top: 1px solid #E5E5E5
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    padding: min(1.875vw, 36px) min(6.25vw, 120px);
    box-sizing: content-box;
    display: flex;
    align-items: center
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
    opacity: 0;
    visibility: hidden;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    left: min(3.5416666667vw, 68px);
    position: absolute;
    width: min(2.7083333333vw, 52px);
    height: min(2.7083333333vw, 52px);
    background-color: #000;
    border-radius: 100%
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
    content: "";
    position: absolute;
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert(93%) sepia(96%) saturate(0%) hue-rotate(82deg) brightness(104%) contrast(105%);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next_b_42x42.svg) no-repeat center center/contain
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
    flex-grow: 1;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    cursor: pointer
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
    margin: 0 min(2.5vw, 48px);
    min-width: min(5.7291666667vw, 110px)
}

#BR .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
    padding: 0 min(1.25vw, 24px) !important
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .icon {
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center center/contain
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
    font-weight: 300;
    color: #4b4b4b
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover {
    background-color: #e5e5e5
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
    opacity: 1;
    visibility: visible;
    left: min(6.25vw, 120px)
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
    padding-left: min(4.7916666667vw, 92px);
    box-sizing: border-box
}

.br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer .title>span {
    background-size: 100% 1px
}

.br .br-ct .notice-con .notice-wrapper .post-paginate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(3.5416666667vw, 68px);
    margin-top: min(3.3333333333vw, 64px)
}

.br .br-ct .notice-con .notice-wrapper .post-paginate.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.br .br-ct .notice-con .notice-wrapper .post-paginate>div {
    display: flex
}

.br .br-ct .notice-con .notice-wrapper .post-paginate button {
    border: none
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box {
    position: relative;
    gap: min(1.25vw, 24px)
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    transform-origin: center center;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_btn.svg) no-repeat center center/contain
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box button.all {
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_2x_btn.svg) no-repeat center center/contain
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box button.prev {
    transform: rotate(180deg)
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box.disable {
    opacity: 30%;
    pointer-events: none
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .page-box {
    width: min(11.25vw, 216px);
    gap: 0 min(1.0416666667vw, 20px);
    justify-content: center
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button {
    position: relative;
    opacity: 30%;
    background: none;
    font-weight: 300;
    padding: min(.2083333333vw, 4px) min(.4166666667vw, 8px)
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button span {
    position: relative;
    display: inline-block
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.1041666667vw, 2px);
    background-color: #151515;
    transition: all .5s ease
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button.active {
    opacity: 100%
}

.br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button.active span:after {
    width: 100%
}

.br .br-ct .notice-con .notice-wrapper .post-more {
    width: 100%;
    margin-top: 44px
}

.br .br-ct .notice-con .notice-wrapper .post-more.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.br .br-ct .notice-con .notice-wrapper .post-more .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto
}

.br .br-ct .notice-con .notice-wrapper .post-more .load .txt {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.br .br-ct .notice-con .notice-wrapper .post-more .load .icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background-color: #e5e5e5;
    margin-left: 8px
}

.br .br-ct .notice-con .notice-wrapper .post-more .load .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.33px;
    height: 8.33px;
    background: url(https://www.hanwhaocean.com/images/common/icon_plus.svg) no-repeat center center/contain
}

.br .br-ct .notice-con .notice-empty {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.br .br-ct .notice-con .notice-empty .empty-box {
    padding: min(9.4270833333vw, 181px) 0;
    text-align: center;
    color: #4b4b4b
}

.br .br-ct .notice-con .notice-empty.none {
    display: none
}

@media (max-width: 1023px) {
    .br .br-ct {
        margin-top: 28px
    }

    .br .br-ct .finan-tab {
        padding: 0 50px
    }

    .br .br-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .br .br-ct .notice-con .notice-search {
        margin-bottom: 44px;
        padding: 0 50px;
        min-height: 40px
    }

    .br .br-ct .notice-con .notice-search .search {
        width: 30.4761904762%;
        padding: 8px 24px 8px 0
    }

    .br .br-ct .notice-con .notice-search .search .search-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - 4px) calc(100% - 4px)
    }

    .br .br-ct .notice-con .notice-search .search .search-bar {
        font-size: 14px;
        line-height: 1.68
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 50px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
        width: 32px;
        height: 32px;
        top: 25px;
        left: 0
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
        width: 18px;
        height: 18px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 55.4761904762%
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        margin: 0 30px;
        min-width: auto
    }

    #BR .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 15px !important
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 10px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
        left: 50px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
        padding-left: 48px
    }

    .br .br-ct .notice-con .notice-wrapper .post-paginate {
        column-gap: 40px;
        margin-top: 64px
    }

    .br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box {
        gap: 12px
    }

    .br .br-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
        width: 20px;
        height: 20px
    }

    .br .br-ct .notice-con .notice-wrapper .post-paginate .page-box {
        width: auto;
        gap: 12px
    }

    .br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button {
        padding: 4px 6px
    }

    .br .br-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
        height: 2px
    }

    .br .br-ct .notice-con .notice-empty .empty-box {
        padding: 16.6666666667% 0
    }
}

@media (max-width: 768px) {
    .br .sub_top .sub_top_tit.m_h2 {
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .br .br-ct {
        margin-top: 24px
    }

    .br .br-ct .finan-tab {
        padding: 0 20px;
        margin-bottom: 20px
    }

    .br .br-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .br .br-ct .finan-tab .tab-list .tab span {
        font-weight: 400
    }

    .br .br-ct .notice-con .notice-search {
        margin-bottom: 40px;
        padding: 0 20px;
        flex-direction: column-reverse;
        align-items: flex-start;
        min-height: auto
    }

    .br .br-ct .notice-con .notice-search .search-num .num-box {
        font-size: 14px;
        line-height: 24.08px;
        margin-top: 16px
    }

    .br .br-ct .notice-con .notice-search .search {
        width: 100%;
        padding: 12px 28px 12px 0
    }

    .br .br-ct .notice-con .notice-search .search .search-bar {
        font-size: 16px;
        line-height: 27.52px
    }

    .br .br-ct .notice-con .notice-search .search .search-btn {
        width: 28px;
        height: 28px;
        padding: 3px;
        background-size: calc(100% - 3px) calc(100% - 3px)
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 20px;
        flex-direction: column;
        align-items: start
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
        width: 24px;
        height: 24px;
        top: 25px;
        left: 0
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
        width: 12px;
        height: 12px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 100%
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
        font-size: 18px !important;
        line-height: 28.08px !important;
        -webkit-line-clamp: 2
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
        order: 2;
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px;
        margin-top: 12px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        order: 3;
        margin: 24px 0 0
    }

    #BR .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 16px !important
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 12px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
        padding-left: 36px
    }

    .br .br-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
        left: 20px
    }

    .br .br-ct .notice-con .notice-empty .empty-box {
        padding: 88px 0;
        font-weight: 300
    }
}

.br10 .sub_container,
.br10 .sec_inner {
    background-color: transparent
}

.br10 .br-viewer .viewer-head {
    padding-bottom: min(2.1354166667vw, 41px);
    border-bottom: 1px solid #E5E5E5
}

.br10 .br-viewer .viewer-head .txt-wrap .head-topic {
    font-weight: 300;
    margin-bottom: min(1.0416666667vw, 20px);
    color: #f60
}

.br10 .br-viewer .viewer-head .txt-wrap .head-title {
    margin-bottom: min(1.4583333333vw, 28px);
    color: #151515
}

.br10 .br-viewer .viewer-head .txt-wrap .head-date {
    font-weight: 300;
    color: #4b4b4b
}

.br10 .br-viewer .viewer-cont .article-ct .arti-summary {
    position: relative;
    width: 100%;
    padding-left: min(1.25vw, 24px);
    margin-top: min(3.75vw, 72px);
    box-sizing: border-box;
    border-left: 4px solid #B8B8B8
}

.br10 .br-viewer .viewer-cont .article-ct .arti-summary .sum-list {
    display: flex;
    flex-direction: column;
    gap: min(1.0416666667vw, 20px)
}

.br10 .br-viewer .viewer-cont .article-ct .arti-img {
    position: relative;
    width: 100%;
    margin: min(3.75vw, 72px) 0
}

.br10 .br-viewer .viewer-cont .article-ct .arti-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.br10 .br-viewer .viewer-cont .article-ct .arti-text {
    font-weight: 300;
    margin-top: min(3.75vw, 72px);
    padding-bottom: min(5.2083333333vw, 100px)
}

.br10 .br-viewer .viewer-cont .article-ct .arti-text img {
    position: relative;
    margin: min(3.75vw, 72px) 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.br10 .br-viewer .viewer-cont .article-ct .arti-files {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
    padding: min(1.6666666667vw, 32px) min(1.875vw, 36px);
    box-sizing: border-box;
    display: flex;
    font-weight: 300
}

.br10 .br-viewer .viewer-cont .article-ct .arti-files .refer {
    min-width: min(3.4895833333vw, 67px)
}

.br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list {
    display: flex;
    flex-direction: column;
    gap: min(.625vw, 12px);
    margin-left: min(1.4583333333vw, 28px)
}

.br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
.br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    left: calc(50% - min(.4166666667vw, 8px));
    top: calc(50% - min(.4166666667vw, 8px));
    background-image: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg)
}

.br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after {
    filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(203deg) brightness(115%) contrast(101%)
}

.br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .txt {
    font-weight: 300;
    color: #4b4b4b;
    background-image: linear-gradient(#4b4b4b, #4b4b4b)
}

.br10 .br-viewer .viewer-link {
    position: relative;
    display: flex;
    justify-content: center;
    margin: min(1.6666666667vw, 32px) 0 min(2.2916666667vw, 44px)
}

.br10 .br-viewer .viewer-link .link-list .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_list_hamburger.svg);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    margin-right: min(.625vw, 12px)
}

.br10 .br-viewer .viewer-nav {
    padding-top: min(2.2916666667vw, 44px);
    border-top: 1px solid #E5E5E5
}

.br10 .br-viewer .viewer-nav .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box {
    position: relative;
    width: min(25.7291666667vw, 494px)
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box>a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.75vw, 33.6px)
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .icon {
    display: inline-block;
    margin: 0;
    width: min(1.875vw, 36px);
    height: min(1.8229166667vw, 35px)
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .desc {
    position: relative;
    max-width: min(17.9166666667vw, 344px);
    width: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .desc:after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #4B4B4B;
    transition: width .3s cubic-bezier(.41, .2, .53, .84)
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .prev {
    justify-content: start
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .prev .icon {
    left: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
    margin: 0 min(1.6666666667vw, 32px) 0 min(1.0416666667vw, 20px)
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next {
    justify-content: end;
    flex-direction: row-reverse
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
    right: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next strong {
    margin: 0 min(1.0416666667vw, 20px) 0 min(1.6666666667vw, 32px)
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .none {
    display: none
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box .notPost {
    pointer-events: none
}

.br10 .br-viewer .viewer-nav .nav-wrap .nav-box>a:hover .desc:after {
    width: 100%
}

#BR10 .m_btn[type=text][hover=underline] span.icon {
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    border: none
}

@media (max-width: 1023px) {
    .br10 .br-viewer .viewer-head {
        padding-bottom: 24px
    }

    .br10 .br-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 12px
    }

    .br10 .br-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 16px;
        font-size: 36px !important;
        line-height: 47.52px !important
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-summary {
        padding-left: 15px;
        margin-top: 48px;
        border-left: 2.5px solid #B8B8B8
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 12.5px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-img,
    .br10 .br-viewer .viewer-cont .article-ct .arti-text img {
        margin: 48px 0
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-text {
        margin-top: 48px;
        padding-bottom: 64px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 22px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: 42px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 11px;
        margin-left: 20px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 14px;
        height: 14px;
        left: calc(50% - 7px);
        top: calc(50% - 7px)
    }

    .br10 .br-viewer .viewer-link {
        margin: 20px 0 28px
    }

    .br10 .br-viewer .viewer-link .link-news .icon {
        width: 16px;
        height: 16px;
        margin-right: 7.5px
    }

    #BR10 .br-viewer .viewer-link .m_btn[line=round] {
        padding: 0 26.75px !important
    }

    .br10 .br-viewer .viewer-nav {
        padding-top: 32px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 50%
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 12.5px;
        line-height: 21px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 24px;
        height: 24px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .desc {
        width: 50%
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
        margin: 0 20.5px 0 12.5px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        margin: 0 12.5px 0 20.5px
    }

    #BR10 .m_btn[type=text][hover=underline] span.icon {
        width: 16px !important;
        height: 16px !important;
        border: none
    }
}

@media (max-width: 768px) {
    .br10 .br-viewer .viewer-head {
        padding-bottom: 36px
    }

    .br10 .br-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 16px
    }

    .br10 .br-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 20px;
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-summary {
        border-left: 2px solid #B8B8B8;
        padding-left: 18px;
        margin-top: 48px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 20px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-summary .sum-list span {
        font-size: 18px !important;
        line-height: 28.08px !important
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-img,
    .br10 .br-viewer .viewer-cont .article-ct .arti-text img {
        margin: 48px 0
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-text {
        margin-top: 48px;
        padding-bottom: 80px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 24px;
        flex-direction: column
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: auto;
        margin-bottom: 16px
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 10px;
        margin-left: 0
    }

    .br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .br10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 12px;
        height: 12px;
        left: calc(50% - 6px);
        top: calc(50% - 6px)
    }

    #BR10 .br-viewer .viewer-cont .article-ct .arti-files .files-list .file .m_btn[type=text][hover=underline] span.icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important
    }

    .br10 .br-viewer .viewer-link {
        margin: 28px 0 32px
    }

    #BR10 .br-viewer .viewer-link .m_btn[line=round] {
        padding: 0 20px !important
    }

    #BR10 .br-viewer .viewer-link .link-list .icon {
        width: 20px !important;
        height: 20px !important
    }

    .br10 .br-viewer .viewer-nav {
        padding-top: 32px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap {
        flex-direction: column
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 100%
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box:nth-child(n+2) {
        margin-top: 28px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 16px;
        line-height: 27.52px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 18px;
        height: 18px;
        order: 2;
        margin: 0 20px 0 8px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .prev strong,
    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        order: 1;
        margin: 0;
        font-weight: 300;
        width: 62px
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .prev .icon,
    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next {
        justify-content: flex-start;
        flex-direction: row
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        transform: rotate(180deg)
    }

    .br10 .br-viewer .viewer-nav .nav-wrap .nav-box .desc {
        order: 3;
        width: 233px;
        max-width: none
    }
}

.ar .sub_container,
.ar .sub_container .sec_inner {
    background: none
}

.ar-ct {
    margin-top: min(2.0833333333vw, 40px)
}

.ar .ar-ct .finan-tab {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 min(6.25vw, 120px);
    box-sizing: content-box
}

.ar .ar-ct .finan-tab .tab-list {
    display: flex;
    align-items: center
}

.ar .ar-ct .finan-tab .tab-list .tab {
    color: #b8b8b8
}

.ar .ar-ct .finan-tab .tab-list .tab:nth-child(n+2) {
    margin-left: min(1.6666666667vw, 32px)
}

.ar .ar-ct .finan-tab .tab-list .tab span {
    position: relative;
    font-weight: 700
}

.ar .ar-ct .notice-con .notice-search {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(2.6041666667vw, 50px);
    padding: 0 min(6.25vw, 120px);
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: min(3.125vw, 60px)
}

.ar .ar-ct .notice-con .notice-search .search-num .num-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.ar .ar-ct .notice-con .notice-search .search-num.active .num-box {
    display: block;
    visibility: visible;
    opacity: 100%
}

.ar .ar-ct .notice-con .notice-search .search {
    position: relative;
    width: min(27.5vw, 528px);
    padding: min(.625vw, 12px) min(1.875vw, 36px) min(.625vw, 12px) 0;
    box-sizing: border-box;
    border-bottom: 1px solid #151515
}

.ar .ar-ct .notice-con .notice-search .search .search-bar {
    width: 100%;
    background: none;
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

.ar .ar-ct .notice-con .notice-search .search input::placeholder {
    color: #b8b8b8
}

.ar .ar-ct .notice-con .notice-search .search .search-bar:focus {
    outline: none
}

.ar .ar-ct .notice-con .notice-search .search .search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    padding: min(.3645833333vw, 7px);
    box-sizing: border-box;
    border: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - min(.3645833333vw, 7px)) calc(100% - min(.3645833333vw, 7px));
    transition: all .5s ease
}

.ar .ar-ct .notice-con .notice-search .search .search-btn.off {
    opacity: 50%
}

.ar .ar-ct .notice-con .notice-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.ar .ar-ct .notice-con .notice-wrapper.none {
    display: none
}

.ar .ar-ct .notice-con .notice-wrapper .post-list {
    width: 100%
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box {
    border-bottom: 1px solid #E5E5E5;
    transition: background-color .3s;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:first-child {
    border-top: 1px solid #E5E5E5
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    padding: min(1.875vw, 36px) min(6.25vw, 120px);
    box-sizing: content-box;
    display: flex;
    align-items: center
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
    opacity: 0;
    visibility: hidden;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    left: min(3.5416666667vw, 68px);
    position: absolute;
    width: min(2.7083333333vw, 52px);
    height: min(2.7083333333vw, 52px);
    background-color: #000;
    border-radius: 100%
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
    content: "";
    position: absolute;
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert(93%) sepia(96%) saturate(0%) hue-rotate(82deg) brightness(104%) contrast(105%);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next_b_42x42.svg) no-repeat center center/contain
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
    flex-grow: 1;
    transition: all .3s cubic-bezier(.41, .2, .53, .84);
    cursor: pointer
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title>span {
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
    margin: 0 min(2.5vw, 48px);
    min-width: min(5.7291666667vw, 110px)
}

#AR .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
    padding: 0 min(1.25vw, 24px) !important
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .icon {
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center center/contain
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
    font-weight: 300;
    color: #4b4b4b
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover {
    background-color: #e5e5e5
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
    opacity: 1;
    visibility: visible;
    left: min(6.25vw, 120px)
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
    padding-left: min(4.7916666667vw, 92px);
    box-sizing: border-box
}

.ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer .title>span {
    background-size: 100% 1px
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(3.5416666667vw, 68px);
    margin-top: min(3.3333333333vw, 64px)
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate>div {
    display: flex
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate button {
    border: none
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box {
    position: relative;
    gap: min(1.25vw, 24px)
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    transform-origin: center center;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_btn.svg) no-repeat center center/contain
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box button.all {
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_2x_btn.svg) no-repeat center center/contain
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box button.prev {
    transform: rotate(180deg)
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box.disable {
    opacity: 30%;
    pointer-events: none
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box {
    width: min(11.25vw, 216px);
    gap: 0 min(1.0416666667vw, 20px);
    justify-content: center
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button {
    position: relative;
    opacity: 30%;
    background: none;
    font-weight: 300;
    padding: min(.2083333333vw, 4px) min(.4166666667vw, 8px)
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button span {
    position: relative;
    display: inline-block
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.1041666667vw, 2px);
    background-color: #151515;
    transition: all .5s ease
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button.active {
    opacity: 100%
}

.ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button.active span:after {
    width: 100%
}

.ar .ar-ct .notice-con .notice-wrapper .post-more {
    width: 100%;
    margin-top: 44px
}

.ar .ar-ct .notice-con .notice-wrapper .post-more.none {
    display: none;
    opacity: 0;
    visibility: hidden
}

.ar .ar-ct .notice-con .notice-wrapper .post-more .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto
}

.ar .ar-ct .notice-con .notice-wrapper .post-more .load .txt {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.ar .ar-ct .notice-con .notice-wrapper .post-more .load .icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background-color: #e5e5e5;
    margin-left: 8px
}

.ar .ar-ct .notice-con .notice-wrapper .post-more .load .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.33px;
    height: 8.33px;
    background: url(https://www.hanwhaocean.com/images/common/icon_plus.svg) no-repeat center center/contain
}

.ar .ar-ct .notice-con .notice-empty {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.ar .ar-ct .notice-con .notice-empty .empty-box {
    padding: min(9.4270833333vw, 181px) 0;
    text-align: center;
    color: #4b4b4b
}

.ar .ar-ct .notice-con .notice-empty.none {
    display: none
}

@media (max-width: 1023px) {
    .ar .ar-ct {
        margin-top: 28px
    }

    .ar .ar-ct .finan-tab {
        padding: 0 50px
    }

    .ar .ar-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .ar .ar-ct .notice-con .notice-search {
        margin-bottom: 44px;
        padding: 0 50px;
        min-height: 40px
    }

    .ar .ar-ct .notice-con .notice-search .search {
        width: 30.4761904762%;
        padding: 8px 24px 8px 0
    }

    .ar .ar-ct .notice-con .notice-search .search .search-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        background: url(https://www.hanwhaocean.com/images/common/icon_search.svg) no-repeat center center/ calc(100% - 4px) calc(100% - 4px)
    }

    .ar .ar-ct .notice-con .notice-search .search .search-bar {
        font-size: 14px;
        line-height: 1.68
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 50px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
        width: 32px;
        height: 32px;
        top: 25px;
        left: 0
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
        width: 18px;
        height: 18px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 55.4761904762%
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        margin: 0 30px;
        min-width: auto
    }

    #AR .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 15px !important
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 10px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
        left: 50px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
        padding-left: 48px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-paginate {
        column-gap: 40px;
        margin-top: 64px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box {
        gap: 12px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-paginate .nev-box button {
        width: 20px;
        height: 20px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box {
        width: auto;
        gap: 12px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button {
        padding: 4px 6px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-paginate .page-box button span:after {
        height: 2px
    }

    .ar .ar-ct .notice-con .notice-empty .empty-box {
        padding: 16.6666666667% 0
    }
}

@media (max-width: 768px) {
    .ar .sub_top .sub_top_tit.m_h2 {
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .ar .ar-ct {
        margin-top: 24px
    }

    .ar .ar-ct .finan-tab {
        padding: 0 20px;
        margin-bottom: 20px
    }

    .ar .ar-ct .finan-tab .tab-list .tab:nth-child(n+2) {
        margin-left: 20px
    }

    .ar .ar-ct .finan-tab .tab-list .tab span {
        font-weight: 400
    }

    .ar .ar-ct .notice-con .notice-search {
        margin-bottom: 40px;
        padding: 0 20px;
        flex-direction: column-reverse;
        align-items: flex-start;
        min-height: auto
    }

    .ar .ar-ct .notice-con .notice-search .search-num .num-box {
        font-size: 14px;
        line-height: 24.08px;
        margin-top: 16px
    }

    .ar .ar-ct .notice-con .notice-search .search {
        width: 100%;
        padding: 12px 28px 12px 0
    }

    .ar .ar-ct .notice-con .notice-search .search .search-bar {
        font-size: 16px;
        line-height: 27.52px
    }

    .ar .ar-ct .notice-con .notice-search .search .search-btn {
        width: 28px;
        height: 28px;
        padding: 3px;
        background-size: calc(100% - 3px) calc(100% - 3px)
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post {
        padding: 24px 20px;
        flex-direction: column;
        align-items: start
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .ic {
        width: 24px;
        height: 24px;
        top: 25px;
        left: 0
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .ic:after {
        width: 12px;
        height: 12px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer {
        width: 100%
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-viewer .title {
        font-size: 18px !important;
        line-height: 28.08px !important;
        -webkit-line-clamp: 2
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-date {
        order: 2;
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px;
        margin-top: 12px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down {
        order: 3;
        margin: 24px 0 0
    }

    #AR .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down .m_btn[line=round] {
        padding: 0 16px !important
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box .post .post-down>a:nth-child(n+2) {
        margin-left: 12px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .post-viewer {
        padding-left: 36px
    }

    .ar .ar-ct .notice-con .notice-wrapper .post-list .post-box:hover .ic {
        left: 20px
    }

    .ar .ar-ct .notice-con .notice-empty .empty-box {
        padding: 88px 0;
        font-weight: 300
    }
}

html[lang=en] .ar .ar-ct .notice-con {
    margin-top: min(4.1666666667vw, 80px)
}

@media (max-width: 1023px) {
    html[lang=en] .ar .ar-ct .notice-con {
        margin-top: 44px
    }
}

@media (max-width: 768px) {
    html[lang=en] .ar .ar-ct .notice-con {
        margin-top: 40px
    }
}

.ar10 .sub_container,
.ar10 .sec_inner {
    background-color: transparent
}

.ar10 .ar-viewer .viewer-head {
    padding-bottom: min(2.1354166667vw, 41px);
    border-bottom: 1px solid #E5E5E5
}

.ar10 .ar-viewer .viewer-head .txt-wrap .head-topic {
    font-weight: 300;
    margin-bottom: min(1.0416666667vw, 20px);
    color: #f60
}

.ar10 .ar-viewer .viewer-head .txt-wrap .head-title {
    margin-bottom: min(1.4583333333vw, 28px);
    color: #151515
}

.ar10 .ar-viewer .viewer-head .txt-wrap .head-date {
    font-weight: 300;
    color: #4b4b4b
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-summary {
    position: relative;
    width: 100%;
    padding-left: min(1.25vw, 24px);
    margin-top: min(3.75vw, 72px);
    box-sizing: border-box;
    border-left: 4px solid #B8B8B8
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-summary .sum-list {
    display: flex;
    flex-direction: column;
    gap: min(1.0416666667vw, 20px)
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-img {
    position: relative;
    width: 100%;
    margin: min(3.75vw, 72px) 0
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-text {
    font-weight: 300;
    margin-top: min(3.75vw, 72px);
    padding-bottom: min(5.2083333333vw, 100px)
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-text img {
    position: relative;
    margin: min(3.75vw, 72px) 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-files {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
    padding: min(1.6666666667vw, 32px) min(1.875vw, 36px);
    box-sizing: border-box;
    display: flex;
    font-weight: 300
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-files .refer {
    min-width: min(3.4895833333vw, 67px)
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list {
    display: flex;
    flex-direction: column;
    gap: min(.625vw, 12px);
    margin-left: min(1.4583333333vw, 28px)
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
.ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    left: calc(50% - min(.4166666667vw, 8px));
    top: calc(50% - min(.4166666667vw, 8px));
    background-image: url(https://www.hanwhaocean.com/images/common/icon_download_line.svg)
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after {
    filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(203deg) brightness(115%) contrast(101%)
}

.ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .txt {
    font-weight: 300;
    color: #4b4b4b;
    background-image: linear-gradient(#4b4b4b, #4b4b4b)
}

.ar10 .ar-viewer .viewer-link {
    position: relative;
    display: flex;
    justify-content: center;
    margin: min(1.6666666667vw, 32px) 0 min(2.2916666667vw, 44px)
}

.ar10 .ar-viewer .viewer-link .link-list .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_list_hamburger.svg);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    margin-right: min(.625vw, 12px)
}

.ar10 .ar-viewer .viewer-nav {
    padding-top: min(2.2916666667vw, 44px);
    border-top: 1px solid #E5E5E5
}

.ar10 .ar-viewer .viewer-nav .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box {
    position: relative;
    width: min(25.7291666667vw, 494px)
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box>a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.75vw, 33.6px)
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .icon {
    display: inline-block;
    margin: 0;
    width: min(1.875vw, 36px);
    height: min(1.8229166667vw, 35px)
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .desc {
    position: relative;
    max-width: min(17.9166666667vw, 344px);
    width: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    font-weight: 300;
    color: #4b4b4b
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .desc:after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #4B4B4B;
    transition: width .3s cubic-bezier(.41, .2, .53, .84)
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .prev {
    justify-content: start
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .prev .icon {
    left: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
    margin: 0 min(1.6666666667vw, 32px) 0 min(1.0416666667vw, 20px)
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next {
    justify-content: end;
    flex-direction: row-reverse
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
    right: 0;
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next strong {
    margin: 0 min(1.0416666667vw, 20px) 0 min(1.6666666667vw, 32px)
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .none {
    display: none
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .notPost {
    pointer-events: none
}

.ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box>a:hover .desc:after {
    width: 100%
}

#AR10 .m_btn[type=text][hover=underline] span.icon {
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    border: none
}

@media (max-width: 1023px) {
    .ar10 .ar-viewer .viewer-head {
        padding-bottom: 24px
    }

    .ar10 .ar-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 12px
    }

    .ar10 .ar-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 16px;
        font-size: 36px !important;
        line-height: 47.52px !important
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-summary {
        padding-left: 15px;
        margin-top: 48px;
        border-left: 2.5px solid #B8B8B8
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 12.5px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-img,
    .ar10 .ar-viewer .viewer-cont .article-ct .arti-text img {
        margin: 48px 0
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-text {
        margin-top: 48px;
        padding-bottom: 64px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 22px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: 42px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 11px;
        margin-left: 20px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 14px;
        height: 14px;
        left: calc(50% - 7px);
        top: calc(50% - 7px)
    }

    .ar10 .ar-viewer .viewer-link {
        margin: 20px 0 28px
    }

    .ar10 .ar-viewer .viewer-link .link-news .icon {
        width: 16px;
        height: 16px;
        margin-right: 7.5px
    }

    #AR10 .ar-viewer .viewer-link .m_btn[line=round] {
        padding: 0 26.75px !important
    }

    .ar10 .ar-viewer .viewer-nav {
        padding-top: 32px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 50%
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 12.5px;
        line-height: 21px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 24px;
        height: 24px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .desc {
        width: 50%
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .prev strong {
        margin: 0 20.5px 0 12.5px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        margin: 0 12.5px 0 20.5px
    }

    #AR10 .m_btn[type=text][hover=underline] span.icon {
        width: 16px !important;
        height: 16px !important;
        border: none
    }
}

@media (max-width: 768px) {
    .ar10 .ar-viewer .viewer-head {
        padding-bottom: 36px
    }

    .ar10 .ar-viewer .viewer-head .txt-wrap .head-topic {
        margin-bottom: 16px
    }

    .ar10 .ar-viewer .viewer-head .txt-wrap .head-title {
        margin-bottom: 20px;
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-summary {
        border-left: 2px solid #B8B8B8;
        padding-left: 18px;
        margin-top: 48px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-summary .sum-list {
        gap: 20px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-summary .sum-list span {
        font-size: 18px !important;
        line-height: 28.08px !important
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-img,
    .ar10 .ar-viewer .viewer-cont .article-ct .arti-text img {
        margin: 48px 0
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-text {
        margin-top: 48px;
        padding-bottom: 80px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files {
        padding: 20px 24px;
        flex-direction: column
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .refer {
        min-width: auto;
        margin-bottom: 16px
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list {
        gap: 10px;
        margin-left: 0
    }

    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:after,
    .ar10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .icon:before {
        width: 12px;
        height: 12px;
        left: calc(50% - 6px);
        top: calc(50% - 6px)
    }

    #AR10 .ar-viewer .viewer-cont .article-ct .arti-files .files-list .file .m_btn[type=text][hover=underline] span.icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important
    }

    .ar10 .ar-viewer .viewer-link {
        margin: 28px 0 32px
    }

    #AR10 .ar-viewer .viewer-link .m_btn[line=round] {
        padding: 0 20px !important
    }

    #AR10 .ar-viewer .viewer-link .link-list .icon {
        width: 20px !important;
        height: 20px !important
    }

    .ar10 .ar-viewer .viewer-nav {
        padding-top: 32px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap {
        flex-direction: column
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box {
        max-width: none;
        width: 100%
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box:nth-child(n+2) {
        margin-top: 28px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box>a {
        font-size: 16px;
        line-height: 27.52px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .icon {
        width: 18px;
        height: 18px;
        order: 2;
        margin: 0 20px 0 8px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .prev strong,
    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next strong {
        order: 1;
        margin: 0;
        font-weight: 300;
        width: 62px
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .prev .icon,
    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next {
        justify-content: flex-start;
        flex-direction: row
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .next .icon {
        transform: rotate(180deg)
    }

    .ar10 .ar-viewer .viewer-nav .nav-wrap .nav-box .desc {
        order: 3;
        width: 233px;
        max-width: none
    }
}

.acc .sub_container,
.acc .sub_container .sec_inner {
    background: none
}

.acc .acc-ct {
    margin-top: min(4.1666666667vw, 80px)
}

.acc .acc-ct .table-con:nth-child(n+2) {
    margin-top: min(8.3333333333vw, 160px)
}

.acc .acc-ct .table-con .table-wrap table {
    width: 100%
}

.acc .acc-ct .table-con .tit-wrap {
    display: flex;
    justify-content: space-between
}

.acc .acc-ct .table-con .tit-wrap .title {
    font-weight: 700
}

.acc .acc-ct .table-con .table-wrap {
    border-top: 1px solid #151515;
    margin-top: min(1.875vw, 36px)
}

.acc .acc-ct .table-con .table-wrap tr {
    border-bottom: 1px solid #E5E5E5
}

.acc .acc-ct .table-con .table-wrap tr th,
.acc .acc-ct .table-con .table-wrap tr td {
    width: min(22.9166666667vw, 440px);
    height: min(5.2083333333vw, 100px);
    padding: 0 min(2.2916666667vw, 44px);
    box-sizing: border-box;
    text-align: center
}

.acc .acc-ct .table-con .table-wrap tr th:first-child,
.acc .acc-ct .table-con .table-wrap tr td:first-child {
    width: min(18.75vw, 360px)
}

.acc .acc-ct .table-con .table-wrap tbody {
    font-weight: 300;
    color: #4b4b4b
}

@media (max-width: 1023px) {
    .acc .acc-ct {
        margin-top: 28px
    }

    .acc .acc-ct .table-con:nth-child(n+2) {
        margin-top: 120px
    }

    .acc .acc-ct .table-con .table-wrap {
        margin-top: 24px
    }

    .acc .acc-ct .table-con .table-wrap tr th,
    .acc .acc-ct .table-con .table-wrap tr td {
        width: 25%;
        height: 64px;
        padding: 0 28px
    }

    .acc .acc-ct .table-con .table-wrap tr th:first-child,
    .acc .acc-ct .table-con .table-wrap tr td:first-child {
        width: 22.1428571429%
    }
}

@media (max-width: 768px) {
    .acc .acc-ct {
        margin-top: 40px
    }

    .acc .acc-ct .table-con:nth-child(n+2) {
        margin-top: 80px
    }

    .acc .acc-ct .table-con .table-wrap {
        margin-top: 20px
    }

    .acc .acc-ct .table-con .table-wrap tr th,
    .acc .acc-ct .table-con .table-wrap tr td {
        width: 25%;
        height: 64px;
        padding: 0;
        text-align: left
    }

    .acc .acc-ct .table-con .table-wrap tr th:first-child,
    .acc .acc-ct .table-con .table-wrap tr td:first-child {
        width: 25%
    }

    .acc .acc-ct .table-con .table-wrap tbody tr td {
        height: 88px
    }

    .acc .acc-ct .table-con .table-wrap tbody tr>*,
    .acc .acc-ct .table-con .table-wrap thead tr>* {
        padding: 20px 12px;
        box-sizing: border-box;
        word-break: break-word
    }
}

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}

.whoweare .pc_only {
    display: block
}

.whoweare .ta_only,
.whoweare .m_only {
    display: none
}

.whoweare .sub_container,
.whoweare .sub_container .sec_inner {
    background: transparent
}

.whoweare .sub_container .sec_inner .tab-looking-a>a {
    display: inline-block;
    position: relative;
    font-size: min(1.6666666667vw, 32px);
    line-height: 1.6;
    color: #b8b8b8
}

.whoweare .sub_container .sec_inner .tab-looking-a>a+a {
    margin-left: min(1.6666666667vw, 32px)
}

.whoweare .sub_container .sec_inner .tab-looking-a>a.active {
    font-weight: 700;
    color: #151515
}

.whoweare .sub_container .sec_inner .tab-looking-a>a.active:before {
    content: "";
    position: absolute;
    width: 100%;
    height: min(.1041666667vw, 2px);
    background: #151515;
    bottom: 0;
    left: 0
}

.whoweare .sub_container .sec_inner .column-contents {
    display: flex;
    justify-content: space-between
}

.whoweare .sub_container .sec_inner .column-contents .cont {
    width: 48.57%
}

.whoweare .sub_container .sec_inner .column-contents.firstpage {
    padding: 0 min(.2604166667vw, 5px);
    margin-top: min(13.9583333333vw, 268px)
}

.whoweare .sub_container .sec_inner .column-contents.sticky {
    margin-top: min(6.40625vw, 123px)
}

.whoweare .sub_container .sec_inner .column-contents.sticky .cont.left {
    position: sticky;
    top: min(6.25vw, 120px);
    height: 100%
}

.whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table {
    margin-top: min(11.875vw, 228px);
    border-top: 2px solid #151515
}

.whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table tr {
    border-bottom: 1px solid #E5E5E5
}

.whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table th {
    padding: min(1.875vw, 36px) min(2.2916666667vw, 44px);
    text-align: left;
    vertical-align: top;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 400
}

.whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td {
    padding: min(1.875vw, 36px) min(2.0833333333vw, 40px);
    color: #4b4b4b;
    text-align: left;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 300
}

.whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td strong.td_title {
    display: block;
    margin-bottom: min(.4166666667vw, 8px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 700;
    color: #151515;
    line-height: 1.4
}

.whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .strong {
    font-size: min(2.7083333333vw, 52px);
    font-weight: 400;
    line-height: 1.32
}

.whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .sub {
    margin-top: min(2.1875vw, 42px);
    font-size: min(1.875vw, 36px);
    font-weight: 400;
    line-height: 1.52
}

.whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .desc {
    margin-top: min(3.125vw, 60px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.52;
    color: #4b4b4b
}

.whoweare .sub_container .sec_inner .normal-contents {
    padding-top: min(8.3333333333vw, 160px)
}

.whoweare .sub_container .sec_inner .normal-contents .text-wrap .desc {
    margin-top: min(3.125vw, 60px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    color: #4b4b4b;
    line-height: 1.68
}

.whoweare .sub_container .sec_inner .normal-contents ul.items {
    display: flex;
    justify-content: space-between;
    gap: min(2.5vw, 48px);
    max-width: min(65vw, 1248px);
    margin: min(8.3333333333vw, 160px) 0 0 auto
}

.whoweare .sub_container .sec_inner .normal-contents ul.items>li {
    max-width: min(20vw, 384px);
    width: 100%
}

.whoweare .sub_container .sec_inner .normal-contents ul.items>li>picture {
    display: block;
    max-width: min(9.375vw, 180px);
    margin-bottom: min(3.125vw, 60px)
}

.whoweare .sub_container .sec_inner .normal-contents ul.items>li>picture img {
    width: 100%;
    height: 100%
}

.whoweare .sub_container .sec_inner .normal-contents ul.items>li div>strong {
    font-size: min(1.6666666667vw, 32px);
    font-weight: 700;
    line-height: 1.7
}

.whoweare .sub_container .sec_inner .normal-contents ul.items>li div>p {
    margin-top: min(1.25vw, 24px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.whoweare .sub_container .banner-wrap {
    margin-top: min(10.4166666667vw, 200px);
    position: relative;
    width: 100%;
    height: min(38.5416666667vw, 740px)
}

.whoweare .sub_container .banner-wrap .banner {
    clip-path: inset(0% 0% 0%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.whoweare .sub_container .banner-wrap .banner:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(https://www.hanwhaocean.com/images/whoweare/introduction/banner.webp) no-repeat center center/cover
}

.whoweare-main .sub_top {
    height: min(37.1875vw, 714px);
    z-index: -1
}

.whoweare-main .sub_top .top_tit_area {
    position: sticky;
    top: min(7.8125vw, 150px);
    padding-bottom: 0
}

.whoweare-main .sub_top .top_tit_area .top_tit-inner {
    padding-bottom: 0
}

.whoweare-main .sub_container {
    margin-top: calc(-1*min(15.625vw, 300px));
    opacity: 0;
    animation: wwaMainFadeIn 1s 1.4s forwards
}

@keyframes wwaMainFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.whoweare-main .sub_container .inner {
    position: relative
}

.whoweare-main .sub_container .inner .text-wrap {
    position: sticky;
    top: 0;
    z-index: 99;
    max-width: min(100vw, 1920px);
    margin: 0 auto
}

.whoweare-main .sub_container .inner .text-wrap.absolute {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    top: auto;
    width: 100%;
    height: 100vh
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner {
    width: 100%;
    height: 100vh;
    position: absolute;
    opacity: 0;
    transition: .3s
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.half {
    width: 50%;
    right: 0
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.half .title-wrap {
    padding-left: 0
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.active {
    opacity: 1
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.active .title-wrap .number span,
.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.active .title-wrap .title span,
.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.active .desc-wrap p span {
    transform: translateY(0)
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap {
    padding-top: min(10.4166666667vw, 200px);
    padding-left: min(6.25vw, 120px);
    padding-bottom: 20%
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap .number {
    display: block;
    overflow: hidden;
    font-size: min(1.4583333333vw, 28px);
    font-weight: 400;
    line-height: 1.68;
    color: #b8b8b8;
    margin-bottom: min(1.9270833333vw, 37px)
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap .number span {
    display: block;
    transform: translateY(100%);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap .title {
    display: block;
    overflow: hidden;
    font-size: min(3.75vw, 72px);
    line-height: 1.32;
    font-weight: 400;
    color: #fff
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap .title span {
    display: block;
    transform: translateY(100%);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(35.78125vw, 687px);
    height: min(11.71875vw, 225px)
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
    opacity: 0;
    transition: .5s
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p.on {
    opacity: 1
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p span {
    display: block;
    transform: translateY(100%);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.whoweare-main .sub_container .inner .kv-wrap {
    background: #000
}

.whoweare-main .sub_container .inner .kv-wrap .kv-wrap-inner {
    position: relative;
    height: 150vh
}

.whoweare-main .sub_container .inner .kv-wrap .kv-wrap-inner:nth-child(n+2) {
    margin-top: calc(-1*min(13.0208333333vw, 250px))
}

.whoweare-main .sub_container .inner .kv-wrap .kv-wrap-inner .picture-wrap {
    position: sticky;
    top: 0;
    overflow: hidden
}

.whoweare-main .sub_container .inner .kv-wrap .kv-wrap-inner .picture-wrap video {
    width: 100%;
    height: 100vh;
    object-fit: cover
}

.whoweare-main .sub_container .inner .kv-wrap .kv-wrap-inner .picture-wrap .picture {
    position: relative;
    display: block;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: inset(15% 15% 15% 15%);
    transition: .1s
}

.whoweare-main .sub_container .inner .kv-wrap .kv-wrap-inner .picture-wrap .picture img {
    height: 100vh;
    width: 100vw;
    object-fit: cover
}

.whoweare-main .sub_container .video-section {
    max-width: min(72.3958333333vw, 1390px);
    margin: 0 auto;
    margin-top: min(8.3333333333vw, 160px)
}

.whoweare-main .sub_container .video-section.active .video-wrap,
.whoweare-main .sub_container .video-section.active .title span,
.whoweare-main .sub_container .video-section.active .desc span {
    transform: translateY(0)
}

.whoweare-main .sub_container .video-section .video-wrap {
    position: relative;
    overflow: hidden;
    margin-top: min(3.125vw, 60px);
    width: 100%;
    font-size: 0;
    transform: translateY(100%);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.whoweare-main .sub_container .video-section .video-wrap .video-btn {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: min(72.3958333333vw, 1390px);
    height: min(40.46875vw, 777px);
    overflow: hidden;
    z-index: 1
}

.whoweare-main .sub_container .video-section .video-wrap .video-btn.hide {
    display: none
}

.whoweare-main .sub_container .video-section .video-wrap .video-btn img {
    width: 100%
}

.whoweare-main .sub_container .video-section .video-wrap #wwa-main-video {
    max-width: min(72.3958333333vw, 1390px);
    width: min(72.3958333333vw, 1390px);
    height: min(40.46875vw, 777px);
    width: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer
}

.whoweare-main .sub_container .video-section .title {
    overflow: hidden;
    display: block;
    font-size: min(3.125vw, 60px);
    font-weight: 400;
    line-height: 1.32
}

.whoweare-main .sub_container .video-section .title span {
    display: block;
    transform: translateY(100%);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.whoweare-main .sub_container .video-section .desc {
    overflow: hidden;
    display: block;
    margin-top: min(.8333333333vw, 16px);
    color: #999;
    font-size: min(.8333333333vw, 16px);
    font-weight: 400;
    line-height: 1.5
}

.whoweare-main .sub_container .video-section .desc span {
    display: block;
    transform: translateY(100%);
    transition: all 1.2s cubic-bezier(.39, 0, .12, .99)
}

.whoweare-ci .column-contents {
    margin-top: min(8.3333333333vw, 160px)
}

.whoweare-ci .column-contents .column-1 .picture {
    display: block;
    width: 100%;
    border: min(.0520833333vw, 1px) solid #e5e5e5
}

.whoweare-ci .column-contents .column-1 .picture img {
    width: 100%
}

.whoweare-ci .column-contents .column-1 .desc {
    margin-top: min(3.125vw, 60px);
    margin-bottom: min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.whoweare-ci .column-contents .column-1 .row+.row {
    margin-top: min(2.0833333333vw, 40px)
}

.whoweare-ci .column-contents .column-1 .row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: min(15.625vw, 300px);
    border: min(.0520833333vw, 1px) solid #E5E5E5
}

.whoweare-ci .column-contents .column-1 .row .picture {
    border: none
}

.whoweare-ci .column-contents .column-1 .row .picture.logo-kor {
    width: min(13.4375vw, 258px);
    height: min(3.125vw, 60px)
}

.whoweare-ci .column-contents .column-1 .row .picture.logo-en {
    width: min(26.09375vw, 501px);
    height: min(2.3958333333vw, 46px)
}

.whoweare-ci .column-contents .column-1 .row .lang-flag {
    position: absolute;
    font-size: min(.8333333333vw, 16px);
    font-weight: 400;
    line-height: 1.5;
    color: #4b4b4b;
    top: min(1.25vw, 24px);
    left: min(1.25vw, 24px)
}

.whoweare-ci .column-contents .column-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: min(1.0416666667vw, 20px);
    flex-wrap: wrap
}

.whoweare-ci .column-contents .column-2 .picture {
    display: block;
    width: calc(50% - min(.7291666667vw, 14px));
    border: min(.0520833333vw, 1px) solid #e5e5e5
}

.whoweare-ci .column-contents .column-2 .picture img {
    width: 100%
}

.whoweare-gn .sub_container .sec_inner .normal-contents .picture {
    display: inline-block;
    margin-top: min(3.125vw, 60px)
}

.whoweare-gn .sub_container .sec_inner .normal-contents .picture img {
    width: 100%
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky {
    margin-top: min(8.3333333333vw, 160px)
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.left {
    max-width: min(30.46875vw, 585px);
    padding-right: min(2.0833333333vw, 40px);
    box-sizing: border-box
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap {
    margin-top: min(6.25vw, 120px)
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4:after {
    content: "";
    display: inline-block;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    margin-left: min(1.0416666667vw, 20px);
    vertical-align: middle
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.london:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_london.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.tokyo:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_japan.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.oslo:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_oslo.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.luanda:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_lu.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.hue:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_hue.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.greece:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_greece.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.singapore:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_singapore.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4.jakarta:after {
    background: url(https://www.hanwhaocean.com/images/whoweare/gn/overseas/globalnetwork_jakarta.svg) no-repeat center center/contain
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right table {
    margin-top: min(1.0416666667vw, 20px)
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right table td>a {
    position: relative;
    color: #f60
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right table td>a:after {
    content: "";
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(.0520833333vw, 1px);
    background: #f60
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.left h3 {
    font-weight: 400
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.left .desc {
    margin-top: min(3.125vw, 60px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right {
    margin-top: min(22.8125vw, 438px)
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap {
    margin-top: min(10.9375vw, 210px)
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap:nth-of-type(1) {
    margin-top: 0
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap h4 {
    font-size: min(1.875vw, 36px);
    line-height: 1.52
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .desc {
    margin-top: min(1.25vw, 24px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap a.outlink {
    margin-top: min(1.6666666667vw, 32px)
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .add-desc {
    display: block;
    margin-top: min(1.0416666667vw, 20px);
    font-size: min(.8333333333vw, 16px);
    font-weight: 300;
    line-height: 1.5;
    color: #999
}

.whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right table {
    margin-top: min(4.1666666667vw, 80px)
}

.whoweare-ig .title-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: min(6.25vw, 120px)
}

.whoweare-ig .title-wrap>h4 {
    font-size: min(3.75vw, 72px);
    line-height: 1.32;
    font-weight: 400
}

.whoweare-ig .title-wrap>p {
    margin-top: min(2.5vw, 48px);
    margin-left: min(1.5625vw, 30px);
    grid-column: 2;
    grid-row: 2;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.32;
    font-weight: 300;
    color: #4b4b4b
}

.whoweare-ig .scroll-content {
    position: relative;
    margin-top: min(6.9791666667vw, 134px);
    border-top: 1px solid #E5E5E5
}

.whoweare-ig .scroll-content:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    display: inline-block;
    height: 100%;
    width: 1px;
    background-color: #e5e5e5;
    z-index: 1
}

.whoweare-ig .follower {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, min(10.4166666667vw, 200px));
    z-index: 2;
    width: min(.6770833333vw, 13px);
    height: min(3.6458333333vw, 70px)
}

.whoweare-ig .follower img {
    width: 100%
}

.whoweare-ig ol.item-list {
    width: 100%;
    max-width: min(72.5vw, 1392px);
    margin: 0 auto
}

.whoweare-ig ol.item-list>li.item {
    padding-top: min(10.4166666667vw, 200px);
    display: flex;
    justify-content: space-between
}

.whoweare-ig ol.item-list>li.item:nth-of-type(odd) {
    flex-direction: row-reverse
}

.whoweare-ig ol.item-list>li.item:nth-of-type(2n) .picture {
    margin-right: min(5.625vw, 108px)
}

.whoweare-ig ol.item-list>li.item .picture {
    max-width: min(21.875vw, 420px);
    width: 100%
}

.whoweare-ig ol.item-list>li.item .picture img {
    width: 100%
}

.whoweare-ig ol.item-list>li.item .text-wrap {
    max-width: min(31.25vw, 600px)
}

.whoweare-ig ol.item-list>li.item .text-wrap .phase {
    display: block;
    font-size: min(.8333333333vw, 16px);
    line-height: 1.5;
    font-weight: 400;
    color: #4b4b4b
}

.whoweare-ig ol.item-list>li.item .text-wrap .title {
    margin-top: min(.8333333333vw, 16px);
    font-weight: 400
}

.whoweare-ig ol.item-list>li.item .text-wrap .desc {
    margin-top: min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    font-weight: 300;
    color: #4b4b4b
}

.whoweare-ig.facilities .picture img {
    width: 100%
}

.whoweare-ig.facilities .facilities-contents {
    position: relative;
    margin-top: min(8.3333333333vw, 160px);
    margin-bottom: calc(-1*min(14.5833333333vw, 280px));
    display: flex;
    justify-content: center;
    z-index: 1
}

.whoweare-ig.facilities .facilities-contents-inner {
    position: relative
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background {
    position: relative;
    width: 100%;
    height: 100%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .background-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .background-layer.active {
    display: block
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .background-layer.active img {
    animation: fadeIn .5s forwards
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn {
    position: absolute;
    display: inline-block;
    background: #ff0;
    width: 2%;
    height: 4%;
    opacity: 0
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn:focus-visible {
    opacity: 1;
    outline: none;
    border: 2px solid blue
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-1] {
    top: 61%;
    left: 39.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-2] {
    top: 55%;
    left: 60%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-3] {
    top: 75%;
    left: 56.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-4] {
    top: 69%;
    left: 39%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-5] {
    top: 64%;
    left: 45.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-6] {
    top: 68%;
    left: 61.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-7] {
    top: 42%;
    left: 50.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-8] {
    top: 68%;
    left: 93%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-9] {
    top: 58%;
    left: 70.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-10] {
    top: 67%;
    left: 28.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-11] {
    top: 68%;
    left: 64%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-12] {
    top: 60%;
    left: 51.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-13] {
    top: 70%;
    left: 48%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-14] {
    top: 51%;
    left: 73.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-15] {
    top: 63%;
    left: 68.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-16] {
    top: 55%;
    left: 95.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-17] {
    top: 73%;
    left: 86.5%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-18] {
    top: 62%;
    left: 89%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-19] {
    top: 57%;
    left: 90%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-20] {
    top: 49%;
    left: 90%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-21] {
    top: 46%;
    left: 92%
}

.whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-22] {
    top: 72%;
    left: 77.5%
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list {
    position: absolute;
    top: 50%;
    left: 2.08%;
    transform: translateY(-50%);
    background: #fff;
    max-height: min(42.5vw, 816px);
    height: 83%;
    max-width: min(23.9583333333vw, 460px);
    width: 100%;
    padding: 2.9% min(2.0833333333vw, 40px);
    border-radius: min(1.0416666667vw, 20px);
    box-sizing: border-box
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 9.8%;
    background: linear-gradient(180deg, #fff, #fff 50%, #fff 68%, #fff0);
    border-top-left-radius: min(1.0416666667vw, 20px);
    border-top-right-radius: min(1.0416666667vw, 20px)
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9.8%;
    background: linear-gradient(0deg, #fff, #fff 50%, #fff 68%, #fff0);
    border-bottom-left-radius: min(1.0416666667vw, 20px);
    border-bottom-right-radius: min(1.0416666667vw, 20px)
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner {
    height: 100%;
    overflow-y: scroll
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner::-webkit-scrollbar {
    width: 6px;
    cursor: pointer
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner::-webkit-scrollbar-thumb {
    height: 30%;
    background-color: #151515;
    border: 1.1px solid transparent;
    cursor: pointer
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner::-webkit-scrollbar-track {
    background-color: #e5e5e5;
    margin: 24px
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li {
    padding: min(.8333333333vw, 16px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: 1.68;
    color: #151515
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li.active .num {
    background: #f60;
    color: #fff;
    animation: fadeIn 1s forwards
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li .num {
    flex: none;
    display: inline-block;
    width: min(1.5625vw, 30px);
    height: min(1.5625vw, 30px);
    border-radius: 100%;
    background: #f5f5f5;
    margin-right: min(.8333333333vw, 16px);
    vertical-align: middle;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.5625vw, 30px);
    font-weight: 700;
    color: #4b4b4b;
    text-align: center
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button {
    display: block
}

.whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button>span {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: 1.68;
    vertical-align: middle
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: 6.25%;
    transform: translateY(-50%);
    background: #0006;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    max-height: min(34.7916666667vw, 668px);
    height: 83%;
    max-width: min(27.5vw, 528px);
    width: 100%;
    border-radius: min(.625vw, 12px);
    box-sizing: border-box
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup.on {
    display: block;
    animation: fadeIn .5s forwards
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup.left {
    right: 44.17%
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup-close {
    position: absolute;
    top: min(.625vw, 12px);
    right: min(.625vw, 12px);
    background: #151515;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    border-radius: 100%;
    transition: transform .3s;
    font-size: 0
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup-close:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    background: url(https://www.hanwhaocean.com/images/whoweare/ig/facilities/close.svg) no-repeat center center/contain
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup-close:hover {
    transform: rotate(90deg)
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner {
    height: 100%
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .picture {
    overflow: hidden;
    display: inline-block;
    height: 46.1%
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap {
    padding: min(2.0833333333vw, 40px) min(.8333333333vw, 16px);
    height: 53.89%;
    box-sizing: border-box
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner {
    overflow-y: scroll;
    height: 100%
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner::-webkit-scrollbar {
    width: 4px;
    cursor: pointer
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner::-webkit-scrollbar-thumb {
    height: 30%;
    background-color: #4b4b4b;
    border: 1.1px solid transparent;
    cursor: pointer
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner::-webkit-scrollbar-track {
    background-color: transparent
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text {
    padding: 0 min(1.0416666667vw, 20px)
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong {
    display: flex
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong .num {
    flex: none;
    display: inline-block;
    width: min(1.5625vw, 30px);
    height: min(1.5625vw, 30px);
    border-radius: 100%;
    background: #f60;
    margin-right: min(.8333333333vw, 16px);
    vertical-align: middle;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.5625vw, 30px);
    font-weight: 700;
    color: #fff;
    text-align: center
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong>span {
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: 1.4;
    color: #fff
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>p {
    margin-top: min(1.6666666667vw, 32px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    font-weight: 400;
    color: #b8b8b8;
    word-break: break-all
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>p .flex-ellipse {
    display: flex
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>p .flex-ellipse:before {
    content: "∙";
    vertical-align: middle
}

.whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>p .empty-space {
    padding: min(.2083333333vw, 4px)
}

.whoweare-history {
    opacity: 0
}

.whoweare-history .sub_container {
    height: auto
}

.whoweare-history .history-navigator {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: min(1.25vw, 24px) min(6.25vw, 120px);
    background: #fffc;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    z-index: 999;
    transition: top .1s ease-in-out
}

.whoweare-history .history-navigator.up {
    transition: top .28s ease-in-out
}

.whoweare-history .history-navigator ol.navigation {
    display: flex;
    align-items: center;
    gap: min(3.125vw, 60px)
}

.whoweare-history .history-navigator ol.navigation>li>a.active span {
    color: #151515
}

.whoweare-history .history-navigator ol.navigation>li>a>span {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: 1.68;
    color: #b8b8b8
}

.whoweare-history .scroll-content {
    position: relative
}

.whoweare-history .fine-line {
    position: absolute;
    width: 2px;
    background: #e5e5e5;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.whoweare-history ol.item-list {
    padding-top: min(8.3333333333vw, 160px);
    width: 100%;
    max-width: min(72.5vw, 1392px);
    margin: 0 auto
}

.whoweare-history ol.item-list:nth-of-type(2n) li.item:nth-of-type(odd) {
    flex-direction: row;
    text-align: right;
    transform: translate(10%)
}

.whoweare-history ol.item-list:nth-of-type(2n) li.item:nth-of-type(2n) {
    flex-direction: row-reverse;
    text-align: left;
    transform: translate(-10%)
}

.whoweare-history ol.item-list:nth-of-type(2n) li.item.active {
    transform: translate(0);
    opacity: 1
}

.whoweare-history ol.item-list>li.item {
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: 1s ease
}

.whoweare-history ol.item-list>li.item:nth-of-type(odd) {
    flex-direction: row-reverse;
    transform: translate(-10%)
}

.whoweare-history ol.item-list>li.item:nth-of-type(2n) {
    text-align: right;
    transform: translate(10%)
}

.whoweare-history ol.item-list>li.item.active {
    transform: translate(0);
    opacity: 1
}

.whoweare-history ol.item-list>li.item .text-wrap {
    max-width: min(27.5vw, 528px);
    width: min(27.5vw, 528px)
}

.whoweare-history ol.item-list>li.item .text-wrap .year-title {
    display: block;
    font-size: min(1.875vw, 36px);
    line-height: 1.52;
    font-weight: 400;
    color: #4b4b4b;
    padding-bottom: min(.8333333333vw, 16px)
}

.whoweare-history ol.item-list>li.item .text-wrap .desc {
    margin-top: min(1.25vw, 24px);
    font-size: min(1.25vw, 24px);
    line-height: 1.6;
    font-weight: 300;
    color: #4b4b4b
}

.whoweare-history .mid-motion {
    position: relative;
    background: #fff;
    z-index: 1
}

.whoweare-history .mid-motion .year-motion {
    height: min(8.2291666667vw, 158px);
    overflow: hidden;
    text-align: center;
    opacity: 0;
    transform: translateY(min(5.2083333333vw, 100px));
    transition: .5s ease
}

.whoweare-history .mid-motion .year-motion.active {
    opacity: 1;
    transform: translateY(0)
}

.whoweare-history .mid-motion .year-motion .elem {
    display: inline-block;
    vertical-align: middle;
    font-size: min(6.25vw, 120px);
    font-weight: 400;
    line-height: 1.32
}

.whoweare-history .mid-motion .year-motion .elem.hyphen {
    display: inline-block;
    margin: 0 min(.625vw, 12px)
}

.whoweare-history .mid-motion .mid-motion-inner {
    padding-top: min(20.8333333333vw, 400px);
    display: flex;
    flex-direction: column;
    align-items: center
}

.whoweare-history .mid-motion .img-motion {
    height: 150vh;
    position: relative;
    width: 30%;
    transition: 1.2s;
    transition-delay: .5s
}

.whoweare-history .mid-motion .img-motion.active {
    width: 100%
}

.whoweare-history .mid-motion .img-motion.active .core-wrap .banner-wrap-his {
    min-height: min(44.7916666667vw, 860px)
}

.whoweare-history .mid-motion .img-motion .core-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    padding-top: min(16.6666666667vw, 320px)
}

.whoweare-history .mid-motion .img-motion .core-wrap .banner-wrap-his {
    position: relative;
    width: 100%;
    min-height: min(17.1875vw, 330px);
    transition: 1.2s
}

.whoweare-history .mid-motion .img-motion .core-wrap .banner-wrap-his .core-wrap-inner {
    clip-path: inset(0% 0% 0%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.whoweare-history .mid-motion .img-motion .core-wrap .banner-wrap-his .core-wrap-inner img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover
}

@media (max-width: 1023px) {
    .whoweare .pc_only {
        display: none
    }

    .whoweare .ta_only {
        display: block
    }

    .whoweare .m_only {
        display: none
    }

    .whoweare .sub_container .sec_inner {
        min-width: auto
    }
}

@media (max-width: 768px) {

    .whoweare .pc_only,
    .whoweare .ta_only {
        display: none
    }

    .whoweare .m_only {
        display: block
    }

    .whoweare .sub_container .sec_inner .tab-looking-a-wrap {
        overflow-x: auto
    }

    .whoweare .sub_container .sec_inner .tab-looking-a-wrap::-webkit-scrollbar {
        height: 0
    }

    .whoweare .sub_container .sec_inner .tab-looking-a {
        width: max-content
    }

    .whoweare .sub_container .sec_inner .tab-looking-a>a {
        font-size: 20px;
        line-height: 1.56
    }

    .whoweare .sub_container .sec_inner .tab-looking-a>a.active:before {
        height: 2px
    }

    .whoweare .sub_container .sec_inner .tab-looking-a>a+a {
        margin-left: 20px
    }

    .whoweare .sub_container .sec_inner .column-contents {
        display: block
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky {
        margin-top: 80px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.left {
        position: static
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.left .m_h3 {
        font-size: 24px !important;
        line-height: 1.6 !important;
        font-weight: 400 !important
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.left .m_h3 .m_hanwhaR {
        font-size: 24px !important;
        line-height: 1.6 !important
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right {
        position: static
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table {
        margin-top: 20px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table th {
        padding: 20px 0;
        width: 35.82%;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.72
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td {
        padding: 20px 0;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 300
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td strong.td_title {
        margin-bottom: 4px;
        font-size: 14px;
        line-height: 1.4
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td.m_hanwhaL,
    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td .m_hanwhaL {
        font-weight: 300 !important
    }

    .whoweare .sub_container .sec_inner .column-contents .cont {
        width: 100%
    }

    .whoweare .sub_container .sec_inner .column-contents.firstpage {
        padding: 0;
        margin-top: 60px
    }

    .whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .sub {
        margin: 0;
        font-size: 20px;
        line-height: 1.56;
        font-weight: 400
    }

    .whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .desc {
        margin-top: 40px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400;
        word-break: normal
    }

    .whoweare .sub_container .sec_inner .normal-contents {
        padding-top: 80px
    }

    .whoweare .sub_container .sec_inner .normal-contents .text-wrap .m_h3 {
        font-size: 24px !important;
        line-height: 1.6 !important;
        font-weight: 400 !important
    }

    .whoweare .sub_container .sec_inner .normal-contents .text-wrap .desc {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.72
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 56px;
        max-width: none;
        margin: 60px 0 0
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        max-width: none
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li>picture {
        max-width: none;
        width: 52.4%;
        margin: 0
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li>picture img {
        height: auto
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li>div {
        font-size: 0;
        width: 90.4%
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li>div>strong {
        font-size: 18px;
        line-height: 1.4;
        font-weight: 700
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li>div>p {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400;
        margin-top: 12px
    }

    .whoweare .sub_container .banner-wrap {
        margin-top: 80px;
        height: 53.4vw
    }

    .whoweare .sub_container .banner-wrap img {
        bottom: 0
    }

    .whoweare-main .sub_top {
        height: 320px
    }

    .whoweare-main .sub_container {
        margin-top: -140px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner.half {
        width: 71.2%
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap {
        padding-top: 100px;
        padding-left: 20px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap .title {
        font-size: 28px;
        line-height: 1.44;
        font-weight: 400
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap {
        width: 266px;
        height: 172px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p {
        font-size: 14px;
        line-height: 1.72
    }

    .whoweare-main .sub_container .video-section {
        margin-top: 80px;
        max-width: none;
        width: 89.333%
    }

    .whoweare-main .sub_container .video-section .title {
        font-size: 24px;
        line-height: 1.56
    }

    .whoweare-main .sub_container .video-section .desc {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.4
    }

    .whoweare-main .sub_container .video-section .video-wrap {
        margin-top: 40px
    }

    .whoweare-main .sub_container .video-section .video-wrap .video-btn,
    .whoweare-main .sub_container .video-section .video-wrap #wwa-main-video {
        max-width: none;
        height: auto;
        width: 100%
    }

    .whoweare-ci .column-contents {
        margin-top: 60px
    }

    .whoweare-ci .column-contents:first-child .cont.left {
        margin-bottom: 40px
    }

    .whoweare-ci .column-contents .cont.left {
        margin-bottom: 20px
    }

    .whoweare-ci .column-contents .column-1 .row {
        height: 136px
    }

    .whoweare-ci .column-contents .column-1 .row+.row {
        margin-top: 12px
    }

    .whoweare-ci .column-contents .column-1 .row .picture.logo-kor {
        width: 105.63px;
        height: 24.63px
    }

    .whoweare-ci .column-contents .column-1 .row .picture.logo-en {
        width: 205.69px;
        height: 18.52px
    }

    .whoweare-ci .column-contents .column-1 .row .lang-flag {
        font-size: 14px;
        line-height: 1.72;
        font-weight: 400;
        top: 12px;
        left: 12px
    }

    .whoweare-ci .column-contents .column-1 .desc {
        margin-top: 20px;
        margin-bottom: 32px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .whoweare-ci .column-contents .column-1 .desc .m_hanwhaL {
        font-weight: 300 !important
    }

    .whoweare-ci .column-contents .column-2 {
        gap: 12px
    }

    .whoweare-ci .column-contents .column-2 .picture {
        width: calc(50% - 7px)
    }

    .whoweare-history .history-navigator {
        overflow-x: auto;
        padding: 18px 0 18px 20px;
        box-sizing: border-box
    }

    .whoweare-history .history-navigator ol.navigation {
        width: max-content;
        gap: 40px
    }

    .whoweare-history .history-navigator ol.navigation>li:last-child {
        padding-right: 20px
    }

    .whoweare-history .history-navigator ol.navigation>li>a>span {
        font-size: 16px
    }

    .whoweare-history .fine-line {
        display: none
    }

    .whoweare-history .mid-motion {
        padding-top: 60px
    }

    .whoweare-history .mid-motion .mid-motion-inner {
        padding-top: 0
    }

    .whoweare-history .mid-motion .year-motion {
        height: 45px
    }

    .whoweare-history .mid-motion .year-motion .elem {
        font-size: 32px;
        line-height: 1.4
    }

    .whoweare-history .mid-motion .img-motion {
        height: auto
    }

    .whoweare-history .mid-motion .img-motion.active .core-wrap .banner-wrap-his {
        min-height: 53.4vw
    }

    .whoweare-history .mid-motion .img-motion.active .core-wrap .core-wrap-inner {
        animation: height 1s forwards
    }

    @keyframes height {
        0% {
            height: 20vw
        }

        to {
            height: 100%
        }
    }

    .whoweare-history .mid-motion .img-motion .core-wrap {
        height: 53.34vw;
        position: static;
        margin-top: 40px;
        padding: 0
    }

    .whoweare-history .mid-motion .img-motion .core-wrap .banner-wrap-his {
        min-height: 20vw
    }

    .whoweare-history ol.item-list {
        padding: 40px 20px 0;
        max-width: none;
        box-sizing: border-box
    }

    .whoweare-history ol.item-list:nth-of-type(2n)>li.item:nth-of-type(2n):nth-of-type(2n),
    .whoweare-history ol.item-list:nth-of-type(2n)>li.item:nth-of-type(odd):nth-of-type(2n),
    .whoweare-history ol.item-list:nth-of-type(odd)>li.item:nth-of-type(2n):nth-of-type(2n),
    .whoweare-history ol.item-list:nth-of-type(odd)>li.item:nth-of-type(odd):nth-of-type(2n) {
        text-align: left;
        transform: none
    }

    .whoweare-history ol.item-list:nth-of-type(2n)>li.item:nth-of-type(2n):nth-of-type(odd),
    .whoweare-history ol.item-list:nth-of-type(2n)>li.item:nth-of-type(odd):nth-of-type(odd),
    .whoweare-history ol.item-list:nth-of-type(odd)>li.item:nth-of-type(2n):nth-of-type(odd),
    .whoweare-history ol.item-list:nth-of-type(odd)>li.item:nth-of-type(odd):nth-of-type(odd) {
        text-align: left;
        transform: none
    }

    .whoweare-history ol.item-list>li.item {
        display: block;
        padding-top: 0;
        margin-top: 40px;
        transition: opacity 1s ease
    }

    .whoweare-history ol.item-list>li.item:first-child {
        padding-top: 0
    }

    .whoweare-history ol.item-list>li.item .text-wrap {
        max-width: none;
        width: auto
    }

    .whoweare-history ol.item-list>li.item .text-wrap .year-title {
        font-size: 20px;
        line-height: 1.56;
        padding-bottom: 0;
        margin-bottom: 20px
    }

    .whoweare-history ol.item-list>li.item .text-wrap .desc {
        font-size: 16px;
        line-height: 1.72;
        margin-top: 16px;
        color: #151515
    }

    .whoweare-history ol.item-list>li.item .text-wrap .desc:first-of-type {
        margin-top: 0
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right,
    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap {
        margin-top: 80px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap h4 {
        font-size: 20px;
        line-height: 1.56
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .desc {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap a.outlink {
        margin-top: 32px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap a.outlink.m_btn[line=round] {
        padding: 0 24px !important
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .add-desc {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.72
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right table {
        margin-top: 40px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right table td {
        font-weight: 400;
        line-height: 1.72
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.left .desc {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.left {
        max-width: none;
        padding-right: 0
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right table {
        margin-top: 20px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right table td>a:after {
        height: 1px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap {
        margin-top: 80px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right .text-wrap h4:after {
        width: 24px;
        height: 24px;
        margin-left: 8px
    }

    .whoweare-ig .follower {
        left: 26px;
        transform: translate(-50%);
        width: 8px;
        height: 42.77px
    }

    .whoweare-ig .sub_container .sec_inner .normal-contents {
        padding-top: 60px
    }

    .whoweare-ig .title-wrap {
        display: block
    }

    .whoweare-ig .title-wrap>h4 {
        margin-top: 40px;
        font-size: 24px;
        line-height: 1.52
    }

    .whoweare-ig .title-wrap>p {
        margin-top: 20px;
        margin-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.72
    }

    .whoweare-ig .scroll-content {
        margin-top: 80px;
        padding: 0 20px 0 56px;
        border-top: none
    }

    .whoweare-ig .scroll-content:after {
        transform: none;
        left: 26px
    }

    .whoweare-ig ol.item-list {
        max-width: none
    }

    .whoweare-ig ol.item-list>li.item {
        padding-top: 0;
        gap: 30px
    }

    .whoweare-ig ol.item-list>li.item:nth-child(n+2) {
        margin-top: 80px
    }

    .whoweare-ig ol.item-list>li.item:last-child {
        padding-bottom: 80px
    }

    .whoweare-ig ol.item-list>li.item:nth-of-type(odd),
    .whoweare-ig ol.item-list>li.item:nth-of-type(2n) {
        flex-direction: column-reverse
    }

    .whoweare-ig ol.item-list>li.item .picture {
        max-width: none
    }

    .whoweare-ig ol.item-list>li.item .text-wrap {
        max-width: none;
        padding-right: 10px
    }

    .whoweare-ig ol.item-list>li.item .text-wrap .title {
        margin-top: 8px;
        font-size: 24px !important;
        line-height: 1.6 !important
    }

    .whoweare-ig ol.item-list>li.item .text-wrap .phase {
        font-size: 14px;
        line-height: 1.4
    }

    .whoweare-ig ol.item-list>li.item .text-wrap .desc {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup-close {
        display: none
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background {
        height: auto
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn {
        width: 4%;
        height: 6%;
        font-size: 10px
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-1] {
        top: 60%;
        left: 17.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-2] {
        top: 54%;
        left: 45%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-3] {
        top: 75%;
        left: 40.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-4] {
        top: 68%;
        left: 16.6%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-5] {
        top: 63%;
        left: 25.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-6] {
        top: 67%;
        left: 46%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-7] {
        top: 41%;
        left: 32.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-8] {
        top: 67.5%;
        left: 90%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-9] {
        top: 57%;
        left: 59.3%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-10] {
        top: 66%;
        left: 2%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-11] {
        top: 67%;
        left: 50.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-12] {
        top: 60%;
        left: 33.7%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-13] {
        top: 69%;
        left: 28.6%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-14] {
        top: 50%;
        left: 63.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-15] {
        top: 62%;
        left: 56.2%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-16] {
        top: 54%;
        left: 93%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-17] {
        top: 71%;
        left: 81.5%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-18] {
        top: 62%;
        left: 84.2%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-19] {
        top: 55%;
        left: 86%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-20] {
        top: 49%;
        left: 84.6%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-21] {
        top: 44%;
        left: 88.6%
    }

    .whoweare-ig.facilities .facilities-contents-inner .picture-background .num-btns .btn[data-layer=layer-22] {
        top: 71%;
        left: 69%
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list {
        position: relative;
        max-width: none;
        max-height: none;
        height: 0;
        padding: 0;
        top: auto;
        left: auto;
        transform: none;
        background: transparent;
        z-index: 1
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list:after,
    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list:before {
        content: none
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner {
        overflow: visible
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li {
        position: absolute;
        top: 14px;
        left: auto;
        right: auto;
        padding: 0;
        display: none
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li.prev {
        display: block;
        left: 10px
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li.prev button:before {
        transform: rotate(180deg)
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li.next {
        display: block;
        right: 10px
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button {
        width: 28px;
        height: 28px
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 25% 25%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width: 28px;
        height: 28px;
        background: url(https://www.hanwhaocean.com/images/whoweare/ig/facilities/arrow.svg) no-repeat center center/contain
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button .num {
        display: none
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button>span {
        display: none
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup {
        display: block;
        position: relative;
        right: auto;
        top: 0;
        transform: none;
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        border-radius: 0;
        background: transparent
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup.left,
    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup.right {
        right: auto;
        left: auto
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup.on {
        animation: none
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap {
        height: auto;
        padding: 0
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner {
        overflow: visible;
        height: auto
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text {
        padding: 0 16px 0 20px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>strong {
        padding: 14px 0;
        text-align: center
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>strong .num {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        font-size: 10px;
        line-height: 20px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>strong>span {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400;
        color: #151515;
        vertical-align: middle
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>p {
        overflow-y: auto;
        height: 280px;
        margin-top: 16px;
        padding-right: 12px;
        font-size: 14px;
        line-height: 1.72;
        color: #4b4b4b
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>p::-webkit-scrollbar {
        width: 3px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>p::-webkit-scrollbar-thumb {
        background-color: #4b4b4b
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>p::-webkit-scrollbar-track {
        background-color: #e5e5e5
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>p>span {
        display: block
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>p .empty-space {
        padding: 3px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .picture {
        display: none
    }

    .whoweare#WWA-CI .m_btn[type=text][hover=underline] span.txt {
        font-size: 16px !important;
        line-height: 1.5 !important
    }

    .whoweare#WWA-CI .m_btn[type=text][hover=underline] span.icon:after,
    .whoweare#WWA-CI .m_btn[type=text][hover=underline] span.icon:before {
        width: 16px;
        height: 16px;
        left: calc(50% - 8px);
        top: calc(50% - 8px)
    }
}

.whoweare-gn .m_btn[icon=right] span.icon {
    background-image: url(https://www.hanwhaocean.com/images/common/outlink.svg);
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px)
}

#WWA-CI .m_btn[type=text][hover=underline] span.icon {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    margin-left: min(.625vw, 12px);
    margin-right: 0
}

#WWA-CI .m_btn[type=text] span.txt {
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px)
}

#WWA-CI .m_btn[type=text][hover=underline] span.icon:after,
#WWA-CI .m_btn[type=text][hover=underline] span.icon:before {
    background-image: url(https://www.hanwhaocean.com/images/common/icon-download.svg);
    width: min(.6770833333vw, 13px);
    height: min(.625vw, 12px);
    left: calc(50% - min(.3385416667vw, 6.5px));
    top: calc(50% - min(.3125vw, 6px))
}

#WWA-CI .m_btn[type=text][hover=underline] span.icon:before {
    background-image: url(https://www.hanwhaocean.com/images/common/icon-download_w_11x11.svg)
}

.whoweare-gn .sub_container .sec_inner .normal-contents .picture,
#WWA-CI.whoweare .sub_container .sec_inner .column-contents .cont {
    width: 100%
}

#WWA-GN-OVERSEAS.whoweare-gn.en .sub_container .sec_inner .column-contents.sticky.overseas .cont.left {
    width: min(36.9791666667vw, 710px)
}

.whoweare-history.en ol.item-list>li.item .text-wrap .desc {
    font-weight: 400;
    color: #151515
}

.whoweare-ig.facilities.en .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button {
    text-align: left;
    display: flex
}

.whoweare-ig.facilities.en .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong {
    display: flex
}

.whoweare-ig.facilities.en .facilities-contents-inner .text-scroll-list ol.text-scroll>li {
    padding-right: min(.5208333333vw, 10px)
}

.whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p {
    width: 100%
}

@media (min-width: 769px) and (max-width: 1023px) {
    .whoweare-ig.facilities.en .facilities-contents-inner .text-scroll-list ol.text-scroll>li {
        padding-right: 10px
    }

    .whoweare-main .sub_top {
        height: 450px
    }

    .whoweare-main .sub_top .top_tit_area {
        top: 95px
    }

    .whoweare-main .sub_container {
        margin-top: -190px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap {
        padding-top: 126px;
        padding-left: 76px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .title-wrap .title {
        font-size: 45px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap {
        width: 432px;
        height: 142px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p {
        font-size: 15px
    }

    .whoweare-main .sub_container .video-section {
        margin-top: 100px
    }

    .whoweare-main .sub_container .video-section .title {
        font-size: 38px
    }

    .whoweare-main .sub_container .video-section.active .video-wrap {
        margin-top: 38px
    }

    .whoweare-main .sub_container .video-section .desc {
        margin-top: 10px;
        font-size: 10px
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p span {
        padding-right: 20px
    }

    .whoweare-ci .column-contents {
        margin-top: 100px
    }

    .whoweare-ci .column-contents .column-1 .row+.row {
        margin-top: 26px
    }

    .whoweare-ci .column-contents .column-1 .desc {
        font-size: 12px;
        margin-top: 38px;
        margin-bottom: 26px
    }

    .whoweare-ci .column-contents .column-1 .row .lang-flag {
        font-size: 10px;
        top: 15px;
        left: 15px
    }

    #WWA-CI .m_btn[type=text][hover=underline] span.icon:after,
    #WWA-CI .m_btn[type=text][hover=underline] span.icon:before {
        width: 12px;
        height: 12px;
        left: 3px;
        top: 3px
    }

    .whoweare-history .mid-motion .mid-motion-inner {
        padding-top: 252px
    }

    .whoweare-history .mid-motion .year-motion {
        height: 98px
    }

    .whoweare-history .mid-motion .year-motion .elem {
        font-size: 76px
    }

    .whoweare-history .mid-motion .year-motion .elem.hyphen {
        margin: 0 8px
    }

    .whoweare-history ol.item-list {
        padding-top: 100px
    }

    .whoweare-history ol.item-list>li.item .text-wrap .year-title {
        padding-bottom: 10px
    }

    .whoweare-history ol.item-list>li.item .text-wrap .desc {
        margin-top: 15px;
        font-size: 15px
    }

    .whoweare-history .history-navigator {
        padding: 15px 76px
    }

    .whoweare-history .history-navigator ol.navigation {
        gap: 38px
    }

    .whoweare-history .history-navigator ol.navigation>li>a>span {
        font-size: 12px;
        line-height: 20px
    }

    .whoweare-history .mid-motion .img-motion .core-wrap {
        padding-top: 202px
    }

    .whoweare-history .mid-motion .img-motion.active .core-wrap .banner-wrap-his {
        min-height: 542px
    }

    .whoweare .sub_container .sec_inner .column-contents.firstpage {
        padding: 0 2px;
        margin-top: 168px
    }

    .whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .sub {
        margin-top: 26px;
        font-size: 22px
    }

    .whoweare .sub_container .sec_inner .column-contents .text-wrap.h4 .desc {
        margin-top: 38px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky {
        margin-top: 76px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.left {
        top: 76px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table {
        margin-top: 144px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td strong.td_title {
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare .sub_container .sec_inner .normal-contents .text-wrap .desc {
        margin-top: 38px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items {
        gap: 30px;
        margin: 100px 0 0 auto
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li>picture {
        max-width: 114px;
        margin-bottom: 38px
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li div>strong {
        font-size: 20px
    }

    .whoweare .sub_container .sec_inner .normal-contents ul.items>li div>p {
        margin-top: 15px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare .sub_container .sec_inner .normal-contents {
        padding-top: 100px
    }

    .whoweare-gn .sub_container .sec_inner .normal-contents .picture {
        margin-top: 38px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.left .desc {
        margin-top: 38px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right {
        margin-top: 278px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .desc {
        margin-top: 15px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap a.outlink {
        margin-top: 20px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .add-desc {
        margin-top: 12px;
        font-size: 10px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right table {
        margin-top: 50px
    }

    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table th,
    .whoweare .sub_container .sec_inner .column-contents.sticky .cont.right table td {
        padding: 22px 28px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap {
        margin-top: 132px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap h4 {
        font-size: 22px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky {
        margin-top: 100px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.left {
        max-width: 368px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky.overseas .cont.right table {
        margin-top: 12px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap br.pc {
        display: none
    }

    .whoweare-ig .title-wrap {
        margin-top: 76px
    }

    .whoweare-ig .title-wrap>p {
        margin-top: 30px;
        margin-left: 18px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare-ig .scroll-content {
        margin-top: 84px
    }

    .whoweare-ig .follower {
        width: 8px;
        height: 44px
    }

    .whoweare-ig ol.item-list {
        max-width: 876px
    }

    .whoweare-ig ol.item-list>li.item {
        padding-top: 126px;
        padding-left: 50px;
        padding-right: 50px
    }

    .whoweare-ig ol.item-list>li.item .text-wrap .desc {
        margin-top: 26px;
        font-size: 12px;
        line-height: 20px
    }

    .whoweare-ig ol.item-list>li.item .text-wrap .phase {
        font-size: 10px
    }

    .whoweare-ig ol.item-list>li.item .text-wrap {
        max-width: 300px
    }

    .whoweare-ig ol.item-list>li.item .picture {
        max-width: 264px
    }

    .whoweare-ig ol.item-list>li.item:nth-of-type(2n) .picture {
        margin-right: 0
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list {
        padding: 25px 20px
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner::-webkit-scrollbar {
        width: 3px;
        height: 100%
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list .inner::-webkit-scrollbar-track {
        margin: 10px
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li {
        padding: 10px 5px 10px 0;
        font-size: 12px;
        line-height: 20px;
        max-width: 100%
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button {
        display: flex;
        max-width: 100%
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li>button>span {
        font-size: 12px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%
    }

    .whoweare-ig.facilities .facilities-contents-inner .text-scroll-list ol.text-scroll>li .num {
        width: 17px;
        height: 17px;
        margin-right: 7px;
        line-height: 18px;
        font-size: 10px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup {
        max-width: 332px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup.left {
        right: 30%
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap {
        padding: 15px 10px;
        margin-top: -10px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner::-webkit-scrollbar {
        width: 3px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong .num {
        width: 17px;
        height: 17px;
        margin-right: 7px;
        line-height: 18px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong>span {
        font-size: 16px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>p {
        font-size: 12px;
        line-height: 20px;
        margin-top: 15px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>p .empty-space {
        padding: 3px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup-close {
        width: 30px;
        height: 30px
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup-close:before {
        width: 18px;
        height: 18px
    }

    .whoweare-ig.facilities .facilities-contents {
        margin-bottom: -164px;
        margin-top: 100px
    }

    .whoweare .sub_container .banner img {
        bottom: 0
    }

    .whoweare .sub_container .banner-wrap {
        height: 466px;
        margin-top: 126px
    }
}

@media (max-width: 768px) {
    .whoweare-ig.facilities.en .facilities-contents-inner .text-scroll-list ol.text-scroll>li {
        padding-right: 0
    }

    .whoweare-ig.facilities .facilities-contents {
        display: block;
        margin-bottom: 0
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p {
        font-size: 14px !important;
        line-height: 1.72 !important
    }

    .whoweare-main .sub_container .inner .text-wrap .text-wrap-inner .desc-wrap p span {
        padding-right: 20px
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right .text-wrap .add-desc {
        font-size: 16px !important;
        line-height: 1.72 !important
    }

    .whoweare-ig .title-wrap>h4 {
        font-size: 24px !important;
        line-height: 1.52 !important
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table.twin {
        border-top: 2px solid #151515
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table th {
        font-size: 14px !important
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table td {
        font-size: 28px !important
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table.twin th {
        width: 100%;
        box-sizing: border-box;
        max-width: 250px
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin thead th,
    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin thead td {
        vertical-align: middle;
        color: #151515
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table tr.bold td {
        font-weight: 400;
        color: #151515 !important
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table tr.orange th,
    .wwd-mp .sub_container .sec_inner .column-contents .cont table tr.orange td {
        color: #f60 !important
    }

    .wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight {
        padding: 0 15px !important
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin th {
        color: #151515
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin td {
        color: #4b4b4b
    }

    .whoweare-gn .sub_container .sec_inner .column-contents.sticky .cont.right table td {
        vertical-align: top
    }

    .whoweare-gn .sub_container .sec_inner .normal-contents .picture {
        margin-top: 40px
    }

    #WWA-GN-OVERSEAS.whoweare-gn.en .sub_container .sec_inner .column-contents.sticky.overseas .cont.left {
        width: 100%
    }

    .whoweare-ig.facilities.en .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text>strong {
        padding: 14px 20px;
        display: flex;
        text-align: left
    }

    .whoweare-ig.facilities .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong {
        justify-content: center;
        align-items: center
    }

    .whoweare-ig.facilities.en .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap .text-wrap-inner .text {
        background-color: #fff
    }

    .whoweare-ig.facilities.en .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong {
        align-items: flex-start
    }

    .whoweare-ig.facilities.en .facilities-contents-inner .facilities-popup .facilities-popup-inner .text-wrap-inner .text>strong .num {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        font-size: 10px;
        line-height: 20px;
        margin-top: 3px
    }

    .whoweare-gn.en .sub_container .sec_inner .column-contents.sticky .cont.right table td {
        vertical-align: middle
    }
}

.odometer-wrap {
    overflow: hidden;
    position: relative
}

.odometer-wrap .odometer-tobe {
    display: none
}

.odometer-wrap .odometer-newElem {
    position: absolute;
    top: 0;
    transform: translateY(100%)
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default,
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    visibility: hidden
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
    text-align: left;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
    display: block
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
    display: block;
    -webkit-backface-visibility: hidden
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
    display: block;
    -webkit-transform: translateZ(0)
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
    position: absolute
}

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s
}

.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%)
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
    line-height: 1.1em
}

.odometer.odometer-auto-theme .odometer-value,
.odometer.odometer-theme-default .odometer-value {
    text-align: center
}

.odometer .odometer-formatting-mark {
    display: none
}

.sustainability * {
    word-break: break-word
}

.sustainability .sub_container {
    background: transparent;
    overflow: hidden
}

.sustainability .sub_container .sec_inner {
    background: transparent
}

.sustainability .sub_container .sec_inner .normal-contents {
    margin-top: min(8.3333333333vw, 160px);
    margin-bottom: min(9.375vw, 180px)
}

.sustainability .sub_container .sec_inner .normal-contents .desc-wrap {
    max-width: min(42.6041666667vw, 818px)
}

.sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-strong {
    font-size: min(1.875vw, 36px);
    font-weight: 400;
    line-height: 1.52
}

.sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-info {
    display: block;
    margin-top: min(4.0104166667vw, 77px);
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: 1.6
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: min(6.25vw, 120px)
}

html[lang=en] .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title {
    max-width: min(31.25vw, 600px)
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title h4 {
    font-size: min(3.75vw, 72px);
    line-height: 1.32;
    font-weight: 400
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title p {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b;
    margin-top: min(2.0833333333vw, 40px)
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc {
    margin-top: min(4.1666666667vw, 80px);
    margin-left: min(1.5625vw, 30px);
    grid-column: 2;
    grid-row: 2
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc>p {
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.32;
    font-weight: 300;
    color: #4b4b4b
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item {
    margin-top: min(4.1666666667vw, 80px)
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item:first-child {
    margin-top: 0
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item span {
    font-size: min(.7291666667vw, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: #999
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item .m_hanwhaL {
    color: #4b4b4b
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item strong {
    display: block;
    margin-top: min(1.25vw, 24px);
    font-size: min(1.875vw, 36px);
    line-height: 1.72;
    font-weight: 400
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item p {
    margin-top: min(.4166666667vw, 8px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download {
    margin-top: calc(-1*min(4.1666666667vw, 80px))
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .picture {
    display: block;
    max-width: min(18.75vw, 360px);
    margin-bottom: min(3.6458333333vw, 70px)
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .picture img {
    width: 100%
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text {
    display: flex;
    gap: min(.2083333333vw, 4px);
    font-weight: 300
}

.sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .m_btn[type=text] {
    font-weight: 300
}

.sustainability .sub_container .sec_inner .normal-contents .title {
    opacity: 0;
    transform: translateY(30%);
    transition: .5s cubic-bezier(.39, 0, .12, .99)
}

.sustainability .sub_container .sec_inner .normal-contents .title.active {
    opacity: 1;
    transform: translateY(0)
}

.sustainability .sub_container .sec_inner .normal-contents .desc {
    opacity: 0;
    transform: translateY(20%);
    transition: .5s cubic-bezier(.39, 0, .12, .99)
}

.sustainability .sub_container .sec_inner .normal-contents .desc.active {
    opacity: 1;
    transform: translateY(0)
}

.sustainability .sub_container .sec_inner .btns {
    display: flex;
    column-gap: min(1.0416666667vw, 20px);
    margin-top: 60px
}

.sustainability .sub_container .sec_inner .btns a {
    padding: 0 min(1.25vw, 24px)
}

.sustainability .sub_container .sec_inner .btns a .icon {
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_w.svg) no-repeat center center/contain
}

.sustainability .sub_container .mid-banner {
    overflow: hidden;
    position: relative;
    height: 100vh
}

.sustainability .sub_container .mid-banner.right .picture-wrap,
.sustainability .sub_container .mid-banner.left .picture-wrap {
    width: 100vw;
    height: 100vh
}

.sustainability .sub_container .mid-banner.right .inner .picture,
.sustainability .sub_container .mid-banner.left .inner .picture {
    position: absolute;
    float: right;
    right: 0;
    top: 0;
    bottom: 0
}

.sustainability .sub_container .mid-banner.right .inner .picture img,
.sustainability .sub_container .mid-banner.left .inner .picture img {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
}

.sustainability .sub_container .mid-banner.left .inner .picture {
    float: left;
    right: auto;
    left: 0
}

.sustainability .sub_container .mid-banner .inner .picture {
    overflow: hidden;
    display: block;
    width: 50vw;
    height: 50vh;
    transform: translateY(-100%);
    transition: transform 1s cubic-bezier(.39, 0, .12, .99)
}

.sustainability .sub_container .mid-banner .inner .picture.active {
    transform: translateY(0)
}

.sustainability .sub_container .mid-banner .inner .picture img {
    width: 100%;
    height: 100vh;
    object-fit: cover
}

@media (max-width: 1023px) {
    .sustainability .sub_container .sec_inner {
        min-width: auto
    }
}

@media (max-width: 768px) {
    .sustainability .sub_top_tit.m_h2 {
        font-size: 28px !important
    }

    .sustainability .sub_container .m_hanwhaR {
        font-weight: 300 !important
    }

    .sustainability .sub_container .sec_inner {
        padding-left: 20px;
        padding-right: 20px
    }

    .sustainability .sub_container .sec_inner:last-child .normal-contents {
        margin-bottom: 0
    }

    .sustainability .sub_container .sec_inner .normal-contents {
        margin-top: 0;
        margin-bottom: 80px
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap {
        max-width: none
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-strong {
        margin-top: 56px;
        font-size: 20px;
        line-height: 1.56
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-strong .m_hanwhaR {
        font-weight: 300 !important
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-info {
        margin-top: 40px;
        font-size: 16px;
        line-height: 1.72;
        color: #4b4b4b
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap {
        display: block;
        margin-top: 40px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title {
        max-width: none
    }

    html[lang=en] .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title {
        max-width: none
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title h4 {
        font-size: 20px;
        line-height: 1.56;
        font-weight: 400
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title p {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc {
        margin-top: 40px;
        margin-left: 0
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc>p {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc>p .m_hanwhaL {
        font-weight: 300 !important
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item {
        margin-top: 40px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item span {
        font-size: 14px;
        font-weight: 400
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item strong {
        margin-top: 8px;
        font-size: 20px;
        line-height: 1.68;
        font-weight: 400
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item p {
        font-size: 16px;
        margin-top: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download {
        display: flex;
        align-items: center;
        gap: 40px;
        max-width: none;
        margin-top: -20px;
        padding-top: 24px;
        border-top: 1px solid #151515
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .picture {
        max-width: none;
        width: 36%;
        margin-bottom: 0
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text {
        flex-direction: column;
        font-size: 0
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .txt {
        font-size: 14px;
        line-height: 1.72;
        color: #4b4b4b
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download a.m_btn {
        margin-top: 20px;
        display: flex;
        align-items: center
    }

    .sustainability .sub_container .sec_inner .btns {
        margin-top: 40px
    }

    .sustainability .sub_container .sec_inner .btns a {
        padding: 0 20px !important
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    .sustainability .sub_container .sec_inner .btns {
        flex-direction: column;
        row-gap: 12px
    }

    .sustainability .sub_container .sec_inner .btns a {
        padding: 0 20px !important;
        width: fit-content
    }

    .sustainability .sub_container .sec_inner .btns a .icon {
        width: 20px;
        height: 20px;
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_w.svg) no-repeat center center/contain
    }
}

@media (max-width: 768px) {
    .sustainability .sub_container .mid-banner {
        height: auto
    }

    .sustainability .sub_container .mid-banner.right .picture-wrap,
    .sustainability .sub_container .mid-banner.left .picture-wrap {
        height: 48vw
    }

    .sustainability .sub_container .mid-banner .inner .picture {
        width: 50%;
        height: 50%
    }

    .sustainability .sub_container .mid-banner .inner .picture.active {
        animation: sretch100 .8s .4s forwards
    }

    @keyframes sretch100 {
        0% {
            width: 50%;
            height: 50%
        }

        to {
            width: 100%;
            height: 100%
        }
    }

    .sustainability .sub_container .mid-banner .inner .picture img {
        height: auto
    }

    .sustainability#SUSTAINABILITY-OV .m_btn[type=text][hover=underline]>div {
        margin-top: 0
    }

    .sustainability#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] .txt-wrap {
        display: inline;
        background-image: none;
        transition: none
    }

    .sustainability#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] .txt {
        background-image: linear-gradient(#151515, #151515);
        transition: background-size .3s cubic-bezier(.39, 0, .12, .99);
        font-size: 14px !important;
        font-weight: 300
    }

    .sustainability#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:after,
    .sustainability#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:before {
        width: 16px;
        height: 16px;
        left: calc(50% - 8px);
        top: calc(50% - 8px)
    }
}

#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] .txt-wrap {
    display: inline-block;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s cubic-bezier(.39, 0, .12, .99)
}

#SUSTAINABILITY-OV .m_btn[type=text][hover=underline]:hover .txt-wrap {
    background-size: 100% 1px
}

#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.txt {
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    display: inline-block;
    background-image: none;
    transition: none
}

#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon {
    margin-left: min(.625vw, 12px);
    margin-right: 0
}

#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:after,
#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:before {
    background-image: url(https://www.hanwhaocean.com/images/common/icon-download.svg);
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    left: calc(50% - min(.4166666667vw, 8px));
    top: calc(50% - min(.4166666667vw, 8px))
}

#SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:before {
    background-image: url(https://www.hanwhaocean.com/images/common/icon-download_w_11x11.svg)
}

#SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc>p {
    line-height: 1.68
}

#SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .desc-wrap .desc-info .m_btn.outLink .txt {
    color: #151515;
    transition: color .3s cubic-bezier(.39, 0, .12, .99)
}

#SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .desc-wrap .desc-info .m_btn.outLink:hover .txt {
    color: #fff
}

#SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .desc-wrap .desc-info .m_btn.outLink .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/outlink.svg);
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px)
}

#SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .mo_only {
    display: none
}

#SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .m_btn span.txt {
    color: #151515
}

@media (min-width: 769px) and (max-width: 1023px) {
    .sustainability .sub_container .sec_inner .normal-contents {
        margin-top: 100px;
        margin-bottom: 114px
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap {
        max-width: 517px
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-strong {
        font-size: 22px
    }

    .sustainability .sub_container .sec_inner .normal-contents .desc-wrap .desc-info {
        margin-top: 48px;
        font-size: 15px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.title p {
        font-size: 12px;
        line-height: 20px;
        margin-top: 26px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item strong {
        margin-top: 15px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item p {
        margin-top: 5px;
        font-size: 12px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc ol .item {
        margin-top: 50px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc {
        margin-top: 50px;
        margin-left: 18px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc>p {
        font-size: 12px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap {
        margin-top: 76px
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .txt {
        font-size: 12px;
        line-height: 20px
    }

    .sustainability .sub_container .sec_inner .btns {
        column-gap: 12px;
        margin-top: 38px
    }

    .sustainability .sub_container .sec_inner .btns a {
        padding: 0 15px !important
    }

    .sustainability .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .picture {
        max-width: 226px;
        margin-bottom: 44px
    }

    #SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.txt {
        font-size: 12px;
        line-height: 20px
    }

    #SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:after,
    #SUSTAINABILITY-OV .m_btn[type=text][hover=underline] span.icon:before {
        width: 10px;
        height: 10px;
        left: calc(50% - 5px);
        top: calc(50% - 5px)
    }

    .sustainability .sub_container .sec_inner .normal-contents .title p br.pc {
        display: none
    }

    .sustainability .sub_container .sec_inner .normal-contents .title p br.tablet {
        display: block
    }
}

@media (max-width: 768px) {
    html[lang=en] #SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text {
        padding-right: 10px
    }

    html[lang=en] #SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .m_btn .txt {
        display: none
    }

    html[lang=en] #SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .txt.mo_only {
        display: block
    }

    html[lang=en] #SUSTAINABILITY-OV .sub_container .sec_inner .normal-contents .title-wrap>.desc .download .desc-text .mo_only {
        display: block
    }
}

.innovation .innovation-ct .in-con .title {
    max-width: 1920px;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    margin: min(6.25vw, 120px) auto min(4.1666666667vw, 80px)
}

.innovation .innovation-ct .in-con .in-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9
}

.innovation .innovation-ct .in-con .in-box .con-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: min(6.25vw, 120px);
    box-sizing: border-box;
    z-index: 1
}

.innovation .innovation-ct .in-con .in-box .txt-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    z-index: 2
}

.innovation .innovation-ct .in-con .in-box .txt-wrap p {
    position: relative;
    overflow: hidden
}

.innovation .innovation-ct .in-con .in-box .txt-wrap p>span {
    transform: translateY(100%);
    transition: all 1s cubic-bezier(.41, .2, .53, .84);
    position: relative;
    display: inline-block
}

.innovation .innovation-ct .in-con .in-box .txt-wrap .desc {
    margin-left: auto;
    width: min(37.5vw, 720px)
}

.innovation .innovation-ct .in-con .in-box .img-wrap {
    transform: translateY(10%) scale(.8);
    transition: transform .8s cubic-bezier(.41, .2, .53, .84);
    position: relative;
    width: 100%;
    height: 100%
}

.innovation .innovation-ct .in-con .in-box .img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.innovation .innovation-ct .in-con .in-box.on .img-wrap {
    transform: translateY(0) scale(1)
}

.innovation .innovation-ct .in-con .in-box.on .txt-wrap p>span {
    transform: translateY(0)
}

.innovation .innovation-ct .in-con .in-box.on .txt-wrap .tit p>span {
    transition-delay: .3s
}

.innovation .innovation-ct .in-con .in-box.on .txt-wrap .desc p>span {
    transition-delay: .4s
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap {
    position: absolute;
    width: 100%;
    height: min(56.25vw, 1080px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-item {
    position: absolute
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-item .item {
    transition: all .4s cubic-bezier(.41, .2, .53, .84)
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-item .item:hover {
    transform: translateY(-10px)
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-img {
    width: 100%;
    height: 100%
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-tit {
    position: absolute;
    left: min(2.1875vw, 42px);
    bottom: min(2.5vw, 48px);
    color: #fff
}

.innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(1) {
    width: min(18.1770833333vw, 349px);
    top: min(20.625vw, 396px);
    left: min(6.5104166667vw, 125px)
}

.innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(2) {
    width: min(15.3125vw, 294px);
    top: min(3.6458333333vw, 70px);
    right: min(35.7291666667vw, 686px)
}

.innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(3) {
    width: min(18.8541666667vw, 362px);
    top: min(35.4166666667vw, 680px);
    left: min(20.6770833333vw, 397px)
}

.innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(4) {
    width: min(15.8333333333vw, 304px);
    top: min(9.8958333333vw, 190px);
    right: min(19.8958333333vw, 382px)
}

.innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(5) {
    width: min(15.7291666667vw, 302px);
    top: min(18.6979166667vw, 359px);
    right: min(4.1666666667vw, 80px)
}

.innovation .innovation-ct .digital-con .auto-box .ic-line {
    opacity: 0;
    transition: opacity .8s .2s ease-in;
    position: absolute;
    width: min(40.2083333333vw, 772px);
    aspect-ratio: 386/391;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.innovation .innovation-ct .digital-con .auto-box .ic-line>span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}

.innovation .innovation-ct .digital-con .auto-box .ic-line .outline {
    background-image: url(https://www.hanwhaocean.com/images/whatweinnovate/in/digital_01-outLine.png)
}

.innovation .innovation-ct .digital-con .auto-box .ic-line .line {
    background-image: url(https://www.hanwhaocean.com/images/whatweinnovate/in/digital_01-line.png)
}

.innovation .innovation-ct .digital-con .auto-box .ic-line .inline {
    background-image: url(https://www.hanwhaocean.com/images/whatweinnovate/in/digital_01-inLine.png)
}

.innovation .innovation-ct .digital-con .auto-box .ic-line.on {
    opacity: 1
}

.innovation .innovation-ct .digital-con .auto-box .ic-line.active .outline {
    animation: outlineAni 36s linear infinite
}

.innovation .innovation-ct .digital-con .auto-box .ic-line.active .inline {
    animation: inlineAni 20s linear infinite
}

.innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(1) {
    width: min(15.3125vw, 294px);
    top: min(22.4479166667vw, 431px);
    left: min(9.5833333333vw, 184px)
}

.innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(2) {
    width: min(15.3125vw, 294px);
    top: min(9.8958333333vw, 190px);
    left: min(28.59375vw, 549px)
}

.innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(3) {
    width: min(15.8333333333vw, 304px);
    top: min(7.2916666667vw, 140px);
    right: min(25.9375vw, 498px)
}

.innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(4) {
    width: min(15.7291666667vw, 302px);
    top: min(15.8333333333vw, 304px);
    right: min(6.7708333333vw, 130px)
}

#INNOVATION+#FOOTER {
    padding-top: 0
}

@keyframes outlineAni {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes inlineAni {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

@media (max-width: 1023px) {
    .innovation .innovation-ct .in-con .title {
        padding: 0 50px;
        margin: 120px auto 80px
    }

    .innovation .innovation-ct .in-con .in-box .con-inner {
        padding: 50px
    }

    .innovation .innovation-ct .in-con .in-box .txt-wrap .desc {
        width: 41.6666666667%
    }

    .innovation .innovation-ct .in-con .in-box .txt-wrap .desc br.pc {
        display: none
    }

    .innovation .innovation-ct .in-con .in-box .keyword-wrap .key-tit {
        left: 28px;
        bottom: 28px
    }

    .innovation .innovation-ct .in-con .in-box .keyword-wrap .key-tit.m_caption {
        font-size: 9px !important
    }

    .innovation .innovation-ct .in-con.digital-con .in-box {
        height: 676px
    }

    .innovation .innovation-ct .digital-con .in-box .keyword-wrap {
        height: 100%
    }

    .innovation .innovation-ct .digital-con .in-box .img-wrap img {
        object-fit: cover
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(1) {
        width: 228.06px;
        top: 249.48px;
        left: 2.8571428571%
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(2) {
        width: 190.26px;
        top: 44.1px;
        right: 44.5238095238%
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(3) {
        width: 228.06px;
        top: 428.4px;
        left: 25%
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(4) {
        width: 190.26px;
        top: 119.7px;
        right: 23.5714285714%
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(5) {
        width: 190.26px;
        top: 226.17px;
        right: 2.8571428571%
    }

    .innovation .innovation-ct .digital-con .auto-box .ic-line {
        width: 41.6666666667%
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(1) {
        width: 190.26px;
        top: 270.9px;
        left: 2.8571428571%
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(2) {
        width: 190.26px;
        top: 119.7px;
        left: 23.5714285714%
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(3) {
        width: 190.26px;
        top: 88.2px;
        right: 23.5714285714%
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(4) {
        width: 190.26px;
        top: 191.52px;
        right: 2.8571428571%
    }
}

@media (max-width: 768px) {
    .innovation .innovation-ct .in-con .title {
        padding: 0 20px;
        margin: 60px auto 40px
    }

    .innovation .innovation-ct .in-con .in-box {
        aspect-ratio: 375/812
    }

    .innovation .innovation-ct .in-con .in-box .con-inner {
        padding: 100px 20px 80px
    }

    .innovation .innovation-ct .in-con .in-box .txt-wrap .tit {
        font-size: 28px !important;
        line-height: 40.32px !important
    }

    .innovation .innovation-ct .in-con .in-box .txt-wrap .desc {
        width: 100%;
        font-size: 14px !important;
        line-height: 24.08px !important
    }

    .innovation .innovation-ct .in-con .in-box .keyword-wrap .key-tit.m_caption {
        font-size: 14px !important
    }

    .innovation .innovation-ct .in-con.digital-con .in-box {
        height: 100vh
    }

    .innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-tit {
        left: 41px;
        bottom: 39px;
        font-size: 14px !important;
        line-height: 24.08px !important
    }

    .innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-item.col {
        width: 245.06px
    }

    .innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-item.row {
        width: 308px
    }

    .innovation .innovation-ct .digital-con .in-box .keyword-wrap .key-item .item:hover {
        transform: none
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(1) {
        left: 0;
        top: 0
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(2) {
        right: 0;
        top: 0
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(3) {
        left: 0;
        top: 0
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(4) {
        right: 0;
        top: 0
    }

    .innovation .innovation-ct .digital-con .auto-box .keyword-wrap .key-item:nth-child(5) {
        right: auto;
        top: 0
    }

    .innovation .innovation-ct .digital-con .auto-box .ic-line {
        width: 297.49px;
        aspect-ratio: 79/80;
        background: url(https://www.hanwhaocean.com/images/whatweinnovate/in/digital_01-bgLine-mo.png) no-repeat center center/contain
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(1) {
        top: 0;
        left: 0
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(2) {
        top: 0;
        left: auto;
        right: 0
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(3) {
        top: 0;
        left: 0
    }

    .innovation .innovation-ct .digital-con .smart-box .keyword-wrap .key-item:nth-child(4) {
        top: 0;
        right: 0
    }
}

.wwi-rd .sub_container {
    background: transparent
}

.wwi-rd .sub_container .tab-looking-a-wrap.m_only {
    display: none
}

.wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a {
    padding-top: min(8.3333333333vw, 160px)
}

.wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a {
    display: inline-block;
    position: relative;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.6;
    color: #b8b8b8
}

.wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a+a {
    margin-left: min(3.125vw, 60px)
}

.wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a.active {
    font-weight: 700;
    color: #151515
}

.wwi-rd .sub_container .sec_inner {
    background: transparent
}

.wwi-rd .sub_container .sec_inner .column-contents {
    display: flex;
    justify-content: space-between
}

.wwi-rd .sub_container .sec_inner .column-contents .cont {
    width: 48.57%
}

.wwi-rd .sub_container .sec_inner .column-contents.firstpage {
    padding: 0 min(.2604166667vw, 5px);
    margin-top: min(13.9583333333vw, 268px)
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky {
    margin-top: min(6.40625vw, 123px)
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.left {
    position: sticky;
    top: min(6.25vw, 120px);
    height: 100%
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table {
    margin-top: min(11.875vw, 228px);
    border-top: 2px solid #151515
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table tr {
    border-bottom: 1px solid #E5E5E5
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table th {
    padding: min(1.875vw, 36px) min(2.2916666667vw, 44px);
    text-align: left;
    vertical-align: top;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 400
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table td {
    padding: min(1.875vw, 36px) min(2.2916666667vw, 44px);
    color: #4b4b4b;
    text-align: left;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 300
}

.wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table td strong.td_title {
    display: block;
    margin-bottom: min(.4166666667vw, 8px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 700;
    color: #151515;
    line-height: 1.4
}

.wwi-rd .sub_container .sec_inner .column-contents .text-wrap.h4 .strong {
    font-size: min(2.7083333333vw, 52px);
    font-weight: 400;
    line-height: 1.32
}

.wwi-rd .sub_container .sec_inner .column-contents .text-wrap.h4 .sub {
    margin-top: min(2.1875vw, 42px);
    font-size: min(1.875vw, 36px);
    font-weight: 400;
    line-height: 1.52
}

.wwi-rd .sub_container .sec_inner .column-contents .text-wrap.h4 .desc {
    margin-top: min(3.125vw, 60px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.52;
    color: #4b4b4b
}

.wwi-rd .sub_container .sec_inner .normal-contents .text-wrap .desc {
    margin-top: min(3.125vw, 60px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    color: #4b4b4b;
    line-height: 1.68
}

.wwi-rd .sub_container .sec_inner .normal-contents ul.items {
    display: flex;
    justify-content: space-between;
    gap: min(2.5vw, 48px);
    max-width: min(65vw, 1248px);
    margin: min(8.3333333333vw, 160px) 0 0 auto
}

.wwi-rd .sub_container .sec_inner .normal-contents ul.items>li {
    max-width: min(20vw, 384px);
    width: 100%
}

.wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>picture {
    display: block;
    max-width: min(9.375vw, 180px);
    margin-bottom: min(3.125vw, 60px)
}

.wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>picture img {
    width: 100%;
    height: 100%
}

.wwi-rd .sub_container .sec_inner .normal-contents ul.items>li div>strong {
    font-size: min(1.6666666667vw, 32px);
    font-weight: 700;
    line-height: 1.7
}

.wwi-rd .sub_container .sec_inner .normal-contents ul.items>li div>p {
    margin-top: min(1.25vw, 24px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.wwi-rd .title-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: min(6.25vw, 120px)
}

.wwi-rd .title-wrap .strong-wrap>span {
    display: block;
    margin-top: min(3.125vw, 60px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    color: #4b4b4b
}

.wwi-rd .title-wrap .desc-wrap {
    margin-top: calc(-1*min(7.2916666667vw, 140px));
    margin-left: min(1.25vw, 24px);
    grid-column: 2;
    grid-row: 2
}

.wwi-rd .title-wrap .desc-wrap .detail-wrap {
    display: flex;
    gap: min(4.6875vw, 90px);
    margin-bottom: min(3.125vw, 60px)
}

.wwi-rd .title-wrap .desc-wrap .detail-wrap .m_etc {
    display: block;
    margin-bottom: min(.2083333333vw, 4px)
}

.wwi-rd .title-wrap .desc-wrap>p {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: 1.68;
    color: #4b4b4b
}

.wwi-rd .title-wrap .desc-wrap>span {
    display: block;
    margin-top: min(2.0833333333vw, 40px);
    color: #999
}

.wwi-rd .scroll-content {
    position: relative;
    margin-top: min(6.9791666667vw, 134px);
    border-top: 1px solid #E5E5E5
}

.wwi-rd .scroll-content:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    display: inline-block;
    height: 100%;
    width: 1px;
    background-color: #e5e5e5;
    z-index: 1
}

.wwi-rd .follower {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, min(10.4166666667vw, 200px));
    z-index: 2;
    width: min(.6770833333vw, 13px);
    height: min(3.6458333333vw, 70px)
}

.wwi-rd .follower img {
    width: 100%
}

.wwi-rd ol.item-list {
    width: 100%;
    max-width: min(72.5vw, 1392px);
    margin: 0 auto
}

.wwi-rd ol.item-list>li.item {
    padding-top: min(10.4166666667vw, 200px);
    display: flex;
    justify-content: space-between
}

.wwi-rd ol.item-list>li.item:nth-of-type(odd) {
    flex-direction: row-reverse
}

.wwi-rd ol.item-list>li.item:nth-of-type(2n) .picture {
    margin-right: min(5.625vw, 108px)
}

.wwi-rd ol.item-list>li.item .picture {
    max-width: min(21.875vw, 420px);
    width: 100%
}

.wwi-rd ol.item-list>li.item .picture img {
    width: 100%
}

.wwi-rd ol.item-list>li.item .text-wrap {
    max-width: min(31.25vw, 600px)
}

.wwi-rd ol.item-list>li.item .text-wrap .phase {
    display: block;
    font-size: min(.8333333333vw, 16px);
    line-height: 1.5;
    font-weight: 400;
    color: #4b4b4b
}

.wwi-rd ol.item-list>li.item .text-wrap .title {
    margin-top: min(.8333333333vw, 16px);
    font-weight: 400
}

.wwi-rd ol.item-list>li.item .text-wrap .desc {
    margin-top: min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    font-weight: 300;
    color: #4b4b4b
}

.wwi-rd .picture img {
    width: 100%
}

.wwi-rd .rd-contents {
    margin-top: min(8.3333333333vw, 160px);
    display: flex;
    justify-content: center
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn:focus-visible {
    opacity: 1;
    outline: none;
    border: 2px solid blue
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-1] {
    top: 1%;
    left: 21.5%
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-2] {
    top: 8%;
    left: 35%
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-3] {
    top: 32%;
    left: 67.5%
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-4] {
    top: 29%;
    left: 17.5%
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-5] {
    top: 37%;
    left: 20.5%
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-6] {
    top: 44%;
    left: 29%
}

.wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-7] {
    top: 53%;
    left: 33.5%
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .text-scroll-list {
    top: min(4.7916666667vw, 92px);
    bottom: auto
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn:focus-visible {
    opacity: 1;
    outline: none;
    border: 2px solid blue
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-1] {
    top: 72%;
    left: 21.5%
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-2] {
    top: 74%;
    left: 24%
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-3] {
    top: 77%;
    left: 15.5%
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-4] {
    top: 79%;
    left: 17%
}

.wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-5] {
    top: 88%;
    left: 86.5%
}

.wwi-rd .rd-contents-inner {
    position: relative
}

.wwi-rd .rd-contents-inner .picture-background {
    position: relative;
    width: 100%;
    height: 100%
}

.wwi-rd .rd-contents-inner .picture-background .background-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.wwi-rd .rd-contents-inner .picture-background .background-layer.active {
    display: block
}

.wwi-rd .rd-contents-inner .picture-background .background-layer.active img {
    animation: fadeIn .5s forwards
}

.wwi-rd .rd-contents-inner .picture-background .num-btns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.wwi-rd .rd-contents-inner .picture-background .num-btns .btn {
    position: absolute;
    display: inline-block;
    background: #ff0;
    width: 2%;
    height: 4%;
    opacity: 0
}

.wwi-rd .rd-contents-inner .text-scroll-list {
    position: absolute;
    left: min(2.0833333333vw, 40px);
    bottom: min(4.7916666667vw, 92px);
    background: #fff;
    max-height: min(21.4583333333vw, 412px);
    max-width: min(23.9583333333vw, 460px);
    width: 100%;
    padding: min(1.6666666667vw, 32px) min(1.6666666667vw, 32px) min(2.0833333333vw, 40px) min(2.0833333333vw, 40px);
    border-radius: min(1.0416666667vw, 20px);
    box-sizing: border-box
}

.wwi-rd .rd-contents-inner .text-scroll-list:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14.8%;
    background: linear-gradient(180deg, #fff, #fff 50%, #fff 68%, #fff0);
    border-top-left-radius: min(1.0416666667vw, 20px);
    border-top-right-radius: min(1.0416666667vw, 20px)
}

.wwi-rd .rd-contents-inner .text-scroll-list:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16.8%;
    background: linear-gradient(0deg, #fff, #fff 50%, #fff 68%, #fff0);
    border-bottom-left-radius: min(1.0416666667vw, 20px);
    border-bottom-right-radius: min(1.0416666667vw, 20px)
}

.wwi-rd .rd-contents-inner .text-scroll-list .inner {
    height: min(17.7083333333vw, 340px);
    overflow-y: auto
}

.wwi-rd .rd-contents-inner .text-scroll-list .inner::-webkit-scrollbar {
    width: min(.3125vw, 6px);
    cursor: pointer
}

.wwi-rd .rd-contents-inner .text-scroll-list .inner::-webkit-scrollbar-thumb {
    height: 30%;
    background-color: #151515;
    border: 1.1px solid transparent;
    cursor: pointer
}

.wwi-rd .rd-contents-inner .text-scroll-list .inner::-webkit-scrollbar-track {
    background-color: #e5e5e5;
    margin: min(1.25vw, 24px)
}

.wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll .onlyForPopup {
    display: none
}

.wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li {
    padding: min(.8333333333vw, 16px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: 1.68;
    color: #151515
}

.wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li.active .num {
    background: #f60;
    color: #fff;
    animation: fadeIn 1s forwards
}

.wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li .num {
    flex: none;
    display: inline-block;
    width: min(1.5625vw, 30px);
    height: min(1.5625vw, 30px);
    border-radius: 100%;
    background: #f5f5f5;
    margin-right: min(.8333333333vw, 16px);
    vertical-align: middle;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.5625vw, 30px);
    font-weight: 700;
    color: #4b4b4b;
    text-align: center
}

.wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li>button {
    display: flex;
    text-align: left
}

.wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li>button>span {
    display: block;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: 1.68;
    vertical-align: middle
}

.wwi-rd .rd-contents-inner .rd-popup {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: 6.25%;
    transform: translateY(-50%);
    background: #0006;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    max-height: min(34.7916666667vw, 668px);
    height: 83%;
    max-width: min(27.5vw, 528px);
    width: 100%;
    border-radius: min(.625vw, 12px);
    box-sizing: border-box
}

.wwi-rd .rd-contents-inner .rd-popup.on {
    display: block;
    animation: fadeIn .5s forwards
}

.wwi-rd .rd-contents-inner .rd-popup.left {
    right: 44.17%
}

.wwi-rd .rd-contents-inner .rd-popup-close {
    position: absolute;
    top: min(.625vw, 12px);
    right: min(.625vw, 12px);
    background: #151515;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    border-radius: 100%;
    transition: transform .3s;
    font-size: 0
}

.wwi-rd .rd-contents-inner .rd-popup-close:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    background: url(https://www.hanwhaocean.com/images/whoweare/ig/facilities/close.svg) no-repeat center center/contain
}

.wwi-rd .rd-contents-inner .rd-popup-close:hover {
    transform: rotate(90deg)
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner {
    height: 100%
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .picture {
    overflow: hidden;
    display: inline-block;
    height: 46.1%
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap {
    padding: min(2.0833333333vw, 40px) min(.8333333333vw, 16px);
    height: 53.89%;
    box-sizing: border-box
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner {
    overflow-y: scroll;
    height: 100%
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner::-webkit-scrollbar {
    width: 4px;
    cursor: pointer
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner::-webkit-scrollbar-thumb {
    height: 30%;
    background-color: #4b4b4b;
    border: 1.1px solid transparent;
    cursor: pointer
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner::-webkit-scrollbar-track {
    background-color: transparent
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text {
    padding: 0 min(1.0416666667vw, 20px)
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>strong {
    display: flex
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>strong .num {
    flex: none;
    display: inline-block;
    width: min(1.5625vw, 30px);
    height: min(1.5625vw, 30px);
    border-radius: 100%;
    background: #f60;
    margin-right: min(.8333333333vw, 16px);
    vertical-align: middle;
    font-size: min(.8333333333vw, 16px);
    line-height: min(1.5625vw, 30px);
    font-weight: 700;
    color: #fff;
    text-align: center
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>strong>span {
    display: block;
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: 1.4;
    color: #fff
}

.wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>p {
    margin-top: min(1.6666666667vw, 32px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    font-weight: 400;
    color: #b8b8b8
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap.galleryContainer {
    height: 150vh;
    position: relative
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap.galleryContainer .rd-horizon-scroll-sticky {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    align-items: center
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap.galleryContainer .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item {
    grid-template-columns: 1fr 1fr 1fr
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .mo_swiper_wrap {
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul {
    display: flex;
    gap: min(2.5vw, 48px);
    width: max-content;
    will-change: transform
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul:not(.gallery) {
    padding-top: min(10.4166666667vw, 200px)
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(2.5vw, 48px);
    width: auto;
    height: 100%
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item:first-child {
    width: min(48.75vw, 936px);
    display: block
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item:first-child:before {
    content: "";
    background: linear-gradient(0deg, #0000008a 53.75%, #0000 90%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(6.25vw, 120px)
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .pic-inner {
    position: relative;
    width: min(23.125vw, 444px);
    height: min(23.125vw, 444px)
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .pic-inner:before {
    content: "";
    background: linear-gradient(0deg, #0000008a 53.75%, #0000 90%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(6.25vw, 120px)
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .img {
    display: inline-block;
    width: 100%
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .img img {
    width: 100%
}

.wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .name {
    position: absolute;
    bottom: min(1.875vw, 36px);
    left: min(1.875vw, 36px);
    color: #fff
}

@media (max-width: 1023px) {
    .wwi-rd .sub_container .sec_inner {
        min-width: auto
    }
}

@media (max-width: 768px) {
    .wwi-rd .sub_container {
        position: relative
    }

    .wwi-rd .sub_container .tab-looking-a-wrap {
        display: none
    }

    .wwi-rd .sub_container .tab-looking-a-wrap.m_only {
        display: block;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 9;
        transition: top .1s ease-in-out
    }

    .wwi-rd .sub_container .tab-looking-a-wrap.m_only.up {
        transition: top .28s ease-in-out
    }

    .wwi-rd .sub_container .tab-looking-a-wrap.m_only .tab-looking-a {
        padding: 18px 0 18px 20px
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a {
        width: max-content
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a {
        font-size: 16px;
        line-height: 1.72
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a.active:before {
        height: 2px
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a+a {
        margin-left: 40px
    }

    .wwi-rd .sub_container .sec_inner .column-contents {
        display: block
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky {
        margin-top: 80px
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.left {
        position: static
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.left .m_h3 {
        font-size: 24px !important;
        line-height: 1.6 !important;
        font-weight: 400 !important
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.left .m_h3 .m_hanwhaR {
        font-size: 24px !important;
        line-height: 1.6 !important
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right {
        position: static
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table {
        margin-top: 20px
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table th {
        padding: 20px 0;
        width: 35.82%;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.72
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table td {
        padding: 20px 0;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 300
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table td strong.td_title {
        margin-bottom: 4px;
        font-size: 14px;
        line-height: 1.4
    }

    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table td.m_hanwhaL,
    .wwi-rd .sub_container .sec_inner .column-contents.sticky .cont.right table td .m_hanwhaL {
        font-weight: 300 !important
    }

    .wwi-rd .sub_container .sec_inner .column-contents .cont {
        width: 100%
    }

    .wwi-rd .sub_container .sec_inner .column-contents.firstpage {
        padding: 0;
        margin-top: 60px
    }

    .wwi-rd .sub_container .sec_inner .column-contents .text-wrap.h4 .sub {
        margin: 0;
        font-size: 20px;
        line-height: 1.56;
        font-weight: 400
    }

    .wwi-rd .sub_container .sec_inner .column-contents .text-wrap.h4 .desc {
        margin-top: 40px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400;
        word-break: normal
    }

    .wwi-rd .sub_container .sec_inner .normal-contents {
        padding-top: 140px;
        margin-top: -128px
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap {
        display: block;
        margin-top: 0
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .strong-wrap .m_h3 {
        font-size: 24px !important;
        line-height: 1.56
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .strong-wrap>span {
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.72
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap {
        margin-top: 60px;
        margin-left: 0
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap>p {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap>span {
        margin-top: 40px
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap .detail-wrap {
        display: block;
        margin-bottom: 40px
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap .detail-wrap>div .m_etc {
        margin-bottom: 4px
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap .detail-wrap>div .m_h7 {
        font-size: 24px !important
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .title-wrap .desc-wrap .detail-wrap>div+div {
        margin-top: 35px
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .text-wrap .m_h3 {
        font-size: 24px !important;
        line-height: 1.6 !important;
        font-weight: 400 !important
    }

    .wwi-rd .sub_container .sec_inner .normal-contents .text-wrap .desc {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.72
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 56px;
        max-width: none;
        margin: 60px 0 0
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items>li {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        max-width: none
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>picture {
        max-width: none;
        width: 52.4%;
        margin: 0
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>picture img {
        height: auto
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>div {
        font-size: 0;
        width: 90.4%
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>div>strong {
        font-size: 18px;
        line-height: 1.4;
        font-weight: 700
    }

    .wwi-rd .sub_container .sec_inner .normal-contents ul.items>li>div>p {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400;
        margin-top: 12px
    }

    .wwi-rd .scroll-content {
        margin-top: 80px;
        padding: 0 20px 0 56px;
        border-top: none
    }

    .wwi-rd .scroll-content:after {
        transform: none;
        left: 26px
    }

    .wwi-rd ol.item-list {
        max-width: none
    }

    .wwi-rd ol.item-list>li.item {
        padding-top: 0;
        gap: 30px
    }

    .wwi-rd ol.item-list>li.item:nth-child(n+2) {
        margin-top: 80px
    }

    .wwi-rd ol.item-list>li.item:last-child {
        padding-bottom: 80px
    }

    .wwi-rd ol.item-list>li.item:nth-of-type(odd),
    .wwi-rd ol.item-list>li.item:nth-of-type(2n) {
        flex-direction: column-reverse
    }

    .wwi-rd ol.item-list>li.item .picture {
        max-width: none
    }

    .wwi-rd ol.item-list>li.item .text-wrap {
        max-width: none;
        padding-right: 10px
    }

    .wwi-rd ol.item-list>li.item .text-wrap .title {
        margin-top: 8px;
        font-size: 24px !important;
        line-height: 1.6 !important
    }

    .wwi-rd ol.item-list>li.item .text-wrap .phase {
        font-size: 14px;
        line-height: 1.4
    }

    .wwi-rd ol.item-list>li.item .text-wrap .desc {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .wwi-rd .rd-contents {
        display: block;
        margin-top: 40px
    }

    .wwi-rd .rd-contents.rd1 {
        margin-top: 0
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-1] {
        top: 1%;
        left: 6.5%
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-2] {
        top: 8%;
        left: 22%
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-3] {
        top: 32%;
        left: 67.5%
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-4] {
        top: 27%;
        left: 4.5%
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-5] {
        top: 35%;
        left: 8.5%
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-6] {
        top: 44%;
        left: 16%
    }

    .wwi-rd .rd-contents.rd1 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-7] {
        top: 53%;
        left: 25.5%
    }

    .wwi-rd .rd-contents.rd2 .rd-contents-inner .text-scroll-list {
        top: auto
    }

    .wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-1] {
        top: 69%;
        left: 9%
    }

    .wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-2] {
        top: 72%;
        left: 15%
    }

    .wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-3] {
        top: 74%;
        left: 2%
    }

    .wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-4] {
        top: 76%;
        left: 6.5%
    }

    .wwi-rd .rd-contents.rd2 .rd-contents-inner .picture-background .num-btns .btn[data-layer=layer-5] {
        top: 86%;
        left: 92%
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup-close {
        display: none
    }

    .wwi-rd .rd-contents .rd-contents-inner .picture-background {
        height: auto
    }

    .wwi-rd .rd-contents .rd-contents-inner .picture-background .num-btns .btn {
        width: 4%;
        height: 6%;
        font-size: 10px
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list {
        position: relative;
        max-width: none;
        max-height: none;
        height: 28px;
        padding: 0;
        left: auto;
        bottom: auto;
        transform: none;
        background: transparent;
        z-index: 1
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list:after,
    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list:before {
        content: none
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list .inner {
        height: auto;
        overflow: visible
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li {
        position: absolute;
        top: 14px;
        left: auto;
        right: auto;
        padding: 0;
        display: none
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li.prev {
        display: block;
        left: 10px
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li.prev button:before {
        transform: rotate(180deg)
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li.next {
        display: block;
        right: 10px
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li>button {
        width: 28px;
        height: 28px
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li>button:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 25% 25%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width: 28px;
        height: 28px;
        background: url(https://www.hanwhaocean.com/images/whoweare/ig/facilities/arrow.svg) no-repeat center center/contain
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li>button .num {
        display: none
    }

    .wwi-rd .rd-contents .rd-contents-inner .text-scroll-list ol.text-scroll>li>button>span {
        display: none
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup {
        display: block;
        position: relative;
        right: auto;
        top: -28px;
        transform: none;
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        border-radius: 0;
        background: transparent
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup.left,
    .wwi-rd .rd-contents .rd-contents-inner .rd-popup.right {
        right: auto;
        left: auto
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup.on {
        animation: none
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap {
        height: auto;
        padding: 0
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner {
        overflow: visible;
        height: auto
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text {
        padding: 0 16px 0 20px
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>strong {
        padding: 14px 0;
        text-align: center;
        justify-content: center
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>strong .num {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        font-size: 10px;
        line-height: 20px;
        margin-top: 3px
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>strong>span {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400;
        color: #151515;
        vertical-align: middle
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>p {
        overflow-y: auto;
        height: 280px;
        margin-top: 16px;
        padding-right: 12px;
        font-size: 14px;
        line-height: 1.72;
        color: #4b4b4b
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>p::-webkit-scrollbar {
        width: 3px
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>p::-webkit-scrollbar-thumb {
        background-color: #4b4b4b
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>p::-webkit-scrollbar-track {
        background-color: #e5e5e5
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap .text-wrap-inner .text>p>span {
        display: block
    }

    .wwi-rd .rd-contents .rd-contents-inner .rd-popup .rd-popup-inner .picture {
        display: none
    }

    .wwi-rd .horizontal-scroll {
        margin-top: 40px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap.galleryContainer {
        height: auto
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap.galleryContainer .rd-horizon-scroll-sticky {
        position: static;
        height: auto
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap.galleryContainer .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item {
        grid-template-columns: 1fr 1fr
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky {
        position: static
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .mo_swiper_wrap {
        max-width: none;
        width: 100%
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul {
        display: block;
        width: auto
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item {
        position: relative;
        margin-top: 20px;
        gap: 20px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item:first-child {
        width: 100%;
        margin-top: 0
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item:first-child:before {
        content: "";
        background: linear-gradient(0deg, #0000008a 53.75%, #0000 90%);
        width: 100%;
        height: 100px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .pic-inner {
        width: 100%;
        height: 100%
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .pic-inner:before {
        content: "";
        background: linear-gradient(0deg, #0000008a 53.75%, #0000 90%);
        width: 100%;
        height: 100px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .name {
        font-size: 14px;
        bottom: 20px;
        left: 20px
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .wwi-rd .rd-contents {
        margin-top: 100px
    }

    .wwi-rd .rd-contents-inner .text-scroll-list {
        left: 26px;
        bottom: 58px;
        max-height: 260px;
        max-width: 226px;
        padding: 20px 20px 26px 26px;
        border-radius: 12px
    }

    .wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li {
        padding: 10px 0;
        font-size: 12px
    }

    .wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li .num {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        font-size: 10px;
        line-height: 18px
    }

    .wwi-rd .rd-contents-inner .text-scroll-list ol.text-scroll>li>button>span {
        font-size: 12px
    }

    .wwi-rd .rd-contents-inner .rd-popup {
        max-height: 428px;
        max-width: 332px;
        border-radius: 8px
    }

    .wwi-rd .rd-contents-inner .rd-popup-close {
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px
    }

    .wwi-rd .rd-contents-inner .rd-popup-close:before {
        width: 18px;
        height: 18px
    }

    .wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap {
        padding: 26px 10px
    }

    .wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text {
        padding: 0 12px
    }

    .wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>strong .num {
        width: 18px;
        height: 18px;
        border-radius: 100%;
        background: #f60;
        margin-right: 10px;
        vertical-align: middle;
        font-size: 10px;
        line-height: 18px
    }

    .wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>strong>span {
        font-size: 15px
    }

    .wwi-rd .rd-contents-inner .rd-popup .rd-popup-inner .text-wrap-inner .text>p {
        margin-top: 20px;
        font-size: 12px
    }

    .wwi-rd .rd-contents-inner .rd-popup.left {
        right: 31.17%
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a {
        padding-top: 100px
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a {
        font-size: 12px
    }

    .wwi-rd .sub_container .tab-looking-a-wrap .tab-looking-a>a+a {
        margin-left: 38px
    }

    .wwi-rd .title-wrap {
        margin-top: 76px
    }

    .wwi-rd .title-wrap .strong-wrap>span {
        margin-top: 38px;
        font-size: 12px
    }

    .wwi-rd .title-wrap .desc-wrap {
        margin-top: -88px;
        margin-left: 15px
    }

    .wwi-rd .title-wrap .desc-wrap .detail-wrap {
        gap: 56px;
        margin-bottom: 38px
    }

    .wwi-rd .title-wrap .desc-wrap .detail-wrap .m_etc {
        margin-bottom: 2px
    }

    .wwi-rd .title-wrap .desc-wrap>p {
        font-size: 12px
    }

    .wwi-rd .title-wrap .desc-wrap>span {
        margin-top: 26px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul {
        gap: 30px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item:first-child {
        width: calc(50vw - 15px)
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item:first-child:before {
        height: 76px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .name {
        bottom: 22px;
        left: 22px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item {
        gap: 30px;
        width: calc(50% - 15px)
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .pic-inner {
        width: 100%;
        height: 100%
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .pic-inner:before {
        height: 76px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .name {
        bottom: 22px;
        left: 22px;
        padding-right: 22px
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul:not(.gallery) {
        padding-top: 126px;
        width: 100%
    }

    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul.gallery .rd-horizon-scroll-item:not(:first-child) {
        width: calc(75vw - 15px)
    }
}

@media (max-width: 768px) {
    .wwi-rd .horizontal-scroll .rd-horizon-scroll-wrap .rd-horizon-scroll-sticky .rd-horizon-scroll-ul .rd-horizon-scroll-item .name {
        padding-right: 20px
    }
}

body.showroom {
    overflow: hidden
}

@media (min-width: 1025px) and (max-height: 550px) {
    body.showroom #landscape {
        display: flex
    }
}

.showroom-list,
.showroom-list .main-inner {
    padding-top: 0
}

.showroom-list img {
    max-width: 100%
}

.showroom-list .main-inner {
    display: grid;
    height: 100vh;
    overflow: hidden;
    grid-template-columns: 1fr 1fr
}

.showroom-list .main-inner .prd-box {
    position: relative
}

.showroom-list .main-inner .prd-box-pl {
    grid-row: 2/span 2;
    height: 50vh
}

.showroom-list .main-inner .prd-box-cs {
    height: 50vh
}

.showroom-list .main-inner .prd-box-ss {
    grid-row-end: span 2;
    height: 100vh
}

.showroom-list .main-inner .prd-box a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}

.showroom-list .main-inner .prd-box a:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    z-index: 9;
    transition: opacity .35s
}

.showroom-list .main-inner .prd-box a .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.showroom-list .main-inner .prd-box a .end_cut {
    opacity: 0
}

.showroom-list .main-inner .prd-box a .txt_wrap {
    position: absolute;
    left: min(3.125vw, 60px);
    bottom: min(4.1666666667vw, 80px);
    z-index: 9;
    color: #fff
}

.showroom-list .main-inner .prd-box a .txt_wrap .prd_name {
    font-size: min(2.7083333333vw, 52px);
    line-height: 1.32;
    margin-bottom: min(1.0416666667vw, 20px)
}

.showroom-list .main-inner .prd-box a .txt_wrap .view-more {
    height: min(1.7708333333vw, 34px);
    overflow: hidden;
    font-size: min(1.0416666667vw, 20px)
}

.showroom-list .main-inner .prd-box a:hover span.txt {
    opacity: 1
}

@media (max-width: 1200px) {
    .showroom-list .main-inner {
        display: block
    }

    .showroom-list .main-inner .prd-box {
        height: 33.3333333333%
    }

    .showroom-list .main-inner .prd-box a .txt_wrap {
        bottom: 24px;
        left: 20px
    }
}

@media (max-width: 1023px) {
    .showroom-list .main-inner .prd-box a:after {
        display: none
    }

    .showroom-list .main-inner .prd-box a .txt_wrap .prd_name {
        font-size: 32px
    }

    .showroom-list .main-inner .prd-box a .txt_wrap .view-more {
        height: 22px
    }
}

@media (max-width: 768px) {
    .showroom-list .main-inner .prd-box a .txt_wrap {
        bottom: 24px;
        left: 20px
    }

    .showroom-list .main-inner .prd-box a .txt_wrap .prd_name {
        font-size: 28px
    }

    .showroom-list .main-inner .prd-box a .txt_wrap .view-more {
        display: none
    }
}

.showroom-list .active a:not(.hover):after {
    opacity: .55
}

#showroomHd {
    position: fixed;
    top: min(1.5625vw, 30px);
    left: 0;
    right: 0;
    margin: 0 min(2.0833333333vw, 40px);
    z-index: 10;
    color: #fff;
    display: flex;
    justify-content: space-between;
    z-index: 9999
}

#showroomHd .back_btn {
    position: relative;
    width: min(3.3333333333vw, 64px);
    height: min(2.5vw, 48px);
    background-color: #ffffff0d;
    border-radius: min(1.5625vw, 30px);
    font-size: 0;
    overflow: hidden
}

#showroomHd .back_btn:after,
#showroomHd .back_btn:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/back_btn_icon.svg) no-repeat center center/contain;
    transition: all .3s ease-in-out
}

#showroomHd .back_btn:after {
    transform: translate(200%, -50%)
}

#showroomHd .back_btn:hover:before {
    transform: translate(-300%, -50%)
}

#showroomHd .back_btn:hover:after {
    transform: translate(-50%, -50%)
}

#showroomHd nav {
    position: absolute;
    left: min(4.8958333333vw, 94px);
    top: calc(-1*min(.2083333333vw, 4px));
    line-height: 1.6
}

#showroomHd nav .nav_btn {
    position: relative;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.6;
    width: 100%;
    text-align: left;
    padding: min(.8333333333vw, 16px) min(3.3333333333vw, 64px) min(.8333333333vw, 16px) min(1.0416666667vw, 20px);
    z-index: 9
}

#showroomHd nav .nav_btn:after {
    position: absolute;
    content: "";
    top: 50%;
    right: min(1.0416666667vw, 20px);
    margin-top: calc(-1*min(.625vw, 12px));
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/arrow_dropdown.svg) no-repeat center center/contain;
    transform: rotate(0);
    transition: transform .4s ease-in-out
}

@keyframes arrow {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(20%)
    }

    to {
        transform: translateY(0)
    }
}

#showroomHd nav .menu_list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: min(1.0416666667vw, 20px);
    position: relative;
    top: calc(-1*min(3.3854166667vw, 65px));
    transition: height .3s cubic-bezier(.39, .575, .565, 1);
    height: 0;
    overflow: hidden
}

#showroomHd nav .menu_list .active {
    display: none
}

#showroomHd nav .menu_list ul {
    position: relative;
    padding: min(4.1666666667vw, 80px) min(1.0416666667vw, 20px) min(1.3020833333vw, 25px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: min(.4166666667vw, 8px);
    background: #ffffff0d
}

#showroomHd nav .menu_list ul:before {
    position: absolute;
    content: "";
    top: min(3.3854166667vw, 65px);
    left: min(1.0416666667vw, 20px);
    right: min(1.0416666667vw, 20px);
    height: 1px;
    background: #fff;
    opacity: .2
}

#showroomHd nav .menu_list ul li+li {
    margin-top: min(.625vw, 12px)
}

#showroomHd nav .menu_list ul a {
    display: block
}

#showroomHd nav .menu_list ul a span {
    position: relative
}

#showroomHd nav .menu_list ul a span:after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background-color: #fff;
    left: 0;
    bottom: 0;
    transition: width .3s
}

#showroomHd nav .menu_list ul a:hover span:after {
    width: 100%
}

#showroomHd nav.open .menu_list {
    height: min(10.4166666667vw, 200px)
}

#showroomHd nav.open .nav_btn:after {
    transform: rotate(-180deg)
}

@media (hover: hover) and (pointer: fine) {
    #showroomHd nav:not(.open) .nav_btn:hover:after {
        animation: arrow .9s ease-in-out infinite
    }
}

#showroomHd .home_btn {
    height: min(1.71875vw, 33px);
    color: #fff
}

#showroomHd .home_btn .icon {
    border-color: #b8b8b880;
    margin-right: 0 !important
}

@media (max-width: 1023px) {
    #showroomHd {
        top: 23px;
        margin: 0 20px
    }

    #showroomHd nav {
        left: 58px;
        top: -5px
    }

    #showroomHd nav .nav_btn {
        font-size: 16px;
        padding: 12px 45px 12px 12px
    }

    #showroomHd nav .nav_btn:after {
        width: 20px;
        height: 20px;
        right: 15px;
        margin-top: -11px
    }

    #showroomHd nav .menu_list {
        font-size: 16px;
        top: -50px
    }

    #showroomHd nav .menu_list ul {
        padding: 56px 12px 12px;
        border-radius: 8px
    }

    #showroomHd nav .menu_list ul:before {
        top: 48px;
        left: 10px;
        right: 10px
    }

    #showroomHd nav .menu_list ul li+li {
        margin-top: 8px
    }

    #showroomHd nav.open .menu_list {
        height: 138px
    }

    #showroomHd .back_btn {
        width: 48px;
        height: 36px;
        border-radius: 30px
    }

    #showroomHd .back_btn:after,
    #showroomHd .back_btn:before {
        width: 20px;
        height: 20px
    }

    #showroomHd .home_btn {
        height: 32px;
        touch-action: none
    }

    #showroomHd .home_btn .txt {
        font-size: 16px !important
    }

    #showroomHd .home_btn .icon {
        width: 32px !important;
        height: 32px !important;
        margin-left: 12px !important
    }
}

@media (max-width: 768px) {
    #showroomHd {
        touch-action: none
    }

    #showroomHd .home_btn {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translate(-50%)
    }
}

#sideBar {
    position: fixed;
    right: min(3.125vw, 60px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    padding-right: min(2.8645833333vw, 55px)
}

#sideBar .point {
    position: relative;
    display: block;
    color: #fff;
    font-weight: 400;
    font-size: min(.8333333333vw, 16px);
    opacity: .5;
    line-height: 1.5;
    margin-left: auto;
    padding: min(.78125vw, 15px) min(1.6145833333vw, 31px) min(.78125vw, 15px) min(.78125vw, 15px);
    text-align: right;
    transition: opacity .3s;
    -webkit-tap-highlight-color: transparent
}

#sideBar .point+.point {
    margin-top: min(2.2916666667vw, 44px)
}

#sideBar .point.active {
    opacity: 1
}

#sideBar .point:after {
    position: absolute;
    content: "0" attr(data-id);
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

#sideBar .point .num {
    display: inline-block;
    margin-left: min(.625vw, 12px)
}

@media (hover: hover) and (pointer: fine) {
    #sideBar .point:hover {
        opacity: 1
    }
}

#sideBar .current_arrow {
    position: absolute;
    right: min(1.25vw, 24px);
    top: 0;
    width: min(.3125vw, 6px);
    height: min(.625vw, 12px);
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/current_arrow.svg) no-repeat center center/contain;
    opacity: 0;
    transition: opacity .5s;
    margin-top: min(.2604166667vw, 5px)
}

#sideBar.active .current_arrow {
    opacity: 1;
    transition: opacity .2s
}

#sideBar .progress {
    position: absolute;
    right: -1px;
    top: min(.5729166667vw, 11px);
    height: 95%;
    width: min(.625vw, 12px)
}

#sideBar .progress img {
    max-width: 100%
}

#sideBar .progress:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/progress_default.webp) no-repeat top right/100% 100%
}

#sideBar .progress .active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 100% 0);
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/progress_active.webp) no-repeat center/100% 100%
}

@media (max-width: 1023px) {
    #sideBar .point {
        font-size: 14px;
        padding: 10px 25px 10px 10px
    }

    #sideBar .point+.point {
        margin-top: 30px
    }
}

@media (max-width: 768px) {
    #sideBar {
        display: flex;
        left: 23px;
        right: 23px;
        bottom: 110px;
        top: auto;
        transform: none;
        padding-right: 0
    }

    #sideBar .point {
        font-size: 0;
        width: 100%;
        z-index: 9;
        padding: 0
    }

    #sideBar .point+.point {
        margin-top: 0
    }

    #sideBar .point:after {
        top: -40px;
        font-size: 14px;
        right: -23px;
        height: 65px;
        line-height: 100px;
        padding: 0 15px;
        transform: none
    }

    #sideBar>.point:first-child {
        width: 0
    }

    #sideBar .current_arrow {
        right: auto;
        left: 0;
        width: 6px;
        height: 12px;
        transform: rotate(-90deg);
        margin-top: -12px
    }

    #sideBar .progress {
        height: 12px;
        left: 0;
        right: 0;
        width: 100%;
        top: -28px;
        z-index: 1
    }

    #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/progress_default_mo.png) no-repeat center/100% 100%
    }

    #sideBar .progress .active {
        clip-path: inset(0 100% 0 0);
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/progress_active_mo.png) no-repeat center/100% 100%
    }
}

#showroomGuide {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #00000073;
    touch-action: none
}

#showroomGuide>div {
    display: none
}

#showroomGuide.load>div {
    display: block
}

#showroomGuide .guide_step.remove {
    opacity: 0
}

#showroomGuide .step_ani {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center
}

#showroomGuide .step_ani .circle {
    position: relative;
    width: min(5.2083333333vw, 100px);
    height: min(5.2083333333vw, 100px);
    margin: 0 auto
}

#showroomGuide .step_ani .circle:after {
    position: absolute;
    content: "";
    width: min(15.5208333333vw, 298px);
    height: min(10.4166666667vw, 200px);
    top: 50%;
    left: 50%;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/3dv_circle_border.webp) no-repeat center center/contain;
    transition: transform .8s, opacity .4s;
    transform: translate(-50%, -50%) scale(.6);
    opacity: 0
}

#showroomGuide .step_ani .circle .lottie {
    width: min(5.2083333333vw, 100px);
    height: min(5.2083333333vw, 100px);
    transform: scale(.6);
    opacity: 0;
    transition: transform .8s .1s, opacity .4s .1s
}

#showroomGuide .step_ani .desc {
    font-weight: 300;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    margin-top: min(4.6875vw, 90px);
    opacity: 0;
    transform: translateY(50%);
    transition: opacity .4s, transform 1.2s
}

#showroomGuide .step_ani.active .circle:after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
}

#showroomGuide .step_ani.active .circle .lottie {
    transform: scale(1);
    opacity: 1
}

#showroomGuide .step_ani.active .desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s
}

@media (max-width: 1023px) {
    #showroomGuide .step_ani .circle {
        width: 100px;
        height: 100px
    }

    #showroomGuide .step_ani .circle:after {
        max-width: 298px;
        max-height: 200px;
        width: 100vw;
        height: 100vw
    }

    #showroomGuide .step_ani .circle .lottie {
        width: 100px;
        height: 100px
    }

    #showroomGuide .step_ani .desc {
        font-size: 16px;
        margin-top: 90px
    }
}

@media (max-width: 768px) {
    #showroomGuide .step_ani {
        margin-top: -10%
    }
}

#showroomGuide .step_detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#showroomGuide .step_detail .txt_box {
    position: absolute;
    font-size: min(.7291666667vw, 14px);
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: min(.3125vw, 6px);
    text-align: center;
    background-color: #ffffff1a;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: min(.8333333333vw, 16px) min(1.25vw, 24px);
    opacity: 0;
    visibility: hidden
}

#showroomGuide .step_detail .txt_box:before {
    position: absolute;
    content: "";
    border: 1px dashed #fff;
    box-sizing: border-box;
    opacity: .8
}

#showroomGuide .step_detail .txt_box:after {
    position: absolute;
    content: "";
    width: min(.3125vw, 6px);
    height: min(.3125vw, 6px);
    background-color: #fff;
    border-radius: 50%
}

#showroomGuide .step_detail .txt_box_01 {
    top: min(7.8645833333vw, 151px);
    left: min(1.1458333333vw, 22px)
}

#showroomGuide .step_detail .txt_box_01:before {
    width: 1px;
    height: min(2.0833333333vw, 40px);
    top: calc(-1*min(2.34375vw, 45px));
    left: min(2.6041666667vw, 50px)
}

#showroomGuide .step_detail .txt_box_01:after {
    top: calc(-1*min(2.7083333333vw, 52px));
    left: min(2.5vw, 48px)
}

#showroomGuide .step_detail .txt_box_02 {
    top: min(7.8645833333vw, 151px);
    left: min(8.3333333333vw, 160px)
}

#showroomGuide .step_detail .txt_box_02:before {
    width: 1px;
    height: min(2.0833333333vw, 40px);
    top: calc(-1*min(2.34375vw, 45px));
    left: min(3.6458333333vw, 70px)
}

#showroomGuide .step_detail .txt_box_02:after {
    top: calc(-1*min(2.7083333333vw, 52px));
    left: min(3.5416666667vw, 68px)
}

#showroomGuide .step_detail .txt_box_03 {
    top: 50%;
    right: min(22.3958333333vw, 430px);
    margin-top: -5.5%
}

#showroomGuide .step_detail .txt_box_03:before {
    width: min(4.1666666667vw, 80px);
    height: 1px;
    top: 50%;
    right: calc(-1*min(4.21875vw, 81px))
}

#showroomGuide .step_detail .txt_box_03:after {
    top: 50%;
    right: calc(-1*min(4.6875vw, 90px));
    margin-top: calc(-1*min(.1041666667vw, 2px))
}

#showroomGuide .step_detail .close_wrap {
    position: absolute;
    bottom: min(3.125vw, 60px);
    right: min(3.125vw, 60px);
    font-size: min(.8333333333vw, 16px);
    line-height: 1.26;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden
}

#showroomGuide .step_detail .close_wrap .time_con {
    background-color: #000;
    border-radius: min(1.5625vw, 30px);
    padding: min(.3125vw, 6px) min(.625vw, 12px) min(.2604166667vw, 5px);
    margin-right: min(.8333333333vw, 16px)
}

#showroomGuide .step_detail .close_wrap .time_con .time {
    position: relative;
    width: min(.5208333333vw, 10px);
    padding-left: min(1.0416666667vw, 20px)
}

#showroomGuide .step_detail .close_wrap .time_con .time:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/guide_time_icon.svg) no-repeat center center/contain
}

#showroomGuide .step_detail .close_wrap .today_close {
    position: relative;
    margin-right: min(1.71875vw, 33px)
}

#showroomGuide .step_detail .close_wrap .today_close:after {
    position: absolute;
    content: "";
    top: -1px;
    right: calc(-1*min(.8854166667vw, 17px));
    width: 1px;
    height: min(.8333333333vw, 16px);
    background: #fff;
    opacity: .5
}

#showroomGuide .step_detail .close_wrap .today_close:before {
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff
}

#showroomGuide .step_detail .close_wrap .close {
    padding-right: min(1.6666666667vw, 32px);
    height: min(1.25vw, 24px);
    position: relative
}

#showroomGuide .step_detail .close_wrap .close:after {
    position: absolute;
    content: "";
    top: min(.0520833333vw, 1px);
    right: 0;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/guide_close_icon.svg) no-repeat center center/contain;
    transform: rotate(0);
    transition: transform .4s
}

#showroomGuide .step_detail .close_wrap .close:hover:after {
    transform: rotate(180deg)
}

@media (max-width: 1023px) {
    #showroomGuide .step_detail .txt_box {
        font-size: 14px;
        padding: 10px 13px;
        border-radius: 6px
    }

    #showroomGuide .step_detail .txt_box:after {
        width: 7px;
        height: 7px
    }

    #showroomGuide .step_detail .txt_box_01 {
        top: 100px;
        left: 20px
    }

    #showroomGuide .step_detail .txt_box_01:before {
        left: 20px;
        top: -26px;
        height: 25px
    }

    #showroomGuide .step_detail .txt_box_01:after {
        top: -34px;
        left: 17px
    }

    #showroomGuide .step_detail .txt_box_02 {
        top: 100px;
        left: 135px;
        text-align: left
    }

    #showroomGuide .step_detail .txt_box_02:before {
        left: 20px;
        top: -26px;
        height: 25px
    }

    #showroomGuide .step_detail .txt_box_02:after {
        top: -34px;
        left: 18px
    }

    #showroomGuide .step_detail .txt_box_03 {
        right: 280px
    }

    #showroomGuide .step_detail .txt_box_03:before {
        width: 40px;
        right: -41px
    }

    #showroomGuide .step_detail .txt_box_03:after {
        right: -50px;
        margin-top: -3px
    }

    #showroomGuide .step_detail .close_wrap {
        font-size: 14px;
        bottom: 20px;
        right: 20px
    }

    #showroomGuide .step_detail .close_wrap .time_con {
        border-radius: 30px;
        padding: 6px 10px 5px;
        margin-right: 8px
    }

    #showroomGuide .step_detail .close_wrap .time_con .time {
        width: 10px;
        padding-left: 20px
    }

    #showroomGuide .step_detail .close_wrap .time_con .time:after {
        width: 16px;
        height: 16px;
        top: -1px
    }

    #showroomGuide .step_detail .close_wrap .today_close {
        margin-right: 25px
    }

    #showroomGuide .step_detail .close_wrap .today_close:after {
        right: -13px;
        width: 1px;
        height: 16px
    }

    #showroomGuide .step_detail .close_wrap .close {
        padding-right: 32px;
        height: 24px
    }

    #showroomGuide .step_detail .close_wrap .close:after {
        top: 1px;
        right: 0;
        width: 24px;
        height: 24px
    }
}

@media (max-width: 768px) {
    #showroomGuide .step_detail .txt_box_03 {
        right: auto;
        left: 50%;
        top: auto;
        margin-top: 0;
        bottom: 185px;
        transform: translate(-50%);
        max-width: 213px;
        width: 100%
    }

    #showroomGuide .step_detail .txt_box_03:before {
        right: auto;
        transform: rotate(90deg);
        top: auto;
        left: 50%;
        bottom: -23px;
        margin-left: -20px
    }

    #showroomGuide .step_detail .txt_box_03:after {
        right: auto;
        margin-top: 0;
        left: 50%;
        margin-left: -3px;
        bottom: -49px;
        top: auto
    }

    #showroomGuide .step_detail .close_wrap {
        left: 0;
        right: 0;
        justify-content: center;
        bottom: 68px
    }
}

#WWD-3dvs[data-showroom] {
    touch-action: none
}

#WWD-3dvs[data-showroom],
#WWD-3dvs[data-showroom] .main-inner {
    padding-top: 0
}

#WWD-3dvs[data-showroom].active.enter #modelPoint button.point {
    visibility: visible;
    opacity: 1
}

#WWD-3dvs[data-showroom].active.enter #modelPoint button.point:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    transition-duration: .1s
}

#WWD-3dvs[data-showroom] #controlWrap,
#WWD-3dvs[data-showroom] #modelCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    overflow: hidden
}

#WWD-3dvs[data-showroom] #modelCon:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    height: 100%;
    width: 30%;
    background: linear-gradient(to right, #0000, #000);
    opacity: .25
}

#WWD-3dvs[data-showroom] #modelPoint button.point {
    position: absolute;
    left: 0;
    top: 0;
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    font-family: inherit;
    margin: calc(-1*min(.78125vw, 15px)) 0 0 calc(-1*min(.78125vw, 15px));
    border: none;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity ease-out, visibility;
    color: #000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s
}

#WWD-3dvs[data-showroom] #modelPoint button.point:before {
    position: absolute;
    content: "";
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    background: #f60;
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: scale(1);
    transition: transform .3s
}

#WWD-3dvs[data-showroom] #modelPoint button.point:hover:before {
    transform: scale(1.4)
}

#WWD-3dvs[data-showroom] #modelPoint button.point:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background-color: #f60;
    opacity: .3;
    border-radius: 50%;
    width: min(2.2916666667vw, 44px);
    height: min(2.2916666667vw, 44px);
    margin: calc(-1*min(.625vw, 12px)) 0 0 calc(-1*min(.625vw, 12px));
    animation: pointSpread 1.5s infinite
}

@keyframes pointSpread {
    0% {
        transform: scale(0);
        opacity: .3
    }

    90% {
        transform: scale(1);
        opacity: .3
    }

    to {
        opacity: 0
    }
}

#WWD-3dvs[data-showroom] .model-size {
    position: fixed;
    width: 90vw;
    max-width: 1500px;
    opacity: 0;
    visibility: hidden;
    z-index: -99
}

#WWD-3dvs[data-showroom] .point-modal {
    position: absolute;
    background-color: #0006;
    top: 50%;
    left: 5%;
    color: #fff;
    height: auto;
    border-radius: min(.5208333333vw, 10px);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(.5);
    z-index: 999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: min(33.8541666667vw, 650px);
    margin-top: calc(-1*min(17.1875vw, 330px))
}

#WWD-3dvs[data-showroom] .point-modal[data-type=rt] {
    left: auto;
    right: 17%
}

#WWD-3dvs[data-showroom] .point-modal .img-con {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 56.4%
}

#WWD-3dvs[data-showroom] .point-modal .img-con .video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#WWD-3dvs[data-showroom] .point-modal .img-con .video-wrap:after {
    position: absolute;
    content: "";
    width: min(5.2083333333vw, 100px);
    height: min(5.2083333333vw, 100px);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/showroom_video_play.svg) no-repeat center center/contain
}

#WWD-3dvs[data-showroom] .point-modal .img-con .video-wrap.active:after {
    opacity: 1
}

#WWD-3dvs[data-showroom] .point-modal .img-con iframe,
#WWD-3dvs[data-showroom] .point-modal .img-con img,
#WWD-3dvs[data-showroom] .point-modal .img-con video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#WWD-3dvs[data-showroom] .point-modal .img-con .source {
    position: absolute;
    bottom: min(.8333333333vw, 16px);
    right: min(1.25vw, 24px);
    font-size: min(.7291666667vw, 14px);
    line-height: 1;
    z-index: 9;
    pointer-events: none
}

#WWD-3dvs[data-showroom] .point-modal .img-con video {
    cursor: pointer
}

#WWD-3dvs[data-showroom] .point-modal .img-con .zoom {
    position: absolute;
    bottom: min(.625vw, 12px);
    left: min(.625vw, 12px);
    background-color: #15151566;
    border-radius: 2px;
    transition: transform .2s;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px)
}

#WWD-3dvs[data-showroom] .point-modal .img-con .zoom:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/zoom_icon.svg) no-repeat center center/contain
}

@media (hover: hover) and (pointer: fine) {
    #WWD-3dvs[data-showroom] .point-modal .img-con .zoom:hover {
        transform: scale(1.15)
    }
}

#WWD-3dvs[data-showroom] .point-modal .txt-con {
    word-break: keep-all;
    padding: min(2.6041666667vw, 50px) min(1.3020833333vw, 25px) min(3.125vw, 60px) min(2.34375vw, 45px)
}

#WWD-3dvs[data-showroom] .point-modal .txt-con .inner {
    overflow-y: scroll;
    padding-right: min(.8333333333vw, 16px);
    max-height: min(12.5vw, 240px)
}

#WWD-3dvs[data-showroom] .point-modal .txt-con .inner::-webkit-scrollbar {
    background-color: transparent;
    width: min(.2083333333vw, 4px)
}

#WWD-3dvs[data-showroom] .point-modal .txt-con .inner::-webkit-scrollbar-thumb {
    background-color: #4b4b4b
}

#WWD-3dvs[data-showroom] .point-modal .txt-con h3 {
    line-height: 1.4;
    font-size: min(1.875vw, 36px)
}

#WWD-3dvs[data-showroom] .point-modal .txt-con p {
    margin-top: min(1.0416666667vw, 20px);
    line-height: 1.68;
    color: #b8b8b8;
    font-size: min(1.0416666667vw, 20px)
}

#WWD-3dvs[data-showroom] .point-modal .reset {
    position: absolute;
    right: min(.625vw, 12px);
    top: min(.625vw, 12px);
    z-index: 99;
    border-radius: 50%;
    font-size: 0;
    transform: rotate(0);
    transition: transform .4s;
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    background: #15151566 url(https://www.hanwhaocean.com/images/whatwedo/3dvs/popup_close_icon.svg) no-repeat center center/min(1.0416666667vw, 20px)
}

@media (hover: hover) and (pointer: fine) {
    #WWD-3dvs[data-showroom] .point-modal .reset:hover {
        transform: rotate(180deg)
    }
}

#WWD-3dvs[data-showroom] .zoom-con {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

#WWD-3dvs[data-showroom] .zoom-con .content {
    width: 1068px;
    height: 602px;
    position: relative;
    z-index: 9;
    border-radius: min(1.0416666667vw, 20px);
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s
}

#WWD-3dvs[data-showroom] .zoom-con .content img {
    width: 100%
}

#WWD-3dvs[data-showroom] .zoom-con .content .video-wrap,
#WWD-3dvs[data-showroom] .zoom-con .content .video-wrap video {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover
}

#WWD-3dvs[data-showroom] .zoom-con .content .video-wrap .source {
    position: absolute;
    bottom: min(1.25vw, 24px);
    right: min(1.25vw, 24px);
    font-size: min(.7291666667vw, 14px);
    line-height: 1;
    z-index: 9;
    color: #fff;
    pointer-events: none
}

#WWD-3dvs[data-showroom] .zoom-con .content .video-wrap:after {
    position: absolute;
    content: "";
    width: min(3.6458333333vw, 70px);
    height: min(3.6458333333vw, 70px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: opacity .3s;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dvs/showroom_video_play.svg) no-repeat center center/contain;
    opacity: 0;
    pointer-events: none
}

#WWD-3dvs[data-showroom] .zoom-con .content .video-wrap.active:after {
    opacity: 1
}

#WWD-3dvs[data-showroom] .zoom-con .content .close {
    position: absolute;
    right: min(1.0416666667vw, 20px);
    top: min(1.0416666667vw, 20px);
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    z-index: 99;
    border-radius: 50%;
    background: #15151566 url(https://www.hanwhaocean.com/images/whatwedo/3dvs/popup_close_icon.svg) no-repeat center center/min(.78125vw, 15px);
    font-size: 0;
    transform: rotate(0);
    transition: transform .4s
}

@media (hover: hover) and (pointer: fine) {
    #WWD-3dvs[data-showroom] .zoom-con .content .close:hover {
        transform: rotate(180deg)
    }
}

#WWD-3dvs[data-showroom] .zoom-con .dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: #15151599;
    opacity: 0;
    transition: opacity .3s
}

#WWD-3dvs[data-showroom] .zoom-con.active .content,
#WWD-3dvs[data-showroom] .zoom-con.active .dim {
    opacity: 1
}

#WWD-3dvs[data-showroom] .prd-info {
    position: absolute;
    bottom: min(4.8958333333vw, 94px);
    color: #fff;
    left: min(6.25vw, 120px);
    z-index: 9;
    pointer-events: none
}

#WWD-3dvs[data-showroom] .prd-info .tit {
    font-size: min(2.7083333333vw, 52px);
    line-height: 1.28
}

#WWD-3dvs[data-showroom] .prd-info .desc {
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.6;
    margin-top: min(2.0833333333vw, 40px)
}

#WWD-3dvs[data-showroom][data-showroom=ns] .model-size {
    height: 20vw;
    max-height: 340px
}

#WWD-3dvs[data-showroom][data-showroom=cv] .model-size {
    height: 12vw;
    max-height: 240px
}

#WWD-3dvs[data-showroom][data-showroom=ob] .model-size {
    height: 37vw;
    max-height: 700px
}

#WWD-3dvs[data-showroom] #sideBar {
    height: min(18.0208333333vw, 346px);
    white-space: pre
}

#WWD-3dvs[data-showroom] #sideBar .point-wrap {
    display: flex;
    min-height: min(3.5416666667vw, 68px);
    position: absolute;
    right: min(2.34375vw, 45px);
    align-items: center
}

#WWD-3dvs[data-showroom] #sideBar .point-01 {
    top: calc(-1*min(1.0416666667vw, 20px))
}

#WWD-3dvs[data-showroom] #sideBar .point-02 {
    top: min(2.34375vw, 45px)
}

#WWD-3dvs[data-showroom] #sideBar .point-03 {
    top: min(5.625vw, 108px)
}

#WWD-3dvs[data-showroom] #sideBar .point-04 {
    top: min(9.1145833333vw, 175px)
}

#WWD-3dvs[data-showroom] #sideBar .point-05 {
    top: min(12.5vw, 240px)
}

#WWD-3dvs[data-showroom] #sideBar .point-06 {
    top: min(15.8854166667vw, 305px)
}

@media (max-width: 1200px) {
    #WWD-3dvs[data-showroom] .zoom-con .content {
        width: 94%;
        height: 0;
        padding-top: 53%
    }

    #WWD-3dvs[data-showroom] .zoom-con .content img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%
    }
}

@media (max-width: 1023px) {
    #WWD-3dvs[data-showroom] #sideBar {
        height: 300px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-wrap {
        min-height: 45px;
        right: 32px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-01 {
        top: -15px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-02 {
        top: 40px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-03 {
        top: 96px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-04 {
        top: 155px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-05 {
        top: 210px
    }

    #WWD-3dvs[data-showroom] #sideBar .point-06 {
        top: 265px
    }

    #WWD-3dvs[data-showroom] #sideBar .current_arrow {
        width: 4px;
        height: 8px
    }

    #WWD-3dvs[data-showroom] .point-modal {
        margin-top: -197px;
        width: 310px;
        left: 8%;
        border-radius: 10px
    }

    #WWD-3dvs[data-showroom] .point-modal .txt-con {
        padding: 32px 14px 32px 24px
    }

    #WWD-3dvs[data-showroom] .point-modal .txt-con .inner {
        max-height: 165px;
        padding-right: 10px
    }

    #WWD-3dvs[data-showroom] .point-modal .txt-con .inner::-webkit-scrollbar {
        width: 4px
    }

    #WWD-3dvs[data-showroom] .point-modal .txt-con h3 {
        font-size: 20px
    }

    #WWD-3dvs[data-showroom] .point-modal .txt-con p {
        font-size: 14px;
        margin-top: 12px;
        line-height: 1.72
    }

    #WWD-3dvs[data-showroom] .point-modal .img-con .video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    #WWD-3dvs[data-showroom] .point-modal .img-con .video-wrap:after {
        width: 42px;
        height: 42px
    }

    #WWD-3dvs[data-showroom] .point-modal .img-con .source {
        bottom: 10px;
        right: 15px;
        font-size: 12px
    }

    #WWD-3dvs[data-showroom] .point-modal .img-con .zoom {
        width: 23px;
        height: 23px;
        bottom: 10px;
        left: 10px
    }

    #WWD-3dvs[data-showroom] .point-modal .reset {
        right: 12px;
        top: 12px;
        width: 28px;
        height: 28px;
        background: #15151566 url(https://www.hanwhaocean.com/images/whatwedo/3dvs/popup_close_icon.svg) no-repeat center center/11px
    }

    #WWD-3dvs[data-showroom] .prd-info .tit {
        font-size: 33px
    }

    #WWD-3dvs[data-showroom] .prd-info .desc {
        font-size: 18px;
        margin-top: 30px
    }

    #WWD-3dvs[data-showroom] .zoom-con .content {
        border-radius: 15px
    }

    #WWD-3dvs[data-showroom] .zoom-con .content .close {
        width: 35px;
        height: 35px;
        background-size: 13px;
        top: 15px;
        right: 15px
    }

    #WWD-3dvs[data-showroom] .zoom-con .content .video-wrap .source {
        font-size: 10px;
        bottom: 15px;
        right: 15px
    }

    #WWD-3dvs[data-showroom] .zoom-con .content .video-wrap:after {
        width: 45px;
        height: 45px
    }
}

@media (max-width: 768px) {
    #WWD-3dvs[data-showroom] .txt_ef_up span {
        transform: translateY(100%)
    }

    #WWD-3dvs[data-showroom] .txt_ef_op {
        opacity: 0;
        transform: translateY(30%)
    }

    #WWD-3dvs[data-showroom] #sideBar {
        height: auto
    }

    #WWD-3dvs[data-showroom] #sideBar .point-wrap {
        min-height: auto;
        width: 100%;
        top: auto !important;
        right: auto;
        position: relative
    }

    #WWD-3dvs[data-showroom] #sideBar .point-wrap:first-child {
        width: 0
    }

    #WWD-3dvs[data-showroom] #modelPoint button.point {
        width: 2.1vw;
        height: 2.1vw;
        margin: calc(-1*min(1.0416666667vw, 20px)) 0 0 calc(-1*min(1.0416666667vw, 20px))
    }

    #WWD-3dvs[data-showroom] #modelPoint button.point:before {
        width: 2.1vw;
        height: 2.1vw
    }

    #WWD-3dvs[data-showroom] #modelPoint button.point:after {
        width: 4vw;
        height: 4vw;
        margin: calc(-1*min(.9375vw, 18px)) 0 0 calc(-1*min(.9375vw, 18px));
        opacity: .5
    }

    #WWD-3dvs[data-showroom] #modelCon:after {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 390px;
        background: linear-gradient(to bottom, transparent 10%, #000)
    }

    #WWD-3dvs[data-showroom].active.enter .txt_ef_up span {
        transform: translateY(0)
    }

    #WWD-3dvs[data-showroom].active.enter .txt_ef_op {
        opacity: 1;
        transform: translateY(0);
        transition-delay: .4s
    }

    #WWD-3dvs[data-showroom] .point-modal {
        left: 0 !important;
        right: 0 !important;
        width: 76%;
        max-width: 400px;
        margin: -250px auto 0
    }

    #WWD-3dvs[data-showroom] .prd-info {
        left: 20px;
        right: 20px;
        bottom: 160px
    }

    #WWD-3dvs[data-showroom] .prd-info .tit {
        font-size: 24px
    }

    #WWD-3dvs[data-showroom] .prd-info .desc {
        font-size: 16px;
        line-height: 1.72;
        margin-top: 20px
    }

    #WWD-3dvs[data-showroom] .prd-info .desc br {
        display: none
    }

    #WWD-3dvs[data-showroom] .current_arrow {
        margin-left: -3px
    }
}

@media (min-width: 1220px) and (max-height: 800px) {
    #WWD-3dvs[data-showroom][data-showroom=ns] .model-size {
        height: 37vh
    }

    #WWD-3dvs[data-showroom][data-showroom=cv] .model-size {
        height: 25vh
    }

    #WWD-3dvs[data-showroom][data-showroom=ob] .model-size {
        height: 60vh
    }

    #WWD-3dvs[data-showroom] .point-modal {
        width: min(26.0416666667vw, 500px);
        margin-top: calc(-1*min(14.5833333333vw, 280px))
    }

    #WWD-3dvs[data-showroom] .point-modal .txt-con .inner {
        max-height: min(8.8541666667vw, 170px)
    }
}

@media (max-width: 768px) {
    html[lang=en] #WWD-3dvs[data-showroom] .prd-info .tit {
        font-size: 22px
    }

    html[lang=en] #WWD-3dvs[data-showroom] .prd-info .desc {
        font-size: 14px;
        line-height: 1.5
    }
}

#modelLoading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    z-index: 99999;
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s
}

#modelLoading .icon {
    width: min(6.25vw, 120px);
    height: min(6.25vw, 120px)
}

#modelLoading.active {
    opacity: 0
}

@media (max-width: 1023px) {
    #modelLoading .icon {
        width: 60px;
        height: 60px
    }
}

._NOGUIDE .button-guide,
._NOGUIDE .debugger,
._NOGUIDE .font-guide {
    display: none
}

._CONTROLS {
    overflow: hidden
}

._CONTROLS body,
._CONTROLS main {
    overflow: hidden
}

._CONTROLS #modelCon {
    position: fixed !important;
    z-index: 999;
    pointer-events: auto
}

.detail-3d .load_ocean {
    display: none
}

.detail-3d #FOOTER {
    z-index: 9
}

@media (min-width: 1025px) and (max-height: 550px) {
    .detail-3d #landscape {
        display: flex
    }
}

.home_btn.hide {
    display: none
}

main[data-detail],
main[data-detail] .main-inner {
    position: relative;
    padding-top: 0
}

main[data-detail]:after,
main[data-detail] .main-inner:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 2px;
    background: #151515
}

main[data-detail] .sticky {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh
}

._DEBUG main[data-detail] section {
    border: 1px solid red;
    box-sizing: border-box
}

._DEBUG main[data-detail] .mesh-area-wrap {
    border: 1px solid blue;
    box-sizing: border-box
}

._DEBUG main[data-detail] .mesh-area {
    border: 1px solid green;
    box-sizing: border-box
}

._DEBUG main[data-detail] .mesh-area-inner {
    background: #00800033
}

main[data-detail] #modelCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh
}

main[data-detail] #modelCon #model {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh
}

main[data-detail] #wrap {
    position: relative
}

main[data-detail] #wrap section {
    position: relative;
    min-height: 100vh;
    color: #fff
}

main[data-detail] #wrap section .sticky {
    overflow: hidden
}

main[data-detail] #wrap section .inwrap {
    overflow: hidden;
    padding: min(8.3333333333vw, 160px) min(6.25vw, 120px) min(6.25vw, 120px);
    box-sizing: border-box
}

main[data-detail] #wrap section .mesh-area-wrap {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

main[data-detail] #wrap section .mesh-area {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    position: absolute
}

main[data-detail] #wrap section .m_txt {
    margin-top: min(1.6666666667vw, 32px);
    font-weight: 300
}

main[data-detail] #wrap section .image,
main[data-detail] #wrap section .media {
    width: min(20vw, 384px);
    margin-bottom: min(3.125vw, 60px)
}

main[data-detail] #wrap section img,
main[data-detail] #wrap section video,
main[data-detail] #wrap section svg {
    display: block;
    max-width: 100%
}

main[data-detail] #wrap section.intro h2 {
    position: absolute;
    bottom: min(4.8958333333vw, 94px);
    left: min(6.25vw, 120px);
    line-height: 1
}

main[data-detail] #wrap section.intro .kv_scroll {
    display: block;
    position: fixed;
    right: min(6.25vw, 120px);
    bottom: min(5.2083333333vw, 100px);
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    transition: transform .5s ease-out, opacity .5s ease-out;
    transform: translateZ(0)
}

main[data-detail] #wrap section.intro .kv_scroll img {
    display: block
}

main[data-detail] #wrap section.intro .kv_scroll.hide {
    transform: translate3d(0, min(9.375vw, 180px), 0);
    opacity: 0
}

main[data-detail] #wrap section.intro.active .kv_scroll img {
    animation: KVscroll 2s infinite cubic-bezier(.39, 0, .12, .99)
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail] #wrap section .inwrap {
        padding: 112px 50px 80px
    }

    main[data-detail] #wrap section .m_txt {
        margin-top: 28px
    }

    main[data-detail] #wrap section .image,
    main[data-detail] #wrap section .media {
        width: 300px;
        margin-bottom: 50px
    }
}

@media (max-width: 768px) {
    main[data-detail] #wrap section .inwrap {
        padding: 120px 20px 105px
    }

    main[data-detail] #wrap section .image,
    main[data-detail] #wrap section .media {
        width: 246px;
        margin-bottom: 40px
    }

    main[data-detail] #wrap section .m_h5 {
        font-size: 24px !important
    }

    main[data-detail] #wrap section .m_txt {
        margin-top: 24px;
        font-weight: 300
    }

    main[data-detail] #wrap section.intro h2 {
        left: 20px;
        bottom: calc(100vh - var(--ah) + 105px);
        font-size: 24px !important;
        transition: bottom .3s ease-out
    }

    main[data-detail] #wrap section.intro .kv_scroll {
        right: 20px;
        bottom: 100px;
        width: 32px;
        height: 32px
    }
}

main[data-detail] #stickyWrap {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 9;
    pointer-events: none
}

main[data-detail] #stickyWrap #sideBar {
    pointer-events: auto
}

@media (min-width: 769px) {
    main[data-detail] #stickyWrap #sideBar {
        position: relative
    }

    main[data-detail] #stickyWrap #sideBar .point+.point {
        margin-top: min(.7291666667vw, 14px)
    }

    main[data-detail] #stickyWrap #sideBar .current_arrow {
        top: calc(100% - var(--nav-progress));
        transform: translate3d(0, -50%, 0);
        margin-top: 0
    }

    main[data-detail] #stickyWrap #sideBar .progress {
        top: min(1.3541666667vw, 26px)
    }

    main[data-detail] #stickyWrap #sideBar .progress .active {
        clip-path: inset(0 0 var(--nav-progress) 0)
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail] #stickyWrap #sideBar .point+.point {
        margin-top: 10px
    }

    main[data-detail] #stickyWrap #sideBar .current_arrow {
        right: 14px;
        width: 4px;
        height: 8px
    }

    main[data-detail] #stickyWrap #sideBar .progress {
        top: 18px;
        width: 12px;
        height: 212px
    }
}

@media (max-width: 768px) {
    main[data-detail] #stickyWrap {
        width: 100%;
        padding-bottom: 40px;
        box-sizing: border-box
    }

    main[data-detail] #stickyWrap .sticky:after {
        --bgcolor: #000;
        pointer-events: none;
        content: "";
        position: absolute;
        bottom: -40px;
        left: 0;
        width: 100%;
        height: 240px;
        background: linear-gradient(to bottom, transparent 10%, var(--bgcolor));
        opacity: .8
    }

    main[data-detail] #stickyWrap #sideBar {
        position: absolute;
        bottom: calc(100vh - var(--ah) + 60px);
        transition: bottom .3s ease-out
    }

    main[data-detail] #stickyWrap #sideBar .current_arrow {
        top: 27px;
        left: calc(100% - var(--nav-progress));
        transform: translate3d(-50%, 0, 0) rotate(-90deg)
    }

    main[data-detail] #stickyWrap #sideBar .progress .active {
        clip-path: inset(0 var(--nav-progress) 0 0)
    }
}

main[data-detail="3dsubm"] .mesh-area-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

main[data-detail="3dsubm"] .mesh-area:after {
    content: "";
    position: absolute;
    top: -28%;
    left: 0;
    width: 100%;
    height: 100%
}

._DEBUG main[data-detail="3dsubm"] .mesh-area:after {
    border: 1px solid greenyellow
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] section .sticky {
        overflow: visible !important
    }
}

@media (min-width: 769px) {
    main[data-detail="3dsubm"] #stickyWrap #sideBar .progress {
        height: min(14.4270833333vw, 277px)
    }

    main[data-detail="3dsubm"] #stickyWrap #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dsubm/progress_default.png) no-repeat center/100% 100%
    }

    main[data-detail="3dsubm"] #stickyWrap #sideBar .progress .active {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dsubm/progress_active.png) no-repeat center/100% 100%
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dsubm"] #stickyWrap #sideBar .progress {
        height: 205px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #stickyWrap .sticky:after {
        --bgcolor: #01416e
    }

    main[data-detail="3dsubm"] #stickyWrap #sideBar {
        left: 62px;
        right: 62px
    }

    main[data-detail="3dsubm"] #stickyWrap #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dsubm/progress_default_mo.png) no-repeat center/100% 100%
    }

    main[data-detail="3dsubm"] #stickyWrap #sideBar .progress .active {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dsubm/progress_active_mo.png) no-repeat center/100% 100%
    }
}

main[data-detail="3dsubm"] #wrap .init {
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh
}

main[data-detail="3dsubm"] #wrap .init .mesh-area {
    top: 40%;
    left: 30%;
    transform: translate3d(-50%, -50%, 0);
    width: 20vw;
    height: 20vw
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap .init .mesh-area {
        width: min(200px, 36vw);
        height: min(200px, 36vw)
    }
}

main[data-detail="3dsubm"] #wrap .end {
    width: 100%;
    height: 50vh
}

main[data-detail="3dsubm"] #wrap .end .mesh-area {
    top: 44%;
    left: 25%;
    transform: translate3d(-50%, -50%, 0);
    width: 30vw;
    height: 30vw
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap .end .mesh-area {
        left: auto;
        right: 80%;
        transform: translate3d(0, -50%, 0);
        width: min(280px, 60vw);
        height: min(280px, 60vw)
    }
}

main[data-detail="3dsubm"] #wrap section .inwrap {
    width: 100%;
    min-height: 100vh;
    padding-right: min(13.0208333333vw, 250px)
}

main[data-detail="3dsubm"] #wrap section .content-area {
    position: relative;
    z-index: 2
}

main[data-detail="3dsubm"] #wrap section .mesh-area-wrap [class*=m_],
main[data-detail="3dsubm"] #wrap section .mesh-area-wrap .image {
    pointer-events: auto
}

main[data-detail="3dsubm"] #wrap section .m_h5 {
    margin-bottom: min(3.125vw, 60px)
}

main[data-detail="3dsubm"] #wrap section svg * {
    transform-box: fill-box
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dsubm"] #wrap section .inwrap {
        padding-right: 180px
    }

    main[data-detail="3dsubm"] #wrap section .m_h5 {
        margin-bottom: 50px
    }

    html[lang=en] main[data-detail="3dsubm"] #wrap section .inwrap {
        padding-right: 240px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section .inwrap {
        padding-right: 20px
    }

    main[data-detail="3dsubm"] #wrap section .m_h5 {
        margin-bottom: 50px
    }
}

main[data-detail="3dsubm"] #wrap section.intro.sec_kv .mesh-area {
    top: 50%;
    left: 33%;
    transform: translate3d(-50%, -50%, 0);
    width: 30vw;
    height: 30vw
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.intro.sec_kv .mesh-area {
        left: 30%;
        width: min(210px, 36vw);
        height: min(210px, 36vw)
    }
}

main[data-detail="3dsubm"] #wrap section.sec_sonar {
    height: 200vh
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .inwrap {
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .sticky .inwrap {
    justify-content: flex-end
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .content-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .image {
    margin-bottom: 0
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .m_txt {
    width: min(38.90625vw, 747px)
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-wrap {
    position: absolute;
    top: -50vh;
    left: 0;
    width: 100%;
    height: calc(100% + 20vh)
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-wrap .sticky {
    overflow: hidden !important
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-wrap .inwrap {
    pointer-events: none
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area {
    top: 50vh;
    left: 48%;
    transform: translate3d(-50%, -50%, 0);
    width: 22vw;
    height: 22vw
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: 400%;
    height: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: min(33.125vw, 636px);
    height: min(33.125vw, 636px);
    opacity: 1
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 135%;
    height: 135%;
    transform: translate3d(-50%, -50%, 0) scale(.1);
    opacity: 0
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dsubm/3dsubm_sonar_mesh-sep4.png) no-repeat center/contain
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam-1 {
    left: 0
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam-2 {
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: min(36.8229166667vw, 707px);
    height: min(36.8229166667vw, 707px)
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam-3 {
    right: 0
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dsubm"] #wrap section.sec_sonar .content-area {
        display: block
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .m_txt {
        width: 360px
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area {
        width: 24vw;
        height: 24vw
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.sec_sonar {
        height: auto
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar>.inwrap {
        position: relative
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .content-area {
        display: block;
        padding-left: 0
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .m_h5 {
        margin-bottom: 150px
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .m_txt {
        width: 335px;
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-wrap {
        height: calc(100% + 50vh)
    }

    main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area {
        top: 180px;
        transform: translate3d(-50%, 0, 0);
        width: min(180px, 26vw);
        height: min(180px, 26vw)
    }
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .beam {
    transition: opacity .3s
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner:not(.show) .beam {
    opacity: 0
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam span:nth-child(1) {
    animation: ani-beam-scale 3s ease-out infinite
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam span:nth-child(2) {
    animation: ani-beam-scale 3s 1s ease-out infinite
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam span:nth-child(3) {
    animation: ani-beam-scale 3s 2s ease-out infinite
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam span:after {
    animation: ani-beam-rotate 3s ease-out infinite
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam-1 span:nth-child(1),
main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam-3 span:nth-child(1) {
    animation-delay: .5s
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam-1 span:nth-child(2),
main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam-3 span:nth-child(2) {
    animation-delay: 1.5s
}

main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam-1 span:nth-child(3),
main[data-detail="3dsubm"] #wrap section.sec_sonar .mesh-area-inner.active .beam-3 span:nth-child(3) {
    animation-delay: 2.5s
}

@keyframes ani-beam-scale {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(.1);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    to {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 0
    }
}

@keyframes ani-beam-rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

main[data-detail="3dsubm"] #wrap section.sec_whls {
    height: 100vh
}

main[data-detail="3dsubm"] #wrap section.sec_whls .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0
}

main[data-detail="3dsubm"] #wrap section.sec_whls .sticky .inwrap {
    justify-content: flex-end
}

main[data-detail="3dsubm"] #wrap section.sec_whls .content-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: min(8.2291666667vw, 158px)
}

main[data-detail="3dsubm"] #wrap section.sec_whls .m_txt {
    width: min(34.8958333333vw, 670px)
}

main[data-detail="3dsubm"] #wrap section.sec_whls .image {
    margin-bottom: 0
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-wrap {
    position: absolute;
    top: -50vh;
    left: 0;
    width: 100%;
    height: calc(100% + 20vh)
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-wrap .sticky {
    overflow: visible;
    height: 50vh
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area {
    top: 40vh;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 24vw;
    height: 24vw
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-inner {
    position: absolute;
    top: -22%;
    left: -122%;
    width: 298%
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-inner img,
main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-inner svg {
    width: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-inner svg {
    height: 55.1%
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-inner svg path {
    transition: stroke-dashoffset .3s
}

main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-inner svg.on g {
    animation: ani-scale-1 3s ease-in-out infinite
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dsubm"] #wrap section.sec_whls .content-area {
        display: block;
        padding-right: 0
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .m_txt {
        width: 360px;
        margin-bottom: 30px
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area {
        width: 26vw;
        height: 26vw
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.sec_whls {
        height: auto
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls>.inwrap {
        position: relative
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .content-area {
        display: block;
        padding-right: 0
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .image {
        margin-bottom: 0;
        margin-top: 40px
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .m_h5 {
        margin-bottom: 190px
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .m_txt {
        width: 335px;
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area-wrap {
        top: -50vh;
        height: calc(100% + 50vh)
    }

    main[data-detail="3dsubm"] #wrap section.sec_whls .mesh-area {
        top: 200px;
        transform: translate3d(-45%, 0, 0);
        width: min(200px, 33vw);
        height: min(200px, 33vw)
    }
}

main[data-detail="3dsubm"] #wrap section.sec_vls {
    height: 110vh
}

main[data-detail="3dsubm"] #wrap section.sec_vls .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

main[data-detail="3dsubm"] #wrap section.sec_vls .m_txt {
    width: min(33.59375vw, 645px)
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-wrap {
    position: absolute;
    top: -50vh;
    left: 0;
    width: 100%;
    height: calc(100% + 20vh)
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-wrap .sticky {
    overflow: visible;
    height: 50vh
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area {
    top: 50vh;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 40vw;
    height: 40vw
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-inner {
    position: absolute;
    top: 11.5%;
    left: 2%;
    width: 125%
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-inner img,
main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-inner svg {
    width: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-inner svg {
    height: 34.69%
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-inner svg path {
    transition: stroke-dashoffset .3s
}

main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-inner svg.on g {
    animation: ani-scale-1 3s ease-in-out infinite
}

@media (max-width: 1023px) {
    main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area {
        top: 35%
    }

    main[data-detail="3dsubm"] #wrap section.sec_vls .m_txt {
        width: 360px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.sec_vls {
        height: auto
    }

    main[data-detail="3dsubm"] #wrap section.sec_vls .m_h5 {
        margin-bottom: 150px
    }

    main[data-detail="3dsubm"] #wrap section.sec_vls .m_txt {
        width: 335px;
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area-wrap {
        top: -50vh;
        height: calc(100% + 50vh)
    }

    main[data-detail="3dsubm"] #wrap section.sec_vls .mesh-area {
        top: 140px;
        transform: translate3d(-50%, 0, 0);
        width: min(240px, 64vw);
        height: min(240px, 64vw)
    }
}

main[data-detail="3dsubm"] #wrap section.sec_battery .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding-left: min(39.7916666667vw, 764px)
}

main[data-detail="3dsubm"] #wrap section.sec_battery .image {
    display: flex;
    align-items: flex-start;
    width: auto;
    max-width: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_battery .image img:nth-child(1) {
    width: min(20vw, 384px)
}

main[data-detail="3dsubm"] #wrap section.sec_battery .image img:nth-child(2) {
    width: min(9.2708333333vw, 178px);
    margin-left: min(1.0416666667vw, 20px)
}

main[data-detail="3dsubm"] #wrap section.sec_battery .m_txt {
    width: min(37.7604166667vw, 725px)
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-wrap {
    position: absolute;
    top: -50vh;
    left: 0;
    width: 100%;
    height: calc(100% + 50vh)
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-wrap .sticky {
    overflow: visible;
    height: 50vh
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-wrap .sticky-inner {
    position: relative;
    width: 100%;
    height: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area,
main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-visual {
    position: absolute;
    top: 10vh;
    right: 12%;
    transform: translate3d(0, -50%, 0);
    width: 55vw;
    height: 55vw
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inner {
    position: absolute;
    top: 56%;
    right: 20%;
    width: 130%
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inner img,
main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inner svg {
    width: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inwrap {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50vh
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inwrap-1 {
    top: 50vh
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inwrap-2 {
    top: 100vh
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inwrap-2 .mesh-area {
    top: 40vh
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dsubm"] #wrap section.sec_battery .inwrap {
        padding-left: calc(100vw - 540px)
    }

    html[lang=en] main[data-detail="3dsubm"] #wrap section.sec_battery .inwrap {
        padding-left: calc(100vw - 600px)
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .image img {
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .image img:nth-child(1) {
        width: 237px;
        max-width: 66.6%
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .image img:nth-child(2) {
        width: 110px;
        max-width: 30.6%;
        margin-left: 12px
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area,
    main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-visual {
        top: 20%
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .m_txt {
        width: 360px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.sec_battery {
        height: auto
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .inwrap {
        padding-left: 20px
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .image img {
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .image img:nth-child(1) {
        width: 200px;
        max-width: 66.6%
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .image img:nth-child(2) {
        width: 92px;
        max-width: 30.6%;
        margin-left: 8px
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .m_h5 {
        margin-bottom: 150px
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .m_txt {
        width: 335px;
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-wrap .sticky-inner {
        height: 200%;
        overflow: hidden !important
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area,
    main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-visual {
        top: 105px;
        right: 25%;
        transform: translate3d(50%, -50%, 0);
        width: min(300px, 80vw);
        height: min(300px, 80vw)
    }

    main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inwrap-2 .mesh-area {
        top: calc(105px + 30vh)
    }
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inner img {
    opacity: 0;
    transition: opacity .3s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_battery .mesh-area-inner.active img {
    opacity: 1
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell {
    padding-bottom: 50vh
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .sticky {
    height: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: 100vh
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .m_h5 {
    margin-bottom: min(12.34375vw, 237px)
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .m_txt {
    width: min(38.28125vw, 735px)
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-wrap .sticky {
    overflow: visible;
    height: 100vh
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area {
    top: 50vh;
    left: 46%;
    transform: translate3d(-50%, -50%, 0);
    width: 22vw;
    height: 22vw
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner {
    position: absolute;
    top: 31%;
    left: 40%;
    transform: translate3d(-50%, 0, 0);
    height: 53%
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner img,
main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner svg {
    width: auto;
    max-width: none;
    height: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner .notmobile,
main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner .mobile {
    width: 100%;
    height: 100%
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner .mobile {
    display: none
}

@media (min-width: 1025px) {
    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .inwrap {
        overflow: visible;
        padding-top: 0
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .title-area {
        position: relative;
        margin-bottom: min(12.34375vw, 237px);
        height: 100vh
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .m_h5 {
        position: sticky;
        top: 0;
        margin-bottom: 0;
        padding-top: min(8.3333333333vw, 160px)
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area {
        top: 30%;
        left: 50%;
        width: 25vw;
        height: 25vw
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .m_txt {
        width: 360px
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell br.pc {
        display: none
    }
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell {
        height: auto;
        padding-bottom: 0
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .m_h5 {
        margin-bottom: max(35vw, 160px)
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .m_txt {
        width: 335px;
        max-width: 100%
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-wrap .sticky {
        height: 50vh
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area {
        top: 180px;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        width: 25vw;
        height: 25vw
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner {
        top: 18%;
        height: 75%
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner .notmobile {
        display: none
    }

    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner .mobile {
        display: block
    }
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner {
    transition: opacity .3s
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner svg>path,
main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner svg>g {
    opacity: 0;
    transition: opacity .3s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner svg path {
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
    transition: stroke-dashoffset .5s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell .mesh-area-inner.hide {
    opacity: 0
}

@media (max-width: 768px) {
    main[data-detail="3dsubm"] #wrap section.sec_fuel-cell:not(.active) .mesh-area-inner {
        opacity: 0
    }
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-aip {
    opacity: 1;
    transition: opacity .3s 0s
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-aip path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-aip-battery-h {
    opacity: 1;
    animation: ani-path-left .5s .3s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-aip-battery-b {
    opacity: 1;
    animation: ani-path-right .5s .3s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-aip-pm-t {
    opacity: 1;
    animation: ani-path-right 1s .3s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-aip-pm-b {
    opacity: 1;
    animation: ani-path-right 1s .3s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-battery-head {
    opacity: 1;
    transition: opacity .3s .5s
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-battery-head path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s .5s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-battery-body {
    opacity: 1;
    transition: opacity .3s .5s
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-battery-body path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s .5s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-dg {
    opacity: 1;
    transition: opacity .3s .5s
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-dg path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s .5s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-dg-battery {
    opacity: 1;
    animation: ani-path-bottom .5s .8s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-dg-pm {
    opacity: 1;
    animation: ani-path-right .5s .8s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-battery-pm {
    opacity: 1;
    animation: ani-path-right .5s .8s both
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-pm {
    opacity: 1;
    transition: opacity .3s .8s
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .box-pm path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s .8s ease-out
}

main[data-detail="3dsubm"] #wrap section.sec_fuel-cell.active .mesh-area-inner svg .path-pm-out {
    opacity: 1;
    transition: opacity .5s 1s
}

@keyframes ani-path-left {
    0% {
        clip-path: inset(0 0 100% 100%)
    }

    15% {
        clip-path: inset(0 0 0 90%)
    }

    50% {
        clip-path: inset(0 0 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes ani-path-right {
    0% {
        clip-path: inset(0 100% 100% 0)
    }

    15% {
        clip-path: inset(0 90% 0 0)
    }

    50% {
        clip-path: inset(0 0 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes ani-path-bottom {
    0% {
        clip-path: inset(0 0 100% 0)
    }

    50% {
        clip-path: inset(0 0 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes ani-scale-1 {
    0% {
        opacity: .6
    }

    25% {
        opacity: 1
    }

    50% {
        opacity: .6
    }

    75% {
        opacity: 1
    }

    to {
        opacity: .6
    }
}

@media (min-width: 769px) {
    main[data-detail="3dlngc"] #stickyWrap #sideBar .progress {
        height: min(7.2916666667vw, 140px)
    }

    main[data-detail="3dlngc"] #stickyWrap #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_default.png) no-repeat center/100% 100%
    }

    main[data-detail="3dlngc"] #stickyWrap #sideBar .progress .active {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_active.png) no-repeat center/100% 100%
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dlngc"] #stickyWrap #sideBar .progress {
        height: 107px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dlngc"] #stickyWrap #sideBar {
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        width: calc(100% - 248px);
        min-width: 125px
    }

    main[data-detail="3dlngc"] #stickyWrap #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_default_mo.png) no-repeat center/100% 100%
    }

    main[data-detail="3dlngc"] #stickyWrap #sideBar .progress .active {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_active_mo.png) no-repeat center/100% 100%
    }
}

main[data-detail="3dlngc"] #modelCon #model:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(21, 21, 21, .4), transparent);
    opacity: 0;
    transition: opacity 1s
}

main[data-detail="3dlngc"] #modelCon #model.active:after {
    opacity: 1
}

main[data-detail="3dlngc"] #wrap .inwrap {
    width: 100%;
    min-height: 100vh;
    padding-right: min(13.5416666667vw, 260px)
}

@media (max-width: 1023px) {
    main[data-detail="3dlngc"] #wrap .inwrap {
        padding-right: 160px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dlngc"] #wrap .inwrap {
        padding-right: 20px
    }
}

main[data-detail="3dlngc"] #wrap .init {
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh
}

main[data-detail="3dlngc"] #wrap .init .mesh-area {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 60vw;
    height: 60vw
}

main[data-detail="3dlngc"] #wrap section.intro.sec_kv {
    height: 100vh
}

main[data-detail="3dlngc"] #wrap section.intro.sec_kv .mesh-area {
    top: 40%;
    left: 70%;
    transform: translate3d(-50%, -50%, 0);
    width: 13vw;
    height: 13vw
}

@media (max-width: 1023px) {
    main[data-detail="3dlngc"] #wrap section.intro.sec_kv .mesh-area {
        width: 200px;
        height: 200px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dlngc"] #wrap section.intro.sec_kv .mesh-area {
        width: 150px;
        height: 150px
    }
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .m_h5 {
    margin-bottom: min(7.5vw, 144px)
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .content-area {
    margin-top: 24px
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .media {
    width: min(21.25vw, 408px);
    margin-bottom: min(1.0416666667vw, 20px)
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .texts {
    display: flex
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt {
    width: min(27.6041666667vw, 530px);
    padding-right: min(1.5625vw, 30px);
    box-sizing: border-box
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt+.m_txt {
    margin-left: min(2.5vw, 48px)
}

main[data-detail="3dlngc"] #wrap section.sec_lngc .mesh-area {
    top: 50vh;
    left: 20%;
    transform: translate3d(0, -50%, 0);
    width: 18vw;
    height: 18vw
}

@media (min-width: 1025px) {
    html[lang=en] main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt {
        width: min(28.6458333333vw, 550px)
    }
}

@media (max-width: 1023px) {
    main[data-detail="3dlngc"] #wrap section.sec_lngc .media {
        width: 300px;
        margin-bottom: 40px
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt {
        width: 246px;
        padding-right: 0
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt+.m_txt {
        margin-left: 20px
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .mesh-area {
        width: 200px;
        height: 200px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dlngc"] #wrap section.sec_lngc .inwrap {
        height: 100%
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .media {
        width: 246px;
        margin-bottom: 40px
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .texts {
        display: block
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt {
        width: 420px;
        max-width: 100%;
        padding-right: 0
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .m_txt+.m_txt {
        margin-left: 0;
        margin-top: 32px
    }

    main[data-detail="3dlngc"] #wrap section.sec_lngc .mesh-area {
        left: auto;
        right: calc(50% + 300px);
        width: 200px;
        height: 200px
    }
}

main[data-detail="3dlngc"] #wrap section.sec_lngc.active .inwrap:after {
    opacity: 1
}

main[data-detail="3dlngc"] #wrap section.sec_key {
    height: 350vh
}

main[data-detail="3dlngc"] #wrap section.sec_key .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh
}

main[data-detail="3dlngc"] #wrap section.sec_key .content-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount {
    display: flex;
    align-items: flex-end;
    margin-top: min(1.0416666667vw, 20px);
    font-weight: 300
}

main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount em {
    display: inline-block;
    position: relative;
    top: min(-.78125vw, -15px);
    margin-left: min(.5208333333vw, 10px)
}

main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount .odometer {
    font-weight: 500;
    line-height: 1 !important
}

main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount .odometer-formatting-mark {
    display: inline
}

main[data-detail="3dlngc"] #wrap section.sec_key .texts {
    position: relative;
    width: min(28.125vw, 540px)
}

main[data-detail="3dlngc"] #wrap section.sec_key .texts li {
    position: absolute;
    bottom: 0
}

main[data-detail="3dlngc"] #wrap section.sec_key .media {
    width: min(18.75vw, 360px);
    margin-bottom: 0
}

main[data-detail="3dlngc"] #wrap section.sec_key .mesh-area-wrap {
    height: 100vh
}

main[data-detail="3dlngc"] #wrap section.sec_key .mesh-area {
    top: 50vh;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 15vw;
    height: 15vw
}

@media (max-width: 1023px) {
    main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount {
        margin-top: 20px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount em {
        top: -10px;
        margin-left: 10px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .texts {
        width: 320px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .media {
        width: 300px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .mesh-area {
        width: 200px;
        height: 200px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dlngc"] #wrap section.sec_key {
        height: auto
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .inwrap {
        height: 100%
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount {
        margin-top: 10px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount em {
        top: -8px;
        margin-left: 10px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .titles .amount .odometer {
        font-size: 60px !important
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .content-area {
        display: block;
        margin-top: 170px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .texts {
        width: 420px;
        max-width: 100%
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .texts li {
        position: relative
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .texts li+li {
        margin-top: 40px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .media {
        width: 246px;
        margin-top: 40px
    }

    main[data-detail="3dlngc"] #wrap section.sec_key .mesh-area {
        left: calc(50% + 100px);
        width: 180px;
        height: 180px
    }
}

main[data-detail="3dlngc"] #wrap section.sec_smartship {
    overflow: hidden
}

main[data-detail="3dlngc"] #wrap section.sec_smartship .inwrap {
    min-height: 100vh
}

main[data-detail="3dlngc"] #wrap section.sec_smartship .media {
    width: min(18.75vw, 360px);
    margin-bottom: min(3.2291666667vw, 62px)
}

main[data-detail="3dlngc"] #wrap section.sec_smartship .m_txt {
    width: min(28.3333333333vw, 544px)
}

main[data-detail="3dlngc"] #wrap section.sec_smartship .mesh-area {
    top: 50vh;
    left: 53%;
    transform: translate3d(-50%, -50%, 0);
    width: 30vw;
    height: 30vw
}

@media (min-width: 1025px) {
    main[data-detail="3dlngc"] #wrap section.sec_smartship .inwrap {
        padding-top: min(12.5vw, 240px);
        padding-left: max(min(50.5729166667vw, 971px), 50vw)
    }
}

@media (max-width: 1023px) {
    main[data-detail="3dlngc"] #wrap section.sec_smartship .inwrap {
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    main[data-detail="3dlngc"] #wrap section.sec_smartship .media {
        width: 300px;
        margin-bottom: 40px
    }

    main[data-detail="3dlngc"] #wrap section.sec_smartship .m_txt {
        width: 360px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dlngc"] #wrap section.sec_smartship .inwrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 165px
    }

    main[data-detail="3dlngc"] #wrap section.sec_smartship .media {
        width: 246px;
        margin-bottom: 40px
    }

    main[data-detail="3dlngc"] #wrap section.sec_smartship .m_txt {
        width: 420px;
        max-width: 100%
    }

    main[data-detail="3dlngc"] #wrap section.sec_smartship .mesh-area {
        width: 360px;
        height: 360px
    }
}

@media (min-width: 769px) {
    main[data-detail="3dfpso"] #stickyWrap #sideBar .progress {
        height: min(7.2916666667vw, 140px)
    }

    main[data-detail="3dfpso"] #stickyWrap #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_default.png) no-repeat center/100% 100%
    }

    main[data-detail="3dfpso"] #stickyWrap #sideBar .progress .active {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_active.png) no-repeat center/100% 100%
    }

    html[lang=en] main[data-detail="3dfpso"] #stickyWrap #sideBar .point[data-id="3"] {
        top: -.5em
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dfpso"] #stickyWrap #sideBar .progress {
        height: 107px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #stickyWrap #sideBar {
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        width: calc(100% - 248px);
        min-width: 125px
    }

    main[data-detail="3dfpso"] #stickyWrap #sideBar .progress:before {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_default_mo.png) no-repeat center/100% 100%
    }

    main[data-detail="3dfpso"] #stickyWrap #sideBar .progress .active {
        background: url(https://www.hanwhaocean.com/images/whatwedo/3dlngc/progress_active_mo.png) no-repeat center/100% 100%
    }
}

main[data-detail="3dfpso"] #modelCon #model:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(21, 21, 21, .4), transparent);
    opacity: 0;
    transition: opacity 1s
}

main[data-detail="3dfpso"] #modelCon #model.active:after {
    opacity: 1
}

main[data-detail="3dfpso"] #wrap section .inwrap {
    width: 100%;
    min-height: 100vh
}

@media (min-width: 1025px) {
    main[data-detail="3dfpso"] #wrap section .inwrap {
        padding-right: min(13.5416666667vw, 260px)
    }

    html[lang=en] main[data-detail="3dfpso"] #wrap section .inwrap {
        padding-right: min(15.625vw, 300px)
    }
}

@media (max-width: 1023px) {
    main[data-detail="3dfpso"] #wrap section .inwrap {
        padding-right: 160px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #wrap section .inwrap {
        padding-right: 20px
    }
}

main[data-detail="3dfpso"] #wrap section.init {
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh
}

main[data-detail="3dfpso"] #wrap section.init .mesh-area {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 20vw;
    height: 20vw
}

@media (max-width: 1023px) {
    main[data-detail="3dfpso"] #wrap section.init .mesh-area {
        width: 200px;
        height: 200px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #wrap section.init .mesh-area {
        left: 45%;
        width: 150px;
        height: 150px
    }
}

main[data-detail="3dfpso"] #wrap section.intro.sec_kv {
    height: 100vh
}

main[data-detail="3dfpso"] #wrap section.intro.sec_kv .mesh-area {
    top: 65%;
    left: 45%;
    transform: translate3d(-50%, -50%, 0);
    width: 32vw;
    height: 32vw
}

@media (max-width: 1023px) {
    main[data-detail="3dfpso"] #wrap section.intro.sec_kv .mesh-area {
        width: 320px;
        height: 320px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #wrap section.intro.sec_kv .mesh-area {
        top: 55%;
        left: 44%;
        width: 180px;
        height: 180px
    }
}

main[data-detail="3dfpso"] #wrap section.sec_fpso .inwrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

main[data-detail="3dfpso"] #wrap section.sec_fpso .content-area {
    width: min(27.4479166667vw, 527px);
    max-width: 100%
}

main[data-detail="3dfpso"] #wrap section.sec_fpso .mesh-area {
    top: 60%;
    left: 50%;
    transform: translate3d(0, -50%, 0);
    width: 24vw;
    height: 24vw
}

@media (max-width: 1023px) {
    main[data-detail="3dfpso"] #wrap section.sec_fpso .content-area {
        width: 360px
    }

    main[data-detail="3dfpso"] #wrap section.sec_fpso .mesh-area {
        left: 40%;
        width: 320px;
        height: 320px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #wrap section.sec_fpso .sticky {
        height: auto
    }

    main[data-detail="3dfpso"] #wrap section.sec_fpso .content-area {
        width: 100%
    }

    main[data-detail="3dfpso"] #wrap section.sec_fpso .m_txt {
        width: 420px;
        max-width: 100%
    }

    main[data-detail="3dfpso"] #wrap section.sec_fpso .mesh-area {
        left: 25%;
        width: 270px;
        height: 270px
    }
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience {
    height: 150vh
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .inwrap {
    overflow: visible;
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 100%
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .texts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min(27.4479166667vw, 527px);
    max-width: 100%;
    height: 100%
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences {
    display: flex;
    margin-top: min(10.4166666667vw, 200px)
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list+.list {
    margin-left: min(2.0833333333vw, 40px);
    margin-top: min(6.5625vw, 126px)
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li {
    width: min(18.75vw, 360px);
    padding: min(1.6666666667vw, 32px) min(1.5625vw, 30px);
    box-sizing: border-box;
    background: #ffffff08;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .tit {
    display: block;
    margin-bottom: min(.7291666667vw, 14px);
    font-weight: 400;
    color: #fff;
    line-height: 1.5
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .info {
    display: flex;
    align-items: center;
    margin-bottom: min(.3125vw, 6px)
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .info li+li:before {
    content: "|";
    display: inline-block;
    margin: 0 8px;
    color: #d9d9d9
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .location {
    display: block
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .location:before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    background: url(https://www.hanwhaocean.com/images/whatwedo/3dfpso/3dfpso_icon_location.svg) no-repeat center/100% 100%
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .logo {
    margin-top: min(1.5625vw, 30px);
    height: 26px
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .logo img {
    height: 100%
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li:after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #fff 1px, transparent 1px) 0 0, linear-gradient(to right, #fff 1px, transparent 1px) 0 100%, linear-gradient(to left, #fff 1px, transparent 1px) 100% 0, linear-gradient(to left, #fff 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, #fff 1px, transparent 1px) 0 0, linear-gradient(to bottom, #fff 1px, transparent 1px) 100% 0, linear-gradient(to top, #fff 1px, transparent 1px) 0 100%, linear-gradient(to top, #fff 1px, transparent 1px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 12px 12px
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li+li {
    margin-top: min(2.2916666667vw, 44px)
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li {
    transition: opacity .3s ease-out, transform .3s ease-out
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences:not(.active) .list>li {
    opacity: 0;
    transform: translate3d(0, 40px, 0)
}

main[data-detail="3dfpso"] #wrap section.sec_drying-experience .mesh-area {
    top: 60%;
    left: 30%;
    transform: translate3d(0, -50%, 0);
    width: 35vw;
    height: 35vw
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dfpso"] #wrap section.sec_drying-experience {
        height: auto
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .sticky {
        height: auto
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .inwrap {
        display: block
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .texts {
        width: 360px;
        height: auto;
        margin-right: 40px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .texts .m_h5 {
        margin-bottom: 50px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences {
        margin-top: 80px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list+.list {
        margin-left: 20px;
        margin-top: 60px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li {
        width: 252px;
        padding: 20px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .tit {
        margin-bottom: 8px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .info {
        margin-bottom: 6px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .logo {
        margin-top: 20px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #wrap section.sec_drying-experience {
        height: auto
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .sticky {
        height: auto
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .inwrap {
        display: block
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .texts {
        width: 100%
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .texts .m_txt {
        width: 420px;
        max-width: 100%
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .texts .m_h5 {
        margin-bottom: 175px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences {
        display: block;
        margin-top: 40px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list {
        width: 100%
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list+.list {
        margin-left: 0;
        margin-top: 20px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li {
        position: relative;
        width: 420px;
        max-width: 100%;
        padding: 20px 16px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .tit {
        margin-bottom: 14px;
        font-size: 20px !important
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .info {
        margin-bottom: 6px;
        font-size: 14px !important
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .location {
        font-size: 14px !important
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .location:before {
        vertical-align: sub
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .logo {
        position: absolute;
        top: 20px;
        right: 16px;
        margin-top: 0
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li .logo.halliburton {
        top: 25px;
        height: 18px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .experiences .list>li+li {
        margin-top: 20px
    }

    main[data-detail="3dfpso"] #wrap section.sec_drying-experience .mesh-area {
        top: 50vh;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 130vw;
        height: 130vw
    }
}

main[data-detail="3dfpso"] #wrap section.sec_unique-model .sticky {
    height: auto
}

main[data-detail="3dfpso"] #wrap section.sec_unique-model .inwrap {
    display: flex;
    justify-content: space-between
}

main[data-detail="3dfpso"] #wrap section.sec_unique-model .content-area {
    width: min(35.1041666667vw, 674px);
    max-width: 100%;
    margin-top: min(3.125vw, 60px)
}

main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_txt+.m_h8,
main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8+.m_txt {
    margin-top: min(3.125vw, 60px)
}

main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8+.m_h8 {
    margin-top: min(1.4583333333vw, 28px)
}

main[data-detail="3dfpso"] #wrap section.sec_unique-model .mesh-area {
    top: 66%;
    left: 12%;
    transform: translate3d(0, -50%, 0);
    width: 35vw;
    height: 35vw
}

@media (min-width: 769px) and (max-width: 1023px) {
    main[data-detail="3dfpso"] #wrap section.sec_unique-model .content-area {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 350px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_txt+.m_h8,
    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8+.m_txt {
        margin-top: 42px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8+.m_h8 {
        margin-top: 20px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .mesh-area {
        width: 400px;
        height: 400px
    }
}

@media (max-width: 768px) {
    main[data-detail="3dfpso"] #wrap section.sec_unique-model {
        min-height: auto
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .inwrap {
        flex-direction: column;
        padding-bottom: 300px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .content-area {
        width: 450px;
        max-width: 100%;
        margin-top: 0
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h5 {
        margin-bottom: 120px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_txt+.m_h8,
    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8+.m_txt {
        margin-top: 40px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8+.m_h8 {
        margin-top: 20px
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8 {
        font-size: 18px !important
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .m_h8 br {
        display: none
    }

    main[data-detail="3dfpso"] #wrap section.sec_unique-model .mesh-area {
        top: 70vh;
        left: 40%;
        transform: translate3d(-50%, -50%, 0);
        width: 100vw;
        height: 100vw
    }
}

.WWD-list .main-inner .m_btn[hover=ripple]:before {
    background-color: #f60
}

.WWD-list .main-inner .m_btn[color=black],
.WWD-list .main-inner .m_btn[color=black]:hover {
    border: none
}

.WWD-list .sub_top .top_tit-inner.absol .desc {
    padding-left: min(6.1979166667vw, 119px)
}

.WWD-list .m_popup .pop_cnt_main .pop_cnt_info {
    margin-bottom: min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    font-weight: 300;
    color: #4b4b4b;
    font-size: 0
}

.WWD-list .m_popup .pop_cnt_main .pop_cnt_info li {
    display: flex;
    margin-bottom: 12px
}

.WWD-list .m_popup .pop_cnt_main .pop_cnt_info li>span {
    display: inline-block;
    vertical-align: middle;
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    position: relative
}

.WWD-list .m_popup .pop_cnt_main .pop_cnt_info li span.pop_year {
    font-weight: 400;
    color: #000;
    padding-right: min(1.71875vw, 33px)
}

.WWD-list .m_popup .pop_cnt_main .pop_cnt_info li span.pop_year:after {
    content: "";
    width: 1px;
    height: min(.8333333333vw, 16px);
    background-color: #e5e5e5;
    display: inline-block;
    position: absolute;
    top: min(.3125vw, 6px);
    right: min(.8333333333vw, 16px)
}

.WWD-list .m_popup .pop_cnt_main table {
    border-top: 2px solid #151515;
    width: 100%
}

.WWD-list .m_popup .pop_cnt_main table tr {
    border-bottom: 1px solid #E5E5E5
}

.WWD-list .m_popup .pop_cnt_main table tr.subtitle {
    background-color: #f5f5f5
}

.WWD-list .m_popup .pop_cnt_main table tr th {
    padding: min(.9375vw, 18px) min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.4583333333vw, 28px)
}

.WWD-list .m_popup .pop_cnt_main table tr td {
    padding: min(.9375vw, 18px) min(2.0833333333vw, 40px)
}

.WWD-list .m_popup .pop_cnt_main table thead tr th:first-child {
    text-align: left
}

.WWD-list .m_popup .pop_cnt_main table thead tr th:last-child {
    text-align: right
}

.WWD-list .m_popup .pop_cnt_main table thead tr th {
    padding: min(.9375vw, 18px) min(.4166666667vw, 8px);
    text-align: center !important
}

.WWD-list .m_popup .pop_cnt_main table tbody tr.cnttitle>* {
    color: #151515;
    font-weight: 400
}

.WWD-list .m_popup .pop_cnt_main table tbody tr>* {
    text-align: right;
    color: #4b4b4b;
    font-weight: 300;
    padding: min(.7291666667vw, 14px) min(2.2916666667vw, 44px)
}

.WWD-list .m_popup .pop_cnt_main table tbody tr.subtitle>* {
    color: #151515;
    font-weight: 400
}

.WWD-list .m_popup .pop_cnt_main table tbody tr.subtitle th,
.WWD-list .m_popup .pop_cnt_main table tbody tr th.th_title {
    text-align: left
}

.WWD-list .m_popup[type=img] .pop_inner {
    width: min(57.5vw, 1104px)
}

.WWD-list .m_popup[type=img] .pop_inner .pop_contents {
    width: min(57.5vw, 1104px);
    max-height: 100%;
    padding: 0
}

.WWD-list .m_popup[type=img] .pop_inner .pop_contents .pop_cnt_head_kv img {
    width: 100%
}

#WWD-SUBM.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-DES.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-FRI.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-COR.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-AUX.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-UNM.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-GC.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-GS.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
#WWD-MRO.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
    width: min(10.8854166667vw, 209px)
}

.WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main {
    max-height: min(14.5833333333vw, 280px)
}

.WWD-list .sub_top {
    z-index: 1
}

.WWD-list .sub_top .top_tit-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: min(25.78125vw, 495px)
}

.WWD-list .sub_top .top_tit-inner.static button.m_btn {
    transform: translate(calc(-1*min(.0520833333vw, 1px)))
}

.WWD-list .sub_top .top_tit-inner.absol {
    width: 87.5%
}

.WWD-list .sub_top .top_tit-inner .desc {
    grid-column: 2;
    grid-row: 2;
    padding-left: min(6.25vw, 120px)
}

.WWD-list .sub_top .top_tit-inner .desc p {
    font-size: min(1.25vw, 24px);
    line-height: min(2vw, 38.4px);
    font-weight: 400
}

.WWD-list .sub_top .top_tit-inner .desc .m_btn[line=round] {
    margin-top: min(2.0833333333vw, 40px);
    padding: 0 min(1.6666666667vw, 32px)
}

.WWD-list .sub_top .overflow-ct {
    overflow: hidden;
    margin-top: calc(-1*min(19.53125vw, 375px))
}

.WWD-list .sub_container,
.WWD-list .sub_container .sec_inner {
    background: transparent
}

.WWD-list .sub_container .sec_inner .tab-wrap {
    position: relative;
    z-index: 2
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists {
    margin-top: calc(min(9.375vw, 180px)*-1);
    padding-top: min(5.2083333333vw, 100px)
}

html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists {
    margin-top: calc(min(12.9166666667vw, 248px)*-1)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(29.1145833333vw, 559px);
    height: min(4.1666666667vw, 80px);
    background: #15151599;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: min(.3125vw, 6px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: all .3s ease;
    text-align: center
}

html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
    height: min(7.7083333333vw, 148px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.active {
    background: #fff
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.active span {
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: min(2vw, 38.4px);
    color: #151515
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
    vertical-align: middle;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #ffffff80
}

html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
    line-height: min(1.4583333333vw, 28px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts {
    margin-top: min(8.3333333333vw, 160px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner {
    display: none
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner.active {
    display: block
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul {
    display: flex;
    flex-wrap: wrap;
    gap: min(2.5vw, 48px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item {
    width: calc(33.3333333333% - min(1.6666666667vw, 32px))
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item:nth-child(n+4) {
    margin-top: min(3.75vw, 72px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item:nth-child(3n) {
    margin-right: 0
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail {
    position: relative
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .flag {
    position: absolute;
    width: min(5.625vw, 108px);
    padding: min(.3125vw, 6px) min(.625vw, 12px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f60;
    box-sizing: border-box;
    z-index: 999
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .flag:before {
    content: "";
    display: block;
    background: url(https://www.hanwhaocean.com/images/whatwedo/list/3d.svg) no-repeat center center/contain;
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    margin-right: min(.2083333333vw, 4px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .flag span {
    display: block;
    color: #fff
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .lottie-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: transparent
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .lottie-wrap:hover .lottie {
    opacity: 1
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .lottie-wrap .lottie {
    position: absolute;
    width: min(5.2083333333vw, 100px);
    height: min(5.2083333333vw, 100px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .4s ease-in-out
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn {
    display: block;
    width: 100%;
    text-align: left
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn:hover .picture img {
    transform: scale(1.1)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn:hover span.title {
    background-size: 100% 1px
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn .picture {
    overflow: hidden;
    display: block;
    width: 100%;
    height: min(15.5208333333vw, 298px);
    margin-bottom: min(2.0833333333vw, 40px)
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn .picture img {
    transition: transform 14s cubic-bezier(0, 1, .34, .99);
    width: 100%
}

.WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn span.title {
    font-size: min(1.4583333333vw, 28px);
    font-weight: 400;
    line-height: min(1.75vw, 33.6px);
    display: inline;
    position: relative;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s
}

.WWD-list .m_popup[type=img].descriptionPopup .m_pop_close {
    position: fixed;
    top: min(6.25vw, 120px);
    left: 53%;
    transform: translate(-50%);
    text-align: right;
    width: min(57.5vw, 1104px);
    z-index: 1
}

.WWD-list .m_popup[type=img].descriptionPopup .m_pop_close:hover img {
    transform: rotate(90deg)
}

.WWD-list .m_popup[type=img].descriptionPopup .m_pop_close img {
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    transition: transform .3s
}

.WWD-list .m_popup[type=img].descriptionPopup .wrap {
    padding-top: min(6.25vw, 120px);
    padding-bottom: min(6.25vw, 120px);
    overflow-y: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 0;
    z-index: 1
}

.WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents .pop_cnt_main {
    max-height: none;
    margin-bottom: min(6.25vw, 120px)
}

.WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents .pop_cnt_main .pop_cnt_head_kv {
    display: flex;
    justify-content: center;
    height: min(32.2916666667vw, 620px);
    overflow: hidden
}

.WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents .pop_cnt_main .pop_cnt_head_kv img {
    width: auto;
    object-fit: cover
}

.WWD-list .m_popup[type=img].descriptionPopup section.main {
    max-width: min(47.5vw, 912px);
    margin: 0 auto;
    margin-top: min(4.1666666667vw, 80px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .pop-title-wrap h3 {
    font-size: min(2.7083333333vw, 52px);
    line-height: 1.6
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .pop-title-wrap p {
    margin-top: min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    color: #4b4b4b;
    font-weight: 300
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description {
    margin-top: min(6.25vw, 120px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .num {
    display: block;
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    font-size: min(.9375vw, 18px);
    line-height: min(3.125vw, 60px);
    text-align: center;
    border-radius: 100%;
    background: #fff;
    border: 1px solid #e5e5e5
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .title {
    margin-top: min(1.25vw, 24px);
    font-size: min(1.6666666667vw, 32px);
    line-height: 1.6;
    font-weight: 700
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .desc {
    margin-top: min(2.0833333333vw, 40px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.68;
    color: #4b4b4b;
    font-weight: 300
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table {
    margin-top: min(4.1666666667vw, 80px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table thead tr:first-child td {
    font-weight: 400;
    color: #151515
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table tr>* {
    padding: 0 min(.625vw, 12px);
    text-align: center;
    height: min(5.2083333333vw, 100px);
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table td {
    width: auto
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container {
    position: relative;
    margin-top: min(4.1666666667vw, 80px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper {
    max-width: min(27.5vw, 528px);
    margin: 0 auto
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper .swiper-slide {
    height: min(18.75vw, 360px);
    overflow: hidden
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper .swiper-slide picture {
    display: block;
    width: min(27.5vw, 528px);
    height: 100%
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper .swiper-slide picture img {
    height: 100%
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows {
    position: absolute;
    top: min(7.2916666667vw, 140px);
    width: 100%;
    display: flex;
    justify-content: space-between
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-next,
.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev {
    background: url(https://www.hanwhaocean.com/images/whatwedo/list/popup/arrow.svg) no-repeat center center/contain;
    width: min(4.1666666667vw, 80px);
    height: min(4.1666666667vw, 80px);
    cursor: pointer;
    border-radius: 100%;
    overflow: hidden;
    transition: background-color .3s
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-next:hover,
.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev:hover {
    background-color: #e5e5e5
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev {
    transform: rotate(180deg)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev.swiper-button-disabled,
.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-next.swiper-button-disabled {
    background: url(https://www.hanwhaocean.com/images/whatwedo/list/popup/arrow_disable.svg) no-repeat center center/contain;
    width: min(4.1666666667vw, 80px);
    height: min(4.1666666667vw, 80px);
    transform: rotate(180deg);
    cursor: default
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev.swiper-button-disabled {
    transform: rotate(0)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(.4166666667vw, 8px);
    width: 100%;
    height: min(.1041666667vw, 2px);
    margin-top: min(1.4583333333vw, 28px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-pagination .swiper-pagination-bullet {
    display: block;
    width: min(2.5vw, 48px);
    height: min(.1041666667vw, 2px);
    background: #b8b8b8
}

.WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #151515
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product {
    margin-top: min(6.25vw, 120px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .title {
    padding: min(2.0833333333vw, 40px) 0;
    font-size: min(1.6666666667vw, 32px);
    line-height: 1.6
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container picture {
    display: block
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container picture img {
    width: 100%
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperMain {
    position: relative
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperMain picture {
    display: flex;
    justify-content: center;
    height: min(31.0416666667vw, 596px);
    overflow: hidden
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperMain picture img {
    width: auto;
    object-fit: cover
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperMain picture img {
    width: 100%
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb {
    margin-top: min(2.0833333333vw, 40px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb::-webkit-scrollbar {
    height: min(.15625vw, 3px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb::-webkit-scrollbar-thumb {
    background-color: #151515;
    border: 1.1px solid transparent
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb::-webkit-scrollbar-track {
    background-color: #e5e5e5;
    height: 1px
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide {
    cursor: pointer
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture {
    position: relative;
    height: min(3.75vw, 72px)
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - min(.2083333333vw, 4px));
    height: calc(100% - min(.2083333333vw, 4px));
    background: transparent;
    border: min(.1041666667vw, 2px) solid #ff6600;
    opacity: 0
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture img {
    height: 100%
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide-thumb-active picture:before {
    content: "";
    opacity: 1
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-horizontal>.swiper-scrollbar {
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-scrollbar {
    background: #e5e5e5;
    margin-top: 20px;
    height: 1px
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-scrollbar .swiper-scrollbar-drag {
    height: min(.15625vw, 3px);
    width: 100%;
    position: relative;
    background: #151515;
    left: 0;
    top: calc(min(.1041666667vw, 2px)*-1)
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 min(1.0416666667vw, 20px);
    box-sizing: border-box;
    z-index: 1
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-next,
.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-prev {
    background: url(https://www.hanwhaocean.com/images/whatwedo/list/popup/main-arrow.svg) no-repeat center center/contain;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    border-radius: 100%;
    transition: background-color .3s;
    cursor: pointer
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-next:hover,
.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-prev:hover {
    background-color: #151515
}

.WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-next {
    transform: rotate(180deg)
}

@media (max-width: 768px) {

    .WWD-list#WWD-SUBM .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-DES .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-FRI .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-COR .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-AUX .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-UNM .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-GC .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-GS .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    .WWD-list#WWD-MRO .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
        min-width: 85px;
        width: 100%
    }

    html[lang=en] .WWD-list#WWD-SUBM .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-DES .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-FRI .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-COR .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-AUX .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-UNM .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-GC .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-GS .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn,
    html[lang=en] .WWD-list#WWD-MRO .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
        min-width: 128px
    }

    .WWD-list#WWD-SUBM .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-DES .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-FRI .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-COR .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-AUX .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-UNM .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-GC .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-GS .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long,
    .WWD-list#WWD-MRO .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.tab-btn-long {
        min-width: 139px
    }

    .WWD-list .sub_top .top_tit-inner {
        display: block
    }

    .WWD-list .sub_top .top_tit-inner.absol .desc {
        padding-left: 0
    }

    .WWD-list .sub_top .top_tit-inner .sub_top_tit.m_h2 {
        font-size: 28px !important
    }

    .WWD-list .sub_top .top_tit-inner .desc {
        margin-top: 20px;
        padding-left: 0
    }

    .WWD-list .sub_top .top_tit-inner .desc p {
        font-size: 16px;
        line-height: 1.72
    }

    .WWD-list .sub_top .top_tit-inner .desc .m_btn[line=round] {
        margin-top: 20px;
        height: 48px !important;
        padding: 0 24px !important
    }

    .WWD-list .sub_top .top_tit-inner .desc .m_btn[line=round] span.txt {
        line-height: 48px !important;
        font-size: 18px !important
    }

    .WWD-list .sub_container .sec_inner {
        padding: 0
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists {
        margin-top: -94px;
        padding-top: 30px
    }

    html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists {
        margin-top: -94px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul {
        width: 100%;
        gap: 0;
        justify-content: normal;
        overflow-y: auto
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li {
        width: 100%
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
        width: 100%;
        height: 64px
    }

    html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
        height: 64px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.active {
        background: #15151599
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.active span {
        font-size: 16px;
        line-height: 1.72;
        color: #fff
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
        font-size: 16px;
        line-height: 1.72;
        color: #ffffff80
    }

    html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
        line-height: 1.21
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts {
        padding: 0 20px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul {
        flex-direction: column;
        gap: 40px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item {
        width: 100%
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item.goto-detail .lottie-wrap {
        display: none
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item.goto-detail .flag {
        width: 108px;
        padding: 6px 12px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item.goto-detail .flag:before {
        width: 20px;
        height: 20px;
        margin-right: 4px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item.goto-detail .flag .m_caption {
        font-size: 14px !important;
        line-height: 1.72 !important
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item .item-btn .picture {
        margin-top: 0;
        margin-bottom: 16px;
        height: 50.134vw
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul>li.item .item-btn span.title {
        font-size: 20px;
        line-height: 1.68
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_cnt_inner {
        margin-top: 76px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_cnt_inner .pop_detail_box {
        height: calc(100vh - 76px)
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner {
        top: 0 !important;
        margin-top: 0 !important;
        opacity: 1;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .m_pop_close {
        width: 36px;
        height: 36px;
        top: 16px;
        right: 16px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents {
        padding: 0;
        width: 100%;
        min-height: 0;
        max-height: none;
        height: 100%;
        border-radius: 0
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 20px;
        padding: 0 20px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_head .m_h8 {
        font-size: 24px !important
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main {
        padding: 0 20px 56px;
        max-height: calc(100% - 120px);
        max-height: calc(100svh - 120px);
        margin-bottom: 0
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main .pop_cnt_info {
        margin-bottom: 40px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main .pop_cnt_info li>span {
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main .pop_cnt_info li span.pop_year {
        padding-right: 25px;
        font-size: 16px;
        line-height: 1.72
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main .pop_cnt_info li span.pop_year:after {
        height: 16px;
        top: 6px;
        right: 12px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table col:first-child {
        min-width: 200px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table .colg-1 {
        width: 85%
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table .colg-2 {
        width: 15%
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table tr th {
        padding: 12px 20px;
        font-size: 14px;
        line-height: 1.72
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table thead th,
    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table thead td {
        text-align: center
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table thead th:not(.border) {
        border-right: 0
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table tbody tr>* {
        padding: 12px 20px
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_cnt_main table tbody tr th {
        border-right: 1px solid #E5E5E5;
        color: #151515
    }

    .WWD-list .m_popup:not(.descriptionPopup) .pop_inner .pop_contents .pop_foot {
        display: none
    }

    .WWD-list .m_popup[type=img].descriptionPopup .m_pop_close {
        width: 36px;
        height: 36px;
        top: 18px;
        right: 18px;
        left: auto;
        transform: none;
        z-index: 2
    }

    .WWD-list .m_popup[type=img].descriptionPopup .m_pop_close picture {
        display: inline-block
    }

    .WWD-list .m_popup[type=img].descriptionPopup .m_pop_close img {
        width: 100%;
        height: 100%
    }

    .WWD-list .m_popup[type=img].descriptionPopup .wrap {
        width: 100%;
        padding: 0;
        left: auto;
        transform: none
    }

    .WWD-list .m_popup[type=img].descriptionPopup .pop_inner {
        width: 100%
    }

    .WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents {
        width: 100%;
        border-radius: 0
    }

    .WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents .pop_cnt_main {
        margin-bottom: 0
    }

    .WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents .pop_cnt_main .pop_cnt_head_kv {
        width: 100%;
        height: 56.27vw
    }

    .WWD-list .m_popup[type=img].descriptionPopup .pop_inner .pop_contents .pop_cnt_main .pop_cnt_head_kv img {
        width: 100%
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main {
        max-width: none;
        margin-top: 60px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .pop-title-wrap {
        padding: 0 20px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .pop-title-wrap h3 {
        font-size: 24px;
        line-height: 1.56;
        font-weight: 400
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .pop-title-wrap p {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.72
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description {
        margin-top: 60px;
        padding: 0 20px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .num {
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .title {
        margin-top: 24px;
        font-size: 20px;
        line-height: 1.56
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .desc {
        margin-top: 40px;
        font-size: 16px;
        line-height: 1.72;
        font-weight: 400
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .table-wrap {
        overflow-y: auto
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table {
        margin-top: 80px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table tr>* {
        height: 64px;
        font-size: 14px;
        line-height: 1.72;
        padding: 0 8px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table tr td {
        min-width: 100px;
        width: 100%;
        max-width: 100px;
        box-sizing: border-box
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description table tbody tr>* {
        height: 88px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container {
        margin-top: 80px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper {
        max-width: 76.12%
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper .swiper-slide {
        height: auto
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .listPopupSwiper .swiper-slide picture {
        width: auto;
        height: 46.4vw
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows {
        top: 18vw
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev.swiper-button-disabled,
    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-next.swiper-button-disabled,
    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-prev,
    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-arrows .swiper-button-next {
        width: 40px;
        height: 40px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-pagination {
        max-width: 216px;
        margin: 20px auto 0;
        height: 2px;
        gap: 4px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.main .description-wrap li.description .swiper-container .swiper-pagination .swiper-pagination-bullet {
        max-width: 40px;
        width: 100%;
        height: 2px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product {
        margin-top: 80px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .title {
        padding: 0 20px;
        margin-bottom: 20px;
        font-size: 20px;
        line-height: 1.56
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperMain {
        margin: 0 20px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperMain picture {
        height: 59.5vw
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb {
        margin-top: 20px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide {
        width: 92px;
        height: 64px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture {
        height: 100%
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture:before {
        content: "";
        border: 2px solid #ff6600;
        width: calc(100% - 4px);
        height: calc(100% - 4px)
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-scrollbar {
        height: 3px;
        max-width: calc(100% - 40px);
        margin: 20px auto 80px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-scrollbar .swiper-scrollbar-drag {
        height: 3px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows {
        padding: 0 12px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-prev,
    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .swiper-arrows .swiper-button-next {
        width: 36px;
        height: 36px
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .WWD-list .sub_top .top_tit-inner {
        padding-bottom: 312px
    }

    .WWD-list .sub_top .top_tit-inner .desc,
    .WWD-list .sub_top .top_tit-inner.absol .desc {
        padding-left: 76px
    }

    .WWD-list .sub_top .top_tit-inner .desc p {
        font-size: 15px;
        line-height: 22px
    }

    .WWD-list .sub_top .top_tit-inner .desc .m_btn[line=round] {
        margin-top: 26px
    }

    .WWD-list .sub_top .overflow-ct {
        margin-top: -236px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists {
        margin-top: -113px;
        padding-top: 63px
    }

    html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists {
        margin-top: -156px;
        padding-top: 63px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts {
        margin-top: 100px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
        font-size: 15px;
        line-height: 22px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn.active span {
        font-size: 15px;
        line-height: 22px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
        height: 50px
    }

    html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn {
        height: 93px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn span.title {
        font-size: 18px;
        line-height: 20px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item .item-btn .picture {
        margin-bottom: 26px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .flag {
        width: auto;
        padding: 4px 8px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .flag:before {
        width: 12px;
        height: 12px;
        margin-right: 3px
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-conts .tab-content-inner>ul li.item.goto-detail .lottie-wrap .lottie {
        width: 64px;
        height: 64px
    }

    html[lang=en] .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
        line-height: 1.21
    }

    .WWD-list .sub_container .sec_inner .tab-wrap .tab-lists>ul>li .tab-btn span {
        font-size: 13px
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture:before {
        width: calc(100% - 4px);
        height: calc(100% - 4px)
    }

    .WWD-list .m_popup[type=img].descriptionPopup section.swiper-product .productSwiper-container .productSwiperThumb .swiper-slide picture:before {
        border: 2px solid #ff6600
    }
}

.wwd-mp .sub_container,
.wwd-mp .sub_container .sec_inner {
    background: transparent
}

.wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .title-wrap {
    margin-top: min(10.4166666667vw, 200px)
}

.wwd-mp .sub_container .sec_inner .top-wrap {
    display: flex;
    flex-direction: column
}

.wwd-mp .sub_container .sec_inner .btn-wrap {
    margin-left: auto;
    margin-top: min(6.25vw, 120px);
    text-align: right
}

.wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight {
    padding: 0 min(1.25vw, 24px);
    border: none
}

.wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight .icon {
    background-image: url(https://www.hanwhaocean.com/images/common/icon_excel_b_24x24.svg);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(152deg) brightness(103%) contrast(100%)
}

.wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight:hover {
    border-color: #f60
}

.wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight:hover .icon {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(152deg) brightness(103%) contrast(100%) !important
}

.wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight:before {
    background-color: #f60
}

.wwd-mp .sub_container .sec_inner .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: min(1.875vw, 36px);
    margin-top: min(3.125vw, 60px)
}

.wwd-mp .sub_container .sec_inner .title-wrap .title {
    display: block;
    font-size: min(1.4583333333vw, 28px);
    font-weight: 400;
    line-height: 1.68
}

.wwd-mp .sub_container .sec_inner .title-wrap .date {
    display: block;
    font-size: min(.8333333333vw, 16px);
    font-weight: 400;
    line-height: 1.5
}

.wwd-mp .sub_container .sec_inner .column-contents {
    display: flex;
    justify-content: space-between
}

.wwd-mp .sub_container .sec_inner .column-contents .cont {
    width: 48.57%
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half {
    display: flex;
    width: 100%;
    border-top: min(.1041666667vw, 2px) solid #151515;
    border-bottom: min(.1041666667vw, 2px) solid #151515
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half table {
    border-top: none;
    border-bottom: none;
    width: 50%
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half table tr {
    border-bottom: min(.1041666667vw, 2px) solid #151515
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half table tr:last-child {
    border-bottom: none
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half table tr:last-child th {
    border-bottom: none
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half table th {
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: 1.6;
    border-bottom: min(.1041666667vw, 2px) solid #151515
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half table td {
    padding: 0;
    text-align: right;
    font-size: min(2.7083333333vw, 52px);
    font-weight: 400;
    line-height: 1.32;
    color: #151515
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap {
    position: relative;
    width: 50%
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .func {
    position: absolute;
    display: block;
    top: 6.79%;
    left: 10.96%;
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: 1.6
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap {
    overflow: hidden;
    position: absolute;
    right: 1.2%;
    bottom: 4%
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap.active .sum {
    animation: odometerShowup .7s 1s forwards
}

@keyframes odometerShowup {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap .sum {
    font-size: min(5.2083333333vw, 100px);
    font-weight: 400;
    line-height: 1.4;
    transform: translateY(100%)
}

.wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap .sum .odometer-formatting-mark {
    display: inline-block
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table {
    border-top: min(.1041666667vw, 2px) solid #151515
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table thead tr:first-child th,
.wwd-mp .sub_container .sec_inner .column-contents .cont table thead tr:first-child td {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    font-weight: 400
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table tr {
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table tr.grayBg {
    background: #f5f5f5
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table tr.bold th {
    font-weight: 400;
    color: #151515;
    text-align: left;
    padding-left: min(2.2916666667vw, 44px);
    padding-right: 0
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table tr.bold td {
    font-weight: 400
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table tr.orange th,
.wwd-mp .sub_container .sec_inner .column-contents .cont table tr.orange td {
    color: #f60
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table th {
    padding: min(1.875vw, 36px) 0 min(1.875vw, 36px) min(2.2916666667vw, 44px);
    text-align: left;
    vertical-align: top;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 400
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table td {
    padding: min(1.875vw, 36px) min(4.375vw, 84px) min(1.875vw, 36px) 0;
    color: #4b4b4b;
    text-align: left;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 300
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table td strong.td_title {
    display: block;
    margin-bottom: min(.4166666667vw, 8px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 700;
    color: #151515;
    line-height: 1.4
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table.twin th {
    padding: min(1.875vw, 36px) min(2.2916666667vw, 44px) min(1.875vw, 36px) 0;
    color: #4b4b4b;
    text-align: right;
    vertical-align: top;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 300;
    border-right: min(.0520833333vw, 1px) solid #E5E5E5
}

.wwd-mp .sub_container .sec_inner .column-contents .cont table.twin td {
    padding: min(1.875vw, 36px) min(4.375vw, 84px) min(1.875vw, 36px) 0;
    color: #4b4b4b;
    text-align: right;
    font-size: min(1.0416666667vw, 20px);
    line-height: 1.4;
    font-weight: 300
}

@media (max-width: 768px) {
    .wwd-mp .sub_container .sec_inner .top-wrap {
        flex-direction: column-reverse
    }

    .wwd-mp .sub_container .sec_inner .btn-wrap {
        margin-top: 16px;
        margin-bottom: 24px;
        margin-left: 0;
        text-align: left
    }

    .wwd-mp .sub_container .sec_inner .btn-wrap .btn_excel_highlight {
        background-color: #4b4b4b
    }

    .wwd-mp .sub_container .sec_inner .title-wrap {
        margin-top: 60px;
        margin-bottom: 0
    }

    .wwd-mp .sub_container .sec_inner .title-wrap .title {
        font-size: 20px;
        line-height: 1.56
    }

    .wwd-mp .sub_container .sec_inner .title-wrap .date {
        font-size: 14px;
        line-height: 1.72;
        color: #999
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half {
        flex-direction: column;
        border-top: 1px solid #151515;
        border-bottom: 1px solid #151515
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table {
        width: 100%
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table tr {
        border-bottom: 1px solid #151515
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table th {
        vertical-align: middle;
        font-size: 14px;
        padding: 0;
        border-bottom: 1px solid #151515
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table td {
        font-size: 28px;
        color: #4b4b4b;
        padding: 20px 0
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap {
        width: 100%;
        border-top: 1px solid #151515
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .func {
        position: static;
        font-size: 14px;
        padding: 16px 0 23px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap {
        position: static;
        text-align: right;
        margin-bottom: 8px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap .sum {
        font-size: 40px;
        line-height: 1.32
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .title-wrap {
        margin-top: 70px
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents {
        margin-top: 16px;
        flex-direction: column
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont {
        width: 100%
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont+.cont table {
        border-top: none
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont+.cont .twin thead {
        display: none
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin tr {
        border-bottom: 1px solid #e5e5e5
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin th {
        border-right: 1px solid #e5e5e5
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin col:first-child {
        width: 59.8%
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin thead th,
    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin thead td {
        padding-left: 0;
        padding-right: 0
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin th,
    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .column-contents .cont table.twin td {
        font-size: 14px;
        line-height: 1.72;
        padding: 12px 20px
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .wwd-mp .sub_container .sec_inner .btn-wrap {
        margin-top: 76px
    }

    .wwd-mp .sub_container .sec_inner .title-wrap {
        margin-top: 38px;
        margin-bottom: 22px
    }

    .wwd-mp .sub_container .sec_inner .title-wrap .title {
        font-size: 15px
    }

    .wwd-mp .sub_container .sec_inner .title-wrap .date {
        font-size: 10px;
        font-weight: 300
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table th {
        font-size: 15px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table th {
        padding: 22px 0 22px 28px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half table td {
        font-size: 32px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .func {
        font-size: 15px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont.half .total-wrap .sum-wrap.active .sum {
        font-size: 63px
    }

    .wwd-mp .sub_container .sec_inner:nth-of-type(n+2) .title-wrap {
        margin-top: 126px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table.twin th {
        font-size: 12px;
        vertical-align: middle;
        padding: 22px 28px 22px 0
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table.twin td {
        padding: 22px 52px 22px 0;
        font-size: 12px
    }

    .wwd-mp .sub_container .sec_inner .column-contents .cont table tr.bold th {
        padding-left: 28px
    }
}

@media (max-width: 768px) {
    .wwd-mp.en .sub_container .sec_inner .title-wrap {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px
    }

    .wwd-mp.en .sub_container .sec_inner .title-wrap .date {
        font-weight: 300
    }
}

@media print {
    body {
        padding-top: -108px
    }

    header#HEADER {
        position: relative;
        color: #000
    }

    header#HEADER>* {
        position: relative;
        color: #000 !important
    }

    footer#FOOTER .footer-container .footer-inner>* {
        color: #000 !important
    }

    #FOOTER .footer-container .btn_go_top,
    #FT10 .main-inner .sub_container .ft_top .ft_print,
    #FT10 .main-inner .sub_container .ft_select,
    #FT20 .main-inner .sub_container .ft_top .ft_print,
    #FT20 .main-inner .sub_container .ft_select {
        display: none
    }
}

#FT10 .pc-only,
#FT20 .pc-only {
    display: inline-block !important
}

#FT10 .mo-only,
#FT20 .mo-only {
    display: none !important
}

#FT10 .main-inner .sub_container,
#FT20 .main-inner .sub_container {
    width: 100%;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    max-width: 1920px
}

#FT10 .main-inner .sub_container .ft_top,
#FT20 .main-inner .sub_container .ft_top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: min(2.0833333333vw, 40px);
    margin-top: min(4.1666666667vw, 80px);
    margin-bottom: min(6.5104166667vw, 125px)
}

#FT10 .main-inner .sub_container .ft_top .ft_select,
#FT20 .main-inner .sub_container .ft_top .ft_select {
    position: relative;
    width: min(20vw, 384px)
}

#FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more,
#FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more {
    position: relative;
    width: 100%;
    text-align: left;
    padding: min(.9895833333vw, 19px) 0 min(.9375vw, 18px) min(1.09375vw, 21px);
    box-sizing: border-box;
    border: min(.0520833333vw, 1px) solid #E5E5E5;
    border-radius: min(.3125vw, 6px)
}

#FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more:before,
#FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more:before {
    content: "";
    position: absolute;
    top: 50%;
    right: min(1.3020833333vw, 25px);
    width: min(.8333333333vw, 16px);
    height: min(.8333333333vw, 16px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
    transform: translateY(-50%) rotate(180deg);
    transition: .3s transform
}

#FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more.on:before,
#FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more.on:before {
    transform: translateY(-50%) rotate(0)
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list {
    position: relative;
    transform: translateY(min(.2083333333vw, 4px))
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: min(23.75vw, 456px);
    padding: 0;
    box-sizing: border-box;
    border-radius: min(.3125vw, 6px);
    background-color: #fff;
    overflow-y: scroll;
    transition: .3s cubic-bezier(.39, 0, .12, .99);
    transform: scaleY(0);
    transform-origin: top
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li {
    padding: min(.5208333333vw, 10px) min(1.0416666667vw, 20px)
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a {
    position: relative;
    color: #999;
    cursor: pointer
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:after,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: min(.0520833333vw, 1px);
    background: #151515
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:hover,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:hover {
    color: #151515;
    transition: .3s
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:hover:after,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:hover:after {
    width: 100%
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li.on a,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li.on a {
    color: #151515
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li.on a:after,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li.on a:after {
    width: 100%
}

#FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list.on ul,
#FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list.on ul {
    padding: min(.5208333333vw, 10px) 0;
    border: min(.0520833333vw, 1px) solid #E5E5E5;
    transform: scaleY(1)
}

#FT10 .main-inner .sub_container .ft_txt,
#FT20 .main-inner .sub_container .ft_txt {
    word-break: break-all;
    font-weight: 300
}

#FT10 .main-inner .sub_container .ft_txt strong,
#FT20 .main-inner .sub_container .ft_txt strong {
    font-weight: 400
}

#FT10 .main-inner .sub_container .ft_contents,
#FT20 .main-inner .sub_container .ft_contents {
    font-family: Hanwha Gothic
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction,
#FT20 .main-inner .sub_container .ft_contents .ft_introduction {
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_date_revision,
#FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_date_revision {
    margin-top: min(.4166666667vw, 8px);
    margin-bottom: min(1.875vw, 36px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol,
#FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: min(2.0833333333vw, 40px) min(.4166666667vw, 8px);
    margin-bottom: min(1.875vw, 36px);
    border-top: min(.0520833333vw, 1px) solid #E5E5E5;
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li,
#FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li {
    position: relative;
    font-weight: 300;
    padding-left: min(2.1875vw, 42px);
    box-sizing: border-box
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li .intro_list_num,
#FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li .intro_list_num {
    position: absolute;
    top: 0;
    left: 0;
    color: #4b4b4b
}

#FT10 .main-inner .sub_container .ft_contents .ft_list,
#FT20 .main-inner .sub_container .ft_contents .ft_list {
    margin-top: min(6.25vw, 120px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area {
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li>.ft_txt,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li>.ft_txt {
    margin-top: min(1.0416666667vw, 20px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table {
    width: 100%;
    text-align: center;
    font-weight: 300;
    color: #4b4b4b;
    border-top: min(.1041666667vw, 2px) solid #151515;
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5;
    margin-top: min(1.875vw, 36px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead {
    height: min(5.2083333333vw, 100px);
    font-weight: 400;
    color: #151515;
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr {
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td {
    height: min(7.0833333333vw, 136px);
    font-weight: 300
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.row3,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.row3 {
    height: min(8.75vw, 168px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left {
    text-align: left;
    padding: 0 min(4.375vw, 84px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .ft_other_box,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .ft_other_box {
    background-color: #f5f5f5
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul {
    padding: min(2.0833333333vw, 40px);
    margin-top: min(1.7708333333vw, 34px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li {
    font-weight: 300
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit,
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit {
    display: block;
    color: #151515;
    font-weight: 400;
    margin-bottom: min(.4166666667vw, 8px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li:not(:last-child),
#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li:not(:last-child) {
    margin-bottom: min(1.4583333333vw, 28px)
}

#FT10 .main-inner .sub_container .hf_L_E,
#FT20 .main-inner .sub_container .hf_L_E {
    font-family: Hanwha
}

#FT10 .main-inner .sub_container .m-t-36,
#FT20 .main-inner .sub_container .m-t-36 {
    margin-top: min(1.875vw, 36px) !important
}

#FT10 .main-inner .sub_container .m-t-20,
#FT20 .main-inner .sub_container .m-t-20 {
    margin-top: min(1.0416666667vw, 20px) !important
}

@media (max-width: 1023px) {

    #FT10 .main-inner .sub_container .m-t-20,
    #FT20 .main-inner .sub_container .m-t-20 {
        margin-top: 12px !important
    }
}

@media (max-width: 768px) {

    #FT10 .main-inner .sub_container .m-t-20,
    #FT20 .main-inner .sub_container .m-t-20 {
        margin-top: 28px !important
    }
}

#FT10 .main-inner .sub_container .m-b-36,
#FT20 .main-inner .sub_container .m-b-36 {
    margin-bottom: min(1.875vw, 36px) !important
}

#FT10 .main-inner .sub_container .f_w_400,
#FT20 .main-inner .sub_container .f_w_400 {
    font-weight: 400
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
    height: min(13.125vw, 252px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:not(:nth-child(6), :nth-child(12)) {
    margin-bottom: min(1.0416666667vw, 20px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) .ft_other_box.type_table ul {
    width: 100%;
    display: flex;
    padding: min(2.0833333333vw, 40px);
    box-sizing: border-box
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) .ft_other_box.type_table ul li {
    width: 100%
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table {
    margin: min(1.3020833333vw, 25px) 0 0;
    border-bottom: 0;
    border-top: min(.0520833333vw, 1px) solid #151515
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody {
    display: block;
    padding-top: min(1.0416666667vw, 20px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr {
    display: block;
    padding: min(.4166666667vw, 8px) 0;
    border-bottom: none;
    font-size: min(.9375vw, 18px)
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr:last-child {
    padding-bottom: 0
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr th {
    width: min(8.3333333333vw, 160px);
    text-align: left;
    font-weight: 400;
    line-height: min(1.3125vw, 25.2px);
    color: #151515
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr td {
    height: auto;
    font-weight: 300;
    line-height: min(1.3125vw, 25.2px);
    border-bottom: 0;
    color: #151515
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr td span {
    font-weight: 200
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(12) .type_list ul li a {
    position: relative
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(12) .type_list ul li a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: min(.0520833333vw, 1px);
    background: #151515;
    transition: .3s
}

#FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(12) .type_list ul li a:hover:after {
    width: 100%
}

#FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
    height: min(10.7291666667vw, 206px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:not(:nth-child(5), :nth-child(10)) {
    margin-bottom: min(1.0416666667vw, 20px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table th:first-child {
    width: min(27.5vw, 528px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table thead th {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table tbody {
    font-weight: 300
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(3) table.ft-table {
    white-space: nowrap
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(3) table.ft-table tbody tr td {
    height: min(5.2083333333vw, 100px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(3) table.ft-table thead tr th:first-child {
    width: min(15vw, 288px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(3) table.ft-table thead tr th:nth-child(n+3) {
    width: min(13.75vw, 264px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(3) table.ft-table tbody tr th.sp-auth {
    width: min(8.5416666667vw, 164px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(4) table.ft-table {
    border-bottom: 0
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(4) table.ft-table thead tr th:first-child {
    width: min(15vw, 288px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(4) table.ft-table thead tr th:nth-child(n+2) {
    width: 41.43%
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(4) table.ft-table tbody tr:last-child {
    border-bottom: 0
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(4) table.ft-table tbody tr td {
    height: min(8.75vw, 168px)
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(5) table.ft-table {
    white-space: nowrap
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(5) table.ft-table thead tr th {
    width: 20%
}

#FT20 .main-inner .sub_container .ft_contents .ft_list li:nth-child(5) table.ft-table tbody tr td {
    height: min(5.2083333333vw, 100px)
}

@media (max-width: 1023px) {

    #FT10 .main-inner .sub_container,
    #FT20 .main-inner .sub_container {
        padding: 0 50px
    }

    #FT10 .main-inner .sub_container .ft_top,
    #FT20 .main-inner .sub_container .ft_top {
        column-gap: 24px;
        margin-top: 60px;
        margin-bottom: 80px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more,
    #FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more {
        padding: 8px 0 8px 12px;
        border-radius: 4px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more:before,
    #FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more:before {
        right: 8.28px;
        width: 12px;
        height: 12px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list {
        transform: translateY(4px)
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul {
        max-height: 188px;
        border-radius: 4px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li {
        padding: 8px 12px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:after,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:after {
        height: 1px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list.on ul,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list.on ul {
        padding: 8px 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction {
        row-gap: 80px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_date_revision,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_date_revision {
        margin-top: 4px;
        margin-bottom: 20px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        padding: 16px 4px;
        margin-bottom: 20px;
        border-top: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li {
        width: 50%;
        padding-left: 28px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list,
    #FT20 .main-inner .sub_container .ft_contents .ft_list {
        margin-top: 80px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area {
        row-gap: 80px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li>.ft_txt,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li>.ft_txt {
        margin-top: 12px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table {
        border-top: 2px solid #151515;
        border-bottom: 1px solid #E5E5E5;
        margin-top: 24px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead {
        height: 64px;
        border-bottom: 1px solid #E5E5E5
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr {
        border-bottom: 1px solid #E5E5E5
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td {
        height: 94px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.row3,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.row3 {
        height: 109px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left {
        padding: 0 52px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul {
        padding: 16px;
        margin-top: 26px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit {
        margin-bottom: 4px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li:not(:last-child),
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li:not(:last-child) {
        margin-bottom: 12px
    }

    #FT10 .main-inner .sub_container .m-t-36,
    #FT20 .main-inner .sub_container .m-t-36 {
        margin-top: 24px !important
    }

    #FT10 .main-inner .sub_container .m-b-36,
    #FT20 .main-inner .sub_container .m-b-36 {
        margin-bottom: 24px !important
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select {
        width: 25%
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 188px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:not(:nth-child(6), :nth-child(12)) {
        margin-bottom: 10px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) .ft_other_box.type_table ul {
        padding: 20px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table {
        margin: 16px 0 0;
        border-top: 1px solid #151515
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody {
        padding-top: 10px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr {
        padding: 4px 0;
        font-size: 14px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr th {
        width: 64px;
        line-height: 25.2px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr td {
        line-height: 25.2px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(12) .type_list ul li a:after {
        height: 1px
    }

    #FT20 .main-inner .sub_container .ft_top .ft_select {
        width: 41.6666666667%
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 140px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:not(:nth-child(5), :nth-child(10)) {
        margin-bottom: 10px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table th:first-child {
        width: 30.4761904762%
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table thead th {
        font-size: 14px;
        line-height: 23.52px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr td {
        height: 64px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table thead tr th:first-child {
        width: 16.6666666667%
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table thead tr th:nth-child(n+3) {
        width: 15.2380952381%
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr th.sp-auth {
        width: 9.7619047619%
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) table.ft-table thead tr th:first-child {
        width: 16.6666666667%
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) table.ft-table tbody tr td {
        height: 109px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table tbody tr td {
        height: 64px
    }
}

@media (max-width: 768px) {

    #FT10 .pc-only,
    #FT20 .pc-only {
        display: none !important
    }

    #FT10 .mo-only,
    #FT20 .mo-only {
        display: inline-block !important
    }

    #FT10 .main-inner .sub_container,
    #FT20 .main-inner .sub_container {
        padding: 0 20px
    }

    #FT10 .main-inner .sub_container .ft_top,
    #FT20 .main-inner .sub_container .ft_top {
        column-gap: 0;
        margin-top: 60px;
        margin-bottom: 40px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_print,
    #FT20 .main-inner .sub_container .ft_top .ft_print {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select,
    #FT20 .main-inner .sub_container .ft_top .ft_select {
        width: 100%
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more,
    #FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more {
        padding: 12px 0 12px 16px;
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        font-size: 14px !important
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .btn-version_more:before,
    #FT20 .main-inner .sub_container .ft_top .ft_select .btn-version_more:before {
        right: 16px;
        width: 16px;
        height: 16px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list {
        transform: translateY(4px);
        font-size: 14px !important
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul {
        max-height: none;
        width: 100%;
        border-radius: 8px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li {
        padding: 12px 16px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:after,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list ul li a:after {
        height: 1px
    }

    #FT10 .main-inner .sub_container .ft_top .ft_select .f_version_list.on ul,
    #FT20 .main-inner .sub_container .ft_top .ft_select .f_version_list.on ul {
        padding: 10px 0;
        border: 1px solid #E5E5E5;
        transform: scaleY(1)
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction {
        row-gap: 60px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_txt,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_txt {
        font-size: 14px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_date_revision,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_date_revision {
        margin-top: 8px;
        margin-bottom: 28px;
        font-size: 14px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        padding: 28px 0;
        margin-bottom: 28px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li {
        width: 100%;
        padding-left: 29px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list,
    #FT20 .main-inner .sub_container .ft_contents .ft_list {
        margin-top: 80px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area {
        row-gap: 60px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li>.ft_txt,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li>.ft_txt {
        margin-top: 16px;
        font-size: 14px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table {
        margin-top: 28px;
        font-size: 14px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead {
        height: 80px;
        padding: 20px 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead th,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table thead th {
        padding: 20px 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td {
        height: auto;
        padding: 20px 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.row3,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.row3 {
        height: auto
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left {
        padding: 20px 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul {
        padding: 20px;
        margin-top: 28px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit {
        margin-bottom: 4px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li:not(:last-child),
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li:not(:last-child) {
        margin-bottom: 16px
    }

    #FT10 .main-inner .sub_container .m-t-36,
    #FT20 .main-inner .sub_container .m-t-36 {
        margin-top: 28px !important
    }

    #FT10 .main-inner .sub_container .m-b-36,
    #FT20 .main-inner .sub_container .m-b-36 {
        margin-bottom: 28px !important
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: auto
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:not(:last-child) {
        margin-bottom: 16px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) .ft-table tbody .left {
        padding-right: 12px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8) .ft-table tbody td {
        text-align: left;
        padding-right: 10px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) .ft_other_box.type_table ul {
        flex-direction: column;
        padding: 20px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) .ft_other_box.type_table ul li:nth-child(2) {
        margin-top: 40px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table {
        margin: 12px 0 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody {
        display: block;
        padding-top: 20px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr {
        padding: 0 0 8px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr:last-child {
        padding-bottom: 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr th {
        width: 120px
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) table tbody tr .left {
        padding: 0
    }

    #FT10 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(12) .type_list ul li a:after {
        content: "";
        height: 1px
    }

    #FT20 .main-inner .sub_container {
        padding: 0
    }

    #FT20 .main-inner .sub_container .ft_top,
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: auto
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li {
        margin-bottom: 16px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:last-child {
        margin-bottom: 0
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li:nth-child(5),
    #FT20 .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol li :nth-child(10) {
        margin-bottom: 10px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(1) {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(1) .type_list ul li {
        padding-left: 0 !important
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table th:first-child {
        width: 120px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table thead th {
        font-size: 14px;
        font-weight: 400;
        line-height: 24.08px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table tbody {
        font-weight: 300
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table tbody th {
        padding-right: 15px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(2) table.ft-table tbody tr {
        border-bottom: 1px solid #fff
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3)>h3 {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) .table-ct {
        width: 100%;
        overflow: auto
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table {
        margin-left: 20px;
        margin-right: 20px;
        width: 100%;
        white-space: normal;
        word-break: break-all
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr:last-child {
        border-bottom: 1px solid #fff
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr td {
        height: 80px;
        min-width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr th {
        min-width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table thead tr th:first-child {
        width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table thead tr th:nth-child(3) {
        width: 100px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table thead tr th:nth-child(n+4) {
        width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr th.sp-auth {
        width: 60px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr td:last-child {
        padding: 20px 11px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) table.ft-table thead tr th:first-child {
        width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) table.ft-table thead tr th:nth-child(2) {
        width: 100px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) table.ft-table thead tr th:last-child {
        width: 155px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) table.ft-table tbody tr td {
        height: 136px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(4) .ft_other_box ul li {
        padding: 0
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5)>h3 {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5)>p.ft_txt {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) .table-ct {
        width: 100%;
        overflow: auto
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table {
        margin-left: 20px;
        margin-right: 20px;
        width: 100%;
        white-space: normal;
        word-break: break-all
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table thead tr th {
        min-width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table thead tr th:first-child,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table thead tr th:nth-child(n+4) {
        width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table thead tr th:nth-child(2) {
        width: 155px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table thead tr th:nth-child(3) {
        width: 100px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table tbody tr:last-child {
        border-bottom: 1px solid #fff
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table tbody tr td {
        height: 80px;
        min-width: 80px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table tbody tr td:last-child {
        padding: 20px 11px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(6)>h3,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(7)>h3,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8)>h3,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(9)>h3 {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(6)>p.ft_txt,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(7)>p.ft_txt,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8)>p.ft_txt,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(9)>p.ft_txt {
        padding: 0 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(6) .ft_other_box,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(7) .ft_other_box,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8) .ft_other_box,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(9) .ft_other_box {
        margin-left: 20px;
        margin-right: 20px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(6) .ft_other_box ul,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(7) .ft_other_box ul,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8) .ft_other_box ul,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(9) .ft_other_box ul {
        margin-bottom: 0 !important
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(6) .ft_other_box ul li,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(7) .ft_other_box ul li,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8) .ft_other_box ul li,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(9) .ft_other_box ul li {
        padding: 0
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(6) .ft_other_box ul li .other_tit,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(7) .ft_other_box ul li .other_tit,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8) .ft_other_box ul li .other_tit,
    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(9) .ft_other_box ul li .other_tit {
        font-size: 14px !important;
        line-height: 24.08px !important
    }
}

#FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
    height: min(14.4270833333vw, 277px)
}

@media (max-width: 1023px) {
    #FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 188px;
        column-gap: 10px
    }
}

@media (max-width: 1023px) and (max-width: 920px) {
    #FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 230px
    }
}

@media (max-width: 1023px) and (max-width: 852px) {
    #FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 266px
    }
}

@media (max-width: 768px) {
    #FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: auto
    }
}

#FT20.en .main-inner .sub_container .ft_contents .ft_list {
    margin-top: min(8.3333333333vw, 160px)
}

#FT20.en .main-inner .sub_container .ft_contents .ft_list li:nth-child(3) table.ft-table {
    line-height: 1.4
}

#FT20.en .main-inner .sub_container .ft_top .ft_select {
    width: min(35vw, 672px)
}

#FT20.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
    height: min(12.0833333333vw, 232px)
}

#FT10.en .main-inner .sub_container .ft_txt,
#FT20.en .main-inner .sub_container .ft_txt {
    word-break: break-word
}

@media (max-width: 1023px) {
    #FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 207px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(10) .ft_other_box.type_table ul li {
        display: flex;
        flex-direction: column;
        justify-content: flex-end
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(2) table tbody tr td,
    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(3) table tbody tr td {
        padding: 20px 10px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(8) table tbody tr td {
        padding: 20px 10px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list {
        margin-top: 100px
    }

    #FT20.en .main-inner .sub_container .ft_top .ft_select .btn-version_more {
        padding: 5px 30px 5px 10px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: 256px;
        column-gap: 10px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(4) table.ft-table tbody tr td {
        height: 135px;
        padding: 20px 10px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(2) table tbody tr td {
        padding: 20px 10px
    }
}

@media (max-width: 768px) {
    #FT20.en .main-inner .sub_container .ft_contents .ft_list {
        margin-top: 80px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: auto
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li table tbody tr td.left {
        padding: 20px 10px
    }

    #FT20.en .main-inner .sub_container .ft_top .ft_select {
        width: 100%
    }

    #FT10.en .main-inner .sub_container .ft_top .ft_select .btn-version_more,
    #FT20.en .main-inner .sub_container .ft_top .ft_select .btn-version_more {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 12px 50px 12px 16px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_introduction .ft_intro_list ol {
        height: auto
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(8) table tbody tr td {
        padding: 10px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(3) table tbody tr td.left,
    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(8) table tbody tr td.left {
        padding: 10px 20px;
        max-width: 50px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(8) table thead tr {
        width: 100%
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(8) table thead tr th:nth-child(1) {
        width: 50%;
        min-width: 160px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(8) .ft-table tbody td:nth-child(1) {
        padding-right: 10px
    }

    #FT10.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li .type_list ul li .other_tit,
    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li .type_list ul li .other_tit {
        font-size: 14px;
        line-height: 24.08px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(3) table.ft-table thead tr th:first-child {
        min-width: 90px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(3) table.ft-table {
        word-break: normal
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(3) table.ft-table thead tr th:nth-child(3) {
        min-width: 120px;
        box-sizing: border-box
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(5) table.ft-table thead tr th:nth-child(2) {
        min-width: 81px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_are>li:nth-child(5) table.ft-table thead tr th:nth-child(2) {
        min-width: 155px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(5) table.ft-table thead tr th:nth-child(3) {
        min-width: 130px;
        height: 112px
    }

    #FT20.en .main-inner .sub_container .ft_contents .ft_list ul.list_item_area>li:nth-child(5) table.ft-table thead tr th:nth-child(4) {
        min-width: 120px
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(3) table.ft-table tbody tr:nth-child(7)>th:first-child {
        border-bottom: 1px solid #fff
    }

    #FT20 .main-inner .sub_container .ft_contents .ft_list ul.list_item_area li:nth-child(5) table.ft-table tbody tr:nth-child(5)>th:first-child {
        border-bottom: 1px solid #fff
    }
}

@media print {
    body {
        padding-top: -108px
    }

    header#HEADER {
        position: relative;
        color: #000
    }

    header#HEADER>* {
        position: relative;
        color: #000 !important
    }

    header#HEADER .depth2_box {
        display: none
    }

    footer#FOOTER .footer-container .footer-inner>* {
        color: #000 !important
    }

    #FOOTER .footer-container .btn_go_top {
        display: none
    }

    #FT30 .pc-only {
        display: inline-block !important
    }

    #FT30 .ta-only,
    #FT30 .mo-only {
        display: none !important
    }

    #FT30 .main-inner .sub_container {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    #FT30 .main-inner .sub_container .ft_top .ft_print {
        display: none
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn .icon:after {
        display: none
    }
}

#FT30 .main-inner .sub_container {
    width: 100%;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    max-width: 1920px
}

#FT30 .main-inner .sub_container .ft_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: min(3.125vw, 60px);
    margin-bottom: min(6.25vw, 120px)
}

#FT30 .main-inner .sub_container .ft_top .ft_txt {
    color: #4b4b4b
}

#FT30 .main-inner .sub_container .ft_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px)
}

#FT30 .main-inner .sub_container .hf_L_E {
    font-family: Hanwha
}

#FT30 .main-inner .sub_container .m-t-36 {
    margin-top: min(1.875vw, 36px) !important
}

#FT30 .main-inner .sub_container .m-b-36 {
    margin-bottom: min(1.875vw, 36px) !important
}

#FT30 .main-inner .sub_container .ft_contents {
    font-family: Hanwha Gothic
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: min(6.25vw, 120px) min(7.5vw, 144px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .num {
    display: inline-block;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    font-size: min(.8333333333vw, 16px);
    font-weight: 400;
    line-height: min(1.25vw, 24px);
    border-radius: 50%;
    background-color: #999;
    color: #fff;
    text-align: center
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: min(5.2083333333vw, 100px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row {
    grid-column: 1/4;
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: min(.625vw, 12px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3 {
    flex-direction: row;
    justify-content: space-between
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(.625vw, 12px);
    width: 100%;
    height: min(10.5208333333vw, 202px);
    font-weight: 300;
    text-align: left
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div p {
    background-color: #f5f5f5;
    z-index: 2;
    padding: min(.4166666667vw, 8px) 0
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(.78125vw, 15px);
    height: min(8.8541666667vw, 170px);
    background: url(https://www.hanwhaocean.com/images/common/icon_down_long_arrow.svg) no-repeat center center;
    background-size: cover
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.up:before {
    transform: translate(-50%, -50%) rotate(180deg)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.x2:before {
    top: min(.8333333333vw, 16px);
    transform: translate(-50%);
    background: url(https://www.hanwhaocean.com/images/common/icon_down_long_2x_arrow.svg) no-repeat center center;
    background-size: cover;
    height: min(26.875vw, 516px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.no-arrow:before {
    background: none
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div .align_top {
    display: flex;
    align-items: flex-start;
    height: min(3.4375vw, 66px);
    box-sizing: border-box;
    column-gap: min(.625vw, 12px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div .align_top .num {
    margin-top: min(.4166666667vw, 8px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col2 {
    grid-column: 1/3
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box {
    display: flex;
    flex-direction: column;
    padding: min(1.796875vw, 34.5px) 0 min(1.7447916667vw, 33.5px);
    background-color: #fff;
    border: min(.0520833333vw, 1px) solid #151515;
    border-radius: min(.2083333333vw, 4px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box.main_box {
    background-color: #f60;
    color: #fff;
    border: none
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box.main_box .main {
    font-size: min(1.4583333333vw, 28px);
    font-weight: 500;
    line-height: min(2.0416666667vw, 39.2px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box .desc {
    color: #4b4b4b;
    font-weight: 300
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text {
    padding-top: min(3.3333333333vw, 64px);
    border-top: min(.0520833333vw, 1px) solid #B8B8B8;
    display: flex;
    flex-direction: column;
    row-gap: min(1.6666666667vw, 32px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .tit {
    color: #151515
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .desc {
    color: #4b4b4b;
    font-weight: 300;
    margin-left: min(1.875vw, 36px);
    margin-top: min(.4166666667vw, 8px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .desc.m-l-64 {
    margin-left: min(3.3333333333vw, 64px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .num {
    margin-right: min(.2083333333vw, 4px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .num:last-child {
    margin-right: min(.625vw, 12px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process {
    margin-top: min(8.3333333333vw, 160px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol {
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px);
    margin-top: min(4.1666666667vw, 80px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li .tit strong {
    color: #f60;
    margin-left: min(.8333333333vw, 16px);
    font-weight: 400
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li .tit .desc {
    color: #4b4b4b;
    margin-top: min(.4166666667vw, 8px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul {
    display: flex;
    flex-direction: column;
    row-gap: min(2.0833333333vw, 40px);
    margin-top: min(3.125vw, 60px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .ft_txt {
    color: #4b4b4b;
    margin-top: min(.4166666667vw, 8px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li p.caution {
    color: #999;
    margin-top: min(1.4583333333vw, 28px);
    margin-bottom: min(1.0416666667vw, 20px);
    font-weight: 300
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table {
    border-top: min(.1041666667vw, 2px) solid #151515;
    width: 100%;
    margin-top: min(1.4583333333vw, 28px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr {
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th {
    padding: min(1.875vw, 36px);
    color: #4b4b4b
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th:nth-child(3) {
    border-left: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th span.bank {
    padding-right: min(.625vw, 12px);
    margin-right: min(.625vw, 12px);
    border-right: min(.0520833333vw, 1px) solid #B8B8B8;
    color: #151515
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr td {
    padding: min(1.875vw, 36px)
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn {
    position: relative;
    margin-top: min(.8333333333vw, 16px);
    padding: 0 min(1.25vw, 24px);
    overflow: hidden;
    width: fit-content
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn:hover:before {
    --size: 30vw
}

#FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn .icon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center;
    background-size: cover
}

@media (min-width: 769px) and (max-width: 1023px) {
    #FT30 .main-inner .sub_container .ft_txt {
        font-size: 12px;
        line-height: 20px
    }

    #FT30 .main-inner .sub_container .ft_top {
        margin-top: 38px;
        margin-bottom: 76px
    }

    #FT30 .main-inner .sub_container .m-b-36 {
        margin-bottom: 22px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders {
        padding: 76px 90px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic {
        margin-bottom: 63px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box {
        padding: 22px 0 20px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box.main_box .main {
        font-size: 18px;
        line-height: 26px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3 {
        row-gap: 8px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div {
        column-gap: 8px;
        height: 126px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div:before {
        width: 10px;
        height: 108px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .num {
        width: 15px;
        height: 15px;
        font-size: 10px;
        line-height: 15px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div p {
        padding: 5px 0
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.x2:before {
        top: 10px;
        height: 325px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div .align_top {
        height: 40px;
        column-gap: 8px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div .align_top .num {
        margin-top: 5px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text {
        padding-top: 40px;
        row-gap: 20px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .desc.m-l-64 {
        margin-left: 40px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .desc {
        margin-top: 5px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process {
        margin-top: 100px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol {
        row-gap: 76px;
        margin-top: 50px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li p.caution {
        margin-top: 18px;
        margin-bottom: 12px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .ft_txt {
        margin-top: 5px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table {
        margin-top: 18px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th span.bank {
        padding-right: 8px;
        margin-right: 8px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr td,
    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th {
        padding: 22px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li .tit strong {
        margin-left: 10px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn {
        margin-top: 10px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul {
        row-gap: 26px;
        margin-top: 38px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn .icon:before {
        width: 12px;
        height: 12px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn {
        padding: 0 15px !important
    }
}

@media (max-width: 768px) {

    #FT30 .pc-only,
    #FT30 .ta-only {
        display: none !important
    }

    #FT30 .mo-only {
        display: inline-block !important
    }

    #FT30 .main-inner .sub_container {
        padding: 0;
        max-width: none
    }

    #FT30 .main-inner .sub_container .ft_top {
        margin-top: 20px;
        margin-bottom: 80px;
        padding: 0 20px
    }

    #FT30 .main-inner .sub_container .ft_top .ft_print {
        display: none
    }

    #FT30 .main-inner .sub_container .ft_txt {
        font-size: 16px;
        font-weight: 400;
        line-height: 27.52px
    }

    #FT30 .main-inner .sub_container .m-b-36 {
        margin-bottom: 24px !important
    }

    #FT30 .main-inner .sub_container .ft_contents {
        padding: 0;
        max-width: none
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide h3 {
        padding: 0 20px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders {
        margin: 0;
        padding: 48px 20px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .num {
        display: inline-block;
        width: 14px;
        height: 14px;
        font-size: 11px;
        font-weight: 400;
        line-height: 20px;
        transform: translateY(-12px);
        display: flex;
        align-items: center;
        justify-content: center
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic {
        margin-bottom: 64px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row {
        row-gap: 4px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3 .m_h9 {
        font-size: 20px !important;
        line-height: 31.2px !important
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div {
        column-gap: 4px;
        height: 192px;
        font-weight: 300;
        text-align: left
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div p {
        font-size: 14px !important;
        line-height: 24.08px !important;
        font-weight: 400;
        max-width: 76px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div:before {
        width: 8px;
        height: 170px;
        background: url(https://www.hanwhaocean.com/images/common/icon_down_long_arrow.svg) no-repeat center center;
        background-size: cover
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.up:before {
        transform: translate(-50%, -50%) rotate(180deg)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.x2:before {
        top: 12px;
        transform: translate(-50%);
        background: url(https://www.hanwhaocean.com/images/common/icon_down_long_2x_arrow.svg) no-repeat center center;
        background-size: cover;
        height: 443px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div.no-arrow:before {
        background: none
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div .align_top {
        display: flex;
        align-items: flex-start;
        height: auto;
        box-sizing: border-box;
        column-gap: min(.625vw, 12px)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3>div .align_top .num {
        margin-top: min(.4166666667vw, 8px);
        transform: translateY(4px)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3 .up:nth-child(2) .align_top {
        transform: translateY(-12px)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col3 .no-arrow:nth-child(3) {
        transform: translateY(-60px)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.col2 {
        grid-column: 1/3
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box {
        padding: 12px 18px;
        border: 1px solid #151515;
        border-radius: 4px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box.main_box .main {
        font-size: 20px;
        font-weight: 400;
        line-height: 31.2px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_graphic .row.box .desc {
        font-weight: 400
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text {
        padding-top: 33px;
        border-top: 1px solid #B8B8B8;
        row-gap: 16px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .tit {
        display: flex
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .tit .num {
        transform: translateY(5px)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .desc {
        margin-left: 16px;
        margin-top: 4px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .desc.m-l-64 {
        margin-left: 37px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .num {
        margin-right: 6px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_guide .ft_orders .order_text .paragragh .num:last-child {
        margin-right: 4px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process {
        margin-top: 80px;
        padding: 0 20px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol {
        display: flex;
        flex-direction: column;
        row-gap: 80px;
        margin-top: 24px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li .tit span {
        display: flex;
        flex-direction: column
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li .tit strong {
        font-size: 18px !important;
        line-height: 28.08px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li .tit .desc {
        margin-top: 8px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul {
        row-gap: 32px;
        margin-top: 48px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .m_h9 {
        font-size: 18px !important;
        line-height: 28.08px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .ft_txt {
        color: #4b4b4b;
        margin-top: 8px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li p.caution {
        margin-top: 16px;
        margin-bottom: 16px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table {
        border-top: 1px solid #151515;
        width: 100%;
        margin-top: 20px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr {
        border-bottom: 1px solid #E5E5E5;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: calc(100vw - 40px)
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th {
        padding: 16px 12px;
        width: 100%;
        box-sizing: border-box;
        font-weight: 300;
        font-size: 14px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th:nth-child(1),
    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th:nth-child(3) {
        display: flex;
        flex-direction: column
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th:nth-child(3) {
        border-left: none
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th:nth-child(1) {
        border-bottom: 1px solid #E5E5E5
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th span.bank {
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        font-weight: 400
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr th span.hf_L_E {
        font-weight: 300;
        color: #4b4b4b
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr td {
        padding: 20px 0 20px 24px;
        width: 100%;
        font-weight: 300;
        box-sizing: border-box;
        display: flex;
        align-items: center
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li table tbody tr td:nth-child(2) {
        border-bottom: 1px solid #E5E5E5
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn {
        position: relative;
        margin-top: 16px;
        padding: 0 16px !important;
        overflow: hidden;
        width: fit-content
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn:hover:before {
        --size: 500px
    }

    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn .icon:before {
        width: 15px;
        height: 15px
    }
}

@media screen and (max-width: 374px) {
    #FT30 .main-inner .sub_container .ft_contents .ft_process ol li ul li .download-btn span {
        font-size: 13px !important
    }
}

#FT40 .pc-only {
    display: inline-block !important
}

#FT40 .ta-only,
#FT40 .mo-only {
    display: none !important
}

#FT40 .main-inner .sub_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 1920px;
    padding: 0 min(6.25vw, 120px);
    font-style: normal;
    box-sizing: border-box
}

#FT40 .main-inner .sub_container .ft_contents {
    width: min(42.5vw, 816px);
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#FT40 .main-inner .sub_container .ft_contents .ft_txt_box {
    margin-top: min(6.25vw, 120px)
}

#FT40 .main-inner .sub_container .ft_contents .ft_txt_box .desc {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    margin-top: min(2.0833333333vw, 40px);
    color: #4b4b4b
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box .m_btn[hover=ripple]:hover:before {
    --size: 1500px
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form {
    display: flex;
    flex-direction: column;
    row-gap: min(4.1666666667vw, 80px)
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form label {
    display: block;
    margin-bottom: min(1.0416666667vw, 20px)
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box {
    display: block;
    position: relative;
    border-bottom: min(.1041666667vw, 2px) solid #999999
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: min(-.1041666667vw, -2px);
    width: 100%;
    height: min(.1041666667vw, 2px);
    background: #151515;
    transform: scale(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.39, 0, .12, .99)
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:has(input:focus):after,
#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:has(input:not(:placeholder-shown)):after {
    transform: scale(1)
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=number],
#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text] {
    display: block;
    width: 100%;
    padding: min(.625vw, 12px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    outline: none;
    cursor: default
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=number]::placeholder,
#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text]::placeholder {
    color: #b8b8b8
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=number]::-webkit-contacts-auto-fill-button,
#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input::-webkit-outer-spin-button,
#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn {
    position: absolute;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    top: 50%;
    right: min(.2604166667vw, 5px);
    transform: translateY(-50%);
    background: #b8b8b8;
    border-radius: 50%;
    transition: background .2s;
    display: none;
    z-index: 222
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn.on {
    display: block
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:hover {
    background: #999
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form input[type=submit] {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.4583333333vw, 28px);
    width: 100%;
    height: min(3.3333333333vw, 64px);
    border-radius: min(5.2083333333vw, 100px);
    background: #151515;
    color: #fff;
    transition: .2s
}

#FT40 .main-inner .sub_container .ft_contents .ft_form_box form input[type=submit]:disabled {
    background: #e5e5e5;
    color: #999
}

#FT40 #confirm_popup .pop_contents {
    max-height: none
}

#FT40 #confirm_popup .pop_cnt_main {
    max-height: none;
    margin-bottom: min(1.6666666667vw, 32px)
}

#FT40 #confirm_popup .pop_cnt_main .comfirm_desc {
    margin-top: min(1.25vw, 24px);
    font-size: min(1.0416666667vw, 20px);
    line-height: min(1.75vw, 33.6px);
    font-weight: 300;
    color: #4b4b4b
}

@media (min-width: 769px) and (max-width: 1023px) {
    #FT40 .pc-only {
        display: none !important
    }

    #FT40 .ta-only {
        display: inline-block !important
    }

    #FT40 .mo-only {
        display: none !important
    }

    #FT40 .main-inner .sub_container {
        padding: 0 50px
    }

    #FT40 .main-inner .sub_container .ft_contents {
        row-gap: 76px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_txt_box {
        margin-top: 76px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_txt_box .desc {
        font-size: 12px;
        line-height: 20px;
        margin-top: 26px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form {
        row-gap: 50px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form label {
        margin-bottom: 12px
    }

    #FT40 #confirm_popup .pop_cnt_main .comfirm_desc {
        font-size: 12px;
        line-height: 20px;
        margin-top: 15px
    }
}

@media (max-width: 768px) {

    #FT40 .pc-only,
    #FT40 .ta-only {
        display: none !important
    }

    #FT40 .mo-only {
        display: inline-block !important
    }

    #FT40 .main-inner .sub_container {
        max-width: none;
        padding: 0 20px
    }

    #FT40 .main-inner .sub_container .ft_contents {
        width: 100%;
        row-gap: 60px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_txt_box {
        margin-top: 60px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_txt_box .desc {
        font-size: 16px;
        line-height: 27.52px;
        margin-top: 20px;
        font-weight: 400
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form {
        row-gap: 40px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form label {
        margin-bottom: 8px;
        font-size: 18px !important;
        line-height: 28.8px !important
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box {
        border-bottom: 1px solid #999999
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:after {
        bottom: -1px;
        height: 1px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=number],
    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text] {
        padding: 12px 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 27.52px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        right: 8px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:before {
        width: 10px;
        height: 1px
    }

    #FT40 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:after {
        width: 10px;
        height: 1px
    }

    #FT40 #confirm_popup .pop_cnt_main {
        margin-bottom: 20px;
        overflow-x: hidden
    }

    #FT40 #confirm_popup .pop_cnt_main .comfirm_desc {
        margin-top: 20px;
        font-size: 14px;
        line-height: 24.08px
    }

    #FT40 #confirm_popup .pop_foot {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #FT40 #confirm_popup .pop_foot>button {
        width: 133px;
        height: 44px
    }
}

#FT50 .pc-only {
    display: inline-block !important
}

#FT50 .ta-only,
#FT50 .mo-only {
    display: none !important
}

#FT50 .main-inner .sub_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 1920px;
    padding: 0 min(6.25vw, 120px);
    font-style: normal;
    box-sizing: border-box
}

#FT50 .main-inner .sub_container .orange {
    color: #f60
}

#FT50 .main-inner .sub_container .ft_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b
}

#FT50 .main-inner .sub_container .ft_contents {
    width: min(42.5vw, 816px);
    display: flex;
    flex-direction: column;
    row-gap: min(3.125vw, 60px)
}

#FT50 .main-inner .sub_container .ft_contents.temporaryPage {
    row-gap: min(4.1666666667vw, 80px)
}

#FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box {
    display: flex;
    flex-direction: column;
    row-gap: min(2.0833333333vw, 40px)
}

#FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box .box .m_h9 {
    margin-bottom: min(.4166666667vw, 8px)
}

#FT50 .main-inner .sub_container .ft_contents.temporaryPage .mailto {
    display: inline-block;
    position: relative
}

#FT50 .main-inner .sub_container .ft_contents.temporaryPage .mailto:after {
    content: "";
    position: absolute;
    bottom: min(.46875vw, 9px);
    left: 0;
    width: 100%;
    height: 1px;
    background: #f60;
    transform-origin: left
}

#FT50 .main-inner .sub_container .ft_contents.temporaryPage .mailto:hover:after {
    animation: lineAnim .6s cubic-bezier(.39, 0, .12, .99)
}

@keyframes lineAnim {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

#FT50 .main-inner .sub_container .ft_contents .caution {
    position: absolute;
    top: min(.5208333333vw, 10px);
    right: 0;
    color: #999;
    font-weight: 300
}

#FT50 .main-inner .sub_container .ft_contents .disclaimer {
    color: #999;
    margin-top: min(1.4583333333vw, 28px)
}

#FT50 .main-inner .sub_container .ft_contents .disclaimer ul li {
    position: relative
}

#FT50 .main-inner .sub_container .ft_contents .disclaimer ul li p {
    padding-left: min(.625vw, 12px);
    font-weight: 300
}

#FT50 .main-inner .sub_container .ft_contents .disclaimer ul li:before {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: min(.0520833333vw, 1px);
    background: #999
}

#FT50 .main-inner .sub_container .ft_contents .disclaimer ul li:not(:last-child) {
    margin-bottom: min(.4166666667vw, 8px)
}

#FT50 .main-inner .sub_container .ft_contents .ft_txt_box {
    position: relative;
    margin-top: min(6.25vw, 120px)
}

#FT50 .main-inner .sub_container .ft_contents .ft_txt_box .caution {
    top: min(1.1979166667vw, 23px)
}

#FT50 form {
    display: flex;
    flex-direction: column;
    row-gap: min(4.1666666667vw, 80px)
}

#FT50 form .flex_box {
    width: 100%;
    display: flex;
    align-items: flex-end
}

#FT50 form .ft_box {
    position: relative
}

#FT50 form .ft_box label {
    position: relative;
    margin-bottom: min(1.0416666667vw, 20px)
}

#FT50 form .ft_box label.required:after {
    content: "*";
    position: absolute;
    top: max(-2px, -.1042vw);
    right: max(-15px, -.7813vw);
    font-size: min(.9375vw, 18px);
    font-weight: 400;
    line-height: min(1.3125vw, 25.2px);
    color: #ff4343
}

#FT50 form .ft_box .input_box {
    display: block;
    position: relative;
    border-bottom: min(.1041666667vw, 2px) solid #999999;
    margin-top: min(1.0416666667vw, 20px)
}

#FT50 form .ft_box .input_box .error_msg {
    display: none
}

#FT50 form .ft_box .input_box.error .error_msg {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: max(-30px, -1.5625vw);
    font-size: min(.7291666667vw, 14px);
    font-weight: 400;
    line-height: min(1.0208333333vw, 19.6px);
    color: #ff4343
}

#FT50 form .ft_box .input_box:not(.disabled):after {
    content: "";
    position: absolute;
    left: 0;
    bottom: max(-2px, -.1042vw);
    width: 100%;
    height: min(.1041666667vw, 2px);
    background: #151515;
    transform: scale(0);
    transform-origin: left;
    transition: .5s cubic-bezier(.39, 0, .12, .99)
}

#FT50 form .ft_box .input_box.error:not(.disabled):after {
    background: #ff4343
}

#FT50 form .ft_box .input_box:has(input:focus):after,
#FT50 form .ft_box .input_box:has(input:not(:placeholder-shown)):after {
    transform: scale(1)
}

#FT50 form .ft_box .input_box input {
    display: block;
    width: 100%;
    padding: min(.625vw, 12px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    outline: none;
    cursor: default
}

#FT50 form .ft_box .input_box input::placeholder {
    color: #b8b8b8
}

#FT50 form .ft_box .input_box input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none
}

#FT50 form .ft_box .input_box input::-webkit-outer-spin-button,
#FT50 form .ft_box .input_box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#FT50 form .ft_box .input_box input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

#FT50 form .ft_box .input_box.disabled {
    border-bottom: 2px solid #E5E5E5
}

#FT50 form .ft_box .input_box.disabled input {
    color: #999
}

#FT50 form .ft_box .input_box.disabled input#name {
    width: min(11.4583333333vw, 220px)
}

#FT50 form .ft_box .input_box input#mail_id,
#FT50 form .ft_box .input_box input#mail_domain {
    width: 100%
}

#FT50 form .ft_box .input_box .del_btn {
    position: absolute;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    top: 50%;
    right: min(.625vw, 12px);
    transform: translateY(-50%);
    background: #b8b8b8;
    border-radius: 50%;
    transition: background .2s;
    display: none;
    z-index: 222
}

#FT50 form .ft_box .input_box .del_btn.on {
    display: block
}

#FT50 form .ft_box .input_box .del_btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: min(.5729166667vw, 11px);
    height: 1px;
    background-color: #fff
}

#FT50 form .ft_box .input_box .del_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(.5729166667vw, 11px);
    height: 1px;
    background-color: #fff
}

#FT50 form .ft_box .input_box .del_btn:hover {
    background: #999
}

#FT50 form .ft_box.btns {
    display: flex;
    column-gap: min(1.0416666667vw, 20px)
}

#FT50 form .ft_box .certify_user_btn[color=white] {
    pointer-events: none
}

#FT50 form .ft_box .at {
    padding: min(.625vw, 12px) min(.625vw, 12px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #999
}

#FT50 form .ft_box .name_box {
    column-gap: min(1.0416666667vw, 20px)
}

#FT50 form .ft_box .mail_box {
    position: relative
}

#FT50 form .ft_box .mail_box .input_box {
    width: 100%
}

#FT50 form .ft_box .mail_box .domain_box {
    display: block;
    position: relative;
    z-index: 11
}

#FT50 form .ft_box .mail_box .domain_box .mail_select {
    position: absolute;
    top: min(3.6458333333vw, 70px);
    left: 0;
    width: 100%;
    max-width: min(20.15625vw, 387px);
    height: auto;
    border: 1px solid #E5E5E5;
    background: #fff;
    z-index: 999;
    border-radius: min(.2083333333vw, 4px);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s cubic-bezier(.39, 0, .12, .99)
}

#FT50 form .ft_box .mail_box .domain_box .mail_select ul a {
    display: block;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b;
    padding: min(1.0416666667vw, 20px) min(1.25vw, 24px);
    transition: .2s;
    cursor: pointer
}

#FT50 form .ft_box .mail_box .domain_box .mail_select ul a.on,
#FT50 form .ft_box .mail_box .domain_box .mail_select ul a:hover {
    background-color: #f5f5f5;
    color: #151515
}

#FT50 form .ft_box .mail_box .domain_box .select_btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(.9375vw, 18px);
    height: min(.9375vw, 18px);
    padding: min(.5208333333vw, 10px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
    background-size: 50%;
    transform: translateY(-50%) rotate(180deg);
    transition: .3s transform;
    cursor: pointer
}

#FT50 form .ft_box .mail_box .domain_box .select_btn:hover {
    transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(180deg)
}

#FT50 form .ft_box .mail_box .domain_box.on .mail_select {
    transform: scaleY(1)
}

#FT50 form .ft_box .mail_box .domain_box.on:before {
    transform: translateY(-50%) rotate(0)
}

#FT50 form .ft_box .mail_box .domain_box.on .select_btn {
    transform: translateY(-50%) rotate(0)
}

#FT50 form .ft_box .mail_box .domain_box.on .select_btn:hover {
    transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(0)
}

#FT50 form .ft_box:nth-child(5) {
    z-index: 2
}

#FT50 form .ft_box:nth-child(6) {
    z-index: 1
}

#FT50 form .category_btns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(1.0416666667vw, 20px);
    margin-top: min(2.5vw, 48px)
}

#FT50 form .category_btns label {
    width: 100%;
    cursor: pointer;
    z-index: 2;
    margin-bottom: 0
}

#FT50 form .category_btns label button {
    width: 100%;
    pointer-events: painted
}

#FT50 form .category_btns .combo_wrap {
    grid-column: 1/4;
    grid-template-columns: repeat(3, 1fr);
    gap: min(1.0416666667vw, 20px);
    display: none
}

#FT50 form .category_btns .combo_wrap.on {
    display: grid
}

#FT50 form .category_btns .combo_wrap .input_box {
    grid-column: 3/4
}

#FT50 form .category_btns .combo_wrap .input_box input[type=text] {
    pointer-events: none
}

#FT50 form .category_btns .combo_wrap .input_box .combo_select {
    position: absolute;
    top: min(3.6458333333vw, 70px);
    left: 0;
    width: 100%;
    max-width: min(20.15625vw, 387px);
    height: auto;
    border: 1px solid #E5E5E5;
    background: #fff;
    z-index: 10;
    border-radius: min(.2083333333vw, 4px);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s cubic-bezier(.39, 0, .12, .99)
}

#FT50 form .category_btns .combo_wrap .input_box .combo_select ul a {
    display: block;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b;
    padding: min(1.0416666667vw, 20px) min(1.25vw, 24px);
    transition: .2s;
    cursor: pointer
}

#FT50 form .category_btns .combo_wrap .input_box .combo_select ul a.on,
#FT50 form .category_btns .combo_wrap .input_box .combo_select ul a:hover {
    background-color: #f5f5f5;
    color: #151515
}

#FT50 form .category_btns .combo_wrap .input_box .select_btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(.9375vw, 18px);
    height: min(.9375vw, 18px);
    padding: min(.5208333333vw, 10px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
    background-size: 50%;
    transform: translateY(-50%) rotate(180deg);
    transition: .3s transform;
    cursor: pointer
}

#FT50 form .category_btns .combo_wrap .input_box .select_btn:hover {
    transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(180deg)
}

#FT50 form .category_btns .combo_wrap .input_box.on .combo_select {
    transform: scaleY(1)
}

#FT50 form .category_btns .combo_wrap .input_box.on:before {
    transform: translateY(-50%) rotate(0)
}

#FT50 form .category_btns .combo_wrap .input_box.on .select_btn {
    transform: translateY(-50%) rotate(0)
}

#FT50 form .category_btns .combo_wrap .input_box.on .select_btn:hover {
    transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(0)
}

#FT50 form .category_btns .combo_wrap .combo_box {
    cursor: pointer
}

#FT50 form .category_btns input[type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    opacity: 0
}

#FT50 #reset_popup .pop_cnt_main {
    color: #4b4b4b;
    font-weight: 300
}

#FT50 .view_status_wrap {
    margin-bottom: -3.125vw
}

#FT50 .view_status_btn {
    width: min(20.7291666667vw, 398px);
    margin-top: min(2.0833333333vw, 40px)
}

#FT50 #view_status_popup.m_popup .pop_inner {
    width: min(57.5vw, 1104px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents {
    width: min(57.5vw, 1104px);
    padding: min(6.25vw, 120px) min(5vw, 96px);
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    margin-top: min(4.1666666667vw, 80px);
    margin-bottom: min(4.1666666667vw, 80px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_cnt_head {
    margin-bottom: min(4.1666666667vw, 80px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_cnt_main {
    max-height: none;
    overflow: visible;
    margin-bottom: min(4.1666666667vw, 80px)
}

#FT50 #view_status_popup.m_popup form .ft_box .input_box {
    width: 100%
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_foot {
    text-align: center
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_foot .status_check_btn {
    width: min(17.7083333333vw, 340px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .no_result {
    height: min(20.8333333333vw, 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: min(2.5vw, 48px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result {
    margin-top: min(4.1666666667vw, 80px);
    overflow-y: auto;
    max-height: min(31.3541666667vw, 602px);
    border-top: 2px solid #151515;
    border-bottom: 1px solid #E5E5E5
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table {
    border-top: none
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tr {
    text-align: center;
    line-height: 1.4 !important
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tr:last-child {
    border-bottom: none
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table thead {
    border-bottom: 1px solid #E5E5E5
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tr th,
#FT50 #view_status_popup.m_popup .pop_inner .pop_contents table tr td {
    padding: min(1.875vw, 36px) 0;
    font-size: min(1.0416666667vw, 20px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(1) {
    max-width: min(9.0104166667vw, 173px);
    width: min(9.0104166667vw, 173px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(2) {
    max-width: min(9.0104166667vw, 173px);
    width: min(9.0104166667vw, 173px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(3) {
    max-width: min(11.4583333333vw, 220px);
    width: min(11.4583333333vw, 220px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(4) {
    max-width: min(9.0104166667vw, 173px);
    width: min(9.0104166667vw, 173px)
}

#FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(5) {
    max-width: min(9.0104166667vw, 173px);
    width: min(9.0104166667vw, 173px)
}

#FT50 .view_status_btn {
    width: min(20vw, 384px);
    margin-bottom: min(2.0833333333vw, 40px)
}

#FT50 .view_status_btn.disabled {
    background-color: #e5e5e5;
    color: #999;
    border: 1px solid #e5e5e5;
    pointer-events: none;
    cursor: default
}

#FT50 .main-inner .sub_container .ft_contents .ft_txt_box.mgt-60 {
    margin-top: min(3.125vw, 60px)
}

@media (min-width: 769px) and (max-width: 1023px) {
    #FT50 .pc-only {
        display: none !important
    }

    #FT50 .ta-only {
        display: inline-block !important
    }

    #FT50 .mo-only {
        display: none !important
    }

    #FT50 .main-inner .sub_container {
        padding: 0 50px
    }

    #FT50 .main-inner .sub_container .ft_txt {
        font-size: 12px;
        line-height: 20px
    }

    #FT50 .main-inner .sub_container .ft_contents .ft_txt_box .caution {
        top: 15px
    }

    #FT50 .main-inner .sub_container .ft_contents {
        row-gap: 38px
    }

    #FT50 .main-inner .sub_container .ft_contents .ft_txt_box {
        margin-top: 76px
    }

    #FT50 form {
        row-gap: 50px
    }

    #FT50 form .ft_box label {
        margin-bottom: 12px
    }

    #FT50 form .ft_box .name_box {
        column-gap: 12px
    }

    #FT50 form .ft_box .input_box {
        margin-top: 12px
    }

    #FT50 form .ft_box label.required:after {
        font-size: 10px;
        top: -1px;
        right: -10px;
        line-height: 16px
    }

    #FT50 .main-inner .sub_container .ft_contents .caution {
        display: block;
        position: relative
    }

    #FT50 form .category_btns {
        gap: 12px;
        margin-top: 30px;
        grid-template-columns: repeat(2, 1fr)
    }

    #FT50 form .category_btns>label {
        margin-bottom: 0;
        min-width: 100%
    }

    #FT50 form .category_btns label button {
        padding: 0 !important
    }

    #FT50 form .ft_box.btns {
        column-gap: 12px;
        width: 100%
    }

    #FT50 form .ft_box.btns .m_btn[line=round] {
        min-width: 0 !important;
        padding: 0 !important;
        width: 100%
    }

    #FT50 .main-inner .sub_container .ft_contents .disclaimer {
        margin-top: 18px
    }

    #FT50 .main-inner .sub_container .ft_contents .disclaimer ul li p {
        padding-left: 8px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage {
        row-gap: 50px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box {
        row-gap: 26px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box .box .m_h9 {
        margin-bottom: 5px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .mailto:after {
        bottom: 6px
    }

    #FT50 form .ft_box .mail_box .domain_box .mail_select {
        top: 50px;
        max-width: 100%
    }

    #FT50 form .ft_box .mail_box .domain_box .mail_select ul a {
        font-size: 12px;
        padding: 12px 15px;
        line-height: 20px
    }

    #FT50 form .ft_box .at {
        padding: 8px;
        font-size: 12px;
        line-height: 20px
    }

    #FT50 .view_status_wrap {
        margin-bottom: -38px
    }

    #FT50 .view_status_btn {
        width: 256px;
        margin-top: 26px
    }

    #FT50 #view_status_popup.m_popup .pop_inner {
        width: 706px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents {
        width: 706px;
        padding: 76px 60px;
        margin-top: 50px;
        margin-bottom: 50px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_cnt_head,
    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_cnt_main {
        margin-bottom: 50px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_foot .status_check_btn {
        width: 218px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .no_result {
        height: 256px;
        margin-top: 30px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result {
        margin-top: 50px;
        max-height: 378px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tr th,
    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents table tr td {
        padding: 22px 0;
        font-size: 12px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(1) {
        max-width: 110px;
        width: 110px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(2) {
        max-width: 110px;
        width: 110px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(3) {
        max-width: 140px;
        width: 140px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(4) {
        max-width: 110px;
        width: 110px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(5) {
        max-width: 110px;
        width: 110px
    }

    #FT50 .view_status_btn {
        width: 242px;
        margin-bottom: 26px
    }

    #FT50 .main-inner .sub_container .ft_contents .ft_txt_box.mgt-60 {
        margin-top: 38px
    }
}

@media (max-width: 768px) {

    .pc-only,
    .ta-only {
        display: none !important
    }

    .mo-only {
        display: inline-block !important
    }

    #FT50 .main-inner .sub_container {
        max-width: none;
        padding: 0 20px
    }

    #FT50 .main-inner .sub_container .ft_txt {
        font-size: 20px;
        font-weight: 400;
        line-height: 32.2px
    }

    #FT50 .main-inner .sub_container .m_btn[size=m] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px !important
    }

    #FT50 .main-inner .sub_container .m_btn[size=m] span.txt {
        font-size: 14px !important;
        line-height: 24.08px !important;
        font-weight: 300
    }

    #FT50 .main-inner .sub_container .m_btn[size=m].mo-row2 span.txt {
        font-size: 12px !important;
        line-height: 18.24px !important
    }

    #FT50 .main-inner .sub_container .m_btn[size=h] {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #FT50 .main-inner .sub_container .m_btn[size=h] span.txt {
        font-size: 16px !important;
        line-height: 24px !important;
        font-weight: 300
    }

    #FT50 .main-inner .sub_container .ft_contents {
        width: 100%;
        row-gap: 76px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage {
        width: 100%;
        row-gap: 48px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box {
        row-gap: 40px
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box .box .m_h9 {
        margin-bottom: 8px;
        font-size: 18px !important;
        line-height: 28.8px !important
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .ft_box .box ol.ft_txt li {
        font-size: 16px !important;
        line-height: 27.52px !important
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .m_h9 {
        margin-bottom: 0;
        font-size: 20px !important;
        line-height: 31.2px !important
    }

    #FT50 .main-inner .sub_container .ft_contents.temporaryPage .m_h9 .mailto:after {
        bottom: 7px;
        height: 1px
    }

    #FT50 .main-inner .sub_container .ft_contents .caution {
        position: relative;
        display: block;
        top: 0;
        right: 0;
        font-size: 12px !important;
        line-height: 16.8px !important;
        margin-top: 8px
    }

    #FT50 .main-inner .sub_container .ft_contents .disclaimer {
        margin-top: 16px
    }

    #FT50 .main-inner .sub_container .ft_contents .disclaimer ul li p {
        padding-left: 8px
    }

    #FT50 .main-inner .sub_container .ft_contents .disclaimer ul li:before {
        top: 12px;
        width: 4px;
        height: 1px
    }

    #FT50 .main-inner .sub_container .ft_contents .disclaimer ul li:not(:last-child) {
        margin-bottom: 8px
    }

    #FT50 .main-inner .sub_container .ft_contents .ft_txt_box {
        margin-top: 60px
    }

    #FT50 .main-inner .sub_container .ft_contents .ft_txt_box .caution {
        top: 0;
        font-size: 14px !important;
        line-height: 24.08px !important;
        margin-top: 12px
    }

    #FT50 form {
        row-gap: 40px
    }

    #FT50 form .ft_box label {
        margin-bottom: 0;
        font-size: 18px !important;
        line-height: 28.8px !important
    }

    #FT50 form .ft_box label.required:after {
        top: -2px;
        right: -15px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24.08px
    }

    #FT50 form .ft_box .input_box {
        border-bottom: 1px solid #999999;
        margin-top: 8px
    }

    #FT50 form .ft_box .input_box.error .error_msg {
        bottom: -27px;
        font-size: 12px;
        font-weight: 300;
        line-height: 16.8px
    }

    #FT50 form .ft_box .input_box:not(.disabled):after {
        bottom: -1px;
        height: 1px
    }

    #FT50 form .ft_box .input_box input {
        padding: 12px 0;
        font-size: 16px;
        line-height: 27.52px
    }

    #FT50 form .ft_box .input_box.disabled {
        border-bottom: 1px solid #E5E5E5
    }

    #FT50 form .ft_box .input_box.disabled input {
        color: #999
    }

    #FT50 form .ft_box .input_box input#mail_id,
    #FT50 form .ft_box .input_box input#mail_domain {
        width: 100%
    }

    #FT50 form .ft_box .input_box .del_btn {
        width: 20px;
        height: 20px;
        top: 50%;
        right: 12px
    }

    #FT50 form .ft_box .input_box .del_btn:before {
        width: 10px;
        height: 1px
    }

    #FT50 form .ft_box .input_box .del_btn:after {
        width: 10px;
        height: 1px
    }

    #FT50 form .ft_box .certify_user_btn {
        width: 96px
    }

    #FT50 form .ft_box.btns {
        column-gap: 12px
    }

    #FT50 form .ft_box.btns>.m_btn {
        width: 100%
    }

    #FT50 form .ft_box .at {
        padding: 10px;
        font-size: 16px;
        line-height: 27.52px
    }

    #FT50 form .ft_box .name_box {
        column-gap: 12px
    }

    #FT50 form .ft_box .name_box .input_box {
        width: 227px
    }

    #FT50 form .ft_box .mail_box .domain_box .mail_select {
        position: absolute;
        top: 50px;
        max-width: 100%;
        border-radius: 4px
    }

    #FT50 form .ft_box .mail_box .domain_box .mail_select ul a {
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        padding: 16px 20px
    }

    #FT50 form .ft_box .mail_box .domain_box .select_btn {
        width: 18px;
        height: 18px;
        padding: 8px
    }

    #FT50 form .ft_box:nth-child(6) {
        margin-top: 25px
    }

    #FT50 form .category_btns {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 20px;
        grid-gap: 12px
    }

    #FT50 form .category_btns label:nth-child(1),
    #FT50 form .category_btns label:nth-child(2),
    #FT50 form .category_btns label:nth-child(3),
    #FT50 form .category_btns label:nth-child(5) {
        order: 1
    }

    #FT50 form .category_btns .combo_wrap:nth-child(4) {
        order: 2
    }

    #FT50 form .category_btns label:nth-child(6),
    #FT50 form .category_btns label:nth-child(7) {
        order: 3
    }

    #FT50 form .category_btns .combo_wrap:nth-child(8) {
        order: 4
    }

    #FT50 form .category_btns .combo_wrap {
        grid-column: 1/3;
        width: 100%;
        display: none;
        margin-top: 0;
        margin-bottom: 4px
    }

    #FT50 form .category_btns .combo_wrap.on {
        display: grid
    }

    #FT50 form .category_btns .combo_wrap .input_box {
        grid-column: 1/4
    }

    #FT50 form .category_btns .combo_wrap .input_box .combo_select {
        position: absolute;
        top: 62px;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        border: 1px solid #E5E5E5;
        background: #fff;
        z-index: 10;
        border-radius: 4px;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .3s cubic-bezier(.39, 0, .12, .99)
    }

    #FT50 form .category_btns .combo_wrap .input_box .combo_select ul a {
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        padding: 16px 20px
    }

    #FT50 form .category_btns .combo_wrap .input_box .select_btn {
        position: absolute;
        top: 50%;
        right: 0;
        width: 18px;
        height: 18px;
        padding: 8px;
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
        background-size: 50%;
        transform: translateY(-50%) rotate(180deg);
        transition: .3s transform;
        cursor: pointer
    }

    #FT50 form .category_btns .combo_wrap .input_box .select_btn:hover {
        transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(180deg)
    }

    #FT50 form .category_btns .combo_wrap .input_box.on .combo_select {
        transform: scaleY(1)
    }

    #FT50 form .category_btns .combo_wrap .input_box.on:before {
        transform: translateY(-50%) rotate(0)
    }

    #FT50 form .category_btns .combo_wrap .input_box.on .select_btn {
        transform: translateY(-50%) rotate(0)
    }

    #FT50 form .category_btns .combo_wrap .input_box.on .select_btn:hover {
        transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(0)
    }

    #FT50 form .category_btns .combo_wrap .combo_box {
        margin-top: 0
    }

    #FT50 form .category_btns input[type=radio] {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        opacity: 0
    }

    #FT50 .m_popup .pop_inner .pop_contents {
        border-radius: 20px
    }

    #FT50 .m_popup .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 20px
    }

    #FT50 .m_popup .pop_inner .pop_contents .pop_cnt_main {
        margin-bottom: 32px
    }

    #FT50 .m_popup .pop_inner .pop_contents .cu_txt {
        font-size: 14px !important;
        line-height: 24.08px
    }

    #FT50 .m_popup .pop_inner .pop_contents .pop_foot {
        display: flex;
        column-gap: 12px
    }

    #FT50 .m_popup .pop_inner .pop_contents .pop_foot>.m_btn {
        width: 100%
    }

    #FT50 .view_status_wrap {
        margin-bottom: -76px
    }

    #FT50 .view_status_btn {
        width: 161.5px;
        margin-top: 20px
    }

    #FT50 #view_status_popup.m_popup .pop_inner {
        width: 100%;
        height: 100%
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents {
        width: 100%;
        padding: 16px 0 80px;
        height: 100%;
        min-height: auto;
        max-height: none;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        overflow-y: auto
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 40px;
        margin-top: 68px;
        margin-left: 20px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_cnt_main {
        margin-bottom: 40px;
        padding-right: 20px;
        padding-left: 20px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_foot {
        justify-content: center;
        padding-right: 20px;
        padding-left: 20px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .pop_foot .status_check_btn {
        width: 141.5px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .no_result {
        height: 200px;
        margin-top: 40px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result {
        margin-top: 40px;
        max-height: 414px;
        position: relative;
        border-top: none;
        border-bottom: none
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table {
        width: calc(100% - 40px);
        min-width: 680px;
        margin-right: 20px;
        margin-left: 20px;
        max-height: 413px;
        height: 100%
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tr th,
    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents table tr td {
        padding: 24px 0;
        line-height: 1.4;
        font-size: 14px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table thead {
        border-top: 2px solid #151515
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody {
        border-bottom: 1px solid #E5E5E5
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(1) {
        max-width: 120px;
        width: 120px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(2) {
        max-width: 120px;
        width: 120px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(3) {
        max-width: 200px;
        width: 200px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(4) {
        max-width: 120px;
        width: 120px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result table tbody td:nth-child(5) {
        max-width: 120px;
        width: 120px
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents table tr th {
        border-right: none
    }

    #FT50 .main-inner .sub_container .ft_contents {
        row-gap: 48px
    }

    #FT50 .main-inner .sub_container .ft_contents .ft_txt_box.mgt-60 {
        margin-top: 0
    }

    #FT50 #view_status_popup.m_popup .pop_inner {
        margin-top: 0 !important;
        top: 0 !important
    }

    #FT50 #view_status_popup.m_popup .pop_inner .btn_close_pop {
        position: fixed
    }

    #FT50 #view_status_popup.m_popup .pop_inner .pop_contents .result_box .has_result {
        overflow-y: visible;
        max-height: none
    }
}

@media screen and (max-width: 374px) {
    #FT50 form .ft_box.btns {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 12px
    }
}

#FT60 .main-inner .sub_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 1920px;
    padding: 0 min(6.25vw, 120px);
    padding-top: min(11.3020833333vw, 217px);
    font-style: normal;
    box-sizing: border-box
}

#FT60 .main-inner .sub_container .hf_L_E {
    font-family: Hanwha;
    font-weight: 300
}

#FT60 .main-inner .sub_container .ft_contents {
    width: 100%;
    max-width: min(42.5vw, 816px)
}

#FT60 .main-inner .sub_container .ft_contents .m-b-16 {
    margin-bottom: min(.8333333333vw, 16px)
}

#FT60 .main-inner .sub_container .ft_contents .m-b-36 {
    margin-bottom: min(1.875vw, 36px)
}

#FT60 .main-inner .sub_container .ft_contents>ol {
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li>p {
    font-weight: 300;
    color: #4b4b4b
}

#FT60 .main-inner .sub_container .ft_contents>ol>li ul.desc-list li.item {
    color: #4b4b4b;
    position: relative;
    margin-top: min(.4166666667vw, 8px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li ul.desc-list li.item:before {
    content: "";
    position: absolute;
    top: min(.5729166667vw, 11px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: min(.0520833333vw, 1px);
    background-color: #4b4b4b
}

#FT60 .main-inner .sub_container .ft_contents>ol>li ul.desc-list li.item p {
    color: #4b4b4b;
    font-weight: 300;
    padding-left: min(.625vw, 12px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li a.link {
    display: inline-block;
    height: min(.9895833333vw, 19px);
    color: #f60;
    border-bottom: 1px solid #FF6600
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: min(4.1666666667vw, 80px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process:before {
    content: "";
    position: absolute;
    top: 0;
    left: min(1.5104166667vw, 29px);
    height: 100%;
    width: min(.1041666667vw, 2px);
    background-color: #e5e5e5;
    z-index: 0
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li {
    display: flex;
    align-items: center;
    column-gap: min(2.9166666667vw, 56px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(2.9166666667vw, 56px);
    height: min(2.9166666667vw, 56px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.75vw, 33.6px);
    background-color: #fff;
    border: min(.1041666667vw, 2px) solid #E5E5E5;
    border-radius: 50%;
    z-index: 1
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li .num.mid {
    border: none;
    background-color: #e5e5e5
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li .num.end {
    background-color: #f60;
    color: #fff;
    border: none
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li .m_h9 {
    color: #151515
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li:nth-child(3) {
    align-items: first baseline
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li:nth-child(3) .desc-list {
    margin-top: min(1.0416666667vw, 20px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2)>.desc-list {
    margin-top: min(2.5vw, 48px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table {
    width: 100%
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table thead,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table thead {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.75vw, 33.6px);
    color: #151515;
    border-top: min(.1041666667vw, 2px) solid #151515
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tbody,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tbody {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.4583333333vw, 28px);
    color: #4b4b4b;
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr {
    width: 100%;
    border-bottom: min(.0520833333vw, 1px) solid #E5E5E5
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr th,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr td,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr th,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr td {
    padding: min(1.875vw, 36px) min(2.2916666667vw, 44px);
    text-align: center
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr th.left,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr td.left,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr th.left,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr td.left {
    text-align: left
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3)>.desc-list,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4)>.desc-list {
    margin-top: min(1.4583333333vw, 28px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3)>.desc-list li.item p,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4)>.desc-list li.item p {
    color: #999
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3)>.desc-list li.item:before,
#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4)>.desc-list li.item:before {
    background-color: #999
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(5)>ul {
    margin-top: min(3.125vw, 60px);
    display: flex;
    flex-direction: column;
    row-gap: min(2.0833333333vw, 40px)
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(5)>ul li .download-btn {
    position: relative;
    margin-top: min(.8333333333vw, 16px);
    padding: 0 min(1.25vw, 24px);
    overflow: hidden;
    width: fit-content
}

#FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(5)>ul li .download-btn .icon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    background: url(https://www.hanwhaocean.com/images/common/icon-download-b.svg) no-repeat center;
    background-size: cover
}

@media (max-width: 1023px) {
    #FT60 .main-inner .sub_container {
        padding: 130px 50px 0
    }

    #FT60 .main-inner .sub_container .ft_contents>ol {
        row-gap: 76px
    }

    #FT60 .main-inner .sub_container .ft_contents .m-b-16 {
        margin-bottom: 10px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li ul.desc-list li.item {
        margin-top: 5px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li ul.desc-list li.item:before {
        top: 8px;
        width: 4px;
        height: 1px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li ul.desc-list li.item p {
        padding-left: 8px
    }

    #FT60 .main-inner .sub_container .ft_contents .m-b-36 {
        margin-bottom: 22px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process {
        row-gap: 50px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process:before {
        left: 18px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li {
        column-gap: 34px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(2) ol.process li .num {
        width: 34px;
        height: 34px;
        font-size: 12px;
        line-height: 20px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr th,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr td,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr th,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr td {
        padding: 22px 28px;
        font-size: 12px;
        line-height: 20px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li a.link {
        height: 14px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(5)>ul {
        row-gap: 26px;
        margin-top: 38px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(5)>ul li .download-btn {
        margin-top: 10px;
        padding: 0 15px !important
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(5)>ul li .download-btn .icon:before {
        width: 12px;
        height: 12px
    }
}

@media (max-width: 768px) {
    #FT60 .main-inner .sub_container {
        padding: 0 20px
    }

    #FT60 .main-inner .sub_container .ft_contents {
        margin-top: 60px;
        max-width: none
    }

    #FT60 .main-inner .sub_container .ft_contents .m-b-16,
    #FT60 .main-inner .sub_container .ft_contents .m-b-36 {
        margin-bottom: 16px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol {
        display: flex;
        flex-direction: column;
        row-gap: 76px;
        margin-bottom: 60px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol li ul.desc-list li.item {
        margin-top: 8px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol li ul.desc-list li.item:before {
        top: 10px;
        width: 4px;
        height: 1px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1) ul.desc-list li.item {
        margin-top: 8px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1) ul.desc-list li.item p {
        margin-top: 12px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1) ul.desc-list li.item:before {
        top: 10px;
        width: 4px;
        height: 1px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1) a.link {
        display: inline-block;
        height: 17px;
        color: #f60;
        border-bottom: 1px solid #FF6600
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(1) .m_etc {
        font-weight: 400
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(1) ul li.item p {
        font-weight: 400 !important
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process {
        row-gap: 37px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process:before {
        left: 15px;
        width: 1.5px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process li {
        column-gap: 30px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process li .num {
        width: 32px;
        height: 32px;
        font-size: 16px;
        line-height: 22.4px;
        border: 1px solid #E5E5E5
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process li .num p {
        font-weight: 300
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process li .num:nth-child(3) {
        align-items: first baseline
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process li .num:nth-child(3) .desc-list {
        margin-top: 8px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process li .num.item {
        margin-top: 0
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2) ol.process>.desc-list {
        margin-top: 28px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table {
        width: 100%
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table thead,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table thead {
        font-size: 14px;
        line-height: 24.08px;
        border-top: 2px solid #151515
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table tbody,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table tbody {
        font-size: 14px;
        line-height: 24.08px;
        color: #4b4b4b;
        border-bottom: 1px solid #E5E5E5
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table tr,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table tr {
        border-bottom: 1px solid #E5E5E5
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table tr th,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table tr td,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table tr th,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table tr td {
        padding: 20px 10px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table tr th,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table tr th {
        max-width: 119px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3) table tr td,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4) table tr td {
        padding: 20px 10px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(3)>.desc-list,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(4)>.desc-list {
        margin-top: 28px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(5)>ul {
        margin-top: 40px;
        row-gap: 32px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(5)>ul li .download-btn {
        margin-top: 16px;
        padding: 0 16px !important
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(1):nth-child(2):nth-child(5)>ul li .download-btn .icon:before {
        width: 15px;
        height: 15px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li a.link {
        height: 17px
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table thead,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table thead {
        border-top: 1px solid #151515
    }

    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(3) table tr,
    #FT60 .main-inner .sub_container .ft_contents>ol>li:nth-child(4) table tr {
        border-bottom: 1px solid #E5E5E5
    }
}

#CU20 .pc-only {
    display: inline-block !important
}

#CU20 .ta-only,
#CU20 .mo-only {
    display: none !important
}

#CU20 .main-inner .sub_container {
    width: 100%;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    max-width: 1920px
}

#CU20 .main-inner .sub_container .cu_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px)
}

#CU20 .main-inner .sub_container .fontHanwha {
    font-family: Hanwha
}

#CU20 .main-inner .sub_container .cu20_tit {
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: min(2vw, 38.4px)
}

#CU20 .main-inner .sub_container .cu_top {
    margin-top: min(2.2916666667vw, 44px)
}

#CU20 .main-inner .sub_container .cu_top .cu_tab {
    margin-bottom: min(4.1666666667vw, 80px)
}

#CU20 .main-inner .sub_container .cu_top .cu_tab .m_h7 {
    position: relative;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: #b8b8b8;
    transition: .4s
}

#CU20 .main-inner .sub_container .bold {
    font-weight: 700
}

#CU20 .main-inner .sub_container .disclaimer {
    color: #999;
    margin-top: min(1.4583333333vw, 28px)
}

#CU20 .main-inner .sub_container .disclaimer ul li {
    position: relative
}

#CU20 .main-inner .sub_container .disclaimer ul li p {
    padding-left: min(.625vw, 12px);
    font-weight: 300
}

#CU20 .main-inner .sub_container .disclaimer ul li:before {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: min(.0520833333vw, 1px);
    background: #999
}

#CU20 .main-inner .sub_container .disclaimer ul li:not(:last-child) {
    margin-bottom: min(.4166666667vw, 8px)
}

#CU20 .main-inner .sub_container img {
    width: 100%;
    object-fit: cover
}

#CU20 .main-inner .sub_container .gray-2 {
    color: #4b4b4b
}

#CU20 .main-inner .sub_container .orange {
    color: #f60
}

#CU20 .main-inner .sub_container .m_t_32 {
    margin-top: min(1.6666666667vw, 32px)
}

#CU20 .main-inner .sub_container .cu_contents {
    display: flex;
    flex-direction: column;
    row-gap: min(8.3333333333vw, 160px)
}

#CU20 .main-inner .sub_container .cu_contents .contents_box {
    display: flex;
    justify-content: flex-end
}

#CU20 .main-inner .sub_container .cu_contents .contents_box .contents_inner {
    width: 100%;
    max-width: min(42.5vw, 816px)
}

#CU20 .main-inner .sub_container .cu_contents ul.info_list {
    display: flex;
    flex-direction: column;
    row-gap: min(1.6666666667vw, 32px)
}

#CU20 .main-inner .sub_container .cu_contents ul.info_list li {
    display: flex;
    flex-direction: column;
    row-gap: min(.4166666667vw, 8px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .main_img {
    height: 720px;
    position: relative;
    overflow: hidden;
    margin-bottom: min(8.3333333333vw, 160px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .main_img img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150%;
    object-fit: cover;
    object-position: center;
    padding: 0
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .m_h3 {
    margin-bottom: min(3.125vw, 60px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .main_desc {
    margin-bottom: min(6.25vw, 120px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner {
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap {
    display: flex;
    flex-direction: column;
    row-gap: min(3.125vw, 60px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs strong {
    font-weight: 400
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box {
    background-color: #f5f5f5;
    padding: min(2.0833333333vw, 40px);
    margin-top: min(1.875vw, 36px);
    display: flex;
    flex-direction: column;
    row-gap: min(1.4583333333vw, 28px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box span.add {
    display: block;
    font-weight: 300;
    margin-top: min(.4166666667vw, 8px)
}

#CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box p {
    font-size: min(.9375vw, 18px) !important;
    line-height: min(1.3125vw, 25.2px) !important
}

#CU20 .main-inner .sub_container .cu_contents .form_contents .caution {
    position: absolute;
    top: min(.5208333333vw, 10px);
    right: 0;
    color: #999;
    font-weight: 300
}

#CU20 .main-inner .sub_container .cu_contents .form_contents .title_box {
    margin-bottom: 48px
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form {
    display: flex;
    flex-direction: column;
    row-gap: min(4.1666666667vw, 80px)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .col2_box {
    width: 100%;
    display: flex;
    column-gap: min(2.5vw, 48px)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .flex_box {
    width: 100%;
    display: flex;
    align-items: flex-end
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_btns {
    display: flex;
    column-gap: min(1.0416666667vw, 20px)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_btns>button {
    width: 100%;
    min-width: 0 !important
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_btns>button:hover:before {
    width: calc(var(--size) * 1.6);
    height: calc(var(--size) * 1.6)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box {
    position: relative;
    width: 100%
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box {
    display: block;
    width: 100%;
    position: relative;
    border-bottom: min(.1041666667vw, 2px) solid #999999;
    margin-top: min(1.0416666667vw, 20px)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .error_msg {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.error .error_msg {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: max(-30px, -1.5625vw);
    font-size: min(.7291666667vw, 14px);
    font-weight: 400;
    line-height: min(1.0208333333vw, 19.6px);
    color: #ff4343
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:not(.disabled):after {
    content: "";
    position: absolute;
    left: 0;
    bottom: max(-2px, -.1042vw);
    width: 100%;
    height: min(.1041666667vw, 2px);
    background: #151515;
    transform: scale(0);
    transform-origin: left;
    transition: .5s cubic-bezier(.39, 0, .12, .99)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.error:not(.disabled):after {
    background: #ff4343
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:has(input:not(:placeholder-shown)):after {
    transform: scale(1)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.readonly {
    border-bottom: min(.1041666667vw, 2px) solid #E5E5E5
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.readonly:after {
    transform: scale(0) !important
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.readonly input {
    color: #999 !important
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.readonly input:read-only {
    cursor: default;
    pointer-events: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input {
    display: block;
    width: calc(100% - min(2.6041666667vw, 50px));
    padding: min(.625vw, 12px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    outline: none;
    cursor: text
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input::placeholder {
    color: #b8b8b8
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input::-webkit-outer-spin-button,
#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.disabled {
    border-bottom: min(.1041666667vw, 2px) solid #E5E5E5
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.disabled input {
    color: #999
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.disabled input#name {
    width: min(11.4583333333vw, 220px)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input#mail_id,
#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input#mail_domain {
    width: 100%
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn {
    position: absolute;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    top: 50%;
    right: min(.625vw, 12px);
    transform: translateY(-50%);
    background: #b8b8b8;
    border-radius: 50%;
    transition: background .2s;
    display: none;
    z-index: 222
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn.on {
    display: block
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn:hover {
    background: #999
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select {
    position: absolute;
    top: min(3.6458333333vw, 70px);
    left: 0;
    width: 100%;
    max-width: min(20.15625vw, 387px);
    height: auto;
    max-height: min(23.75vw, 456px);
    overflow-y: scroll;
    border: min(.0520833333vw, 1px) solid #E5E5E5;
    background: #fff;
    z-index: 10;
    border-radius: min(.2083333333vw, 4px);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s cubic-bezier(.39, 0, .12, .99)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select.open {
    transform: scaleY(1)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select ul li a {
    display: block;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b;
    padding: min(1.0416666667vw, 20px) min(1.25vw, 24px);
    transition: .2s;
    cursor: pointer
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select ul li a.on,
#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select ul li a:hover {
    background-color: #f5f5f5;
    color: #151515
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select::-webkit-scrollbar {
    width: 3px
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select::-webkit-scrollbar-thumb {
    background-color: #ddd;
    cursor: pointer
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .select_btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(.9375vw, 18px);
    height: min(.9375vw, 18px);
    padding: min(.5208333333vw, 10px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
    background-size: 50%;
    transform: translateY(-50%) rotate(180deg);
    transition: .3s transform;
    cursor: pointer
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .select_btn:hover {
    transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(180deg)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .select_btn.open {
    transform: translateY(-50%) rotate(0)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:has(#visit_carcount) .custom_select,
#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:has(#visit_count) .custom_select {
    max-width: min(42.5vw, 816px)
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .at {
    padding: min(.625vw, 12px) min(.625vw, 12px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #999
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box.visit_car_box .input_box input,
#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box.visit_carcount_box .input_box input,
#CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box.visit_count_box .input_box input {
    cursor: pointer
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=group] .onlyGroup {
    display: block
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=group] .onlyGroup.col2_box {
    display: flex
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .onlyGroup {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(16) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(17) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(18) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(19) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(20) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(21) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(22) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(23) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(24) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(25) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(26) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(27) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(28) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(29) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(30) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(31) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(32) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(33) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(34) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(35) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(36) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(37) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(38) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(39) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(40) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(41) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(42) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(43) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(44) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(45) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(46) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(47) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(48) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(49) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(50) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(51) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(52) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(53) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(54) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(55) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(56) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(57) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(58) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(59) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(60) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(61) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(62) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(63) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(64) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(65) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(66) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(67) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(68) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(69) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(70) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(71) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(72) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(73) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(74) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(75) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(76) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(77) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(78) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(79) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(80) {
    display: none
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .map_info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: min(2.5vw, 48px);
    margin-top: min(3.3333333333vw, 64px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_img {
    padding: min(2.6041666667vw, 50px) min(4.375vw, 84px);
    width: min(42.5vw, 816px);
    box-sizing: border-box
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_contact {
    width: min(42.5vw, 816px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_contact .m_h6 {
    margin-bottom: min(3.125vw, 60px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list {
    display: flex;
    flex-direction: column;
    row-gap: min(2.2916666667vw, 44px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path {
    display: flex;
    font-weight: 400;
    margin-bottom: min(3.125vw, 60px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path span {
    position: relative
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path span img {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px);
    vertical-align: middle;
    padding: 0 min(.78125vw, 15px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes>div:not(:last-child) {
    margin-bottom: min(2.9166666667vw, 56px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .transport {
    display: flex;
    align-items: center;
    column-gap: min(.4166666667vw, 8px);
    margin-bottom: min(.4166666667vw, 8px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .transport img.icon {
    width: min(1.6666666667vw, 32px);
    height: min(1.6666666667vw, 32px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .route {
    margin-bottom: min(.8333333333vw, 16px)
}

#CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item:not(:last-child) {
    padding-bottom: min(4.1666666667vw, 80px);
    border-bottom: 1px solid #E5E5E5
}

#CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info {
    display: flex;
    column-gap: min(2.5vw, 48px);
    margin-top: min(3.125vw, 60px)
}

#CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info>.title {
    width: 100%;
    max-width: min(42.5vw, 816px)
}

#CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list {
    width: 100%;
    max-width: min(42.5vw, 816px)
}

#CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list li:not(:last-child) {
    margin-bottom: min(1.6666666667vw, 32px)
}

#CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list .cu20_tit {
    margin-bottom: min(1.6666666667vw, 32px)
}

#CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list p:not(:last-child) {
    margin-bottom: min(1.0416666667vw, 20px)
}

#CU20 .main-inner .sch-ct {
    margin-top: min(4.1666666667vw, 80px)
}

#CU20 .main-inner .sch-ct .schedule-con {
    position: relative;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto
}

#CU20 .main-inner .sch-ct .schedule-con .schedule-wrapper {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #151515;
    padding-top: min(2.1354166667vw, 41px)
}

#CU20 .main-inner .sch-ct .schedule-con .calender {
    position: relative;
    width: min(50vw, 960px)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head {
    position: relative;
    width: 100%;
    padding: 0 min(1.25vw, 24px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head .date {
    display: flex;
    align-items: center
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head .date .sel-btn {
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    margin-left: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_open.svg) no-repeat center center/contain;
    transition: all .3s cubic-bezier(.41, .2, .53, .84)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head .date .sel-btn.on {
    transform: rotate(-180deg)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav>a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav .prev-btn {
    left: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_prev.svg) no-repeat center center/contain
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav .next-btn {
    right: min(1.25vw, 24px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_next.svg) no-repeat center center/contain
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main {
    position: relative;
    margin-top: min(1.875vw, 36px)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main table {
    width: 100%;
    border-collapse: separate
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main table tr,
#CU20 .main-inner .sch-ct .schedule-con .calender .c-main table td {
    position: relative;
    width: min(6.875vw, 132px);
    padding: min(.8333333333vw, 16px);
    box-sizing: border-box;
    vertical-align: top;
    cursor: pointer
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main table tr span,
#CU20 .main-inner .sch-ct .schedule-con .calender .c-main table td span {
    font-size: min(.9375vw, 18px);
    font-weight: 400;
    line-height: min(1.3125vw, 25.2px);
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    display: flex;
    justify-content: center;
    align-items: center
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .week th {
    padding: min(.5208333333vw, 10px) min(.8333333333vw, 16px);
    border-bottom: 1px solid #E5E5E5
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .days td {
    padding: min(.8333333333vw, 16px);
    height: min(5.8333333333vw, 112px);
    min-height: min(5.8333333333vw, 112px)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .off {
    color: #b8b8b8;
    cursor: default
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .wk {
    cursor: default;
    pointer-events: none
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .wk span {
    color: #f60
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .today span {
    border: 1px solid #151515;
    border-radius: 100%
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .visitDay span {
    position: relative;
    border-radius: 100%;
    transition: all .5s ease;
    color: #fff
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-main .visitDay span:after {
    content: "";
    position: absolute;
    width: min(2.5vw, 48px);
    height: min(2.5vw, 48px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f60;
    border-radius: 100%;
    z-index: -1
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel {
    position: absolute;
    top: min(5.3125vw, 102px);
    left: 50%;
    transform: translate(-50%);
    width: min(34.21875vw, 657px);
    height: min(20.625vw, 396px);
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    display: flex;
    z-index: 10;
    overflow: auto;
    display: none;
    opacity: 0;
    visibility: hidden
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel.on {
    display: flex;
    visibility: visible;
    opacity: 1
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li {
    padding: min(.8333333333vw, 16px);
    box-sizing: border-box;
    text-align: center;
    cursor: pointer
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li span {
    font-size: min(1.25vw, 24px);
    font-weight: 400;
    line-height: min(2vw, 38.4px);
    color: #b8b8b8;
    position: relative;
    display: inline;
    pointer-events: none;
    background-image: linear-gradient(#151515, #151515);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: all .3s ease
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li.on span {
    color: #151515
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li:hover span {
    color: #151515;
    background-size: 100% 1px
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year {
    position: relative;
    width: min(9.5833333333vw, 184px);
    height: 100%;
    border-right: 1px solid #ccc
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar {
    width: 3px
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar-thumb {
    background-color: #ddd;
    cursor: pointer
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month {
    width: min(24.6354166667vw, 473px);
    height: 100%;
    padding: min(2.0833333333vw, 40px);
    box-sizing: border-box
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month ul {
    display: grid;
    grid-gap: min(.625vw, 12px) 0;
    grid-template-columns: repeat(3, 33.3333333333%)
}

#CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month li {
    text-align: center
}

#CU20 .main-inner .sch-ct .schedule-con .planning {
    position: relative;
    width: min(35vw, 672px)
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type {
    width: 100%;
    border-bottom: 1px solid #E5E5E5
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .local-box {
    text-align: right;
    padding: min(.5729166667vw, 11px) min(2.0833333333vw, 40px);
    box-sizing: border-box
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .month-box {
    text-align: left;
    padding: min(1.09375vw, 21px) min(1.1458333333vw, 22px);
    box-sizing: border-box;
    margin-top: min(1.875vw, 36px)
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .local {
    font-weight: 300
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate {
    height: 100%
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .unselected_local {
    display: block
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .selected_local {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .unselected_box {
    display: block;
    align-items: center;
    justify-content: center;
    height: 100%
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .unselected_box .cu_txt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

#CU20 .main-inner .sch-ct .schedule-con .planning .planDate .selected_box,
#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .date-type .unselected_local {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .date-type .selected_local {
    display: block
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .unselected_box {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box {
    display: block
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap {
    padding: 0 min(.8333333333vw, 16px);
    margin-top: min(2.2916666667vw, 44px)
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns {
    position: relative;
    display: flex;
    padding: min(.4166666667vw, 8px);
    background-color: #f5f5f5;
    border-radius: min(5.2083333333vw, 100px);
    column-gap: min(1.25vw, 24px);
    overflow: hidden
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns:before {
    content: "";
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: min(.5208333333vw, 10px) min(1.0416666667vw, 20px);
    width: min(13.5416666667vw, 260px);
    height: min(1.3020833333vw, 25px);
    border-radius: min(5.2083333333vw, 100px);
    z-index: 1;
    box-shadow: 0 0 min(.5208333333vw, 10px) 0 #0000001a;
    transition: left .4s cubic-bezier(.39, 0, .12, .99), opacity .4s cubic-bezier(.39, 0, .12, .99);
    opacity: 0
}

@media (max-width: 1023px) {
    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns:before {
        height: 20px;
        width: 43%
    }
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns.isLeft:before {
    left: 25%;
    opacity: 1
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns.isLeft li:nth-child(1) label {
    pointer-events: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns.isRight:before {
    left: 75%;
    opacity: 1
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns.isRight li:nth-child(2) label {
    pointer-events: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li {
    width: 100%;
    z-index: 2
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li label {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li label[color=none] {
    pointer-events: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li input[type=radio] {
    position: absolute;
    opacity: 0
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li span {
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(.5208333333vw, 10px) min(1.0416666667vw, 20px);
    border-radius: min(5.2083333333vw, 100px);
    box-sizing: border-box;
    font-weight: 300
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap {
    font-weight: 300
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .tit {
    display: block;
    padding: min(1.1458333333vw, 22px);
    margin-top: min(5.2083333333vw, 100px);
    margin-bottom: min(.46875vw, 9px)
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 min(.8333333333vw, 16px);
    gap: min(1.0416666667vw, 20px)
}

@media (max-width: 1023px) {
    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns {
        grid-template-columns: 1fr 1fr
    }
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns li input[type=radio] {
    position: absolute;
    opacity: 0
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns li label {
    width: 100%;
    height: 100%
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns li label[color=black],
#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns li label [color=none] {
    pointer-events: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .disclaimer {
    padding: 0 min(.8333333333vw, 16px)
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap.isGroup .time_btns li:nth-child(2) {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap.isGroup .time_btns li:nth-child(5) {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap.isIndividual .time_btns li:nth-child(1) {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap.isIndividual .time_btns li:nth-child(3) {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap.isIndividual .time_btns li:nth-child(4) {
    display: none
}

#CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap.isIndividual .time_btns li:nth-child(6) {
    display: none
}

#CU20 .main-inner #confirmPopup .pop_contents {
    max-height: min(42.8645833333vw, 823px)
}

#CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main_wrap {
    background-color: #f5f5f5;
    padding: min(1.25vw, 24px) min(.625vw, 12px) min(1.25vw, 24px) min(1.25vw, 24px);
    border-radius: min(.5208333333vw, 10px)
}

#CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main {
    padding-right: min(1.25vw, 24px);
    margin-bottom: 0;
    max-height: min(20.3645833333vw, 391px)
}

#CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main p {
    font-weight: 300;
    margin-top: min(.8333333333vw, 16px)
}

#CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main::-webkit-scrollbar-thumb {
    background-color: #e5e5e5
}

#CU20 .main-inner #confirmPopup .pop_contents .check_box {
    margin-top: min(1.25vw, 24px);
    margin-bottom: min(2.9166666667vw, 56px)
}

#CU20 .main-inner #confirmPopup .pop_contents .check_box input[type=checkbox] {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    color: #1e90ff;
    vertical-align: middle;
    -webkit-appearance: none;
    background: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    border-radius: 50%;
    background-color: #fff;
    transition: background .3s;
    cursor: pointer;
    margin-right: min(.5208333333vw, 10px)
}

#CU20 .main-inner #confirmPopup .pop_contents .check_box input[type=checkbox]:before {
    content: "";
    color: transparent;
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    border: 0;
    background-color: transparent;
    background-size: contain;
    box-shadow: inset 0 0 0 1px #ccd3d8
}

#CU20 .main-inner #confirmPopup .pop_contents .check_box input[type=checkbox]:checked:before {
    box-shadow: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_check_o.svg) no-repeat center center/contain
}

#CU20 .main-inner #confirmPopup .pop_contents .check_box label {
    font-weight: 300;
    cursor: pointer
}

#CU20 .main-inner .blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}

@media (max-width: 1023px) {
    #CU20 .main-inner .sch-ct {
        margin-top: 28px
    }

    #CU20 .main-inner .sch-ct .schedule-con {
        padding: 0 50px;
        margin-bottom: 0
    }

    #CU20 .main-inner .sch-ct .schedule-con .schedule-wrapper {
        padding-top: 24px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender {
        width: 56.9047619048%
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head {
        padding: 0 15px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .date .sel-btn {
        width: 24px;
        height: 24px;
        margin-left: 15px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav>a {
        width: 24px;
        height: 24px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav .prev-btn {
        left: 15px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav .next-btn {
        right: 15px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main {
        margin-top: 18px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table {
        border-spacing: 0px 0px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table tr,
    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table td {
        width: 14.2857142857%;
        padding: 10px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table tr span,
    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table td span {
        font-size: 14px;
        line-height: 1.4;
        width: 30px;
        height: 30px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .week th {
        padding: 6px 10px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .days td {
        padding: 10px;
        height: 74px;
        min-height: 74px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .visitDay span:after {
        width: 6px;
        height: 6px;
        bottom: -9px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel {
        top: min(5.3125vw, 102px);
        width: 70%;
        height: 224px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li {
        padding: 10px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li span {
        font-size: 16px;
        line-height: 1.6
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year {
        width: auto
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar {
        width: 2px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month {
        width: auto;
        padding: 16px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month ul {
        grid-gap: 8px 0;
        grid-template-columns: repeat(3, 33.3333333333%)
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning {
        width: 40.2380952381%
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .local-box {
        padding: 6px 20px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .month-box {
        padding: 10px;
        margin-top: 28x
    }
}

@media (max-width: 768px) {
    #CU20 .main-inner .sch-ct {
        margin-top: 40px
    }

    #CU20 .main-inner .sch-ct .schedule-con {
        padding: 0 20px;
        margin-bottom: 0
    }

    #CU20 .main-inner .sch-ct .schedule-con .schedule-wrapper {
        padding-top: 22px;
        flex-direction: column;
        border-top: 2px solid #151515
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender {
        width: 100%
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head {
        padding: 0 8px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .date .sel-btn {
        width: 28px;
        height: 28px;
        margin-left: 12px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav>a {
        width: 28px;
        height: 28px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav .prev-btn {
        background: url(https://www.hanwhaocean.com/images/common/arrow_prev_next_light.svg) no-repeat center center/contain;
        left: 8px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-head .nav .next-btn {
        background: url(https://www.hanwhaocean.com/images/common/arrow_prev_next_light.svg) no-repeat center center/contain;
        transform: translateY(-50%) rotate(180deg);
        right: 8px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main {
        margin-top: 20px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table tr,
    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table td {
        width: 14.2857142857%;
        padding: 8px 5.5px 12px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table tr span,
    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main table td span {
        font-size: 14px;
        line-height: 19.6px;
        width: 36px;
        height: 36px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .week th {
        padding: 4px 5.5px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .days td {
        padding: 8px 5.5px 12px;
        height: 56px;
        min-height: 56px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .visitDay span:after {
        width: 36px;
        height: 36px;
        bottom: -13px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel {
        top: 51px;
        width: 100%;
        height: 336px;
        flex-direction: column
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li {
        padding: 11.5px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel ul>li span {
        font-size: 18px;
        line-height: 25.2px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel {
        overflow: hidden;
        height: auto
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year {
        width: 100%;
        height: 76px;
        border-right: 0;
        border-bottom: 1px solid #E5E5E5
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to right, #fff, #fff0);
        z-index: 10
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 100%;
        background: linear-gradient(to left, #fff, #fff0);
        z-index: 10
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul {
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: scroll;
        padding: 14px 11px;
        box-sizing: border-box
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul li {
        min-width: 96px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-year ul::-webkit-scrollbar {
        width: 100px;
        height: 2px;
        z-index: 11
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month {
        width: 100%;
        padding: 16px 5px
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-sel .sel-month ul {
        grid-gap: 12px 0;
        grid-template-columns: repeat(3, 33.3333333333%)
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning {
        width: 100%;
        margin-top: 62px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .localDate {
        padding: 8px 0 6px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type {
        padding-bottom: 17px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .local-box {
        padding: 0
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .date-type .month-box {
        padding: 0;
        margin: 0
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .unselected_box {
        padding: 88px 0 64px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning .planDate .selected_box {
        display: none
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box {
        display: block
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap {
        padding: 0;
        margin-top: 32px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns {
        padding: 4px;
        border-radius: 100px;
        column-gap: 4px;
        height: 52px;
        box-sizing: border-box
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns:before {
        top: 50%;
        left: 50%;
        padding: 10px 14px;
        width: 50%;
        height: 44px;
        border-radius: 50px;
        box-shadow: 0 0 10px #0000001a;
        box-sizing: border-box
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns.isLeft:before {
        left: 26%
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns.isRight:before {
        left: 74%
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li label {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .group_wrap .group_btns li span {
        font-weight: 400
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .tit {
        padding: 0;
        margin-top: 48px;
        margin-bottom: 12px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns {
        grid-template-columns: 1fr 1fr;
        padding: 0;
        gap: 12px
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns li label {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .time_btns li label span.txt {
        font-weight: 300;
        font-size: 14px !important;
        line-height: 24.08px !important
    }

    #CU20 .main-inner .sch-ct .schedule-con .planning.selected .planDate .selected_box .time_wrap .disclaimer {
        padding: 0 min(.8333333333vw, 16px)
    }
}

.none {
    display: none
}

@media (min-width: 769px) and (max-width: 1023px) {
    #CU20 .pc-only {
        display: none !important
    }

    #CU20 .ta-only {
        display: block !important
    }

    #CU20 .mo-only {
        display: none !important
    }

    #CU20 .main-inner .sub_container {
        padding: 0 50px
    }

    #CU20 .main-inner .sub_container .cu_contents {
        row-gap: 100px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents {
        height: auto
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .main_img {
        margin-bottom: 100px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .m_h3 {
        margin-bottom: 38px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .main_desc {
        margin-bottom: 76px
    }

    #CU20 .main-inner .sub_container .cu_txt {
        font-size: 12px;
        line-height: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .contents_box .contents_inner {
        row-gap: 76px;
        max-width: 50%
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap {
        row-gap: 38px
    }

    #CU20 .main-inner .sub_container .cu_contents ul.info_list {
        row-gap: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents ul.info_list li {
        row-gap: 5px
    }

    #CU20 .main-inner .sub_container .cu20_tit {
        font-size: 15px;
        line-height: 22px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box {
        padding: 26px;
        margin-top: 22px;
        row-gap: 18px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box p {
        font-size: 14px !important;
        line-height: 1.4 !important
    }

    #CU20 .main-inner .sch-ct .schedule-con {
        padding: 0
    }

    #CU20 .main-inner .sch-ct .schedule-con .calender .c-main .visitDay span:after {
        width: 30px;
        height: 30px
    }

    #CU20 .main-inner #confirmPopup .pop_contents {
        max-height: 520px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main_wrap {
        padding: 15px 8px 15px 15px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main {
        padding-right: 15px;
        max-height: 246px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main p {
        margin-top: 10px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .check_box {
        margin-top: 15px;
        margin-bottom: 34px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .check_box input[type=checkbox] {
        width: 18px;
        height: 18px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .map_info {
        margin-top: 40px;
        column-gap: 0
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_contact .m_h6,
    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path {
        margin-bottom: 38px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .transport {
        column-gap: 5px;
        margin-bottom: 5px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .route {
        margin-bottom: 10px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item:not(:last-child) {
        padding-bottom: 50px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list {
        row-gap: 28px
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info {
        column-gap: 30px;
        margin-top: 38px
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list li:not(:last-child) {
        margin-bottom: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list .cu20_tit {
        margin-bottom: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents .title_box {
        margin-bottom: 30px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form {
        row-gap: 50px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box {
        margin-top: 12px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select {
        top: 50px;
        max-height: 288px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select ul li a {
        font-size: 12px;
        line-height: 20px;
        padding: 12px 15px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents .caution {
        position: relative;
        display: block
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .at {
        padding: 8px;
        font-size: 12px;
        line-height: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.error .error_msg {
        font-size: 9px;
        line-height: 12px;
        bottom: -18px
    }
}

@media (max-width: 768px) {

    #CU20 .pc-only,
    #CU20 .ta-only {
        display: none !important
    }

    #CU20 .mo-only {
        display: block !important
    }

    #CU20 .main-inner .sub_container {
        width: 100%;
        padding: 0;
        max-width: none
    }

    #CU20 .main-inner .sub_container .cu_txt {
        font-size: 16px;
        line-height: 27.52px
    }

    #CU20 .main-inner .sub_container .cu20_tit {
        font-size: 18px;
        line-height: 28.08px
    }

    #CU20 .main-inner .sub_container .cu_top {
        margin-top: 24px
    }

    #CU20 .main-inner .sub_container .cu_top .cu_tab {
        margin-bottom: 40px;
        padding: 0 20px
    }

    #CU20 .main-inner .sub_container .cu_top .cu_tab .m_h7 {
        font-weight: 400
    }

    #CU20 .main-inner .sub_container .disclaimer {
        color: #999;
        margin-top: 16px
    }

    #CU20 .main-inner .sub_container .disclaimer ul li p {
        padding-left: 8px
    }

    #CU20 .main-inner .sub_container .disclaimer ul li:before {
        top: 12px;
        left: 0;
        width: 4px;
        height: 1px
    }

    #CU20 .main-inner .sub_container .m_t_32 {
        margin-top: 32px
    }

    #CU20 .main-inner .sub_container .cu_contents {
        row-gap: 80px
    }

    #CU20 .main-inner .sub_container .cu_contents .contents_box {
        display: block
    }

    #CU20 .main-inner .sub_container .cu_contents .contents_box .contents_inner {
        width: 100%;
        max-width: none;
        row-gap: 80px
    }

    #CU20 .main-inner .sub_container .cu_contents ul.info_list {
        row-gap: 32px
    }

    #CU20 .main-inner .sub_container .cu_contents ul.info_list li {
        row-gap: 8px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents {
        height: auto
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .main_img {
        height: 516px;
        margin-bottom: 58px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .m_h3 {
        margin-bottom: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .main_desc {
        margin-bottom: 60px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .title_box,
    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box {
        padding: 0 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner {
        row-gap: 80px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap {
        display: flex;
        flex-direction: column;
        row-gap: 32px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs strong {
        font-weight: 400
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box {
        padding: 20px;
        margin-top: 32px;
        row-gap: 16px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box span.add {
        margin-top: 4px
    }

    #CU20 .main-inner .sub_container .cu_contents .info_contents .contents_box .contents_inner .info_wrap .descs .cu_other_box p {
        font-size: 14px !important;
        line-height: 25.2px !important
    }

    #CU20 .main-inner .sub_container .cu_contents .date_contents>.title_box {
        padding: 0 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents {
        padding: 0 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents .caution {
        top: 6px;
        right: 0;
        font-size: 12px !important;
        line-height: 16.8px !important
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents .caution.row {
        position: relative;
        display: block
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form {
        row-gap: 40px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_btns {
        column-gap: 12px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_btns>button {
        width: 100%
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box {
        border-bottom: 1px solid #999999;
        margin-top: 8px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.error .error_msg {
        bottom: -25px;
        font-size: 12px;
        font-weight: 300;
        line-height: 16.8px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:not(.disabled):after {
        bottom: -2px;
        width: 100%;
        height: 2px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box input {
        width: calc(100% - min(1.875vw, 36px));
        padding: 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 27.52px;
        height: 52px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box.disabled {
        border-bottom: 2px solid #E5E5E5
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn {
        width: 20px;
        height: 20px;
        right: 8px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn:before {
        transform: translate(-50%, -50%) rotate(45deg);
        width: 20px;
        height: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .del_btn:after {
        transform: translate(-50%, -50%) rotate(-45deg);
        height: 20px;
        background-color: #fff
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select {
        position: absolute;
        top: 62px;
        left: 0;
        max-width: 100%;
        max-height: 392px;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        transform: scaleY(0);
        scrollbar-color: #E5E5E5 rgba(0, 0, 0, 0);
        scrollbar-width: thin
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select ul li a {
        font-size: 16px;
        line-height: 24px;
        padding: 16px 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select::-webkit-scrollbar {
        width: 3px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .custom_select::-webkit-scrollbar-thumb {
        background: #e5e5e5
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box .select_btn {
        width: 20px;
        height: 20px;
        padding: 8px;
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
        background-size: 50%;
        transform: translateY(-50%) rotate(180deg);
        transition: .3s transform;
        cursor: pointer
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:has(#visit_carcount) .custom_select,
    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:has(#visit_count) .custom_select {
        max-width: 100%
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .input_box:not(.disabled):after {
        bottom: -1px;
        height: 1px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box .at {
        padding: 12px;
        font-size: 16px;
        line-height: 27.52px
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box.visit_car_box .input_box input,
    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box.visit_carcount_box .input_box input,
    #CU20 .main-inner .sub_container .cu_contents .form_contents form .form_box.visit_count_box .input_box input {
        cursor: pointer
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=group] .onlyGroup {
        display: block
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=group] .onlyGroup.col2_box {
        display: flex
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .onlyGroup {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(16) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(17) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(18) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(19) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(20) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(21) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(22) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(23) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(24) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(25) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(26) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(27) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(28) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(29) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(30) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(31) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(32) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(33) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(34) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(35) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(36) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(37) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(38) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(39) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(40) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(41) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(42) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(43) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(44) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(45) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(46) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(47) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(48) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(49) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(50) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(51) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(52) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(53) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(54) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(55) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(56) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(57) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(58) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(59) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(60) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(61) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(62) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(63) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(64) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(65) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(66) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(67) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(68) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(69) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(70) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(71) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(72) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(73) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(74) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(75) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(76) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(77) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(78) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(79) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .form_contents form[data-type=individual] .visit_count_box .custom_select ul li:nth-child(80) {
        display: none
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents {
        padding: 0 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .map_info {
        grid-template-columns: 1fr;
        column-gap: 0;
        margin-top: 24px;
        margin-bottom: 80px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_img {
        padding: 0;
        width: 100%;
        margin-bottom: 40px;
        display: flex;
        align-items: center
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_contact {
        width: 100%
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .map_info .map_contact .m_h6 {
        margin-bottom: 48px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list {
        display: flex;
        flex-direction: column;
        row-gap: 40px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path span:after {
        top: 49%;
        right: 10px;
        width: 22px;
        height: 22px;
        padding: 0 44px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes>div:not(:last-child) {
        margin-bottom: 32px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .transport {
        column-gap: 8px;
        margin-bottom: 8px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .transport img.icon {
        width: 24px;
        height: 24px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .route {
        margin-bottom: 0;
        font-weight: 300
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .routes .orange {
        display: block;
        margin-top: 8px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item:not(:last-child) {
        padding-bottom: 60px;
        border-bottom: 1px solid #E5E5E5
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents {
        padding: 0 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info {
        display: block;
        column-gap: 0;
        margin-top: 40px;
        width: 100%
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info>.title {
        max-width: none
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list {
        max-width: none;
        margin-top: 48px
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list li {
        row-gap: 0
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list li:not(:last-child) {
        margin-bottom: 32px
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list .cu20_tit {
        margin-bottom: 12px;
        font-weight: 400
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list p {
        font-weight: 400
    }

    #CU20 .main-inner .sub_container .cu_contents .parking_contents .parking_info .info_list p:not(:last-child) {
        margin-bottom: 8px
    }

    #CU20 .main-inner .m_popup .pop_contents {
        border-radius: 20px
    }

    #CU20 .main-inner .m_popup .pop_contents .pop_foot {
        width: 100%;
        display: flex;
        column-gap: 12px
    }

    #CU20 .main-inner .m_popup .pop_contents .pop_foot button {
        width: 100%
    }

    #CU20 .main-inner #confirmPopup .pop_contents {
        width: 100%;
        height: 571px;
        max-height: none;
        min-height: 0;
        padding: 24px 28px;
        border-radius: 20px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_head {
        margin-bottom: 20px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main_wrap {
        padding: 20px 8px 20px 20px;
        border-radius: 10px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main {
        padding-right: 16px;
        max-height: 278px;
        scrollbar-color: #E5E5E5 rgba(0, 0, 0, 0);
        scrollbar-width: thin
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main::-webkit-scrollbar {
        width: 3px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main::-webkit-scrollbar-thumb {
        background: #e5e5e5
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_cnt_main p {
        margin-top: 12px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .check_box {
        margin-top: 20px;
        margin-bottom: 32px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .check_box input[type=checkbox] {
        width: 20px;
        height: 20px;
        margin-right: 3px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_foot {
        display: flex;
        column-gap: 12px
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_foot button {
        width: 100%
    }

    #CU20 .main-inner #confirmPopup .pop_contents .pop_foot button span.txt {
        font-size: 14px !important;
        line-height: 24.08px !important
    }
}

#CU20.en .main-inner .sub_container .cu_contents .info_contents .main_img {
    margin-bottom: 0
}

#CU20.en .main-inner .sub_container .cu_contents {
    row-gap: 60px;
    padding-top: 20px
}

#CU20.en .main-inner .sub_container .cu_contents .info_contents .m_h3 {
    margin-top: 60px
}

#CU20:not(.en) .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path span img {
    transform: translateY(-1px)
}

@media (max-width: 1023px) {
    #CU20.en .main-inner .sub_container .cu_contents .contents_box .contents_inner {
        width: 50%
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list {
        margin-top: 20px
    }
}

@media (max-width: 768px) {
    #CU20.en .main-inner .sub_container .cu_contents .contents_box .contents_inner {
        width: 100%
    }

    #CU20.en .main-inner .sub_container .cu_contents .parking_contents {
        padding-top: 20px
    }

    #CU20 .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path span img {
        width: 22px;
        height: 20px;
        padding: 0 10px
    }
}

@media all and (max-width: 440px) {
    #CU20.en .main-inner .sub_container .cu_contents .map_contents .contents_box .contents_inner .path_list .path_item .path.mo_column {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px
    }
}

#CU40 .pc-only {
    display: inline-block !important
}

#CU40 .ta-only,
#CU40 .mo-only {
    display: none !important
}

#CU40 .main-inner .sub_container {
    width: 100%;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    max-width: 1920px
}

#CU40 .main-inner .sub_container .cu_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px)
}

#CU40 .main-inner .sub_container .fontHanwha {
    font-family: Hanwha
}

#CU40 .main-inner .sub_container .cu_top {
    margin-top: 24px
}

#CU40 .main-inner .sub_container .cu_top .cu_tab {
    margin-bottom: 120px
}

@media (max-width: 768px) {
    #CU40 .main-inner .sub_container .cu_top .cu_tab {
        padding: 0 20px
    }
}

#CU40 .main-inner .sub_container .cu_top .cu_tab .m_h7 {
    font-weight: 400
}

#CU40 .main-inner .sub_container .disclaimer {
    color: #999
}

#CU40 .main-inner .sub_container .disclaimer>ul li {
    position: relative
}

#CU40 .main-inner .sub_container .disclaimer>ul li p {
    padding-left: min(.625vw, 12px);
    font-weight: 300;
    color: #999 !important
}

#CU40 .main-inner .sub_container .disclaimer>ul li:before {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: min(.0520833333vw, 1px);
    background: #999
}

#CU40 .main-inner .sub_container img {
    width: 100%;
    object-fit: contain
}

#CU40 .main-inner .sub_container .m_t_48 {
    margin-top: min(2.5vw, 48px) !important
}

#CU40 .main-inner .sub_container .m_t_36 {
    margin-top: min(1.875vw, 36px) !important
}

#CU40 .main-inner .sub_container .m_t_17 {
    margin-top: min(.8854166667vw, 17px) !important
}

#CU40 .main-inner .sub_container .cu_contents .main_contents .main_img {
    margin-top: min(4.1666666667vw, 80px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents {
    margin-top: min(8.3333333333vw, 160px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: min(6.25vw, 120px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul {
    width: 100%;
    max-width: min(42.5vw, 816px);
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h7 {
    margin-bottom: min(2.5vw, 48px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p:not(:last-child) {
    margin-bottom: min(1.0416666667vw, 20px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p span {
    position: relative;
    padding-left: min(.625vw, 12px);
    margin-left: min(1.0416666667vw, 20px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p span:before {
    content: "";
    position: absolute;
    top: min(.5208333333vw, 10px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: 1px;
    background: #4b4b4b
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h9 {
    margin-top: min(4.1666666667vw, 80px);
    margin-bottom: min(1.6666666667vw, 32px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table {
    width: 100%;
    border-top: 2px solid #000
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table tr {
    border-bottom: 1px solid #E5E5E5
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table th {
    padding: min(1.875vw, 36px) min(2.2916666667vw, 44px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 400;
    line-height: min(1.4583333333vw, 28px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table td {
    color: #4b4b4b
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns {
    display: flex;
    column-gap: min(1.0416666667vw, 20px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns a {
    padding: 0 min(1.25vw, 24px)
}

#CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns a .icon {
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_w.svg) no-repeat center center/contain
}

@media (max-width: 1023px) {
    #CU40 .pc-only {
        display: none !important
    }

    #CU40 .ta-only {
        display: block !important
    }

    #CU40 .mo-only {
        display: none !important
    }

    #CU40 .main-inner .sub_container .cu_top {
        margin-top: 15px
    }

    #CU40 .main-inner .sub_container .cu_top .cu_tab {
        padding: 0;
        margin-bottom: 76px
    }

    #CU40 .main-inner .sub_container .cu_contents .main_contents .main_img {
        margin-top: 50px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents {
        margin-top: 100px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents {
        margin-top: 76px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul {
        row-gap: 76px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h7 {
        margin-bottom: 30px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h9 {
        margin-bottom: 20px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h9 {
        margin-top: 30px !important
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p:not(:last-child) {
        margin-bottom: 12px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p {
        font-size: 12px;
        line-height: 20px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p span {
        padding-left: 8px;
        margin-left: 12px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p span:before {
        top: 6px;
        width: 3px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table th {
        padding: 22px 28px;
        font-size: 12px;
        line-height: 20px
    }

    #CU40 .main-inner .sub_container .cu_txt {
        font-size: 12px;
        line-height: 20px
    }

    #CU40 .main-inner .sub_container .disclaimer>ul li:before {
        top: 8px;
        width: 3px;
        height: 1px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns {
        column-gap: 12px
    }

    #CU40 .main-inner .sub_container .m_t_17 {
        margin-top: 12px !important
    }
}

@media (max-width: 768px) {

    #CU40 .pc-only,
    #CU40 .ta-only {
        display: none !important
    }

    #CU40 .mo-only {
        display: block !important
    }

    #CU40 .main-inner .sub_container {
        width: 100%;
        padding: 0;
        max-width: none
    }

    #CU40 .main-inner .sub_container .cu_txt {
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px
    }

    #CU40 .main-inner .sub_container .cu_top {
        margin-top: 24px
    }

    #CU40 .main-inner .sub_container .cu_top .cu_tab {
        margin-bottom: 40px;
        padding: 0 20px
    }

    #CU40 .main-inner .sub_container .cu_top .cu_tab .m_h7 {
        font-weight: 400
    }

    #CU40 .main-inner .sub_container .disclaimer>ul li p {
        padding-left: 8px
    }

    #CU40 .main-inner .sub_container .disclaimer>ul li:before {
        top: 10px;
        left: 0;
        width: 4px;
        height: 1px
    }

    #CU40 .main-inner .sub_container .m_t_48 {
        margin-top: 28px !important
    }

    #CU40 .main-inner .sub_container .m_t_36,
    #CU40 .main-inner .sub_container .m_t_17 {
        margin-top: 16px !important
    }

    #CU40 .main-inner .sub_container .cu_contents {
        max-width: none;
        padding: 0 20px
    }

    #CU40 .main-inner .sub_container .cu_contents .main_contents .main_img {
        margin-top: 20px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents,
    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents {
        margin-top: 60px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul {
        max-width: 100%;
        row-gap: 60px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h7 {
        margin-bottom: 28px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p {
        font-size: 16px;
        font-weight: 400;
        line-height: 27.52px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p:not(:last-child) {
        margin-bottom: 8px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p span {
        padding-left: 8px;
        margin-left: 0
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li p span:before {
        top: 10px;
        width: 4px;
        height: 1px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .m_h9 {
        margin-top: 28px;
        margin-bottom: 16px;
        font-size: 18px !important;
        line-height: 28.08px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table {
        border-top: 1px solid #000
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table tr {
        border-bottom: 1px solid #E5E5E5
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table th {
        padding: 28px 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 24.08px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table td {
        font-weight: 400
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns {
        flex-direction: column;
        row-gap: 12px
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns a {
        padding: 0 20px !important;
        width: fit-content
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .btns a .icon {
        width: 20px;
        height: 20px;
        background: url(https://www.hanwhaocean.com/images/common/icon_arrow_right_w.svg) no-repeat center center/contain
    }

    #CU40 .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .disclaimer ul li p {
        font-weight: 300
    }
}

#CU40.en .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table td {
    padding: 20px 0
}

@media (max-width: 768px) {
    #CU40.en .main-inner .sub_container .cu_contents .sub_contents .info_contents>ul>li .tables .table table td {
        padding: 20px 0
    }
}

#CU50 .pc-only {
    display: inline-block !important
}

#CU50 .ta-only,
#CU50 .mo-only {
    display: none !important
}

#CU50 .main-inner .cu_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b
}

#CU50 .main-inner .sub_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 1920px;
    padding: 0 min(6.25vw, 120px);
    font-style: normal;
    box-sizing: border-box
}

#CU50 .main-inner .sub_container .fontHanwha {
    font-family: Hanwha
}

#CU50 .main-inner .sub_container .disclaimer {
    color: #999;
    margin-top: min(1.4583333333vw, 28px)
}

#CU50 .main-inner .sub_container .disclaimer ul li {
    position: relative;
    font-weight: 300
}

#CU50 .main-inner .sub_container .disclaimer ul li p {
    padding-left: min(.625vw, 12px)
}

#CU50 .main-inner .sub_container .disclaimer ul li p:before {
    content: "";
    position: absolute;
    top: min(.625vw, 12px);
    left: 0;
    width: min(.2083333333vw, 4px);
    height: min(.0520833333vw, 1px);
    background: #999
}

#CU50 .main-inner .sub_container .disclaimer ul li:not(:last-child) {
    margin-bottom: min(.4166666667vw, 8px)
}

#CU50 .main-inner .sub_container .ft_contents {
    width: min(42.5vw, 816px);
    display: flex;
    flex-direction: column;
    row-gap: min(3.125vw, 60px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm {
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .caution {
    position: absolute;
    top: min(.5208333333vw, 10px);
    right: 0;
    color: #999;
    font-weight: 300
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap {
    padding: 0 min(.8333333333vw, 16px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns {
    position: relative;
    display: flex;
    padding: min(.4166666667vw, 8px);
    background-color: #f5f5f5;
    border-radius: min(5.2083333333vw, 100px);
    column-gap: min(1.25vw, 24px);
    overflow: hidden
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns:before {
    content: "";
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    padding: min(.78125vw, 15px) min(1.0416666667vw, 20px);
    width: min(17.2916666667vw, 332px);
    height: min(1.3020833333vw, 25px);
    border-radius: min(5.2083333333vw, 100px);
    z-index: 1;
    box-shadow: 0 0 min(.5208333333vw, 10px) 0 #0000001a;
    transition: .4s cubic-bezier(.39, 0, .12, .99);
    opacity: 0
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isLeft:before {
    left: min(.4166666667vw, 8px);
    opacity: 1
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isLeft li:nth-child(1) {
    pointer-events: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isRight:before {
    left: calc(50% + min(.625vw, 12px));
    opacity: 1
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isRight li:nth-child(2) {
    pointer-events: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li {
    width: 100%;
    z-index: 2
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li label {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li label[color=none] {
    pointer-events: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li input[type=radio] {
    position: absolute;
    opacity: 0
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li span {
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(.78125vw, 15px) min(1.0416666667vw, 20px);
    border-radius: min(5.2083333333vw, 100px);
    box-sizing: border-box;
    font-weight: 300
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset {
    position: relative
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .fieldTitle {
    margin-bottom: min(3.125vw, 60px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .req_caution {
    position: absolute;
    top: min(1.1979166667vw, 23px);
    right: 0;
    color: #ff4343;
    font-weight: 300
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents {
    display: flex;
    flex-direction: column;
    row-gap: min(4.1666666667vw, 80px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_box {
    display: flex;
    column-gap: min(2.5vw, 48px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col3_btns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: min(1.0416666667vw, 20px);
    margin-top: min(1.0416666667vw, 20px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(1.0416666667vw, 20px);
    margin-top: min(1.0416666667vw, 20px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .flex_box {
    display: flex;
    align-items: flex-end
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents li {
    position: relative
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents li input[type=radio] {
    position: absolute;
    opacity: 0
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents li label {
    width: 100%
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box {
    position: relative;
    width: 100%
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box label {
    position: relative
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box label.required:after {
    content: "*";
    position: absolute;
    right: max(-16px, -.8333vw);
    top: max(-2px, -.1042vw);
    color: #ff4343;
    font-size: min(.9375vw, 18px);
    font-weight: 400;
    line-height: min(1.3125vw, 25.2px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box {
    display: block;
    width: 100%;
    position: relative;
    border-bottom: min(.1041666667vw, 2px) solid #999999;
    margin-top: min(1.0416666667vw, 20px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .error_msg {
    display: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.error .error_msg {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: max(-30px, -1.5625vw);
    font-size: min(.7291666667vw, 14px);
    font-weight: 400;
    line-height: min(1.0208333333vw, 19.6px);
    color: #ff4343
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box:not(.disabled):after {
    content: "";
    position: absolute;
    left: 0;
    bottom: min(-.1041666667vw, -2px);
    width: 100%;
    height: min(.1041666667vw, 2px);
    background: #151515;
    transform: scale(0);
    transform-origin: left;
    transition: .5s cubic-bezier(.39, 0, .12, .99)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.error:not(.disabled):after {
    background: #ff4343
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box:has(input:not(:placeholder-shown)):after {
    transform: scale(1)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box:has(textarea:not(:placeholder-shown)):after {
    transform: scale(1)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.readonly {
    border-bottom: min(.1041666667vw, 2px) solid #E5E5E5;
    pointer-events: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.readonly:after {
    transform: scale(0) !important
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.readonly input {
    color: #999 !important
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input {
    display: block;
    width: calc(100% - min(2.6041666667vw, 50px));
    padding: min(.625vw, 12px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    outline: none;
    cursor: text
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input::placeholder {
    color: #b8b8b8
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input::-webkit-outer-spin-button,
#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box textarea {
    width: 100%;
    height: 100%;
    padding: min(.625vw, 12px) min(.625vw, 12px) min(.625vw, 12px) 0;
    height: min(17.5vw, 336px);
    outline: none;
    resize: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box textarea::placeholder {
    color: #b8b8b8
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.disabled {
    border-bottom: min(.1041666667vw, 2px) solid #E5E5E5
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.disabled input {
    color: #999
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.disabled input#name {
    width: min(11.4583333333vw, 220px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn {
    position: absolute;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    top: 50%;
    right: min(.625vw, 12px);
    transform: translateY(-50%);
    background: #b8b8b8;
    border-radius: 50%;
    transition: background .2s;
    display: none;
    z-index: 10
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn.on {
    display: block
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn:hover {
    background: #999
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select {
    position: absolute;
    top: min(3.6458333333vw, 70px);
    left: 0;
    width: 100%;
    max-width: min(20.15625vw, 387px);
    height: auto;
    max-height: min(23.75vw, 456px);
    overflow-y: scroll;
    border: min(.0520833333vw, 1px) solid #E5E5E5;
    background: #fff;
    z-index: 11;
    border-radius: min(.2083333333vw, 4px);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s cubic-bezier(.39, 0, .12, .99)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select.open {
    transform: scaleY(1)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select ul li a {
    display: block;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b;
    padding: min(1.0416666667vw, 20px) min(1.25vw, 24px);
    transition: .2s;
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select ul li a.on,
#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select ul li a:hover {
    background-color: #f5f5f5;
    color: #151515
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select::-webkit-scrollbar {
    width: 3px
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select::-webkit-scrollbar-thumb {
    background-color: #ddd;
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .select_btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(.9375vw, 18px);
    height: min(.9375vw, 18px);
    padding: min(.5208333333vw, 10px);
    background: url(https://www.hanwhaocean.com/images/common/icon_arrow_top_16x16_b.svg) no-repeat center center/contain;
    background-size: 50%;
    transform: translateY(-50%) rotate(180deg);
    transition: .3s transform;
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .select_btn:hover {
    transform: translateY(calc(-50% - min(.15625vw, 3px))) rotate(180deg)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .select_btn.open {
    transform: translateY(-50%) rotate(0)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .count_text {
    color: #999;
    margin-top: min(.625vw, 12px);
    display: flex;
    justify-content: flex-end
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .at {
    padding: min(.625vw, 12px) min(.625vw, 12px);
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #999
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box {
    display: flex;
    align-items: flex-end;
    column-gap: min(1.0416666667vw, 20px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box .input_box {
    width: min(11.4583333333vw, 220px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box .userAuth_btn[color=white] {
    pointer-events: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box.target_company_box .input_box input,
#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box.target_group_box .input_box:not(.readonly) input {
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box.issue_source_box>ul>.issue_source_text_box {
    grid-column: 1/3
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box.issue_source_box>ul>.issue_source_text_box.none {
    display: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box {
    margin-top: min(1.0416666667vw, 20px);
    position: relative
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box input[type=file] {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 10
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn {
    display: block;
    margin-top: min(1.4583333333vw, 28px);
    font-weight: 400;
    transition: color .3s;
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn.none {
    display: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn:hover {
    color: #4b4b4b
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn:hover:after {
    transform: rotate(90deg)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn:after {
    content: "";
    display: inline-block;
    margin-left: min(.4166666667vw, 8px);
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    vertical-align: middle;
    background: url(https://www.hanwhaocean.com/images/common/delete_file.svg) center/contain;
    transition: transform .2s
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_select_btn {
    width: min(11.3541666667vw, 218px);
    box-sizing: content-box;
    transition: none
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_select_btn.disabled {
    background-color: #e5e5e5;
    color: #999;
    border: 1px solid #e5e5e5
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_name_default {
    margin-left: min(1.4583333333vw, 28px);
    font-weight: 300;
    color: #999
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list {
    margin-top: min(1.4583333333vw, 28px);
    display: flex;
    flex-direction: column;
    row-gap: min(.2604166667vw, 5px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li {
    width: fit-content
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_name {
    display: block;
    font-size: min(.8333333333vw, 16px);
    font-weight: 300;
    line-height: min(1.25vw, 24px);
    max-width: calc(min(42.5vw, 816px) - min(2.6041666667vw, 50px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn {
    position: absolute;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    top: 50%;
    right: calc(-1*min(1.5625vw, 30px));
    transform: translateY(-50%);
    background: #b8b8b8;
    border-radius: 50%;
    transition: background .2s;
    z-index: 222;
    cursor: pointer
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn:hover {
    background: #999
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box {
    background-color: #f5f5f5;
    padding: min(2.0833333333vw, 40px);
    margin-top: min(1.0416666667vw, 20px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box ul {
    display: flex;
    flex-direction: column;
    row-gap: min(1.4583333333vw, 28px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box ul li p {
    font-weight: 300;
    margin-top: min(.4166666667vw, 8px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box {
    margin-top: min(1.4583333333vw, 28px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box input[type=checkbox] {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
    color: #1e90ff;
    vertical-align: middle;
    -webkit-appearance: none;
    background: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    border-radius: 50%;
    background-color: #fff;
    transition: background .3s;
    cursor: pointer;
    margin-right: min(.5208333333vw, 10px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box input[type=checkbox]:before {
    content: "";
    color: transparent;
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    border: 0;
    background-color: transparent;
    background-size: contain;
    box-shadow: inset 0 0 0 1px #ccd3d8
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box input[type=checkbox]:checked:before {
    box-shadow: none;
    background: url(https://www.hanwhaocean.com/images/common/icon_check_o.svg) no-repeat center center/contain
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box label {
    font-weight: 300;
    cursor: pointer;
    color: #151515
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .report_contents_box.error .input_box {
    border-bottom: min(.1041666667vw, 2px) solid #FF4343
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .report_contents_box.error .input_box:after {
    background: #ff4343
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .report_contents_box.error .count_text {
    color: #ff4343
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset.noAccount {
    display: block
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns {
    display: flex;
    column-gap: min(1.0416666667vw, 20px);
    margin-top: min(4.1666666667vw, 80px)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns>button {
    width: 100%
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns>button:hover:before {
    width: calc(var(--size) * 1.6);
    height: calc(var(--size) * 1.6)
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm[data-account="-1"] fieldset:not(.default) {
    position: relative
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm[data-account="-1"] fieldset:not(.default):after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 105%;
    height: 100%;
    transform: translate(-50%);
    background: #ffffffb3;
    z-index: 55;
    opacity: 1
}

#CU50 .main-inner .sub_container .ft_contents form#reportForm[data-name="0"] fieldset.isName,
#CU50 .main-inner .sub_container .ft_contents form#reportForm[data-account="1"] fieldset.noAccount {
    display: none
}

#CU50 #resetPopup .pop_cnt_main {
    color: #4b4b4b;
    font-weight: 300
}

#CU50 #reportPopup .pop_cnt_main {
    display: flex;
    flex-direction: column;
    row-gap: min(1.25vw, 24px);
    overflow: visible
}

#CU50 #reportPopup .pop_cnt_main strong {
    font-weight: 400
}

#CU50 #reportPopup .pop_cnt_main .box {
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    padding: 24px;
    border-radius: min(.5208333333vw, 10px);
    font-weight: 300
}

#CU50 #reportPopup .pop_cnt_main .box strong {
    display: inline-block;
    width: min(5.2083333333vw, 100px)
}

#CU50 #reportPopup .pop_cnt_main .box #reportNumber {
    width: 100%
}

#CU50 #reportPopup .pop_cnt_main .box .copy_btn {
    text-decoration: underline;
    text-underline-offset: 6px
}

#CU50 #reportPopup .pop_cnt_main .orange {
    color: #f60;
    font-weight: 300
}

#CU50 .m_popup,
#CU50 .m_popup .dim,
#CU50 .m_popup .pop_inner,
#CU50 .copy_popup {
    z-index: 9999
}

#CU50 .copy_popup.report_ok_popup {
    width: auto
}

@media (max-width: 1023px) {
    #CU50 .pc-only {
        display: none !important
    }

    #CU50 .ta-only {
        display: inline-block !important
    }

    #CU50 .mo-only {
        display: none !important
    }

    #CU50 .main-inner .sub_container {
        padding: 0 50px
    }

    #CU50 .main-inner .sub_container .ft_contents {
        row-gap: 38px
    }

    #CU50 .main-inner .cu_txt {
        font-size: 12px;
        line-height: 20px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm {
        row-gap: 76px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap {
        padding: 0 10px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns {
        padding: 5px;
        column-gap: 15px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns:before {
        height: 25px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isRight:before {
        left: calc(50% + min(.4166666667vw, 8px))
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .fieldTitle {
        margin-bottom: 38px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .req_caution {
        top: 15px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents {
        row-gap: 50px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_box {
        column-gap: 30px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box {
        margin-top: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select {
        top: 50px;
        max-height: 288px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select ul li a {
        font-size: 12px;
        line-height: 20px;
        padding: 12px 15px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .caution {
        position: relative;
        display: block
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col3_btns {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box {
        column-gap: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .at {
        font-size: 12px;
        padding: 8px;
        line-height: 20px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_btns {
        margin-top: 20px;
        gap: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box {
        margin-top: 12px
    }

    #CU50 .main-inner .sub_container .disclaimer {
        margin-top: 18px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_name_default {
        margin-left: 18px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list {
        margin-top: 18px;
        row-gap: 5px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box label[for=witness] {
        height: 40px !important;
        display: flex;
        align-items: center
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box label[for=witness] span.txt {
        line-height: 18px !important
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box {
        padding: 26px;
        margin-top: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box ul {
        row-gap: 18px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box input[type=checkbox] {
        width: 18px;
        height: 18px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box {
        margin-top: 18px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input {
        font-size: 12px;
        line-height: 20px;
        width: 100%;
        padding: 8px 0
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.error .error_msg {
        bottom: -18px;
        font-size: 9px;
        line-height: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns {
        column-gap: 12px;
        margin-top: 50px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns>button {
        min-width: 0 !important
    }

    #CU50 .main-inner .sub_container .disclaimer ul li:not(:last-child) {
        margin-bottom: 5px
    }

    #CU50 .main-inner .sub_container .disclaimer ul li p {
        padding-left: 8px
    }

    #CU50 .main-inner .sub_container .disclaimer ul li p:before {
        top: 8px;
        width: 3px;
        height: 1px
    }

    #CU50 .m_popup .pop_inner .pop_contents {
        max-height: none
    }

    #CU50 #reportPopup .pop_cnt_main {
        row-gap: 15px;
        margin-bottom: 70px
    }

    #CU50 #reportPopup .pop_cnt_main .box {
        padding: 15px
    }

    #CU50 #reportPopup .pop_cnt_main .box strong {
        width: 65px
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_name {
        font-size: 10px;
        line-height: 1.25;
        max-width: 388px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn {
        margin-top: 18px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn:after {
        margin-left: 6px;
        width: 16px;
        height: 16px
    }
}

@media (max-width: 768px) {

    #CU50 .pc-only,
    #CU50 .ta-only {
        display: none !important
    }

    #CU50 .mo-only {
        display: inline-block !important
    }

    #CU50 .m_btn[size=m] {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #CU50 .m_btn[size=m] span.txt {
        font-size: 14px !important;
        line-height: 24.08px !important
    }

    #CU50 .m_btn[size=m].mo-row2 span.txt {
        font-size: 12px !important;
        line-height: 18.24px !important
    }

    #CU50 .m_btn[size=h] {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #CU50 .m_btn[size=h] span.txt {
        font-size: 16px !important;
        line-height: 24px !important;
        font-weight: 300
    }

    #CU50 .main-inner .cu_txt {
        font-size: 16px;
        font-weight: 300;
        line-height: 27.52px
    }

    #CU50 .main-inner .sub_container {
        margin-top: 20px;
        padding: 0 20px
    }

    #CU50 .main-inner .sub_container .disclaimer {
        margin-top: 16px
    }

    #CU50 .main-inner .sub_container .disclaimer ul li {
        font-size: 14px !important;
        line-height: 24.08px !important
    }

    #CU50 .main-inner .sub_container .disclaimer ul li p {
        padding-left: 8px
    }

    #CU50 .main-inner .sub_container .disclaimer ul li p:before {
        top: 10px;
        left: 0;
        width: 4px;
        height: 1px
    }

    #CU50 .main-inner .sub_container .disclaimer ul li:not(:last-child) {
        margin-bottom: 4px
    }

    #CU50 .main-inner .sub_container .ft_contents {
        width: 100%;
        row-gap: 60px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm {
        row-gap: 60px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .caution {
        display: block;
        position: relative;
        margin-top: 8px;
        font-size: 12px !important;
        line-height: 16.8px !important
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap {
        padding: 0
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns {
        display: flex;
        padding: 10px 0;
        border-radius: 100px;
        column-gap: 4px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
        padding: 0;
        width: 48%;
        height: 44px;
        border-radius: 100px;
        box-shadow: 0 0 5px #0000001a
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isLeft:before {
        left: 25%;
        opacity: 1
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns.isRight:before {
        left: 75%;
        opacity: 1
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li {
        width: 100%;
        z-index: 2
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .tab_wrap .tab_btns li span {
        padding: min(.78125vw, 15px) min(1.0416666667vw, 20px);
        border-radius: 100px;
        font-weight: 400
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset {
        position: relative
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .fieldTitle {
        margin-bottom: 48px;
        font-size: 24px !important;
        line-height: 37.44px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .req_caution {
        top: 6px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset.consent-field .fieldTitle {
        margin-bottom: 0
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset.consent-field .req_caution {
        position: relative;
        display: block;
        margin-bottom: 48px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents {
        display: flex;
        flex-direction: column;
        row-gap: 40px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_box:not(.m_col2_box) {
        display: flex;
        flex-direction: column;
        column-gap: 0;
        row-gap: 40px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_box.m_col2_box {
        column-gap: 20px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_box.m_col2_box input {
        width: 100% !important
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col3_btns,
    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .col2_btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 16px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box label {
        font-size: 18px !important;
        line-height: 28.8px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box label.required:after {
        content: "*";
        position: absolute;
        right: -14px;
        top: -3px;
        font-size: 16px;
        font-weight: 400;
        line-height: 22.4px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box {
        border-bottom: 1px solid #999999;
        margin-top: 8px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.error .error_msg {
        left: 0;
        bottom: -25px;
        font-size: 12px;
        font-weight: 300;
        line-height: 16.8px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box:not(.disabled):after {
        bottom: -1px;
        width: 100%;
        height: 1px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input {
        width: calc(100% - 36px);
        padding: 12px 0;
        font-size: 16px;
        line-height: 27.52px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box textarea {
        width: 100%;
        height: 240px;
        padding: 0;
        outline: none;
        resize: none
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box textarea::placeholder {
        color: #b8b8b8
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.disabled {
        border-bottom: 1px solid #E5E5E5
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.disabled input {
        color: #999
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        right: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn:before {
        width: 10px;
        height: 1px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .del_btn:after {
        width: 10px;
        height: 1px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select {
        position: absolute;
        top: 61px;
        left: 0;
        max-width: 100%;
        max-height: 335px;
        border: min(.0520833333vw, 1px) solid #E5E5E5;
        border-radius: 4px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .custom_select ul li a {
        font-size: 16px;
        line-height: 24px;
        padding: 16px 20px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box .select_btn {
        width: 18px;
        height: 18px;
        padding: 8px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .count_text {
        margin-top: 12px;
        font-weight: 300
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .at {
        padding: 10px;
        font-size: 16px;
        line-height: 27.52px;
        color: #b8b8b8
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box {
        column-gap: 12px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box .input_box {
        width: 100%;
        max-width: 227px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box .userAuth_btn {
        padding: 0 22px !important
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box {
        margin-top: 16px;
        display: grid;
        grid-template-columns: auto 1fr
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_select_btn {
        width: 161px;
        box-sizing: border-box
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_name_default {
        margin-left: 19px;
        font-size: 12px !important;
        line-height: 16.8px !important;
        font-weight: 300;
        display: flex;
        align-items: center
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list {
        display: flex;
        row-gap: 12px;
        margin-top: 16px;
        grid-column: 1/3
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_name {
        font-size: 12px;
        line-height: 16.8px;
        max-width: calc(89.3333vw - 30px)
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn {
        width: 18px;
        height: 18px;
        right: -23px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn:before {
        width: 10px;
        height: 1px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_list li .file_del_btn:after {
        width: 10px;
        height: 1px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box {
        padding: 20px;
        margin-top: 16px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box ul {
        row-gap: 16px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .desc_box ul li p {
        margin-top: 4px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box {
        margin-top: 20px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box input[type=checkbox] {
        width: 20px;
        height: 20px;
        margin-right: 8px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .check_box label {
        font-size: 16px !important;
        line-height: 26.88px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .report_contents_box.error .input_box {
        border-bottom: 2px solid #FF4343
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .report_contents_box.error .input_box:after {
        background: #ff4343
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .report_contents_box.error .count_text {
        color: #ff4343
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .disclaimer ul li {
        font-size: 12px !important;
        line-height: 16.8px !important
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .disclaimer ul li:not(:last-child) {
        margin-bottom: 4px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset.noAccount {
        display: block
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns {
        column-gap: 12px;
        margin-top: 40px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm .form_btns>button:hover:before {
        width: var(--size);
        height: var(--size)
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm[data-account="-1"] fieldset:not(.default) {
        position: relative
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm[data-account="-1"] fieldset:not(.default):after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 105%;
        height: 100%;
        transform: translate(-50%);
        background: #ffffffb3;
        z-index: 55;
        opacity: 1
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm[data-name="0"] fieldset.isName,
    #CU50 .main-inner .sub_container .ft_contents form#reportForm[data-account="1"] fieldset.noAccount {
        display: none
    }

    #CU50 .m_popup .pop_inner .pop_contents {
        border-radius: 20px
    }

    #CU50 .m_popup .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 20px
    }

    #CU50 .m_popup .pop_inner .pop_contents .pop_cnt_main {
        margin-bottom: 32px
    }

    #CU50 .m_popup .pop_inner .pop_contents .cu_txt {
        font-size: 14px !important;
        line-height: 24.08px
    }

    #CU50 .m_popup .pop_inner .pop_contents .pop_foot {
        display: flex;
        column-gap: 12px
    }

    #CU50 .m_popup .pop_inner .pop_contents .pop_foot>.m_btn {
        width: 100%;
        max-width: 133px
    }

    #CU50 #resetPopup .pop_cnt_main {
        color: #4b4b4b;
        font-weight: 300
    }

    #CU50 #reportPopup .pop_contents {
        max-height: none
    }

    #CU50 #reportPopup .pop_contents .pop_cnt_main {
        row-gap: 20px;
        max-height: none;
        margin-bottom: 32px
    }

    #CU50 #reportPopup .pop_contents .pop_cnt_main .box {
        padding: 20px;
        border-radius: 10px
    }

    #CU50 #reportPopup .pop_contents .pop_cnt_main .box strong {
        width: 64px
    }

    #CU50 #reportPopup .pop_contents .pop_cnt_main .keyDesc {
        font-size: 12px !important;
        font-weight: 300;
        line-height: 20.16px
    }

    #CU50 #reportPopup .pop_contents .pop_foot {
        display: flex;
        justify-content: center
    }

    #CU50 .copy_popup.report_ok_popup {
        width: 280px
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn {
        text-align: left;
        margin-top: 14px;
        color: #4b4b4b
    }

    #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .file_box .file_del_all_btn:after {
        width: 20px;
        height: 20px;
        margin-left: 8px
    }
}

html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .userAuth_box .input_box {
    width: 100%
}

html[lang=en] #CU50 .copy_popup {
    width: auto;
    bottom: 60px
}

@media (max-width: 768px) {
    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box:first-child {
        margin-bottom: 46px
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box:last-child {
        margin-bottom: 30px
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .flex_box {
        flex-wrap: wrap;
        align-items: center
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box {
        max-width: none;
        width: 100%
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box input {
        width: 100%
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .reporter_mail_box .input_box {
        width: calc(100% - 25px)
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .at {
        padding: 12px 0 12px 10px
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box.select_box {
        width: 100%
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box .input_box textarea {
        height: 360px
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box:first-child .input_box.error .error_msg {
        bottom: -46px
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset .field_contents .form_box:last-child .input_box.error .error_msg {
        bottom: -29px
    }

    html[lang=en] #CU50 .main-inner .sub_container .ft_contents form#reportForm fieldset.consent-field .field_contents .form_box label.required:after {
        top: 25px
    }

    html[lang=en] #CU50 .m_popup .pop_inner .pop_contents .pop_cnt_head {
        padding-right: 40px
    }

    html[lang=en] #CU50 .copy_popup {
        bottom: 40px
    }

    html[lang=en] #CU50 .copy_popup .icon {
        flex: none
    }
}

#CU60 .pc-only {
    display: inline-block !important
}

#CU60 .ta-only,
#CU60 .mo-only {
    display: none !important
}

#CU60 .main-inner .sub_container {
    width: 100%;
    padding: 0 min(6.25vw, 120px);
    box-sizing: border-box;
    max-width: 1920px
}

#CU60 .main-inner .sub_container .cu_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px)
}

#CU60 .main-inner .sub_container .info_wrap {
    display: flex;
    column-gap: min(.4166666667vw, 8px)
}

#CU60 .main-inner .sub_container .info_wrap>span {
    display: flex
}

#CU60 .main-inner .sub_container .info_wrap a.copyBtn {
    transition: .2s;
    margin: 0 min(.2604166667vw, 5px);
    border-bottom: 1px solid #000
}

#CU60 .main-inner .sub_container .info_wrap a.copyBtn:hover {
    color: #999
}

#CU60 .main-inner .sub_container .cu_top {
    margin-top: min(2.2916666667vw, 44px)
}

#CU60 .main-inner .sub_container .cu_top .cu_tab {
    margin-bottom: min(4.1666666667vw, 80px)
}

#CU60 .main-inner .sub_container .cu_top .cu_tab .m_h7 {
    position: relative;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: #b8b8b8;
    transition: .4s
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: min(2.5vw, 48px);
    row-gap: min(6.25vw, 120px)
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: min(2.2916666667vw, 44px)
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item picture {
    width: 100%
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item picture img {
    object-fit: cover;
    width: 100%
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap {
    position: relative;
    padding: 0 min(.8333333333vw, 16px);
    display: flex;
    flex-direction: column;
    row-gap: min(.8333333333vw, 16px)
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .m_h7 {
    margin-bottom: min(1.0416666667vw, 20px)
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap {
    position: absolute;
    right: min(.8333333333vw, 16px);
    top: min(.078125vw, 1.5px);
    display: flex;
    column-gap: min(.8333333333vw, 16px)
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap>.m_btn {
    padding: 0 min(1.25vw, 24px)
}

#CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap .map .icon {
    width: min(.9375vw, 18px);
    height: min(.9375vw, 18px);
    background: url(https://www.hanwhaocean.com/images/common/outlink.svg) no-repeat center center/contain
}

#CU60 .main-inner .sub_container .cu_contents .contact_info {
    margin-top: min(8.3333333333vw, 160px)
}

#CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(2.5vw, 48px);
    margin-top: min(1.875vw, 36px)
}

#CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item {
    border: min(.0520833333vw, 1px) solid #E5E5E5;
    padding: min(2.2916666667vw, 44px) min(2.5vw, 48px);
    display: flex;
    flex-direction: column;
    row-gap: min(.8333333333vw, 16px)
}

#CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .m_h8 {
    margin-bottom: min(.625vw, 12px)
}

#CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap {
    font-weight: 300;
    align-items: center
}

#CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap a.copyBtn {
    line-height: min(1.4583333333vw, 28px)
}

#CU60 .main-inner .sub_container .m_popup .pop_inner {
    width: min(50vw, 960px);
    height: min(24.4791666667vw, 470px)
}

#CU60 .main-inner .sub_container .m_popup .pop_inner .pop_contents {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: visible;
    border-radius: 0
}

#CU60 .main-inner .sub_container .m_popup .pop_inner .pop_contents .btn_close_pop {
    top: 0;
    right: max(-55px, -2.8646vw)
}

#CU60 .main-inner .sub_container .m_popup .pop_inner .pop_contents .btn_close_pop img {
    filter: invert(1)
}

#CU60 .main-inner .sub_container .m_popup .pop_inner .pop_contents .pop_cnt_inner {
    width: 100%;
    height: 100%
}

@media (min-width: 769px) and (max-width: 1023px) {
    #CU60 .pc-only {
        display: none !important
    }

    #CU60 .ta-only {
        display: inline-block !important
    }

    #CU60 .mo-only {
        display: none !important
    }

    #CU60 .main-inner .sub_container {
        padding: 0 50px
    }

    #CU60 .main-inner .sub_container .cu_top {
        margin-top: 28px
    }

    #CU60 .main-inner .sub_container .cu_top .cu_tab {
        margin-bottom: 50px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list {
        column-gap: 30px;
        row-gap: 76px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item {
        row-gap: 28px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap {
        padding: 10px;
        row-gap: 10px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .m_h7 {
        margin-bottom: 12px
    }

    #CU60 .main-inner .sub_container .info_wrap {
        column-gap: 5px
    }

    #CU60 .main-inner .sub_container .info_wrap img {
        width: 18px
    }

    #CU60 .main-inner .sub_container .cu_txt {
        font-size: 12px;
        line-height: 20px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap {
        right: 10px;
        top: 10px;
        column-gap: 8px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap>.m_btn {
        padding: 0 20px !important
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info {
        margin-top: 100px
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list {
        gap: 30px;
        margin-top: 22px
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item {
        row-gap: 10px;
        padding: 28px 30px
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .m_h8 {
        margin-bottom: 8px
    }
}

@media (max-width: 768px) {

    #CU60 .pc-only,
    #CU60 .ta-only {
        display: none !important
    }

    #CU60 .mo-only {
        display: inline-block !important
    }

    #CU60 .main-inner .sub_container {
        width: 100%;
        padding: 0;
        max-width: none
    }

    #CU60 .main-inner .sub_container .cu_txt {
        font-size: 16px;
        font-weight: 300;
        line-height: 27.52px
    }

    #CU60 .main-inner .sub_container .info_wrap {
        column-gap: 8px;
        align-items: flex-start
    }

    #CU60 .main-inner .sub_container .info_wrap img {
        width: 20px;
        margin-top: 4px
    }

    #CU60 .main-inner .sub_container .info_wrap a.copyBtn {
        margin: 0 8px
    }

    #CU60 .main-inner .sub_container .cu_top {
        margin-top: 24px
    }

    #CU60 .main-inner .sub_container .cu_top .cu_tab {
        margin-bottom: 40px;
        padding: 0 50px
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_top .cu_tab {
        padding: 0 20px
    }
}

@media (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_top .cu_tab .m_h7 {
        font-weight: 400
    }

    #CU60 .main-inner .sub_container .cu_contents {
        padding: 0 50px;
        max-width: none
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents {
        padding: 0 20px
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents .workspace_list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 60px
    }
}

@media (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item {
        row-gap: 20px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap {
        padding: 0 4px;
        row-gap: 4px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .m_h7 {
        margin-bottom: 8px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap .m_btn {
        padding: 0 18px !important
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        margin-top: 20px
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap>.m_btn {
        padding: 0;
        width: 100%
    }

    #CU60 .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap .map .icon {
        width: 16px;
        height: 16px
    }
}

@media (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents .contact_info {
        margin-top: 112px
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px
    }
}

@media (max-width: 768px) {
    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item {
        border: 1px solid #E5E5E5;
        padding: 24px;
        row-gap: 4px
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .m_h8 {
        margin-bottom: 8px
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap {
        font-weight: 300;
        align-items: flex-start
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap img {
        width: 20px
    }

    #CU60 .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap a.copyBtn {
        line-height: 27.52px
    }

    #CU60 .main-inner .sub_container .m_popup .pop_inner {
        width: min(50vw, 960px);
        height: min(24.4791666667vw, 470px)
    }
}

@media (max-width: 768px) and (max-width: 768px) {
    #CU60 .main-inner .sub_container .m_popup .pop_inner {
        width: 300px;
        height: 300px
    }
}

@media (max-width: 768px) {
    #CU60 .main-inner .sub_container .m_popup .pop_inner .pop_contents .btn_close_pop {
        top: -53px;
        right: 0;
        width: 36px;
        height: 36px
    }
}

#CU60.en .main-inner .sub_container .info_wrap img {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px)
}

#CU60.en .main-inner .sub_container .info_wrap a.copyBtn,
#CU60.en .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap a.copyBtn {
    line-height: .6;
    display: inline
}

@media (max-width: 1023px) {
    #CU60.en .main-inner .sub_container .info_wrap img {
        width: 18px;
        height: 18px
    }
}

@media (max-width: 768px) {
    #CU60.en .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap {
        grid-template-columns: 1fr
    }

    #CU60.en .main-inner .sub_container .info_wrap a.copyBtn,
    #CU60.en .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item .info_wrap a.copyBtn {
        line-height: .7;
        display: inline
    }

    #CU60.en .main-inner .sub_container .cu_contents .contact_info .contact_info_list .contact_info_item {
        padding: 24px 15px 24px 24px
    }

    #CU60.en .main-inner .sub_container .cu_contents .workspace_list .workspace_item .content_wrap .btns_wrap>.m_btn[hover=ripple]:hover:before {
        width: calc(200vw - 40px);
        height: calc(200vw - 40px)
    }
}

#CU70 .main-inner .fontHanwha {
    font-family: Hanwha
}

#CU70 .main-inner .sub_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 1920px;
    padding: 0 min(6.25vw, 120px);
    font-style: normal;
    box-sizing: border-box
}

#CU70 .main-inner .sub_container .ft_txt {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    color: #4b4b4b
}

#CU70 .main-inner .sub_container .ft_txt-orange {
    font-size: min(.8333333333vw, 16px);
    color: #f60;
    margin-top: min(1.25vw, 24px)
}

#CU70 .main-inner .sub_container .ft_contents {
    width: min(42.5vw, 816px);
    display: flex;
    flex-direction: column;
    row-gap: min(6.25vw, 120px)
}

#CU70 .main-inner .sub_container .ft_contents .ft_txt_box {
    margin-top: min(6.25vw, 120px)
}

#CU70 .main-inner .sub_container .ft_contents .ft_txt_box .desc {
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    margin-top: min(2.0833333333vw, 40px);
    color: #4b4b4b
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form {
    display: flex;
    flex-direction: column;
    row-gap: min(4.1666666667vw, 80px)
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form label {
    position: relative;
    display: block;
    margin-bottom: min(1.0416666667vw, 20px);
    width: fit-content
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form label.required:after {
    content: "*";
    position: absolute;
    top: min(.1041666667vw, 2px);
    right: max(-15px, -.7813vw);
    font-size: min(.9375vw, 18px);
    font-weight: 400;
    line-height: min(1.3125vw, 25.2px);
    color: #ff4343
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box {
    display: block;
    position: relative;
    border-bottom: min(.1041666667vw, 2px) solid #999999
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: min(-.1041666667vw, -2px);
    width: 100%;
    height: min(.1041666667vw, 2px);
    background: #151515;
    transform: scale(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.39, 0, .12, .99)
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:has(input:focus):after,
#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:has(input:not(:placeholder-shown)):after {
    transform: scale(1)
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text],
#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=password] {
    display: block;
    width: 100%;
    padding: min(.625vw, 12px) 0;
    font-size: min(1.0416666667vw, 20px);
    font-weight: 300;
    line-height: min(1.75vw, 33.6px);
    outline: none;
    cursor: default
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text]::placeholder,
#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=password]::placeholder {
    color: #b8b8b8
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text]::-webkit-contacts-auto-fill-button,
#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=password]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input::-webkit-outer-spin-button,
#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn {
    position: absolute;
    width: min(1.25vw, 24px);
    height: min(1.25vw, 24px);
    top: 50%;
    right: min(.2604166667vw, 5px);
    transform: translateY(-50%);
    background: #b8b8b8;
    border-radius: 50%;
    transition: background .2s;
    display: none;
    z-index: 222
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn.on {
    display: block
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(.5729166667vw, 11px);
    height: min(.0520833333vw, 1px);
    background-color: #fff
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:hover {
    background: #999
}

#CU70 .main-inner .sub_container .ft_contents .ft_form_box form input[type=submit][color=none] {
    pointer-events: none
}

#CU70 .main-inner #resultPopup .pop_contents,
#CU70 .main-inner #resultPopup .pop_cnt_main {
    max-height: none
}

#CU70 .main-inner #resultPopup .box {
    background-color: #f5f5f5;
    padding: min(1.25vw, 24px);
    padding-right: min(.625vw, 12px);
    padding-bottom: 0;
    margin-top: min(1.25vw, 24px);
    border-radius: min(.5208333333vw, 10px);
    max-height: min(25.8333333333vw, 496px);
    overflow: hidden
}

#CU70 .main-inner #resultPopup .box .box_inner {
    padding-right: 12px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: min(26.4583333333vw, 508px);
    scrollbar-color: #E5E5E5 rgba(0, 0, 0, 0)
}

#CU70 .main-inner #resultPopup .box .box_inner::-webkit-scrollbar-thumb {
    background: #e5e5e5
}

#CU70 .main-inner #resultPopup .box table {
    border-top: none
}

#CU70 .main-inner #resultPopup .box table tbody {
    display: flex;
    flex-direction: column;
    row-gap: min(.8333333333vw, 16px)
}

#CU70 .main-inner #resultPopup .box table tbody tr {
    display: flex;
    border-bottom: none
}

#CU70 .main-inner #resultPopup .box table tbody tr th {
    font-weight: 400;
    width: min(5.2083333333vw, 100px);
    padding: 0;
    margin-right: min(.4166666667vw, 8px)
}

#CU70 .main-inner #resultPopup .box table tbody tr td {
    font-weight: 300;
    max-width: min(19.4270833333vw, 373px);
    padding: 0
}

#CU70 .main-inner #resultPopup .box table tbody tr td .report_file:first-child:after,
#CU70 .main-inner #resultPopup .box table tbody tr td .reply_file:first-child:after {
    content: ",";
    position: relative
}

#CU70 .main-inner #resultPopup .box table tbody tr:last-child {
    align-items: center;
    padding-bottom: min(1.6666666667vw, 32px)
}

@media (min-width: 769px) and (max-width: 1023px) {
    #CU70 .main-inner .sub_container {
        padding: 0 50px
    }

    #CU70 .main-inner .sub_container .ft_contents {
        row-gap: 76px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_txt_box {
        margin-top: 76px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_txt_box .desc {
        font-size: 12px;
        line-height: 20px;
        margin-top: 26px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form {
        row-gap: 50px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form label {
        margin-bottom: 12px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form label.required:after {
        top: 1px;
        right: -12px;
        font-size: 12px;
        line-height: 15px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text],
    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=password] {
        font-size: 12px !important;
        line-height: 20px !important;
        padding: 12px 0 !important
    }

    #CU70 .main-inner .sub_container .ft_txt-orange {
        margin-top: 16px;
        font-size: 10px
    }
}

@media (max-width: 768px) {
    #CU70 .main-inner .sub_container {
        max-width: none;
        padding: 0 20px
    }

    #CU70 .main-inner .sub_container .ft_txt {
        font-size: 14px;
        font-weight: 300;
        line-height: 24.08px
    }

    #CU70 .main-inner .sub_container .ft_txt-orange {
        font-size: 12px;
        margin-top: 20px
    }

    #CU70 .main-inner .sub_container .ft_contents {
        width: 100%;
        row-gap: 60px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_txt_box {
        margin-top: 60px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_txt_box .desc {
        font-size: 16px;
        font-weight: 300;
        line-height: 27.52px;
        margin-top: 20px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form {
        row-gap: 40px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form label {
        margin-bottom: 8px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form label.required:after {
        top: 2px;
        right: -10px;
        font-size: 14px;
        line-height: 24.08px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box {
        border-bottom: 1px solid #999999
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box:after {
        bottom: -1px;
        height: 1px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=text],
    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .input_box input[type=password] {
        padding: 12px 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 27.52px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        right: 8px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:before {
        width: 10px;
        height: 1px
    }

    #CU70 .main-inner .sub_container .ft_contents .ft_form_box form .del_btn:after {
        width: 10px;
        height: 1px
    }

    #CU70 .main-inner .m_popup .pop_inner .pop_contents {
        border-radius: 20px
    }

    #CU70 .main-inner .m_popup .pop_inner .pop_contents .pop_cnt_head {
        margin-bottom: 20px
    }

    #CU70 .main-inner .m_popup .pop_inner .pop_contents .pop_cnt_main {
        margin-bottom: 32px
    }

    #CU70 .main-inner .m_popup .pop_inner .pop_contents .cu_txt {
        font-size: 14px !important;
        line-height: 24.08px
    }

    #CU70 .main-inner .m_popup .pop_inner .pop_contents .pop_foot {
        display: flex;
        justify-content: center;
        column-gap: 12px
    }

    #CU70 .main-inner .m_popup .pop_inner .pop_contents .pop_foot>.m_btn {
        width: 100%;
        max-width: 133px
    }

    #CU70 .main-inner #resultPopup .pop_contents,
    #CU70 .main-inner #resultPopup .pop_cnt_main {
        max-height: none
    }

    #CU70 .main-inner #resultPopup .box {
        background-color: #f5f5f5;
        padding: 20px 12px 0 20px;
        margin-top: 20px;
        border-radius: 10px;
        max-height: 297px
    }

    #CU70 .main-inner #resultPopup .box .box_inner {
        padding-right: 12px;
        height: auto;
        max-height: 277px
    }

    #CU70 .main-inner #resultPopup .box table tbody {
        row-gap: 8px
    }

    #CU70 .main-inner #resultPopup .box table tbody tr th {
        width: 64px;
        border: none
    }

    #CU70 .main-inner #resultPopup .box table tbody tr td {
        max-width: 160px
    }

    #CU70 .main-inner #resultPopup .box table tbody tr:last-child {
        padding-bottom: 20px
    }
}

html[lang=en] #CU70 .main-inner #resultPopup .box {
    padding: min(1.25vw, 24px)
}

html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr {
    height: auto;
    border: none;
    align-items: center
}

html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr th {
    width: min(7.0833333333vw, 136px)
}

html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr td {
    width: auto;
    padding: 0;
    color: #151515
}

html[lang=en] #CU70 .main-inner #resultPopup .box .box_inner {
    height: auto;
    max-height: min(26.4583333333vw, 508px)
}

html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr:last-child {
    padding-bottom: 0
}

html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr:last-child td .reply_file:not(:first-child) {
    padding: 0
}

html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr:last-child td .reply_file:not(:first-child):after {
    display: none
}

@media (max-width: 1023px) {
    html[lang=en] #CU70 .main-inner #resultPopup .box {
        max-height: none
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box .box_inner {
        max-height: 320px
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr th {
        width: 72px
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr td .report_file:not(:first-child) {
        padding-left: 0
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr td .report_file:not(:first-child):after {
        display: none
    }
}

@media (max-width: 768px) {
    html[lang=en] #CU70 .main-inner #resultPopup .box {
        padding: 20px
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box .box_inner {
        max-height: 277px
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr {
        align-items: start
    }

    html[lang=en] #CU70 .main-inner #resultPopup .box table tbody tr th {
        width: 64px;
        border: none;
        margin-right: 8px
    }
}

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA) format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, #00000080, #0000)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}