@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
html{transition:0.5s}
html, body{width: 1920px; margin: 0 auto; max-width: 100%; overflow-x: hidden}
/*
html {overflow-x:auto; overflow-y:hidden;}
body {margin:0;height:970px;overflow-y:scroll;}
*/

#layer_pop{display: none}
#layer_pop .img img{width: 100%; }
#layer_pop .wrap_table{padding: 10px; background: #6e4d3f; width: 100%; margin: 0 auto; border-radius: 8px;margin-top: 10px; }
#layer_pop{ position: fixed; top: 100px; right: 100px; z-index: 999; width: 600px; }
#layer_pop table{display: table; width: 100%}
#layer_pop table td{color: #fff; }
#layer_pop table td, #layer_pop table td a{font-size: 13px; font-weight: 300}
#layer_pop table td a{color: #fff; position: absolute; top: 20px; display: block; text-indent: -9999px; right: 20px;font-size: 0}
#layer_pop table td input{display: inline-block; margin-right: 10px;  position: relative;top: 2px; }

@media (max-width: 760px){
	#layer_pop{padding: 0; padding-top: 0; width: 300px; left: 0%;  max-width: 100%;left: 50%;transform: translateX(-50%)}
	#layer_pop .img img{max-width: 100%}
	#layer_pop table td, #layer_pop table a{font-size: 12px; }
	#layer_pop table td a{ }
}

.pop{position: fixed; z-index: -2; width: 100%; height: 100%; background: #211d1c; opacity: 0}
.pop.on{z-index: 9999; opacity: 1}
.pop .wrap{position: relative; width: 100%; height: 100%}
.pop .wrap > button{position: absolute;  top: 70px; right: 70px; background: none; border: none; z-index: 2}
.pop .wrap .txt_area{position: absolute; width: 580px; top: 0; right: 0; background: #f2491c; height: 100%; box-sizing: border-box; padding-left: 80px; padding-top: 275px; }
.pop .wrap .txt_area .tit span{display: block; color: #fff; color: #ffffff; font-weight: 600; letter-spacing: -0.5px; line-height: 1; font-size: 20px; margin-bottom: 17px; }
.pop .wrap .txt_area .tit strong{display: block; color: #fff; font-weight: 600; letter-spacing: -0.5px; line-height: 1; font-size: 68px; letter-spacing: -1px; margin-bottom: 17px; }
.pop .wrap .txt_area .tit p{display: block; color: #fff; font-weight: 400; letter-spacing: -0.5px; line-height: 2; font-size: 16px; letter-spacing: -0.5px; }
.pop .slide_area {position: relative; left: -203px;padding-right: 300px;padding-top: 160px; }
.pop .slide_area .slick-slide img{opacity: 0.5; transition: 0.7s}
.pop .slide_area .slick-slide.slick-current img{opacity: 1}
.pop .pag {margin-top: 225px; }
.pop .pag > *{display: inline-block;vertical-align: top}
.pop .pag span{color: #ff9d76; font-weight: 500; letter-spacing: -0.5px; font-size: 20px; padding-top: 20px; }
.pop .pag i{width: 18px; height: 31px; background: url(/img/main/dash.jpg); margin: 0 10px; margin-top: 15px; }
.pop .pag > div{width: 45px;}
.pop .pag ul li{color: #fff; font-weight: 600; color: #ffffff; font-size: 38px; letter-spacing: -0.8px;}
.deco_line{position: fixed; transform: rotate(-90deg);z-index: 999;bottom: 265px; left: -113px}
.deco_line ul{position: relative; }
.deco_line ul:after{content: ''; display: block; clear: both;position: relative; }
.deco_line ul:before{content: ''; display: block; position: absolute; width: 200%; height: 1px; left: 365px; background: #e4dad7; bottom: 0; opacity: 0.8}
.deco_line ul li{float: left; font-size: 14px; font-weight: 700; font-family: 'Play', sans-serif;color: #fff; width: 100px; text-align: center;position: relative;transition: 0.5s}
.deco_line ul li:nth-child(1):before{content: '';
    display: block;
    position: absolute;
    width: 200%;
    height: 1px;
    right: 65px;
    background: #e4dad7;
    bottom: 0;
    opacity: 0.8;
}
.deco_line ul li.on {color: #f23f1c}
.deco_line ul li i{display: block; width: 30px; height: 6px; background: url(/img/main/nav_deco.png); margin: 0 auto;margin-top: 20px; position: relative}
.deco_line ul li.on i{background: url(/img/main/nav_deco_on.png); }
.deco_line ul li i:after{content: ''; display: block; width: 70px; height: 1px; position: absolute; bottom: 0; left: 30px; background: #e4dad7; opacity: 0.8}

.deco_line ul li:last-child i:after{display: none}
#main.act{overflow: hidden; height: 100%}
*{outline: 0}
.inner{width: 1400px; margin: 0 auto; }
#main{position: relative}
#main .bg{position: fixed; top: 0; right: 42px; width: 1378px; height: 459px; background: url(/img/main/main_shape.png);z-index: 1;transition: background 0.5s;}
#main .bg02{background: #fff;position: absolute;top: 970px;  width: 100%; height: 2800px;z-index: -1;opacity: 0;transition: 0.8s; bottom: 0; left: 0; transform: translateZ(0)}
/*#main .bg_b{transform: scale(1.2);transition: 8s}*/
/*#main.opc .bg_b{transform: scale(1)}*/
/*#main.opc .bg{opacity: 1}*/

/*#main.on .bg{background: url(/img/main/main_shape_on.png);opacity: 1}*/
/*#main.act .bg{background: url(/img/main/main_shape_act.png);}*/
/*#main .bg02{background: #211d1c;position: fixed; width: 100%; height: 200%;z-index: -1;opacity: 0;transition: 0.8s; bottom: 0; left: 0}*/
#main.on .bg02{opacity: 1}
/*#main .bg02{background: #211d1c;position: fixed; width: 100%; height: 200%;z-index: -1;opacity: 0; bottom: 0; left: 0}*/
#main .bg_b{display: block; opacity: 0}
#main.on .bg_b{opacity: 1}
#main .bg_w{display: none}
/*#main .bg_w .bg{background: url(/img/main/main_shape_act.png);}*/
/*#main .bg_w .bg02{background: #fff;}*/

.main_visual{width:100%;position: relative;z-index: 3; height: 970px;background: #000}
.main_visual .btn{position: absolute; z-index: 10; left: 50%; margin-left: 460px; top: 560px;}
.main_visual .btn button{position: relative; width: 70px; height: 70px; }
.main_visual .btn button i{display: block; position: absolute; background: #ccc2bf; opacity: 0.5}
.main_visual .btn button i.line01, .main_visual .btn button i.line03, .main_visual .btn button i.line05, .main_visual .btn button i.line07{width: 18px; height: 5px; }
.main_visual .btn button i.line02, .main_visual .btn button i.line04, .main_visual .btn button i.line06, .main_visual .btn button i.line08{height: 13px; width: 5px; }


.main_visual .btn button:hover i.line01, .main_visual .btn button:hover i.line03, .main_visual .btn button:hover i.line05, .main_visual .btn button:hover i.line07{animation: m_ca01 0.5s ease-in }

@keyframes m_ca01{
    0%{width: 18px; }
    60%{width: 26px; }
    100%{width: 18px; }
}

.main_visual .btn button:hover i.line02, .main_visual .btn button:hover i.line04, .main_visual .btn button:hover i.line06, .main_visual .btn button:hover i.line08{animation: m_ca02 0.5s ease-in  }

.main_con01 a:hover{cursor: url(/img/main/pointer.png), url(/img/main/pointer.cur), auto}
#sub.list .grid-item a:hover{cursor: url(/img/main/pointer.png), url(/img/main/pointer.cur), auto}



@keyframes m_ca02{
    0%{height: 13px; }
    60%{height: 26px; }
    100%{height: 13px; }
}

.main_visual .btn button i.line01{top: 0; left: 0}
.main_visual .btn button i.line02{top: 5px; left: 0}
.main_visual .btn button i.line03{top: 0; right: 0}
.main_visual .btn button i.line04{top: 5px; right: 0}
.main_visual .btn button i.line05{bottom: 0; left: 0}
.main_visual .btn button i.line06{bottom: 5px; left: 0}
.main_visual .btn button i.line07{bottom: 0; right: 0}
.main_visual .btn button i.line08{bottom: 5px; right: 0}
.main_visual .btn button.slick-prev{background: url(/img/main/main_prev.png)}
.main_visual .btn button.slick-next{background: url(/img/main/main_next.png);margin-left: -8px; top: 65px}
.main_visual .scroll{position: absolute; right: 0; bottom: 0;z-index: 9; width: 60px; height: 70px; right: 40px; background: #213ba9;padding-top: 15px}
.main_visual .scroll i{display: block; text-align: center;animation: 1.5s push infinite}
.main_visual .scroll strong{font-weight: 800; color: #fefefe; letter-spacing: -0.25px; font-size: 10px; text-align: center; display: block; margin-top: 10px; line-height: 1}
.main_visual .main_slider{ height:100%;overflow: hidden; position: relative;}
.main_visual .main_slider .slide_box .slide_bg{ opacity: 0.9; position: absolute; top: 0;left: 0; width: 245px; height: 100%}
.main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100%; position: relative; }
.main_visual .main_slider .slide_box > div{overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3;width: 100%; height: 100%;opacity:0;}
.main_visual .main_slider .slide_box > div{
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.main_visual .main_slider .slide_box .main_img img{ position: absolute;right: 0; top: 0; overflow: hidden; height: 100%;
-moz-transition: transform 8s ;
-webkit-transition: transform 8s;
-o-transition: transform 8s;
-ms-transition: transform 8s ;
transition: transform 8s ;
transform: scale(1.2);
}
.main_visual .main_slider .slide_box .main_img img{ display: block; min-width: 100%;  max-width: auto;height: 100%}
.main_visual .main_slider .slide_box .main_img img.pc{display: block}
.main_visual .main_slider .slide_box .main_img img.mo{display: none}
.main_visual .main_slider .slide_box  > div.on .main_img img{ transform: scale(1.0); transform:perspective(500px) rotate(.001deg);}
.main_visual .main_slider .slide_box .box1{background:url('/img/main/main_visual01.jpg') center center no-repeat; background-size:cover;}
/* padding-top:360px; */
.main_visual .main_slider .slide_box .in_obj{text-align: left; position: absolute; top:0%;width: 1400px;left: 50%;margin-left: -700px;z-index: 999;height: 100%}

.main_visual .main_slider .slide_box .wrap_tit > strong{ display: block; position: relative;left:30px; opacity:0;
font-weight: 500;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
-moz-transition:  opacity 1s, left 1s;
-webkit-transition: opacity 1s, left 1s;
-o-transition: opacity 1s, left 1s;
-ms-transition: opacity 1s, left 1s;
transition: opacity 1s, left 1s;
transition-delay: 0.8s;
}

.main_visual .main_slider .slide_box .wrap_t{padding-top: 495px; height: 100%; position: absolute; width: 100%}
.main_visual .main_slider .slide_box > div .wrap_tit > span{  display: block; position: relative;left:30px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
-moz-transition: opacity 1s, left 1s;
-webkit-transition: opacity 1s, left 1s;
-o-transition: opacity 1s, left 1s;
-ms-transition: opacity 1s, left 1s;
transition: opacity 1s, left 1s;
transition-delay: 0.5s;
}
.main_visual .main_slider .slide_box div span em{font-style: normal;font-weight: 600}
	.main_visual .main_slider .slide_box div p{  margin-top: 20px; display: block; position: relative;opacity:0; left:30px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;

	color: #ffffff;
	font-size: 18px;
	line-height: 34px;
	font-weight: 400;
	transition-delay: 1.5s;
}
.main_visual .main_slider .slide_box div p em{font-weight: 600;font-style: normal}
.main_visual .main_slider .slide_box div.on p
{position:relative;;opacity:1;
	left:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
	transition-delay: 1s
}
.fa.fa-search{display: none}
#bo_sch{border: none}
/*.main_visual .main_slider .slide_box div.on em{position:absolute;right:100%;display:block;width:915px;height:1000px;background:url(../img/dd.png)}*/
.main_visual .main_slider .slide_box div.on em{ /*transition-delay:0.2s */}
.main_visual .main_slider .slide_box > div.on{ z-index: 5; opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.main_visual .main_slider .slide_box > div.on em,
.main_visual .main_slider .slide_box > div.on .wrap_tit > span,
{ left:0;opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.main_visual .main_slider .slide_box > div .wrap_tit > em{color: #fff; font-size: 22px; letter-spacing: -0.25px;  font-style: normal; position: relative; left: 30px;transition: 0.8s; transition-delay: 0.3s; position: relative; margin-bottom: 20px;}
.main_visual .main_slider .slide_box > div.on .wrap_tit > em{left: 0;transition-delay: 0.3s}
.main_visual .main_slider .slide_box > div .wrap_tit > div{height: 124px; overflow: hidden}
.main_visual .main_slider .slide_box > div .wrap_tit > div.tit{height: 20px; overflow: hidden; width: 0; }
.main_visual .main_slider .slide_box > div.on .wrap_tit > div.tit{width: 800px; transition: width 1.5s ease-in-out;transition-delay: 2s}
.main_visual .main_slider .slide_box > div .wrap_tit > div.tit span{transform: translateY(0)}
.main_visual .main_slider .slide_box > div.on .wrap_tit > div.tit span{transform: translateY(0);transition: 1s}
.main_visual .main_slider .slide_box > div .wrap_tit strong{ display: block;color: #fff;font-size: 124px;line-height:1; font-weight:700;font-family: 'Play', sans-serif;transform: translateY(0)}
/*.main_visual .main_slider .slide_box > div .wrap_tit strong{ display: block;color: #fff;font-size: 124px;line-height:1; font-weight:700;font-family: 'Play', sans-serif;transform: translateY(124px)}*/
.main_visual .main_slider .slide_box > div .wrap_tit strong i{font-family: 'Play', sans-serif;color: #fff; font-weight: inherit}
.main_visual .main_slider .slide_box > div .wrap_tit strong i{transition: opacity 1.8s; opacity: 0}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i1{transition-delay: 0.9s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i3{transition-delay: 1.1s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i2{transition-delay: 1.2s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i5{transition-delay: 1.3s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i4{transition-delay: 1.5s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i6{transition-delay: 1.2s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i8{transition-delay: 1.4s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i7{transition-delay: 1s}
.main_visual .main_slider .slide_box > div .wrap_tit strong i.i9{transition-delay: 1.2s}
.main_visual .main_slider .slide_box > div.on .wrap_tit strong i{ opacity: 1}
.main_visual .main_slider .slide_box > div.on .wrap_tit strong{ transform: translateY(0); transition: 1.6s}
.main_visual .main_slider .slide_box > div .wrap_tit .txt01 strong{transition-delay: 0.3s}
.main_visual .main_slider .slide_box > div .wrap_tit .txt02 strong{transition-delay: 0.6s}
.main_visual .main_slider .slide_box > div.box1 .wrap_tit strong{ color: #f23f1c; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .main_visual .main_slider .slide_box > div strong{margin-bottom: 10px}
}
.main_visual .main_slider .slide_box > div strong em{font-style: normal; color: #ffc809}

/*.main_visual .main_slider .slide_box > div.box3 strong{text-shadow: 0 0 0 #000}*/
.main_visual .main_slider .slide_box > div .wrap_tit .tit {margin-bottom: 30px;}
.main_visual .main_slider .slide_box > div .wrap_tit .tit span { font-size:20px;letter-spacing: -0.7px;line-height:1;display: block;color: #fff;  font-weight: 300; min-width: 280px; }
.main_visual .main_slider .slide_box > div.box1 .wrap_tit .tit span {color: #222222;}
.main_visual .main_slider .slide_box > div .wrap_tit .tit span i{font-weight: 500; color: inherit}

/**/
/*.main_visual.on .main_slider .slide_box > div.box1 .wrap_tit strong{color: #fff; }*/


.main_con01{padding-top: 300px; }
.main_con01 > div{position: relative;z-index: 2}
.main_con01 .wrap{position: relative}
.main_con01 .wrap .line_wrap{opacity: 0;transition: 0.8s}
.main_con01 a:hover .wrap .line_wrap{opacity: 1}
.main_con01 .wrap .line{position: absolute; display: block;}
.main_con01 .wrap .line01{width: 100%; height: 1px; top: -20px; left: 0;background: #312c2a}
.main_con01 .wrap .line02{width: 1px; height: 100%; left: -20px; top: 0;background: #312c2a}
.main_con01 .wrap .line04{width: 1px; height: 100%; right: -20px; top: 0;background: #312c2a}
.main_con01 .wrap .line03{width: 100%; height: 1px; bottom: -20px; left: 0;background: #312c2a}


.main_con01 .wrap .line05{height: 80px;width: 2px; background: #473d3a; left: -20px; top: -20px; }
.main_con01 .wrap .line06{height: 2px;width: 80px; background: #473d3a; left: -20px; top: -20px; }

.main_con01 .wrap .line07{height: 80px;width: 2px; background: #473d3a; right: -20px; top: -20px; }
.main_con01 .wrap .line08{height: 2px;width: 80px; background: #473d3a; right: -20px; top: -20px; }

.main_con01 .wrap .line09{height: 80px;width: 2px; background: #473d3a; left: -20px; bottom: -20px; }
.main_con01 .wrap .line010{height: 2px;width: 80px; background: #473d3a; left: -20px; bottom: -20px; }
.main_con01 .wrap .line011{height: 80px;width: 2px; background: #473d3a; right: -20px; bottom: -20px; }
.main_con01 .wrap .line012{height: 2px;width: 80px; background: #473d3a; right: -20px; bottom: -20px; }



.main_con01 a:hover .wrap .line05, .main_con01 a:hover .wrap .line07, .main_con01 a:hover .wrap .line09,.main_con01 a:hover .wrap .line011{animation: m_ca03 0.5s ease-in; animation-delay: 0.8s}
@keyframes m_ca03{
    0%{height: 80px}
    60%{height: 110px}
    100%{height: 80px}
}
.main_con01 a:hover .wrap .line06, .main_con01 a:hover .wrap .line08, .main_con01 a:hover .wrap .line10, .main_con01 a:hover .wrap .line012{animation: m_ca04 0.5s ease-in; animation-delay: 0.8s}
.main_con01 .wrap .line, .main_con01 .wrap .txt{position: absolute; }
@keyframes m_ca04{
    0%{width: 80px}
    60%{width: 110px}
    100%{width: 80px}
}


/*
.main_con01 a .img{background: #fff; }
.main_con01 a:hover .img img{opacity: 0.5 }
*/
.main_con01 .wrap .txt span{display: block; color: #ffffff; font-size: 20px; font-weight: 700}
.main_con01 .wrap .txt strong{display: block; color: #ffffff; font-size: 68px; font-weight: 700; line-height: 78px; margin-bottom: 20px; }
.main_con01 .wrap .txt em{display: block; color: #ffffff; font-size: 16px; font-weight: 400; line-height: 32px; letter-spacing: -0.5px; }
.main_con01 .sec01:after{content: ''; display: block; clear: both}
.main_con01 .sec01 .left{float: left}
.main_con01 .sec01 .right{float: right; padding-right: 120px; margin-top: 400px; }
.main_con01 .sec01 .left .img{position: relative; width: 440px; height: 630px; background: url(/img/main/portfolio01.jpg) center center; transition: 0.8s;left: 0; box-shadow: 25px 25px 50px rgba(0,0,0,0.5)}
.main_con01 .sec01 .left a{display: block}
.main_con01 .sec01 .left a:hover .img{width: 668px;left: -114px; }

.main_con01 .sec01 .right .img{position: relative; width: 320px; height: 460px; background: url(/img/main/portfolio02.jpg) center center; transition: 0.8s;left: 0;box-shadow: 25px 25px 50px rgba(0,0,0,0.5)}

.main_con01 .sec01 .right a{display: block}
.main_con01 .sec01 .right a:hover .img{width: 462px;left: 71px; }
.main_con01 .sec02 {padding-left: 240px; padding-top: 160px; padding-bottom: 250px}
.main_con01 .sec02 > div{display: inline-block; }

.main_con01 .sec02 .img{position: relative; width: 560px; height: 390px; background: url(/img/main/portfolio03.jpg) center center; transition: 0.8s;left: 0;box-shadow: 25px 25px 50px rgba(0,0,0,0.5)}
.main_con01 .wrap .img:after{content: ''; display: block; width: 100%; height: 100%; background: #fff; opacity: 0.1; top: 0; left: 0; opacity: 0}
.main_con01 .wrap:hover .img:after{animation: twi 0.6s;animation-delay: 1s}
@keyframes twi{
    0%{
        opacity: 0
    }
    50%{
        opacity: 0.1
    }
    100%{opacity: 0}
}
.main_con01 .sec02 a{display: block}
.main_con01 .sec02 a:hover .img{width: 673px;left: -56.5px; }

.main_con01 .sec03:after{content: ''; display: block; clear: both}
.main_con01 .sec03 .left{float: left}
.main_con01 .sec03 .right{float: right; }

.main_con01 .sec03 .img{position: relative; width: 320px; height: 460px; background: url(/img/main/portfolio04.jpg) center center; transition: 0.8s;left: 0; box-shadow: 25px 25px 50px rgba(0,0,0,0.5)}
.main_con01 .sec03 .right .img{background: url(/img/main/portfolio05.jpg) center center; box-shadow: 25px 25px 50px rgba(0,0,0,0.5)}
.main_con01 .sec03 a{display: block}
.main_con01 .sec03 a:hover .img{width: 673px;left: -56.5px; }
.main_con01 .sec03 .left a:hover .img{width: 509px;left: -94.5px; }
.main_con01 .sec03 .right {padding-right: 240px;margin-top: 225px; }
.main_con01 .sec03 .right a:hover .img{width: 464px;left: 72px; }


.main_con01 .sec01 .left .wrap .txt{left: 360px; top: 345px; width: 250px}
.main_con01 .sec01 .right .wrap .txt{right: -193px; top: 245px; width: 230px}
.main_con01 .sec02 .wrap .txt{left: 480px; top: 180px; width: 251px}
.main_con01 .sec03 .left .wrap .txt{left: 285px; top: 215px; width: 251px}
.main_con01 .sec03 .right .wrap .txt{right: -205px; top: 215px; width: 251px}


.main_con02{padding-top: 250px; overflow: hidden;position: relative;z-index: 2;padding-bottom: 233px}
.main_con02 .tit{ padding-bottom: 105px; }
.main_con02 .tit > div:after{content: ''; display: block; clear: both}
.main_con02 .tit strong{float: left; color: #f23f1c; font-size: 70px; font-weight: 700; font-family: 'Play', sans-serif;}
.main_con02 .tit a{float: right; line-height: 46px; display: block; width: 148px; text-align: center; color: #f23f1c; font-size: 20px; border: 1px solid #e4dad7; font-family: 'Play', sans-serif;position: relative;background: #FFF; margin-top: 20px; }

.main_con02 .tit a .line{position: absolute; background: #f2491c;transition: 0.8s}
.main_con02 .tit a .line01, .main_con02 .tit a .line03, .main_con02 .tit a .line05, .main_con02 .tit a .line07{width: 2px; height: 14px; }
.main_con02 .tit a:hover .line01, .main_con02 .tit a:hover .line03, .main_con02 .tit a:hover .line05, .main_con02 .tit a:hover .line07{ height: 100%; }
.main_con02 .tit a .line02, .main_con02 .tit a .line04, .main_con02 .tit a .line06, .main_con02 .tit a  .line08{height: 2px; width: 14px; }
.main_con02 .tit a:hover .line02, .main_con02 .tit a:hover .line04, .main_con02 .tit a:hover .line06, .main_con02 .tit a:hover .line08{width: 100%}
.main_con02 .tit a .line01, .main_con02 .tit a .line02{left: -4px; top: -4px;}
.main_con02 .tit a .line03, .main_con02 .tit a .line04{right: -4px; top: -4px;}
.main_con02 .tit a .line05, .main_con02 .tit a .line06{right: -4px; bottom: -4px;}
.main_con02 .tit a .line07, .main_con02 .tit a .line08{left: -4px; bottom: -4px;}




.main_con02 .list{position: relative; right: -250px;overflow: hidden;position: relative;}
.main_con02 .list:before{content: '';display: block;width: }
.main_con02 .list .txt {padding-top: 50px}
.main_con02 .list .txt span{color: #f23f1c; font-weight: 600; display: block; font-size: 15px; margin-bottom: 20px}
.main_con02 .list .txt strong{color: #222222; font-weight: 600; display: block; font-size: 34px; margin-bottom: 10px;}
.main_con02 .list .txt p{color: #222222; font-weight: 400; display: block; font-size: 15px; line-height: 30px}
.main_con02 .list .wrap{padding-right: 20px}
.main_con02 .list .img{position: relative}
.main_con02 .list .img img{width: 100%}
.main_con02 .list .img .on_img, .main_con02 .list .img .on_plus{position: absolute; top: 0; left: 0; opacity: 0;transition: 0.8s; width: 100%}
.main_con02 .list a:hover .img .on_img, .main_con02 .list a:hover .img .on_plus{opacity: 1}



.main_con02 .list .img .line{position: absolute; background: #f23f1c;z-index: 5}
.main_con02 .list .img .line01, .main_con02 .list .img .line03, .main_con02 .list .img .line05, .main_con02 .list .img .line07{width: 1px; height: 0;transition: 1s}
.main_con02 .list .wrap:hover .img .line01, .main_con02 .list .wrap:hover .img .line03, .main_con02 .list .wrap:hover .img .line05, .main_con02 .list .wrap:hover .img .line07{width: 1px; height: 60px;}
.main_con02 .list .img .line02, .main_con02 .list .img .line04, .main_con02 .list .img .line06, .main_con02 .list .img .line08{height: 1px; width: 0;transition: 1s}
.main_con02 .list .wrap:hover .img .line02, .main_con02 .list .wrap:hover .img .line04, .main_con02 .list .wrap:hover .img .line06, .main_con02 .list .wrap:hover .img .line08{width: 60px; }


.main_con02 .list .img .line01, .main_con02 .list .img .line02{top: 6px; left: 6px}
.main_con02 .list .img .line03, .main_con02 .list .img .line04{top: 6px; right: 6px}
.main_con02 .list .img .line05, .main_con02 .list .img .line06{bottom: 6px; right: 6px}
.main_con02 .list .img .line07, .main_con02 .list .img .line08{bottom: 6px; left: 6px}
.main_con02 .list .img .line09{top: 50%; width: 1px; left: 50%; margin-left: -0.5px; width: 1px; height: 0;transition: 1s}
.main_con02 .list .img .line10{top: 50%; width: 1px; left: 50%; top: 50%; margin-top: -0.5px; margin-left: -0.5px; width: 0px; height: 1px;transition: 1s}
.main_con02 .list .wrap:hover .img .line09{height: 60px; margin-top: -30px}
.main_con02 .list .wrap:hover .img .line10{width: 60px; margin-left: -30px}





.main_con03{position: relative; z-index: 3;position: relative;}
.main_con03:after{content: '';display: block;clear: both}
.main_con03 > div{float: left}
.main_con03 .left {position: relative;z-index: 1;width: 63%;}
.main_con03 .left .slick-slide{overflow: hidden}
.main_con03 .left ul{width: 100%}
.main_con03 .left .slick-dots{position: absolute; right: -80px; bottom: 105px;width: auto}
.main_con03 .left .slick-dots li{height: 10px; margin-top: 46px; }
.main_con03 .left .slick-dots button{text-indent: -9999px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: none; opacity: 0.4}
.main_con03 .left .slick-dots .slick-active button{opacity: 1 }
.main_con03 .left ul li img{display: block}
.main_con03 .right{padding-top: 220px; width: 37%; height: 100%; top: 0; right: 0;text-align: right;padding-right: 260px; background: #f2491c;height: 960px}
.main_con03 .right .txt strong{display: block; line-height: 60px; color: #fff; font-size: 42px; line-height: 1.4; font-weight: 300; letter-spacing: -0.5px; }

.main_con04{padding-top: 263px; padding-bottom: 93px; position: relative;z-index: 3;transition: 0.6s;overflow: hidden}
.main_con04:after{content: ''; display: block; position: absolute; width: 664px; height: 664px; background: url(/img/main/contact.png); top: 115px; right: -255px; animation: 40s rot linear infinite }
@keyframes rot{
    0%{transform: rotate(0)}
    100%{transform: rotate(360deg)}
}
.main_con04.pt{padding-top: 150px;}
.main_con04 > div {position: relative}
.main_con04 > .btn{position: absolute; top: 0; left: 50%; padding-top: 470px; margin-left: 580px;z-index: 5}
.main_con04 > .btn button{text-align: center; width: 120px; height: 120px; border-radius: 50%;background: #211d1c;transition: 0.8s;position: relative; top: 0; display: block}
.main_con04 > .btn button span{font-size: 14px; font-family: 'Play', sans-serif;color: #fff;}
.main_con04 > .btn button i{display: block; margin-bottom: 7px}
.main_con04 > .btn.fix{position: fixed;padding-top: 270px}
/*.main_con04 > div > .btn.mt{padding-top: 170px}*/
.main_con04 > .btn.mt button{top: -100px}
.main_con04 .wrap:after{content: ''; display: block; clear: both}
.main_con04 .left{float: left; width: 680px; margin-bottom: 140px; position: relative;z-index: 10}
.main_con04 .left .tit strong{font-weight: 700; font-family: 'Play', sans-serif;color: #f23f1c; font-size: 142px; line-height: 1; letter-spacing: -4.5px; }
.main_con04 .left .info{padding-top: 90px; margin-bottom: 60px; }
.main_con04 .left .info:after{content: ''; display: block; clear: both; }
.main_con04 .left .info > *{float: left}
.main_con04 .left .info strong{line-height: 34px; color: #222222; font-size: 30px; font-family: 'Play', sans-serif;font-weight: 700;display: block; padding-right: 160px; }
.main_con04 .left .info p{line-height: 36px; font-size: 18px;font-weight: 400; color: #222222; letter-spacing: -0.6px; padding-top: 32px}
.main_con04 .left ul li{margin-bottom: 33px;}
.main_con04 .left ul li:last-child{margin-bottom: 0}
.main_con04 .left ul li input{height: 55px; width: 100%; border: none}
.main_con04 .left ul li:after{content: ''; display: block; clear: both}
.main_con04 .left ul li > div{float: left; width: 320px; border-bottom: 1px solid #c3bab8;position: relative}
.main_con04 .left ul li > div .line{width: 0%; height: 1px; position: absolute; bottom: 0; background: #f23f1c; left: 0; transition: 0.8s}
.main_con04 .left ul li > div.write1{width: 100%; }
.main_con04 .left ul li > div.write_last{margin-left: 40px; }

.main_con04 .left ul li input[type="text"]{color: #81776f; font-size: 17px; letter-spacing: -0.5px; font-weight: 400;transition: 0.6s;padding-left: 11px;background: none; width: 100%}
.main_con04 .left ul li input[type="text"]:focus {color: #f23f1c}
.main_con04 .left ul li input[type="text"]:focus::placeholder {color: #f23f1c}
.main_con04 .left ul li input[type="text"]:focus + .line{ width: 100%; }

.main_con04 .left ul li .file {position: relative}
.main_con04 .left ul li .file:after{content: ''; display: block; clear: both}
.main_con04 .left ul li .file input{position: absolute; top: 0; left: 0; opacity: 0}
.main_con04 .left ul li .file span{line-height: 55px; float: left;color: #81776f;font-size: 17px;letter-spacing: -0.5px;font-weight: 400;transition: 0.6s;padding-left: 11px}
.main_con04 .left ul li .file button{float: right; width: 106px; height: 31px; box-sizing: border-box; color: #f23f1c;font-size: 15px; text-align: center; border: 1px solid #f23f1c; background: #fff; font-family: 'Noto Sans KR', sans-serif;margin-top: 10px}
.main_con04 .left .btm:after{content: ''; display: block; clear: both}
.main_con04 .left .btm {padding-top: 65px}
.main_con04 .left .btm .per {position: relative; float: left}
.main_con04 .left .btm .per input[type="checkbox"] {
/* opacity: .0;*/
  position: absolute;
  width: 22px;height: 100%;opacity: 0
}

.main_con04 .left .btm .per label {line-height: 48px; color: #888888; letter-spacing: -0.5px; font-size: 16px; }
.main_con04 .left .btm .per label a{text-decoration: underline; color: #7f625a; }
.main_con04 .left .btm .per input[type="checkbox"] + label:before {
    content: ' ';
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-top: 17px;
    vertical-align: top;
    margin-right: 10px;
/*    margin: 17px 8px 0 15px;*/
    background: url(/img/main/check.png) no-repeat 50% 50%;
}
.main_con04 .left .btm .per input[type="checkbox"]:checked + label:before {
    content: '';
    color: #314ca2;
    background: url(/img/main/check_on.png) no-repeat 50% 50%;
}
.main_con04 .left .btm .btn_wrap{float: right;position: relative}
.main_con04 .left .btm .btn_wrap .line{position: absolute; background: #f2491c;transition: 0.8s}
.main_con04 .left .btm .btn_wrap .line01, .main_con04 .left .btm .btn_wrap .line03, .main_con04 .left .btm .btn_wrap .line05, .main_con04 .left .btm .btn_wrap .line07{width: 2px; height: 14px; }
.main_con04 .left .btm .btn_wrap:hover .line01, .main_con04 .left .btm .btn_wrap:hover .line03, .main_con04 .left .btm .btn_wrap:hover .line05, .main_con04 .left .btm .btn_wrap:hover .line07{ height: 100%; }
.main_con04 .left .btm .btn_wrap .line02, .main_con04 .left .btm .btn_wrap .line04, .main_con04 .left .btm .btn_wrap .line06, .main_con04 .left .btm .btn_wrap .line08{height: 2px; width: 14px; }
.main_con04 .left .btm .btn_wrap:hover .line02, .main_con04 .left .btm .btn_wrap:hover .line04, .main_con04 .left .btm .btn_wrap:hover .line06, .main_con04 .left .btm .btn_wrap:hover .line08{width: 100%}
.main_con04 .left .btm .btn_wrap .line01, .main_con04 .left .btm .btn_wrap .line02{left: -4px; top: -4px;}
.main_con04 .left .btm .btn_wrap .line03, .main_con04 .left .btm .btn_wrap .line04{right: -4px; top: -4px;}
.main_con04 .left .btm .btn_wrap .line05, .main_con04 .left .btm .btn_wrap .line06{right: -4px; bottom: -4px;}
.main_con04 .left .btm .btn_wrap .line07, .main_con04 .left .btm .btn_wrap .line08{left: -4px; bottom: -4px;}
.main_con04 .left .btm .btn_wrap input{display: block; width: 148px; height: 48px; background: #211d1c; font-size: 20px; color: #fff; border: none; font-family: 'Play', sans-serif;font-weight: 700}
.main_con04 .btm_btn a{width: 288px; line-height: 26px; display: block; text-align: center; font-size: 14px; color: #998b88; font-family: 'Play', sans-serif; font-weight: 700; position: relative}
.main_con04 .btm_btn a span{font-family: 'Play', sans-serif; color: #f23f1c}
.main_con04 .btm_btn a .line{position: absolute; background: #ccc2bf; }
.main_con04 .btm_btn a .line01,.main_con04 .btm_btn a .line03{width: 2px; height: 7px; }
.main_con04 .btm_btn a .line02,.main_con04 .btm_btn a .line04{height: 2px; width: 7px; }
.main_con04 .btm_btn a .line01, .main_con04 .btm_btn a .line02{left: 0; top: 0}
.main_con04 .btm_btn a .line03, .main_con04 .btm_btn a .line04{right: 0; bottom: 0}

#main .map_pop{position: fixed; bottom: 0;overflow: hidden; width: 100%; height: 0;transition: 0.6s;z-index: 99;}
#main .map_pop .root_daum_roughmap{width: 100%}
#main .map_pop .root_daum_roughmap .wrap_map{height: 520px;width: 100%}
#main .map_pop > div{position: relative;width: 100%}
#main .map_pop button{position: absolute; right: 0; top: 0;z-index: 99}
#main .map_pop.on{height: 520px;}
/*#header .btm_btn{display: none}*/

/* 효과 */
.main_con01 .wrap {transform: translateY(50px); opacity: 0; transition: 1s}
.main_con01 .wrap.on {transform: translateY(0); opacity: 1;}

.main_con01 .wrap .txt span{transform: translateX(20px);transition: 0.8s; opacity: 0;transition-delay: 0.6s}
.main_con01 .wrap.on .txt span{transform: translateX(0); opacity: 1}
.main_con01 .wrap .txt strong{transform: translateX(20px);transition: 0.8s; opacity: 0;transition-delay: 0.9s}
.main_con01 .wrap.on .txt strong{transform: translateX(0); opacity: 1}
.main_con01 .wrap .txt em{transform: translateX(20px);transition: 0.8s; opacity: 0;transition-delay: 1.2s}
.main_con01 .wrap.on .txt em{transform: translateX(0); opacity: 1}
.main_con02 .tit{transform: translateY(50px); opacity: 0; transition: 1s}
.main_con02.on .tit{transform: translateY(0); opacity: 1;}
.main_con02 .list{transform: translateY(50px); opacity: 0; transition: 1s;transition-delay: 0.3s}
.main_con02.on .list{transform: translateY(0); opacity: 1;}

.main_con03 .right .scroll_w{padding-top: 290px;transform: translateY(30px);transition: 1s; transition-delay: 1.6s;opacity: 0}
.main_con03.on .right .scroll_w{transform: translateY(0);opacity: 1;opacity: 1}
.main_con03 .right .scroll_w strong{color: #ffffff; font-size: 17px; line-height: 28px; font-weight: 400; letter-spacing: -0.5; display: block; margin-bottom: 70px}
.main_con03 .right .txt .line{height: 60px; overflow: hidden}
.main_con03 .right .txt .line strong{transform: translateY(60px);transition: 1.4s}
.main_con03 .right .txt .line02 strong{transition-delay: 0.6s}
.main_con03 .right .txt .line03 strong{transition-delay: 1.2s}
.main_con03.on .right .txt strong{transform: translateY(0);}
.main_con03 .right .scroll{float: right}
.main_con03 .right .scroll_w i{height: 55px; width: 1px; margin: 0 auto; display: block; background: #fff; animation: 1.5s scroll infinite}
@keyframes scroll{
    0%{height: 0}
    100%{height: 55px}
}
.main_con03 .right .scroll_w img{display: block; margin-top: -7px}


/*서브*/
#sub.view{padding-top: 272px; padding-bottom: 360px}
#sub.view .tit{position: fixed;z-index: 5}
#sub.view .tit span{display: block; font-size: 20px; font-weight: 600; color: #e44121; line-height: 1; margin-bottom: 59px; }
#sub.view .tit strong{display: block; font-size: 68px; font-weight: 600; color: #222222; margin-bottom: 30px; line-height: 1}
#sub.view .tit p{line-height: 29px; color: #222222; font-size: 16px; letter-spacing: -0.5px; margin-bottom: 40px;}
#sub.view .tit a{display: block; line-height: 46px; color: #f23f1c; font-size: 20px; font-family: 'Play', sans-serif; font-weight: 700;text-align: center; width: 158px; box-sizing: border-box; border: 1px solid #e4dad7}

#sub.view .tit a{position: relative}
#sub.view .tit a .line{position: absolute; background: #f2491c;transition: 0.8s}
#sub.view .tit a .line01, #sub.view .tit a .line03, #sub.view .tit a .line05, #sub.view .tit a .line07{width: 2px; height: 14px; }
#sub.view .tit a:hover .line01, #sub.view .tit a:hover .line03, #sub.view .tit a:hover .line05, #sub.view .tit a:hover .line07{ height: 100%; }
#sub.view .tit a .line02, #sub.view .tit a .line04, #sub.view .tit a .line06, #sub.view .tit a .line08{height: 2px; width: 14px; }
#sub.view .tit a:hover .line02, #sub.view .tit a:hover .line04, #sub.view .tit a:hover .line06, #sub.view .tit a:hover .line08{width: 100%}
#sub.view .tit a .line01, #sub.view .tit a .line02{left: -4px; top: -4px;}
#sub.view .tit a .line03, #sub.view .tit a .line04{right: -4px; top: -4px;}
#sub.view .tit a .line05, #sub.view .tit a .line06{right: -4px; bottom: -4px;}
#sub.view .tit a .line07, #sub.view .tit a .line08{left: -4px; bottom: -4px;}


#sub.view .edit_area{padding-left: 360px; }
#sub.view .edit_area img{max-width: 100%}
#sub.list{padding-top: 270px; padding-bottom: 270px; }
#sub.list .grid-item{
    width: 33%;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0;padding: 0 20px;
    margin-bottom: 40px;


}
#sub.list .grid-item img{max-width: 100%; display: block}
#sub.list .tit{padding-left: 20px; margin-bottom: 70px; }
#sub.list .tit strong{display: block; font-family: 'Play', sans-serif; font-weight: 700; color: #f23f1c; font-size: 70px; }
#sub.list .grid-item .img_box{position: relative}
#sub.list .grid-item .img_box .line{position: absolute; background: #f23f1c;z-index: 5}
#sub.list .grid-item .img_box .line01, #sub.list .grid-item .img_box .line03, #sub.list .grid-item .img_box .line05, #sub.list .grid-item .img_box .line07{width: 1px; height: 0;}
#sub.list .grid-item .img_box:hover .line01, #sub.list .grid-item .img_box:hover .line03, #sub.list .grid-item .img_box:hover .line05, #sub.list .grid-item .img_box:hover .line07{width: 1px; height: 60px;transition: 1s}
#sub.list .grid-item .img_box .line02, #sub.list .grid-item .img_box .line04, #sub.list .grid-item .img_box .line06, #sub.list .grid-item .img_box .line08{height: 1px; width: 0;}
#sub.list .grid-item .img_box:hover .line02, #sub.list .grid-item .img_box:hover .line04, #sub.list .grid-item .img_box:hover .line06, #sub.list .grid-item .img_box:hover .line08{width: 60px; transition: 1s}


#sub.list .grid-item .img_box .line01, #sub.list .grid-item .img_box .line02{top: 6px; left: 6px}
#sub.list .grid-item .img_box .line03, #sub.list .grid-item .img_box .line04{top: 6px; right: 6px}
#sub.list .grid-item .img_box .line05, #sub.list .grid-item .img_box .line06{bottom: 6px; right: 6px}
#sub.list .grid-item .img_box .line07, #sub.list .grid-item .img_box .line08{bottom: 6px; left: 6px}

#sub.list .grid-item .img_box .text_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0;background: rgba(0,0,0,0.9); opacity: 0; transition: 0.6s}
#sub.list .grid-item .img_box:hover .text_box{opacity: 1}
#sub.list .grid-item .img_box .txt_in{position: absolute; width: 100%; bottom: 40px; left: 55px; }
#sub.list .grid-item .img_box .txt_in span{color: #f23f1c; display: block;font-size: 15px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; margin-bottom: 40px; }
#sub.list .grid-item .img_box .txt_in strong{color: #ffffff; display: block;font-size: 34px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; margin-bottom: 15px; }
#sub.list .grid-item .img_box .txt_in p{color: #ffffff; display: block;font-size: 15px;letter-spacing: -0.5px; line-height: 31px}
#sub.list .btn-w a{display: block; line-height: 66px; width: 218px; box-sizing: border-box; border:1px solid #e4dad7; margin: 0 auto; text-align: center; color: #f2491c; font-size: 22px; font-family: 'Play', sans-serif;font-weight: 700; position: relative}
#sub.list .btn-w a .line{position: absolute; background: #e4dad7}
#sub.list .btn-w a .line01, #sub.list .btn-w a .line03, #sub.list .btn-w a .line05, #sub.list .btn-w a .line07{width: 4px; height: 18px; }
#sub.list .btn-w a:hover .line01, #sub.list .btn-w a:hover .line03, #sub.list .btn-w a:hover .line05, #sub.list .btn-w a:hover .line07{animation: s_ca01 0.5s ease-in}
.sub_shape{position: absolute; top: 195px; right: 80px; opacity: 0; transform: translateY(50px);transition: opacity 1.5s, transform 1.5s}
.sub_shape.on{position: absolute; top: 195px; right: 80px; opacity: 1; transform: translateY(0)}


@keyframes s_ca01{
    0%{height: 18px}
    70%{height: 25px}
    100%{height: 18px}
}
@keyframes s_ca02{
    0%{width: 18px}
    70%{width: 25px}
    100%{width: 18px}
}
#sub.list .btn-w a .line02, #sub.list .btn-w a .line04, #sub.list .btn-w a .line06, #sub.list .btn-w a .line08{height: 4px; width: 18px; }
#sub.list .btn-w a:hover .line02, #sub.list .btn-w a:hover .line04, #sub.list .btn-w a:hover .line06, #sub.list .btn-w a:hover .line08{animation: s_ca02 0.5s ease-in }
#sub.list .btn-w a .line01, #sub.list .btn-w a .line02{top: -9px; left: -9px; }
#sub.list .btn-w a .line03, #sub.list .btn-w a .line04{top: -9px; right: -9px; }
#sub.list .btn-w a .line05, #sub.list .btn-w a .line06{bottom: -9px; right: -9px; }
#sub.list .btn-w a .line07, #sub.list .btn-w a .line08{bottom: -9px; left: -9px; }


#sub.list .tit{transform: translateY(40px); opacity: 0;transition: 1s}
#sub.list.on .tit{transform: translateY(0); opacity: 1}
#sub.list .gallary_list{transform: translateY(40px); opacity: 0;transition: 1s; transition-delay: 0.4s}
#sub.list.on .gallary_list{transform: translateY(0); opacity: 1}


#sub.view .tit span{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s}
#sub.view.on .tit span{transform: translateY(0); opacity: 1}
#sub.view .tit strong{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.3s}
#sub.view.on .tit strong{transform: translateY(0); opacity: 1}
#sub.view .tit p{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.6s}
#sub.view.on .tit p{transform: translateY(0); opacity: 1}
#sub.view .tit a{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.9s}
#sub.view.on .tit a{transform: translateY(0); opacity: 1}
#sub.view .edit_area{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 1.2s}
#sub.view.on .edit_area{transform: translateY(0); opacity: 1}


.main_con04 .left .tit{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s}
.main_con04.on .left .tit{transform: translateY(0); opacity: 1}
.main_con04 .left .info{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.3s}
.main_con04.on .left .info{transform: translateY(0); opacity: 1}
.main_con04 .left .form_area{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.6s}
.main_con04.on .left .form_area{transform: translateY(0); opacity: 1}

.pop .wrap .txt_area .tit span{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s}
.pop.act .wrap .txt_area .tit span{transform: translateY(0); opacity: 1}
.pop .wrap .txt_area .tit strong{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.3s}
.pop.act .wrap .txt_area .tit strong{transform: translateY(0); opacity: 1}
.pop .wrap .txt_area .tit p{transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.6s}
.pop.act .wrap .txt_area .tit p{transform: translateY(0); opacity: 1}
 .pop .pag  {transform: translateY(40px); opacity: 0;transition: transform 1s, opacity 1s;transition-delay: 0.9s}
 .pop.act .pag  {transform: translateY(0); opacity: 1}
.pop .slide_area{transform: translateY(40px); opacity: 0;transition: transform 1.3s, opacity 1.3s;transition-delay: 1.2s}
.pop.act .slide_area{transform: translateY(0); opacity: 1}

#header{width: 100%}
#header .btm_btn{position: fixed;right: 50%;margin-right: -700px;top: 60px;z-index: 99999}
#header .btm_btn a{width: 202px; line-height: 26px; display: block; text-align: center; font-size: 14px; color: #f1f1f1; font-family: 'Play', sans-serif; font-weight: 700; position: relative}
/*#header .btm_btn{position: fixed; right: 20px; top: 38px;z-index: 999; display: block}*/
#header .btm_btn a span{font-family: 'Play', sans-serif; color: #f23f1c}
#header .btm_btn a .line{position: absolute; background: #ccc2bf; }
#header .btm_btn a .line01,#header .btm_btn a .line03{width: 2px; height: 7px; }
#header .btm_btn a .line02,#header .btm_btn a .line04{height: 2px; width: 7px; }
#header .btm_btn a .line01, #header .btm_btn a .line02{left: 0; top: 0}
#header .btm_btn a .line03, #header .btm_btn a .line04{right: 0; bottom:0}
#header .btm_btn a em{font-family: inherit;font-weight: inherit;color: #998b88}
#header.on .btm_btn a{color: #6b544d}
@media (max-width: 1616px){
    .main_con01{overflow: hidden;padding-bottom: 40px}
    .deco_line{left: -165px}
    .main_visual{height: 750px; }
    .main_visual .main_slider .slide_box .wrap_t{padding-top: 310px}
    #main .bg{width: 900px; background-size: 100% auto !important; height: 300px; }
    .main_con01 .sec01 .right .wrap .txt{right: 60px; bottom: -90px}
}
@media (max-width: 1416px){
    .main_con03{padding-right: 400px; }
    .main_con03 .right{padding-right: 20px; width: 400px; }
    .inner{width: 100%;padding: 0 20px;padding-left: 70px }
    .main_visual .main_slider .slide_box .in_obj{width: 100%; left: 0; margin-left: 0; padding: 0 20px; }
    .main_con02 .list img{max-width: 100%}
    .main_con04 > .btn{margin-left: 0; left: auto; right: 20px}
    .main_con02 .list .wrap{padding-right: 20px; }
    #sub.list .grid-item{padding: 0 5px; margin-bottom: 10px}
    #header .btm_btn{right: 20px;margin-right: 0;top: 30px;}
    #header .btm_btn a{font-size: 12px;width: 178px;}


}
@media (max-width: 1240px){
    .main_con01 .sec01 .left a:hover .img{width: 440px;left: 0; }
    .main_con01 .sec01 .right a:hover .img{width: 320px;left: 0 }
    .main_con01 .sec02 a:hover .img{width: 560px;left: 0; }
    .main_con01 .sec03 .left a:hover .img{width: 320px;left: 0; }
    .main_con01 .sec03 .right a:hover .img{width: 320px;left: 0; }
    .main_con01 .wrap .txt span{font-size: 17px; }
    .main_con01 .wrap .txt strong{font-size: 55px; line-height: 65px; }
    .main_con01 .wrap .txt em{font-size: 15px}
    .main_con01 .sec03 .right{padding-right: 181px}
    .main_con01 .sec01 .right{padding-right: 40px}
    .main_con01 .sec02{padding-left: 100px}
    #sub.list .grid-item .img_box .txt_in p{display: none}
    #sub.list .grid-item .img_box .txt_in{left: 30px; }
    .pop .wrap .txt_area{position: static}
    .pop{overflow-y: scroll}
    .pop .wrap .txt_area{width: 100%}
    .pop .slide_area{left: 0;padding-right: 0;padding-bottom: 30px}
    .pop .slide_area .slick-slide img{max-width: 80%; display: block; margin: 0 auto;  }
    .pop .wrap .txt_area{padding-left: 0;padding-top: 50px; text-align: center;padding-bottom: 50px; height: auto}
    .pop .pag{margin-top: 40px; }
}
@media (max-width: 1100px){
    .main_con01 .sec01 .left .img{width: 360px; height: 515px; background-size: auto 100%}
    .main_con01 .sec01 .left a:hover .img{width: 360px;left: 0; }
    .main_con01 .sec01 .left .wrap .txt{left: 293px; top: 285px}
    .main_con01 .sec01 .right a:hover .img{width: 320px;left: 0 }
    .main_con01 .sec02 a:hover .img{width: 560px;left: 0; }
    .main_con01 .sec03 .left a:hover .img{width: 320px;left: 0; }
    .main_con01 .sec03 .right a:hover .img{width: 320px;left: 0; }
    .main_con01 .sec01 .right{margin-top: 200px}
    .main_con01 .sec03 .right .wrap .txt{top: 362px; left: 60px}
    .main_con01 .sec03 .left .wrap .txt{top: 362px; left: 40px}
    .main_con01{padding-bottom: 87px}
    .main_con01 .sec03 .right{padding-right: 40px; }
    .main_con01 .sec01 .right .wrap .txt{top: 290px; }
    .main_con01 .sec02{padding-bottom: 130px}
    .main_con02{padding-top: 100px; }
    .main_con02 .list{right: 0;padding-left: 70px; }
    .main_con01 .sec01 .left .wrap .txt{left: 40px; top: 414px}
    .main_con01 .sec02 .wrap .txt{left: 40px}

}
@media (max-width: 960px){
    .main_con03 .left{width: 100%}
    .main_con03 .right{position: static; width: 100%;height: auto}
    .main_con03{padding-right: 0}
    .main_con03 .right{padding-top: 30px;padding-left: 0; text-align: center;padding-bottom: 40px; padding-right: 0}
    .main_con03 .left ul li img{max-width: 100%}
    #sub.list .grid-item .img_box:hover .text_box{display: none}
    .main_con03 .right .scroll_w{padding-top: 30px; }
    .main_con03 .right .scroll{float: none; width: 13px; margin: 0 auto; height: 30px}
    @keyframes scroll{
    0%{height: 0}
    100%{height: 30px}
}

}
@media (max-width: 900px){
    #main .bg02{top: 550px; }
    .main_visual .btn{left: auto; right: 20px}
    .main_visual .main_slider .slide_box > div .wrap_tit > div.tit{height: 14px; }
    .main_visual .main_slider .slide_box > div .wrap_tit .tit span{font-size: 14px; transform: translateY(14px)}
    .main_visual .main_slider .slide_box > div .wrap_tit strong{font-size: 60px; line-height: 60px; transform: translateY(0)}
    .main_visual .main_slider .slide_box > div .wrap_tit > div{height: 60px; }
    .main_visual{height: 550px; }
    .main_con04 .left .tit strong{font-size: 60px; letter-spacing: 0}
    .main_con04 .left .info{padding-top: 40px; }
    .main_con04 .left .info strong{font-size: 18px; line-height: 22px; }
    .main_con04 .left .info p{font-size: 14px; line-height: 28px; padding-top: 13px; }
    .main_con04:after{width: 300px; height: 300px; background-size: 100% 100%; right: -70px}
    .main_con04{padding-top: 100px; }
    .main_con04.pt{padding-top: 50px; }
    .main_con04 > .btn{padding-top: 100px}
    .main_con04 > .btn button i{margin-bottom: 2px; }
    .main_con04 > .btn button i img{width: 11px; }

    .main_con04 > .btn button{font-size: 9px}
    .main_con04 > .btn button{width: 70px; height: 70px; }
    .main_con04 .left{margin: 0 auto; float: none; max-width: 100%}
    .main_con04 .left ul li > div.write_last{margin-left: 2%}
    .main_con04 .left ul li input[type="text"]{width: 49%}
    .main_con04 .left ul li > div{width: 49%}
    .main_con04 .left ul li input[type="text"]{height: 40px}
    .main_con04 .left ul li input[type="text"]::placeholder, .main_con04 .left ul li input[type="text"]{font-size: 13px; }
    .main_con04 .left ul li .file span{line-height: 44px; font-size: 13px; }
    .main_con04 .left ul li .file button{font-size: 13px; height: 25px; width: 90px; }
    .main_con04 .left .info{padding-top: 30px;margin-bottom: 40px; }
    .main_con04 .left ul li{margin-bottom: 15px; }
    .main_con04 > .btn{z-index: 15}
    .main_con04 .left .btm .btn_wrap input{font-size: 13px; width: 100px; height: 30px}
    .main_con04 .left .btm .per label{font-size: 13px; }
    .main_con04 .left .btm .per input[type="checkbox"] + label:before{transform: scale(0.8) !important}
    .main_con04 .left .btm .per input[type="checkbox"] + label:before{margin-top: 16px;margin-right: 4px}
    .main_con04 .left .btm .btn_wrap{margin-top: 7px; }
    .main_con04 .left .btm{padding-top: 22px}
    .main_con04 .btm_btn {padding-top: 40px;}
    .deco_line ul li{font-size: 12px}
    .deco_line ul li i{margin-top: 4px; }
    .deco_line ul li{width: 90px; }
    .deco_line{bottom: 179px}
    .deco_line ul li i:after{width: 60px; }
    .deco_line ul:before{left: 329px}
    .deco_line ul li:nth-child(1):before{right: 60px}
    .main_con02 .list{padding-left: 45px; }
    .inner{padding-left: 45px; }
    .main_con02 .tit strong{font-size: 30px}
    .main_con02 .tit a{font-size: 13px; line-height: 30px; width: 90px; margin-top: 0}
    .main_con02 .tit{padding-bottom: 30px; }
    .main_con02 .list {right: 0}
    .main_con02 .list .wrap img{width: 100%}
    .main_con02 .list .txt span{font-size: 12px; margin-bottom: 10px; }
    .main_con02 .list .txt strong{font-size: 20px; margin-bottom: 5px}
    .main_con02{padding-top: 60px;padding-bottom: 60px; }
    .main_con03 .right .txt strong{font-size: 25px; line-height: 40px; }
    .main_con03 .right .txt .line{height: 40px;}
    .main_con04 .left .tit strong{font-size: 40px; }
    #sub.list .grid-item{width: 50%}
    #sub.list .tit strong{font-size: 40px; }
    #sub.list .tit{margin-bottom: 40px; padding-left: 5px}
    #sub.view .tit{position: static;text-align: center}
    #sub.view .tit a{margin: 0 auto; }
    #sub.view .edit_area{padding-top: 60px;padding-left: 0}
    #sub.view{padding-top: 200px}
    #sub.view .tit span{font-size: 14px; }
    #sub.view .tit strong{font-size: 36px; margin-bottom: 10px; }
    #sub.view .tit p{font-size: 13px; line-height: 28px; }
    #sub.view .tit span{margin-bottom: 30px; }
    #sub.view .tit a{font-size: 13px; line-height: 40px; width: 120px; }
    .main_con01{padding-top: 50px; }
    #main .map_pop.on{height: 300px; }
    #main .map_pop .root_daum_roughmap .wrap_map{height: 300px}
    .main_con03 .right .scroll_w strong{margin-bottom: 30px}

}
@media (max-width: 860px){
    .main_con01 .sec01 .left .img{width: 280px; height: 400px; background-size: auto 100%}
    .main_con01 .sec01 .left a:hover .img{width: 280px;left: 0; }
    .main_con01 .sec01 .right .img{width: 280px; height: 400px; background-size: auto 100%}
    .main_con01 .sec01 .right a:hover .img{width: 280px;left: 0 }
    .main_con01 .sec02 a:hover .img{width: 325px;left: 0; }
    .main_con01 .sec03 .left a .img{width: 280px; height: 400px}
    .main_con01 .sec03 .left a:hover .img{width: 280px;left: 0; }
    .main_con01 .sec03 .right a .img{width: 280px; height: 400px}
    .main_con01 .sec03 .right a:hover .img{width: 280px;left: 0; }

    .main_con01 .sec02 .img{width: 325px; height: 226px; background-size: auto 100%}


    .main_con01 .sec01 .left .wrap .txt, .main_con01 .sec01 .right .wrap .txt, .main_con01 .sec03 .left .wrap .txt, .main_con01 .sec03 .right .wrap .txt{left: 20px; top: 330px;}
    .main_con01 .wrap .txt span{font-size: 12px; margin-bottom: 5px; text-shadow: 3px 3px 6px rgba(0,0,0,0.2)}
    .main_con01 .wrap .txt strong{font-size: 35px; line-height: 1;text-shadow: 3px 3px 6px rgba(0,0,0,0.2)}
    .main_con01 .wrap .txt em{font-size: 13px; line-height: 26px; }
    .main_con01 .sec02 .wrap .txt{left: 20px; top: 155px}
    .main_con01 .wrap .txt strong br{display: none}
    .main_con01 .sec02{padding-left: 40px; }
    .main_con01 .sec01 .right{margin-top: 60px;}
    .main_con01 .sec02{padding-top: 97px;padding-bottom: 100px}
    .main_con01 .sec03 .right{margin-top: 60px; }
    .main_con02 .list{padding-right: 20px}
    .main_con02 .list .wrap{padding-right: 0}
    .main_con02 .list .txt p{font-size: 12.5px; line-height: 26px}
    .main_con02 .list .txt{padding-top: 20px; }
    #sub.list{padding-top: 200px; }
    #main .bg{width: 400px; height: 133px; right: -80px}
    .main_visual .btn{top: 170px;}
    .main_visual .btn button{width: 45px; height: 45px; background-size: 100% 100% !important}
    .main_visual .btn button i.line02, .main_visual .btn button i.line04, .main_visual .btn button i.line06, .main_visual .btn button i.line08{width: 3px; }
    .main_visual .btn button i.line01, .main_visual .btn button i.line03, .main_visual .btn button i.line05, .main_visual .btn button i.line07{height: 3px; }
    .main_visual .btn{margin-left: 0}
    .main_visual .btn button i.line02, .main_visual .btn button i.line04{top: 3px; }
    .main_visual .btn button i.line06, .main_visual .btn button i.line08{bottom: 3px; }
    .main_visual .btn button.slick-next{top: 42px;margin-left: -6px}
    #sub.list{padding-bottom: 100px}
    #sub.list .btn-w {margin-top: 20px}
    #sub.list .btn-w a{width: 140px; line-height: 40px; font-size: 15px; transform: scale(0.8)}
    .main_con04 .btm_btn a{font-size: 12px; }
    .main_con04 > .btn button span{display: none}
    .main_con04 > .btn button i{margin-bottom: 0}
    .main_con04 > .btn button{width: 40px; height: 40px; }
    .main_con04 > .btn.mt button{top: -50px}
    .main_con04 .left .info strong{padding-right: 70px}
    .main_con03 .right .scroll_w strong{font-size: 13px; line-height: 28px; }
    #sub.view{padding-bottom: 150px; padding-top: 120px; }
    .pop .wrap .txt_area{position: absolute; top: auto; bottom: 0; }
    .pop .slide_area .slick-slide img{width: 300px; }
    .pop .slide_area{padding-top: 50px; }
    .pop .wrap .txt_area .tit span{font-size: 13px; }
    .pop .wrap .txt_area .tit strong{font-size: 32px; margin-bottom: 10px; }
    .pop .wrap .txt_area .tit p{font-size: 13px; line-height: 26px; }
    .pop .pag ul li{font-size: 20px; }
    .pop .pag span{font-size: 12px; padding-top: 8px; margin-bottom: 10px; }
    .pop .pag i{width: 10px; background-size: 100% auto; height: 17px; margin: 0 5px; margin-top: 7px; }
    .pop .pag{margin-top: 20px; }
    .pop .wrap .txt_area{padding-top: 20px;padding-bottom: 20px; }
    .pop .wrap > button{right: 20px; top: 20px; }
    .pop .wrap > button img{width: 23px}
/*    .pop .slide_area{opacity: 1;min-height: 255px}*/
    .pop.on .slide_area{opacity: 1}
    #sub.list .btn-w a .line02, #sub.list .btn-w a .line04, #sub.list .btn-w a .line06, #sub.list .btn-w a .line08{height: 2px}
    #sub.list .btn-w a .line01, #sub.list .btn-w a .line03, #sub.list .btn-w a .line05, #sub.list .btn-w a .line07{width: 2px; }
/*
    #sub.list .btn-w a .line02, #sub.list .btn-w a .line04, #sub.list .btn-w a .line06, #sub.list .btn-w a .line08{height: 2px}
    #sub.list .btn-w a .line01, #sub.list .btn-w a .line03, #sub.list .btn-w a .line05, #sub.list .btn-w a .line07{width: 2px}
*/
    .main_con04 .btm_btn a{ width: 250px; }
}
@media (max-width: 750px){
    .main_con01 .sec01 .right, .main_con01 .sec03 .right{margin-top: 100px}
    .main_con01 .sec02{padding-left: 0}
    .main_con01 .sec01 .right{padding-right: 0}
    .main_con01 .sec01 .left .img{width: 225px; height: 322px; background-size: auto 100%}
    .main_con01 .sec01 .left a:hover .img{width: 225px;left: 0; }
    .main_con01 .sec01 .right .img{width: 225px; height: 322px; background-size: auto 100%}
    .main_con01 .sec01 .right a:hover .img{width: 225px;left: 0 }
    .main_con01 .sec02 a:hover .img{width: 225px;left: 0; }
    .main_con01 .sec03 .left a .img{width: 225px; height: 322px}
    .main_con01 .sec03 .left a:hover .img{width: 225px;left: 0; }
    .main_con01 .sec03 .right a .img{width: 225px; height: 322px}
    .main_con01 .sec03 .right a:hover .img{width: 225px;left: 0; }

    .main_con01 .sec02 .img{width: 325px; height: 226px; background-size: auto 100%}


    .main_con01 .sec01 .left .wrap .txt, .main_con01 .sec01 .right .wrap .txt, .main_con01 .sec03 .left .wrap .txt, .main_con01 .sec03 .right .wrap .txt{left: 20px; top: 330px;}
    .main_con01 .sec01 .left .wrap .txt, .main_con01 .sec01 .right .wrap .txt, .main_con01 .sec03 .left .wrap .txt, .main_con01 .sec03 .right .wrap .txt{top: 251px; left: 15px}
    .main_con01 .sec03 .right{padding-right: 0}
    .pop .wrap .txt_area{padding-top: 40px; }
    .pop .slide_area .slick-slide img{max-width: 200px}
    .main_con04 .btm_btn{display: none}
    .main_con04{padding-bottom: 150px}
    .main_con04:after{width: 220px; height: 220px; }

    .main_visual .main_slider .slide_box > div .wrap_tit > div.tit{width: 100%;opacity: 0}
    .main_visual .main_slider .slide_box > div.on .wrap_tit > div.tit{width: 100%;height: auto;overflow: visible;transition: opacity 1.5s ease-in-out;transition-delay: 2s;opacity: 1}
    .main_visual .main_slider .slide_box > div .wrap_tit .tit span{line-height: 1.6;padding-left: 7px;word-break: keep-all;padding-right: 20px}
    .main_visual .main_slider .slide_box > div .wrap_tit .tit span{min-width: 0}

/*
    .main_con01 .wrap{transform: translateY(30px) scale(0.7)}
    .main_con01 .wrap .line_wrap{opacity: 1}
    .main_con01 .wrap.on{    transform: translateY(0) scale(0.7);}
*/
/*
    .main_con01 .sec01 .right, .main_con01 .sec03 .right{margin-top: -30px}
    .main_con01 .sec03 .right{padding-right: 0}
    .main_con01 .sec02{padding-top: 0;padding-bottom: 0; margin-top: -30px; display: none}
    .main_con01 .sec03{ margin-top: -30px}
    .main_con01{padding-bottom: 20px}
*/


    #footer .contact{ width: 100px; height: 100px; }
    #footer .contact a .circle strong{ font-size: 12px; line-height: 16px; }
}

@media (max-width: 580px){
    #footer ul li a{ line-height: 16px; }
    #footer ul{ text-align: right; padding-right: 20px; }
    #footer .contact{ bottom: 48px; right: -24px;  }
    .main_con04{ padding-bottom: 120px; }
    .main_con04 .left .btm .per{ float: none; }
    .main_con04 .left .btm .btn_wrap{ float: none; display: inline-block;  }
    .main_visual{height: 450px;}
    .main_visual .main_slider .slide_box .wrap_t{padding-top: 215px}
    .main_visual .btn{top: 112px;}
    #main .bg02{top: 450px}
}