/*------------------------------------
  product LIST
-------------------------------------*/

.inner_c {
    margin: 0 auto;
    max-width: 1600px;
}

.list_wrap {position: relative; width:100%;}
.list_wrap .prod_list {display:flex; flex-wrap:wrap; margin-left:-1.5%; overflow:hidden; padding: 0 30px;}

.list_wrap .prod_list .prod_box {position:relative; width:23%; margin:0 0 3% 2%; border:1px solid #E5E5E5; border-radius:3rem 0; overflow:hidden; text-align:center; box-sizing:border-box;}
.list_wrap .prod_list .prod_box:hover:after {position:absolute; top:0rem; left:0rem; width:100%; height:100%; content:''; border: .2rem solid #0f0fcf; border-radius: 3rem 0; box-sizing: border-box; z-index:-1}
.list_wrap .prod_list .prod_box a {display:block; width:100%; height:100%; padding: 3.5em 1.5em; box-sizing:border-box;}
.list_wrap .prod_list .prod_box .thumb {max-width:28.6rem; height:29.6rem; width: 100%; height: auto; overflow:hidden;}
.list_wrap .prod_list .prod_box .thumb img {display: block; width: 100%; max-width:100%; margin:0 auto; text-align: center; transition:.4s;}
.list_wrap .prod_list .prod_box:hover .thumb img {transform:scale(1.1); object-fit:cover;}
.list_wrap .prod_list .prod_box .info .tit {font-size: 1.8em; font-weight:600; line-height:1.4; margin:3rem 0 1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list_wrap .prod_list .prod_box .info .cate {color:#8D8D8D; margin-bottom:2rem; font-weight: 500; font-size: 1.3rem;}
.list_wrap .prod_list .prod_box .info .btn {
    position: relative;
    max-width: 9em;
    padding: 0.5em 1rem;
    border: 1px solid #515151;
    overflow: hidden;
    border-radius: 6em;
    font-weight: 300;
    font-size: 1.2em;
    margin: 0 auto;
    color: #737373;
}
border-radius:10rem; font-weight:600; font-size:1.6rem; margin: 0 auto;}
.list_wrap .prod_list .prod_box:hover .info .btn {color:var(--white-color); border-color:var(--main-color1);}
.list_wrap .prod_list .prod_box .info .btn:after {position: absolute; content: ''; width: 0; height: 100%; background: var(--main-color1); right: 0; top: 0; transition: all ease .3s; z-index: -1;}
.list_wrap .prod_list .prod_box:hover .info .btn:after {width:100%; left:0;}


@media screen and (max-width: 1600px) {
	.list_wrap .prod_list .prod_box a {padding:3rem 2rem;}
	.list_wrap .prod_list .prod_box .info .tit {font-size:1.7em;}
	.list_wrap .prod_list .prod_box .info .cate {font-size: 1.3em;}
	.list_wrap .prod_list .prod_box .info .btn {
    padding: 0.4em 0.4em;
    font-size: 1.4em;
}

}
@media screen and (max-width: 1200px) {
	.list_wrap .prod_list .prod_box .info .tit {font-size: 1.5em;}
	.list_wrap .prod_list .prod_box .info .cate {font-size: 1.2em;}
	.list_wrap .prod_list .prod_box .info .btn {padding: 0.4em 0.3em; font-size: 1.3em;}
}
@media screen and (max-width: 1023px) {
	.list_wrap .prod_list .prod_box {width:31.333%;}
	.list_wrap .prod_list .prod_box .info .tit {1.6em}
	.list_wrap .prod_list .prod_box .info .btn {
    padding: 0.4em;
    font-size: 1.3em;
}
/*.list_wrap .prod_list{ padding: 0 16px;}*/

}
@media screen and (max-width: 768px) {
	.list_wrap .prod_list {margin: 50px -1% 0 -5%;}
	.list_wrap .prod_list .prod_box {width:47%; margin:0 0 3% 3%; }
	.list_wrap .prod_list .prod_box a {padding:2rem;}
	.list_wrap .prod_list .prod_box .thumb {max-width:100%; margin:0 auto;}
	.list_wrap .prod_list .prod_box .info .tit {margin:2rem 0 .5rem 0;}
	.list_wrap .prod_list .prod_box .info .cate {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.list_wrap .prod_list .prod_box .info .btn {max-width:100%; font-size: 1.3em;}

}
@media screen and (max-width: 380px) {
	.list_wrap .prod_list .prod_box {width:100%;}
}


/*------------------------------------
  product VIEW
-------------------------------------*/
.view_wrap {position: relative; padding: 0 2%; }	
.view_wrap .goto_back {position: absolute; top: 4em; right: 6em;}
.view_wrap .goto_back a {background: #fff; position:relative; display:flex; padding: 0.8rem 1.2em; align-items: center;transition: all 0.2s linear; border:1px solid #aaaaaa; border-radius:4rem; font-size: 1.4em; font-weight:600; overflow:hidden;}
.view_wrap .goto_back a svg {position:relative; z-index:1; margin-right:1rem;}
.view_wrap .goto_back a span {position:relative; z-index:1;}

.view_wrap .goto_back:hover a {color:var(--white-color); border-color:var(--main-color1);}
.view_wrap .goto_back a:after {position: absolute; content: ''; width: 0; height: 100%; background: var(--main-color1); right: 0; top: 0; 
transition: all ease .3s; z-index: 0;}
.view_wrap .goto_back:hover a:after {width:100%; left:0;}

.view_wrap .prod_top {width:100%; height: 41em; display:flex; justify-content: flex-start; border:2px solid #ddd; border-radius:5rem 0; 
margin-bottom:3rem; overflow:hidden;}
.view_wrap .prod_top .thumb {width:50%; height: 100%; overflow: hidden; display:flex; align-items: center;}
.view_wrap .prod_top .thumb img {width: auto; max-width:100%; height:auto; display: block; margin:0 auto;}
.view_wrap .prod_top .info {width:50%; display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap;
padding: 0 5%; box-sizing:border-box; background:#F5F7F9;}


.view_wrap .prod_top .info .tit {max-width:100%;} 
.view_wrap .prod_top .info .tit h3 {font-size: 2.6em; line-height:1.2; margin-bottom:.8rem; /*white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;*/ color:var(--black-color);}
.view_wrap .prod_top .info .tit span {font-size: 1.5em; color:#8D8D8D; font-weight:500;}
.view_wrap .prod_top .info .cont {border-top: 4px solid #616161; margin-top:1.5rem; padding-top:1.5rem; line-height:1.6; font-weight:400;}
.view_wrap .prod_top .info .cont .desc1 {font-weight:600; margin-bottom:1.6em; font-size:1.6em; word-break: keep-all; line-height: 1.5;}
.view_wrap .prod_top .info .cont .desc2 {color: #7d7d7d; font-weight:500; font-size: 1.3em;}
.view_wrap .prod_cont {position: relative; width: 100%;}
.view_wrap .prod_cont img {/*min-width: 80%;*/ max-height: 1200px; height: auto !important; max-width:100% !important;}
.view_wrap .prod_cont .img_center {margin: 5em 0; text-align:center;}

@media screen and (max-width: 1600px) { 
	.view_wrap .goto_back a {/*padding:1.2rem 1.5rem; font-size:1.5rem;*/}  

	.view_wrap .prod_top {/*height:52rem;*/}
	.view_wrap .prod_top .info .tit h3 {/*font-size: 2em; line-height:1;*/}
	.view_wrap .prod_top .info .tit span {/*font-size: 2rem;*/}
	.view_wrap .prod_top .info .cont {/*margin-top:2rem; padding-top:2rem;*/}
	.view_wrap .prod_top .info .cont .desc1 {/*font-size:2rem;*/}

}
@media screen and (max-width: 1200px) {
	.view_wrap .goto_back a {padding:1rem 1.2rem; font-size:1.4rem;}  

	.view_wrap .prod_top {margin-bottom:8rem;}
	.view_wrap .prod_top .info .tit h3 {font-size: 2.3em;}
	.view_wrap .prod_top .info .tit span {font-size: 1.3em;}
	.view_wrap .prod_top .info .cont .desc1 {font-size:1.5em;}

}
@media screen and (max-width: 1023px) {
	.view_wrap .goto_back {top:2rem; right:2rem;}
	.view_wrap .goto_back a {padding:.8rem 1rem; background: #fff;}
	.view_wrap .goto_back a svg {margin-right:.5rem;}
	.view_wrap .prod_top {height:auto; flex-direction: column;}

	.view_wrap .prod_top {margin-bottom: 1em; border-radius:3rem 0;}
	.view_wrap .prod_top .thumb, 
	.view_wrap .prod_top .info {width:100%;}
	.view_wrap .prod_top .info {padding:3rem;}

	.view_wrap .prod_top .info .tit h3 {font-size: 1.9em;}
	.view_wrap .prod_top .info .tit span {font-size: 1.3em;}

	.view_wrap .prod_top .info .cont {margin-top:.5rem; padding-top:.5rem;}
	.view_wrap .prod_top .info .cont .desc1 {font-size: 1.4em; margin-bottom:1rem;}
	.view_wrap .prod_top .info .cont {border-top: 2px solid #616161;}
	.view_wrap .prod_cont .img_center {margin: 2em 0;}


}
@media screen and (max-width: 768px) {
	.view_wrap {margin-top:0;}
	/*.view_wrap .goto_back {display:none;}*/
	.view_wrap .goto_back a {padding: .6em 1.8em; font-size:1em;}
	.view_wrap .goto_back a svg {width:1.8rem;}


	.view_wrap .prod_top .thumb {max-height:40rem;}
	.view_wrap .prod_top .thumb img {max-height:40rem;}

	.view_wrap .prod_top {margin-bottom: 5em;} 
	.view_wrap .prod_top .info .tit h3 {/*font-size: 2rem;*/}
	.view_wrap .prod_top .info .tit span {/*font-size: 1.4rem;*/}

	.view_wrap .prod_top .info .cont .desc1 {/*font-size:1.5rem;*/}

}

/*------------------------------------
  table style1
-------------------------------------*/
.table_wp .table1 {font-size: 1.3em; width:100%; border-bottom: 1px solid #474747; border-top: 2px solid #000; border-bottom: 1px solid #ccc;}
.table_wp table caption {font-size:0; text-indent:-9999px;}
.table_wp .table1 thead th {/*font-size: 1.8rem;*/ padding: 1.2em 1.2em; border-left:1px solid #121212; word-break:keep-all;}
.table_wp .table1 thead th:first-of-type {border-width:1px 1px 1px 0;}
.table_wp .table1 thead tr:first-child th {text-align: center; border-bottom:1px solid #717171;}

.table_wp .table1 tbody th {/*font-size: 1.8rem;*/ padding: 1em 1.2em; word-break:keep-all;}
.table_wp .table1 tbody td {/*padding: 1.8rem 2rem;*/ padding: 1.2em 0.5em; text-align: center; color: #737373; border-left: 1px solid #d9d9d9}
.table_wp .table1 tbody th:first-of-type {text-align: center; border-width:1px 1px 1px 0;}
.table_wp .table1 tbody tr ~ tr > * {border-top: 1px solid #efefef; border-left: 1px solid #d9d9d9;} 
.table_wp .table1 tbody th[rowspan]:first-of-type {border-right:1px solid #d9d9d9;}

.table_wp.gray .table1 {border-bottom: 1px solid #d9d9d9; }
.table_wp.gray .table1 th {background: var(--bg-color2); font-weight: 600; color: #111; padding: 1.8rem 4rem; border-color:#d9d9d9; border-left:1px solid #d9d9d9;}
.table_wp.gray .table1 thead th,
.table_wp.gray .table1 thead tr:first-child th {border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;}
.table_wp.gray .table1 thead tr:first-child th:first-child {border-left:0;}
.table_wp.gray .table1 td {padding: 1.8rem 4rem; }
.table_wp.gray .table1 tr:first-child th {border-bottom:0;}
.table_wp.gray .table1 tbody tr ~ tr > * {border-left: 1px solid #d9d9d9;}
.table_wp.gray .table1 tbody tr th:first-child {border-left:0;}
.table_wp.gray .table1 tbody td {border-left: 1px solid #d9d9d9;}

.table_wp .guide_box {display:none; padding:1rem 2rem; margin-bottom:2rem; border:1px dotted #ddd;}
.table_wp .guide_box p {padding:1rem 3rem; background:url(../_Img/sub/ico_drag.png)no-repeat 0 50% / 2rem;}

/******************************1200******************************/
@media all and (max-width:1200px){ 
	.table_wp .table1 thead th {padding: 1.6rem 1.8rem;}

	.table_wp .table1 tbody th,
	.table_wp .table1 tbody td {padding: 1.6rem 1.8rem;}
 
	.table_wp.gray .table1 th,
	.table_wp.gray .table1 td {padding: 1.6rem 1.8rem;}

}
/******************************1023******************************/
@media all and (max-width:1023px){
	.table_wp .table1 thead th {padding: 1.4rem 1.5rem;}

	.table_wp .table1 tbody th,
	.table_wp .table1 tbody td {padding: 1.4rem 1.5rem;}
 
	.table_wp.gray .table1 th,
	.table_wp.gray .table1 td {padding: 1.4rem 1.5rem;}
}
/******************************768******************************/
@media all and (max-width:768px){
	.table_wp {position:relative; overflow-y: hidden;}
	.table_wp .scroll {overflow-x: auto;} 
	.table_wp .table1 {min-width: 31em;;}
	.table_wp .table1 thead th {padding: 1.2rem 1rem;}

	.table_wp .table1 tbody th,
	.table_wp .table1 tbody td {padding:0.7em 0.7em; }
 
	.table_wp.gray .table1 th,
	.table_wp.gray .table1 td {padding: 0.7em 0.5em;;}

	.table_wp .guide_box {display:block;}
}

 

/*------------------------------------
  txt
-------------------------------------*/
.point_txt {position:relative; display:inline-block; font-size:1.6rem; padding-left:2.5rem; font-weight:500 !important; color:var(--text-color)!important; }
.point_txt:before {position:absolute; left:0; top:.5rem; width:1.5rem; height:1.5rem; content:''; 
background: url(../images/common/ico_point.png)no-repeat 0 50%; }


/******************************1023******************************/
@media all and (max-width:1023px){
	.point_txt {font-size:1.5rem;}

}
/******************************768******************************/
@media all and (max-width:768px){
	.point_txt {font-size:1.4rem; line-height:1.3 !important;}
}


/*------------------------------------
  dot_box
-------------------------------------*/
.dot_wp {display:flex; margin:4rem 0 0 -2%; }
.dot_wp dl {width:48%; margin:0 0 0 2%}
.dot_wp dl dt {position:relative; z-index:1; width:auto; max-width:26rem; height:4.2rem; display:flex; justify-content: center; align-items: center; background: #8D8D8D; border-radius:6rem;
color:var(--white-color); margin-left:2rem;}
.dot_wp dl dd {min-height: 11rem; margin:-2rem 0 0 0; border:2px dotted #8D8D8D; padding:4rem; border-radius:1rem;}
.dot_wp dl dd p {line-height:1.4; margin-top:1rem;}
.dot_wp dl dd p:nth-of-type(1) {margin-top:0;}


/******************************1023******************************/
@media all and (max-width:1023px){
	.dot_wp {margin:3rem 0 0 0; flex-wrap:wrap;}
	.dot_wp dl {width:100%; margin:0; margin-bottom: 2rem;}
	.dot_wp dl dt {max-width:90%; margin:0 5%; height:3.5rem;}
	.dot_wp dl dd {min-height: auto; padding:3rem;}
}
/******************************768******************************/
@media all and (max-width:768px){
 
}


/*------------------------------------
  btn
-------------------------------------*/
.link_btn {position:relative; padding:1.4rem 3rem; border:1px solid #515151; overflow:hidden; border-radius:1rem 0; font-weight:600;
font-size:1.6rem; margin: 0 auto; display:inline-block;}
.link_btn:hover {color:var(--white-color); border-color:var(--main-color1);}
.link_btn:after {position: absolute; content: ''; width: 0; height: 100%; background: var(--main-color1); right: 0; top: 0; 
transition: all ease .3s; z-index: -1; z-index:-1;}
.link_btn:hover:after {width:100%; left:0; overflow:hidden;}

/******************************1023******************************/
@media all and (max-width:1023px){
	/*------------------------------------
	  btn
	-------------------------------------*/
	.link_btn {padding:1.2rem 2rem; font-size:1.5rem; }
}
/******************************768******************************/
@media all and (max-width:768px){
	/*------------------------------------
	  btn
	-------------------------------------*/
	.link_btn {padding:1rem 1.5rem; font-size:1.4rem; }
}

#contents .sect strong.tit.mt {margin:8rem 0 0 0;}

#page_contents .sect {/*display:flex;*/ margin-bottom:0;}
#page_contents .sect .cont_title {width:37em;}
#page_contents .sect .cont_title h3 {max-width:85%; font-size:3em; letter-spacing: -0.05em; word-break: keep-all; color: #0606d3;}
@media all and (max-width:1023px){
	#page_contents .sect .cont_title h3 {font-size:2.3em;}

#page_contents .sect .cont_title h3 span {display:block; font-size:2rem; letter-spacing:-0.03em;}
#page_contents .sect .cont_detail {width:calc(100% - 16em); } 
#page_contents .sect .cont_detail > p {padding-left: 1.5em;font-size: 1.2em; letter-spacing:-0.02em; margin-bottom:2rem; line-height: 2.5; word-break:keep-all; font-weight:400; color:#121212;
font-family:'Pretendard','Suit',sans-serif;}

#page_contents .sect .cont_detail hr.blank {font-size:0; border:0; margin-bottom:6rem;}
.point_txt {position:relative; display:inline-block; font-size:1.6rem; padding-left:2.5rem; font-weight:500 !important; color:var(--text-color)!important; }
.point_txt:before {position:absolute; left:0; top:.5rem; width:1.5rem; height:1.5rem; content:''; 
background: url(../_Img/sub/ico_point.png)no-repeat 0 50%; }
}

@media all and (max-width:1023px){
	#contents {padding:6rem 0;} 
	#contents .sect h4 {font-size: 1.7em; margin:0 0 1.2rem 0;}
	#contents .sect h4.tit.mt {margin-top:4rem;}
	#contents .sect strong.tit {font-size:1.8rem; padding:1rem 0 1rem 1.8rem;}
	#contents .sect strong.tit:before {top:2rem;}
	#contents .sect strong.tit.mt {margin:4rem 0 0 0;}

	#page_contents .sect {/*margin-bottom: 8rem;*/ flex-direction: column;}
	#page_contents .sect .cont_title {width:100%; margin-bottom:2rem;}
	#page_contents .sect .cont_title h3		font-size:2.8rem;
	#page_contents .sect .cont_title h3 span {font-size:1.6rem;}

	#page_contents .sect .cont_detail {width:100%;}
	#page_contents .sect .cont_detail > p {margin-bottom: 0.7em; line-height:1.6; padding-top: 0.5em;}
	
	#page_contents .sect .cont_detail hr.blank {margin-bottom:4rem;}


}
