@import url("common.css");
@import url("gray.css");


#footer{border-top: 1px solid var(--border);}

.subtop_none{}
.subtop_none #visual{display: none;}
.subtop_none .lnb{display: none;}
.subtop_none .subTitle{display: none;}


/* ¼­ºêž */
#visual{width: calc(100% - 30px); height: 500px; margin: 15px auto 0; border-radius:var(--borderR20); overflow: hidden; background:#000; position:relative;}
#visual .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; transform: scale(1); animation: m_vsImg 1.8s;}
#visual .subtop_company{background:url('/img/subtop_company.jpg') no-repeat center/cover;}
#visual .subtop_product{background:url('/img/subtop_product.jpg') no-repeat center/cover;}
#visual .subtop_information{background:url('/img/subtop_information.jpg') no-repeat center/cover;}
#visual .subtop_other{background:url('/img/subtop_other.jpg') no-repeat center/cover;}
#visual .v_txt{position:absolute; width: 100%; box-sizing:border-box; padding:0 5%; text-align:center; left:50%; top:55%; z-index: 9; transform:translate(-50%,-50%);}
#visual .v_txt h3{font-size:50px; color:#fff; font-weight: 700; font-family: var(--korFont); line-height: 120%; transform:translateY(60px); opacity:0; animation:v_txt 0.6s 0.2s; animation-fill-mode:both;}
#visual .v_txt p{padding: 15px 0 0; font-size:1rem; letter-spacing: 0; line-height:150%; color:rgba(255,255,255,.7); transform:translateY(60px); opacity:0; animation:v_txt 0.6s 0.4s; animation-fill-mode:both;}


@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}


.lnb{border-bottom: 1px solid #ddd; overflow:hidden; transform:translateY(60px); opacity:0; animation:v_txt 0.6s 0.6s; animation-fill-mode:both;}
.lnb .lnb_in{}
.lnb .lnb_in ul{display: flex; justify-content: center; text-align:center;}
.lnb .lnb_in ul li{width: auto; padding: 0 30px;}
.lnb .lnb_in ul li a{display:block; font-size:1rem; line-height:70px; position:relative;}
.lnb .lnb_in ul li a:after{content:''; display:block; width:0; height:3px; background:var(--main); transition:all .3s linear; position:absolute; left:0; bottom: 0; z-index: 2;}
.lnb .lnb_in ul li.left_linktop a:after{width: 100%;}
.lnb .lnb_in ul li.left_linktop a{color:var(--main); font-weight:700;}
.lnb .lnb_in ul li:hover a{color:var(--main);}


.subTitle{padding: 100px 0 40px; max-width:1350px; width: 94%; margin:0 auto; text-align:center; }
.subTitle h3{font-size:42px; font-weight: 700; line-height: 120%; color:var(--black); transform:translateY(60px); opacity:0; animation:v_txt 0.6s 0.9s; animation-fill-mode:both; font-family: var(--korFont);}


/* css °øÅë */
.basicCont{max-width:1350px; width: 94%; margin:0 auto 150px;}

.sub_pad{padding: 150px 0;}
.sub_pad_t{padding: 150px 0 0;}
.sub_pad_b{padding: 0 0 150px;}


.sub_pad2{padding: 100px 0;}
.sub_pad2_t{padding: 100px 0 0;}
.sub_pad2_b{padding: 0 0 100px;}

.pad0{padding: 0 !important;}
.pad60{padding: 60px !important;}
.padT60{padding-top: 60px !important;}

.padB10{padding-bottom: 10px !important;}
.padB20{padding-bottom: 20px !important;}
.padB30{padding-bottom: 30px !important;}
.padB40{padding-bottom: 40px !important;}
.padB50{padding-bottom: 50px !important;}
.padB60{padding-bottom: 60px !important;}
.padB70{padding-bottom: 70px !important;}
.padB80{padding-bottom: 80px !important;}
.padB90{padding-bottom: 90px !important;}
.padB100{padding-bottom: 100px !important;}

.marB5{margin-bottom: 5px !important;}
.marB10{margin-bottom: 10px !important;}
.marB20{margin-bottom: 20px !important;}
.marB30{margin-bottom: 30px !important;}
.marB40{margin-bottom: 40px !important;}
.marB50{margin-bottom: 50px !important;}
.marB60{margin-bottom: 60px !important;}
.marB70{margin-bottom: 70px !important;}
.marB80{margin-bottom: 80px !important;}
.marB90{margin-bottom: 90px !important;}
.marB100{margin-bottom: 100px !important;}



/* ÅؽºÆ® */
.conTit{font-size:42px; font-weight: 500; font-family:var(--korFont); color:var(--black); letter-spacing: 0; line-height: 120%; box-sizing:border-box; margin: 0 0 40px;}
.conTit .point{display: block; font-size:15px; font-weight:700; color:var(--main); line-height:120%; padding:0 0 0 13px; box-sizing:border-box; position:relative; margin:0 0 10px; font-family:var(--eng);}
.conTit .point:before{content:''; display:block; width:9px; height:9px; border-radius:50%; background:var(--main); position: absolute; left:0; top:4px;}
.fs30{font-size:30px; font-weight: 500; font-family:var(--korFont); color:var(--black); letter-spacing: 0; line-height: 120%;}
.fs26{font-size:26px; font-weight: 500; font-family:var(--korFont); color:var(--black); letter-spacing: 0; line-height: 120%; margin: 0 0 8px;}
.fs22{font-size:22px; font-weight: 500; font-family:var(--korFont); color:var(--black); letter-spacing: 0; line-height: 120%; margin: 0 0 8px;}
.fs20{font-size:20px; font-weight: 700; color:var(--main); letter-spacing: 0; line-height: 120%; margin: 0 0 8px;}
.fs19{font-size:19px; font-weight: 700; color:var(--black); letter-spacing: 0; line-height: 120%;}

.subTit{font-size:34px; font-weight: 300; font-family:var(--korFont); color:var(--black); letter-spacing: 0; line-height: 130%;}
.subTit .point{display: block; font-size:15px; font-weight:700; color:var(--main); line-height:130%; box-sizing:border-box; position:relative; margin:0 0 10px; font-family:var(--eng);}
.subTit.ls0 b{letter-spacing: 0;}
.subTit b{font-weight: 500; letter-spacing: 0; line-height: 120%;}
.underline{display:inline; color:var(--main); box-shadow: 0 -10px 0 rgba(45,51,135,.2) inset;}


.dep_tit{font-size:26px; font-weight: 700; font-family:var(--korFont); color:var(--black); letter-spacing: 0; line-height: 120%; padding: 14px 0 0; position:relative;}
.dep_tit:before{content:''; display: block; width:40px; height:4px; background:var(--main); position:absolute; left:0; top:0;}


.cate_tit{display:inline-block; text-align:center; padding:0 18px; box-sizing:border-box; border:1px solid var(--main); color:var(--main); font-size:15px; font-weight:700; height:30px; line-height:28px; white-space: nowrap; border-radius:30px; margin: 0 0 15px;} 



.num{display:inline-block; width: 35px; height:35px; line-height:35px; text-align:center; background:var(--main); border-radius:50%; font-size:16px; font-weight: 700; color:#fff; position:relative;}
.num:before{content:''; display:block; width:100%; height:100%; border-radius:50%; position:absolute; left:0; top:0; box-sizing:border-box; border:1px solid var(--main); z-index: -1; animation: active-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 1s; animation-delay: 1s;}
.num:after{content:''; display:block; width:100%; height:100%; border-radius:50%; position:absolute; left:0; top:0; box-sizing:border-box; border:1px solid var(--main); z-index: -1; animation: active-circle2 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}


@keyframes active-circle {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0.02; 
   }
  50% {
	opacity: 0.05; 
   }
  100% {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	opacity: 0; } 
}


@keyframes active-circle2 {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0.05; 
   }
  50% {
	opacity: 0.1; 
   }
  100% {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	opacity: 0; } 
}




/* ¹öÆ° */
.moreBtn{display: inline-block; width:200px; height: 60px; box-sizing:border-box; background:#fff; border:1px solid var(--main); border-radius:60px; transition:all .3s linear; padding:0 25px; position: relative; overflow: hidden; text-align:left; cursor:pointer;}
.moreBtn:hover{border-color:var(--main) !important;}
.moreBtn:before{content:''; display: inline-block; width: 30px; height: 30px; border-radius:50%; background:var(--main); position: absolute; right:15px; top:50%; font-size:20px; margin-top: -15px; transition:all .3s linear;} 
.moreBtn:hover:before{transform:scale(15);}
.moreBtn font{position: relative; z-index: 2; vertical-align: top; display: inline-block; line-height: 58px; font-size:15px; font-weight:600; color:var(--main);  transition:all .3s linear;}
.moreBtn:hover font{color:#fff;}
.moreBtn .icon{display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align:center; border-radius:50%; color:#fff; position:absolute; right:15px; top:50%; font-size:20px; margin-top: -15px; transition:all .3s linear;}

 

/* ¸®½ºÆ® */
.num_list{counter-reset:list-number;}
.num_list li{counter-increment:list-number; font-size:1rem; letter-spacing:0; line-height:160%; box-sizing:border-box; position:relative; padding:0 0 16px 35px; color:#fff;}
.num_list li:last-child{padding-bottom:0;}
.num_list li:before{content:counter(list-number); display: inline-block; width: 26px; height:26px; line-height:26px; text-align:center; border-radius:50%; font-size:13px; font-weight: 700; color:#fff; background:rgba(255,255,255,.1); position: absolute; left: 0; top:0;}

.check_list{}
.check_list > li,
.check_list > dd{font-size:1rem; letter-spacing:0; line-height:150%; box-sizing:border-box; position:relative; padding:0 0 6px 28px;}
.check_list > li:last-child,
.check_list > dd:last-child{padding-bottom: 0;}
.check_list > li:before,
.check_list > dd:before{content:'\f88b'; font-family: "Material Symbols Outlined"; display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius:3px; color:var(--main); background:var(--grayBg); position: absolute; left: 0; top:2px; font-size:20px; text-align:center;}

.check_list.blue > li:before,
.check_list.blue > dd:before{background:var(--main); color:#fff;}


.dot_list{}
.dot_list > li,
.dot_list > dd{font-size:1rem; letter-spacing:0; line-height:150%; box-sizing:border-box; position:relative; padding:0 0 6px 9px;}
.dot_list > li:last-child,
.dot_list > dd:last-child{padding-bottom: 0;}
.dot_list > li:before,
.dot_list > dd:before{content:''; display: inline-block; width: 3px; height: 3px; background:var(--black); position: absolute; left: 0; top:11px;}



/* ÄÁÅÙÃ÷ */
.shadow{box-shadow:var(--shadow);}
.border{border:1px solid var(--border); box-sizing:border-box;}
.borderBox{box-sizing:border-box; border:1px solid var(--border); border-radius:var(--borderR20); padding:40px;}
.imgBox{box-sizing:border-box; text-align:center;}
.imgBox img{max-width:100%;}
.borderR_bg{width:calc(100% - 30px); margin: 0 auto; border-radius:var(--borderR20); overflow: hidden;}

.video_wrap{display:flex;}
.video_wrap li{width: calc((100% - 30px)/2); margin:0 30px 0 0; height: 0; padding-bottom: 30%; overflow: hidden; position: relative;}
.video_wrap li:last-child{margin:0;}
.video_wrap li iframe{display:inline-block; position:absolute; left:0; top:0; width:100% !important; height:100% !important;}

.img_pic{position: relative;}
.responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 100; display:none;}
.responsive-dim .stock-scroll-drag-guide{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);}

.stock-scroll-drag-guide {display:flex; justify-content:center;}
	.stock-scroll-drag-guide .stock-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.stock-scroll-drag-guide .stock-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:rgba(255,255,255,0.5); content:""; border-radius:5px;}
	.stock-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:stock-drag-hand 3s both infinite; }
	.stock-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color:#fff; border-radius:5px; opacity:1; }
	.stock-scroll-drag-guide .drag-tail .hand-icon{margin-top: 5px; display: block;}
	@keyframes stock-drag-hand {
		0% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		10% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}

/* Å×À̺í */
.table_pic{position: relative;}
.table_pic .responsive-dim{}
.table_pic .tableStyle_pic{}
.table_style{width:100%; border-collapse:separate; border-spacing:0px; border-top:2px solid var(--main);}
.table_style th{font-size:1rem; font-weight: 700; color:var(--black); letter-spacing:0; line-height:150%; padding:16px 0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box; text-align:center;}
.table_style th:last-child,
.table_style td:last-child{border-right: 0;}
.table_style td{font-size:1rem; letter-spacing:0; line-height:150%; padding:16px 32px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box;}
.table_style td.tit{color:var(--black); text-align:center;}



/*******************************************************************************
    @media 1460px
*******************************************************************************/
@media all and (max-width:1460px){



}


/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){



}

/*******************************************************************************
    @media  ~980px                body,html{font-size:14px; }     3%
*******************************************************************************/
@media all and (max-width:980px){


/* ¼­ºêž */
#visual{width: calc(100% - 20px); height: 400px; margin: 10px auto 0;}
#visual .v_txt h3{font-size:40px;}
#visual .v_txt p{padding: 12px 0 0;}


.lnb{}
.lnb .lnb_in{}
.lnb .lnb_in ul{}
.lnb .lnb_in ul li{padding: 0 20px;}
.lnb .lnb_in ul li a{line-height:60px;}


.subTitle{padding: 80px 0 30px;}
.subTitle h3{font-size:32px;}


/* css °øÅë */
.basicCont{margin:0 auto 100px;}

.sub_pad{padding: 100px 0;}
.sub_pad_t{padding: 100px 0 0;}
.sub_pad_b{padding: 0 0 100px;}

.sub_pad2{padding: 80px 0;}
.sub_pad2_t{padding: 80px 0 0;}
.sub_pad2_b{padding: 0 0 80px;}

.pad60{padding: 30px !important;}

.padT60{padding-top: 50px !important;}

.padB10{padding-bottom: 5px !important;}
.padB20{padding-bottom: 10px !important;}
.padB30{padding-bottom: 20px !important;}
.padB40{padding-bottom: 30px !important;}
.padB50{padding-bottom: 40px !important;}
.padB60{padding-bottom: 50px !important;}
.padB70{padding-bottom: 60px !important;}
.padB80{padding-bottom: 70px !important;}
.padB90{padding-bottom: 80px !important;}
.padB100{padding-bottom: 90px !important;}

.marB5{margin-bottom: 3px !important;}
.marB10{margin-bottom: 5px !important;}
.marB20{margin-bottom: 10px !important;}
.marB30{margin-bottom: 20px !important;}
.marB40{margin-bottom: 30px !important;}
.marB50{margin-bottom: 40px !important;}
.marB60{margin-bottom: 50px !important;}
.marB70{margin-bottom: 60px !important;}
.marB80{margin-bottom: 70px !important;}
.marB90{margin-bottom: 80px !important;}
.marB100{margin-bottom: 90px !important;}



/* ÅؽºÆ® */
.conTit{font-size:32px; margin: 0 0 30px;}
.conTit .point{font-size:14px;}
.conTit .point:before{top:3px;}
.fs30{font-size:24px;}
.fs26{font-size:20px;}
.fs22{font-size:18px; margin: 0 0 8px;}
.fs20{font-size:16px; margin: 0 0 6px;}
.fs19{font-size:15px;}
.subTit{font-size:28px;}
.subTit .point{font-size:14px;}

.dep_tit{font-size:20px; padding: 13px 0 0;}
.dep_tit:before{width:30px; height:3px;}


.cate_tit{font-size:13px; height:24px; line-height:22px; margin: 0 0 10px; margin: 0 0 8px;} 


.num{width: 30px; height:30px; line-height:30px; font-size:14px;}

/* ¹öÆ° */
.moreBtn{width:180px; height: 50px; padding:0 20px;}
.moreBtn:before{width: 25px; height: 25px; right:12px; font-size:20px; margin-top: -12px;} 
.moreBtn font{line-height: 48px; font-size:14px;}
.moreBtn .icon{width: 25px; height: 25px; line-height: 25px; right:12px; font-size:16px; margin-top: -12px;}

 

/* ¸®½ºÆ® */
.num_list li{padding:0 0 12px 26px;}
.num_list li:before{width: 20px; height:20px; line-height:20px; font-size:11px; top:1px;}

.check_list{}
.check_list > li,
.check_list > dd{padding:0 0 4px 24px;}
.check_list > li:before,
.check_list > dd:before{width: 18px; height: 18px; line-height: 18px; top:0; font-size:18px;}

.dot_list{}
.dot_list > li,
.dot_list > dd{padding:0 0 4px 9px;}
.dot_list > li:before,
.dot_list > dd:before{top:9px;}



/* ÄÁÅÙÃ÷ */
.borderBox{padding:30px;}
.borderR_bg{width:calc(100% - 20px);}

.video_wrap{}
.video_wrap li{width: calc((100% - 20px)/2); margin:0 20px 0 0;}




/* Å×À̺í */
.table_pic{}
.table_pic .responsive-dim{}
.table_pic .tableStyle_pic{}
.table_style{}
.table_style th{padding:12px 0;}
.table_style td{padding:12px 20px;}


}


/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
.img_pic{overflow-x: auto;}
.img_pic .imgPic_img{width: 780px;}
.responsive-dim{display:block;}

/* Å×À̺í */
.table_pic{overflow-x: auto;}
.table_pic .responsive-dim{}
.table_pic .tableStyle_pic{width: 780px;}
.table_style{}
.table_style th{padding:10px 0;}
.table_style td{padding:10px 15px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* ¼­ºêž */
#visual{height: 280px;}
#visual .v_txt h3{font-size:30px;}
#visual .v_txt p{padding: 8px 0 0;}


.lnb{}
.lnb .lnb_in{}
.lnb .lnb_in ul{}
.lnb .lnb_in ul li{padding: 0 15px;}
.lnb .lnb_in ul li a{line-height:50px;}


.subTitle{padding: 60px 0 20px;}
.subTitle h3{font-size:24px;}


/* css °øÅë */
.basicCont{margin:0 auto 60px;}


.sub_pad{padding: 60px 0;}
.sub_pad_t{padding: 60px 0 0;}
.sub_pad_b{padding: 0 0 60px;}


.sub_pad2{padding: 40px 0;}
.sub_pad2_t{padding: 40px 0 0;}
.sub_pad2_b{padding: 0 0 40px;}

.pad60{padding: 15px !important;}

.padT60{padding-top: 30px !important;}

.padB30{padding-bottom: 15px !important;}
.padB40{padding-bottom: 20px !important;}
.padB50{padding-bottom: 25px !important;}
.padB60{padding-bottom: 30px !important;}
.padB70{padding-bottom: 35px !important;}
.padB80{padding-bottom: 40px !important;}
.padB90{padding-bottom: 45px !important;}
.padB100{padding-bottom: 50px !important;}

.marB30{margin-bottom: 15px !important;}
.marB40{margin-bottom: 20px !important;}
.marB50{margin-bottom: 25px !important;}
.marB60{margin-bottom: 30px !important;}
.marB70{margin-bottom: 35px !important;}
.marB80{margin-bottom: 40px !important;}
.marB90{margin-bottom: 45px !important;}
.marB100{margin-bottom: 50px !important;}

/* ÅؽºÆ® */
.conTit{font-size:22px; margin: 0 0 20px; line-height: 130%;}
.conTit .point{font-size:13px; padding:0 0 0 13px; margin:0 0 6px;}
.conTit .point:before{width:7px; height:7px; top:4px;}
.fs30{font-size:19px;}
.fs26{font-size:18px;}
.fs22{font-size:16px; margin: 0 0 6px;}
.fs20{font-size:14px; margin: 0 0 4px;}
.fs19{font-size:13px;}
.subTit{font-size:18px; letter-spacing: 0; line-height: 135%;}
.subTit b{letter-spacing: 0; line-height: 135%; }
.subTit .point{font-size:13px; margin:0 0 6px;}
.underline{box-shadow: 0 -5px 0 rgba(45,51,135,.2) inset;}

.dep_tit{font-size:18px; padding: 10px 0 0;}
.dep_tit:before{width:20px; height:2px;}

.num{width: 26px; height:26px; line-height:26px; font-size:13px;}


.dot_list{}
.dot_list > li:before,
.dot_list > dd:before{top:7px;}


/* ÄÁÅÙÃ÷ */
.borderBox{padding:20px;}

.video_wrap{flex-wrap:wrap;}
.video_wrap li{width:100%; margin:0 0 10px; padding-bottom: 56.25%; }




}
/*******************************************************************************
    @media ~480px                body,html{font-size:13px; }
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}