@charset "utf-8";

.sub-visual {display: flex; justify-content: center; align-items: center; height: 260px; background-position: 50%; background-size: cover;}
.sub-visual.sub01 {background: url(/_public/images/sub/sub_visual01.jpg) 50% 50% no-repeat;background-size: cover;}
.sub-visual.sub02 {background: url(/_public/images/sub/sub_visual02.png) 50% 50% no-repeat;background-size: cover;}
.sub-visual.sub03 {background: url(/_public/images/sub/sub_visual03.png) 50% 50% no-repeat;background-size: cover;}
.sub-visual.sub04 {background: url(/_public/images/sub/sub_visual04.png) 50% 50% no-repeat;background-size: cover;}
.sub-visual .ctgr-title {color: #fff; font-weight: 700; font-size: 54px; line-height: 1;}

.sub-nav {border-bottom: 1px solid #ccc;}
.sub-nav .sub-nav-inner {display: flex; justify-content: center;}
.sub-nav .sub-nav-btn {display: flex; justify-content: center; align-items: center; width: 100%; height: 65px; color: #202020; font-weight: 500; font-size: 17px;}
.sub-nav .sub-nav-btn.active {color: #fff; font-weight: 600; background: #f87100;}

.sub-content {width: 1280px; margin: 0 auto;}
.sub-content .page-title {color: #202020; font-weight: 700; font-size: 42px; line-height: 50px; text-align: center;margin-bottom: 50px;}


.sub-content .color-orange {color:#F87100;}

/* ceo 인사말 */
.greetings {padding: 70px 0 150px;}
.greetings .img {margin-top: 50px;}
.greetings .greetings-txt1 {margin-top: 70px; color: #202020; font-size: 20px; line-height: 1.7; text-align: center;}
.greetings .greetings-txt1 em {font-weight: 700; font-size: 1em;}
.greetings .greetings-txt2 {margin-top: 50px; color: #202020; font-weight: 700; font-size: 20px; line-height: 1.7; text-align: center;}

/*ci*/
.ci {padding: 70px 0 150px;}

/*organization*/
.organizaiton {padding: 70px 0 150px;}
.organizaiton .org-top {font-size:18px;font-weight:500;text-align:center;padding:40px 0;background-color:#f5f5f5;border-radius:5px;margin-bottom:60px;line-height:1.5;word-break:keep-all;}
.organizaiton.graph { padding-bottom:80px;background:url(/_public/images/sub/organization_bg01.png) 50% 50% no-repeat;background-size:cover;}
.organizaiton.graph h3.h3 {color:#fff;}
.organizaiton.graph .flex-box {display:flex;justify-content:space-between;}
.organizaiton.graph .flex-box .g-txt p {padding:25px 60px 25px 20px;background:rgba(0,0,0,0.3);width:100%;color:#fff;font-size:17px;font-weight:700;line-height:1.6;}
.organizaiton.graph .flex-box .g-txt p + p {margin-top:20px;}
.organizaiton.graph .flex-box .g-txt span {display:block;font-weight:400;}
.organizaiton.graph .flex-box ul {display:flex;}
.organizaiton.graph .flex-box ul + ul {margin-top:30px;}
.organizaiton.graph .flex-box ul li {font-size:18px;color:#fff;padding-left:39px;position:relative;}
.organizaiton.graph .flex-box ul li + li {margin-left:50px;}
.organizaiton.graph .flex-box ul li:before {content:"";display:inline-block;width:19px;height:19px;border-radius:100%;border:2px solid #fff;position:absolute;top:2px;left:0;}
.organizaiton.graph .flex-box ul li:nth-child(1):before {background-color:#152D4A;}
.organizaiton.graph .flex-box ul li:nth-child(2):before {background-color:#FFC000;}
.organizaiton.graph .flex-box ul:nth-child(2) li:nth-child(1):before {background-color:#F87100;}
.organizaiton.graph .flex-box ul:nth-child(2) li:nth-child(2):before {background-color:#7F7F7F;}

/*hisotry*/
.leader-history {padding: 70px 0 150px;}
.leader-history section {display:flex;justify-content: space-between;}
.leader-history section + section {margin-top:88px;}
.leader-history section .txt-box {;width:640px;}
.leader-history section .txt-box h4 {font-size:42px;padding-bottom:16px;position:relative;margin-bottom:25px;}
.leader-history section .txt-box h4:before {content:"";display:inline-block;width:100%;height:2px;background-color:#202020;position:absolute;bottom:0;left:0;}
.leader-history section .txt-box div {display:flex;}
.leader-history section .txt-box div + div {margin-top:16px;}
.leader-history section .txt-box div .year {font-size:17px;font-weight:700;color:#F87100;margin-right:20px;width:7%;}
.leader-history section .txt-box div ul {width:100%;}
.leader-history section .txt-box div ul li {font-size:17px;font-weight:500;}
.leader-history section .txt-box div ul li + li {margin-top:16px;}
.leader-history section .txt-box div ul li span {display:inline-block;font-weight:600;color:#787878;margin-right:14px;width:8%;}
.leader-history section .img-box {width:500px;}

/*direction*/
.direction {padding: 70px 0 150px;}
.direction table {border-top:2px solid #202020;border-bottom:1px solid #202020;margin-top:40px;width:100%;}
.direction table tbody tr {border-bottom:1px solid #ccc;width:10%;}
.direction table tbody tr:last-child {border-bottom:none;}
.direction table tbody th {padding:28px 40px 30px;font-size:19px;font-weight:700;}
.direction table tbody td {font-size:17px;font-weight:500;color:#787878;width:90%;}
.direction table tbody tr:nth-child(1) td {color:#202020;}
.direction .button-box button {border:2px solid #F87100;color:#F87100;}
.direction .button-box button i {display:inline-block;width:20px;height:20px;background:url(/_public/images/sub/icon_newwin.svg) 50% 50% no-repeat;margin-left:5px;vertical-align: text-top;}
.direction .button-box button:hover {color:#fff;background-color:#F87100;}
.direction .button-box button:hover i {background:url(/_public/images/sub/icon_newwin_on.svg) 50% 50% no-repeat;}

/*rfcip*/
.rfcip {padding: 70px 0 150px;}
.rfcip .top-box {padding:40px;background-color:#f5f5f5;border-radius:5px;margin-bottom:70px;}
.rfcip .top-box h4 {font-size:30px;padding-left:55px;position:relative;margin-bottom:30px;}
.rfcip .top-box h4:before {content:"";display:inline-block;width:25px;height:25px;background:url(/_public/images/sub/rfcip_icon01.svg) 50% 50% no-repeat;position:absolute;top:2px;left:0;}
.rfcip .top-box p {font-size:20px;font-weight:500;}
.rfcip .section01 {padding-bottom:70px;border-bottom:1px solid #ccc;display:flex;}
.rfcip .section01 .img-box {width:50%;}
.rfcip .section01 .img-box img {display:block;margin:auto;}
.rfcip .section01 .txt-box {width:50%;padding-left:50px;}
.rfcip .section01 .txt-box ul + ul {margin-top:50px;}
.rfcip .section01 .txt-box ul strong {display:block;font-size:28px;margin-bottom:15px;position:relative;padding-left:35px;}
.rfcip .section01 .txt-box ul strong:before {content:"";display:inline-block;width:20px;height:1px;background-color:#787878;position:absolute;top:16px;left:0;}
.rfcip .section01 .txt-box ul li {font-size:17px;font-weight:500;line-height:1.6;padding-left:35px;}
.rfcip .section02 {margin-top:70px;}
.rfcip .section02 h4 {text-align:center;font-size:28px;margin-bottom:60px;font-weight:600;line-height:1.6;}
.rfcip .section02 .flex-box {display:flex;justify-content:space-between;}
.rfcip .section02 .flex-box div {flex:1;padding:50px 40px;border-radius:5px;border:1px solid #ccc;position:relative;}
.rfcip .section02 .flex-box div + div {margin-left:25px;}
.rfcip .section02 .flex-box div:before {content:"";display:inline-block;width:80px;height:80px;position:absolute;top:50px;right:40px;}
.rfcip .section02 .flex-box div:nth-child(1):before {background:url(/_public/images/sub/rfcip_icon02.png) 50% 50% no-repeat;background-size:cover;}
.rfcip .section02 .flex-box div:nth-child(2):before {background:url(/_public/images/sub/rfcip_icon03.png) 50% 50% no-repeat;background-size:cover;}
.rfcip .section02 .flex-box div:nth-child(3):before {background:url(/_public/images/sub/rfcip_icon04.png) 50% 50% no-repeat;background-size:cover;}
.rfcip .section02 .flex-box div strong {display:block;font-size:24px;color:#F87100;margin-bottom:60px;}
.rfcip .section02 .flex-box div p {font-size:17px;font-weight:500;line-height:1.6;}
.rfcip .section02 .button-box button + button {margin-left:30px;}
.rfcip .section02 .button-box button:nth-child(1) {width:280px;border:2px solid #F87100;color:#F87100;}
.rfcip .section02 .button-box button:nth-child(1) i {display:inline-block;width:20px;height:20px;background:url(/_public/images/sub/icon_newwin.svg) 50% 50% no-repeat;margin-left:5px;vertical-align: text-top;}
.rfcip .section02 .button-box button:nth-child(1):hover {color:#fff;background-color:#F87100;}
.rfcip .section02 .button-box button:nth-child(1):hover i {background:url(/_public/images/sub/icon_newwin_on.svg) 50% 50% no-repeat;}
.rfcip .section02 .button-box button:nth-child(2) {width:300px;background:#202020;color:#fff;}
.rfcip .section02 .button-box button:nth-child(2) i {display:inline-block;width:20px;height:20px;background:url(/_public/images/sub/icon_download.svg) 50% 50% no-repeat;margin-left:5px;vertical-align: text-top;}
.rfcip .section02 .button-box button:nth-child(2):hover {background:#000;}

/*iprs*/
.iprs {padding: 70px 0 150px;}
.iprs section {display:flex;flex-wrap:wrap;border-bottom:1px solid #ccc;}
.iprs section:nth-child(2) {border-top:2px solid #202020;}
.iprs section:last-child {border-bottom:1px solid #202020}
.iprs section > div {width:50%;padding:30px;display:flex;align-items:center;}
.iprs section div .img-box { max-width: 135px; border: 1px solid #ddd;}
.iprs section div .txt-box {margin-left:50px;}
.iprs section div .txt-box strong {display:block;font-size:17px;color:#F87100;margin-bottom:14px;}
.iprs section div .txt-box p {font-size:21px;font-weight:700;line-height:1.6;margin-bottom:20px;}
.iprs section div .txt-box span {font-size:17px;color:#787878;}


/*tablet*/
@media screen and (max-width: 768px) {
	/*공통영역*/
	.sub-visual {height: 180px;}
	.sub-visual.sub01 {background-image: url(/_public/images/sub/m_sub_visual01.jpg);}
	.sub-visual .ctgr-title {font-size: 32px;}

	.sub-nav .sub-nav-inner {flex-wrap: wrap; justify-content: flex-start;}
	.sub-nav .sub-nav-btn {height: 45px; margin-bottom: -1px; color: #202020; font-size: 14px; border-right: 1px solid #ccc;  border-bottom: 1px solid #ccc;}
	.sub-nav .sub-nav-btn.mo-w-full {width: 100%;}
	.sub-nav .sub-nav-btn.mo-w-half {width: 50%;}
	.sub-nav .sub-nav-btn.mo-w-3 { width: 33.3333%;}
	.sub-nav .sub-nav-btn.mo-w-2 { width: 50%;}

	.sub-content {width: auto; margin: 0 auto;}
	.sub-content .page-title {font-size: 30px; line-height: 36px;}

	/*greeting*/
	.greetings {padding: 50px 20px 120px;}
	.greetings .greetings-txt1 {font-size: 16px; line-height: 1.63;}
	.greetings .greetings-txt2 {font-size: 16px; line-height: 1.63;}

	/*ci*/
	.ci {padding: 50px 20px 60px;}

	/*organization*/
	.organizaiton {padding: 50px 20px 0px;}
	.organizaiton .org-top {padding:30px 30px;font-size:16px;}
	.organizaiton.graph {margin-top:60px;padding-bottom:60px;}
	.organizaiton.graph .flex-box {flex-wrap:wrap;}
	.organizaiton.graph .flex-box div {width:100%;}
	.organizaiton.graph .flex-box div + div {margin-top:40px;}
	.organizaiton.graph .flex-box .g-txt p {font-size:15px;}
	.organizaiton.graph .flex-box .g-img img {display:block;margin:auto;}
	.organizaiton.graph .flex-box .g-ex {width:inherit;margin:40px auto 0;}
	.organizaiton.graph .flex-box ul + ul {margin-top:20px;}
	.organizaiton.graph .flex-box ul li {font-size:15px;padding-left:29px;}
	.organizaiton.graph .flex-box ul li:before {top:0;}


	/*leader-history*/
	.leader-history {padding: 50px 20px 120px;}
	.leader-history section {flex-wrap:wrap;}
	.leader-history section + section {margin-top:60px;}
	.leader-history section .txt-box {width:100%;}
	.leader-history section .txt-box h4 {font-size:28px;}
	.leader-history section .txt-box div {flex-wrap:wrap;}
	.leader-history section .txt-box div + div {margin-top:25px;}
	.leader-history section .txt-box div .year {width:100%;margin-bottom:20px;font-size: 24px;}
	.leader-history section .txt-box div ul li {font-size:15px;}
	.leader-history section .txt-box div ul li span {width: 45px;/* display:block; */margin-bottom:8px;margin-right:0;}
	.leader-history section .img-box {width:100%;margin-top:25px;}
	.leader-history section .img-box img {width:100%;}

	/*leader-history
	.leader-history {padding: 50px 20px 120px;}
	.leader-history section {flex-wrap:wrap;}
	.leader-history section + section {margin-top:60px;}
	.leader-history section .txt-box {width:100%;}
	.leader-history section .txt-box h4 {font-size:28px;}
	.leader-history section .txt-box div {flex-wrap:wrap;}
	.leader-history section .txt-box div + div {margin-top:25px;}
	.leader-history section .txt-box div .year {width:100%;margin-bottom:20px;}
	.leader-history section .txt-box div ul li {font-size:15px;}
	.leader-history section .txt-box div ul li span {width:100%;display:block;margin-bottom:8px;margin-right:0;}
	.leader-history section .img-box {width:100%;margin-top:25px;}
	.leader-history section .img-box img {width:100%;}*/

	/*direction*/
	.direction {padding: 50px 20px 120px;}
	.direction .wrap_map {height:280px !important;}
	.direction table tbody th {font-size:16px;padding: 18px 20px 20px;width:25%;}
	.direction table tbody td {font-size:15px;width:75%;padding:18px 0 20px;word-break:keep-all;line-height:1.5;}

	/*rfcip*/
	.rfcip {padding: 50px 20px 120px;word-break:keep-all;}
	.rfcip .top-box {padding:25px;margin-bottom:40px;}
	.rfcip .top-box h4 {font-size:20px;padding-left:35px;margin-bottom:20px;}
	.rfcip .top-box h4:before {width:20px;height:20px;background-size:cover;}
	.rfcip .top-box p {font-size:15px;line-height:1.6;}
	.rfcip .section01 {flex-wrap:wrap;padding-bottom:40px;}
	.rfcip .section01 .img-box {width:100%;}
	.rfcip .section01 .txt-box {width:100%;padding-left:0;margin-top:30px;}
	.rfcip .section01 .txt-box ul + ul {margin-top:30px;}
	.rfcip .section01 .txt-box ul strong {font-size:20px;padding-left: 26px;margin-bottom:12px;}
	.rfcip .section01 .txt-box ul strong:before {width:16px;top:12px;}
	.rfcip .section01 .txt-box ul li {font-size:15px;line-height:1.8;padding-left:0px;}
	.rfcip .section02 {margin-top:40px;}
	.rfcip .section02 h4 {font-size:20px;margin-bottom:30px;}
	.rfcip .section02 .flex-box {flex-wrap:wrap;}
	.rfcip .section02 .flex-box div {flex:none;width:100%;padding: 30px 25px;}
	.rfcip .section02 .flex-box div + div {margin-left:0;margin-top:20px;}
	.rfcip .section02 .flex-box div strong {font-size:18px;margin-bottom:30px;}
	.rfcip .section02 .flex-box div p {font-size:15px;}
	.rfcip .section02 .flex-box div:before {width:60px;height:60px;top:30px;right:25px;}
	.rfcip .section02 .button-box button + button {margin-left:0;margin-top:20px;}
	.rfcip .section02 .button-box button:nth-child(1) {width:100%;}
	.rfcip .section02 .button-box button:nth-child(2) {width:100%;}

	/*iprs*/
	.iprs {padding: 50px 20px 120px;}
	.iprs section {border-bottom:0}
	.iprs section > div {width:100%;border-bottom: 1px solid #ccc;padding:30px 0;}
	.iprs section:last-child div:last-child {border-bottom:0;}
	.iprs section div .img-box {width:30%;}
	.iprs section div .txt-box {width:70%;margin-left:20px;}
	.iprs section div .txt-box strong {font-size:15px;margin-bottom:10px;}
	.iprs section div .txt-box p {font-size:17px;margin-bottom:14px;word-break:keep-all;}
	.iprs section div .txt-box p br {display:none;}
	.iprs section div .txt-box span {font-size:14px;}
}