@charset 'UTF-8'; /* Our Program --------------------------------------- */ .kv { position: relative; margin: 0 0 75px; padding: 495px 0 75px; background: #fafafa; } .kv:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 480px; background: url("/en/glopac/assets/img/participants/bg_kv_03.jpg") no-repeat center; background-size: cover; } .kv .note { margin: 0 0 50px; font-size: 1.2em; text-align: center; } .kv h1 { margin: 0 0 40px; font-size: 8em; line-height: 1; text-align: center; } .kv .lead { max-width: 940px; margin: 0 auto 62px; padding: 0 20px; font-size: 2em; line-height: 1.6; box-sizing: border-box; } .kv ul { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1330px; margin: 0 auto 75px; padding: 0 20px; box-sizing: border-box; } .kv ul li { width: 30.2325%; margin: 0 0 75px; } .kv ul li .img { margin: 0 0 0 30px; } .kv ul li .txtBox { position: relative; margin: -30px 30px 0 0; padding: 20px 32px 45px; background: #fff; filter: drop-shadow(0 0 20px rgba(0,0,0,0.1)); z-index: 2; } .kv ul li .txtBox h3 { font-size: 3.0em; font-weight: 100; } .kv ul li .txtBox .date { margin: 14px 0 20px; font-size: 1.6em; font-weight: 700; } .kv ul li .txtBox .txt { min-height: 78px; margin: 0 0 30px; font-size: 1.6em; line-height: 1.625; } .kv ul li .btn { width: 210px; margin: 0 auto; } .kv ul li .btn a { display: block; padding: 11px 0; color: #fff; font-size: 1.4em; text-align: center; border: 1px solid #0a3c8c; background: #0a3c8c; } .kv ul li .btn a:hover { color: #0a3c8c; background: #fff; opacity: 1; } .kv .btn02 { width: 285px; margin: 0 auto; } .kv .btn02 a { display: block; padding: 17px 0; color: #fff; font-size: 1.6em; text-align: center; border: 1px solid #0a3c8c; background: #0a3c8c; } .kv .btn02 a:hover { color: #0a3c8c; background: #fff; opacity: 1; } .bank { max-width: 1480px; margin: 0 auto 50px; padding: 0 20px; color: #fff; box-sizing: border-box; } .bank .inner { position: relative; padding: 75px 10.46% 150px; background: #003ea0; background: -moz-linear-gradient(top left, #2ba5dc 0%, #003ea0 100%); background: -webkit-gradient(linear, left top, right bottom, from(#2ba5dc), to(#003ea0)); background: -webkit-linear-gradient(top left, #2ba5dc 0%, #003ea0 100%); background: -o-linear-gradient(top left, #2ba5dc 0%, #003ea0 100%); background: -ms-linear-gradient(top left, #2ba5dc 0%, #003ea0 100%); background: linear-gradient(to bottom right, #2ba5dc 0%, #003ea0 100%); } .bank h2 { position: relative; margin: 0 0 140px; font-size: 4.8em; font-weight: 100; line-height: 1; } .bank h2:before { content: ''; position: absolute; top: 0; left: -75px; width: 5px; height: 120px; background: #fff; } .bank .lead { margin: 0 0 76px; font-size: 2em; line-height: 1.6; } .bank .box { display: flex; align-items: center; background: rgba(255,255,255,0.05); } .bank .box .img { width: 36.85%; } .bank .box .txtBox { width: 50%; margin: 0 6.57%; } .bank .box .txtBox h3 { font-size: 3em; font-weight: 500; } .bank .box .txtBox .date { max-width: 390px; margin: 10px 0 20px; padding: 11px 0; font-size: 1.4em; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .bank .box .txtBox .txt { margin: 0 0 35px; font-size: 1.6em; line-height: 1.625; } .bank .box .txtBox .btn { width: 210px; } .bank .box .txtBox .btn a { display: block; padding: 12px 0; color: #fff; font-size: 1.4em; text-align: center; background: #0a3c8c; } .bank .box .txtBox .btn a:hover { color: #0a3c8c; background: #fff; opacity: 1; } .step { max-width: 1330px; margin: 0 auto; padding: 100px 20px 225px; box-sizing: border-box; } .step h2 { position: relative; width: 71.279%; margin: 0 0 140px; padding: 0 0 0 75px; font-size: 4.8em; font-weight: 100; line-height: 1; box-sizing: border-box; } .step h2:before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 120px; background: #0a3c8c; } .step .lead { max-width: 1140px; margin: 0 auto 75px; font-size: 2em; line-height: 1.6; } .step dl { position: relative; display: flex; justify-content: space-between; max-width: 1140px; margin: 0 auto; padding: 65px 0 40px; border-top: 1px solid #111; } .step dl:last-child { border-bottom: 1px solid #111; } .step dl + dl:before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -14px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 14px 14px 0 14px; border-color: #0a3c8c transparent transparent transparent; } .step dl dt { width: 30%; padding: 0 0 0 30px; font-size: 4em; font-weight: 100; line-height: 1; box-sizing: border-box; } .step dl dd { width: 67.5%; } .step dl dd .ttl { margin: 0 0 20px; font-size: 2.8em; font-weight: 700; } .step dl dd .txt { min-height: 160px; font-size: 2em; line-height: 1.6; } .intern { padding: 90px 0 130px; } .intern .img { float: right; width: 45.28%; margin: -90px 0 4.72% 4.72%; } .participants { position: relative; margin: 0 0 260px; padding: 725px 0 175px; background: #f0f0f0; } .participants:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 675px; background: url("/en/glopac/assets/img/participants/bg_participants_01.jpg") no-repeat center; background-size: cover; } .participants .txt { max-width: 1180px; margin: 0 auto; padding: 0 20px; font-size: 2em; line-height: 1.6; box-sizing: border-box; } .participants .bnr { position: absolute; bottom: -130px; left: 0; right: 0; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; filter: drop-shadow(0 0 30px rgba(0,0,0,0.1)); } .participants .bnr a { display: block; padding: 87px 0 87px 75px; color: #0a3c8c; font-size: 4em; font-weight: 700; line-height: 1; border: 1px solid #0a3c8c; background: #fff url("/en/glopac/assets/img/participants/bg_participants_02.jpg") no-repeat right center; background-size: auto 100%; } .participants .bnr span { font-weight: 100; } @media screen and (max-width: 1200px) { .kv { margin: 0 0 55px; padding: 330px 0 55px; } .kv:before { height: 320px; } .kv .note { margin: 0 0 30px; } .kv h1 { margin: 0 0 30px; font-size: 5.5em; line-height: 1; text-align: center; } .kv .lead { margin: 0 auto 40px; font-size: 1.6em; } .kv ul { margin: 0 0 55px; } .kv ul li { margin: 0 0 55px; } .bank { max-width: 1480px; margin: 0 auto 50px; padding: 0 20px; color: #fff; box-sizing: border-box; } .bank .inner { position: relative; padding: 75px 10.46% 150px; } .bank h2 { position: relative; margin: 0 0 100px; padding: 0 0 0 55px; font-size: 3.2em; font-weight: 100; line-height: 1; } .bank h2:before { left: 0; height: 100px; } .bank .lead { margin: 0 0 55px; font-size: 1.6em; } .bank .box .txtBox { padding: 15px 0; } .bank .box .txtBox h3 { font-size: 3em; } .bank .box .txtBox .date { margin: 8px 0 16px; padding: 11px 0; font-size: 1.2em; } .bank .box .txtBox .txt { margin: 0 0 20px; font-size: 1.4em; } .step { padding: 60px 20px 100px; } .step h2 { margin: 0 0 100px; padding: 0 0 0 75px; font-size: 3.2em; } .step h2:before { height: 100px; } .step .lead { margin: 0 auto 55px; font-size: 1.6em; } .step dl { padding: 45px 0 30px; } .step dl dt { padding: 0 0 0 20px; font-size: 3em; } .step dl dd .ttl { margin: 0 0 15px; font-size: 2em; } .step dl dd .txt { min-height: 100px; font-size: 1.6em; line-height: 1.6; } .participants { position: relative; margin: 0 0 180px; padding: 480px 0 120px; background: #f0f0f0; } .participants:before { height: 450px; } .participants .txt { font-size: 1.6em; } .participants .bnr { bottom: -70px; max-width: 800px; } .participants .bnr a { padding: 60px 0 60px 50px; font-size: 3em; } } @media screen and (max-width: 1000px) { .kv ul li { width: 45%; } } @media screen and (max-width: 750px) { .kv { position: relative; padding: 60vw 0 8vw; } .kv:before { width: 100%; height: 52vw; } .kv h1 { margin: 0 0 4vw; font-size: 8vw; } .kv .lead { width: 92vw; max-width: inherit; margin: 0 auto 8vw; padding: 0; font-size: 3.73vw; line-height: 1.6; } .kv ul { display: block; justify-content: space-between; margin: 0 0 12vw; } .kv ul li { width: 76vw; margin: 0 auto 6vw; } .kv ul li .img { margin: 0; } .kv ul li .txtBox { margin: 0; padding: 8vw 8vw 10vw; background: #fff; filter: drop-shadow(0 0 10px rgba(0,0,0,0.05)); } .kv ul li .txtBox h3 { font-size: 6.0 vw; font-weight: 100; line-height: 1; } .kv ul li .txtBox .date { margin: 2vw 0 3.2vw; font-size: 2.66vw; font-weight: 700; } .kv ul li .txtBox .txt { min-height: inherit; margin: 0 0 4.8vw; font-size: 3.2vw; line-height: 1.5; } .kv ul li .btn { width: 52vw; margin: 0 auto; } .kv ul li .btn a { display: block; padding: 4vw 0; color: #fff; font-size: 2.66vw; text-align: center; background: #0a3c8c; } .kv ul li .btn a:hover { color: #0a3c8c; background: #fff; opacity: 1; } .kv .btn02 { width: 76vw; margin: 0 auto; } .kv .btn02 a { display: block; padding: 4vw 0; color: #fff; font-size: 2.66vw; text-align: center; background: #0a3c8c; } .kv .btn02 a:hover { color: #0a3c8c; background: #fff; opacity: 1; } .bank { max-width: inherit; margin: 0 auto 12vw; padding: 0; box-sizing: border-box; } .bank .inner { position: relative; padding: 6vw 4vw 12vw; } .bank h2 { position: relative; margin: 0 0 12vw; padding: 0 0 0 5.6vw; font-size: 6.4vw; font-weight: 100; line-height: 1; } .bank h2:before { left: 0; width: 0.67vw; height: 12vw; } .bank .lead { margin: 0 0 8vw; font-size: 3.73vw; line-height: 1.6; } .bank .box { display: block; background: rgba(255,255,255,0.05); } .bank .box .img { width: 100%; } .bank .box .txtBox { width: 100%; margin: 0; padding: 3.2vw 3.2vw 4.8vw; box-sizing: border-box; } .bank .box .txtBox h3 { font-size: 5vw; font-weight: 700; } .bank .box .txtBox .date { max-width: inherit; margin: 2vw 0 4.8vw; padding: 2vw 0; font-size: 2.93vw; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .bank .box .txtBox .txt { margin: 0 0 4.8vw; font-size: 3.2vw; line-height: 1.625; } .bank .box .txtBox .btn { width: 52vw; margin: 0 auto; } .bank .box .txtBox .btn a { display: block; padding: 4vw 0; color: #fff; font-size: 2.66vw; text-align: center; background: #0a3c8c; } .bank .box .txtBox .btn a:hover { color: #0a3c8c; background: #fff; opacity: 1; } .step { width: 92vw; max-width: inherit; margin: 0 auto; padding: 12vw 0; box-sizing: border-box; } .step h2 { width: 100%; margin: 0 0 12vw; padding: 0 0 0 5.6vw; font-size: 6.4vw; text-align: left; line-height: 1; } .step h2:before { left: 0; width: 0.67vw; height: 12vw; } .step .lead { max-width: inherit; margin: 0 auto 8vw; font-size: 3.73vw; line-height: 1.6; } .step dl { position: relative; display: flex; justify-content: space-between; width: 92%; max-width: inherit; margin: 0 auto; padding: 8vw 0 6.4vw; border-top: 1px solid #111; } .step dl:last-child { border-bottom: 1px solid #111; } .step dl + dl:before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -2vw; display: block; width: 0px; height: 0px; border-style: solid; border-width: 2vw 2vw 0 2vw; border-color: #0a3c8c transparent transparent transparent; } .step dl dt { width: 30%; padding: 0 0 0 4vw; font-size: 5.33vw; font-weight: 100; line-height: 1; box-sizing: border-box; } .step dl dd { width: 67.5%; } .step dl dd .ttl { margin: 0 0 2.66vw; font-size: 4.26vw; font-weight: 700; } .step dl dd .txt { min-height: inherit; font-size: 3.73vw; line-height: 1.6; } .participants { position: relative; margin: 0 0 20vw; padding: 51vw 0 16vw; background: #f0f0f0; } .participants:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 45vw; background: url("/en/glopac/assets/img/participants/bg_participants_01.jpg") no-repeat center; background-size: cover; } .participants .txt { width: 92vw; max-width: inherit; margin: 0 auto; padding: 0; font-size: 3.73vw; line-height: 1.6; box-sizing: border-box; } .participants .bnr { bottom: -10vw; width: 92vw; max-width: inherit; padding: 0; box-sizing: border-box; filter: drop-shadow(0 0 20px rgba(0,0,0,0.1)); } .participants .bnr a { display: block; padding: 4.8vw 0 4.8vw 6.4vw; color: #0a3c8c; font-size: 4.8vw; line-height: 1.12; border: 1px solid #0a3c8c; background: #fff url("/en/glopac/assets/img/participants/bg_participants_02.jpg") no-repeat right center; background-size: auto 100%; } }