@charset "utf-8";

/* sub contents */
#contents {position: relative; }

/* page */
.page { }

/* page_head */
.page_head { }
.subTopImg {position: relative; width:100%; height: 335px; background-repeat: no-repeat; background-size: cover; background-position: right center; background-image:url('/resource/images_2020/sub/subTopImg_www_210715.jpg'); }
.subTopImg:before {content: ""; position: absolute; left: 50%; top: 0%; width: 2px; height: 40%; transform: translateX(-50%); background-color: #fff;}
.subTopImg:after {content: ""; position: absolute; left: 50%; bottom: 0%; width: 2px; height: 40%; transform: translateX(-50%); background-color: #fff;}
.subTopImg h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 40px; font-weight: 900; color: #fff; text-align: center; line-height: 1.2;}

/* page_body  */
.page_body {padding: 60px 0; }
.page_body .title {margin-bottom: 60px; font-size: 35px; font-weight: 900; text-align: center;}

/* img_list */
.img_list {width: 100%; font-size: 0px; margin: 0 auto; margin-bottom: 30px; text-align: center; box-sizing: border-box;}
.img_list .img_box { display: inline-block; width: 100%; margin: 0 auto;}

/* topBtn */
.page_body .container .topBtn {display: block; position: absolute; right: 0; bottom: -60px; width: 35px; height: 35px; background-color: #2c7ff2; border-radius: 100%; font-size: 12px; color: #fff; text-align: center; line-height: 35px; cursor: pointer;}

/* sub_popup */
.popup_layer{ display:none; position:absolute; top:20%; left:50%; min-width:300px; max-width:500px; height:auto; max-height:700px; background-color:#fff; border:5px solid #2157b7; z-index:1000; }
.popup_layer .popup_container{ padding:20px 25px; }
.popup_layer .btn_pane{ width:100%; margin:5px 0px 5px 0px; padding-top:10px; text-align:right; }
.popup_layer .btn_pane a.btn-close{ display:inline-block; height:25px; padding:0px 10px; border:2px solid #2157b7; background-color:#1147a7; font-size:10pt; color:#ffffff; line-height:25px; }
.popup_layer .pop_conts img{ width:100%; height:auto; }

/* ------- MEDIA QUERY ------- */
@media screen and (max-width: 1280px){
    .page_body .container {padding: 0 20px; }
    .page_body .container .topBtn {right: 20px; }
}

@media screen and (max-width: 1024px){
    .page_body .container .topBtn {display: none; }
}

@media screen and (max-width: 768px){
    .subTopImg {height: 200px; }
    .subTopImg h2 {font-size: 26px; }
    .subTopImg:before {width: 1px; height: 30%;}
    .subTopImg:after {width: 1px; height: 30%;}
    .page_body .title {font-size: 30px; }
}

@media screen and (max-width: 475px){
    .subTopImg {height: 140px; }
    .subTopImg h2 {font-size: 20px; }
    .page_body .title {font-size: 24px; }
}
@media screen and (max-width: 350px){
    .subTopImg h2 {font-size: 18px; }
}