@CHARSET "UTF-8";

/* CSS Document */

/* ------------------------------------------------------------
 * Name      : sub.css
 * Desc       :SUCC Homepage
 * Created   : 2024/06/26 by NRI
 * Updated   :
------------------------------------------------------------ */
/*공통*/
main{
	font-size:20px;
	color:#444;
}
.sub_bg {
	color:#fff;
	display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
}
.sub_bg h1{
	font-size: 64px;
	font-weight: 900;
	margin-top:-50px;
}
.sub_bg p{
	font-size:36px;
}
.content_in{
	width:1400px;
	max-width:100%;
	margin:0 auto;
	padding:100px 20px;
}
.content_in h1{
	font-size:55px;
	color:#000;
	font-weight: 900;
}
.content_in .title h3{
	color:#000;
	font-size:40px;
	line-height: 55px;
}
.content_in .title p{
	font-size:20px;
	line-height: 30px;
	color:#444
}
/*서비스정보*/
.info .sub_bg{
	background:url(../images/sub_top_img_01.png) center/cover no-repeat;
	width:1920px; height:400px;
	max-width: 100%; max-height: 100%;
}
.info .content_in > h1{
	font-size:55px;
	line-height: 55px;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	color:#1972F5;
}
.info .content_in > p{
    font-size: 20px;
	line-height:30px;
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
    word-break: keep-all;
    margin-top: 30px;
}
.info .button_area{
    display: flex;
    align-items: center;
    margin: 30px 0px;
    gap: 20px;
    justify-content: center;
}
.info .button_area button{
	border:1px solid #D4D4D4;
	padding:15px 20px;
	font-size:18px;
	color:#222;
	display: flex;
    align-items: center;
    min-width: 280px;
    justify-content: center;
}
.info .button_area button:hover{
	background:#ECF4FF;
}
.info .button_area .download_btn.app:before{
	content:'';
	background:url(../images/ios_ico.png) no-repeat;
	padding-right:5px;
	width:50px; height:50px;
	background-size:contain;
}
.info .button_area .download_btn.play:before{
	content:'';
	background:url(../images/and_ico.png) no-repeat;	
	padding-right:5px;
	width:50px; height:50px;
	background-size:contain;
}
.info .qr_area{
	display: flex;
	justify-content: center;
}
.info .qr_area .qr_box{
	display: flex;
    flex-direction: column;
    align-items: center;
	font-size:18px;
}
.info .qr_area .qr_box img{
	width:50%;
	border:1px solid #ccc;
}
.info .info_area ul{
	margin:150px 0px;
	display: flex;
    align-items: center;
    justify-content: space-around;
}
.info .info_area ul:last-child{
    display: flex;
    text-align: right;
    flex-direction: row-reverse;
}
.info .info_area ul h2{
	font-size:34px;
	color:#000;
	font-weight: 800;
}
.info .info_area ul p{
	font-weight: 200;
	font-size:20px; 
	color:#444;
	margin-top:10px;
	max-width: 400px;
	display: inline-block;
}
.info .info_area ul img{
	width:770px; height:406px;
}
.info .info_area ul small{
	display: block;
	font-size:15px;
    margin-top: 10px;
    display: block;
	color:#666;
}
.info .content_02{
	background:#ECF4FF;
}
.info .content_02 .box ul{
    display: flex;    
  	justify-content: space-around;
    margin: 40px 0px;
}
.info .content_02 .box ul li{
	background:#fff;
	border:1px solid #ddd;
	min-width:23.333%; min-height: 325px;
	max-width: 100%; max-height: 100%;
	font-size:20px;
	display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
}
.info .content_02 .box ul li img{
	margin-top:-40px;
}
.info .content_02 .box ul li p{
	position: absolute;
	bottom:30px;
}
.info .content_02 .purchase{
	margin-top:130px;
	text-align: center;
}
.info .content_02 .purchase p {
	margin:0 auto;
	font-size:20px;
}
.info .content_02 .purchase .blue{
	color:#1972F5;
}
.info .content_02 .purchase ul{
	display: grid;
    justify-content: space-around;
	place-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 40px;
	row-gap: 40px;
    margin-top: 40px;
	flex-wrap: wrap;
}
.info .content_02 .purchase ul li{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	flex: 1;
	min-width: 240px;
	max-width: 270px;
}
.info .content_02 .purchase ul li button{
	font-size: 16px;
	/* border-radius: 6px; */
	color: #47658f;
	border: 1px solid #6d8db9;
	background-color: #daeaff;
	width: 70%;
	height: 32px;
	margin-top: 12px;
	transition: 0.25s;
}
.info .content_02 .purchase ul li button:hover{
	background-color: #cfe3ff;
}
.info .content_02 .purchase ul li:nth-child(3) button{
	pointer-events : none;
	border: none;
	background-color: #e6e6e6;
}
.info .content_02 .purchase ul li:nth-child(3) button:hover{
	background-color: #9a9da0;;
}
.info .content_02 .purchase ul li p{
	font-size: 17px;
}
.info .content_03 ul {
	display: flex;
	flex-wrap: wrap;
	gap:70px 50px;
	margin:30px 0px;
	justify-content: space-between;
}
.info .content_03 ul li{
	width:160px; height: 160px;
	text-align: center;
	word-break: keep-all;
}
.info .content_03 ul li img{
	width:100px; height:100px;
	border:1px solid #ccc;
	padding:20px;
	border-radius: 80px;
}
.info .content_03 ul li p{
	margin-top:10px;
}
/*about*/
.about .sub_bg{
	background:url(../images/sub_top_img_02.png) center/cover no-repeat;
	width:1920px; height:400px;
	max-width: 100%; max-height: 100%;	
}
.about .info_area{
	margin-top:50px;
	position: relative;
}
.about .info_area .sign{
	position: absolute;
	right:50px;bottom:0;
}
.about .info_area ul{
	display: flex;
	gap:50px;
}
.about .info_area ul h2{
	color:#1972F5;
	font-size:40px;
	margin-bottom:10px;
}
.about .about_box{
	margin-top:160px;
	padding:50px;
	background:#F2F2F2;
	word-break: keep-all;
}
.about .about_box p{
	margin-top:20px;
	line-height: 32px;
}
.about .about_box b{
	font-weight: normal;
	color:#1972F5;
}
/*help*/
.help .sub_bg{
	background:url(../images/sub_top_img_03.png) center/cover no-repeat;
	width:1920px; height:400px;
	max-width: 100%; max-height: 100%;	
}
.help .qna{
	margin-top:30px;
}
.help .qna dt{
	position: relative;
	font-weight: 600;
	padding:5px 0px 5px 60px;
}
.help .qna dt:before{
	position: absolute;
	left:15px; top:0px;
	content:'';
	background:url(../images/q_ico.png)no-repeat;
	width:40px; height:40px;
}
.help .qna dd{
	padding:30px;
	background:#F2F2F2;
	margin:20px; 
	box-sizing: border-box;
	word-break: keep-all;
}
/*carrer*/
.carrer .sub_bg{
	background:url(../images/sub_top_img_04.png) center/cover no-repeat;
	width:1920px; height:400px;
	max-width: 100%; max-height: 100%;	
}
.carrer .content_in{
	margin:0 auto;
	text-align: center;
}
.carrer .content_in h1{
	color:#1972F5;
	padding:30px 0px;
	text-transform: uppercase;
}
.carrer .content_in p{
	max-width:1000px;
	word-break: keep-all;
	margin:0 auto;
}
.carrer .content_in span{
	padding:50px 0px;
	font-weight: 600;
	display: inline-block;
}
.carrer .content_in span a:hover{
	text-decoration: underline;
}
/*Policy*/
.table_info {
	width: 500px;
	height: 30px;
	border: 1px solid #000;
	padding: 5px;
}

.a_policy:link, .a_policy:visited, .a_policy:hover, .a_policy:active {
	color: blue;
}

/*Rule*/
.rule .sub_bg{
	background:url(../images/sub_top_img_05.png) center/cover no-repeat;
	width:1920px; height:400px;
	max-width: 100%; max-height: 100%;	
}
.p_list_st > li:first-child{
	font-weight: bold;
	padding:30px 0px 10px;
}
.p_list_st02 > li:first-child{
	margin-bottom:5px;
	font-weight: bold;
}
/*Tablet**************************************************************************************************/
@media (max-width: 1200px) {
	/*공통*/
	main{font-size:18px;}
	.sub_bg h1{font-size:45px;}
	.sub_bg p{font-size:30px;}
	.content_in{
		width:1200px;
		max-width:100%;
		margin:0 auto;
		padding:80px 40px;
		overflow: hidden;
		box-sizing: border-box;
	}
	.content_in h1{
		font-size:40px;
	}
	.content_in .title h3{
		font-size:35px;
	}
	.content_in .title p{
		font-size:18px;
		word-break: keep-all;
		line-height: 25px;
	}

	/*서비스정보*/
	.info .content_in > h1{
		font-size:45px;
		line-height: 45px;
	}
	.info .content_in > p{
		font-size:18px;
		max-width:450px;
	}
	.info .info_area ul {
		justify-content: space-evenly;
		 margin: 100px 0px;
	}
	.info .info_area ul img{
		width:500px; height:264px;
	}
	.info .info_area ul h2 {
		font-size:30px;
	}
	.info .info_area ul p{
		font-size:18px;
	}
	.info .content_02 .box ul{
		display: grid;
   		 grid-template-columns: 1fr 1fr;
		gap:10px;
	}
	.info .content_02 .box ul li p {
		position: absolute;
		bottom: 17px;
		font-size: 18px;
	}
	.info .content_02 .box ul li{
		min-width: 250px;
		min-height: 250px;
	}
	.info .content_02 .box ul li img{
		width:200px; 
		height:200px;
	}
	.info .content_02 .purchase{
		margin-top:100px;
	}
	.info .content_02 .purchase ul{
		grid-template-columns: 1fr 1fr;
		margin-top:70px;
		column-gap: 60px;
	}
	.info .content_02 .purchase ul li{
		min-width: 270px;
	}
	.info .content_02 .purchase ul li:nth-child(2n-1){
		justify-self: end;
	}
	.info .content_02 .purchase ul li:nth-child(2n){
		justify-self: start;
	}
	.info .content_02 .purchase ul img{
		width:70%;
	}
	.info .content_03 ul {
		display: flex;
        gap: 70px 5%;
        margin: 30px 0px;
        justify-content: space-between;
        flex-wrap: wrap;
	}
	/*about*/
	.about .info_area ul h2{
		font-size:32px;
	}
	.about .about_box p{
		line-height:28px;
	}
}


/*mobile**************************************************************************************************/
@media (max-width:767px) {
	/*공통*/
	main{font-size:16px;}
	.sub_bg h1{font-size:40px;}
	.sub_bg p{font-size:20px;}
	.content_in{
		width:767px;
		max-width:100%;
		margin:0 auto;
		padding:60px 20px;
		overflow: hidden;
		box-sizing: border-box;
	}
	.content_in .title h3{
		font-size:27px;
	}
	.content_in .title p{
		font-size:18px;
		word-break: keep-all;
	}
	.content_in h1{
		font-size:30px;
	}
	/*서비스정보*/
	.info .content_in > h1{
		font-size: 30px;
		line-height: 30px;
	}
	.info .qr_area{
		margin:40px 0px;
		justify-content: center
	}
	.info .content_in > p{
		font-size: 16px;
        line-height: 22px;	
	}
	.info .button_area{
		display: flex;
		align-items: center;
		margin: 30px 0px;
		gap: 20px;
		justify-content: center;
		flex-direction: column;
	}
	.info .button_area button{
		padding:10px 15px;
		min-width: 260px;
		font-size:16px;
	}
	.info .info_area ul,.info .info_area ul:last-child{
		flex-direction: column-reverse;
		text-align: center;
	}
	.info .info_area ul h2 {
		font-size:24px;
		margin-top:20px;
	}
	.info .info_area ul p{
		font-size:16px;
		max-width: 350px;
	}
	.content_in .title p{
		font-size: 16px;
        word-break: keep-all;
        line-height: 24px;
    }
	.info .content_02 .box ul{
		justify-content: space-between;
		gap:10px;
		flex-wrap: wrap;
	}
	.info .content_02 .box ul li{
		min-width: 100%;
        min-height: 250px
	}
	.info .content_02 .box ul li p{
		font-size:16px;
	}
	.info .content_02 .purchase{
		margin-top:80px;
	}
	.info .content_02 .purchase p{
		font-size:20px;
	}
	.info .content_02 .purchase ul {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}
	.info .content_02 .purchase ul li {
		min-width: 100%;
	}
	.info .content_02 .purchase ul li p,
	.info .content_02 .purchase ul li button{
		font-size:13px;
	}
	.info .content_03 ul{
		gap:43px 3%;
		justify-content: space-evenly;
	}
	.info .content_03 ul li img{
		width:100px; height:100px;
	}
	.about .info_area ul{
		flex-direction: column;
	}
	.about .info_area ul h2{
		font-size:24px;
	}
	.about .info_area .sign{
		width:66px; height:28px;
	}
	.about .about_box{
		padding:30px;
	}
	.help .qna dt:before{
		top:-5px;
		width:30px; height:30px;
		background-size:contain;
	}
	.help .qna dt{
		padding:0px 50px;
	}
	
}