@charset "utf-8";

/* SECTION 1 */
.s-1 { position:relative; width:100%; max-width:1720px; margin:200px auto 140px auto; }
.s-1 > .title { position:relative; }
.s-1 > .title::after { content:''; display:table; clear:both; }
.s-1 > .title > .left { float:left; width:350px; font-size:24px; font-family:'Funnel',sans-serif; line-height:22px; margin-top:40px; }
.s-1 > .title > .left > svg { height:23px; fill:#fff; margin-bottom:-3px; margin-right:5px; }
.s-1 > .title > .right { float:right; width:calc(100% - 350px); }
.s-1 > .title > .right > .slogan { font-size:95px; font-weight:500; font-family:'Funnel',sans-serif; line-height:105px; }
.s-1 > .title > .right > .slogan > img { height:84px; margin-bottom:-12px; }
.s-1 > .title > .right > .text { font-size:21px; line-height:31px; margin-top:50px; }

/* TYPE-1 */
@media only screen and (max-width:1819px) {
	.s-1 { width:calc(100% - 60px); margin:185px auto 130px auto; }
	.s-1 > .title > .left { width:320px; font-size:22.5px; line-height:22.5px; margin-top:38px; }
	.s-1 > .title > .left > svg { height:22px; }
	.s-1 > .title > .right { width:calc(100% - 320px); }
	.s-1 > .title > .right > .slogan { font-size:92.5px; line-height:100px; }
	.s-1 > .title > .right > .slogan > img { height:82px; margin-bottom:-11px; }
	.s-1 > .title > .right > .text { font-size:19px; line-height:27px; margin-top:65px; }
}

/* TYPE-2 */
@media only screen and (max-width:1439px) {
	.s-1 { width:calc(100% - 40px); margin:165px auto 100px auto; }
	.s-1 > .title > .left { width:280px; font-size:20.5px; line-height:20.5px; margin-top:32px; }
	.s-1 > .title > .left > svg { height:20px; margin-right:4px; }
	.s-1 > .title > .right { width:calc(100% - 280px); }
	.s-1 > .title > .right > .slogan { font-size:80px; line-height:86px; }
	.s-1 > .title > .right > .slogan > img { height:65px; margin-bottom:-9px; }
	.s-1 > .title > .right > .text { font-size:17px; line-height:25px; margin-top:50px; }
	.s-1 > .title > .right > .text > br { display:none; }
}

/* TYPE-3 */
@media only screen and (max-width:1023px) {
	.s-1 { width:calc(100% - 20px); margin:125px auto 75px auto; }
	.s-1 > .title > .left { width:200px; font-size:18px; line-height:18px; margin-top:20px; }
	.s-1 > .title > .left > svg { height:17px; margin-bottom:-2px; margin-right:3px; }
	.s-1 > .title > .right { width:calc(100% - 200px); }
	.s-1 > .title > .right > .slogan { font-size:50px; line-height:56px; }
	.s-1 > .title > .right > .slogan > img { height:45px; margin-bottom:-7px; }
	.s-1 > .title > .right > .text { font-size:14.5px; line-height:20px; margin-top:35px; }
}

/* TYPE-4 */
@media only screen and (max-width:767px) {
	.s-1 { width:calc(100% - 10px); margin:90px auto 50px auto; }
	.s-1 > .title > .left { width:100%; font-size:14.5px; line-height:14.5px; margin-top:0; }
	.s-1 > .title > .left > svg { height:13px; margin-bottom:-1px; margin-right:2px; }
	.s-1 > .title > .right { width:100%; margin-top:25px; }
	.s-1 > .title > .right > .slogan { font-size:37.5px; line-height:42px; }
	.s-1 > .title > .right > .slogan > img { height:30px; margin-bottom:-3px; }
	.s-1 > .title > .right > .text { font-size:12.5px; line-height:17px; margin-top:20px; }
}

/* SECTION 2 */
.s-2 { position:relative; width:100%; max-width:1720px; margin:120px auto 0 auto; overflow:hidden; }
.s-2 > ul { width:calc(100% + 30px); margin-left:-15px; }
.s-2 > ul::after { content:''; display:table; clear:both; }
.s-2 > ul > li { position:relative; float:left; width:calc(33.33% - 30px); height:550px; border-radius:30px; margin:15px; overflow:hidden; }
.s-2 > ul > li:nth-child(1) { background:#fff; }
.s-2 > ul > li:nth-child(2) { background:#9f8be5; }
.s-2 > ul > li:nth-child(3) { background:#ffcd00; }
.s-2 > ul > li > .image { position:absolute; top:50px; left:50px; }
.s-2 > ul > li > .image > img { height:170px; }
.s-2 > ul > li > .title-box { position:absolute; bottom:50px; left:50px; }
.s-2 > ul > li > .title-box > .title { font-size:55px; font-weight:600; font-family:'Funnel',sans-serif; line-height:55px; }
.s-2 > ul > li > .title-box > .text { font-size:20px; font-weight:400; line-height:28px; color:#141414; margin-top:22px; }

/* TYPE-1 */
@media only screen and (max-width:1819px) {
	.s-2 { width:calc(100% - 60px); margin:110px auto 0 auto; }
	.s-2 > ul > li { height:510px; }
	.s-2 > ul > li > .image { top:45px; left:45px; }
	.s-2 > ul > li > .image > img { height:160px; }
	.s-2 > ul > li > .title-box { bottom:45px; left:45px; }
	.s-2 > ul > li > .title-box > .title { font-size:50px; line-height:50px; }
	.s-2 > ul > li > .title-box > .text { font-size:19px; line-height:27px; margin-top:20px; }
}

/* TYPE-2 */
@media only screen and (max-width:1439px) {
	.s-2 { width:calc(100% - 40px); margin:95px auto 0 auto; }
	.s-2 > ul { width:calc(100% + 20px); margin-left:-10px; }
	.s-2 > ul > li { width:calc(33.33% - 20px); height:460px; border-radius:20px; margin:10px; }
	.s-2 > ul > li > .image { top:40px; left:40px; }
	.s-2 > ul > li > .image > img { height:130px; }
	.s-2 > ul > li > .title-box { bottom:40px; left:40px; }
	.s-2 > ul > li > .title-box > .title { font-size:45px; line-height:45px; }
	.s-2 > ul > li > .title-box > .text { font-size:17px; line-height:24px; margin-top:18px; }
}

/* TYPE-3 */
@media only screen and (max-width:1023px) {
	.s-2 { width:calc(100% - 20px); margin:70px auto 0 auto; }
	.s-2 > ul { width:calc(100% + 10px); margin-left:-5px; }	
	.s-2 > ul > li { width:calc(50% - 10px); height:300px; border-radius:10px; margin:5px; }
	.s-2 > ul > li:first-child { width:calc(100% - 10px); }
	.s-2 > ul > li > .image { top:35px; left:30px; }
	.s-2 > ul > li > .image > img { height:100px; }
	.s-2 > ul > li > .title-box { bottom:35px; left:30px; }
	.s-2 > ul > li > .title-box > .title { font-size:37px; line-height:37px; }
	.s-2 > ul > li > .title-box > .text { font-size:14.5px; line-height:20px; margin-top:15px; }
}

/* TYPE-4 */
@media only screen and (max-width:767px) {
	.s-2 { width:calc(100% - 10px); margin:50px auto 0 auto; }
	.s-2 > ul { width:100%; margin-left:0; }
	.s-2 > ul > li { width:100%; height:228px; margin:5px 0; }
	.s-2 > ul > li:first-child { width:100%; }
	.s-2 > ul > li > .image { top:25px; left:20px; }
	.s-2 > ul > li > .image > img { height:70px; }
	.s-2 > ul > li > .title-box { bottom:27px; left:20px; }
	.s-2 > ul > li > .title-box > .title { font-size:32px; line-height:32px; }
	.s-2 > ul > li > .title-box > .text { font-size:12.5px; line-height:18px; margin-top:12px; }
}

/* SECTION 3 */
.s-3 { position:relative; width:100%; max-width:1720px; margin:120px auto 0 auto; }
.s-3 > .title-box { position:sticky; float:left; width:590px; top:130px; box-sizing:border-box; }
.s-3 > .title-box > .title { font-size:65px; font-weight:800; font-family:'Funnel',sans-serif; line-height:70px; }
.s-3 > .title-box > .text { font-size:20px; font-weight:400; line-height:28px; color:#909090; margin-top:40px; }
.s-3 > .content { position:relative; float:left; width:calc(100% - 590px); }
.s-3 > .content > .question { position:relative; padding:40px 20px; font-size:20px; border-bottom:2px solid #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; cursor:pointer; }
.s-3 > .content > .question:first-child { border-top:2px solid #fff; }
.s-3 > .content > .question > .arrow { position:absolute; top:50%; right:25px; transform:translate(0, -50%); }
.s-3 > .content > .question > .arrow i { font-size:18px; }
.s-3 > .content > .question > .arrow > .arrow-top { display:none; font-weight:900; }
.s-3 > .content > .question > .arrow > .arrow-bottom { display:block; font-weight:900; }
.s-3 > .content > .question.on > .arrow > .arrow-bottom { display:none;}
.s-3 > .content > .question.on > .arrow > .arrow-top { display:block; }
.s-3 > .content > .answer { display:none; overflow:hidden; font-size:18px; line-height:24px; color:#909090; border-bottom:2px solid #fff; padding:40px 30px; box-sizing:border-box; }

/* TYPE-1 */
@media only screen and (max-width:1819px) {
	.s-3 { width:calc(100% - 65px); margin:110px auto 0 auto; }
	.s-3 > .title-box { width:550px; top:120px; }
	.s-3 > .title-box > .title { font-size:63px; line-height:63px; }
	.s-3 > .title-box > .text { font-size:19px; line-height:27px; margin-top:38px; }
	.s-3 > .content { width:calc(100% - 550px); }
	.s-3 > .content > .question { padding:38px 60px 38px 18px; font-size:19px; }
	.s-3 > .content > .question > .arrow i { font-size:17px; }	
	.s-3 > .content > .question > .arrow { right:22px; }
	.s-3 > .content > .answer { font-size:17px; line-height:23px; padding:38px 28px; }
}

/* TYPE-2 */
@media only screen and (max-width:1439px) {
	.s-3 { width:calc(100% - 40px); margin:95px auto 0 auto; }
	.s-3 > .title-box { width:505px; top:100px; }
	.s-3 > .title-box > .title { font-size:59px; line-height:59px; }
	.s-3 > .title-box > .text { font-size:17.5px; line-height:24px; margin-top:34px; }
	.s-3 > .content { width:calc(100% - 505px); }
	.s-3 > .content > .question { padding:34px 55px 34px 17px; font-size:17.5px; }
	.s-3 > .content > .question > .arrow i { font-size:15.5px; }	
	.s-3 > .content > .question > .arrow { right:22px; }
	.s-3 > .content > .answer { font-size:15.5px; line-height:22px; padding:34px 24px; }
}
	
/* TYPE-3 */
@media only screen and (max-width:1023px) {
	.s-3 { width:calc(100% - 20px); margin:70px auto 0 auto; }
	.s-3 > .title-box { position:relative; width:100%; top:auto; padding-bottom:0; }
	.s-3 > .title-box::after { content:''; display:table; clear:both; }
	.s-3 > .title-box > .title { float:left; font-size:50px; line-height:50px; }
	.s-3 > .title-box > .text { float:left; font-size:14.5px; line-height:20px; margin:58px 0 0 30px; }
	.s-3 > .content { width:100%; margin-top:52px; }
	.s-3 > .content > .question { padding:27px 50px 27px 15px; font-size:15px; }
	.s-3 > .content > .question > .arrow i { font-size:13px; }	
	.s-3 > .content > .question > .arrow { right:20px; }
	.s-3 > .content > .answer { font-size:14px; line-height:20px; padding:27px 17px; }
}

/* TYPE-4 */
@media only screen and (max-width:767px) {
	.s-3 { width:calc(100% - 10px); margin:50px auto 0 auto; }
	.s-3 > .title-box > .title { float:none; width:100%; font-size:37.5px; line-height:37.5px; }
	.s-3 > .title-box > .title > br { display:none; }
	.s-3 > .title-box > .text { float:none; width:100%; font-size:12.5px; line-height:17px; margin:15px 0 0 0; }
	.s-3 > .title-box > .text > br { display:none; }	
	.s-3 > .content { width:100%; margin-top:42px; }
	.s-3 > .content > .question { padding:20px 45px 20px 10px; font-size:13px; }
	.s-3 > .content > .question > .arrow i { font-size:11px; }	
	.s-3 > .content > .question > .arrow { right:15px; }
	.s-3 > .content > .answer { font-size:12px; line-height:17px; padding:20px 10px; }
}