@charset 'UTF-8';

/*  top
--------------------------------------- */

.kv {
position: relative;
padding: 500px 0 70px;
}

.kv:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 450px;
background: url("/en/glopac/assets/img/top/bg_kv_01.jpg") no-repeat center;
background-size: cover;
}

.kv .img {
position: absolute;
top: 330px;
right: 0;
padding: 30px;
background: #fff;
}

.kv .inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

.kv .txtBox {
max-width: 670px;
}

.kv .txtBox h1 {
font-size: 8em;
font-weight: 100;
line-height: 1;
}

.kv .txtBox .lead {
margin: 10px 0 20px;
font-size: 3.2em;
font-weight: 100;
}

.kv .txtBox .txt {
font-size: 2.2em;
line-height: 1.46;
}

.topics {
position: relative;
padding: 120px 0 70px;
}

.topics:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 95.28%;
height: 540px;
background: url("/en/glopac/assets/img/top/bg_topics_01.png") no-repeat center;
background-size: cover;
}

.topics .inner {
display: flex;
justify-content: space-between;
position: relative;
max-width: 1330px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
z-index: 2;
}

.topics .left {
width: 47.675%;
}

.topics .right {
width: 47.675%;
padding: 120px 0 0;
}

.topics .left .img a {
display: block;
}

.topics .txtBox {
padding: 48px 75px 75px;
background: #f5f5f5;
}

.topics .txtBox h2 {
font-size: 4.8em;
font-weight: 100;
}

.topics .txtBox .txt {
margin: 10px 0 65px;
font-size: 1.8em;
line-height: 1.67;
}

.topics .txtBox .btn {
width: 285px;
margin: 0 auto;
}

.topics .txtBox .btn + .btn {
margin: 15px auto 0;
}

.topics .txtBox .btn a {
display: block;
padding: 17px 0;
color: #fff;
font-size: 1.6em;
text-align: center;
background: #0a3c8c;
border: 1px solid #0a3c8c;
}

.topics .txtBox .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.topics .overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 10001;
}

.topics .movie {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 640px;
height: 360px;
margin: auto;
z-index: 10002;
}

.topics .movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.topics .movie .popClose {
position: absolute;
top: -60px;
right: 0;
}


.new {
padding: 62px 0 150px;
}

.new h2 {
margin: 0 0 50px;
font-size: 6em;
font-weight: 100;
text-align: center;
}

.new .box {
max-width: 1330px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

.new ul li a {
display: block;
background: #fafafa;
}

.new ul li .txtBox {
padding: 30px 45px 45px;
}

.new ul li .txtBox .tag {
width: 90px;
color: #fff;
font-size: 1em;
line-height: 2;
text-align: center;
background: #555555;
}

.new ul li .txtBox h3 {
margin: 5px 0 22px;
font-size: 3em;
font-weight: 100;
line-height: 1.25;
}

.new ul li .txtBox .txt {
font-size: 1.6em;
line-height: 1.625;
}

.new ul li .txtBox .txt span {
display: block;
font-weight: bold;
}

.new .btn {
width: 285px;
margin: 0 auto;
}

.new .btn a {
display: block;
padding: 17px 0;
color: #fff;
font-size: 1.6em;
text-align: center;
background: #0a3c8c;
border: 1px solid #0a3c8c;
}

.new .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.program {
position: relative;
padding: 40px 20px 150px;
}

.program:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 810px;
background: url("/en/glopac/assets/img/top/bg_program_01.png") no-repeat center;
background-size: cover;
z-index: -1;
}

.program h2 {
margin: 0 0 35px;
color: #fff;
font-size: 6em;
font-weight: 100;
text-align: center;
}

.program .img {
text-align: center;
}

.program .txtBox {
max-width: 1290px;
margin: -75px auto 0;
padding: 75px;
background: #fff;
filter: drop-shadow(0 0 20px rgba(0,0,0,0.1));
box-sizing: border-box;
}

.program .txtBox ul {
display: flex;
justify-content: space-between;
max-width: 920px;
margin: 0 auto;
text-align: center;
}

.program .txtBox ul li .lead {
margin: 25px 0 0;
color: #073c8f;
font-size: 3em;
line-height: 1.2;
}

.program .txtBox ul li .lead span {
display: block;
font-weight: 700;
}

.program .txtBox .txt {
margin: 60px 0;
font-size: 2em;
line-height: 1.6;
}

.program .txtBox .btn {
width: 285px;
margin: 0 auto;
}

.program .txtBox .btn a {
display: block;
padding: 17px 0;
color: #fff;
font-size: 1.6em;
text-align: center;
background: #0a3c8c;
border: 1px solid #0a3c8c;
}

.program .txtBox .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.visit {
padding: 135px 0 150px;
background: #fafafa;
}

.visit .inner {
max-width: 1330px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

.visit h2 {
font-size: 6em;
font-weight: 100;
line-height: 1.4;
text-align: center;
}

.visit .lead {
margin: 0 0 65px;
font-size: 3.2em;
font-weight: 100;
text-align: center;
}

.visit ul {
display: flex;
justify-content: space-between;
margin: 0 0 75px;
}

.visit ul li {
width: 30.2325%;
}

.visit ul li .img {
margin: 0 0 0 30px;
}

.visit ul li .txtBox {
margin: -30px 30px 0 0;
padding: 36px 45px 45px;
background: #fff;
filter: drop-shadow(0 0 20px rgba(0,0,0,0.1));
}

.visit ul li .txtBox h3 {
font-size: 3em;
font-weight: 100;
}

.visit ul li .txtBox .date {
margin: 8px 0 20px;
font-size: 1.6em;
font-weight: 700;
}

.visit ul li .txtBox .txt {
margin: 0 0 30px;
font-size: 1.6em;
line-height: 1.625;
}

.visit ul li .btn {
width: 210px;
margin: 0 auto;
}

.visit ul li .btn a {
display: block;
padding: 11px 0;
color: #fff;
font-size: 1.4em;
text-align: center;
background: #0a3c8c;
border: 1px solid #0a3c8c;
}

.visit ul li .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.visit .btn02 {
width: 285px;
margin: 0 auto;
}

.visit .btn02 a {
display: block;
padding: 17px 0;
color: #fff;
font-size: 1.6em;
text-align: center;
background: #0a3c8c;
border: 1px solid #0a3c8c;
}

.visit .btn02 a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.event {
padding: 130px 20px 210px;
}

.event h2 {
margin: 0 0 65px;
font-size: 6em;
font-weight: 100;
text-align: center;
}

.event .box {
position: relative;
max-width: 1290px;
margin: 0 auto;
color: #fff;
background: #003ea0;
background: -moz-linear-gradient(left, #2ba5dc 0%, #003ea0 100%);
background: -webkit-gradient(linear, left center, right center, from(#2ba5dc), to(#003ea0));
background: -webkit-linear-gradient(left, #2ba5dc 0%, #003ea0 100%);
background: -o-linear-gradient(left, #2ba5dc 0%, #003ea0 100%);
background: -ms-linear-gradient(left, #2ba5dc 0%, #003ea0 100%);
background: linear-gradient(to right, #2ba5dc 0%, #003ea0 100%);
box-sizing: border-box;
}

.event .box .img {
position: absolute;
right: 75px;
bottom: -75px;
z-index: 2;
}

.event .box .img:before {
content: '';
position: absolute;
top: -45px;
left: -45px;
width: 100%;
height: 100%;
background: #fff;
z-index: -1;
}

.event .box .boxInner {
padding: 100px 53.48% 75px 5.814%;
}

.event .box h3 {
font-size: 2.8em;
line-height: 1.15;
}

.event .box ul {
margin: 30px 0 10px;
padding: 5px 0 8px;
border-top: 1px solid #6bc0e7;
border-bottom: 1px solid #6bc0e7;
}

.event .box ul li {
padding: 0 0 0 25px;
font-size: 1.4em;
}

.event .box ul li.map {
background: url("/en/glopac/assets/img/ico_map_01.png") no-repeat left center;
}

.event .box ul li.time {
background: url("/en/glopac/assets/img/ico_time_02.png") no-repeat left center;
}

.event .box .txt {
margin: 0 0 25px;
font-size: 1.6em;
line-height: 1.625;
}

.event .box .btn {
width: 210px;
}

.event .box .btn a {
display: block;
padding: 12px 0;
color: #fff;
font-size: 1.4em;
text-align: center;
background: #0a3c8c;
}

.event .box .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}


@media screen and (max-width: 1550px) {

.kv {
position: relative;
padding: 490px 0 70px;
}

.kv .img {
width: 38.7vw;
padding: 1.93vw;
}

.kv .txtBox {
max-width: 43.22vw;
}

.kv .txtBox h1 {
font-size: 7em;
}

.kv .txtBox .lead {
font-size: 3em;
}

.kv .txtBox .txt {
font-size: 2em;
}

}


@media screen and (max-width: 1200px) {

.kv {
position: relative;
padding: 470px 0 70px;
}

.kv .txtBox {
max-width: 53vw;
}

.kv .txtBox h1 {
font-size: 5em;
}

.kv .txtBox .lead {
font-size: 2em;
}

.kv .txtBox .txt {
font-size: 1.4em;
}

.topics .txtBox {
padding: 32px 25px 50px;
}

.topics .txtBox h2 {
font-size: 3.6em;
}

.topics .txtBox .txt {
margin: 10px 0 45px;
font-size: 1.4em;
}

.new {
padding: 45px 0 100px;
}

.new h2 {
margin: 0 0 35px;
font-size: 4.8em;
}

.program h2 {
font-size: 4.8em;
}

.program .txtBox {
margin: -50px auto 0;
padding: 50px;
}

.program .txtBox ul li .ico {
width: 100px;
margin: 0 auto;
}

.program .txtBox ul li .lead {
font-size: 2em;
}

.program .txtBox .txt {
margin: 40px 0;
font-size: 1.6em;
}

.visit h2 {
font-size: 4.8em;
}

.visit .lead {
margin: 0 0 45px;
font-size: 2.2em;
}

.event h2 {
margin: 0 0 45px;
font-size: 4.8em;
}

.event .box .boxInner {
padding: 90px 53.48% 45px 5.814%
}

.event .box .img {
right: 3.75vw;
bottom: -3.75vw;
width: 40vw;
}

.event .box .img:before {
top: -3.75vw;
left: -3.75vw;
}


}

@media screen and (max-width: 1150px) {

.visit {
padding: 90px 0 100px;
}

.visit ul li .img {
margin: 0 0 0 15px;
}

.visit ul li .txtBox {
margin: -15px 15px 0 0;
padding: 24px 20px 30px
}

.visit ul li .txtBox h3 {
font-size: 2.4em;
}

.visit ul li .txtBox .date {
font-size: 1.4em;
}

.visit ul li .txtBox .txt {
margin: 0 0 20px;
font-size: 1.4em;
}

}



@media screen and (max-width: 1000px) {

.visit ul {
display: block;
}

.visit ul li {
width: 360px;
margin: 0 auto 50px;
}

.visit ul li .img ,
.visit ul li .txtBox {
margin: 0;
}

}



@media screen and (max-width: 750px) {

.kv {
position: relative;
padding: 86vw 0 8vw;
}

.kv:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 62vw;
background: url("/en/glopac/assets/img/top/bg_kv_01_sp.jpg") no-repeat center;
background-size: cover;
}

.kv .img {
position: absolute;
top: 32vw;
right: 0;
width: 80vw;
padding: 4vw;
background: #fff;
box-sizing: border-box;
}

.kv .inner {
max-width: inherit;
margin: 0 auto;
padding: 0 8vw;
box-sizing: border-box;
}

.kv .txtBox {
max-width: inherit;
}

.kv .txtBox h2 {
font-size: 12vw;
font-weight: 100;
line-height: 1;
}

.kv .txtBox .lead {
margin: 1.33vw 0 4.8vw;
font-size: 5.6vw;
font-weight: 100;
}

.kv .txtBox .txt {
font-size: 3.2vw;
line-height: 1.67;
}

.topics {
position: relative;
padding: 8vw 0 28vw;
}

.topics:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 92vw;
height: 80vw;
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%);
}

.topics .inner {
display: block;
position: relative;
max-width: inherit;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
z-index: 2;
}

.topics .left {
width: 84vw;
margin: 0 0 0 auto;
}

.topics .right {
position: relative;
width: 84vw;
margin: 16vw 0 0;
padding: 8vw 0 0;
}

.topics .right:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 92vw;
height: 80vw;
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%);
z-index: -1;
}

.topics .left .img a {
display: block;
}

.topics .txtBox {
position: relative;
padding: 7vw 8vw 9vw;
background: #f5f5f5;
}

.topics .txtBox h2 {
font-size: 6.93vw;
font-weight: 100;
}

.topics .txtBox .txt {
margin: 2vw 0 0;
font-size: 3.2vw;
line-height: 1.67;
}

.topics .txtBox .btn {
position: absolute;
left: 8vw;
bottom: -8vw;
width: 52vw;
}

.topics .right .txtBox .btn {
left: auto;
right: 8vw;
}

.topics .txtBox .btn + .btn {
bottom: -22vw;
margin: 0;
}

.topics .txtBox .btn a {
display: block;
padding: 4vw 0;
color: #fff;
font-size: 2.66vw;
text-align: center;
background: #0a3c8c;
}

.topics .txtBox .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.topics .overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 10001;
}

.topics .movie {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80vw;
height: 45vw;
margin: auto;
z-index: 10002;
}

.topics .movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.topics .movie .popClose {
position: absolute;
top: -8vw;
right: 0;
width: 4vw;
}


.new {
padding: 11vw 0 20vw;
}

.new h2 {
margin: 0 0 7vw;
font-size: 8vw;
font-weight: 100;
text-align: center;
}

.new .box {
width: 100%;
max-width: inherit;
margin: 0 auto;
padding: 0 0 0 2vw;
overflow-x: auto;
box-sizing: border-box;
}

.new ul {
display: flex;
margin: 0 0 8vw;
}

.new ul li {
width: 64vw;
margin: 0 2vw;
}

.new ul li a {
display: block;
background: #fafafa;
}

.new ul li .txtBox {
padding: 6vw 6vw 9.33vw;
}

.new ul li .txtBox .tag {
width: 20vw;
color: #fff;
font-size: 2.66vw;
line-height: 1.5;
text-align: center;
background: #555555;
}

.new ul li .txtBox h3 {
margin: 1.33vw 0 5.86vw;
font-size: 6.66vw;
font-weight: 100;
line-height: 1.25;
}

.new ul li .txtBox .txt {
font-size: 3.2vw;
line-height: 1.67;
}

.new ul li .txtBox .txt span {
display: block;
font-weight: bold;
}

.new .btn {
width: 52vw;
margin: 8vw auto 0;
}

.new .btn a {
display: block;
padding: 4vw 0;
color: #fff;
font-size: 2.66vw;
text-align: center;
background: #0a3c8c;
}

.new .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.program {
position: relative;
padding: 6vw 4vw 8vw;
background: #fafafa;
}

.program:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 112vw;
background: url("/en/glopac/assets/img/top/bg_program_01_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}

.program h2 {
position: relative;
margin: 0 0 4vw;
color: #fff;
font-size: 8vw;
font-weight: 100;
line-height: 1;
text-align: center;
z-index: 2;
}

.program .img {
position: relative;
text-align: center;
z-index: 2;
}

.program .txtBox {
position: relative;
max-width: inherit;
margin: 0 auto;
padding: 8vw 8vw 10vw;
background: #fff;
filter: drop-shadow(0 0 10px rgba(0,0,0,0.1));
box-sizing: border-box;
z-index: 2;
}

.program .txtBox ul {
display: flex;
justify-content: space-between;
max-width: inherit;
margin: 0 auto;
text-align: center;
}

.program .txtBox ul li .ico {
width: 12vw;
margin: 0 auto;
}

.program .txtBox ul li .lead {
margin: 3.2vw 0 0;
color: #073c8f;
font-size: 2.66vw;
line-height: 1.2;
}

.program .txtBox ul li .lead span {
display: block;
font-weight: 700;
}

.program .txtBox .txt {
margin: 7.5vw 0 8vw;
font-size: 3.2vw;
line-height: 1.67;
}

.program .txtBox .btn {
width: 52vw;
margin: 0 auto;
}

.program .txtBox .btn a {
display: block;
padding: 4vw 0;
color: #fff;
font-size: 2.66vw;
text-align: center;
background: #0a3c8c;
}

.program .txtBox .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.visit {
padding: 12vw 0;
background: #fafafa;
}

.visit .inner {
max-width: inherit;
margin: 0 auto;
padding: 0 4vw;
box-sizing: border-box;
}

.visit h2 {
font-size: 8vw;
font-weight: 100;
line-height: 1;
text-align: center;
}

.visit .lead {
margin: 2.66vw 0 8.4vw;
font-size: 4vw;
font-weight: 100;
line-height: 1.2;
text-align: center;
}

.visit ul {
display: block;
justify-content: space-between;
margin: 0 0 12vw;
}

.visit ul li {
width: 76vw;
margin: 0 auto 4vw;
}

.visit ul li .img {
margin: 0;
}

.visit ul li .txtBox {
margin: 0;
padding: 8vw 8vw 10vw;
background: #fff;
filter: none;
}

.visit ul li .txtBox h3 {
font-size: 6.4vw;
font-weight: 100;
line-height: 1;
}

.visit ul li .txtBox .date {
margin: 2vw 0 3.2vw;
font-size: 2.66vw;
font-weight: 700;
}

.visit ul li .txtBox .txt {
margin: 0 0 4.8vw;
font-size: 3.2vw;
line-height: 1.5;
}

.visit ul li .btn {
width: 52vw;
margin: 0 auto;
}

.visit ul li .btn a {
display: block;
padding: 4vw 0;
color: #fff;
font-size: 2.66vw;
text-align: center;
background: #0a3c8c;
}

.visit ul li .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.visit .btn02 {
width: 76vw;
margin: 0 auto;
}

.visit .btn02 a {
display: block;
padding: 4vw 0;
color: #fff;
font-size: 2.66vw;
text-align: center;
background: #0a3c8c;
}

.visit .btn02 a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}

.event {
padding: 17vw 0;
}

.event h2 {
margin: 0 0 7vw;
font-size: 8vw;
font-weight: 100;
text-align: center;
}

.event .box {
position: relative;
max-width: 1290px;
margin: 0 auto;
padding: 12vw 0;
color: #fff;
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%);
box-sizing: border-box;
}

.event .box .img {
position: static;
width: 76vw;
margin: 0 auto;
border: 4vw solid #fff;
box-sizing: border-box;
}

.event .box .img:before {
display: none;
}

.event .box .boxInner {
width: 76vw;
margin: 0 auto;
padding: 6vw 0 0
}

.event .box h3 {
font-size: 5.33vw;
line-height: 1;
}

.event .box ul {
margin: 3vw 0 2vw;
padding: 2vw 0 2vw;
border-top: 1px solid #6bc0e7;
border-bottom: 1px solid #6bc0e7;
}

.event .box ul li {
padding: 0 0 0 6vw;
font-size: 2.66vw;
}

.event .box ul li.map {
margin: 0 0 2vw;
background: url("/en/glopac/assets/img/ico_map_01.png") no-repeat left 0.5vw;
background-size: 3.2vw auto;
}

.event .box ul li.time {
background: url("/en/glopac/assets/img/ico_time_02.png") no-repeat left 0.5vw;
background-size: 3.2vw auto;
}

.event .box .txt {
margin: 0 0 4vw;
font-size: 3.2vw;
line-height: 1.67;
}

.event .box .btn {
width: 52vw;
margin: 0 auto;
}

.event .box .btn a {
display: block;
padding: 4vw 0;
color: #fff;
font-size: 2.66vw;
text-align: center;
background: #0a3c8c;
}

.event .box .btn a:hover {
color: #0a3c8c;
background: #fff;
opacity: 1;
}


}