@charset "utf-8";

/*공통 스타일*/
#container {width:90%; max-width:1400px; 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:22px;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;}

body{background: #fffef2;}


/*웹표준 PC버전*/

/*메인 페이지-------------------------------*/

	#wrap {position: relative;}

	/*헤더 영역*/
    #header_wrap {background:#fffef2;}
	#header {position:relative; width:90%; max-width:1200px; padding:5px 5%; height:70px; z-index:1000; margin:0 auto; }

		/*로고*/
		#header .logo {position:absolute; left:0; top:15px; width:160px; height:50px;}
		#header .logo a {width:100%; height: 100%; display:block;
			background:url(../img/s-images/logo_pc.jpg); 	background-repeat:no-repeat; background-size:cover;}
		
		/*메뉴*/
		#header .gnb {display:block; position:absolute; right:80px; top:20px; overflow:hidden;}
		#header .gnb li {float:left; margin-left:50px;}
		#header .gnb li a {color:#000;  font-size:13px; font-weight:500; line-height:40px;}
		#header .gnb li a:hover {color:#000; background: #fff; }
		
		/*아이콘*/
		

		/*토글글*/
		#header .menu-toggle-btn {display:none !important; float:right; width:35px; margin-top:15px; cursor:pointer;}
		#header .menu-toggle-btn span {display:block; width:100%; height:4px; background:#000000;}
		#header .menu-toggle-btn span:nth-child(2) {margin:4px 0;}
		
	
	
	/*슬라이드 이미지 영역*/
	#slidervisual {width:100%;}
	#slidervisual img {width:100%; max-width:100%; height:auto;}

	/*비디오 영역*/
	#video_wrap {position: relative;width: 100%;max-width: 1920px;margin: 0 auto;}
	#video_wrap .play {width:100%; height:650px; margin: 0 auto; position: relative; overflow: hidden;	}
	#video_wrap .play video {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover;}
	#video_wrap .text {position: absolute;left: 50px;bottom:100px; }
	#video_wrap .text h2 {background: #fffef2; font-size:20px; padding: 1px 5px; 
		margin-bottom: 5px; line-height: 30px;}
	#video_wrap .text p {background: #fffef2; font-size:14px; padding: 2px 5px;; 
		margin-bottom: 15px; line-height: 20px; }
	#video_wrap .text span {background: #fffef2; font-size:14px; margin-right: 10px; 
		padding: 5px 30px 5px 10px; border: 2px solid #000; }

	
	/*메인_콘텐츠영역*/
	#contents {width:100%;}
	
	/*디스플레이*/
	
	#display {width:100%; padding: 100px 0 ; text-align:left; overflow:hidden; background: #000;}
	#display .sec_title {font-size:42px; margin-bottom: 20px; color:#fff}
	#display .sub_title {font-size:28px; margin-bottom: 20px; color:#fff}
	#display .disc {width:100%; position:relative; font-size:1.2em; color:#666; line-height:1.6em; text-align: justify; padding-top: 20px; letter-spacing: -0.5px; color:#fff}
	#display .disc:before {display:block; position:absolute; top:0px; left:0; width:100%; height:3px; background:#ccc; content:"";}
	


	/*magazine*/
	#magazine{width: 100%; margin: 0 auto; position: relative;margin-top: 70px;}

	#magazine .picture{}
	#magazine .picture img{width: 100%;}
	#magazine .text {position: absolute; left: 90px; bottom:40%;  width: 350px; }
	#magazine .text .title_up{color:#fff; margin-bottom: 10px; font-size: 15px;}
	#magazine .text .title_main{font-size:15px; line-height: 50px;color:#fff;}
	#magazine .text .title_down{font-size:12px; color:#fff; text-align: justify;line-height: 1.7}




	
	/*프로모션*/
	
	#promotion {width:90%; max-width:1400px; margin: 0 auto; padding-top:120px; border-top:0px solid #ccc; }
	#promotion h2{font-size: 24px; margin-bottom: 100px; text-align: left; padding-left: 5px; font-weight: 300;}
	#promotion .promo_list {display:flex; flex-wrap:wrap; justify-content:space-between}
	#promotion .promo_list li {width:24%;  text-align:center;}
	#promotion .promo_list li img {width:100px;}
	#promotion .promo_list li h3 {font-size:18px;margin:29px 0 20px 0; color:#000; font-weight:700;}
	#promotion .promo_list li p {color:#666; line-height:1.9; font-size:12px; text-align:center; letter-spacing: -0.8px;} 
	
	
	/*work*/
	#work {margin-top:70px; padding-top:80px; }
	#work .sec_title {width:90%; max-width:1400px; text-align:left;  margin:0 auto; margin-bottom:47px;}
    #work .work_wrap {width:100%; margin:0 auto; max-width:1400px;}
    #work .work_wrap .work-list {display:flex; flex-wrap:wrap; overflow: hidden; justify-content:space-between;}
	#work .work_wrap .work-list li {width:24%; margin-bottom: 15px;  }
	#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; background-color: #000;}
	#work .work_wrap .work-list li a:hover:before {box-sizing: border-box; opacity: 0.6;}
	#work .work_wrap .work-list li img {display:block; width:100%; max-width:100%; height:auto;} /*한줄, 가변이미지*/
	
	
	#work .work_wrap .work-list li .info {position:absolute; bottom:20px; right:30px; z-index:20; opacity:1; transition:all 0.3s;}
	#work .work_wrap .work-list li a:hover .info {transform:translateY(-23px); opacity:1;} /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#work .work_wrap .work-list li .info h3 {margin-bottom:8px; font-size:15px; color:#fff; font-weight:normal; text-shadow: 0 0 4px #000;}
	#work .work_wrap .work-list li .info span {font-size:11px; color:#fff; text-shadow: 0 0 4px #000;}
	
	
	
	/*블로그*/
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	  }
  
	  body {
		font-family: 'Apple SD Gothic Neo', sans-serif;
		
		color: #333;
	  }
  
	  .section {
		width: 100%;
		background-color: #f7f7f7;
		padding: 0px 0px;
		margin-bottom: 0px;
	  }
  
	  .container {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
	  }
  
	  .text-box {
		max-width: 600px;
		text-align: left;
	  }
  
	  .text-box p {
		line-height: 1.8;
		font-size: 14px;
		margin-bottom: 20px;
		color: #333;
	  }
  
	  .text-box em {
		font-style: italic;
		color: #444;
	  }
  
	  .button-box {
		margin-top: 20px;
	  }
  
	  .button-box a {
		display: inline-block;
		padding: 10px 20px;
		border: 1px solid #000;
		text-decoration: none;
		color: #000;
		font-size: 0.95rem;
		transition: background-color 0.3s ease;
	  }
  
	  .button-box a:hover {
		background-color: #000;
		color: #fff;
	  }
  
	  @media (max-width: 768px) {
		.container {
		  justify-content: center;
		}
  
		.text-box {
		  text-align: center;
		}
		
	  }

	/*유튜브 영상 : 반응형 크기 조절*/
	#youtube_wrap{width: 100%; padding: 50px; box-sizing: border-box;} /*유튜브 섹션*/
	#youtube_wrap #youtube_frame{width: 70%; margin: 0 auto; border: 10px ; border-radius: 10px; overflow: hidden;}/*유튜브 영상 (부모박스) : width 값이 영상 크기를 결정*/
	#youtube_wrap #youtube_frame .youtube{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}/*유튜브 영상 (자식박스)*/
	#youtube_wrap #youtube_frame .youtube iframe{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}/*유튜브 iframe*/

	
	
	
	/*연락처 Contact*/
	
	
	/*메인 contact에 폼 안에 문자 색상*/

	


	
	
	
	/*푸터영역*/
	#footer {width:100%; margin:0 auto; background: #222; padding-bottom: 20px;}
	#footer .footer_inner {width:980%; max-width:1200px; padding-top: 20px; box-sizing: border-box; margin: 20px auto;}
	#footer .f_menu {width:100%; margin:0 auto 20px auto; padding-top: 20px; display:flex; flex-wrap:wrap; gap:50px;}
	#footer .f_menu li {position: relative; text-align:center;}
	#footer .f_menu li:after {content:''; position: absolute; right:-26px; top:4px; display: block; width:2px; height:12px; background: #949494;}
	#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:left; color:#ccc; line-height: 24px;}





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

#visual_sub01 {display:block; width:100%; max-width:100%; height: 550px; background:url(../img/s-images/sub01_visual.jpg); background-position:center top; background-size:cover; background-repeat:no-repeat; }



#contents_subarea01 {width:90%; max-width:1200px; min-height:1000px; margin:120px auto 50px auto;}

/*1단 콘텐츠*/
.colum_1dan {width: 100%; margin: 0 auto 150px auto; }
.colum_1dan .title_down h3 {font-size: 10px; font-weight: 200;}
.colum_1dan .title {font-size: 26px; line-height: 80px; text-align: left; margin-bottom: 18px; font-weight: 300;}
.colum_1dan .top h2 {font-size: 10px; font-weight: 300;}

.colum_1dan .picture {width: 100%;margin-bottom: 18px;  } /*부모요소에 꽉차게 가변 박스스*/
.colum_1dan .picture img {width: 100%;} /*부모요소에 꽉차게 가변 이미지지*/
.colum_1dan .text {}
.colum_1dan .text p {font-size: 16px; line-height: 22px; text-align: justify; margin-bottom: 18px;}

/*2단 콘텐츠*/
.colum_2dan {width: 100%; margin: 0 auto 100px auto; display: flex; flex-wrap: wrap;}
.colum_2dan .box1 {width: 48%; margin-right: 4%;}
.colum_2dan .box1 .title {font-size: 40px; line-height: 80px; border-bottom: 3px solid #333; text-align: center; margin-bottom: 18px;}
.colum_2dan .box1 .picture {width: 100%;margin-bottom: 22px;} 
.colum_2dan .box1 .picture img {width: 100%;} 
.colum_2dan .box1 .text {} 
.colum_2dan .box1 .text h3 {font-size: 13px; line-height: 22px; margin-bottom: 18px; margin-top: 15px;font-weight: 400 }
.colum_2dan .box1 .text p {font-size: 12px; line-height: 20px; text-align: justify; margin-top: 20px; font-weight: 400}

.colum_2dan .box2 {width: 48%;}
.colum_2dan .box2 .title {font-size: 40px; line-height: 80px; border-bottom: 3px solid #333; text-align: center; margin-bottom: 18px;}
.colum_2dan .box2 .picture {width: 100%;margin-bottom: 18px;} 
.colum_2dan .box2 .picture img {width: 100%} 
.colum_2dan .box2 .text {} 
.colum_2dan .box2 .text h3 {font-size: 13px; line-height: 22px; margin-bottom: 20px; margin-top: 15px; font-weight: 400;}
.colum_2dan .box2 .text p {font-size: 10px; line-height: 20px; text-align: justify; margin-bottom: 20px;font-weight: 400 }

/*3단 콘텐츠*/
.colum_3dan {width: 100%; display: flex; flex-wrap: wrap; margin: 0 auto 100px auto; }
.colum_3dan .box1 {width: 32%; margin-right: 2%;}
.colum_3dan .box1 .picture {width: 100%;margin-bottom: 18px;} 
.colum_3dan .box1 .picture img {width: 100%;}
.colum_3dan .box1 .text {} 
.colum_3dan .box1 .text p {font-size: 20px; line-height: 22px; text-align: justify; font-weight: 200;} 
.colum_3dan .box1 .text h3 {font-size: 10px; margin-bottom: 15px;line-height: 22px; border-bottom: 1px solid #616161; color: #222;}
.colum_3dan .box1 .text h4 {font-size: 14px; margin-top: 20px; font-weight: 500; color: #222;} 




.colum_3dan .box2 {width: 32%; margin-right: 2%;}
.colum_3dan .box2 .picture {width: 100%;margin-bottom: 18px;} 
.colum_3dan .box2 .picture img {width: 100%;}
.colum_3dan .box2 .text p {font-size: 20px; line-height: 22px; text-align: justify; font-weight: 200;} 
.colum_3dan .box2 .text h3 {font-size: 10px; margin-bottom: 15px;line-height: 22px; border-bottom: 1px solid #616161; color: #222;}
.colum_3dan .box2 .text h4 {font-size: 14px; margin-top: 20px; font-weight: 500; color: #222;} 




.colum_3dan .box3 {width: 32%;}
.colum_3dan .box3 .picture {width: 100%;margin-bottom: 18px;} 
.colum_3dan .box3 .picture img {width: 100%;}
.colum_3dan .box3 .text {} 
.colum_3dan .box3 .text p {font-size: 20px; line-height: 22px; text-align: justify; font-weight: 200;} 
.colum_3dan .box3 .text h3 {font-size: 12px; margin-bottom: 15px;line-height: 22px; border-bottom: 1px solid #616161;color: #222; }
.colum_3dan .box3 .text h4 {font-size: 14px; margin-top: 20px; font-weight: 500; color: #222;}










/*sub02 페이지 PC버전---------------------------------------------------------*/
#visual_sub02 {display:block; width:100%; max-width:100%; height:550px; 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;}
.responsive-video { margin-top: 40px;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
  }
  
  .responsive-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
  }
  

#contents_subarea02 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto;}
	
	/*벽돌형 이미지 갤러리*/
	.masonry {width: 100%; column-count: 2; margin-bottom: 60px;} 
	.masonry .item {display: block; width: 100%; break-inside: avoid; margin-bottom: 12px; border: 0px ;border-radius: 5px; padding: 4px; box-sizing: border-box;}
	.masonry .item img {width: 100%; border-radius: 5px;}
	.masonry 

	.quote-container { 
		max-width: 800px;
		margin: 0 auto;
		

	  }
	  
	  .quote-text { margin-top: 90px;
		font-size: 1.5rem;
		line-height: 1.6;
		color: #333333;
		margin-bottom: 1.5rem;
		text-align: center;
	  }
	  
	  .quote-author {
		font-size: 1rem;
		color: #777777;
		font-style: italic;
		text-align: center;
	  }


	  .ornhe-description {
		max-width: 600px;
		margin: 0 auto;
		padding: 2rem;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #333;
	  }
	  
	  .small-definition {text-align: right;
		font-size: 20px;
		color: #666;
		margin-bottom: 0.3rem;
		
		margin-bottom: 17px;
	  }
	  
	  .word-title {text-align: right; margin-bottom: 13px;
		font-size: 10px;
		font-weight: bold;
		
		
	  }
	  
	  .meaning-text p {text-align: right;
		font-size: 11px;
		line-height: 1.6;
		margin-bottom: 0.5rem;
	  }


	  /**/
	  .description2 {
		max-width: 600px;
		margin: 0 auto;
		padding: 2rem;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #333;
	  }
	  
	  .definition2 {text-align: left;
		font-size: 20px;
		color: #666;
		margin-bottom: 0.3rem;
		margin-bottom: 17px;
	  }
	  
	  .title2 {text-align: left; margin-bottom: 13px;
		font-size: 10px;
		font-weight: bold;
		
		
	  }
	  
	  .text2 p {text-align: left;
		font-size: 11px;
		line-height: 1.6;
		margin-bottom: 0.5rem;
	  }





/*sub03 페이지 PC버전----------------------------------------------------------*/
#visual_sub03 {display:block; width:100%; max-width:100%; height:550px; background:url(../img/s-images/sub03_visual.jpg); background-position:center top; background-size:cover; background-repeat:no-repeat; margin-bottom: 20px;}
#visual_sub03 h2 {width:90%; max-width:1130px; margin: 0 auto; font-size:3vh; color:#333333; font-weight:300; text-align:left; padding-top:230px; 
	}


#contents_subarea03 {width:90%; max-width:1200px; min-height:1000px;  margin:100px auto 0 auto; background:#ccc;}
	#work2 {margin-top:70px; padding-top:80px;  padding-bottom: 80px; }
	#work2 h2{margin-left: 30px; font-size: 30px; font-weight: 400; margin-top: 40px;}
	#work2 .sec_title2 {width:80%; max-width:1400px; text-align:left;  margin:0 auto; margin-bottom:40px;}
    #work2 .work_wrap2 {width:100%; margin:0 auto; max-width:1400px;}
    #work2 .work_wrap2 .work-list2 {display:flex; flex-wrap:wrap; overflow: hidden; justify-content:space-between;}
	#work2 .work_wrap2 .work-list2 li {width:28%; margin-bottom: 15px;  }
	#work2 .work_wrap2 .work-list2 li a {display:block; position:relative; width:100%; height:100%;}
	#work2 .work_wrap2 .work-list2 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; background-color: #000;}
	#work2 .work_wrap2 .work-list2 li a:hover:before {box-sizing: border-box; opacity: 0.6;}
	#work2 .work_wrap2 .work-list2 li img {display:block; width:100%; max-width:100%; height:auto;} /*한줄, 가변이미지*/
	
	
	#work2 .work_wrap2 .work-list2 li .info2 {position:absolute; bottom:20px; right:30px; z-index:20; opacity:1; transition:all 0.3s;}
	#work2 .work_wrap2 .work-list2 li a:hover .info2 {transform:translateY(-23px); opacity:1;} /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
	#work2 .work_wrap2 .work-list2 li .info2 h3 {margin-bottom:8px; font-size:23px; color:#fff; font-weight:normal; text-shadow: 0 0 4px #000;}
	#work2 .work_wrap2 .work-list2 li .info2 span {font-size:12px; color:#fff; text-shadow: 0 0 4px #000;}

	
	#video_text_section {
		padding: 50px 0px;
		
	  }
	  
	  #video_text_section .container {
		display: flex;
		align-items: stretch; /* 높이도 맞추기 */
		justify-content: center;
		width: 100%;
		max-width: none; /* 최대폭 제한 없애기 */
		margin: 0 auto;
		flex-wrap: wrap;
	  }
	  
	  #video_text_section .left, 
	  #video_text_section .right {
		flex: 1 1 50%;
	  }
	  
	  #video_text_section .left video {
		width: 100%;
		height: 100%;
		object-fit: cover; /* 꽉 차게 */
		border-radius: 0; /* 둥근 모서리 제거 */
	  }
	  
	  #video_text_section .right {
		padding: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	  }
	  
	  #video_text_section .right h2 {
		font-size: 1.5rem;
		margin-bottom: 20px;
		color: #2c2c2c;
		font-weight: 500;
	  }
	  
	  #video_text_section .right p {
		font-size: 1.1rem;
		line-height: 1.8;
		color: #555;
	  }

	  /**/
	  .story-section {
		max-width: 700px;
		margin: 0 auto;
		padding: 2.5rem;
		font-family: 'Helvetica Neue', sans-serif;
		color: #222;
		line-height: 1.7;
	  }
	  
	  .story-title {
		font-size: 1.4rem;
		font-weight: bold;
		margin-bottom: 1.5rem;
	  }
	  
	  .story-section p {
		font-size: 12px;
		margin-bottom: 1.5rem;
	  }
	  
	  .story-section strong {
		font-weight: bold;
	  }


/*sub04 페이지 PC버전----------------------------------------------------------*/
#visual_sub04 {display:block; width:100%; max-width:100%; height:550px; background:url(../img/s-images/sub04_visual.jpg); background-position:center top; background-size:cover; background-repeat:no-repeat; }
#visual_sub04 h2 {width:90%; max-width:1130px; margin: 0 auto; font-size:3.3vh; color:#ffffff; font-weight:500; text-align:left; padding-top:170px; 
} 
#visual_sub04 p {width:90%; max-width:1130px; margin: 0 auto; font-size:1.7vh; color:#ffffff; font-weight:500; padding-top:20px; padding-left: 0px; line-height: 20px;  }

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


.text-box {
	max-width: 900px;
	margin:0 auto;
	
	padding-left: 290px;
	padding-top: 70px;
	padding-bottom: 100px;
	

	font-family: 'Noto Sans KR', sans-serif;
  }
  
  .text-box h2 {
	font-size: 2rem;
	font-weight: 350;
	margin-bottom: 30px;
  }
  
  .text-box p {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 20px;
	color: #272727;font-weight: 330;
  }
  
  .text-box a {
	 font-weight: 600;
	 font-size: 0.9rem;
  }
  




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


/*tablet CSS*/
@media all and (max-width:1200px) {


/*메인페이지 태블릿 버전----------*/

/*헤더영역*/
#header {height:70px; width: 100%; background: #000;}
#header .logo {left: 30px; top:15px; width:130px; height:40px;}
#header .logo a {background:url(../img/s-images/logo_tablet.jpg); }
#header .gnb li a {font-size:13px; color: #fff; }
#header .icon_box {right:10px; top:20px; }




/*디스플레이*/
#display {margin-top:0px; text-align:center;}
#display .disc {font-size:1.2em; padding-bottom:30px; box-sizing: border-box;}


/*프로모션*/
#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;}

#magazine .text {
    width: 90%;
    left: 5%;
    bottom: 20px;
	padding-bottom: 20px;
  }

  #magazine .text .title_up,
  #magazine .text .title_main,
  #magazine .text .title_down {
    font-size: 11px;
	line-height: 2.5vh;
    text-align: left
	
  }

  #magazine_picture img {
    width: 100%;
    height: auto;
  }

  .section {
	width: 100%;
	background-color: #f7f7f7;
	padding: 0px 0px;
	margin-bottom: 00px;
	margin-right: 40px;
  }

/*블로그*/
#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;} 

/*구글지도*/



/*푸터영역*/
#footer .footer_inner {width:95%; max-width:none; }
#footer .f_menu {width:100%; gap:30px;}
#footer p {margin:34px 0;}



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

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

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

/*1단 콘텐츠*/	
.colum_1dan .title {font-size: 20px; line-height: 80px; border-bottom: 0px solid #333; text-align:left; margin-bottom: 14px;}

 /*2단 콘텐츠*/	
.colum_2dan .box1 .title {font-size: 20px; line-height: 56px; border-bottom: 2px solid #333; text-align: left; margin-bottom: 18px;}
.colum_2dan .box2 .title {font-size: 20px; line-height: 56px; border-bottom: 2px solid #333; text-align: left; margin-bottom: 18px;}
/*3단 콘텐츠*/
.colum_3dan .box1 {width: 100%; margin-right: 0%; display: flex ; flex-wrap: wrap;}
.colum_3dan .box1 .picture {width: 50%;margin-bottom: 18px;} 
.colum_3dan .box1 .text { width:47%; border-top: 0px solid #000;  margin-left: 3%;} 

.colum_3dan .box2 {width: 100%; margin-right: 0%; display: flex ; flex-wrap: wrap;}
.colum_3dan .box2 .picture {width: 50%; margin-bottom: 18px;} 
.colum_3dan .box2 .text { width: 47%; border-top:0px solid #000; margin-left: 3%; } 

.colum_3dan .box3 {width: 100%; display: flex ; flex-wrap: wrap;}
.colum_3dan .box3 .picture {width: 50%; margin-bottom: 18px;} 
.colum_3dan .box3 .text { width: 47%; border-top: 0px solid #000; margin-left: 3%; } 



/*sub02 페이지 태블릿버전---------------------------------------------------------*/
#visual_sub02 {height:350px; }
#visual_sub02 h1 {font-size:7vh; color:#000; font-weight:900; padding-top:100px; text-shadow:0 0 5px #666;}

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

/*벽돌형 이미지 갤러리*/
.masonry {width: 100%; column-count: 2;} 

.quote-text {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .quote-author {
    font-size: 0.9rem;
  }

  .quote-container {
    padding: 1.5rem;
  }


/*sub03 페이지 태블릿버전----------------------------------------------------------*/
#visual_sub03 {height:350px; }
#visual_sub03 h1 {font-size:7vh; color:#fff; font-weight:900; padding-top:100px; text-shadow:0 0 5px #000;}

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

#work2 {margin-top:70px;}
#work2 .work_wrap2 .sec_title2 {margin-bottom:65px; text-align:center;}
#work2 .work_wrap2 .work-list2 li {width:45%; margin:2.5%;}
#work2 .work_wrap2 .work-list2 li .info2 {left:40px;}


#work2 .work_wrap2 .work-list2 li .info2 {position:absolute; bottom:20px; right:30px; z-index:20; opacity:1; transition:all 0.3s;}
#work2 .work_wrap2 .work-list2 li a:hover .info2 {transform:translateY(-23px); opacity:1;} /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
#work2 .work_wrap2 .work-list2 li .info2 h3 {margin-bottom:8px; font-size:23px; color:#fff; font-weight:normal; text-shadow: 0 0 4px #000;}
#work2 .work_wrap2 .work-list2 li .info2 span {font-size:12px; color:#fff; text-shadow: 0 0 4px #000;}
	

.video-container {
	max-width: 90%;
  }

  .story-section {
    padding: 2rem 1.5rem;
  }

  .story-title {
    font-size: 1.25rem;
  }

  .story-section p {
    font-size: 13.5px;
  }

  .person {
    font-size: 12.5px;
  }


/*sub04 페이지 태블릿버전----------------------------------------------------------*/
#visual_sub04 {height:350px;}
#visual_sub04 h1 {font-size:7vh; color:#ff5; font-weight:900; padding-top:100px; text-shadow:0 0 5px #000;}

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


}

#visual_sub04 p{ text-decoration-color: #2c2c2c;}
#map iframe {width:100%; height:450px;}  /*구글지도*/






/*Mobile  CSS*/
@media all and (max-width:768px) {

/*메인페이지 모바일 버전----------------------*/		

/*헤더*/
#header {height:60px; background: #fffef2;}
#header .logo { left:10px; top:10px; width:100px; height:40px;}
#header .logo a {background:url(../img/s-images/logo_mobile.png); }
#header .gnb {display:none; position:absolute; top:60px; left:0; width:100%; color: #fff;}
#header .gnb li {float:none; margin-left:0px; border-bottom:1px solid #fff;}
#header .gnb li a {display:block;  width:100%; padding:10px 10%; font-size:13px; font-weight:700;background: #181818; }
#header .gnb li a:hover {color:#000; }
#header .icon_box {display:none !important;}

#header .menu-toggle-btn {display:block !important; }

/*비디오 영역*/
#video_wrap .play {height:500px; }
#video_wrap .text {left: 20px;bottom:20px; }





/*디스플레이*/
#display {text-align:justify;}
#display .sec_title {margin-bottom:50px;}


/*프로모션*/
#promotion .promo_list li{width:90%; margin:0 5% 30px 5%;}


/*work*/
#work .work_wrap .work-list li {width:100%; margin:0;}


/*블로그*/
#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%;}

/*푸터영역*/

#footer p {margin:15px 0;}



/*푸터영역*/
#footer .footer_inner {width:80%; max-width:1400px; }
#footer .f_menu {display: block; text-align: center;}
#footer .f_menu li:after {content:none;}
#footer p {margin:34px 0;}


/*sub01 페이지 모바일 버전----------------------------------------------*/

#visual_sub01 {height:200px; }
#visual_sub01 h1 {font-size:5vh; color:#fff; font-weight:900; padding-top:70px; 
	text-shadow:0 0 0px #000;}

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

/*1단 콘텐츠*/
.colum_1dan .title {font-size: 20px; line-height: 40px; border-bottom: 2px solid #ffffff; text-align:left; margin-bottom: 12px;}

/*2단 콘텐츠츠*/
.colum_2dan .box1 {width: 100%; margin-right: 0%;}
.colum_2dan .box1 .title {font-size: 20px; line-height: 40px; border-bottom: none;margin-bottom: 0px; }

.colum_2dan .box2 {width: 100%;}
.colum_2dan .box2 .title {font-size: 20px; line-height: 40px; border-bottom: none;margin-bottom: 0px; }

/*3단 콘텐츠*/
.colum_3dan .box1 .picture {width: 100%;margin-bottom: 18px;} 
.colum_3dan .box1 .text { width:100%; border-top: 1px solid #000;  margin-left: 0%; margin-bottom: 50px;} 

.colum_3dan .box2 .picture {width: 100%; margin-bottom: 18px;} 
.colum_3dan .box2 .text { width:100%; border-top:1px solid #000; margin-left: 0%;  margin-bottom: 50px;} 

.colum_3dan .box3 .picture {width: 100%; margin-bottom: 18px;} 
.colum_3dan .box3 .text { width: 100%; border-top: 1px solid #000; margin-left: 0%; margin-bottom: 50px; } 








/*sub02 페이지 모바일버전---------------------------------------------------------*/
#visual_sub02 {height:200px; }
#visual_sub02 h1 {font-size:5vh; color:#000; font-weight:900; padding-top:70px; text-shadow:0 0 5px #666;}

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

/*벽돌형 이미지 갤러리*/
.masonry {width: 100%; column-count: 1;} 

.quote-text {
    font-size: 1.3rem;
  }

  .quote-author {
    font-size: 1rem;
  }

  .quote-container {
    padding: 2rem;
  }




/*sub03 페이지 모바일버전----------------------------------------------------------*/
#visual_sub03 {height:200px; }
#visual_sub03 h1 {font-size:5vh; color:#fff; font-weight:900; padding-top:70px; text-shadow:0 0 5px #000;}

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

#work2 {margin-top:70px;}
#work2 .work_wrap2 .sec_title2 {margin-bottom:65px; text-align:center;}
#work2 .work_wrap2 .work-list2 li {width:100%; margin:2.5%;}
#work2 .work_wrap2 .work-list2 li .info2 {left:40px;}


#work2 .work_wrap2 .work-list2 li .info2 {position:absolute; bottom:20px; right:30px; z-index:20; opacity:1; transition:all 0.3s;}
#work2 .work_wrap2 .work-list2 li a:hover .info2 {transform:translateY(-23px); opacity:1;} /*마우스를 오버 했을때 변형속성을 세로 위치 지정*/
#work2 .work_wrap2 .work-list2 li .info2 h3 {margin-bottom:8px; font-size:23px; color:#fff; font-weight:normal; text-shadow: 0 0 4px #000;}
#work2 .work_wrap2 .work-list2 li .info2 span {font-size:12px; color:#fff; text-shadow: 0 0 4px #000;}
.video-container {
	max-width: 95%;
  }

  /**/
  .story-section {
    padding: 1.5rem 1rem;
  }

  .story-title {
    font-size: 1.15rem;
  }

  .story-section p {
    font-size: 13px;
    line-height: 1.6;
  }

  .person {
    font-size: 12px;
  }

  #video_text_section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #video_text_section .left,
  #video_text_section .right {
    width: 100%;
  }


/*sub04 페이지 모바일버전----------------------------------------------------------*/
#visual_sub04 {}


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



}



.text-box {
    padding: 20px;
    margin: 30px 16px;
  }

  .text-box h2 {
    font-size: 1.1rem;
  }