/* include 공통 CSS */

/************************* 공통 시작*************************/
.sub_title_navi			{display:block; }
.sub_tab						{display:none;}

/* left menu 있을때... */
/*
.sub_left								{width:15%; max-width:200px; float:left;}
.sub_right						{width:82%; padding-right:1%; float:right; position:relative;}
*/

.sub_left								{display:none; }
.sub_right						{width:100%; position:relative; padding-bottom:100px}

.content_title			{padding-left: 30px; margin-bottom: 30px;}
.content_title h1		{font-size:30px; color:#333; font-weight: 700;}

.content_desc				{min-height:400px}









@media(max-width:1240px){
.content_desc {max-width:100%;}
}

@media(max-width:1240px){
.sub_left	{display:none;}
.sub_right					{width:100%;  padding:0 0% 70px; float:none;}
.content_title{margin:70px 0 40px}
.content_title h1{font-size:28px;}
}
@media(max-width:900px){
.sub_right{padding:0 0% 40px}
.sub_tab	{display:block;}
.content_title{margin:30px 0 30px}
.content_title h1{font-size:20px;}
}

/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header_t									{width:100%; background: #fff; -webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;}
.header_wrap{width: 100%; padding: 0 3%; height: 80px; display: flex; justify-content:space-between; align-items:center; margin:0 auto; position:relative;}

/*header_banner*/
.hd_bn{display:none; justify-content:center; align-items:center; background-color:#222; height:40px;color:#fff; font-size:14px}

/*header_top*/
.header_logo {display: flex; align-items:center;}
.header_logo .hd_home {width: 138px; display: block;}
.header_logo img{max-width:138px; width: 100%; margin: 0; display:block;}
.header_search {display: none;}

.header_member {display: flex; align-items:center; width: 20%; justify-content:flex-end;}
.header_member ul {display: flex;}
.header_member ul li {margin-right: 10px;}
.header_member ul li a {display: block; font-size: 16px; color: #333;}
.header_member .order a {width: 137px; padding: 15px 0; text-align: center; display: block; color: #fff; border-radius:45px; background: #005b9d; font-weight: 500;}

.header_language {display:inline-block; position:relative; cursor:pointer; display:block; text-transform: uppercase; margin-right: 10%;}
.header_language .select {width:90px; height: 30px; display: flex; align-items:center; justify-content:space-between; font-weight: 400; position:relative; font-size:14px; text-align:left; color:#333; padding: 0 0 0 5px;}
.header_language .select span {display: block; margin-right: 3px; font-size: 18px; line-height: 1;}
.header_language ul {width:100%; display:none; position:absolute; z-index:99; background:#fff; font-size:14px; top:30px; right: 0; padding:15px 5px; line-height: 0; border:1px solid #ccc; }
.header_language ul li { border:none; }
.header_language ul li a {cursor:pointer; width:100%; height:100%; display:inline-block; color:#333; font-weight: 400; font-size:14px;}
.header_language ul li a:hover {text-decoration:underline;}

.header_gnb_bg {margin-left: 8%; width: 50%;}

/* global navigation bar */
.gnb								{position:relative; }
/* gnb Common */
.menu								{position:relative; border:0px solid red;}
.menu:after					{content:"";display:block;clear:both; width:100%;}
.menu .major ul						{text-align: center;list-style:none;margin:0;padding:10px 0; display: flex; justify-content:space-between;}
.menu .major ul li						{position:relative; z-index:1; display: inline-block; }
.menu .major ul li a					{position:relative; padding:0; color:#272727; text-decoration:none !important;font-weight: 400; padding-bottom: 40px;}
.menu .major ul li a span		{display:inline-block; width:150px; font-size:18px !important; position: relative; color: #333; font-weight: 700;}
.menu .major ul li a span::before {content: ''; width: 0; height: 5px; background: rgba(0,0,0,0.1); display: block; position: absolute; bottom: -29px; left: 0; transition:all 0.3s;}


/* gnb Hover */
.menu .major li.active{z-index:2}
.menu .major li a:hover span::before,.menu .major li a:active span::before,.menu .major li a:focus span::before{width: 100%;}
.menu .major li.active a span::before{ width: 100%;}
/*대메뉴 포커스 효과 변경시 */
.menu .major li.pactive a span::before{ width: 100%;}
.menu .major li.pactive ul.sub{display:none;}
/*대메뉴 포커스 효과 변경시 */

/* gnb 2depth */
.menu .major ul.sub							{width: 100%; position:absolute; top:51px; display:none; border:1px solid #e1e1e1; background:#fff; margin:0;padding:0; padding:14px 0}
.menu .major li.active ul.sub		{display:block; }
.menu .major ul.sub li					{clear:both; margin:0; display:block; width:100%; transform: skew(0);}
.menu .major ul.sub li a				{color:#616161; font-size:15px; padding:5px 0; display:block; width:100%; height:100%; transition:all 0.3s ease }
.menu .major ul.sub li a:hover	{color:#4170ac}

/* gnb 2depth  */
li.m1 ul.sub{width:100%;}
li.m2 ul.sub{width:100%;}
li.m3 ul.sub{width:100%;}
li.m4 ul.sub{width:100%;}

/* all nav */
#all_nav {width: 100%; background: #fff; padding: 20px 0; display: none; position: fixed; top: 130px; left: 0; z-index: 3; border-bottom: 1px solid #eee; display: none;}
#all_nav .inner {padding: 0 400px;}
#all_nav .nav_ul {margin: 0 auto; display: flex; justify-content:space-between;}
#all_nav .nav_ul > li {flex:1; text-align: center;}
#all_nav .nav_ul .sub {line-height: 2;}
#all_nav .nav_ul .sub a {font-size: 16px; color: #666; position: relative;}
#all_nav .nav_ul .sub a::before {content: ''; width: 0; height: 5px; display: block; background: rgba(0,0,0,0.1); position: absolute; bottom: 0px; left: 0; transition:all 0.3s; z-index: -1;}
#all_nav .nav_ul .sub a:hover::before {width: 100%;}


/* 햄벅 */
.mo_nav		{display:none;}
.mo_nav *{
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;}
.mo_nav .navbar-toggle {position: relative; padding:10px 0; background-color:transparent; background-image:none; border-radius:3px; border:0;display:inline-block;}
.mo_nav .navbar-toggle:focus {outline: 0;}
.mo_nav .navbar-toggle .icon-bar {background:#333; display:block; width:25px; height:2px;}
.mo_nav .navbar-toggle .icon-bar + .icon-bar {margin-top:6px; height:2px; width:25px; }
.mo_nav .navbar-toggle .icon-bar + .icon-bar + .icon-bar{margin-top:6px; width:25px; height:2px; }

.mo_nav:hover .navbar-toggle .icon-bar								{transform:translateX(5px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar		{transform:translateX(10px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar + .icon-bar		{transform:translateX(3px);}
.mo_nav > a {display:inline-block;}

#member_point {position:absolute;z-index:99;top:30px;left:9px;height:15px;line-height:18px;width:100%; color:#222; text-align:center;padding:6px 0 0;background:url("./img/join.png") no-repeat 50% 0;animation:ani 1.5s infinite;-webkit-animation-timing-function:ease-in-out; display:none}
#member_point .mb_pt {display:block;margin:0;background:#0dc59c;  text-align:center;font-size:12px;color:#fff;padding: 1px 5px;}
@keyframes ani {
  0%   {top:20px;}
	50%  {top:17px;}
  100% {top:20px;}
}

.cart_mo_no{display:none; position:relative;margin-right: 7px;}
.cart_mo_no span{position:absolute; border-radius:100px; width: 18px; height: 18px;background-color: #333;right: -7px; bottom: -1px; color: #fff; font-size: 11px;text-align: center;line-height: 18px;}
.cart_mo_no img{max-width:22px;}

.f-nav{ position: fixed;top: 0; left: 0;width: 100%; background-color: #fff; z-index: 999; border-bottom: 1px solid #e7e7e7;}
.f-nav .hd_bn{display:none}
.f-nav .hd_bottom .header_wrap{height:55px}
.f-nav .all_c_box{top:56px}
.f-nav .menu .major ul.sub{top:52px}
.f-nav #all_nav {top: 91px;}

@media(max-width:1500px){
.header_wrap {padding: 0 4%;}
.header_member {width: 30%;}
#all_nav .inner {padding: 0 32% 0 23%;}
}

@media(max-width:1240px){
.menu .major ul li a span{font-size:15px !important; width:115px}
#all_nav .inner {padding: 0 35% 0 26%;} 
#all_nav .nav_ul .sub a {font-size: 14px;}
.menu .major ul.sub{top:50px}
}

@media(max-width:1080px){
.header_wrap {height: 60px;}
.mo_nav		{display:block;}
.header_gnb_bg {display: none;}
.header_member {display: none;}

}

@media(max-width:900px){
.header_logo {width: auto;}
.header_logo img {width: 80%;}
}



/************************* header_inc 끝*************************/

/************************* main_inc 시작*************************/
.main_visual										{position:relative; margin:0 auto;}
.main_visual .main_v {height: 880px;}
.main_img_pc {}

.main_tit {font-size: 18px; color: #212121; display: flex; align-items:center; padding-left: 65px; position: relative; font-weight: 500;}
.main_tit::before {content: ''; display: block; position: absolute; width: 50px; height: 1px; background: #005b9d; top: 50%; left: 0;}
.main_btn {width: 174px; padding: 13px 0; text-align: center; display: flex; align-items:center; justify-content:center; background: #0aade2; color: #fff !important; font-size: 16px; transition:all 0.2s;}
.main_btn:hover {letter-spacing: 1px;}
.main_btn span {display: block; margin-left: 20px; font-size: 14px;}

.about {padding: 80px 0; background: #f4f4f4 url('./img/about_bg.png') no-repeat center bottom / 100%;}
.about .flx {display: flex; align-items:center; justify-content:space-between;}
.about .flx .txt p {margin-top: 30px; line-height: 1.6; color: #5e5e5e; font-size: 18px;}

.product {padding: 90px 0; background: url('./img/main_pd_bg.jpg') no-repeat center / cover; color: #fff;}
.product .main_tit {color: #fff;}
.product .main_tit::before {background: #fff;}
.product .tit p {font-size: 32px; font-weight: 700; line-height: 1.4; margin: 30px 0 60px;}
.product .pd_wrap {display: flex; flex-flow:row wrap; justify-content:space-between;}
.product .pd_wrap li {width: 23%; height: 400px; position: relative;}
.product .pd_wrap li::after {content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.2); display: block; position: absolute; top: 0; left: 0; opacity: 1; transition:opacity 0.3s;}
.product .pd_wrap li:first-child {background: #adb1a4 url('./img/m_pd01.jpg') no-repeat right bottom / 160%;}
.product .pd_wrap li:nth-child(2) {background: #fff url('./img/m_pd02.jpg') no-repeat center bottom / 150%;}
.product .pd_wrap li:nth-child(3) {background: #7a7d71 url('./img/m_pd03.jpg') no-repeat center bottom / 150%;}
.product .pd_wrap li:nth-child(4) {background: #fff url('./img/m_pd04.jpg') no-repeat center bottom / 150%;}
.product .pd_wrap li a {width: 100%; height: 100%; display: block; position: relative; z-index: 50; padding: 28px; border: 7px solid transparent; transition:all 0.3s; color: #fff;}
.product .pd_wrap li a h3 {font-size: 26px; font-weight: 500;}
.product .pd_wrap li a p {font-size: 14px; font-weight: 300; line-height: 1.4; margin-top: 15px;}
.product .pd_wrap li:hover::after {opacity: 0;}
.product .pd_wrap li:hover a {border: 7px solid #0aade2;}
.product .pd_wrap li:hover a h3 {color: #0aade2;}
.product .pd_wrap li:hover a p {color: #5e5e5e;}

.contact {padding: 50px 0 90px;}
.contact .main_btn {background: #615b5a;}
.contact .flx {display: flex; justify-content:space-between; margin-top: 45px; flex-flow:row wrap;}
.contact .flx .box {width: 48.5%; padding: 60px 0; color: #fff;}
.contact .flx .box .txt h3 {font-size: 24px; font-weight: 700;}
.contact .flx .box .txt p {margin: 20px 0 30px;}
.contact .flx .bx01 {background: url('./img/bx01_bg.jpg') no-repeat center / cover; display: flex; justify-content:flex-end;}
.contact .flx .bx01 .txt {padding-right: 60px;}
.contact .flx .bx02 {background: url('./img/main_bn_bg.jpg') no-repeat center / cover; position: relative; padding-left: 70px;}
.contact .flx .bx02::before {content: ''; display: block; width: 96%; height: 92%; border: 1px solid rgba(255,255,255,0.3); position: absolute; left: 2%; top: 4%;}
.contact .flx .bx02 .txt h4 {font-weight: 500; font-size: 24px; line-height: 1.6;}
.contact .flx .bx02 .txt h4 span {font-weight: 700; display: inline-block; margin-right: 15px;}

.bd_stroy {padding: 90px 0; background: url('./img/main_video_bg.jpg') no-repeat center / cover; overflow: hidden;}
.bd_stroy .flx {display: flex; justify-content:space-between; align-items:flex-start;}
.bd_stroy .txt {width: 390px; padding-bottom: 70px; border-bottom: 2px solid #212121;}
.bd_stroy .txt h3 {font-size: 32px; font-weight: 700; margin: 45px 0 35px;}
.bd_stroy .txt p {font-size: 17px; color: #5e5e5e; font-weight: 300; line-height: 1.6;}
.bd_stroy .youtube {position: relative; padding-top: 20px;}
.bd_stroy .youtube::before {content: ''; width: 1080px; height: 366px; background: #005b9d; display: block; position: absolute; left: -40px; top: -25px; z-index: -1;}
.bd_stroy .youtube iframe {width: 730px; height: 370px;}



@media(max-width:1400px){
.main_visual .main_v {height: 55vw;}
}

@media(max-width:1080px){
.about {padding: 60px 0;}
.about .flx {display: block;} 
.about .flx .txt p br {display: none;}
.main_btn {margin-top: 20px;}

.product {padding: 60px 0;}
.product .tit p {margin: 20px 0 40px; font-size: 26px;}
.product .pd_wrap li {width: 48%; height: auto; margin-bottom: 4%;}
.product .pd_wrap li a {padding-bottom: 80%;}

.contact {padding: 50px 0;}
.contact .flx .bx01 .txt {padding-right: 20px;}

.bd_stroy {padding: 60px 0;}
.bd_stroy .flx {align-items:center;}
.bd_stroy .txt  {width: 40%; padding-bottom: 30px;}
.bd_stroy .txt h3 {margin: 25px 0 15px; font-size: 26px;}
.bd_stroy .txt p br {display: none;}
.bd_stroy .youtube {width: 55%; padding-top: 0;}
.bd_stroy .youtube::before {width: 100%; height: 100%; left: -20px;}
.bd_stroy .youtube iframe {width: 730px; width: 100%; height: 300px;}
}

@media(max-width:768px){
.main_visual .main_v {height: 140vw;}
.main_tit {padding-left: 45px; font-size: 16px;}
.main_tit::before {width: 30px;}

.about .flx .txt p {font-size: 14px;}

.product .tit p {font-size: 20px; margin: 10px 0 20px;}
.product .pd_wrap li a {padding: 18px 10px 80%; border: none;}
.product .pd_wrap li a:hover {border: none;}
.product .pd_wrap li:hover::after {display: none;}
.product .pd_wrap li a h3 {font-size: 18px;}

.contact .flx {margin-top: 25px;}
.contact .flx .box {width: 100%; padding: 30px 0;}
.contact .flx .bx01 {margin-bottom: 20px; background: url(./img/bx01_bg.jpg) no-repeat right bottom / 130%;}
.contact .flx .bx01 .txt {padding-right: 0; padding-left: 70px;}
.contact .flx .box .txt h3 {font-size: 18px;}
.contact .flx .box .txt p {margin: 10px 0 20px;}
.contact .flx .bx02 {padding-left: 50px;}
.contact .flx .bx02 .txt h4 {font-size: 18px;}

.bd_stroy .flx {flex-flow:row wrap;}
.bd_stroy .txt {width: 100%;}
.bd_stroy .txt h3 {margin: 15px 0 10px; font-size: 20px;}
.bd_stroy .txt p {font-size: 14px;}
.bd_stroy .youtube {width: 100%; margin-top: 40px;}
.bd_stroy .youtube iframe {height: 190px;}
}

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

/************************* main_inc 끝*************************/

.loading {margin-top: 50px; text-align: center; padding: 50px; background: #f4f4f4;}
.loading h2 {font-size: 36px; color: #005b9d;}
.loading h3 {font-size: 28px; font-weight: 300; color: #131313; margin: 20px auto 10px;}
.loading h3 span {font-weight: 500;}
.loading p {font-size: 18px; line-height: 1.6; color: #666;}

.sub_cont {overflow: hidden;}
.sub_cont .sub_tit {font-size: 30px; font-weight: 700; color: #212121;}
.sub_cont .s_pl {}

.s11_wrap .sec01 p {font-size: 18px; color: #585858; line-height: 1.6; margin-top: 25px;}
.s11_wrap .logo_box {width: 100%; background: url('../img/s11_bg01.jpg') no-repeat center /cover; padding: 30px 30px 70px; color: #fff; font-size: 18px; line-height: 1.6; margin-top: 30px;}
.s11_wrap .logo_box ul {display: flex; margin-top: 30px;}
.s11_wrap .logo_box ul li {margin-right: 14px;}
.s11_wrap .logo_box ul li img {max-width: 172px; width: 100%; display: block;}
.s11_wrap .sec02 {margin-top: 70px;}
.s11_wrap .sec02 ul {margin-top: 35px; border-top: 1px solid #ccc; position: relative;}
.s11_wrap .sec02 ul::before {content: ''; width: 220px; height: 2px; background: #005b9d; display: block; position: absolute; left: 0; top: -1px;}
.s11_wrap .sec02 ul li {padding: 14px 0; border-bottom: 1px solid #ccc; padding-left: 30px; display: flex; font-size: 18px; line-height: 1.2;}
.s11_wrap .sec02 ul li h4 {width: 18%; color: #888;}
.s11_wrap .sec02 ul li p, .s11_wrap .sec02 ul li div {width: 82%; color: #212121;}
.s11_wrap .sec02 ul li div p {margin-bottom: 5px;}
.s11_wrap .sec02 ul li div span:first-of-type {display: inline-block; width: 142px; padding: 2px 4px; color: #fff; margin-right: 20px; background: #005b9d;}
.s11_wrap .map_wrap > p {font-size: 20px; margin: 40px auto 20px; line-height: 1.6; color: #131313;}
.s11_wrap .map_wrap figure img {max-width:1000px; width: 100%; display: block; margin: 0 auto;}
.s11_wrap .map_wrap ul {display: flex; justify-content:center; align-items:center;}
.s11_wrap .map_wrap ul li {margin: 0 5px;}
.s11_wrap .map_wrap ul li img {max-width:172px; width: 100%; display: block; margin: 0 auto;}
.s11_wrap .sec02_1 {margin-top: 70px;}
.s11_wrap .sec02_1 ul {display: flex; justify-content:space-between; flex-flow:row wrap; margin-top: 25px;}
.s11_wrap .sec02_1 ul li {width: 23.5%; position: relative;}
.s11_wrap .sec02_1 ul li img {max-width:310px; width: 100%; display: block; margin: 0 auto;}
.s11_wrap .sec02_1 ul li .txt {position: absolute; bottom: 10px; left: 4%; width: 92%; height: 150px; padding: 20px 10px 0; background: rgba(0,0,0,0.7); color: #fff; text-align: center;}
.s11_wrap .sec02_1 ul li .txt h4 {font-size: 20px; font-weight: 500; margin-bottom: 10px;}
.s11_wrap .sec02_1 ul li .txt p {font-size: 16px; line-height: 1.6; font-weight: 300;}

@media(max-width:1080px){
.s11_wrap .sec02_1 ul li {width: 48.5%; margin-bottom: 2%;}
.s11_wrap .sec02_1 ul li .txt {width: 84%; left: 8%;}
.s11_wrap .sec02 ul li {font-size: 16px;}
}

@media(max-width:768px){
.sub_cont .sub_tit {font-size: 20px;}
.s11_wrap .sec01 p {font-size: 14px; margin-top: 20px;}
.s11_wrap .map_wrap > p {margin: 20px 0 10px; font-size: 16px;}
.s11_wrap .map_wrap > p br {display: none;}
.s11_wrap .sec02 {margin-top: 40px;}
.s11_wrap .sec02_1 {margin-top: 40px;}
.s11_wrap .sec02_1 ul li .txt {position: relative; width: 100%; bottom: 0; left: 0; height: 144px; background: #222; padding: 15px 10px;}
.s11_wrap .sec02_1 ul li .txt h4 {font-size: 16px;}
.s11_wrap .sec02_1 ul li .txt p {font-size: 13px;}
.s11_wrap .sec02_1 ul li .txt p br {display: none;}
.s11_wrap .sec02 ul li {display: block; font-size: 14px; line-height: 1.4; padding: 10px 0;}
.s11_wrap .sec02 ul li h4 {width: 100%; font-size: 16px;}
.s11_wrap .sec02 ul li p, .s11_wrap .sec02 ul li div {margin-top: 5px; width: 100%;}
.s11_wrap .sec02 ul li div p {display: flex; align-items:flex-start;}
.s11_wrap .sec02 ul li div p span:first-child {width: 35%; margin-right: 10px;}
.s11_wrap .sec02 ul li div p span:last-child {width: 65%;}
}

/* s12 연혁 */
.history_box { position: relative; padding: 100px 0; overflow: hidden;}
.historyBd { position: absolute; width: 2px; height: 100%; left: 50%; margin-left: -1px; top: 0; background-color: #ddd; overflow:hidden;}
.historyBd #scr_bar { position: absolute; left: 0; width: 2px; height: auto; background: rgb(40,67,145);
	background: linear-gradient(120deg, rgba(40,67,145,1) 45%, rgba(23,151,69,1) 100%);}

.year {position: relative; padding-bottom: 100px;}
.year .year_txt_start_left {position: absolute; font-size: 150px; line-height: 192px; color: rgba(0,0,0,0.035);; font-weight: 600; left: 0; top: -5px;}
.year .year_txt_start_right {	position: absolute; font-size: 192px; line-height: 192px; color: rgba(0,0,0,0.035);; font-weight: 600; right: 0; top: -5px; z-index: -1;}
.year_inner {display: flex; }
.year_inner strong {width: 50%; position: relative; text-align: right; padding-right: 50px; font-size: 40px; font-weight: 600;}
.year_inner strong .pointer {position: absolute; width: 14px; height: 14px; border-radius: 100%; border: 3px solid #005b9d; background-color: #fff; box-sizing: border-box; right: -7px; top: 20px;}
.year_inner ul {width: 50%; padding-left: 35px; padding-top: 15px;}
.year_inner ul li {position: relative; font-size: 18px; padding-left: 20px; color: #343434; margin-bottom: 15px;}
.year_inner ul li::after {content: '-'; position: absolute; left: 0; top: 0;}
.year_inner ul li span {font-size: 20px; color: #131313; font-weight: 600;}

.year_right strong { text-align: left; padding-left: 50px; padding-right: 0;}
.year_right strong .pointer { left: -7px; right: auto;}
.year_right ul {padding-left: 0; padding-right: 35px;}
.year_right ul li {text-align: right; padding-left: 0; padding-right: 20px;} 
.year_right ul li::after {right: 0; left: auto;}

@media (max-width: 1300px) {
.year .year_txt_start_left, .year .year_txt_start_right {font-size: 120px;}
}

@media (max-width: 768px) {
.history_box {padding: 13% 0;}
.year {padding-bottom: 50px;}
.year .year_txt_start_left, .year .year_txt_start_right {display: none;}
.historyBd {left: 4%;}
.year_inner {display: flex; flex-flow:column wrap; padding-left: 7%;}
.year_inner strong {text-align: left; width: 100%; font-size: min(4.5vw, 18px); padding-left: 10px;}
.year_inner strong .pointer {right: auto; left: -17px; top: 1vw;}
.year_inner ul {width: 100%; padding: 0; padding-top: 30px;}
.year_inner ul li {font-size: min(3.5vw, 14px);}
.year_inner ul li span {font-size: min(3.8vw, 16px);}

.year_right strong {padding-left: 0;}
.year_right ul {order:2;}
.year_right ul li {text-align: left; padding-left: 20px; outline: 0;}
.year_right ul li::after {left: 0; right: auto;}
}

.s21_wrap .pd_tab {display: flex; justify-content:space-between; margin-bottom: 40px;}
.s21_wrap .pd_tab li {width: 32%; cursor: pointer; border: 1px solid #e8e8e8; background: #fff; color: #131313; text-align: center; font-size: 18px; height: 50px; line-height: 50px;}
.s21_wrap .pd_tab li a {width: 100%; height: 100%; display: block;}
.s21_wrap .pd_tab li.on {border: 1px solid #005b9d; background: #005b9d; color: #fff; font-weight: 500;}
.s21_wrap .pd_tab li.on a {color: #fff; display: block;}
.s21_wrap .cont_2, .s21_wrap .cont_3, .s21_wrap .cont_4 {display: none;}
.s21_wrap .pd_tit {font-size: 26px; font-weight: 700; padding-left: 30px; position: relative; display: flex; align-items: center; margin-bottom: 40px;}
.s21_wrap .pd_tit::before {content: ''; display: block; position: absolute; left: 0; width: 20px; height: 2px; background: #005b9d;}
.s21_wrap .pd_sub_tit {font-size: 20px; font-weight: 500; position: relative; color: #212121; display: flex; align-items: center; padding-left: 20px; margin-bottom: 20px;}
.s21_wrap .pd_sub_tit::before {content: ''; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #005b9d; left: 0;}
.s21_wrap .pd_cont .flx {display: flex; justify-content: space-between; flex-flow:row wrap;}
.s21_wrap .pd_cont .flx figure {width: 45%;}
.s21_wrap .pd_cont .flx figure img {max-width: 550px; width: 100%; display: block;}
.s21_wrap .pd_cont .flx > div {width: 53%;}
.s21_wrap .pd_cont .features li {margin-bottom: 10px;}
.s21_wrap .pd_cont .features li h4 {font-size: 18px; color: #131313; font-weight: 500;}
.s21_wrap .pd_cont .features li p {font-size: 16px; color: #343434; line-height: 1.6; margin-top: 5px;}
.s21_wrap .pd_cont .pd_info {margin-top: 70px;}
.s21_wrap .pd_cont .pd_info li {display: flex; align-items: center; flex-flow: row wrap; justify-content: space-between; padding: 30px; border-bottom: 1px solid #e1e1e1;}
.s21_wrap .pd_cont .pd_info li figure {width: 17%;}
.s21_wrap .pd_cont .pd_info li figure img {max-width: 250px; width: 100%; display: block;}
.s21_wrap .pd_cont .pd_info li div {width: 80%; display: flex; align-items: center;}
.s21_wrap .pd_cont .pd_info li h4 {font-size: 18px; color: #005b9d; font-weight: 500; width: 15%;}
.s21_wrap .pd_cont .pd_info li p {font-size: 16px; color: #343434; line-height: 1.6; margin-top: 5px; width: 85%;}
.s21_wrap .pd_cont .pd_info > p {font-size: 15px; margin-top: 15px; color: #666; text-align: right;}
.s21_wrap .pd_cont .order_code {margin-top: 70px;}
.s21_wrap .pd_cont .order_code img {max-width: 768px; width: 100%; display: block;}
.s21_wrap .pd_cont .color_index {margin-top: 70px;}
.s21_wrap .pd_cont .color_index div {display: flex; flex-flow: row wrap; justify-content: space-between;}
.s21_wrap .pd_cont .color_index div span {width: 15%; height: 60px; display: block; font-size: 16px; font-weight: 500; color: #fff; padding: 15px; margin-bottom: 20px;}
.s21_wrap .pd_cont .color_index div span:nth-child(1) {border: 1px solid #e1e1e1;}
.s21_wrap .pd_cont .color_index div span:nth-child(1), .s21_wrap .pd_cont .color_index div span:nth-child(8) {color: #131313;}

.s21_wrap .pd_cont .pd_info li figure {width: 12%;}
.s21_wrap .pd_cont .pd_info li div {width: 85%;}
.s21_wrap .cont_2 .pd_info li figure img {max-width: 132px; width: 100%;}
.s21_wrap .cont_2 .pd_info li h4 {width: 20%;}
.s21_wrap .cont_2 .pd_info li p {width: 70%;}
.s21_wrap .cont_2 .order_code img {max-width: 630px; width: 100%; display: block;}

.s21_wrap .cont_4 .product_category {margin: 70px auto;}
.s21_wrap .cont_4 .product_category ul {display: flex; flex-flow:row wrap; justify-content:space-between;}
.s21_wrap .cont_4 .product_category ul li {width: 24%;}
.s21_wrap .cont_4 .product_category figure {border: 1px solid #e1e1e1;}
.s21_wrap .cont_4 .product_category figure img {max-width:310px; width: 100%; display: block; margin: 0 auto;}
.s21_wrap .cont_4 .product_category h4 {font-size: 18px; color: #131313; font-weight: 500; text-align: center; margin-top: 10px;}
.s21_wrap .cont_4 .product_feature .txt {display: flex; flex-flow: row wrap; justify-content:space-between;}
.s21_wrap .cont_4 .product_feature .txt p {width: 49%; padding: 15px; border: 1px solid #e1e1e1; display: flex; align-items:center; font-size: 18px; color: #343434; margin-bottom: 20px;}
.s21_wrap .cont_4 .product_feature .txt p span {font-size: 20px; font-weight: 700; color: #005b9d; display: inline-block; margin-right: 10px;}
.s21_wrap .cont_4 .pd_method {margin-top: 70px;}
.s21_wrap .cont_4 .pd_method ul {display: flex; justify-content:space-between; flex-flow:row wrap;}
.s21_wrap .cont_4 .pd_method ul li {width: 18.5%; border: 1px solid #e1e1e1; text-align: center;}
.s21_wrap .cont_4 .pd_method ul li img {max-width:244px; width: 100%; display: block;}
.s21_wrap .cont_4 .pd_method .num {font-size: 20px; font-weight: 700; color: #005b9d; margin: 15px auto 10px;}
.s21_wrap .cont_4 .pd_method h4 {font-size: 16px; color: #343434; padding: 0 10px; margin-bottom: 30px;}
.s21_wrap .cont_4 .pd_method ul li:last-child {display: flex; flex-flow:column wrap; justify-content:center; background: #005b9d; border: 1px solid #005b9d;}
.s21_wrap .cont_4 .pd_method ul li:last-child .num {margin: 0 auto 10px; color: #fff;}
.s21_wrap .cont_4 .pd_method ul li:last-child h4 {margin-bottom: 0; color: #fff;}

@media (max-width: 1080px) {
.s21_wrap .cont_4 .pd_method ul {justify-content:center;}
.s21_wrap .cont_4 .pd_method ul li {width: 31%; margin: 1%;}

}

@media (max-width: 768px) {
.sub_right {padding: 60px 0;}
.content_title {margin: 0 0 20px;}

.s21_wrap .pd_tab {margin-bottom: 30px; flex-flow:row wrap;}
.s21_wrap .pd_tab li {font-size: 14px; height: 40px; line-height: 40px; width: 50%;}
.s21_wrap .pd_tit {font-size: 20px;}
.s21_wrap .pd_cont .flx figure {width: 100%;}
.s21_wrap .pd_cont .flx figure img {margin: 0 auto;}
.s21_wrap .pd_cont .flx > div {width: 100%; margin-top: 20px;}
.s21_wrap .pd_sub_tit {font-size: 18px;}
.s21_wrap .pd_cont .features li h4 {font-size: 16px;}
.s21_wrap .pd_cont .features li p {font-size: 14px;}
.s21_wrap .pd_cont .features li p br {display: none;}
.s21_wrap .pd_cont .pd_info {margin-top: 40px;}
.s21_wrap .pd_cont .pd_info li {padding: 15px;}
.s21_wrap .pd_cont .pd_info li figure {width: 100%; margin-bottom: 10px;}
.s21_wrap .pd_cont .pd_info li figure img {width: 40%;}
.s21_wrap .pd_cont .pd_info li div {width: 100%;}
.s21_wrap .pd_cont .pd_info li h4 {width: 30%; font-size: 16px;}
.s21_wrap .pd_cont .pd_info li p {width: 70%; font-size: 14px;}
.s21_wrap .pd_cont .pd_info > p {text-align: left;}
.s21_wrap .pd_cont .order_code, .s21_wrap .pd_cont .color_index {margin-top: 40px;}
.s21_wrap .pd_cont .color_index div span {font-size: 14px; padding: 10px; height: 50px;}
.s21_wrap .cont_4 .product_category ul li {width: 49%; margin-bottom: 2%;}
.s21_wrap .cont_4 .product_category h4 {margin-top: 5px; font-size: 16px;}
.s21_wrap .cont_4 .product_feature .txt p {width: 100%;}
.s21_wrap .cont_4 .pd_method ul li {width: 48%; margin: 1%;}
.s21_wrap .cont_4 .pd_method ul li:last-child {width: 100%; padding: 15px 0;}
.s21_wrap .cont_4 .pd_method .num {font-size: 18px;}
.s21_wrap .cont_4 .pd_method h4 {font-size: 14px;}
}

.s22_wrap .cha_wrap {margin-top: 70px;}
.s22_wrap .cha_wrap li {padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #e1e1e1;}
.s22_wrap .cha_wrap li h4 {font-size: 18px; color: #005b9d; font-weight: 500; margin-bottom: 10px;}
.s22_wrap .cha_wrap li p {font-size: 16px; color: #343434; line-height: 1.6;}

.s31_wrap .pd_method {margin-top: 70px;}
.s31_wrap .pd_method ul {display: flex; flex-flow:row wrap; border-top: 2px solid #005b9d; border-bottom: 2px solid #005b9d;}
.s31_wrap .pd_method ul li {width: 50%; display: flex; align-items:center; padding: 30px;}
.s31_wrap .pd_method ul li:first-child {border-right: 1px dashed #005b9d; border-bottom: 1px dashed #005b9d;}
.s31_wrap .pd_method ul li:nth-child(2) {border-bottom: 1px dashed #005b9d;}
.s31_wrap .pd_method ul li:nth-child(3) {border-right: 1px dashed #005b9d;}
.s31_wrap .pd_method figure {width: 130px; height: 130px; border-radius:50%; background: rgba(0,91,157,0.07); display: flex; flex-flow:column wrap; justify-content:center;}
.s31_wrap .pd_method figure img {max-width:110px; width: 100%; display: block; margin: 0 auto;}
.s31_wrap .pd_method .txt {width: 70%; margin-left: 5%;}
.s31_wrap .pd_method .txt .num {font-size: 20px; font-weight: 700; color: #005b9d; margin-bottom: 10px;}
.s31_wrap .pd_method .txt h4 {font-size: 16px; color: #343434; }

@media (max-width: 768px) {
.s22_wrap .cha_wrap {margin-top: 40px;}
.s22_wrap .cha_wrap li {padding-bottom: 10px; margin-bottom: 10px;}
.s22_wrap .cha_wrap li h4 {font-size: 16px;}
.s22_wrap .cha_wrap li p {font-size: 14px;}

.s31_wrap .pd_method ul li {display: block; padding: 15px;}
.s31_wrap .pd_method figure {width: 110px; height: 110px; margin: 0 auto;}
.s31_wrap .pd_method figure img {width: 70%;}
.s31_wrap .pd_method .txt {width: 100%; margin-left: 0; text-align: center; margin-top: 10px;}
.s31_wrap .pd_method .txt h3 {font-size: 14px;}
}

.s41_wrap .pd_method {margin-top: 70px;}
.s41_wrap .pd_method ul {display: flex; justify-content:space-between; flex-flow:row wrap;}
.s41_wrap .pd_method ul li {width: 15%; border: 1px solid #e1e1e1; padding: 15px; text-align: center;}
.s41_wrap .pd_method figure {width: 100px; height: 100px; margin: 0 auto; background: #f4f4f4; border-radius:50%; display: flex; flex-flow:column wrap; justify-content:center;}
.s41_wrap .pd_method figure img {max-width:90px; width: 60%; display: block; margin: 0 auto;}
.s41_wrap .pd_method h4 {margin-top: 10px; font-size: 16px; color: #343434;}

@media (max-width: 1080px) {
.s41_wrap .pd_method ul li {width: 32%; margin-bottom: 2%;}
}

@media (max-width: 768px) {
.s41_wrap .pd_method {margin-top: 40px;}
.s41_wrap .pd_method ul li {width: 49%;}
.s41_wrap .pd_method h4 {font-size: 14px;}
.s41_wrap .pd_method figure {width: 80px; height: 80px;}
}


/************************* title_navi 시작 *************************/
.navi_all {max-width:1300px; width: 100%; margin:-30px auto 0; background: var(--main-color); height:60px;} 
.navi_in	{width: 100%; margin:0 auto; padding:0;}
.navi_in:after		{clear:both; content:''; display:block; width:100%;}

.home_btn_all						{float:left; padding:0; width:60px; }
.home_btn_all .home_btn {border-right:1px solid rgba(255,255,255,0.5);}
.home_btn_all .home_btn a	{display:block; height:59px; line-height:60px; text-align:center; color: #fff; font-size: 25px;}
.home_btn_all .home_btn a:hover		{}
.home_btn_all .home_btn a img	{vertical-align:middle;}

.navi_left					{float:left;}
.navi_left:after		{clear:both; content:''; display:block; width:100%;}
.navi_left div			{float:left;}

.navi_main		{padding:0 0 0 0; height:60px; width:250px; position:relative; line-height:60px;  cursor:pointer; border-right:1px solid rgba(255,255,255,0.5);}
.navi_title01	{padding:0 0 0 0; height:40px; width:250px; position:relative; line-height:50px; }
.navi_title01 h1 {color:#777; font-size:18px; margin-left:10px; width:100%;}
.navi_title01 h1.sub_menu:hover { color:#333; }

.navi_main h1 { color:#777; font-size:18px; margin-left:20px;}
.navi_main h1.sub_manu:hover { color:#333; }
.navi_main > .deco_right { float:right;  }

.navi_main >a.down_btn	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn2	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn3	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn3	img { vertical-align: middle; }

.h1_focus	{color:#fff !important;;}

.navi_sub {padding:0; height:60px; width:250px; line-height:60px; position:relative; cursor:pointer; border-right:1px solid rgba(255,255,255,0.5);}
.navi_sub > h2						{ color:#fff; font-size:18px;  cursor:pointer; margin-left:20px;}
.navi_sub>a.down_btn4	{position:absolute; right:10px; top:0px; }

.navi_sub > p						{float:right; }

.extend							{position:relative; top:-1px; width:100%; }
.extend > ul				{position: absolute;left:-1px; min-height:1px;width:251px;padding-left: 0px; padding:0px 0 10px 0; border-top:0;z-index: 999; background:#fff; border:1px solid #efefef; display:none;}
.extend > ul a { text-decoration:none; }


.extend2							{position:relative; top:-1px; width:100%;}
.extend2 > ul				{position: absolute;left:-1px; min-height:1px; width:101%; padding-left:0px; z-index: 999; background:#fff; border:1px solid #efefef; display:none; padding:0px 0 10px 0; }
.extend2 > ul a { text-decoration:none; }
.extend2 h1 { }

/*
position:absolute; left:-20px; min-height:1px; width:256px; padding-left:20px;  border-top:1px solid #efefef; z-index:999; background:#ddd; 
*/

.extend > ul > li		{min-height:20px;}
.down_btn			{cursor:pointer; }

@media (max-width:767px){
	.home_btn_all {display:none;}
	.navi_left {width:100%;}
	.down_btn,.down_btn2{width:50%}
	.extend,.extend > ul,.extend2,.extend2 > ul, .navi_title01 {width:100%;}
	.navi_sub > h2 {font-size: 16px;}
	.navi_main h1 {font-size: 16px;}
}

/************************* title_navi 끝 *************************/


/************************* footer_inc 시작 *************************/

.footer {padding: 2.75em 0; background: #000; color: #fff; font-size: 16px;}
.footer__inner {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.875em 3.75em; max-width: 1353px; margin: 0 auto;}

.footer__logo-img {width: 10.125em; height: auto;}
.footer__company {flex: 1;}
.footer__name {font-size: 1em; font-weight: 700;}
.footer__info {display: flex; flex-wrap: wrap; align-items: center; margin-top: 0.25em; font-size: 0.875em; font-weight: 700;}
.footer__info-item {position: relative; padding: 0 1em;}
.footer__info-item:first-child {padding-left: 0;}
.footer__info-item:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 0.75em; background: #fff; transform: translateY(-50%);}
.footer__copyright {margin-top: 0.75em; font-size: 0.875em; font-weight: 600; color: #aaa;}

.footer__support {text-align: right;}
/* [26.09.29] 푸터 '고객지원' 강조색. 배경이 검정(#000)이라 메인색 #2A3E92 는 거의 안 보여 → 로고 그라디언트의 밝은 파랑 사용.
   흰색(#fff)으로 바꿔도 무방. 원래 값: #d70010 */
.footer__support-title {font-weight: 700; color: #3871C1;}
.footer__support-time {margin-top: 0.5em; font-size: 0.875em; font-weight: 700;}
.footer__support-note {margin-top: 0.125em; font-size: 0.875em; font-weight: 700; color: #aaa;}
.footer__links {display: flex; justify-content: flex-end; gap: 0.625em; margin-top: 1em;}
.footer__links .footer__link {display: flex; align-items: center; justify-content: center; min-width: 9.0714em; padding: 0.85714em; font-size: 0.875em; font-weight: 700; color: #fff; border: 1px solid #fff; border-radius: 0.25em;}
@media (max-width:1400px) {
		.footer__inner {padding: 0 4%; gap: 1.875em;}
		.footer {font-size: 15px;}
}
@media (max-width:1080px) {
		.footer__company {flex: none; width: 100%;}
		.footer__support {width: 100%; padding-top: 1.875em; border-top: 1px solid var(--main-gray); text-align: left;}
		.footer__links {justify-content: flex-start;}
}
@media (max-width:768px) {
		.footer {font-size: 14px;}
}
@media (max-width:500px) {
		.footer {font-size: 13px;}
}



/************************* footer_inc 끝 *************************/



/************************* left_lnb_inc 시작 *************************/
.left_lnb		{  }
/************************* left_lnb_inc 끝 *************************/



/************************* ui.totop 시작 *************************/
#toTop {
	display:block;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("./img/ui.totop6.png") no-repeat left top;
}

#toTopHover {
	background:url("./img/ui.totop6.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}
/************************* ui.totop 끝 *************************/












#header_t_id, .hide_footer { position: absolute; left: -9999px; }
#w_header #w_gnb > li > a { color:inherit; }
#w_header .order { color:#fff; }