@charset "utf-8";

/*
 * File    : sub-tools.css
 * Author  : STUDIO-JT (KMS)
 *
 * SOFTWARE & DESIGN TOOLS
 */



/* **************************************** *
 * SOFTWARE & DESIGN TOOLS
 * **************************************** */
.tools-introduce { display: flex; flex-direction: column; gap: 80rem; }

.tools-introduce__item-head { display: grid; grid-template-columns: 240rem 1fr; color: var(--color-white); }
.tools-introduce__item-name { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-primary); }
.tools-introduce__item-summary { padding: 72rem 50rem; background: var(--color-black); }
.tools-introduce__item-summary > p { margin-top: 10rem; }

.tools-introduce__item-content { display: flex; flex-direction: column; gap: 60rem; padding: 60rem 50rem 60rem 290rem; background: var(--color-gray-100); }

.tools-introduce__infolist { display: flex; flex-direction: column; gap: 40rem; }
.tools-introduce__infolist-title { margin-bottom: 20rem; }
.tools-introduce__infolist > li > ul { display: flex; flex-direction: column; gap: 20rem; }
.tools-introduce__infolist > li > ul > li { padding-left: 12rem; position: relative; }
.tools-introduce__infolist > li > ul > li:before { content: ''; width: 4rem; height: 4rem; position: absolute; top: 14rem; left: 0; background: var(--color-black); border-radius: 50%; }
.tools-introduce__infolist--highlight .tools-introduce__infolist-title { color: var(--color-primary); }

.tools-introduce__datalist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; }
.tools-introduce__datalist-title { display: block; margin-bottom: 20rem; }
.tools-introduce__datalist-buttons { display: flex; flex-direction: column; gap: 10rem; }
.tools-introduce__datalist--secondary > li { padding-top: 27rem; border-top: 3rem solid var(--color-black); }