@CHARSET "UTF-8";

/* CSS Document */

/* ------------------------------------------------------------
 * Name      : main.css
 * Desc       :SUCC Homepage
 * Created   : 2024/06/20 by NRI
 * Updated   :
------------------------------------------------------------ */

/*main*/
#main_content {
	position: relative;
}
#main_content .main{
	position: relative;
	max-width:100%;
}
#main_content .main .txt{
    position: absolute;
    top: 40%;
    right: 23%;
}
#main_content .main .txt h2{
    font-size: 48px;
    color: #EED91E;
    font-weight: bold;
    line-height: 48px;
}
#main_content .main .txt p{
    color: #fff;
    font-size: 20px;
    font-weight: 100;
}
 .swiper {
 	width: 100%;
 	height: 100%;
 }

 .swiper-slide {
 	text-align: center;
 	font-size: 18px;
 	background: #fff;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }

 .swiper-slide img {
 	display: block;
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
	min-height: 400px;
 }
/*content*/
.content_in{
	width:1400px;
	margin:0 auto;
	max-width:100%;
	overflow: hidden;
	padding:20px;
	box-sizing: border-box;
}
/*section 01*/
.content_01 .content_in{
	margin:100px auto;
	display: flex;
	justify-content: space-between;
}
.content_01 .text_area{
	position:relative;
	font-size:26px;
	color:#3C3C3C;
	margin-right:70px;
}
.content_01 .text_area h1{
	font-size:64px;
	color:#1972F5;
	line-height:70px;
	font-weight:900;
}
.content_01 .text_area p{
	font-weight: 200;
	margin:20px 0px;
}
.content_01 .text_area .main_sub_img{
	position:relative;
	margin-top:90px;
}
.content_01 .text_area .main_sub_img img{
	max-width:100%;
	position: absolute;
}
.content_01 .text_area .main_sub_img li:first-child img{
	left:0; top:40px;
	z-index: 1;
}
.content_01 .text_area .main_sub_img li:nth-child(2) img{
	left: 91px;
    top: 167px;
}
.content_01 .text_area .main_sub_img li:last-child img{
	right: -282px;
    top: 30px;
    z-index: 1;
}
.content_01 .info_area ul{
	display: grid;
	grid-auto-flow: dense;
	gap: 20px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:1fr 1fr;	
}
.content_01 .info_area ul li:nth-child(4){
	grid-column: 2 / 3;
}
.content_01 .info_area ul li:last-child{
	grid-column: 3 / 3;
}
.content_01 .info_area ul li{
	background:#F5F5F5;
	box-sizing: border-box;
	padding:40px 30px;
	min-height:450px;
	max-width:100%;
	position: relative;
}
.content_01 .info_area h3{
	font-size:24px;
	margin-bottom:10px;
	font-weight:800;
}
.content_01 .info_area p{
	font-size:16px;
	color:#444;
	line-height:24px;
	word-break: keep-all;
}
.content_01 .info_area small{
	font-size:13px;
	color:#aaa;
	display: block;
}
.content_01 .info_area img{
	width:50%;
	position: absolute;
	right:10px; bottom:10px;
}

/*section 02*/
.content_02{
	background:#F0F8FD;
	padding:80px 0px;
}
.content_02 .title h3{
	font-size:36px;
	font-weight: 700;
}
.content_02 .title p{
	font-size:20px;
}
.content_02 .box>ul{
	margin-top:50px;
	display: flex;
	gap:20px;
}
.content_02 .box>ul>li{
	background:#fff;
	max-width:420px;
	min-height:600px;
	padding:30px;
	font-size:18px;
	word-break:keep-all;
	line-height:24px;
	position: relative;
}
.content_02 .box h3{	
	color:#1972F5;
	font-size:36px;
	font-weight: 700;
	margin-bottom:20px;
}
.content_02 .box .content_img ul{
	display: flex;
	flex-direction: column;
}
.content_02 .box .content_img ul li:nth-child(2){
	margin-top:20px;
}
.content_02 .box .content_img .search{
	margin-top:30px;
	width:100%;
	height:60px;
	border: 6px solid #1972F5;
	position: relative;
	box-sizing: border-box;
}
.content_02 .box .content_img .search .logo_txt{
	padding:12px 0px 0px 20px;
}
.content_02 .box .content_img .search .search_ico{
	background:#1972F5;
	position: absolute;
	right:-6px;top:-6px;
	width:60px; height:60px;
	font-size:0;
}
.content_02 .box .content_img .search .search_ico:before{
content: '';
    background: url(../images/search_ico.png) no-repeat;
    width: 21px;
    height: 21px;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}
.content_02 .box .qr_box{
	margin-top:30px;
	border:1px solid #ccc;
	width:100%;
	padding:20px;
	box-sizing: border-box;
	display: flex;
    align-items: flex-end;
	position: relative;
}
.content_02 .box .qr_box:before{
	content:'';
	background:url(../images/download_ico.png)no-repeat;
	width:40px; height:40px;
	position: absolute;
	right:10px;top:10px;
}
.content_02 .box .qr_box img{
	width:100px;
	padding:5px;
	border:1px solid #ddd;
}
.content_02 .box .qr_box p{
	margin-left:20px;
	font-weight: 800;
	font-size:20px;
}
.content_02 .box .qr_box .ios,.content_02 .box .qr_box .android{
	position: relative;
}
.content_02 .box .qr_box p:before{
	content:'';
	width:50px; height:50px;	
	position: absolute;
	top: -52px;
    left: -8px;	
}
.content_02 .box .qr_box .ios:before{
	background:url(../images/ios_ico.png) no-repeat;
	background-size:contain;
}
.content_02 .box .qr_box .android:before{
	background:url(../images/and_ico.png) no-repeat;
	background-size:contain;
}
.content_02 .box>ul>li:nth-child(2),.content_02 .box>ul>li:nth-child(3){
	position: relative;
}
.content_02 .box>ul>li:nth-child(2) img{
    position: absolute;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 29%);
}
.content_02 .box>ul>li:nth-child(3) ul>li:first-child{
	width:50%;
	padding:70px 0px;
}
.content_02 .box>ul>li:nth-child(3) ul>li:last-child{
	text-align: center;
}

/*section 03*/
.content_03{
	background:#225DA0;
	padding:150px 0px;
	color:#fff;
}
.content_03 ul{
	display: flex;	
	justify-content: space-between;
}
.content_03 ul h2{
	font-size:48px;
	font-weight: 800;
}
.content_03 ul p{
	margin-top:40px;
	max-width:600px;
	font-size:20px;
	line-height: 30px;
	word-break: keep-all;
	font-weight: 100;	
}
.content_03 ul span{
	display: block;
	font-weight: 300;
	margin-top:20px;
}
.content_03 ul span a{
	color:#fff;
}
.content_03 ul span a:hover{
	text-decoration: underline;
}


/*Tablet**************************************************************************************************/
@media (max-width: 1200px) {
	nav ul li{
		padding:0px 25px;
	}
	.content_in{
		padding: 0px 20px;
    	box-sizing: border-box;
	}
	.content_01 .content_in{
		 margin: 100px auto;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.content_01 .text_area{
		position: relative;
		font-size: 26px;
		color: #3C3C3C;
		display: grid;
		flex-direction: row;
		justify-content: space-between;
		align-items: start;
		grid-template-columns: 1fr 1fr;
		margin-right:10px;
	}
	#main_content .main .txt{
		top: 40%;
    	right:17%;
	}
	#main_content .main .txt h2{
		font-size: 30px;
		color: #EED91E;
		font-weight: bold;
		line-height: 33px;
	}
	.content_01 .text_area h1{
		font-size: 52px;
        line-height: 51px;
	}
	.content_01 .text_area p{
		font-size:18px;
	}
	#main_content .main .txt p{
		font-size: 18px;
	}
	.content_01 .text_area .main_sub_img{
		margin-top:0px;
	}
	.content_01 .text_area .main_sub_img li:first-child img{
		left: 0;top: 0px;
		z-index: 1;
	}
	.content_01 .text_area .main_sub_img li:nth-child(2) img{
		left: 91px;top: 132px;
		width: 60%;
	}
	.content_01 .text_area .main_sub_img li:last-child img{
		right: 0px; width: 39%; top: 51px;
		z-index: 1;
	}
	.content_01 .info_area{
		width:100%;
		margin-top:50px;
	}
	.content_01 .info_area ul li:nth-child(4){
		grid-column: 1 / 3;
	}
	.content_02 .title h3{
		font-size:30px;
	}
	.content_02 .title p{
		font-size:16px;
	}
	.content_02 .box>ul{
		display: grid;
   		grid-template-columns: 1fr 1fr;
	}
	.content_02 .box>ul>li{
		max-width:100%;
	}
	.content_02 ul li:nth-child(3){
		grid-column: 1 / span 2;
	}
	.content_03{
		padding:130px 0px;
	}

	.content_03 ul p{
		font-size: 18px;
		line-height: 28px;
		max-width: 500px;
		margin-top: 10px;
	}	
	
}


/*mobile**************************************************************************************************/
@media (max-width:767px) {
	
	#main_content .main .txt{
		top: 44%;
        right:24%;
		text-align: left;
	}
	#main_content .main.eng .txt{
		top: 44%;
        right:11%;
		text-align: left;		
	}
	#main_content .main .txt h2{
		font-size: 36px;
        line-height:40px;
	}
	#main_content .main .txt p{
        font-size: 18px;
        word-break: keep-all;
        max-width: 200px;
		line-height:28px;
	}
	.content_01 .text_area h1{
		font-size: 35px;
        line-height: 36px;
	}
	.content_01 .text_area p{
        font-size: 17px;
        word-break: keep-all;
        max-width: 180px;
	}
	.content_01 .info_area ul{
		display: flex;
    	flex-direction: column;
	}
	.content_01 .info_area ul li{
		width:100%;
		min-height:370px;
	}
	.content_01 .info_area img{
		width:25%;
		right:30px; bottom:30px;
	}
	.content_02 .box>ul>li:nth-child(2) img{
		transform: translate(-50%, 16%);
	}
	.content_01 .text_area .main_sub_img li:first-child img{
		left: 0;
        top: 0px;
        width: 50%;
	}
	.content_01 .text_area .main_sub_img li:nth-child(2) img{
		left: 29px;
        top: 110px;
        width: 80%;
	}
	.content_01 .text_area .main_sub_img li:last-child img{
		right: 0px;
        width: 39%;
        top: 51px;
        z-index: 1;
	}
	.content_02 .title h3{
		font-size:25px;
	}
	.content_02 .title p{
		font-size:17px;
		margin-top:10px;
	}
	.content_02 .box>ul{
		display: flex;
		flex-direction: column;
	}
	.content_02 .box>ul>li{
		width:100%;
		box-sizing: border-box;
	}
	.content_02 .box h3{
		font-size:25px;
	}
	.content_02 .box p{
		font-size:16px;
	}
	.content_03{
		padding:80px 0px;
	}
	.content_03 ul{
		flex-direction: column;
	}
	.content_03 ul h2{
		font-size:36px;
	}
	.content_03 ul p{
		max-width:100%;
		font-size:16px;
		line-height: 25px;
	}
	.content_03 img{
		margin: 0 auto;
    	margin-top: 44px;
	}
	
	
	
}