/* include 공통 CSS */

/************************* 전체 공통 *************************/
.pretendard {font-family: 'Pretendard', sans-serif;}
.inner {max-width:1400px; margin: 0 auto;}
.flx-row {display: flex; flex-flow:row wrap;}
.flx-col {display: flex; flex-flow:column wrap;}

@media(max-width:1440px){
	.inner {padding: 0 4%;}
}
@media(max-width:768px){
	#main-container .inner {padding:16% 4%}
}

/***************** 더보기 버튼 스타일 CSS 커스텀 시작 *****************/

.more-btn * {transition:.3s ease all;}
.more-btn span {margin-right: 1em; font-size: max(1.7rem, 13px);}
@media(max-width:1080px){
	.more-btn img {max-width:20px;}
}
@media(max-width:768px){
	.more-btn img {max-width:15px;}
}

/***************** 더보기 버튼 스타일 CSS 커스텀 끝 *****************/



/***************** 파일 다운로드 버튼 CSS 커스텀 시작 *****************/

a.list_file {display: inline-flex; width: 100%; max-width: 150px; height: 34px; justify-content:center; align-items: center; text-align: center; font-size: max(1.7rem, 12px); background-color: #c4c4c4; color: #fff; border-radius:34px;}
a.list_file img {margin-left: 18px;}

@media(max-width:1080px){
	a.list_file {max-width:130px;}
  a.list_file img {margin-left: 8px;}
}
@media(max-width:768px){
	a.list_file {max-width:100px; height: 28px;}
	a.list_file img {display: none;}
}
@media(min-width:768px){
	a.list_file {transition:.3s ease all;}
	a.list_file:hover {background-color: #0E3F98;}
}

/***************** 파일 다운로드 버튼 CSS 커스텀 끝 *****************/



/***************** 하이픈 리스트 스타일 CSS 커스텀 시작 *****************/

.desc-list li {position: relative; padding-left: 0.7em; font-size: max(1.7rem, 13px); color: #4d4d44; line-height: 1.7;}
.desc-list li:before {position: absolute; content:''; top: 14px; left: 0;  display: inline-block; width: 6px; height: 1px; background-color: #4d4d4d;}
@media(max-width:1440px){
	.desc-list li:before {top: 12px;}
}
@media(max-width:1080px){
	.desc-list li:before {top: 10px; width: 4px;}
}

/***************** 하이픈 리스트 스타일 CSS 커스텀 끝 *****************/


/***************** 스텝 타이틀 CSS 커스텀 시작 *****************/

.step-tit h4 {margin-bottom: 0.5em; font-size: max(1.7rem, 14px); font-weight: 600; color: #0e3f98;}
.step-tit h3 {font-size: max(2.2rem, 16px); font-weight: 600; line-height: 1.54;}
.step-tit h3 span {font-weight: 400; color: #4d4d4d;}

/***************** 스텝 타이틀 CSS 커스텀 끝 *****************/


/************************* 메인 공통 *************************/

.m-tit {padding:0 4%; text-align: center;}
.m-tit h2 {font-size: 4.8rem; font-weight: 600;}
.m-tit p {margin-top: 0.45em; font-size: max(1.7rem, 13px); font-weight: 500; color: #4d4d4d; line-height: 1.6471;}
.m-tit2 {font-size: 6rem; font-weight: 600; text-align: center; color: #fff;}

.mct-tit h3 {position: relative; font-size: 3rem; font-weight: 700;}
.mct-tit h3:before {position: absolute; top: 3px; left:-7px; content:''; display: inline-block; width: 7px; height: 7px; border-radius:100%; background-color: #0e3f98;}
.mct-tit p {margin-top: 0.2em; font-size: max(1.7rem, 13px); font-weight: 500;}


@media(max-width:1600px){
	.mct-tit h3{font-size: 2.4rem;}
	.main2 .mct-box {padding: 0 30px 30px !important;}

}

@media(max-width:1080px){
	.m-tit p br {display: none;}
	.mct-tit p br {display: none;}
	.main2 .mct-box {padding: 0 20px 20px !important;}
}

/************************* 서브 공통 *************************/
.s-tit {text-align: center;}
.s-tit h2 {font-size: 4.2rem; font-weight: 600;}
.s-tit p {margin-top: 1.2em; font-size: max(2rem, 15px); color: #4d4d4d;}

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


@media(max-width:500px){
	.sub_tab			{display:none;}
}

.content_desc				{margin-top: 108px; min-height:500px;}
@media(max-width:1440px){
	.content_desc {margin-top: 7.5%;}
}
@media(max-width:768px){
	.content_desc {margin-top: 12%;}
}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header_t{width:100%; display:flex; justify-content: space-between; align-items: center; padding:0 60px; position: fixed; z-index: 100; left:0; top:0;}
.header_t.f-nav{background:#fff; border-bottom:1px solid #ddd; position:fixed;}

.header_logo a{position: relative; display: block;}

.header_gnb a{color:#fff;}
.header_t.f-nav .header_gnb a{color:#121212;}

.header_gnb .main_menu{display: flex; align-items: center; justify-content: center;}
.header_gnb .main_menu .menu{position: relative; margin: 0 32px;}
.header_gnb .main_menu .menu:first-child {margin-left:0;}
.header_gnb .main_menu .menu:last-child {margin-right: 0;}
.header_gnb .main_menu .menu>a{display: block; font-size: 2rem; padding:0 2.45em; font-weight: 500; line-height: 110px; transition: .3s ease all;}

.header_gnb .snb_menu{display: none; position: absolute; top:110px; background:#fff; padding:5px; width: 100%; left:0; right:0; margin: auto; border:1px solid #ddd; z-index: 10;}
.header_gnb .snb_menu a{font-weight:500; display: block; padding:10px 0; color:#121212; font-size:14px; text-align: center;}

.header_gnb .main_menu li>a:focus, .header_gnb .main_menu li:hover>a{color:#0E3F98;}/*hover*/
.header_gnb .main_menu li.active>a{color:#0E3F98;}/*1댑스 현재 페이지 on*/
.header_gnb .snb_menu .sub_active>a{color:#0E3F98;}/*2댑스 현재 페이지 on*/
/*.header_gnb .snb_menu a:hover{color:#fff;} 2댑스 hover*/

.header_btn{display: flex; justify-content: flex-end; align-items: center;}
.header_btn .link-yt {position: relative; margin-right: 2rem;}
.header_btn .link-yt img {max-width:100%; vertical-align:middle; transform: scale(1.2);}
.header_btn .link-yt img.ftop_img {position: absolute; left: 0; top: 1px;}

.header_btn .link-in {position: relative; margin-right: 2rem;}
.header_btn .link-in img {max-width:100%; vertical-align:middle; }
.header_btn .link-in img.ftop_img {position: absolute; left: 0; top: 1px;}

.header_btn .hd_search {position: relative;}
.f-nav .header_btn .hd_search:after {position: absolute; display: block; content:''; display: block; right: -10px; top: 3px; width: 1px; height: 10px; background-color: #9d9d9d;}
.header_btn .hd_search img {transition:.3s ease all;vertical-align: middle;}
.header_btn .language_btn{position: relative;  margin:0 2.7rem 0 2rem; text-align:center;}
.header_btn .language_btn>a{color:#fff; font-size:14px; font-weight: 500; width:100%; text-align:center; transition:.3s ease all;}
.header_btn .language_btn ul{position:absolute; top:30px; width:150%; left: -25%; display: none; background:#fff; padding:5px 10px; border:1px solid #ddd;}
.header_btn .language_btn ul li a{display:block; font-size:13px; color:#121212; padding:5px 0; text-align:center;}

.header_t.f-nav .header_btn .language_btn a{color:#9d9d9d;}
.header_btn .language_btn a:hover{color:#0E3F98 !important;}
.header_btn .language_btn a.on {color:#0E3F98}

.header_btn .login_btn{display: flex; flex-direction: column; align-items: flex-end;}
.header_btn .login_btn a{display: block; font-size:14px; color:#fff; padding:3px 0;}
.f-nav .header_btn .login_btn a{color:#121212;}

.dft_img {transition: .3s ease all;}
.ftop_img {position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; transition: .3s ease all;}
.f-nav .dft_img {opacity: 0; visibility: visible;}
.f-nav .ftop_img {opacity: 1; visibility: visible;}

.sch-wrap {position: absolute; display: flex; justify-content:center; align-items:center; left: 0; bottom: -90px; width: 100%; height: 110px; background-color: #fff; border-top:1px solid #ddd; opacity: 0; visibility: hidden; box-shadow:0px 4px 12px rgba(0,0,0,0.05); transition:.3s ease all; }
.sch-wrap.on {bottom: -110px; opacity: 1; visibility: visible;}
.sch-wrap form {width: 100%;}
.sch-wrap .inner {position: relative; width: 100%;}
.sch-wrap input[type="text"] {padding: 0 2.4em 0 1.2em; width: 100%; height: 60px; background-color: #f7f7f7; font-size: max(1.7rem, 13px);}
.sch-wrap button {position: absolute; top: 50%; transform: translateY(-50%); right: 10px;}

@media(max-width:1440px){
	.header_t {padding: 0 4%;}
	.header_gnb .main_menu .menu {margin: 0 10px;}
	.sch-wrap button {right:calc(5% + 10px);}
}
@media(max-width:1080px){
	.header_t {padding: 20px 4%;}
	.header_gnb{display: none;}
	.header_logo img {max-width:140px;}
	.f-nav .header_btn .hd_search:after {top: 4px; right: -9px;}
}
@media(max-width:768px){
	.header_t {padding: 16px 4%;}
	.f-nav .header_btn .hd_search:after {right: -6px;}
	.sch-wrap input[type="text"] {height: 46px;}
	.sch-wrap {bottom: -80px; height: 90px;}
	.sch-wrap.on {bottom: -90px;}
}
@media (max-width:500px) {
	.header_logo img {width: 120px;}
}


/* 햄벅 */
.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; width: 16px; height: 16px; background-color:transparent; background-image:none; border:0;}
.mo_nav .navbar-toggle:focus {outline: 0;}
.mo_nav .nav_dot {position: absolute; display: block; width: 5px; height: 5px; background-color: #fff; transition: .3s ease all;;}
.mo_nav .nav_dot:first-of-type {top: 0; left: 0;}
.mo_nav .nav_dot:nth-of-type(2) {top: 0; right: 0;}
.mo_nav .nav_dot:nth-of-type(3) {bottom: 0; right: 0;}
.mo_nav .nav_dot:nth-of-type(4) {bottom: 0; left: 0;}

.f-nav .mo_nav .nav_dot {background-color: #212121;}

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

/************************* main_inc 시작*************************/
@media(max-width:768px){
.main1, .main1 .fp-tableCell{height: calc(100vh - 80px) !important; }
}

/* main2 start */
.main2 {background-color: #f7f7f7;}
.main2 .fp-tableCell > .flx-col {height: 100%; justify-content: flex-end;}
.main2 .m-tit {justify-content: center;}
.main2 .mct-wrap {margin-top: 2%;}
.main2 .mct-box {justify-content: flex-end; padding:0 60px 60px; max-height:636px; min-height:450px; width: 20%; height: 68vh; background-size:cover; background-position: center; background-repeat: no-repeat;}
.main2 .mct01 {background-image:url('./img/main2_bg01.jpg')}
.main2 .mct02 {background-image:url('./img/main2_bg02.jpg')}
.main2 .mct03 {background-image:url('./img/main2_bg03.jpg')}
.main2 .mct04 {background-image:url('./img/main2_bg04.jpg')}
.main2 .mct05 {background-image:url('./img/main2_bg05.jpg')}


.main2 .mct-tit {margin-bottom: 6%; color: #fff; transition:.3s ease all;}
.main2 ul {height: 0; opacity: 0; visibility: visible; transition:.3s ease all;}
.main2 li {margin-top: 10px;}
.main2 li:first-child {margin-top: 0;}
.main2 li a {position: relative; align-items:center; padding:0 30px 0 10px; width: 100%; height: 55px; border-radius:55px; background-color: #ffffff50; border:1px solid #0e3f98; z-index: 0; overflow: hidden; transition: .3s ease all;}
.main2 li a:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0e3f98; transform: scaleX(0); transform-origin: 0% 50%; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease-out; z-index: -1;}
.main2 li figure {display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 100%; text-align: center; background-color: #0E3F98;}
.main2 li a .flx-row {width:calc(100% - 40px); padding-left: 30px; justify-content: space-between;}
.main2 li h4 {font-size: max(2rem, 13px); font-weight: 500;}
.main2 li .arr_box {position: relative; display: flex; align-items: center;}
.main2 li .arr_box img {transition:.3s ease all;}
.main2 li .arr_box img.on {position: absolute; opacity: 0; visibility: hidden;}
.main2 .more-btn {color: #fff; transition:.3s ease all;}

@media(max-width:1440px){
	.main2 .mct-box  {padding: 0 3% 4%;}
}
@media(max-width:1080px){
	.main2 li a {width: 100%;}
}
@media(max-width:768px){
	.main2, .main2 .fp-tableCell{height: auto !important;}
	.main2 .fp-tableCell > .flx-col {padding-top: 16%; justify-content: center;}
	.main2 .m-tit {margin-bottom: 20px; padding-top: 0;}
	.main2 li div {padding-left: 15px;}
	.main2 .mct-box {flex-flow:row wrap; justify-content: space-between; align-items:center; padding:6% 4%; width: 100%; min-height: auto; height: auto;}
	.main2 .mct-tit {margin-bottom: 0; width: 48%;}
	.main2 .mct-box ul {width: 48%; height: auto; opacity: 1; visibility: visible;}
	.main2 .more-btn {display: none;}
}
@media(max-width:600px){
	.main2 .mct-tit {width: 100%;}
	.main2 .mct-box ul {margin-top: 4%; width: 100%;}
	}
	


/* main2 effect */
@media(min-width:768px){
.main2 .mct-box:hover ul {height: 185px; opacity: 1; visibility: visible;}
.main2 .mct02:hover ul {height: 250px;}
.main2 .mct-box:hover .mct-tit {margin-bottom: calc(6% - 20px);}
.main2 .mct-box:hover .more-btn {opacity: 0; visibility:hidden;}
.main2 li a:hover:after {transform-origin: 0% 50%; transform: scaleX(1);}
.main2 li a:hover {color: #fff;}
.main2 li a:hover .arr_box img.off {opacity: 0; visibility: visible;}
.main2 li a:hover .arr_box img.on {opacity: 1; visibility:visible}
}


/* main3 start */
.main3 {background-color: #F7F8FB;}
.main3 .m-tit {padding-top: 78px; margin-bottom: 30px;}
.main3 .mct-wrap {position: relative;}

@media(max-width:768px){
	.main3, .main3 .fp-tableCell{height: auto !important;}
	.main3 .m-tit {padding-top: 0;}
}

/* main4 start */
.main4 {padding-top: 20px; background: url('./img/main4_bg01.jpg') no-repeat center / cover;}
.main4 .mct-wrap {position: relative;}
.main4 .m-tit2 {margin-bottom: 19px;}

@media(max-width:768px){
	.main4 {padding-top: 0;}
	.main4, .main4 .fp-tableCell{height: auto !important;}
}

/* main5 start */
.main5, .main5 .fp-tableCell {height: 450px !important;}
.main5 .mct-wrap {height: 100%;}
.main5 .mct-box {width: 50%; height: 100%; background-size:cover; background-repeat: no-repeat; background-position: center;}
.main5 .mct01 { background-image:url('./img/main5_bg01.jpg');}
.main5 .mct02 {background-image:url('./img/main5_bg02.jpg');}
.main5 .mct {width: 700px; height: 100%; justify-content: center;}
.main5 .mct01 .mct {margin-left: auto;}
.main5 .mct02 .mct {margin-right: auto; padding-left: 100px;}
.main5 .mct-tit {color: #fff;}
.main5 ul {margin-top: 54px;}
.main5 li a {position: relative; padding:0 27px; justify-content: space-between; align-items:center; height: 55px; border-radius:55px; border:1px solid #fff; z-index: 0; overflow: hidden; transition:.3s ease all;}
.main5 li a:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0e3f98; transform: scaleX(0); transform-origin: 0% 50%; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease-out; z-index: -1;}
.main5 li:first-of-type {margin-right: 1.5rem; margin-bottom: 1.5rem;}
.main5 li:first-of-type a {width: 218px;}
.main5 li:nth-of-type(2) a {width: 253px;}
.main5 li a h4 {font-size: max(1.7rem, 13px); font-weight: 500; color: #fff;}

/* main5 effect */
.main5 li a:hover {border:1px solid #0E3F98}
.main5 li a:hover:after {transform: scaleY(1);}

@media(max-width:1440px){
	.main5, .main5 .fp-tableCell {height: 400px !important;}
	.main5 .mct {width: 100%;}
	.main5 .mct01 .mct {margin:0; padding: 0 4%;}
	.main5 .mct02 .mct {margin:0; padding: 0 4%;}
	.main5 ul {margin-top: 40px;}
	.main5 li a {height: 45px;}
	.main5 li:first-of-type a {width: 200px;}
	.main5 li:nth-of-type(2) a {width: 220px;}
}
@media(max-width:1080px){
	.main5, .main5 .fp-tableCell {height: 350px !important;}
	.main5 ul {margin-top: 35px;}
	.main5 li a {height: 40px;}
	.main5 li:first-of-type a {width: 180px}
	.main5 li:nth-of-type(2) a {width: 200px;}
}
@media(max-width:500px){
	.main5, .main5 .fp-tableCell {height: auto !important;}
	.main5 .mct-box {width: 100%; padding:10% 0%;}
}



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

.s11-1 .intro-video {margin:6% 0 8.5%; display: flex; justify-content: center; align-items:center; height: 600px; background-color: #d9d9d9; text-align: center; font-size: 2.8rem; }

@media(max-width:1080px){
	.s11-1 .intro-video {height: 480px;}
}
@media(max-width:768px){
	.s11-1 .intro-video {height: 360px;}
	.s11-1 .intro-video {margin:12% 0 18%;}
}
@media(max-width:500px){
	.s11-1 .intro-video {height: 240px;}
}

.s11-2 {padding:5.25% 0; text-align: center; height: 828px; background:url('./img/s11_bg01.png') no-repeat center center #f7f7f7;}
.s11-2 h2 {font-size: 5rem; font-weight: 700;}
.s11-2 h2 span {color: #0e3f98;}
.s11-2 .sct-wrap {position: relative; margin:4rem 0 5.5rem; justify-content: center;}
.s11-2 .sct-wrap:before {position: absolute; content:''; top: 50%; left: 50%; transform:translate(-50%, -50%); display: block; width: 20px; height: 2px; background-color: #fff;}
.s11-2 .sct-wrap:after  {position: absolute; content:''; top: 50%; left: 50%; transform:translate(-50%, -50%); display: block; width: 2px; height: 20px; background-color: #fff;}
.s11-2 .sct-wrap .sct {display: flex; flex-flow:column wrap; justify-content: center; align-items: center; width: 380px; height:380px; color: #fff; border-radius:100%;}
.s11-2 .sct-wrap .sct01 {background-color: rgba(14,63,152,0.8);}
.s11-2 .sct-wrap .sct02 {margin-left: -80px; background-color: rgba(77,77,77,0.8);}
.s11-2 .sct-wrap h4 {margin: 0.7em 0 0.3em; font-size: max(2.4rem, 16px); font-weight: 500;}
.s11-2 .sct-wrap span {font-size: max(1.7rem, 13px);}
.s11-2 p {font-size: max(2rem, 14px); font-weight: 500; color: #4d4d4d; line-height: 1.6;}

@media(max-width:1080px){
	.s11-2 {height: auto; padding-bottom: 8%;}
	.s11-2 .sct-wrap .sct {width: 320px; height: 320px;}
	.s11-2 .sct-wrap .sct02 {margin-left: -60px;}
}
@media(max-width:768px){
	.s11-2 {padding:15% 0 18%;}
	.s11-2 .sct-wrap .sct {width: 240px; height: 240px;}
	.s11-2 .sct-wrap .sct02 {margin-left: -40px;}
	.s11-2 .sct-wrap:before {width: 16px;}
	.s11-2 .sct-wrap:after {height: 16px;}
}
@media(max-width:500px){
	.s11-2 .sct-wrap .sct {width: 160px; height: 160px;}
	.s11-2 .sct-wrap .sct02 {margin-left: -30px;}
	.s11-2 .sct-wrap:before {width: 16px;}
	.s11-2 .sct-wrap:after {height: 16px;}
}


.s11-3 {padding:5.8% 0 6.4%}
.s11-3 h2 {padding-bottom:1.7em; text-align: center; font-size: 3rem; font-weight: 700;}
.s11-3 .sct {justify-content:space-between; align-items:center;}
.s11-3 h4 {width: 215px; font-size:max(2.4rem, 16px); font-weight: 600; color: #000;}
.s11-3 h3 {position: relative; padding:0 2%; width: 1185px; line-height: 180px; border-radius:100px; font-size: max(2.6rem, 17px); font-weight: 500; color: #fff; text-align: center;}
.s11-3 h3:before {position: absolute; content:''; display: block; left: -72px; top: 50%; transform:translateY(-50%); width: 11px; height: 11px; border-radius:100%; background-color: #0E3F98; z-index: 20;}
.s11-3 h3:after {position: absolute; content:''; display: block; left: -61px; top: 50%; transform:translateY(-50%); width: 280px; height: 1px; background-color: #ddd; z-index: 10;}
.s11-3 .sct01 {margin-bottom: 4rem;}
.s11-3 .sct01 h3 {background-color: #0E3F98;}
.s11-3 .sct02 {margin-bottom: 6rem;}
.s11-3 .sct02 h3 {background-color: #4d4d4d;}
.s11-3 ul {position: relative; width: 1185px; justify-content: space-between;}
.s11-3 ul:before {position: absolute; content:''; display: block; left: -72px; top: 50%; transform:translateY(-50%); width: 11px; height: 11px; border-radius:100%; background-color: #0E3F98; z-index: 20;}
.s11-3 ul:after {position: absolute; content:''; display: block; left: -61px; top: 50%; transform:translateY(-50%); width: 280px; height: 1px; background-color: #ddd; z-index: -1;}
.s11-3 li {width: 285px; height: 285px; display: flex; flex-flow:column wrap; justify-content:center; align-items:center; text-align: center; border-radius:100%; background-color: #f7f7f7;}
.s11-3 li h5 {margin: 0.7em 0 0.3em; font-size:max(2.4rem, 16px); font-weight: 500;}
.s11-3 li p {font-size: max(1.7rem, 13px); color: #4d4d4d; line-height: 1.7058;}

@media(max-width:1440px){
	.s11-3 h4 {width: 20%;}
	.s11-3 h3 {width: 80%;}
	.s11-3 h3:after {width: 25%;}
	.s11-3 ul {width: 80%;}
	.s11-3 ul:after {width: 25%;}

	.s11-3 li {width: 17vw; height: 17vw;}
}
@media(max-width:1080px){
	.s11-3 h4 {width: 30%;}
	.s11-3 h3 {width: 70%; line-height: 140px;}
	.s11-3 ul {width: 70%; background-color: #fff;}
	.s11-3 li {margin-bottom: 1rem; width: 100%; padding:2rem; flex-direction:row; justify-content: flex-start; height:auto; border-radius: 40px;}
	.s11-3 li:last-child {margin-bottom: 0;}
	.s11-3 li figure {margin-right: 10px; display: inline-flex; justify-content: center; align-items: center; width: 55px; height: 55px; background-color: #fff; border-radius:100%;}
	.s11-3 li h5 {margin: 0; width: 120px; text-align:left;}
	.s11-3 li p {width:calc(100% - 185px); text-align:left;}
	.s11-3 li p br {display: none;}
}
@media(max-width:768px){
	.s11-3 {padding:15% 0}
	.s11-3 h4 {width: 100%; margin-bottom: 1em; text-align: center;}
	.s11-3 h3 {width: 100%; line-height: 1.4; padding: 1.5em 12px;}
	.s11-3 h3:after {display: none;}
	.s11-3 h3:before {display: none;}
	.s11-3 ul {width: 100%;}
	.s11-3 li {width: 100%;}
	.s11-3 li h5 {width: 100px;}
	.s11-3 li p {width:calc(100% - 165px);}
}

.s11-4 {padding:6% 0 2%; background-color: #F7F8FB;}
.s11-4 {text-align: center;}
.s11-4 h2 {font-size: 3rem; font-weight: 700;}
.s11-4 p {margin-top: 0.1rem; font-size: max(2rem, 15px); color: #4d4d4d;}
.s11-4 figure {}
.s11-4 figure.pc {display: block; margin:30px 0 0 80px;}
.s11-4 figure.mo {display: none;}

@media(max-width:1440px){
	.s11-4 figure.pc {margin-left: 5%;}
}
@media(max-width:1080px){
	.s11-4 figure.pc {display: none;}
.s11-4 figure.mo {display: block;}
}
@media(max-width:768px){
	.s11-4 {padding:15% 5%;}
}

.s12-1 {padding: 7.6rem 0 11rem; justify-content: space-between;}
.s12-1 figure {width: 29%; text-align: center;}
.s12-1 figcaption {font-size: max(1.6rem, 13px);}
.s12-1 figcaption b {font-size: max(2rem, 18px);}
.s12-1 div {position: relative; padding-top: 4.5rem; width: 65%;}
.s12-1 div h4 {position: absolute; left: 0; top: 0; font-size: 12rem; font-weight: 700; color: #f5f5f5; z-index: -1; line-height: 1;}
.s12-1 div h3 {margin-bottom: 1.4em; font-size: 3rem; line-height: 1.4; font-weight: 700;}
.s12-1 div p {margin-bottom: 2em; font-size: max(1.7rem, 13px); color: #4d4d4d; line-height: 1.65;}
.s12-1 div p:last-of-type {margin-bottom: 0;}

@media(max-width:768px){
	.s12-1 figure {width: 100%; margin-bottom: 4rem;}
	.s12-1 figure img {max-width:75%;}
	.s12-1 div {width: 100%;}
}

.s13-1 {padding:7.6rem 0 11.5rem;}
.s13-1 .history-wrap {position: relative;}
.s13-1 .history-wrap .history-line {position: absolute; top: 0; left: 16%; width: 2px; height: 100%; background-color: #ddd;}
.s13-1 .history-wrap .history-line:before {position: absolute; content:''; left: -10px; top: -8px; display: inline-block; width: 22px; height: 22px; border-radius:100%; background-color:rgba(14,63,152,0.3);}
.s13-1 .history-wrap .history-line:after {position: absolute; content:''; left: -4px; top: -2px; display: inline-block; width: 10px; height: 10px; border-radius:100%; background-color:#0E3F98;}
.s13-1 .history-cont {margin-bottom: 10rem; position: relative; display: flex;}
.s13-1 .history-cont:last-child {margin-bottom: 0;}
.s13-1 .history-cont h3 {width: 16%; font-size: 3rem; font-weight: 700;}
.s13-1 .history-cont .history-box {padding:0 6%; width: 53%;}
.s13-1 .history-cont figure {width: 31%;}
.s13-1 .history {margin-bottom: 4rem;}
.s13-1 .history h4 {margin-bottom: 0.5em; font-size: max(2.4rem, 18px); font-weight: 700;}
.s13-1 .history li {margin-bottom: 1rem; display: flex;}
.s13-1 .history li:last-child {margin-bottom: 0;}
.s13-1 .history li h5 {width: 50px; font-size: max(1.7rem, 14px); font-weight: 500; color: #0e3f98;}
.s13-1 .history li p {width:calc(100% - 50px); font-size: max(1.7rem, 14px); color: #4d4d4d;}

@media(max-width:1080px){
	.s13-1 .history-wrap .history-line {top: 14px; left: 0;}
	.s13-1 .history-cont {flex-wrap: wrap; justify-content: space-between; padding-left: 4%;}
	.s13-1 .history-cont h3 {width: 100%; margin-bottom: 4rem;}
	.s13-1 .history-cont .history-box {padding: 0; width: 50%;}
	.s13-1 .history-cont figure {width: 44%;}
}
@media(max-width:768px){
	.s13-1 .history-wrap .history-line:before {left: -7px; width: 16px; height: 16px;}
	.s13-1 .history-wrap .history-line:after {left: -2px; top: -3px; width: 6px; height: 6px;}
}
@media(max-width:500px){
	.s13-1 .history-cont h3 {order:1;}
	.s13-1 .history-cont figure {margin-bottom: 6%; width: 100%; order:2;}
	.s13-1 .history-cont .history-box {width: 100%; order:3;}
}

.s14-1 {margin-top: 6%;}
.s14-1 .map-wrap {margin-bottom: 8.3%;}
.s14-1 .map-box {margin-bottom: 4.6rem; height: 500px; border:1px solid #ddd;}
.s14-1 .map-info h3 {padding-bottom: 1em; display: flex; align-items:flex-end; font-size: 3rem; font-weight: 700; color: #0d0d0d; border-bottom: 1px solid #ddd;}
.s14-1 .map-info h3 span {margin: 0 0 3px 18px; font-size: max(1.8rem, 14px); font-weight: 600; color: #c4c4c4;}
.s14-1 .map-info ul {padding-top: 4rem;}
.s14-1 .map-info li {margin-bottom: 2rem; display: flex;}
.s14-1 .map-info li:last-child {margin-bottom: 0;}
.s14-1 .map-info li figure {margin:3px 14px 0 0; width: 18px; height: 18px;}
.s14-1 .map-info li h4 {width: 140px; font-size: max(1.7rem, 13px); font-weight: 500; color: #0d0d0d;}
.s14-1 .map-info li p {width:calc(100% - 176px); font-size: max(1.7rem, 13px); color: #4d4d4d;}

@media(max-width:1080px){
	.s14-1 .map-box {height: 420px;}
	.s14-1 .map-info li h4 {width: 110px;}
	.s14-1 .map-info li p {width:calc(100% - 142px);}
}
@media(max-width:768px){
	.s14-1 {margin-top: 12%;}
	.s14-1 .map-wrap {margin-bottom: 15%;}
	.s14-1 .map-box {height: 340px;}
	.s14-1 .map-info h3 span {margin-bottom: 2px;}
}
@media(max-width:500px){
	.s14-1 .map-box {height: 260px;}
	.s14-1 .map-info h3 span {margin-bottom: 0;}
	.s14-1 .map-info li {flex-wrap: wrap;}
	.s14-1 .map-info li figure {margin-right: 8px;}
	.s14-1 .map-info li p {margin-top: 0.5em; width: 100%;}
}

.s31-1 {padding:6.6% 0 1.5%;}
.s31-1 li {text-align: center; margin-bottom: 7%; width: 25%;}
.s31-1 li figure {margin: 0 auto; display: flex; justify-content: center; align-items: center; width: 136px; height: 136px; background-color: #f7f7f7; border-radius:100%;}
.s31-1 li h4 {padding: 1.3em 0 0.5em; font-size: 2.6rem; font-weight: 600;}
.s31-1 li p {font-size: max(1.7rem, 13px); color: #4d4d4d; line-height: 1.7;}

@media(max-width:1080px){
	.s31-1 li {width: 32%; margin-right: 2%;}
	.s31-1 li:nth-child(3n) {margin-right: 0;}
}
@media(max-width:768px){
	.s31-1 {padding:12% 0 4%;}
	.s31-1 li figure {width: 115px; height: 115px;}
}
@media(max-width:500px){
	.s31-1 li {width: 49%;}
	.s31-1 li:nth-child(3n) {margin-right: 2%;}
	.s31-1 li:nth-child(2n) {margin-right: 0;}
}

.s32-1 {padding:6.6% 0 3.8%;}
.s32-1 figure {display: flex; justify-content: center; align-items:center; width: 80px; height: 80px; background-color: #f7f7f7; border-radius:100%;}
.s32-1 div {margin:0 2.75% 60px 0; padding:40px; width: 31.5%; min-height: 360px; border:1px solid #ddd;}
.s32-1 div:nth-child(3n) {margin-right: 0;}
.s32-1 div h4 {margin: 1.1em 0 0.3em; font-size: max(2.2rem, 18px); font-weight: 600;}

@media(max-width:1440px){
	.s32-1 div {margin-bottom: 4%;}
}
@media(max-width:1080px){
	.s32-1 div {padding:2.8rem;}
}
@media(max-width:768px){
	.s32-1 {padding:12% 0 8%;}
	.s32-1 figure {width: 60px; height: 60px;}
	.s32-1 figure img {width: 35px;}
	.s32-1 div {width: 48%; margin-right: 4%; min-height: 300px;}
	.s32-1 div:nth-child(3n) {margin-right: 4%;}
	.s32-1 div:nth-child(2n) {margin-right: 0;}
}

.s33-1 {padding:8.6rem 0 11.5rem;}
.s33-1 ul {justify-content: space-between;}
.s33-1 li {position: relative; text-align: center;}
.s33-1 li:after {position: absolute; top: 87px; right: -45%; content:''; display: inline-block; width: 31px; height: 10px; background: url('./img/link_arrow3.svg') no-repeat center / cover;}
.s33-1 li:last-child:after {display: none;}
.s33-1 li figure {margin-bottom: 3.4rem; display: flex; justify-content: center; align-items:center; width: 175px; height: 175px; border-radius:100%; background-color: #F7F7F7;}
.s33-1 li:last-child figure {background-color: #0e3f98;}

@media(max-width:1440px){
	.s33-1 li figure {width: 150px; height: 150px;}
	.s33-1 li:after {top: 73px; right:-5vw;}
}
@media(max-width:1200px){
	.s33-1 li:after {top: 73px; right:-4.5vw;}
}
@media(max-width:1080px){
	.s33-1 ul {justify-content:center;}
	.s33-1 li {width: 33.3334%;}
	.s33-1 li:nth-child(3n):after {display: none;}
	.s33-1 li figure {margin: 0 auto 3.4rem;}
	.s33-1 li:after {right: -6.5%;}
}
@media(max-width:768px){
	.s33-1 li {margin-bottom: 4rem;}
	.s33-1 li:after {top: 50px; right: -10.5%;}
	.s33-1 li figure {width: 110px; height: 110px;}
	.s33-1 li figure img {height: 35px;}
}
@media(max-width:500px){
	.s33-1 li {width: 50%;}
	.s33-1 li:after {right: -8.5%;}
	.s33-1 li:nth-child(3n):after {display: block;}
	.s33-1 li:nth-child(2n):after {display: none;}
}

.s33-2 {padding-bottom: 12rem;}
.s33-2 .sct {padding:6.1rem 4% 4.8rem; border-bottom:1px solid #ddd;}
.s33-2 .sct:first-child {border-top:1px solid #ddd;}
.s33-2 .sct figure {width: 10%;}
.s33-2 .sct figure img {stroke:#121212;}
.s33-2 .sct .step-tit {margin-top: -3px; width: 34.5%;}
.s33-2 .sct .desc-list {margin-top: -5px; width: 55.5%;}

@media(max-width:768px){
	.s33-2 .sct figure {width: 65px;}
	.s33-2 .sct .step-tit {width: calc(100% - 65px);}
	.s33-2 .sct .desc-list {margin-top: 2rem; width: 100%;}
}

.s34-1 {margin: 8.6rem 0 12rem;}
.s34-1 figure img {vertical-align: top;}

/************************* title_navi 시작 *************************/
.navi_all{border-bottom:1px solid #ddd;}
.navi_in{width:100%; max-width:1300px; margin:0 auto; display: flex;}
.navi_in .home_btn_all a{display: flex; align-items: center; justify-content: center; padding:15px;}
.navi_in .down_btn{position:relative; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.navi_in .down_btn2{border-right:1px solid #ddd; border-left:0;}
.navi_in .down_btn .down_btn_title{display: flex; align-items: center; padding:17px 30px; cursor: pointer; width:240px;}
.navi_in .down_btn .down_btn_title h3{font-size:15px; font-weight:600; line-height:1; transition:all .2s;}
.navi_in .down_btn:hover .down_btn_title h3{color:#ea002b;}
.navi_in .down_btn .down_btn_title img{position:absolute; right:30px; top:0; bottom:0; margin:auto; transition:all .3s;}

ul.extend{position:absolute; background:#fff; width:calc(100% + 2px); top:50px; border:1px solid #ddd; z-index: 5; left:-1px; padding:10px 0; display: none;}
ul.extend li{}
ul.extend li a{ font-size:15px; font-weight:600; display: block; margin:0 30px; padding:13px 0; transition:all .3s;}
ul.extend li a:hover{color:#ea002b;}
@media(max-width:1080px){
	.navi_in .down_btn .down_btn_title {width:200px; padding: 20px;}
}
@media(max-width:768px){
	ul.extend {top:55px;}
	ul.extend li a {font-size: 14px; margin: 0px 20px; padding: 10px 0;}
}
@media(max-width:600px){
	.navi_in .home_btn_all{display: none;}
	.navi_in .down_btn{width:50%;}
	.navi_in .down_btn .down_btn_title {width:100%; padding: 15px;}
	.navi_in .down_btn .down_btn_title h3 {font-size: 13px;}
	.navi_in .home_btn_all a {padding:8px;}
	.navi_in .down_btn .down_btn_title img {right:15px;}
	ul.extend {top:43px;}
	ul.extend li a {font-size: 13px; margin: 0px 17px; padding: 8px 0;}
}


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




/************************* 제품 Wrap 커스터마이징 *************************/
.pro-wrap {margin-top: 6.8%; justify-content: space-between; align-items:flex-start;}
.pro-wrap .pro-menu {width: 300px; border-top:1px solid #121212; border-bottom:1px solid #121212;}
.pro-wrap .pro-list {width: 1040px;}

@media(max-width:1440px){
	.pro-wrap .pro-menu {width: 22%;}
	.pro-wrap .pro-list {width: 75%;}
}

@media(max-width:768px){
	.pro-wrap {margin-top: 12%;}
	.pro-wrap .pro-menu {display: flex; flex-flow:row wrap; justify-content: space-between; width: 100%;}
	.pro-wrap .pro-list {width: 100%;}
}
/************************* 제품 Wrap 커스터마이징 끝 *************************/



/************************* 제품 사이드 메뉴 커스터마이징 *************************/
.pro-menu {padding:24px 20px;}
.pro-menu div {margin-bottom: 2.4rem;}
.pro-menu div:last-child {margin-bottom: 0;}
.pro-menu h3 {margin-bottom: 0.7em; font-size: max(1.7rem, 14px); font-weight: 600;}
.pro-menu ul {margin-left:0.4rem; padding-left: 3rem; border-left: 1px solid #ddd;}
.pro-menu li a {font-size: max(1.6rem, 13px); color: #4d4d4d; line-height: 2.3;}
.pro-menu li a.on {font-weight: 600; color: #0e3f98;}
.pro-menu select {width: 100%; max-width:260px; height: 56px;}

@media(max-width:1440px){
	.pro-menu {padding:2% 1.5%;}
}
@media(max-width:768px){
	.pro-menu {margin-bottom: 8%; padding: 16px 10px;}
	.pro-menu div {width: 48%;}
	.pro-menu div.opt_box {width: 100%;}
	.pro-menu select {max-width:none; height: 42px;}
}
@media(max-width:500px){
	.pro-menu div {width: 100%;}
}
/************************* 제품 사이드 메뉴 커스터마이징 끝 *************************/



/************************* 제품 사이드 메뉴 효과 커스터마이징 *************************/
@media(min-width:768px){
	.pro-menu li a {transition:.3s ease all;}
	.pro-menu li a:hover {font-weight: 600; color: #0e3f98;}
}
/************************* 제품 사이드 메뉴 효과 커스터마이징 끝 *************************/



/************************* 제품 리스트 영역 커스터마이징 *************************/
.pro-list {padding-bottom: 12rem;}
.pro-list .board_page {margin-top: 6rem;}

.pro-list .pro-cont {position: relative; margin: 0 40px 40px 0; width: 320px; border:1px solid #ddd; text-align: center;}
.pro-list .pro-cont .no-pro {font-size: 15px; padding:1em 0.5em;}
.pro-list .pro-cont a {display: flex; flex-direction:column; justify-content:space-between; padding: 32px 20px 40px; height: 100%;}
.pro-list .pro-cont:nth-child(3n) {margin-right: 0;}
.pro-list .pro-cont .pro-info {padding-bottom: 2rem;}
.pro-list .pro-cont h3 {font-size: max(2rem, 16px); font-weight: 600; min-height: 60px;}
.pro-list .pro-cont p {font-size: max(1.7rem, 13px); color: #666;}
.pro-list .pro-cont figure {margin:11% 0 10%;}

.pro-list .pro-cont .hover-info {position: absolute; display: flex; justify-content:center; align-items:center; flex-flow: column wrap; padding:0 4% 40px; width: 100%; height: 100%; top: 0; left: 0;  background-color: rgba(0,0,0,0.8); opacity: 0; visibility: hidden; z-index: 10;}
.pro-list .pro-cont .hover-info h3 {color: #fff;}
.pro-list .pro-cont .hover-info p {margin-top: 1em; color: #fff;}

.pro-list .pro-cont .more-btn {position: relative; justify-content: center; align-items:center; height: 46px; font-size: max(1.5rem, 13px); background-color: #C4C4C4; border-radius:55px; z-index: 10;}
.pro-list .pro-cont .more-btn span {color: #fff;}

@media(max-width:1440px){
	.pro-list .pro-cont {margin: 0 2% 2% 0;  width: 32%;}
	.pro-list .pro-cont a {padding: 3% 5% 4%;}
}
@media(max-width:1080px){
	.pro-list .pro-cont {width: 49%;}
	.pro-list .pro-cont a {padding: 8% 4% 8%;}
	.pro-list .pro-cont:nth-child(3n) {margin-right: 2%;}
	.pro-list .pro-cont:nth-child(2n) {margin-right: 0%;}

	.pro-list .pro-cont .more-btn {height: 42px;}
}
@media(max-width:768px){
	.pro-list .pro-cont h3 {min-height: auto;}
	.pro-list .pro-cont .hover-info {position: static; margin-bottom: 20px; padding:12px 4%;  height: auto; opacity: 1; visibility: visible; background-color: transparent;}
	.pro-list .pro-cont .hover-info h3 {display: none;}
	.pro-list .pro-cont .hover-info p {margin-top: 0; color: #4d4d4d;}
}

@media(max-width: 500px){
	.pro-list .pro-cont .more-btn {height: 36px;}
}
/************************* 제품 리스트 영역 커스터마이징 끝 *************************/



/************************* 제품 리스트 영역 효과 커스터마이징 *************************/
@media(min-width:768px){
	.pro-list .pro-cont .pro-info h3,
	.pro-list .pro-cont .pro-info p, 
	.pro-list .pro-cont .hover-info,
	.pro-list .pro-cont .more-btn {transition:.3s ease all;}

	.pro-list .pro-cont:hover .hover-info {opacity: 1; visibility: visible;}
	.pro-list .pro-cont:hover .pro-info h3 {opacity: 0; visibility: hidden;}
	.pro-list .pro-cont:hover .pro-info p {opacity: 0; visibility: hidden;}
	.pro-list .pro-cont:hover .more-btn {background-color: #0e3f98;}
}
/************************* 제품 리스트 영역 효과 커스터마이징 끝 *************************/



/************************* 제품 카테고리 커스터마이징 *************************/
.pro-cate {margin-bottom: 20px; padding:5px 2rem; display: inline-flex; flex-flow:row wrap; background-color: #F7F7F7; border-radius:28px;}

.pro-cate li {margin:5px 5px 5px 0;}
.pro-cate li a {display: inline-flex; justify-content: center; padding: 0.35em 2em ; align-items:center; height: 100%; border-radius:1.8rem; font-size: max(1.6rem, 13px); color: #4d4d4d;}
.pro-cate li a.on {font-weight: 600; color: #fff; background-color: #0E3F98;}

@media(max-width:768px){
	.pro-cate {background-color: transparent;}
	.pro-cate li a {background-color: #f7f7f7;}
}
/************************* 제품 카테고리 커스터마이징 끝 *************************/



/************************* 제품 카테고리 효과 커스터마이징 *************************/
@media(min-width:768px){
	.pro-cate li a {transition:.3s ease all;}
	.pro-cate li a:hover {font-weight: 600; color: #fff; background-color: #0E3F98;}
}
/************************* 제품 카테고리 효과 커스터마이징 끝 *************************/



/************************* 제품 뷰페이지 커스터마이징 *************************/
.pro-mtit {margin-bottom: 5.4rem;}
.pro-mtit h2,
.pro-mtit p {padding-left: 76px;}
.pro-mtit h2 {position: relative; font-size: 3.4rem; font-weight: 600;}
.pro-mtit h2:before {position: absolute; top: 22px; left: 0; display: inline-block; content:''; width: 46px; height: 4px; background-color: #0E3F98;}
.pro-mtit p {font-size: max(2rem, 13px); font-weight: 500; color: #4d4d4d;}

.pro-stit {position: relative; margin-bottom: 49px;  padding-left: 82px; font-size: 2.8rem; font-weight: 600;}
.pro-stit:before {position: absolute; top: 18px; left: 0; content:''; display: inline-block; width: 46px; height: 2px; background-color: #0e3f98;}
@media(max-width:1080px){
	.pro-stit {margin-bottom: 40px; padding-left: 60px;}
	.pro-stit:before {top: 16px; width: 38px;}
}
@media(max-width:768px){
	.pro-stit {margin-bottom: 30px; padding-left: 48px;}
	.pro-stit:before {top: 14px; width: 30px;}
}
@media(max-width:500px){
	.pro-stit {margin-bottom: 20px; padding-left: 36px;}
	.pro-stit:before {top: 12px; width: 22px;}
}

.pro-section {margin-top: 6.5%;}
.pro-bg {padding:5.8% 0 6.3%; background-color: #f7f7f7;}

/************************* 제품 뷰페이지 인트로 *************************/
.pro-intro .inner {justify-content:space-between;}
.pro-intro figure {display: flex; justify-content:center; align-items: center; border:1px solid #ddd; width: 680px; min-height: 420px; padding: 3%;}
.pro-intro .pro-desc {padding-top: 13px; width: 660px;}
.pro-intro .pro-desc div {margin-bottom: 3.5rem;}
.pro-intro .pro-desc div:last-of-type {margin-bottom: 0;}
.pro-intro .pro-desc h4 {margin-bottom: 0.55em; font-size: 2.6rem; font-weight: 600; color: #0e3f98;}
.pro-intro .pro-desc p {font-size: max(1.7rem, 13px); color: #4d4d4d; line-height: 1.7;}
.pro-intro .pro-desc span.notice {margin-top: 2.7em; display: inline-block; font-size: max(1.7rem, 13px); font-weight: 500; color: #0e3f98;}

@media(max-width:1440px){
	.pro-intro figure {width: 48%;}
	.pro-intro .pro-desc {width: 48%;}
}
@media(max-width:768px){
	.pro-section {margin-top: 15%;}
	.pro-bg {padding:10% 0 12%;}
	.pro-intro figure {width: 100%; padding:6%; min-height: auto;}
	.pro-intro .pro-desc {width: 100%;}
}

/************************* 제품 뷰페이지 인트로 끝 *************************/


/************************* 제품 뷰페이지 테이블 공통 커스터마이징 *************************/
.pro-view .inner {overflow-x:auto;}
.pro-view table {width: 100%; min-width:600px;}
.pro-view table tr {border-bottom:1px solid #ddd}
.pro-view table tr:first-child {border-top: 1px solid #121212;}
.pro-view table th {padding:1.265em 0; font-size:max(1.7rem, 13px); font-weight: 600; background-color: #f7f7f7;}
.pro-view table td {padding:1.265em 0; font-size:max(1.7rem, 13px); color: #4d4d4d;}
/************************* 제품 뷰페이지 테이블 공통 커스터마이징 *************************/


/************************* 제품 뷰페이지 제품 설명 테이블 커스터마이징 *************************/
.pro-table {margin-top: 8rem;}
.pro-table table th {text-align:left; padding-right:40px; padding-left: 40px;}
.pro-table table td {padding-right:40px; padding-left: 40px;}
@media(max-width:1080px){
	.pro-table table th {padding-right:1em; padding-left: 1em;}
	.pro-table table td {padding-right:1em; padding-left: 1em;}
}
/************************* 제품 뷰페이지 제품 설명 테이블 커스터마이징 끝 *************************/


/************************* 제품 뷰페이지 기술 정보 커스터마이징 *************************/
.pro-tech figure {margin-top: 4.9rem; display: flex; justify-content: center; align-items:center; background-color: #fff;}
.pro-tech figure img {max-width:100%;}
/************************* 제품 뷰페이지 기술 정보 커스터마이징 끝 *************************/


/************************* 제품 뷰페이지 제품 정보 커스터마이징 *************************/
.pro-info table th,
.pro-info table td {border-right:1px solid #ddd; padding-right:1em; padding-left: 1em; text-align: center;}
.pro-info table th.subject {padding-right:2.3em; padding-left: 2.3em;}
.pro-info table td.subject {text-align:left; padding-right:2.3em; padding-left: 2.3em;}
.pro-info table th:last-child,
.pro-info table td:last-child {border-right:none;}

@media(max-width:1080px){
	.pro-info table th.subject {padding-right:1em; padding-left:1em;}
	.pro-info table td.subject {padding-right:1em; padding-left:1em;}
}
/************************* 제품 뷰페이지 제품 정보 커스터마이징 끝 *************************/


/************************* 제품 뷰페이지 제품 소개영상 커스터마이징 *************************/
.pro-video .inner {overflow: initial;}
/* .pro-video .video-wrap div {position: relative; margin-right: 2.75%; width: 31.5%; height: 280px;} */
.pro-video .video-wrap div {
  position: relative;
  /* margin-right: 2.75%; */
  width: 100%;
  height: 700px;
  margin-bottom: 50px;
}

.pro-video .video-wrap div:last-child {margin-right: 0;}

@media(max-width:1080px){
	.pro-video .video-wrap div {width: 100%; margin-right: 0; height: 50vw; margin-bottom: 8%;}
	.pro-video .video-wrap div:last-child {margin-bottom: 0;}
}
@media(max-width:500px){
	.pro-video .video-wrap div {height: 240px;}
}
/************************* 제품 뷰페이지 제품 소개영상 커스터마이징 끝*************************/


/************************* 제품 뷰페이지 참고자료 커스터마이징 *************************/
.pro-refer table th, 
.pro-refer table td {border-right:1px solid #ddd; padding-left:1em; padding-right: 1em;}
.pro-refer table td {text-align:center;}
.pro-refer table th.subject {padding-right:2.3em; padding-left: 2.3em;}
.pro-refer table td.subject {text-align:left; padding-right:2.3em; padding-left: 2.3em;}
.pro-refer table th:last-child,
.pro-refer table td:last-child {border-right:none;}

@media(max-width:1080px){
	.pro-refer table th.subject {padding-right: 1em; padding-left: 1em;}
	.pro-refer table th.subject {padding-right: 1em; padding-left: 1em;}
}
/************************* 제품 뷰페이지 참고자료 커스터마이징 끝 *************************/


/************************* 제품 뷰페이지 관련 단클론 항체 커스터마이징 *************************/
.pro-antibody table th, 
.pro-antibody table td {border-right:1px solid #ddd;}
.pro-antibody table th:last-child, 
.pro-antibody table td:last-child {border-right:none}
.pro-antibody table td {text-align: center;}
/************************* 제품 뷰페이지 관련 단클론 항체 커스터마이징 끝 *************************/


.pro-exam {padding-bottom:4.2%;}
.pro-exam ul {justify-content: space-between;}
.pro-exam li{margin-bottom: 40px; width: 48%; justify-content: space-between;}
.pro-exam li figure {width: 48%;}
.pro-exam li figure img {vertical-align: top;}
.pro-exam li div {width: 47%;}
.pro-exam li h5 {padding: 1.45em 0 0.65em; font-size: 2.6rem; font-weight: 600; color: #0e3f98;}
.pro-exam li p {font-size:max(1.7rem, 13px); color: #4d4d4d; line-height: 1.65;}

@media(max-width:1440px){
	.pro-exam li {margin-bottom: 4%; align-items: flex-start;}
	.pro-exam li h5 {padding-top: 0;}
}
@media(max-width:768px){
	.pro-exam {padding-bottom:10%;} 
	.pro-exam li {width: 100%;}
	.pro-exam li h5 {padding-top: 1.45em;}
}
@media(max-width:500px){
	.pro-exam li {margin-bottom: 8%;}
	.pro-exam li figure {width: 100%; text-align: center;}
	.pro-exam li div {width: 100%;}
}


/************************* 제품 뷰페이지 슬라이드 커스터마이징 *************************/
.pro-slide {position: relative; background-color: #F7F8FB; padding:7.2% 0;}
.pro-slide .swiper-container {position: relative; overflow: hidden;}
.pro-slide .swiper-slide a {position: relative; display: flex; padding: 4%; flex-flow:column wrap; justify-content: space-between; align-items: center; min-height: 400px; background-color: #fff; text-align: center;}
.pro-slide .swiper-slide figure {height: 290px; width: 100%; display: flex; justify-content:center; align-items:center;}
.pro-slide .swiper-slide h4 {font-size:max(2rem, 14px); font-weight: 600;}
.pro-slide .swiper-slide .hover-info {position: absolute; top: 0; left: 0; padding: 0 8%; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); text-align: center; color: #fff; opacity: 0; visibility: hidden;}
.pro-slide .swiper-slide .hover-info h4 {margin-bottom: 1em;}
.pro-slide .swiper-slide .hover-info p {margin-bottom: 4em; font-size:max(1.7rem, 13px); line-height: 1.65;}
.pro-slide .swiper-arrow {position: absolute; top: calc(50% - 90px); left: 0; right: 0; transform: translateY(-50%); z-index: 10;}
.pro-slide .slide-arrow {position: absolute; display: inline-flex; margin-top: 0; top:auto; width: 50px; height: 50px; border:1px solid #d9d9d9; background-color: #fff;}
.pro-slide .slide-arrow img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.pro-slide .slide-arrow img.on {opacity: 0; visibility: hidden;}
.pro-slide .swiper-button-prev {left: 150px;}
.pro-slide .swiper-button-next {right: 150px;}
.pro-slide .swiper-button-next:after, .pro-slide .swiper-button-prev:after {display: none;}
@media(max-width:1800px){
	.pro-slide .swiper-arrow {max-width:1400px; margin: 0 auto; top: 11.6rem; transform:none;}
	.pro-slide .swiper-button-prev {left: auto; right:50px;}
	.pro-slide .swiper-button-next {right: 0px;}
}
@media(max-width:1440px){
	.pro-slide .swiper-button-prev {right:calc(4% + 50px);}
	.pro-slide .swiper-button-next {right: 4%}
}
@media(max-width:768px){
	.pro-slide {padding:15% 0}
	.pro-slide .swiper-arrow {display: none;}
	.pro-slide .swiper-slide .hover-info {position: static; opacity: 1; visibility: visible; background-color: transparent; color: #121212;}
	.pro-slide .swiper-slide .hover-info h4 {display: none;}
	.pro-slide .swiper-slide .hover-info .more-btn {background-color: #0e3f98; align-items:center; padding: 10px 20px; border-radius:30px;}
	.pro-slide .swiper-slide .hover-info .more-btn span {color: #fff;}
}
@media(min-width:768px){
	.pro-slide .slide-arrow,
	.pro-slide .slide-arrow img {transition:.3s ease all;}

	.pro-slide .slide-arrow:hover {background-color: #0e3f98;}
	.pro-slide .slide-arrow:hover img.on {opacity: 1; visibility: visible;}
	.pro-slide .slide-arrow:hover img.off {opacity: 0; visibility: hidden;}

	.pro-slide .swiper-slide a {padding:8% 4%;}
	.pro-slide .swiper-slide figure {height: 250px;}
	.pro-slide .swiper-slide .slide-info h4,
	.pro-slide .swiper-slide .hover-info {transition:.3s ease all;}
	.pro-slide .swiper-slide:hover .slide-info h4 {opacity: 0; visibility: hidden;}
	.pro-slide .swiper-slide:hover .hover-info {opacity: 1; visibility: visible;}
	
}
/************************* 제품 뷰페이지 슬라이드 커스터마이징 끝 *************************/

.pro-view .list-btn {margin-top: 8rem; text-align: center;}
.pro-view .list-btn a {display: inline-flex; justify-content:center; align-items: center; width: 100%; max-width:200px; height: 60px; border:1px solid #d9d9d9; font-size: max(1.6rem, 13px); color: #4d4d4d; background-color: #fff; border-radius: 55px;}



/************************* footer_inc 시작 *************************/
.footer-t {justify-content: space-between; padding: 48px 60px 49px; background-color: #121212;}
.ft-logo img {width:100%; height:auto;}

.footer-t p {font-size: max(1.6rem, 12px); margin-bottom: 0.5em; color: #ffffff80; line-height: 1.875;}
.footer-t p:last-of-type {margin-bottom: 0;}
.footer-t p span:after {display: inline-block; content:'·'; margin: 0 8px;}
.footer-t p span:first-of-type:after, 
.footer-t p span:last-of-type:after {display: none;}
.footer-t p a {color: #ffffff80;}

.ft-lt {justify-content: space-between; align-items:flex-start}
.ft-info {margin-left: 30px;}
.ft-rt p {text-align:right;}

@media(max-width:1440px){
	.footer-t {padding: 48px 4% 49px; align-items: flex-end;}
	.ft-info {width: 100%; margin-top: 20px; margin-left: 0px;}
}
@media(max-width:1080px){
	.ft-lt {width: 100%;}
	.ft-lt .ft-info {margin-top: 10px; width: 100%;}
	.ft-rt {width: 100%;}
	.ft-rt p {text-align: left;}
}
@media(max-width:768px){
	.footer-t {padding: 24px 4% 25px;}
	.ft-logo img {max-width: 80px}
}

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



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



/************************* ui.totop 시작 *************************/
#toTop {
	display:none;
	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 끝 *************************/