@import url(reset.css);
@import url(base.css);
@import url(layout.css);

#main_container{width:100%;padding:10px;box-sizing: border-box;}
.group_1{position:relative;clear:both;width:100%;}
.group_2{position:relative;clear:both;width:100%;margin-top:6px;}
.group_3{position:relative;clear:both;width:100%;margin-top:6px;}
.type1{width:50%;padding-bottom:50%;}
.type2{width:50%;padding-bottom:25%;}
.type3{width:25%;padding-bottom:25%;}
.type4{width:25%;padding-bottom:50%;}


.boxCont{width:100%;height:100%;box-sizing: border-box;overflow:hidden;}
.boxContPanel{width:100%;height:100%;display:block;position:relative;}
.boxContPanel span{position:absolute;bottom:8px;left:5%;color:#fff;font-size:12px;}

.mainBox1{position:relative;overflow:hidden;}
.mainBox1 .boxCont{position:absolute;top:0;left:0;padding:0 3px 0 0;}
.mainBox1 .boxCont .boxContPanel{background:url(../../images/main/bg_7.png) 50% 30% no-repeat #111986;background-size:50%;}

.mainBox2{position:absolute;top:0px;left:50%;}
.mainBox2 .boxCont{position:absolute;top:0;left:0;padding:0 0 3px 3px;}
.mainBox2 .boxCont .boxContPanel{background:url(../../images/main/bg_5.png) 50% 30% no-repeat #0058bc;background-size:28%;}

.mainBox3{position:absolute;bottom:0;left:50%;}
.mainBox3 .boxCont{position:absolute;top:0;left:0;padding:3px 3px 0 3px;}
.mainBox3 .boxCont .boxContPanel{background:url(../../images/main/bg_6.png) 50% 30% no-repeat #2f82e8;background-size:45%;}

.mainBox4{position:absolute;bottom:0;left:75%;}
.mainBox4 .boxCont{position:absolute;top:0;left:0;padding:3px 0 0 3px;}
.mainBox4 .boxCont .boxContPanel{background:url(../../images/main/bg_8.png) 50% 30% no-repeat #0094a8;background-size:45%;}

.mainBox5{position:absolute;top:0px;left:0%;}
.mainBox5 .boxCont{position:absolute;top:0;left:0;padding:0 3px 3px 0;}
.mainBox5 .boxCont .boxContPanel{background:url(../../images/main/bg_2.png) 50% 30% no-repeat #dea31b;background-size:45%;}

.mainBox6{position:absolute;bottom:0px;left:0%;}
.mainBox6 .boxCont{position:absolute;top:0;left:0;padding:3px 3px 0 0;}
.mainBox6 .boxCont .boxContPanel{background:url(../../images/main/bg_4.png) 50% 30% no-repeat #d15927;background-size:45%;}

.mainBox7{margin-left:25%;position:relative;}
.mainBox7 .boxCont{position:absolute;top:0;left:0;padding:0px 3px 0 3px;}
.mainBox7 .boxCont .boxContPanel{background:url(../../images/main/bg_11.png) 50% 30% no-repeat #008601;background-size:50%;}

.mainBox8{position:absolute;top:0px;left:75%;}
.mainBox8 .boxCont{position:absolute;top:0;left:0;padding:0px 0 0 3px;}
.mainBox8 .boxCont .boxContPanel{background:url(../../images/main/bg_9.png) 50% 30% no-repeat #5f3aae;background-size:66%;}

.mainBox9{position:relative;}
.mainBox9 .boxCont{position:absolute;top:0;left:0;padding:0px 3px 0 0;}
.mainBox9 .boxCont .boxContPanel{background:url(../../images/main/bg_1.png) 50% 30% no-repeat #0256c6;background-size:28%;}

.mainBox10{position:absolute;top:0px;left:50%;}
.mainBox10 .boxCont{position:absolute;top:0;left:0;padding:0px 0 0 3px;}
.mainBox10 .boxCont .boxContPanel{background:url(../../images/main/bg_3.png) 50% 30% no-repeat #b21f49;background-size:28%;}

.newsList{clear:both;margin-top:30px;padding-left:35px;background:url(../../images/main/bg_talk.gif) no-repeat;background-size:25px;}
.newsList li a{font-weight:bold;}
.newsList li p{font-size:12px;}


.front,.back{width:100%;height:100%;}

.flip-container.on .flip{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	
}
.flip-container{
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
}
.flip {
	-webkit-transition: 0.4s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.4s;
	-moz-transform-style: preserve-3d;
	-o-transition: 0.4s;
	-o-transform-style: preserve-3d;
	transition: 0.4s;
	transform-style: preserve-3d;
	position: relative;
}
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
.front{z-index: 2;}
.back{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* 2024-02-22 */

/* visualArea */
	#container.main {padding-bottom:0;}
	.visualArea {width:100%;height:100%;margin:auto;position:relative;}
	.visualzone {position:relative;width:100%;height:100%;margin:auto;text-align:center;z-index:1;}
	.visualzone ol {*zoom:1;}
	.visualzone ol:after {content:"";display:block;clear:both;}
	.visualzone ol li {float:left;width:100%;}
	.visualzone ol li  button {position:absolute;bottom:14px;z-index:1;display:block;width:5px;height:5px;padding:0;background:url('../../images/main/nav.png') no-repeat left top/100% 100%;}
	.visualzone ol li.on button {background:url('../../images/main/nav_on.png') no-repeat left top/100% 100%;width:6px;height:6px;}
	.visualzone ol li  button.ps_1 {left:50%;margin-left:-20px;}
	.visualzone ol li  button.ps_2 {left:50%;margin-left:-4px;}
	.visualzone ol li  button.ps_3 {left:50%;margin-left:12px;}
	.visualzone ol li  button.ps_4 {left:50%;margin-left:28px;}

	.visualzone ol li div.wrap_list {display:none;z-index:1;width:100%;margin:auto;height:600px;}
	.visualzone ol li.on div.wrap_list {display:block;}
	.visualArea button {border:none;display:block;cursor:pointer;}
	.visualArea button span {display:none;}
	
	.visual01_tit {position:absolute;left:8%;top:140px;width:100%;height:80px;z-index:1;}
	.visual01_tit span {position:absolute;left:500px;}
	.visual01_tit span img {width:340px;}
	.visual01_txt {position:absolute;left:8%;top:250px;width:100%;height:80px;line-height:20px;font-size:14px;color:#fff;text-shadow:1px 1px 3px #000;letter-spacing:-1px;text-align:left;overflow:hidden;z-index:1;}
	.visual01_txt span {position:absolute;left:500px;white-space:nowrap;}
	.visual01_bg {position:absolute;width:100%;height:100%;overflow:hidden;left:0;text-align:left;background:url('../../images/main/main_slide1.jpg') no-repeat center top/cover;}

	.visual02_tit {position:absolute;left:8%;top:140px;width:100%;height:80px;z-index:1;}
	.visual02_tit span {position:absolute;left:500px;}
	.visual02_tit span img {width:280px;}
	.visual02_txt {position:absolute;left:8%;top:250px;width:100%;height:80px;line-height:20px;font-size:14px;color:#fff;text-shadow:1px 1px 3px #000;letter-spacing:-1px;text-align:left;overflow:hidden;z-index:1;}
	.visual02_txt span {position:absolute;left:500px;white-space:nowrap;}
	.visual02_bg {position:absolute;width:100%;height:100%;overflow:hidden;left:0;text-align:left;background:url('../../images/main/main_slide2.jpg') no-repeat center top/cover;}

	.visual03_tit {position:absolute;left:8%;top:170px;width:100%;height:80px;z-index:1;}
	.visual03_tit span {position:absolute;left:500px;white-space:nowrap;}
	.visual03_tit span img {width:240px;}
	.visual03_txt {position:absolute;left:8%;top:250px;width:100%;height:80px;line-height:20px;font-size:14px;color:#fff;text-shadow:1px 1px 3px #000;letter-spacing:-1px;text-align:left;overflow:hidden;z-index:1;}
	.visual03_txt span {position:absolute;left:500px;white-space:nowrap;}
	.visual03_bg {position:absolute;width:100%;height:100%;overflow:hidden;left:0;text-align:left;background:url('../../images/main/main_slide1.jpg') no-repeat center top/cover;}

	.visual04_tit {position:absolute;left:8%;top:120px;width:100%;height:80px;z-index:1;}
	.visual04_tit span {position:absolute;left:500px;white-space:nowrap;}
	.visual04_tit span img {width:240px;}
	.visual04_txt {position:absolute;left:8%;top:250px;width:100%;height:80px;line-height:20px;font-size:14px;color:#fff;text-shadow:1px 1px 3px #000;letter-spacing:-1px;text-align:left;overflow:hidden;z-index:1;}
	.visual04_txt span {position:absolute;left:500px;white-space:nowrap;}
	.visual04_bg {position:absolute;width:100%;height:100%;overflow:hidden;left:0;text-align:left;background:url('../../images/main/main_slide1.jpg') no-repeat center top/cover;}

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

	}

/* section :: 공통 */
	.section {height:auto;text-align:center;}
	.section .tit {padding-bottom:40px;}
	.section .tit strong {font-size:30px;color:#050057;letter-spacing:-1px;}
	.section .tit p {font-size:14px;color:#363535;padding:10px 0 17px 0;font-weight:bold;}
	.section .tit span {font-size:12px;color:#363535;border-bottom:3px solid #464646;font-weight:bold;}
	
	@media screen and (max-width:330px) {
		.section .tit strong {font-size:26px;}
		.section .tit p {font-size:12px;}
	}
	
/* section1 :: recruit */
	#section1.recruitWrap {background:url('../../images/main/section1.jpg') no-repeat center top/cover;padding:40px 0 80px;}
	.recruitWrap ul {display:flex;flex-wrap:wrap;justify-content:center;gap:36px 0;}
	.recruitWrap ul li {flex-basis:calc((100% / 2) - 36px);}
	.recruitWrap ul li span {display:flex;flex-direction:column;justify-content:center;width:120px;height:120px;margin:0 auto;border-radius:50%;background-color:#3ab145;text-align:center;color:#fff;}
	.recruitWrap ul li span img {width:40px;margin:0 auto;}
	.recruitWrap ul li span p {padding-top:5px;color:#fff;font-size:14px;font-weight:bold;}

	@media screen and (max-width:330px) {
		.recruitWrap ul ul {gap:24px 24px;}
		.recruitWrap ul li span {width:100px;height:100px;}
		.recruitWrap ul li span img {width:30px;}
		.recruitWrap ul li span p {font-size:12px;}
	}
	

/* section2 :: menu */
	#section2.menuWrap {background:url('../../images/main/section2.jpg') no-repeat center top/cover;padding:40px 0;}
	.menuWrap ul {display:flex;flex-wrap:wrap;}
	.menuWrap ul li{display:flex;justify-content:center;align-items:center;width:50%;font-size:10px;text-align:center;}
	.menuWrap ul li.op15 {background-color:rgba(0,0,0,.15);}
	.menuWrap ul li.op25 {background-color:rgba(0,0,0,.25);}
	.menuWrap ul li a {display:block;width:100%;padding:60px 0;color:#023894;}
	.menuWrap ul li a img {width:60px;}
	.menuWrap ul li p {padding-top:12px;}
	.menuWrap ul li strong{display:block;font-size:14px;padding-bottom:5px;}
	
	@media screen and (max-width:330px) {
		.menuWrap ul  li strong{font-size:12px;}
	}


/* section3 :: news */
	#section3.newsWrap {background:url('../../images/main/section3.jpg') no-repeat center top/cover;padding:40px 0 80px;}
	.newslist {display:flex;flex-direction:column;gap:20px;padding:0 10px;}
	.newslist .newsdata {max-width:320px;margin:0 auto;}
	.newslist .newsdata a {position:relative;display:block;}
	.newslist .newsdata a img {max-width:100%;}
	.newslist .newsdata a .tit {position:absolute;left:0;bottom:0;padding:15px 7px;width:100%;line-height:1.4;background-color:rgba(0,0,0,.8);color:#fff;text-align:left;font-size:12px;box-sizing:border-box;}
	
	
/* section4 :: product */
	#section4.productWrap {background:url('../../images/main/section4.jpg') no-repeat center top/cover;padding:40px 0 80px;}
	.productlist {width:270px;margin:auto;position:relative;}
	.productlist .frame {height:262px;overflow:hidden;}
	.productlist .frame ul {margin:0;padding:0;height:100%;display:flex;}
	.productlist .frame ul li {position:relative;min-width:268px;height:260px;cursor:pointer;border:1px solid #959595;}
	.productlist .frame ul li img {width:100%;height:100%;vertical-align:top;}
	.productlist .frame ul li strong {display:block;position:absolute;bottom:0;left:0;width:100%;padding:6px 0;text-align:center;color:#fff;font-size:14px;line-height:24px;background-color:rgba(0,0,0,.5);}
	.productlist .btn {position:absolute;top:50%;transform:translate(0,-50%);padding:0;margin:0;border:0;cursor:pointer;width:40px;height:40px;text-indent:-99999px}
	.productlist .btn.prevPage {left:-50px;background:url('../../images/main/proL.png') no-repeat center center/cover;}
	.productlist .btn.prevPage.active {background:url('../../images/main/proLon.png') no-repeat center center/cover;}
	.productlist .btn.prevPage.disabled,
	.productlist .btn.prevPage[disabled] {cursor:default;filter:Alpha(opacity=20);opacity:0.2;-moz-opacity:0.2;}
	.productlist .btn.prevPage[disabled]:hover{background:url('../../images/main/proL.png') no-repeat center center/cover;}
	.productlist .btn.nextPage {right:-50px;background:url('../../images/main/proR.png') no-repeat center center/cover;}
	.productlist .btn.nextPage.active {background:url('../../images/main/proRon.png') no-repeat center center/cover;}
	.productlist .btn.nextPage.disabled,
	.productlist .btn.nextPage[disabled] {cursor:default;filter:Alpha(opacity=20);opacity:0.2;-moz-opacity:0.2;}
	.productlist .btn.nextPage[disabled]:hover {background:url('../../images/main/proR.png') no-repeat center center/cover;}
	
	@media screen and (max-width:350px) {
		.productlist {width:250px;}
		.productlist .frame {height:242px;}
		.productlist .frame ul li {width:248px;height:240px;}
		.productlist .btn.prevPage {left:-40px;}
		.productlist .btn.nextPage {right:-40px;}
		
	}