@charset "utf-8";

/* CEO 인사말 */
.greeting {text-align:center;}

.greeting .imageBox {position:relative; height:330px; margin-bottom:60px; overflow:hidden; background:url('../img/content/greetingImg.jpg') center no-repeat; background-size:cover;}
.greeting .imageBox img {position:absolute; width:auto; height:100%; left:calc(50% - 470px);}

.greeting .textBox {opacity:0;}
.greeting .textBox h4 {font-size:24px; font-weight:600; margin-bottom:30px; color:#0c6153;}
.greeting .textBox p {font-size:18px; font-weight:300; margin-bottom:60px; line-height:140%; word-break:keep-all;}
.greeting .textBox p .br {display:block;}

.greeting ul.infoBox {position:relative; display:flex; justify-content: space-between; z-index:2;}
.greeting ul.infoBox li {opacity:0; width:20%; max-width:220px; text-align:center; border:1px solid #f5f5f5; background:#fff; border-radius:20px; overflow:hidden; padding:31px 0; box-shadow:0px 6px 6px rgba(0,0,0,0.06);}
.greeting ul.infoBox li .icon {position:relative; display:block; width:25px; height:25px; background-size:contain; background-repeat:no-repeat; background-position:center; margin:0 auto; margin-bottom:20px;}
.greeting ul.infoBox li .icon.icon01 {background-image:url('../img/content/greetingIcon01.png');}
.greeting ul.infoBox li .icon.icon02 {background-image:url('../img/content/greetingIcon02.png');}
.greeting ul.infoBox li .icon.icon03 {background-image:url('../img/content/greetingIcon03.png');}
.greeting ul.infoBox li .icon.icon04 {background-image:url('../img/content/greetingIcon04.png');}
.greeting ul.infoBox li .icon.icon05 {background-image:url('../img/content/greetingIcon05.png');}
.greeting ul.infoBox li b {display:block; color:#0d6e5e; font-weight:600; margin-bottom:10px;}
.greeting ul.infoBox li .text {line-height:120%;}
	
	@media screen and (max-width:1199px){
		.greeting .imageBox {height:280px;}

		.greeting .textBox h4 {font-size:22px;}
		.greeting .textBox p {font-size:17px;}

		.greeting ul.infoBox {flex-wrap: wrap; justify-content: center;}
		.greeting ul.infoBox li {width:calc(33% - 20px); margin:10px; max-width:inherit;}
		.greeting ul.infoBox li:nth-child(4),
		.greeting ul.infoBox li:nth-child(5) {}
	}
	
	@media screen and (max-width:999px){
		.greeting .textBox h4 {font-size:140%;}
		.greeting .textBox p {font-size:105%;}
	}

	@media screen and (max-width:799px){
		.greeting .imageBox {height:200px;}
		.greeting .textBox h4 {font-size:120%; margin-bottom:20px;}
		.greeting .textBox p {font-size:100%; margin-bottom:40px;}
		.greeting .textBox p .br {display:inline;}

		.greeting ul.infoBox li {font-size:100%;}
		.greeting ul.infoBox li:nth-child(4),
		.greeting ul.infoBox li:nth-child(5) {width:calc(50% - 20px);}
	}

	@media screen and (max-width:599px){
		.greeting ul.infoBox li {width:calc(50% - 20px); font-size:90%; padding:21px 0;}
		.greeting ul.infoBox li .icon {margin-bottom:10px;}
		.greeting ul.infoBox li b {margin-bottom:5px;}
		.greeting ul.infoBox li:nth-child(5) {width:100%;}
		.greeting ul.infoBox li:nth-child(5) .text br {display:none;}
	}

	@media screen and (max-width:499px){
		.greeting .textBox h4 {font-size:110%;}
		.greeting .textBox p {font-size:90%;}

		.greeting ul.infoBox li {width:100% !important; word-break:keep-all; padding:11px 0;}
		.greeting ul.infoBox li .icon {margin-bottom:5px;}
		.greeting ul.infoBox li b {margin-bottom:0;}
	}


/* effect */
.greeting .textBox.show {opacity:1; animation:fadeInUp 1s both;}
.greeting ul.infoBox.show li {opacity:1; animation:fadeInDown 1s both;}
.greeting ul.infoBox.show li:nth-child(1) {}
.greeting ul.infoBox.show li:nth-child(2) {animation-delay: 0.1s;}
.greeting ul.infoBox.show li:nth-child(3) {animation-delay: 0.2s;}
.greeting ul.infoBox.show li:nth-child(4) {animation-delay: 0.3s;}
.greeting ul.infoBox.show li:nth-child(5) {animation-delay: 0.4s;}



/* 연혁 */
.history {text-align:center; margin-bottom:-150px;}
.history .imageBox {height:330px; margin-bottom:60px; background:url('../img/content/historyImg.jpg') center no-repeat; background-size:cover;}
.history .infoBox {position:relative; padding-bottom:150px;}
.history .infoBox:before {position:absolute; display:block; width:1px; height:calc(100% + 20px); top:45px; left:calc(50% - 0.5px); background:#ddd; content:'';}
.history .infoBox h4 {display:inline-block; font-size:30px; font-weight:600; color:#0d6e5e; border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:81px; word-break:keep-all;}
.history .infoBox .year {width:50%; margin-top:60px;}
.history .infoBox .year:first-child {margin-top:0;}
.history .infoBox .year h5 {position:relative; font-size:24px; color:#0d6e5e; margin-bottom:10px; font-weight:600;}
.history .infoBox .year h5:before {position:absolute; width:11px; height:11px; border:1px solid #0d6e5e; background:#f8f8f8; border-radius:50%; box-sizing:border-box; content:'';}
.history .infoBox .year h5:after {position:absolute; width:30px; height:1px; background:#0d6e5e; content:'';}
.history .infoBox .year ul li {font-size:18px; letter-spacing:-0.025em; word-break:keep-all;}

.history .infoBox .year:nth-child(even) {opacity:0; margin-left:50%; text-align:left; padding-left:56px;}
.history .infoBox .year:nth-child(even) h5:before {top:9px; left:-61.5px;}
.history .infoBox .year:nth-child(even) h5:after {top:14px; left:-50.5px;}
.history .infoBox .year:nth-child(odd) {opacity:0; margin-right:50%; text-align:right; padding-right:56px;}
.history .infoBox .year:nth-child(odd) h5:before {top:9px; right:-61px;}
.history .infoBox .year:nth-child(odd) h5:after {top:14px; right:-50px;}

	@media screen and (max-width:1199px){
		.history .imageBox {height:280px;}
		.history .infoBox h4 {font-size:26px;}
		.history .infoBox .year h5 {font-size:22px;}
		.history .infoBox .year ul li {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.history .infoBox h4 {font-size:160%;}
		.history .infoBox .year h5 {font-size:140%;}
		.history .infoBox .year ul li {font-size:105%;}
	}
	
	@media screen and (max-width:799px){
		.history .imageBox {height:200px;}
		.history .infoBox h4 {display:flex; align-items:center; justify-content:center; height:69px; font-size:140%; margin-bottom:21px; border-bottom:0;}
		.history .infoBox:before  {top:68px; left:0;}
		.history .infoBox .year {margin-top:30px;}
		.history .infoBox .year h5 {font-size:120%;}
		.history .infoBox .year ul li {font-size:100%;}

		.history .infoBox .year {width:100%; margin-left:0 !important; margin-right:0 !important;}
		.history .infoBox .year:nth-child(odd) {text-align:left; padding-left:56px; padding-right:0;}
		.history .infoBox .year:nth-child(odd) h5:before {left:-61.5px;}
		.history .infoBox .year:nth-child(odd) h5:after {left:-50.5px;}
	}

	@media screen and (max-width:499px){
		.history .infoBox .year ul li {font-size:90%; line-height:140%;}
	}


/* effect */
.history .infoBox .year.show:nth-child(even) {opacity:1; animation:fadeInRight 1s both;}
.history .infoBox .year.show:nth-child(odd) {opacity:1; animation:fadeInLeft 1s both;}

	@media screen and (max-width:799px){
		.history .infoBox .year.show:nth-child(odd) {animation:fadeInRight 1s both;}
	}


/* 생산설비 */
.facility {text-align:center;}
.facility .infoBox {opacity:0; margin-top:60px;}
.facility .infoBox:first-child {margin-top:0;}
.facility .infoBox h4 {font-size:24px; color:#0d6e5e; margin-bottom:15px; font-weight:600;}
.facility .infoBox p {font-size:18px;}
.facility .infoBox p .br {display:block;}
.facility .infoBox ul.image {display:flex; justify-content: center; margin-top:30px;}
.facility .infoBox ul.image li {margin:0 10px;}
.facility .infoBox ul.image li img {border-radius:20px; overflow:hidden;}

	@media screen and (max-width:1199px){
		.facility .infoBox h4 {font-size:22px;}
		.facility .infoBox p {font-size:17px;}

	}

	@media screen and (max-width:999px){
		.facility .infoBox h4 {font-size:140%;}
		.facility .infoBox p {font-size:105%;}

		.facility .infoBox ul.image {flex-wrap: wrap;}
		.facility .infoBox ul.image li {margin-top:20px;}

	}

	@media screen and (max-width:799px){
		.facility .infoBox h4 {font-size:120%;}
		.facility .infoBox p {font-size:100%;}
		.facility .infoBox p .br {display:inline;}

		.facility .infoBox ul.image li {width:calc(50% - 20px);}

	}

	@media screen and (max-width:499px){
		.facility .infoBox h4 {font-size:110%;}
		.facility .infoBox p {font-size:90%; line-height:140%;}
		
		.facility .infoBox ul.image li {width:100%;}
	}


/* effect */
.facility .infoBox.show {opacity:1; animation:fadeInUp 1s both;}


/* 찾아오시는 길 */
.location {display:flex; height:500px; line-height:initial;}
.location .mapBox {width:calc(100% - 400px);}
.location .mapBox iframe {height:100% !important;}
.location .infoBox {width:400px; padding:69px 62px; background:url('../img/content/mapInfoBg.jpg') center no-repeat; background-size:cover; color:#fff;}
.location .infoBox h4 {text-align:center; font-size:28px; font-weight:600; letter-spacing:-0.03em; margin-bottom:60px;}
.location .infoBox ul {padding-right:20px;}
.location .infoBox ul li {display:flex; align-items: center; font-size:16px; font-weight:300; padding:10px 0;}
.location .infoBox ul li:first-child {padding-top:0;}
.location .infoBox ul li .br {display:block;}
.location .infoBox ul li b {font-weight:600; letter-spacing:-0.025em; width:78px; word-break:keep-all;}
.location .infoBox ul li b:before {position:relative; display:inline-block; width:3px; height:3px; background:#fff; border-radius:50%; overflow:hidden; margin-right:8px; content:'';}
.location .infoBox ul li p {display:flex; align-items: center; width:calc(100% - 78px); word-break:keep-all;}
.location .infoBox ul li p:before {position:relative; display:inline-block; width:1px; height:10px;margin-right:20px; background:rgba(255,255,255,0.3); content:'';}

.location .infoBox .linkBox {display: flex;  justify-content: space-between; margin-top:50px;}
.location .infoBox .linkBox a {position:relative; display:flex; align-items: center; justify-content: space-between; padding:0 10px; width:130px; height:50px; border-radius:7px; overflow:hidden;}
.location .infoBox .linkBox a:after {position:relative; display:block; width:32px; height:30px; background-size:contain; background-repeat:no-repeat; content:'';}
.location .infoBox .linkBox a.link01 {background:#fff; color:#000;}
.location .infoBox .linkBox a.link01:after {background-image:url('../img/content/arrow1.png');}
.location .infoBox .linkBox a.link02 {background:#0c6153; color:#fff;}
.location .infoBox .linkBox a.link02:after {background-image:url('../img/content/arrow2.png');}

	@media screen and (max-width:1199px){
		.location {flex-direction: column; height:auto;}
		.location .mapBox {width:100%; height:400px;}
		.location .infoBox {display: flex; flex-direction: column; align-items: center; width:100%; padding:49px 32px;}
		.location .infoBox h4 {font-size:24px; margin-bottom:40px;}
		.location .infoBox ul {padding-right:0;}
		.location .infoBox ul li {font-size:15px; padding:5px 0;}
		.location .infoBox .linkBox {margin-top:20px;}
		.location .infoBox .linkBox a {margin-right:10px;}
	}

	@media screen and (max-width:999px){
		.location .mapBox {width:100%; height:350px;}
		.location .infoBox h4 {font-size:150%;}
		.location .infoBox ul li {font-size:100%;}

	}

	@media screen and (max-width:799px){
		.location .mapBox {width:100%; height:300px;}
		.location .infoBox h4 {font-size:130%;}
		.location .infoBox ul li {font-size:95%;}
		.location .infoBox .linkBox a {font-size:90%; height:40px;}
		.location .infoBox .linkBox a:after {width:22px; height:20px;}
	}

	@media screen and (max-width:499px){
		.location .infoBox {padding:35px 10%;}
		.location .infoBox h4 {font-size:120%; margin-bottom:20px;}
		.location .infoBox ul li {flex-direction: column; align-items: flex-start; font-size:85%;}
		.location .infoBox ul li p {width:100%;}
		.location .infoBox ul li p:before {margin-right:10px;}
		.location .infoBox .linkBox {width:100%; flex-direction: column}
		.location .infoBox .linkBox a {width:100%; margin-right:0; margin-top:10px;}
	}

/* 제품소개 - 특성 공통 */
.pigment {max-width:940px; margin:0 auto;}
.pigment .sec01 {text-align:center; margin-bottom:60px;}
.pigment .sec01 .imageBox {margin-bottom:25px;}
.pigment .sec01 .textBox {}
.pigment .sec01 .textBox p {opacity:0; margin-top:15px; letter-spacing:-0.025em; font-size:18px;}
.pigment .sec01 .textBox p b {color:#0c6153;}
.pigment .sec01 .textBox p .br {display:block;}
.pigment .sec01 .textBox p:first-child {margin-top:0;}

.pigment .featuresBox {display:flex; flex-wrap: wrap; justify-content: space-around; margin-top:-46px;}
.pigment .featuresBox .box {opacity:0; width:48%; max-width:420px; margin-top:46px; text-align:center;}
.pigment .featuresBox .box .image {border-radius:20px; overflow:hidden; box-shadow:0 6px 6px rgba(0,0,0,0.04);}
.pigment .featuresBox .box .image img {width:100%;}
.pigment .featuresBox .box .text {margin-top:20px;}
.pigment .featuresBox .box .text h5 {font-size:24px; font-weight:600; letter-spacing:-0.05em; color:#000; word-break:keep-all;}
.pigment .featuresBox .box .text p {font-size:18px; letter-spacing:-0.025em; margin-top:15px; word-break:keep-all; font-weight:400;}
.pigment .featuresBox .box .text p .br {display:block;}

	@media screen and (max-width:1199px){
		.pigment .sec01 .textBox p {font-size:17px;}
		.pigment .featuresBox .box .text h5 {font-size:22px;}
		.pigment .featuresBox .box .text p {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.pigment .sec01 .textBox p {font-size:105%;}
		.pigment .featuresBox .box .text h5 {font-size:120%;}
		.pigment .featuresBox .box .text p {font-size:95%; line-height:140%;}
		.pigment .featuresBox .box .text p .br {display:inline;}
	}

	@media screen and (max-width:799px){
		.pigment .sec01 .textBox p {font-size:100%;}
		.pigment .sec01 .textBox p .br {display:inline;}
		.pigment .featuresBox .box {width:80%; max-width:inherit;}
		.pigment .featuresBox .box .image {width:80%; margin:0 auto;}
		.pigment .featuresBox .box .text h5 {font-size:110%;}
		.pigment .featuresBox .box .text p {font-size:90%;}

	}
	@media screen and (max-width:499px){
		.pigment .sec01 .textBox p {font-size:95%; line-height:140%;}
		.pigment .featuresBox .box {width:100%;}
		.pigment .featuresBox .box .text p {font-size:85%;}
	}

/*effect*/
.pigment .sec01.show .textBox p {opacity:1; animation:fadeIn 2s both; animation-delay: 0.2s !important;}
.pigment .featuresBox .box.show {opacity:1; animation:fadeInUp 1s both;}


/* 제품소개 - 안료모음 공통*/
.pigmentCollect {}
.pigmentCollect .explan {color:#0c6153; font-size:18px; font-weight:600; font-family:'Eulyoo1945',sans-serif; text-align:right;}
.pigmentCollect ul.pigmentList {display:flex; flex-wrap: wrap; justify-content: space-between;}
.pigmentCollect ul.pigmentList li {width:20%; max-width:200px; text-align:center; margin-top:40px;}
.pigmentCollect ul.pigmentList li h4 {font-size:18px; font-weight:600; font-family:'Pretendard',sans-serif;}
.pigmentCollect ul.pigmentList li .sTit {display:block; font-size:16px; font-weight:400;}
	
	@media screen and (max-width:1199px){
		.pigmentCollect .explan {font-size:17px;}
		.pigmentCollect ul.pigmentList li h4 {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.pigmentCollect .explan {font-size:105%;}
		.pigmentCollect ul.pigmentList li h4 {font-size:105%;}
	}

	@media screen and (max-width:799px){
		.pigmentCollect .explan {font-size:100%;}
		.pigmentCollect ul.pigmentList {justify-content: center;}
		.pigmentCollect ul.pigmentList li {width:25%;}
		.pigmentCollect ul.pigmentList li h4 {font-size:100%;}
	}

	@media screen and (max-width:599px){
		.pigmentCollect ul.pigmentList li {width:33.333%;}
	}

	@media screen and (max-width:499px){
		.pigmentCollect .explan {font-size:90%; line-height:140%;}
		.pigmentCollect ul.pigmentList li {width:50%;}
		.pigmentCollect ul.pigmentList li h4 {font-size:90%;}
	}


/* 전통단청안료 view */
.pigment01View {}
.pigment01View h5 {display:flex; justify-content: center; position:relative; font-size:28px; font-weight:600; margin-bottom:40px;}
.pigment01View h5:after {position:relative; display:inline-block; width:8px; height:8px; margin-top:-5px; content:'';}

	@media screen and (max-width:1199px){
		.pigment01View h5 {font-size:24px;}
	}

	@media screen and (max-width:999px){
		.pigment01View h5 {font-size:150%;}
	}

	@media screen and (max-width:799px){
		.pigment01View h5 {font-size:130%; margin-bottom:30px;}
	}

	@media screen and (max-width:499px){
	}


.pigment01View .sec01 {display:flex; align-items:center; width:100%; max-width:942px; margin:0 auto;}
.pigment01View .sec01 .imageBox {opacity:0; width:48%; max-width:450px; box-shadow:0 3px 7px rgba(0,0,0,0.04); border-radius:20px; overflow:hidden;}
.pigment01View .sec01 .textBox {opacity:0; width:52%; padding-left:50px;}
.pigment01View .sec01 .textBox h4 {font-size:24px; font-weight:600; margin-bottom:20px;}
.pigment01View .sec01 .textBox p {font-size:18px; font-weight:400; letter-spacing:-0.025em; word-break:keep-all;}
.pigment01View .sec01 .textBox p .br {display:block;}

	@media screen and (max-width:1199px){
		.pigment01View .sec01 {flex-direction: column; max-width:inherit;}
		.pigment01View .sec01 .imageBox {width:100%; margin-bottom:30px;}
		.pigment01View .sec01 .textBox {width:100%; padding-left:0;}
		.pigment01View .sec01 .textBox h4 {font-size:22px;}
		.pigment01View .sec01 .textBox p {font-size:17px;}
		.pigment01View .sec01 .textBox p .br {display:inline;}
	}

	@media screen and (max-width:999px){
		.pigment01View .sec01 .textBox h4 {font-size:140%;}
		.pigment01View .sec01 .textBox p {font-size:120%;}
	}

	@media screen and (max-width:799px){
		.pigment01View .sec01 .textBox h4 {font-size:105%;}
		.pigment01View .sec01 .textBox p {font-size:100%;}
	}

	@media screen and (max-width:499px){
		.pigment01View .sec01 .textBox h4 {font-size:95%;}
		.pigment01View .sec01 .textBox p {font-size:90%; line-height:140%;}
	}


.pigment01View .sec02 {margin-top:80px;}
.pigment01View .sec02 ul {opacity:0; display:flex; flex-wrap: wrap; margin:-30px -10px 0;}
.pigment01View .sec02 ul li {width:calc(25% - 20px); max-width:270px; margin:30px 10px 0;}
.pigment01View .sec02 ul li img {box-shadow:0 6px 6px rgba(0,0,0,0.04);}
.pigment01View .sec02 ul li .tit {font-size:18px; font-weight:400; margin-top:10px; text-align:center;}

	@media screen and (max-width:1199px){
		.pigment01View .sec02 ul li {width:calc(33.333% - 20px);}
		.pigment01View .sec02 ul li .tit {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.pigment01View .sec02 ul li .tit {font-size:105%;}
	}

	@media screen and (max-width:799px){
		.pigment01View .sec02 ul {opacity:0; display:flex; flex-wrap: wrap; margin:-30px -5px 0;}
		.pigment01View .sec02 ul li {width:calc(33.333% - 10px); margin:30px 5px 0;}
		.pigment01View .sec02 ul li .tit {font-size:95%;}
	}

	@media screen and (max-width:499px){
		.pigment01View .sec02 ul li {width:calc(50% - 10px);}
		.pigment01View .sec02 ul li .tit {font-size:85%;}
	}


.pigment01View .sec03 {margin-top:80px;}
.pigment01View .sec03 ul {opacity:0; display:flex; flex-wrap: wrap; justify-content: center; margin:0 -24px;}
.pigment01View .sec03 ul li {max-width:150px; margin:0 24px;}
.pigment01View .sec03 ul li .tit {font-size:18px; font-weight:400; text-align:center; margin-top:15px;}

	@media screen and (max-width:1199px){
		.pigment01View .sec03 ul {margin-top:-20px;}
		.pigment01View .sec03 ul li {margin-top:20px;}
		.pigment01View .sec03 ul li .tit {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.pigment01View .sec03 ul {margin:-20px -14px 0;}
		.pigment01View .sec03 ul li {margin:20px 14px 0;}
		.pigment01View .sec03 ul li .tit {font-size:105%;}
	}

	@media screen and (max-width:799px){
		.pigment01View .sec03 ul li .tit {font-size:100%;}
	}

	@media screen and (max-width:499px){
		.pigment01View .sec03 ul li {width:calc(50% - 28px);}
		.pigment01View .sec03 ul li .tit {font-size:90%; margin-top:10px;}
	}


.pigment01View .sec04 {margin-top:80px;}
.pigment01View .sec04 .imageBox {opacity:0; box-shadow:0 6px 6px rgba(0,0,0,0.04);}

.pigment01View .bottomBtn {display:flex; align-items:center; justify-content: center; margin-top:120px;}
.pigment01View .bottomBtn a {display:flex; align-items:center; justify-content: center; width:248px; border-radius:10px; overflow:hidden; font-size:24px; font-weight:600; height:60px; font-family:'Eulyoo1945',sans-serif;} 
.pigment01View .bottomBtn a:hover {background:#0c6153; color:#fff;}

	@media screen and (max-width:1199px){
		.pigment01View .bottomBtn a {font-size:22px;}
	}

	@media screen and (max-width:999px){
		.pigment01View .bottomBtn {margin-top:100px;}
		.pigment01View .bottomBtn a {font-size:140%;}
	}

	@media screen and (max-width:799px){
		.pigment01View .bottomBtn {margin-top:80px;}
		.pigment01View .bottomBtn a {width:200px; height:50px; font-size:120%;}
	}

	@media screen and (max-width:499px){
		.pigment01View .bottomBtn {margin-top:60px;}
		.pigment01View .bottomBtn a {width:70%; font-size:110%;}
	}


/*effect*/
.pigment01View .sec01.show .imageBox {opacity:1; animation:fadeIn 1s both; animation-delay: 0.2s !important;}
.pigment01View .sec01.show .textBox {opacity:1; animation:fadeInLeft 1s both; animation-delay: 0.4s !important;}
.pigment01View .sec02.show ul {opacity:1; animation:fadeInUp 1s both;}
.pigment01View .sec03.show ul {opacity:1; animation:fadeInUp 1s both;}
.pigment01View .sec04.show .imageBox {opacity:1; animation:fadeIn 1s both;}


.pigment0101 h5:after {background:#365444;}
.pigment0101 .sec01 .textBox h4 {color:#0c6153;}
.pigment0101 .bottomBtn a {border:1px solid #0c6153; color:#0c6153;}
.pigment0101 .bottomBtn a:hover {background:#0c6153;}

.pigment0102 h5:after {background:#264450;}
.pigment0102 .sec01 .textBox h4 {color:#264450;}
.pigment0102 .bottomBtn a {border:1px solid #264450; color:#264450;}
.pigment0102 .bottomBtn a:hover {background:#264450;}

.pigment0103 h5:after {background:#287f64;}
.pigment0103 .sec01 .textBox h4 {color:#287f64;}
.pigment0103 .bottomBtn a {border:1px solid #287f64; color:#287f64;}
.pigment0103 .bottomBtn a:hover {background:#287f64;}

.pigment0104 h5:after {background:#955c2b;}
.pigment0104 .sec01 .textBox h4 {color:#955c2b;}
.pigment0104 .bottomBtn a {border:1px solid #955c2b; color:#955c2b;}
.pigment0104 .bottomBtn a:hover {background:#955c2b;}

.pigment0105 h5:after {background:#d7b545;}
.pigment0105 .sec01 .textBox h4 {color:#d7b545;}
.pigment0105 .sec02 ul {justify-content: center;}
.pigment0105 .bottomBtn a {border:1px solid #d7b545; color:#d7b545;}
.pigment0105 .bottomBtn a:hover {background:#d7b545;}

.pigment0106 h5:after {background:#a03b2f;}
.pigment0106 .sec01 .textBox h4 {color:#a03b2f;}
.pigment0106 .bottomBtn a {border:1px solid #a03b2f; color:#a03b2f;}
.pigment0106 .bottomBtn a:hover {background:#a03b2f;}

.pigment0107 h5:after {background:#90452f;}
.pigment0107 .sec01 .textBox h4 {color:#90452f;}
.pigment0107 .bottomBtn a {border:1px solid #90452f; color:#90452f;}
.pigment0107 .bottomBtn a:hover {background:#90452f}

.pigment0108 h5:after {background:#90452f;}
.pigment0108 .sec01 .textBox h4 {color:#90452f;}
.pigment0108 .bottomBtn a {border:1px solid #90452f; color:#90452f;}
.pigment0108 .bottomBtn a:hover {background:#90452f;}

.pigment0109 h5:after {background:#e0dad0;}
.pigment0109 .sec01 .textBox h4 {color:#e0dad0;}
.pigment0109 .bottomBtn a {border:1px solid #e0dad0; color:#e0dad0;}
.pigment0109 .bottomBtn a:hover {background:#e0dad0;}

.pigment0110 h5:after {background:#d6d8d2;}
.pigment0110 .sec01 .textBox h4 {color:#d6d8d2;}
.pigment0110 .sec02 ul {justify-content: center;}
.pigment0110 .bottomBtn a {border:1px solid #d6d8d2; color:#d6d8d2;}
.pigment0110 .bottomBtn a:hover {background:#d6d8d2;}

.pigment0111 h5:after {background:#252625;}
.pigment0111 .sec01 .textBox h4 {color:#252625;}
.pigment0111 .sec02 ul {justify-content: center;}
.pigment0111 .bottomBtn a {border:1px solid #252625; color:#252625;}
.pigment0111 .bottomBtn a:hover {background:#252625;}

.pigment0112 h5:after {background:#c59a7d;}
.pigment0112 .sec01 .textBox h4 {color:#c59a7d;}
.pigment0112 .bottomBtn a {border:1px solid #c59a7d; color:#c59a7d;}
.pigment0112 .bottomBtn a:hover {background:#c59a7d;}

.pigment0113 h5:after {background:#417473;}
.pigment0113 .sec01 .textBox h4 {color:#417473;}
.pigment0113 .bottomBtn a {border:1px solid #417473; color:#417473;}
.pigment0113 .bottomBtn a:hover {background:#417473;}

.pigment0114 h5:after {background:#cdd9d5;}
.pigment0114 .sec01 .textBox h4 {color:#cdd9d5;}
.pigment0114 .bottomBtn a {border:1px solid #cdd9d5; color:#cdd9d5;}
.pigment0114 .bottomBtn a:hover {background:#cdd9d5;}

.pigment0115 h5:after {background:#e05f20;}
.pigment0115 .sec01 .textBox h4 {color:#e05f20;}
.pigment0115 .bottomBtn a {border:1px solid #e05f20; color:#e05f20;}
.pigment0115 .bottomBtn a:hover {background:#e05f20;}



/* 전통단청안료 view */
.pigment02View {}
.pigment02View h5 {display:flex; justify-content: center; position:relative; font-size:28px; font-weight:600; margin-bottom:40px;}
.pigment02View h5:after {position:relative; display:inline-block; width:8px; height:8px; margin-top:-5px; content:'';}
.pigment02View .sec01 {display:flex; align-items:center; width:100%; max-width:942px; margin:0 auto;}
.pigment02View .sec01 .imageBox {opacity:0; width:100%; max-width:940px;}
.pigment02View .sec02 {margin-top:80px;}
.pigment02View .sec02 ul {opacity:0; display:flex; flex-wrap: wrap; justify-content: center; margin:-30px -17px 0;}
.pigment02View .sec02 ul li {width:calc(31% - 34px); max-width:354px; margin:30px 17px 0; text-align:center;}
.pigment02View .sec02 ul li .tit {margin-top:20px;}
.pigment02View .sec02 ul li .tit h6 {font-size:24px; font-weight:600; margin-bottom:10px;}
.pigment02View .sec02 ul li .tit p {font-size:18px; font-weight:400; letter-spacing:-0.025em; word-break:keep-all;}
.pigment02View .sec02 ul li .tit p .br {display:block;}
.pigment02View .sec04 {margin-top:80px;}
.pigment02View .sec04 .imageBox {opacity:0; box-shadow:0 6px 6px rgba(0,0,0,0.04);}

		@media screen and (max-width:1299px){
		.pigment02View .sec02 ul li .tit p .br {display:inline;}
	}

	@media screen and (max-width:1199px){
		.pigment02View h5 {font-size:24px;}
		.pigment02View .sec02 ul li img {width:90%;}
		.pigment02View .sec02 ul li .tit h6 {font-size:22px;}
		.pigment02View .sec02 ul li .tit p {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.pigment02View h5 {font-size:150%;}
		.pigment02View .sec02 ul li {width:calc(33.333% - 34px);}
		.pigment02View .sec02 ul li .tit h6 {font-size:140%;}
		.pigment02View .sec02 ul li .tit p {font-size:105%;}
	}

	@media screen and (max-width:799px){
		.pigment02View h5 {font-size:130%;}
		.pigment02View .sec02 ul li {width:calc(50% - 34px);}
		.pigment02View .sec02 ul li .tit h6 {font-size:120%;}
		.pigment02View .sec02 ul li .tit p {font-size:100%;}
	}

	@media screen and (max-width:499px){
		.pigment02View h5 {font-size:120%;}
		.pigment02View .sec02 ul li {width:calc(90% - 34px);}
		.pigment02View .sec02 ul li img {width:80%;}
		.pigment02View .sec02 ul li .tit h6 {font-size:110%;}
		.pigment02View .sec02 ul li .tit p {font-size:90%; line-height:140%;}
	}


.pigment02View .bottomBtn {display:flex; align-items:center; justify-content: center; margin-top:120px;}
.pigment02View .bottomBtn a {display:flex; align-items:center; justify-content: center; width:248px; border:1px solid #515151; color:#515151; border-radius:10px; overflow:hidden; font-size:24px; font-weight:600; height:60px; font-family:'Eulyoo1945',sans-serif;} 
.pigment02View .bottomBtn a:hover {background:#515151; color:#fff;}
	
	@media screen and (max-width:1199px){
		.pigment02View .bottomBtn a {font-size:22px;}
	}

	@media screen and (max-width:999px){
		.pigment02View .bottomBtn {margin-top:100px;}
		.pigment02View .bottomBtn a {font-size:140%;}
	}

	@media screen and (max-width:799px){
		.pigment02View .bottomBtn {margin-top:80px;}
		.pigment02View .bottomBtn a {width:200px; height:50px; font-size:120%;}
	}

	@media screen and (max-width:499px){
		.pigment02View .bottomBtn {margin-top:60px;}
		.pigment02View .bottomBtn a {width:70%; font-size:110%;}
	}


/*effect*/
.pigment02View .sec01.show .imageBox {opacity:1; animation:fadeIn 1s both; animation-delay: 0.2s !important;}
.pigment02View .sec01.show .textBox {opacity:1; animation:fadeInLeft 1s both; animation-delay: 0.4s !important;}
.pigment02View .sec02.show ul {opacity:1; animation:fadeInUp 1s both;}
.pigment02View .sec03.show ul {opacity:1; animation:fadeInUp 1s both;}
.pigment02View .sec04.show .imageBox {opacity:1; animation:fadeIn 1s both;}


.pigment0201 h5:after {background:#515151;}
.pigment0201 .bottomBtn a {border:1px solid #515151; color:#515151;}
.pigment0201 .bottomBtn a:hover {background:#515151;}

.pigment0202 h5:after {background:#c58920;}
.pigment0202 .bottomBtn a {border:1px solid #c58920; color:#c58920;}
.pigment0202 .bottomBtn a:hover {background:#c58920;}

.pigment0203 h5:after {background:#7e5233;}
.pigment0203 .bottomBtn a {border:1px solid #7e5233; color:#7e5233;}
.pigment0203 .bottomBtn a:hover {background:#7e5233;}

.pigment0204 h5:after {background:#000;}
.pigment0204 .bottomBtn a {border:1px solid #000; color:#000;}
.pigment0204 .bottomBtn a:hover {background:#000;}

.pigment0205 h5:after {background:#6f6f52;}
.pigment0205 .bottomBtn a {border:1px solid #6f6f52; color:#6f6f52;}
.pigment0205 .bottomBtn a:hover {background:#6f6f52;}

.pigment0206 h5:after {background:#8b565d;}
.pigment0206 .sec02 ul {justify-content: center;}
.pigment0206 .bottomBtn a {border:1px solid #8b565d; color:#8b565d;}
.pigment0206 .bottomBtn a:hover {background:#8b565d;}

.pigment0207 h5:after {background:#666;}
.pigment0207 .sec02 ul {justify-content: center;}
.pigment0207 .bottomBtn a {border:1px solid #666; color:#666;}
.pigment0207 .bottomBtn a:hover {background:#666;}

.pigment0208 h5:after {background:#2358c2;}
.pigment0208 .sec02 ul {justify-content: center;}
.pigment0208 .bottomBtn a {border:1px solid #2358c2; color:#2358c2;}
.pigment0208 .bottomBtn a:hover {background:#2358c2;}

.pigment0209 h5:after {background:#c9b57b;}
.pigment0209 .bottomBtn a {border:1px solid #c9b57b; color:#c9b57b;}
.pigment0209 .bottomBtn a:hover {background:#c9b57b;}

.pigment0210 h5:after {background:#9b9b9b;}
.pigment0210 .bottomBtn a {border:1px solid #9b9b9b; color:#9b9b9b;}
.pigment0210 .bottomBtn a:hover {background:#9b9b9b;}


/* 준비중 */
.ing {display:flex; align-items:center; justify-content:center; height:500px;}
.ing h4 {display: flex; flex-direction: column; align-items: center; font-size:18px; color:#ccc; font-weight:400; letter-spacing:-0.05em;}
.ing h4:before {position:relative; display:block; content:url('../img/content/ingImg.png'); margin-bottom:25px;}

	@media screen and (max-width:1199px){
	}

	@media screen and (max-width:999px){
		.ing {height:400px;}
	}

	@media screen and (max-width:799px){
		.ing {height:350px;}
	}

	@media screen and (max-width:499px){
		.ing {height:300px;}
	}


/* 천연석채안료 적용예 */
.natureList {opacity:0;}
.natureList ul {display:flex; flex-wrap: wrap; margin:0 -22.5px;}
.natureList ul li {width:calc(33.333% - 45px); max-width:350px; margin:0 22.5px 60px;}
.natureList ul li .image {border-radius:20px; overflow:hidden;}
.natureList ul li .image img {width:100%;}
.natureList ul li h4 {text-align:center; margin-top:17px; font-size:18px; font-weight:400; font-family:inherit;}

	@media screen and (max-width:1199px){
		.natureList ul li h4 {font-size:17px;}
	}

	@media screen and (max-width:999px){
		.natureList ul li h4 {font-size:105%;}
	}

	@media screen and (max-width:799px){
		.natureList ul {margin:0 -10px;}
		.natureList ul li {width:48%; margin:0 1% 60px;}
		.natureList ul li h4 {font-size:100%;}
	}

	@media screen and (max-width:499px){
	}

/* effect */
.natureList.show {opacity:1; animation:fadeInDown 1s both;}