html {
    scroll-behavior: smooth;
}

* {
    transform: none !important;
    overflow: visible !important;
}

.mt100 {
    margin-top: 100px;
}
.mt200{
    margin-top: 200px;
}
.mb100 {
    margin-bottom: 100px;
}
.mb200{
    margin-bottom: 200px;
}
.pt200{
    padding-bottom: 200px;
}
.pb200{
    padding-bottom: 200px;
}
.pb100 {
    padding-bottom: 100px;
}
.pt100 {
    padding-top: 100px;
}
.pt200{
    padding-top: 200px;
}
.inner {
    width: 1300px;
    margin: 0 auto;
}
.title {
    text-align: center;
    margin-bottom: 50px;
}
.title h1 {
    font-size: 32px;
    font-weight: 700;
}
.title p {
    margin-top: 15px;
    font-family: var(--k-font);
    font-weight: 300;
}

.flex {
    display: flex;
}

#greeting .info-warp {}
#greeting .info-warp .ceo-txt {}
#greeting .info-warp .ceo-txt .txt {
    margin-top: 40px;
}
#greeting .info-warp .ceo-txt .txt h3 {
    color: #57af4c;
    font-weight: 600;
    font-size: 25px;
    position: relative;
}
#greeting .info-warp .ceo-txt .txt h3::before {
    content: "''";
    position: absolute;
    left: -12px;
    top: -17px;
    font-size: 50px;
    opacity: 0.5;
}
#greeting .info-warp .ceo-txt .txt p {
    margin: 20px 0 100px;
    font-family: var(--k-font);
    text-align: justify;
    line-height: 1.3;
    color: #2c2c2c;
}
#greeting .info-warp .ceo-txt .txt b {
    font-size: 20px;
    font-weight: 400;
}
#greeting .info-warp .ceo-txt .txt p img {
    float: right;
    width: 20%;
}

#greeting .info-warp .company-txt {
    background-color: #f7f7f7;
    padding: 30px;
}
#greeting .info-warp .company-txt ul {
    margin-top: 15px;
}
#greeting .info-warp .company-txt ul li {
    border-bottom: 1px solid #c1c1c1;
    padding: 20px 0;
}
#greeting .info-warp .company-txt ul li:last-child {
    border-bottom: none;
}
#greeting .info-warp .company-txt ul li b {
    font-weight: 600;
    padding-right: 30px;
}

#history-warp {
    background-color: #f7f7f7;
    padding: 100px 0;
}

#history-warp .section {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 50px;
}

#history-warp .section-header {
    border-bottom: 2px solid #f2f2f2;
    font-size: 23px;
    font-weight: 700;
    padding: 20px 30px;
}

#history-warp .section.history .section-header {
    color: #57af4c;
}
#history-warp .section.merits .section-header {
    color: #2f69f4;
}
#history-warp .section.development .section-header {
    color: #f55d13;
}

#history-warp .timeline-container {
    display: flex;
    gap: 40px;
    padding: 30px;
}

#history-warp .timeline-column {
    flex: 1;
    position: relative;
    padding-left: 5px;
}

#history-warp .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    padding-bottom: 35px;
    position: relative;
}

#history-warp .timeline-item::before {
    content: '';
    position: absolute;
    left: 80px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #cccccc;
    z-index: 1;
}

#history-warp .timeline-item:first-child::before {
    top: 11px;
}

#history-warp .timeline-item:last-child::before {
    bottom: auto;
    height: 11px;
}

#history-warp .timeline-item:last-child {
    padding-bottom: v0;
}

#history-warp .timeline-column::before {
    display: none;
    content: '';
    position: absolute;
    left: calc(30px + 6px);
    top: 6px;
    height: calc(100% - 32px);
    width: 2px;
    z-index: 1;
    left: 85px;
}

#history-warp .section.history .timeline-column::before {
    background-color: #57af4c;
}
#history-warp .section.merits .timeline-column::before {
    background-color: #2f69f4;
}
#history-warp .section.development .timeline-column::before {
    background-color: #f55d13;
}

#history-warp .date {
    width: 60px;
    font-size: 22px;
    font-weight: 700;
    margin-right: 15px;
    margin-top: -2px;
}

#history-warp .section.history .date {
    color: #57af4c;
}
#history-warp .section.merits .date {
    color: #2f69f4;
}
#history-warp .section.development .date {
    color: #f55d13;
}

#history-warp .section .circle {}
#history-warp .section.history .circle {
    border-color: #57af4c;
}
#history-warp .section.merits .circle {
    border-color: #2f69f4;
}
#history-warp .section.development .circle {
    border-color: #f55d13;
}

#history-warp .circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid;
    background-color: #fff;
    position: relative;
    margin-right: 15px;
    margin-top: 5px;
    z-index: 2;

}

#history-warp .content {
    flex: 1;
    font-weight: 300;
    font-family: var(--k-font);
    line-height: 1.3;
}

#history-warp .content b {
    font-weight: 700;
    color: var(--text-dark);
}

#history-warp .sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 12px 0;
}

#history-warp .sub-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    position: relative;
}

#history-warp .sub-item::before {
    content: '•';
    color: var(--text-gray);
    margin-right: 5px;
}

#history-warp .special-bold {
    font-weight: 700;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    #history-warp .timeline-container {
        flex-direction: column;
        gap: 20px;
    }
}

#brand .partner {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 20px;
}
#brand .partner div {
    padding: 16px 60px;
    background-color: #f4f4f4;
    border-radius: 10px;

}

#rnd{padding: 100px 0;
    background-color: #f7f7f7;}

#rnd .certi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

#rnd .certi li {
    text-transform: uppercase;
    padding: 25px;
    background-color: #fff;
    text-align: center;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-weight: 600;
}

#brochure {
    
}
#brochure .inner {
    padding: 0px 0 100px; 
}

#brochure .brochure-warp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
#brochure .brochure-warp .brochure-iteam {
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #57af4c;
    padding: 40px;
    transition: transform 0.2s ease;
}
#brochure .brochure-warp .brochure-iteam > img {
    width: 26%;
}

#brochure .brochure-warp .brochure-iteam:nth-child(2) {
    border: 2px solid #2563eb;
}

#brochure .brochure-warp .brochure-iteam h3 {
    font-size: 22px;
    margin: 13px 0 23px;
}

#brochure .brochure-warp .brochure-iteam .f-btn-wrap {
    display: flex;
    gap: 10px;
}

#brochure .brochure-warp .brochure-iteam .f-btn-wrap a {
    padding: 10px 20px;
    border-radius: 100px;
    border: 2px solid #57af4c;
    color: #57af4c;
    font-size: 16px;
    cursor: pointer;
}

#brochure .brochure-warp .brochure-iteam:nth-child(2) .f-btn-wrap a {
    color: #2563eb;
    border: 2px solid #2563eb;
}
#brochure .brochure-warp .brochure-iteam .f-btn-wrap i {
    margin-left: 8px;
}

#sh_wrapper .company_brochure .brochure-warp{
    grid-template-columns: repeat(1, 1fr);
}

#sh_wrapper .company_brochure .brochure-warp .brochure-iteam{
    background-color: #f7fff6;
    position: relative;
}
#sh_wrapper .brochure-warp .brochure-iteam .f-btn-wrap a{
    background-color: #fff !important;
}

#sh_wrapper .brochure-bg{position: absolute;right: 50px;top: 22px; width: 35% !important;}

#vision {
    padding: 50px 0 100px;
}

#vision .vision-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-left: 80px;
    color: #fff;
    background: url("img/vision-banner-bg.jpg") no-repeat;
    border-radius: 13px;
    width: 100%;
    height: 333px;
    background-size: cover;
}
#vision .vision-banner h3 {
    font-weight: 600;
    font-size: 30px;
    position: relative;
    z-index: 1;
}
#vision .vision-banner h3::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 40px;
    height: 40px;
    background-color: #57af4c;
    opacity: 0.5;
    border-radius: 100px;
    left: -25px;
    top: -10px;
}
#vision .vision-banner p {
    font-size: 20px;
}

#vision .vision-box {
    align-items: center;
    gap: 10px;
}
#vision .vision-box .box {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    grid-auto-flow: column;
    background-color: #f7f7f7;
    border-radius: 10px;
    border: 2px solid #cecece;
    margin-top: 25px;
    padding: 40px;
}
#vision .vision-box .box h3 {
    font-size: 23px;
    margin-bottom: 15px;
}
#vision .vision-box .box p {
    font-family: var(--k-font);
    line-height: 1.5;
    font-weight: 300;
}

#leader {}

#leader .inner {}

#leader .txt_box {
    background-color: #f7f7f7;
    border-radius: 100px;
    margin-bottom: 22px;
    padding: 15px 23px;
    align-items: center;
    gap: 7px;
}
#leader .txt_box:last-child {
    margin-bottom: 0;
}
#leader .txt_box .num {
    padding: 7px;
    border-radius: 100px;
    font-weight: 600;
    background-color: #daedd8;
    color: #57af4c;
}
#leader .txt_box .txt {}

#rnd .sub-title {
    font-size: 23px;
    font-weight: 600;
}
#rnd .title-list {
    font-family: var(--k-font);
    margin-top: 15px;
    line-height: 1.4;
    font-weight: 300;
}
#rnd .facility {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    border-radius: 10px;
    margin-top: 25px;
    margin-bottom: 50px;
}
#rnd .facility .facility-box img {
    padding: 27px;
    border-radius: 100px;
    background-color: #57af4c;
}
#rnd .facility .facility-box {
    background-color: #f7f7f7;
    text-align: center;
    padding: 35px 0;
    border-radius: 10px;
}
#rnd .facility .facility-box h4 {
    font-size: 22px;
    font-weight: 600;
    color: #57af4c;
    margin-top: 25px;
}

#rnd .rnd-certi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 30px;
}
#rnd .rnd-certi li {
    text-align: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-weight: 500;
    font-size: 20px;
}
#rnd .rnd-certi li img {
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
}

#property {
    background: url("img/property-bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
}
#property .inner {
    padding: 100px 0;
}
#property .property-list {}
#property .property-list ul {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
}
#property .property-list ul li {
    display: flex;
    align-items: center;
    line-height: 1.4;
    font-weight: 300;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #dadada;
    font-family: var(--k-font);
}
#property .property-list ul li .num {
    background-color: #57af4c;
    color: #fff;
    border-radius: 100px;
    padding: 5px;
    font-size: 18px;
    font-weight: 500;
    width: 70px;
    text-align: center;
}
#property .property-list ul li:last-child {
    border: none;
}

#ethics .ethics-box {
    background-color: #f7f7f7;
    color: #333;
    padding: 50px;
    border-radius: 10px;
    font-family: var(--k-font);
}
#ethics .ethics-box h4 {
    margin: 40px 0 20px;
    font-size: 21px;
}
#ethics .ethics-box p {
    line-height: 1.4;
}

#network {
    margin: 100px 0;
}
#network img {
    width: 100%;
}

#location {
    position: relative;
    background-color: #f7f7f7;
    padding: 100px 0;
}
#location .location-box {
    width: 600px;
    padding: 50px 30px;
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    top: 310px;
    right: 350px;
    transform: translate(-50%, -50%);
}
#location .location-box iframe {}
#location .location-box ul {}
#location .location-box ul li {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: 1px solid #d2d2d2;
    padding: 15px 0;
}
#location .location-box > img {
    margin-bottom: 20px;
}
#location .location-box ul li h3 {
    font-size: 18px;
    width: 18%;
}
#location .location-box ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.technology {}

.technology .title {
    }

.technology .tech-bg {
    background: url("img/tech-bg.png") center no-repeat;
    background-size: cover;
}

.technology-image {
    width: 65%;
    height: 88vh;
    position: sticky;
    top: 9vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.technology-image img {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-out;
}

.technology-image img.active {
    opacity: 1;
    transform: scale(1);
}

.technology-content {
    width: 55%;
    padding-bottom: 50vh;

}

.technology .item {
    min-height: 400px;
    display: flex;
    padding: 150px 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-left: 70px;
    opacity: 0.3;
    transition: 0.4s ease;
    transform: translateY(20px);
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    color: #fff;
    scroll-margin-top: 230px;
}

.technology .item:first-child {
    margin-top: 150px;
}

.technology .item.active {
    opacity: 1;
}

.technology-content span {
    font-size: 16px;
    font-weight: 600;
    color: #57af4c;
    text-transform: uppercase;
}

.material-symbols-outlined {
    color: #fff !important;
    font-size: 25px !important;
    font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24;
}

.btn-scroll-top {
    bottom: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    background: #57af4c3d;
    border: 1px solid #57af4c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: 0.3s;
    margin-top: 25px;
}

.technology-content h2 {
    font-size: 30px;
    font-weight: 700;
    margin: 5px 0 14px;
}
.technology-content p {
    font-family: var(--k-font);
    text-align: justify;
    font-weight: 200;
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}




/* 고객센터 */
.box-pirvacy {
	display: block;
	padding: 50px;
	box-sizing: border-box;
	border-radius: 10px;
	background: #f9f9f9;
}

.box-pirvacy>h3 {
	display: block;
	font-size: 24px;
	font-weight: 700;
	color: #333;
}

.chk_box_wrap {
	display: block;
	margin: 15px 0 0;
}

.box-cs .top {
	display: block;
	text-align: right;
	margin-bottom: 50px;
	font-size: 16px;
	font-weight: 600;
	color: #222;
	border-bottom: 2px solid #222;
	padding-bottom: 10px;
	box-sizing: border-box;
}

.box-cs .top .ess {
	position: relative;
	top: 2px;
	margin-right: 5px;
	display: inline-block;
	color: #ff4002;
}

.text-box {
	position: relative;
	margin: 20px 0 0;
}

.text-box .text {
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid #eee;
	box-sizing: border-box;
	border-radius: 5px;
}

.text-box .text p {
	display: block;
	margin-bottom: 3px;
	font-size: 17px;
	font-weight: 400;
	color: #666;
	word-break: keep-all;
}

.box-cs {
	margin-top: 40px;
}

.box-cs input {
	display: block;
	padding: 15px;
	width: 100%;
	height: 60px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	border-radius: 5px;
	font-size: 17px;
	color: #333;
	outline: none;
}

.box-cs textarea {
	display: block;
	padding: 15px;
	width: 100%;
	height: 200px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	border-radius: 5px;
	font-size: 16px;
	color: #333;
	outline: none;
}

.input-list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 30px;
}

.box-cs label {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: 600;
	color: #333;
	word-break: keep-all;
}

.box-cs label .ess {
	position: absolute;
	top: -4px;
	right: -10px;
	color: #ff4002;
}

.input-content {
	display: block;
	margin: 30px 0 0;
}

.area-btn {
	margin: 40px auto 0;
	text-align: center;
}

.input-submit,
.area-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 170px;
	height: 60px;
	background: #57af4c;
	font-size: 17px;
	color: #fff;
	font-weight: 600;
	border-radius: 50px;
	box-sizing: border-box;
	border: None;
}

/*checkbox_custom*/
.ckbox input[type="checkbox"] {
	display: none;
	width: 20px;
	height: 15px;
}

.ckbox input[type="checkbox"]+label span {
	display: inline-block;
	margin-right: 5px;
	width: 26px;
	height: 26px;
	background: url(../img/sub/img_check.png) left top no-repeat;
	cursor: pointer;
}

.ckbox label {
	display: flex;
	position: relative;
	padding-left: 28px;
	color: rgba(0, 0, 0, 0.4);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.ckbox label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkmark {
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 3px;
	box-sizing: border-box;
}

.ckbox label:hover input~.checkmark {}

.ckbox label input:checked~.checkmark {
	border: 1px solid #333;
	background-color: #333;
}

.checkmark:after {
	display: none;
	position: absolute;
	content: "";
}

.ckbox label input:checked~.checkmark:after {
	display: block;
}

.ckbox label .checkmark:after {
	top: 2.5px;
	left: 7px;
	width: 5px;
	height: 9px;
	border: 1px solid #fff;
	border-width: 0 1px 1px 0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

.ckbox em {
	position: relative;
	top: 1.5px;
	font-size: 17px;
	font-weight: 500;
	color: #333;
	font-style: unset;
	word-break: keep-all;
}

@media (max-width:1024px) {
	.box-pirvacy {
		padding: 40px;
	}

	.input-list {
		gap: 15px;
	}
}

@media (max-width:768px) {
	.box-pirvacy {
		padding: 30px;
	}

	.box-pirvacy>h3 {
		font-size: 22px;
	}

	.text-box {
		margin: 15px 0 0;
	}

	.text-box .text {
		padding: 15px;
	}

	.box-cs input {
		padding: 12px;
		height: 35px;
        font-size: 11px;
	}
    .area-btn .input-submit{
        font-size: 11px;
        width: 110px;
        height: 40px;
    }
    
}

@media (max-width:620px) {
	.box-pirvacy {
		padding: 20px;
	}

	.box-pirvacy>h3 {
		font-size: 11px;
	}

	.text-box {
		margin: 10px 0 0;
	}

	.text-box .text p {
		font-size: 11px;
	}

	.box-cs {
		margin-top: 15px;
	}

	.box-cs .top {
		margin-bottom: 15px;
		font-size: 11px;
	}
    .area-btn{
        margin: 20px auto 30px;
    }
    .ckbox label{
        padding-left: 0;
    }
    .checkmark{
        position: unset;
    }
    .chk_box_wrap{margin: 5px 0;}
  
    .ckbox em{
        font-size: 11px;
    }
	.box-cs label {
		font-size: 13px;
        margin-bottom: 5px;
	}

	.input-list {
		gap: 15px;
		grid-template-columns: repeat(1, 1fr);
		margin-bottom: 15px;
	}

	.input-content {
		margin: 15px 0 0;
	}
}

@media (max-width:480px) {
	.box-pirvacy {
		padding: 15px 12px 18px;
		border-radius: 5px;
	}

	.box-pirvacy>h3 {
		font-size: 11px;
	}

	.text-box {
		margin: 7px 0 0;
	}

	.text-box .text {
		padding: 12px;
		height: 100px;
		overflow-y: scroll;
	}

	.text-box .text::-webkit-scrollbar {
		width: 4px;
	}

	.text-box .text p {
		font-size: 11px;
		margin-bottom: 1px;
	}

	.chk_box_wrap {
		margin: 10px 0 0;
	}

	.ckbox label {
		padding-left: 0px;
        margin-top: 15px;
	}

	.ckbox label .checkmark:after {
		top: 1px;
		left: 5px;
		width: 4px;
		height: 8px;
	}

	.checkmark {
		width: 15px;
		height: 15px;
	}

	.ckbox em {
		font-size: 11px;
	}

	.box-cs {
		margin-top: 20px;
	}

	.box-cs .top {
		margin-bottom: 15px;
		font-size: 11px;
	}

	.box-cs label {
		font-size: 11px;
		margin-bottom: 5px;
	}

	.box-cs label .ess {
		top: -3px;
		right: -8px;
	}

	.box-cs input {
		height: 40px;
		padding: 10px;
		font-size: 11px;
	}

	.input-list {
		gap: 10px;
		margin-bottom: 10px;
	}

	.input-content {
		margin: 10px 0 0;
	}

	.box-cs textarea {
		height: 120px;
		padding: 10px;
		font-size: 11px;
	}

	.area-btn {
		margin: 20px auto ;
	}

	.input-submit,
	.area-btn a {
		width: 90px;
		height: 38px;
		font-size: 11px;
        
	}
}



@media (max-width:768px) {
    .inner {
        width: 100%;
    }
    .template-navi-list > li > a {
        font-size: 13px;
        padding: 0 15px;
    }
    .template-navi-list > li > a > span {
        padding-left: 0;
    }
    .pt100 {
        padding-top: 30px;
    }
    .pt200{padding-top: 30px;}
  
    .mt100 {
        margin-top: 30px;
    }
    .mt200{
        margin-top: 30px;
    }
    .pb200{
    padding-bottom: 30px;
    }

    .mb100 {
        margin-bottom: 30px;
    }
    .mb200{
        margin-bottom: 30px;
    }

    .title {
        margin-bottom: 20px;
    }
    .title h1 {
        font-size: 15px;
    }
    #greeting {
        padding-left: 20px;
        padding-right: 20px;
    }
    .title p {
        margin-top: 7px;
        font-size: 13px;
    }
    .title p br {
        display: none;
    }
    .template-navi-depth02 {
        width: 100%;
    }
    #greeting .info-warp {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    #greeting .info-warp .ceo-txt .txt{
        margin-top: 20px;
    }
    #greeting .info-warp .ceo-txt .txt h3::before {
        display: none;
    }
    #greeting .info-warp .ceo-txt .txt h3 {
        font-size: 14px;
    }
    #greeting .info-warp .ceo-txt .txt p {
        font-size: 12px;
        margin-top: 7px;
        margin-bottom: 20px;
    }
    #greeting .info-warp .ceo-txt .txt b {
        font-size: 12px;
    }

    #greeting .info-warp .company-txt {
        padding: 20px;
    }
    #greeting .info-warp .company-txt img {
        width: 40%;
    }
    #greeting .info-warp .company-txt ul li {
        font-size: 12px;
        padding: 7px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    #greeting .info-warp .company-txt ul {
        margin-top: 10px;
    }
    #greeting img{width: 100%;}
    #history-warp {
        padding: 30px 20px;
    }
    #history-warp .section {
        margin-bottom: 20px;
    }
    #history-warp .section-header {
        padding: 13px;
        font-size: 14px;
    }
    #history-warp .timeline-item::before {
        display: none;
    }
    #history-warp .timeline-container {
        padding: 13px;
        gap: 0;
    }
    #history-warp .date {
        font-size: 12px;
        margin-right: 0;
    }
    #history-warp .content {
        font-size: 12px;
        text-align: justify;
    }
    #history-warp .timeline-column {
        padding-left: 0;
    }
    #history-warp .timeline-item {
        padding-bottom: 10px;
    }
    #history-warp .circle {
        display: none;
    }

    #history-warp .date {
        width: 43px;
    }
    #development {
        margin-bottom: 0 !important;
    }
    #vision {
        padding: 0 20px;
    }
    #vision img{width: 100%;}
    #vision .vision-banner {
        height: auto;
        padding: 30px 20px;
        gap: 5px;
    }
    #vision .vision-banner h3 {
        font-size: 14px;
    }
    #vision .vision-banner p {
        font-size: 12px;
    }
    #vision .vision-banner h3::before {
        left: -10px;
        top: -6px;
        width: 20px;
        height: 20px;
    }
    #vision .vision-box .box {
        margin-top: 20px;
        padding: 20px;
        gap: 0;
        justify-content: space-between;
        justify-items: baseline;
        grid-template-columns: unset;
        border: 1px solid #cecece;
    }
    #vision .vision-box .box h3 {
        font-size: 13px;
        margin-bottom: 5px;
    }
    #vision .vision-box .box p {
        font-size: 12px;
        line-height: 1.3;
    }
    #vision .vision-box .box img {
        width: 60%;
        justify-items: end;
        display: none;
    }

    #leader .inner {
        padding: 30px 20px;
    }
    #leader .txt_box {
        font-size: 12px;
        padding: 10px 20px;
        gap: 10px;
    }

    #brand .partner{margin: 0 20px;grid-template-columns: repeat(2, 1fr);}

    #brand .partner div{
        padding: 20px;
        text-align: center;
        
    }
    #brand .partner div img{width: 70%;}

    #rnd {
        padding: 30px 20px;
        margin-top: 30px;
    }
    #rnd .sub-title {
        font-size: 13px;
    }
    #rnd .facility {
        gap: 20px;
        margin: 10px 0 20px;
    }
    #rnd .facility .facility-box {
        padding: 20px 10px;
    }
    #rnd .facility .facility-box h4 {
        font-size: 13px;
        margin-top: 7px;
    }
    #rnd .facility .facility-box img {
        width: 40%;
        padding: 15px;
    }
    #rnd .title-list {
        margin-top: 10px;
        font-size: 12px;
    }
    #rnd .title-list br {
        display: none;
    }
    #rnd .rnd-certi {
        margin-top: 20px;
        gap: 15px;
    }
    #rnd .rnd-certi li img {
        padding: 20px;
        width: 100%;
    }
    #rnd .rnd-certi {
        grid-template-columns: repeat(2, 1fr);
    }
    #rnd .rnd-certi li {
        font-size: 12px;
        gap: 7px;
    }
    #rnd .certi{grid-template-columns: repeat(2, 1fr);
    gap: 15px;}

    #rnd .certi li{
        padding: 10px;
        font-size: 11px;
        gap: 5px;
    }
    #rnd .certi li img{
        width: 100%;
    }

    #brochure .inner{
    padding: 0px 0 30px;

    }
    #brochure .brochure-warp{
        grid-template-columns: repeat(1, 1fr);
        margin: 0 20px;
        gap: 15px;
    }
    #brochure .brochure-warp .brochure-iteam{
        padding: 20px;
    }
    #brochure .brochure-warp .brochure-iteam h3{
        font-size: 13px;
        margin: 8px 0 10px;
    }
    #brochure .brochure-warp .brochure-iteam .f-btn-wrap a{
        font-size: 11px;
        padding: 4px 12px;
        border: 1px solid #57af4c;
    }
    #brochure .brochure-warp .brochure-iteam:nth-child(2) .f-btn-wrap a{
        border: 1px solid #2563eb;
    }

    #property {
        padding: 0 20px;
    }
    #property .inner {
        padding: 30px 0;
    }
    #property .property-list ul {
        padding: 10px 20px;
    }
    #property .property-list ul li {
        align-items: flex-start;
        flex-direction: column;
        font-size: 12px;
        gap: 5px;
        padding: 11px 0;
    }
    #property .property-list ul li:first-child {
        padding-top: 0;
    }
    #property .property-list ul li .num {
        font-size: 12px;
        width: auto;
        padding: 3px 10px;
    }
    #property .property-list ul {
        padding: 20px;
    }
    #ethics .ethics-box {
        padding: 20px;
        border-radius: 0;
    }
    #ethics .ethics-box p {
        font-size: 12px;
    }
    #ethics .ethics-box h4 {
        font-size: 12px;
        margin: 10px 0;
    }

    #network {
        margin: 30px 20px;
    }
    #location {
        padding: 30px 20px;
    }
    #location .location-box {
        position: unset;
        width: 100%;
        padding: 20px;
        margin-bottom: 20px;
    }
    #location .location-box > img {
        width: 38%;
        margin-bottom: 10px;
    }
    #location .location-box ul li h3 {
        font-size: 12px;
    }
    #location .location-box ul li {
        font-size: 12px;
        padding: 7px 0;
    }

    #location iframe {
        height: 300px;
    }
    .technology-content {
        width: 100%;
        padding: 30px 20px;
    }
    .technology-image {
        display: none;
    }
    .technology {}
    .technology .title {
        padding: 0px 20px 0;
        margin-top: 0;
    }

    .technology .item {
        min-height: auto;
        padding: 0;
        margin-bottom: 20px;
        opacity: 1;
        transform: none;
        margin-top: 0 !important;
    }

    .technology .item::before {
        content: "";
        display: block;
        width: 100%;
        height: 202px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .item[data-index="0"]::before {
        background-image: url("img/tech01.png");
    }
    .item[data-index="1"]::before {
        background-image: url("img/tech02.png");
    }
    .item[data-index="2"]::before {
        background-image: url("img/tech03.png");
    }
    .item[data-index="3"]::before {
        background-image: url("img/tech04.png");
    }
    .item[data-index="4"]::before {
        background-image: url("img/tech05.png");
    }
    .item[data-index="5"]::before {
        background-image: url("img/tech06.png");
    }
    .item[data-index="6"]::before {
        background-image: url("img/tech07.png");
    }
    .item[data-index="7"]::before {
        background-image: url("img/tech08.png");
    }
    .item[data-index="8"]::before {
        background-image: url("img/tech09.png");
    }

    .technology .item {
        align-items: left;
        padding-left: 0;
        text-align: center;
    }
    .technology-content span {
        font-size: 12px;
    }
    .technology-content h2 {
        font-size: 13px;
        margin: 7px 0;
    }
    .technology-content p {
        font-size: 12px;
    }

    .terms {
        padding: 0 20px 30px;
        font-size: 12px;
    }

    .btn-scroll-top {
        display: none;
    }

    #area_cs{
    margin: 0 20px;
    }
    #sh_wrapper .brochure-bg{
        display: none;
    }
    #brochure .brochure-warp .brochure-iteam .f-btn-wrap{
        gap: 5px;
    }
    #history-warp .timeline-item:last-child{
        padding-bottom: 10px;
    }
}