@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");	



.channel_btn{ cursor: pointer; }


html {position: relative; height: 100%; min-height: 100%; margin: 0; -webkit-text-size-adjust:none; scroll-behavior: smooth;}
body {position: relative; width: 100%; height: auto; min-height: 100%; font-family: 'Poppins','Pretendard'; overflow-y: auto; overflow-x: hidden; letter-spacing: -0.5px; color:#1B1B1B; word-break:keep-all; color: #1B1B1B }
*, *::before, *::after {padding:0; margin:0; box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;font-family: 'Poppins','Pretendard'; word-break:keep-all; }
input,button,textarea,select{font-family: 'Poppins','Pretendard'; color:#1B1B1B; word-break:keep-all;}
ul {list-style-type: none; padding-inline-start: 0;}
a {text-decoration: none; color: inherit}
table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
button {border: none; background:none; cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
textarea:focus {outline:none;}



.hidden {display: none;}
input {height: 50px; border-radius: 5px; border: 1px solid #DBDBDB; padding: 0 20px; font-size: 16px; width: 100%; line-height: 50px}
input::placeholder {color:#666;}
input:focus, textarea:focus {border: 1px solid #DBDBDB;}
textarea {height: 120px; border-radius: 5px; border: 1px solid #DBDBDB; padding: 18px 20px; font-size: 16px; width: 100%; resize: none; display: block}
textarea::placeholder {color:#666;}

div::-webkit-scrollbar {width:18px; height: 3px;}
div::-webkit-scrollbar-thumb {background-color: #e1e1e1; background-clip : padding-box; border: 5px solid transparent;}
div::-webkit-scrollbar-track {background:none;}

input[type="checkbox"]{display: inline-block; width: 20px; height: 20px; border: 1px solid #dfdfdf; border-radius: 5px}


/*
*::-webkit-scrollbar {
    width: 12px;
  }
*::-webkit-scrollbar-thumb {
    background-color: #204F97;
    border-radius: 10px;
    background-clip: padding-box;
    border: 3px solid transparent;
  }
*::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
  }
*/


.f10{font-size: 10px}
.f11{font-size: 11px}
.f12{font-size: 12px}
.f13{font-size: 13px}
.f14{font-size: 14px}
.f15{font-size: 15px}
.f16{font-size: 16px}
.f17{font-size: 17px}
.f18{font-size: 18px}
.f19{font-size: 19px}
.f20{font-size: 20px}
.f21{font-size: 21px}
.f22{font-size: 22px}
.f23{font-size: 23px}
.f24{font-size: 24px}
.f25{font-size: 25px}
.f26{font-size: 26px}
.f27{font-size: 27px}
.f28{font-size: 28px}
.f29{font-size: 29px}
.f30{font-size: 30px}
.f35{font-size: 35px}
.f40{font-size: 40px}
.f45{font-size: 45px}

.emt10{height: 10px}
.emt20{height: 20px}
.emt30{height: 30px}
.emt40{height: 40px}
.emt50{height: 50px}
.emt60{height: 60px}
.emt70{height: 70px}
.emt80{height: 80px}
.emt90{height: 90px}
.emt100{height: 100px}
.emt110{height: 110px}
.emt120{height: 120px}
.emt130{height: 130px}
.emt140{height: 140px}
.emt150{height: 150px}


.inner_top{max-width: 1660px; margin: 0 auto; padding: 0 20px;}
.inner{max-width: 1480px; margin: 0 auto; padding: 0 20px;}

.header{ position: absolute; left: 0; top: 0; width: 100%; border-bottom: 1px solid rgba(221,221,221,.3); z-index: 9999}

.header .inner_top{height: 100px; display: flex; align-items: center; justify-content: space-between}

.header p{text-align: right; font-size: 20px; color: #fff;}

.header .inner_top a{width: 140px;}
.header .inner_top p{width: 140px}



.banner_slide img{width: 100%}

.section{padding: 150px 0}
.section.bg{background: #F9F9F9}
.section.nobottom{padding-bottom: 0}
.main_title{position: relative; margin-bottom: 50px; position: relative}
.main_title.center{text-align: center}
.main_title p{font-size: 16px; color: #DA4549}
.main_title h2{font-size: 40px; line-height: 52px; font-weight: bold}
.main_title p + h2{margin-top: 15px;}

.custom_btn{display: flex; align-items: center; justify-content: flex-end; position: absolute; right: 0; bottom: 0; gap:30px;}

.custom_btn .arrbtn{cursor: pointer}

.slides-numbers{color: #999; font-size: 20px; display: flex; align-items: center; gap:5px; justify-content: center; }
.slides-numbers .active{font-weight: bold; color: #222}


.media-wrap{display: flex; flex-wrap: wrap; gap:20px; }
.media-wrap img{width: calc(25% - 15px);  }

.brand{display: flex; width: 100%; gap:10em}
.brand p{font-size: 20px; line-height: 30px;}
.brand p + p{margin-top: 15px;}
 
.brand .left{width: 50%; }

.brand .right{display: flex; flex-wrap: wrap; flex:1; gap:100px 80px}
.brand .right .box{width: calc(50% - 40px)}

.brand .right .box h3{font-size: 22px; font-weight: bold; margin-bottom: 10px;}
.brand .right .box h2{font-size: 60px; font-weight: bold}
.brand .right .box p{font-size: 30px;}
.brand .right .box p span{color: #DA4549}


.brand .right .box .flex_txt{display: flex; align-items: center; justify-content: flex-start; gap:5px;}

.brand .right .box .flex_txt p{margin-bottom: -10px}
 

.drag{display: flex; gap:10px;justify-content: flex-end; align-items: center; position: absolute; right: 0; bottom: 0}
.drag p{font-size: 20px; font-weight: 500; color: #1D1D1D}





.drag_are{ padding-bottom: 80px; background: #F9F9F9 }






.drag_area {
  position: relative;
  width: 100%;
}

.history {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
	
}

.history img {
  max-width: none; /* 이미지 크기를 제한하지 않음 */
  cursor: grab;
}




.history::-webkit-scrollbar {
    height: 10px; 
  }
.history::-webkit-scrollbar-thumb {
    background-color: #204F97;
    border-radius: 10px;
    background-clip: padding-box;
    border: 0px solid transparent;
  }
.history::-webkit-scrollbar-track {
    background-color: #eee;
    border-radius: 10px;
  }


.partner_slide{}
.partner_slide .box{display: flex; flex-wrap: wrap; gap:30px;}
.partner_slide .box img{width: calc(20% - 24px)}



.partner_slide .slick-dots{display: flex;
	gap:20px; align-items: center; justify-content: center; width: 100%; margin-top: 80px}
.partner_slide .slick-dots li{cursor: pointer;width: 8px; height: 8px; background: #E0E0E0; border-radius: 8px; font-size: 0}
.partner_slide .slick-dots li.slick-active{background:#DA4549 }

.partner_slide .slick-dots li button{display: none}


.ink_are{position: relative; z-index: 2}
.ink_are_btn{position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 100%}
.ink_are_btn .prevArrow2{left: -80px; cursor: pointer}
.ink_are_btn .nextArrow2{right: -80px; cursor: pointer}

.ink_are_btn span{position: absolute; top: 50%; transform: translateY(-50%)}

.ink_slide .slick-slide{padding: 0 10px}
.ink_slide .slick-slide img{max-width: 100%; margin: 0 auto}
.ink_slide p{text-align: center; font-size: 20px; font-weight: bold; margin-top: 20px}



.flex_product{display: flex; gap:40px; margin-top: 100px;}
.flex_product .box{text-align: center; flex:1}
.flex_product .box p{font-size: 20px; line-height: 25px; margin-top: 20px}
.flex_product .box p b{display: block}
.flex_product .box img{max-width: 100%}




footer{background: #F9F9F9}
.foot_top{border-bottom: 1px solid #E0E0E0; padding: 25px 0}
.foot_top .inner{display: flex; align-items: center; justify-content: space-between}
.foot_top .inner ul{display: flex; gap: 15px; align-items: center; justify-content: flex-end}
.foot_top .inner ul li a{font-size: 16px; color: #666}
.foot_top .inner ul li a b{color: #222}
.foot_top .inner ul li span{width:4px; height: 4px; background: #D9D9D9; border-radius: 4px; display: inline-block}
.foot_top .inner ul li {display: flex; align-items: center; justify-content: center}


.foot_cs{padding: 50px 0; }
.foot_cs .info{text-align: center}
.foot_cs .info h3{font-size: 20px; color: #fff; text-align: center; font-weight: bold; padding: 0 25px; border-radius: 50px; height: 50px; line-height: 50px; display: inline-block; background: #222}
.foot_cs .info p{margin-top: 20px; font-size: 16px; line-height: 24px;}

.flex_icon{margin-top:50px;display: flex; align-items: center; justify-content: center; gap:20px}
.flex_icon span, .flex_icon a{flex:1}
.flex_icon img{max-width: 100%; max-height:194px;  }

.foot_company{margin-top: 50px; border-top: 1px solid #e0e0e0; padding: 50px 0 0 0}

.foot_company h3{margin-bottom: 20px}

.company_info{display: flex; gap:24px; align-items: flex-start; justify-content: flex-start; text-align: left}


.company_info p{display: flex; gap:8px; align-items: flex-start; justify-content: flex-start; font-size: 16px; color: #222; line-height: 20px}

.company_info + .company_info{margin-top: 10px}

.foot_copy{padding: 25px 0;  border-top: 1px solid #e0e0e0;}
.foot_copy p{font-size: 16px; color: #666}


.right_nav{position: fixed; z-index: 9999; right: 50px; bottom: 50px; }
.right_nav a{display: block; }
.right_nav a + a{margin-top: 10px;}

.pc{}
.mo{display: none !important}



@media (max-width: 1360px) { 
 
   
    

}




@media (max-width: 1280px) { 
	
	
	.brand p{font-size: 16px; line-height: 20px}
	.header .inner_top p{font-size: 16px}	
  
  
}

@media (max-width: 1024px) { 
 
  
	.brand .left {
    width: 100%;}
	
	.brand {
    display: flex;
    width: 100%;
    gap: 60px;
    flex-direction: column;
}
	
	.history img{ width: 1600px;  }
	.media-wrap{gap:10px;}	
	
	
	.partner_slide .box img {
    width: calc(33.33% - 19.99px);
}
	
	
	.media-wrap img {
    width: calc(33.33% - 6.66px);
}
	
	
	.company_info{flex-wrap: wrap; gap:5px 15px}
	.company_info + .company_info{margin-top: 5px; }
    
}




@media (max-width: 860px) {


.pc{display: none !important}
.mo{display: block !important}
    
	.right_nav{right: 20px; bottom: 20px}
    
    
	.custom_btn{display: none}
	
	.main_title{text-align: center}
	.main_title h2{font-size: 30px; line-height: 40px}
	
	
	.header .inner_top{height: 80px; padding:10px 20px}
	.header .inner_top img{max-width: 100%; max-height: 100%}
	
	.brand p{text-align: center; }
	.brand p br{display: none}
	
	.brand .right .box{text-align: center}
	.brand .right .box .flex_txt{justify-content: center}
	.brand .right .box h3{font-size: 16px}
	.brand .right .box .flex_txt h2{font-size: 30px;}
	.brand .right .box .flex_txt p{font-size: 16px; margin-bottom: -2px}
	
	.drag p{font-size: 16px}
	
	
	.partner_slide .box{gap:10px}
	.partner_slide .box img{ width: calc(33.33% - 6.66px);}
	
}




@media (max-width: 600px) {
	
 
	.company_info p{font-size: 14px}
	.foot_copy p{font-size: 14px}
    
	.right_nav a img, .right_nav span img {max-width: 50px; display: block}
	.right_nav a + a{margin-top: 5px}
	
	
	.flex_icon {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
	
	.flex_icon span, .flex_icon a, .flex_icon span.channel_btn  {
    flex: none;
		width: calc(50% - 5px)
}
	.flex_icon span{width: 100%}
	.flex_icon span img{width: 100%}
	
	.foot_cs .info p{font-size: 14px;}
	
	.foot_cs .info h3{font-size: 16px; height: 40px; line-height: 40px}
	.foot_top .inner ul li a{font-size: 14px}
	.foot_top .inner img{display: none}
	
	.flex_product {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    flex-direction: column;
}
	
	.tel_wrap a span { width: auto;  }


 
	.flex_product .box p, .ink_slide p{font-size: 16px; line-height: 20px}
	
	.main_title p{font-size: 14px}
	 .main_title h2 {
        font-size: 20px;
        line-height: 30px; 
    }
	
	.section {
    padding: 80px 0;
}
	
	
	
	
	    .partner_slide .box img, .media-wrap img {
        width: calc(50% - 5px);
    }
	
.history::-webkit-scrollbar {
    height: 4px; 
  }	
	
	.main_title p + h2 {
    margin-top: 5px;
}
	
	
	.drag {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: -35px;
}
	
	.brand .right .box .flex_txt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex-direction: column;
}
	
	.header{position: relative; background: #111}
	.header .inner_top .ink_center{display: none}
	.header .inner_top a img{max-width: 100px}
	
}



@media (max-width: 410px) {
    
 
 
}



.tel_wrap{ background: #c1c1c1; padding: 22px ; border-radius: 10px; margin-top: -3px;  }
.tel_wrap a {  padding: 13px 30px; background: #fff; color:#000;
 display: flex; width: 100%; border: 1px solid #000; margin: 10px 0; font-weight: bold; gap:10px; align-items: center; }


.tel_wrap > div{  display: inline-block; width: 100%; text-align: center; }




.tel_wrap a i { display: inline-block; width: 27px; height: 27px;   }
.tel_wrap a.icon1 i { background: url("/images/tel_icon1.svg") no-repeat center; background-size: 27px;   } 
.tel_wrap a.icon2 i { background: url("/images/tel_icon2.svg") no-repeat center; background-size: 27px;   } 

.tel_wrap a span { flex: none;  }