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




/* images */
	.s01_img_symbol {background: url(img/s01_img_symbol_infor.png) no-repeat; width: 700px; height: 580px;}

	/*temp images*/
	.s2_img_temp {background: url(img/s2_img_temp.png) no-repeat; width: 1920px; height: 965px;}

	.s3_img_bg_01 {background: url(img/s3_img_bg_01.png) no-repeat; width: 940px; height: 229px;}
	.s3_img_btn_01 {background: url(img/s3_img_btn_01.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_02 {background: url(img/s3_img_btn_02.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_03 {background: url(img/s3_img_btn_03.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_04 {background: url(img/s3_img_btn_04.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_05 {background: url(img/s3_img_btn_05.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_06 {background: url(img/s3_img_btn_06.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_07 {background: url(img/s3_img_btn_07.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_btn_08 {background: url(img/s3_img_btn_08.png) no-repeat; width: 125px; height: 140px;}
	.s3_img_temp_01 {background: url(img/s3_img_temp_01.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_02 {background: url(img/s3_img_temp_02.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_03 {background: url(img/s3_img_temp_03.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_04 {background: url(img/s3_img_temp_04.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_05 {background: url(img/s3_img_temp_05.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_06 {background: url(img/s3_img_temp_06.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_07 {background: url(img/s3_img_temp_07.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_08 {background: url(img/s3_img_temp_08.png) no-repeat; width: 1000px; height: 265px;}
	.s3_img_temp_01a {background: url(img/s3_img_temp_01.png) no-repeat; width: 1000px; height: 1100px; background-position: 0px -265px;}
	.s3_img_temp_02a {background: url(img/s3_img_temp_02.png) no-repeat; width: 1000px; height: 1335px; background-position: 0px -265px;}
	.s3_img_temp_03a {background: url(img/s3_img_temp_03.png) no-repeat; width: 1000px; height: 1335px; background-position: 0px -265px;}
	.s3_img_temp_04a {background: url(img/s3_img_temp_04.png) no-repeat; width: 1000px; height: 1135px; background-position: 0px -265px;}
	.s3_img_temp_05a {background: url(img/s3_img_temp_05.png) no-repeat; width: 1000px; height: 1465px; background-position: 0px -265px;}
	.s3_img_temp_06a {background: url(img/s3_img_temp_06.png) no-repeat; width: 1000px; height: 2435px; background-position: 0px -265px;}
	.s3_img_temp_07a {background: url(img/s3_img_temp_07.png) no-repeat; width: 1000px; height: 1935px; background-position: 0px -265px;}
	.s3_img_temp_08a {background: url(img/s3_img_temp_08.png) no-repeat; width: 1000px; height: 2235px; background-position: 0px -265px;}

	.s4_img_bg_01 {background: url(img/s4_img_bg_01.png) no-repeat; width: 1920px; height: 1070px;}
	.s4_img_btn_01 {background: url(img/s4_img_btn_01.png) no-repeat; width: 140px; height: 160px;}
	.s4_img_btn_02 {background: url(img/s4_img_btn_02.png) no-repeat; width: 140px; height: 160px;}
	.s4_img_btn_03 {background: url(img/s4_img_btn_03.png) no-repeat; width: 140px; height: 160px;}
	.s4_img_btn_04 {background: url(img/s4_img_btn_04.png) no-repeat; width: 140px; height: 160px;}
	.s4_img_btn_05 {background: url(img/s4_img_btn_05.png) no-repeat; width: 140px; height: 160px;}
	.s4_img_temp_01 {background: url(img/s4_img_temp_01.png) no-repeat; width: 1000px; height: 900px;}
	.s4_img_temp_02 {background: url(img/s4_img_temp_02.png) no-repeat; width: 1000px; height: 900px;}
	.s4_img_temp_03 {background: url(img/s4_img_temp_03.png) no-repeat; width: 1000px; height: 900px;}
	.s4_img_temp_04 {background: url(img/s4_img_temp_04.png) no-repeat; width: 1000px; height: 900px;}
	.s4_img_temp_05 {background: url(img/s4_img_temp_05.png) no-repeat; width: 1000px; height: 900px;}

	.s5_img_bg_01 {background: url(img/s4_img_bg_01.png) no-repeat; width: 1920px; height: 475px;}
	.s5_img_btn_01 {background: url(img/s5_img_btn_01.png) no-repeat; width: 160px; height: 140px;}
	.s5_img_btn_02 {background: url(img/s5_img_btn_02.png) no-repeat; width: 160px; height: 140px;}
	.s5_img_btn_03 {background: url(img/s5_img_btn_03.png) no-repeat; width: 160px; height: 140px;}
	.s5_img_btn_04 {background: url(img/s5_img_btn_04.png) no-repeat; width: 160px; height: 140px;}
	.s5_img_btn_05 {background: url(img/s5_img_btn_05.png) no-repeat; width: 160px; height: 140px;}
	.s5_img_temp_01 {background: url(img/s5_img_temp_01.png) no-repeat; width: 1000px; height: 900px;}
	.s5_img_temp_02 {background: url(img/s5_img_temp_02.png) no-repeat; width: 1000px; height: 900px;}
	.s5_img_temp_03 {background: url(img/s5_img_temp_03.png) no-repeat; width: 1000px; height: 900px;}
	.s5_img_temp_04 {background: url(img/s5_img_temp_04.png) no-repeat; width: 1000px; height: 900px;}
	.s5_img_temp_05 {background: url(img/s5_img_temp_05.png) no-repeat; width: 1000px; height: 900px;}

	.s7_img_temp {background: url(img/s7_img_temp.png) no-repeat; width: 1920px; height: 950px;}

	.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;}



/*Basic*/
	#navi{
		width: 454px;
		margin-left: -227px;
	}


	.gnb{
		margin-bottom: 0px;
	}
	.temp{
		width: 1920px;
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
	}

	.s3_img_01{
		background: url(img/s3_img_01.png) no-repeat;
		width: 1000px;
		height: 1200px;
	}




/* Section 02 */
	.s2 .s2_img_temp {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.s2 .bgc_01{
		margin-top: 0px;
		height: 920px;
		background-color: #1C2C54;
	}
	.s2 .section{
		height: 950px;
	}




/* Section 03 */
	.s3 .s3_img_bg_01 {
		top: 620px;
		position: absolute;
		left: -255px;
	}
	.s3 .bgc_01{
		top: 160px;
		background-color: #1C2C54;
	}
	.s3 .bgc_02{
		top: 849px;
		height: 1300px;
		background-color: #f5f7fc;
	}
	/*tab_01*/
		.tab_01 {
			position: relative;
		}
		.tab_01 .tabbed_content {
			width: 1000px;
			margin: 50px auto 0px;
		}
		.tab_01 .tabs {
			width: 1000px;
			height: 200px;
			position: relative;
		}
		.tab_01 .tabs .moving_bg {
			position: absolute;
			width: 125px;
			height: 210px;
			box-shadow: 0px 2px 6px #cfd3dd;
			border-radius: 15px;
		}
		.tab_01 .tabs .tab_item {
			float: left;
			width: 125px;
			height: 140px;
			cursor: pointer;
			text-align: center;
		}
		.tab_01 .tabs .tab_item h3 {
			font-weight: 900;
		}
		.tab_01 .tabs .tab_item h4 {
			line-height: 22px;
		}
		.tab_01 .tabbed_content .slide_content {
			overflow: hidden;
			position: relative;
			width: 1000px;
			margin-top: 30px;
		}
		.tab_01 .tabslider {
			width: 8000px; /*8000px x 8*/
		}
		.tab_01 .tabslider>div {
			float: left;
			width: 1000px;
		}
		.tab_01 .tabslider>div .img_03 {
			height: 90px;
			width: 900px;
			background-image: linear-gradient(to top, rgba(255,0,0,0), rgb(245 247 252));
			position: absolute;
			z-index: 90;
			top: 295px;
		}
		.tab_01 .tabslider>div .img_04 {
			height: 100px;
			width: 900px;
			background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(245 247 252));
			position: absolute;
			z-index: 90;
			bottom: -1px;
		}
		.scroll_01::-webkit-scrollbar{
			width: 150px;
		}
		.scroll_01::-webkit-scrollbar-thumb {
			background-color: #1c2c5424;
			border-radius: 200px;
			background-clip: padding-box;
			border: 68px solid #ffffff00;
		}
		.scroll_01::-webkit-scrollbar-track {
		}
		.tab_01 .tabslider>div ol{
			height: 1230px;
			margin-top: 30px;
			overflow-x: hidden;
			position: relative;
		}
		.s3 .btn_01, .s3 .btn_02, .s3 .btn_03 {
			width: 180px;
			height: 50px;
			position: absolute;
		}
		.s3 .btn_01{
			top: 696px;
			left: 410px;
		}
		.s3 .btn_02{
			top: 324px;
			left: 410px;
		}
		.s3 .btn_03{
			top: 843px;
			left: 410px;
		}
		.s3 .youtube_01{
			position: absolute;
			top: 924px;
			left: 215px;
			width: 570px;
			height: 300px;
		}




/* Section 04 */
	.s4 .s4_img_bg_01 {
		top: 460px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.s4 .bgc_01{
		height: 1070px;
		background-color: #1C2C54;
	}
	/*tab_02*/
		.tab_02 {
			width: 1000px;
			margin: 80px auto 0px;
		}
		.tab_02 .tabbed_content {
			width: 1000px;
		}
		.tab_02 .tabs {
			height: 220px;
			margin-left: 25px;
			position: relative;
		}
		.tab_02 .tabs .moving_bg {
			position: absolute;
			background-color: #00ABEB;
			width: 172px;
			height: 10px;
			z-index: 200;
			margin: 0 9px;
			bottom: 0px;
		}
		.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: 71px;
		}
		.tab_02 .tabs .tab_item {
			background-color: #fff;
			float: left;
			width: 170px;
			height: 210px;
			z-index: 190;
			cursor: pointer;
			position: relative;
			text-align: center;
			margin: 0 9px;
			border: 1px solid #cfd3dd;
			border-bottom: 5px solid #00abeb;
			transition-duration:0.3s;
		}
		.tab_02 .tabs .tab_item:hover{
			background-color: #f5f8ff;
		}
		.tab_02 .tabs .tab_item>h1 {
			color: #1C2C54;
			font-size: 17px;
			line-height: 24px;
			margin: 135px 0px 22px;
		}
		.tab_02 .tabs .tab_item>h1 b{
			color: #1698d6;
		}
		.tab_02 .tabs .tab_item>.img_01 {
			left: 16px;
			top: -36px;
			position: absolute;
		}
		.tab_02 .tabbed_content .slide_content {
			overflow: hidden;
			position: relative;
			margin-top: 40px;
		}
		.tab_02 .tabslider {
			width: 5000px; /*1000px x 5*/
		}
		.tab_02 .tabslider>div {
			float: left;
			width: 1000px;
			position: relative;
			text-align: left;
		}
		/* tab contents 01 */




/* Section 05 */
	.s5 .s5_img_bg_01 {
		top: 510px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.s5 .bgc_01{
		top: 50px;
		height: 475px;
		background-color: #1C2C54;
	}
	.s5 .bgc_02{
		top: 985px;
		height: 640px;
		background-color: #f5f7fc;
	}

	/*tab_03*/
		.tab_03 {
			width: 1000px;
			margin: 110px auto 0px;
		}
		.tab_03 .tabbed_content {
			width: 1000px;
		}
		.tab_03 .tabs {
			height: 220px;
			margin-left: 25px;
			position: relative;
		}
		.tab_03 .tabs .moving_bg {
			position: absolute;
			background-color: #00ABEB;
			width: 172px;
			height: 10px;
			z-index: 200;
			margin: 0 9px;
			bottom: 0px;
		}
		.tab_03 .tabs .moving_bg>b{
			border-bottom: 15px solid #00ABEB;
			border-right: 15px solid transparent;
			border-left: 15px solid transparent;
			position: absolute;
			top: -10px;
			left: 71px;
		}
		.tab_03 .tabs .tab_item {
			background-color: #fff;
			float: left;
			width: 170px;
			height: 210px;
			z-index: 190;
			cursor: pointer;
			position: relative;
			text-align: center;
			margin: 0 9px;
			border: 1px solid #cfd3dd;
			border-bottom: 5px solid #00abeb;
			transition-duration:0.3s;
		}
		.tab_03 .tabs .tab_item:hover{
			background-color: #f5f8ff;
		}
		.tab_03 .tabs .tab_item>.img_01 {
			margin-left: 6px;
			top: -72px;
			position: absolute;
		}
		.tab_03 .tabs .tab_item>h5 {
			font-size: 18px;
			line-height: 26px;
			position: relative;
			margin-top: 77px;
		}
		.tab_03 .tabs .tab_item>h1 {
			font-size: 20px;
			line-height: 26px;
		}
		.tab_03 .tabs .tab_item>h4 {
			font-size: 15px;
			line-height: 22px;
			font-weight: 700;
			margin-top: 12px;
		}
		.tab_03 .tabbed_content .slide_content {
			overflow: hidden;
			position: relative;
			margin-top: 85px;
		}
		.tab_03 .tabslider {
			width: 5000px; /*1000px x 5*/
		}
		.tab_03 .tabslider>div {
			float: left;
			width: 1000px;
			position: relative;
			text-align: left;
		}
		/* tab contents 01 */
		.s5 .btn_00{
			width: 70px;
			height: 22px;
			position: absolute;
			border: 1px solid #7e88a0;
			border-radius: 15px;
			opacity: 50%;
		}
		.s5 .btn_00:hover{
			opacity: 100%;
			transition: 0.2s;
		}
		.s5 .btn_011{top: 822px; left: 313px;}
		.s5 .btn_012{top: 822px; left: 464px;}
		.s5 .btn_013{top: 822px; left: 615px;}
		.s5 .btn_014{top: 822px; left: 764px;}

		.s5 .btn_021{top: 733px; left: 377px;}
		.s5 .btn_022{top: 733px; left: 528px;}
		.s5 .btn_023{top: 733px; left: 678px;}
		
		.s5 .btn_031{top: 822px; left: 313px;}
		.s5 .btn_032{top: 822px; left: 464px;}
		.s5 .btn_033{top: 822px; left: 615px;}
		.s5 .btn_034{top: 822px; left: 764px;}

		.s5 .btn_041{top: 822px; left: 378px;}
		.s5 .btn_042{top: 822px; left: 529px;}
		.s5 .btn_043{top: 822px; left: 680px;}
		
		.s5 .btn_051{top: 765px; left: 377px;}
		.s5 .btn_052{top: 765px; left: 528px;}
		.s5 .btn_053{top: 765px; left: 678px;}
		


/* Section 07 */
	.s7 .s7_img_temp {
		top: 350px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.s7 .bgc_01{
		margin-top: 415px;
		height: 835px;
		background-color: #1C2C54;
	}
	.s7 .btn_01 {
		width: 72px;
		height: 24px;
		position: absolute;
		top: 778px;
		left: 654px;
	}
	.s7 .section{
		height: 1265px;
	}




/* Section 08 */
	.s8 .s8_img_bg_01 {
		top: 500px;
		height: 1060px;
		position: absolute;
		margin-left: 50%;
		left: -863px;
	}
	.s8 .bgc_01{
		background-color: #1C2C54;
		height: 1060px;
		margin-top: 500px;
	}
	.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;
	}
	.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;
	}