@charset "utf-8";

/* ¸ÞÀκñÁÖ¾ó */
#mainVisual{ overflow:hidden; height:800px; margin-top:130px;}

#mainVisual .img{ position:relative}
#mainVisual .img .bg{ position:absolute; width:100%; height:800px; background-size: cover; transform:scale(1.5,1.5); opacity:0; transition:2s; transition-delay:1s}
#mainVisual .img .bg1{background:url("/img/main/main_visual01.jpg") center top no-repeat;}
#mainVisual .img .bg2{background:url("/img/main/main_visual02.jpg") center top no-repeat;}
#mainVisual .img .bg3{background:url("/img/main/main_visual03.jpg") center top no-repeat;}
#mainVisual .img .bg4{background:url("/img/main/main_visual04.jpg") center top no-repeat;}
#mainVisual .img .slogan{ position:relative; padding:100px 0 0 0; text-align:center; color:#fff; letter-spacing:-0.03em; }
#mainVisual .img .slogan .t1{ opacity:0; margin-left:70px; font-size:40px;  font-family:notokrB; transition:2s; transition-delay:1s; text-shadow:0 3px  3px rgba(0,0,0,.6);}
#mainVisual .img .slogan .t2{font-size:24px; opacity:0; margin-top:5px; margin-right:70px; transition:2s; transition-delay:1s; text-shadow:0 3px  3px rgba(0,0,0,.6);}
#mainVisual .img .slogan .t2:before{ content:""; display:block; width:40px; height:2px; background:#111; margin:.5em auto}
#mainVisual .img .slogan .t3{ line-height:2; font-size:14px; margin-top:5em; opacity:0; transition:2s; transition-delay:2s}

#mainVisual .img.flex-active-slide .bg{ transform:scale(1,1); opacity:1; transition-delay:0}
#mainVisual .img.flex-active-slide .slogan .t1{ opacity:1; margin-left:0; transition-delay:0; transition:1s}
#mainVisual .img.flex-active-slide .slogan .t2{ opacity:1; margin-right:0; transition:1s; transition-delay:.5s}
#mainVisual .img.flex-active-slide .slogan .t3{ opacity:1; margin-top:0; transition-delay:0}

#mainVisual .btn{ position:absolute; left:0; bottom:20px; width:100%; z-index:100; text-align:center}
#mainVisual .btn > li{ position:absolute; width:40px; line-height:40px; bottom:0; z-index:100}
#mainVisual .btn > li.flex-prev{ left:5%}
#mainVisual .btn > li.flex-next{ right:5%}
#mainVisual .btn > li > a{ display:block;  border:1px solid #000; color:#000; transition:.3s; opacity:.5}
#mainVisual .btn > li > a.flex-active{ opacity:1}

#mainVisual .flex-control-paging{ position:absolute; top:870px; width:100%; text-align:center; z-index:100}
#mainVisual .flex-control-paging > li{ display:inline-block; *display:inline; zoom:1;}
#mainVisual .flex-control-paging > li > a{ display:block; width:12px; height:12px; border-radius:12px; margin:0 4px; font-size:0; position:relative; background:#bfdcb5; /*border:1px solid #339513;*/ transition:.5s}
#mainVisual .flex-control-paging > li > a.flex-active{ width:70px; background:#339513}


@media only screen and (max-width:767px){
   
   #mainVisual .img .bg{transform:scale(1.1,1.1); opacity:0; transition:2s; transition-delay:1s}
   #mainVisual .img .bg1{background:url("/img/main/main_visual01_m.jpg") center top no-repeat;}
   #mainVisual .img .bg2{background:url("/img/main/main_visual02_m.jpg") center top no-repeat;}
   #mainVisual .img .bg3{background:url("/img/main/main_visual03_m.jpg") center top no-repeat;}
   #mainVisual .img .slogan{padding:250px 0 0 0;}
   #mainVisual .img .slogan .t1{font-size:20px;}
   #mainVisual .img .slogan .t2{font-size:16px;}
   #mainVisual .flex-control-paging{top:230px;}

   #mainVisual .flex-control-paging > li > a.flex-active{ width:12px;}
}

/* ¸ÞÀÎ ÄÁÅÙÃ÷ ¹Ú½º */
@media only screen and (min-width: 1400px){
   .mainBox{width:1400px; margin:0 auto; overflow:hidden;}
}

@media only screen and (max-width:1399px){
   .mainBox{width:96%; margin:0 2%;}
}

.mainBox .box_in1 { width:100%; margin-top:40px; overflow:hidden; position:relative; letter-spacing:-0.03em;}
.mainBox .box_in1 ul {margin:0 0 -30px -2%; overflow:hidden;}
.mainBox .box_in1 ul li{float:left; width: calc(25% - 2%); margin:0 0 30px 2%; position: relative; overflow:hidden; border:1px solid #ddd;}
.mainBox .box_in1 ul li .inner{width:100%; position:relative;}
.mainBox .box_in1 ul li .inner{width:100%; height:160px;position:relative; }
.mainBox .box_in1 ul li .inner .bg_box{ width:100%; height:250px; overflow:hidden; position:absolute; display:block; transition:0.3s;}
.mainBox .box_in1 ul li .inner .bg1{ background:url("/img/main/box_in1_bg1.jpg") no-repeat left top;}
.mainBox .box_in1 ul li .inner .bg2{ background:url("/img/main/box_in1_bg2.jpg") no-repeat left top;}
.mainBox .box_in1 ul li .inner .bg3{ background:url("/img/main/box_in1_bg3.jpg") no-repeat left top;}
.mainBox .box_in1 ul li .inner .bg4{ background:url("/img/main/box_in1_bg4.jpg") no-repeat left top;}
.mainBox .box_in1 ul li .inner:hover .bg_box{transform:scale(1.2,1.2); transition:1s; }
.mainBox .box_in1 ul li .inner .txt_box {position:absolute; width:100%; text-align:center; padding-top:20px; height:250px; z-index:9;}
.mainBox .box_in1 ul li .inner .txt_box h3{font-size:23px; color:#fff; margin-top:20px; text-shadow:0 2px  2px rgba(0,0,0,.3);}
.mainBox .box_in1 ul li .inner .txt_box p{font-size:15px; color:#fff; line-height:24px; padding-top:15px}

.mainBox .box_in1 ul li .inner .txt_box em{position: relative; display: inline-block; margin-top:20px; padding: 0 30px; font-size:14px; font-style:normal; line-height:30px; background: #000; color: #fff; border-radius:30px; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; }
.mainBox .box_in1 ul li .inner .txt_box em{ color: #000; background:rgba(255,255,255,.8);}

.mainBox .box_in2 { width:100%; margin-top:40px; overflow:hidden; position:relative; letter-spacing:-0.02em;}
.mainBox .box_in2 .gall_box {width:100%; height:255px; background:#f2f2f2; padding:15px 19px 15px 11px; border:1px solid #ddd; position: relative;}
.mainBox .box_in2 h2 {font-size:30px; line-height:33px; color:#000; margin-bottom:40px; text-align:center;}
.mainBox .box_in2 p {font-size:18px; color:#000; margin-bottom:40px; letter-spacing:-0.01em; text-align: center;}

.mainBox .box_in2 .title{width:100%; height:40px; color: #333; font-size:20px; border-bottom:1px solid #ddd;}
.mainBox .box_in2 .title h3 { float: left; margin:0 0 20px 0; color: #333; font-size:20px;}
.mainBox .box_in2 .title > a { float: right; display: block; line-height: 45px; color:#dcdfe0; font-size:14px; }
.mainBox .box_in2 .title > a:hover {color:#fff;}
.mainBox .box_in2 .title > a i {display: block; width:30px; height:30px; font-size:0;  background:url("/img/main/icon_plus.png") no-repeat center; transition:0.3s; border:1px solid #ddd; margin-bottom:5px;}
.mainBox .box_in2 .title > a i:hover {background:url("/img/main/icon_plus_hover.png") #339513 no-repeat center; }

.mainBox .box_in2 .gallery { width:100%;  position:relative; display: block; clear: both;}

.mainBox .box_in3 {width:100%; margin-top:40px; overflow:hidden; position:relative; letter-spacing:-0.02em;}
.mainBox .box_in3 .community {margin:0 0 -30px -3%; overflow:hidden; letter-spacing:-0.02em;}
.mainBox .box_in3 .community .li_box{float:left; width: calc(33.333% - 3%); height:200px; margin:0 0 30px 3%; position: relative; overflow:hidden; background:#f2f2f2; border:1px solid #ddd;}

.mainBox .box_in3 .community .li_box h3 { float: left; color: #333; font-size:20px; padding:6px 20px;}
.mainBox .box_in3 .community .li_box .line {content:""; display: block; width:100%; height:1px; background: #ccc; margin:40px 0 15px 0; }
.mainBox .box_in3 .community .li_box > a { float: right; display: block; line-height: 45px; color:#dcdfe0; font-size:14px; margin:5px 20px 0 0;}
.mainBox .box_in3 .community .li_box > a:hover {color:#fff;}
.mainBox .box_in3 .community .li_box > a i {display: block; width:30px; height:30px; font-size:0;  background:url("/img/main/icon_plus.png") no-repeat center; transition:0.3s; border:1px solid #ddd; margin-bottom:5px;}
.mainBox .box_in3 .community .li_box > a i:hover {background:url("/img/main/icon_plus_hover.png") #339513 no-repeat center; }
.mainBox .box_in3 .community .li_box .list_box { width:100%;  position:relative; display: block; clear: both;  padding:0 20px;}

.mainBox .box_in4{width:100%; overflow:hidden; margin-top:40px; letter-spacing:-0.02em; }
.mainBox .box_in4 ul{margin:0 0 -30px -3%; overflow:hidden;}
.mainBox .box_in4 ul li{float:left; width: calc(25% - 3%); height:100px;  margin:0 0 30px 3%; position:relative;  background:#f2f2f2; border:1px solid #ddd; padding-left:20px;}

.mainBox .box_in4 ul li .in1_btn {padding:10px 0 0 10px; height:100px; letter-spacing:-0.02em;}
.mainBox .box_in4 ul li .in1_btn_img { width:100%; overflow:hidden;}
.mainBox .box_in4 ul li .in1_btn img {float:left; padding:11px 17px 0 0; display:inline-block; transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;}
.mainBox .box_in4 ul li :hover img {-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg);-ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}
.mainBox .box_in4 ul li p {font-size:18px; color:#333; padding-top:10px; margin-bottom:5px;}
.mainBox .box_in4 ul li span {font-size:14px; color:#666; padding-top:20px; background:url("/img/main/more_bg.png") no-repeat 0 bottom; padding:0 40px 7px 0}
.mainBox .box_in4 ul li span:hover {color:#2f6f88; background:url("/img/main/more_bg_hover.png") no-repeat 0 bottom;}

@media only screen and (max-width:768px){
    .mainBox .box_in1 { width:100%; margin-top:-260px; overflow:hidden; position:relative; letter-spacing:-0.03em;}
    .mainBox .box_in1 ul li{width: calc(100% - 2%);}
    .mainBox .box_in3 .community .li_box{float:none; width: calc(100% - 2%);}
}

@media only screen and (max-width:650px){
    .mainBox .box_in1 { width:100%; margin-top:-260px; overflow:hidden; position:relative; letter-spacing:-0.03em;}
    .mainBox .box_in4 ul li{width: calc(50% - 3%); padding-left:10px;}
	.mainBox .box_in4 ul li .in1_btn img {float:left; padding:11px 10px 0 0; }
	.mainBox .box_in4 ul li .in1_btn {height:165px; padding:10px 0 0 5px; letter-spacing:-0.03em;}
	.mainBox .box_in4 ul li p {font-size:16px; line-height:20px;}
	.mainBox .box_in4 ul li span {font-size:12px; padding:0 0 5px 0}
}