/* 높이맞추기 */
.sub {display: flex; flex-direction: column; min-height: 100vh;}
.subcon{ flex-grow: 1;}


/*탑배너 */
.s_bn {margin-top:67px; display:flex;align-items:center;background: url('/common/img/sub01_bn.png') no-repeat center; background-size:cover;height:70%;}
.s_bn div  {width:74.75%;text-align:center; margin:0 auto; 
font-size:40px;color:#fff;} 
.s_bn div p{font-size:22px; padding-top:30px;line-height:1.4}

.s_bn2 {position:relative; background: url('/common/img/vi1.jpg') no-repeat 0 0; background-size:cover;}
.s_bn3 {background: url('/common/img/product_bn10.png') no-repeat center; background-size:cover; height:50%}
.s_bn3-1 {position:relative; background: url('/common/img/diy_bn.png') no-repeat center; background-size:cover; height:50%}
.s_bn4 {position:relative; background: url('/common/img/pop_bn.png') no-repeat center; background-size:cover;height:50%}
.s_bn4-2 {position:relative; background: url('/common/img/cartoon_bn.png') no-repeat center; background-size:cover;height:50%}
.s_bn4-3 {position:relative; background: url('/common/img/cd_bn.png') no-repeat center; background-size:cover;height:50%}



@media (max-width:980px){
.s_bn {height:40%;margin-top:54px;}
.s_bn div {font-size:24px;width:90%;}
.s_bn div p{font-size:18px;padding-top:25px}
}
@media (max-width:600px){
.s_bn4-3{ background: url('/common/img/cd_bn.png') no-repeat left bottom,  rgba(0, 0, 0, 0.2);background-blend-mode:multiply}
}

/* aboutus */
.sub01_text{text-align:center;line-height:1.5;width:90%;margin:0 auto;padding:130px 0}
.sub01_text h2{font-size:20px;padding-bottom:53px}
.sub01_text h4{font-size:32px;font-weight:700;}
.sub01_text p.p1{font-size:18px;color:#505050;padding:27px 0 55px 0}
.sub01_text p.p2{font-size:21px;font-weight:600 }

@media all and (max-width: 980px) {
.sub01_text br{display:none}
.sub01_text{padding:13% 0}
.sub01_text h2{padding-bottom:5%;font-size:16px}
.sub01_text h4{font-size:24px}
.sub01_text p.p1{font-size:14px}
.sub01_text p.p2{font-size:14px}
}

.reverse0{width:100%;  display: flex;
  align-items: center;
  flex-direction: row-reverse;border-top:1px solid #000;border-bottom:1px solid #000}
.reverse1{width:100%;  display: flex;
  align-items: center;border-bottom:1px solid #000;}

.reverse{background:#fffae9;}
.reverse0 .img{width:50%;border-left:1px solid #000}
.reverse1 .img{width:50%;border-right:1px solid #000}
.reverse0 .img img{width:100%;}
.reverse1 .img img{width:100%;}
.reverse article{width:50%;text-align:center}
.reverse article h3{font-size:50px;font-weight:400;font-family: 'Candal', sans-serif;color:#ff6c11}
.reverse article h4{font-size:22px;font-weight:600;padding:15px 0 25px 0}
.reverse article p{font-size:20px;font-weight:300;line-height:1.5}
@media all and (max-width: 980px) {
.reverse{display: block;}
.reverse .img{width:100%;border-bottom:1px solid #000; border-right:none}
.reverse article{width:90%;margin:0 auto;padding:13% 0}
.reverse article br{display:none}
.reverse article h3{font-size:24px}
.reverse article h4{font-size:18px}
.reverse article p{font-size:14px}
}


.exhit{width:67.81%;margin:0 auto;overflow:hidden;padding-top:7.91%}
.ex_text{width:30%;float:left;}
.ex_img{width:70%;float:left;}
.ex_img img{float:right;margin-left:30px;width:calc( 50% - 30px );padding:1% 0}
.ex_img h4{margin-left:30px;font-size:18px;font-weight:400;padding-bottom:15px}
.exhit a{float:right}

.toon{padding-bottom:8%}
.toon img{padding:0 0 8% 0}


.green_tit{color:#2ab151;font-family: 'Candal', sans-serif;font-size:20px;}
.ex_text h3{font-size:2vw;color:#000;font-weight:600;padding:4% 0 5% 0}
.ex_text p{font-size:18px;font-weight:300;line-height:1.5}


@media all and (max-width: 1890px) {
.exhit p br{display:none}
} 
@media all and (max-width: 1440px) {
.exhit{width:80%}
.ex_text h3{font-size:31px}
} 
@media all and (max-width: 980px) {
.exhit{width:90%;padding-top:12%}
.exhit br{display:none}
.ex_text{width:100%}
.ex_img{width:100%;padding:5% 0 }
.ex_img img{float:left;width:calc( 50% - 15px )}
.ex_img .mr0{margin-left:0;}
.ex_img h4{margin-left:0}
.exhit .more{float:left}

.ex_text h3{padding:3% 0 4% 0;font-size:24px}
.ex_text p{font-size:14px}
.ex_text p.green_tit{font-size:16px}

.toon{padding:10% 0}
.toon img{padding:0 0 8% 0}
}



/* character */
.sub02_text{text-align:center;line-height:1.5;width:90%;margin:0 auto;padding:130px 0}
.sub02_text h5{font-size:50px;line-height:1.2}
.sub02_text h4{font-size:32px;font-weight:600;padding:40px 0}
.sub02_text p{font-size:18px;color:#505050;line-height:1.7;font-weight:300}
.sub02_text br.m_show{display:none}

@media all and (max-width: 980px) {
.sub02_text br{display:none}
.sub02_text{padding:13% 0}
.sub02_text h5{font-size:26px}
.sub02_text h4{font-size:24px;padding:30px 0}
.sub02_text p{font-size:14px}
.sub02_text br.m_show{display:block}
}	 
.sub2-1{width:100%;  display: flex;align-items: stretch; flex-direction: row-reverse;}
.sub2-2{width:100%;  display: flex;align-items: stretch;}

.sub2{width:67.81%;margin:0 auto;margin-bottom:2%}
.sub2-1 .img{width:49%;margin-left:2%;}
.sub2-2 .img{width:49%;margin-right:2%;}
.sub2-1 .img img{width:100%;}
.sub2-2 .img img{width:100%;}

.sub2 article{width:49%;text-align:center;margin-left:0;margin-right:0;background:#fffae9;border-radius:5%;display: flex;flex-direction: column;justify-content: center;padding:2%}
.sub2 article h3{width:25%;text-align:center;margin:0 auto;  }
.sub2 article span{line-height:18px;}
.sub2 article h4{font-size:24px;font-weight:700;padding:25px 0 35px 0}
.sub2 article p{font-size:18px;font-weight:300;line-height:1.5}

@media all and (max-width: 1440px) {
.sub2{width:80%}
.sub2 br{display:none}
}
@media all and (max-width: 980px) {
.sub2{display: block;width:90%}

.sub2 .img{width:100%;margin:0}
.sub2 img{width:100%;}
.sub2 article{width:100%;margin:5% auto;padding:13% 5%}
.sub2 article br{display:none}        
.sub2 article h3{font-size:24px}
.sub2 article span{font-size:20px}
.sub2 article h4{font-size:18px}
.sub2 article p{font-size:14px}
}

.videotext{width:90%;margin:140px auto 0 auto;text-align:center}
.videotext h3{font-size:50px;padding:25px 0}
.videotext p{font-size:22px;}

.another {width:67.81%;margin:140px auto;overflow:hidden}
.anothertext{width:90%;margin:0 auto;text-align:center}
.anothertext h3{font-size:50px}
.anothertext p{font-size:22px;padding:25px 0 70px 0;}


.another li{width:20%;margin-right:6.66%;margin-bottom:6.66%;float:left;text-align:center;}
.another li:nth-child(4){margin-right:0}
.another li:nth-child(7){margin-right:0;width:46.66%;}
.another li img{width:50%;}
.another li:last-child img{width:100%;}

@media all and (max-width: 1440px) {
.videotext{width:80%}
.anothertext{width:80%;}
.another{width:80%}
}
@media all and (max-width: 980px) {
.another{width:90%;margin:80px auto}
.another li{width:40%;margin-right:20%}
.another li:nth-child(2n){margin-right:0%;text-align:left}
.another li:nth-child(2n-1){text-align:right}
.another li:nth-child(7){width:100%}
.another li img{width:70%;}

.videotext{width:90%;margin:80px auto 0 auto}
.videotext h3{font-size:30px}
.videotext p{font-size:16px;line-height:1.5}

.anothertext{width:90%;}
.anothertext h3{font-size:30px}
.anothertext p{font-size:16px;line-height:1.5}
}



/* product design 3개박스공통 */

.product{margin:0 auto; width:67.81%;overflow:hidden}
.product li{width:32%;margin-right:2%;margin-bottom:2%;background:#fff;float:left}
.product li:nth-child(3n){margin-right:0;}
.product p{font-size:22px;margin:15px 0; height:50px;  
overflow:hidden;
text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;}

.product .past{
overflow: hidden;
box-sizing: border-box;
position: relative;
padding-bottom: 100%;

}
 .product .wrap .before {
 position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* min-height: 100%;
min-width: 100%;
max-width:150% */
width:100%
 }

.product .past::after{
width:100%; height:100%; background:rgba(0,0,0,.0); display:inline-block; position:absolute;top: 0;
left: 0;
z-index:9; content:'';  text-align:center; transition: all 0.3s ease-out;}


.product .wrap:hover .past::after { background:rgba(0,0,0,.5); 
content: url('/common/img/hover1.png');  display: flex;
  align-items: center;  justify-content: center;background-size:20%;
}
@media (max-width:1440px){
.product{width:80%;}
}
@media (max-width:980px){
.product {width:90%}
.product li{width:48%;margin-right:4%;}
.product li p{height:40px;margin:15px 0 25px 0 }

.product li:nth-child(3n){margin-right:4%;}
.product li:nth-child(2n){margin-right:0;}
.product .wrap:hover .past::after {display:none}

.product p{font-size:16px}
}

/* diy hover img */
.diy .wrap:hover .past::after { 
content: url('/common/img/hover2.png');  
}





/* news */

.news{width:67.81%;margin:0 auto ;margin-top:226px;}

.head{width:100%;overflow:hidden}
.title{width:60%;float:left}
.title h3{font-size:40px}
.title p{font-size:24px;padding:23px 0 70px 0}
.search{   
    float: right;
    position: relative;
	width:40%;
	margin-top:13px;

}
.search .searchtext{
float:right;
    width: 300px;
	height:40px;
    padding: 0 10px;
	color:#a3a3a3
	}
.searchimg
   { position: absolute;
    top: 8px;
    right: 8px;
    background: url('/common/img/search.png') no-repeat center;
    background-size: cover;
    padding: 13px;
}

@media all and (max-width: 980px) {
.search{width:100%;float:none;overflow:hidden;margin-bottom:20px}
.search .searchtext{float:none;width:100%}

}




.news ul{width:100%;overflow:hidden}
.news li{width:32%; margin-right:2%;background:#fff;float:left;}
.news li:nth-child(3n){margin-right:0;}

.news .past{
overflow: hidden;
position: relative;
padding-bottom:60%;
}
.news .wrap .before {
 position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
 min-height: 100%;
min-width: 100%;
max-width:150%; 
width:100%;
 }

.news .wrap p{    
margin:15px 0 50px 0;
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-wrap: break-word;
	}

@media all and (max-width: 1440px) {
.news{width:80%}
}

@media (max-width:980px){
.news {width:90%;margin-top:90px}
.news li{width:48%;margin-right:4%;}

.news li:nth-child(3n){margin-right:4%;}
.news li:nth-child(2n){margin-right:0;}
/* .news .past{height:30vw} */
.news .wrap p{ font-size:16px   }
  .title{width:100%}
  .title h3{font-size:30px}
.title p{font-size:22px;padding:15px 0 30px 0}
}



/* product,news view 공통*/
.view{width:56.25%;margin:130px auto}
.view_head{font-weight:500;border-bottom:1px solid #000;padding-bottom:15px;overflow:hidden}
.view_head p{font-size:32px;float:left;margin-right:20px}
.view_head span{font-size:18px;float:right;padding-top:15px}
.view_body .filebtn{margin:15px 0 30px 0 ;overflow:hidden}
.view_body .filebtn a{font-size:16px;color:#7b7b7b;float:right;}

.viewbtn{width:100%;overflow:hidden;font-size:16px;font-size:300;margin:74px 0 130px 0}
.whitebtn{padding:13px 60px;border:1px solid #a3a3a3;color:#000;float:left;margin-right:23px}
/* .whitebtn{margin-right:0} */
.blackbtn{padding:13px 60px;background:#000;color:#fff;float:right}
br.m_show{display:none}
@media screen and (max-width:1440px) {
.view{width:75%}
}
@media screen and (max-width:980px) {
br.m_show{display:block}
.view{width:90%;margin:80px auto}
.view_head {padding-bottom:5px}
.view_head p{font-size:25px}
.view_body .filebtn{margin:7px 0 30px 0 }
.viewbtn{margin:30px 0 50px 0}
.whitebtn{padding:10px 40px;}
.blackbtn{padding:10px 40px;}
.view_head span{float:left}
.view_body .filebtn a{float:left}
}
@media screen and (max-width:500px) {
.view_head p{font-size:25px}
.whitebtn{padding:10px 16px;margin-right:15px}
.blackbtn{padding:10px 20px;}
}









/* paging */
.pagebox{overflow:hidden}

.page     {text-align:center;   width:100%; padding:5.21% 0 6.77% 0; float:left; }
.page   ul { width:100%; text-align:center; }
.page   li { display:inline-block;}

 

.page a {
	display:inline-block;
 	text-decoration:none; vertical-align:middle;
 box-sizing:border-box;  width:44px; line-height:44px; height:44px;  color:#9a9292; text-align:Center;font-size:32.2px;font-weight:300
   }

.page   img {vertical-align:middle;margin-top:-3px}
 
 .page a.ov  {color:#2ab151; font-weight:700;}
 .page a.ov::after{width:30px;height:2px;content:'';background:#2ab151;display:block;margin-left:7px}


@media (max-width:900px) {

.page{padding:10px 0 40px 0 }
.page   li {font-size:14px; font-weight:500;}
.page   li:first-child {margin-right:-5px}
.page   li:last-child {;margin-left:-5px}
 

.page a {
 width:33px; line-height:33px; height:33px; font-size:17px;
   }
 .page a.ov::after{width:23px;height:2px;content:'';background:#2ab151;display:block;margin-left:6px}
.page   img {width:9px;}
 
}