@charset "utf-8";

/************************************************
	layout
************************************************/

#wrap{ position:relative; width:100%; min-width:1300px; overflow:hidden; border-top:#003876 5px solid;}
.wrap-blue{border-top:#003876 5px solid !important;}

header{ position:relative; background-color:#fff; z-index:6;}
header .inner{ position:relative; height:103px; width:1300px; margin:0 auto;}
header h1.logo{ position:absolute; top:32px; left:0; }
header h1.logo a{ display:block; background:url(../../images/common/kr_logo.png) 50% 50% no-repeat; text-indent:-9999px; width:170px; height:38px;}
header .utill-mn{ position:absolute; top:44px; right:185px; width:91px; font-size:11px; z-index:9;}
header .utill-mn>button{ border:#e0e0e0 1px solid; background:#f3f3f3; display:block; width:100%; line-height:25px;}
header .utill-mn ul{ position:absolute; top:25px; left:0; width:100%;display:none; vertical-align:middle; margin:0; border:#e0e0e0 1px solid; background:#fff;}
header .utill-mn ul li{ position:relative; z-index:1; padding:0 10px;}
header .utill-mn ul li a{ display:block; line-height:30px; border-top:#e0e0e0 1px solid; text-align:center; font-size:11px;}
header .utill-mn ul li a:after{ content:""; position:absolute; top:50%; left:-1px; margin-top:-4px; height:9px; width:1px; background:#d6d6d6; z-index:1;}
header .utill-mn ul li:first-child a{ border-top:none;}
header .web .ls-brn{ position:absolute; top:35px; right:0; width:156px; display:block;}

#gnb-wrap{ margin:0 0 0 270px;/*2018-04-23:0 0 0 22%*/ padding:10px 314px 0 0;/*2018-04-23:10px 270px 0 0*/}
#gnb-wrap:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
#gnb-wrap #gnb>li{ float:left; width:20%;/*2018-04-23 width:16.5%에서 수정*/}
#gnb-wrap #gnb>li.gnb3{width: 10%;}
#gnb-wrap #gnb>li>a{ display:block; padding:0; color:#000; font-size:18px; line-height:93px;/*93*/ text-align:center;}
#gnb-wrap #gnb>li.active>a{ color:#003876;}
#gnb-wrap #gnb>li .subdepth{ position:absolute; left:0; top:100px; width:100%; padding:30px 50px 30px 0; z-index:9; display:none;}
#gnb-wrap #gnb>li .subdepth:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
#gnb-wrap #gnb>li .subdepth .sub-tit{ float:left; width:20%;  text-align:center; padding:0 0 145px 0;}
#gnb-wrap #gnb>li .subdepth .sub-tit strong{ color:#003876; font-size:30px; text-align:center; font-weight:normal; display:block;}{ color:#cd181e; font-size:30px; text-align:center; font-weight:normal; display:block;}
#gnb-wrap #gnb>li .subdepth .list-wrap{ float:left; width:80%; background-color:#fff; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list{ width:100%; display:table; min-height:200px;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list3{width: 67%;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li{ display:table-cell; width:25%; border-left:#e5e5e5 1px solid; padding:0 0 0 20px;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li em{ font-size:16px; color:#333; display:block; margin:0 0 10px 0;}
#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li{ padding:0 20px;}
#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li a:first-child{display: block;width:45px ;margin: 0 auto 20px;}
#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li em{ color:#000; /*padding:65px 0 0 0; */text-align:center;}
/*#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li em.subdepth0501{ background:url(../../images/common/icon_gnb0501.png) 50% 0 no-repeat;}
#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li em.subdepth0502{ background:url(../../images/common/icon_gnb0502.png) 50% 0 no-repeat;}
#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li em.subdepth0503{ background:url(../../images/common/icon_gnb0503.png) 50% 0 no-repeat;}
#gnb-wrap #gnb>li.gnb6 .subdepth .list-wrap>.list>li em.subdepth0504{ background:url(../../images/common/icon_gnb0504.png) 50% 0 no-repeat;}*/
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li>ul>li>a{ display:block; font-size:13px; padding:0}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li>ul>li>a:before{ content:""; width:2px; height:2px; margin:0 6px 0 0; display:inline-block; vertical-align:middle; background:#7b7b7b;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li>ul>li>ul>li>a{display:block; font-size:13px;margin-left:10px; padding:0;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li>ul>li>ul>li>a:before{ content:""; width:5px; height:1px; margin:0 9px 0 0; display:inline-block; vertical-align:middle; background:#7b7b7b;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li>ul+em{ margin-top:30px;}
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap>ul{ display:none !important; margin:10px 0 0 0; padding:0; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap:hover>ul{ display:block !important; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap>ul>li>a{ display:block; font-size:13px; padding:0; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap>ul>li>a:before{ content:""; width:2px; height:2px; margin:0 6px 0 0; display:inline-block; vertical-align:middle; background:#7b7b7b; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap>em .sub-arrow{ font-size:14px; font-style:normal; font-weight:bold; margin-left:4px; display:inline-block; transition:transform 0.2s; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap:hover>em>a{ color:#003876; text-decoration:none; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap>em>a{ text-decoration:none; }
#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li .sub-wrap:hover>em .sub-arrow{ transform:rotate(90deg); }
#gnb-wrap #gnb>li.gnb1 .subdepth .sub-tit{ background:#fff url(../../images/common/gnb_bg1.gif) 50% 110px no-repeat;}
#gnb-wrap #gnb>li.gnb2 .subdepth .sub-tit{ background:#fff url(../../images/common/gnb_bg2.gif) 50% 110px no-repeat;}
#gnb-wrap #gnb>li.gnb3 .subdepth .sub-tit{ background:#fff url(../../images/common/gnb_bg3.gif) 50% 110px no-repeat;}
#gnb-wrap #gnb>li.gnb4 .subdepth .sub-tit{ background:#fff url(../../images/common/gnb_bg4.gif) 50% 110px no-repeat;}
#gnb-wrap #gnb>li.gnb5 .subdepth .sub-tit{ background:#fff url(../../images/common/gnb_bg5.gif) 50% 110px no-repeat;}
#gnb-wrap #gnb>li.gnb6 .subdepth .sub-tit{ background:#fff url(../../images/common/gnb_bg6.gif) 50% 110px no-repeat;}



header .sub-bg{ position:absolute; left:0; top:104px; width:100%; background-color:#fff; z-index:1; }
#gnb-wrap #gnb>li .subdepth .bt-close{ position:absolute; top:30px; right:30px; width:26px; height:26px; background:url(../../images/common/bt_x2.png) 50% 50% no-repeat;}
#gnb-wrap #gnb>li .subdepth .bt-close span{ position:absolute; lrft:-9999px; top:-9999px; text-indent:-9999px;}

.mobile{ display:none;}

#container{ position:relative;width: 100%;height: 100%; z-index:1; padding:0 0 50px; background:#eee;}
#contents{ position:relative; width:1200px; margin:0 auto; background:#fff; z-index:1;}
#contents .div-inner{ padding:70px 50px 70px; }
#container .div-main{ position:relative; width:1300px; margin:0 auto; padding:30px 0 0; z-index:1;}
#container .div-main:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
.h3-tit{ font-size:32px; color:#111; margin:80px 0 20px; font-weight:500;}
.h3-tit2{ font-size:24px; color:#111; margin:60px 0 10px; font-weight:500;}
.h3-tit3{position:relative; font-size:24px; color:#111; margin:60px 0 10px; font-weight:500;}
.h3-tit4{ font-size:24px; color:#111; margin:60px 0 20px; font-weight:500;}
.h4-tit{ font-size:24px; color:#111; margin:70px 0 10px; font-weight:500;}
.h4-tit2{ font-size:20px; color:#111; margin:30px 0 20px; font-weight:500;}
.h4-tit3{ font-size:18px; color:#111; margin:30px 0 10px; font-weight:500;}
.h5-tit{ font-size:20px; color:#333; margin:30px 0 20px; font-weight:500;}

footer{ position:relative; background-color:#fff; z-index:5; border-top:#d8d8d8 1px solid;  font-size:13px;}
footer .inner{ position:relative; padding:28px 0; width:1300px; margin:0 auto;}
footer .footer-link:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
footer .footer-link>li{ float:left;}
footer .footer-link>li>a{ position:relative;  display:block; padding:0 8px 0 9px; color:#000;}
footer .footer-link>li>a:after{ content:""; position:absolute; top:50%; left:0; margin-top:-5px; display:block; background-color:#bcbcbc; width:1px; height:10px;}
footer .footer-link>li:first-child a{ padding-left:0;}
footer .footer-link>li:first-child a:after{ display:none;}
footer .footer-link>li.bold {font-weight: 700;font-size: 14px}
footer .footer-link>li.bold  a {line-height: 1.4em;}
footer .footer-link>li .utill-mn{ position:relative; width:91px; font-size:11px; z-index:9; display:none;}
footer .footer-link>li .utill-mn:after{ content:""; position:absolute; top:50%; left:0; margin-top:-5px; display:block; background-color:#bcbcbc; width:1px; height:10px;}
footer .footer-link>li .utill-mn>button{ border:none; background:#fff url(../../images/common/blt_flink.gif) 96% 50% no-repeat; display:block; width:100%; line-height:25px;}
footer .footer-link>li .utill-mn ul{ position:absolute; bottom:25px; left:0; width:100%;display:none; vertical-align:middle; margin:0; border:#e0e0e0 1px solid; background:#fff;}
footer .footer-link>li .utill-mn ul li{ position:relative; z-index:1; padding:0 10px; width:100%;}
footer .footer-link>li .utill-mn ul li a{ display:block; line-height:30px; border-top:#e0e0e0 1px solid; text-align:center; font-size:11px;}
footer .footer-link>li .utill-mn ul li a:after{ content:""; position:absolute; top:50%; left:-1px; margin-top:-4px; height:9px; width:1px; background:#d6d6d6; z-index:1;}
footer .footer-link>li .utill-mn ul li:first-child a{ border-top:none;}
footer address{ clear:both; margin:5px 0; font-size:13px; color:#555;}
footer address span{ display:inline-block; margin:0 10px 0 0;}
footer .copy{ color:#767676; font-size:12px;}
footer .f-link{ position:absolute; top:28px; right:0; border:#ccc 1px solid; margin:10px 0; width:145px; }
footer .f-link .bt-link{ width:100%; height:30px; line-height:30px; display:block; text-align:left; padding:0 0 0 14px; background:#fff url(../../images/common/blt_flink.gif) 96% 50% no-repeat;}
footer .f-link>ul{ position:absolute; bottom:30px; left:0; width:100%; border:#ccc 1px solid; display:none; background:#fff;}
footer .f-link>ul li a{ display:block; padding:5px 10px; font-size:12px;}
footer .ls-brn{ display:none;}


/* BreadCrumb */
.location{ border-top:#e7e7e7 1px solid; border-bottom:#e7e7e7 1px solid; background:#fff; margin:0 0 40px 0;}
.location:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
.location .path{ width:1200px; margin:0 auto;}
.location .path .point{ }
.location .path > li{ position:relative; float:left; line-height:41px; min-width:230px; text-align:left;}
.location .path > li.menuTop1{ width:210px;}
.location .path > li > a{ display:block; padding-left:14px; font-size:14px; color:#333; line-height:41px; padding-right:40px;  border-right:#e7e7e7 1px solid; }
.location .path > li > a:after{ content:""; position:absolute; top:50%; right:15px; width:11px; height:6px; margin-top:-3px; background:url(../../images/common/blt_arr.gif) 0 0 no-repeat; display:block;}
.location .path > li.on > a,
.location .path > li > a:focus,
.location .path > li > a:hover{ text-decoration:underline}
.location .path > li > a img{vertical-align:0}
.location .path > li:first-child{ margin-left:0; padding-left:0; background-image:none; width:50px; min-width:50px;}
.location .path > li:first-child > a:after{ display:none;}
.location .path > li:first-child > a{ width:50px; line-height:41px; padding-right:0; background:#003876 url(../../images/common/icon_home.png) 50% 50% no-repeat; text-indent:-9999px}
.location .path > li:first-child > a:hover, .location .path > li:first-child > a:focus{ }
.location .path .sub-path{ display:none; position:absolute; top:41px; left:0; z-index:30; width:100%;}
.location .path .sub-path.show,.location .path .low_path.show
.location .path > li.on .sub-path,.location .path > li:hover .sub-path{ display:block;}
.location .path .sub-path .pointer{ position:absolute; top:0; left:17px; width:15px; height:8px;}
.location .path .sub-path ul{ background-color:#fff; border:1px solid #e1e1e1;}
.location .path .sub-path ul li{ position:relative; border-top:1px solid #e1e1e1;}
.location .path .sub-path ul li:first-child{ border-top:0 none;}
.location .path .sub-path ul li > a{ display:block; min-width:147px; height:29px; padding:0 10px 0 14px; font-size:13px; color:#555; line-height:29px;}
.location .path .sub-path ul li.on > a ,
.location .path .sub-path ul li > a:focus,
.location .path .sub-path ul li > a:hover{ background-color:#efefef;font-weight:bold;color:#003876}
.location .path .sub-path ul li > a.low_none{ }
.location .path .low_path{}

.location .path .low_path{display:none;position:absolute;left:100%;top:-1px;background-color:#fff;min-width:149px}
.location .path .low_path li > a{display:block;height:25px;padding-left:22px;font-size:12px;color:#555;line-height:25px}
.location .path .low_path li > a:focus,
.location .path .low_path li > a:hover{background-position:right -29px;background-color:#efefef;color:#003876}
.location .path .low_path2{display:none;position:absolute;left:100%;top:-1px;background-color:#fff;min-width:149px}
.location .path .low_path2 li > a{display:block;height:25px;padding-left:22px;font-size:12px;color:#555;line-height:25px}
.location .path .low_path2 li > a:focus,
.location .path .low_path2 li > a:hover{background-color:#efefef;color:#003876}
.location .path .low_path3{display:none;position:absolute;left:100%;top:-1px;background-color:#fff;min-width:149px}
.location .path .low_path3 li > a{display:block;height:25px;padding-left:22px;font-size:12px;color:#555;line-height:25px}
.location .path .low_path3 li > a:focus,
.location .path .low_path3 li > a:hover{background-color:#efefef;color:#003876}
.breadcrumb .bc_box .brc_sub{position:absolute;top:0;right:0}
.breadcrumb .bc_box .brc_sub li{float:left;margin-left:1px}
.breadcrumb .bc_box .brc_sub li:first-child{margin-left:0}
.breadcrumb .bc_box .btn_top{display:none;/*position:absolute;top:0;right:-49px*/position:fixed;top:0;left:50%;margin-left:511px}

.tit-area{ position:relative; height:120px;     background: linear-gradient(90deg, #003876 0%, #12559F 100%); z-index:2; display:table; width:100%;}
.tit-area.tit-area2{ position:relative; height:120px;     background: linear-gradient(90deg, #003876 0%, #12559F 100%); z-index:2; display:table; width:100%;}
body.intro .tit-area{ background:#404040 url(../../images/common/bg_tit_intro.gif) 0 0 no-repeat;}
body.recruit .tit-area{ background:#404040 url(../../images/common/bg_tit_rec.gif) 0 0 no-repeat;}
body.social .tit-area{ background:#404040 url(../../images/common/bg_tit_social.gif) 0 0 no-repeat;}
body.invest .tit-area{ background:#404040 url(../../images/common/bg_tit_ir.gif) 0 0 no-repeat;}
body.customer .tit-area{ background:#404040 url(../../images/common/bg_tit_customer.gif) 0 0 no-repeat;}
.tit-area.has-bt{ padding-right:190px;}
.tit-area .bt-allpro{ position:absolute; top:0; right:0; background:#e3002b; color:#fff; display:block; height:120px; line-height:120px; font-size:19px; width:190px; }
.tit-area h2{ display:table-cell; color:#fff; font-size:30px; line-height:1.1em; vertical-align:middle; text-align:center; }
.tit-area h2 span.sup {display: block;font-size: 20px}
.tit-area .bt-prev{ position:absolute; top:50%; left:30px; margin-top:-21px; display:inline-block; color:#b9b9b9; font-size:13px; padding:0 0 0 40px; line-height:42px; text-align:left; background:url(../../images/common/bt_arr_prev.png) 0 50% no-repeat;}
.tit-area .bt-next{ position:absolute; top:50%; right:30px; margin-top:-21px; display:inline-block; color:#b9b9b9; font-size:13px; padding:0 40px 0 0; line-height:42px; text-align:right; background:url(../../images/common/bt_arr_next.png) 100% 50% no-repeat;}
.tit-area.has-bt .bt-next{ right:220px;}
.product-all{ display:none; position:absolute; top:120px; left:0; width:100%; background:#fff; }
.product-all.show{ display:block; position:relative; top:auto; left:auto; }
.product-all:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
.product-all .cate-bx{ width:320px; float:left; margin:0 40px;}
.product-all.show .cate-bx{ width:33.3%; float:left; margin:0; padding:0 2%;}
.product-all .cate-bx:nth-child(4){ clear:both;}
.product-all .cate-bx h3{ height:60px; line-height:60px; text-align:center; color:#111; font-size:22px; border-bottom:#404040 2px solid; margin:0 0 15px 0;}
.product-all .cate-bx ul li a{ display:block;}
.product-all .cate-bx>ul>li>ul{ margin:0 0 10px 0;}
.product-all .cate-bx>ul>li>a,
.product-all .cate-bx>ul>li>span{ color:#003876; font-size:16px; line-height:32px; padding:0 0 0 4px;}
.product-all .cate-bx>ul>li>ul>li>a{ position:relative; color:#747474; font-size:14px; line-height:26px; padding:0 0 0 15px;}
.product-all .cate-bx>ul>li>ul>li>a:after{ content:""; position:absolute; width:3px; height:3px; border-radius:3px; background:#747474; top:50%; left:4px; margin-top:-2px;}
.product-all .bt-close{ position:absolute; top:-120px; right:0; width:190px; height:120px; background:#e3002b url(../../images/common/bt_close.png) 50% 50% no-repeat; padding:86px 0 0 0; color:#fff; font-size:14px;}

.m-loc{  display:none;}

#back-top{ position:fixed; bottom:145px; left:50%; margin:0 0 0 650px; z-index:6; width:35px; height:35px; border-radius:50%; background:#003876 url(../../images/common/arr_up.png) 50% 50% no-repeat; background-size:11px 7px; color:#333; text-indent:-9999px; padding:0;}


/* 리뉴얼 제품페이지 css */
.product-overview{
	width: 100%;
	display: flex;
	flex-direction: column;
}
.overview-header{
	width: 100%;
	height: 255px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: center;
	padding-left: 60px;
	/* 백그라운드 부분 배경 개발 */
	background: url(../../images/product/partnerList_img1.png) center center no-repeat;
	background-size:cover ;
}
.benefits-header{
	background: url(../../images/product/benefits.png) center center no-repeat;
}
.overview-header h1{
	font-size: 36px;
	font-weight: 700;
	color: #ffffff;
	line-height: 50px;
}
.overview-header p{
	font-size: 20px;
	font-weight: 100;
	color: #ffffff;
}
.product-list{
	width: 100%;
	padding: 48px;
	display: flex;
	flex-wrap: wrap;
  	gap: 24px;
}

a.product-item {
	width: calc(50% - 12px);
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;

	text-decoration: none;
	color: inherit;

	transition: all 0.25s ease;
}
.product_more_icon{
	display: flex;
	align-items: center;
	justify-content: center;
}
.product_more_icon img{
	display: block;
	transition: transform 0.35s ease;
	transform-origin: center center;
}
a.product-item:hover .product_more_icon img{
	transform: rotate(90deg);
}
.product_title_wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.product-item h1{
	font-size: 22px;
	font-weight: 700;
	color: #003876;
}
.product-item p{
	font-size: 14px;
	font-weight: 200;
	color: #666666;
}
.category_list.category_list--subtab{
	width: 100%;
	padding: 25px 24px 0 24px;
	overflow-x: auto;
	border-bottom: 1px solid #DEDEDE;
}
.sub-tab{
	width: 100%;
	padding: 9px 24px 0 24px;
	overflow-x: auto;
	border-bottom: 1px solid #DEDEDE;
}
.sub-tab-list,
.category_list.category_list--subtab .category_list-list{
	display: flex;
	gap: 18px;
	width: fit-content;
}
.sub-tab-item,
.category_list.category_list--subtab .category_item {
  padding: 16px 14px;
  color: #579BE5;
  font-size: 14px;
  font-weight: 100;
  white-space: nowrap;
  position: relative;
  transition: 0.3s;
  text-decoration: none;
  display: block;
}

.sub-tab-item:hover,
.category_list.category_list--subtab .category_item:hover {
  color: #003876;
  text-decoration: none;
}
.sub-tab-item.on,
.category_list.category_list--subtab .category_item.on{
	font-weight: 700;
	color: #003876;
}
.category_list.category_list--subtab .category_item.on:after{
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #003876;
}
.m-category-list{
	width: 100%;
	height: 40px;
	position: relative;
	display: none;
}
.m-category-header{
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	border-top: 1px solid #DEDEDE;
	cursor: pointer;
}
.m-category-header h1{
	font-size: 14px;
	font-weight: 700;
	color: #111111;
}
.m-category-box{
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	background-color: #fff;
	display: none;
	z-index: 2;
}
.m-category-item{
	width: 100%;
	height: 35px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 500;
	background-color: #F8F8F8;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-bottom: 1px solid #ffffff;
	color: #111111;
	text-decoration: none;
}
.m-category-item:last-child{
	border-bottom: 1px solid #DEDEDE;
}
.m-category-icon{
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}
.m-category-list.active .m-category-icon{
	transform: rotate(-90deg);
}
.product-section{
	padding-bottom: 70px;
}
.product-container{
	width: 100%;
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid #DEDEDE;
}
.product-detail{
	padding: 20px;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.product-detail:nth-child(2){
	border-left: 1px solid #DEDEDE;
}
.product-image{
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-info{
	width: calc(100% - 204px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.product-info h1{
	font-size: 18px;
	font-weight: 700;
	color: #003876;
	margin-bottom: 12px;
}
.product-desc{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.product-desc h2{
	font-size: 16px;
	font-weight: 600;
	color: #000000;
	margin-bottom: 8px;
}
.product-desc p{
	font-size: 14px;
	font-weight: 200;
	color: #666666;
	line-height: 22px;

}
.m-sub-tab-list{
	width: 100%;
	height: 40px;
	position: relative;
	display: none;
}
.m-sub-tab-header{
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	border-top: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	cursor: pointer;
}
.m-sub-tab-header h1{
	font-size: 14px;
	font-weight: 700;
	color: #111111;
}
.m-sub-tab-box{
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #fff;
	display: none;
}
.m-sub-tab-item{
	width: 100%;
	height: 35px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 500;
	background-color: #F8F8F8;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-bottom: 1px solid #ffffff;
	color: #111111;
	font-size: 14px;
	font-weight: 500;
}
.m-sub-tab-item:last-child{
	border-bottom: 1px solid #DEDEDE;
}
.m-sub-tab-icon{
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}
.m-sub-tab-list.active .m-sub-tab-icon {
  transform: rotate(-90deg);
}

html.intro-page,
    html.intro-page body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #000;
    }

    html.intro-page #wrap {
      width: 100%;
      height: 100%;
      min-width: 0;
      border-top: 0;
      overflow: hidden;
    }

    .intro-stage {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      background: #000;
    }

    .intro-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .intro-overlays {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
	.intro-overlay{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.intro-logo{
		position: absolute;
		top: 7.4%;
		right:  6.25%;
	}
	.intro-scroll{
		position: absolute;
		bottom: 18px;
		left: 50%;
		transform: translateX(-50%);
	}
	.intro-scroll{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.intro-scroll-text{
		color: #fff;
		font-weight: 400;
		font-size: 20px;
	}
	.intro-scroll-line {
		position: relative;
		width: 2px;
		height: 80px;
		background: rgba(255,255,255,0.15);
		overflow: hidden;
	}

	.intro-scroll-line::after {
		content: "";
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		height: 40px;
		background: linear-gradient(to bottom, #ffffff, transparent);
		animation: scroll-line 2.5s infinite; /* ← 여기 늘림 */
	}

	@keyframes scroll-line {
		0% {
			top: -40px;
			opacity: 0;
		}
		30% {
			opacity: 1;
		}
		100% {
			top: 100%;
			opacity: 0;
		}
	}
	.intro-text{
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding-top: 14.58%;
		padding-left: 16.14%;
	}
	.intro-text h1{
		font-size: 64px;
		font-weight: 700;
		color: #ffffff;
		margin: 0;
	}
	.intro-text p{
		font-size: 24px;
		font-weight: 300;
		color: #ffffff;
		margin: 0;
	}
	
	.intro-title, .intro-subtitle {
		opacity: 0;
		transform: translateY(30px);
		filter: blur(6px);
		animation: introTextUp 1.2s ease forwards;
	}

	.intro-title {
		animation-delay: 0.3s;
	}

	.intro-subtitle {
		animation-delay: 0.7s;
	}

	@keyframes introTextUp {
		0% {
			opacity: 0;
			transform: translateY(30px);
			filter: blur(6px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}
	.intro-stage {
	  opacity: 1;
	  transition: opacity 0.8s ease;
	}
	
	.intro-stage.is-leaving {
	  opacity: 0;
	}
	.intro-logo,
	.intro-text,
	.intro-scroll {
		opacity: 1;
		transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.intro-logo.is-hide,
	.intro-text.is-hide,
	.intro-scroll.is-hide {
		opacity: 0;
		transform: translateY(20px);
	}
	.benefits_container{
		width: 100%;
		padding: 70px 50px;
		display: flex;
		flex-direction: column;
		gap: 60px;
	}
	.benefits_item{
		padding: 48px 74px 48px 58px;
		display: flex;
		flex-direction: column;
		gap: 40px;
		justify-content: flex-start;
		border: 1px solid #DEDEDE;
		border-radius: 8px;
	}
	.benefits_title{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
	}
	.benefits_title h1{
		font-size: 32px;
		font-weight: 700;
		color: #111;
		font-weight: 500;
	}

	.benefits_title h1 i{
		font-size: 20px;
		font-weight: 700;
		color: #111;
		font-weight: 500;
	}
	.benefits_icon_wrap{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:60px 0;
	}
	.benefits_icon_item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	.benefits_icon_item p{
		font-size: 20px;
		font-weight: 200;
		color: #474747;
		text-align: center;
		position: relative;
		width: 100%;
	}
	.benefits_icon_text_1::before{
		position: absolute;
		content: '(경조휴가, 경조비 및 경조물품)';
		top: 75%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 14px;
		font-weight: 200;
		color: #474747;
		text-align: center;
		width: 100%;
	}

	.benefits_icon_text_2::before{
		position: absolute;
		content: '(5일 연속 의무 사용)';
		top: 75%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 14px;
		font-weight: 200;
		color: #474747;
		text-align: center;
		width: 100%;
	}

	.benefits_item.green{
		border-left: 16px solid #099268;
	}

	.benefits_item.blue{
		border-left: 16px solid #1971C2;
	}

	.benefits_item.red{
		border-left: 16px solid #E03131;
	}

	.benefits_item.lightgreen{
		border-left: 16px solid #66A80F;
	}

@media (max-width:767px) {
	#wrap{ width:100%; min-width:100%; border-top:none;}
	header .inner{ width:100%; height:45px; }
	.web,
	.tit-area,
	.location{ display:none;}
	.benefits_icon_wrap{grid-template-columns: 1fr 1fr;}
	.benefits_icon_item p{font-size: 16px;}
	.benefits_icon_img{width: 70px;}
	.benefits_title h1{font-size: 24px;}
	.benefits_item {
		padding: 36px 34px 36px 34px;
		gap: 24px;
		border-radius: 8px;
	}
	
	.benefits_item.green{border-left: 10px solid #099268;}
	.benefits_item.blue{border-left: 10px solid #1971C2;}
	.benefits_item.red{border-left: 10px solid #E03131;}
	.benefits_item.lightgreen{border-left: 10px solid #66A80F;}
	header .bt-side,
	.mobile,
	.m-loc{ display:block; }

	header h1.logo{ top:14px; left:15px; }
	header h1.logo a{ display:block; background:url(../../images/common/kr_logo.png) 50% 50% no-repeat; background-size:122px; text-indent:-9999px; width:122px; height:20px;}
	header .bt-side{ display:none; position:absolute; top:0; right:0; width:45px; height:45px; background:#003876 url(../../images/common/bt_menu.png) 50% 50% no-repeat; background-size:20px 16px; display:block; text-indent:-9999px;}
	header .bt-side.open{ background:#003876 url(../../images/common/bt_x.png) 50% 50% no-repeat; background-size:24px 24px; }
	
	#container{ padding-bottom:20px;}

	#contents{ width:100%; min-width:100%; min-height:auto; }
	#contents .div-inner{ padding:15px 15px 60px; }
	#contents .div-inner .h3-tit{ font-size:15px; color:#111; margin:30px 0 10px; font-weight:bold;}
	#contents .div-inner .h3-tit2{ font-size:18px; color:#111; margin:30px 0 10px;}
	#contents .div-inner .h4-tit{ font-size:18px; color:#111; margin:30px 0 10px;}
	#contents .div-inner .h4-tit2{ font-size:14px; color:#111; margin:20px 0 10px;}
	#contents .div-inner .h5-tit{ font-size:14px; color:#333; margin:20px 0 10px;}
	#contents .div-inner .h3-tit.pt80 {padding-top: 30px !important}
	#container .div-main{ width:100%; padding:10px 12px 0;}
	
	.product-all.show.visible-pc{ display:none !important;}

	footer .inner{ width:100%; padding:15px 10px;}
	footer address{ text-align:left;}
	footer .copy{ text-align:left;}
	footer .footer-link{ text-align:left;}
	footer .footer-link li{ float:none; display:inline-block;}
	footer .f-link{ position:relative; top:auto; right:auto; width:100%; border:#ccc 1px solid; margin:10px 0; z-index:99;}
	footer .f-link .bt-link{ width:100%; height:30px; line-height:30px; display:block; text-align:left; padding:0 0 0 14px; background:#fff url(../../images/common/blt_flink.gif) 96% 50% no-repeat;}
	footer .f-link>ul{ position:absolute; bottom:30px; left:0; width:100%; border:#ccc 1px solid; display:none; background:#fff;}
	footer .f-link>ul li a{ display:block; padding:5px 10px; font-size:12px;}
	footer .footer-link>li .utill-mn{ display:inline-block;}
	footer .ls-brn{ display:block; width:60%; margin:20px 0;}

	body.ovf_hdn, .ovf_hdn{overflow:hidden}
	.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; z-index:5;}
	.m_lmenu{ position:fixed; right:-100%; top:50px; width:100%; margin-right:-75px; height:100%; background-color:#ececec; overflow-y:auto; padding:0; }
	.m_lmenu .left_menu{ position:relative; border-top:#003876 2px solid; height:auto;}{ position:relative; border-top:#e3002b 2px solid; height:auto;}
	.m_lmenu .ldepth1>a{ position:relative; display:block; background:#d4d4d4; line-height:40px; color:#111; font-size:12px; padding:0 15px; border-bottom:#e2e2e2 1px solid; text-decoration:none;}
	.m_lmenu .ldepth1>a:before{ content:""; position:absolute; top:50%; right:91px; width:12px; height:2px; margin-top:-1px; background:#9e9e9e; display:block;}
	.m_lmenu .ldepth1>a:after{ content:""; position:absolute; top:50%; right:96px; width:2px; height:12px; margin-top:-6px; background:#9e9e9e; display:block;}
	.m_lmenu .ldepth1>a:hover,
	.m_lmenu .ldepth1.on>a{ color:#003876;}
	.m_lmenu .ldepth1>a:hover:before,
	.m_lmenu .ldepth1.on>a:before{ background:#003876;}
	.m_lmenu .ldepth1>a:hover:after,
	.m_lmenu .ldepth1.on>a:after{ display:none;}
	.m_lmenu .ldepth1 .mdepth2{ display:none;}
	.m_lmenu .ldepth1 .mdepth2>ul>li>a{ display:block; background:#ececec; line-height:36px; font-size:12px; color:#333; padding:0 15px; border-bottom:#fff 1px solid; text-decoration:none;}
	.m_lmenu .ldepth1 .mdepth2>ul>li.on>a{ color:#003876;}
	.m_lmenu .ldepth1 .mdepth2>ul>li>.mdepth3{ border-bottom:#fff 1px solid; padding:5px 0;}
	.m_lmenu .ldepth1 .mdepth2>ul>li li a{ display:block; background:#ececec; line-height:25px; font-size:12px; color:#333; padding:0 15px; text-decoration:none;}
	.m_lmenu .ldepth1 .mdepth2>ul>li li a:before{ content:""; width:3px; height:3px; display:inline-block; border-radius:3px; margin:0 8px 0 0; vertical-align:middle; background:#747474; }
	.m_lmenu .ls-brn{ display:block; width:300px; padding:20px 15px;}

	.m-loc{ position:relative; display:block; background:#404040; height:45px; z-index:5;}
	.m-loc>ul>li>a{ display:block; position:relative; font-size:14px; height:45px; line-height:45px; padding:0 15px; color:#fff;}
	.m-loc>ul>li>a span.sup {font-size: 12px}
	.m-loc>ul>li>a:after{ content:""; position:absolute; top:50%; right:15px; margin:-4px 0 0 0; background:url(../../images/common/arr_down.png) 50% 50% no-repeat; background-size:15px 8px; width:15px; height:8px; display:block; }
	.m-loc>ul>li>a.on:after{ background:url(../../images/common/arr_up.png) 50% 50% no-repeat; background-size:15px 8px;}
	.m-loc>ul>li>ul{ display:none; background:#353535;}
	.m-loc>ul>li>ul a{ display:block; line-height:36px; padding:0 15px; color:#959595; font-size:12px;}
	.m-loc>ul>li>ul a:hover{ color:#003876;}

	#back-top{ position:fixed; bottom:120px; left:auto; right:15px; margin:0; z-index:99; width:25px; height:25px; border-radius:50%; background:#003876 url(../../images/common/arr_up.png) 50% 50% no-repeat; background-size:8px 4px; color:#333; text-indent:-9999px; padding:0;}
}

@media (min-width:768px) and (max-width:992px) {	

	#wrap{ width:100%; min-width:100%; border-top:none;}
	header .inner{ width:100%; height:84px; }
	.web,
	.tit-area,
	.location{ display:none;}
	
	header .bt-side,
	.mobile,
	.m-loc{ display:block; }

	header h1.logo{ top:25px; left:28px; }
	header h1.logo a{ display:block; background:url(../../images/common/kr_logo.png) 50% 50% no-repeat; text-indent:-9999px; height:31px;}
	header .bt-side{ display:none; position:absolute; top:0; right:0; width:84px; height:84px; background:#003876 url(../../images/common/bt_menu.png) 50% 50% no-repeat; background-size:30px 24px; display:block; text-indent:-9999px;}
	header .bt-side.open{ background:#003876 url(../../images/common/bt_x.png) 50% 50% no-repeat; background-size:24px 24px; }

	#contents{ width:100%; min-width:100%; min-height:auto; }
	#contents .div-inner{ padding:30px 30px 100px; }

	#container .div-main{ width:100%; padding:30px 24px 0;}

	footer .inner{ width:100%;  padding:28px 30px;}
	footer address{ text-align:left;}
	footer .copy{ text-align:left;}
	footer .footer-link{ text-align:left;}
	footer .footer-link li{ float:none; display:inline-block;}
	footer .f-link{ position:relative; top:auto; right:auto; width:100%; border:#ccc 1px solid; margin:10px 0; z-index:99;}
	footer .f-link .bt-link{ width:100%; height:30px; line-height:30px; display:block; text-align:left; padding:0 0 0 14px; background:#fff url(../../images/common/blt_flink.gif) 96% 50% no-repeat;}
	footer .f-link>ul{ position:absolute; bottom:30px; left:0; width:100%; border:#ccc 1px solid; display:none; background:#fff;}
	footer .f-link>ul li a{ display:block; padding:5px 10px; font-size:12px;}
	footer .footer-link>li .utill-mn{ display:inline-block;}
	footer .ls-brn{ display:block; width:60%; margin:20px 0;}

	body.ovf_hdn, .ovf_hdn{overflow:hidden}
	.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; z-index:5;}
	.m_lmenu{ position:fixed; right:-100%; top:84px; width:100%; margin-right:-270px; height:100%; background-color:#ececec; overflow-y:auto; padding:0; }
	.m_lmenu .left_menu{ position:relative; border-top:#003876 2px solid; height:auto;}{ position:relative; border-top:#e3002b 2px solid; }
	.m_lmenu .ldepth1>a{ position:relative; display:block; background:#d4d4d4; line-height:70px; color:#111; font-size:20px; padding:0 30px; border-bottom:#e2e2e2 1px solid; text-decoration:none;}
	.m_lmenu .ldepth1>a:before{ content:""; position:absolute; top:50%; right:300px; width:24px; height:2px; margin-top:-1px; background:#9e9e9e; display:block;}
	.m_lmenu .ldepth1>a:after{ content:""; position:absolute; top:50%; right:312px; width:2px; height:24px; margin-top:-12px; background:#9e9e9e; display:block;}
	.m_lmenu .ldepth1>a:hover,
	.m_lmenu .ldepth1.on>a{ color:#003876;}
	.m_lmenu .ldepth1>a:hover:before,
	.m_lmenu .ldepth1.on>a:before{ background:#003876;}
	.m_lmenu .ldepth1>a:hover:after,
	.m_lmenu .ldepth1.on>a:after{ display:none;}
	.m_lmenu .ldepth1 .mdepth2{ display:none;}
	.m_lmenu .ldepth1 .mdepth2>ul>li>a{ display:block; background:#ececec; line-height:68px; font-size:20px; color:#333; padding:0 30px; border-bottom:#fff 1px solid; text-decoration:none;}
	.m_lmenu .ldepth1 .mdepth2>ul>li.on>a{ color:#003876;}
	.m_lmenu .ldepth1 .mdepth2>ul>li>.mdepth3{ border-bottom:#fff 1px solid; padding:5px 0;}
	.m_lmenu .ldepth1 .mdepth2>ul>li li a{ display:block; background:#ececec; line-height:50px; font-size:18px; color:#333; padding:0 30px; text-decoration:none;}
	.m_lmenu .ldepth1 .mdepth2>ul>li li a:before{ content:""; width:6px; height:6px; display:inline-block; border-radius:3px; margin:0 8px 0 0; vertical-align:middle; background:#747474; }
	.m_lmenu .ls-brn{ display:block; width:200px; padding:20px 15px;}

	.m-loc{ position:relative; display:block; background:#404040; height:84px; z-index:5;}
	.m-loc>ul>li>a{ display:block; position:relative; font-size:18px; height:84px; line-height:84px; padding:0 30px; color:#fff;}
	.m-loc>ul>li>a:after{ content:""; position:absolute; top:50%; right:30px; margin:-8px 0 0 0; background:url(../../images/common/arr_down.png) 50% 50% no-repeat; width:26px; height:15px; display:block; }
	.m-loc>ul>li>a.on:after{ background:url(../../images/common/arr_up.png) 50% 50% no-repeat; }
	.m-loc>ul>li>ul{ display:none; background:#353535;}
	.m-loc>ul>li>ul a{ display:block; line-height:50px; padding:0 30px; color:#959595; font-size:18px;}
	.m-loc>ul>li>ul a:hover{ color:#003876;}

	#back-top{ position:fixed; bottom:145px; left:auto; right:25px; margin:0; z-index:99; width:35px; height:35px; border-radius:50%; background:#003876 url(../../images/common/arr_up.png) 50% 50% no-repeat; background-size:11px 7px; color:#333; text-indent:-9999px; padding:0;}
	.tit-area.tit-area2 {display: none}
}

@media (min-width:993px) and (max-width:1200px) { 
	#wrap{ width:100%; min-width:100%; }
	header .inner{ width:100%; }
	#contents{ width:100%; min-width:100%; }
	.location .path{ width:100%; margin:0 auto;}
	footer .inner{ width:100%;}
	footer address{ text-align:left;}
	footer .copy{ text-align:left;}
	#contents .div-inner{ padding:30px 30px 100px; }

	#container .div-main{ width:960px;}

	#gnb-wrap #gnb>li .subdepth .sub-tit{ display:none;}
	#gnb-wrap #gnb>li .subdepth .list-wrap{ float:none; width:100%;}
	#gnb-wrap #gnb>li .subdepth .list-wrap>.list{ width:100%; display:table; min-height:200px;}
	#gnb-wrap #gnb>li .subdepth .list-wrap>.list>li{ display:table-cell; width:25%; border-left:#e5e5e5 1px solid; padding:0 0 0 20px;}
}
@media (max-width:993px) {
	.product-container:last-child .product-detail:last-child{
		border-bottom: 0px;
	}
	.product-container {
	    width: 100%;
	    padding:0;
	    display: grid;
	    grid-template-columns: 1fr;
	    border-bottom: 1px solid #DEDEDE;
	}
	.product-detail:nth-child(2){
		border: 0px;
		border-bottom: 1px solid #dbdbdb;
	}
	.product-container{
		border: 0px;
	}
	.product-detail{
		padding: 0;
		flex-direction: column;
		gap: 8px;
		padding-bottom: 24px;
		border-bottom: 1px solid #dbdbdb;
	}
	.product-section{
		padding: 40px 16px;
	}
	.product-image{
        width: 100%;
        height: 180px;
	}
	.product-image img {
		display: block;
		max-width: 70%;
		height: auto;
	}
	.product-info{
		width: 100%;
		gap: 8px;
	}
	.product-info h1 {
	    font-size: 18px;
	    margin-bottom: 12px;
	}
	.sub-tab-list{
		display: none;
	}
	.sub-tab {
    	width: 100%;
    	padding:0;
    	overflow-x: unset;
    	border-bottom: none;
	}
	.m-sub-tab-list{
		display: block;
	}
	.category_list.category_list--subtab .category_list-list{
		display: none;
	}
	.category_list.category_list--subtab{
		padding:0;
		overflow-x: unset;
		border-bottom: none;
		display: block;
	}
	.m-category-list{
		display: block;
	}
	.m-category-box{
		z-index: 3;
	}
	.category_list.category_list--subtab .category_item {
		padding: 0 24px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

#hiddenFrame{ position:absolute; top:-9999px; left:-9999px;}
.bestFamily {position:absolute; top:27px; right:415px}
.webdnvgl {position:absolute; top:27px; right:345px}
.webukas {position:absolute; top:24px; right:290px}
.webacc{ position:absolute; top:20px; right:180px; }
.webacc img{ width:100px;}
@media (max-width:800px) { /*768*/	
	.bestFamily,
	.webdnvgl,
	.webukas,
	.webacc{ position:relative; top:auto; right:auto; display:inline-block; margin:10px 10px 0 0;}
	/*.webacc{ position:relative; top:auto; right:auto; display:block; margin:10px 0 0 0;}*/
}


/*CI ����*/

.h3-tit.first{margin-top:0;}
.thum_new{margin-top:20px; overflow:hidden;}
.thum_new.last{margin-top:30px;}
.thum_new .left{float:left; width:49.36%;}
.thum_new .left p{box-sizing:border-box; border:1px solid #dddddd; background:#f7f7f7; font-size:15px; font-weight:bold; padding:10px; text-align:center; color:#333; padding:10px; margin:15px 0;}
.thum_new .left p span{color:#003876;}
.thum_new .br{display:block; width:100%;}

.thum_new div > span{display:block; margin-top:5px;}


.thum_new .right{float:right; width:49.18%;}
.thum_new .right p{position:relative; height:300px; box-sizing:border-box; border:1px solid #dddddd; background:#f7f7f7; font-size:18px; font-weight:bold; }
.thum_new .right p span.pos_abs{position:absolute; top:0; left:0;  width:100%; text-align:center; color:#333; padding:0 10px;}
.thum_new .right p span span{color:#003876;}
.thum_new .br{display:block; width:100%;}
.thum_new .right dl{background:url(/images/intro/ls_red.png) 0 10px no-repeat;}
.thum_new .right dl dt{color:#ed174b;}

.thum_new dl{padding:0 0 13px 135px; margin-top:30px; background:url(/images/intro/ls_blue.png) 0 15px no-repeat;}
.thum_new dl dt{font-size:24px; font-weight:bold; color:#003876; margin-bottom:10px;}
.thum_new dl dd{font-size:14px; }
.thum_new dl dd strong{font-size:16px; color:#111111; display:block; font-weight:500;}


@media (max-width:767px) {
	.thum_new > div.left{width:100%;}
	.thum_new > div.right{width:100%; margin-top:15px;}
	.thum_new dl{padding:0 0 13px 100px; margin-top:0; background:url(/images/intro/ls_blue.png) 0 10px no-repeat; background-size:78px;}
	.thum_new .right dl{background:url(/images/intro/ls_red.png) 0 10px no-repeat; background-size:78px;}
	.thum_new .right p{display:none;}
	.thum_new dl dt{font-size:16px;}
	.thum_new dl dd strong{font-size:15px;}
	.tit-area.tit-area2{
		display: none;
	}
}
@media (min-width:768px) and (max-width:992px) {	
	.thum_new dl{padding:0 0 13px 100px; background:url(/images/intro/ls_blue.png) 0 10px no-repeat; background-size:78px;}
	.thum_new .right dl{background:url(/images/intro/ls_red.png) 0 10px no-repeat; background-size:78px;}
}

@media (max-width:500px) {
	.overview-header{
		height: fit-content;
		padding: 36px 12px;
		justify-content: flex-start;
	}
	.overview-header h1 {
	    font-size: 22px;
	}
	.overview-header p{
		font-size: 14px;
	}
	.product-list{
		padding: 20px 16px;
		gap: 20px;
		padding-bottom: 80px;
	}
	a.product-item{
		width: 100%;
		padding: 12px 0;
		gap: 12px;
	}
	.product-item h1 {
    	font-size: 16px;
	}
	.product-item p {
    	font-size: 12px;
	}
	.benefits_icon_wrap {
        grid-template-columns: 1fr 1fr;
    }
	.benefits_item {
        padding: 24px 12px;
        gap: 36px;
        border-radius: 4px;
    }
	.benefits_item.green{border-left: 5px solid #099268;}
	.benefits_item.blue{border-left: 5px solid #1971C2;}
	.benefits_item.red{border-left: 5px solid #E03131;}
	.benefits_item.lightgreen{border-left: 5px solid #66A80F;}
	.benefits_container{padding: 24px;}
	.benefits_container{gap:24px;}
	.benefits_title{justify-content: center; gap: 6px;}
	.benefits_title h1 {font-size: 20px;}
	.benefits_title_icon{width: 24px;}
	.benefits_icon_wrap{gap: 24px;}
	.benefits_title h1 i{font-size: 16px;}
	.benefits_icon_item{gap: 0px;}
	.benefits_icon_item p {font-size: 14px;}
	.benefits_icon_item p::before{font-size: 12px;}
	.benefits_icon_img {width: 50px;}
}