@charset "utf-8";
@import url("./default.css"); 

body { background:url(../images/main/intro_bg.jpg) center top repeat-x; background-size:cover !important; height:100vh; position:relative; }

#main_intro { width:100%; padding: 170px 0 90px; box-sizing:border-box; }

.title { font-family: 'S-CoreDream-6Bold'; font-size:48px; text-align:center; color:#2a2a2a; line-height:48px; margin-bottom: 30px; }
.sub_tit { font-size: 24px; text-align:center; color: #69718c; }

.sidebox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 35px; width: 95%; max-width: 1025px; margin: 70px auto 127px; padding: 0; }

.sidebox .side { display: flex; flex-direction: column; padding: 37px 32px; background-color: #fff; border-radius: 30px; box-sizing: border-box; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.10); }
.sidebox .left { border: 3px solid #c0cdf8; }
.sidebox .right { border: 3px solid #e1cefc; }

.sidebox .side .en span{ padding: 5px 18px; box-sizing: border-box; font-size: 17px; font-weight:bold; border-radius:50px; }
.sidebox .side h2 { font-size:24px; line-height: 1.3; font-weight:400; color: #727272; padding:20px 0 80px; }
.sidebox .side h2 span{ display:block; font-weight: 600; }
.sidebox .side .link { position:relative; display:block; width:100%; border-radius: 100px; padding: 20px 80px 20px 40px; box-sizing:border-box; color:#fff; font-size: 18px; }
.sidebox .side .link::before { content:""; display:block; position:absolute; width: 32px; height:17px; background:url(../images/main/intro_btn.png) left top no-repeat; top:50%; right: 50px; transform:translateY(-50%); 
transition: all 0.3s; }
.sidebox .side .link:hover::before { right: 40px; }

.sidebox .left .en span{ background: #eaeefb; color: #8597d8; }
.sidebox .right .en span{ background: #f1eefd; color: #ac8ce8; }
.sidebox .left h2 { background: url(../images/main/intro_icon01.png) right bottom 20px no-repeat; }
.sidebox .right h2 { background: url(../images/main/intro_icon02.png) right bottom 20px no-repeat; }
.sidebox .left h2 span{ font-size:35px; color: #243d8c;}
.sidebox .right h2 span{ font-size:35px; color: #432271; }
.sidebox .left .link { background: linear-gradient(to right, #5367c7, #808eda); }
.sidebox .right .link { background: linear-gradient(to right, #967dde, #bba2e8); }

.copyright { font-size:16px; text-align:center; color: #515151; word-break:keep-all; }

@media (max-width: 768px) {
body{ height:auto; background: url(../images/main/intro_bg.jpg) left top repeat-x; }

#main_intro { padding: 80px 3% 90px; }
.title { font-size: 28px; word-break:keep-all; margin-bottom: 10px; line-height: 40px; }
.sub_tit { font-size:16px; word-break:keep-all; }

.sidebox { grid-template-columns: 1fr; row-gap: 30px; margin: 50px auto 75px; }

.sidebox .side { padding: 30px 24px; }
.sidebox .side h2 { font-size:20px; padding: 20px 0 20px; }
.sidebox .left h2 { background: none; }
.sidebox .right h2 { background: none; }
.sidebox .side h2 span { font-size: 30px; }

.sidebox .side .en span{ font-size: 14px; }

.sidebox .side .link { padding: 15px 80px 15px 25px; word-break:keep-all; font-size: 16px; }

@media (max-width: 350px) {
	
.sidebox .side { padding: 17px 12px; }
.sidebox .left h2 { font-size: 18px; padding: 20px 5px 20px; }
.sidebox .side h2 span { font-size: 26px; }
.sidebox .side .link { padding: 12px 60px 12px 25px;font-size: 14px; }
	.sidebox .side .link::before{ right: 28px; }
}