@charset "utf-8";

@media (max-width: 1600px) {
	/* S402 */
	.product-slide-title-eng {bottom: 125px; left: 15px;}
	.product-slide-title-kor {bottom: 40px; left: 15px; font-size: 55px;}

	.product-slide-items .slick-prev {left: 15px;}
	.product-slide-items .slick-next {right: 15px;}

	/* S404 */
	.product-new-item .content {padding: 100px 40px;}
	.product-new-item .content .title .en {font-size: 32px;}
	.product-new-item .intro-title span {font-size: 32px;}
	.product-new-list:hover .product-new-item:not(:hover) .intro-title span {font-size: 26px;}

	.product-slide-modals-expand .modal {right: 40px;}
}

@media (max-width: 1400px) {
	/* S102 */
	.page-philosophy .policy-img {max-width: 550px;}

	/* S104 */
	.page-history .history-heading {padding-right: 60px;}
	.page-history .history-desc {padding-left: 60px;}

	/* S402 */
	.product-slide-title-eng {bottom: 105px; left: 20px; font-size: 22px;}
	.product-slide-title-kor {bottom: 40px; left: 20px; font-size: 45px;}

	/* S404 */
	.product-new-item .intro-title span .mob-only {display: block;}
}

@media (max-width: 1200px) {
	/* S102 */
	.page-philosophy .policy-img {max-width: 450px;}

	/* S402 */
	.product-slide-modals .modal-body {max-height: 230px;} 
	.product-slide-modals-expand .modal-body {max-height: 380px;} 

	.product-new-item .intro-title span {font-size: 28px;}
	.product-new-list:hover .product-new-item:not(:hover) .intro-title span {font-size: 22px;}
}

@media (max-width: 1024px) {
	.sub-visual-title {height: calc(100vh - 100px);}
	.breadcrumb {margin: 0 -12px 20px;}
	.breadcrumb li {padding: 0 12px; font-size: 16px;}
	.breadcrumb .home img {width: 22px;}

	.sub-visual .title {font-size: 56px; letter-spacing: -2.76px; margin-bottom: 70px;}

	.lnb {height: 100px;}
	.lnb .container {padding: 0;}
	.lnb ul li a {font-size: 20px;}

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

	/* S101 */
	.page-company .overview {padding: 130px 0;}
	.page-company .overview .overview-text {max-width: 550px;}
	.overview-heading {margin-bottom: 20px;}
	.overview-heading-en {font-size: 18px; margin-bottom: 5px;}
	.overview-heading-ko {font-size: 42px;}
	.overview-desc {gap: 15px;}
	.overview-desc p {font-size: 16px;}
	.overview-desc .signature {font-size: 20px; margin-top: 15px;}

	/* S102 */
	.intro {padding: 130px 0;}
	.intro-heading {padding-bottom: 200px; margin-bottom: 25px;}
	.intro-heading:before {top: 120px; height: 175px !important;}
	.intro-heading-en {font-size: 18px;}
	.intro-heading-ko {font-size: 42px;}
	.intro-sub-title {font-size: 32px;}
	.intro-sub-desc {font-size: 20px; margin-bottom: 20px;}
	.intro-desc-text {font-size: 16px;}
		
	@keyframes line {
		0% {
			opacity: 0;
			height: 0;
			transform: translateY(-40px);
		}

		100% {
			opacity: 1;
			height: 175px;
			transform: translateY(0);
		}
	}
	
	.page-philosophy .policy {padding-top: 130px;}
	.page-philosophy .policy-cont {flex-direction: column; gap: 40px;}
	.page-philosophy .policy-cont.reverse {flex-direction: column;}
	.page-philosophy .policy-img {max-width: none;}
	.page-philosophy .policy-text .num {font-size: 24px;} 
	.page-philosophy .policy-text .cate {font-size: 18px;}
	.page-philosophy .policy-text .title {font-size: 36px; margin-bottom: 20px;}
	.page-philosophy .policy-text .title span {font-size: 24px;}
	.page-philosophy .policy-text .text-list li {font-size: 16px; padding-left: 14px;}
	.page-philosophy .policy-text .text-list li:before {top: 12px;}
	.page-philosophy .policy-text .manual-title {font-size: 16px; padding-left: 14px;}
	.page-philosophy .policy-text .manual-title:before {top: 12px;}
	.page-philosophy .policy-text .manual-item .inner {padding: 30px 20px;}
	.page-philosophy .policy-text .manual-item .icon {margin-bottom: 24px;} 
	.page-philosophy .policy-text .manual-item p {font-size: 15px;}
	
	.page-philosophy .announce-text {padding: 130px 0 100px; max-width: 780px; height: auto;}
	.page-philosophy .announce-text .cate {font-size: 18px; margin-bottom: 40px;}
	.page-philosophy .announce-text .title {font-size: 36px; margin-bottom: 20px;}
	.page-philosophy .announce-text .desc {font-size: 18px;}
	.page-philosophy .announce-img {height: 350px;}

	/* S103 */
	.sub-section-title {margin-bottom: 50px;}
	.sub-section-title-en {font-size: 18px;}
	.sub-section-title-ko {font-size: 42px;}

	.page-history .history-cont {flex-direction: column; gap: 80px;}
	.page-history .history-cont > div {width: 100%; padding-bottom: 0;}
	.page-history .history-heading {position: relative; top: auto; padding-top: 0; padding-right: 0; text-align: left;}
	.page-history .history-heading .company {font-size: 30px; margin-bottom: 4px;}
	.page-history .history-heading .title {font-size: 50px; margin-bottom: 20px;}
	.page-history .history-heading img {width: 100%;}
	.page-history .history-cont .history-desc {padding-left: 40px; padding-bottom: 100px;}
	.page-history .history-desc:before {left: 7px;}
	.page-history .history-desc:after {top: 15px; left: 0;}
	.page-history .history-item:not(:last-child) {margin-bottom: 50px;}
	.page-history .history-item-title {font-size: 34px; margin-bottom: 20px;}
	.page-history .history-item-row {margin-bottom: 10px;}
	.page-history .history-item-row .date {max-width: 70px; font-size: 16px;}
	.page-history .history-item-row .details {font-size: 16px;}

	/* S105 */
	.location {padding: 120px 0;}
	.location-item {flex-direction: column; gap: 40px;}
	.location-item > div {flex: auto;}
	.location-map iframe {height: 350px;}
	.location-map .root_daum_roughmap { height:350px !important;}
	.location-map .root_daum_roughmap .wrap_map {height:350px !important;}
	.location-tab ul {margin-bottom: 30px;}
	.location-tab ul li a {font-size: 16px; padding: 15px 10px;}
	.location-info dl {gap: 15px;}
	.location-info dt {max-width: 86px; font-size: 15px;}
	.location-info dd {font-size: 16px; margin-top: 7px;}

	/* S201 */
	.esg-cont {flex-direction: column-reverse;}
	.esg-cont.reverse {flex-direction: column-reverse;}
	.esg-cont > div {width: 100%;}
	.esg-text {align-items: flex-start; padding: 50px 15px 120px;}
	.esg-text-inner {max-width: none;}
	.esg-text .esg-num {padding: 3px 10px; font-size: 15px;}
	.esg-text .esg-title {font-size: 38px; margin-bottom: 30px;}
	.esg-text .esg-desc-list li {font-size: 18px; padding-left: 16px;}
	.esg-text .esg-desc-list li:before {top: 14px;}
	.esg-img {height: 450px;}
	
	/* S301 */
	.page-rnd .overview {padding: 130px 0;}
	.page-rnd .overview .overview-text {max-width: 500px;}
	.page-rnd .strategy {padding: 120px 0 170px;}
	.page-rnd .strategy-inner {padding: 15px 15px 30px;}
	.page-rnd .strategy-img {margin-bottom: 20px;}
	.page-rnd .strategy-img p {font-size: 24px;} 
	.page-rnd .strategy-text {padding: 0 5px;}
	.page-rnd .strategy-text p {font-size: 15px;}

	/* S302 */
	/* .page-field .field {padding-top: 120px;} */
	.field-tab {margin-bottom: 50px;}
	.field-tab ul {padding: 8px;}
	.field-tab ul li a {font-size: 16px; padding: 8px 20px;}
	.field-intro {min-height: 280px; margin-bottom: 80px;}
	.field-intro .field-text h4 {font-size: 36px; margin-bottom: 16px;}
	.field-intro .field-text p {font-size: 16px;}
	/* .field-list {padding: 120px 0 100px;} */
	.field-list .btn {margin-bottom: 20px;}
	.btn-test-method {max-width: 200px; padding: 10px 20px 10px 25px;}
	.btn-test-method .icon {width: 20px; height: 20px; background-size: 20px auto;}
	.field-list .field-items {margin: -15px -10px;}
	.field-list .field-item {width: 33.33333%; padding: 15px 10px;}
	.field-list .field-item-img {margin-bottom: 15px;}
	.field-list .field-item-text p {font-size: 18px;}

	.test-method-modal .modal-header {padding: 12px 20px;}
	.test-method-modal .modal-body {padding: 20px;}
	.test-method-modal .test-title {font-size: 18px; margin-bottom: 16px;}

	/* S401 */
	.product-overview {padding: 130px 0;}
	.product-overview-heading {margin-bottom: 40px;}
	.product-overview-heading-ko {font-size: 22px; margin-bottom: 15px;}
	.product-overview-heading-en {font-size: 50px;}
	.product-overview-desc {gap: 15px;}
	.product-overview-desc p {font-size: 16px;}

	.display-list {padding: 120px 0 100px;}
	.display-items {margin: -10px;}
	.display-item {width: 50%; padding: 10px;}
	.display-item-img {margin-bottom: 10px;}
	.display-item-text p {font-size: 18px;}

	/* S402 */
	.product-slide-item {padding-top: 280px;}
	
	.product-slide-title-eng {bottom: auto; top: -130px; left: 50%; transform: translateX(-50%); font-size: 18px; color: #0F367A; text-align: center; opacity: 1;}
	.product-slide-title-kor {bottom: auto; top: -90px; left: 50%; transform: translateX(-50%); font-size: 42px; color: #111; text-align: center;}

	.product-slide-dots .dot {width: 12px; height: 12px;}
	.product-slide-dots .dot.active {width: 12px; height: 12px;}
	.product-slide-dots .dot::after {width: 12px; height: 12px;}

	.product-slide-modals .modal {position: relative; padding: 36px 15px 100px; width: 100%; max-width: 100%; border-radius: 0; border: none; opacity: 1;}
	.product-slide-modals .modal.active {top: auto !important; left: auto !important;}
	.product-slide-modals .modal-body {overflow-y: unset; max-height: none;} 
	.product-slide-modals .modal-body a {padding: 10px 13px 10px 0; font-size: 15px;}
	.product-slide-modals .btn-modal-close {display: none;}

	.product-slide-items .slick-arrow {top: 194px; transform: translateY(0); width: 40px; height: 52px; background-color: #0F367A;}
	.product-slide-items .slick-arrow:hover {background-color: #0F367A; opacity: 0.8;}

	/* S404 */
	.product-new-items {flex-direction: column;}
	.product-new-item {flex: auto;}
	.product-new-item:hover {flex: auto;}
	.product-new-item .backdrop {background-size: cover;}
	.product-new-item .content {/* padding: 100px 20px 50px; */ padding: 0;}
	.product-new-item .content .title {opacity: 1; transform: translateY(0);}
	.product-new-item .content .title .en {font-size: 32px; margin-bottom: 15px;}
	.product-new-item .content .title .ko {font-size: 16px;}
	.product-new-item .intro-title span {display: none;}
	.product-new-item .intro-title span .mob-only {display: none;}

	/* S501 */
	.product-search-bar {margin-bottom: 50px;}
	.search-bar_category {flex-wrap: wrap;}
	.search-bar_category select {flex: auto; width: calc(50% - 4px); height: 40px; padding: 0 15px; font-size: 15px; background: url('../img/sub/icon-select.png') no-repeat 95% 52%;}
	.search-bar_category option {font-size: 15px;}
	.search-bar_keyword input {height: 40px; padding: 0 15px; font-size: 15px;}
	.search-bar_right {max-width: 120px;}
	.product-search-bar .btn-search {font-size: 16px;}

	/* 제품검색 기본 카테고리 */
	.product-cate-list .product-item {width: 33.333333%;}
	.product-cate-list .product-depth1-title {font-size: 16px; padding: 8px;}
	.product-cate-list .product-depth2-title {font-size: 16px; padding: 11px 8px;}
	.product-cate-list .product-depth3-items {padding: 10px 10px 20px;}
	.product-cate-list .product-depth3-item > a {font-size: 15px; text-decoration: underline; text-underline-offset: 2px;}
	.product-cate-list .product-depth4-items {padding: 12px 10px; margin-top: 12px;}
	.product-cate-list .product-depth4-item > a {font-size: 15px; text-decoration: underline; text-underline-offset: 2px;}

	/* 제품검색 리스트 */
	.product-list-table table thead th {font-size: 18px;}
	.product-list-table table tbody td {font-size: 16px;}
	.product-list-table table tbody td a {text-decoration-line: underline; text-underline-offset: 2px;}

	/* 제품검색 뷰 */
	.product-view-nav ul li {width: 25%; min-height: 66px;}
	.product-view-nav ul li a {font-size: 16px; padding: 10px 5px;}
	.product-view-wrap {/* padding: 50px 40px; */}
	.product-view-item:not(:last-child) {margin-bottom: 50px;}
	.product-view-item-title {padding-bottom: 20px; margin-bottom: 25px;}
	.product-view-item-title h4 {font-size: 26px; padding-left: 22px;}
	.product-view-item-title h4:before {top: 5px; height: 28px;}
	.product-view-item-title h4:after {top: 12px; height: 21px;}
	.product-view-item-desc {font-size: 18px;}
	.product-view-item-desc .dot-list {padding-left: 16px;}
	.product-view-item-desc .dot-list:before {top: 14px;}

	.product-new-item-inner {padding: 20px 20px 50px; min-height: 500px; display: flex; flex-direction: column; justify-content: space-between;}
	.product-slide-modals-expand .modal {opacity: 1; top: auto; transform: translateY(0); right: auto; width: 100%; padding: 25px 15px 25px; margin: 0 auto; background: rgba(0,0,0,0.7);}
	.product-new-item:hover .product-slide-modals-expand .modal {transform: translateY(0);}
	.product-slide-modals-expand .modal-body {overflow-y: auto; max-height: 200px;} 
}

@media (max-width: 768px) {
	.sub-visual-title {height: calc(100vh - 80px);}
	.sub-visual .title {font-size: 40px; margin-bottom: 50px;}

	.lnb {height: 80px;}
	.lnb ul li a {font-size: 16px;}

	.sub-cont {padding: 80px 0 80px;}

	/* S101 */
	.page-company .overview {padding: 100px 0;}
	.page-company .overview .overview-text {max-width: none;}
	.overview-heading {opacity: 0; margin-bottom: 20px;}
	.overview-heading-ko {font-size: 34px;}
	
	/* S102 */
	.intro {padding: 100px 0;}
	.intro-heading:before {top: 120px; height: 163px !important;}
	.intro-heading-ko {font-size: 34px;}
	.intro-sub-title {font-size: 24px;}
	.intro-sub-desc {font-size: 18px;}
	.intro-desc-text .pc-only {display: none;}
	
	.page-philosophy .policy {padding-top: 100px;}
	.page-philosophy .policy-cont {gap: 30px;}
	.page-philosophy .policy-text .num {font-size: 20px;} 
	.page-philosophy .policy-text .title {font-size: 30px;}
	.page-philosophy .policy-text .title span {font-size: 20px;}
	.page-philosophy .policy-text .manual-item .inner {padding: 25px 10px;}
	.page-philosophy .policy-text .manual-item .icon {margin-bottom: 15px;} 
	.page-philosophy .policy-text .manual-item .icon img {height: 50px;}
	
	.page-philosophy .announce-text {padding: 100px 0 60px; max-width: none;}
	.page-philosophy .announce-text .cate {margin-bottom: 30px;}
	.page-philosophy .announce-text .title {font-size: 30px;}
	.page-philosophy .announce-text .desc {font-size: 16px;}
	.page-philosophy .announce-img {height: 300px;}
	
	/* S103 */
	.sub-section-title {margin-bottom: 40px;}
	.sub-section-title-ko {font-size: 34px;}

	.page-history .history-cont {gap: 50px;}
	.page-history .history-heading .company {font-size: 24px;}
	.page-history .history-heading .title {font-size: 40px;}
	.page-history .history-cont .history-desc {padding-bottom: 80px;}
	.page-history .history-desc:after {top: 11px;}
	.page-history .history-item-title {font-size: 28px;}

	/* S105 */
	.location {padding: 100px 0;}
	.location-item {gap: 40px;}
	.location-map iframe {height: 250px;}
	.location-map .root_daum_roughmap { height:250px !important;}
	.location-map .root_daum_roughmap .wrap_map {height:250px !important;}

	/* S201 */
	.esg-text {padding: 40px 15px 100px;}
	.esg-text .esg-title {font-size: 32px; margin-bottom: 20px;}
	.esg-text .esg-desc-list li {font-size: 16px;}
	.esg-text .esg-desc-list li:before {top: 12px;}
	.esg-img {height: 350px;}

	/* S301 */
	.page-rnd .overview {padding: 100px 0;}
	.page-rnd .overview .overview-text {max-width: none;}
	.page-rnd .overview .overview-text .pc-only {display: none;}
	.page-rnd .strategy {padding: 100px 0;}
	.page-rnd .strategy-items {flex-wrap: wrap;}
	.page-rnd .strategy-item {width: 100%;}
	.page-rnd .strategy-item:nth-child(odd) {width: 100%;}
	.page-rnd .strategy-item:nth-child(even) {transform: translateY(0);}
	.page-rnd .strategy-inner {padding: 10px 10px 20px;}
	.page-rnd .strategy-img p {font-size: 20px;} 

	/* S302 */
	/* .page-field .field {padding-top: 100px;} */
	.field-tab {margin-bottom: 40px;}
	.field-tab ul {flex-wrap: wrap;}
	.field-intro {min-height: 250px; margin-bottom: 60px;}
	.field-intro .field-text h4 {font-size: 30px; margin-bottom: 10px;}
	.field-intro .field-text .pc-only {display: none;}

	/* .field-list {padding: 100px 0 80px;} */
	.field-list .field-item {width: 50%;}
	.field-list .field-item-img {margin-bottom: 10px;}
	.field-list .field-item-text p {font-size: 16px;}
	.test-method-modal .test-tab-menu li {width: 50%;}

	/* S401 */
	.product-overview {padding: 100px 0;}
	.product-overview-heading-ko {font-size: 18px;}
	.product-overview-heading-en {font-size: 40px;}
	.product-overview-desc .pc-only {display: none;}

	.display-list {padding: 100px 0 80px;}
	.display-item-text p {font-size: 16px;}

	/* S402 */
	.product-slide-item {padding-top: 240px;}
	
	.product-slide-title-eng {top: -120px;}
	.product-slide-title-kor {top: -80px; font-size: 30px;}

	.product-slide-items .slick-arrow {top: 160px; width: 34px; height: 44px;}

	/* S404 */
	.product-new-item .content {/* padding: 80px 20px 40px; */}
	.product-new-item .content .title .en {font-size: 24px;}

	/* S501 */
	.product-search-bar {flex-direction: column;}
	.search-bar_left {width: 100%; flex: auto}
	.search-bar_right {max-width: none;}
	.product-search-bar .btn-search {height: 40px; font-size: 16px;}

	/* 제품검색 기본 카테고리 */
	.product-cate-list .product-item {width: 50%;}
	
	/* 제품검색 리스트 */
	.product-list-table table thead {display: none;}
	.product-list-table table tbody tr:first-child {border-top: 1px solid #ddd;}
	.product-list-table table tbody td {display: block; text-align: left; padding: 5px 20px;}
	.product-list-table table tbody td:first-child {padding-top: 20px;}
	.product-list-table table tbody td:last-child {padding-bottom: 20px;}
	.product-list-table table tbody td:not(:last-child) {border-right: none;}
	.product-list-table table tbody td .table-item-title {display: inline-block; margin-right: 5px;}
	.product-list-table table tbody td a {color: #0F367A;}

	/* 제품검색 뷰 */
	.product-view-nav ul li {width: 33.3333%; min-height: 60px;}
	.product-view-nav ul li a {font-size: 15px; padding: 5px;}
	.product-view-wrap {/* padding: 40px 30px; */}
	.product-view-item:not(:last-child) {margin-bottom: 40px;}
	.product-view-item-title {padding-bottom: 10px; margin-bottom: 15px;}
	.product-view-item-title h4 {font-size: 22px; padding-left: 22px;}
	.product-view-item-title h4:before {top: 3px; height: 24px;}
	.product-view-item-title h4:after {top: 10px; height: 17px;}
	.product-view-item-desc {font-size: 16px;}
	.product-view-wrap img {width: 100% !important; height: auto !important;}

	.product-new-item-inner {padding: 20px 20px 40px; min-height: 460px;}
	.product-slide-modals-expand .modal-body {max-height: 200px;} 
}

@media (max-width: 480px) {
	/* S302 */
	.test-method-modal .test-img figure {width: 100%;}

	/* 제품검색 뷰 */
	.product-view-nav ul li {width: 50%; min-height: 60px;}
}