/* include 공통 CSS */
/************************* 공통 시작*************************/
.inner {max-width:1400px; width: 100%; margin: 0 auto;}
.bold {font-weight: 700;}
.content_desc {min-height:500px;background: #232825;}

@media(max-width:1500px){
.inner {padding: 0 5%;}
}

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

/************************* header_inc 시작*************************/
/**/
.header_t {width:100%; margin:0 auto; height:120px; position:fixed; left:0; top:0px; z-index:99; transition: all 300ms ease-out; background: #000000b8;}
.header_t .inner {height: 100%; display: flex; justify-content:space-between; align-items:center;}
.header_t .clogo {display: none;}
.header_t a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
.f-nav {height:80px; background: #000000bf; border-bottom: 1px solid #000;}
.f-nav .clogo {display: block;}
.f-nav .wlogo {display: none;}
.f-nav a {color: #fff; text-shadow: none;}
.f-nav a:hover {color: #1bb7ba }

.header_logo { }
.header_gnb_bg {width: 50%;}

/* 로고 */
.header_logo img {width:100%; min-width: 120px; max-width:165px; height:auto; vertical-align: middle;}

/* global navigation bar */
.gnb								{position:relative; z-index:999;}
/* gnb Common */
.menu {position:relative;}
.menu .major ul {list-style:none; display:flex; justify-content:space-between; width:100%;}
.menu .major ul li {position:relative; text-align: center; }
.menu .major ul li a {position:relative;     padding: 0 0 0 3em;
    font-size: 18px;}

.menu .major ul li .ko_nav {display: none; font-size: 18px;color:#1bb7ba}

/* gnb Hover */
.menu .major li.active{z-index:2}
.menu .major li:hover a, .menu .major li:active a,.menu .major li:focus a {border-bottom:0px solid #212121; color:#212121; font-weight: 700; text-shadow:none;}
.menu .major li.active a {border-bottom:0px solid #1bb7ba; color:#1bb7ba; font-weight: 300; text-shadow:none;}
/*대메뉴 포커스 효과 변경시 */
.menu .major li.pactive a {border-bottom:3px solid #1bb7ba; color:#1bb7ba; font-weight: 700; text-shadow:none;}
.menu .major li.pactive ul.sub{display:none;}
/*대메뉴 포커스 효과 변경시 */



/* gnb 2depth */
.menu .major ul.sub							{position:absolute; top:38px; display:none; border:1px solid #dfdfdf; background:#fff; }
.menu .major li.active ul.sub		{display:block;}
.menu .major ul.sub li					{clear:both; margin:0; padding:7px 9px}
.menu .major ul.sub li a				{color:#555; font-size:12px;}
.menu .major ul.sub li a:hover	{color:#212121}

/* gnb 2depth  */
li.m1 ul.sub{width:160px;}
li.m2 ul.sub{width:160px;}
li.m3 ul.sub{width:160px;}
li.m4 ul.sub{width:160px;}
li.m5 ul.sub{width:160px;}

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

.mo_nav:hover .navbar-toggle .icon-bar								{transform:translateX(5px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar		{transform:translateX(12px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar + .icon-bar		{transform:translateX(3px);}

@media(max-width:1500px){
.header_gnb_bg {width: 60%;}
}


@media(max-width:1024px){
.header_t {height:60px;}
.f-nav {height:60px;}
.mo_nav							{display:block;}
 
.header_logo				{width:15%;}
.header_gnb_bg			{display:none;}
.header_btn					{display:none;}
}

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


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

/************************* main_inc 시작*************************/
.main_visual {width: 100%; overflow: hidden; position: relative; margin:0 auto; /* background: url("./img/video_bg.jpg") no-repeat center; background-size: cover; */}
.main_visual::after {content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 9; position: absolute; left: 0; top: 0;}
/* .main_visual #bg_youtube { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; overflow:hidden;}*/
.main_visual .txt {width: 100%; position: absolute; left: 0; top: 40%; z-index: 10; }
.main_visual .txt .inner {color: #fff; font-size: 45px; font-weight: 500; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
.main_visual video {display: block; width: 100%;}

@media(max-width:1500px){
.main_visual .txt .inner {font-size: 48px;}
}

@media(max-width:1024px){
.main_visual .txt .inner {font-size: 36px;}
}

@media(max-width:700px){
.main_visual .txt {top: 45%;}
.main_visual .txt .inner {font-size: 4vw;}
}

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

/************************* page 시작 *************************/
.s_wrap {color:#fff;}
.sub_visual {height: 490px;}
 
.s_wrap section:first-child {margin-top: 0px; padding-top: 0;}
 
.s_wrap .sec_tit {
	font-size: 1.5em;
    color: #fff;
    padding: 1.0em 0em;
    border-bottom: 1px solid #fff;
}
.s_wrap .sec_tit .sec_subtit {    
	font-size: 18px !important;
    margin-left: 2.0em;
    margin-top: 1.0em;
    font-weight: 100;}
.s_wrap .sec_subtit {font-size: 22px; line-height: 1.6;  margin-bottom: 20px; color:#fff}

.more a i {margin: 0; transition:all 0.3s;}
.more a:hover i {margin-left: 10px; transition:all 0.3s;}

@media(max-width:1500px){
.sub_visual { background-size: 120% !important; background-position: center top !important;}
 
 
.s_wrap .sec_tit {font-size: 60px;}

.s_wrap .sec_subtit { }

}

@media(max-width:1024px){
 
 
.s_wrap .sec_tit {font-size: 48px;}
.s_wrap .sec_subtit { margin-bottom: 40px;}
}

@media(max-width:700px){
	.sub_visual {    max-height: 65vw !important; background-size: 200% !important; }
	.s_wrap .sec_tit .sec_subtit {
		font-size: 13px !important;
		margin-left: 0px;
		padding-left: 0;
		line-height: 1.4em;
		display: block; 
	}
	 
	.s_wrap .sec_tit {font-size: 30px;}
	.s_wrap .sec_subtit { padding-left: 22px; margin-bottom: 30px;}

	.more a i {margin: 0; transition:all 0.3s;}
	.more a:hover i {margin-left: 0; transition:all 0.3s;}
	.s_wrap .sec_tit {
 
		padding: 1.0em 0em 0em; 
	}
}


.s11 .sec00 {padding-bottom: 0;}
.s11 .sec00 .ceo_wrap {margin-left: 3%; padding: 0 15% 0 23%; display: flex; align-items:center; justify-content:space-between; position: relative;}
.s11 .sec00 .ceo_wrap::after {content: ''; display: block; width: 100%; height: 90%; background: url("./img/ceo_bg.jpg") no-repeat center; background-size: cover; position: absolute; left: 0; bottom: 0; z-index: -1;}
.s11 .sec00 .ceo_wrap .txt {padding-top: 5%;padding: 15px;    background: #000;    color: #fff;    opacity: 0.7;}
.s11 .sec00 .ceo_wrap .txt h2 {border-bottom: 1px solid #606060; padding-bottom: 30px; margin-bottom: 30px; font-size: 24px;}
.s11 .sec00 .sign {display: flex; align-items:center; font-size: 18px;}
.s11 .sec00 .sign img {width: 140px; margin-left: 20px;}
.s11 .sec00 .ceo_wrap .img img {display: block;}

@media(max-width:1500px){
.s11 .sec00 .ceo_wrap {padding: 0 9%;}
.s11 .sec00 .ceo_wrap .txt h2 {padding-bottom: 30px; margin-bottom: 30px; font-size: 20px;}
}

@media(max-width:1024px){
.s11 .sec00 .ceo_wrap {padding: 0 5%;}
.s11 .sec00 .ceo_wrap .txt h2 {padding-bottom: 20px; margin-bottom: 20px; font-size: 18px;}
.s11 .sec00 .ceo_wrap .img {width: 40%;}
.s11 .sec00 .ceo_wrap .img img {width: 100%; max-width:333px; float: right;}
.s11 .sec00 .sign img {width: 120px;}
}

@media(max-width:800px){
.s11 .sec00 .ceo_wrap {padding: 0 4%;}
.s11 .sec00 .ceo_wrap .txt h2 {padding-bottom: 15px; margin-bottom: 15px; font-size: 16px;}
.s11 .sec00 .ceo_wrap .img {width: 40%;}
.s11 .sec00 .ceo_wrap .img img {width: 100%; max-width:333px; float: right;}
.s11 .sec00 .sign {font-size: 14px;}
.s11 .sec00 .sign img {width: 100px;}
}

@media(max-width:600px){
.s11 .sec00 .ceo_wrap {padding: 0 8%; flex-flow:row wrap; margin-top: 5%;}
.s11 .sec00 .ceo_wrap .txt {padding-top: 10%;padding: 15px;    background: #000;    color: #fff;    opacity: 0.7;}
.s11 .sec00 .ceo_wrap .txt h2 {font-size: 14px;}
.s11 .sec00 .ceo_wrap .img {width: 100%;}
.s11 .sec00 .ceo_wrap::after {height: 100%;}
.s11 .sec00 .sign {font-size: 12px;}
}

.s11 .sec01 .sec_subtit .bold {display: inline-block; margin-top: 10px;}
.s11 .sec01 .cir_wrap {margin: 0 0 50px; display: flex; justify-content:space-between; align-items:center; position: relative;}
.s11 .sec01 .cir {display: flex; justify-content:space-between; align-items:center; width: 54%;}
.s11 .sec01 .cir .circle {width: 345px; height: 345px; border-radius:50%; background: rgba(0,0,0,0.7); display: flex; justify-content:center; align-items:center; color: #fff; font-size: 40px; font-weight: 700;}
.s11 .sec01 .cir .txt {border-top: 1px solid #212121; width: 60%; margin-top: 75px;}
.s11 .sec01 .cir .txt p {font-size: 18px; margin: 20px 0 5px;}
.s11 .sec01 .cir .txt h2 {font-weight: 700; font-size: 18px;}
.s11 .sec01 .cir01 {margin-right: -2%;}
.s11 .sec01 .cir02 {margin-left: -2%;}
.s11 .sec01 .cir01 .txt {margin-right: -10%;}
.s11 .sec01 .cir02 .txt {margin-left: -10%; padding-left: 110px;}
.s11 .sec01 .plus {position: absolute; top: 50%; left: 50%; text-align: center; font-size: 30px; width: 40px; height: 40px; line-height: 40px; margin-left: -20px; margin-top: -20px; color: #fff; z-index: 1;}

@media(max-width:1500px){
.s11 .sec01 .cir {align-items:flex-start;}
.s11 .sec01 .cir .circle {width: 22vw; height: 22vw; font-size: 30px;}
.s11 .sec01 .cir .txt {width: 57%; margin-top: 11vw;}
.s11 .sec01 .cir .txt p {font-size: 15px; margin: 10px 0 5px;}
.s11 .sec01 .cir .txt h2 {font-size: 15px;}
.s11 .sec01 .cir01 .txt {margin-right: -7%; padding-right: 3%;}
.s11 .sec01 .cir02 .txt {margin-left: -7%; padding-left: 10%;}
.s11 .sec01 .plus {font-size: 24px;}
}

@media(max-width:1024px){
.s11 .sec01 .cir_wrap {flex-flow:row wrap; margin-bottom: 0;}
.s11 .sec01 .cir .circle {width: 28vw; height: 28vw; font-size: 24px;}
.s11 .sec01 .cir .txt {width: 60%; margin-top: 14vw;}
.s11 .sec01 .cir {width: 70%; margin: 0;}
.s11 .sec01 .cir02 {margin-left: 30%; margin-top: -6%;}
.s11 .sec01 .cir02 .txt {padding-left: 7%;}
}

@media(max-width:700px){
.s11 .sec01 .cir_wrap {margin-top: 8%;}
.s11 .sec01 .cir {width: 100%;}
.s11 .sec01 .cir .circle {order:1; font-size: 4.5vw;}
.s11 .sec01 .cir02 {margin-left: 0; margin-top: -6%;}
.s11 .sec01 .cir .txt {order:2; margin: 0; margin-top: 14vw; width: 72%; margin-left: -5%; padding: 0; padding-left: 8%;}
.s11 .sec01 .cir .txt p {font-size: 13px; margin-bottom: 0;}
.s11 .sec01 .cir .txt h2 {font-size: 13px;}
.s11 .sec01 .plus {top: 50%; left: 0; font-size: 18px; width: 28vw; margin-left: 0;}

}

.s11 .sec02 {background: url("./img/lab_bg.jpg") no-repeat center; background-size: cover; color: #fff;}
.typing {margin-top: 80px; text-align: center;}
.typing h2 {font-size: 48px; display: flex; align-items:center; justify-content:center;}
.typing h2 .box {margin: 0 20px; display: flex; align-items:center; justify-content:center; width: 80px; height: 80px; position: relative;}
.typing h2 .box span {opacity: 0;}
.typing h2 .box::before, .typing h2 .box::after {content: ''; display: inline-block; width: 25px; height: 80px; position: absolute; top: 0;}
.typing h2 .box::before {background: url("./img/typing_left.png") no-repeat center; background-size: cover; left: 0;}
.typing h2 .box::after {background: url("./img/typing_right.png") no-repeat center; background-size: cover; right: 0;}
.typing p {font-size: 24px; line-height: 1.6; font-weight: 300; margin-top: 20px;}

.typing01.ani .box {animation: box01 1s ease; animation-fill-mode: forwards;}
.typing01.ani .box span {animation: letter 1s ease 1s; animation-fill-mode: forwards;}

.typing02.ani .box {animation: box02 1.5s ease 2s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(1) {animation: letter 0.1s ease 3.5s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(2) {animation: letter 0.1s ease 3.6s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(3) {animation: letter 0.1s ease 3.7s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(4) {animation: letter 0.1s ease 3.8s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(5) {animation: letter 0.1s ease 3.9s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(6) {animation: letter 0.1s ease 4s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(7) {animation: letter 0.1s ease 4.1s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(8) {animation: letter 0.1s ease 4.3s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(9) {animation: letter 0.1s ease 4.4s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(10) {animation: letter 0.1s ease 4.5s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(11) {animation: letter 0.1s ease 4.6s; animation-fill-mode: forwards;}
.typing02.ani .box span:nth-child(12) {animation: cursor 0.8s linear 4.7s infinite; font-weight: 300; padding-left: 10px;}

.typing03.ani .box {animation: box03 1.2s ease; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(1) {animation: letter 0.1s ease 1.3s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(2) {animation: letter 0.1s ease 1.4s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(3) {animation: letter 0.1s ease 1.5s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(4) {animation: letter 0.1s ease 1.6s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(5) {animation: letter 0.1s ease 1.7s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(6) {animation: letter 0.1s ease 1.8s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(7) {animation: letter 0.1s ease 1.9s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(8) {animation: letter 0.1s ease 2s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(9) {animation: letter 0.1s ease 2.1s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(10) {animation: letter 0.1s ease 2.2s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(11) {animation: letter 0.1s ease 2.3s; animation-fill-mode: forwards;}
.typing03.ani .box span:nth-child(12) {animation: cursor 0.8s linear 2.4s infinite; font-weight: 300; padding-left: 10px;}

.swiper-slide .typing {margin-top: 0 !important; text-align: left;}
.swiper-slide .typing h2 {justify-content:flex-start; font-size: 60px; font-weight: 700;}
.swiper-slide .typing p {font-size: 30px;}


@keyframes box01 {
from {width: 80px;}
to {width: 80px;}
}

@keyframes box02 {
from {width: 80px;}
to {width: 220px;}
}

@keyframes box03 {
from {width: 80px;}
to {width: 300px;}
}

@keyframes box01_ta {
from {width: 70px;}
to {width: 140px;}
}

@keyframes box02_ta {
from {width: 70px;}
to {width: 250px;}
}

@keyframes box01_mo {
from {width: 50px;}
to {width: 100px;}
}

@keyframes box02_mo {
from {width: 50px;}
to {width: 100px;}
}

@keyframes letter {
from {opacity: 0;}
to {opacity: 1; position: relative;}
}

@keyframes cursor {
0% {opacity: 0;}
50% {opacity: 0;}
100% {opacity: 1;}
}

@media(max-width:1500px){
.swiper-slide .typing h2 {font-size: 48px;}
.swiper-slide .typing p {font-size: 24px;}
}

@media(max-width:1024px){
.typing {margin-top: 8%;}
.typing h2 {font-size: 36px;}
.typing h2 .box {margin: 0 20px; width: 80px; height: 64px;}
.typing h2 .box::before, .typing h2 .box::after {width: 20px; height: 64px;}
.typing p {font-size: 18px; margin-top: 20px;}
.typing01.ani .box {animation: box01_ta 1s ease; animation-fill-mode: forwards;}
.typing02.ani .box {animation: box02_ta 1.5s ease 2s; animation-fill-mode: forwards;}
.typing03.ani .box {animation: box02_ta 1.2s ease; animation-fill-mode: forwards;}
.swiper-slide .typing h2 {font-size: 36px;}
.swiper-slide .typing p {font-size: 20px;}
}

@media(max-width:700px){
.typing h2 {font-size: 24px;}
.typing h2 .box {margin: 0 15px; width: 80px; height: 32px;}
.typing h2 .box::before, .typing h2 .box::after {width: 10px; height: 32px;}
.typing p {font-size: 14px; margin-top: 10px;}
.typing01.ani .box {animation: box01_mo 1s ease; animation-fill-mode: forwards;}
.typing02.ani .box {animation: box02_mo 1.5s ease 2s; animation-fill-mode: forwards;}
.typing03.ani .box {animation: box02_mo 1.2s ease; animation-fill-mode: forwards;}
.swiper-slide .typing h2 {font-size: 4vw;}
.swiper-slide .typing p {font-size: 3.3vw;}
}

.s11 .sec03 .inner {display: flex; justify-content:space-between;color:#fff;}
.s11 .sec03 .history_wrap {width: 57%; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 20px ; font-size: 24px; font-weight: 300;  }
.s11 .sec03 .year, .s11 .sec03 .month {font-size: 20px; font-weight:400}
.s11 .sec03 .year_wrap {display: flex; flex-flow: row wrap; border-bottom: 1px solid #eee; padding: 45px 0;}
.s11 .sec03 .year_wrap:last-child {border-bottom: 0;}
.s11 .sec03 .year {width: 15%;    text-align: center;}
.s11 .sec03 .month_wrap {display: flex; flex-flow: row wrap; width: 80%;font-size: 20px;}
.s11 .sec03 .month {width: 28%; text-align:center}
.s11 .sec03 .month_wrap p {width: 71%;}

@media(max-width:1024px){
.s11 .sec03 .inner {flex-flow:row wrap;}
.s11 .sec03 .history_wrap {width: 100%; margin-left: 30px;  }
 
.s11 .sec03 .year_wrap {padding: 15px 0;}
}

@media(max-width:700px){
.s11 .sec03 .history_wrap { margin-left: 0;}
 
}




.s11 .sec04 ul {display: flex; justify-content:space-between; margin: 0 0%;}
.s11 .sec04 li.box {width: 30%; border: 0px solid #fff; text-align: left; }
.s11 .sec04 li.box:nth-child(1) {width: 20%; }
.s11 .sec04 li.box:nth-child(2) {width: 30%; }
.s11 .sec04 li.box:nth-child(3) {width: 39%; }

.s11 .sec04 li.dot {display: flex; align-items:center; justify-content:center;}
.s11 .sec04 li h3 {font-size: 20px; color: #fff; font-weight: 100; /*line-height: 1;*/ }
.s11 .sec04 li h2 {font-size: 36px; font-weight: 500; line-height: 1; margin: 20px 0;}
 
.s11 .sec04 li p {
    font-size: 20px;
    font-weight: 100;
    color: #fff;
    /* line-height: 1.6; */
}
.s11 .sec04 li i {font-size: 36px; color: #225a9a;}
 
@media(max-width:1500px){
 
.s11 .sec04 li.box {padding: 4% 2%;}
 
.s11 .sec04 li h2 {font-size: 28px; margin: 15px 0;}
 
.s11 .sec04 li p br {display: none;}
.s11 .sec04 li i {font-size: 30px;}

}
 

@media(max-width:1024px){
 
 
.s11 .sec04 li h2 {font-size: 24px; margin: 10px 0;}
 
.s11 .sec04 li i {font-size: 24px;}
 
}

@media(max-width:700px){
 
.s11 .sec04 ul {flex-flow: row wrap;}
.s11 .sec04 li.box {width: 100%; padding: 5% 3%;}
.s11 .sec04 li.dot {width: 100%; padding: 4% 0;}
 
.s11 .sec04 li h2 {font-size: 18px; margin: 7px 0;}
 
.s11 .sec04 li p br {display: block;}
.s11 .sec04 li i {font-size: 24px; transform:rotate(90deg);}
.s11 .sec04 li.box:nth-child(1) {width: 100%; }
.s11 .sec04 li.box:nth-child(2) {width: 100%; }
.s11 .sec04 li.box:nth-child(3) {width: 100%; }
 
}




.s12 .sec04 li.dot {display: flex; align-items:center; justify-content:center;}
.s12 .sec04 li h3 {font-size: 37px;  font-weight: 500; line-height: 1.3;}
.s12 .sec04 li h2 {font-size: 36px; font-weight: 500; line-height: 1; margin: 20px 0;}
.s12 .sec04 li p {font-size: 20px; color: #232726; line-height: 1.6;}
.s12 .sec04 li i {font-size: 36px; color: #225a9a;}
 
@media(max-width:1500px){
 
 
.s12 .sec04 li h2 {font-size: 28px; margin: 15px 0;}
.s12 .sec04 li p {font-size: 16px;}
.s12 .sec04 li p br {display: none;}
.s12 .sec04 li i {font-size: 30px;}

}
 

@media(max-width:1024px){
 
 
.s12 .sec04 li h2 {font-size: 24px; margin: 10px 0;}
.s12 .sec04 li p {font-size: 14px;}
.s12 .sec04 li i {font-size: 24px;}
 
}

@media(max-width:700px){
 
.s12 .sec04 ul {flex-flow: row wrap;}
.s12 .sec04 li.box {width: 100%;margin:0 10%;padding: 38% 0; }
.s12 .sec04 li.dot {width: 100%; padding: 4% 0;}
 
.s12 .sec04 li h2 {font-size: 18px; margin: 7px 0;}
.s12 .sec04 li p {font-size: 14px;}
.s12 .sec04 li p br {display: block;}
.s12 .sec04 li i {font-size: 24px; transform:rotate(90deg);}
.s12 .sec04 li.box:nth-child(1) {width: 100%; }
.s12 .sec04 li.box:nth-child(2) {width: 100%; }
.s12 .sec04 li.box:nth-child(3) {width: 100%; }
 
}


.s21 .table_wrap {padding-left: 40px; font-size: 16px; line-height: 1.6;color:#fff}
.s21 .table_wrap > p {display: inline-block; background: #f8f8f8; padding: 30px;}
.s21 .table_wrap > p small {font-size: 14px; color: #888; padding-left: 10px;}
.s21 .table_wrap table {width: 100%; border-top: 2px solid #fff; border-bottom: 2px solid #fff; font-size: 18px; margin-top: 40px;}
.s21 .table_wrap table th, .s21 .table_wrap table td {padding: 15px 0; border-bottom: 1px solid #eee;}
.s21 .table_wrap .bold th, .s21 .table_wrap .bold td {font-weight: 700;}
.s21 .table_wrap .date {width: 20%; font-weight: 400;}
.s21 .table_wrap .content {width: 65%; line-height: 1.6;}
.s21 .table_wrap .more a {display: block; text-align: center; background: #203460; color: #fff; font-size: 14px; font-weight: 400; padding: 8px 0; }
.s21 .table_wrap .more a i {margin: 0; transition:all 0.5s;}
.s21 .table_wrap .more a:hover i {margin-left: 15px; transition:all 0.5s;}

@media(max-width:1500px){
.s21 .table_wrap {padding-left: 30px;}
}

@media(max-width:1024px){
.s21 .table_wrap > p {padding: 4%; margin: 4% 0;}
.s21 .table_wrap {padding-left: 30px;}
.s21 .table_wrap table {font-size: 16px;}
.s21 .table_wrap .content {width: 60%;}
}

@media(max-width:740px){
.s21 .table_wrap {font-size: 14px;}
.s21 .table_wrap > p {display: block; padding: 5%;}
.s21 .table_wrap > p br {display: none;}
.s21 .table_wrap > p small {padding-left: 0; display: block; font-size: 12px;}
.s21 .table_wrap {padding-left: 0;}
.s21 .table_wrap table {font-size: 12px; margin-top: 5%;}
.s21 .table_wrap table th, .s21 .table_wrap table td {padding: 10px 0;}
.s21 .table_wrap .date {width: 27%;}
.s21 .table_wrap .content {width: 63%;}
.s21 .table_wrap .more a span {display: none;}
}



.s31 .reason_wrap {display: flex; flex-flow:row wrap; border-top: 1px solid #ccc; border-right: 1px solid #ccc;}
.s31 .reason_wrap div {width: 20%; height: 280px; display: flex; flex-flow:column wrap; align-items:center; justify-content:center; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 2%;}
.s31 .reason_wrap div h2 {font-size: 24px; font-weight: 700;}
.s31 .reason_wrap div p {font-size: 16px; color: #fff; text-align: center;}
.s31 .reason_wrap .bg01 {background: url("./img/s31_bg01.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .bg02 {background: url("./img/s31_bg02.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .bg03 {background: url("./img/s31_bg03.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .bg04 {background: url("./img/s31_bg04.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .bg05 {background: url("./img/s31_bg05.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .bg06 {background: url("./img/s31_bg06.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .bg07 {background: url("./img/s31_bg07.jpg") no-repeat center; background-size: cover;}
.s31 .reason_wrap .color01 {background: rgba(231,105,101,0.1);}
.s31 .reason_wrap .color02 {background: rgba(34,90,104,0.1);}
.s31 .reason_wrap .color03 {background: rgba(32,52,96,0.1);}

.s31 .sec02 {background: #f8f8f8;}
.s31 .platform {margin-top: 15%; text-align: center; border: 1px solid #ccc; background: #fff; padding: 5% 0%;}
.s31 .platform ul {display: flex; flex-flow:row wrap; justify-content:space-between; align-items:center; text-align: left; margin-top: -20%; margin-bottom: 6%;}
.s31 .platform ul li {width: 28%; border: 1px solid #ccc;}
.s31 .platform ul li.big {width: 38%;}
.s31 .platform ul li .img {padding-bottom: 70%;}
.s31 .platform ul li:nth-child(1) .img {background: url("./img/s31_list01.jpg") no-repeat center; background-size: cover;}
.s31 .platform ul li:nth-child(2) .img {background: url("./img/s31_list02.jpg") no-repeat center; background-size: cover;}
.s31 .platform ul li:nth-child(3) .img {background: url("./img/s31_list03.jpg") no-repeat center; background-size: cover;}
.s31 .platform ul li .txt {padding: 20px;}
.s31 .platform ul li h2 {font-size: 20px; font-weight: 500; color: #225a9a;}
.s31 .platform ul li p {font-size: 15px; color: #fff;}
.s31 .platform > img {max-width:800px; width: 100%;}

@media(max-width:1500px){
.s31 .reason_wrap div {height: 17.5vw;}
.s31 .reason_wrap div h2 {font-size: 20px;}
.s31 .platform ul li .txt {padding: 15px;}
.s31 .platform ul li h2 {font-size: 18px;}
.s31 .platform ul li p {font-size: 14px;}
}

@media(max-width:1024px){
.s31 .reason_wrap div {width: 25%; height: 20vw;}
.s31 .reason_wrap div h2 {font-size: 18px;}
.s31 .reason_wrap div p {font-size: 14px;}

.s31 .platform {margin-top: 20%;}
.s31 .platform ul {margin-top: -20%;}
.s31 .platform ul li h2 {font-size: 16px;}
.s31 .platform ul li p {font-size: 13px;}
}

@media(max-width:800px){
.s31 .platform {margin-top: 15%;}
.s31 .platform ul {margin-top: -15%; margin-bottom: 10%;}
.s31 .platform ul li {width: 49%; position: relative;}
.s31 .platform ul li.big {order:-1; width: 100%; margin-bottom: 2%;}
.s31 .platform ul li.big .txt {position: absolute; left: 0; bottom: 0;}
.s31 .platform ul li.big .txt h2 {font-size: 16px;}
.s31 .platform ul li.big .txt p {font-size: 12px; color: #212121;}

.s31 .platform ul li .txt {padding: 10px;}
.s31 .platform ul li h2 {font-size: 14px;}
.s31 .platform ul li p {font-size: 12px;}
}


@media(max-width:700px){
.s31 .reason_wrap div {width: 33.33%; height: 29vw; padding: 1%;}
.s31 .reason_wrap .bg05, .s31 .reason_wrap .bg06 {display: none;}
.s31 .reason_wrap div h2 {font-size: 16px;}
.s31 .reason_wrap div p {font-size: 12px;}

}

.s41 .sec01 {overflow: hidden;}
.s41 .sec01 .line {text-decoration: underline; font-weight: 700;}
.s41 .org {margin-top: 6%; position: relative; padding-left: 3%;}
.s41 .org > div:first-child {margin-bottom: 5%;}
.s41 .org > div h2 {display: inline-block; padding: 7px 35px; background: #212121; color: #fff; font-size: 36px; font-weight: 700; margin-bottom: 20px;}
.s41 .org > div p {font-size: 24px; line-height: 2;}
.s41 .ani {position: absolute; top: 0; right: 0; height: 100%; z-index: -1; opacity: 0.8;}
.s41 .ani span {display: block; border-radius:50%; position: relative;}
.s41 .ani .cir1 {width: 10vw; height: 10vw; background: rgba(0,81,174,0.4); animation: rotating1 2.5s linear infinite reverse; margin-top: 10%;}
.s41 .ani .cir2 {width: 15vw; height: 15vw; background: rgba(255,105,101,0.4); animation: rotating2 4.5s linear infinite; margin-top: -5%;}
.s41 .ani .cir3 {width: 5vw; height: 5vw; background: rgba(16,44,104,0.4); animation: rotating3 3s linear infinite; margin-top: -45%;}

@keyframes rotating1{
  0%{transform-origin: 20% 70%; transform: rotate(0)}
	100%{transform-origin: 20% 70%; transform: rotate(360deg);}
}

@keyframes rotating2{
	0%{transform-origin: 10% 10%; transform: rotate(0)}
	100%{transform-origin: 10% 10%; transform: rotate(360deg);}
}

@keyframes rotating3{
	0%{transform-origin: 0 0; transform: rotate(0)}
	100%{transform-origin: 0 0; transform: rotate(360deg);}
}

.s41 .sec02 {background: #f5f5f5 url("./img/s41_sec02.png") no-repeat right bottom; background-size: 45%;}
.s41 .sec02 ul {display: flex; justify-content:space-between; align-items:center; width: 60%; text-align: center; margin-top: 8%;}
.s41 .sec02 li h2 {font-size: 36px; font-weight: 700; line-height: 1;}
.s41 .sec02 li img {display: block; margin: 15px auto;}
.s41 .sec02 li p {font-size: 16px; color: #fff; line-height: 1.6;}
.s41 .sec02 li.eq {font-size: 72px; opacity: 0.5;}

.s41 .sec03 {background:url("./img/s41_sec03.jpg") no-repeat fixed center; background-size: 100%; color: #fff;}
.s41 .sec03 ul {margin: 5% 23%; border: 1px solid #fff; padding: 3% 5%;}
.s41 .sec03 li {font-size: 30px; line-height: 2.4; font-weight: 500;}
.s41 .sec03 li i {opacity: 0.5; margin-right: 10px; font-size: 80%;}

.s41 .sec04 ul {display: flex; justify-content:space-between; margin: 0 3%;}
.s41 .sec04 li.box {width: 28%; border: 2px solid #fff; text-align: center; padding: 5% 3%;}
.s41 .sec04 li.dot {display: flex; align-items:center; justify-content:center;}
.s41 .sec04 li h3 {font-size: 24px; color: #e76965; font-weight: 700; line-height: 1;}
.s41 .sec04 li h2 {font-size: 36px; font-weight: 500; line-height: 1; margin: 20px 0;}
.s41 .sec04 li p {font-size: 16px; color: #fff; line-height: 1.6;}
.s41 .sec04 li i {font-size: 36px; color: #225a9a;}

.s41 .sec05 {background: #f8f8f8;}
.s41 .sec05 .inner {display: flex; justify-content:space-between;}
.s41 .sec05 ul {margin-left: 3%; font-size: 18px; line-height: 2.5; width: 65%; background: #fff; padding: 2% 4%;}
.s41 .sec05 li {display: flex; align-items:center; border-bottom: 1px solid #ccc;}
.s41 .sec05 li:last-child {border-bottom: 0;}
.s41 .sec05 li .bold {font-size: 20px; width: 160px; color: #203460;}
.s41 .sec05 li span:last-child {color: #fff; font-weight: 300;}

.s41 .sec06 .lat ul {border-top: 2px solid #fff; border-bottom: 2px solid #fff; font-size: 18px;}
.s41 .sec06 .lat li {display: flex; justify-content:space-between; align-items:center; padding: 15px 0; border-bottom: 1px solid #eee;}
.s41 .sec06 .lat li .subject {width: 70%; font-size: 18px; line-height: 1.6; padding-left: 2%;}
.s41 .sec06 .lat li .date {width: 15%; text-align: center;}
.s41 .sec06 .lat li .more {width: 15%;}
.s41 .sec06 .lat li .more a {display: block; text-align: center; background: #203460; color: #fff; font-size: 14px; font-weight: 400; padding: 10px 0;}

.write .sec01 {padding-bottom: 0;}

@media(max-width:1500px){
.s41 .org > div h2 {padding: 1% 4%; font-size: 30px; margin-bottom: 15px;}
.s41 .org > div p {font-size: 18px;}
.s41 .ani {top: 20%; right: 5%; transform:scale(1.3);}

.s41 .sec02 li h2 {font-size: 30px;}
.s41 .sec02 li p {font-size: 16px;}
.s41 .sec02 li.eq {font-size: 60px;}

.s41 .sec03 ul {margin: 3% 15%; padding: 3% 5%;}
.s41 .sec03 li {font-size: 24px; line-height: 2.4;}

.s41 .sec04 li.box {padding: 4% 2%;}
.s41 .sec04 li h3 {font-size: 20px;}
.s41 .sec04 li h2 {font-size: 28px; margin: 15px 0;}
.s41 .sec04 li p {font-size: 14px;}
.s41 .sec04 li p br {display: none;}
.s41 .sec04 li i {font-size: 30px;}

.s41 .sec05 ul {width: 70%;}

.s41 .sec06 .lat ul {font-size: 16px;}
.s41 .sec06 .lat li {padding: 15px 0;}
.s41 .sec06 .lat li .subject {font-size: 16px;}
}

@media(max-width:1200px){
.s41 .sec05 .inner {flex-flow:row wrap;}
.s41 .sec05 ul {width: 100%;}
.s41 .sec05 ul {font-size: 16px; line-height: 2.5; padding: 2% 4%;}
.s41 .sec05 li .bold {font-size: 18px; width: 150px;}
}

@media(max-width:800px){
.s41 .sec05 ul {font-size: 13px; line-height: 1.6; padding: 5%; margin: 0;}
.s41 .sec05 li {align-items:flex-start; padding: 3% 0;}
.s41 .sec05 li .bold {font-size: 15px; width: 35%; font-weight: 500;}
.s41 .sec05 li span:last-child {width: 65%; line-height: 1.6;}
}


@media(max-width:1024px){
.s41 .org > div h2 {font-size: 24px; margin-bottom: 15px;}
.s41 .org > div p {font-size: 16px;}
.s41 .ani {top: 30%; right: 10%; transform:scale(1.5); opacity: 0.5;}

.s41 .sec02 {background: #f5f5f5 url("./img/s41_sec02op.png") no-repeat 150% bottom; background-size: 70%;}
.s41 .sec02 ul {width: 70%;}
.s41 .sec02 li h2 {font-size: 24px;}
.s41 .sec02 li img {margin: 10px auto;}
.s41 .sec02 li p {font-size: 14px; color: #212121;}
.s41 .sec02 li.eq {font-size: 48px;}

.s41 .sec03 {background-attachment: scroll; background-size: cover;}
.s41 .sec03 ul {margin: 5% 3% 0; padding: 3% 5%;}
.s41 .sec03 li {font-size: 20px; line-height: 2.2;}

.s41 .sec04 li h3 {font-size: 18px;}
.s41 .sec04 li h2 {font-size: 24px; margin: 10px 0;}
.s41 .sec04 li p {font-size: 12px;}
.s41 .sec04 li i {font-size: 24px;}

.s41 .sec06 .lat ul {font-size: 14px;}
.s41 .sec06 .lat li {padding: 10px 0;}
.s41 .sec06 .lat li .subject {width: 60%; font-size: 14px;}
.s41 .sec06 .lat li .date {width: 18%;}
.s41 .sec06 .lat li .more {width: 22%;}
.s41 .sec06 .lat li .more a {font-size: 14px;}
}

@media(max-width:700px){
.s41 .org > div h2 {font-size: 20px; margin-bottom: 10px;}
.s41 .org > div p {font-size: 14px; line-height: 1.8;}
.s41 .ani {top: 60%; right: 10%; transform:scale(2);}

.s41 .sec02 {background: #f5f5f5 url("./img/s41_sec02op.png") no-repeat 250% bottom; background-size: 90%;}
.s41 .sec02 ul {width: 100%;}
.s41 .sec02 li h2 {font-size: 18px;}
.s41 .sec02 li img {margin: 10px auto; max-width:58px; width: 40px;}
.s41 .sec02 li p {font-size: 12px;}
.s41 .sec02 li.eq {font-size: 36px;}

.s41 .sec03 ul {margin: 5% 3% 0; padding: 3% 5%;}
.s41 .sec03 li {font-size: 3.3vw; line-height: 2;}

.s41 .sec04 ul {flex-flow: row wrap;}
.s41 .sec04 li.box {width: 100%; padding: 5% 3%;}
.s41 .sec04 li.dot {width: 100%; padding: 4% 0;}
.s41 .sec04 li h3 {font-size: 14px;}
.s41 .sec04 li h2 {font-size: 18px; margin: 7px 0;}
.s41 .sec04 li p {font-size: 12px;}
.s41 .sec04 li p br {display: block;}
.s41 .sec04 li i {font-size: 24px; transform:rotate(90deg);}

.s41 .sec06 .lat ul {font-size: 13px;}
.s41 .sec06 .lat li .subject {width: 65%; font-size: 13px;}
.s41 .sec06 .lat li .date {width: 25%;}
.s41 .sec06 .lat li .more {width: 10%;}
.s41 .sec06 .lat li .more span {display: none;}
}

/************************* page 끝 *************************/

/************************* footer_inc 시작 *************************/
.footer_wrap .contact {background: url("./img/contact_bg.png") no-repeat center; background-size: cover; padding: 80px 0; color: #fff;}
.footer_wrap .contact a {color: #fff;}
.footer_wrap .contact .inner {display: flex; flex-flow:row wrap; justify-content:space-between;}
.footer_wrap .contact .txt {width: 40%;}
.footer_wrap .contact .txt h1 {font-size: 48px; font-weight: 700; margin-bottom: 5px;}
.footer_wrap .contact .txt p {font-size: 18px; color: #ccc; line-height: 1.6;}
.footer_wrap #fwrite2 {width: 60%; display: flex; flex-flow:row wrap; justify-content:space-between;}
.footer_wrap #fwrite2  *::placeholder {color: #fff;}
.footer_wrap #fwrite2 select, .footer_wrap #fwrite2 input[type=text], .footer_wrap #fwrite2 textarea {background: none; border: none; border-bottom: 1px solid #fff; font-size: 18px; color: #fff; background-image:none !important; padding: 0; outline:0; margin-bottom: 20px;}
.footer_wrap #fwrite2 select, .footer_wrap #fwrite2 input[type=text] {height: 50px; line-height: 50px; width: 47%;}
.footer_wrap #fwrite2 select {text-transform: uppercase; -webkit-appearance: none; background: transparent url("./img/down.png") no-repeat center right; background-size: 14px 7px;}
.footer_wrap #fwrite2 select option {color: #212121;}
.footer_wrap #fwrite2 textarea {width: 100%; resize:none; overflow-y:hidden; padding-top: 10px;}
.footer_wrap #fwrite2 textarea::placeholder {line-height: 35px;}
.footer_wrap .contact .bottom {width: 100%; display: flex; justify-content:space-between;}
.footer_wrap .contact .submit_btn {display: inline-block; width: 180px; height: 50px; line-height: 50px; text-align: center; background: #fff; color: #212121; font-weight: 500; font-size: 18px;}

.footer_t {background: #111; padding: 40px 0; color: #fff; position: relative;}
.footer_t a {color: #fff; font-size: 12px;}
.footer_t .inner {display: flex; flex-flow:row wrap; justify-content:space-between; align-items:center; }
.footer_t .info h1 {font-size: 18px; font-weight: 700;}
.footer_t .info address {font-size: 12px;}
.footer_t .info .copy {margin-top: 30px; font-weight: 300; color: #aaa;}
.footer_t .info .copy a {display: inline-block; margin-left: 5px;}
.footer_t .right p {font-size: 18px; font-weight: 700; margin: 10px 0; }

@media(max-width:1500px){
.footer_wrap .contact .txt {width: 35%;}
}

@media(max-width:1024px){
.footer_wrap .contact {padding: 5% 0;}
.footer_wrap .contact .txt {width: 100%;}
.footer_wrap .contact .txt h1 {font-size: 36px;}
.footer_wrap .contact .txt p {font-size: 16px;}
.footer_wrap #fwrite2 {width: 100%; margin-top: 5%;}
.footer_wrap #fwrite2 select, .footer_wrap #fwrite2 input[type=text], .footer_wrap #fwrite2 textarea {font-size: 16px;}
.footer_wrap .contact .submit_btn {font-size: 16px;}

.footer_t {padding: 30px 0 60px;}
.footer_t .info .copy {position: absolute; left: 5%; bottom: -15px;}
.footer_t .right p {font-size: 16px; margin: 5px 0;}
}

@media(max-width:700px){
.footer_wrap .contact {padding: 10% 0;}
.footer_wrap .contact .txt h1 {font-size: 24px;}
.footer_wrap .contact .txt p {font-size: 14px;}
.footer_wrap #fwrite2 {margin-top: 8%;}
.footer_wrap #fwrite2 select, .footer_wrap #fwrite2 input[type=text], .footer_wrap #fwrite2 textarea {font-size: 14px; margin-bottom: 10px;}
.footer_wrap #fwrite2 select, .footer_wrap #fwrite2 input[type=text] {width: 48%;}
.footer_wrap .contact .submit_btn {font-size: 14px; width: 48%; height: auto; line-height: 1; padding: 4% 0; margin-top: 5px;}

.footer_t {padding: 30px 0 20%;}
.footer_t .info .copy {position: relative; left: 5%;     padding-top: 1.0em;}
.footer_t .info .copy a {margin-left: 0;  }
.footer_t .info .copy a:last-child {display: none;}
.footer_t .right p {font-size: 14px; margin: 5px 0;}
}


/*family_inc.php의 스타일*/
.total								{width:100%;  cursor:pointer; }
.select_d							{border:1px solid #ddd; width:100%; line-height:30px; height:30px; padding-left:8px; position:relative; font-size:12px;}
.select_d span				{display:inline-block; position:absolute; right:10px;}

/* 패밀리사이트 클릭시 밑으로 떨어지는  CSS*/
/*
.select_op						{border:1px solid #ddd;border-top:none; width:168px; margin-top:0px; display:none; position:absolute; z-index:3px; background:#fff; font-size:11px;}
*/

/* 패밀리사이트 클릭시 위로 올라오는 CSS*/
.select_op						{border:1px solid #ddd;border-bottom:none; width:160px; margin-top:0px; display:none; position:absolute; z-index:3px; background:#fff; font-size:11px;bottom:30px;}

.select_op	li				{line-height:30px;height:30px; border:0px solid red; padding-left:8px;}
.select_op	li		a		{cursor:pointer; width:100%; height:30px; display:inline-block;letter-spacing:-0.3px;}
.select_op	li:hover	{background:#eee;}
.a_focus							{background:#8e8e8e; color:#fff !important;}



.footer_copyright			{background:#323232; color:#fff; text-align:center; padding:10px;}
.footer_copyright p			{color:#fff; font-size:12px;}
.footer_copyright p a		{font-size:11px; color:#fff;  margin-left:15px;}

/************************* 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 끝 *************************/