/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/
*,:after,:before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box
}

:after,:before {
    --tw-content: ""
}

:host,html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent;
    font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-variation-settings: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

body {
    line-height: inherit;
    margin: 0
}

hr {
    border-top-width: 1px;
    color: inherit;
    height: 0
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}

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

b,strong {
    font-weight: bolder
}

code,kbd,pre,samp {
    font-feature-settings: normal;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-size: 1em;
    font-variation-settings: normal
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
}

button,input,optgroup,select,textarea {
    font-feature-settings: inherit;
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    font-variation-settings: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0
}

button,select {
    text-transform: none
}

button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,legend {
    padding: 0
}

menu,ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #9ca3af;
    opacity: 1
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #9ca3af;
    opacity: 1
}

input::placeholder,textarea::placeholder {
    color: #9ca3af;
    opacity: 1
}

[role=button],button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,canvas,embed,iframe,img,object,svg,video {
    display: block;
    vertical-align: middle
}

img,video {
    height: auto;
    max-width: 100%
}

[hidden] {
    display: none
}

*,:after,:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246/0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246/0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

:root {
    --primary: #5f56f6;
    --secondary: #8590f8;
    --hover: #463de7;
    --text: #333;
    --text-sub: #9ca3af;
    --text-sub-deep: #6b7280;
    --bg-light: #f9fafb;
    --bg: #f3f4f6;
    --bg-deep: #e5e7eb;
    --bg-black: #333;
    --border-light: #e5e7eb;
    --border: #d1d5db;
    --important-red: #dc2626;
    --important-blue: #2563eb;
    --point: #ff7245;
    --point-hover: #ff7245b8;
    --red: #f12b2b;
    --red-hover: #f12b2bb8;
    --yellow: #ebba0e;
    --yellow-hover: #ebba0eb8;
    --blue: #413ef6;
    --blue-hover: #413ef6b8;
    --green: #0ed369;
    --green-hover: #0ed369b8;
    --default: #4d4e54;
    --default-hover: #4d4e54b8;
    --pink: #f74cfb;
    --pink-hover: #f74cfbb8;
    --mint: #00c0c0;
    --mint-hover: #00c0c0b8;
    --nav-height: calc(100vh - 70px);
    --option-height: calc(100vh - 254px)
}

.bg-light {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity))
}

.bg-default {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.bg-deep {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity))
}

.text-default {
    color: var(--text)
}

.text-sub {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity))
}

.text-sub-deep {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity))
}

.important-red-text {
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity))
}

.important-red-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38/var(--tw-bg-opacity))
}

.important-blue-text {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.important-blue-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity))
}

.ncp-green-text {
    color: #00c85f
}

.ncp-green-bg {
    background: #00c85f
}

* {
    font-family: Pretendard Variable,Spoqa Han Sans Neo,HelveticaNeue,Helvetica,sans-serif,AppleGothic,Roboto
}

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,figcaption,figure,footer,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: transparent;
    border-width: 0;
    box-sizing: border-box;
    color: #333;
    font-family: Pretendard Variable,Spoqa Han Sans Neo,HelveticaNeue,Helvetica,sans-serif,AppleGothic,Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4rem;
    margin: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    padding: 0;
    vertical-align: top
}

body {
    min-width: 1280px;
    overflow-x: auto;
    width: 100%
}

a,button,select {
    cursor: pointer
}

hr {
    border: solid var(--border-light);
    border-width: 1px 0 0;
    margin-bottom: 1rem;
    margin-top: 1rem
}

h1 {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 2.5rem
}

h2 {
    font-size: 1.875rem;
    line-height: 2.25rem
}

h3 {
    font-size: 1.5rem;
    line-height: 2rem
}

h4 {
    font-size: 1.25rem
}

h4,h5 {
    line-height: 1.75rem
}

h5 {
    font-size: 1.125rem
}

input {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    font-size: .875rem;
    line-height: 1.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    padding: .5rem
}

input:focus {
    border-color: rgb(96 165 250/var(--tw-border-opacity))
}

input:focus,select {
    --tw-border-opacity: 1
}

select {
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-width: 1px;
    font-size: .875rem;
    height: 35px;
    line-height: 1.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    padding: .5rem;
    width: 210px
}

select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250/var(--tw-border-opacity))
}

textarea {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-width: 1px;
    font-size: .875rem;
    line-height: 1.25rem
}

textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

span {
    color: inherit;
    font-size: inherit;
    line-height: inherit
}

label {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-weight: 300;
    line-height: 1.4em;
    margin-right: 1rem
}

table {
    width: 100%
}

table tr td,table tr th {
    font-size: 1rem;
    line-height: 1.5rem;
    padding-bottom: 1rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: 1rem;
    text-align: center
}

table tr th {
    font-weight: 600
}

table tr td,table tr th {
    vertical-align: middle
}

table tr td a:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

table tbody {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

table tbody:nth-child(2n) {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

table tbody.cart-tb td:nth-child(2) {
    text-align: left
}

.material-symbols-outlined {
    font-family: Material Symbols Outlined,sans-serif!important
}

.material-icons {
    font-family: Material Icons,sans-serif!important
}

table.table-second {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(75 85 99/var(--tw-border-opacity));
    border-top-width: 1px
}

table.table-second tr td,table.table-second tr th {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    vertical-align: middle
}

table.table-second tr td:nth-child(2n) {
    padding-left: 1.5rem;
    text-align: left
}

table.table-second tr:last-child th {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175/var(--tw-border-opacity))
}

::-webkit-scrollbar-track {
    background-color: #ccc
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa
}

::-webkit-scrollbar-thumb:active {
    background: #888
}

::-webkit-scrollbar-button {
    display: none
}

@media (max-width: 768px) {
    abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,figcaption,figure,footer,header,hgroup,html,i,iframe,img,ins,kbd,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
        font-size:15px
    }
}

body header {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    border-color: rgb(249 250 251/var(--tw-border-opacity));
    height: 70px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

body header .header-wrap {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1680px;
    min-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%
}

body header .header-wrap h1.logo {
    display: inline-block;
    margin-bottom: 1.25rem;
    margin-right: 2.5rem;
    margin-top: 1.25rem
}

body header .header-wrap h1.logo svg {
    fill: #333
}

body header .header-wrap nav {
    display: inline-block;
    height: 100%
}

body header .header-wrap nav ul {
    font-size: 0;
    height: 100%
}

body header .header-wrap nav ul>li {
    display: inline-block;
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

body header .header-wrap nav ul>li a {
    display: block;
    height: 100%;
    position: relative;
    width: 100%
}

body header .header-wrap nav ul>li a .prog-bar {
    bottom: 0;
    height: .125rem;
    position: absolute;
    width: 100%
}

body header .header-wrap nav ul>li a .prog-bar:before {
    background: var(--origin-gradient);
    content: "";
    display: block;
    height: 100%;
    width: 0
}

body header .header-wrap nav ul>li a span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    margin-left: .25rem
}

body header .header-wrap nav ul>li:hover .depth-menu {
    display: block;
    height: auto
}

body header .header-wrap nav ul>li:hover>a {
    color: var(--primary);
    font-weight: 700
}

body header .header-wrap nav ul>li>a {
    line-height: 70px
}

body header .header-wrap nav ul>li .depth-menu {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    border-color: rgb(243 244 246/var(--tw-border-opacity));
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: none;
    height: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100vw;
    z-index: 333
}

body header .header-wrap nav ul>li .depth-menu.renew {
    background: linear-gradient(90deg,#f3f4f6 50%,#fff 0)
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap {
    display: flex;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1680px;
    min-height: 253px;
    min-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    width: 50%
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title {
    margin-top: 2.5rem;
    width: 290px
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title dl dt {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
    padding-bottom: 1.25rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title dl dt i {
    font-size: inherit;
    padding-right: .5rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title dl dt span {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title dl dd {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title dl dd span {
    color: var(--primary)
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left .depth-title dl dd:last-child {
    padding-top: 1rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left>ul {
    box-sizing: border-box;
    display: inline-block;
    height: auto;
    margin-top: 1rem;
    overflow-y: auto;
    padding: 0;
    width: 180px
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left>ul li {
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    width: 100%
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left>ul li.active,body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-left>ul li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    font-weight: 700
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    width: 100%
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item {
    display: none;
    height: 100%
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list {
    -moz-column-gap: .5rem;
    column-gap: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: auto;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    row-gap: 1.75rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list a {
    padding: .5rem;
    position: relative
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list a h5 {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 213 219/var(--tw-border-opacity));
    border-bottom-width: 1px;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    justify-content: space-between;
    line-height: 1.5rem;
    padding-bottom: .5rem
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list a p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    min-height: 40px;
    padding-top: .5rem;
    width: 90%;
    
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list a:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity))
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list.empty-exp {
    row-gap: 3.5rem!important
}

body header .header-wrap nav ul>li .depth-menu.renew .depth-wrap .depth-right .depth-item .item-list.empty-exp h5 {
    padding-bottom: 0
}

body header .header-wrap nav ul .menu-line {
    display: inline-block!important;
    height: 100%!important;
    padding-left: 1.5rem!important;
    padding-right: 1.5rem!important;
    position: relative!important
}

body header .header-wrap nav ul .menu-line span {
    background-color: #b5bbc4;
    height: 1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

body header .header-wrap .header-list {
    align-items: center;
    display: flex;
    position: absolute;
    right: 2.5rem;
    top: 21px
}

body header .header-wrap .header-list>div {
    cursor: pointer;
    display: inline-block;
    margin-left: .75rem;
    position: relative
}

body header .header-wrap .header-list>div>p {
    color: #6b7280;
    font-size: .75rem;
    line-height: 1rem;
    line-height: 24px
}

body header .header-wrap .header-list>div>p span {
    color: inherit
}

body header .header-wrap .header-list>div>p .member {
    --tw-text-opacity: 1;
    background: var(--primary);
    border-radius: 9999px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    display: inline-block;
    font-weight: 700;
    height: 24px;
    letter-spacing: 1.4em;
    line-height: 16px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
    width: 24px
}

body header .header-wrap .header-list>div>p .login {
    background: var(--gray);
    border-radius: 9999px;
    color: inherit;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    height: 24px;
    letter-spacing: 1.4em;
    line-height: 16px;
    overflow: hidden;
    padding: 4px;
    text-align: center;
    white-space: nowrap;
    width: 24px
}

body header .header-wrap .header-list>div.join a,body header .header-wrap .header-list>div.join button {
    color: #6b7280;
    font-size: .75rem;
    line-height: 1rem;
    line-height: 24px
}

body header .header-wrap .header-list>div.join a:hover,body header .header-wrap .header-list>div.join button:hover {
    font-weight: 600
}

body header .header-wrap .header-list>div.line {
    background-color: #6b7280;
    height: 10px;
    width: 1px
}

body header .header-wrap .header-list>div:last-child p:after {
    content: none
}

body header .header-wrap .header-list>div.on>p,body header .header-wrap .header-list>div:hover>p {
    font-weight: 600
}

body header .header-wrap .header-list>div.language {
    padding: 23px 0
}

body header .header-wrap .header-list>div.language p {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    border-radius: 9999px;
    font-weight: 600;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 24px
}

body header .header-wrap .header-list>div.language p:hover {
    background: var(--origin-gradient)
}

body header .header-wrap .header-list>div.language.on p,body header .header-wrap .header-list>div.language p:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

body header .header-wrap .header-list>div.language.on p {
    background: var(--origin-gradient)
}

body header .header-wrap .header-list>div.shortcut p {
    line-height: 24px
}

body header .header-wrap .header-list>div.shortcut p span {
    font-size: 1.25rem;
    height: 24px;
    line-height: 1.75rem;
    line-height: 24px;
    margin-right: .25rem;
    padding: 0 3px;
    text-align: center;
    width: 24px
}

body header .header-wrap .header-list>div.board-dropdown {
    position: relative
}

body header .header-wrap .header-list>div.board-dropdown .board-toggle {
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .25rem
}

body header .header-wrap .header-list>div.board-dropdown .dropdown-menu {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    background: #333;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-radius: .125rem;
    border-width: 1px;
    display: none;
    margin-bottom: .5rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 115%;
    width: 8rem;
    z-index: 50
}

body header .header-wrap .header-list>div.board-dropdown .dropdown-menu li {
    display: block!important;
    margin-right: 0!important
}

body header .header-wrap .header-list>div.board-dropdown .dropdown-menu li:not(:last-child) {
    margin-bottom: 1rem
}

body header .header-wrap .header-list>div.board-dropdown .dropdown-menu li a {
    --tw-text-opacity: 1;
    align-items: center;
    color: rgb(229 231 235/var(--tw-text-opacity));
    display: flex;
    justify-content: center;
    margin-left: 0
}

body header .header-wrap .header-list>div.board-dropdown .dropdown-menu li a:hover {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(75 85 99/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

body header .header-wrap .header-list>div.board-dropdown.on .dropdown-menu {
    display: block
}

body header .header-wrap .header-list>div .header-list-open {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: none;
    overflow: hidden;
    position: absolute;
    right: -10px;
    top: 46px;
    z-index: 2
}

body header .header-wrap .header-list>div .header-list-open div.list-area {
    margin: 0;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    width: 18rem
}

body header .header-wrap .header-list>div .header-list-open div.list-area h4 {
    font-weight: 600
}

body header .header-wrap .header-list>div .header-list-open div.list-area h4 span {
    color: var(--primary);
    font: inherit
}

body header .header-wrap .header-list>div .header-list-open div.list-area h4 span:after {
    content: "님"
}

body header .header-wrap .header-list>div .header-list-open div.list-area>ul {
    align-items: center;
    display: flex;
    justify-content: space-evenly
}

body header .header-wrap .header-list>div .header-list-open div.list-area>ul li {
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .25rem
}

body header .header-wrap .header-list>div .header-list-open ul.open-list {
    padding: .75rem;
    width: 10rem
}

body header .header-wrap .header-list>div .header-list-open ul.open-list li {
    border-radius: .375rem;
    margin-bottom: .25rem;
    width: 100%
}

body header .header-wrap .header-list>div .header-list-open ul.open-list li a {
    display: block;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem
}

body header .header-wrap .header-list>div .header-list-open ul.open-list li.on,body header .header-wrap .header-list>div .header-list-open ul.open-list li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    font-weight: 600
}

body header .header-wrap .header-list>div .header-list-open ul.open-list li.on a,body header .header-wrap .header-list>div .header-list-open ul.open-list li:hover a {
    font-weight: 600
}

body header .header-wrap .header-list>div .header-list-open ul.open-list li:last-child {
    margin-bottom: 0
}

body .mobile-header {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0/0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: none;
    height: 70px;
    left: 0;
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%
}

body .mobile-header .header-top {
    height: 70px
}

body .mobile-header .mobile-header-list {
    display: inline-block
}

body .mobile-header nav {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    height: 100vh;
    left: 0;
    position: absolute;
    top: 70px;
    width: 100%
}

body .mobile-header nav .navigation-top {
    display: inline-block;
    height: 70px;
    line-height: 70px;
    margin-left: 4.5rem;
    margin-top: -70px
}

body .mobile-header nav .navigation-top .log-button {
    align-items: center;
    display: flex;
    float: right;
    position: absolute;
    right: 3rem;
    top: -47px
}

body .mobile-header nav .navigation-top .log-button .logout p {
    color: #6b7280;
    cursor: pointer;
    font-size: .75rem;
    line-height: 1rem;
    line-height: 24px
}

body .mobile-header nav .navigation-top .log-button .logout p:hover {
    font-weight: 600
}

body .mobile-header nav .navigation-top .log-button .logout span {
    color: #6b7280;
    cursor: pointer;
    font-size: .75rem;
    line-height: 1rem;
    line-height: 24px
}

body .mobile-header nav .navigation-top .log-button .logout span:hover {
    font-weight: 600
}

body .mobile-header nav .navigation-top .log-button .join a {
    color: #6b7280;
    font-size: .75rem;
    line-height: 1rem;
    line-height: 24px
}

body .mobile-header nav .navigation-top .log-button .join a:hover {
    font-weight: 600
}

body .mobile-header nav .navigation-top .log-button .line {
    background-color: #6b7280;
    height: 10px;
    margin-left: .75rem;
    margin-right: .75rem;
    width: 1px
}

body .mobile-header nav .navigation-top .logon {
    float: right;
    position: absolute;
    right: 3rem
}

body .mobile-header nav .navigation-top .logon ul li a {
    font-size: .75rem;
    line-height: 1rem;
    line-height: 70px
}

body .mobile-header nav .header-menu-area {
    display: flex;
    height: var(--nav-height);
    margin-top: -1.5rem
}

body .mobile-header nav .header-menu-area .header-menu-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1rem;
    padding-bottom: 3rem;
    width: 40%
}

body .mobile-header nav .header-menu-area .header-menu-left li {
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: 1.5rem
}

body .mobile-header nav .header-menu-area .header-menu-left li:last-child {
    margin-bottom: 0
}

body .mobile-header nav .header-menu-area .header-menu-left li.on {
    font-weight: 700
}

body .mobile-header nav .header-menu-area .header-menu-left li a {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    height: 100%;
    width: 100%
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
    row-gap: 4px
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    align-items: center;
    background: #333;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    display: flex;
    font-size: .75rem;
    justify-content: space-between;
    line-height: 1rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site i {
    transform: rotate(-90deg)
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site.on {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99/var(--tw-bg-opacity))
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site.on i {
    transform: rotate(90deg)
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site i,body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site span {
    color: inherit
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom .menu-family-site span {
    font-size: inherit
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom ul {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    display: none;
    padding: .75rem
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom ul li {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .75rem;
    line-height: 1rem;
    margin-bottom: 1rem
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom ul li:last-child {
    margin-bottom: 0
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom ul li.on {
    font-weight: 700
}

body .mobile-header nav .header-menu-area .header-menu-left .menu-left-bottom ul li a {
    color: inherit;
    font-size: inherit;
    font-weight: inherit
}

body .mobile-header nav .header-menu-area .depth-menu {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    display: none;
    height: 100%;
    margin-top: .125rem;
    width: 60%
}

body .mobile-header nav .header-menu-area .depth-menu.on {
    display: block
}

body .mobile-header nav .header-menu-area .depth-menu li p {
    align-items: center;
    display: flex;
    font-weight: 700;
    justify-content: space-between;
    padding: 1rem
}

body .mobile-header nav .header-menu-area .depth-menu li p i {
    transform: rotate(-90deg)
}

body .mobile-header nav .header-menu-area .depth-menu li p.on {
    color: var(--primary)
}

body .mobile-header nav .header-menu-area .depth-menu li p.on i {
    transform: rotate(90deg)
}

body .mobile-header nav .header-menu-area .depth-menu li p i,body .mobile-header nav .header-menu-area .depth-menu li p span {
    color: inherit
}

body .mobile-header nav .header-menu-area .depth-menu li p span {
    font-size: .875rem;
    font-weight: inherit;
    line-height: 1.25rem
}

body .mobile-header nav .header-menu-area .depth-menu li p a {
    font-size: .875rem;
    line-height: 1.25rem;
    width: 100%
}

body .mobile-header nav .header-menu-area .depth-menu li p a span {
    float: right
}

body .mobile-header nav .header-menu-area .depth-menu li .two-depth-menu {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

body .mobile-header nav .header-menu-area .depth-menu li .two-depth-menu.active {
    max-height: 360px;
    transition: max-height .6s ease
}

body .mobile-header nav .header-menu-area .depth-menu li .two-depth-menu ul li {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    padding-bottom: .75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .75rem
}

body .mobile-header nav .header-menu-area .depth-menu li .two-depth-menu ul li:last-child {
    padding-bottom: .75rem;
    padding-top: .75rem
}

body .mobile-header nav .header-menu-area .depth-menu li .two-depth-menu ul li.active {
    font-weight: 700
}

body .mobile-header nav .header-menu-area .depth-menu li .two-depth-menu ul li a {
    color: inherit;
    font-size: inherit;
    font-weight: inherit
}

body footer .footer-cont {
    margin: auto;
    min-height: 200px;
    padding-bottom: 1.75rem;
    padding-top: 1.75rem;
    position: relative;
    width: 1200px
}

body footer .footer-info {
    background: #222
}

body footer .footer-info .footer-cont {
    position: relative
}

body footer .footer-info .footer-cont ul {
    margin-bottom: 1.75rem
}

body footer .footer-info .footer-cont ul li {
    display: inline-block;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-right: 1.5rem
}

body footer .footer-info .footer-cont ul li:nth-child(2) a {
    color: var(--secondary);
    font-weight: 700
}

body footer .footer-info .footer-cont ul li a {
    --tw-text-opacity: 1;
    color: rgb(229 231 235/var(--tw-text-opacity))
}

body footer .footer-info .footer-cont .info {
    --tw-text-opacity: 1;
    color: rgb(209 213 219/var(--tw-text-opacity));
    display: inline-block;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .25rem
}

body footer .footer-info .footer-cont .info span {
    padding-left: .5rem;
    padding-right: .5rem
}

body footer .footer-info .footer-cont:first-child {
    padding-right: 1rem
}

body footer .footer-info .footer-cont .copyright {
    --tw-text-opacity: 1;
    color: rgb(243 244 246/var(--tw-text-opacity));
    font-size: .75rem;
    line-height: 1rem;
    margin-top: 2rem
}

body footer .footer-info .footer-cont .channel {
    position: absolute;
    right: 0;
    top: 1.75rem
}

body footer .footer-info .footer-cont .channel>div {
    display: flex;
    gap: 1rem
}

body footer .footer-info .footer-cont .channel>div a {
    display: inline-block
}

body footer .footer-info .footer-cont .channel>div a:last-child {
    margin-left: .75rem
}

body footer .footer-info .footer-cont .channel>div .dropdown {
    position: relative;
    width: 100%
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-toggle {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    align-items: center;
    background: #3d3d3d;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 1px;
    color: rgb(209 213 219/var(--tw-text-opacity));
    display: flex;
    justify-content: space-between;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    width: 100%
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-toggle i {
    color: inherit;
    font-size: inherit
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-menu {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    background: #222;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    bottom: 100%;
    display: none;
    margin-bottom: .5rem;
    padding: 1rem;
    position: absolute;
    width: 100%;
    z-index: 50
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-menu li {
    display: block!important;
    margin-right: 0!important
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-menu li:not(:last-child) {
    margin-bottom: 1rem
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-menu li a {
    --tw-text-opacity: 1;
    align-items: center;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: flex;
    justify-content: space-between;
    margin-left: 0
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-menu li a:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

body footer .footer-info .footer-cont .channel>div .dropdown .dropdown-menu li a span {
    font-size: 15px!important
}

body footer .footer-info .footer-cont .channel>div .dropdown.open .dropdown-menu {
    display: block
}

body footer .go-top {
    background: #3e3b3cba;
    border-radius: 26px;
    bottom: 20px;
    box-shadow: 0 0 7px #555;
    cursor: pointer;
    display: none;
    height: 60px;
    position: fixed;
    right: 100px;
    text-align: center;
    width: 60px;
    z-index: 1000
}

body footer .go-top svg {
    margin-left: auto;
    margin-right: auto;
    margin-top: 13px
}

body .wrap {
    width: 100%
}

body .wrap .container {
    display: flex;
    margin: 0 auto;
    min-height: 400px;
    position: relative;
    width: 1280px
}

body .wrap .cont-area {
    margin-left: auto;
    margin-right: auto;
    padding: 100px 0;
    width: 1340px
}

body .wrap .cont-area.compact {
    padding: 70px 0!important
}

body .wrap .cont-area .error {
    background: url(../img/error.png) 50% no-repeat;
    background-size: 100%;
    display: block;
    height: 32rem;
    margin: auto;
    position: relative;
    text-align: center;
    width: 32rem
}

body .wrap .cont-area .error-btn {
    margin-top: 1rem;
    text-align: center;
    width: 100%
}

body .wrap .cont-area .error-btn a {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1.75rem
}

body .wrap .cont-area .error-btn a:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

body .wrap .cont-area .error-btn a span {
    color: inherit
}

body .wrap .splide {
    background: var(--oragin-gradient);
    height: auto
}

body .wrap .linkTabArea {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-left-width: 1px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999
}

body .wrap .linkTabArea .linkTabBtn {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-width: 1px;
    cursor: pointer;
    height: 3rem;
    left: -1.5rem;
    position: absolute;
    top: 41.5vh;
    width: 1.5rem
}

body .wrap .linkTabArea .linkTabBtn#openTab {
    left: -21px
}

body .wrap .linkTabArea .linkTabBtn span {
    line-height: 40px
}

body .wrap .linkTabArea .linkTab {
    height: 100%;
    width: 7rem
}

body .wrap .linkTabArea .linkTab ul {
    margin-top: 35vh
}

body .wrap .linkTabArea .linkTab ul li {
    border-top-width: 1px;
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center
}

body .wrap .linkTabArea .linkTab ul li:last-child {
    border-bottom-width: 1px
}

body .wrap .linkTabArea .linkTab ul li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity))
}

body .wrap .linkTabArea .linkTab ul li a {
    display: block;
    height: 100%;
    padding-bottom: .75rem;
    padding-top: .75rem;
    width: 100%
}

body .wrap .professional {
    background: url(../img/main-professional.png) no-repeat;
    background-size: 100%;
    height: auto
}

body .wrap .wrap-area {
    margin-top: 5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

body .news {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

body .news .news-area {
    display: flex
}

body .news .news-area>div li {
    --tw-bg-opacity: 1;
    aspect-ratio: 768/628;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    height: 211px;
    max-width: 407px;
    padding: 1.5rem;
    width: 407px
}

body .news .news-area .title {
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    padding-bottom: .25rem
}

body .news .news-area .event-cont {
    margin-right: 1.5rem
}

body .news .news-area .event-cont li {
    background: #fff
}

body .news .news-area .event-cont img {
    border-radius: 1rem;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

body .news .news-area .news-cont ul {
    display: flex
}

body .news .news-area .news-cont ul li .news-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem
}

body .news .news-area .news-cont ul li .news-top p {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

body .news .news-area .news-cont ul li .news-top a {
    align-items: center;
    border-color: var(--primary);
    border-radius: .125rem;
    border-width: 1px;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    width: 1.5rem
}

body .news .news-area .news-cont ul li .news-top a i {
    color: var(--primary);
    font-size: 1.25rem;
    line-height: 1.75rem
}

body .news .news-area .news-cont ul li .news-top a:hover {
    background: var(--primary)
}

body .news .news-area .news-cont ul li .news-top a:hover i {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

body .news .news-area .news-cont ul li .news-center {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-radius: .25rem;
    height: 70%;
    margin-bottom: .75rem;
    padding: .75rem;
    width: 100%
}

body .news .news-area .news-cont ul li .news-center p,body .news .news-area .news-cont ul li .news-center span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem
}

body .news .news-area .news-cont ul li .news-center p {
    margin-bottom: .75rem
}

body .news .news-area .news-cont ul li .news-center p a {
    color: var(--text);
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

body .news .news-area .news-cont ul li .news-center p.news-center-text {
    max-height: 120px;
    overflow: hidden
}

body .news .news-area .news-cont ul li .news-bottom {
    --tw-text-opacity: 1;
    align-items: center;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: flex;
    justify-content: space-between
}

body .news .news-area .news-cont ul li .news-bottom i,body .news .news-area .news-cont ul li .news-bottom p {
    color: inherit
}

body .news .news-area .news-cont ul li .news-bottom p {
    font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .125rem;
    text-indent: .75rem
}

body .news .news-area .news-cont ul li .news-bottom:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity))
}

body .news .news-area .news-cont ul li:first-child {
    margin-right: 1.5rem
}

body .together .together-cont {
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    padding: 4rem
}

body .together .together-cont .cont-left {
    text-align: left
}

body .together .together-cont .cont-left a {
    color: var(--secondary);
    font-weight: 700
}

body .together .together-cont .cont-left .title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    padding-bottom: 1.5rem
}

body .together .together-cont .cont-left .exp {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    padding-bottom: .75rem
}

body .together .together-cont .cont-right {
    display: flex
}

body .together .together-cont .cont-right li p,body .together .together-cont .cont-right li p:first-child {
    display: inline-block
}

body .together .together-cont .cont-right li p:first-child {
    min-width: 56px
}

body .together .together-cont .cont-right li p:last-child {
    padding-left: 1rem
}

body .together .together-cont .cont-right li:not(:last-child) {
    margin-bottom: 1rem
}

body .together .together-cont .cont-right .inquiry {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    background: linear-gradient(270deg,hsla(0,0%,100%,0) -26.79%,rgba(0,0,0,.14) -6.82%,hsla(0,0%,9%,.06) 11.15%,hsla(0,0%,100%,.04) 123.81%);
    background-blend-mode: overlay;
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: .5rem;
    margin-right: 4rem;
    padding: 1.5rem;
    text-align: left
}

body .together .together-cont .cont-right .inquiry li dl {
    display: flex;
    font-size: .875rem;
    justify-content: flex-end;
    line-height: 1.25rem;
    margin-left: 1rem
}

body .together .together-cont .cont-right .inquiry li dl dt {
    color: var(--secondary);
    font-size: inherit;
    font-weight: 700;
    margin-right: .5rem;
    min-width: 70px
}

body .together .together-cont .cont-right .inquiry li dl dd {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: inherit;
    min-width: 50px
}

body .together .together-cont .cont-right .inquiry li dl:nth-child(2) {
    padding-bottom: .25rem;
    padding-top: .25rem
}

body .together .together-cont .cont-right .inquiry li p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

body .together .together-cont .cont-right .inquiry li p:last-child {
    font-weight: 700
}

body .together .together-cont .cont-right .inquiry li .number {
    margin-top: .5rem
}

body .together .together-cont .cont-right .inquiry-info {
    padding: 1.5rem;
    text-align: left
}

body .together .together-cont .cont-right .inquiry-info p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

body .together .together-cont .cont-right .inquiry-info p:first-child {
    --tw-text-opacity: 1;
    color: rgb(229 231 235/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem
}

body .together .together-cont.bgtypeA {
    background: url(../img/main/N_together_01.jpg) no-repeat 50%/cover
}

body .together .together-cont.bgtypeB {
    background: url(../img/main/N_together_02obj.jpg.png) no-repeat 50%/cover #0d1620
}

body .together .together-cont.int .cont-right {
    align-items: center
}

body .together .together-cont.int .cont-right .inquiry {
    height: 33.333333%!important
}

body .floating {
    align-items: center;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 1.5rem;
    z-index: 9999
}

body .floating .tooltip-box {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border: 1px solid var(--primary);
    border-radius: .5rem;
    bottom: 4.5rem;
    display: none;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    position: absolute;
    right: 0;
    white-space: nowrap
}

body .floating .tooltip-box .tooltip-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    line-height: 1.375rem!important;
    
}

body .floating .tooltip-box .tooltip-text span {
    text-size: inherit;
    color: var(--primary);
    font-weight: 700
}

body .floating .tooltip-box:after {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))!important;
    border-bottom-width: 0!important;
    border-right-width: 0!important;
    border: 1px solid var(--primary);
    content: "";
    height: 9px;
    position: absolute;
    right: 25px;
    top: 57px;
    transform: rotate(-135deg);
    width: 9px;
    z-index: 9
}

body .floating .floating-inner {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border: 1px solid var(--primary);
    border-radius: 9999px;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    position: relative;
    transition: background-color .3s ease
}

body .floating .floating-inner img {
    height: 33px;
    margin-right: .5rem;
    width: 38px
}

body .floating .floating-inner:hover {
    background-color: #ebe9ff
}

body .floating:hover .tooltip-box {
    display: block
}

body .m-hidden {
    display: block
}

body .pc-hidden {
    display: none
}

@media (min-width: 769px) and (max-width:1325px) {
    body {
        max-width:1279px;
        min-width: 769px;
        width: 100%
    }

    body header {
        display: none
    }

    body header .hide-header {
        display: none!important
    }

    body .mobile-header {
        display: block;
        z-index: 1000
    }

    body .mobile-header .mobile-top h1.logo {
        left: 1rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    body .mobile-header .mobile-top .now-title {
        display: none!important
    }

    body .mobile-header .mobile-top .mobile-header-list {
        display: inline-block;
        position: absolute;
        right: 1rem;
        text-align: left
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn {
        display: inline-block;
        margin-top: 6px
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.menu {
        cursor: pointer;
        margin-left: .5rem;
        padding-top: 5px
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.menu span {
        --tw-rotate: 0deg;
        background: var(--text);
        border-radius: 1px;
        display: block;
        height: 2px;
        margin-bottom: .375rem;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition: .2s ease;
        width: 19px
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.on span:first-child {
        transition: .1s ease;
        visibility: hidden
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.on span:nth-child(2) {
        --tw-rotate: 45deg;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition: .2s ease
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.on span:last-child {
        --tw-rotate: -45deg;
        margin-top: -.5rem;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition: .2s ease
    }

    body .mobile-header nav {
        display: none
    }

    body footer {
        max-width: 1279px
    }

    body footer .footer-cont {
        padding-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2.5rem;
        width: 100%
    }

    body footer .footer-cont .channel {
        right: 1rem!important
    }

    body .wrap .container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        width: 100%
    }

    body .wrap .cont-area {
        max-width: 1279px;
        overflow-x: hidden;
        padding: 2.5rem;
        width: 100%
    }

    body .wrap .news .news-area {
        flex-direction: column
    }

    body .wrap .news .news-area .news-cont {
        margin-top: 1rem
    }

    body .wrap .together .together-cont {
        background-position: 70% 0;
        flex-direction: column;
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    body .wrap .together .together-cont .cont-left {
        margin-bottom: 2rem
    }

    body .wrap .together .together-cont .cont-right .inquiry {
        margin-right: 1rem
    }

    body .wrap .together .together-cont.int .cont-right {
        align-items: unset!important;
        flex-direction: column
    }

    body .wrap .together .together-cont.int .cont-right .inquiry {
        margin-right: 0;
        width: -moz-fit-content;
        width: fit-content
    }
}

@media (max-width: 768px) {
    body {
        max-width:768px;
        min-width: 320px;
        width: 100%
    }

    body header {
        display: none
    }

    body header .hide-header {
        display: none!important
    }

    body .mobile-header {
        display: block;
        width: 100vw;
        z-index: 123
    }

    body .mobile-header .mobile-top {
        text-align: center
    }

    body .mobile-header .mobile-top h1.logo {
        left: 1rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    body .mobile-header .mobile-top .now-title {
        display: none!important
    }

    body .mobile-header .mobile-top .mobile-header-list {
        display: inline-block;
        position: absolute;
        right: 1rem;
        text-align: left
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn {
        display: inline-block;
        margin-top: 6px
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.menu {
        cursor: pointer;
        margin-left: .5rem;
        padding-top: 5px
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.menu span {
        --tw-rotate: 0deg;
        background: var(--text);
        border-radius: 1px;
        display: block;
        height: 2px;
        margin-bottom: .375rem;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition: .2s ease;
        width: 19px
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.on span:first-child {
        transition: .1s ease;
        visibility: hidden
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.on span:nth-child(2) {
        --tw-rotate: 45deg;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition: .2s ease
    }

    body .mobile-header .mobile-top .mobile-header-list .mobile-header-list-mn.on span:last-child {
        --tw-rotate: -45deg;
        margin-top: -.5rem;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition: .2s ease
    }

    body .mobile-header nav {
        display: none
    }

    body footer {
        max-width: 768px
    }

    body footer .footer-cont {
        padding-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2.5rem;
        width: 100%
    }

    body footer .footer-stm {
        display: none
    }

    body footer .footer-stm .footer-cont {
        -moz-column-gap: 2.5rem;
        column-gap: 2.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 2rem
    }

    body footer .footer-stm .footer-cont ul {
        width: 100px
    }

    body footer .footer-stm .footer-cont ul li.stm-title,body footer .footer-stm .footer-cont ul li a,body footer .footer-stm .footer-cont ul li a span {
        font-size: .75rem;
        line-height: 1rem
    }

    body footer .footer-info .footer-cont ul li {
        margin-right: 1rem
    }

    body footer .footer-info .footer-cont ul li a {
        font-size: .75rem;
        line-height: 1rem
    }

    body footer .footer-info .footer-cont .channel {
        right: .5rem;
        top: 2rem
    }

    body footer .footer-info .footer-cont .channel>div {
        gap: 0!important
    }

    body footer .footer-info .footer-cont .channel>div>a {
        max-width: 44px
    }

    body footer .footer-info .footer-cont .channel a:last-child {
        margin-left: 0
    }

    body footer .footer-info .footer-cont .channel img {
        width: 80%
    }

    body footer .m-hidden {
        display: none!important
    }

    body footer .pc-hidden {
        display: block!important
    }

    body .wrap .container {
        display: block;
        width: 100vw
    }

    body .wrap .cont-area {
        max-width: 768px;
        overflow-x: hidden;
        padding-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2.5rem;
        width: 100%
    }

    body .wrap .news .news-area {
        flex-direction: column
    }

    body .wrap .news .news-area .news-cont {
        margin-top: 1rem
    }

    body .wrap .news .news-area .news-cont ul {
        flex-direction: column
    }

    body .wrap .news .news-area .news-cont ul li:first-child {
        margin-bottom: 1rem
    }

    body .wrap .together .together-cont {
        background-position: 60% 0;
        flex-direction: column;
        padding: 2rem
    }

    body .wrap .together .together-cont .cont-left {
        margin-bottom: 1.5rem
    }

    body .wrap .together .together-cont .cont-right {
        flex-direction: column
    }

    body .wrap .together .together-cont .cont-right .inquiry {
        width: 250px
    }

    body .wrap .together .together-cont.int .cont-right {
        align-items: unset!important
    }

    body .wrap .together .together-cont.int .cont-right .inquiry {
        margin-right: 0!important;
        width: -moz-fit-content!important;
        width: fit-content!important
    }

    body .floating .tooltip-box {
        bottom: 4rem!important
    }

    body .floating .tooltip-box .tooltip-text,body .floating .tooltip-box span {
        font-size: .875rem!important;
        line-height: 1.25rem!important
    }

    body .floating .tooltip-box:after {
        top: 49px!important
    }

    body .floating .floating-inner img {
        height: 30px!important;
        width: 35px!important
    }
}

.sub-container {
    min-height: 400px;
    position: relative;
    width: 100%
}

.sub-container .area-top {
    padding: 1rem;
    text-align: center
}

.sub-container .inquiry-area {
    border-width: 1px;
    padding: 1.75rem
}

.sub-container .inquiry-area input[type=text] {
    width: 20rem
}

.sub-container .inquiry-area privacy-area {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    margin-top: 2.5rem;
    padding: 2.5rem
}

.sub-container span[id*=-error] {
    color: var(--important-red);
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .125rem
}

.sub-visual-bnr {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255/var(--tw-bg-opacity));
    height: 330px;
    margin-top: 70px;
    overflow: hidden
}

.sub-visual-bnr,.sub-visual-bnr .sub-visual-txt {
    position: relative
}

.sub-visual-bnr .sub-visual-txt {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 5rem;
    width: 1280px;
    z-index: 1
}

.sub-visual-bnr .sub-visual-txt .service-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1
}

.sub-visual-bnr .sub-visual-txt .service-title span {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.sub-visual-bnr .sub-visual-txt p.service-ex {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-top: 1.5rem;
    width: 80%;
    
}

.sub-visual-bnr .sub-visual-txt ul li {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 2rem;
    padding-left: 1.75rem;
    position: relative
}

.sub-visual-bnr .sub-visual-txt ul li:before {
    content: url(../img/sub-visual-chk.png);
    left: 0;
    position: absolute;
    top: 3px
}

.sub-visual-bnr .sub-visual-txt .now-page li {
    display: inline-block;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: 1rem
}

.sub-visual-bnr .sub-visual-txt .now-page li:before {
    content: none
}

.sub-visual-bnr .sub-visual-txt .now-page li+li:before {
    content: ">";
    font-weight: 400;
    line-height: 1.2em;
    margin-left: .5rem;
    margin-right: .5rem
}

.sub-visual-bnr .sub-visual-txt .now-page li.home span {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 1.4rem
}

.sub-visual-bnr .sub-visual-txt .now-page li:first-child {
    padding-left: 0
}

.sub-visual-bnr .sub-visual-img {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%)
}

.sub-visual-bnr.new-bnr {
    background-color: unset
}

.sub-visual-bnr.new-bnr h1,.sub-visual-bnr.new-bnr li,.sub-visual-bnr.new-bnr p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-visual-bnr.new-bnr .sub-visual-img {
    height: 100%;
    position: absolute;
    right: unset;
    top: 50%;
    transform: translateY(-50%);
    width: 100%
}

.sub-visual-bnr.new-bnr .sub-visual-img.dbcipher {
    background: url(../img/sub-visual/dbcipher_bnr.jpg) no-repeat 100% #4a4b4d
}

.sub-visual-bnr.new-bnr .sub-visual-img.dbAC {
    background: url(../img/sub-visual/dbAC_bnr.jpg.png) no-repeat 100% #131a24
}

.sub-visual-bnr.new-bnr .sub-visual-img.hightpower {
    background: url(../img/sub-visual/HPcolocation_bnr.jpg) no-repeat 100% #141d37
}

.sub-visual-bnr.new-bnr .sub-visual-img.Idctransfer {
    background: url(../img/sub-visual/IDCTransfer_bnr.jpg) no-repeat 100% #141d37
}

.sub-visual-bnr.new-bnr .sub-visual-img.colocation {
    background: url(../img/sub-visual/colocation_bnr.jpg) no-repeat 100% #070c10
}

.sub-visual-bnr.new-bnr .sub-visual-img.international {
    background: url(../img/sub-visual/int_bnr.jpg) no-repeat 100% #0e1017
}

.sub-visual-bnr.new-bnr .sub-visual-img.ssl {
    background: url(../img/sub-visual/SSL_bnr.jpg) no-repeat 100% #081110
}

.sub-visual-bnr.new-bnr .sub-visual-img.vpn {
    background: url(../img/sub-visual/vpn_bnr.jpg) no-repeat 100% #020202
}

.sub-visual-bnr.new-bnr .sub-visual-img.hybridcloud {
    background: url(../img/sub-visual/Cloud/HybridConnect_bnr.png) no-repeat 100% #1a3162
}

.sub-visual-bnr.naverworks {
    background: linear-gradient(92deg,#cdf1fa,#cffac9 99.81%)
}

.sub-visual-bnr.naverworks.event {
    background: url(../img/bnr-sub/naverworks-pc.png) 50% no-repeat,linear-gradient(92deg,#cdf1fa,#cffac9 99.81%)
}

.sub-cont-group {
    margin: auto;
    width: 100%
}

.sub-cont-group .sub-area {
    margin: auto;
    max-width: 1280px;
    padding: 70px 0;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-top {
    margin-bottom: 2.5rem;
    text-align: center;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-top .title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    position: relative
}

.sub-cont-group .sub-area .sub-area-top .title:before {
    background: var(--secondary);
    content: none;
    display: block;
    height: .25rem;
    position: absolute;
    top: -1.25rem;
    width: 6rem
}

.sub-cont-group .sub-area .sub-area-top .server-list-selector {
    margin-top: .75rem
}

.sub-cont-group .sub-area .sub-area-top .server-list-selector li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    padding-bottom: .375rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .375rem
}

.sub-cont-group .sub-area .sub-area-top .server-list-selector li.on {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(55 65 81/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .sub-area .sub-area-top .title-exp {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    padding-top: 1rem;
    text-align: center;
    
}

.sub-cont-group .sub-area .sub-area-top .title-exp b {
    font-size: inherit;
    font-weight: 700;
    line-height: inherit
}

.sub-cont-group .sub-area .sub-area-top .title-exp.text-lg {
    font-size: 1.125rem!important;
    line-height: 1.75rem!important
}

.sub-cont-group .sub-area .hc-introduce {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    padding-bottom: 5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32rem
}

.sub-cont-group .sub-area .hc-introduce p {
    
}

.sub-cont-group .sub-area .sub-area-bottom {
    text-align: center;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .sub-title {
    font-size: 1.5rem;
    line-height: 2rem;
    position: relative
}

.sub-cont-group .sub-area .sub-area-bottom .title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .product-sort {
    margin-bottom: 2.5rem;
    text-align: left
}

.sub-cont-group .sub-area .sub-area-bottom .product-sort ul {
    text-align: center
}

.sub-cont-group .sub-area .sub-area-bottom .product-sort ul li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-radius: .375rem;
    border-width: 1px;
    color: rgb(156 163 175/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    margin-right: .25rem;
    padding-bottom: .375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .375rem
}

.sub-cont-group .sub-area .sub-area-bottom .product-sort ul li.on,.sub-cont-group .sub-area .sub-area-bottom .product-sort ul li:hover {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.sub-cont-group .sub-area .sub-area-bottom .service-procedure {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
    background: var(--origin-gradient);
    border-radius: .375rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    padding: 1.25rem;
    text-align: center;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .service-procedure li {
    display: inline-block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding: 1.25rem;
    position: relative;
    text-align: center
}

.sub-cont-group .sub-area .sub-area-bottom .service-procedure li p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.25rem;
    line-height: 1.75rem;
    vertical-align: middle
}

.sub-cont-group .sub-area .sub-area-bottom .service-procedure li p.num {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 9999px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1.5rem;
    height: 3rem;
    line-height: 2rem;
    line-height: 42px;
    margin-bottom: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 3rem
}

.sub-cont-group .sub-area .sub-area-bottom .service-procedure li:nth-child(3n-2) {
    margin-left: 0
}

.sub-cont-group .sub-area .sub-area-bottom .customer-case li {
    border-width: 1px;
    height: 20rem;
    padding: 0
}

.sub-cont-group .sub-area .sub-area-bottom .customer-case li .img {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    height: 12rem;
    overflow: hidden;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .customer-case li .img img {
    width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .customer-case li .text {
    padding: 1.25rem;
    position: relative
}

.sub-cont-group .sub-area .sub-area-bottom .customer-case li .text .link {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem
}

.sub-cont-group .sub-area .sub-area-bottom .customer-case li .text .link a {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service {
    display: flex
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(165 180 252/var(--tw-border-opacity));
    border-top-right-radius: .75rem;
    display: inline-block;
    flex: 1;
    margin-left: .75rem;
    margin-right: .75rem;
    max-height: 15rem;
    max-width: 30%;
    min-height: 9rem;
    min-width: 22%;
    padding: 0
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li .text {
    padding: 1.75rem;
    position: relative;
    text-align: left
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li .text h4 {
    font-size: 1.5rem;
    line-height: 2rem
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li .text p {
    margin-top: .75rem;
    
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li .text p.link {
    border-radius: 9999px;
    height: 1.25rem;
    margin: 0;
    position: absolute;
    right: 1.25rem;
    top: 1.75rem;
    transition: .3s ease;
    width: 1.25rem
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li .text p.link span {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    height: 100%;
    line-height: 1.75rem;
    line-height: 17px;
    text-align: center;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(165 180 252/var(--tw-bg-opacity))
}

.sub-cont-group .sub-area .sub-area-bottom .relation-service li:hover p.link span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .sub-area .sub-area-bottom .img-grp p {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
    border-radius: .75rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: none;
    overflow: hidden
}

.sub-cont-group .sub-area .sub-area-bottom .img-grp p:first-child {
    display: block
}

.sub-cont-group .sub-area .sub-area-bottom .msoffice-table ul li {
    --tw-text-opacity: 1;
    border-width: 0;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    margin: 0;
    padding: 0;
    padding-left: .75rem;
    position: relative;
    width: 100%;
    
}

.sub-cont-group .sub-area .sub-area-bottom .msoffice-table ul li:before {
    content: "-";
    left: 0;
    position: absolute
}

.sub-cont-group .sub-area .sub-area-bottom .merit {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55/var(--tw-border-opacity));
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .sub-area .sub-area-bottom .merit li {
    display: inline-block;
    padding: 3rem;
    text-align: left;
    width: 33.333333%
}

.sub-cont-group .sub-area .sub-area-bottom .merit li h4 {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem
}

.sub-cont-group .sub-area .sub-area-bottom .merit li p {
    line-height: 1.8em;
    margin-bottom: .5rem;
    padding-left: 1.5rem;
    position: relative;
    
}

.sub-cont-group .sub-area .sub-area-bottom .merit li p:before {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 2px;
    content: "";
    height: .75rem;
    left: 0;
    position: absolute;
    top: .375rem;
    width: .75rem
}

.sub-cont-group .sub-area .sub-area-bottom .meritHalf {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55/var(--tw-border-opacity));
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .sub-area .sub-area-bottom .meritHalf li {
    display: inline-block;
    padding: 3rem;
    text-align: left;
    width: 50%
}

.sub-cont-group .sub-area .sub-area-bottom .meritHalf li h4 {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem
}

.sub-cont-group .sub-area .sub-area-bottom .meritHalf li p {
    line-height: 1.8em;
    margin-bottom: .5rem;
    padding-left: 1.5rem;
    position: relative;
    
}

.sub-cont-group .sub-area .sub-area-bottom .meritHalf li p:before {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 2px;
    content: "";
    height: .75rem;
    left: 0;
    position: absolute;
    top: .375rem;
    width: .75rem
}

.sub-cont-group .sub-area .sub-area-bottom .number {
    display: flex;
    justify-content: center
}

.sub-cont-group .sub-area .sub-area-bottom .number li {
    display: inline-block;
    width: 25%
}

.sub-cont-group .sub-area .sub-area-bottom .number li p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.sub-cont-group .sub-area .sub-area-bottom .number li p.title {
    -webkit-text-fill-color: transparent;
    background: var(--origin-gradient);
    -webkit-background-clip: text;
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .scroll-text {
    display: none
}

.sub-cont-group .sub-area .sub-area-bottom .config-tab {
    margin-bottom: 1.25rem;
    margin-top: 2.5rem
}

.sub-cont-group .sub-area .sub-area-bottom .config-tab ul li {
    --tw-border-opacity: 1;
    border-bottom-width: 2px;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    cursor: pointer;
    display: inline-block;
    margin-right: .75rem;
    padding-bottom: .5rem;
    padding-left: .375rem;
    padding-right: .375rem;
    padding-top: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .config-tab ul li.on,.sub-cont-group .sub-area .sub-area-bottom .config-tab ul li:hover {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.sub-cont-group .sub-area .sub-area-bottom .config-two-img {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-evenly
}

.sub-cont-group .sub-area .sub-area-bottom .config-two-img figure img {
    --tw-border-opacity: 1;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0/0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.sub-cont-group .sub-area .sub-area-bottom .config-two-img figure figcaption {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(156 163 175/var(--tw-bg-opacity));
    border-radius: .25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    display: inline-block;
    margin-top: .75rem;
    padding-bottom: .5rem;
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .defaultBox {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: .5rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2.5rem;
    width: 83.333333%
}

.sub-cont-group .sub-area .sub-area-bottom .defaultBox ul {
    margin-left: 14rem;
    margin-right: 14rem;
    text-align: left;
    white-space: nowrap
}

.sub-cont-group .sub-area .sub-area-bottom .defaultBox ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .defaultBox ul li b {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-right: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .defaultBox ul li:last-child {
    padding-bottom: 0
}

.sub-cont-group .sub-area .sub-area-bottom .china-info {
    display: flex
}

.sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    display: inline-block;
    margin-left: 1rem;
    margin-right: 1rem;
    width: 50%
}

.sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box .china-info-title {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity));
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding: .625rem
}

.sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box .china-info-title.important {
    background: var(--primary);
    color: #fff
}

.sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box .china-info-exp {
    font-size: 1rem;
    height: 12rem;
    line-height: 1.5rem;
    padding: 1.25rem;
    text-align: left
}

.sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box .china-info-exp P {
    margin-bottom: .25rem;
    padding-left: 1rem;
    position: relative
}

.sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box .china-info-exp P:before {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175/var(--tw-bg-opacity));
    border-radius: .375rem;
    content: "";
    display: block;
    height: .5rem;
    left: 0;
    position: absolute;
    top: 6px;
    width: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 2fr 2fr
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 2rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 2rem
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li p {
    text-align: left;
    
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li .box-exp .box-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: 1.5rem
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li .box-exp .box-cont {
    min-height: 40px
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li .box-exp .box-cont p:not(:last-child) {
    padding-bottom: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li .box-exp .box-cont p:before {
    content: "- "
}

.sub-cont-group .sub-area .sub-area-bottom .prod-features li img {
    height: 92px;
    margin-left: 1rem;
    width: 92px
}

.sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr {
    align-items: flex-end;
    background: #d1edff;
    border-radius: 1.5rem;
    display: flex;
    height: 200px;
    justify-content: space-evenly;
    padding-top: 1.75rem;
    position: relative;
    width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr img:last-child {
    margin-bottom: 1.75rem;
    order: 3
}

.sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr p:first-child {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr p:nth-child(2) {
    font-size: 1.375rem;
    line-height: 1.875rem;
    margin-bottom: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr .inquiry-ob {
    order: 1
}

.sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr .inquiry-cont {
    margin-bottom: 2rem;
    order: 2
}

.sub-cont-group .sub-area .sub-area-bottom .success-case {
    padding-top: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: flex;
    justify-content: space-around
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 1rem;
    width: 400px
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li .list-top {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    text-align: left
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li .list-top h3 {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    text-align: left;
    
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li .list-top img {
    display: inline-block;
    height: 20px;
    margin-top: .25rem;
    padding-right: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li dl {
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-top: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li dl:first-child {
    margin-top: 0
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li dl dt {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: left;
    
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li dl dd {
    font-size: .875rem;
    line-height: 1.25rem;
    margin-left: .5rem;
    margin-top: .5rem;
    text-align: left;
    
}

.sub-cont-group .sub-area .sub-area-bottom .success-case ul li:hover {
    border: 1px solid var(--primary);
    transition-duration: .15s;
    transition-duration: .3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.sub-cont-group .sub-area .sub-area-bottom .success-case.int .list-top {
    display: flex
}

.sub-cont-group .sub-area .sub-area-bottom .success-case.int dd {
    padding-left: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current dl {
    margin-bottom: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current dl dt {
    font-weight: 700;
    text-align: left
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current dl dd {
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: left
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current dl:first-of-type {
    margin-top: 1rem
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current img {
    border-radius: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .idc-current .idc-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: .5rem
}

.sub-cont-group .sub-area .sub-area-bottom .colo-dividing {
    margin-top: 5rem
}

.sub-cont-group .sub-area .sub-area-bottom .int-worldmap {
    margin: auto;
    text-align: center;
    width: 83.333333%
}

.sub-cont-group .sub-area .sub-area-bottom .int-worldmap button {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-top: 3rem;
    width: 25%
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp {
    align-items: center;
    display: flex
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp ul {
    flex: 1;
    margin: 0;
    padding: 0
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp ul li {
    margin-left: auto;
    margin-right: unset;
    width: 91.666667%
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp ul li dt span {
    font-weight: 700
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp ul li dl {
    margin-left: 2rem
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp ul .logo img {
    height: 32px;
    width: 32px
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp>img {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    flex: 0 0 auto;
    height: 323px;
    max-width: 100%
}

.sub-cont-group .sub-area .sub-area-bottom .int-jp i {
    font-size: 32px
}

.sub-cont-group .sub-area .sub-area-bottom .vpn-boxlist span {
    color: var(--primary);
    font-weight: 700
}

.sub-cont-group .sub-area .ssl-info img {
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .sub-area .ssl-info .title {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-bottom-width: 2px;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    color: rgb(37 99 235/var(--tw-text-opacity));
    display: inline-block;
    margin-bottom: 0
}

.sub-cont-group .sub-area .ssl-info .title-exp {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    padding-top: .5rem;
    text-align: center;
    
}

.sub-cont-group .sub-area .ssl-info .main-features {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: 2rem
}

.sub-cont-group .sub-area .ssl-info .main-features li {
    width: unset!important
}

.sub-cont-group .caution-info {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left
}

.sub-cont-group.server-info {
    background: linear-gradient(45deg,#e0e7ff,#4b60a8);
    height: 44rem;
    position: relative
}

.sub-cont-group.server-info .sub-area {
    background: url(../img/sub/server-info-img.png)103%/auto no-repeat;
    height: 100%
}

.sub-cont-group.reporting-info {
    background: url(../img/sub/reporting.png)50% no-repeat,linear-gradient(45deg,#e0e7ff,#4b60a8);
    background-blend-mode: soft-light;
    background-size: 100%
}

.sub-cont-group.reporting-info .sub-area {
    height: 100%
}

.sub-cont-group.effect {
    background: url(../img/consulting.png) 21% 16vh no-repeat,#eef2ff;
    position: relative;
    text-align: center;
    width: 100%
}

.sub-cont-group.effect .sub-area {
    display: block;
    padding-bottom: 5rem;
    padding-top: 5rem;
    width: 66.666667%
}

.sub-cont-group.effect .sub-area .title {
    color: var(--text);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    margin-bottom: 2.5rem;
    width: 100%
}

.sub-cont-group.effect .sub-area ul {
    counter-reset: list-number;
    margin-left: 24rem;
    text-align: left;
    width: auto
}

.sub-cont-group.effect .sub-area ul li {
    counter-increment: list-number;
    padding-bottom: 1.25rem;
    padding-left: 5rem;
    padding-top: 1.25rem;
    width: 100%
}

.sub-cont-group.effect .sub-area ul li p {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.75rem;
    
}

.sub-cont-group.effect .sub-area ul li p.sub-tit {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 2.5rem;
    margin-bottom: .5rem
}

.sub-cont-group.effect .sub-area ul li p.num {
    margin-bottom: 1.25rem
}

.sub-cont-group.effect .sub-area ul li p.num:after {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 9999px;
    color: rgb(147 51 234/var(--tw-text-opacity));
    content: counter(list-number)"";
    display: inline-block;
    font-family: Wemakeprice-bold;
    height: 1.25rem;
    margin-left: .5rem;
    width: 1.25rem
}

.sub-cont-group.features .main-features {
    display: grid!important;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.sub-cont-group.features .main-features li p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: center
}

.sub-cont-group.features .main-features li p.img {
    margin-bottom: .75rem;
    text-align: center
}

.sub-cont-group.features .main-features li p.img img {
    display: inline-block
}

.sub-cont-group.features .main-features li p.title {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: .75rem;
    white-space: normal;
    
}

.sub-cont-group.features .main-features li p.sub-exp {
    text-wrap: balance;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: .5rem;
    
}

.sub-cont-group.appguard-check .sub-area {
    padding-bottom: 0
}

.sub-cont-group.appguard-check .sub-area-bottom {
    align-items: center;
    display: flex;
    justify-content: space-evenly
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area {
    margin-bottom: 70px;
    margin-top: 1.25rem
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-list li {
    min-width: 600px
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-more div {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-more div p {
    --tw-text-opacity: 1;
    align-items: center;
    color: rgb(107 114 128/var(--tw-text-opacity));
    display: flex;
    font-size: 1.25rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.75rem;
    margin-bottom: .5rem
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-more div p:last-child {
    margin-bottom: 0
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-more div p span {
    font-size: inherit;
    font-weight: inherit;
    margin-left: .5rem;
    margin-right: .5rem
}

.sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-more div p svg {
    margin-left: .5rem
}

.sub-cont-group.micro-fn .primary-box {
    -moz-column-gap: 1.125rem;
    column-gap: 1.125rem;
    flex-wrap: nowrap
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-title-area p {
    margin-top: 1rem;
    text-align: left
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-price-area {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.5rem
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-price-area p span {
    vertical-align: bottom
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-price-area p span:first-child {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-right: .75rem
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-price-area p span:last-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity))
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-price-area p b {
    color: var(--primary);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-img-area {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-top: 2.5rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
    width: 100%
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-img-area img {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-fn-area {
    margin-top: 70px
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-fn-area .title {
    margin-bottom: 1.5rem;
    text-align: left
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-fn-area .list-box {
    -moz-column-gap: .25rem;
    column-gap: .25rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.5rem
}

.sub-cont-group.micro-prd .sub-area-bottom#ms-copilot .copilot-fn-area .list-box li {
    width: 19%
}

.sub-cont-group.micro-prd .sub-area-bottom {
    display: none
}

.sub-cont-group.micro-prd .sub-area-bottom.on {
    display: block
}

.sub-cont-group.colocation-prd .tab-round {
    margin-bottom: 2rem;
    text-align: center
}

.sub-cont-group.colocation-prd .package {
    display: none
}

.sub-cont-group.colocation-prd .package.on {
    display: block
}

.sub-cont-group.dot {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255/var(--tw-bg-opacity))
}

.sub-cont-group.partner-worry .sub-area-bottom section {
    align-items: center;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    display: flex;
    justify-content: space-around
}

.sub-cont-group.partner-worry .sub-area-bottom section.worry-top {
    text-align: left
}

.sub-cont-group.partner-worry .sub-area-bottom section.worry-top .worry-text p strong {
    color: var(--important-red);
    font-weight: 700
}

.sub-cont-group.partner-worry .sub-area-bottom section.worry-bottom {
    text-align: right
}

.sub-cont-group.partner-service {
    background: url(../img/sub/partner-service.png) no-repeat 82% 64%,radial-gradient(#f3f4f6,#f3f4f6)
}

.sub-cont-group.partner-service .sub-area-bottom {
    align-items: center;
    display: flex
}

.sub-cont-group.partner-service .sub-area-bottom>div {
    width: 50%
}

.sub-cont-group.partner-service .sub-area-bottom>div ul.list>li {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .5rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.5rem;
    text-align: left
}

.sub-cont-group.partner-service .sub-area-bottom>div ul.list>li:last-child {
    margin-bottom: 0
}

.sub-cont-group.partner-service .sub-area-bottom>div ul.list>li div {
    margin-bottom: .75rem;
    margin-top: 1rem
}

.sub-cont-group.partner-service .sub-area-bottom>div ul.list>li ul.badge {
    align-items: center;
    display: flex
}

.sub-cont-group.partner-service .sub-area-bottom>div ul.list>li ul.badge li {
    border-color: var(--primary);
    border-radius: 9999px;
    border-width: 1px;
    color: var(--primary);
    font-size: .875rem;
    line-height: 1.25rem;
    margin-right: .5rem;
    padding-bottom: .125rem;
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem
}

.sub-cont-group.partner-benefit .primary-box li img {
    margin-bottom: .5rem
}

.sub-cont-group.db-prod .primary-box li p {
    
}

.sub-cont-group.db-prod .primary-box li .box-title {
    height: 65px
}

.sub-cont-group.db-prod .primary-box li .box-cont p:before {
    content: "- ";
    font-size: inherit;
    font-weight: inherit
}

.sub-cont-group.db-prod .primary-box li .box-cont:first-child {
    margin-bottom: .5rem
}

.sub-cont-group.db-prod .prod-features .box-cont {
    min-height: 105px!important
}

.sub-cont-group .hybrid-primary {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg,#413ef6,#3b72ff);
    -webkit-background-clip: text;
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit
}

.sub-cont-group .hybrid-secondary {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg,#94a3ff,#0059ff);
    -webkit-background-clip: text;
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit
}


.sub-cont-group.about-hybrid .title-exp {
    color: var(--text)!important;
    font-size: 1.125rem!important;
    line-height: 1.75rem!important
}

.sub-cont-group.about-hybrid ul li {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.sub-cont-group.about-hybrid ul li dl {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    align-items: flex-end;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    position: relative;
    text-align: left;
    width: 100%
}

.sub-cont-group.about-hybrid ul li dl dt {
    width: 100%;
}

.sub-cont-group.about-hybrid ul li dl dt span:first-of-type {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75rem
}

.sub-cont-group.about-hybrid ul li dl dt span:last-of-type {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    display: block;
    font-size: 0.9rem;
    line-height: 1.75rem;
    padding-top: .75rem
}

.sub-cont-group.about-hybrid ul li dl dd {
    margin-top: 2rem;
    width: 70px
}

.sub-cont-group.about-hybrid ul li:first-child {
    margin-bottom: 2rem
}

.sub-cont-group.need-hybrid * {
    
}

.sub-cont-group.need-hybrid {
    background: url(../img/sub-page/HybridCloud/need-hybrid.png) no-repeat 100% #111320;
    height: 100%;
    width: 100%
}

.sub-cont-group.need-hybrid .need-list {
    gap: 2.5rem
}

.sub-cont-group.need-hybrid .need-list dl {
    -webkit-backdrop-filter: blur(9.9px);
    backdrop-filter: blur(9.9px);
    background: rgba(48,53,66,.6);
    border-radius: 1rem;
    box-sizing: border-box;
    padding-bottom: 2.25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2.25rem;
    position: relative;
    text-align: left
}

.sub-cont-group.need-hybrid .need-list dl dt {
    align-items: center;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    display: flex;
    margin-bottom: 1rem
}

.sub-cont-group.need-hybrid .need-list dl dt>div {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.sub-cont-group.need-hybrid .need-list dl dt>div span {
    color: #7bf4ff!important;
    font-size: inherit;
    font-weight: inherit
}

.sub-cont-group.need-hybrid .need-list dl dd {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    
}

.sub-cont-group.need-hybrid .need-list dl dd b {
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit
}

.sub-cont-group.need-hybrid .recs li {
    -webkit-backdrop-filter: blur(9.9px)!important;
    backdrop-filter: blur(9.9px)!important;
    background: rgba(48,53,66,.6)!important;
    border-width: 0;
    width: 88%!important
}

.sub-cont-group.need-hybrid .recs li dt {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: .25rem!important;
    text-align: left
}

.sub-cont-group.need-hybrid .recs li dt span {
    background-color: unset!important;
    color: #7bbdff;
    font-weight: 700
}

.sub-cont-group.need-hybrid .recs li dd {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group.need-hybrid .recs li dd span {
    background-color: unset!important
}

.sub-cont-group.need-hybrid .recs li i {
    font-size: 35px!important;
    font-weight: 700;
    right: -13px!important;
    top: -3px!important
}

.sub-cont-group.need-hybrid .recs li .checkbox {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.sub-cont-group.need-hybrid.tab-item {
    transition-duration: .15s;
    transition-duration: .3s;
    transition-property: color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.sub-cont-group.need-hybrid.tab-item-active {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .scenario-wrap {
    align-items: stretch;
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    margin-top: 2.5rem
}

.sub-cont-group .scenario-wrap * {
    
}

.sub-cont-group .scenario-wrap .scen-left {
    position: relative;
    width: 40%
}

.sub-cont-group .scenario-wrap .scen-left ul {
    display: flex;
    flex-direction: column;
    position: relative
}

.sub-cont-group .scenario-wrap .scen-left ul .tab-item {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 0;
    color: rgb(156 163 175/var(--tw-text-opacity));
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1.75rem;
    overflow: hidden;
    padding-bottom: 2.25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2.25rem;
    position: relative;
    text-align: left;
    transition: color .3s ease;
    z-index: 1
}

.sub-cont-group .scenario-wrap .scen-left ul .tab-item:before {
    background: linear-gradient(90deg,#ebf4ff,#fff);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1
}

.sub-cont-group .scenario-wrap .scen-left ul .tab-item.tab-item-active {
    color: var(--text);
    font-weight: 700
}

.sub-cont-group .scenario-wrap .scen-left ul .tab-item.tab-item-active:before {
    animation: fillRight 1s cubic-bezier(.22,.9,.3,1) forwards
}

.sub-cont-group .scenario-wrap .scen-left .tab-indicator {
    background: linear-gradient(180deg,#413ef6,#3b72ff);
    height: 72px;
    left: 0;
    position: absolute;
    top: 0;
    transition: top .2s ease-in-out;
    width: 5px;
    z-index: 9
}

.sub-cont-group .scenario-wrap .scen-right {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    background: url(../img/sub-page/HybridCloud/scen-img.png) 50%/cover no-repeat;
    border-radius: 1rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    width: 60%
}

.sub-cont-group .scenario-wrap .scen-right .scen-box .scen-title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    padding-bottom: 2rem;
    text-align: left
}

.sub-cont-group .scenario-wrap .scen-right .scen-box .box-exp {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.75rem;
    text-align: left;
    
}

@keyframes fillRight {
    0% {
        transform: scaleX(0);
        transform-origin: left
    }

    to {
        transform: scaleX(1);
        transform-origin: left
    }
}

.sub-cont-group .features-box {
    --tw-border-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    width: 90%
}

.sub-cont-group .features-box img {
    width: 100%
}

.sub-cont-group .features-box img:first-of-type {
    display: block
}

.sub-cont-group .features-box img:last-of-type {
    display: none
}

.sub-cont-group .features-box .features-exp {
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    margin-top: 2.5rem
}

.sub-cont-group .features-box .features-exp dl {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    padding: 2rem;
    text-align: left
}

.sub-cont-group .features-box .features-exp dl dt {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.sub-cont-group .features-box .features-exp dl dd {
    font-size: 1rem;
    line-height: 1.5rem;
    padding-top: .5rem
}

.sub-cont-group .features-box .features-exp dl dd b {
    font-size: inherit;
    font-weight: 700;
    line-height: inherit
}

.sub-cont-group.hybrid-effect .sub-area {
    max-width: 1650px!important
}

.sub-cont-group.hybrid-effect .effect-box {
    align-items: center;
    background: #f6faff;
    border-radius: 60px;
    -moz-column-gap: 6rem;
    column-gap: 6rem;
    display: flex;
    justify-content: center;
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 3rem;
    width: 100%
}

.sub-cont-group.hybrid-effect .effect-box * {
    
}

.sub-cont-group.hybrid-effect .effect-box img {
    max-width: 700px;
    min-width: 500px;
    width: 50%
}

.sub-cont-group.hybrid-effect .effect-box .effect-exp {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
    row-gap: 2rem
}

.sub-cont-group.hybrid-effect .effect-box .effect-exp dl {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 9999px;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem;
    text-align: left
}

.sub-cont-group.hybrid-effect .effect-box .effect-exp dl dt {
    align-items: center;
    -moz-column-gap: .625rem;
    column-gap: .625rem;
    display: flex;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    padding-bottom: .5rem
}

.sub-cont-group.hybrid-effect .effect-box .effect-exp dl dt .material-symbols-outlined {
    color: #413ef6;
    font-size: 28px;
    font-variation-settings: "FILL" 1
}

.sub-cont-group.hybrid-effect .effect-box .effect-exp dl dd {
    font-size: 1rem;
    line-height: 1.5rem;
    padding-left: 2.5rem
}

.sub-cont-group.hybrid-effect .effect-box .effect-exp dl dd b {
    font-size: inherit;
    font-weight: 700;
    line-height: inherit
}

.sub-cont-group .mobile-br {
    display: inline
}

@media(min-width: 769px) and (max-width:1279px) {
    .sub-visual-bnr.naverworks.event {
        background-position:-230px
    }

    .sub-visual-bnr .sub-visual-img {
        display: none
    }

    .new-bnr .sub-visual-img {
        display: block!important
    }

    .sub-cont-group.server-info .sub-area {
        background: unset
    }

    .sub-cont-group .sub-area {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .sub-cont-group .sub-area .hc-introduce {
        position: relative;
        width: 66.666667%
    }

    .sub-cont-group .sub-area .sub-area-bottom .merit {
        justify-content: center
    }

    .sub-cont-group .sub-area .sub-area-bottom .merit li {
        width: 45%
    }

    .sub-cont-group .sub-area .sub-area-bottom .merit li h4 span {
        display: none
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features {
        flex-wrap: wrap;
        row-gap: 2rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features.db li {
        width: 18%!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .merit li {
        padding: 2rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .merit li h4 .mobi-arrow {
        float: right
    }

    .sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr img:last-child {
        display: none
    }

    .sub-cont-group .sub-area .sub-area-bottom .success-case.int .list-top {
        flex-direction: column;
        min-height: 136px
    }

    .sub-cont-group .sub-area .sub-area-bottom .success-case.int .list-top h3 {
        padding-top: .5rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .success-case.int .list-top img {
        height: unset!important;
        width: 50px
    }

    .sub-cont-group .sub-area .sub-area-bottom .ssl-info .main-features li {
        width: unset!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-jp {
        flex-direction: column;
        gap: 2.5rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-jp ul,.sub-cont-group .sub-area .sub-area-bottom .int-jp ul li {
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-jp ul li:nth-child(2n) {
        margin-bottom: 1rem;
        margin-top: 1rem
    }

    .sub-cont-group.appguard-check .sub-area-bottom>img {
        display: none
    }

    .sub-cont-group.micro-fn .primary-box {
        flex-wrap: wrap
    }

    .sub-cont-group.effect {
        background-size: contain;
        background: linear-gradient(45deg,#e0e7ff,#4b60a8);
        padding-bottom: 2.5rem;
        padding-top: 2.5rem;
        position: relative;
        text-align: center;
        width: 100%
    }

    .sub-cont-group.effect .sub-area {
        --tw-bg-opacity: 1;
        --tw-bg-opacity: 0.85;
        background-color: rgb(255 255 255/var(--tw-bg-opacity));
        display: block;
        padding-bottom: 2rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 2rem;
        width: 66.666667%
    }

    .sub-cont-group.effect .sub-area .title {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.75rem;
        
    }

    .sub-cont-group.effect .sub-area ul {
        margin-left: 0
    }

    .sub-cont-group.effect .sub-area ul li {
        counter-increment: list-number;
        padding-bottom: .5rem;
        padding-left: 0;
        padding-top: .5rem
    }

    .sub-cont-group.effect .sub-area ul li p.sub-tit {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .sub-cont-group.effect .sub-area ul li p.exp {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .sub-cont-group.partner-service {
        background-position-x: 104%
    }

    .sub-cont-group .scroll-text {
        display: none
    }

    .sub-cont-group .prod-features {
        grid-template-columns: 1fr!important
    }

    .sub-cont-group .prod-features li {
        padding-bottom: 1.5rem!important;
        padding-top: 1.5rem!important
    }

    .sub-cont-group .prod-features li .box-title {
        margin-bottom: .5rem!important
    }

    .sub-cont-group.about-hybrid ul li {
        gap: 1rem!important;
        grid-template-columns: repeat(3,minmax(0,1fr))!important;
        margin-bottom: 1rem!important
    }

    .sub-cont-group.about-hybrid ul li dl {
        padding: 1.5rem!important
    }

    .sub-cont-group.need-hybrid .need-list {
        gap: 1.5rem
    }

    .sub-cont-group.need-hybrid .need-list dl {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .sub-cont-group.need-hybrid .need-list dl dt {
        -moz-column-gap: 1rem;
        column-gap: 1rem;
        margin-bottom: 1rem
    }

    .sub-cont-group.need-hybrid .need-list dl dt div {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .sub-cont-group.need-hybrid .need-list dl dt img {
        width: 45px
    }

    .sub-cont-group.need-hybrid .need-list dl dd {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .sub-cont-group .scenario-wrap .scen-left .tab-item {
        padding-bottom: 1rem!important;
        padding-top: 1rem!important
    }

    .sub-cont-group .scenario-wrap .scen-right {
        padding: 2rem
    }

    .sub-cont-group .scenario-wrap .scen-right .scen-title {
        font-size: 1.5rem!important;
        line-height: 2rem!important;
        padding-bottom: 1rem!important
    }

    .sub-cont-group .scenario-wrap .scen-right .box-exp {
        font-size: 1rem!important;
        line-height: 1.5rem!important
    }

    .sub-cont-group .features-box {
        padding: 1rem!important
    }

    .sub-cont-group .features-box .features-exp {
        row-gap: 1rem!important
    }

    .sub-cont-group .features-box .features-exp dl {
        padding: 1.5rem!important
    }

    .sub-cont-group .features-box .features-exp dl dt {
        font-size: 1.25rem!important;
        line-height: 1.75rem!important
    }

    .sub-cont-group .features-box .features-exp dl dd {
        font-size: 1rem!important;
        line-height: 1.5rem!important
    }

    .sub-cont-group.hybrid-effect .effect-box {
        -moz-column-gap: 0;
        column-gap: 0
    }

    .sub-cont-group .mobile-br {
        display: none
    }
}

@media (max-width: 1040px) {
    .effect-box {
        flex-direction:column!important
    }
}

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

    .sub-cont-group .sub-area {
        padding-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2.5rem
    }

    .sub-cont-group .sub-area .sub-area-top {
        margin-bottom: 1.5rem
    }

    .sub-cont-group .sub-area .sub-area-top .title {
        font-size: 1.25rem;
        line-height: 1.75rem;
        text-align: center
    }

    .sub-cont-group .sub-area .sub-area-top .title-exp {
        padding-top: .5rem
    }

    .sub-cont-group .sub-area .sub-area-top .title-exp br {
        display: none
    }

    .sub-cont-group .sub-area .hc-introduce {
        --tw-bg-opacity: 1;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        background-color: rgb(249 250 251/var(--tw-bg-opacity));
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
        padding-bottom: 5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        padding-top: 5rem;
        position: relative;
        top: 0;
        transform: unset;
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .product-sort ul {
        display: block
    }

    .sub-cont-group .sub-area .sub-area-bottom .product-sort ul li {
        font-size: .875rem;
        line-height: 1.25rem;
        margin-bottom: .25rem;
        margin-top: .25rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .relation-service {
        display: block
    }

    .sub-cont-group .sub-area .sub-area-bottom .relation-service li {
        margin-bottom: 1rem;
        margin-inline-start:auto;max-width: unset;
        padding: 0;
        width: 80%
    }

    .sub-cont-group .sub-area .sub-area-bottom .relation-service li:last-child {
        margin-bottom: 0
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features {
        display: block
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features li {
        display: inline-block;
        margin-bottom: .5rem;
        margin-top: .5rem;
        width: 40%
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features li p {
        text-align: center
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features li p.title {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .main-features li p.sub-exp {
        font-size: .875rem;
        line-height: 1.25rem;
        
    }

    .sub-cont-group .sub-area .sub-area-bottom .merit,.sub-cont-group .sub-area .sub-area-bottom .meritHalf {
        --tw-border-opacity: 1;
        border-color: rgb(31 41 55/var(--tw-border-opacity));
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .sub-cont-group .sub-area .sub-area-bottom .meritHalf li,.sub-cont-group .sub-area .sub-area-bottom .merit li {
        padding: .75rem;
        width: 90%
    }

    .sub-cont-group .sub-area .sub-area-bottom .meritHalf li h4,.sub-cont-group .sub-area .sub-area-bottom .merit li h4 {
        --tw-border-opacity: 1;
        border-bottom-width: 1px;
        border-color: rgb(156 163 175/var(--tw-border-opacity));
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5rem;
        margin-bottom: 1.25rem;
        padding-bottom: .75rem;
        position: relative
    }

    .sub-cont-group .sub-area .sub-area-bottom .meritHalf li h4 .mobi-arrow,.sub-cont-group .sub-area .sub-area-bottom .merit li h4 .mobi-arrow {
        position: absolute;
        right: .5rem;
        transition: .3s ease
    }

    .sub-cont-group .sub-area .sub-area-bottom .meritHalf li h4.on,.sub-cont-group .sub-area .sub-area-bottom .merit li h4.on {
        --tw-text-opacity: 1;
        color: rgb(37 99 235/var(--tw-text-opacity))
    }

    .sub-cont-group .sub-area .sub-area-bottom .meritHalf li h4.on .mobi-arrow,.sub-cont-group .sub-area .sub-area-bottom .merit li h4.on .mobi-arrow {
        transform: rotate(180deg);
        transition: .3s ease
    }

    .sub-cont-group .sub-area .sub-area-bottom .meritHalf li p,.sub-cont-group .sub-area .sub-area-bottom .merit li p {
        display: none
    }

    .sub-cont-group .sub-area .sub-area-bottom .table-wrap {
        overflow-y: auto
    }

    .sub-cont-group .sub-area .sub-area-bottom .table-wrap table {
        border-radius: 0;
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .table-wrap table.msoffice-table {
        width: 1000px!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .table-wrap table.managed {
        width: 800px!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .table-wrap table.securityTable {
        width: 600px!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .china-info {
        display: block
    }

    .sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box {
        margin-left: auto;
        margin-right: auto;
        width: 80%
    }

    .sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box .china-info-exp {
        height: -moz-fit-content;
        height: fit-content
    }

    .sub-cont-group .sub-area .sub-area-bottom .china-info .china-info-box+.china-info-box {
        margin-top: 1rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .config-two-img {
        flex-direction: column
    }

    .sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr {
        align-items: center!important;
        flex-direction: column!important;
        height: unset!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr img:last-child {
        display: none
    }

    .sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr p {
        font-size: 1.125rem!important;
        font-weight: 700!important;
        line-height: 1.75rem!important;
        !important
    }

    .sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr .inquiry-cont {
        margin-bottom: .5rem;
        order: 1
    }

    .sub-cont-group .sub-area .sub-area-bottom .inquiry-bnr .inquiry-ob {
        order: 2
    }

    .sub-cont-group .sub-area .sub-area-bottom .success-case .case-list {
        flex-direction: column;
        gap: 1rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .success-case .case-list li {
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .idc-current {
        gap: 1.5rem;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .sub-cont-group .sub-area .sub-area-bottom .idc-current dl {
        display: flex
    }

    .sub-cont-group .sub-area .sub-area-bottom .idc-current dl dt {
        width: 120px
    }

    .sub-cont-group .sub-area .sub-area-bottom .idc-current img {
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .idc-current .idc-title br {
        display: none
    }

    .sub-cont-group .sub-area .sub-area-bottom .colo-dividing {
        margin-bottom: 0!important;
        margin-top: 3rem!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .ssl-info .main-features {
        display: grid!important;
        grid-template-columns: repeat(2,minmax(0,1fr))!important;
        margin-top: 1rem!important
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-worldmap {
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-worldmap button {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-jp {
        flex-direction: column;
        gap: 2rem
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-jp ul {
        width: 100%
    }

    .sub-cont-group .sub-area .sub-area-bottom .int-jp ul li {
        padding-left: 2rem!important
    }

    .sub-cont-group.server-info {
        height: -moz-fit-content!important;
        height: fit-content!important;
        position: relative
    }

    .sub-cont-group.server-info .sub-area {
        background: unset
    }

    .sub-cont-group.server-info .sub-area .hc-introduce p span {
        font-size: inherit
    }

    .sub-cont-group .caution-info {
        --tw-text-opacity: 1;
        color: rgb(107 114 128/var(--tw-text-opacity));
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 1rem;
        text-align: left
    }

    .sub-cont-group.features .main-features {
        display: grid!important;
        grid-template-columns: 2fr 2fr!important;
        row-gap: 1rem
    }

    .sub-cont-group.features .main-features li {
        margin: auto
    }

    .sub-cont-group.features .main-features li img {
        width: 70px
    }

    .sub-cont-group.effect {
        background-size: contain;
        background: linear-gradient(45deg,#e0e7ff,#4b60a8);
        padding-bottom: 2.5rem;
        padding-top: 2.5rem;
        position: relative;
        text-align: center;
        width: 100%
    }

    .sub-cont-group.effect .sub-area {
        --tw-bg-opacity: 1;
        --tw-bg-opacity: 0.85;
        background-color: rgb(255 255 255/var(--tw-bg-opacity));
        display: block;
        padding-bottom: 2rem;
        padding-left: .75rem;
        padding-right: .75rem;
        padding-top: 2rem;
        width: 80%
    }

    .sub-cont-group.effect .sub-area .title {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.75rem;
        
    }

    .sub-cont-group.effect .sub-area ul {
        margin-left: 0
    }

    .sub-cont-group.effect .sub-area ul li {
        counter-increment: list-number;
        padding-bottom: .5rem;
        padding-left: 0;
        padding-top: .5rem
    }

    .sub-cont-group.effect .sub-area ul li p.sub-tit {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .sub-cont-group.effect .sub-area ul li p.exp {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .sub-cont-group.appguard-check .sub-area-bottom>img {
        display: none
    }

    .sub-cont-group.appguard-check .sub-area-bottom .check-list-area .check-list li {
        min-width: unset;
        width: 100%
    }

    .sub-cont-group.micro-fn .primary-box {
        flex-wrap: wrap
    }

    .sub-cont-group.partner-worry section {
        margin-bottom: 2.5rem
    }

    .sub-cont-group.partner-worry section:last-child {
        margin-bottom: 0
    }

    .sub-cont-group.partner-worry section {
        flex-direction: column;
        row-gap: 1.5rem
    }

    .sub-cont-group.partner-worry section.worry-bottom {
        flex-direction: column-reverse;
        text-align: left
    }

    .sub-cont-group.partner-service {
        background: #f3f4f6
    }

    .sub-cont-group.partner-service .sub-area-bottom {
        flex-direction: column-reverse;
        row-gap: 1.5rem
    }

    .sub-cont-group.partner-service .sub-area-bottom>div {
        width: 100%
    }

    .sub-cont-group.db-prod .primary-box .box-title {
        font-size: 1.125rem!important;
        height: unset!important;
        line-height: 1.75rem!important;
        margin-bottom: .5rem!important
    }

    .sub-cont-group.db-prod .config-list {
        overflow: auto!important
    }

    .sub-cont-group.db-prod .config-list li {
        margin-left: auto;
        margin-right: auto;
        width: 680px!important
    }

    .sub-cont-group .scroll-text {
        --tw-text-opacity: 1!important;
        color: rgb(107 114 128/var(--tw-text-opacity))!important;
        display: block!important;
        font-size: .875rem!important;
        line-height: 1.25rem!important;
        padding-bottom: .5rem!important;
        text-align: left!important
    }

    .sub-cont-group .prod-features {
        gap: 1rem!important;
        grid-template-columns: 1fr!important
    }

    .sub-cont-group .prod-features img {
        height: 70px!important;
        width: 70px!important
    }

    .sub-cont-group .prod-features li {
        padding-bottom: 1rem!important;
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important;
        padding-top: 1rem!important
    }

    .sub-cont-group .prod-features li .box-title {
        margin-bottom: 0!important
    }

    .sub-cont-group .prod-features li .box-cont {
        display: none!important
    }

    .sub-cont-group .prod-imgbox {
        overflow-x: scroll
    }

    .sub-cont-group .prod-imgbox div {
        width: 680px!important
    }

    .sub-cont-group.about-hybrid li {
        gap: 1rem!important;
        grid-template-columns: repeat(1,minmax(0,1fr))!important
    }

    .sub-cont-group.about-hybrid li:first-child {
        margin-bottom: 1rem!important
    }

    .sub-cont-group.about-hybrid dl {
        align-items: center!important;
        -moz-column-gap: 2rem!important;
        column-gap: 2rem!important;
        flex-direction: row!important;
        height: unset!important;
        padding-bottom: 1.25rem!important;
        padding-left: 1.25rem!important;
        padding-right: 1.25rem!important;
        padding-top: 1.25rem!important
    }

    .sub-cont-group.about-hybrid dl dt span:first-of-type {
        font-size: 1.125rem!important;
        line-height: 1.75rem!important
    }

    .sub-cont-group.about-hybrid dl dt span:last-of-type {
        font-size: 1rem!important;
        line-height: 1.5rem!important;
        padding-top: 0!important
    }

    .sub-cont-group.about-hybrid dl dd {
        margin-top: 0!important;
        max-width: 70px!important;
        width: 30%!important
    }

    .sub-cont-group.need-hybrid .need-list {
        gap: 1rem!important
    }

    .sub-cont-group.need-hybrid .need-list dl {
        min-height: unset!important;
        padding-bottom: 2rem!important;
        padding-top: 2rem!important
    }

    .sub-cont-group.need-hybrid .need-list dl dt {
        -moz-column-gap: 1rem!important;
        column-gap: 1rem!important;
        margin-bottom: .5rem!important
    }

    .sub-cont-group.need-hybrid .need-list dl dt,.sub-cont-group.need-hybrid .need-list dl dt div {
        font-size: 1.25rem!important;
        line-height: 1.75rem!important
    }

    .sub-cont-group.need-hybrid .need-list dl dt img {
        width: 45px
    }

    .sub-cont-group.need-hybrid .need-list dl dd,.sub-cont-group.need-hybrid .recs p,.sub-cont-group.need-hybrid .recs p span {
        font-size: 1rem!important;
        line-height: 1.5rem!important
    }

    .sub-cont-group .scenario-wrap {
        flex-direction: column!important;
        gap: 1.5rem!important;
        margin-top: 0!important
    }

    .sub-cont-group .scenario-wrap .scen-left {
        width: 100%!important
    }

    .sub-cont-group .scenario-wrap .scen-left ul .tab-item {
        font-size: 1.125rem!important;
        padding-bottom: .75rem!important;
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important;
        padding-top: .75rem!important
    }

    .sub-cont-group .scenario-wrap .scen-right {
        padding: 2rem!important;
        width: 100%!important
    }

    .sub-cont-group .scenario-wrap .scen-right .scen-box .scen-title {
        font-size: 1.25rem!important;
        line-height: 1.75rem!important;
        padding-bottom: 1rem!important
    }

    .sub-cont-group .scenario-wrap .scen-right .scen-box .box-exp {
        font-size: 1rem!important;
        line-height: 1.5rem!important
    }

    .sub-cont-group .features-box {
        padding: 1rem!important;
        width: 100%!important
    }

    .sub-cont-group .features-box img:first-of-type {
        display: none
    }

    .sub-cont-group .features-box img:last-of-type {
        display: block
    }

    .sub-cont-group .features-box .features-exp {
        row-gap: 1rem!important
    }

    .sub-cont-group .features-box .features-exp dl {
        padding: 1.5rem!important
    }

    .sub-cont-group .features-box .features-exp dl dt {
        font-size: 1.25rem!important;
        line-height: 1.75rem!important
    }

    .sub-cont-group .features-box .features-exp dl dd {
        font-size: 1rem!important;
        line-height: 1.5rem!important
    }

    .sub-cont-group.hybrid-effect .effect-box {
        border-radius: 1rem!important;
        flex-direction: column!important;
        padding-bottom: 1.5rem!important;
        padding-left: 1rem!important;
        padding-right: 1rem!important;
        padding-top: 1.5rem!important
    }

    .sub-cont-group.hybrid-effect .effect-box img {
        max-width: unset!important;
        min-width: unset!important;
        width: 100%!important
    }

    .sub-cont-group.hybrid-effect .effect-box .effect-exp {
        row-gap: 1rem!important
    }

    .sub-cont-group.hybrid-effect .effect-box .effect-exp dl {
        border-radius: 1rem!important;
        padding: 1rem!important
    }

    .sub-cont-group.hybrid-effect .effect-box .effect-exp dl dt {
        font-size: 1.25rem!important;
        line-height: 1.75rem!important
    }

    .sub-cont-group.hybrid-effect .effect-box .effect-exp dl dd {
        padding-left: 1.5rem!important
    }

    .sub-cont-group .mobile-br {
        display: none
    }

    .new-bnr .sub-visual-img {
        display: block!important
    }

    .new-bnr .dbcipher {
        background: #4a4b4d!important
    }

    .new-bnr .dbAC {
        background: #131a24!important
    }

    .new-bnr .hightpower,.new-bnr .Idctransfer {
        background: #141d37!important
    }

    .new-bnr .colocation {
        background: #070c10!important
    }

    .new-bnr .international {
        background: #0e1017!important
    }

    .new-bnr .ssl {
        background: #081110!important
    }

    .new-bnr .vpn {
        background: #020202!important
    }

    .sub-visual-bnr {
        height: -moz-fit-content;
        height: fit-content
    }

    .sub-visual-bnr .sub-visual-txt {
        padding-bottom: 2rem;
        padding-top: 2rem;
        text-align: left;
        width: 100vw
    }

    .sub-visual-bnr .sub-visual-txt .now-page {
        display: none;
        margin-bottom: .25rem
    }

    .sub-visual-bnr .sub-visual-txt .service-title {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 2rem
    }

    .sub-visual-bnr .sub-visual-txt .service-title span {
        font-size: inherit;
        line-height: inherit
    }

    .sub-visual-bnr .sub-visual-img,.sub-visual-bnr .sub-visual-txt p.service-ex {
        display: none
    }

    .sub-visual-bnr .sub-visual-img {
        right: -240px;
        top: 30%
    }

    .sub-visual-bnr.naverworks.event {
        background-position: 0;
        height: 330px
    }

    .sub-container .inquiry-area {
        --tw-bg-opacity: 1;
        background-color: rgb(243 244 246/var(--tw-bg-opacity));
        margin-left: auto;
        margin-right: auto;
        width: 95%
    }

    & .mobile-img {
        overflow: auto
    }

    & .mobile-img>div {
        width: 680px!important
    }
}

.main-wrap {
    width: 100%
}

.main-wrap .swiper {
    height: 568px;
    margin-top: 70px;
    overflow: hidden;
    position: relative
}

.main-wrap .swiper .swiper-wrapper {
    height: 100%
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp {
    display: block;
    height: 100%;
    width: 100%
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    position: relative;
    width: 100%
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap {
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    z-index: 10
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-title {
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
    line-height: 5rem;
    margin-bottom: 2rem
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-exp {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 4rem
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .badge {
    --tw-text-opacity: 1;
    background: #2189d3;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-weight: 700;
    left: 0;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    position: absolute;
    top: -3rem
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-img {
    border-radius: 1rem;
    overflow: hidden;
    position: absolute;
    right: -10rem;
    top: 50%;
    transform: translateY(-46%)
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.console {
    background: radial-gradient(#8590f845,#f9f9ff)
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.naverworks {
    background: linear-gradient(113deg,#caf0fa 8.44%,#d0fbc7 103.76%)
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.naverworks .visual-title {
    color: #00c85f;
    font-size: 64px
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.naverworks .visual-wrap .visual-text-wrap .visual-exp {
    font-size: 3.75rem;
    line-height: 1
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.naverworks .visual-wrap .visual-text-wrap .visual-exp b {
    font-size: inherit;
    vertical-align: baseline
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.kuipernet {
    background: url(../img/bnr-main/kuipernet-bg.png) no-repeat 100%,radial-gradient(#d9e3fe,#d9e3fe)
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.nowserver {
    background: url(../img/bnr-main/nowserver-bg.png) 50%/cover
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.serverhosting {
    background: url(../img/bnr-main/serverhosting-bg.jpg) no-repeat 100% #14161c
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.serverhosting p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.cloud {
    background: url(../img/bnr-main/cloud-bg.jpg.png) no-repeat 100% #02061b
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.cloud p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.reporting {
    background: url(../img/bnr-main/reporting-bg.jpg) no-repeat 100% #0c1422
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.reporting p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.console2 {
    background: url(../img/bnr-main/console-bg.jpg) no-repeat 100% #0b0d25
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.console2 p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.new-domain {
    background: url(../img/bnr-main/new-domain-bg-illu.jpg.png) no-repeat 90% #f6f4ed
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.dashboard {
    background: url(../img/bnr-main/dashboard-bg.jpg) no-repeat 100% #0c1821
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.dashboard p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.vpn {
    background: url(../img/bnr-main/vpn-bg.jpg) no-repeat 100% #0c1821
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.vpn p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybridCloud {
    background: url(../img/main-bnr/hybrid.png) no-repeat 100% #0c1821
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybridCloud p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybrid-promotion {
    background: url(../img/main-bnr/hybrid-promotion.png.jpeg) no-repeat 100%,linear-gradient(180deg,#000,#00247f)
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybrid-promotion p {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybrid-promotion p b {
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit
}

.main-wrap .cont-area {
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    width: 1280px
}

.main-wrap .cont-area,.main-wrap .cont-area .error {
    position: relative
}

.main-wrap .cont-area .error {
    background: url(../img/error.png) 50% no-repeat;
    background-size: 100%;
    display: block;
    height: 32rem;
    margin: auto;
    text-align: center;
    width: 32rem
}

.main-wrap .cont-area .error-btn {
    margin-top: 1rem;
    text-align: center;
    width: 100%
}

.main-wrap .cont-area .error-btn a {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1.75rem
}

.main-wrap .cont-area .error-btn a:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.main-wrap .cont-area .error-btn a span {
    color: inherit
}

.main-wrap .cont-area .main-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    margin-bottom: 2.5rem
}

.main-wrap .cont-area.career-cont {
    padding: 50px 0
}

.main-wrap .cont-area.career-cont .career {
    display: flex;
    justify-content: space-around;
    padding-bottom: 1.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.5rem
}

.main-wrap .cont-area.career-cont .career li {
    text-align: center
}

.main-wrap .cont-area.career-cont .career li .counter {
    color: var(--primary);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    padding-bottom: .75rem;
    text-align: center
}

.main-wrap .cont-area.career-cont .career li .counter-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: center
}

.main-wrap .cont-area .main-onestop {
    align-content: space-evenly;
    -moz-column-gap: 42px;
    column-gap: 42px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 40px
}

.main-wrap .cont-area .main-onestop .main-onestop-box {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175/var(--tw-bg-opacity));
    background-position-x: calc(100% - 20px)!important;
    border-color: var(--secondary);
    border-radius: 1rem;
    border-width: 1px;
    display: inline-block;
    height: 10rem;
    height: 298px;
    min-width: 288px;
    overflow: hidden;
    position: relative
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap {
    display: block;
    height: 100%;
    position: relative;
    width: 100%
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top {
    display: block;
    height: 100%;
    left: 0;
    opacity: 1;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top p {
    float: left;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top i {
    --tw-rotate: 90deg;
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    float: right;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-animate-box {
    background-color: #363b55;
    display: block;
    height: 100%;
    left: 0;
    opacity: .9;
    position: absolute;
    top: 296px;
    width: 100%
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    display: block;
    height: 100%;
    left: 0;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    position: absolute;
    top: 296px;
    width: 100%
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-info {
    color: inherit;
    font-weight: 300;
    padding-right: .75rem;
    position: absolute;
    top: 4.25rem;

}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-info>div {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 15px
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-info .mobile {
    display: none
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link {
    bottom: 0;
    min-height: 85px;
    position: absolute;
    z-index: 10
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link button {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    color: var(--text);
    font-size: .875rem;
    line-height: 1.25rem;
    padding-left: .75rem;
    padding-right: .75rem
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link button:first-child {
    margin-right: .5rem
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity))
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link button span {
    color: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .625rem
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link button span i {
    color: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-left: .25rem
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap:hover .onestop-wrap-top p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-weight: 500;
    z-index: 10
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap:hover .onestop-wrap-top i {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap:hover .onestop-animate-box {
    top: 0;
    transition: .3s ease
}

.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap:hover .onestop-wrap-bottom {
    top: 0;
    transition: .5s ease;
    transition-delay: .2s
}

.main-wrap .cont-area .main-onestop .main-onestop-box.consulting {
    background: url(../img/main/one-stop-01.png) no-repeat 80px 120px
}

.main-wrap .cont-area .main-onestop .main-onestop-box.solution {
    background: url(../img/main/one-stop-02.png) no-repeat 64px 120px
}

.main-wrap .cont-area .main-onestop .main-onestop-box.security {
    background: url(../img/main/one-stop-03.png) no-repeat 80px 120px
}

.main-wrap .cont-area .main-onestop .main-onestop-box.managed {
    background: url(../img/main/one-stop-04.png) no-repeat 54px 124px
}

.main-wrap .cont-area .customer-case .customer-case-cont {
    display: none
}

.main-wrap .cont-area .customer-case .customer-case-cont.on {
    display: flex
}

.main-wrap .cont-area .customer-case .customer-case-cont>div {
    width: 50%
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-left {
    height: 404px;
    margin-right: 2.5rem
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-left img {
    border-bottom-right-radius: 64px;
    border-top-left-radius: 64px;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right {
    padding: 3rem
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .case-cont-title {
    color: var(--primary);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
    margin-bottom: 2rem
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .case-cont-info {
    font-size: 1.125rem;
    height: 6rem;
    line-height: 1.75rem
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: .75rem;
    margin-top: 4rem
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab li {
    margin-right: 0;
    padding-bottom: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: 0
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab li img {
    --tw-grayscale: grayscale(100%);
    cursor: pointer;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    height: 4rem;
    -o-object-fit: contain;
    object-fit: contain;
    opacity: .8;
    width: 9rem
}

.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab li.on img,.main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab li:hover img {
    --tw-grayscale: grayscale(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    opacity: 1
}

.main-wrap .main-tab ul {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    row-gap: .75rem
}

.main-wrap .main-tab ul li:not(.nolist) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: var(--text-sub);
    border-radius: 9999px;
    border-width: 1px;
    color: var(--text-sub);
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-right: .5rem;
    padding-bottom: .25rem;
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .25rem
}

.main-wrap .main-tab ul li:not(.nolist).on {
    border-color: var(--primary);
    color: var(--primary)
}

.main-wrap .main-tab ul li.nolist {
    display: none
}

.main-wrap .main-tab ul a span {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    margin-left: .5rem
}

.main-wrap .main-tab ul a span i {
    color: inherit;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-left: .125rem;
    margin-top: -.125rem
}

.main-wrap .prd-area {
    display: none;
    margin-top: 2.5rem
}

.main-wrap .prd-area.on {
    display: block
}

.main-wrap .prd-area .main-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly
}

.main-wrap .prd-area .main-features li {
    margin-left: 1rem;
    margin-right: 1rem;
    width: 25%
}

.main-wrap .prd-area .main-features li p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: center
}

.main-wrap .prd-area .main-features li p.img {
    margin-bottom: .75rem;
    text-align: center
}

.main-wrap .prd-area .main-features li p.img img {
    display: inline-block
}

.main-wrap .prd-area .main-features li p.title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: .75rem;
    
}

.main-wrap .prd-area .main-features li p.sub-exp {
    --tw-text-opacity: 1;
    color: rgb(229 231 235/var(--tw-text-opacity));
    margin-top: .75rem
}

.main-wrap .prd-area .main-strong {
    padding: 2.5rem
}

.main-wrap .prd-area .main-strong li {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity));
    border-top-width: 1px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    width: 100%
}

.main-wrap .prd-area .main-strong li p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: left
}

.main-wrap .prd-area .main-strong li p.img {
    margin-bottom: .75rem;
    text-align: center
}

.main-wrap .prd-area .main-strong li p.img img {
    display: inline-block
}

.main-wrap .prd-area .main-strong li p.title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: .75rem;
    
}

.main-wrap .prd-area .main-strong li p.sub-exp {
    --tw-text-opacity: 1;
    color: rgb(229 231 235/var(--tw-text-opacity));
    margin-top: .75rem
}

.main-wrap .prd-area .main-strong li:last-child {
    border-bottom-width: 1px
}

.main-wrap .prd-area .product-list {
    margin-top: 4rem;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content
}

.main-wrap .prd-area .product-list li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    border-width: 1px;
    display: inline-block;
    height: -moz-fit-content;
    height: fit-content;
    margin-left: .75rem;
    margin-right: .75rem;
    padding: 1.5rem;
    position: relative;
    transition: .3s ease-in;
    width: 288px
}

.main-wrap .prd-area .product-list li .prd-top {
    border-bottom-width: 1px;
    padding-bottom: 1.5rem
}

.main-wrap .prd-area .product-list li .prd-top .model {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.main-wrap .prd-area .product-list li .prd-top .model span {
    font-size: .75rem;
    line-height: 1rem;
    line-height: inherit;
    margin-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: capitalize
}

.main-wrap .prd-area .product-list li .prd-top .model span.dell {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .prd-top .model span.dell:before {
    content: "dell"
}

.main-wrap .prd-area .product-list li .prd-top .model span.hp {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(96 165 250/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .prd-top .model span.hp:before {
    content: "HP"
}

.main-wrap .prd-area .product-list li .prd-top .model span.lenovo {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .prd-top .model span.lenovo:before {
    content: "Lenovo"
}

.main-wrap .prd-area .product-list li .prd-top .model span.tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .prd-top .price-area {
    margin-top: .5rem;
    min-height: 54px
}

.main-wrap .prd-area .product-list li .prd-top .price-area .list-price {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-right: .25rem;
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through;
    vertical-align: bottom
}

.main-wrap .prd-area .product-list li .prd-top .price-area .list-price:after {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.main-wrap .prd-area .product-list li .prd-top .price-area .price {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.main-wrap .prd-area .product-list li .prd-top .price-area .price:after {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    vertical-align: text-bottom
}

.main-wrap .prd-area .product-list li .prd-top .price-area .price .monthly {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-right: .5rem;
    vertical-align: text-bottom
}

.main-wrap .prd-area .product-list li .prd-top .price-area .price-after {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-weight: 300;
    margin-top: .125rem
}

.main-wrap .prd-area .product-list li .prd-top .price-area .text {
    display: inline-block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.main-wrap .prd-area .product-list li .prd-spec {
    padding-bottom: 1.25rem;
    padding-left: .375rem;
    padding-right: .375rem;
    padding-top: 1.25rem
}

.main-wrap .prd-area .product-list li .prd-spec p {
    margin-bottom: .75rem
}

.main-wrap .prd-area .product-list li .prd-spec p span {
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    width: 100%;
    
}

.main-wrap .prd-area .product-list li .prd-spec p span:first-child {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-weight: 500;
    text-align: left;
    text-transform: uppercase
}

.main-wrap .prd-area .product-list li .prd-spec p span:nth-child(2) {
    font-weight: 500
}

.main-wrap .prd-area .product-list li .prd-spec p span i {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    margin-right: .5rem
}

.main-wrap .prd-area .product-list li .prd-spec.sophos p {
    padding-left: 1rem;
    position: relative
}

.main-wrap .prd-area .product-list li .prd-spec.sophos p:before {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250/var(--tw-bg-opacity));
    border-radius: 9999px;
    content: "";
    height: .5rem;
    left: 0;
    position: absolute;
    top: .375rem;
    width: .5rem
}

.main-wrap .prd-area .product-list li button {
    margin-left: auto;
    margin-right: auto
}

.main-wrap .prd-area .product-list li:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    transform: translateY(-16px);
    transition: .3s ease-out
}

.main-wrap .prd-area .product-list li .badge {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem
}

.main-wrap .prd-area .product-list li .badge p {
    display: inline-block;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .25rem;
    text-transform: uppercase
}

.main-wrap .prd-area .product-list li .badge p.best {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .badge p.best:before {
    content: "best"
}

.main-wrap .prd-area .product-list li .badge p.event {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    animation: event .8s ease-in-out infinite;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .badge p.event:before {
    content: "event"
}

.main-wrap .prd-area .product-list li .badge p.low {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .product-list li .badge p.low:before {
    content: "국내 최저가 보장"
}

.main-wrap .prd-area .product-list li.prd-event {
    border-color: var(--primary);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: relative
}

.main-wrap .prd-area .product-list li.prd-event:before {
    --tw-text-opacity: 1;
    background: var(--primary);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: "EVENT";
    font-size: 1rem;
    font-weight: 700;
    left: -1px;
    line-height: 1.5rem;
    padding-bottom: .5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .5rem;
    position: absolute;
    top: -33px;
    width: 288.5px
}

.main-wrap .prd-area .ssl-list {
    text-align: left
}

.main-wrap .prd-area .ssl-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    margin-bottom: 1.25rem;
    margin-left: .5rem;
    margin-right: .5rem;
    padding: 1rem;
    position: relative;
    transition: .4s ease;
    width: 47%
}

.main-wrap .prd-area .ssl-list li .prd-top {
    border-bottom-width: 1px;
    padding: 1.25rem
}

.main-wrap .prd-area .ssl-list li .prd-top .model {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem
}

.main-wrap .prd-area .ssl-list li .prd-top .model span {
    font-size: .75rem;
    line-height: 1rem;
    line-height: inherit;
    margin-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: capitalize
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.dell {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.dell:before {
    content: "dell"
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.hp {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(96 165 250/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.hp:before {
    content: "HP"
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.lenovo {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.lenovo:before {
    content: "Lenovo"
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .ssl-list li .prd-top .model span.antiserver {
    color: #333;
    font-size: 1.5rem!important;
    font-weight: 700;
    margin-left: .25rem
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area {
    margin-top: .5rem
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p {
    display: inline-block
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.list-price {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-right: .25rem;
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through;
    vertical-align: bottom
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.list-price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.price {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.date {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-left: .25rem;
    vertical-align: bottom
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.date:before {
    content: "/";
    margin-right: .25rem
}

.main-wrap .prd-area .ssl-list li .prd-top .price-area p.text {
    display: inline-block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.main-wrap .prd-area .ssl-list li .prd-spec {
    padding-bottom: 1.25rem;
    padding-left: .375rem;
    padding-right: .375rem;
    padding-top: 1.25rem
}

.main-wrap .prd-area .ssl-list li .prd-spec p {
    margin-bottom: .5rem;
    margin-top: .5rem
}

.main-wrap .prd-area .ssl-list li .prd-spec p span:first-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-weight: 300;
    text-align: left;
    text-transform: capitalize
}

.main-wrap .prd-area .ssl-list li .prd-spec p span:nth-child(2) {
    float: right;
    font-weight: 700
}

.main-wrap .prd-area .ssl-list li button {
    margin-left: auto;
    margin-right: auto
}

.main-wrap .prd-area .ssl-list li:hover {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    transform: translateY(-10px);
    transition: .25s ease
}

.main-wrap .prd-area .ssl-list li .badge {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem
}

.main-wrap .prd-area .ssl-list li .badge p {
    display: inline-block;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .25rem;
    text-transform: uppercase
}

.main-wrap .prd-area .ssl-list li .badge p.best {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .ssl-list li .badge p.best:before {
    content: "best"
}

.main-wrap .prd-area .ssl-list li .badge p.event {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    animation: event .8s ease-in-out infinite;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .prd-area .ssl-list li .badge p.event:before {
    content: "event"
}

.main-wrap .prd-area .ssl-list.quater li {
    width: 23.7%
}

.main-wrap .prd-area.vps .product-list li .prd-spec p span {
    color: var(--text)
}

.main-wrap .main-product {
    background: url(../img/business_section.jpg) 50% no-repeat,#333333a6;
    background-blend-mode: darken;
    background-size: 100% 100%
}

.main-wrap .main-cloud#aws {
    background: url(../img/cloud/big-figure-aws.png) 100% 0 no-repeat,url(../img/cloud/sm-figure-aws.png) 0 100% no-repeat;
    background-size: 38vw,20vw
}

.main-wrap .main-cloud#ncp {
    background: url(../img/cloud/big-figure-ncp.png) 100% 0 no-repeat,url(../img/cloud/sm-figure-ncp.png) 0 100% no-repeat;
    background-size: 38vw,20vw
}

.main-wrap .main-cloud#nhn {
    background: url(../img/cloud/big-figure-nhn.png) 100% 0 no-repeat,url(../img/cloud/sm-figure-nhn.png) -4px 103% no-repeat;
    background-size: 38vw,20vw
}

.main-wrap .main-cloud .cloud-tab {
    margin-top: 2.5rem
}

.main-wrap .main-cloud .cloud-tab li {
    border-radius: .5rem;
    cursor: pointer;
    display: inline-block;
    margin-right: .625rem;
    padding-bottom: .5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: .5rem
}

.main-wrap .main-cloud .cloud-tab li#aws {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.main-wrap .main-cloud .cloud-tab li#aws.on,.main-wrap .main-cloud .cloud-tab li#aws:hover {
    --tw-text-opacity: 1;
    background: linear-gradient(45deg,#c14659,#ff881e);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .main-cloud .cloud-tab li#ncp {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.main-wrap .main-cloud .cloud-tab li#ncp.on,.main-wrap .main-cloud .cloud-tab li#ncp:hover {
    --tw-text-opacity: 1;
    background: linear-gradient(45deg,#14d37f,#02df62);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .main-cloud .cloud-tab li#nhn {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.main-wrap .main-cloud .cloud-tab li#nhn.on,.main-wrap .main-cloud .cloud-tab li#nhn:hover {
    --tw-text-opacity: 1;
    background: linear-gradient(45deg,#2a377a,#e91f1f);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.main-wrap .main-cloud .cloudService {
    display: none
}

.main-wrap .main-list {
    display: block;
    margin-bottom: 1.5rem;
    width: 100%
}

.main-wrap .main-list li {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    height: 8rem;
    padding: 1.75rem;
    width: 24rem
}

.main-wrap .main-list li:nth-child(2n) {
    float: right
}

.main-wrap .main-list li .title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: .75rem
}

.main-wrap .partner-wrap {
    margin-top: 2rem;
    width: 100%
}

.main-wrap .partner-wrap h2 {
    margin-left: auto;
    margin-right: auto;
    width: 1280px
}

.main-wrap .partner-wrap .partner-tab {
    margin-top: 2.75rem
}

.main-wrap .partner-wrap .partner-tab ul li {
    --tw-border-opacity: 1;
    border-bottom-width: 2px;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    cursor: pointer;
    display: inline-block;
    margin-right: .75rem;
    padding-bottom: .5rem;
    padding-left: .375rem;
    padding-right: .375rem;
    padding-top: .5rem
}

.main-wrap .partner-wrap .partner-tab ul li.on,.main-wrap .partner-wrap .partner-tab ul li:hover {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.main-wrap .partner-wrap .partner-list {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.5rem;
    overflow: hidden;
    position: relative;
    width: 1280px
}

.main-wrap .partner-wrap .partner-list:before {
    background: linear-gradient(90deg,#e5e7eb,transparent);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 35
}

.main-wrap .partner-wrap .partner-list:after {
    background: linear-gradient(270deg,#e5e7eb,transparent);
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    z-index: 36
}

.main-wrap .partner-wrap .partner-list .roller {
    width: -moz-max-content;
    width: max-content
}

.main-wrap .partner-wrap .partner-list .roller .partner-enter {
    display: inline-block
}

.main-wrap .partner-wrap .partner-list .roller .partner-enter ul {
    padding-bottom: 2rem;
    width: -moz-max-content;
    width: max-content
}

.main-wrap .partner-wrap .partner-list .roller .partner-enter ul li {
    display: inline-block;
    height: 5rem;
    margin-right: -.25rem;
    text-align: center
}

.main-wrap .partner-wrap .partner-list .roller .partner-enter ul li img {
    width: 60%
}

.main-wrap .partner-wrap .partner-list .roller .partner-enter.original {
    animation: rollingleft1 40s linear 0s infinite normal forwards running
}

.main-wrap .partner-wrap .partner-list .roller .partner-enter.clone {
    animation: rollingleft2 40s linear 0s infinite normal forwards running
}

.main-wrap .bg-img-section.recommend {
    background: url(../img/main-bnr/product-bg.png) right 135px no-repeat var(--bg)
}

.main-wrap .choose-hc {
    background: url(../img/main/choose-hc_bg.jpg) no-repeat 50%/cover;
    width: 100%
}

.main-wrap .choose-hc .cont-area {
    display: flex;
    justify-content: space-between
}

.main-wrap .choose-hc .main-title {
    display: inline-block;
    text-align: left
}

.main-wrap .choose-hc .choose-hc-list {
    display: grid;
    gap: 23px;
    grid-template-columns: 1fr 1fr 1fr
}

.main-wrap .choose-hc .choose-hc-list li {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    background: linear-gradient(270deg,hsla(0,0%,100%,0) -26.79%,rgba(0,0,0,.14) -6.82%,hsla(0,0%,9%,.06) 11.15%,hsla(0,0%,100%,.04) 123.81%);
    background-blend-mode: overlay;
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: .5rem;
    padding: 2rem;
    text-align: left;
    width: 16rem
}

.main-wrap .choose-hc .choose-hc-list li p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
}

.main-wrap .choose-hc .choose-hc-list li .icon-box {
    background-color: #333;
    border-radius: .25rem;
    display: inline-block;
    padding: .5rem
}

.main-wrap .choose-hc .choose-hc-list li .material-icons {
    --tw-text-opacity: 1;
    background-color: #333;
    border-radius: .25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem
}

.main-wrap .choose-hc .choose-hc-list li .list-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: .75rem;
    margin-top: 1.5rem
}

.main-wrap.mobile .cont-area {
    margin-left: 5%;
    margin-right: 5%;
    width: auto
}

.main-wrap.mobile .cont-area .partner-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.main-wrap.mobile .cont-area .partner-list ul li p {
    text-align: center
}

@media (min-width: 769px) and (max-width:1279px) {
    .main-wrap .swiper .swiper-wrapper {
        height:100%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp {
        display: block;
        height: 100%;
        padding-top: 0;
        width: 100%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybrid-promotion {
        background-position: 73% 0
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap {
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: 1279px;
        position: relative;
        width: 100%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap {
        left: 2.5rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-title {
        font-size: 3.75rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 2rem
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-exp {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-img {
        bottom: 2.5rem;
        position: absolute;
        right: 0;
        top: unset;
        transform: translateY(0);
        width: 100%;
        z-index: 3
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-img img {
        float: right;
        width: 60%
    }

    .main-wrap .bg-img-section.recommend {
        background: var(--bg)
    }

    .main-wrap .cont-area .main-title {
        margin-bottom: 1.5rem
    }

    .main-wrap .cont-area.career-cont .career {
        justify-content: space-between
    }

    .main-wrap .cont-area .main-onestop {
        grid-template-columns: 2fr 2fr
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box {
        height: 230px
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top p {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-animate-box,.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top i {
        display: none
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom {
        top: 0
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link {
        bottom: 1.5rem;
        min-height: unset
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.consulting {
        background: url(../img/main/one-stop-01.png) no-repeat right 116%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.solution {
        background: url(../img/main/one-stop-02.png) no-repeat right 102%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.security {
        background: url(../img/main/one-stop-03.png) no-repeat right 132%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.managed {
        background: url(../img/main/one-stop-04.png) no-repeat right 132%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-left {
        margin-right: 0
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab li img {
        min-width: 6rem
    }

    .main-wrap .choose-hc .cont-area {
        flex-direction: column
    }

    .main-wrap .choose-hc .choose-hc-list {
        gap: 15px
    }

    .main-wrap .choose-hc .choose-hc-list li {
        width: 100%
    }
}

@media (max-width: 768px) {
    .main-wrap .swiper {
        height:420px
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap {
        height: 100%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap {
        margin-left: 1rem;
        transform: translateY(-70%)
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-title {
        font-size: 3rem;
        line-height: 1
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-title span {
        font-size: 2.25rem;
        line-height: 2.5rem;
        line-height: 1.5rem
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-title span.dashboard-style {
        font-size: 3rem!important;
        line-height: 1!important
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-text-wrap .visual-exp {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-img {
        bottom: 4rem;
        right: 0;
        top: unset;
        transform: translateY(0)
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp .visual-wrap .visual-img img {
        float: right;
        width: 34vh
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybrid-promotion {
        background-position: 76% 5%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybrid-promotion .visual-text-wrap {
        transform: translateY(-50%)!important
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybridCloud {
        background-position: 80% 10%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.hybridCloud .visual-text-wrap {
        transform: translateY(-50%)!important
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.kuipernet {
        background: url(../img/bnr-main/kuipernet-bg-mobile.png) no-repeat 100%,radial-gradient(#d9e3fe,#d9e3fe)
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.kuipernet .visual-wrap .visual-text-wrap {
        transform: translateY(-50%)
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.serverhosting {
        background-position: 70% 0
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.serverhosting .visual-text-wrap {
        top: 55%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.cloud {
        background-position: 90% 0
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.cloud .visual-text-wrap {
        top: 65%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.console2,.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.dashboard,.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.reporting {
        background-position: 70% 0
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.console2 .visual-text-wrap,.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.dashboard .visual-text-wrap,.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.reporting .visual-text-wrap {
        top: 60%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.new-domain {
        background-position: 90% 70%;
        background-size: 250px
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.new-domain .visual-text-wrap {
        top: 55%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.nowserver .visual-text-wrap {
        margin-top: 2rem
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.event .visual-title {
        font-size: 34px
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.event .visual-title span {
        font-weight: 400;
        
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.event .visual-wrap .visual-text-wrap .visual-exp {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.dashboard,.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.vpn {
        background-position: 75% 0;
        background-size: auto 110%
    }

    .main-wrap .swiper .swiper-wrapper .visual-bnr-temp.dashboard .visual-text-wrap,.main-wrap .swiper .swiper-wrapper .visual-bnr-temp.vpn .visual-text-wrap {
        top: 60%
    }

    .main-wrap .bg-img-section.recommend {
        background: var(--bg)
    }

    .main-wrap .cont-area {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .main-wrap .cont-area .main-title {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: 1.5rem
    }

    .main-wrap .cont-area.career-cont {
        padding: 30px 0
    }

    .main-wrap .cont-area.career-cont .career {
        justify-content: space-between!important;
        padding-left: 1rem!important;
        padding-right: 1rem!important
    }

    .main-wrap .cont-area.career-cont .career li {
        text-align: center
    }

    .main-wrap .cont-area.career-cont .career li .counter {
        font-size: 1.5rem!important;
        font-weight: 700!important
    }

    .main-wrap .cont-area .main-onestop {
        -moz-column-gap: auto;
        column-gap: auto;
        grid-template-columns: 1fr;
        row-gap: 30px
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box {
        height: 174px;
        width: 100%
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top p {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-animate-box,.main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-top i {
        display: none
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom {
        top: 0
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-info {
        top: 4rem
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-info .pc {
        display: none
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-info .mobile {
        display: block
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link {
        bottom: 1.25rem;
        min-height: unset
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box .onestop-wrap .onestop-wrap-bottom .onestop-bottom-link a p {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.consulting {
        background: url(../img/main/one-stop-01.png) no-repeat right 132%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.solution {
        background: url(../img/main/one-stop-02.png) no-repeat right 132%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.security {
        background: url(../img/main/one-stop-03.png) no-repeat right 132%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .main-onestop .main-onestop-box.managed {
        background: url(../img/main/one-stop-04.png) no-repeat right 132%/34%,linear-gradient(#6da0eb,#6da0eb)
    }

    .main-wrap .cont-area .customer-case .customer-case-cont {
        flex-direction: column
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div {
        width: 100%
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-left {
        height: 100%;
        margin-right: 0
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-left img {
        border-radius: 1rem
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right {
        padding: 0;
        padding-top: 1.5rem
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .case-cont-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-bottom: 1rem
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .case-cont-info {
        font-size: .875rem;
        height: 4rem;
        line-height: 1.25rem
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab {
        flex-wrap: wrap;
        margin-top: 1.25rem
    }

    .main-wrap .cont-area .customer-case .customer-case-cont>div.case-cont-right .customer-case-tab li img {
        width: 7rem
    }

    .main-wrap .choose-hc .cont-area {
        flex-direction: column
    }

    .main-wrap .choose-hc .choose-hc-list {
        -moz-column-gap: 10px;
        column-gap: 10px;
        grid-template-columns: 1fr 1fr;
        row-gap: 15px
    }

    .main-wrap .choose-hc .choose-hc-list li {
        padding: 1.25rem;
        width: 100%
    }

    .main-wrap .choose-hc .choose-hc-list li p {
        font-size: .875rem
    }

    .main-wrap .choose-hc .choose-hc-list li .list-title {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

div[class|=modal] {
    --tw-bg-opacity: 0.8;
    background-color: rgb(17 24 39/var(--tw-bg-opacity));
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3333
}

div[class|=modal] .exit {
    cursor: pointer;
    height: 2rem;
    position: absolute;
    right: 5rem;
    top: 5rem;
    width: 2rem
}

div[class|=modal] .exit span {
    background: #fff;
    display: block;
    height: 2px;
    margin-top: 15px;
    width: 30px
}

div[class|=modal] .exit span:first-child {
    transform: rotate(45deg)
}

div[class|=modal] .exit span:last-child {
    margin-top: -2px;
    transform: rotate(-45deg)
}

div[class|=modal] .wrap-modal {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    max-width: 45%;
    min-width: 400px;
    padding: .25rem;
    width: auto
}

div[class|=modal] .wrap-modal .contents-modal {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    height: 100%;
    overflow: scroll
}

div[class|=modal] .wrap-modal .contents-modal .title-modal {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 2.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2.5rem;
    text-align: center
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.875rem;
    line-height: 2.25rem
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: inherit;
    margin-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: capitalize
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.dell {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.dell:before {
    content: "dell"
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.hp {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(96 165 250/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.hp:before {
    content: "HP"
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.lenovo {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.lenovo:before {
    content: "Lenovo"
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

div[class|=modal] .wrap-modal .contents-modal .title-modal .model span.antiserver {
    color: #333;
    font-size: 1.5rem!important;
    font-weight: 700;
    margin-left: .25rem
}

div[class|=modal] .wrap-modal .contents-modal section {
    padding-bottom: 2.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2.5rem;
    width: 100%
}

div[class|=modal] .wrap-modal .contents-modal section div ul li {
    height: 6rem;
    padding-bottom: 1.25rem;
    width: 45%
}

div[class|=modal] .wrap-modal .contents-modal section div ul li p {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    
}

div[class|=modal] .wrap-modal .contents-modal section div ul li p:first-child {
    --tw-text-opacity: 1;
    color: rgb(17 24 39/var(--tw-text-opacity));
    font-weight: 700;
    margin-bottom: .25rem
}

div[class|=modal] .wrap-modal .contents-modal section div ul li p b {
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity))
}

div[class|=modal] .wrap-modal .contents-modal section div ul li:nth-child(2n-1) {
    float: left
}

div[class|=modal] .wrap-modal .contents-modal section div ul li:nth-child(2n) {
    float: right
}

.option-area {
    display: inline-block;
    margin-top: 5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

.option-area .option-grp {
    margin-top: 4rem
}

.option-area .option-grp h2 {
    margin-bottom: 1.25rem
}

.option-area .option-grp section {
    margin-bottom: 2.5rem;
    width: 91.666667%
}

.option-area .option-grp section .help-detail {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border: 1px solid #999;
    display: none;
    left: 100px;
    position: absolute;
    top: 0;
    width: 600px;
    z-index: 9
}

.option-area .option-grp section .help-detail .exit {
    cursor: pointer;
    height: 1.5rem;
    position: absolute;
    right: 1rem;
    top: 2rem;
    width: 1.5rem
}

.option-area .option-grp section .help-detail .exit span {
    background: #333;
    display: block;
    height: 2px;
    margin-top: 10px;
    width: 18px
}

.option-area .option-grp section .help-detail .exit span:first-child {
    transform: rotate(45deg)
}

.option-area .option-grp section .help-detail .exit span:last-child {
    margin-top: -2px;
    transform: rotate(-45deg)
}

.option-area .option-grp section .help-detail .wrap-help h5 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-bottom: 1px solid #ddd;
    padding: 2rem
}

.option-area .option-grp section .help-detail .wrap-help section {
    margin-bottom: 0;
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    width: 100%
}

.option-area .option-grp section .help-detail .wrap-help section p {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    margin-top: .5rem;
    
}

.option-area .select-box {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-width: 1px;
    margin-top: .75rem;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    position: relative;
    width: 100%
}

.option-area .select-box input {
    visibility: hidden
}

.option-area .select-box input+label:before {
    content: none
}

.option-area .select-box label {
    cursor: pointer;
    height: 100%;
    left: 0;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    position: absolute;
    top: 0;
    width: 100%
}

.option-area .select-box label p {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: inline-block;
    font-size: 1.5rem;
    line-height: 2rem
}

.option-area .select-box label p.select-price {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    float: right
}

.option-area .select-box label p.select-price:before {
    content: "+";
    margin-right: 10px
}

.option-area .select-box label p.select-price:after {
    content: "원"
}

.option-area .select-box input:checked+label {
    background: var(--primary)
}

.option-area .select-box input:checked+label p,.option-area .select-box input:checked+label p.select-price {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.option-area .select-box:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.option-area .select-box:hover p {
    --tw-text-opacity: 1;
    color: rgb(55 65 81/var(--tw-text-opacity))
}

.option-area .select-box:hover p.select-price {
    color: var(--primary)
}

.option-area .opt-box {
    cursor: pointer;
    height: 4rem;
    margin-top: .75rem;
    position: relative;
    width: 100%
}

.option-area .opt-box .opt-select {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(107 114 128/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-width: 1px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.25rem;
    height: 100%;
    line-height: 1.75rem;
    line-height: 50px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    position: relative;
    width: 100%
}

.option-area .opt-box .opt-select .arrow {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-left-width: 1px;
    font-size: 1.5rem;
    height: 100%;
    line-height: 2rem;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 4rem
}

.option-area .opt-box .opt-select .arrow span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    line-height: 55px;
    transition: .3s ease
}

.option-area .opt-box .opt-select .arrow.on {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81/var(--tw-bg-opacity))
}

.option-area .opt-box .opt-select .arrow.on span {
    transform: rotate(180deg);
    transition: .3s ease
}

.option-area .opt-box ul {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    border-width: 1px;
    box-shadow: 4px 4px 7px #444;
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    z-index: 4
}

.option-area .opt-box ul li {
    border-bottom-width: 1px;
    height: 4rem
}

.option-area .opt-box ul li:last-child {
    border-bottom-width: 0
}

.option-area .opt-box ul li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.option-area .opt-box ul li:hover label {
    font-weight: 700
}

.option-area .opt-box ul li input[type=radio] {
    display: none
}

.option-area .opt-box ul li label {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81/var(--tw-border-opacity));
    cursor: pointer;
    display: block;
    font-size: 1.125rem;
    font-weight: 400;
    height: 100%;
    line-height: 1.75rem;
    line-height: 60px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%
}

.option-area .opt-box ul li label:before {
    display: none
}

.option-area .opt-box ul li input:checked+label {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    font-weight: 700
}

.option-area div[class*=text-box] input[type=text] {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-width: 1px;
    font-size: 1.25rem;
    height: 4rem;
    line-height: 1.75rem;
    margin-top: .75rem;
    padding-left: 1.25rem;
    width: 100%
}

.option-area div[class*=text-box]+div[class*=text-box] {
    margin-top: .625rem
}

.option-area .domain-input .button-toparea {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: .5rem
}

.option-area .domain-input .button-toparea .btn {
    border: 1px solid var(--bg-black)
}

.option-area .domain-input .button-toparea .btn:hover {
    --tw-border-opacity: 1!important;
    border-color: rgb(107 114 128/var(--tw-border-opacity))!important
}

.option-status .option-sticky {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-width: 1px;
    padding: 1.25rem;
    position: sticky;
    right: 0;
    top: 6rem;
    width: 400px
}

.option-status .option-sticky .option-toggle i {
    display: none
}

.option-status .option-sticky ul li {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-top-width: 1px;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: 1.25rem;
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: 1.25rem
}

.option-status .option-sticky ul li div#price,.option-status .option-sticky ul li div i {
    display: none
}

.option-status .option-sticky ul li span {
    font-size: inherit
}

.option-status .option-sticky ul li span.tag {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity));
    margin-right: 1rem;
    text-transform: uppercase
}

.option-status .option-sticky ul li span.price {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    float: right
}

.option-status .option-sticky ul li span.price:after {
    content: "원"
}

.option-status .option-sticky ul li span.price.total {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.option-status .option-sticky ul li span.tag-line {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity));
    display: inline-block;
    margin-right: 1rem;
    text-transform: uppercase
}

.option-status .option-sticky ul li:last-child {
    border-bottom-width: 1px
}

.option-status .option-sticky ul li .detail {
    margin-top: .625rem
}

.option-status .option-sticky ul li .detail p {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    padding-top: .375rem
}

.option-status .option-sticky ul li .detail p span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    text-transform: uppercase
}

.option-status .option-sticky ul li .detail p span.price {
    float: right
}

.option-status .option-sticky ul li .detail p span.price:after {
    content: "원"
}

.option-status .option-sticky ul li .detail p span.info {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity));
    float: right;
    text-transform: lowercase
}

.cart-area {
    margin-top: 5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

.cart-area .cart-list>li {
    --tw-border-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-bottom: 1rem
}

.cart-area .cart-list>li>section[class*=cart-list-] {
    display: flex;
    padding: 1.5rem
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-name {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-right-width: 1px;
    margin-right: 2.5rem;
    padding-right: 2.5rem
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-name div {
    display: inline-block;
    vertical-align: sub
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area {
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.5rem
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt ul li {
    margin-bottom: .375rem;
    text-align: left
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt ul li .tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(156 163 175/var(--tw-bg-opacity));
    border-radius: .25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .75rem;
    line-height: 1rem;
    margin-right: .25rem;
    min-width: 64px;
    padding-bottom: .125rem;
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: .125rem;
    text-transform: uppercase
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt ul li .tag-plus {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity));
    border-radius: .25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .75rem;
    line-height: 1rem;
    margin-right: .25rem;
    min-width: 64px;
    padding-bottom: .125rem;
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: .125rem;
    text-transform: uppercase
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt ul li .price {
    font-weight: 700;
    margin-left: .75rem
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt ul li .price:before {
    content: "+"
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt ul li:last-child {
    margin-bottom: 0
}

.cart-area .cart-list>li>section[class*=cart-list-] .prd-opt-area .prd-opt.default ul li span.price {
    display: none
}

.cart-area .cart-list>li>section[class*=cart-list-].cart-list-top {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-style: dashed
}

.cart-area .cart-list>li>section[class*=cart-list-].cart-list-bottom .count-area {
    display: flex;
    gap: .25rem;
    margin-right: 1rem
}

.cart-area .cart-list>li>section[class*=cart-list-].cart-list-bottom .count-area p {
    text-align: center
}

.cart-area .cart-list>li>section[class*=cart-list-].cart-list-bottom .price-area {
    align-items: center;
    display: flex;
    gap: .75rem
}

.cart-area .cart-list>li>section[class*=cart-list-].cart-list-bottom .price-area span {
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.cart-area .cart-list>li>section[class*=cart-list-].cart-list-bottom .price-area .price {
    font-size: 1.5rem;
    line-height: 2rem
}

.cart-area .cart-list>li .prd-tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(107 114 128/var(--tw-bg-opacity));
    border-radius: .125rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    margin-right: .75rem;
    padding-bottom: .125rem;
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: .125rem
}

.cart-area .cart-list>li .ssl-tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity));
    margin-right: .75rem;
    padding-bottom: .125rem;
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: .125rem
}

.cart-area .cart-list>li p[class*=price] {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

.cart-area .cart-list>li p[class*=price]:after {
    content: "원"
}

.cart-area .cart-list>li p[class*=price-sm] {
    color: var(--text);
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-indent: 34px
}

.cart-area .all-pay {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-width: 1px;
    padding-bottom: 2.5rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: 2.5rem
}

.cart-area .all-pay ul {
    display: flex
}

.cart-area .all-pay ul li {
    display: inline-block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 30px;
    position: relative;
    width: 25%
}

.cart-area .all-pay ul li>div {
    align-items: center;
    display: flex;
    flex-direction: column
}

.cart-area .all-pay ul li span {
    color: var(--primary);
    float: right;
    font-weight: 700
}

.cart-area .all-pay ul li span.price {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px
}

.cart-area .all-pay ul li span.total {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.cart-area .all-pay ul li span:after {
    content: "원"
}

.cart-area .all-pay ul li>p {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 1px;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.125rem;
    height: 2rem;
    line-height: 1.75rem;
    position: absolute;
    right: -3.5%;
    text-align: center;
    top: 1rem;
    width: 2rem
}

.pay-area {
    margin-top: 5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

.pay-area ul {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.pay-area ul li {
    display: flex;
    margin-bottom: .75rem;
    margin-top: .75rem
}

.pay-area ul li p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    display: inline-block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    width: 20%
}

.pay-area ul li p:last-child {
    --tw-text-opacity: 1;
    color: rgb(55 65 81/var(--tw-text-opacity));
    width: 80%
}

.pay-area .pay-box {
    border-width: 1px;
    display: flex;
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    position: relative
}

.pay-area .pay-box:first-child {
    margin-top: 2.5rem
}

.pay-area .pay-box.server {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254/var(--tw-bg-opacity))
}

.pay-area .pay-box.server .pay-num span.tag {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity))
}

.pay-area .pay-box.ssl {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254/var(--tw-bg-opacity))
}

.pay-area .pay-box.ssl .pay-num span.tag {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity))
}

.pay-area .pay-box.ssl .pay-list ul li .price,.pay-area .pay-box.ssl .total-cost p.price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.pay-area .pay-box .pay-num {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    position: absolute;
    top: 1.25rem
}

.pay-area .pay-box .pay-num span.tag {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    padding-left: .5rem;
    padding-right: .5rem
}

.pay-area .pay-box .pay-list {
    display: inline-block;
    width: 75%
}

.pay-area .pay-box .pay-list ul li {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.pay-area .pay-box .pay-list ul li span {
    font-size: inherit;
    margin-left: 1.25rem;
    margin-right: 1.25rem
}

.pay-area .pay-box .pay-list ul li span.volume:after {
    content: "개"
}

.pay-area .pay-box .pay-list ul li span.price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    margin-left: 0
}

.pay-area .pay-box .pay-list ul li span.price:after {
    content: "원"
}

.pay-area .pay-box .total-cost {
    float: right;
    padding-top: .625rem;
    width: 25%
}

.pay-area .pay-box .total-cost p {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.pay-area .pay-box .total-cost p.price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.pay-area .pay-box .total-cost p.price:after {
    content: "원"
}

.pay-area .order-history-box {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: 1rem;
    border-width: 1px;
    margin-bottom: 2.5rem;
    position: relative
}

.pay-area .order-history-box:first-child {
    margin-top: 2.5rem
}

.pay-area .order-history-box:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity))
}

.pay-area .order-history-box .pay-summary {
    display: flex;
    padding-bottom: 2.5rem;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 2.5rem;
    position: relative;
    width: 100%
}

.pay-area .order-history-box .pay-summary p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    width: 33.333333%
}

.pay-area .order-history-box .pay-summary p.price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
    text-align: right
}

.pay-area .order-history-box .pay-summary p.price:after {
    content: "원"
}

.pay-area .order-history-box .pay-summary p.toggle-button {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 9999px;
    border-width: 1px;
    bottom: .5rem;
    color: rgb(156 163 175/var(--tw-text-opacity));
    cursor: pointer;
    font-size: .75rem;
    height: 1.75rem;
    line-height: 1rem;
    line-height: 1.75rem;
    position: absolute;
    right: 50%;
    text-align: center;
    transition: .3s ease;
    width: 1.75rem
}

.pay-area .order-history-box .pay-summary p.toggle-button::bedfore {
    content: "∨"
}

.pay-area .order-history-box.on {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity));
    border-color: rgb(37 99 235/var(--tw-border-opacity))
}

.pay-area .order-history-box.on .toggle-button {
    line-height: 1.25rem;
    transform: rotate(180deg);
    transition: .3s ease
}

.pay-area .order-history-box .pay-detail {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    display: none;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem;
    width: 100%
}

.pay-area .order-history-box .pay-detail .title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.pay-area .order-history-box .pay-detail table th {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    
}

.fixed-payment {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    display: inline-block;
    float: right;
    position: sticky;
    top: 5rem;
    width: 400px;
    z-index: 99
}

.fixed-payment .fixed-area {
    margin: auto;
    padding: 1.25rem;
    width: 75%
}

.success-area {
    margin-top: 5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    text-align: center;
    width: 100%
}

.success-area .success-cont {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-width: 1px;
    margin: auto;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2.5rem;
    width: 66.666667%
}

.success-area .success-cont li {
    display: flex;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
    text-align: left
}

.success-area .success-cont li p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.75rem;
    width: 25%
}

.success-area .success-cont li p:last-child {
    --tw-text-opacity: 1;
    color: rgb(55 65 81/var(--tw-text-opacity));
    width: 75%
}

.success-area .success-cont li p.caution {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem
}

.success-area .success-cont li p.failed-reason {
    --tw-text-opacity: 1;
    color: rgb(239 68 68/var(--tw-text-opacity))
}

@media (min-width: 769px) and (max-width:1279px) {
    .cart-area .cart-list>li p[class*=price-sm] {
        text-indent:0
    }

    .pay-area .pay-box {
        flex-direction: column
    }

    .pay-area .pay-box .pay-list,.pay-area .pay-box .total-cost {
        width: 100%
    }

    .pay-area .pay-box .pay-list ul {
        padding-left: 0
    }

    .pay-area .pay-box .pay-list ul li {
        flex-wrap: wrap
    }

    .pay-area .pay-box .pay-list ul li span {
        margin-left: 0
    }

    .pay-area .order-info ul {
        padding: 0
    }

    .pay-area .order-info ul li {
        flex-direction: column
    }

    .pay-area .order-info ul li input,.pay-area .order-info ul li p {
        width: 100%!important
    }
}

@media (max-width: 768px) {
    .pay-area {
        padding-left:1rem;
        padding-right: 1rem
    }

    .pay-area>div,.pay-area>section {
        width: 100%!important
    }

    .pay-area .pay-box {
        flex-direction: column
    }

    .pay-area .pay-box .pay-list,.pay-area .pay-box .total-cost {
        width: 100%
    }

    .pay-area .pay-box .pay-list ul {
        padding-left: 0
    }

    .pay-area .pay-box .pay-list ul li {
        flex-wrap: wrap
    }

    .pay-area .pay-box .pay-list ul li span {
        margin-left: 0
    }

    .pay-area .order-info ul {
        padding: 0
    }

    .pay-area .order-info ul li {
        flex-direction: column
    }

    .pay-area .order-info ul li input,.pay-area .order-info ul li p {
        width: 100%!important
    }

    .pay-area .order-history-box .pay-summary {
        flex-direction: column;
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .pay-area .order-history-box .pay-summary p {
        width: 100%
    }

    .pay-area .order-history-box .pay-summary p.price {
        margin-top: .5rem;
        text-align: left
    }

    .pay-area .order-history-box .pay-detail {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .pay-area .order-history-box .pay-detail table {
        width: 100%
    }

    .pay-area .order-history-box .pay-detail table tr td {
        word-break: break-all
    }

    .option-area {
        margin-top: 1.25rem;
        padding: .5rem
    }

    .option-area .option-grp {
        margin-top: 2rem
    }

    .option-area .option-grp h2 {
        margin-bottom: .75rem
    }

    .option-area .option-grp section {
        width: 100%
    }

    .option-area .select-box {
        padding: 1rem
    }

    .option-area .select-box input {
        visibility: hidden
    }

    .option-area .select-box input+label:before {
        content: none
    }

    .option-area .select-box label p {
        --tw-text-opacity: 1;
        color: rgb(156 163 175/var(--tw-text-opacity));
        display: inline-block;
        font-size: 1rem;
        line-height: 1.5rem
    }

    .option-area .select-box input:checked+label {
        background: var(--primary)
    }

    .option-area .select-box input:checked+label p,.option-area .select-box input:checked+label p.select-price {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .option-area .select-box:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity))
    }

    .option-area .select-box:hover p {
        --tw-text-opacity: 1;
        color: rgb(55 65 81/var(--tw-text-opacity))
    }

    .option-area .select-box:hover p.select-price {
        color: var(--primary)
    }

    .option-area .opt-box {
        height: 3rem
    }

    .option-area .opt-box .opt-select {
        font-size: 1rem;
        line-height: 1.5rem;
        line-height: 50px
    }

    .option-area .opt-box .opt-select .arrow {
        font-size: 1.25rem;
        line-height: 1.75rem;
        width: 3rem
    }

    .option-area .opt-box .opt-select .arrow span {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity));
        line-height: 55px;
        transition: .3s ease
    }

    .option-area .opt-box .opt-select .arrow.on {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81/var(--tw-bg-opacity))
    }

    .option-area .opt-box .opt-select .arrow.on span {
        transform: rotate(180deg);
        transition: .3s ease
    }

    .option-area .opt-box ul {
        top: 48px
    }

    .option-area .opt-box ul li {
        height: 3rem
    }

    .option-area .opt-box ul li label {
        font-size: 1rem;
        line-height: 1.5rem;
        line-height: 48px
    }

    .option-status .option-sticky {
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235/var(--tw-border-opacity));
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        bottom: 0;
        box-shadow: 0 -2px 8px rgba(0,0,0,.08);
        height: -moz-fit-content;
        height: fit-content;
        left: 0;
        position: fixed;
        right: unset;
        top: unset;
        transition: all .3s ease;
        width: 100vw;
        z-index: 44
    }

    .option-status .option-sticky .option-toggle {
        margin-top: .5rem;
        text-align: right
    }

    .option-status .option-sticky .option-toggle h3 {
        float: left;
        margin-top: -.25rem
    }

    .option-status .option-sticky .option-toggle i {
        color: var(--primary);
        display: inline-block;
        margin-right: 1rem;
        transform: rotate(90deg)
    }

    .option-status .option-sticky ul {
        display: none
    }

    .option-status .option-sticky ul li div i {
        display: block
    }

    .option-status .option-sticky ul li div:first-child i {
        float: right;
        margin-top: -.125rem
    }

    .option-status .option-sticky ul li div[id*=-view] {
        display: none
    }

    .option-status .option-sticky ul li div#check i {
        margin-top: .25rem
    }

    .option-status .option-sticky ul li div#price {
        display: block
    }

    .option-status.on .option-sticky {
        transition: all .3s ease
    }

    .option-status.on .option-sticky .option-toggle i {
        margin-top: -.5rem;
        transform: rotate(-90deg)
    }

    .option-status.on .option-sticky ul {
        display: block;
        max-height: var(--option-height);
        overflow: auto
    }

    .option-status.on .option-sticky ul li div:first-child.on {
        margin-bottom: 1rem
    }

    .option-status.on .option-sticky ul li div:first-child.on i {
        transform: rotate(180deg)
    }

    .option-status.on .option-sticky ul li div[id*=-view].on {
        display: block
    }

    .option-status.ver-02 .option-toggle-area div:first-child.on {
        margin-bottom: 1rem
    }

    .option-status.ver-02 .option-toggle-area div:first-child.on i {
        transform: rotate(180deg)
    }

    .option-status.ver-02 .option-toggle-area ul[id*=-view] {
        display: none
    }

    .option-status.ver-02 .option-toggle-area ul[id*=-view].on {
        display: block;
        max-height: 416px;
        overflow: auto
    }

    .cart-area .cart-list>li section.cart-list-top {
        flex-direction: column;
        padding: 0
    }

    .cart-area .cart-list>li section.cart-list-top>div {
        padding: 1rem
    }

    .cart-area .cart-list>li section.cart-list-top .prd-name {
        border-bottom-width: 1px;
        border-right-width: 0;
        margin-right: 0;
        padding-right: 0
    }

    .cart-area .cart-list>li section.cart-list-top .prd-opt-area {
        --tw-bg-opacity: 1;
        background-color: rgb(249 250 251/var(--tw-bg-opacity));
        flex-direction: column
    }

    .cart-area .cart-list>li .prd-tag {
        margin-right: .25rem
    }

    .cart-area .cart-list>li section.cart-list-bottom {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .cart-area .all-pay {
        --tw-bg-opacity: 1;
        background-color: rgb(243 244 246/var(--tw-bg-opacity))
    }

    .cart-area .all-pay ul {
        display: block
    }

    .cart-area .all-pay ul li {
        width: 100%
    }

    .cart-area .all-pay ul li>div {
        flex-direction: row;
        justify-content: flex-start
    }

    .cart-area .all-pay ul li>p {
        margin-bottom: .5rem;
        margin-top: .5rem;
        position: relative;
        right: 0;
        top: 0
    }

    .cart-area .all-pay ul li div p {
        margin-right: 1rem;
        width: 7rem
    }

    .success-area {
        margin-top: 5rem;
        padding-bottom: 2.5rem;
        padding-top: 2.5rem;
        text-align: center;
        width: 100%
    }

    .success-area .success-cont {
        margin-left: auto;
        margin-right: auto;
        padding: 1.25rem;
        width: 95%
    }

    .success-area .success-cont li {
        display: flex;
        margin-bottom: 1.25rem;
        margin-top: 1.25rem;
        text-align: left
    }

    .success-area .success-cont li p {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.pagination {
    display: inline-block;
    margin-top: 1rem
}

.pagination li {
    display: inline-block;
    margin-left: .125rem;
    margin-right: .125rem
}

.pagination li a {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-width: 1px;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: block;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem
}

.pagination li a:hover {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(0 0 0/var(--tw-border-opacity));
    color: rgb(0 0 0/var(--tw-text-opacity))
}

.pagination li.active span {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(0 0 0/var(--tw-border-opacity));
    border-width: 1px;
    color: rgb(0 0 0/var(--tw-text-opacity));
    display: block;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem
}

.board-detail {
    margin-top: 70px;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

.board-detail .board-frame {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    border-top-width: 1px
}

.board-detail .board-frame pre {
    white-space: pre-wrap;
    word-break: break-all
}

.board-detail .board-list {
    margin-top: 1.25rem;
    text-align: right
}

.board-detail .board-list ul li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    display: inline-block
}

.board-detail .board-list ul li a {
    display: block;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem
}

.board-detail .board-list ul li a span {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 20px
}

.board-detail .board-list ul li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

& .board-list-res {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    border-top-width: 2px;
    margin-left: auto;
    margin-right: auto;
    width: 80%
}

& .board-list-res li {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    display: flex;
    justify-content: space-between;
    padding: 1.25rem;
    width: 100%
}

& .board-list-res li div {
    text-align: center;
    
}

& .board-list-res li div a {
    padding-left: 1rem;
    padding-right: 1rem
}

.gallery-area {
    margin-top: 5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

.gallery-area .gallery-tab p {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-bottom-width: 4px;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    color: rgb(107 114 128/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 2.5rem;
    padding-bottom: .5rem
}

.gallery-area .gallery-tab p.on {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(59 130 246/var(--tw-border-opacity));
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.gallery-area .gallery-list ul.closed-event li {
    display: inline-block;
    overflow: hidden;
    position: relative
}

.gallery-area .gallery-list ul.closed-event li:before {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39/var(--tw-bg-opacity));
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: .7;
    position: absolute;
    top: 0;
    width: 100%
}

.gallery-area .gallery-list ul.closed-event li:after {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: "종료된 이벤트";
    font-size: 1.5rem;
    line-height: 2rem;
    position: absolute;
    text-align: center;
    top: 33.333333%;
    width: 100%
}

.gallery-area .gallery-list ul li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    height: 320px;
    margin-bottom: .75rem;
    margin-right: .75rem;
    transition: .25s ease-in-out;
    width: 32%
}

.gallery-area .gallery-list ul li:last-child {
    margin-right: 0
}

.gallery-area .gallery-list ul li .img-box {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    height: 66.666667%;
    overflow: hidden;
    width: 100%
}

.gallery-area .gallery-list ul li .img-box img {
    text-align: center
}

.gallery-area .gallery-list ul li .text-box {
    padding: 1.25rem;
    width: 100%
}

.gallery-area .gallery-list ul li .text-box p.title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.gallery-area .gallery-list ul li .text-box p.date {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity))
}

.gallery-area .gallery-list ul li:hover {
    box-shadow: 4px 4px 6px #777;
    transform: scale(102%);
    transition: .25s ease-in-out
}

@media (max-width: 1279px) {
    & .board-list-res li.title,& .board-list-res li div:first-child {
        display:none
    }

    & .board-list-res li div a {
        padding-left: 0;
        padding-right: 0
    }
}

@media (max-width: 768px) {
    .gallery-area {
        margin-top:2.5rem
    }

    .gallery-area h1 {
        display: none
    }

    .gallery-area table {
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        border-radius: 0;
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
        width: 90%
    }

    .gallery-area table th {
        font-weight: 400
    }

    .gallery-area table td,.gallery-area table th {
        --tw-border-opacity: 1;
        border-color: rgb(209 213 219/var(--tw-border-opacity))
    }

    .gallery-area table td,.gallery-area table td a {
        font-weight: 400
    }

    .gallery-area .gallery-list li {
        margin-left: 2vw!important;
        width: 96vw!important
    }

    .gallery-area .gallery-list li,.gallery-area .gallery-list li .img-box {
        height: -moz-fit-content!important;
        height: fit-content!important
    }

    .gallery-area .gallery-tab {
        text-align: center
    }

    .board-detail {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .board-detail .board-frame img {
        height: unset!important;
        width: 100%!important
    }

    & .board-list-res {
        width: 90%
    }

    & .board-list-res li {
        flex-direction: column;
        padding: 1rem
    }

    & .board-list-res li div {
        text-align: left;
        width: 100%!important
    }

    & .board-list-res li div:last-child {
        --tw-text-opacity: 1;
        color: rgb(107 114 128/var(--tw-text-opacity));
        margin-top: .25rem
    }
}

@media print {
    body {
        width: 100%!important
    }

    .estimate-area {
        background: initial;
        border: initial;
        border-radius: initial;
        box-shadow: none;
        margin: 0;
        min-height: auto;
        page-break-after: always;
        width: auto
    }

    .estimate-area>div {
        margin: 1.25rme 0;
        page-break-after: auto;
        page-break-before: auto;
        page-break-inside: avoid
    }

    .estimate-area h2 {
        font-size: 1.5rem
    }

    .estimate-area table td,.estimate-area table th {
        border-color: #bbb;
        font-size: 12px;
        padding: .5rem
    }

    .estimate-area #btnPrint {
        display: none
    }

    .estimate-area .estimate-normal-info {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem
    }

    .estimate-area .estimate-normal-info>div {
        width: 100%
    }

    .estimate-area .estimate-normal-info table {
        border-collapse: collapse;
        overflow-wrap: break-word;
        width: 100%
    }

    .estimate-area .estimate-normal-info table td {
        border-width: 1px
    }

    .estimate-area .estimate-normal-info table td.first {
        -webkit-print-color-adjust: exact;
        background-color: #aaa!important
    }

    .estimate-area .estimate-normal-info table td.second {
        -webkit-print-color-adjust: exact;
        background-color: #e8e8e8!important;
        width: 18%
    }

    .estimate-area .estimate-cost {
        border-color: #bbb
    }

    .estimate-area .estimate-cost ul li span.total {
        color: var(--primary);
        font-size: 1.5rem
    }

    .estimate-area .estimate-info {
        border-color: #bbb
    }
}

@page {
    size: A4;
    margin: 0
}

.estimate-area {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    border-width: 2px 1px 1px;
    margin: 2.5rem auto;
    padding: 2.5rem;
    position: relative
}

.estimate-area .estimate-normal-info {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    display: flex;
    margin-bottom: 2.5rem;
    padding: 1rem
}

.estimate-area .estimate-normal-info ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: .5rem
}

.estimate-area .estimate-normal-info ul li span.dt {
    display: inline-block;
    width: 7rem
}

.estimate-area .estimate-normal-info ul li span.dd {
    font-weight: 700;
    margin-left: 1.25rem
}

.estimate-area table {
    border-width: 0;
    width: 100%
}

.estimate-area table tr:last-child {
    border-width: 0
}

.estimate-area table tr td {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    font-size: .875rem;
    line-height: 1.25rem
}

.estimate-area table tr td.first {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(107 114 128/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.estimate-area table tr td.second {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.estimate-area table tr td .price {
    font-weight: 700
}

.estimate-area table tr td .prd-opt {
    padding: .75rem
}

.estimate-area table tr td .prd-opt ul li {
    margin-bottom: .5rem;
    width: 100%
}

.estimate-area table tr td .prd-opt ul li span.tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(107 114 128/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 20px;
    padding-bottom: .125rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .125rem;
    text-transform: uppercase
}

.estimate-area table tr td .prd-opt ul li span.tag,.estimate-area table tr td .prd-opt ul li span.tag-plus {
    margin-right: .5rem
}

.estimate-area table tr td .prd-opt ul li span.tag-plus {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(96 165 250/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 20px;
    padding-bottom: .125rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .125rem;
    text-transform: uppercase
}

.estimate-area table tr td .prd-opt ul li .price {
    float: right;
    font-weight: 700;
    text-align: right
}

.estimate-area table tr td .prd-opt ul li .price:before {
    content: "+"
}

.estimate-area table tr td .prd-tag {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity));
    margin-right: .5rem;
    padding-bottom: .125rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .125rem;
    text-transform: uppercase
}

.estimate-area .estimate-info {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    padding: 1.25rem;
    width: 100%
}

.estimate-area .estimate-info h3 {
    margin-bottom: .75rem
}

.estimate-area .estimate-info p {
    margin-bottom: .25rem;
    margin-left: .75rem;
    padding-left: 1.25rem;
    position: relative
}

.estimate-area .estimate-info p:before {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity));
    border-radius: 9999px;
    content: "";
    height: .5rem;
    left: 0;
    position: absolute;
    top: .375rem;
    width: .5rem
}

.estimate-area .estimate-cost {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-width: 1px;
    padding-bottom: 2.5rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: 2.5rem
}

.estimate-area .estimate-cost ul {
    display: flex
}

.estimate-area .estimate-cost ul li {
    display: inline-block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 30px;
    position: relative;
    width: 25%
}

.estimate-area .estimate-cost ul li span {
    display: block;
    font-weight: 700;
    text-align: right
}

.estimate-area .estimate-cost ul li span.price {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px
}

.estimate-area .estimate-cost ul li span.total {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.estimate-area .estimate-cost ul li span:after {
    content: "원"
}

.estimate-area .estimate-cost ul li>p {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 1px;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.125rem;
    height: 2rem;
    line-height: 1.75rem;
    position: absolute;
    right: -3.5%;
    text-align: center;
    top: 0;
    width: 2rem
}

.estimate-area .estimate-cost ul li div {
    align-items: center;
    display: flex;
    flex-direction: column
}

.normal-area {
    padding-top: 2.5rem
}

.normal-area .terms-tab {
    margin: auto;
    margin-bottom: 1.25rem;
    margin-top: 2.5rem;
    width: 1280px
}

.normal-area .terms-tab ul li {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    border-width: 1px;
    display: inline-block
}

.normal-area .terms-tab ul li a {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem
}

.normal-area .terms-tab ul li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.normal-area .terms-tab ul li.on {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity));
    border-color: rgb(37 99 235/var(--tw-border-opacity))
}

.normal-area .terms-tab ul li.on a {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-weight: 700
}

.normal-area .terms-area {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-width: 1px;
    margin: auto;
    margin-bottom: 2.5rem;
    min-height: 400px;
    padding: 5rem;
    width: 1280px
}

.normal-area .terms-area .terms-detail-area h2,.normal-area .terms-area .terms-detail-area h3 {
    font-weight: 700
}

.normal-area .terms-area .terms-detail-area h3 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity))
}

.normal-area .terms-area .terms-detail-area ul li {
    line-height: 1.8em;
    padding-left: 1.5rem;
    position: relative;
    
}

.normal-area .terms-area .terms-detail-area ul li span {
    left: 0;
    position: absolute
}

.normal-area .terms-area .terms-detail-area ul ul {
    padding-bottom: .625rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: .625rem
}

.normal-area .terms-area .terms-detail-area ul ul li {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    padding-left: 2.5rem
}

.normal-area .terms-area .terms-detail-area dl dd {
    line-height: 2rem;
    padding-left: 1.25rem;
    position: relative
}

.normal-area .terms-area .terms-detail-area dl dd.dot:before {
    content: "ㆍ";
    left: 0;
    position: absolute
}

.normal-area .terms-area .terms-detail-area table {
    margin-top: 2.5rem
}

.normal-area .terms-area .terms-detail-area table caption {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.25rem
}

.normal-area .terms-area .terms-detail-area table tr td {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.normal-area .terms-area .past-policy {
    margin-bottom: 2.5rem
}

.normal-area .terms-area .past-policy li {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(107 114 128/var(--tw-border-opacity));
    border-width: 1px;
    color: rgb(107 114 128/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    padding-bottom: .5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .5rem
}

.normal-area .terms-area .past-policy li.on,.normal-area .terms-area .past-policy li:hover {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    color: rgb(37 99 235/var(--tw-text-opacity))
}

@media (max-width: 1279px) {
    .normal-area .terms-tab {
        display:flex;
        flex-wrap: wrap;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%
    }

    .normal-area .terms-tab ul {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem
    }

    .normal-area .terms-tab ul li a {
        padding: .5rem
    }

    .normal-area .terms-area {
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2rem;
        width: 100%
    }

    .normal-area .terms-area dd,.normal-area .terms-area li,.normal-area .terms-area p,.normal-area .terms-area span {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .normal-area .terms-area h3 {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .normal-area .terms-area .past-policy {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem
    }

    .normal-area .terms-area .past-policy li {
        padding: .5rem
    }

    .normal-area .terms-area table tr th {
        min-width: 72px
    }

    .normal-area .terms-area .terms-detail-area table {
        width: 100%
    }

    .normal-area .terms-area .terms-detail-area table tr td,.normal-area .terms-area .terms-detail-area table tr th {
        font-size: 13px;
        line-height: unset;
        padding: .5rem;
        word-break: break-all
    }
}

.sub-cont-group .caution-box {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-width: 1px;
    border-top-width: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.25rem;
    padding: 1.75rem;
    text-align: left;
    width: 80%
}

.sub-cont-group .caution-box li {
    margin-bottom: .5rem
}

.sub-cont-group .caution-box li:before {
    content: "- "
}

.sub-cont-group .caution-box li:last-child {
    margin-bottom: 0
}

.sub-cont-group .defaultBox {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: .5rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2.5rem;
    width: 83.333333%
}

.sub-cont-group .defaultBox ul {
    margin-left: 14rem;
    margin-right: 14rem;
    text-align: left;
    white-space: nowrap
}

.sub-cont-group .defaultBox ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: 1rem
}

.sub-cont-group .defaultBox ul li b {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-right: .5rem
}

.sub-cont-group .defaultBox ul li:last-child {
    padding-bottom: 0
}

.sub-cont-group .primary-box {
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2.5rem
}

.sub-cont-group .primary-box li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: var(--primary);
    border-radius: 1rem;
    border-width: 1px;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    text-align: left;
    width: 300px
}

.sub-cont-group .primary-box li .box-title {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    margin-bottom: 1rem
}

.sub-cont-group .primary-box li .box-cont p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: .125rem
}

.sub-cont-group .primary-box li .box-cont p:last-child {
    margin-bottom: 0
}

.sub-cont-group .app-price-box {
    display: flex;
    gap: 2.5rem;
    justify-content: space-between
}

.sub-cont-group .app-price-box li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    padding: 1.5rem;
    text-align: left;
    width: 400px
}

.sub-cont-group .app-price-box li .box-title {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    margin-bottom: 1rem;
    padding-bottom: 1rem
}

.sub-cont-group .app-price-box li .box-title h3 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    margin-bottom: .375rem
}

.sub-cont-group .app-price-box li .box-title p {
    font-size: .75rem;
    line-height: 1rem;
    margin-right: .25rem
}

.sub-cont-group .app-price-box li .box-title p b {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem
}

.sub-cont-group .app-price-box li .box-spec {
    display: flex;
    flex-direction: column;
    row-gap: .75rem
}

.sub-cont-group .app-price-box li .box-spec dl {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: .25rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem
}

.sub-cont-group .app-price-box li .box-spec dl dd {
    margin-bottom: .25rem
}

.sub-cont-group .app-price-box li .box-spec dl dd span {
    vertical-align: middle
}

.sub-cont-group .app-price-box li .box-spec dl dd span:first-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    display: inline-block;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    margin-right: .5rem;
    width: 3rem
}

.sub-cont-group .app-price-box li .box-spec dl dd span:last-child {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 18px
}

.sub-cont-group .app-price-box li .box-spec dl dd:last-child {
    margin-bottom: 0
}

.sub-cont-group .list-box {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: flex;
    justify-content: space-between;
    row-gap: 2.5rem
}

.sub-cont-group .list-box li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    padding-bottom: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.25rem;
    text-align: left
}

.sub-cont-group .list-box li .box-title {
    align-items: center;
    -moz-column-gap: .25rem;
    column-gap: .25rem;
    display: flex
}

.sub-cont-group .list-box li .box-title h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.sub-cont-group .list-box li .box-cont {
    margin-top: 1rem
}

.sub-cont-group .list-box li .box-cont p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: .125rem;
    
}

.sub-cont-group .list-box li .box-cont p:last-child {
    margin-bottom: 0
}

.sub-cont-group .list-box li .box-cont p b {
    color: var(--text);
    font-size: inherit;
    font-weight: 500
}

.sub-cont-group .grid-col {
    display: grid
}

.sub-cont-group .grid-col.cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.sub-cont-group .grid-col.cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.sub-cont-group .grid-col.cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.sub-cont-group .grid-col.cols-5 {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

@media (max-width: 768px) {
    .sub-cont-group .caution-box {
        width:100%
    }

    .sub-cont-group .primary-box {
        row-gap: 1rem
    }

    .sub-cont-group .primary-box li {
        padding-bottom: 1rem;
        padding-top: 1rem;
        width: 100%
    }

    .sub-cont-group .app-price-box {
        flex-direction: column
    }

    .sub-cont-group .app-price-box li {
        width: 100%
    }

    .sub-cont-group .list-box {
        flex-direction: column
    }

    .sub-cont-group .list-box li {
        width: 100%!important
    }

    .sub-cont-group .grid-col.cols-2,.sub-cont-group .grid-col.cols-3,.sub-cont-group .grid-col.cols-4,.sub-cont-group .grid-col.cols-5 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }
}

.sub-cont-group .prd-scroll-info {
    display: none
}

.sub-cont-group .product-list {
    text-align: left
}

.sub-cont-group .product-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    margin-bottom: 1.25rem;
    margin-left: 15px;
    margin-right: 15px;
    padding: 1rem;
    position: relative;
    transition: .4s ease;
    width: 393px
}

.sub-cont-group .product-list li .prd-top {
    border-bottom-width: 1px;
    padding-bottom: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.5rem
}

.sub-cont-group .product-list li .prd-top .model {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem
}

.sub-cont-group .product-list li .prd-top .model span {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: inherit;
    margin-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: capitalize
}

.sub-cont-group .product-list li .prd-top .model span.dell {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .prd-top .model span.dell:before {
    content: "dell"
}

.sub-cont-group .product-list li .prd-top .model span.hp {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(96 165 250/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .prd-top .model span.hp:before {
    content: "HP"
}

.sub-cont-group .product-list li .prd-top .model span.lenovo {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .prd-top .model span.lenovo:before {
    content: "Lenovo"
}

.sub-cont-group .product-list li .prd-top .model span.fujitsu {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(220 38 38/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .prd-top .model span.fujitsu:before {
    content: "Fujitsu"
}

.sub-cont-group .product-list li .prd-top .model span.tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .prd-top .model span.antiserver {
    color: #333;
    font-size: 1.5rem!important;
    font-weight: 700;
    margin-left: .25rem
}

.sub-cont-group .product-list li .prd-top .model.model-title {
    color: var(--text)!important;
    font-weight: 700
}

.sub-cont-group .product-list li .prd-top .price-area {
    margin-top: .5rem
}

.sub-cont-group .product-list li .prd-top .price-area .list-price {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-right: .25rem;
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through;
    vertical-align: bottom
}

.sub-cont-group .product-list li .prd-top .price-area .list-price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .product-list li .prd-top .price-area .price {
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 700
}

.sub-cont-group .product-list li .prd-top .price-area .price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .product-list li .prd-top .price-area .price .month {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-right: .5rem;
    vertical-align: text-bottom
}

.sub-cont-group .product-list li .prd-top .price-area .text {
    display: inline-block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.sub-cont-group .product-list li .prd-spec {
    min-height: 140px;
    padding-bottom: .625rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .625rem
}

.sub-cont-group .product-list li .prd-spec p {
    margin-bottom: .5rem;
    margin-top: .5rem;
    position: relative
}

.sub-cont-group .product-list li .prd-spec p span {
    font-size: .875rem;
    line-height: 1.25rem
}

.sub-cont-group .product-list li .prd-spec p span:first-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-weight: 300;
    text-align: left;
    text-transform: capitalize
}

.sub-cont-group .product-list li .prd-spec p span:nth-child(2) {
    float: right;
    font-weight: 700
}

.sub-cont-group .product-list li .prd-spec i {
    font-size: 1.125rem;
    padding-left: .25rem;
    padding-right: .25rem
}

.sub-cont-group .product-list li .prd-spec dt {
    font-weight: 700;
    padding-top: .5rem;
    text-align: left
}

.sub-cont-group .product-list li .prd-spec dd {
    font-size: .875rem;
    line-height: 1.25rem;
    margin-left: .25rem;
    margin-top: .5rem;
    text-align: left;
    
}

.sub-cont-group .product-list li .prd-spec dd:before {
    color: var(--primary);
    content: "check";
    font-family: Material Icons;
    font-size: inherit;
    font-weight: 700;
    padding-right: .5rem
}

.sub-cont-group .product-list li .prd-spec dd:last-child {
    padding-bottom: 1rem
}

.sub-cont-group .product-list li .prd-spec dd span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    padding-left: 1rem
}

.sub-cont-group .product-list li .prd-spec dd i {
    padding-top: .125rem
}

.sub-cont-group .product-list li .prd-spec dd b {
    color: var(--primary);
    font-weight: 700
}

.sub-cont-group .product-list li .prd-adv {
    padding-bottom: 1.25rem;
    padding-left: .375rem;
    padding-right: .375rem;
    padding-top: 1.25rem
}

.sub-cont-group .product-list li .prd-adv p {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: .75rem;
    text-indent: 10px
}

.sub-cont-group .product-list li .prd-adv p.prd-adv-tit span {
    font-weight: 700;
    margin-left: 0;
    text-align: left
}

.sub-cont-group .product-list li .prd-adv p.prd-adv-tit span:before {
    content: none
}

.sub-cont-group .product-list li .prd-adv p span {
    display: inline-block;
    font-size: inherit;
    margin-left: .625rem;
    text-indent: -8px
}

.sub-cont-group .product-list li .prd-adv p span:before {
    content: "- "
}

.sub-cont-group .product-list li .prd-adv p.price {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: .5rem;
    margin-top: 1.5rem;
    padding-bottom: .375rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .375rem
}

.sub-cont-group .product-list li .prd-adv p.price span {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-left: 0;
    
}

.sub-cont-group .product-list li .prd-adv p.price span:first-child {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    text-align: left;
    text-transform: uppercase
}

.sub-cont-group .product-list li .prd-adv p.price span:nth-child(2) {
    --tw-text-opacity: 1;
    color: rgb(59 130 246/var(--tw-text-opacity));
    float: right
}

.sub-cont-group .product-list li .prd-adv p.price span i {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    margin-right: .5rem
}

.sub-cont-group .product-list li .prd-adv p.price span:before {
    content: none
}

.sub-cont-group .product-list li button {
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .product-list li:hover {
    border-color: var(--primary);
    transform: translateY(-20px);
    transition: .25s ease
}

.sub-cont-group .product-list li .badge {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem
}

.sub-cont-group .product-list li .badge p {
    display: inline-block;
    font-size: .75rem;
    line-height: 1rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: uppercase
}

.sub-cont-group .product-list li .badge p.best {
    --tw-text-opacity: 1;
    background-color: var(--point);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .badge p.best:before {
    content: "best"
}

.sub-cont-group .product-list li .badge p.event {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    animation: event 1.3s ease-in-out infinite;
    background-color: rgb(99 102 241/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .product-list li .badge p.event:before {
    content: "event"
}

.sub-cont-group .product-list.quater li {
    margin-left: 10px;
    margin-right: 10px;
    width: 297px
}

.sub-cont-group .product-list.quater li .prd-spec {
    padding-left: 0;
    padding-right: 0
}

.sub-cont-group .product-list.quick {
    text-align: center
}

.sub-cont-group .product-list.quick li {
    text-align: left;
    width: 500px
}

.sub-cont-group .product-list.quick .prd-top {
    min-height: 126px
}

.sub-cont-group .product-list.listUp li {
    min-height: 300px;
    position: relative
}

.sub-cont-group .product-list.listUp li .prd-spec p:before {
    content: "⊙";
    padding-right: .25rem
}

.sub-cont-group .product-list.listUp li button {
    bottom: 20px;
    left: 5%;
    position: absolute;
    width: 90%!important
}

.sub-cont-group .works-list {
    display: flex;
    text-align: left
}

.sub-cont-group .works-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    margin-bottom: 1.25rem;
    margin-left: .5rem;
    margin-right: .5rem;
    padding: 1rem;
    position: relative;
    transition: .4s ease;
    width: 25%
}

.sub-cont-group .works-list li .prd-top {
    border-bottom-width: 1px;
    padding: 1.25rem
}

.sub-cont-group .works-list li .prd-top .model {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem
}

.sub-cont-group .works-list li .prd-top .model span {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: inherit;
    margin-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: capitalize
}

.sub-cont-group .works-list li .prd-top .model span.tag {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .works-list li .prd-top .price-area {
    margin-top: .5rem
}

.sub-cont-group .works-list li .prd-top .price-area .list-price {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-right: .25rem;
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through;
    vertical-align: bottom
}

.sub-cont-group .works-list li .prd-top .price-area .list-price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .works-list li .prd-top .price-area .price {
    display: inline-block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.sub-cont-group .works-list li .prd-top .price-area .price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .works-list li .prd-top .price-area .price .monthly {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-right: .5rem;
    vertical-align: text-bottom
}

.sub-cont-group .works-list li .prd-top .price-area .text {
    display: inline-block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.sub-cont-group .works-list li .prd-spec {
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem
}

.sub-cont-group .works-list li .prd-spec p {
    margin-bottom: .5rem;
    margin-top: .5rem
}

.sub-cont-group .works-list li .prd-spec p span:first-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-weight: 300;
    text-align: left;
    text-transform: capitalize
}

.sub-cont-group .works-list li .prd-spec p span:nth-child(2) {
    float: right;
    font-weight: 700
}

.sub-cont-group .works-list li button {
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .works-list li:hover {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    transform: translateY(-10px);
    transition: .25s ease
}

.sub-cont-group .works-list li .badge {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem
}

.sub-cont-group .works-list li .badge p {
    display: inline-block;
    font-size: .75rem;
    line-height: 1rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: uppercase
}

.sub-cont-group .works-list li .badge p.best {
    --tw-text-opacity: 1;
    background-color: var(--point);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .works-list li .badge p.best:before {
    content: "best"
}

.sub-cont-group .works-list li .badge p.event {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    animation: event 1.3s ease-in-out infinite;
    background-color: rgb(99 102 241/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .works-list li .badge p.event:before {
    content: "event"
}

.sub-cont-group .ssl-list {
    text-align: left
}

.sub-cont-group .ssl-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    margin-bottom: 1.25rem;
    margin-left: .5rem;
    margin-left: 15px;
    margin-right: .5rem;
    margin-right: 15px;
    padding: 1rem;
    position: relative;
    transition: .4s ease;
    width: 393px
}

.sub-cont-group .ssl-list li .prd-top {
    border-bottom-width: 1px;
    padding: 1.25rem
}

.sub-cont-group .ssl-list li .prd-top .model {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.5rem;
    line-height: 2rem
}

.sub-cont-group .ssl-list li .prd-top .model span {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: inherit;
    margin-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    text-transform: capitalize
}

.sub-cont-group .ssl-list li .prd-top .model span.dell {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .ssl-list li .prd-top .model span.dell:before {
    content: "dell"
}

.sub-cont-group .ssl-list li .prd-top .model span.hp {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .ssl-list li .prd-top .model span.hp:before {
    content: "HP"
}

.sub-cont-group .ssl-list li .prd-top .model span.lenovo {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .ssl-list li .prd-top .model span.lenovo:before {
    content: "Lenovo"
}

.sub-cont-group .ssl-list li .prd-top .price-area {
    margin-top: .5rem
}

.sub-cont-group .ssl-list li .prd-top .price-area p {
    display: inline-block
}

.sub-cont-group .ssl-list li .prd-top .price-area p.list-price {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-right: .25rem;
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through;
    vertical-align: bottom
}

.sub-cont-group .ssl-list li .prd-top .price-area p.list-price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .ssl-list li .prd-top .price-area p.listPrice {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through
}

.sub-cont-group .ssl-list li .prd-top .price-area p.price {
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.sub-cont-group .ssl-list li .prd-top .price-area p.price:after {
    content: "원";
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .ssl-list li .prd-top .price-area p.date {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-left: .25rem;
    vertical-align: bottom
}

.sub-cont-group .ssl-list li .prd-top .price-area p.date:before {
    content: "/";
    margin-right: .25rem
}

.sub-cont-group .ssl-list li .prd-spec p {
    margin-bottom: .75rem;
    margin-top: .75rem
}

.sub-cont-group .ssl-list li .prd-spec p span:first-child {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-weight: 700;
    text-align: left;
    text-transform: uppercase
}

.sub-cont-group .ssl-list li .prd-spec p span:last-child {
    float: right
}

.sub-cont-group .ssl-list li button {
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .ssl-list li:hover {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    transform: translateY(-10px);
    transition: .25s ease
}

.sub-cont-group .ssl-list li .badge {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem
}

.sub-cont-group .ssl-list li .badge p {
    display: inline-block;
    font-size: .75rem;
    line-height: 1rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .25rem;
    text-transform: uppercase
}

.sub-cont-group .ssl-list li .badge p.best {
    --tw-text-opacity: 1;
    background-color: var(--point);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .ssl-list li .badge p.best:before {
    content: "best"
}

.sub-cont-group .ssl-list li .badge p.event {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    animation: event 1.3s ease-in-out infinite;
    background-color: rgb(99 102 241/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.sub-cont-group .ssl-list li .badge p.event:before {
    content: "event"
}

.sub-cont-group .half-list li {
    border-width: 1px;
    margin-left: 0;
    min-height: 170px;
    overflow-wrap: break-word;
    padding: 1.75rem;
    width: 49%;
    
}

.sub-cont-group .half-list li:nth-child(2n-1) {
    margin-right: 2%
}

.sub-cont-group .half-list li.prd {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: .375rem;
    padding: 2.5rem;
    transition: .3s ease-in-out
}

.sub-cont-group .half-list li.prd:hover {
    transform: scale(102%);
    transition: .3s ease-in-out
}

.sub-cont-group .half-list li.prd p {
    display: inline-block
}

.sub-cont-group .half-list li.prd p.title {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.sub-cont-group .half-list li.prd p.price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    margin-top: .5rem
}

.sub-cont-group .half-list li.prd p.ha-price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    margin-top: .5rem
}

.sub-cont-group .half-list li.prd p.ha-price:after {
    content: "원"
}

.sub-cont-group .half-list li.prd p.ha-price .sub {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.75rem
}

.sub-cont-group .half-list li.prd p.ha-price .sub:after {
    content: "원"
}

.sub-cont-group .half-list li.prd .detail {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-top-width: 1px;
    margin-top: 1.25rem;
    width: 100%
}

.sub-cont-group .half-list li .mntr-support li {
    --tw-text-opacity: 1;
    border-width: 0;
    color: rgb(75 85 99/var(--tw-text-opacity));
    margin-right: -1rem;
    margin-top: 1.25rem;
    min-height: 0;
    text-align: center;
    width: 33.333333%
}

.sub-cont-group .half-list li .mntr-support li.support_ok {
    background: transparent
}

.sub-cont-group .half-list li .mntr-support li.support_ok:before {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity));
    border-radius: .375rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: "O";
    margin-right: .5rem;
    padding-bottom: .125rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .125rem
}

.sub-cont-group .half-list li .mntr-support li.support_none {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity))
}

.sub-cont-group .half-list li .mntr-support li.support_none:before {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(220 38 38/var(--tw-bg-opacity));
    border-radius: .375rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: "X";
    margin-right: .5rem;
    padding-bottom: .125rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .125rem
}

.sub-cont-group .half-list li span {
    font-size: inherit;
    font-weight: inherit
}

.sub-cont-group .cost-list li {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: 0;
    min-height: 300px;
    overflow-wrap: break-word;
    padding: 0;
    width: 49%;
    
}

.sub-cont-group .cost-list li:nth-child(2n-1) {
    margin-right: 2%
}

.sub-cont-group .cost-list li h2 {
    font-weight: 700;
    padding: 2rem
}

.sub-cont-group .cost-list li .cost {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    border-top-width: 1px;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem
}

.sub-cont-group .cost-list li .cost-box {
    padding: 2rem
}

.sub-cont-group .cost-list li .cost-box h4 {
    font-weight: 700;
    margin-bottom: .75rem
}

.sub-cont-group .cost-list li .cost-box p {
    margin-bottom: .5rem
}

.sub-cont-group .cost-list li .cost-box p:last-child {
    margin-bottom: 0
}

.sub-cont-group .cost-list li .cost-box p:before {
    content: "-";
    margin-right: .5rem
}

.sub-cont-group .cost-list li .cost-box p span {
    font-weight: 700
}

.sub-cont-group .cost-list li .cost-box p span:before {
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity));
    content: "+";
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-left: .75rem;
    margin-right: .75rem
}

.sub-cont-group .mntr-list {
    margin-bottom: 1.25rem;
    margin-top: 2.5rem;
    width: 100%
}

.sub-cont-group .mntr-list li {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .375rem;
    border-width: 1px;
    color: rgb(209 213 219/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    margin-bottom: .25rem;
    margin-left: .25rem;
    margin-right: .25rem;
    padding-bottom: .375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .375rem
}

.sub-cont-group .mntr-list li.on,.sub-cont-group .mntr-list li:hover {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(59 130 246/var(--tw-border-opacity));
    color: rgb(59 130 246/var(--tw-text-opacity))
}

.sub-cont-group .service-list li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    display: inline-block;
    margin-bottom: 1rem;
    margin-left: 2%;
    margin-right: -.25rem;
    padding: 1.75rem;
    width: 32%
}

.sub-cont-group .service-list li:nth-child(3n-2) {
    margin-left: 0
}

.sub-cont-group .service-list li ul {
    border-bottom-width: 1px;
    height: 24rem
}

.sub-cont-group .service-list li ul li {
    border-width: 0;
    display: inline-block;
    padding: 0;
    width: 25%
}

.sub-cont-group .microsoft-list {
    display: flex;
    gap: 2.5rem;
    justify-content: space-between
}

.sub-cont-group .microsoft-list>li {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    padding: 1.75rem;
    width: 32%
}

.sub-cont-group .microsoft-list>li:nth-child(3n-2) {
    margin-left: 0
}

.sub-cont-group .microsoft-list>li .model {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

.sub-cont-group .microsoft-list>li .cost {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-top-width: 1px;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    text-align: center
}

.sub-cont-group .microsoft-list>li .cost:after {
    content: none;
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: text-bottom
}

.sub-cont-group .microsoft-list>li .cost span {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-left: .5rem;
    vertical-align: text-bottom;
    white-space: pre
}

.sub-cont-group .microsoft-list>li .cost span.price {
    color: var(--primary);
    font-size: 1.875rem;
    line-height: 2.25rem
}

.sub-cont-group .microsoft-list>li .cost span.price:after {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    content: "원/월";
    font-size: 1rem;
    line-height: 1.5rem
}

.sub-cont-group .microsoft-list>li ul {
    height: 24rem;
    text-align: left
}

.sub-cont-group .microsoft-list>li ul li {
    --tw-text-opacity: 1;
    border-width: 0;
    color: rgb(107 114 128/var(--tw-text-opacity));
    display: inline-block;
    font-size: .875rem;
    height: 7rem;
    line-height: 1.25rem;
    margin-bottom: .5rem;
    padding: 0;
    text-align: center;
    width: 82px
}

.sub-cont-group .microsoft-list>li ul li img {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    margin-bottom: .25rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem
}

.sub-cont-group .microsoft-list>li ul li p {
    color: inherit;
    font-size: .75rem;
    line-height: 1rem;
    margin-top: -.125rem
}

.sub-cont-group .ssl-brand-list li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .5rem;
    border-width: 1px;
    display: inline-block;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    overflow: hidden;
    width: 33.333333%
}

.sub-cont-group .ssl-brand-list li .img-box {
    border-bottom-width: 1px;
    height: 10rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem
}

.sub-cont-group .ssl-brand-list li .img-box img {
    margin-left: auto;
    margin-right: auto
}

.sub-cont-group .ssl-brand-list li .ssl-brand {
    margin-top: 1.25rem;
    text-align: left
}

.sub-cont-group .ssl-brand-list li .ssl-brand p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    margin-bottom: .5rem;
    padding-left: 1.25rem;
    position: relative
}

.sub-cont-group .ssl-brand-list li .ssl-brand p:before {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity));
    border-radius: 9999px;
    content: "";
    height: .375rem;
    left: 0;
    position: absolute;
    top: .375rem;
    width: .375rem
}

.sub-cont-group .ssl-brand-list li .ssl-brand p:last-child {
    margin-bottom: 0
}

.sub-cont-group .down-link-list>li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem;
    width: 960px
}

.sub-cont-group .down-link-list>li:last-child {
    margin-bottom: 0
}

.sub-cont-group .down-link-list>li:hover {
    border-color: var(--primary)
}

.sub-cont-group .down-link-list>li .list-left i {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin-right: .5rem;
    vertical-align: middle
}

.sub-cont-group .down-link-list>li .list-right span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    margin-right: 1rem
}

.sub-cont-group .down-link-list>li .list-right button {
    color: var(--important-blue);
    font-weight: 700
}

.sub-cont-group .faq-area ul {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(55 65 81/var(--tw-border-opacity));
    border-top-width: 1px;
    margin-left: auto;
    margin-right: auto;
    width: 75%
}

.sub-cont-group .faq-area ul li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 0;
    border-bottom-width: 1px;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%
}

.sub-cont-group .faq-area ul li:last-child {
    border-bottom-width: 0
}

.sub-cont-group .faq-area ul li p {
    cursor: pointer;
    font-weight: 700;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem
}

.sub-cont-group .faq-area ul li p:after {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    content: "â–¼";
    float: right;
    font-size: .75rem;
    line-height: 1rem;
    margin-top: .25rem;
    transition: .3s ease-in-out
}

.sub-cont-group .faq-area ul li p.on,.sub-cont-group .faq-area ul li p:hover,.sub-cont-group .faq-area ul li p:hover:after {
    color: var(--primary)
}

.sub-cont-group .faq-area ul li p.on:after {
    color: var(--primary);
    transform: rotate(180deg);
    transition: .3s ease-in-out
}

.sub-cont-group .faq-area ul li p .mark {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-right: .75rem;
    vertical-align: middle
}

.sub-cont-group .faq-area ul li .faq-answer {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    display: none;
    font-size: .875rem;
    line-height: 1.25rem;
    padding: 1.5rem;
    padding-left: 3.5rem;
    position: relative
}

.sub-cont-group .faq-area ul li .faq-answer .mark {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.125rem;
    font-weight: 700;
    left: 2.25rem;
    line-height: 1.75rem;
    margin-right: .75rem;
    margin-top: -.125rem;
    position: absolute
}

.sub-cont-group .option-list {
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
    display: flex;
    justify-content: space-between
}

.sub-cont-group .option-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    text-align: left;
    width: 400px
}

.sub-cont-group .option-list li .list-top h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem
}

.sub-cont-group .option-list li .list-top h3 i {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    margin-right: .5rem
}

.sub-cont-group .option-list li .list-top p {
    text-wrap: balance;
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .5rem;
    min-height: 5rem;
    
}

.sub-cont-group .option-list li .list-bottom p {
    align-items: center;
    display: flex
}

.sub-cont-group .option-list li .list-bottom p strong {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-right: .5rem
}

.sub-cont-group .option-list li .list-bottom p span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    vertical-align: text-bottom
}

.sub-cont-group .check-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 1px;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: flex;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: .75rem;
    width: 100%
}

.sub-cont-group .check-list li:last-child {
    margin-bottom: 0
}

.sub-cont-group .check-list li .check-box {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .125rem;
    border-width: 1px;
    height: 1.5rem;
    position: relative;
    width: 1.5rem
}

.sub-cont-group .check-list li.check {
    border-color: var(--important-red)
}

.sub-cont-group .check-list li.check .check-box {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity))
}

.sub-cont-group .check-list li.check .check-box i {
    bottom: 0;
    color: var(--important-red);
    left: .25rem;
    position: absolute
}

.sub-cont-group .toggle-list {
    --tw-border-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: auto;
    margin-right: auto;
    width: 960px
}

.sub-cont-group .toggle-list li {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    cursor: pointer;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem
}

.sub-cont-group .toggle-list li:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.sub-cont-group .toggle-list li:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem
}

.sub-cont-group .toggle-list li .list-title-area {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.sub-cont-group .toggle-list li .list-title-area p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.sub-cont-group .toggle-list li .list-title-area p i {
    color: inherit;
    margin-right: .75rem
}

.sub-cont-group .toggle-list li .list-title-area>i {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 1px;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1rem;
    height: 2rem;
    line-height: 1.5rem;
    line-height: 2rem;
    line-height: 31px;
    padding-left: 5px;
    transform: rotate(90deg);
    vertical-align: middle;
    width: 2rem
}

.sub-cont-group .toggle-list li .toggle-cont {
    display: none;
    margin-top: 1.5rem;
    text-align: left
}

.sub-cont-group .toggle-list li.on {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.sub-cont-group .toggle-list li.on .list-title-area p {
    color: var(--primary)
}

.sub-cont-group .toggle-list li.on .list-title-area>i {
    padding-left: 6px;
    transform: rotate(-90deg)
}

.sub-cont-group .toggle-list li.on .toggle-cont {
    display: block
}

.sub-cont-group .toggle-list li:hover .list-title-area p {
    color: var(--primary)
}

.sub-cont-group .text-list {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: 1rem;
    padding: 1.5rem
}

.sub-cont-group .text-list li {
    margin-bottom: .5rem;
    text-align: left;
    
}

.sub-cont-group .text-list li:last-child {
    margin-bottom: 0
}

.sub-cont-group .ssl-info-event {
    display: flex
}

.sub-cont-group .ssl-info-event .ssl-info-img {
    border-radius: .5rem;
    border-width: 1px;
    height: -moz-fit-content;
    height: fit-content;
    margin-right: 2rem;
    overflow: hidden;
    width: 50%
}

.sub-cont-group .ssl-info-event .ssl-info-text {
    width: 50%
}

.sub-cont-group .ssl-info-event .ssl-info-text p {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: .75rem;
    padding-top: .75rem;
    text-align: left
}

.sub-cont-group .ssl-info-list {
    margin-top: 5rem
}

.sub-cont-group .ssl-info-list ul {
    display: flex
}

.sub-cont-group .ssl-info-list ul li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .5rem;
    border-width: 1px;
    display: inline-block;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    width: 33.333333%
}

.sub-cont-group .ssl-info-list ul li p {
    border-bottom-width: 1px
}

.sub-cont-group .ssl-info-list ul li .hc-info-box {
    padding: 2.5rem
}

.sub-cont-group .ssl-info-list ul li .hc-info-box h3 {
    margin-bottom: .75rem
}

.sub-cont-group .ssl-info-list ul li .hc-info-box p {
    border-bottom-width: 0
}

.sub-cont-group .recs li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem;
    width: 80%
}

.sub-cont-group .recs li p {
    margin-left: 1rem;
    position: relative;
    z-index: 1
}

.sub-cont-group .recs li dl {
    margin-left: 1.5rem;
    position: relative;
    z-index: 1
}

.sub-cont-group .recs li dl dt {
    font-weight: 700;
    padding-bottom: .5rem;
    text-align: left;
    
}

.sub-cont-group .recs li dl dd {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    text-align: left;
    
}

.sub-cont-group .recs li span {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(224 231 255/var(--tw-bg-opacity));
    color: rgb(55 65 81/var(--tw-text-opacity));
    font-weight: 600;
    height: 20px;
    width: 100%
}

.sub-cont-group .recs li .checkbox {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity));
    border-radius: .125rem;
    flex-shrink: 0;
    height: 25px;
    position: relative;
    width: 25px
}

.sub-cont-group .recs li .checkbox i {
    color: var(--primary);
    font-size: 30px;
    position: absolute;
    right: -10px;
    top: -5px;
    z-index: 1
}

.sub-cont-group .recs li:nth-child(2n) {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem
}

.sub-cont-group .icon-boxlist {
    display: grid;
    gap: 1.5rem
}

.sub-cont-group .icon-boxlist>li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    text-align: left
}

.sub-cont-group .icon-boxlist>li .list-top h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    
}

.sub-cont-group .icon-boxlist>li .list-top h3 i {
    margin-right: .5rem
}

.sub-cont-group .icon-boxlist>li .list-top p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .5rem;
    min-height: 5rem;
}

.sub-cont-group .icon-boxlist>li .list-top>i {
    color: var(--text);
    font-size: 1.875rem;
    line-height: 2.25rem;
    padding-bottom: 1rem
}

.sub-cont-group .icon-boxlist>li .list-bottom ul {
    margin-top: .5rem;
    min-height: 5rem
}

.sub-cont-group .icon-boxlist>li .list-bottom ul li {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    list-style-position: outside;
    list-style-type: disc;
    margin-left: 1rem;
    
}

.sub-cont-group .icon-boxlist.cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.sub-cont-group .icon-boxlist.cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.sub-cont-group .icon-boxlist.cols-5 {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

@media (max-width: 1279px) {
    .sub-area-bottom .product-wrap {
        overflow-y:auto;
        width: 100%
    }

    .sub-area-bottom .product-wrap::-webkit-scrollbar {
        display: none
    }

    .sub-area-bottom .product-wrap .prd-scroll-info {
        --tw-bg-opacity: 1;
        --tw-bg-opacity: 0.9;
        background-color: rgb(75 85 99/var(--tw-bg-opacity));
        border-radius: .375rem;
        padding-bottom: .5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: .5rem;
        position: absolute;
        z-index: 10
    }

    .sub-area-bottom .product-wrap .prd-scroll-info p {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .sub-area-bottom .product-wrap .product-list,.sub-area-bottom .product-wrap .ssl-list {
        display: inline-flex;
        width: -moz-fit-content;
        width: fit-content
    }

    .sub-area-bottom .product-wrap .product-list li,.sub-area-bottom .product-wrap .ssl-list li {
        width: 360px
    }

    .sub-area-bottom .product-wrap .product-list li:hover,.sub-area-bottom .product-wrap .ssl-list li:hover {
        transform: unset;
        transition: unset
    }

    .sub-area-bottom .product-wrap .product-list li .prd-spec p,.sub-area-bottom .product-wrap .ssl-list li .prd-spec p {
        height: -moz-fit-content;
        height: fit-content
    }

    .sub-area-bottom .product-wrap .product-list.quick li,.sub-area-bottom .product-wrap .ssl-list.quick li {
        width: 380px
    }
}

@media (min-width: 769px) and (max-width:1279px) {
    .sub-cont-group .down-link-list li,.sub-cont-group .faq-area ul {
        width:100%
    }

    .sub-cont-group .option-list {
        -moz-column-gap: 2%;
        column-gap: 2%;
        row-gap: 1rem
    }

    .sub-cont-group .mntr-list {
        margin-bottom: 1.25rem;
        margin-top: 2.5rem;
        width: 100%
    }

    .sub-cont-group .mntr-list li {
        --tw-border-opacity: 1;
        --tw-text-opacity: 1;
        border-color: rgb(209 213 219/var(--tw-border-opacity));
        border-radius: 20px;
        border-width: 2px;
        color: rgb(209 213 219/var(--tw-text-opacity));
        cursor: pointer;
        display: inline-block;
        margin-left: .625rem;
        margin-right: .625rem;
        padding-bottom: .5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: .5rem
    }

    .sub-cont-group .mntr-list li.on,.sub-cont-group .mntr-list li:hover {
        --tw-border-opacity: 1;
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity));
        border-color: rgb(59 130 246/var(--tw-border-opacity));
        color: rgb(59 130 246/var(--tw-text-opacity));
        font-weight: 700
    }

    .sub-cont-group .toggle-list {
        width: unset
    }

    .sub-cont-group .microsoft-list>li .model {
        white-space: nowrap
    }

    .sub-cont-group .microsoft-list>li ul {
        overflow: auto
    }

    .sub-cont-group .microsoft-list>li ul li {
        width: 70px
    }

    .sub-cont-group .ssl-brand-list li {
        width: 91.666667%
    }

    .sub-cont-group .ssl-brand-list li:first-child {
        margin-bottom: 2.5rem
    }

    .sub-cont-group .ssl-brand-list li .img-box {
        height: unset
    }

    .sub-cont-group .ssl-brand-list li .img-box img {
        width: 200px
    }

    .sub-cont-group .icon-boxlist {
        gap: .5rem!important
    }

    .sub-cont-group .icon-boxlist.cols-3,.sub-cont-group .icon-boxlist.cols-5 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .sub-cont-group .icon-boxlist.cols-4 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .sub-cont-group .product-wrap .int {
        display: grid!important;
        grid-template-columns: repeat(7,1fr)!important
    }
}

@media (max-width: 768px) {
    .sub-cont-group .sub-area .sub-area-bottom .product-list li .prd-spec,.sub-cont-group .sub-area .sub-area-bottom .ssl-list li .prd-spec {
        padding-left:0;
        padding-right: 0
    }

    .sub-cont-group .sub-area .sub-area-bottom .product-list.colocation li,.sub-cont-group .sub-area .sub-area-bottom .ssl-list.colocation li {
        width: 300px
    }

    .sub-cont-group .sub-area .sub-area-bottom .product-list.colocation li img,.sub-cont-group .sub-area .sub-area-bottom .ssl-list.colocation li img {
        display: none
    }

    .sub-cont-group .sub-area .sub-area-bottom .ssl-brand-list li {
        margin-left: auto;
        margin-right: auto;
        margin-top: .75rem;
        width: 90%
    }

    .sub-cont-group .sub-area .sub-area-bottom .product-wrap .int {
        display: grid!important;
        grid-template-columns: repeat(7,1fr)!important
    }

    .sub-cont-group .down-link-list li {
        flex-wrap: wrap;
        padding-bottom: 1.25rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.25rem;
        row-gap: .5rem;
        width: 100%;
        
    }

    .sub-cont-group .down-link-list li .list-left {
        text-align: left
    }

    .sub-cont-group .faq-area .faq-list {
        width: 100%
    }

    .sub-cont-group .faq-area .faq-list li p {
        display: flex;
        padding-bottom: 1rem;
        padding-left: .75rem;
        padding-right: .75rem;
        padding-right: 2rem;
        padding-top: 1rem;
        position: relative
    }

    .sub-cont-group .faq-area .faq-list li p:after {
        position: absolute;
        right: 1rem
    }

    .sub-cont-group .faq-area .faq-list li .faq-answer {
        padding-bottom: .875rem;
        padding-left: 3.5rem;
        padding-right: .75rem;
        padding-top: .875rem
    }

    .sub-cont-group .option-list {
        flex-direction: column;
        row-gap: 1rem
    }

    .sub-cont-group .option-list li {
        width: 100%
    }

    .sub-cont-group .option-list li .badge {
        position: absolute;
        right: .5rem;
        top: .5rem
    }

    .sub-cont-group .option-list li .badge p {
        font-size: .875rem;
        line-height: 1.25rem;
        padding-bottom: .125rem;
        padding-left: .375rem;
        padding-right: .375rem;
        padding-top: .125rem
    }

    .sub-cont-group .toggle-list {
        width: unset
    }

    .sub-cont-group .toggle-list li {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .sub-cont-group .microsoft-list {
        flex-direction: column
    }

    .sub-cont-group .microsoft-list>li {
        width: 100%
    }

    .sub-cont-group .microsoft-list>li ul {
        height: -moz-fit-content;
        height: fit-content
    }

    .sub-cont-group .text-list {
        border-radius: .5rem
    }

    .sub-cont-group .text-list li {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .sub-cont-group .ssl-info {
        display: block
    }

    .sub-cont-group .ssl-info .ssl-info-img {
        margin-bottom: .5rem;
        width: 75%
    }

    .sub-cont-group .ssl-info .ssl-info-img,.sub-cont-group .ssl-info .ssl-info-text {
        margin-left: auto;
        margin-right: auto
    }

    .sub-cont-group .ssl-info .ssl-info-text {
        width: 75%
    }

    .sub-cont-group .ssl-info .ssl-info-text p {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .sub-cont-group .ssl-info-list {
        margin-top: 2.5rem;
        overflow-y: auto
    }

    .sub-cont-group .ssl-info-list ul {
        display: inline-flex
    }

    .sub-cont-group .ssl-info-list ul li {
        width: 300px
    }

    .sub-cont-group .recs li {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
        width: 100%!important
    }

    .sub-cont-group .recs li p {
        text-align: left!important;
        !important
    }

    .sub-cont-group .icon-boxlist {
        row-gap: 1rem
    }

    .sub-cont-group .icon-boxlist>li {
        padding-bottom: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1.5rem;
        width: 100%
    }

    .sub-cont-group .icon-boxlist>li p,.sub-cont-group .icon-boxlist>li ul {
        min-height: unset!important
    }

    .sub-cont-group .icon-boxlist>li ul li {
        margin-left: .5rem;
        padding-bottom: .25rem
    }

    .sub-cont-group .icon-boxlist.cols-3,.sub-cont-group .icon-boxlist.cols-4,.sub-cont-group .icon-boxlist.cols-5 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }
}

table {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    width: 80%
}

table td,table th {
    
}

table td:first-child,table th:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

table th {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-width: 1px;
    border-bottom: double #aaa
}

table th:first-child {
    border-right: 1px solid #ddd
}

table th.up {
    border-bottom: 1px solid #ddd
}

table td {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    color: rgb(75 85 99/var(--tw-text-opacity))
}

table td.checkBlue:before {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 2px;
    content: "";
    display: block;
    height: 1rem;
    width: 1rem
}

table td.checkBlue:before,table td.checkBlueFull:before {
    margin-left: auto;
    margin-right: auto
}

table td.checkBlueFull:before {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235/var(--tw-bg-opacity));
    border-color: rgb(37 99 235/var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 2px;
    content: "";
    display: block;
    height: 1rem;
    width: 1rem
}

table td.checkGreen:before {
    border-color: #32cd32;
    border-radius: 9999px;
    border-width: 2px;
    content: "";
    display: block;
    height: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 1rem
}

table td.price {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

table td:first-child {
    --tw-text-opacity: 1;
    color: rgb(31 41 55/var(--tw-text-opacity))
}

table caption {
    font-size: 0
}

table.managed {
    width: 100%
}

table.managed tr td {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    color: rgb(31 41 55/var(--tw-text-opacity))
}

table.managed tr td:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

table.managed tr td.column4 {
    font-weight: 400;
    line-height: 1.8em;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: left
}

table.appGuard tbody tr td {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    color: rgb(107 114 128/var(--tw-text-opacity))
}

table.appGuard tbody tr:first-child td:first-child,table.appGuard tbody tr:nth-child(6) td:first-child,table.appGuard tbody tr:nth-child(11) td:first-child {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    color: rgb(31 41 55/var(--tw-text-opacity))
}

.msoffice-table {
    width: 100%!important
}

.msoffice-table ul li {
    --tw-text-opacity: 1;
    border-width: 0;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    margin: 0;
    padding: 0;
    padding-left: .75rem;
    position: relative;
    width: 100%;
    
}

.msoffice-table ul li:before {
    content: "-";
    left: 0;
    position: absolute
}

.fortyTable {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    width: 100%
}

.fortyTable td:nth-child(2),.fortyTable th:nth-child(2) {
    border-right: 1px solid #ccc
}

.securityTable tr.blueTable {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255/var(--tw-bg-opacity))
}

.securityTable tr.blueTable td:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254/var(--tw-bg-opacity))
}

.securityTable tr td,.securityTable tr th {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity))
}

.securityTable tr td {
    --tw-text-opacity: 1;
    background: transparent;
    color: rgb(75 85 99/var(--tw-text-opacity));
    
}

.securityTable tr td b {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity));
    font-weight: 700
}

.securityTable tr td b:before {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38/var(--tw-bg-opacity));
    border-radius: 9999px;
    content: "";
    display: block;
    height: .25rem;
    width: .25rem
}

.securityTable tr td:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    font-weight: 700;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: left
}

.securityTable tr td p {
    padding-left: 1.25rem;
    position: relative
}

.securityTable tr td p:before {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175/var(--tw-bg-opacity));
    border-radius: 9999px;
    content: "";
    display: block;
    height: .625rem;
    left: 0;
    position: absolute;
    top: .375rem;
    width: .625rem
}

@media (min-width: 769px) and (max-width:1279px) {
    .sub-cont-group .sub-area .sub-area-bottom table {
        width:100%
    }
}

@media (max-width: 768px) {
    .sub-cont-group .sub-area .sub-area-bottom table {
        width:100%
    }
}

[class*=btn] {
    --tw-text-opacity: 1;
    background: var(--bg-black);
    border-radius: .25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .5rem 1.25rem
}

[class*=btn]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128/var(--tw-bg-opacity))
}

.btn-danger {
    background: var(--red)
}

.btn-danger:hover {
    background: var(--red-hover)
}

.btn-primary {
    background: var(--primary)
}

.btn-primary:hover {
    background: var(--secondary)
}

.btn-line-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: var(--primary);
    border-width: 1px;
    color: var(--primary)
}

.btn-line-primary:hover {
    --tw-text-opacity: 1;
    background-color: var(--primary);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.btn-line-red {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: var(--important-red);
    border-width: 1px;
    color: var(--important-red)
}

.btn-line-red:hover {
    --tw-text-opacity: 1;
    background-color: var(--important-red);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.btn-line-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: var(--important-blue);
    border-width: 1px;
    color: var(--important-blue)
}

.btn-line-blue:hover {
    --tw-text-opacity: 1;
    background-color: var(--important-blue);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.btn-line-gray {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(156 163 175/var(--tw-border-opacity));
    border-width: 1px;
    color: rgb(107 114 128/var(--tw-text-opacity))
}

.btn-line-gray:hover {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(156 163 175/var(--tw-bg-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}

[class*=btn-bnr] {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 9999px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    min-width: 150px;
    padding: 1rem 2.25rem
}

[class*=btn-bnr]:hover {
    background: var(--bg-light)
}

.btn-bnr-thin {
    padding-bottom: .75rem;
    padding-top: .75rem
}

.btn-size-lg {
    font-size: .875rem;
    line-height: 1.25rem;
    min-width: 150px
}

.btn-size-xl {
    font-size: 1rem;
    line-height: 1.5rem;
    min-width: 150px
}

button[class*=text] {
    color: var(--blue);
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

ul[class*=tab] li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    color: rgb(156 163 175/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    margin-right: 1.5rem;
    padding: .5rem 2.25rem
}

ul[class*=tab] li:last-child {
    margin-right: 0!important
}

ul[class*=tab] li.on,ul[class*=tab] li:hover {
    border-color: var(--primary);
    color: var(--primary)
}

ul[class*=tab] li:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

ul[class*=tab-round] li {
    border-radius: 9999px;
    margin-right: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

ul.tab-round-line li {
    border-color: var(--default);
    color: var(--text)
}

ul.tab-round-line li.on,ul.tab-round-line li:hover {
    --tw-text-opacity: 1;
    background: var(--default);
    border-color: var(--default);
    color: rgb(255 255 255/var(--tw-text-opacity))
}

ul.tab-round-xl li {
    padding: 1rem 2.5rem
}

@media (max-width: 1280px) {
    .btn-bnr {
        padding:.5rem 1.5rem
    }

    .btn-btn-thin {
        padding-bottom: .5rem;
        padding-top: .5rem
    }
}

@media (max-width: 768px) {
    button[class*=btn-bnr] {
        min-width:unset;
        padding: .5rem 1.5rem
    }

    .btn-bnr-thin {
        padding-bottom: .5rem;
        padding-top: .5rem
    }

    ul[class*=tab] {
        display: flex;
        flex-direction: column;
        row-gap: .75rem
    }

    ul[class*=tab] li {
        margin-right: 0
    }
}

.tooltip {
    color: var(--yellow)!important;
    margin-left: .25rem;
    position: relative
}

.tooltip .tooltip-text {
    background: wheat;
    border-radius: .5rem;
    border-width: 1px;
    color: #333;
    font-size: .875rem;
    height: auto;
    left: 0;
    line-height: 1.25rem;
    min-width: 11rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    position: absolute;
    top: 25px;
    visibility: hidden;
    white-space: normal;
    width: auto;
    width: -moz-fit-content;
    width: fit-content
}

.tooltip:hover .tooltip-text {
    visibility: visible
}

.popup-layout {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55/var(--tw-border-opacity));
    border-width: 1px;
    position: absolute;
    right: 10rem;
    top: 10rem;
    z-index: 1002
}

.popup-layout .popup-area {
    height: -moz-fit-content;
    height: fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.popup-layout .popup-area img {
    width: 400px
}

.popup-layout .popup-area .popUpFooter {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(107 114 128/var(--tw-bg-opacity));
    display: flex;
    justify-content: space-between;
    padding: .375rem
}

.popup-layout#popUp1 {
    right: 26.5rem!important
}

.popup-layout#popUp1 img {
    width: 400px!important
}

.popup-layout#popUp2 {
    right: 20rem!important
}

.popup-layout#popUp2 img {
    width: 400px!important
}

@media (max-width: 768px) {
    .popup-layout {
        --tw-bg-opacity:0.85;
        background-color: rgb(55 65 81/var(--tw-bg-opacity));
        border-width: 0;
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw
    }

    .popup-layout .popup-area {
        margin-top: 10vw
    }

    .popup-layout .popup-area,.popup-layout .popup-area img {
        margin-left: auto;
        margin-right: auto
    }

    .popup-layout .popup-area img {
        max-width: 77%
    }

    .popup-layout .popup-area .popUpFooter {
        background: transparent
    }

    .popup-layout .popup-area .popUpFooter a {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
    }

    .popup-layout#popUp1,.popup-layout#popUp2 {
        --tw-bg-opacity: 0
    }
}

.landing a span:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39/var(--tw-bg-opacity));
    border-color: rgba(17,24,39,var(--tw-border-opacity))!important;
    color: #fff!important
}

.voucherimg button {
    left: 13%;
    top: 27%
}

.voucher-blue {
    background: #5a4df9
}

.voucher-bg-blue {
    background: linear-gradient(90deg,#5e5bef,#5043f2)
}

.voucher button {
    --tw-text-opacity: 1;
    background: #5a4df9;
    border-radius: 6px;
    box-shadow: inset 0 -2px 2px rgba(0,0,0,.2);
    color: rgb(255 255 255/var(--tw-text-opacity));
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem
}

.voucher button span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.voucher .sub-visual-bnr {
    background: url(../img/landing/voucher_bnr.png) 50% no-repeat;
    background-size: cover;
    height: 675px
}

.voucher .guide .sub-area-bottom div {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    border-radius: 8px;
    border-width: 1px;
    box-shadow: 0 0 8px rgba(0,0,0,.08);
    box-sizing: border-box;
    padding-bottom: 2.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 2.5rem
}

.voucher .guide .sub-area-bottom div ul li p {
    align-items: center;
    display: flex;
    font-size: 1.125rem;
    line-height: 1.75rem
}

.voucher .guide .sub-area-bottom div ul li p span {
    --tw-text-opacity: 1;
    background: #5a4df9;
    border-radius: 99px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    margin-right: 1rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem
}

.voucher .guide .sub-area-bottom div ul li p strong {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
}

.voucher .guide .sub-area-bottom div ul li:last-child p {
    color: #666;
    font-size: .875rem;
    line-height: 1.25rem
}

.voucher .guide .sub-area-bottom div ul li:first-child p span {
    text-align: center;
    width: 79px
}

.voucher .guide .sub-area-bottom>p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-top: 1rem;
    position: relative;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content
}

.voucher .guide .sub-area-bottom>p:after {
    background: #e1e8ff;
    bottom: 0;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.voucher .antiransomware .sub-area-bottom ul {
    display: flex;
    justify-content: space-evenly
}

.voucher .antiransomware .sub-area-bottom ul li {
    align-items: center;
    display: flex;
    flex-direction: column
}

.voucher .antiransomware .sub-area-bottom ul li div {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,.08);
    display: flex;
    height: 200px;
    justify-content: center;
    width: 225px
}

.voucher .antiransomware .sub-area-bottom ul li p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-top: 1.25rem;
    text-align: center
}

.voucher .saleprice .sub-area-top h1 strong {
    color: #fde934;
    font-family: Spoqa Han Sans Neo;
    line-height: 1.9rem!important
}

.voucher .saleprice .sub-area-bottom ul {
    display: flex;
    justify-content: space-around
}

.voucher .saleprice .sub-area-bottom ul li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 60px 40px;
    position: relative
}

.voucher .saleprice .sub-area-bottom ul li>p {
    --tw-text-opacity: 1;
    background: #f43c5f;
    border-radius: 8px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.5rem;
    left: 50%;
    line-height: 2rem;
    padding: 8px 30px;
    position: absolute;
    top: -18px;
    transform: translate(-50%);
    width: -moz-fit-content;
    width: fit-content
}

.voucher .saleprice .sub-area-bottom ul li>p i {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-family: Spoqa Han Sans Neo;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    line-height: 1.9rem
}

.voucher .saleprice .sub-area-bottom ul li .price p del {
    color: #999;
    font-size: 1.125rem;
    line-height: 1.75rem
}

.voucher .saleprice .sub-area-bottom ul li .price p:first-child {
    margin-bottom: .75rem
}

.voucher .saleprice .sub-area-bottom ul li .price p:last-child {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.voucher .saleprice .sub-area-bottom ul li .price p:last-child strong {
    color: #f34c5f;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    line-height: .7
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) {
    margin-top: 2.25rem
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) div {
    align-items: center;
    background: #ddd;
    border-radius: 99px;
    display: flex;
    height: 200px;
    justify-content: center;
    width: 200px
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) div:first-child {
    background: #d1deff
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) div:first-child p {
    color: #4a3474
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) div:first-child p strong {
    color: inherit
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) div p {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) div p strong {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 2rem
}

.voucher .saleprice .sub-area-bottom ul li>div:nth-child(2n-1) span {
    color: #f34c5f;
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-left: 1rem;
    margin-right: 1rem
}

.voucher .saleprice .sub-area-bottom div button {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.voucher .saleprice .sub-area-bottom div button span {
    color: #5a4df9
}

.voucher .step .sub-area-bottom ul {
    display: flex;
    justify-content: space-evenly
}

.voucher .step .sub-area-bottom ul li {
    align-items: center;
    display: flex;
    flex-direction: column
}

.voucher .step .sub-area-bottom ul li div {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,.08);
    display: flex;
    height: 200px;
    justify-content: center;
    position: relative;
    width: 225px
}

.voucher .step .sub-area-bottom ul li div p {
    background: #5a4df9;
    border-radius: 99px;
    font-size: 1rem;
    left: 50%;
    line-height: 1.5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding: 6px 18px;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    width: -moz-fit-content;
    width: fit-content
}

.voucher .step .sub-area-bottom ul li div p span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.voucher .step .sub-area-bottom ul li div img {
    margin-top: 2rem
}

.voucher .step .sub-area-bottom ul li p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-top: 1.25rem;
    text-align: center
}

.cloudflare .sub-visual-bnr {
    background: url(../img/landing/ddos-bnr-01.png.jpeg) 50% no-repeat;
    background-size: cover;
    height: 1000px
}

.cloudflare .sub-visual-bnr .bnr-container {
    display: flex;
    justify-content: space-around;
    margin: auto;
    padding-top: 8%;
    width: 1280px
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-title {
    padding-right: 15%;
    padding-top: 20%
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-title h1 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-family: Spoqa Han Sans Neo;
    font-size: 70px;
    text-align: left
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-title p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 26px;
    margin-top: 3rem;
    text-align: left
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-title p span {
    --tw-text-opacity: 1;
    background: #007cd6;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-weight: 700;
    padding: 1px
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-icons h2 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 24px;
    padding-top: 1.25rem
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-icons p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1.25rem;
    font-weight: 100;
    line-height: 1.75rem;
    padding-top: .5rem
}

.cloudflare .sub-visual-bnr .bnr-container .bnr-icons li:not(:last-child) {
    padding-bottom: 1.5rem
}

.cloudflare .bnr-con-group {
    border: 1px solid #d4d4d8;
    display: flex;
    height: 350px;
    margin: auto;
    width: 1200px
}

.cloudflare .bnr-con-group .bnr-con-box {
    border-right: 1px solid #d4d4d8;
    padding: 30px 55px 55px 35px;
    width: 25%
}

.cloudflare .bnr-con-group .bnr-con-box:last-child {
    border-right: 0
}

.cloudflare .bnr-con-group .bnr-con-box .box-top {
    border-bottom: 1px solid #333;
    text-align: center;
    width: 21px
}

.cloudflare .bnr-con-group .bnr-con-box .box-con {
    margin-top: 2rem;
    position: relative
}

.cloudflare .bnr-con-group .bnr-con-box .box-con p {
    font-family: Spoqa Han Sans Neo;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px
}

.cloudflare .bnr-con-group .bnr-con-box .box-con p span {
    --tw-text-opacity: 1;
    background: #00487c;
    color: rgb(255 255 255/var(--tw-text-opacity));
    padding: 1px
}

.cloudflare .bnr-con-group .bnr-con-box .box-con img {
    position: absolute;
    right: -15px;
    top: 140px
}

.cloudflare .ddos-merit {
    background: #f8f9fb;
    height: 610px;
    position: relative
}

.cloudflare .ddos-merit .merit-lock {
    mix-blend-mode: overlay;
    position: absolute;
    right: 7%;
    top: 55%;
    z-index: 0
}

.cloudflare .ddos-merit h2 {
    font-family: Spoqa Han Sans Neo;
    font-size: 35px;
    font-weight: 500;
    margin-bottom: 75px;
    margin-top: 30px
}

.cloudflare .ddos-merit h2 span {
    --tw-text-opacity: 1;
    background: #00487c;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-weight: 500;
    padding: 1px
}

.cloudflare .ddos-merit .ddos-merit-box {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 17px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    height: 260px;
    margin: auto;
    margin-top: 75px;
    padding: 54px 83px;
    position: sticky;
    width: 1000px
}

.cloudflare .ddos-merit .ddos-merit-box ul {
    display: flex;
    flex-wrap: wrap
}

.cloudflare .ddos-merit .ddos-merit-box ul li {
    align-items: center;
    display: flex;
    margin-bottom: 22px;
    padding-left: 2.75rem;
    text-align: left;
    width: 50%
}

.cloudflare .ddos-merit .ddos-merit-box ul li img {
    margin-right: .5rem
}

.cloudflare .ddos-merit .ddos-merit-box ul li p {
    font-family: Spoqa Han Sans Neo;
    font-size: 16px;
    font-weight: 400
}

.cloudflare .ddos-icons {
    margin: auto;
    padding-bottom: 7rem;
    padding-top: 7rem;
    position: relative;
    text-align: center;
    width: 860px
}

.cloudflare .ddos-icons ul {
    display: flex;
    justify-content: space-between
}

.cloudflare .ddos-icons ul li img {
    margin: auto;
    padding-bottom: 2.25rem
}

.cloudflare .ddos-icons ul li h3 {
    font-weight: 700;
    padding-bottom: 10px
}

.cloudflare .ddos-icons ul li p {
    font-size: 15px
}

.cloudflare .ddos-cloudflare-bnr {
    background: url(../img/landing/ddos-cloudflare.png) 50% no-repeat;
    background-size: cover;
    height: 454px
}

.cloudflare .ddos-cloudflare-bnr .sub-area-bottom p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 22px;
    font-style: normal;
    line-height: 2.5rem;
    padding: 120px 0 0 140px;
    text-align: left
}

.cloudflare .ddos-consulting {
    padding: 50px 0 100px;
    position: relative
}

.cloudflare .ddos-consulting img {
    margin: auto
}

.cloudflare .ddos-consulting .ddos-consulting-info {
    position: absolute;
    right: 280px;
    text-align: left;
    top: 140px
}

.cloudflare .ddos-consulting .ddos-consulting-info h4 {
    font-weight: 700;
    padding-bottom: 1rem
}

@media (max-width: 1279px) {
    .cloudflare .sub-visual-bnr {
        height:330px
    }

    .cloudflare .sub-visual-bnr .bnr-container {
        padding-top: 7rem;
        width: unset
    }

    .cloudflare .sub-visual-bnr .bnr-container .bnr-title {
        padding: 0
    }

    .cloudflare .sub-visual-bnr .bnr-container .bnr-title p span {
        font-size: 1.5rem;
        line-height: 2rem;
        line-height: 1.5rem
    }

    .cloudflare .sub-visual-bnr .bnr-container .bnr-icons {
        display: none
    }

    .cloudflare .bnr-con-group {
        flex-direction: column;
        height: 100%;
        width: 80%
    }

    .cloudflare .bnr-con-group .bnr-con-box {
        border-bottom: 1px solid #d4d4d8;
        border-right: 0;
        width: 100%
    }

    .cloudflare .bnr-con-group .bnr-con-box .box-con {
        align-items: center;
        display: flex;
        justify-content: space-between
    }

    .cloudflare .bnr-con-group .bnr-con-box .box-con img {
        position: unset
    }

    .cloudflare .bnr-con-group .bnr-con-box .box-con p span {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .cloudflare .ddos-merit {
        height: unset
    }

    .cloudflare .ddos-merit .ddos-merit-box {
        height: unset;
        padding: 35px 40px;
        width: 82%
    }

    .cloudflare .ddos-merit .ddos-merit-box ul {
        flex-direction: column
    }

    .cloudflare .ddos-merit .ddos-merit-box ul li {
        width: 100%
    }

    .cloudflare .ddos-merit h2 span {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .cloudflare .ddos-icons {
        width: unset
    }

    .cloudflare .ddos-icons ul {
        justify-content: space-around
    }

    .cloudflare .ddos-icons ul li img {
        padding-bottom: 1.25rem
    }

    .cloudflare .ddos-cloudflare-bnr .sub-area-bottom p {
        padding: 120px 0 0;
        text-align: center
    }

    .cloudflare .ddos-consulting {
        background: #f4f4f4;
        border-radius: 9999px;
        margin: 50px 0 100px;
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
        padding-top: 1rem
    }

    .cloudflare .ddos-consulting .ddos-consulting-info {
        position: absolute;
        right: 90px;
        text-align: left;
        top: 50%;
        transform: translateY(-50%)
    }

    .cloudflare .ddos-consulting .ddos-consulting-info h4 {
        font-size: 1.25rem;
        font-weight: 700;
        padding-bottom: 5px
    }

    .cloudflare .ddos-consulting .ddos-consulting-info p {
        font-size: 1rem;
        margin: 0
    }
}

@media (max-width: 768px) {
    .cloudflare .sub-visual-bnr .bnr-container .bnr-title h1 {
        font-size:3rem;
        line-height: 1
    }

    .cloudflare .sub-visual-bnr .bnr-container .bnr-title p {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .cloudflare .sub-visual-bnr .bnr-container .bnr-title p span {
        font-size: inherit
    }

    .cloudflare .ddos-merit .ddos-merit-box {
        margin: 0;
        width: 100%
    }

    .cloudflare .ddos-merit .ddos-merit-box ul li {
        padding-left: 0
    }

    .cloudflare .ddos-merit h2 {
        line-height: 3rem;
        margin-bottom: 2.5rem;
        
    }

    .cloudflare .ddos-icons {
        padding-bottom: 4rem;
        padding-top: 4rem
    }

    .cloudflare .ddos-icons ul {
        flex-direction: column;
        row-gap: 2rem
    }

    .cloudflare .ddos-icons ul li img {
        padding-bottom: .5rem
    }

    .cloudflare .ddos-cloudflare-bnr {
        background-position: 38%;
        height: 320px;
        position: relative
    }

    .cloudflare .ddos-cloudflare-bnr .sub-area-bottom p {
        text-wrap: balance;
        font-size: 1.25rem;
        left: 50%;
        line-height: 1.75rem;
        padding-top: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        
    }

    .cloudflare .ddos-consulting {
        padding-bottom: 3rem;
        padding-top: 3rem
    }

    .cloudflare .ddos-consulting img {
        margin: 0;
        width: 80%
    }

    .cloudflare .ddos-consulting .ddos-consulting-info {
        right: 40px
    }

    .cloudflare .ddos-consulting .ddos-consulting-info h4 {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .cloudflare .bnr-con-group {
        flex-direction: column;
        height: 100%;
        width: 90%
    }
}

.file-advantage {
    margin: auto
}

.file-advantage ul {
    display: flex;
    justify-content: center
}

.file-advantage ul li {
    height: 240px;
    padding-bottom: 6rem;
    padding-top: 6rem;
    width: 205.9px
}

.file-advantage ul li p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.file-advantage ul li p.material-icons {
    margin-bottom: 1rem;
    margin-top: -.25rem
}

@media (min-width: 769px) and (max-width:1279px) {
    .file-prd .product-list.quick {
        padding-left:0;
        padding-right: 0
    }

    .file-prd .product-list.quick li {
        min-width: 520px
    }
}

.functionWrap .sub-area-top .function-tab {
    display: flex;
    justify-content: center
}

.functionWrap .sub-area-top .function-tab li {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    border-radius: .25rem;
    border-width: 0;
    cursor: pointer;
    font-weight: 700;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem
}

.functionWrap .sub-area-top .function-tab li svg {
    display: inline-block;
    margin-right: .5rem
}

.functionWrap .sub-area-top .function-tab li#kakao {
    color: #3c1e1e
}

.functionWrap .sub-area-top .function-tab li#sms {
    color: #6ad056
}

.functionWrap .sub-area-top .function-tab li#rcs {
    color: #3489fe
}

.functionWrap .sub-area-top .function-tab li#email {
    color: #266844
}

.functionWrap .sub-area-top .function-tab li#push {
    color: #9248ff
}

.functionWrap .sub-area-top .function-tab li.on {
    color: #fff!important
}

.functionWrap .sub-area-top .function-tab li.on#kakao {
    background-color: #f9e000;
    color: #3c1e1e!important
}

.functionWrap .sub-area-top .function-tab li.on#sms {
    background-color: #6ad056
}

.functionWrap .sub-area-top .function-tab li.on#rcs {
    background-color: #3489fe
}

.functionWrap .sub-area-top .function-tab li.on#email {
    background-color: #266844
}

.functionWrap .sub-area-top .function-tab li.on#push {
    background-color: #9248ff
}

.functionWrap .sub-area-bottom {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 32px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: none
}

.functionWrap .sub-area-bottom section {
    padding: 2.5rem
}

.functionWrap .sub-area-bottom section:not(:first-child) {
    padding-top: 0!important
}

.functionWrap .sub-area-bottom section:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem
}

.functionWrap .sub-area-bottom .talk-list {
    display: flex;
    justify-content: center
}

.functionWrap .sub-area-bottom .talk-list li {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .5rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: inline-block;
    margin-bottom: 1.25rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding: 1rem;
    position: relative;
    transition: .4s ease;
    width: 32%
}

.functionWrap .sub-area-bottom .talk-list li .prd-top {
    border-bottom-width: 1px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    padding: 1rem;
    text-align: left
}

.functionWrap .sub-area-bottom .talk-list li .prd-spec {
    min-height: 140px;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem
}

.functionWrap .sub-area-bottom .talk-list li .prd-spec p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 1rem
}

.functionWrap .sub-area-bottom .talk-list li .prd-spec p span:first-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-weight: 300;
    text-align: left;
    text-transform: capitalize
}

.functionWrap .sub-area-bottom .talk-list li .prd-spec p span:nth-child(2) {
    float: right;
    font-weight: 700;
    text-align: right
}

.functionWrap .sub-area-bottom .noticeToggle>p {
    --tw-text-opacity: 1;
    color: rgb(29 78 216/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-top: 1rem;
    text-align: left;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    width: 80%
}

.functionWrap .sub-area-bottom .noticeToggle>p.on,.functionWrap .sub-area-bottom .noticeToggle>p:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246/var(--tw-text-opacity))
}

.functionWrap .sub-area-bottom .noticeToggle div {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-radius: .25rem;
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: .25rem;
    padding: 2rem;
    width: 80%
}

.functionWrap .down-link-list {
    margin-top: 2.5rem
}

.functionWrap .down-link-list ul.list-right {
    align-items: flex-end;
    display: flex;
    gap: 1rem
}

.functionWrap .down-link-list ul.list-right li {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    cursor: pointer;
    font-size: .75rem;
    line-height: 1rem;
    text-align: center;
    width: 74px
}

.functionWrap .down-link-list ul.list-right li:last-child {
    width: unset
}

.functionWrap .down-link-list ul.list-right li i {
    color: inherit;
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: middle
}

.functionWrap .down-link-list ul.list-right li:hover {
    color: var(--text)
}

.functionWrap .down-link-list ul.list-right li span {
    border-radius: .25rem;
    display: block;
    height: 3rem;
    margin: auto;
    margin-bottom: .25rem;
    padding: .75rem;
    width: 3rem
}

.functionWrap .down-link-list ul.list-right li span.kakao {
    background-color: #f9e000
}

.functionWrap .down-link-list ul.list-right li span.sms {
    background-color: #6ad056
}

.functionWrap .down-link-list ul.list-right li span.rcs {
    background-color: #3489fe
}

.functionWrap .down-link-list ul.list-right li span.email {
    background-color: #266844
}

.functionWrap .down-link-list ul.list-right li span.push {
    background-color: #9248ff
}

.notification .notifi-why .sub-area-bottom {
    text-align: left
}

.notification .notifi-why .sub-area-bottom>section.normal-service {
    margin-bottom: 2.5rem
}

.notification .notifi-why .sub-area-bottom>section .primary-box {
    flex-wrap: nowrap
}

.notification .notifi-merit .list-box li {
    width: 25%
}

.notification .notifi-inquiry .sub-area-top p.title {
    margin-bottom: 1rem
}

.notification .notifi-inquiry .sub-area-top .btn-bnr {
    margin-top: 2.5rem
}

.notification .notifi-inquiry .sub-area-top .btn-bnr.on {
    border-color: var(--primary);
    border-width: 1px;
    color: var(--primary)
}

.notification .notifi-inquiry .sub-area-top .btn-bnr.on i {
    color: inherit
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail {
    text-align: left
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section p b {
    color: var(--important-red);
    margin-right: .125rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section>span {
    align-items: center;
    display: flex;
    margin-top: .25rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section>span label span {
    font-size: .875rem;
    line-height: 1.25rem;
    margin-left: .5rem;
    vertical-align: text-bottom
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-input ul li {
    margin-bottom: 1.25rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-input ul li p {
    width: 4rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-input ul li input {
    width: 100%
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-input ul li dl {
    display: inline-block;
    width: 48%
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-input ul li dl:first-child {
    margin-right: 4%
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-input ul li dl:last-child {
    margin-left: -.25rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-info textarea {
    height: 18rem;
    margin-top: 1.25rem;
    overflow-y: scroll;
    padding: 1.25rem;
    resize: none;
    width: 100%
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-request span {
    margin-bottom: .5rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-request .request-service {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .75rem;
    line-height: 1rem
}

.notification .notifi-inquiry .sub-area-bottom .inquiry-detail section.inquiry-request .request-service b {
    font-size: inherit
}

@media (max-width: 768px) {
    .notification .notifi-why .sub-area-bottom>section .primary-box {
        flex-wrap:wrap
    }

    .notification .notifi-merit .list-box {
        row-gap: 1.5rem
    }

    .notification .notifi-merit .list-box li {
        width: 100%
    }

    .notification .functionWrap .sub-area-top .function-tab {
        -moz-column-gap: .75rem;
        column-gap: .75rem;
        flex-direction: row
    }

    .notification .functionWrap .sub-area-top .function-tab li {
        font-size: .75rem;
        line-height: 1rem;
        padding-left: .5rem;
        padding-right: .5rem
    }

    .notification .functionWrap .sub-area-top .function-tab li svg {
        margin-bottom: .25rem;
        margin-right: 0
    }

    .notification .functionWrap .sub-area-bottom {
        border-radius: 1rem
    }

    .notification .functionWrap .sub-area-bottom section {
        padding-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2.5rem
    }

    .notification .functionWrap .sub-area-bottom section table tr td,.notification .functionWrap .sub-area-bottom section table tr th {
        font-size: .75rem;
        line-height: 1rem;
        
    }

    .notification .functionWrap .down-link-list ul.list-right {
        flex-wrap: wrap
    }

    .notification .functionWrap .down-link-list ul.list-right li {
        padding: 0;
        width: 76px
    }
}

.floating-btn {
    background-color: #007bff;
    border-radius: 15px;
    bottom: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    padding: 15px;
    position: fixed;
    right: 20px
}

.works-inquiry .sub-area-top section {
    align-items: center;
    display: flex;
    justify-content: space-around
}

.works-inquiry .sub-area-top section .worry-text {
    text-wrap: balance;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: 1rem;
    border-width: 1px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: 2.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 2.5rem;
    position: relative;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
    
}

.works-inquiry .sub-area-top section .worry-text strong {
    color: var(--important-red);
    font-weight: 500
}

.works-inquiry .sub-area-top section .worry-text:after {
    border-color: transparent #fff;
    border-style: solid;
    border-width: 12px 16px 12px 0;
    content: "";
    display: block;
    left: -15.45px;
    position: absolute;
    top: 51.59px;
    width: 0;
    z-index: 1
}

.works-inquiry .sub-area-top section .worry-text:before {
    border-bottom: 12px solid transparent;
    border-left: 0 solid var(--border);
    border-right: 17px solid var(--border);
    border-top: 13px solid transparent;
    content: "";
    display: block;
    left: -17.4px;
    position: absolute;
    top: 50px;
    width: 0;
    z-index: 0
}

.works-inquiry .sub-area-top section.worry-bottom .worry-text:after,.works-inquiry .sub-area-top section.worry-bottom .worry-text:before {
    left: unset;
    top: 50px;
    transform: rotate(180deg)
}

.works-inquiry .sub-area-top section.worry-bottom .worry-text:after {
    right: -15.45px
}

.works-inquiry .sub-area-top section.worry-bottom .worry-text:before {
    right: -17.4px
}

.works-inquiry .sub-area-bottom {
    padding-top: 2rem
}

.works-inquiry .sub-area-bottom>div {
    background: url(../img/sub/works-inquiry.png) 50% no-repeat #e5fcf6;
    border-radius: 32px;
    height: 204px;
    padding: 2rem;
    width: 100%
}

.works-inquiry .sub-area-bottom>div p {
    align-items: center;
    -moz-column-gap: .75rem;
    column-gap: .75rem;
    display: flex;
    flex-wrap: wrap;
    font-family: GmarketSans;
    font-size: 1.5rem;
    justify-content: center;
    line-height: 2rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    row-gap: .375rem;
    width: 32rem
}

.works-inquiry .sub-area-bottom>div p span {
    font-family: inherit
}

.works-inquiry .sub-area-bottom>div p img {
    margin: -.375rem
}

.works-platform .sub-area-top {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    padding-bottom: 2.5rem
}

.works-platform .sub-area-bottom {
    display: none
}

.works-platform .sub-area-bottom .platform-title-area {
    margin-bottom: 2.5rem;
    text-align: left
}

.works-platform .sub-area-bottom .platform-title-area .title-wrap {
    align-items: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: flex;
    margin-bottom: .75rem
}

.works-platform .sub-area-bottom .platform-title-area .title-wrap p {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

.works-platform .sub-area-bottom .platform-prd-area {
    position: relative
}

.works-platform .sub-area-bottom .platform-prd-area .platform-prd-tab {
    margin-bottom: 2.5rem;
    position: absolute;
    right: 0;
    text-align: left;
    top: -5rem
}

.works-platform .sub-area-bottom .product-list.works {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: flex;
    justify-content: space-between;
    padding-top: 1rem
}

.works-platform .sub-area-bottom .product-list.works li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: 1rem;
    height: 850px;
    margin-left: 0;
    margin-right: 0;
    min-width: 300px;
    padding: 0!important
}

.works-platform .sub-area-bottom .product-list.works li.event {
    border-color: var(--primary)!important;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.works-platform .sub-area-bottom .product-list.works li.event:before {
    --tw-text-opacity: 1;
    background: var(--primary);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: "가장 인기있는 상품";
    font-weight: 500;
    height: 2.5rem;
    line-height: 2.5rem;
    margin-left: -1px;
    padding-left: 1.25rem;
    position: absolute;
    top: -2.5rem;
    width: 100%;
    width: 100.6%
}

.works-platform .sub-area-bottom .product-list.works li:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity))
}

.works-platform .sub-area-bottom .product-list.works li h3 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    padding-bottom: .125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem
}

.works-platform .sub-area-bottom .product-list.works li .price-area {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity));
    border-bottom-width: 1px;
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    padding: 1rem;
    padding-top: .5rem
}

.works-platform .sub-area-bottom .product-list.works li .price-area .text {
    display: none;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

.works-platform .sub-area-bottom .product-list.works li .price-area .text.on {
    display: block
}

.works-platform .sub-area-bottom .product-list.works li .price-area .text span {
    font-size: .875rem;
    font-weight: inherit;
    line-height: 1.25rem;
    vertical-align: middle
}

.works-platform .sub-area-bottom .product-list.works li dl {
    margin-top: 1rem
}

.works-platform .sub-area-bottom .product-list.works li dl:first-child {
    margin-top: 0
}

.works-platform .sub-area-bottom .product-list.works li dl dt {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem
}

.works-platform .sub-area-bottom .product-list.works li dl dt b {
    color: var(--important-blue);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem
}

.works-platform .sub-area-bottom .product-list.works li .prd-spec {
    padding-left: 1.5rem!important;
    padding-right: 1.5rem!important
}

.works-platform .sub-area-bottom .product-list.works li .prd-spec dl dd {
    font-size: .875rem;
    line-height: 1.25rem;
    margin-left: .25rem;
    margin-top: .5rem
}

.works-platform .sub-area-bottom .product-list.works li .prd-spec dl dd:before {
    color: var(--primary);
    content: "check";
    font-family: Material Icons;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-right: .25rem;
    vertical-align: middle
}

.works-platform .sub-area-bottom .product-list.works li .prd-spec dl dd b {
    color: var(--important-blue);
    font-size: .875rem;
    line-height: 1.25rem;
    vertical-align: middle
}

.works-platform .sub-area-bottom .product-list.works li .prd-spec dl dd p {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem;
    text-indent: 1.25rem
}

.works-platform .sub-area-bottom .product-list.works li .prd-fn {
    bottom: 0;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    position: absolute
}

.works-platform .sub-area-bottom .product-list.works li .prd-fn dl dd {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    display: flex;
    margin-top: .5rem
}

.works-platform .sub-area-bottom .product-list.works li .prd-fn dl dd>div {
    align-items: center;
    display: flex;
    flex-direction: column
}

.works-platform .sub-area-bottom .product-list.works li .prd-fn dl dd>div span {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: .875rem;
    line-height: 1.25rem
}

.works-platform .sub-area-bottom.core-cont .platform-provide {
    margin-bottom: 2.5rem
}

.works-platform .sub-area-bottom.core-cont .platform-provide p {
    font-weight: 700;
    margin-bottom: .75rem;
    text-align: left
}

.works-platform .sub-area-bottom.core-cont .platform-provide ul {
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    display: flex
}

.works-platform .sub-area-bottom.core-cont .platform-provide ul li {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: .25rem
}

.works-platform .sub-area-bottom.drive-cont .product-list {
    flex-wrap: wrap
}

.works-platform .sub-area-bottom.drive-cont .drive-merit {
    margin-top: 70px
}

.works-platform .sub-area-bottom.drive-cont .drive-merit .primary-box li {
    width: 400px
}

.works-platform .sub-area-bottom.support-cont .product-list.works li {
    height: auto
}

.works-platform .sub-area-bottom.support-cont .support-option {
    margin-top: 70px
}

.works-platform .sub-area-bottom.support-cont .support-option .option-list li .list-top h3 .tooltip .tooltip-text {
    left: 50%;
    transform: translate(-50%)
}

.info-list {
    font-size: .875rem;
    line-height: 1.75rem;
    margin-top: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    text-align: left
}

.info-list li {
    text-wrap: balance;
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    list-style-type: disc;
    margin-left: 1rem;
    margin-top: .25rem;
    
}

.info-list li a {
    color: var(--important-blue);
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.modal {
    align-items: center;
    justify-content: center
}

.modal .naver-modal {
    margin-left: 1.5rem!important;
    margin-right: 1.5rem!important;
    margin-top: 5vh!important;
    max-width: unset!important;
    min-width: unset!important;
    width: 850px!important
}

.modal .naver-modal .content-modal {
    padding: 2rem;
    position: relative
}

.modal .naver-modal .content-modal .cont-area-top {
    margin-bottom: 1rem
}

.modal .naver-modal .content-modal .cont-area-top h3 {
    font-weight: 700
}

.modal .naver-modal .content-modal .cont-area-top hr {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175/var(--tw-border-opacity))
}

.modal .naver-modal .content-modal .cont-area-top .exit {
    right: 2rem;
    top: unset
}

.modal .naver-modal .content-modal .cont-area-top .exit span {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128/var(--tw-bg-opacity))
}

.modal .naver-modal .content-modal .cont-area-bottom {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.modal .naver-modal .content-modal .cont-area-bottom h5 {
    font-weight: 700
}

.modal .naver-modal .content-modal .cont-area-bottom label {
    display: inline-block;
    font-size: .875rem;
    line-height: 1.25rem;
    width: 7rem
}

.modal .naver-modal .content-modal .cont-area-bottom input,.modal .naver-modal .content-modal .cont-area-bottom select {
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: 2px;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem
}

.modal .naver-modal .content-modal .cont-area-bottom hr {
    margin-bottom: .5rem;
    margin-top: .5rem
}

.modal .naver-modal .content-modal .cont-area-bottom .notice {
    line-height: 2rem
}

.modal .naver-modal .content-modal .cont-area-bottom .notice span {
    font-weight: 700
}

.modal .naver-modal .content-modal .cont-area-bottom .cont-input {
    margin-bottom: 1.5rem
}

.modal .naver-modal .content-modal .cont-area-bottom .cont-input>div {
    align-items: center;
    display: flex
}

.modal .naver-modal .content-modal .button-area {
    margin-bottom: .5rem;
    margin-top: 1rem;
    text-align: center
}

.modal .naver-modal .content-modal .button-area .submit-btn {
    background: #15b558;
    font-weight: 700;
    margin-left: 1rem
}

.modal .naver-modal .content-modal .button-area .submit-btn:hover {
    background: #188847
}

.floating-btn {
    --tw-text-opacity: 1;
    background-color: #15b558;
    border-radius: .25rem;
    bottom: 1.25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .5rem 1rem;
    position: fixed;
    right: 1.25rem;
    z-index: 999
}

.floating-btn:hover {
    background: #188847
}

@media (min-width: 769px) and (max-width:1279px) {
    .works-inquiry .sub-area-top section .worry-text,.works-inquiry .sub-area-top section img {
        width:40%
    }

    .works-inquiry .sub-area-top section .worry-text {
        padding: 2rem
    }

    .works-platform .sub-area-bottom .product-list.works {
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: 2.5rem;
        row-gap: 2.5rem
    }

    .works-platform .sub-area-bottom .platform-prd-area .platform-prd-tab {
        position: unset
    }

    .works-platform .sub-area-bottom.drive-cont .product-list {
        -moz-column-gap: 2%;
        column-gap: 2%
    }

    .works-platform .sub-area-bottom.drive-cont .product-list li {
        margin-left: 0;
        margin-right: 0;
        width: 49%
    }

    .works-platform .sub-area-bottom.drive-cont .drive-merit .primary-box {
        -moz-column-gap: 2%;
        column-gap: 2%;
        justify-content: flex-start
    }

    .works-platform .sub-area-bottom.drive-cont .drive-merit .primary-box li {
        width: 48%
    }

    .works-platform .sub-area-bottom.support-cont .support-option .option-list {
        flex-wrap: wrap
    }

    .works-platform .sub-area-bottom.support-cont .support-option .option-list li {
        width: 49%
    }
}

@media (max-width: 768px) {
    .works-inquiry .sub-area-top section {
        flex-direction:column
    }

    .works-inquiry .sub-area-top section img {
        -o-object-fit: scale-down;
        object-fit: scale-down
    }

    .works-inquiry .sub-area-top section .worry-text {
        margin-top: 2rem;
        padding: 1.5rem
    }

    .works-inquiry .sub-area-top section .worry-text:after {
        left: unset;
        right: 60.6px;
        top: -19px;
        transform: rotate(90deg)
    }

    .works-inquiry .sub-area-top section .worry-text:before {
        left: unset;
        right: 60px;
        top: -20px;
        transform: rotate(90deg)
    }

    .works-inquiry .sub-area-top section.worry-bottom {
        flex-direction: column-reverse;
        margin-top: 2.5rem
    }

    .works-inquiry .sub-area-top section.worry-bottom .worry-text:after {
        left: 60px;
        top: -19px;
        transform: rotate(90deg)
    }

    .works-inquiry .sub-area-top section.worry-bottom .worry-text:before {
        left: 59.6px;
        top: -20px;
        transform: rotate(90deg)
    }

    .works-inquiry .sub-area-bottom {
        padding-top: 0
    }

    .works-inquiry .sub-area-bottom>div {
        height: -moz-fit-content;
        height: fit-content
    }

    .works-inquiry .sub-area-bottom>div p {
        margin-bottom: 1.25rem;
        row-gap: .5rem;
        width: -moz-fit-content;
        width: fit-content
    }

    .works-inquiry .sub-area-bottom>div p span {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem
    }

    .works-platform .sub-area-bottom .product-list.works {
        display: inline-flex;
        padding-top: 2.5rem
    }

    .works-platform .sub-area-bottom .product-list.works li {
        height: -moz-fit-content;
        height: fit-content;
        width: 100%
    }

    .works-platform .sub-area-bottom .product-list.works li .prd-fn {
        padding: 0;
        padding-bottom: 1.5rem;
        padding-left: 1.5rem;
        position: unset
    }

    .works-platform .sub-area-bottom .platform-prd-area .platform-prd-tab {
        -moz-column-gap: .75rem;
        column-gap: .75rem;
        flex-direction: row;
        position: unset
    }

    .works-platform .sub-area-bottom.core-cont .platform-provide ul {
        -moz-column-gap: 2.5rem;
        column-gap: 2.5rem;
        flex-wrap: wrap;
        row-gap: 1rem
    }

    .works-platform .sub-area-bottom.drive-cont .drive-merit .primary-box li {
        width: 100%
    }

    .info-list li {
        margin-top: 1rem
    }

    .modal .content-modal {
        padding: 1rem!important
    }

    .modal .cont-area-bottom {
        padding-left: 1rem!important;
        padding-right: 1rem!important
    }

    .modal .cont-area-bottom .cont-input>div {
        align-items: unset!important;
        flex-direction: column
    }
}

.sub-visual-bnr.cloud .sub-visual-txt {
    height: 100%
}

.sub-visual-bnr.cloud .sub-visual-txt .text-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.sub-visual-bnr.cloud .sub-visual-txt .text-wrap .service-ex {
    width: 100%!important
}

.sub-visual-bnr.cloud .sub-visual-txt button {
    margin-top: 1rem;
    padding-bottom: .75rem;
    padding-top: .75rem
}

.sub-visual-bnr.cloud .sub-visual-txt .service-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    
}

.sub-visual-bnr.cloud .sub-visual-txt .service-ex {
    font-size: 18px!important
}

.sub-visual-bnr.cloud .sub-bnr-obj {
    position: absolute;
    right: 80px;
    top: 30px
}

.sub-visual-bnr.cloud .cloud-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.sub-visual-bnr.cloud .cloud-img.aws {
    background: url(../img/bnr-sub/aws.png) 50% no-repeat;
    height: 320px;
    right: 16rem;
    width: 270px
}

.sub-visual-bnr.cloud .cloud-img.ncp {
    background: url(../img/bnr-sub/ncp_new.png) 50% no-repeat;
    height: 125px;
    right: 10rem;
    width: 420px
}

.sub-visual-bnr.cloud .cloud-img.nhn {
    background: url(../img/bnr-sub/nhn.png) 50% no-repeat;
    height: 280px;
    right: 16rem;
    width: 280px
}

.sub-visual-bnr.cloud .cloud-img.tencent {
    background: url(../img/bnr-sub/tencent.png) 50% no-repeat;
    height: 123px;
    right: 10rem;
    width: 420px
}

.sub-visual-bnr.aws-bnr {
    background: linear-gradient(90deg,#fff,#f79c22)
}

.sub-visual-bnr.ncp-bnr {
    background: linear-gradient(90deg,#fff,#26d79c)
}

.sub-visual-bnr.nhn-bnr {
    background: linear-gradient(90deg,#fff,#125de6)
}

.sub-visual-bnr.tencent-bnr {
    background: linear-gradient(90deg,#fff,#00c4d6)
}

.sub-visual-bnr.consulting-bnr {
    background: linear-gradient(90deg,#fff,#ff6a6a)
}

.sub-visual-bnr.managed-bnr {
    background: linear-gradient(90deg,#fff,#405fae)
}

.sub-visual-bnr.customer-bnr {
    background: linear-gradient(90deg,#fff,#715fb5)
}

.sub-visual-bnr.customer-bnr .sub-visual-txt {
    padding-top: 5rem!important
}

.sub-area-bottom .service-contents {
    -moz-column-gap: 60px;
    column-gap: 60px;
    display: grid;
    grid-template-columns: 2fr 2fr;
    row-gap: 40px
}

.sub-area-bottom .service-contents li {
    align-items: center;
    display: flex;
    justify-content: flex-start
}

.sub-area-bottom .service-contents li .img {
    height: 90px;
    margin-right: 2rem;
    width: 90px
}

.sub-area-bottom .service-contents li .service-text {
    text-align: left;
    width: 70%
}

.sub-area-bottom .service-contents li .service-text.title {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: .75rem;
    
}

.sub-area-bottom .service-contents li .service-text.sub-exp {
    text-wrap: balance;
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: .5rem;
    
}

.sub-area-bottom .quater-list {
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: grid
}

.sub-area-bottom .quater-list li {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    position: relative
}

.sub-area-bottom .quater-list li .gradient-bar {
    height: .25rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.sub-area-bottom .quater-list li .gradient-bar.aws {
    background: #f67920
}

.sub-area-bottom .quater-list li .gradient-bar.nhn {
    background: #355be3
}

.sub-area-bottom .quater-list li .gradient-bar.tencent {
    background: #419ffd
}

.sub-area-bottom .quater-list li .service-detail {
    width: 100%
}

.sub-area-bottom .quater-list li .service-detail h3,.sub-area-bottom .quater-list li .service-detail p {
    
}

.sub-area-bottom .quater-list li .service-detail h3 {
    margin-bottom: .5rem;
    min-height: 4rem
}

.sub-area-bottom .quater-list li .service-detail p {
    padding-right: 0;
    text-align: center
}

.sub-area-bottom .quater-list li .service-detail .service-number p {
    counter-increment: list-number;
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative
}

.sub-area-bottom .quater-list li .service-detail .service-number p:before {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    border-radius: 9999px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: counter(list-number)"";
    height: 1.5rem;
    left: 0;
    position: absolute;
    text-align: center;
    width: 1.5rem
}

.sub-area-bottom .quater-list li img {
    bottom: .25rem;
    position: absolute;
    right: 1.25rem
}

.sub-area-bottom .quater-list.fourth-tier {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.sub-area-bottom .quater-list.fifth-tier {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

.sub-area-bottom .global-infra {
    margin-top: 4rem
}

.sub-area-bottom .global-infra h5,.sub-area-bottom .global-infra p {
    text-align: center
}

.sub-area-bottom .global-infra p {
    margin-top: .5rem
}

.sub-area-bottom .global-infra .img {
    border-width: 1px;
    display: inline-block;
    padding: .5rem
}

.sub-area-bottom .business-support {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.sub-area-bottom .business-support h3,.sub-area-bottom .business-support li,.sub-area-bottom .business-support p {
    
}

.sub-area-bottom .business-support div {
    width: 50%
}

.sub-area-bottom .business-support img {
    height: 318px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.sub-area-bottom .business-support .text-box {
    padding-bottom: 2rem;
    padding-top: 2rem
}

.sub-area-bottom .business-support .text-box h3 {
    font-weight: 700;
    padding-bottom: 1rem;
    text-align: left
}

.sub-area-bottom .business-support .text-box p {
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left
}

.sub-area-bottom .business-support .text-box .support-list {
    counter-reset: list-number;
    margin-top: 1.25rem
}

.sub-area-bottom .business-support .text-box .support-list li {
    --tw-text-opacity: 1;
    color: rgb(75 85 99/var(--tw-text-opacity));
    ;counter-increment: list-number;
    margin-bottom: 1rem;
    padding: 0;
    padding-left: 2rem;
    position: relative;
    text-align: left;
    width: 100%
}

.sub-area-bottom .business-support .text-box .support-list li:before {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(55 65 81/var(--tw-bg-opacity));
    border-radius: 9999px;
    color: rgb(255 255 255/var(--tw-text-opacity));
    content: counter(list-number)"";
    height: 1.5rem;
    left: 0;
    line-height: 25px;
    padding-left: 1px;
    position: absolute;
    text-align: center;
    width: 1.5rem
}

.sub-area-bottom .business-support .img-box {
    padding-bottom: 1rem;
    padding-top: 1rem
}

.sub-area-bottom .business-support .m-order-a {
    order: 1
}

.sub-area-bottom .business-support .m-order-b {
    order: 2
}

.sub-area-bottom .business-support:nth-child(2n-1) .text-box {
    padding-left: 3rem
}

.sub-area-bottom .business-support:nth-child(2n-1) .img-box {
    padding-right: 3rem
}

.sub-area-bottom .business-support:nth-child(2n) {
    margin-bottom: 2rem;
    margin-top: 2rem
}

.sub-area-bottom .business-support:nth-child(2n) .text-box {
    padding-right: 3rem
}

.sub-area-bottom .business-support:nth-child(2n) .img-box {
    padding-left: 3rem
}

.sub-area-bottom .sub-inquiry {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    padding: 2.5rem
}

.sub-area-bottom .sub-inquiry .inquiry-input {
    display: flex
}

.sub-area-bottom .sub-inquiry .inquiry-input ul {
    width: 50%
}

.sub-area-bottom .sub-inquiry .inquiry-input ul li {
    margin-bottom: 1rem;
    padding: 0;
    width: 100%
}

.sub-area-bottom .sub-inquiry .inquiry-input ul li p {
    padding-bottom: .25rem;
    text-align: left
}

.sub-area-bottom .sub-inquiry .inquiry-input ul li textarea {
    height: 312px;
    padding: .5rem;
    width: 100%
}

.sub-area-bottom .sub-inquiry .inquiry-input ul:first-child {
    margin-right: 2rem
}

.sub-area-bottom .sub-inquiry .inquiry-input ul .text-input {
    padding-bottom: .75rem;
    padding-top: .75rem;
    width: 100%
}

.sub-area-bottom .sub-inquiry .inquiry-input span {
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity));
    display: block;
    margin-top: .25rem
}

.sub-area-bottom .sub-inquiry .inquiry-input div:last-child span {
    margin-left: unset
}

.sub-area-bottom .sub-inquiry .inquiry-info {
    margin-bottom: 1rem;
    margin-top: 1rem
}

.sub-area-bottom .sub-inquiry .inquiry-info p {
    font-weight: 700;
    text-align: left;
    vertical-align: middle
}

.sub-area-bottom .sub-inquiry .inquiry-info p input {
    margin-top: .625rem
}

.sub-area-bottom .sub-inquiry .inquiry-info label span {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-left: .5rem;
    vertical-align: middle
}

.sub-area-bottom .sub-inquiry .inquiry-info .inquiry-box {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    height: 15rem;
    margin-top: .5rem;
    overflow-y: scroll;
    padding: 1.25rem;
    text-align: left
}

.sub-area-bottom .infra-cont img {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    margin-left: auto;
    margin-right: auto;
    padding: .5rem
}

.sub-area-bottom .infra-cont div {
    display: flex
}

.sub-area-bottom .infra-cont div dl {
    padding-top: 3rem;
    text-align: center;
    width: 25%
}

.sub-area-bottom .infra-cont div dl dt {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem
}

.sub-area-bottom .consulting-process {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    row-gap: 4rem;
    text-align: left
}

.sub-area-bottom .consulting-process .service-detail {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .5rem;
    border-width: 1px;
    height: 100%;
    padding: 1.5rem;
    position: relative
}

.sub-area-bottom .consulting-process .service-detail h3 span {
    color: var(--secondary);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    line-height: 1.75rem;
    padding-left: .5rem;
    padding-right: .5rem
}

.sub-area-bottom .consulting-process .service-detail svg {
    margin-top: -.25rem
}

.sub-area-bottom .consulting-process .service-detail ul {
    margin-top: 1rem
}

.sub-area-bottom .consulting-process .service-detail ul li {
    padding-left: 1.5rem;
    position: relative
}

.sub-area-bottom .consulting-process .service-detail ul li:before {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81/var(--tw-bg-opacity));
    border-radius: 9999px;
    content: "";
    display: inline-block;
    height: 4px;
    left: 10px;
    position: absolute;
    top: 7px;
    width: 4px
}

.sub-area-bottom .consulting-process .service-detail ul li:not(:last-child) {
    padding-bottom: .25rem
}

.sub-area-bottom .consulting-process .service-detail:not(:last-child) {
    width: 98%
}

.sub-area-bottom .consulting-process .service-detail:not(:last-child):after {
    color: #333;
    content: "keyboard_double_arrow_right";
    font-family: Material Symbols Outlined;
    font-size: 1.25rem;
    position: absolute;
    right: -1.75rem;
    top: 50%
}

.sub-area-bottom .csap-cont span {
    font-weight: 700
}

.sub-area-bottom .csap-cont .csap p {
    --tw-text-opacity: 1;
    color: rgb(29 78 216/var(--tw-text-opacity));
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-top: 1rem;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    
}

.sub-area-bottom .csap-cont .csap p.on,.sub-area-bottom .csap-cont .csap p:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246/var(--tw-text-opacity))
}

.sub-area-bottom .csap-cont .csap div {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .25rem;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: none;
    line-height: 1.5rem;
    margin-top: .25rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem
}

.sub-area-bottom .csap-cont .csap div a {
    font-weight: 700
}

.sub-area-bottom .regist-service {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 2rem;
    width: 83.333333%
}

.sub-area-bottom .regist-service div {
    position: relative
}

.sub-area-bottom .regist-service div img {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.sub-area-bottom .regist-service div a {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    height: 11%;
    opacity: 0;
    position: absolute;
    width: 26%
}

.sub-area-bottom .regist-service div a:first-of-type {
    left: 2.5%;
    top: 35%
}

.sub-area-bottom .regist-service div a:nth-of-type(2) {
    left: 2.5%;
    top: 58%
}

.sub-area-bottom .regist-service div a:nth-of-type(3) {
    left: 2.5%;
    top: 83%
}

.sub-area-bottom .regist-service div a:nth-of-type(4) {
    right: 2.5%;
    top: 35%
}

.sub-area-bottom .regist-service div a:nth-of-type(5) {
    right: 2.5%;
    top: 58%
}

.sub-area-bottom .regist-service div a:nth-of-type(6) {
    right: 2.5%;
    top: 83%
}

.sub-area-bottom .public-procedure {
    align-items: center;
    display: flex;
    flex-direction: column
}

.sub-area-bottom .public-procedure .procedure-cont {
    display: flex;
    justify-content: center
}

.sub-area-bottom .public-procedure .procedure-cont .titleBox {
    border-radius: .25rem;
    border-width: 1px;
    margin-right: 4rem;
    min-width: 24rem;
    padding-bottom: 1.5rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: 1.5rem
}

.sub-area-bottom .public-procedure .procedure-cont .titleBox.blue {
    background: #f4f8ff;
    border-color: #354ec3;
    color: #354ec3
}

.sub-area-bottom .public-procedure .procedure-cont .titleBox.orange {
    background: #fff9ef;
    border-color: #ec8812;
    color: #ec8812
}

.sub-area-bottom .public-procedure .procedure-cont .titleBox p {
    color: inherit;
    text-align: center
}

.sub-area-bottom .public-procedure .procedure-cont .titleBox p:last-child {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

.sub-area-bottom .public-procedure .procedure-cont .public-list {
    display: flex;
    margin-bottom: .5rem
}

.sub-area-bottom .public-procedure .procedure-cont .public-list li:not(:last-child):after {
    color: gray;
    content: "double_arrow";
    font-family: Material Symbols Outlined;
    font-size: 18px;
    line-height: 3rem;
    margin: 0 5px
}

.sub-area-bottom .public-procedure .procedure-cont .public-list li p {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: rgb(209 213 219/var(--tw-border-opacity));
    border-radius: .25rem;
    border-width: 1px;
    display: inline-block;
    padding-bottom: .75rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .75rem;
    text-align: center;
    width: 9.5rem
}

@media (min-width: 769px) {
    .sub-area-bottom .public-procedure .procedure-cont .m-public-list {
        display:none!important
    }
}

@media (max-width: 768px) {
    .sub-area-bottom .public-procedure .procedure-cont .m-public-list {
        --tw-border-opacity:1;
        --tw-bg-opacity: 1;
        align-items: center;
        background-color: rgb(255 255 255/var(--tw-bg-opacity));
        border-color: rgb(209 213 219/var(--tw-border-opacity));
        border-radius: .25rem;
        border-width: 1px;
        display: flex;
        justify-content: space-evenly;
        margin-bottom: .5rem;
        padding-bottom: .5rem;
        padding-top: .5rem
    }

    .sub-area-bottom .public-procedure .procedure-cont .m-public-list p {
        display: inline-block
    }

    .sub-area-bottom .public-procedure .procedure-cont .m-public-list p:nth-child(2n) {
        color: gray;
        font-size: 18px
    }
}

.sub-area-bottom .public-procedure .procedure-cont span {
    --tw-text-opacity: 1;
    color: rgb(248 113 113/var(--tw-text-opacity))
}

.sub-area-bottom .service-procedure {
    position: relative
}

.sub-area-bottom .service-procedure .procedure-deco {
    position: absolute;
    top: 8rem
}

.sub-area-bottom .service-procedure ul {
    margin-left: auto;
    position: relative;
    width: 50%;
    z-index: 9
}

.sub-area-bottom .service-procedure ul li {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-color: var(--nuri-primary);
    border-radius: .375rem;
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    display: block;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    position: relative
}

.sub-area-bottom .service-procedure ul li p {
    display: inline-block;
    vertical-align: middle
}

.sub-area-bottom .service-procedure ul li p.num {
    color: var(--nuri-primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    line-height: 46px;
    padding-right: .5rem
}

.sub-area-bottom .service-procedure ul li:not(:last-child) {
    margin-bottom: 1.5rem
}

.sub-area-bottom .service-procedure ul li button {
    display: inline-block;
    line-height: 1.5rem;
    margin-left: 1.5rem;
    margin-top: .25rem
}

.sub-area-bottom .managed-service .managed-img {
    background: url(../img/managed-cost.png) 50% no-repeat;
    background-size: contain;
    height: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30%;
    width: 80%
}

.sub-area-bottom .managed-service .pdf-download {
    margin-top: 4rem
}

.sub-area-bottom .managed-service .pdf-download .title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: 1rem
}

.sub-area-bottom .managed-service .pdf-download .pdf-download-box {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .25rem;
    border-width: 1px;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    width: 80%
}

.sub-area-bottom .managed-service .pdf-download .pdf-download-box p {
    display: inline-block;
    text-align: center
}

.sub-area-bottom .managed-service .pdf-download .pdf-download-box button {
    line-height: 1.5rem;
    
}

.sub-area-bottom .managed-service .pdf-download .pdf-download-box .line {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235/var(--tw-bg-opacity));
    display: inline-block;
    height: 1px;
    margin-left: 1rem;
    margin-right: 1rem;
    width: 33.333333%
}

.sub-area-bottom .cloud-customer-case li {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.sub-area-bottom .cloud-customer-case li .img-box {
    height: 300px;
    padding-bottom: 1rem;
    padding-right: 3rem;
    padding-top: 1rem;
    width: 45%
}

.sub-area-bottom .cloud-customer-case li .img-box img {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
    border-bottom-right-radius: 64px;
    border-top-left-radius: 64px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.sub-area-bottom .cloud-customer-case li .text-box {
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-top: 2rem;
    width: 55%
}

.sub-area-bottom .cloud-customer-case li .text-box p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: .25rem;
    text-align: left
}

.sub-area-bottom .cloud-customer-case li .text-box .title {
    color: var(--nuri-primary);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
    margin-bottom: 2rem;
    text-align: left
}

.sub-area-bottom .cloud-customer-case li:not(:first-child) {
    margin-top: 2.5rem
}

.sub-area-bottom .cloud-customer-list .list {
    -moz-column-gap: 10px;
    column-gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    list-style: none;
    padding-left: 1rem;
    padding-right: 1rem;
    row-gap: 25px
}

.sub-area-bottom .cloud-customer-list .list li {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    border-radius: .25rem;
    border-width: 1px;
    box-sizing: border-box;
    display: flex;
    height: 4.5rem;
    justify-content: center;
    padding: 1rem;
    width: 100%
}

.sub-area-bottom .cloud-customer-list .list li img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto
}

.button-area {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    text-align: center
}

@media(min-width: 769px) and (max-width:1279px) {
    .sub-visual-bnr .cloud-img {
        display:none
    }

    .sub-area-bottom .quater-list {
        row-gap: 20px
    }

    .sub-area-bottom .quater-list.fifth-tier,.sub-area-bottom .quater-list.fourth-tier {
        grid-template-columns: 2fr 2fr
    }

    .sub-area-bottom .quater-list .service-detail h3 {
        margin-bottom: 1.5rem!important;
        min-height: unset!important
    }

    .sub-area-bottom .business-support .text-box {
        padding-bottom: 1rem;
        padding-top: 1rem
    }

    .sub-area-bottom .business-support:nth-child(2n-1) .text-box {
        padding-left: 1rem
    }

    .sub-area-bottom .business-support:nth-child(2n-1) .img-box {
        padding-right: 1rem
    }

    .sub-area-bottom .business-support:nth-child(2n) {
        margin-bottom: 1rem;
        margin-top: 1rem
    }

    .sub-area-bottom .business-support:nth-child(2n) .text-box {
        padding-right: 1rem
    }

    .sub-area-bottom .business-support:nth-child(2n) .img-box {
        padding-left: 1rem
    }

    .sub-area-bottom .infra-cont dl dt {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .sub-area-bottom .consulting-process {
        grid-template-columns: 1fr 1fr
    }

    .sub-area-bottom .public-procedure .procedure-cont {
        flex-direction: column;
        margin-left: auto;
        margin-right: auto
    }

    .sub-area-bottom .public-procedure .titleBox {
        margin-bottom: 2rem!important;
        margin-right: 0!important
    }

    .sub-area-bottom .service-procedure ul {
        width: 60%
    }

    .sub-area-bottom .managed-service .pdf-download-box {
        justify-content: space-between!important
    }

    .sub-area-bottom .managed-service .pdf-download-box .line {
        display: none!important
    }
}

@media (max-width: 768px) {
    .sub-visual-bnr.cloud {
        height:160px!important
    }

    .sub-visual-bnr .sub-visual-txt {
        padding-bottom: 2rem;
        padding-top: 2rem;
        text-align: left;
        width: 100vw
    }

    .sub-visual-bnr .sub-visual-txt .now-page {
        display: none;
        margin-bottom: .25rem
    }

    .sub-visual-bnr .sub-visual-txt .service-title {
        font-size: 1.5rem!important;
        font-weight: 700!important;
        line-height: 2rem!important
    }

    .sub-visual-bnr .sub-visual-txt .service-title span {
        font-size: inherit;
        line-height: inherit
    }

    .sub-visual-bnr .sub-visual-img,.sub-visual-bnr .sub-visual-txt p.service-ex {
        display: none
    }

    .sub-visual-bnr .sub-visual-img {
        right: -240px;
        top: 30%
    }

    .sub-visual-bnr.naverworks.event {
        background-position: 0;
        height: 330px
    }

    .sub-visual-bnr .cloud-img {
        display: none
    }

    .sub-visual-bnr.customer-bnr .sub-visual-txt {
        padding-top: 3rem!important
    }

    .sub-area-bottom .service-contents {
        margin-top: 2rem
    }

    .sub-area-bottom .service-contents li {
        align-items: center;
        flex-direction: column
    }

    .sub-area-bottom .service-contents li .img {
        margin-right: 0
    }

    .sub-area-bottom .service-contents li .service-text {
        width: unset
    }

    .sub-area-bottom .service-contents li .service-text .title {
        font-size: 1.125rem;
        line-height: 1.75rem;
        padding-top: 1rem;
        text-align: center
    }

    .sub-area-bottom .service-contents li .service-text .sub-exp {
        display: none
    }

    .sub-area-bottom .quater-list.fifth-tier,.sub-area-bottom .quater-list.fourth-tier {
        grid-template-columns: 1fr
    }

    .sub-area-bottom .quater-list .service-detail h3 {
        margin-bottom: 1.5rem!important;
        min-height: unset!important
    }

    .sub-area-bottom .quater-list li {
        max-height: unset;
        min-height: unset;
        width: 100%
    }

    .sub-area-bottom .quater-list li h3 {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.75rem
    }

    .sub-area-bottom .quater-list li:not(:last-child) {
        margin-bottom: 1rem;
        margin-right: 0
    }

    .sub-area-bottom .infra-cont dt {
        font-size: 2rem!important
    }

    .sub-area-bottom .global-infra {
        margin-top: 3rem
    }

    .sub-area-bottom .business-support {
        flex-direction: column
    }

    .sub-area-bottom .business-support img {
        height: auto;
        width: 100%
    }

    .sub-area-bottom .business-support .text-box {
        padding-bottom: 0!important;
        padding-left: 0!important;
        padding-right: 0!important;
        padding-top: 0!important;
        width: 100%!important
    }

    .sub-area-bottom .business-support .text-box h3 {
        font-size: 1.125rem;
        line-height: 1.75rem;
        padding-bottom: .5rem;
        text-align: center
    }

    .sub-area-bottom .business-support .text-box p {
        text-align: center
    }

    .sub-area-bottom .business-support .img-box {
        padding-left: 0!important;
        padding-right: 0!important;
        width: 100%!important
    }

    .sub-area-bottom .business-support .m-order-a {
        order: 2
    }

    .sub-area-bottom .business-support .m-order-b {
        order: 1
    }

    .sub-area-bottom .business-support:nth-child(2n) {
        margin-bottom: 3rem;
        margin-top: 3rem
    }

    .sub-area-bottom .regist-service {
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%
    }

    .sub-area-bottom .public-procedure .procedure-cont {
        flex-direction: column!important;
        margin-left: auto!important;
        margin-right: auto!important
    }

    .sub-area-bottom .public-procedure .titleBox {
        margin-bottom: 1rem!important;
        margin-right: 0!important;
        min-width: unset!important;
        padding-bottom: 1rem!important;
        padding-left: 1.25rem!important;
        padding-right: 1.25rem!important;
        padding-top: 1rem!important
    }

    .sub-area-bottom .service-procedure ul {
        width: 100%
    }

    .sub-area-bottom .service-procedure ul li {
        text-align: left
    }

    .sub-area-bottom .service-procedure ul li:not(:last-child) {
        margin-bottom: .75rem
    }

    .sub-area-bottom .managed-service .managed-img {
        padding-bottom: 40%;
        width: 100%
    }

    .sub-area-bottom .managed-service .pdf-download .pdf-download-box {
        flex-direction: column;
        width: 100%
    }

    .sub-area-bottom .managed-service .pdf-download .pdf-download-box p {
        font-size: 15px;
        padding-bottom: .5rem
    }

    .sub-area-bottom .sub-inquiry {
        padding: 1rem
    }

    .sub-area-bottom .sub-inquiry .inquiry-input {
        flex-direction: column
    }

    .sub-area-bottom .sub-inquiry .inquiry-input ul {
        width: 100%!important
    }

    .sub-area-bottom .cloud-customer-case {
        padding: 0;
        padding-top: 1.5rem
    }

    .sub-area-bottom .cloud-customer-case li {
        flex-direction: column
    }

    .sub-area-bottom .cloud-customer-case li .img-box {
        padding: 0;
        width: 100%
    }

    .sub-area-bottom .cloud-customer-case li .text-box {
        padding-bottom: 0;
        padding-left: 0;
        padding-top: 1.5rem;
        width: 100%
    }

    .sub-area-bottom .cloud-customer-case li .text-box .title {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: .5rem;
        text-align: center
    }

    .sub-area-bottom .cloud-customer-case li .text-box p {
        font-size: 1rem;
        line-height: 1.5rem;
        padding-bottom: 0;
        text-align: center
    }

    .sub-area-bottom .cloud-customer-list .list {
        -moz-column-gap: 8px;
        column-gap: 8px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap: 15px
    }

    .sub-area-bottom .cloud-customer-list .list li {
        height: 3rem;
        padding: .25rem!important
    }

    & .m-hidden {
        display: none!important
    }
}

.hc-invisible {
    visibility: hidden!important
}

.hc-absolute {
    position: absolute!important
}

.hc-relative {
    position: relative!important
}

.hc--right-3 {
    right: -.75rem!important
}

.hc-left-36 {
    left: 9rem!important
}

.hc-left-56 {
    left: 14rem!important
}

.hc-right-0 {
    right: 0!important
}

.hc-right-24 {
    right: 6rem!important
}

.hc-right-5 {
    right: 1.25rem!important
}

.hc-right-6 {
    right: 1.5rem!important
}

.hc-right-64 {
    right: 16rem!important
}

.hc-right-96 {
    right: 24rem!important
}

.hc-top-0 {
    top: 0!important
}

.hc-top-10 {
    top: 2.5rem!important
}

.hc-top-28 {
    top: 7rem!important
}

.hc-top-40 {
    top: 10rem!important
}

.hc-top-5 {
    top: 1.25rem!important
}

.hc-z-50 {
    z-index: 50!important
}

.hc-float-right {
    float: right!important
}

.hc-m-1 {
    margin: .25rem!important
}

.hc-m-auto {
    margin: auto!important
}

.hc-mx-1 {
    margin-left: .25rem!important;
    margin-right: .25rem!important
}

.hc-mx-4 {
    margin-left: 1rem!important;
    margin-right: 1rem!important
}

.hc-mx-auto {
    margin-left: auto!important;
    margin-right: auto!important
}

.hc-my-10 {
    margin-bottom: 2.5rem!important;
    margin-top: 2.5rem!important
}

.hc-my-4 {
    margin-bottom: 1rem!important;
    margin-top: 1rem!important
}

.hc-my-6 {
    margin-bottom: 1.5rem!important;
    margin-top: 1.5rem!important
}

.hc-my-7 {
    margin-bottom: 1.75rem!important;
    margin-top: 1.75rem!important
}

.hc--mr-4 {
    margin-right: -1rem!important
}

.hc--mt-14 {
    margin-top: -3.5rem!important
}

.hc--mt-4 {
    margin-top: -1rem!important
}

.hc-mb-0 {
    margin-bottom: 0!important
}

.hc-mb-1 {
    margin-bottom: .25rem!important
}

.hc-mb-10 {
    margin-bottom: 2.5rem!important
}

.hc-mb-12 {
    margin-bottom: 3rem!important
}

.hc-mb-16 {
    margin-bottom: 4rem!important
}

.hc-mb-2 {
    margin-bottom: .5rem!important
}

.hc-mb-20 {
    margin-bottom: 5rem!important
}

.hc-mb-24 {
    margin-bottom: 6rem!important
}

.hc-mb-3 {
    margin-bottom: .75rem!important
}

.hc-mb-4 {
    margin-bottom: 1rem!important
}

.hc-mb-5 {
    margin-bottom: 1.25rem!important
}

.hc-mb-6 {
    margin-bottom: 1.5rem!important
}

.hc-mb-7 {
    margin-bottom: 1.75rem!important
}

.hc-mb-8 {
    margin-bottom: 2rem!important
}

.hc-mb-9 {
    margin-bottom: 2.25rem!important
}

.hc-ml-1 {
    margin-left: .25rem!important
}

.hc-ml-10 {
    margin-left: 2.5rem!important
}

.hc-ml-2 {
    margin-left: .5rem!important
}

.hc-ml-4 {
    margin-left: 1rem!important
}

.hc-ml-5 {
    margin-left: 1.25rem!important
}

.hc-ml-6 {
    margin-left: 1.5rem!important
}

.hc-mr-1 {
    margin-right: .25rem!important
}

.hc-mr-2 {
    margin-right: .5rem!important
}

.hc-mr-3 {
    margin-right: .75rem!important
}

.hc-mr-4 {
    margin-right: 1rem!important
}

.hc-mr-5 {
    margin-right: 1.25rem!important
}

.hc-mt-0 {
    margin-top: 0!important
}

.hc-mt-0\.5 {
    margin-top: .125rem!important
}

.hc-mt-1 {
    margin-top: .25rem!important
}

.hc-mt-10 {
    margin-top: 2.5rem!important
}

.hc-mt-11 {
    margin-top: 2.75rem!important
}

.hc-mt-12 {
    margin-top: 3rem!important
}

.hc-mt-14 {
    margin-top: 3.5rem!important
}

.hc-mt-16 {
    margin-top: 4rem!important
}

.hc-mt-2 {
    margin-top: .5rem!important
}

.hc-mt-2\.5 {
    margin-top: .625rem!important
}

.hc-mt-20 {
    margin-top: 5rem!important
}

.hc-mt-3 {
    margin-top: .75rem!important
}

.hc-mt-4 {
    margin-top: 1rem!important
}

.hc-mt-5 {
    margin-top: 1.25rem!important
}

.hc-mt-6 {
    margin-top: 1.5rem!important
}

.hc-mt-7 {
    margin-top: 1.75rem!important
}

.hc-mt-8 {
    margin-top: 2rem!important
}

.hc-block {
    display: block!important
}

.hc-inline-block {
    display: inline-block!important
}

.hc-flex {
    display: flex!important
}

.hc-hidden {
    display: none!important
}

.hc-h-144 {
    height: 44rem!important
}

.hc-h-16 {
    height: 4rem!important
}

.hc-h-60 {
    height: 15rem!important
}

.hc-h-72 {
    height: 18rem!important
}

.hc-min-h-full {
    min-height: 100%!important
}

.hc-w-1\/12 {
    width: 8.333333%!important
}

.hc-w-1\/2 {
    width: 50%!important
}

.hc-w-1\/3 {
    width: 33.333333%!important
}

.hc-w-10 {
    width: 2.5rem!important
}

.hc-w-11\/12 {
    width: 91.666667%!important
}

.hc-w-2\/12 {
    width: 16.666667%!important
}

.hc-w-2\/3 {
    width: 66.666667%!important
}

.hc-w-24 {
    width: 6rem!important
}

.hc-w-28 {
    width: 7rem!important
}

.hc-w-3\/4 {
    width: 75%!important
}

.hc-w-5 {
    width: 1.25rem!important
}

.hc-w-5\/12 {
    width: 41.666667%!important
}

.hc-w-5\/6 {
    width: 83.333333%!important
}

.hc-w-9\/12 {
    width: 75%!important
}

.hc-w-full {
    width: 100%!important
}

.hc-cursor-pointer {
    cursor: pointer!important
}

.hc-resize-none {
    resize: none!important
}

.hc-grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
}

.hc-grid-cols-6 {
    grid-template-columns: repeat(6,minmax(0,1fr))!important
}

.hc-flex-col {
    flex-direction: column!important
}

.hc-items-center {
    align-items: center!important
}

.hc-justify-center {
    justify-content: center!important
}

.hc-justify-between {
    justify-content: space-between!important
}

.hc-gap-4 {
    gap: 1rem!important
}

.hc-overflow-auto {
    overflow: auto!important
}

.hc-overflow-y-scroll {
    overflow-y: scroll!important
}

.hc-whitespace-nowrap {
    white-space: nowrap!important
}

.hc-whitespace-break-spaces {
    white-space: break-spaces!important
}

.hc-text-balance {
    text-wrap: balance!important
}

.hc-break-keep {
    !important
}

.hc-rounded-2xl {
    border-radius: 1rem!important
}

.hc-rounded-full {
    border-radius: 9999px!important
}

.hc-rounded-none {
    border-radius: 0!important
}

.hc-rounded-xl {
    border-radius: .75rem!important
}

.hc-border {
    border-width: 1px!important
}

.hc-border-0 {
    border-width: 0!important
}

.hc-border-b {
    border-bottom-width: 1px!important
}

.hc-border-b-0 {
    border-bottom-width: 0!important
}

.hc-border-t {
    border-top-width: 1px!important
}

.hc-border-blue-400 {
    --tw-border-opacity: 1!important;
    border-color: rgb(96 165 250/var(--tw-border-opacity))!important
}

.hc-border-blue-700 {
    --tw-border-opacity: 1!important;
    border-color: rgb(29 78 216/var(--tw-border-opacity))!important
}

.hc-border-gray-200 {
    --tw-border-opacity: 1!important;
    border-color: rgb(229 231 235/var(--tw-border-opacity))!important
}

.hc-border-gray-300 {
    --tw-border-opacity: 1!important;
    border-color: rgb(209 213 219/var(--tw-border-opacity))!important
}

.hc-border-gray-800 {
    --tw-border-opacity: 1!important;
    border-color: rgb(31 41 55/var(--tw-border-opacity))!important
}

.hc-bg-blue-50 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(239 246 255/var(--tw-bg-opacity))!important
}

.hc-bg-blue-700 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(29 78 216/var(--tw-bg-opacity))!important
}

.hc-bg-gray-100 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))!important
}

.hc-bg-gray-200 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(229 231 235/var(--tw-bg-opacity))!important
}

.hc-bg-gray-50 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(249 250 251/var(--tw-bg-opacity))!important
}

.hc-bg-white {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))!important
}

.hc-p-0 {
    padding: 0!important
}

.hc-p-1 {
    padding: .25rem!important
}

.hc-p-10 {
    padding: 2.5rem!important
}

.hc-p-2 {
    padding: .5rem!important
}

.hc-p-3 {
    padding: .75rem!important
}

.hc-p-5 {
    padding: 1.25rem!important
}

.hc-p-6 {
    padding: 1.5rem!important
}

.hc-px-0 {
    padding-left: 0!important;
    padding-right: 0!important
}

.hc-px-10 {
    padding-left: 2.5rem!important;
    padding-right: 2.5rem!important
}

.hc-px-14 {
    padding-left: 3.5rem!important;
    padding-right: 3.5rem!important
}

.hc-px-16 {
    padding-left: 4rem!important;
    padding-right: 4rem!important
}

.hc-px-2 {
    padding-left: .5rem!important;
    padding-right: .5rem!important
}

.hc-px-3 {
    padding-left: .75rem!important;
    padding-right: .75rem!important
}

.hc-px-4 {
    padding-left: 1rem!important;
    padding-right: 1rem!important
}

.hc-px-5 {
    padding-left: 1.25rem!important;
    padding-right: 1.25rem!important
}

.hc-py-1 {
    padding-bottom: .25rem!important;
    padding-top: .25rem!important
}

.hc-py-10 {
    padding-bottom: 2.5rem!important;
    padding-top: 2.5rem!important
}

.hc-py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important
}

.hc-py-20 {
    padding-bottom: 5rem!important;
    padding-top: 5rem!important
}

.hc-py-3 {
    padding-bottom: .75rem!important;
    padding-top: .75rem!important
}

.hc-py-4 {
    padding-bottom: 1rem!important;
    padding-top: 1rem!important
}

.hc-pb-0 {
    padding-bottom: 0!important
}

.hc-pb-4 {
    padding-bottom: 1rem!important
}

.hc-pl-1 {
    padding-left: .25rem!important
}

.hc-pl-2 {
    padding-left: .5rem!important
}

.hc-pl-6 {
    padding-left: 1.5rem!important
}

.hc-pr-1 {
    padding-right: .25rem!important
}

.hc-pr-2 {
    padding-right: .5rem!important
}

.hc-pr-4 {
    padding-right: 1rem!important
}

.hc-pr-5 {
    padding-right: 1.25rem!important
}

.hc-pr-8 {
    padding-right: 2rem!important
}

.hc-pt-12 {
    padding-top: 3rem!important
}

.hc-pt-2 {
    padding-top: .5rem!important
}

.hc-pt-3 {
    padding-top: .75rem!important
}

.hc-pt-4 {
    padding-top: 1rem!important
}

.hc-pt-8 {
    padding-top: 2rem!important
}

.hc-pt-80 {
    padding-top: 20rem!important
}

.hc-text-left {
    text-align: left!important
}

.hc-text-center {
    text-align: center!important
}

.hc-text-right {
    text-align: right!important
}

.hc-align-baseline {
    vertical-align: baseline!important
}

.hc-align-middle {
    vertical-align: middle!important
}

.hc-align-bottom {
    vertical-align: bottom!important
}

.hc-align-text-top {
    vertical-align: text-top!important
}

.hc-align-text-bottom {
    vertical-align: text-bottom!important
}

.hc-text-2xl {
    font-size: 1.5rem!important;
    line-height: 2rem!important
}

.hc-text-3xl {
    font-size: 1.875rem!important;
    line-height: 2.25rem!important
}

.hc-text-4xl {
    font-size: 2.25rem!important;
    line-height: 2.5rem!important
}

.hc-text-8xl {
    font-size: 6rem!important;
    line-height: 1!important
}

.hc-text-base {
    font-size: 1rem!important;
    line-height: 1.5rem!important
}

.hc-text-lg {
    font-size: 1.125rem!important;
    line-height: 1.75rem!important
}

.hc-text-sm {
    font-size: .875rem!important;
    line-height: 1.25rem!important
}

.hc-text-xl {
    font-size: 1.25rem!important;
    line-height: 1.75rem!important
}

.hc-font-bold {
    font-weight: 700!important
}

.hc-font-light {
    font-weight: 300!important
}

.hc-font-medium {
    font-weight: 500!important
}

.hc-font-thin {
    font-weight: 100!important
}

.hc-leading-5 {
    line-height: 1.25rem!important
}

.hc-leading-6 {
    line-height: 1.5rem!important
}

.hc-leading-8 {
    line-height: 2rem!important
}

.hc-text-black {
    --tw-text-opacity: 1!important;
    color: rgb(0 0 0/var(--tw-text-opacity))!important
}

.hc-text-blue-500 {
    --tw-text-opacity: 1!important;
    color: rgb(59 130 246/var(--tw-text-opacity))!important
}

.hc-text-blue-600 {
    --tw-text-opacity: 1!important;
    color: rgb(37 99 235/var(--tw-text-opacity))!important
}

.hc-text-gray-300 {
    --tw-text-opacity: 1!important;
    color: rgb(209 213 219/var(--tw-text-opacity))!important
}

.hc-text-gray-400 {
    --tw-text-opacity: 1!important;
    color: rgb(156 163 175/var(--tw-text-opacity))!important
}

.hc-text-gray-500 {
    --tw-text-opacity: 1!important;
    color: rgb(107 114 128/var(--tw-text-opacity))!important
}

.hc-text-gray-600 {
    --tw-text-opacity: 1!important;
    color: rgb(75 85 99/var(--tw-text-opacity))!important
}

.hc-text-gray-900 {
    --tw-text-opacity: 1!important;
    color: rgb(17 24 39/var(--tw-text-opacity))!important
}

.hc-text-purple-600 {
    --tw-text-opacity: 1!important;
    color: rgb(147 51 234/var(--tw-text-opacity))!important
}

.hc-text-red-500 {
    --tw-text-opacity: 1!important;
    color: rgb(239 68 68/var(--tw-text-opacity))!important
}

.hc-text-red-700 {
    --tw-text-opacity: 1!important;
    color: rgb(185 28 28/var(--tw-text-opacity))!important
}

.hc-text-white {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

.hc-underline {
    -webkit-text-decoration-line: underline!important;
    text-decoration-line: underline!important
}

.hc-no-underline {
    -webkit-text-decoration-line: none!important;
    text-decoration-line: none!important
}

.hc-mix-blend-darken {
    mix-blend-mode: darken!important
}

.hover\:hc-bg-blue-500:hover {
    --tw-bg-opacity: 1!important;
    background-color: rgb(59 130 246/var(--tw-bg-opacity))!important
}

.hover\:hc-text-white:hover {
    --tw-text-opacity: 1!important;
    color: rgb(255 255 255/var(--tw-text-opacity))!important
}

@media (min-width: 768px) {
    .md\:hc-mx-auto {
        margin-left:auto!important;
        margin-right: auto!important
    }

    .md\:hc-mb-0 {
        margin-bottom: 0!important
    }

    .md\:hc-mr-10 {
        margin-right: 2.5rem!important
    }

    .md\:hc-mt-10 {
        margin-top: 2.5rem!important
    }

    .md\:hc-mt-2 {
        margin-top: .5rem!important
    }

    .md\:hc-mt-5 {
        margin-top: 1.25rem!important
    }

    .md\:hc-block {
        display: block!important
    }

    .md\:hc-inline-block {
        display: inline-block!important
    }

    .md\:hc-hidden {
        display: none!important
    }

    .md\:hc-w-1\/6 {
        width: 16.666667%!important
    }

    .md\:hc-w-full {
        width: 100%!important
    }

    .md\:hc-text-2xl {
        font-size: 1.5rem!important;
        line-height: 2rem!important
    }

    .md\:hc-text-4xl {
        font-size: 2.25rem!important;
        line-height: 2.5rem!important
    }

    .md\:hc-text-lg {
        font-size: 1.125rem!important;
        line-height: 1.75rem!important
    }

    .md\:hc-mix-blend-normal {
        mix-blend-mode: normal!important
    }
}

@media (min-width: 1280px) {
    .lg\:hc-float-right {
        float:right!important
    }

    .lg\:hc-inline-block {
        display: inline-block!important
    }

    .lg\:hc-flex-nowrap {
        flex-wrap: nowrap!important
    }
}

body header .header-wrap h1.logo img {
    height: 42px;
}

body header .header-wrap h1.logo {
    margin-bottom: .6rem;
    margin-top: .6rem;
}

body .wrap .container {
    width: 1340px;
    max-width: 1340px;
}

body .mobile-header .mobile-top h1.logo img {
    height: 36px;
}