@charset "utf-8";

@media (max-width: 1400px) {
	.sub-visual h2 {font-size: 60px;}
	.page-title h3 {font-size: 58px;}

	/* s102 HISTORY */
	.history-wrap:before {left: 600px;}
	.history-wrap .title {max-width: 600px;}

	/* s4 TECHNOLOGY */
	.article-list ul li .wrap {gap: 120px;}
}

@media (max-width: 1200px) {
	/* s102 HISTORY */
	.history-wrap:before {left: 500px;}
	.history-wrap .title {max-width: 500px; padding-right: 60px;}
	.history-wrap .title h4 {font-size: 90px;}
	.history-wrap .description .year-wrap {padding-left: 80px;}
	.history-wrap .description .year-wrap:after {width: 60px;}

	/* s4 TECHNOLOGY */
	.article-list ul li .wrap {gap: 60px;}
}

@media (max-width: 1024px) {
	.sub-visual {height: 420px; margin: 80px 0 120px;}
	.sub-visual h2 {font-size: 55px; margin-bottom: 70px;}
	.lnb .container {padding: 0;}
	.lnb ul {height: 70px;}
	.lnb ul li a {font-size: 16px;}

	.page-title {margin-bottom: 90px;}
	.page-title h3 {font-size: 52px; padding-top: 25px;}
	.page-title h3:before {width: 40px;}
	.page-title h3:after {margin-left: -20px;}

	.sub-cont {padding-bottom: 120px;}
	.real-cont {padding:100px 0 120px;}

	.depth03 {margin-bottom: 30px;}
	.depth03 ul {flex-wrap: wrap;}
	.depth03 ul li {flex: none; width: calc(50% - 6px);}
	.depth03 ul li a {font-size: 18px; padding: 16px 10px;}

	/* s101 INTRODUCTION */
	.introduction .text-wrap-box .title h4 br {display: none;}
	.introduction .img-box {border-radius: 60px 60px 0 0;}
	.introduction .img-box img {border-radius: 60px 60px 0 0;}

	/* s102 HISTORY */
	.history-wrap {padding-bottom: 120px;}
	.history-wrap:before {left: 350px; height: calc(100% - 15px);}
	.history-wrap .title {max-width: 350px; padding-right: 40px;}
	.history-wrap .title p {font-size: 32px;}
	.history-wrap .title h4 {font-size: 70px; margin-bottom: 30px;}
	.history-wrap .description .year-wrap {padding-left: 50px;}
	.history-wrap .description .year-wrap:not(:last-child) {margin-bottom: 80px;}
	.history-wrap .description .year-wrap:before {top: 10px; width: 18px; height: 18px;}
	.history-wrap .description .year-wrap:after {top: 19px; width: 40px;}
	.history-wrap .description .year h4 {font-size: 38px; margin-bottom: 25px;}
	.history-wrap .description .month-wrap .month {max-width: 38px; font-size: 16px;}
	.history-wrap .description .month-wrap ul li {font-size: 16px;}

	/* s103 LOCATIONS */
	.location .map-box {height: 380px; margin-bottom: 40px;}
	.location .info dt {/* max-width: 140px; */ font-size: 20px;}
	.location .info dd {font-size: 20px;}

	/* s2 RESEARCH */
	.text-wrap-box {padding: 100px 0 90px;}
	.text-wrap-box .wrap {flex-direction: column; gap: 30px;}
	.text-wrap-box .title {max-width: none;}
	.text-wrap-box .title h4 {font-size: 36px; margin-bottom: 14px;}
	.text-wrap-box .title h4 .pc-only {display: none;}
	.text-wrap-box .title p {font-size: 16px;}
	.text-wrap-box .details {width: 100%; flex: auto;}
	.text-wrap-box .details p {font-size: 18px;}
	.text-wrap-box .details p:not(:last-child) {margin-bottom: 25px;}

	#sub .slide-box .container {padding: 0 80px;}
	.slide-box .slick-arrow {top: 50%; margin-top: -30px; width: 60px; height: 60px;}
	.slide-box .slick-prev {left: -70px;}
	.slide-box .slick-next {right: -70px;}

	/* s3 PRODUCT */
	.product-tabs ul li {flex: 1;}
	.product-tabs ul li a {font-size: 16px; padding: 15px 10px;}
	.product article {padding-top: 100px;}
	.product .text-box {margin-bottom: 60px;}
	.product .text-box .title h4 {font-size: 36px; margin-bottom: 14px;}
	.product .text-box .title p {font-size: 36px;}
	.product .text-box .title p small {font-size: 24px;}

	.product-contact {height: 380px;}
	.product-contact .circle-box {max-width: 200px; height: 200px;}
	.product-contact .circle-box a:before {background-size: 200px auto;}

	.product .table-box {padding: 90px 0 100px;}
	.product .table-wrap:not(:last-child) {margin-bottom: 60px;}
	.product .table-box .table-title {margin-bottom: 20px;}
	.product .table-box .table-title h5 {font-size: 26px;}
	.product .table-box .table-title a {font-size: 18px; line-height: 52px; padding: 0 50px 0 20px;}
	.product .table-box .table-title a:after {right: 20px;}
	.product .table-box th {font-size: 16px;}
	.product .table-box td {font-size: 16px;}
	.product .table-desc {margin-top: 20px;}
	.product .table-desc li {font-size: 16px; padding-left: 14px;}
	.product .table-desc li:before {top: 9px;}

	/* s4 TECHNOLOGY */
	.tech .title h4 {font-size: 36px; margin-bottom: 20px;}
	.article-list ul li {padding: 35px 20px;}
	.article-list ul li .wrap {gap: 60px;}
	.article-list ul li .title h4 {font-size: 22px;}
	.article-list ul li .btn {text-align: right;}
}

@media (max-width: 768px) {
	.sub-visual {height: 350px; margin: 80px 0 90px;}
	.sub-visual h2 {font-size: 40px;}

	.page-title {margin-bottom: 60px;}
	.page-title h3 {font-size: 36px; padding-top: 25px;}
	.page-title h3:before {width: 40px;}
	.page-title h3:after {margin-left: -20px;}

	.sub-cont {padding-bottom: 100px;}
	.real-cont {padding:100px 0 100px;}

	.depth03 ul li {width: 100%;}
	.depth03 ul li a {font-size: 16px; padding: 13px 10px;}
	
	/* s101 INTRODUCTION */
	.introduction .img-box {border-radius: 40px 40px 0 0;}
	.introduction .img-box img {border-radius: 40px 40px 0 0;}

	/* s102 HISTORY */
	.history-wrap {display: block; padding-bottom: 100px;}
	.history-wrap:before {display: none;}
	.history-wrap .title {position: relative; top: auto; max-width: none; padding-right: 0; text-align: left; margin-bottom: 50px;}
	.history-wrap .title p {font-size: 28px;}
	.history-wrap .title h4 {font-size: 70px; margin-bottom: 20px;}
	.history-wrap .description {width: 100%; flex: auto;}
	.history-wrap .description .year-wrap {padding-left: 35px;}
	.history-wrap .description .year-wrap:not(:last-child) {margin-bottom: 60px;}
	.history-wrap .description .year-wrap:before {top: 8px; left: 0; width: 18px; height: 18px;}
	.history-wrap .description .year-wrap:after {position: absolute; bottom: 0; left: 8px; content: ''; width: 1px; height: calc(100% + 81px); background: #3abbda; border: 0;}
	.history-wrap .description .year h4 {font-size: 32px; margin-bottom: 15px;}

	/* s103 LOCATIONS */
	.location .map-box {height: 300px; margin-bottom: 30px;}
	.location .info-box {display: block;}
	.location .info {flex: auto; margin-bottom: 20px;}
	.location .info dl {display: block; margin-bottom: 20px;}
	.location .info dt {max-width: none; font-size: 18px;}
	.location .info dd {width: 100%; flex: auto; font-size: 18px;}
	.location .btn {justify-content: flex-end;}

	/* s2 RESEARCH */
	.research .product-tabs ul li {flex: auto; width: 100%;}
	.research .product-tabs ul li:after {display: none;}
	.research .product-tabs ul li:nth-child(3n):after {display: none;}
	.text-wrap-box {padding: 80px 0 70px;}
	.text-wrap-box .title h4 {font-size: 30px;}

	.slide-box {padding: 0 0 60px;}
	#sub .slide-box .container {padding: 0 15px;}
	.slide-box .slick-arrow {top: auto; margin-top: 0; bottom: -30px; width: 40px; height: 40px;}
	.slide-box .slick-prev {left: 50%; margin-left: -45px;}
	.slide-box .slick-next {right: auto; left: 50%; margin-left: 5px;}

	/* s3 PRODUCT */
	.product-tabs ul li {flex: auto; width: 33.333%;}
	.product-tabs ul li:nth-child(3n):after {display: none;}
	.product article {padding-top: 80px;}
	.product .text-box {margin-bottom: 40px;}
	.product .text-box .title h4 {font-size: 30px; margin-bottom: 14px;}
	.product .text-box .title p {font-size: 30px;}
	.product .text-box .title p small {font-size: 20px;}

	.product-contact {height: 320px;}
	.product-contact .wrap {display: block; align-content: center;}
	.product-contact .section-title {margin-bottom: 20px;}
	.product-contact .circle-box {max-width: 120px; height: 120px;}
	.product-contact .circle-box a:hover {animation: unset;}
	.product-contact .circle-box a:before {background-size: 120px auto;}
	.product-contact .circle-box img {width: 18px;}

	.product .table-box {padding: 70px 0 80px;}
	.product .table-box .table-title {display: block; margin-bottom: 15px;}
	.product .table-box .table-title h5 {font-size: 22px; margin-bottom: 20px;}
	.product .table-box .table-title a {font-size: 16px;}
	.product .table-box .table-title a:after {right: 20px;}

	/* s4 TECHNOLOGY */
	.tech .title h4 {font-size: 30px; margin-bottom: 15px;}
	.article-list ul li {padding: 25px 15px;}
	.article-list ul li .wrap {flex-direction: column; gap: 20px;}
	.article-list ul li .title {width: 100%; flex: auto;}
	.article-list ul li .title h4 {font-size: 18px;}
	.article-list ul li .btn {max-width: none; text-align: right;}
}