@charset "UTF-8";
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block;content:"";line-height:0;}
.clearfix:after {clear:both;}
.blind {display:block;font-size:0;text-indent:-9999px}
.ellipsis{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap}

/* layout */
.wrap {overflow:hidden;position:relative;min-height:100vh;background:url(./images/wrap_bg.jpg) 50% 50%;background-size:cover}
.container {width:100%;margin:0 auto;}
.header .container{max-width:1920px;padding:0 40px}
.contents .container,
.footer .container{max-width:1100px;}

/* header */
.header .container{height:90px;padding-top:40px;}
.header .logo{float:left;bottom:0;}
.header .logo a{display:block;width:176px;height:49px;background:url(./images/logo.png) no-repeat}
.header .gnb{float:right;font-size:0}
.header .gnb li{display:inline-block;padding:0 23px}
.header .gnb li:last-child{padding-right:0}
.header .gnb li a{position:relative;display:block;font-size:16px;color:#fff;}
.header .gnb li a::after{content:'';display:block;width:0%;height:1px;margin-top:4px;background:#fff;transition:width 0.3s}
.header .gnb li a:hover::after{width:100%}

/* contents */
.contents .container{padding-top:50px;}
.contents .text_wrap{text-align:center}
.contents .text_wrap p{color:#fff}
.contents .tit{padding-top:20px;font-size:60px;}
.contents .sub_tit{font-size:35px;}

.contents .tit_sm{padding-top:10px;font-size:35px;}
.contents .sub_tit_sm{font-size:20px;}

.contents .notice_wrap {overflow:hidden;padding:20px 30px;margin-top:60px;border:1px solid #F4F5F6;background:#fff}
.contents .notice_wrap .notice{float:left; /*max-width:calc(90% - 150px)*/;}
/*
.contents .notice_wrap .notice .subject {height:40px;padding-left:60px;line-height:40px;font-size:18px;background:url(./images/subj_ico.png) no-repeat 20px 50%;color:#444;}
*/
.contents .notice_wrap .notice .subject {padding-left:60px;line-height:40px;font-size:18px;background:url(./images/subj_ico.png) no-repeat 20px 50%;color:#444;}
.contents .notice_wrap .appli_btn{float:right;display:block;width:150px;border:1px solid #CE563C;border-radius:3px;background:#ED755B;text-align:center;color:#fff}
.contents .notice_wrap .appli_btn span{display:inline-block;padding:12px 0;padding-left:22px;background:url(./images/appli_ico.png) no-repeat 0 50%;}

.contents .type_wrap{overflow:hidden;}
.contents .type_wrap .type{overflow:hidden;float:left;width:calc(50% - 5px);height:auto;margin-right:10px;margin-top:10px;padding:30px 40px 40px;background:url(./images/type_bg.png) no-repeat 0 0;background-blend-mode:overlay}
.contents .type_wrap .type:nth-child(2n){margin-right:0}
.contents .type_wrap .text_wrap{text-align:left;}
.contents .type_wrap .text_wrap .type_tit {font-family:ngb;line-height:1.4;font-size:24px; text-align: center;}
.contents .type_wrap .type_btn{margin-top:20px;text-align:center}
.contents .type_wrap .type_btn li{display:inline-block;}
.contents .type_wrap .type_btn li a{display:block;padding:70px 10px 0;background:no-repeat 50% 5px;}
.contents .type_wrap .type_btn li span{display:inline-block;line-height:1.2;font-size:14px;color:#fff;word-break:keep-all;}
.contents .type_wrap .type_btn span::after{content:'';display:block;width:0%;height:1px;margin-top:4px;background:#fff;transition:width 0.3s}
.contents .type_wrap .type_btn a:hover span::after{width:100%}
.contents .type_wrap .type_btn li.success a{background-image:url(./images/success_ic.png)}
.contents .type_wrap .type_btn li.regi a{background-image:url(./images/regi_ic.png)}
.contents .type_wrap .type_btn li.print a{background-image:url(./images/print_ic.png)}
.contents .type_wrap .type_btn li.monitor a{background-image:url(./images/monitor_ic.png)}
.contents .type_wrap .type_btn li.appli a{background-image:url(./images/appli_ic.png)}

.contents .type_wrap .type_01{background-color:#0075D7}
.contents .type_wrap .type_02{background-color:#00ADF7}
.contents .type_wrap .type_03{background-color:#00A9BE}
.contents .type_wrap .type_04{background-color:#00C6AA}

/* footer */
.footer {padding:40px 0}
.footer .footer_info{font-size:0;text-align:center}
.footer .footer_info li{display:inline-block;font-size:12px;color:#bbb}
.footer .footer_info li::after{content:'/';display:inline-block;margin:0 5px}
.footer .footer_info li.copy::after{display:none}
.footer .footer_info li a{color:#bbb}

@media only screen and (max-width:1100px){
	.contents .type_wrap .type{float:none;width:600px;margin:10px auto;}
	.contents .type_wrap .type:nth-child(2n){margin-right:auto}
}

@media only screen and (max-width:960px){
	.wrap{padding:0 10px}
	.header .container {height:auto;padding:20px 0 0;text-align:center}
	.contents .container{padding:50px 20px 0}
	.header .logo,
	.header .gnb{float:none}
	.header .logo{margin-bottom:15px}
	.header .logo a{width:120px;margin:0 auto;background-position:50% 50%;background-size:100%}
	.header .gnb li{padding:5px 10px}
	.header .gnb li a{font-size:14px}
	
	.contents .tit{padding-top:10px;font-size:28px}
	.contents .sub_tit{font-size:18px}
	.contents .notice_wrap{margin-top:30px;padding:15px 20px}
	.contents .notice_wrap .notice,
	.contents .notice_wrap .appli_btn{float:none}
	.contents .notice_wrap .notice {max-width:100%;}
	.contents .notice_wrap .notice .subject{padding-left:40px;font-size:14px;background-size:20px;background-position-x:10px; line-height:28px;}
	.contents .notice_wrap .appli_btn{width:130px;margin:0 auto}
	.contents .notice_wrap .appli_btn span{padding-top:10px;padding-bottom:10px;font-size:12px}
	
	.contents .type_wrap .type{width:100%;padding:20px 0;}
	.contents .type_wrap .text_wrap {padding:0 20px}
	.contents .type_wrap .text_wrap .type_tit{font-size:18px;}
	.contents .type_wrap .type_btn{margin-top:20px;text-align:left;font-size:0}
	.contents .type_wrap .type_btn li {width:50%;padding:5px 0;text-align:center}
	.contents .type_wrap .type_btn li a{padding-top:60px;background-size:38px;}
	.contents .type_wrap .type_btn li span{font-size:12px;}

	.footer{padding:30px 0 20px}
	.footer .footer_info li{display:block;padding:2px 0}
	.footer .footer_info li::after{display:none}
}
@media only screen and (max-width:500px){
	.header .gnb{width:70%;margin:0 auto;}
	.contents .type_wrap .text_wrap,
	.contents .type_wrap .type_btn{width:100%}
}
@media only screen and (max-width:420px){
	.header .gnb{width:90%}
}