/**
 * This style power by Mure.Yang (2024/05/11)
 * Get a lite style from tailwindcss3!
 * https://tailwindcss.com/doc
 */

::selection { background: #444; color: #fff; }

::-webkit-input-placeholder{ color:#ccc !important; }
::-moz-placeholder{ color:#ccc !important; }
:-ms-input-placeholder { color:#ccc !important; } /* ie */
input:-moz-placeholder { color:#ccc !important; }

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; }
::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; }
::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; }
::-webkit-scrollbar-corner { background: transparent; }

.wrapper { width: 1080px; margin: auto; }

.sub-section-main { padding: 40px 0; box-sizing: border-box; background: #f8f8f8; }
.sub-section-main .wrapper { display: flex; justify-content: space-between; }

.sub-section-container { width: 720px; }
.sub-section-container .sub-section-container-title { font-size: 24px; margin-bottom: 10px; }
.sub-section-container .sub-section-container-title a { font-size: 14px; }
.sub-section-container .sub-section-container-content { }
.sub-section-container .sub-section-container-content .content-detail { padding: 10px 0; }
.sub-section-container .sub-section-container-description {
    padding: 10px; box-sizing: border-box;
    font-size: 12px; line-height: 18px; color: #aaa; background: #eee;
}

.sub-section-sider { width: 330px; }
.sub-section-sider .sub-section-sider-title { display: flex; align-items: center; height: 24px; font-size: 16px; font-weight: bold; margin-bottom: 18px; }
.sub-section-sider .sub-section-sider-content { padding: 20px; box-sizing: border-box; background: #fff; }

.sub-search { margin-top: 15px; margin-bottom: 15px; }

.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.clear-both { clear: both; }

.flex { display: flex; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.grow { flex-grow: 1; }

.text-black { color: rgb(31 41 55); }
.text-gray { color: rgb(156 163 175); }
.text-red { color: rgb(220 38 38); }
.text-green { color: rgb(22 163 74); }
.text-blue, .link, a.link { color: rgb(59 130 246); }

.underline { text-decoration-line: underline; }
.underline-hover:hover { text-decoration-line: underline; }
.decoration-2 { text-decoration-thickness: 2px; }
.underline-offset-2 { text-underline-offset: 2px; }
.underline-offset-4 { text-underline-offset: 4px; }
.underline-offset-8 { text-underline-offset: 8px; }
.line-through { text-decoration-line: line-through; }

.bg-transparent { background-color: transparent; }
.bg-white { background-color: #fff; }

.box-border { box-sizing: border-box; }

.text-xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
}
.text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}
.text-base {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
}
.text-lg {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
}
.text-xl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}
.text-2xl {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

.leading-3 { line-height: .75rem; /* 12px */ }
.leading-6 { line-height: 1.5rem; /* 24px */ }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.line-clamp-2 {
    display: -webkit-box; overflow: hidden; text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.overflow-hidden { overflow: hidden; }

.font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }

.rounded { border-radius: 0.25rem; /* 4px */ }
.rounded-lg { border-radius: 0.5rem; /* 8px */ }
.rounded-xl { border-radius: 0.75rem; /* 12px */ }

.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }
.border-gray { border-color: rgb(209 213 219); }
.border-solid { border-style: solid; }

.outline-0 { outline-width: 0px; }

.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.w-full { width: 100%; }
.w-64 { width: 16rem; /* 256px */ }

.h-full { height: 100%; }

/* Margin */

.m-auto { margin: auto; }
.m-0 { margin: 0px; }

.m-1 { margin: 0.25rem; /* 4px */ }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.mt-1 { margin-top: 0.25rem; /* 4px */ }
.mb-1 { margin-bottom: 0.25rem; /* 4px */ }
.ml-1 { margin-left: 0.25rem; /* 4px */ }
.mr-1 { margin-right: 0.25rem; /* 4px */ }

.m-2 { margin: 0.5rem; /* 8px */ }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.mt-2 { margin-top: 0.5rem; /* 8px */ }
.mb-2 { margin-bottom: 0.5rem; /* 8px */ }
.ml-2 { margin-left: 0.5rem; /* 8px */ }
.mr-2 { margin-right: 0.5rem; /* 8px */ }

.m-3 { margin: 0.75rem; /* 12px */ }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.mt-3 { margin-top: 0.75rem; /* 12px */ }
.mb-3 { margin-bottom: 0.75rem; /* 12px */ }
.ml-3 { margin-left: 0.75rem; /* 12px */ }
.mr-3 { margin-right: 0.75rem; /* 12px */ }

.m-4 { margin: 1rem; /* 16px */ }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; /* 16px */ }
.mb-4 { margin-bottom: 1rem; /* 16px */ }
.ml-4 { margin-left: 1rem; /* 16px */ }
.mr-4 { margin-right: 1rem; /* 16px */ }

/* Padding */

.p-0 { padding: 0px; }
.p-1 { padding: 0.25rem; /* 4px */ }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pt-1 { padding-top: 0.25rem; /* 4px */ }
.pb-1 { padding-bottom: 0.25rem; /* 4px */ }
.pl-1 { padding-left: 0.25rem; /* 4px */ }
.pr-1 { padding-right: 0.25rem; /* 4px */ }

.p-2 { padding: 0.5rem; /* 8px */ }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pt-2 { padding-top: 0.5rem; /* 8px */ }
.pb-2 { padding-bottom: 0.5rem; /* 8px */ }
.pl-2 { padding-left: 0.5rem; /* 8px */ }
.pr-2 { padding-right: 0.5rem; /* 8px */ }

.p-3 { padding: 0.75rem; /* 12px */ }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pt-3 { padding-top: 0.75rem; /* 12px */ }
.pb-3 { padding-bottom: 0.75rem; /* 12px */ }
.pl-3 { padding-left: 0.75rem; /* 12px */ }
.pr-3 { padding-right: 0.75rem; /* 12px */ }

.p-4 { padding: 1rem; /* 16px */ }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-4 { padding-top: 1rem; /* 16px */ }
.pb-4 { padding-bottom: 1rem; /* 16px */ }
.pl-4 { padding-left: 1rem; /* 16px */ }
.pr-4 { padding-right: 1rem; /* 16px */ }

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


@media (max-width: 1199px) {
    .wrapper { width: 920px; }
    .sub-section-container { width: 600px; }
    .sub-section-sider { width: 300px; }
    .sub-section-container .sub-section-container-title { font-size: 18px; }
}
@media (max-width: 960px) {
    .wrapper { width: 720px; }
    .sub-section-main { padding: 30px 0; }
    .sub-section-container { width: 480px; }
    .sub-section-sider { width: 220px; }
}
@media (max-width: 767px) {
    .wrapper { width: 100%; }
    .sub-section-main { padding: 20px; }
    .sub-section-main .wrapper { display: block; }
    .sub-section-container, .sub-section-sider { width: 100%; }
    .sub-section-container { margin-bottom: 20px; }
    .sub-section-container .sub-section-container-title { font-size: 16px; font-weight: bold; }
    .sub-section-sider .sub-section-sider-title { margin-bottom: 10px; }
}
@media (max-width: 479px) {}