@charset "utf-8";

@import url('default.css'); /* 기본설정 */
@import url('layout.css'); /* 사이트 세부설정 */

.sub_visual { position: relative; overflow: hidden; }
.sub_visual h2 { position: absolute; top: 48%; left: 0; width: 100%; font-size: 50px; font-weight: 800; color: #fff; line-height: 60px; text-align: center; z-index: 111; }
.sub_visual .dark { position: absolute; top: 0; left: 0; width: 100%; height: 440px; background: url('../images/common/visual_dark.png') repeat-x left top; z-index: 11; }
.sub_visual .sv_bg1 { width: 100%; height: 440px; background: url('../images/about/visual_img.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; animation: sv-bg-change 5s; }
.sub_visual .sv_bg2 { width: 100%; height: 440px; background: url('../images/led/visual_img.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; animation: sv-bg-change 5s; }
.sub_visual .sv_bg3 { width: 100%; height: 440px; background: url('../images/project/visual_img.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; animation: sv-bg-change 5s; }
.sub_visual .sv_bg4 { width: 100%; height: 440px; background: url('../images/request/visual_img.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; animation: sv-bg-change 5s; }

@keyframes sv-bg-change {
	0% { transform: scale(1); animation-timing-function: ease-in; }
	50% { transform: scale(1.1); animation-timing-function: ease-out; }
	100% { transform: scale(1); }
}

.tabmenu { margin-top: 120px; font-size: 0; line-height: 0; text-align: center; }
.tabmenu a { display: inline-block; width: 210px; margin: 0 10px; font-size: 20px; font-weight: 600; color: #222; line-height: 59px; border-radius: 10px; background-color: #f5f5f5; }
.tabmenu a.active { font-weight: 700; color: #fff; background-image: linear-gradient(90deg,#332482,#6c3fc6); }
.tabmenu a:hover { background-color: #e5e5e5; }

 h3 { margin-top: 115px; font-size: 50px; font-weight: 800; color: #5336ab; line-height: 69px; }
 h4 { margin-top: 178px; font-size: 26px; font-weight: 700; color: #222; line-height: 35px; }

.greeting { display: flex; flex-wrap: wrap; margin-top: 100px; }
.greeting .cont { width: calc(100% - 760px); }
.greeting .cont .tit { font-size: 30px; font-weight: 800; color: #373847; line-height: 49px; }
.greeting .cont .txt { margin-top: 60px; }
.greeting .cont .txt li { font-size: 20px; font-weight: 500; color: #656979; line-height: 34px; }
.greeting .cont .txt li ~ li { margin-top: 34px; }
.greeting .cont .txt li strong { font-weight: 700; color: #222; }
.greeting .img { width: 760px; margin-top: 45px; font-size: 0; line-height: 0; }
.greeting .img img { border-radius: 20px; }
.greeting .img img ~ img { margin: 110px 0 0 20px; }

.organization { margin: 110px 0 -240px 0; padding: 150px 0 240px 0; background-color: #faf9fb; }
.organization .pc { font-size: 0; line-height: 0; }
.organization .mobile { display: none; font-size: 0; line-height: 0; }
.organization .pc img, .organization .mobile img { max-width: 100%; }

.electroplate { position: relative; margin: 110px 0 -240px 0; padding-bottom: 240px; background-color: #faf9fb; }
.electroplate:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: #fff; }
.electroplate .wrap { display: flex; flex-wrap: wrap; }
.electroplate .img { width: 700px; font-size: 0; line-height: 0; box-shadow: 20px 20px 20px rgba(0,0,0,0.1); }
.electroplate .cont { width: calc(100% - 820px); margin-left: 120px; }

.specification { width: 100%; margin-top: 35px; border-top: 2px solid #656979; background-color: #fff; }
.specification th { padding: 17px 0; font-size: 18px; font-weight: 600; color: #222; line-height: 27px; text-align: center; border-bottom: 1px solid #d5d5d5; }
.specification td { position: relative; padding: 17px 0; font-size: 18px; font-weight: 400; color: #656979; line-height: 27px; text-align: center; border-bottom: 1px solid #d5d5d5; }
.specification td:before { content: ''; position: absolute; top: 20px; left: 0; width: 1px; height: 21px; background: #d5d5d5; }

.project-list { display: flex; flex-wrap: wrap; gap: 70px; margin-top: 110px; }
.project-list li { width: calc((100% - 140px) / 3);  text-align: center; }
.project-list li a { display: block; }
.project-list li a .img { overflow: hidden; font-size: 0; line-height: 0; border-radius: 20px; }
.project-list li a .img img { width: 100%; aspect-ratio: 10/7; object-fit: cover; transition: transform .5s; }
.project-list li a:hover .img img { transform: scale(1.05); }
.project-list li a .tit { margin-top: 25px; font-size: 20px; font-weight: 600; color: #222; line-height: 29px; }

.paging { position: relative; margin-top: 95px; font-size: 0; line-height: 0; text-align: center; }
.paging a { display: inline-block; width: 30px; margin: 0 10px; font-size: 17px; color: #242424; line-height: 30px; text-align: center; transition: none; }
.paging a.on, .paging a:hover { font-weight: 700; color: #fff; border-radius: 20px; background-color: #5336ab; }
.paging a.btn { margin: 0 8px; }
/*.paging a.btn img { font-size: 0; line-height: 0; vertical-align: top; }
.paging a.btn.on, .paging a.btn:hover { background: none; }*/
.paging a.write { position: absolute; top: -3px; right: 0; width: 90px; margin: 0; font-size: 16px; font-weight: 500; color: #282828; line-height: 35px; border-radius: 30px; border: 1px solid #282828; }
.paging a.write:hover { color: #fff; border: 1px solid #282828; background-color: #282828; }

.slider-container { position: relative; width: 100%; margin-top: 110px; aspect-ratio: 14 / 10; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.2); background-color: #333; }
.slide-image { width: 100%; height: 100%; object-fit: cover; display: none; transition: opacity 0.5s ease; }
.slide-image.active { display: block; animation: fadeIn 0.5s; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 90px; height: 90px; background-color: rgba(0, 0, 0, 0.6); border: none; cursor: pointer; font-size: 45px; font-weight: 300; color: #fff;display: flex; justify-content: center; align-items: center; z-index: 10; transition: background-color 0.3s; }
.nav-btn:hover { background-color: rgba(0, 0, 0, 0.9); }
.prev-btn { left: 0; }
.next-btn { right: 0; }

@keyframes fadeIn {
	from { opacity: 0.8; }
	to { opacity: 1; }
}

.essential { margin-top: 90px; font-size: 18px; font-weight: 400; color: #555; line-height: 27px; text-align: right; }
.essential span { color: #de2d3f; }

.board-write { margin-top: 25px; padding: 50px 0; border-top: 1px dashed #aaa; border-bottom: 1px dashed #aaa; }
.board-write > li { display: flex; padding: 0 60px; }
.board-write > li ~ li { margin-top: 30px; }
.board-write > li .tit { width: 140px; font-size: 20px; font-weight: 700; color: #121212; line-height: 69px; }
.board-write > li .tit span { color: #de2d3f; }
.board-write > li .input { width: calc(100% - 140px); font-size: 0; line-height: 0; text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.board-write > li .input input[type="text"] { width: 600px; height: 69px; padding-left: 30px; font-size: 20px; font-weight: 400; color: #121212; border: none; border-radius: 10px; background-color: #f5f5f5; }
.board-write > li .input input::placeholder { font-size: 18px; color: #888; }
.board-write > li .input input.width { width: 100%; }
.board-write > li .input textarea { width: 100%; height: 250px; padding: 20px 30px; font-size: 20px; font-weight: 400; color: #121212; line-height: 29px; border: none; border-radius: 10px; background-color: #f5f5f5; }
.board-write > li .input textarea::placeholder { font-size: 18px; color: #888; }

.privacy-box { margin-top: 45px; }
.privacy-box .tit input { width: 19px; height: 19px; margin: 5px 12px 0 0; border-radius: 5px; border: 1px solid #c5c5c5; }
.privacy-box .tit label { font-size: 20px; font-weight: 700; color: #121212; line-height: 29px; }
.privacy-box .cont { overflow-y: scroll; height: 280px; margin-top: 25px; padding: 25px 30px; font-size: 18px; font-weight: 300; color: #777; line-height: 29px; border-radius: 5px; border: 1px solid #d5d5d5; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.button { margin-top: 100px; font-size: 0; line-height: 0; text-align: center; }
.button a { display: inline-block; margin: 0 10px; width: 240px; font-size: 20px; font-weight: 700; color: #5336ab; line-height: 65px; border-radius: 50px; border: 2px solid #ddd; background-color: #fff; box-sizing: background-color: #fff; border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.button a:hover { border: 2px solid #5336ab; }
.button button { display: inline-block; margin: 0 10px; width: 240px; font-size: 20px; font-weight: 700; color: #fff; line-height: 69px; border-radius: 50px; border: none; background-color: #5336ab; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.install_date { width: 100%; margin-top: 30px; text-align: center; }

@media screen and (max-width: 1400px) {
	.wrap { width: 1280px; margin: 0 auto; }

	.project-list { gap: 40px; }
	.project-list li { width: calc((100% - 80px) / 3); }
}

@media screen and (max-width: 1280px) {
	.wrap { width: 980px; margin: 0 auto; }

	 h4 { margin-top: 115px; }

	.greeting { flex-direction: column-reverse; }
	.greeting .cont { width: 100%; margin-top: 75px; }
	.greeting .img { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; margin-top: 0; }
	.greeting .img img:nth-child(1) { width: calc(68% - 20px); }
	.greeting .img img:nth-child(2) { width: 32%; }
	.greeting .img img ~ img { margin: 0; }

	.electroplate .img { width: 100%; }
	.electroplate .img img { width: 100%; }
	.electroplate .cont { width: 100%; margin: 0; }
}

@media screen and (max-width: 980px) {
	.wrap { width: 750px; margin: 0 auto; }

	.organization .pc { display: none; }
	.organization .mobile { display: block; }

	.board-write > li .input input[type="text"] { width: 100%; }
}

@media screen and (max-width: 768px) {
	.wrap { width: auto; margin: 0 20px; }

	.sub_visual h2 { top: 46%; font-size: 35px; line-height: 40px; }
	.sub_visual .sv_bg1 { height: 250px; }
	.sub_visual .sv_bg2 { height: 250px; }
	.sub_visual .sv_bg3 { height: 250px; }
	.sub_visual .sv_bg4 { height: 250px; }

	.tabmenu { display: flex; gap: 10px; margin-top: 40px; }
	.tabmenu a { width:calc(100%); margin: 0; font-size: 14px; line-height: 41px; border-radius: 5px; }

	 h3 { margin-top: 55px; font-size: 24px; line-height: 33px; }
	 h4 { margin-top: 45px; font-size: 16px; line-height: 25px; }

	.greeting { margin-top: 45px; }
	.greeting .cont { margin-top: 45px; }
	.greeting .cont .tit { font-size: 18px; line-height: 27px; }
	.greeting .cont .txt { margin-top: 30px; }
	.greeting .cont .txt li { font-size: 14px; line-height: 25px; }
	.greeting .cont .txt li ~ li { margin-top: 25px; }
	.greeting .img { gap: 10px; }
	.greeting .img img { border-radius: 10px; }
	.greeting .img img:nth-child(1) { width: calc(68% - 10px); }

	.organization { margin: 45px 0 -80px 0; padding: 50px 0 80px 0; }

	.electroplate { margin: 45px 0 -80px 0; padding-bottom: 80px; }
	.electroplate:before { height: 60px; }
	.electroplate .img { box-shadow: 10px 10px 10px rgba(0,0,0,0.1); }

	.specification { margin-top: 25px; }
	.specification th { padding: 12px 0; font-size: 14px; line-height: 21px; }
	.specification td { padding: 12px 0; font-size: 14px; line-height: 21px; }
	.specification td:before { top: 12px; height: 21px; }

	.project-list { gap: 25px 20px; margin-top: 45px; }
	.project-list li { width: calc((100% - 20px) / 2); }
	.project-list li a .img { border-radius: 10px; }
	.project-list li a .tit { margin-top: 10px; font-size: 14px; line-height: 21px; }


	.paging { margin-top: 50px; }
	.paging a { width: 24px; margin: 0 3px; font-size: 13px; line-height: 24px; }
	.paging a.btn { margin: 2px; }
	.paging a.btn img { width: 20px; }
	.paging a.write { position: static; display: block; width: 100px; margin: 40px auto 0 auto; font-size: 13px; line-height: 30px; }

	.slider-container { margin-top: 45px; box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
	.nav-btn { width: 40px; height: 40px; font-size: 17px; }

	.project-tit { margin-top: 50px; font-size: 20px; line-height: 29px; }
	.project-info { gap: 45px; margin-top: 45px; }
	.project-info li .tit { padding-left: 0; font-size: 18px; line-height: 25px; }
	.project-info li .detail { overflow-y: normal; height: auto; margin-top: 20px; padding: 15px 0; font-size: 15px; line-height: 22px; border-top: 1px solid #282828; }
	.project-info li table { margin-top: 20px; border-top: 1px solid #282828; }
	.project-info li table th { width: 90px; padding: 15px 0 15px 0; font-size: 15px; line-height: 22px; }
	.project-info li table td { width: calc(100% - 90px); padding: 15px 0; font-size: 15px; line-height: 22px; }

	.essential { margin-top: 15px; font-size: 14px; line-height: 25px; }

	.board-write { margin-top: 15px; padding: 30px 0; }
	.board-write > li { padding: 0; }
	.board-write > li ~ li { margin-top: 10px; }
	.board-write > li .tit { width: 70px; font-size: 15px; line-height: 44px; }
	.board-write > li .input { width: calc(100% - 70px); }
	.board-write > li .input input[type="text"] { height: 44px; padding-left: 15px; font-size: 15px; border-radius: 5px; }
	.board-write > li .input input::placeholder { font-size: 13px; }
	.board-write > li .input textarea { height: 180px; padding: 10px 15px; font-size: 15px; line-height: 24px; border-radius: 5px; }
	.board-write > li .input textarea::placeholder { font-size: 13px; }

	.privacy-box { margin-top: 25px; }
	.privacy-box .tit input { width: 15px; height: 15px; margin: 5px 10px 0 0; }
	.privacy-box .tit label { font-size: 15px; line-height: 24px; }
	.privacy-box .cont { height: 180px; margin-top: 15px; padding: 10px 10px 10px 15px; font-size: 13px; line-height: 22px; }

	.button { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 50px; }
	.button a { width: calc((100% - 10px) / 2); margin: 0 auto; font-size: 15px; line-height: 42px; border: 1px solid #ddd; }
	.button a:hover { border: 1px solid #5336ab; }
	.button button { width: calc((100% - 10px) / 2); margin: 0 auto; font-size: 15px; line-height: 44px; }
    
    .install_date { margin-top: 20px; }
}

@media screen and (max-width: 480px) {
	.wrap { width: auto; margin: 0 20px; }

}