/* ================================
   Common Setting
================================ */  

:root {
	--color-primary-1:#00A4A6;
	--color-primary-2:#23323B;
	--color-bg:#F4F4F4;

	--color-gray-1:#FCFCFD;
	--color-gray-2:#F8FAFC;
	--color-gray-3:#CDD5DF;
	--color-gray-4:#9AA4B2; 
	--color-gray-5:#4B5565;
	--color-gray-6:#202939;
}



 
/* ================================
   Common Font
================================ */ 
@font-face {
    font-family: 'Sebang';
    src: url('../../fonts/sebang/SEBANG-Gothic-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sebang';
    src: url('../../fonts/sebang/SEBANG-Gothic-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Sebang';
    src: url('../../fonts/sebang/SEBANG-Gothic-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
} 
 
/* ================================
   Common Layout
================================ */  
  
.company.font-intro {
	font-family: "Sebang";
}

.company.font-intro .local-head {
    max-width: 147.6rem;
    padding: 0 1.8rem;
    margin: 0 auto;
}  

.company.font-intro .page-body {
    padding-top: 14.8rem;
} 

 
.company.font-intro .content-body .section-wrap {
    max-width: 147.6rem;
    padding: 0 1.8rem;
    margin: 18rem auto;
}
 
 
/* ================================
   Common Head
================================ */  

.company.font-intro .section-head {
    margin-bottom: 8rem;
}

.company.font-intro .section-subject span {
    display: block;
    margin-bottom: 4rem;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.4; 
    color: var(--color-gray-5); 
}

.company.font-intro .section-name { 
    font-size: 8rem;
    font-weight: 400;
    line-height: 1.15; 

    color: var(--color-primary-2);
}

.company.font-intro .section-name strong {
    font-weight: 400;
    color: var(--color-primary-1);
}

.company.font-intro .section-desc {
    margin-top: 2rem;
}

.company.font-intro .section-desc p { 
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.8; 
    color: var(--color-gray-5);
}

 

/* ================================
   Common Button
================================ */  

.company.font-intro .font-banner-buttons {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 3.5rem;
}
.company.font-intro .font-banner-buttons a {
    height: 6.8rem;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: .8rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1; 
    text-decoration: none; 
    color: #fff;
    background: transparent;
    border: 2px solid var(--color-gray-4);
    transition:
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease;
} 
.company.font-intro .font-banner-buttons a:hover,
.company.font-intro .font-banner-buttons a:hover {
	transform:translateY(-.3rem); 
	border-color:#fff;
}

.company.font-intro .font-banner-buttons .btn-primary {
    color: #fff;
    background: var(--color-primary-1);
    border-color: var(--color-primary-1);
}  


.company.font-intro .font-banner-buttons .btn-primary:hover {
	background:#00BFC0; 
    border-color: #00BFC0;
}
 

 


/* ========================================
   Font Visual 
======================================== */

.company.font-intro .font-visual {
    position: relative;  
    background-image: url("../../image/client/font/font-intro-visual.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    overflow: hidden;
}

.company.font-intro .font-visual .section-wrap {  
    display: flex;
    align-items: center;
} 
.company.font-intro .font-visual .section-head {
    width: 100%;
    margin: 0;
}

.company.font-intro .font-visual .section-subject {
    max-width: 80rem;
}
 
.company.font-intro .font-visual .font-visual-label {
    display: flex; 
	align-items:center;
	gap:1.7rem;
    margin-bottom: 5.6rem;  
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4; 
    color: var(--color-gray-3);
} 
.company.font-intro .font-visual .font-visual-label::before {
    content: "";
    display: inline-block;
    width: 2.6rem;
    height: 2.6rem; 
    vertical-align: .1rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        var(--color-primary-1) 0%,
        rgba(0, 164, 166, 0) 70%
    );
    animation: fontVisualGlow 2s ease-in-out infinite;
}
@keyframes fontVisualGlow {
    0%,
    100% {
        opacity: .3;
        transform: scale(.9);
        filter: blur(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
        filter: blur(.2px);
    }
}
.company.font-intro .font-visual .section-name { 
    font-size: 8.5rem;
    font-weight: 400;  
    color: #fff;
}
.company.font-intro .font-visual .section-name strong {
    display: inline-block; 
	font-size: 12rem; 
    font-weight: 700; 
    background: linear-gradient(
        90deg,
        #fff 0%,
        #a9e4e6 48%,
        var(--color-primary-1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.company.font-intro .font-visual .section-desc {
    margin-top: 5rem;
}

.company.font-intro .font-visual .section-desc p { 
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.8; 
    color: var(--color-gray-1);
} 


 
/* ================================
   Our Voice
================================ */
.company.font-intro .our-voice {
    background: var(--color-bg);   
	overflow:hidden;
} 
.company.font-intro .our-voice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr);
    gap: 4rem;
    align-items: start;
	justify-content:space-between;
}
.company.font-intro .our-voice .section-head {
    margin: 0;
} 

.company.font-intro .our-voice .section-name { 
    font-size: 6.8rem;
    font-weight: 700;
    line-height: 1.18; 
} 
.company.font-intro .our-voice .section-name strong {
    font-weight: 700; 
}
.company.font-intro .our-voice .section-body {
    padding-top: 6rem;
}
.company.font-intro .our-voice .section-desc {
    margin: 0;
}
.company.font-intro .our-voice .section-desc p { 
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.8;  
    color: var(--color-gray-5);
} 
.company.font-intro .our-voice .section-desc p + p {
    margin-top: 3.4rem;
}
 
/* ================================
   What Changed
================================ */

.company.font-intro .what-changed {
    background: #fff;
}
  
.company.font-intro .what-changed-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;  
}

.company.font-intro .what-changed-item {
    min-width: 0; 
} 
.company.font-intro .changed-card {
    position: relative;
    height: 47rem;
    display: flex;
    flex-direction: column;
    padding: 4rem 2.4rem;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-3);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 0 5rem rgba(20, 40, 60, .05);
    transition: transform .35s ease, box-shadow .35s ease;
}

.company.font-intro .changed-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-primary-1);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.company.font-intro .changed-card:hover {
    transform: translateY(-.9rem);
    box-shadow: 0 0 3.2rem rgba(0, 164, 166, .1);
	border-color: var(--color-primary-1);
}

.company.font-intro .changed-card:hover::after {
    opacity: 1;
}
.company.font-intro .changed-visual {
    height: 13rem; 
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;  
} 
.company.font-intro .changed-visual img{
	max-width:100%;
}
.company.font-intro .glyph-before,
.company.font-intro .glyph-after {
    font-size: 7rem;
    font-weight: 700;
    line-height: 1; 
    color: var(--color-gray-3);
}
.company.font-intro .glyph-after { 
    color: var(--color-primary-2);
} 
.company.font-intro .changed-arrow {
    margin: 0 1rem;
    font-size: 2rem;
    color: var(--color-primary-1);
}
.company.font-intro .changed-sample {
    text-align: center;
    color: var(--color-gray-6);
    font-size: 2.8rem;
    line-height: 1.2; 
	font-weight: 300;
}
 
.company.font-intro .changed-visual-italic {
    flex-direction: column;
    align-items: center;  
	justify-content:center;
    gap: 2rem;
}

.company.font-intro .changed-visual-italic span,
.company.font-intro .changed-visual-italic strong,
.company.font-intro .changed-visual-italic b {
    font-size: 2.6rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1; 
    color: var(--color-gray-5);
}

.company.font-intro .changed-visual-italic strong {
    font-weight: 400;
    color: var(--color-primary-2);
}

.company.font-intro .changed-visual-italic b {
    font-weight: 700;
    color: var(--color-primary-1);
} 
.company.font-intro .changed-visual-alpha strong {
    font-size: 4.5rem;
    font-weight: 700; 
    color: var(--color-primary-1);
	letter-spacing:1rem;
} 
.company.font-intro .changed-content {
    padding-top: 3.2rem;
    margin-top: 3.2rem;
	border-top:1px dashed var(--color-gray-4);
}

.company.font-intro .changed-number {
    display: block; 
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary-1);
}

.company.font-intro .changed-title { 
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.3; 
	margin:2rem 0;
    color: var(--color-primary-2);
}

.company.font-intro .changed-desc { 
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.75; 
    color: var(--color-gray-6);
}
 

/* ========================================
   Font Style
======================================== */
  
.company.font-intro .font-style-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem; 
}
.company.font-intro .font-style-item {
    min-width: 0;
    border: 1px solid var(--color-gray-3);
    background: #fff;
}
.company.font-intro .font-style-card {
    height: 34rem;
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; 
} 
.company.font-intro .font-style-top {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4; 
    color: var(--color-gray-5);
	opacity:.68;
	letter-spacing:.1em;
}
 

.company.font-intro .font-style-sample {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center; 
    min-height: 0;
}

.company.font-intro .font-style-sample span {
    display: block; 
    font-size: 10rem;
    line-height: 1;  
    color: var(--color-primary-2);
}
 
.company.font-intro .style-italic-light .font-style-info strong,
.company.font-intro .style-light .font-style-info strong,
.company.font-intro .style-light .font-style-sample span { 
	font-weight: 300;
}
 

.company.font-intro .style-regular {
    background: #eef1f5;
    border-color: #eef1f5; 
}

.company.font-intro .style-italic-regular .font-style-info strong,
.company.font-intro .style-regular .font-style-info strong,
.company.font-intro .style-regular .font-style-sample span {
    font-weight: 400;
}
 
.company.font-intro .style-bold {
    border-color: var(--color-primary-2);
    background: var(--color-primary-2); 
}

.company.font-intro .style-italic-bold .font-style-info strong,
.company.font-intro .style-bold .font-style-info strong,
.company.font-intro .style-bold .font-style-sample span {
    font-weight: 700;
    color: #fff;
}



.company.font-intro .style-italic-light .font-style-info strong,
.company.font-intro .style-italic-regular .font-style-info strong,
.company.font-intro .style-italic-bold .font-style-info strong,
.company.font-intro .style-italic-light .font-style-sample span,
.company.font-intro .style-italic-regular .font-style-sample span,
.company.font-intro .style-italic-bold .font-style-sample span {
    font-style: italic;
} 

.company.font-intro .style-italic-light .font-style-top,
.company.font-intro .style-italic-regular .font-style-top,
.company.font-intro .style-italic-bold .font-style-top{
	color: var(--color-primary-1);
}


.company.font-intro .style-italic-light .font-style-sample span {
    font-weight: 300;
}
.company.font-intro .style-italic-regular {
    background: #e0f4f4;
    border-color: #e0f4f4;
}

.company.font-intro .style-italic-regular .font-style-sample span {
    font-weight: 400;
}

.company.font-intro .style-italic-bold {
    border-color: var(--color-primary-1);
    background: var(--color-primary-1);
}

.company.font-intro .style-italic-bold .font-style-sample span {
    font-weight: 700;
    color: #fff;
}
 
.company.font-intro .font-style-info {
    flex-shrink: 0;
}

.company.font-intro .font-style-info strong {
    display: block; 
    font-size: 2.2rem; 
    line-height: 1.4; 
    color: var(--color-primary-2);
}

.company.font-intro .font-style-info p {
    margin: .5rem 0 0; 
    font-size: 1.6rem; 
    line-height: 1.5; 
    color: var(--color-gray-5); 
	opacity:.6;
}

.company.font-intro .style-bold .font-style-info strong,
.company.font-intro .style-italic-bold .font-style-info strong {
    color: #fff;
} 
.company.font-intro .style-italic-bold .font-style-info p,
.company.font-intro .style-bold .font-style-info p,
.company.font-intro .style-bold .font-style-top,
.company.font-intro .style-italic-bold .font-style-top {
    color: var(--color-gray-3);
} 
 
.company.font-intro .font-package { 
    margin-top: 8rem;
    padding: 1.2rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: .4rem;
    background: var(--color-primary-2); 
    font-size: 2.2rem;
    font-weight: 700; 
    color: #fff;
}
 

.company.font-intro .font-package-download {
    display: inline-flex;
    align-items: center;
    justify-content: center; 
	padding:1rem; 
	line-height: 1;
    border-radius: .3rem; 
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none; 
    color: #fff;
    background: #3DA8A1;
}
 
.company.font-intro .font-specimen {
    margin-top: 6rem;
}

.company.font-intro .font-specimen-group + .font-specimen-group {
    margin-top: 5.4rem;
}

.company.font-intro .font-specimen-group h5 {
    padding:1rem 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4; 
    color: var(--color-gray-5);
} 
.company.font-intro .font-specimen-group.italic h5 {
    color: var(--color-primary-1);
} 
 
.company.font-intro .font-specimen-list li {
    padding:2.5rem 2rem;
    display: flex;
    align-items: center; 
    border-bottom: 1px solid var(--color-gray-3);
} 
.company.font-intro .font-specimen-weight {
    width: 15rem;
    flex-shrink: 0; 
    font-size: 1.5rem;
    font-weight: 400; 
    color: var(--color-gray-4);
}

.company.font-intro .font-specimen-text {
    flex: 1; 
    font-size: 3.4rem;
    line-height: 1; 
    color: var(--color-primary-2);
}

.company.font-intro .font-specimen-text.weight-light {
    font-weight: 300;
}

.company.font-intro .font-specimen-text.weight-regular {
    font-weight: 400;
}

.company.font-intro .font-specimen-text.weight-bold {
    font-weight: 700;
}

.company.font-intro .font-specimen-group.italic .font-specimen-text {
    font-style: italic;
}

.company.font-intro .font-download {
    width: 3.4rem;
    aspect-ratio:1; 
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;    
    text-decoration: none; 
	border-radius:.2rem;
    color: #fff;
    background: url('../../image/client/font/ic-font-download.svg') var(--color-primary-1) no-repeat center center / 1.9rem;
}

.company.font-intro .font-download:active {
    transform: scale(.92); 
}
  
  
/* ========================================
   Font Playground
======================================== */

.company.font-intro .font-playground { 
    --playground-card: #fff;
    --playground-text: var(--color-primary-2); 
    --playground-sub: var(--color-gray-5); 
    position: relative;
	overflow:hidden;
    background: var(--color-bg);
    transition:
        background .4s ease,
        color .4s ease;
} 
.company.font-intro .font-playground .theme-toggle {
    position: absolute; 
    top: 0;
    right: 0; 
    display: flex;
    align-items: center;
    justify-content: center; 
	width: 6rem;
	aspect-ratio:1; 
    border-radius: 50%;  
    cursor: pointer; 
    transition:
        background .4s ease,
        transform .2s ease; 
	background-repeat:no-repeat;
	background-size:50% auto; 
	background-position:center center;
}  
.company.font-intro .font-playground .theme-toggle {
    background-image: url("../../image/client/font/theme-toggle-dark.svg");
    background-color: var(--color-primary-2); 
}

.company.font-intro .font-playground.dark .theme-toggle {
    background-image: url("../../image/client/font/theme-toggle-light.svg");
    background-color: #fff; 
}
.company.font-intro .font-playground .section-subject span{
	color:var(--playground-sub);

}
.company.font-intro .font-playground .playground {
    padding: 4rem;
    border-radius: 2rem;
    background: var(--playground-card);
    transition:
        background .4s ease,
        box-shadow .4s ease;
}
 
.company.font-intro .font-playground .playground-tools {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 2rem;  
	font-size: 1.6rem;
}
 
.company.font-intro .font-playground .playground-style {
    display: flex;
    align-items: center; 
    gap: .8rem;
}

.company.font-intro .font-playground .style-btn { 
    padding: 1rem 1.2rem; 
    border: 0;
    border-radius: .2rem;  
    font-weight: 400; 
    color: var(--color-gray-4);
    background: transparent; 
    cursor: pointer; 
	line-height: 1;
    transition:
        color .25s ease,
        background .25s ease;
}

.company.font-intro .font-playground .style-btn[data-style="italic"]{
	font-style:italic;
}

.company.font-intro .font-playground .style-btn.active {
    color: #fff;
    background: var(--color-gray-6);
}
 
.company.font-intro .font-playground .playground-size {
    display: flex;
    align-items: center; 
    gap: 2rem;
}

.company.font-intro .font-playground .size-label,
.company.font-intro .font-playground .size-value {  
    font-weight: 400; 
    color: var(--playground-text);
}
 
.company.font-intro .font-playground .size-value strong{
	font-weight: 400;
}

.company.font-intro .font-playground .range-wrap {
    position: relative; 
    width: 18rem;
    height: 2rem; 
    display: flex;
    align-items: center;
}

.company.font-intro .font-playground .font-range {
    width: 100%;
    height: .2rem;  
    margin: 0; 
    appearance: none;
    -webkit-appearance: none; 
    border: 0; 
    background: var(--color-gray-6); 
    cursor: pointer;
}
 
.company.font-intro .font-playground .font-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    border: .2rem solid var(--color-primary-1);
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 .4rem rgba(0, 169, 176, .12);
    cursor: grab;
}

.company.font-intro .font-playground .font-range:active::-webkit-slider-thumb {
    cursor: grabbing;
}

 
.company.font-intro .font-playground .font-range::-moz-range-thumb {
    width: 1.8rem;
    height: 1.8rem; 
    border: .2rem solid var(--color-primary-1);
    border-radius: 50%; 
    background: #fff; 
    box-shadow:
        0 0 0 .4rem rgba(0, 169, 176, .12); 
    cursor: grab;
}
 
.company.font-intro .font-playground .playground-weight {
    display: flex;
    align-items: center; 
    gap: .8rem;
}

.company.font-intro .font-playground .weight-btn {   
	border-radius:.2rem;
    font-weight: 400; 
    color: var(--color-gray-4);
    background: transparent; 
    cursor: pointer;
	padding:1rem 1.2rem;
	line-height: 1;
    transition: color .25s ease;
}

.company.font-intro .font-playground .weight-btn.active { 
    color: #fff;
    background: var(--color-primary-1);
}

 

.company.font-intro .font-playground .playground-content {
    position: relative;
    min-height: 40rem;
	padding:8rem 0 10rem;
}

.company.font-intro .font-playground .playground-text {
    display: block; 
    width: 100%; 
    padding: 0; 
    border: 0;
    outline: 0;
    resize: none; 
    overflow: hidden; 
    font-size: 6rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2; 
    color: var(--playground-text);
    background: transparent; 
    transition:
        color .3s ease,
        font-size .15s ease;
}

.company.font-intro .font-playground .playground-text::selection {
    color: #fff;
    background: var(--color-primary-1);
}

 
.company.font-intro .font-playground .playground-info {
    position: absolute; 
    left: 0;
    right: 0;
    bottom: 0; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.company.font-intro .font-playground .font-info,
.company.font-intro .font-playground .text-count { 
    font-size: 1.4rem;
    font-weight: 400; 
    color: var(--color-gray-4);
}

.company.font-intro .font-playground .text-count strong {
    font-weight: 400;
}
 
.company.font-intro .font-playground .recommend-wrap {
    display: flex;
    align-items: center; 
    gap: 2rem; 
    margin-top: 3.2rem; 
}

.company.font-intro .font-playground .recommend-label {
    flex-shrink: 0;  
    color: var(--color-gray-4);
	font-size: 1.6rem;
    font-weight: 400;
}

.company.font-intro .font-playground .recommend-list {
    display: flex;
    align-items: center;  
    overflow-x: auto; 
    scrollbar-width: none;
    gap: 1rem; 
	flex-wrap:wrap;
}

.company.font-intro .font-playground .recommend-list::-webkit-scrollbar {
    display: none;
}

.company.font-intro .font-playground .recommend-btn {
    flex-shrink: 0;  
	font-size: 1.6rem;
    padding: 1.6rem 2rem; 
    border: .1rem solid var(--color-gray-4);
    border-radius: 6rem;   
    color: var(--color-gray-5);
    background: transparent;  
    cursor: pointer; 
	white-space:nowrap; 
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.company.font-intro .font-playground .recommend-btn.active {
    color: #fff;
    border-color: var(--color-primary-1);
    background: var(--color-primary-1);
}


/* ========================================
   Dark Theme
======================================== */

.company.font-intro .font-playground.dark {
    --playground-card: var(--color-gray-6);
    --playground-text: #fff;  
    --playground-sub: var(--color-gray-4); 
    background: var(--color-primary-2);
}
 

.company.font-intro .font-playground.dark .section-name {
    color: #fff;
}
 
.company.font-intro .font-playground.dark .style-btn.active {
    background: var(--color-primary-1);
}

.company.font-intro .font-playground.dark .font-range {
    background: var(--color-primary-1);
}

.company.font-intro .font-playground.dark .recommend-btn {
    color: var(--color-gray-3);
    border-color: var(--color-gray-4);
}

.company.font-intro .font-playground.dark .recommend-btn.active {
    border-color: var(--color-primary-1);
    background: var(--color-primary-1);
}

  

/* ========================================
   Italic Story
======================================== */

.company.font-intro .italic-story {
    position: relative; 
    overflow: hidden;  
    background-image: url("../../image/client/font/font-intro-italic-story-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
} 
  
.company.font-intro .italic-story .section-subject > span { 
    color: var(--color-gray-4);
}

.company.font-intro .italic-story .section-name {  
    color: #fff;
}

.company.font-intro .italic-story .section-name strong { 
    font-style: italic;  
}
 
.company.font-intro .italic-story .section-desc p { 
    color: var(--color-gray-3);
} 
.company.font-intro .italic-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 27rem 40rem;
    gap: 1.6rem;
}

.company.font-intro .italic-story-card {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;  
    display: flex;
    align-items: center;
    justify-content: center;
	padding:8.5rem;
} 
.company.font-intro .italic-story .card-label {
    position: absolute; 
    top: 4rem;
    left: 4rem; 
    z-index: 2; 
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1; 
    color: var(--color-gray-3);
}
 
.company.font-intro .italic-story .ci-card {
    grid-column: 1;
    grid-row: 1;
    background:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        rgba(130, 153, 163, .5); 
    background-size: 2rem 2rem;
}

.company.font-intro .italic-story .ci-logo {
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.company.font-intro .italic-story .ci-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
} 
.company.font-intro .italic-story .design-card {
    grid-column: 2;
    grid-row: 1 / 3;
	background: linear-gradient(   135deg,    #5ba1a5 0%,    var(--color-primary-1) 100%); 
} 
.company.font-intro .italic-story .slogan-card {
    grid-column: 1;
    grid-row: 2; 
    background-image: url("../../image/client/font/font-slogan-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	text-align: center;
}
 
.company.font-intro .italic-story .slogan-content span { 
    font-size: 3.6rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2; 
    color: #fff; 
    transform: skewX(-6deg);
}
 


/* ==================================================
   Font Coverage 
================================================== */
.company.font-intro .font-coverage {
    overflow: hidden;
}   
 
.company.font-intro .font-coverage .coverage-rolling {
    width: 100vw;
    margin-left: calc(50% - 50vw); 
    overflow: hidden; 
    padding: 3.6rem 0; 
    background: #eef8f8;
}

.company.font-intro .font-coverage .coverage-rolling .rolling-track {
    display: flex;
    width: max-content; 
    animation: fontRolling 24s linear infinite;
}

.company.font-intro .font-coverage .coverage-rolling .rolling-item {
    flex: 0 0 auto; 
    margin-right: 8rem; 
    white-space: nowrap; 
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .3em; 
    color: var(--color-gray-6);
}

@keyframes fontRolling {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
 
.company.font-intro .font-coverage .coverage-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  
    border: 1px solid #E7E8EB;
	margin-top: 8rem;
}

.company.font-intro .font-coverage .font-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    height: 100%;
	padding:4.6rem 2rem;
    border-right: 1px solid #E7E8EB; 
    text-align: center;
}

.company.font-intro .font-coverage .font-info-item:last-child {
    border-right: 0;
}

.company.font-intro .font-coverage .font-info-item strong { 
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 1; 
    color: var(--color-gray-6);
}

.company.font-intro .font-coverage .font-info-item strong small {
    font-size: .6em; 
}

.company.font-intro .font-coverage .font-info-item span {
    margin-top: 1.2rem; 
    font-size: 1.8rem; 
    color: var(--color-gray-5);
}
 
.company.font-intro .font-coverage .coverage-language {  
	margin-top: 8rem;
}

.company.font-intro .font-coverage .language-row {
    display: grid;
    grid-template-columns: 13rem 1fr;
    align-items: center;  
}
.company.font-intro .font-coverage .language-row + .language-row{
	margin-top: 5rem;
}
.company.font-intro .font-coverage .language-name { 
    font-size: 1.5rem;
    font-weight: 400; 
    color: var(--color-gray-4);
}

.company.font-intro .font-coverage .language-row p { 
    font-size: 3.2rem;
    font-weight: 400; 
    color: var(--color-primary-2);
}
.company.font-intro .font-coverage .language-row strong{
	color: #3DA8A1;
	font-weight: 400;
}
 

/* ==================================================
   Font Guide
================================================== */
.company.font-intro .font-guide {
	position:relative;
    overflow:hidden;
}
.company.font-intro .font-guide:before{
	content:'';
	display:block;
	max-width: 144rem; 
    margin: 0 auto;
	width: 100%;
	height: 1px;
	background: #E7E8EB; 
}
.company.font-intro .font-guide .section-head{
	position:relative;
}

.company.font-intro .font-guide .font-guide-nav{
	display:flex;
	align-items:center;
	gap:1.6rem;
	position:absolute;
	right:0;
	bottom:0;
}

.company.font-intro .font-guide .font-guide-nav button{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:7.5rem;
	aspect-ratio:1;
	padding:0;
	border:0;
	border-radius:50%;
	background:#ebeef2;
	cursor:pointer;
}

.company.font-intro .font-guide .font-guide-nav button::before{
	content:"";
	display:block;
	width:1.6rem;
	height:1.6rem;
	border-top:2px solid var(--color-gray-4);
	border-right:2px solid var(--color-gray-4);
	transition:all ease .35s;
}

.company.font-intro .font-guide .font-guide-prev::before{
	transform:rotate(-135deg);
	margin-left:.6rem;
}

.company.font-intro .font-guide .font-guide-next::before{
	transform:rotate(45deg);
	margin-right:.6rem;
}

.company.font-intro .font-guide .font-guide-nav button:hover{
	background:var(--color-primary-1);
}

.company.font-intro .font-guide .font-guide-nav button:hover::before{
	border-color:#fff;
}

  

.company.font-intro .font-guide .font-guide-swiper {
    width:100%; 
    overflow:visible;
}

.company.font-intro .font-guide .swiper-slide {
    width:auto; 
}

.company.font-intro .font-guide .font-guide-card { 
    padding:5rem ;
    border-radius:2rem;
    box-sizing:border-box;
    background:var(--color-gray-2);
}

.company.font-intro .font-guide .card-label {
    display:block; 
    text-align:center;
    font-size:1.6rem;
	font-weight: 400; 
    color:var(--color-gray-5);
}

.company.font-intro .font-guide .card-image {
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:100%; 
}

.company.font-intro .font-guide .card-image img {
    display:block; 
	max-width:600px;
    width:100%;
    height:100%;
    object-fit:contain;
}


/* ==================================================
   Font Information
================================================== */
.company.font-intro .font-information {
	overflow:hidden;
	background: var(--color-bg);
}

.company.font-intro .font-information .section-wrap {
	display:grid;
	grid-template-columns:30rem 1fr;
	column-gap:8rem;
} 

.company.font-intro .font-information .section-name{
	font-size: 5.2rem;
}
.company.font-intro .font-information .section-body {
	min-width:0;
}

.company.font-intro .font-information-content {
	width:100%; 
}

.company.font-intro .font-information-row,
.company.font-intro .font-information-title {
	display:grid;
	grid-template-columns:9.5rem 1fr;
	align-items:center; 
	padding:2.4rem 3.4rem;
	border-bottom:1px solid var(--color-gray-3);
	box-sizing:border-box;
}

.company.font-intro .font-information-title > span,
.company.font-intro .font-information-row > span {
	font-size:1.5rem;
	font-weight:400; 
	color:var(--color-gray-4);
}

.company.font-intro .font-information-title strong,
.company.font-intro .font-information-row p { 
	font-size:1.8rem;
	font-weight:400; 
	color:var(--color-gray-5);
}

.company.font-intro .font-information-title strong em {
	font-style:normal;
	color:var(--color-gray-4);
}

.company.font-intro .font-information-row.license {
	align-items:start; 
}
 

.company.font-intro .font-information-row .license-content {
	min-width:0;
}
 

.company.font-intro .font-information-row .license-content p + p {
	margin-top:3rem;
}

.company.font-intro .font-information-row .license-content ol {
	margin:1rem 0 0;
	padding:0;
	list-style:none;
	counter-reset:license;
}

.company.font-intro .font-information-row .license-content li {
	position:relative;
	padding-left:2rem;
	font-size:1.8rem;
	font-weight:400;
	color:var(--color-gray-5); 
	counter-increment:license;
}

.company.font-intro .font-information-row .license-content li::before {
	content:counter(license) ".";
	position:absolute;
	top:0;
	left:0;
}
 


/* ==================================================
   Font Banner
================================================== */


.company.font-intro .font-banner {
	position:relative;
	overflow:hidden;
	background:var(--color-primary-2);
}
.company.font-intro .font-banner:before{
	content:'2.0';
	font-size: 60rem;
	font-weight: 700;
	color: rgba(255,255,255,0.05);
	position:absolute; 
	right:0;
	bottom:0;
	line-height: .8;
}

.company.font-intro .font-banner .section-wrap {
	position:relative;
	z-index:2;
}
 

.company.font-intro .font-banner .section-name,
.company.font-intro .font-banner .section-desc p {
	color:#fff; 
}
  
  


/* ==================================================
   Responsive
================================================== */



@media (max-width: 1023px) {
    .company.font-intro .page-body {padding-top: 11.4rem;} 
    .company.font-intro .content-body .section-wrap {margin: 8rem auto;} 
	.company.font-intro .section-subject span{font-size: 1.4rem; margin-bottom: 2rem;}
	.company.font-intro .section-head{margin-bottom: 4rem;}
	.company.font-intro .section-name{font-size: 3.6rem;}    
	.company.font-intro .section-desc{margin-top: 1rem;}
	.company.font-intro .section-desc p{font-size: 1.5rem;}
	.company.font-intro .section-desc br{display:none;}
	
	.company.font-intro .font-banner-buttons{margin-top: 2rem; gap:1rem;}
	.company.font-intro .font-banner-buttons a{font-size: 1.4rem; height: 4.5rem;     padding: 0 .6rem;}
	
	
	.company.font-intro .font-visual .font-visual-label{font-size: 1.2rem;margin-bottom: 3rem; gap:1rem;}
	.company.font-intro .font-visual .section-name{font-size: 3rem;}
	.company.font-intro .font-visual .section-name strong{font-size: 5rem;} 
	.company.font-intro .font-visual .section-desc{margin-top: 2rem;}
	.company.font-intro .font-visual .section-desc p{font-size: 1.6rem;}  
	 
	
	.company.font-intro .our-voice .section-name{font-size: 3rem;} 
	.company.font-intro .our-voice .section-desc p{font-size: 1.5rem;}
	.company.font-intro .our-voice .section-desc p + p{margin-top: 1rem;}
	.company.font-intro .our-voice .section-body{padding-top: 0;} 
    .company.font-intro .our-voice-grid {grid-template-columns: 1fr; gap:3rem; } 
	
	
    .company.font-intro .what-changed-list {grid-template-columns: 1fr; }  
	.company.font-intro .changed-card{height:auto;}
	.company.font-intro .glyph-before, .company.font-intro .glyph-after{font-size: 5rem;}
	.company.font-intro .changed-number{font-size: 1.5rem;}
	.company.font-intro .changed-title{font-size: 2.4rem; margin:1rem 0;}
	.company.font-intro .changed-desc{font-size: 1.6rem;}
	
	
    .company.font-intro .font-style-list { grid-template-columns: 1fr;   }
	.company.font-intro .font-specimen-group + .font-specimen-group{margin-top: 3rem;}
	.company.font-intro .font-style-sample span{font-size: 5rem;}
	.company.font-intro .font-style-card{height: 24rem; padding:1.6rem;}
	.company.font-intro .font-style-info p{font-size: 1.5rem;} 
	.company.font-intro .font-package{font-size: 1.6rem; padding: 1rem 2rem; flex-direction: column;   gap: .5rem; align-items: flex-end; margin-top: 4rem;}
	.company.font-intro .font-package-download{font-size: 1.4rem;}
	.company.font-intro .font-specimen{margin-top: 3rem;}
	.company.font-intro .font-specimen-group h5{padding:1rem;}
	.company.font-intro .font-specimen-list li{padding:2rem 1rem; flex-direction:column; gap:1rem;         align-items: flex-start;}
	.company.font-intro .font-specimen-text{font-size: 2rem;}
	.company.font-intro .font-download{margin-left: auto;}
	.company.font-intro .font-specimen-weight{width: 100%; font-size: 1.4rem;}
	
	
	
	.company.font-intro .font-playground .theme-toggle{width: 4rem;}
	.company.font-intro .font-playground .playground{padding:2rem;} 
    .company.font-intro .font-playground .playground-tools {flex-wrap: wrap; font-size: 1.2rem; } 
	.company.font-intro .font-playground .weight-btn,
	.company.font-intro .font-playground .style-btn{padding: .5rem  ; font-size: 1.1rem;}
	.company.font-intro .font-playground .playground-style,
	.company.font-intro .font-playground .playground-weight{gap:.4rem;} 
    .company.font-intro .font-playground .playground-size {order: 3; width: 100%;}
    .company.font-intro .font-playground .range-wrap {flex: 1; width: auto;}
	.company.font-intro .font-playground .playground-text{font-size: 4rem;}
	.company.font-intro .font-playground .playground-content{padding:3rem 0 5rem; min-height: 24rem;}
	.company.font-intro .font-playground .font-info, .company.font-intro .font-playground .text-count{font-size: 1.2rem;}
	.company.font-intro .font-playground .recommend-wrap{flex-direction:column;     align-items: flex-start; margin-top: 1.6rem; gap:1rem;}
	.company.font-intro .font-playground .recommend-btn{font-size: 1.3rem; padding: 1rem;}
	.company.font-intro .font-playground .recommend-list{ gap: 0.5rem;}
	 

    .company.font-intro .italic-story-grid {grid-template-columns: 1fr;grid-template-rows: 20rem 32rem 32rem; } 
    .company.font-intro .italic-story .card-label {top: 2rem;left: 2rem;}
	.company.font-intro .italic-story-card{padding:4rem;}
	.company.font-intro .italic-story .slogan-content span{font-size: 2.4rem;} 
    .company.font-intro .italic-story .ci-card {grid-column: 1;grid-row: 1;}
    .company.font-intro .italic-story .design-card {grid-column: 1;grid-row: 2;}
    .company.font-intro .italic-story .slogan-card {grid-column: 1;grid-row: 3;}
 
 
    .company.font-intro .font-coverage .coverage-rolling {padding: 2rem 0;}
	.company.font-intro .font-coverage .coverage-rolling .rolling-item{font-size: 1.6rem; margin-right: 4rem;}
    .company.font-intro .font-coverage .coverage-info {grid-template-columns: 1fr 1fr; margin-top: 4rem;} 
    .company.font-intro .font-coverage .font-info-item:nth-child(2) {border-right: 0;}
    .company.font-intro .font-coverage .font-info-item:nth-child(-n + 2) {border-bottom: 1px solid #E7E8EB;}
	.company.font-intro .font-coverage .font-info-item strong{font-size: 2.4rem;}
	.company.font-intro .font-coverage .font-info-item span{font-size: 1.5rem; margin-top: .6rem;} 
    .company.font-intro .font-coverage .language-row {  grid-template-columns:  1fr;  gap:.5rem; }
    .company.font-intro .font-coverage .language-name { font-size: 1.2rem; }
	.company.font-intro .font-coverage .coverage-language{margin-top: 4rem;}
	.company.font-intro .font-coverage .language-row p{font-size: 2.4rem; }
	.company.font-intro .font-coverage .language-row + .language-row{margin-top: 2rem;}
	
	.company.font-intro .font-guide .font-guide-nav{position:relative; gap:1rem; margin-top: 2rem;}
	.company.font-intro .font-guide .font-guide-nav button{width: 5rem;}
	.company.font-intro .font-guide .font-guide-card{padding:2rem;}
	
	

	.company.font-intro .font-information .section-wrap {grid-template-columns:  1fr; } 
	.company.font-intro .font-information .section-name{font-size: 3rem;}
	.company.font-intro .font-information-row,
	.company.font-intro .font-information-title {grid-template-columns:  1fr;   gap:.5rem;  padding: 2rem 1em;}
	.company.font-intro .font-information-title{padding-top: 0;}
	.company.font-intro .font-information-title > span, .company.font-intro .font-information-row > span{font-size: 1.3rem;}
	.company.font-intro .font-information-title strong, .company.font-intro .font-information-row p{font-size: 1.6rem;}
	.company.font-intro .font-information-row .license-content li{font-size: 1.6rem;}
	.company.font-intro .font-information-row .license-content p + p{margin-top: 1.5rem;}
	.company.font-intro .font-banner:before{font-size: 15rem;}
}