.slogan{ padding: 10px 0 50px; border-bottom: 1px solid #E8E8E8;}
.slogan span{ color:hsl(0, 0%, 68%); font-size: 1.125rem;}
.slogan p{color:#222222; font-size: 2.25rem; font-weight: 700; line-height: 1.25; margin-top: 10px;text-align:left; word-break: keep-all;}
.slogan p > b{color:#6A9DCD}

.colgroup{ display: flex; flex-direction: column;}
.colgroup > div{ width: 100%; margin-top: 40px;}

.history{}
.history dl{ display: grid; grid-template-columns: 58px 1fr; gap:20px; padding-bottom:20px; font-size: 0.938rem; line-height: 1.5;}
.history dt{ width: 58px; color: #263849; font-weight: 700;}
.history dd{ color: #666666; }

table.intro-table{font-size: 0.875rem;}
table.intro-table thead th{ padding: 10px;}
table.intro-table tbody th{ width: 150px;}
table.intro-table tbody td{ padding: 8px 12px;}
table.intro-table tbody ul li{ padding: 6px 0;}

/* 소형 모바일 */
@media (max-width: 479px) { 
    .slogan span{font-size: 0.938rem;}
    .slogan p{font-size: 1.75rem; }

    table.intro-table tbody th{ width: 90px;}
    table.intro-table tbody ul li span{ display: block; padding-bottom: 6px;}
}

/* 모바일 */
@media (min-width: 480px) and (max-width: 767px) { 
    .slogan span{font-size: 1rem;}
    .slogan p{font-size: 2rem;}

    table.intro-table tbody th{ width: 90px;}
 
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { 

    .slogan p{font-size: 2rem;}
 
}

/* PC (1024~1200) */
@media (min-width: 1024px) and (max-width: 1200px) { 
    .colgroup{ flex-direction: row;}
    .colgroup > div{ width: 50%; margin-top:0}
   
}

/* 대형 화면 (1200 이상)*/
@media (min-width: 1201px) {
    .colgroup{ flex-direction: row;}
    .colgroup > div{ width: 50%; margin-top:0}
 }