@charset "utf-8";
@import url(../css/basic.css);
@import url(../css/gnb.css);
@import url(../css/datacare_01.css);


#navi {width: 390px; margin-left: -195px;}

/* images */
	.s01_img_symbol {
		background: url(../img/s01_img_symbol_mv.png) no-repeat;
		width: 700px;
		height: 600px;
		top: 60px !important;
	}

	.s5_img00 {background: url(../img/s5_img00.png) no-repeat; width: 900px;	height: 300px;}
	.s5_img01 {background: url(../img/s5_img01.png) no-repeat; width: 130px;	height: 130px;}
	.s5_img02 {background: url(../img/s5_img02.png) no-repeat; width: 130px;	height: 130px;}
	.s5_img03 {background: url(../img/s5_img03.png) no-repeat; width: 130px;	height: 130px;}
	.s5_img04 {background: url(../img/s5_img04.png) no-repeat; width: 130px;	height: 130px;}
	.s5_img05 {background: url(../img/s5_img05.png) no-repeat; width: 130px;	height: 130px;}
	.s5_img06 {background: url(../img/s5_img06.png) no-repeat; width: 920px;	height: 200px;}
	.s5_img07 {background: url(../img/s5_img07.png) no-repeat; width: 500px;	height: 420px;}
	.s5_img08 {background: url(../img/s5_img08.png) no-repeat; width: 500px;	height: 420px;}
	.s5_img09 {background: url(../img/s5_img09.png) no-repeat; width: 500px;	height: 420px;}
	.s5_img10 {background: url(../img/s5_img10.png) no-repeat; width: 500px;	height: 420px;}
	.s5_img11 {background: url(../img/s5_img11.png) no-repeat; width: 500px;	height: 420px;}
	.s5_img12 {background: url(../img/s5_img12.png) no-repeat; width: 200px;	height: 140px;}
	.s5_img13 {background: url(../img/s5_img13.png) no-repeat; width: 200px;	height: 140px;}
	.s5_img14 {background: url(../img/s5_img14.png) no-repeat; width: 200px;	height: 140px;}
	.s5_img15 {background: url(../img/s5_img15.png) no-repeat; width: 200px;	height: 140px;}
	.s5_img16 {background: url(../img/s5_img16.png) no-repeat; width: 380px;	height: 430px;}
	.s5_img17 {background: url(../img/s5_img17.png) no-repeat; width: 380px;	height: 430px;}
	.s5_img18 {background: url(../img/s5_img18.png) no-repeat; width: 380px;	height: 430px;}
	.s5_img19 {background: url(../img/s5_img19.png) no-repeat; width: 380px;	height: 430px;}
	.s5_img20 {background: url(../img/s5_img20.png) no-repeat; width: 380px;	height: 430px;}

	.s8_img_01 {background: url(../img/s8_img_01.png) no-repeat; width: 300px; height: 260px;}
	.s8_img_02 {background: url(../img/s8_img_02.png) no-repeat; width: 300px; height: 260px;}
	.s8_img_03 {background: url(../img/s8_img_03.png) no-repeat; width: 300px; height: 260px;}
	.s8_img_04 {background: url(../img/s8_img_04.png) no-repeat; width: 954px; height: 635px;}
	.s8_img_05 {background: url(../img/s8_img_05.png) no-repeat; width: 130px; height: 130px;}
	.s8_img_06 {background: url(../img/s8_img_06.png) no-repeat; width: 130px; height: 130px;}
	.s8_img_07 {background: url(../img/s8_img_07.png) no-repeat; width: 130px; height: 130px;}
	.s8_img_08 {background: url(../img/s8_img_08.png) no-repeat; width: 130px; height: 130px;}
	.s8_img_09 {background: url(../img/s8_img_09.png) no-repeat; width: 130px; height: 130px;}
	.s8_img_bg_01 {background: url(../img/s8_img_bg_01.png) no-repeat; width: 1730px; height: 1320px;}




/* 탭 버튼 스타일 */
	.s3 {
		background-color: #fff;
	}
	.s3 .box_01 .box_tab_01{
		top: 25px;
		position: relative;
	}
	.tab-label {
		display: inline-block;
		padding: 10px 30px;
		margin-right: -4px;
		background: #eee;
		cursor: pointer;
		border-radius: 8px 8px 0 0;
		font-weight: 600;
		transition: background 0.2s;
		font-family: TmoneyRoundWindRegular;
	}
	input[type="radio"] {
		display: none;
	}
	input[type="radio"]:checked + .tab-label {
		background: #004ea2;
		color: #fff;
	}
	/* 탭 콘텐츠 스타일 */
		.tab-content {
			display: none;
		}
		#tab1:checked ~ #content1,
		#tab2:checked ~ #content2,
		#tab3:checked ~ #content3 {
			display: block;
		}


/* Section 02 */
	.s2 {
		background-color: #fff;
	}
	.s2 .section{
		height: auto !important;
	}
	.s2 .box_01, .s3 .box_01{
		position: relative;
		height: 450px;
		background-color: #F3F6FB;
		margin-top: 20px;
		text-align: center;
		/*display: none; *//*영상 숨기기*/
	}
	.s2 .box_01 .box_02, .s3 .box_01 .box_02{
		position: absolute;
		top: 218px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 640px;
		height: 360px;
		overflow: hidden;
	}
	.s2 .box_01 .box_02>div, .s3 .box_01 .box_02>div{
		width: 640px;
		height: 760px;
		position: absolute;
		top: -200px;
	}
	.s2 .box_01>h2, .s3 .box_01>h2{
		top: 405px;
		position: relative;
	}


/* Section 05 */

	.s5 {
		position: relative;
	}
	.s5 .section{
		height: auto !important;
	}
	.s5>.bgc_01 {
		background-color: #F3F6FB;
		height: 660px; /*텍스트 수정 요청 250421 60px추가*/
		/*margin-top:830px;*/
		margin-top:530px;
	}
	.s5>.section>.txt_01{
		margin-top: 143px;
	}
	.s5>.section>.txt_02{
		margin-top: 30px;
	}
	.s5>.section>.s5_img00{
		margin:40px auto;
	}
	.s5>.section>.s5_img06{
		position: absolute;
		left: 360px;
		/*top: 1230px;*/
		top: 990px; /*텍스트 수정 요청 250421 60px추가*/
		opacity: 0.7;
	}
	/*tab_02*/
		.tab_02 {
			margin-top: 90px;
		}
		.tab_02 .tabbed_content {
			width: 975px;
			margin: 0 auto;
		}
		.tab_02 .tabs {
			width: 900px;
			height: 226px;
			position: relative;
			margin-left: 25px;
			color: #fff;
		}
		.tab_02 .tabs .moving_bg {
			position: absolute;
			background-color: #00ABEB;
			width: 160px;
			height: 8px;
			z-index: 200;
			left: 0;
			margin: 0 10px;
			bottom: 0px;
			box-shadow: 0px -15px 30px -2px #000;
		}
		.tab_02 .tabs .moving_bg>b{
			border-bottom: 15px solid #00ABEB;
			border-right: 15px solid transparent;
			border-left: 15px solid transparent;
			position: absolute;
			top: -10px;
			left: 65px;
		}
		.tab_02 .tabs .tab_item {
			background-color: #485676;
			float: left;
			width: 160px;
			height: 226px;
			z-index: 190;
			cursor: pointer;
			position: relative;
			text-align: center;
			margin: 0 10px;
			transition-property:background-color;
			transition-duration:0.5s;
		}
		.tab_02 .tabs .tab_item:hover{
			background-color: #1C2C54;
		}
		.tab_02 .tabs .tab_item>h1 {
			font-size: 20px;
			margin-bottom: 7px;
			margin-top: 120px;
		}
		.tab_02 .tabs .tab_item>h2 {
			color: #FFF;
			text-align: center;
			font-family: Pretendard;
			font-size: 15px;
			font-style: normal;
			font-weight: 400;
			line-height: 22px; /* 146.667% */
		}
		.tab_02 .tabs .tab_item>.img_01 {
			left: 20px;
			top: -30px;
			position: absolute;
		}
		.tab_02 .tabbed_content .slide_content {
			overflow: hidden;
			position: relative;
			width: 975px;
			margin-top: 90px;
		}
		.tab_02 .tabslider {
			width: 4875px; /*975px x 5*/
		}
		.tab_02 .tabslider>div {
			float: left;
			width: 975px;
			position: relative;
			color: #485676;
			text-align: left;
		}
		/* tab contents 01 */
			.tab_02 .tabslider div>.img_02 {
				float: left;
			}
			.tab_02 .tabslider div>.box_01 {
				width: 3px;
				height: 70px;
				background-color: #485676;
				float: left;
				margin: 0 15px;
			}
			.tab_02 .tabslider div ul {
				width: 560px; /*텍스트 수정요청 250521*/
				float: left;
			}
			.tab_02 .tabslider div ul>.txt_01 {
				color: #485676;
				font-size: 30px;
				font-style: normal;
				font-weight: 500;
				line-height: normal; /* 100% */
			}
			.tab_02 .tabslider div ul>.txt_02 {
				color: #485676;
				font-family: Pretendard;
				font-size: 22px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
			}
			.tab_02 .tabslider div ul>.txt_03 {
				margin-top: 40px;
			}
			.tab_02 .tabslider div ul>.txt_03 h3 {
				margin-bottom: 15px;
				color: #485676;
				font-family: Pretendard;
				font-size: 18px;
				font-style: normal;
				font-weight: 500;
				line-height: 30px; /* 166.667% */
			}
			.tab_02 .tabslider div ul>.txt_03 h3 b {
				color: #1698D6;
			}




/* Section 08 */
	.s8 {
		background-color: #fff;
	}
	.s8 .s8_img_bg_01 {
		top: 550px;
		height: 1060px;
		position: absolute;
		margin-left: 50%;
		left: -863px;
	}
	.s8 .bgc_01{
		background-color: #1C2C54;
		height: 1060px;
		margin-top: 550px;
	}
	.s8>div>.main{
		margin-top: 150px !important;
	}
	.s8 .box_01>li {
		float: left;
		width: 300px;
		height: 300px;
		border: 1px solid #cfd3dd;
		cursor: pointer;
		text-align: center;
		margin-right: 22px;
		background-color: #fff;
		border-bottom: 5px solid #00abeb;
	}
	.s8 .box_01>li:hover{
		box-shadow: 0px 3px 0 #00abeb;
		transform: translateY(-3px);
		transition: 0.2s;
	}
	.s8 .box_01>li:hover .img_01{
		transform: scale(1.03);
		transition: 0.2s;
	}
	.s8 .box_01>li:last-child{
		margin-right: 0px;
	}
	.s8 .box_01>li .img_01 {
		margin-top: -120px;
		margin-bottom: 15px;
	}
	.s8 .box_01>li h1{
		font-size: 26px;
		margin-bottom: 20px;
	}
	.s8 .box_01>li h3{
		font-size: 18px;
		margin-bottom: 20px;
		font-weight: 700;
	}
	.s8 .box_01>li h4{
		line-height: 28px;
		font-size: 17px;
	}
	.s8 .box_01>li h4>b{
		color: #1698D6;
	}

	.s8 .box_02 a>h6{
		width: 80px;
		background-color: #13234a;
		padding: 4px 0px;
		border-radius: 15px;
		text-align: center;
		position: absolute;
		color: #b0b9cf;
	}
	.s8 .box_02 a:hover h6{
		background: #1a2c55;
		box-shadow: 0px 2px 3px #13295a;
		transform: translateY(-1px);
		transition: 0.2s;
		cursor: pointer;
		color: #d2d9e9;
	}
	.s8 .box_02 h6>b{
		margin-left: 5px;
		opacity: 50%;
	}
	.s8 .box_02 .btn_01{
		top: 543px;
		left: 85px;
	}
	.s8 .box_02 .btn_02{
		top: 870px;
		left: 688px;
	}
	.s8 .box_02 .s8_img_04{
		float: left;
		margin: 7px 0px 10px;
	}

	.s8 .box_03{
		float: left;
	}
	.s8 .box_03>h4{
		margin: 20px 35px 0px;
		display: inline-block;
		color: #99a0b7;
	}
	.s8 .box_03 ul {
		margin: 10px 35px 0px;
		display: inline-block;
	}
	.s8 .box_03 ul li {
		float: left;
		width: 160px;
		height: 225px;
		background-color: #485676;
		margin-right: 20px;
		text-align: center;
		position: relative;
		box-shadow: 0px 5px 0 #a8b3ca;
	}
	.s8 .box_03 ul li:hover{
		background: #3e4c6b;
		box-shadow: 0px 7px 0 #a8b3ca;
		transform: translateY(-2px);
		transition: 0.3s;
	}
	.s8 .box_03 ul li:hover i{
		color: #3e4c6b;
		transition: 0.3s;
	}
	.s8 .box_03 ul li:last-child {
		margin-right: 0px;
	}
	.s8 .box_03 ul li>.img_01{
		margin: -30px auto 0px;
	}
	.s8 .box_03 ul li>h1{
		font-size: 20px;
		margin: 20px 0px 12px;
		color: #E8E8ED;
	}
	.s8 .box_03 ul li>h4{
		line-height: 24px;
		color: #E8E8ED;
	}
	.s8 .box_03 ul li>i{
		font-size: 100px;
		position: absolute;
		right: -30px;
		top: 90px;
		color: #485676;
	}

	.s8 .main > .box_03 ul li > svg {
		font-size: 100px;
		position: absolute;
		right: -30px;
		top: 110px;
		color: #485676;
	}
	.s8 .main > .box_03 ul li > svg > path {
		color: #485676;
	}