@charset "utf-8";

/*공통 스타일*/
#container {width:90%; margin:0 auto; }

.cfixed:after {display:block; content:""; clear:both;} /*float 속성으로인해 발생하는 문제방지용*/
#container:after {display:block; content:""; clear:both;} /*float 속성으로인해 발생하는 문제방지용*/

.blind {position:absolute; width:0; height:0; line-height:0; text-indent:-9999px; overflow:hidden;} /*해당 요소를 숨길때 사용목적*/

.sec_title {font-size:42px;color: #333; font-weight: normal;} /*섹션별 제목 문자 디자인*/

.divider {width:90%; max-width:1200px; height:2px; margin:0 auto; margin-top:77px; margin-bottom:50px; background:#ccc;}

.m-divider {width:50px; height:3px; margin:0 auto; margin-top:77px; margin-bottom:50px; background:#000;}



/*웹표준 PC버전*/

/*메인 페이지-------------------------------*/
.header_top {width: 100%; height: 50px; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); position: absolute; top: 0; animation: gradient 7s ease infinite; background-size: 400% 400%;}
@keyframes gradient {0% {background-position: 0% 50%;} 
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.header_top .header_txt {display: flex; position: absolute; margin-top: 15px;  width: 110px; left: 50%; margin-left: -40px; }
.header_top .header_txt img { width: 22px; height: 22px; margin-right: 10px; } 
.header_top .header_txt h1 {font-size: 13px; color: #fff; line-height: 25px; }

		/*슬라이드 이미지 영역*/
	#slidervisual {width:100%;  position: relative; top: 50px;}
	#slidervisual .s2 {display: none;}
	#slidervisual img {display:block; width:100%; max-width:100%; height:auto; position: relative;  overflow: hidden;}
	#slidervisual .img_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 180px ; }
	#slidervisual .img_txt h1{  text-align: center; font-size: 65px; color: #fff; margin-bottom: 30px; letter-spacing: -3.5px;   font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
	#slidervisual .img_txt p{ text-align: center; font-size: 16px; color: #fff; line-height: 30px; margin-bottom: 20px;}
	#slidervisual .img_txt .btn {text-align: center;  font-weight: 300;}
	#slidervisual .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#slidervisual .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }


	/*헤더 영역*/
    #header_wrap {background:#fff; width: 100%; }
	
	#header {position:absolute; width:90%; max-width:1200px; padding:5px 5%; height:70px; z-index:1000; margin:0 auto;  }
	#header .logo {position:absolute; left:40px; top:80px; width:160px; height:50px; }
	#header .logo a {width:100%; height: 100%; display:block;
        background:url(../img/s-images/logo_pc1.png); 	background-repeat:no-repeat; background-size:cover;}
		#header .logo a:hover {width:100%; height: 100%; display:block;
			background:url(../img/s-images/logo_pc01.png); 	background-repeat:no-repeat; background-size:cover;}
	
	
	#header .gnb {display:block; position:absolute; width: 430px; left: 53%;  top:90px; overflow:hidden;}
	#header .gnb li {float:left; margin-left:25px;}
	#header .gnb li a {color:#fff;  font-size:18px; font-weight:700; line-height:30px; padding:10px 10px;}
	#header .gnb li a:hover {color:#201c1c;  }

	#header .nav_icon .gnb_icon { display: flex; position:absolute; width: 200px; top:90px; overflow:hidden;  left: 115%; }
	#header .nav_icon .gnb_icon li  {margin-right: 30px; }
	
	#header .menu-toggle-btn {display:none !important; float:left; width:30px; margin-top:5px; cursor:pointer; z-index: 10000; top: 70px; position: relative;} 
	#header .menu-toggle-btn span {display:block; width:100%; height:2px; background:#ffffff;}
	#header .menu-toggle-btn span:nth-child(2) {margin:7px 0;}



		

	

	/*메인_콘텐츠영역*/
	#contents {width:100%;}
	
	/*디스플레이*/
	
	#display {margin-top:100px; text-align:left; overflow:hidden;}
	#display .sec_title {margin-bottom: 20px;}
	#display .disc {width:100%; padding-left:0px; position:relative; font-size:1.4em; color:#666; line-height:1.6em; text-align: justify; padding-top: 20px; letter-spacing: -0.5px;}
	#display .disc:before {display:block; position:absolute; top:0px; left:0; width:100%; height:3px; background:#ccc; content:"";}
	
	
	
	
	/*work*/
	#work {margin-top:20px; padding-top:30px;  margin-bottom: 100px;}
	#work .sec_title {width:90%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #work .work_wrap {width:90%; margin:0 auto; max-width:1600px;}
    #work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden}
	#work .work_wrap .work-list li {width:24%; margin:0.5%; } 
	#work .work_wrap .work-list li a {display:block; position:relative; width:100%; height:100%;}
	#work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#work .work_wrap .work-list li a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}
	#work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; } /*한줄, 가변이미지*/
	#work .work_wrap .work-list li a:hover img {filter: brightness(85%);} 
	
	#work .work_wrap .work-list li .info {position:absolute; bottom:100px;left: 40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#work .work_wrap .work-list li a:hover .info {transform:translateY(-30px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#work .work_wrap .work-list li .info h3 {margin-bottom:8px; font-size:50px; color:#fff; font-weight:bold; margin-bottom: 10px; text-shadow: 2px 2px 7px #444;} 
	#work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center;}
	#work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }
	


	/*스크롤 이미지*/
	#scroll_image { width: 80%; margin: 0 auto; margin-bottom: 200px;}
	#scroll_image .sc_img01 { width: 96%; margin: 0 auto;  position: relative; margin-bottom: 40px;}
	#scroll_image .sc_img01 img { width:100%;}
	#scroll_image .sc_img01 .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top:50%; text-align: center;  opacity: 0; transition: 0.6s;} 
	#scroll_image .sc_img01:hover .sc_txt{opacity: 1;}
	#scroll_image .sc_img01 .sc_txt h1 {font-size: 50px; font-weight: bold; margin-bottom: 20px; color: #fff;}
	#scroll_image .sc_img01 .sc_txt p { font-size: 15px; font-weight: 300; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	#scroll_image .sc_img01 .sc_txt .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#scroll_image .sc_img01:hover .sc_txt .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.4s; }
	#scroll_image .sc_img01 .sc_txt .btn button:hover {   transform: scale(1.2); transition: 0.6s;}

	.scroll_image {	overflow:hidden;	}

	.sc_img01{
	
		padding-top:100px;
		transform-origin: center center 0px; 
		/*transform: matrix(1, 0, 0, 1, 0, 0);*/
		
		  -webkit-transition: all 0.7s ease;
		  -moz-transition: all 0.77s ease;
		  -o-transition: all 0.7s ease;
		  transition: all 0.7s ease;
	}
	.sc_img01:hover {
		/*transform: matrix(1.3, 0, 0, 1.3, 0, 0);*/
		-webkit-transform: scale(1.3,1.3);
		-moz-transform: scale(1.3,1.3);
		-o-transform: scale(1.3,1.3);
		transform: scale(1.3,1.3);
	}

	

	/*slick*/
	#slick_wrap { width:100% ; margin: 0 auto; }
	#slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

	#slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 100px; z-index: 1000; }
	#slick_wrap .slick_slide .responsive .s_info {width: 250px; left: 50%; margin-left: -170px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-180px); opacity:1; }


	#slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 30px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: left;}
	
	#slick_wrap .slick_slide .responsive div a .s_info h2 { font-size: 30px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: left; line-height: 35px;  width: 250px;}
	#slick_wrap .slick_slide .responsive div a .s_info p { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: left; opacity: 0;  width: 250px; line-height: 20px;} 
	#slick_wrap .slick_slide .responsive a:hover .s_info p { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: left; opacity: 1; transition: 0.7s; width: 250px; line-height: 20px;}

	#slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 50%; margin-left: -160px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#slick_wrap .slick_slide .responsive div img { width: 100%; border-radius:10px; overflow: hidden;  filter: brightness(80%);} 
	
	#slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
	#slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}
	
	/*이미지를 부모요소에 꽉차게*/
	#slick_wrap .slick_slide .responsive div img:hover { filter: brightness(40%); transition: 0.4s;}
	#slick_wrap .slick_slide .responsive .s_txt {background: #e9e9e9; font-size: 40px; color: #000; font-weight: bold; width: 450px; height: 300px; border: 2px solid #fff; position: relative; border-radius: 10px; overflow: hidden;}
	#slick_wrap .slick_slide .responsive .s_txt p { margin-top: 150px; margin-left: 60px;}

	/*블로그*/
	#blog {margin-top:0px; background:#b6d3db; padding-top:90px; padding-bottom:90px;}
	#blog .sec_title {float:left; width:25.45%; margin-bottom:0; text-align:left;} /* 288px x 1200px에서 대략 치수 */
	#blog .blog-list {float:right; width:74.55%; margin-top:0; overflow:hidden; margin-bottom: 20px; display: flex; flex-wrap:wrap;} /* 844px x 1200px에서 대략 치수 */
	#blog .blog-list li { width:31%; margin-right:3.5%; margin-top:0;}
	#blog .blog-list li:first-child {margin-top:0;}
	#blog .blog-list li:last-child {margin-right:0;}
	#blog .blog-list li img {display:block; width:100%; max-width:100%; height:auto;} /*한줄, 가변이미지*/
	#blog .blog-list li time {display:block; margin:11px 0; font-size:11px; color:#999;}
	#blog .blog-list li h3 {color:#444; font-weight:normal; font-size:14px; line-height:1.6;}
	
	
	
	/*연락처 Contact*/
	#contact {width:90%; max-width:1400px; display:flex; flex-wrap:wrap; margin:0 auto 50px auto; background: #fff; padding-top: 50px; padding-bottom: 50px;}
	#contact .sec_title {width:25%; margin-bottom:47px; text-align:left;  }
	#contact .form_box {width:75%; margin-top:0; display:flex; flex-wrap:wrap;}
	#contact .form_box .personal  {width:48%;margin-right:2.8%;}
	#contact .form_box .text {width:48%;}
	
	#contact .form_box .personal input {padding:13px; margin-bottom:38px; border:none; border-bottom:1px solid #666; box-sizing:border-box;}
	#contact .form_box .text textarea {height:203px; padding:13px; border:none; border-bottom:1px solid #666; box-sizing:border-box;}
	#contact .form_box .send_btn {text-align:right;} /*오른쪽 정렬*/
	#contact .form_box .send_btn button {padding:13px; margin-top:30px; border:0; font-size:12px; color:#fff; background:#000; cursor:pointer;}
	#contact .form_box .send_btn button:hover {background:#fff; }
	
	/*메인 contact에 폼 안에 문자 색상*/

	::-moz-input-placeholder, ::-moz-textarea-placeholder{
		color:#000;
	}
		
	::-webkit-input-placeholder, ::-webkit-textarea-placeholder{
	color:#000;
	}   


	#membership {width: 100%; margin-top: 200px; }
	#membership .m_img{position: relative; height: auto;}
	#membership .m_img img {width:100%;  }
	#membership .m_img .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 300px ; text-align: center; }
	#membership .m_img .sc_txt h1 {font-size: 75px; font-family: "Archivo Black", sans-serif; font-weight: bold; font-style: normal; margin-bottom: 40px; color: #fff; }
	#membership .m_img .sc_txt p {font-size: 30px; font-weight: 500; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	#membership .m_img .sc_txt .btn button {width: 200px;  border-radius: 50px; background :#fff; height:50px;  font-size: 20px; font-weight: bold; line-height: 30px; text-align: center; border: none; color: #111;}
	#membership .m_img .sc_txt .btn button:hover {transform: scale(1.1); transition: 0.6s;}
	
	
	/*푸터영역*/
	#footer {width:100%;  margin:0 auto; background: #000; padding-bottom: 20px;}
	#footer .f_li{width: 90%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto;}
	#footer .f_li li img {width: 13%; margin-bottom: 10px;} 
	#footer .f_li li {width: 250px; margin: 20px; text-align: center; margin-top: 100px; }
	#footer .f_li li h1 { font-size:25px ; color: #fff; font-weight: bold; margin-bottom: 25px; line-height: 30px; }
	#footer .f_li li p { font-size: 15px; color: #fff; line-height: 20px;  width: 250px; text-align: justify; margin-bottom: 20px;}
	#footer .f_li li .btn {text-align: center;}
	#footer .f_li li .btn button{ width: 100px; height: 40px; color: #fff; border: 3px solid #fff; background-color: rgba(0,0,0,0); font-size: 14px; border-radius: 40px;} 
	#footer .f_li li .btn button:hover {width: 100px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;}


	#footer .f_li li .btn_ul{ width: 250px;}
	#footer .f_li li .btn_ul .btn_li1{ display: flex; justify-content: space-between; margin-top: -60px; }


	#footer .f_menu {width:80%; margin:0 auto 50px auto; padding-top: 20px; display:flex; flex-wrap:wrap; justify-content: space-between;}
	#footer .f_menu li {position: relative; padding-left:2%; padding-right:2%; text-align:center;}
	#footer .f_menu li:after {content:''; position: absolute; right:0; top:4px; display: block; width:1px; height:12px; background: #ccc;}
	#footer .f_menu li:last-child:after { content:none; }
	#footer .f_menu li a {display:block; font-size:12px; line-height: 20px; color:#ccc; }
	#footer .f_menu li a:hover {text-decoration: underline;}
	#footer p {margin:10px 0; text-align:center; color:#ccc;}





/*sub01 페이지 PC버전--------------------------------------------------------*/

	#visual_sub01 {display:block; width:100%; max-width:100%; height:800px; background:url(../img/s-images/sub01_visual.jpg) ; background-position:center top; background-size:cover; background-repeat:no-repeat; }
	
	#contents_subarea01 {width:100%; max-width:1600px; min-height:1000px; margin:100px auto 50px auto;}


	#visual_sub01 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 250px ; }
	#visual_sub01 .img_txt h1{  text-align: center; font-size: 65px; color: #fff; margin-bottom: 30px; letter-spacing: -3.5px;   font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;;}
	#visual_sub01 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 20px; margin-top: 10px; text-align: center; }
	#visual_sub01 .img_txt .btn {text-align: center;  font-weight: 300;}
	#visual_sub01 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#visual_sub01 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }

	/*sub01_work-1*/
	#sub01_work {margin-top:20px; padding-top:40px;  margin-bottom: 100px;}
	#sub01_work .sec_title {width:90%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub01_work .work_wrap {width:90%; margin:0 auto; max-width:1600px;}
    #sub01_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden}
	#sub01_work .work_wrap .work-list li {width:24%; margin:0.5%; } 
	#sub01_work .work_wrap .work-list li a {display:block; position:relative; width:100%; height:100%;}
	#sub01_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub01_work .work_wrap .work-list li a:hover:before { border: 2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}
	#sub01_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; } /*한줄, 가변이미지*/
	#sub01_work .work_wrap .work-list li a:hover img {filter: brightness(90%);}
	
	#sub01_work .work_wrap .work-list li .info {position:absolute; width:200px;  bottom:80px; left: 50%; margin-left: -100px; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#sub01_work .work_wrap .work-list li a:hover .info {transform:translateY(-50px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub01_work .work_wrap .work-list li .info h4 {margin-bottom:8px; font-size:30px; color:#fff; font-weight:bold; margin-bottom: 10px; text-shadow: 2px 2px 7px #444;} 
	


	/*sub1_work*/
	#sub01_work1 {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;   }
	#sub01_work1 .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub01_work1 .work_wrap {width:100%; margin:0 auto; max-width:1600px;}
    #sub01_work1 .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub01_work1 .work_wrap .work-list li {width:24%; margin:0.5%;  margin-bottom: 30px;} 
	#sub01_work1 .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub01_work1 .work_wrap .work-list li h1 {font-size: 20px; margin-top: 20px; margin-bottom: 10px;}
	#sub01_work1 .work_wrap .work-list li p {font-size: 17px;}

	#sub01_work1 .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub01_work1 .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub01_work1 .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; }  /*한줄, 가변이미지*/
	#sub01_work1 .work_wrap .work-list li a:hover img {filter: brightness(90%); transform: scale(1.1); transition: 0.6s; overflow: hidden;}
	
	#sub01_work1 .work_wrap .work-list li .info {position:absolute; bottom:10%; left: 35%; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#sub01_work1 .work_wrap .work-list li a:hover .info {transform:translateY(-30px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub01_work1 .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
	#sub01_work1 .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub01_work1 .work_wrap .work-list li .info .btn button:hover {transform: scale(1.2); transition: 0.6s;}
	#sub01_work1 .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }


    .shop_btn { text-align: center; margin-top: 30px;}
	.shop_btn button {font-size: 20px; font-weight: bold; color: #fff; background: #201c1c; width: 350px; height: 50px; border-radius: 50px;}
	.shop_btn button:hover {transform: scale(1.1); transition: 0.6s; }

	




/*sub02 페이지 PC버전---------------------------------------------------------*/


	/*sub02 비주얼*/
	#visual_sub02 {display:block; width:100%; max-width:100%; height:800px; background:url(../img/s-images/sub02_visual.jpg); background-position:center top; background-size:cover; background-repeat:no-repeat;}
	#visual_sub02 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#fff; font-weight:900; text-align:left; padding-top:180px; 
        text-shadow:0 0 0px #000;}
	

	#visual_sub02 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 50px ; }
	#visual_sub02 .img_txt h1{  text-align: center; margin-bottom: 30px; }
	#visual_sub02 .img_txt h1 img {width: 80%; margin-bottom: 10px;}
	#visual_sub02 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; }
	#visual_sub02 .img_txt .btn {text-align: center;  font-weight: 300;}
	#visual_sub02 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#visual_sub02 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }

		/*sub02 슬릭*/

	#sub02_slick_wrap { width:100% ; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; }
	#sub02_slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#sub02_slick_wrap  .slick_slide h1 {font-size: 25px; margin-left: 30px;}
	#sub02_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#sub02_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

	#sub02_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#sub02_slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#sub02_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 100px; z-index: 1000; }
	#sub02_slick_wrap .slick_slide .responsive .s_info {width: 250px; left: 50%; margin-left: -170px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#sub02_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-110px); opacity:1; }

	
	#sub02_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: left; line-height: 35px;  width: 250px;}

	#sub02_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 50%; margin-left: -160px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub02_slick_wrap .slick_slide .responsive div .card { width: 96%; height: 400px; margin: 1%; border-radius:10px; overflow: hidden; } 
	
	#sub02_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
	#sub02_slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}
	
	/*이미지를 부모요소에 꽉차게*/
	#sub02_slick_wrap .slick_slide .responsive div img:hover { filter: brightness(40%); transition: 0.4s;}
	#sub02_slick_wrap .slick_slide .responsive .s_txt {background: #e9e9e9; font-size: 40px; color: #000; font-weight: bold; width: 450px; height: 300px; border: 2px solid #fff; position: relative; border-radius: 10px; overflow: hidden;}
	#sub02_slick_wrap .slick_slide .responsive .s_txt p { margin-top: 150px; margin-left: 60px;}
	


	
	#contents_subarea02 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto; background:#ccc;}


	/*sub02_contents1*/
	 .sub02_con1 { width: 100%; margin: 0 auto;  width: 1000px; margin-top: 100px; margin-bottom: 100px; }
	 .sub02_con1 h1 {text-align: center; font-size: 30px ; font-weight: 600 ; line-height: 40px; margin-bottom: 30px; }
	 .sub02_con1 p {text-align:center; font-size: 20px; line-height: 30px;} 

	/*sub02_work*/
	#sub02_work {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;   }
	#sub02_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub02_work .work_wrap {width:100%; margin:0 auto; max-width:1600px;}
    #sub02_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub02_work .work_wrap .work-list li {width:48%; margin:0.5%;  margin-bottom: 30px;} 
	#sub02_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub02_work .work_wrap .work-list li h3 {font-size: 25px; margin-top: 20px; margin-bottom: 30px; color: #fff; }
	#sub02_work .work_wrap .work-list li p {font-size: 17px;}

	#sub02_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub02_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub02_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(45%);}  /*한줄, 가변이미지*/
	#sub02_work .work_wrap .work-list li a:hover img {filter: brightness(90%); transform: scale(1.1); transition: 0.6s; overflow: hidden;}
	
	#sub02_work .work_wrap .work-list li .info {position:absolute; bottom:10%; left: 34%; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#sub02_work .work_wrap .work-list li a:hover .info {transform:translateY(-110px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub02_work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
	#sub02_work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub02_work .work_wrap .work-list li .info .btn button:hover {transform: scale(1.2); transition: 0.6s;}
	#sub02_work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }

	#scroll_image .sc_img01 .sc_txt h1 img {width: 45%; bottom: 30px;} 



/*sub03 페이지 PC버전----------------------------------------------------------*/
	#visual_sub03 {display:block; width:100%; max-width:100%; height: 800px; background-position:center top; background-size:cover; background-repeat:no-repeat;  margin-bottom: 100px;}
	#visual_sub03 video {width: 100%; height: 800px;  object-fit: cover; margin-bottom: 100px;}
	#visual_sub03 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#000; font-weight:900; text-align:left; padding-top:180px; text-shadow:0 0 0px #000;}

	
	#visual_sub03 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 150px ; }
	#visual_sub03 .img_txt h1{  text-align: center; margin-bottom: 30px;  color: #fff; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
	#visual_sub03 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; }
	#visual_sub03 .img_txt .btn {text-align: center;  font-weight: 300;}
	#visual_sub03 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#visual_sub03 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }	
	

	#sub03_slick_wrap { width:100% ; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; }
	#sub03_slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#sub03_slick_wrap  .slick_slide h1 {font-size: 25px; margin-left: 30px;}
	#sub03_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#sub03_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

	#sub03_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#sub03_slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#sub03_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 100px; z-index: 1000; }
	#sub03_slick_wrap .slick_slide .responsive .s_info {width: 250px; left: 50%; margin-left: -170px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#sub03_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-110px); opacity:1; }

	
	#sub03_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: left; line-height: 35px;  width: 250px;}

	#sub03_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 50%; margin-left: -160px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub03_slick_wrap .slick_slide .responsive div .card { width: 96%; height: 400px; margin: 1%; border-radius:10px; overflow: hidden; } 
	
	#sub03_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
	#sub03_slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}
	
	/*이미지를 부모요소에 꽉차게*/
	#sub03_slick_wrap .slick_slide .responsive div img:hover { filter: brightness(40%); transition: 0.4s;}
	#sub03_slick_wrap .slick_slide .responsive .s_txt {background: #e9e9e9; font-size: 40px; color: #000; font-weight: bold; width: 450px; height: 300px; border: 2px solid #fff; position: relative; border-radius: 10px; overflow: hidden;}
	#sub03_slick_wrap .slick_slide .responsive .s_txt p { margin-top: 150px; margin-left: 60px;}
	


	.sub03_con1 {width: 100%; margin: 0 auto;  margin-top: 30px;}
	.sub03_con1 .con1_bg {width: 100%; height: 1000px; background: #CDDC20;  } 
	.sub03_con1 .con1_bg h1 {width: 1000px; padding-top: 210px; font-family: "IBM Plex Sans KR", sans-serif; font-weight: bold; font-style: normal; line-height: 60px; font-size: 39px; text-align: center; margin: 0 auto;  margin-top: 150px; color: #333; }  
	/*sub03_work*/
	#sub03_work {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;  margin-top: -430px;  margin-bottom: 150px; }
	#sub03_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub03_work .work_wrap {width:100%; margin:0 auto; max-width:1600px; margin-top: 100px;}
    #sub03_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub03_work .work_wrap .work-list li {width:48%; margin:0.5%;  margin-bottom: 30px;} 
	#sub03_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub03_work .work_wrap .work-list li h3 {font-size: 50px; margin-top: 20px; margin-bottom: 30px; color: #fff; font-weight: bold; }
	#sub03_work .work_wrap .work-list li p {font-size: 17px;}

	#sub03_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub03_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub03_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(80%);}  /*한줄, 가변이미지*/
	#sub03_work .work_wrap .work-list li a:hover img {filter: brightness(100%); transform: scale(1.2); transition: 0.6s; overflow: hidden;}
	#sub03_work .work_wrap .work-list li h1 {font-size: 35px; margin-top: 35px; font-weight: bold; }
	#sub03_work .work_wrap .work-list li p {font-size: 25px; margin-top: 20px; font-weight: 400;}
	
	#sub03_work .work_wrap .work-list li .info {position:absolute; bottom:20%; left: 50%; z-index:20; opacity:1; transition:all 0.6s; text-align: center; margin-left: -100px; width: 200px;}
 	#sub03_work .work_wrap .work-list li a:hover .info {transform:translateY(-110px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub03_work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
	#sub03_work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub03_work .work_wrap .work-list li .info .btn button:hover {transform: scale(1.1); transition: 0.6s;}
	#sub03_work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }



	#contents_subarea03 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto; background:#ccc;}
	
	



/*sub04 페이지 PC버전----------------------------------------------------------*/	
	#visual_sub04 {display:block; width:100%; max-width:100%; height: 800px; background-position:center top; background-size:cover; background-repeat:no-repeat;  margin-bottom: 100px;}
	#visual_sub04 video {width: 100%; height: 800px;  object-fit: cover; margin-bottom: 100px;}
	#visual_sub04 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#000; font-weight:900; text-align:left; padding-top:180px; text-shadow:0 0 0px #000;}

	
	#visual_sub04 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 150px ; }
	#visual_sub04 .img_txt h1{  text-align: center; margin-bottom: 30px;  color: #fff; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
	#visual_sub04 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; }	

	#contents_subarea04 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto; background:#ccc;}	



	/*sub04_slick*/

	#sub04_slick_wrap { width:100% ; margin: 0 auto; ;} 
	#sub04_slick_wrap .work_txt{width: 1000px; font-size: 30px; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal; margin: 0 auto; text-align: center; line-height: 50px;} 
	#sub04_slick_wrap .slick_slide { width: 90%; margin: 0 auto;  margin-top: 100px; margin-bottom: 200px}
	#sub04_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#sub04_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 
	#sub04_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#sub04_slick_wrap .slick_slide .responsive div a:hover:before { border:3px solid #333; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#sub04_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 100px; z-index: 1000; }
	#sub04_slick_wrap .slick_slide .responsive .s_info {width: 280px; left: 25%; margin-left: -170px; position:absolute; top: 230px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#sub04_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-170px); opacity:1; }


	#sub04_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 25px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; line-height: 30px; }
	#sub04_slick_wrap .slick_slide .responsive div a .s_info p { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; opacity: 0;  width: 280px; line-height: 20px;} 
	#sub04_slick_wrap .slick_slide .responsive a:hover .s_info p { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; opacity: 1; transition: 0.7s; width: 280px; line-height: 20px;}

	#sub04_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 6%; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 4px solid #333;  color: #333; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub04_slick_wrap .slick_slide .responsive div img { width: 100%; border-radius:10px; overflow: hidden;} 
	
	#sub04_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#333; height:40px; color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 


	/*sub04_work*/
	#sub04_work {margin-top:20px; padding-top:0px;  width: 100%; margin: 0 auto;  margin-top: 130px;  margin-bottom: 150px; }
	#sub04_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub04_work .work_wrap {width:80%; margin:0 auto; max-width:1600px; margin-top: 100px;}
    #sub04_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub04_work .work_wrap .work-list li {width:31%; margin:1%;  margin-bottom: 30px; } 
	#sub04_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub04_work .work_wrap .work-list li h3 {font-size: 50px; margin-top: 20px; margin-bottom: 30px; color: #fff; font-weight: bold; ;}
	#sub04_work .work_wrap .work-list li p {font-size: 17px;}

	#sub04_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub04_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub04_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(80%);}  /*한줄, 가변이미지*/
	#sub04_work .work_wrap .work-list li a:hover img {filter: brightness(100%); transform: scale(1.2); transition: 0.6s; overflow: hidden;}
	
	#sub04_work .work_wrap .work-list li .info {position:absolute; bottom:38%; left: 50%; z-index:20; opacity:1; transition:all 0.6s; text-align: center; margin-left: -150px; width: 300px; text-shadow: 2px 2px 7px #333;}
 	#sub04_work .work_wrap .work-list li a:hover .info {transform:translateY(-50px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	

	 #sub04_membership {width: 100%; margin-top: 200px; }
	 #sub04_membership .m_img{position: relative; height: auto;}
	 #sub04_membership .m_img img {width:100%;  }
	 #sub04_membership .m_img .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 300px ; text-align: center; }
	 #sub04_membership .m_img .sc_txt h1 {font-size: 75px; font-family: "Archivo Black", sans-serif; font-weight: bold; font-style: normal; margin-bottom: 40px; color: #fff; }
	 #sub04_membership .m_img .sc_txt p {font-size: 30px; font-weight: 500; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	 #sub04_membership .m_img .sc_txt .btn button {width: 200px;  border-radius: 50px; background :#fff; height:50px;  font-size: 20px; font-weight: bold; line-height: 30px; text-align: center; border: none; color: #111;}
	 #sub04_membership .m_img .sc_txt .btn button:hover {transform: scale(1.1); transition: 0.6s;}





 
 
 
/* 미디어쿼리 태블릿 + 모바일 ----------------------------------*/


/*tablet CSS*/
@media all and (max-width:1200px) {
	
	
/*메인페이지 태블릿 버전----------*/

	/*헤더영역*/
	#header {position:absolute; width:90%; max-width:1200px; padding:5px 5%; height:70px; z-index:1000; margin:0 auto;  }
    #header .logo {position:absolute; left:50%; margin-left: -80px; top:80px; width:160px; height:50px;}
    #header .logo a { width:100%; height: 100%; display:block;
		background:url(../img/s-images/logo_pc1.png); }
		#header .logo a:hover {width:100%; height: 100%; display:block;
			background:url(../img/s-images/logo_pc01.png); 	background-repeat:no-repeat; background-size:cover;}
	
	
	#header .gnb {display:none; position:absolute; width: 100%; left: 0;  overflow:hidden; z-index: 9000; top: 50px;}
	#header .gnb li {float:none; margin-left:0px; border-bottom:1px solid #fff;}
	#header .gnb li a {display:block; background:rgba(0,0,0,1.0); width:100%; padding:10px 10%; color:#fff; font-size:16px; font-weight:700;}
	#header .gnb li a:hover {background: #fff; color:#000; }

	#header .nav_icon .gnb_icon { float: right; width: 180px; left: 80%; top:90px; overflow:hidden; }
	#header .nav_icon .gnb_icon li  {margin-right: 25px; }
	#header .nav_icon .gnb_icon li img {width: 90%;}

	#header .menu-toggle-btn {display:block !important; float:left; width:30px; margin-top:5px; cursor:pointer; z-index: 10000; top: 70px; position: relative;} 
	#header .menu-toggle-btn span {display:block; width:100%; height:2px; background:#ffffff;}
	#header .menu-toggle-btn span:nth-child(2) {margin:7px 0;}


	
	
	
	
	/*슬라이드*/
	#slidervisual .img_txt {top: 200px ; }
	#slidervisual .img_txt h1{font-size: 55px; color: #fff; margin-bottom: 20px;  }
	#slidervisual .img_txt p{font-size: 14px; color: #fff; line-height: 23px; margin-bottom: 20px;}
	#slidervisual .s1 {display: none;}
	#slidervisual .s2 {display: block;}
	

	
	/*디스플레이*/
	#display {margin-top:100px; text-align:center;}
	#display .sec_title {float:none; }
	#display .disc {float:none;  padding-left:0px; font-size:1.2em; padding-bottom:30px;}
	#display .disc:before {display:none; }
	
	
	/*프로모션*/
	#promotion {margin-top:70px;}
	#promotion .promo_list li{width:45%; margin:0 2.5% 50px 2.5%;}
	
	
	/*work*/
	#work {margin-top:70px;}
	#work .work_wrap .sec_title {margin-bottom:65px; text-align:center;}
	#work .work_wrap .work-list li {width:45%; margin:2.5%;}
	#work .work_wrap .work-list li .info {left:40px;}
	
	/*스크롤이미지*/

	#scroll_image .sc_img01 .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top:50%; text-align: center;  opacity: 0; transition: 0.6s;} 
	#scroll_image .sc_img01:hover .sc_txt{opacity: 1;}
	#scroll_image .sc_img01 .sc_txt h1 {font-size: 40px; font-weight: bold; margin-bottom: 20px; color: #fff;}
	#scroll_image .sc_img01 .sc_txt p { font-size: 15px; font-weight: 300; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	#scroll_image .sc_img01 .sc_txt .btn button{ width: 80px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:30px; border: 3px solid #fff;  color: #fff; font-size: 10px; font-weight: bold; line-height: 20px; }
	#scroll_image .sc_img01:hover .sc_txt .btn button{ width: 80px;  border-radius: 30px; background-color:#fff; height:30px; border: 3px solid #fff;  color: #000; font-size: 10px; font-weight: bold; line-height: 20px; transition: 0.4s; }
	#scroll_image .sc_img01 .sc_txt .btn button:hover {   transform: scale(1.2); transition: 0.6s;}

	
	/*slick*/
	#slick_wrap { width:95% ; margin: 0 auto; }
	#slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 
	
	#slick_wrap .slick_slide .responsive .s_info {width: 150px; left: 50%; margin-left: -90px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-35px); opacity:1; }


	#slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px;  margin-bottom: 10px; text-align: left;}
	
	#slick_wrap .slick_slide .responsive div a .s_info h2 { font-size: 18px; text-align: left; line-height: 30px; }
	#slick_wrap .slick_slide .responsive div a .s_info p { font-size: 12px;  margin-bottom: 10px; text-align: left; opacity: 0;  width: 170px; line-height: 20px;} 
	#slick_wrap .slick_slide .responsive a:hover .s_info p { font-size: 12px;  margin-bottom: 10px;  width: 170px; line-height: 20px;}

	#slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 50%; margin-left: -90px; z-index:20; width: 80px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:30px; border: 3px solid #fff;  color: #fff; font-size: 10px; font-weight: bold; line-height: 20px; }
	#slick_wrap .slick_slide .responsive div img { width: 100%; border-radius:10px; overflow: hidden;  filter: brightness(80%);} 
	
	#slick_wrap .slick_slide .responsive div a:hover button {width: 80px;  border-radius: 30px; background-color:#fff; height:30px; border: 3px solid #fff;  color: #000; font-size: 10px; font-weight: bold; line-height: 20px; transition: 0.5s;} 
	
	

	
	
	/*블로그*/
	#blog {margin-top:124px;}
	#blog .sec_title {float:none; width:100%; margin-bottom:76px; text-align:center;}
	#blog .blog-list {float:none; width:100%;}
	#blog .blog-list li {float:left; width:31%; margin-right:3.5%; margin-top:0;}
	#blog .blog-list li:last-child {margin-right:0;}
	
	
	/*연락처*/
	#contact {margin-top:100px;}
	#contact .sec_title {float:none; width:100%; margin-bottom:50px; text-align:center;}
	#contact .form_box {float:none; width:100%; }
	#contact .form_box .text textarea {height:202px;}
	#contact .form_box .send_btn {clear:both;} 
	
	
	
	#membership {width: 100%; margin-top: 200px; }
	#membership .m_img{position: relative; height: auto;}
	#membership .m_img img {width:100%;  }
	#membership .m_img .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 200px ; text-align: center; }
	#membership .m_img .sc_txt h1 {font-size: 40px; font-weight: bold; margin-bottom: 40px; color: #fff;}
	#membership .m_img .sc_txt p {font-size: 15px; font-weight: 500; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	#membership .m_img .sc_txt .btn button {width: 200px;  border-radius: 50px; background :#fff; height:50px;  font-size: 20px; font-weight: bold; line-height: 30px; text-align: center; border: none; color: #111;}
	#membership .m_img .sc_txt .btn button:hover {transform: scale(1.1); transition: 0.6s;}

	
	/*푸터영역*/
	#footer iframe {height:432px;}/*구글지도*/

	#footer {width:100%;  margin:0 auto; background: #000; padding-bottom: 20px;}
	#footer .f_li{width: 90%; flex-wrap: wrap; text-align: left; }
	#footer .f_li li img {width: 5%; margin-bottom: 10px; text-align: left;} 
	#footer .f_li li {width: 90%; margin: 20px; text-align: left; margin-top: 100px; }
	#footer .f_li li h1 { font-size:25px ; color: #fff; font-weight: bold; margin-bottom: 25px; line-height: 30px; }
	#footer .f_li li p { font-size: 15px; color: #fff; line-height: 20px;  width: 90%; text-align: left; margin-bottom: 20px;}
	#footer .f_li li .btn {text-align: left;}
	#footer .f_li li .btn button{ width: 100px; height: 40px; color: #fff; border: 3px solid #fff; background-color: rgba(0,0,0,0); font-size: 14px; border-radius: 40px;} 
	#footer .f_li li .btn button:hover {width: 100px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;}


	#footer .f_li li .btn_ul{ width:30%;}
	#footer .f_li li .btn_ul .btn_li1{margin-top: -60px; margin-left: -20px; }


	#footer .f_menu {width:90%;  padding-top: 20px; flex-wrap:wrap; justify-content: space-between;}
	#footer .f_menu li {position: relative; padding-left:2%; padding-right:2%; text-align:left;}
	#footer .f_menu li:after {content:''; position: absolute; right:0; top:4px; display: block; width:1px; height:12px; background: #000000;}
	#footer .f_menu li:last-child:after { content:none; }
	#footer .f_menu li a {display:block; font-size:12px; line-height: 20px; color:#ccc; }
	#footer .f_menu li a:hover {text-decoration: underline;}
	#footer .f_p p {text-align:left; color:#ccc; padding-left: 6%;}
	
	
	
	
	

/*sub01 페이지 태블릿 버전 ---------------------------------------------*/

	#visual_sub01 {height:600px; }
	#visual_sub01 h1 {font-size:7vh; color:#900; font-weight:900; padding-top:100px; 
        text-shadow:0 0 0px #000;}

	#visual_sub01 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 120px ; }
	#visual_sub01 .img_txt h1{  text-align: center; font-size: 65px; color: #fff; margin-bottom: 30px; letter-spacing: -3.5px;   font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;;}
	#visual_sub01 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 20px; margin-top: 10px; text-align: center; }
	#visual_sub01 .img_txt .btn {text-align: center;  font-weight: 300;}
	#visual_sub01 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#visual_sub01 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }
	
	
	#contents_subarea01 {width:96%; min-height:1000px;  margin:50px auto 0 auto; background: none; }

	#sub01_work {margin-top:20px; padding-top:40px;  margin-bottom: 100px;}
	#sub01_work .sec_title {width:90%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub01_work .work_wrap {width:90%; margin:0 auto; max-width:1600px;}
    #sub01_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden ; margin: 0 auto;} 
	#sub01_work .work_wrap .work-list li {width:48%; margin:1%;  } 
	#sub01_work .work_wrap .work-list li a {display:block; position:relative; width:100%; height:100%;}
	#sub01_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub01_work .work_wrap .work-list li a:hover:before { border: 2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}
	#sub01_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; } /*한줄, 가변이미지*/
	#sub01_work .work_wrap .work-list li a:hover img {filter: brightness(90%);}
	
	#sub01_work .work_wrap .work-list li .info {position:absolute; width:200px;  bottom:80px; left: 50%; margin-left: -100px; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#sub01_work .work_wrap .work-list li a:hover .info {transform:translateY(-50px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub01_work .work_wrap .work-list li .info h4 {margin-bottom:8px; font-size:30px; color:#fff; font-weight:bold; margin-bottom: 10px; text-shadow: 2px 2px 7px #444;} 

	
	/*sub1_work*/
	#sub01_work1 {margin-top:50px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;   }
	#sub01_work1 .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub01_work1 .work_wrap {width:100%; margin:0 auto; max-width:1600px;}
    #sub01_work1 .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub01_work1 .work_wrap .work-list li {width:48%; margin:1%;  margin-bottom: 30px;} 
	#sub01_work1 .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub01_work1 .work_wrap .work-list li h1 {font-size: 20px; margin-top: 20px; margin-bottom: 10px;}
	#sub01_work1 .work_wrap .work-list li p {font-size: 17px;}

	#sub01_work1 .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub01_work1 .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub01_work1 .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; }  /*한줄, 가변이미지*/
	#sub01_work1 .work_wrap .work-list li a:hover img {filter: brightness(90%); transform: scale(1.1); transition: 0.6s; overflow: hidden;}
	
	#sub01_work1 .work_wrap .work-list li .info {position:absolute; bottom:10%; left: 35%; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#sub01_work1 .work_wrap .work-list li a:hover .info {transform:translateY(-30px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub01_work1 .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
	#sub01_work1 .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub01_work1 .work_wrap .work-list li .info .btn button:hover {transform: scale(1.2); transition: 0.6s;}
	#sub01_work1 .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }


    .shop_btn { text-align: center; margin-top: 50px; margin-bottom: 100px;}
	.shop_btn button {font-size: 20px; font-weight: bold; color: #fff; background: #201c1c; width: 350px; height: 50px; border-radius: 50px;}
	.shop_btn button:hover {transform: scale(1.1); transition: 0.6s; }

	
	
    
    

	
	
	


/*sub02 페이지 태블릿버전---------------------------------------------------------*/
	#visual_sub02 {height:550px; }
	#visual_sub02 h1 {font-size:7vh; color:#000; font-weight:900; padding-top:100px; text-shadow:0 0 5px #666;}
	#visual_sub02 .img_txt {top: 100px ; }
	#visual_sub02 .img_txt h1 img { width: 40%;}	
	#visual_sub02 .img_txt p{font-size: 14px; color: #fff; line-height: 23px; margin-bottom: 20px;}

	#contents_subarea02 {width:100%; min-height:1000px;  margin:50px auto 0 auto;}

		/*sub02 슬릭*/

	#sub02_slick_wrap { width:100% ; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; }
	#sub02_slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#sub02_slick_wrap  .slick_slide h1 {font-size: 25px; margin-left: 30px;}
	#sub02_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#sub02_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

	#sub02_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#sub02_slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#sub02_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 50px; z-index: 1000; }
	#sub02_slick_wrap .slick_slide .responsive .s_info {width: 200px; left: 50%; margin-left: -200px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#sub02_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-90px); opacity:1; }

	
	#sub02_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 40px; text-align: left; line-height: 35px; }

	#sub02_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 80%; margin-left: -360px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub02_slick_wrap .slick_slide .responsive div .card { width: 96%; height: 400px; margin: 1%; border-radius:10px; overflow: hidden; } 
	
	#sub02_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
	#sub02_slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}
	
	/*이미지를 부모요소에 꽉차게*/
	#sub02_slick_wrap .slick_slide .responsive div img:hover { filter: brightness(40%); transition: 0.4s;}
	#sub02_slick_wrap .slick_slide .responsive .s_txt {background: #e9e9e9; font-size: 40px; color: #000; font-weight: bold; width: 450px; height: 300px; border: 2px solid #fff; position: relative; border-radius: 10px; overflow: hidden;}
	#sub02_slick_wrap .slick_slide .responsive .s_txt p { margin-top: 150px; margin-left: 60px;}
	

	/*sub02_contents1*/
	.sub02_con1 { width: 80%; margin: 0 auto;  width: 1000px; margin-top: 100px; margin-bottom: 100px; }
	.sub02_con1 h1 {text-align: center; font-size: 30px ; font-weight: 600 ; line-height: 40px; margin-bottom: 30px; }
	.sub02_con1 p {text-align:center; font-size: 20px; line-height: 30px;} 

   /*sub02_work*/
   #sub02_work {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;   }
   #sub02_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
   #sub02_work .work_wrap {width:100%; margin:0 auto; max-width:1600px;}
   #sub02_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
   #sub02_work .work_wrap .work-list li {width:60%;   margin-bottom: 30px; margin: 0 auto; padding-bottom: 20px;} 
   #sub02_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
   #sub02_work .work_wrap .work-list li h3 {font-size: 25px; margin-top: 20px; margin-bottom: 30px; color: #fff; }
   #sub02_work .work_wrap .work-list li p {font-size: 17px;}
   #sub02_work .work_wrap .work-list

   #sub02_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
   #sub02_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
   #sub02_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(45%);}  /*한줄, 가변이미지*/
   #sub02_work .work_wrap .work-list li a:hover img {filter: brightness(90%); transform: scale(1.1); transition: 0.6s; overflow: hidden;}
   
   #sub02_work .work_wrap .work-list li .info {position:absolute; bottom:10%; left: 34%; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
   #sub02_work .work_wrap .work-list li a:hover .info {transform:translateY(-110px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
   #sub02_work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
   #sub02_work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
   #sub02_work .work_wrap .work-list li .info .btn button:hover {transform: scale(1.2); transition: 0.6s;}
   #sub02_work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }

   #scroll_image .sc_img01 .sc_txt h1 img {width: 45%; bottom: 30px;} 





/*sub03 페이지 태블릿버전----------------------------------------------------------*/
	#visual_sub03 {display:block; width:100%; max-width:100%; height:600px; background-position:center top; background-size:cover; background-repeat:no-repeat;  margin-bottom: 100px;}
	#visual_sub03 video {width: 100%; height: 600px;  object-fit: cover; margin-bottom: 50px;}
	#visual_sub03 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#000; font-weight:900; text-align:left; padding-top:110px; text-shadow:0 0 0px #000;}

	
	#visual_sub03 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 150px ; }
	#visual_sub03 .img_txt h1{  text-align: center; margin-bottom: 30px;  color: #fff; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
	#visual_sub03 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; }
	#visual_sub03 .img_txt .btn {text-align: center;  font-weight: 300;}
	#visual_sub03 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#visual_sub03 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }	
	
	.sub03_con1 {width: 100%; margin: 0 auto;  margin-top: 30px;}
	.sub03_con1 .con1_bg {width: 100%; height: 800px; background: #CDDC20;  } 
	.sub03_con1 .con1_bg h1 {width: 800px; padding-top: 210px; font-family: "IBM Plex Sans KR", sans-serif; font-weight: bold; font-style: normal; line-height: 60px; font-size: 33px; text-align: center; margin: 0 auto;  margin-top: 150px; color: #333; } 

	#contents_subarea03 {width:100%; min-height:1000px;  margin:50px auto 0 auto;}

	#sub03_slick_wrap { width:100% ; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; }
	#sub03_slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#sub03_slick_wrap  .slick_slide h1 {font-size: 25px; margin-left: 30px;}
	#sub03_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#sub03_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

	#sub03_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#sub03_slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#sub03_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 50px; z-index: 1000; }
	#sub03_slick_wrap .slick_slide .responsive .s_info {width: 200px; left: 50%; margin-left: -200px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#sub03_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-90px); opacity:1; }

	
	#sub03_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 40px; text-align: left; line-height: 35px; }

	#sub03_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 80%; margin-left: -360px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub03_slick_wrap .slick_slide .responsive div .card { width: 96%; height: 400px; margin: 1%; border-radius:10px; overflow: hidden; } 
	
	#sub03_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
	#sub03_slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}


	#sub03_work {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;  margin-top: -430px;  margin-bottom: 150px; }
	#sub03_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub03_work .work_wrap {width:80%; margin:0 auto; max-width:1600px; margin-top: 100px;}
    #sub03_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub03_work .work_wrap .work-list li {width:47%; margin:1%;  margin-bottom: 30px;} 
	#sub03_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub03_work .work_wrap .work-list li h3 {font-size: 40px; margin-top: 20px; margin-bottom: 30px; color: #fff; font-weight: bold; }
	#sub03_work .work_wrap .work-list li p {font-size: 17px;}

	#sub03_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub03_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub03_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(80%);}  /*한줄, 가변이미지*/
	#sub03_work .work_wrap .work-list li a:hover img {filter: brightness(100%); transform: scale(1.2); transition: 0.6s; overflow: hidden;}
	#sub03_work .work_wrap .work-list li h1 {font-size: 35px; margin-top: 35px; font-weight: bold; text-align: center; }
	#sub03_work .work_wrap .work-list li p {font-size: 25px; margin-top: 20px; font-weight: 400; text-align: center;}
	
	#sub03_work .work_wrap .work-list li .info {position:absolute; bottom:20%; left: 50%; z-index:20; opacity:1; transition:all 0.6s; text-align: center; margin-left: -100px; width: 200px;}
 	#sub03_work .work_wrap .work-list li a:hover .info {transform:translateY(-40px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub03_work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
	#sub03_work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub03_work .work_wrap .work-list li .info .btn button:hover {transform: scale(1.1); transition: 0.6s;}
	#sub03_work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }

	
	



/*sub04 페이지 태블릿버전----------------------------------------------------------*/
#visual_sub04 {display:block; width:100%; max-width:100%; height: 600px; background-position:center top; background-size:cover; background-repeat:no-repeat;  margin-bottom: 100px;}
#visual_sub04 video {width: 100%; height: 600px;  object-fit: cover; margin-bottom: 100px;}
#visual_sub04 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#000; font-weight:900; text-align:left; padding-top:180px; text-shadow:0 0 0px #000;}


#visual_sub04 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 150px ; }
#visual_sub04 .img_txt h1{  text-align: center; margin-bottom: 30px;  color: #fff; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
#visual_sub04 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; }	

#contents_subarea04 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto; background:#ccc;}	



/*sub04_slick*/

#sub04_slick_wrap { width:100% ; margin: 0 auto; ;} 
#sub04_slick_wrap .work_txt{width: 730px; font-size: 26px; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal; margin: 0 auto; text-align: center; line-height: 40px;} 
#sub04_slick_wrap .slick_slide { width: 90%; margin: 0 auto;  margin-top: 100px; margin-bottom: 200px}
#sub04_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
#sub04_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 
#sub04_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
#sub04_slick_wrap .slick_slide .responsive div a:hover:before { border:3px solid #333; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

#sub04_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 100px; z-index: 1000; }
#sub04_slick_wrap .slick_slide .responsive .s_info {width: 300px; left: 20%; margin-left: -130px; position:absolute; top: 230px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
#sub04_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-170px); opacity:1; }


#sub04_slick_wrap .slick_slide .responsive div a .s_info h3 {  font-weight: bold; color: #333; margin-bottom: 20px; text-align: left;  width: 300px;}
#sub04_slick_wrap .slick_slide .responsive div a .s_info p { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; opacity: 0;  width: 280px; line-height: 20px;} 
#sub04_slick_wrap .slick_slide .responsive a:hover .s_info p { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; opacity: 1; transition: 0.7s; width: 280px; line-height: 20px;}

#sub04_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 6%; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 4px solid #333;  color: #333; font-size: 15px; font-weight: bold; line-height: 30px; }
#sub04_slick_wrap .slick_slide .responsive div img { width: 100%; border-radius:10px; overflow: hidden;} 

#sub04_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#333; height:40px; color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 


/*sub04_work*/
#sub04_work {margin-top:20px; padding-top:0px;  width: 100%; margin: 0 auto;  margin-top: 130px;  margin-bottom: 150px; }
#sub04_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
#sub04_work .work_wrap {width:80%; margin:0 auto; max-width:1600px; margin-top: 100px;}
#sub04_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
#sub04_work .work_wrap .work-list li {width:31%; margin:1%;  margin-bottom: 30px; } 
#sub04_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
#sub04_work .work_wrap .work-list li h3 {font-size: 30px; margin-top: 20px; margin-bottom: 30px; color: #fff; font-weight: bold; ;}
#sub04_work .work_wrap .work-list li p {font-size: 17px;}

#sub04_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
#sub04_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
#sub04_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(80%);}  /*한줄, 가변이미지*/
#sub04_work .work_wrap .work-list li a:hover img {filter: brightness(100%); transform: scale(1.2); transition: 0.6s; overflow: hidden;}

#sub04_work .work_wrap .work-list li .info {position:absolute; bottom:38%; left: 50%; z-index:20; opacity:1; transition:all 0.6s; text-align: center; margin-left: -150px; width: 300px; text-shadow: 2px 2px 7px #333;}
 #sub04_work .work_wrap .work-list li a:hover .info {transform:translateY(-50px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/



 #sub04_membership {width: 100%; margin-top: 200px; }
 #sub04_membership .m_img{position: relative; height: auto;}
 #sub04_membership .m_img img {width:100%;  }
 #sub04_membership .m_img .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 200px ; text-align: center; }
 #sub04_membership .m_img .sc_txt h1 {font-size: 75px; font-family: "Archivo Black", sans-serif; font-weight: bold; font-style: normal; margin-bottom: 40px; color: #fff; }
 #sub04_membership .m_img .sc_txt h1 img {width: 70%; margin-bottom: 30px;}
 #sub04_membership .m_img .sc_txt p {font-size: 30px; font-weight: 500; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
 #sub04_membership .m_img .sc_txt .btn button {width: 200px;  border-radius: 50px; background :#fff; height:50px;  font-size: 20px; font-weight: bold; line-height: 30px; text-align: center; border: none; color: #111;}
 #sub04_membership .m_img .sc_txt .btn button:hover {transform: scale(1.1); transition: 0.6s;}

}

/*Mobile  CSS*/
@media all and (max-width:768px) {
	
/*메인페이지 모바일 버전----------------------*/		
	
	/*헤더*/
	#header {position:absolute; width:90%; max-width:1200px; padding:5px 5%; height:70px; z-index:1000; margin:0 auto;  }
    #header .logo {position:absolute; left:50%; margin-left: -60px; top:80px; width:120px; height:38px;}
    #header .logo a { width:100%; height: 100%; display:block;
		background:url(../img/s-images/logo_mobile.png); }
		#header .logo a:hover {width:100%; height: 100%; display:block;
			background:url(../img/s-images/logo_pc01.png); 	background-repeat:no-repeat; background-size:cover;}
	
	
	

    #header .nav_icon .nav_icon.gnb_icon {width: 160px; left: 75%; top:80px; overflow:hidden; }
	#header .nav_icon .gnb_icon li  {margin-right: 10px; }
	#header .nav_icon .gnb_icon li img {width: 70%;}

	#header .menu-toggle-btn {position: absolute; top: 80px; display:block !important; float:left;  width:30px; margin-top:5px; cursor:pointer; z-index: 10000;}
	#header .menu-toggle-btn span {display:block; width:100%; height:2px; background:#ffffff;}
	#header .menu-toggle-btn span:nth-child(2) {margin:7px 0;}

	/*슬라이더*/
	
	#slidervisual .img_txt {top: 150px ; }
	#slidervisual .img_txt h1{font-size: 50px; margin-bottom: 15px; }
	#slidervisual .img_txt p{font-size: 13px; color: #fff; line-height: 23px; margin-bottom: 30px; display: none;}
	#slidervisual .img_txt .btn button {  display: block; width: 200px; height: 40px; text-align: center; margin: 0 auto;  border: 4px solid #fff;}
	#slidervisual .img_txt .btn button:hover {width: 200px; height: 40px; text-align: center; margin: 0 auto; }

	
	#slidervisual .s1 {display: none;}
	#slidervisual .s2 {display: block;}
	
	
	/*디스플레이*/
	#display {text-align:justify;}
	#display .sec_title {margin-bottom:50px;}
	
	
	/*프로모션*/
	#promotion .promo_list li{width:90%; margin:0 5% 30px 5%;}
	
	
    /*work*/
	#work {margin-top:0px;}
	#work .work_wrap .sec_title {margin-bottom:30px; text-align:center;}
	#work .work_wrap .work-list li {width:45%; margin:2.5%;}

	

	#work .work_wrap .work-list li .info {position:absolute; bottom:80px;left: 40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
	#work .work_wrap .work-list li a:hover .info {transform:translateY(-30px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#work .work_wrap .work-list li .info h3 {margin-bottom:8px; font-size:30px; color:#fff; font-weight:bold; margin-bottom: 10px; text-shadow: 2px 2px 7px #444;} 
	#work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center;}
	#work .work_wrap .work-list li .info .btn button{ width: 80px;  border-radius: 20px; background-color:rgba(0,0,0,0); height:30px; border: 3px solid #fff;  color: #fff; font-size: 10px; font-weight: bold; line-height: 20px; }
	#work .work_wrap .work-list li a:hover .info .btn button{ width: 80px;  border-radius: 20px; background-color:#fff; height:30px; border: 3px solid #fff;  color: #000; font-size: 10px; font-weight: bold; line-height: 20px; }
	
			
	/*스크롤이미지*/
	#scroll_image .sc_img01 .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top:50%; text-align: center;  opacity: 0; transition: 0.6s;} 
	#scroll_image .sc_img01:hover .sc_txt{opacity: 1;}
	#scroll_image .sc_img01 .sc_txt h1 {font-size: 30px; font-weight: bold; margin-bottom: 20px; color: #fff;}
	#scroll_image .sc_img01 .sc_txt p { font-size: 12px; font-weight: 300; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	#scroll_image .sc_img01 .sc_txt .btn button{ width: 60px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:20px; border: 3px solid #fff;  color: #fff; font-size: 8px; font-weight: bold; line-height: 10px; }
	#scroll_image .sc_img01:hover .sc_txt .btn button{ width: 60px;  border-radius: 30px; background-color:#fff; height:20px; border: 3px solid #fff;  color: #000; font-size: 8px; font-weight: bold; line-height: 10px; transition: 0.4s; }
	#scroll_image .sc_img01 .sc_txt .btn button:hover {   transform: scale(1.2); transition: 0.6s;}
		
	/*slick*/

	#slick_wrap { width:95% ; margin: 0 auto; }
	#slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
	#slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
	#slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 
	
	#slick_wrap .slick_slide .responsive .s_info {width: 150px; left: 50%; margin-left: -90px; position:absolute; top:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-35px); opacity:1; }


	#slick_wrap .slick_slide .responsive div a .s_info h2 { font-size: 15px;  margin-bottom: 10px; text-align: left; margin-left: 15px;}
	
	#slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 15px;  margin-bottom: 10px; text-align: left; margin-left: 15px; margin-top: 40px;}

	#slick_wrap .slick_slide .responsive div a .s_info p { font-size: 8px;  margin-bottom: 10px; text-align: center; opacity: 0;  width: 120px; line-height: 20px; margin-left: 15px;} 
	#slick_wrap .slick_slide .responsive a:hover .s_info p { font-size: 8px;  margin-bottom: 10px;  width: 120px; line-height: 20px;}

	#slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 53%; margin-left: -85px; z-index:20; width: 70px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:25px; border: 2px solid #fff;  color: #fff; font-size: 10px; font-weight: bold; line-height: 20px; }
	#slick_wrap .slick_slide .responsive div img { width: 100%; border-radius:10px; overflow: hidden;  filter: brightness(80%);} 
	
	#slick_wrap .slick_slide .responsive div a:hover button {width: 70px;  border-radius: 30px; background-color:#fff; height:25px; border: 2px solid #fff;  color: #000; font-size: 10px; font-weight: bold; line-height: 20px; transition: 0.5s; } 
		

	
	/*블로그*/
	#blog {padding-top:45px; padding-bottom:45px;}
	#blog .sec_title {margin-bottom:47px;}
	#blog .blog-list li {width:100%; margin-top:45px;}
	
	
	/*연락처*/
	#contact .form_box .personal  {float:none; width:100%;margin-right:0%;}
	#contact .form_box .text {float:none; width:100%;}

	#membership {width: 100%; margin-top: 100px; }
	#membership .m_img{position: relative; height: auto;}
	#membership .m_img img {width:100%;  }
	#membership .m_img .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 130px ; text-align: center; }
	#membership .m_img .sc_txt h1 {font-size: 35px; font-weight: bold; margin-bottom: 20px; color: #fff;}
	#membership .m_img .sc_txt p {font-size: 15px; font-weight: 500; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
	#membership .m_img .sc_txt .btn button {width: 100px;  border-radius: 50px; background :#fff; height:40px;  font-size: 15px; font-weight: bold; line-height: 30px; text-align: center; border: none; color: #111;}
	#membership .m_img .sc_txt .btn button:hover {transform: scale(1.1); transition: 0.6s;}
	
	/*푸터영역*/
	#footer .f_menu li {width:50%; }
	#footer p {margin:15px 0;}
	
	
/*sub01 페이지 모바일 버전----------------------------------------------*/

	#visual_sub01 {height:500px; }
	#visual_sub01 h1 {font-size:5vh; color:#fff; font-weight:900; padding-top:70px; 
        text-shadow:0 0 0px #000;}
		
	#visual_sub01 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 120px ; }
	#visual_sub01 .img_txt h1{  text-align: center; font-size: 55px; color: #fff; margin-bottom: 30px; letter-spacing: -3.5px;   font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;;}
	#visual_sub01 .img_txt p {display: none; font-size: 15px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 20px; margin-top: 10px; text-align: center; }
	#visual_sub01 .img_txt .btn {text-align: center;  font-weight: 300;}
	#visual_sub01 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
	#visual_sub01 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }

	#contents_subarea01 {width:100%; min-height:1200px;  margin:50px auto 0 auto; }

 

 
	




/*sub02 페이지 모바일버전---------------------------------------------------------*/
#visual_sub02 {height:500px; }
#visual_sub02 h1 {font-size:7vh; color:#000; font-weight:900; padding-top:100px; text-shadow:0 0 5px #666;}
#visual_sub02 .img_txt {top: 100px ; }
#visual_sub02 .img_txt h1 img { width: 40%;}	
#visual_sub02 .img_txt p{font-size: 14px; color: #fff; line-height: 23px; margin-bottom: 20px; display: none;}

#contents_subarea02 {width:100%; min-height:1000px;  margin:50px auto 0 auto;}

	/*sub02 슬릭*/

#sub02_slick_wrap { width:100%; margin: 0 auto ; margin-top: 100px; margin-bottom: 100px;} 
#sub02_slick_wrap .slick_slide { width: 90%; margin: 0 auto;}
#sub02_slick_wrap .slick_slide h1 {font-size: 25px; margin-left: 30px;}
#sub02_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bold; }
#sub02_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

#sub02_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
#sub02_slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

#sub02_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 50px; z-index: 1000; }
#sub02_slick_wrap .slick_slide .responsive .s_info {width: 400px; left: 50%; margin-left: -200px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
#sub02_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-100px); opacity:1; }


#sub02_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 40px; text-align: center; line-height: 35px;  width: 400px;}

#sub02_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 50%; margin-left: -55px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
#sub02_slick_wrap .slick_slide .responsive div .card { width: 96%; height: 400px; margin: 1%; border-radius:10px; overflow: hidden; } 

#sub02_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
#sub02_slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}

/*이미지를 부모요소에 꽉차게*/
#sub02_slick_wrap .slick_slide .responsive div img:hover { filter: brightness(40%); transition: 0.4s;}
#sub02_slick_wrap .slick_slide .responsive .s_txt {background: #e9e9e9; font-size: 40px; color: #000; font-weight: bold; width: 450px; height: 300px; border: 2px solid #fff; position: relative; border-radius: 10px; overflow: hidden;}
#sub02_slick_wrap .slick_slide .responsive .s_txt p { margin-top: 150px; margin-left: 60px;}


/*sub02_contents1*/
.sub02_con1 { width: 80%; margin: 0 auto;   margin-top: 100px; margin-bottom: 100px; }
.sub02_con1 h1 {text-align: center; font-size: 30px ; font-weight: 600 ; line-height: 40px; margin-bottom: 30px; }
.sub02_con1 p {text-align:center; font-size: 20px; line-height: 30px;} 

/*sub02_work*/
#sub02_work {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;   }
#sub02_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
#sub02_work .work_wrap {width:100%; margin:0 auto; max-width:1600px;}
#sub02_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
#sub02_work .work_wrap .work-list li {width:60%;  margin-bottom: 30px; margin: 0 auto; padding-bottom: 20px;} 
#sub02_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
#sub02_work .work_wrap .work-list li h3 {font-size: 25px; margin-top: 20px; margin-bottom: 30px; color: #fff; }
#sub02_work .work_wrap .work-list li p {font-size: 17px;}

#sub02_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
#sub02_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
#sub02_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(45%);}  /*한줄, 가변이미지*/
#sub02_work .work_wrap .work-list li a:hover img {filter: brightness(90%); transform: scale(1.1); transition: 0.6s; overflow: hidden;}

#sub02_work .work_wrap .work-list li .info {position:absolute; bottom:10%; left: 50%; margin-left: -150px; width: 300px; z-index:20; opacity:1; transition:all 0.6s; text-align: center;}
#sub02_work .work_wrap .work-list li a:hover .info {transform:translateY(-80px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
#sub02_work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
#sub02_work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:30px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 20px; }
#sub02_work .work_wrap .work-list li .info .btn button:hover {transform: scale(1.2); transition: 0.6s;}
#sub02_work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:30px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 20px; }

#scroll_image .sc_img01 .sc_txt h1 img {width: 30%; bottom: 40px;} 







/*sub03 페이지 모바일버전----------------------------------------------------------*/
#visual_sub03 {display:block; width:100%; max-width:100%; height: 550px; background-position:center top; background-size:cover; background-repeat:no-repeat;  margin-bottom: 50px;}
#visual_sub03 video {width: 100%; height: 550px;  object-fit: cover; margin-bottom: 100px;}#visual_sub03 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#000; font-weight:900; text-align:left; padding-top:110px; text-shadow:0 0 0px #000;}

	
#visual_sub03 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 150px ; }
#visual_sub03 .img_txt h1{  text-align: center; margin-bottom: 30px;  color: #fff; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
#visual_sub03 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; display: none; }
#visual_sub03 .img_txt .btn {text-align: center;  font-weight: 300;}
#visual_sub03 .img_txt .btn button { width: 180px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:50px; border: 5px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; }
#visual_sub03 .img_txt .btn button:hover { width: 180px;  border-radius: 30px; background-color:#fff; height:50px; border: 5px solid #fff;  color: black; font-size: 15px; font-weight: bold;  transition: 0.4s; }	

	
	#contents_subarea03 {width:90%; min-height:1200px;  margin:50px auto 0 auto;}

	.sub03_con1 {width: 100%; margin: 0 auto;  margin-top: 30px;}
	.sub03_con1 .con1_bg {width: 100%; height: 800px; background: #CDDC20;  } 
	.sub03_con1 .con1_bg h1 {width: 650px; padding-top: 210px; font-family: "IBM Plex Sans KR", sans-serif; font-weight: bold; font-style: normal; line-height: 40px; font-size: 25px; text-align: center; margin: 0 auto;  margin-top: 150px; color: #333; } 


	#sub03_work {margin-top:20px; padding-top:30px;  margin-bottom: 100px; width: 100%; margin: 0 auto;  margin-top: -430px;  margin-bottom: 150px; }
	#sub03_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #sub03_work .work_wrap {width:70%; margin:0 auto; max-width:1600px; margin-top: 100px;}
    #sub03_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
	#sub03_work .work_wrap .work-list li {width:95%; margin:1%;  margin-bottom: 30px;} 
	#sub03_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
	#sub03_work .work_wrap .work-list li h3 {font-size: 40px; margin-top: 20px; margin-bottom: 30px; color: #fff; font-weight: bold; }
	#sub03_work .work_wrap .work-list li p {font-size: 17px;}

	#sub03_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
	#sub03_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
	#sub03_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(80%);}  /*한줄, 가변이미지*/
	#sub03_work .work_wrap .work-list li a:hover img {filter: brightness(100%); transform: scale(1.2); transition: 0.6s; overflow: hidden;}
	#sub03_work .work_wrap .work-list li h1 {font-size: 35px; margin-top: 35px; font-weight: bold; text-align: center; }
	#sub03_work .work_wrap .work-list li p {font-size: 25px; margin-top: 20px; font-weight: 400; text-align: center;}
	
	#sub03_work .work_wrap .work-list li .info {position:absolute; bottom:20%; left: 50%; z-index:20; opacity:1; transition:all 0.6s; text-align: center; margin-left: -100px; width: 200px;}
 	#sub03_work .work_wrap .work-list li a:hover .info {transform:translateY(-40px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#sub03_work .work_wrap .work-list li .info .btn {text-shadow: 2px 2px 7px #444; text-align: center; }
	#sub03_work .work_wrap .work-list li .info .btn button{ width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub03_work .work_wrap .work-list li .info .btn button:hover {transform: scale(1.1); transition: 0.6s;}
	#sub03_work .work_wrap .work-list li a:hover .info .btn button{ width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; }


	#sub03_slick_wrap { width:90% ; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; }
	#sub03_slick_wrap .slick_slide { width: 80%; margin: 0 auto;}
	#sub03_slick_wrap  .slick_slide h1 {font-size: 25px; margin-left: 30px;}
	#sub03_slick_wrap .slick_slide .slick_title {width: 100%; margin-left: 35px; font-size: 30px; font-weight: bold; }
	#sub03_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 

	#sub03_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
	#sub03_slick_wrap .slick_slide .responsive div a:hover:before { border:2px solid #fff; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

	#sub03_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 50px; z-index: 1000; }
	#sub03_slick_wrap .slick_slide .responsive .s_info {width: 200px; left: 50%; margin-left: -200px; position:absolute; bottom:40px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
	#sub03_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-90px); opacity:1; }

	
	#sub03_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 40px; text-align: left; line-height: 35px; }

	#sub03_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 80%; margin-left: -360px; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 3px solid #fff;  color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; }
	#sub03_slick_wrap .slick_slide .responsive div .card { width: 96%; height: 400px; margin: 1%; border-radius:10px; overflow: hidden; } 
	
	#sub03_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#fff; height:40px; border: 3px solid #fff;  color: #000; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 
	#sub03_slick_wrap .slick_slide .responsive div a:hover img {filter: brightness(30%); transition: 0.2s;}

		



/*sub04 페이지 모바일버전----------------------------------------------------------*/
#visual_sub04 {display:block; width:100%; max-width:100%; height: 500px; background-position:center top; background-size:cover; background-repeat:no-repeat;  margin-bottom: 100px;}
#visual_sub04 video {width: 100%; height: 500px;  object-fit: cover; margin-bottom: 100px;}
#visual_sub04 h1 {width:90%; max-width:1130px; margin: 0 auto; font-size:6.5vh; color:#000; font-weight:900; text-align:left; padding-top:180px; text-shadow:0 0 0px #000;}


#visual_sub04 .img_txt {position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 150px ; }
#visual_sub04 .img_txt h1{  text-align: center; margin-bottom: 30px;  color: #fff; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal;}
#visual_sub04 .img_txt p { font-size: 18px; color: #fff; line-height: 23px; text-align: center; margin-bottom: 30px; margin-top: 10px; text-align: center; }	

#contents_subarea04 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto; background:#ccc;}	



/*sub04_slick*/

#sub04_slick_wrap { width:100% ; margin: 0 auto; ;} 
#sub04_slick_wrap .work_txt{width: 500px; font-size: 23px; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal; margin: 0 auto; text-align: center; line-height: 40px;} 
#sub04_slick_wrap .slick_slide { width: 80%; margin: 0 auto;  margin-top: 100px; margin-bottom: 200px}
#sub04_slick_wrap .slick_slide .slick_title {width: 80%; margin-left: 35px; font-size: 30px; font-weight: bol; }
#sub04_slick_wrap .slick_slide .responsive div { width: 100%; margin: 10px;  position: relative; } 
#sub04_slick_wrap .slick_slide .responsive div a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.01s; }
#sub04_slick_wrap .slick_slide .responsive div a:hover:before { border:3px solid #333; box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden;}

#sub04_slick_wrap .slick_slide .responsive div a .s_info {position: absolute; bottom: 100px; z-index: 1000; }
#sub04_slick_wrap .slick_slide .responsive .s_info {width: 200px; left: 22%; margin-left: -100px; position:absolute; top: 100px; z-index:20; opacity:1; transition:all 0.6s; text-align: center; }
#sub04_slick_wrap .slick_slide .responsive a:hover .s_info {transform:translateY(-70px); opacity:1; }


#sub04_slick_wrap .slick_slide .responsive div a .s_info h3 { font-size: 20px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left;  line-height: 20px; width: 200px;}
#sub04_slick_wrap .slick_slide .responsive div a .s_info p { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; opacity: 0;  width: 280px; line-height: 20px;  display: none;} 
#sub04_slick_wrap .slick_slide .responsive a:hover .s_info p { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: left; opacity: 1; transition: 0.7s; width: 280px; line-height: 20px;}

#sub04_slick_wrap .slick_slide .responsive div a button { position: absolute; bottom:40px; left: 6%; z-index:20; width: 110px;  border-radius: 30px; background-color:rgba(0,0,0,0); height:40px; border: 4px solid #333;  color: #333; font-size: 15px; font-weight: bold; line-height: 30px; }
#sub04_slick_wrap .slick_slide .responsive div img { width: 100%; border-radius:10px; overflow: hidden;} 

#sub04_slick_wrap .slick_slide .responsive div a:hover button {width: 110px;  border-radius: 30px; background-color:#333; height:40px; color: #fff; font-size: 15px; font-weight: bold; line-height: 30px; transition: 0.5s;} 


/*sub04_work*/
#sub04_work {margin-top:20px; padding-top:0px;  width: 100%; margin: 0 auto;  margin-top: 130px;  margin-bottom: 150px; }
#sub04_work .sec_title {width:100%; max-width:1600px; text-align:left;  margin:0 auto; margin-bottom:47px;}
#sub04_work .work_wrap {width:60%; margin:0 auto; max-width:1600px; margin-top: 100px;}
#sub04_work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; margin: 0 auto;} 
#sub04_work .work_wrap .work-list li {width:100%; margin:1%;  margin-bottom: 30px; } 
#sub04_work .work_wrap .work-list li a {display:block; position:relative; width:100%; overflow: hidden; border-radius:10px ;}
#sub04_work .work_wrap .work-list li h3 {font-size: 50px; margin-top: 20px; margin-bottom: 30px; color: #fff; font-weight: bold; ;}
#sub04_work .work_wrap .work-list li p {font-size: 17px;}

#sub04_work .work_wrap .work-list li a:before {display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; content:""; opacity:0.0; transition:all 0.2s;}
#sub04_work .work_wrap .work-list li a:hover:before { box-sizing: border-box; opacity: 0.9; border-radius: 10px; overflow: hidden; }
#sub04_work .work_wrap .work-list li img { display:block; width:100%; max-width:100%; height:auto; border-radius: 10px; overflow: hidden; filter: brightness(80%);}  /*한줄, 가변이미지*/
#sub04_work .work_wrap .work-list li a:hover img {filter: brightness(100%); transform: scale(1.2); transition: 0.6s; overflow: hidden;}

#sub04_work .work_wrap .work-list li .info {position:absolute; bottom:38%; left: 50%; z-index:20; opacity:1; transition:all 0.6s; text-align: center; margin-left: -150px; width: 300px; text-shadow: 2px 2px 7px #333;}
 #sub04_work .work_wrap .work-list li a:hover .info {transform:translateY(-50px); opacity:1; } /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/



 #sub04_membership {width: 100%; margin-top: 200px; }
 #sub04_membership .m_img{position: relative; height: auto;}
 #sub04_membership .m_img img {width:100%;  }
 #sub04_membership .m_img .sc_txt {position: absolute; width: 600px; left: 50%; margin-left: -300px; top: 160px ; text-align: center; }
 #sub04_membership .m_img .sc_txt h1 {font-size: 75px; font-family: "Archivo Black", sans-serif; font-weight: bold; font-style: normal; margin-bottom: 40px; color: #fff; }
 #sub04_membership .m_img .sc_txt h1 img {width: 50%; margin-bottom: 230px;}
 #sub04_membership .m_img .sc_txt p {font-size: 30px; font-weight: 500; margin-bottom: 10px; color: #fff; margin-bottom: 30px;}
 #sub04_membership .m_img .sc_txt .btn button {width: 200px;  border-radius: 50px; background :#fff; height:50px;  font-size: 20px; font-weight: bold; line-height: 30px; text-align: center; border: none; color: #111; display: none;}
 #sub04_membership .m_img .sc_txt .btn button:hover {transform: scale(1.1); transition: 0.6s;}
	
}