.wrap { width:1200px; margin:0 auto; }
.none_all { display:none; }
span.form.required { color:#f00; background:none !important; }
#body { }
#daum_juso_pagemb_zip { clear:both; }

/* 이미지 클릭시 팝업 */
#layer_big_image { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); z-index:1000; }
#layer_big_image > div { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }
#layer_big_image > div > div { position:relative; }
#layer_big_image > div > div button { position:absolute; top:-22px; right:-22px; width:44px; height:44px; background-color:#000000; border-radius:50%; border:5px solid #ffffff; text-align:center; }
#layer_big_image > div > div button:after { content:'\00d7'; font-size:20px; line-height:34px; color:#ffffff; text-align:center; }
#layer_big_image > div > div img { max-height:95vh !important; max-width:95vw !important; }

@media screen and (max-width:1280px) {
    .wrap { width:980px; }
    .none1280 { display:none !important; }
    .inline1280 { display:inline !important; }
    .block1280 { display:block !important; }
    .table1280 { display:table-row !important; }
    
    #layer_big_image > div > div button { top:-20px; right:-20px; width:40px; height:40px; border:4px solid #ffffff; }
    #layer_big_image > div > div button:after { font-size:18px; line-height:32px; }
}
@media screen and (max-width:1024px) {
    .wrap { width:auto; padding:0 20px; }
    .none1024 { display:none !important; }
    .inline1024 { display:inline !important; }
    .block1024 { display:block !important; }
    .table1024 { display:table-row !important; }
    
    #layer_big_image > div > div button { top:-18px; right:-18px; width:36px; height:36px; border:3px solid #ffffff; }
    #layer_big_image > div > div button:after { font-size:16px; line-height:30px; }
}
@media screen and (max-width:768px) {
    .wrap { width:auto; padding:0 15px; }
    .none768 { display:none !important; }
    .inline768 { display:inline !important; }
    .block768 { display:block !important; }
    .table768 { display:table-row !important; }
    
    #layer_big_image > div > div button { top:-16px; right:-16px; width:32px; height:32px; border:2px solid #ffffff; }
    #layer_big_image > div > div button:after { font-size:14px; line-height:28px; }
}
@media screen and (max-width:640px) {
    .wrap { width:auto; padding:0 10px; }
    .none640 { display:none !important; }
    .inline640 { display:inline !important; }
    .block640 { display:block !important; }
    .table640 { display:table-row !important; }
    
    #layer_big_image > div > div button { top:-14px; right:-14px; width:28px; height:28px; border:1px solid #ffffff; }
    #layer_big_image > div > div button:after { font-size:12px; line-height:26px; }
}





#main {  }



#main .visual { background-image:url('../img/main/visual.png'); background-repeat:no-repeat; background-position:right bottom; background-size:cover; }
#main .visual .wrap { position:relative; height:700px;}
#main .visual .wrap div { color:#ffffff; position:absolute; top:50%; left:0; transform:translate(0, -65%); }
#main .visual .wrap div h2 { font-size:78px; font-weight:400; text-shadow:0 4px 10px rgba(0, 0, 0, 0.4); }
#main .visual .wrap div h2 strong { font-weight:900; }
#main .visual .wrap div p { font-size:29px; margin:40px 0 0; text-shadow:0 4px 10px rgba(0, 0, 0, 0.4); }
@media screen and (max-width:1280px) {
    #main .visual .wrap { height:630px;}
    #main .visual .wrap div { transform:translate(0, -70%); }
    #main .visual .wrap div h2 { font-size:66px; }
    #main .visual .wrap div p { font-size:25px; margin:35px 0 0; }
}
@media screen and (max-width:1024px) {
    #main .visual .wrap { height:560px;}
    #main .visual .wrap div { left:20px; transform:translate(0, -80%); }
    #main .visual .wrap div h2 { font-size:54px; }
    #main .visual .wrap div p { font-size:21px; margin:30px 0 0; }
}
@media screen and (max-width:768px) {
    #main .visual .wrap { height:490px;}
    #main .visual .wrap div { left:15px; transform:translate(0, -100%); }
    #main .visual .wrap div h2 { font-size:42px; }
    #main .visual .wrap div p { font-size:17px; margin:25px 0 0; }
}
@media screen and (max-width:640px) {
    #main .visual .wrap { height:420px;}
    #main .visual .wrap div { left:10px; transform:translate(0, -120%); }
    #main .visual .wrap div h2 { font-size:30px; }
    #main .visual .wrap div p { font-size:13px; margin:20px 0 0; }
}



#main .quick {  }
#main .quick .wrap {  }
#main .quick .wrap ul { overflow:hidden; margin:-115px 0 0; }
#main .quick .wrap ul li { float:left; width:25%; box-sizing:border-box; color:#fff; padding:32px; }
#main .quick .wrap ul li.one { background-color:#2e3092; }
#main .quick .wrap ul li.two { background-color:#161875; }
#main .quick .wrap ul li.three { background-color:#040655; }
#main .quick .wrap ul li.four { background-color:#000132; }
#main .quick .wrap ul li h3 { font-size:26px; font-weight:700; }
#main .quick .wrap ul li p { font-size:16px; font-weight:500; margin:20px 0 0; }
#main .quick .wrap ul li div { position:relative; text-align:right; margin:30px 0 0; }
#main .quick .wrap ul li div a { position:absolute; left:0; bottom:0; display:block; color:#fff; font-size:14px; border:1px solid #ffffff; line-height:30px; padding:0 12px; }
#main .quick .wrap ul li div img { height:74px; }
@media screen and (max-width:1280px) {
    #main .quick .wrap ul { margin:-130px 0 0; }
    #main .quick .wrap ul li { padding:29px; }
    #main .quick .wrap ul li h3 { font-size:24px; }
    #main .quick .wrap ul li p { font-size:15px; margin:18px 0 0; }
    #main .quick .wrap ul li p br { display:none; }
    #main .quick .wrap ul li div { margin:27px 0 0; }
    #main .quick .wrap ul li div a { font-size:13px; line-height:27px; padding:0 11px; }
    #main .quick .wrap ul li div img { height:67px; }
}
@media screen and (max-width:1024px) {
    #main .quick .wrap ul { margin:-145px 0 0; }
    #main .quick .wrap ul li { padding:26px; }
    #main .quick .wrap ul li h3 { font-size:22px; }
    #main .quick .wrap ul li p { font-size:14px; margin:16px 0 0; height:57px; }
    #main .quick .wrap ul li div { margin:24px 0 0; }
    #main .quick .wrap ul li div a { font-size:12px; line-height:24px; padding:0 10px; }
    #main .quick .wrap ul li div img { height:60px; }
}
@media screen and (max-width:768px) {
    #main .quick .wrap ul { margin:-160px 0 0; }
    #main .quick .wrap ul li { width:50%; padding:23px; }
    #main .quick .wrap ul li h3 { font-size:20px; }
    #main .quick .wrap ul li p { font-size:13px; margin:14px 0 0; height:36px; }
    #main .quick .wrap ul li div { margin:21px 0 0; }
    #main .quick .wrap ul li div a { font-size:11px; line-height:21px; padding:0 9px; }
    #main .quick .wrap ul li div img { height:53px; }
}
@media screen and (max-width:640px) {
    #main .quick .wrap ul { margin:-175px 0 0; }
    #main .quick .wrap ul li { padding:20px; }
    #main .quick .wrap ul li h3 { font-size:18px; }
    #main .quick .wrap ul li p { font-size:12px; margin:12px 0 0; height:48px; }
    #main .quick .wrap ul li div { margin:18px 0 0; }
    #main .quick .wrap ul li div a { font-size:10px; line-height:18px; padding:0 8px; }
    #main .quick .wrap ul li div img { height:46px; }
}



#main .board { padding:0 0 60px; }
#main .board .wrap { overflow:hidden; }
#main .board .wrap > div { float:left; width:48%; }
#main .board .wrap > div:first-child { margin:0 4% 0 0; }
#main .board .wrap > div h4 { font-size:20px; font-weight:500; color:#333333; margin:60px 0 20px; }
#main .board .wrap > div ul { overflow:hidden; margin:-2%; }
#main .board .wrap > div ul li { float:left; width:46%; margin:2%; }
#main .board .wrap > div ul li a { display:block; border:1px solid #dddddd; padding:30px; }
#main .board .wrap > div ul li a dl {  }
#main .board .wrap > div ul li a dl dt { font-size:17px; font-weight:700; color:#333333; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#main .board .wrap > div ul li a dl dd { font-size:15px; color:#333333; margin:20px 0 0; line-height:27px; height:54px; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; }
#main .board .wrap > div ul li a div { margin:25px 0 0; font-size:14px; color:#2e3092; position:relative; }
#main .board .wrap > div ul li a div span { position:absolute; top:50%; right:0; transform:translate(0, -50%); width:16px; height:2px; background-color:#dedede; }
#main .board .wrap > div ul li a div span:after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:2px; height:16px; background-color:#dedede; }
@media screen and (max-width:1280px) {
    #main .board { padding:0 0 55px; }
    #main .board .wrap > div h4 { font-size:19px; margin:55px 0 18px; }
    #main .board .wrap > div ul { overflow:hidden; margin:-2%; }
    #main .board .wrap > div ul li { float:left; width:46%; margin:2%; }
    #main .board .wrap > div ul li a { padding:26px; }
    #main .board .wrap > div ul li a dl dt { font-size:16px; }
    #main .board .wrap > div ul li a dl dd { font-size:14px; margin:18px 0 0; line-height:25px; height:50px; }
    #main .board .wrap > div ul li a div { margin:23px 0 0; font-size:13px; }
    #main .board .wrap > div ul li a div span { width:15px; height:2px; }
    #main .board .wrap > div ul li a div span:after { width:2px; height:15px; }
}
@media screen and (max-width:1024px) {
    #main .board { padding:0 0 50px; }
    #main .board .wrap > div h4 { font-size:18px; margin:50px 0 16px; }
    #main .board .wrap > div ul { overflow:hidden; margin:-2%; }
    #main .board .wrap > div ul li { float:left; width:46%; margin:2%; }
    #main .board .wrap > div ul li a { padding:22px; }
    #main .board .wrap > div ul li a dl dt { font-size:15px; }
    #main .board .wrap > div ul li a dl dd { font-size:13px; margin:16px 0 0; line-height:23px; height:46px; }
    #main .board .wrap > div ul li a div { margin:21px 0 0; font-size:12px; }
    #main .board .wrap > div ul li a div span { width:14px; height:2px; }
    #main .board .wrap > div ul li a div span:after { width:2px; height:14px; }
}
@media screen and (max-width:768px) {
    #main .board { padding:0 0 45px; }
    #main .board .wrap > div { float:none; width:auto; }
    #main .board .wrap > div:first-child { margin:0; }
    #main .board .wrap > div h4 { font-size:17px; margin:45px 0 14px; }
    #main .board .wrap > div ul { overflow:hidden; margin:-1%; }
    #main .board .wrap > div ul li { width:48%; margin:1%; }
    #main .board .wrap > div ul li a { padding:18px; }
    #main .board .wrap > div ul li a dl dt { font-size:14px; }
    #main .board .wrap > div ul li a dl dd { font-size:12px; margin:14px 0 0; line-height:21px; height:42px; }
    #main .board .wrap > div ul li a div { margin:19px 0 0; font-size:11px; }
    #main .board .wrap > div ul li a div span { width:13px; height:2px; }
    #main .board .wrap > div ul li a div span:after { width:2px; height:13px; }
}
@media screen and (max-width:640px) {
    #main .board { padding:0 0 40px; }
    #main .board .wrap > div h4 { font-size:16px; margin:40px 0 12px; }
    #main .board .wrap > div ul li a { padding:14px; }
    #main .board .wrap > div ul li a dl dt { font-size:13px; }
    #main .board .wrap > div ul li a dl dd { font-size:11px; margin:12px 0 0; line-height:19px; height:38px; }
    #main .board .wrap > div ul li a div { margin:17px 0 0; font-size:10px; }
    #main .board .wrap > div ul li a div span { width:12px; height:2px; }
    #main .board .wrap > div ul li a div span:after { width:2px; height:12px; }
}










#sub .visual { height:300px; position:relative; background-color:#000000; background-position:center; background-repeat:no-repeat; background-size:cover; }
#sub .visual.member { background-image:url('../img/common/visual_member.png'); }
#sub .visual.about { background-image:url('../img/common/visual_about.png'); }
#sub .visual.business { background-image:url('../img/common/visual_business.png'); }
#sub .visual.information { background-image:url('../img/common/visual_information.png'); }
#sub .visual.news { background-image:url('../img/common/visual_news.png'); }
#sub .visual.customer { background-image:url('../img/common/visual_customer.png'); }
#sub .visual.application { background-image:url('../img/common/visual_application.png'); }
#sub .visual h2 { font-size:42px; font-weight:500; color:#ffffff; position:absolute; top:50%; left:0; transform:translate(0, -50%); text-align:center; width:100%; text-shadow:0 4px 10px rgba(0, 0, 0, 0.4); }
@media screen and (max-width:1280px) {
    #sub .visual { height:260px; }
    #sub .visual h2 { font-size:38px; }
}
@media screen and (max-width:1024px) {
    #sub .visual { height:220px; }
    #sub .visual h2 { font-size:34px; }
}
@media screen and (max-width:768px) {
    #sub .visual { height:180px; }
    #sub .visual h2 { font-size:30px; }
}
@media screen and (max-width:640px) {
    #sub .visual { height:140px; }
    #sub .visual h2 { font-size:26px; }
}



#sub .location { border-top:1px solid #dddddd; border-bottom:1px solid#dddddd; }
#sub .location .wrap { font-size:0; }
#sub .location .wrap .home { vertical-align:top; background-color:#2e3092; display:inline-block; width:53px; height:53px; position:relative; }
#sub .location .wrap .home img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:17px; }
#sub .location .wrap .now { vertical-align:top; position:relative; display:inline-block; border-left:1px solid #dddddd; border-right:1px solid #dddddd; }
#sub .location .wrap .now button { background:none; border:none; padding:0 20px; width:230px; box-sizing:border-box; text-align:left; position:relative; font-size:16px; font-weight:500; color:#666666; line-height:53px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#sub .location .wrap .now button img { position:absolute; top:50%; right:20px; transform:translate(0, -50%); width:11px; }
#sub .location .wrap .now ul { display:none; position:absolute; top:100%; left:-1px; width:calc(100% + 2px); border-left:1px solid #dddddd; border-right:1px solid #dddddd; border-top:1px solid #dddddd; background-color:#ffffff; z-index:10; }
#sub .location .wrap .now ul li { border-bottom:1px solid #dddddd; }
#sub .location .wrap .now ul li a { display:block; padding:0 20px; font-size:15px; line-height:48px; color:#999999; font-weight:400; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
@media screen and (max-width:1280px) {
    #sub .location .wrap .home { width:48px; height:48px; }
    #sub .location .wrap .home img { height:16px; }
    #sub .location .wrap .now button { padding:0 18px; width:210px; font-size:15px; line-height:48px; }
    #sub .location .wrap .now button img { width:10px; }
    #sub .location .wrap .now ul li a { padding:0 18px; font-size:14px; line-height:43px; }
}
@media screen and (max-width:1024px) {
    #sub .location .wrap .home { width:43px; height:43px; }
    #sub .location .wrap .home img { height:15px; }
    #sub .location .wrap .now button { padding:0 16px; width:190px; font-size:14px; line-height:43px; }
    #sub .location .wrap .now button img { width:9px; }
    #sub .location .wrap .now ul li a { padding:0 16px; font-size:13px; line-height:38px; }
}
@media screen and (max-width:768px) {
    #sub .location .wrap { padding:0; }
    #sub .location .wrap .home { width:38px; height:38px; }
    #sub .location .wrap .home img { height:14px; }
    #sub .location .wrap .now { width:calc(50% - 19px); }
    #sub .location .wrap .now button { padding:0 14px; width:100%; font-size:13px; line-height:38px; }
    #sub .location .wrap .now button img { width:8px; }
    #sub .location .wrap .now ul li a { padding:0 14px; font-size:12px; line-height:33px; }
}
@media screen and (max-width:640px) {
    #sub .location .wrap .home { width:33px; height:33px; }
    #sub .location .wrap .home img { height:13px; }
    #sub .location .wrap .now { width:calc(50% - 16.5px); }
    #sub .location .wrap .now button { padding:0 12px; font-size:12px; line-height:33px; }
    #sub .location .wrap .now button img { width:7px; }
    #sub .location .wrap .now ul li a { padding:0 12px; font-size:11px; line-height:28px; }
}



#sub .content { padding:63px 0; }
#sub .content .title { font-size:34px; font-weight:700; color:#333333; text-align:center; padding:25px 0 55px; position:relative; }
#sub .content .title:before { content:''; height:2px; width:38px; background-color:#2e3092; position:absolute; top:0; left:50%; transform:translate(-50%, 0); }

#sub .content .bt { padding:0 0 0 30px; background-repeat:no-repeat; background-size:18px 18px; background-position:center left; background-image:url('../img/common/bullet.png'); color:#333333; font-weight:700; font-size:18px; margin:35px 0 20px; position:relative; }
#sub .content .bt.first { margin-top:0; }
#sub .content .bt label { position:absolute; top:50%; right:0; transform:translate(0, -50%); color:#333333; font-size:16px; font-weight:400; }
#sub .content .bt .add-button,
#sub .content .bt .remove-button { position:absolute; top:50%; right:0; transform:translate(0, -50%); color:#fff; border:none; line-height:30px; padding:0 15px; font-size:17px; }
#sub .content .bt .add-button { background-color:#2e3092; }
#sub .content .bt .remove-button { background-color:#7e7e7e; }
#sub .content .bt.not { margin-top:5px; padding:0; background:none; }

#sub .content .tt { color:#2e3092; font-weight:700; font-size:24px; margin:55px 0; text-align:center; }
#sub .content .tt.first { margin-top:0; }

#sub .content .st { color:#333333; font-weight:500; font-size:18px; margin:30px 0 20px; }
@media screen and (max-width:1280px) {
    #sub .content { padding:57px 0; }
    #sub .content .title { font-size:31px; padding:23px 0 50px;}
    #sub .content .title:before { width:35px; }

    #sub .content .bt { padding:0 0 0 27px; background-size:17px 17px; font-size:17px; margin:32px 0 18px; }
    #sub .content .bt label { font-size:15px; }
    #sub .content .bt .add-button,
    #sub .content .bt .remove-button { line-height:29px; font-size:16px; }
    #sub .content .bt.not { margin-top:4px; }

    #sub .content .tt { font-size:22px; margin:50px 0; }

    #sub .content .st { font-size:17px; margin:27px 0 18px; }
}
@media screen and (max-width:1024px) {
    #sub .content { padding:51px 0; }
    #sub .content .title { font-size:28px; padding:21px 0 45px; }
    #sub .content .title:before { width:32px; }

    #sub .content .bt { padding:0 0 0 24px; background-size:16px 16px; font-size:16px; margin:29px 0 16px; }
    #sub .content .bt label { font-size:14px; }
    #sub .content .bt .add-button,
    #sub .content .bt .remove-button { line-height:28px; font-size:15px; }
    #sub .content .bt.not { margin-top:3px; }

    #sub .content .tt { font-size:20px; margin:45px 0; }

    #sub .content .st { font-size:16px; margin:24px 0 16px; }
}
@media screen and (max-width:768px) {
    #sub .content { padding:45px 0; }
    #sub .content .title { font-size:25px; padding:19px 0 40px; }
    #sub .content .title:before { width:29px; }

    #sub .content .bt { padding:0 0 0 21px; background-size:15px 15px; font-size:15px; margin:26px 0 14px; }
    #sub .content .bt label { font-size:13px; }
    #sub .content .bt .add-button,
    #sub .content .bt .remove-button { line-height:27px; font-size:14px; }
    #sub .content .bt.not { margin-top:2px; }

    #sub .content .tt { font-size:18px; margin:40px 0; }

    #sub .content .st { font-size:15px; margin:21px 0 14px; }
}
@media screen and (max-width:640px) {
    #sub .content { padding:39px 0; }
    #sub .content .title { font-size:22px; padding:17px 0 35px; }
    #sub .content .title:before { width:26px; }

    #sub .content .bt { padding:0 0 0 18px; background-size:13px 13px; font-size:14px; margin:23px 0 12px; }
    #sub .content .bt label { font-size:12px; }
    #sub .content .bt .add-button,
    #sub .content .bt .remove-button { line-height:26px; font-size:13px; }
    #sub .content .bt.not { margin-top:1px; }

    #sub .content .tt { font-size:16px; margin:35px 0; }

    #sub .content .st { font-size:14px; margin:18px 0 12px; }
}



#sub .content .text_box { margin:20px 0 0; text-align:left; }
#sub .content .text_box.first { margin:0; }
#sub .content .text_box strong { font-weight:500; }
#sub .content .text_box span.red { color:#fd2424; }
#sub .content .text_box span.blue { color:#2e3092; }
#sub .content .text_box span.under { text-decoration:underline; text-underline-position:under; }
#sub .content .text_box strong.tit { font-size:22px; font-weight:700; color:#333333; display:block; margin:0 0 25px; }
#sub .content .text_box strong.tit.center { text-align:center; }
#sub .content .text_box ul li.num_n { text-indent:-17px; padding:0 0 0 17px; }
#sub .content .text_box ul li.num_c { text-indent:-20px; padding:0 0 0 20px; }
#sub .content .text_box ul li.num_d { text-indent:-16px; padding:0 0 0 16px; }
#sub .content .text_box ul li.num_k { text-indent:-24px; padding:0 0 0 24px; }

#sub .content .text_box_line { padding:30px 35px; font-size:17px; line-height:32px; color:#333333; }
#sub .content .text_box_line.gray { border:1px solid #eeeeee; background-color:#fbfbfb; }
#sub .content .text_box_line.purple { border:1px solid #dddddd; background-color:#f9f9fd; }
#sub .content .text_box_normal { font-size:17px; line-height:26px; color:#333333; }
#sub .content .text_box_info { font-size:15px; line-height:30px; color:#333333; }
#sub .content .text_box_info a { color:#3d33ff; }
@media screen and (max-width:1280px) {
    #sub .content .text_box { margin:18px 0 0; }
    #sub .content .text_box strong.tit { font-size:20px; margin:0 0 22px; }
    #sub .content .text_box ul li.num_n { text-indent:-16px; padding:0 0 0 16px; }
    #sub .content .text_box ul li.num_c { text-indent:-19px; padding:0 0 0 19px; }
    #sub .content .text_box ul li.num_d { text-indent:-15px; padding:0 0 0 15px; }
    #sub .content .text_box ul li.num_k { text-indent:-23px; padding:0 0 0 23px; }

    #sub .content .text_box_line { padding:26px 31px; font-size:16px; line-height:29px; }
    #sub .content .text_box_normal { font-size:16px; line-height:24px; }
    #sub .content .text_box_info { font-size:14px; line-height:27px; }
}
@media screen and (max-width:1024px) {
    #sub .content .text_box { margin:16px 0 0; }
    #sub .content .text_box strong.tit { font-size:19px; margin:0 0 19px; }
    #sub .content .text_box ul li.num_n { text-indent:-15px; padding:0 0 0 15px; }
    #sub .content .text_box ul li.num_c { text-indent:-18px; padding:0 0 0 18px; }
    #sub .content .text_box ul li.num_d { text-indent:-14px; padding:0 0 0 14px; }
    #sub .content .text_box ul li.num_k { text-indent:-22px; padding:0 0 0 22px; }

    #sub .content .text_box_line { padding:22px 27px; font-size:15px; line-height:26px; }
    #sub .content .text_box_normal { font-size:15px; line-height:22px; }
    #sub .content .text_box_info { font-size:13px; line-height:24px; }
}
@media screen and (max-width:768px) {
    #sub .content .text_box { margin:14px 0 0; }
    #sub .content .text_box strong.tit { font-size:17px; margin:0 0 16px; }
    #sub .content .text_box ul li.num_n { text-indent:-14px; padding:0 0 0 14px; }
    #sub .content .text_box ul li.num_c { text-indent:-17px; padding:0 0 0 17px; }
    #sub .content .text_box ul li.num_d { text-indent:-13px; padding:0 0 0 13px; }
    #sub .content .text_box ul li.num_k { text-indent:-21px; padding:0 0 0 21px; }

    #sub .content .text_box_line { padding:18px 23px; font-size:14px; line-height:23px; }
    #sub .content .text_box_normal { font-size:14px; line-height:20px; }
    #sub .content .text_box_info { font-size:12px; line-height:21px; }
}
@media screen and (max-width:640px) {
    #sub .content .text_box { margin:12px 0 0; }
    #sub .content .text_box strong.tit { font-size:16px; margin:0 0 13px; }
    #sub .content .text_box ul li.num_n { text-indent:-13px; padding:0 0 0 13px; }
    #sub .content .text_box ul li.num_c { text-indent:-16px; padding:0 0 0 16px; }
    #sub .content .text_box ul li.num_d { text-indent:-12px; padding:0 0 0 12px; }
    #sub .content .text_box ul li.num_k { text-indent:-20px; padding:0 0 0 20px; }

    #sub .content .text_box_line { padding:14px 19px; font-size:13px; line-height:20px; }
    #sub .content .text_box_normal { font-size:13px; line-height:18px; }
    #sub .content .text_box_info { font-size:11px; line-height:18px; }
}





#sub .content .table.style01 { border-top:1px solid #dddddd; margin:20px 0 30px; }
#sub .content .table.style01.first { margin-top:0; }
#sub .content .table.style01.blue { border-color:#2e3092; }
#sub .content .table.style01 tr { border-bottom:1px solid #eeeeee; }
/* #sub .content .table.style01 tr:nth-child(even) { background-color:#fbfbfb; } */
#sub .content .table.style01 tr th { word-break:keep-all; }
#sub .content .table.style01 tr th ,
#sub .content .table.style01 tr td { color:#333333; font-size:16px; padding:12px 25px; text-align:left; }
#sub .content .table.style01 tr th { background-color:#fbfbfb; font-weight:500; }
#sub .content .table.style01 tr td textarea { border:1px solid #dddddd; width:100%; padding:10px; box-sizing:border-box; resize:none; }
#sub .content .table.style01 tr td select { border:1px solid #dddddd; padding:0 5px !important; box-sizing:border-box; }
#sub .content .table.style01 tr td input[type=file] { padding-top:0 !important; padding-bottom:0 !important; line-height:31px; }
#sub .content .table.style01 tr td select ,
#sub .content .table.style01 tr td input[type=file],
#sub .content .table.style01 tr td input[type=text],
#sub .content .table.style01 tr td input[type=date],
#sub .content .table.style01 tr td input[type=email] { border:1px solid #dddddd; width:100%; max-width:300px; padding:10px; box-sizing:border-box; }
#sub .content .table.style01 tr td select.short,
#sub .content .table.style01 tr td input[type=text].short,
#sub .content .table.style01 tr td input[type=email].short { width:60px; }

#sub .content .table.style01 tr td select,
#sub .content .table.style01 tr td input[type=file],
#sub .content .table.style01 tr td input[type=text],
#sub .content .table.style01 tr td input[type=date],
#sub .content .table.style01 tr td input[type=email] { height:33px; }
#sub .content .table.style01 tr td button[type=button] { line-height:33px; padding:0 20px; border:none; margin:0; background-color:#eeeeee; color:#333333; font-size:14px; font-weight:700; margin:0 0 0 10px; }
#sub .content .table.style01 tr td span.info { padding:0; font-size:14px; line-height:33px; height:33px; color:#a7a7a7; }

#sub .content .table.style01 tr td .post { display:flex; }
#sub .content .table.style01 tr td .post button { white-space:nowrap; }
#sub .content .table.style01 tr td .address input { max-width:350px; }

#sub .content .table.style01 tr td .tel { display:flex; align-items:center; }
#sub .content .table.style01 tr td .tel input { max-width:100px; }
#sub .content .table.style01 tr td .tel span { display:block; margin:0 5px; }

#sub .content .table.style01 tr td .date { display:flex; align-items:center; }
#sub .content .table.style01 tr td .date input { max-width:110px; }
#sub .content .table.style01 tr td .date span { display:block; margin:0 5px; }

#sub .content .table.style01 tr td .file { position:relative; display:flex; }
#sub .content .table.style01 tr td .file input[type=file] { position:absolute; top:50%; left:10px; transform:translate(-50%, -50%); width:1px; height:1px; clip:rect(0 0 0 0); }
#sub .content .table.style01 tr td .file label { border:1px solid #dddddd; padding: 0 10px; font-size:14px; line-height:33px; height:33px; display:block; cursor:pointer; letter-spacing:0; color:#a7a7a7; width:400px; max-width:60%; }
#sub .content .table.style01 tr td .file label.is_file { color:#333333; }
#sub .content .table.style01 tr td .file label p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sub .content .table.style01 tr td .file span { display:block; border:none; max-width:calc(40% - 10px); line-height:33px; padding:0 20px; margin:0 0 0 10px; font-size:14px; font-weight:700; background-color:#eeeeee; color:#333333; white-space:nowrap; cursor:pointer; }
#sub .content .table.style01 tr td .file_del div label { font-size:14px; vertical-align:top; }
#sub .content .table.style01 tr td .file_del div label input[type=checkbox] { width:14px; height:14px; }
@media screen and (max-width:1280px) {
    #sub .content .table.style01 { margin:18px 0 27px; }
    #sub .content .table.style01 tr th ,
    #sub .content .table.style01 tr td { font-size:15px; padding:18px 23px; }
    #sub .content .table.style01 tr td input[type=file] { line-height:28px; }
    #sub .content .table.style01 tr td textarea ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { padding:9px; }
    #sub .content .table.style01 tr td select ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { height:30px; }
    #sub .content .table.style01 tr td button[type=button] { line-height:30px; padding:0 18px; font-size:13px; margin:0 0 0 9px; }
    #sub .content .table.style01 tr td span.info { font-size:13px; line-height:30px; height:30px; }

    #sub .content .table.style01 tr td .file label { height:30px; line-height:30px; font-size:13px; }
    #sub .content .table.style01 tr td .file span { line-height:30px; padding:0 18px; font-size:13px; margin:0 0 0 9px; }
    #sub .content .table.style01 tr td .file_del div label { font-size:13px; }
    #sub .content .table.style01 tr td .file_del div label input[type=checkbox] { width:13px; height:13px; }
}
@media screen and (max-width:1024px) {
    #sub .content .table.style01 { margin:16px 0 24px; }
    #sub .content .table.style01 tr th ,
    #sub .content .table.style01 tr td { font-size:14px; padding:16px 21px; }
    #sub .content .table.style01 tr td input[type=file] { line-height:25px; }
    #sub .content .table.style01 tr td textarea ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { padding:8px; }
    #sub .content .table.style01 tr td select ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { height:27px; }
    #sub .content .table.style01 tr td button[type=button] { line-height:27px; padding:0 16px; font-size:12px; margin:0 0 0 8px; }
    #sub .content .table.style01 tr td span.info { font-size:12px; line-height:27px; height:27px; }

    #sub .content .table.style01 tr td .file label { height:27px; line-height:27px; font-size:12px; }
    #sub .content .table.style01 tr td .file span { line-height:27px; padding:0 16px; font-size:12px; margin:0 0 0 8px; }
    #sub .content .table.style01 tr td .file_del div label { font-size:12px; }
    #sub .content .table.style01 tr td .file_del div label input[type=checkbox] { width:12px; height:12px; }
}
@media screen and (max-width:768px) {
    #sub .content .table.style01 { margin:14px 0 21px; }
    #sub .content .table.style01 tr th ,
    #sub .content .table.style01 tr td { font-size:13px; padding:14px 19px; }
    #sub .content .table.style01 tr td input[type=file] { line-height:22px; }
    #sub .content .table.style01 tr td textarea ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { padding:7px; }
    #sub .content .table.style01 tr td select ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { height:24px; }
    #sub .content .table.style01 tr td button[type=button] { line-height:24px; padding:0 14px; font-size:11px; margin:0 0 0 7px; }
    #sub .content .table.style01 tr td span.info { font-size:11px; line-height:24px; height:24px; }

    #sub .content .table.style01 tr td .file label { height:24px; line-height:24px; font-size:11px; }
    #sub .content .table.style01 tr td .file span { line-height:24px; padding:0 14px; font-size:11px; margin:0 0 0 7px; }
    #sub .content .table.style01 tr td .file_del div label { font-size:11px; }
    #sub .content .table.style01 tr td .file_del div label input[type=checkbox] { width:11px; height:11px; }
}
@media screen and (max-width:640px) {
    #sub .content .table.style01 { margin:12px 0 18px; }
    #sub .content .table.style01 tr th ,
    #sub .content .table.style01 tr td { font-size:12px; padding:12px 10px; }
    #sub .content .table.style01 tr td input[type=file] { line-height:19px; }
    #sub .content .table.style01 tr td textarea ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { padding:6px; }
    #sub .content .table.style01 tr td select ,
    #sub .content .table.style01 tr td input[type=file],
    #sub .content .table.style01 tr td input[type=text],
	#sub .content .table.style01 tr td input[type=date],
    #sub .content .table.style01 tr td input[type=email] { height:21px; }
    #sub .content .table.style01 tr td button[type=button] { line-height:21px; padding:0 12px; font-size:10px; margin:0 0 0 6px; }
    #sub .content .table.style01 tr td span.info { font-size:10px; line-height:21px; height:21px; }

    #sub .content .table.style01 tr td .file label { height:21px; line-height:21px; font-size:10px; }
    #sub .content .table.style01 tr td .file span { line-height:21px; padding:0 12px; font-size:10px; margin:0 0 0 6px; }
    #sub .content .table.style01 tr td .file_del div label { font-size:10px; }
    #sub .content .table.style01 tr td .file_del div label input[type=checkbox] { width:10px; height:10px; }
}




#sub .content .table.style02 { margin:20px 0 0; }
#sub .content .table.style02 tr { }
#sub .content .table.style02 tr th ,
#sub .content .table.style02 tr td { padding:20px; text-align:center; border-left:1px solid #eeeeee; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; }
#sub .content .table.style02 tr th.first ,
#sub .content .table.style02 tr td.first { border-left:none; }
#sub .content .table.style02 tr th { color:#ffffff; background-color:#2e3092; font-size:19px; font-size:700; }
#sub .content .table.style02 tr td { color:#333333; font-size:17px; background-color:#ffffff; }
#sub .content .table.style02 tr td.left { text-align:left; }
#sub .content .table.style02 tr td strong.bold { font-weight:700; }
#sub .content .table.style02 tr td a { color:inherit; font-size:inherit; }
@media screen and (max-width:1280px) {
    #sub .content .table.style02 { margin:18px 0 0; }
    #sub .content .table.style02 tr th ,
    #sub .content .table.style02 tr td { padding:18px; }
    #sub .content .table.style02 tr th { font-size:18px; }
    #sub .content .table.style02 tr td { font-size:16px; }
}
@media screen and (max-width:1024px) {
    #sub .content .table.style02 { margin:16px 0 0; }
    #sub .content .table.style02 tr th ,
    #sub .content .table.style02 tr td { padding:16px; }
    #sub .content .table.style02 tr th { font-size:17px; }
    #sub .content .table.style02 tr td { font-size:15px; }
}
@media screen and (max-width:768px) {
    #sub .content .table.style02 { margin:14px 0 0; }
    #sub .content .table.style02 tr th ,
    #sub .content .table.style02 tr td { padding:14px; }
    #sub .content .table.style02 tr th { font-size:16px; }
    #sub .content .table.style02 tr td { font-size:14px; }
}
@media screen and (max-width:640px) {
    #sub .content .table.style02 { margin:12px 0 0; }
    #sub .content .table.style02 tr th ,
    #sub .content .table.style02 tr td { padding:12px; }
    #sub .content .table.style02 tr th { font-size:15px; }
    #sub .content .table.style02 tr td { font-size:13px; }
}



#sub .content .table.style03 { margin:20px 0 0; }
#sub .content .table.style03 tr { }
#sub .content .table.style03 tr th ,
#sub .content .table.style03 tr td { padding:20px; border-left:1px solid #eeeeee; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; }
#sub .content .table.style03 tr th.first ,
#sub .content .table.style03 tr td.first { border-left:none; }
#sub .content .table.style03 tr th { font-size:19px; }
#sub .content .table.style03 tr td { font-size:17px; color:#333333; }
#sub .content .table.style03 thead tr th { color:#ffffff; background-color:#2e3092; font-weight:700; }
#sub .content .table.style03 tbody tr th { color:#333333; background-color:#fbfbfb; font-weight:500; }
@media screen and (max-width:1280px) {
    #sub .content .table.style03 { margin:18px 0 0; }
    #sub .content .table.style03 tr th ,
    #sub .content .table.style03 tr td { padding:18px; }
    #sub .content .table.style03 tr th { font-size:18px; }
    #sub .content .table.style03 tr td { font-size:16px;}
}
@media screen and (max-width:1024px) {
    #sub .content .table.style03 { margin:16px 0 0; }
    #sub .content .table.style03 tr th ,
    #sub .content .table.style03 tr td { padding:16px; }
    #sub .content .table.style03 tr th { font-size:17px; }
    #sub .content .table.style03 tr td { font-size:15px;}
}
@media screen and (max-width:768px) {
    #sub .content .table.style03 { margin:14px 0 0; }
    #sub .content .table.style03 tr th ,
    #sub .content .table.style03 tr td { padding:14px; }
    #sub .content .table.style03 tr th { font-size:16px; }
    #sub .content .table.style03 tr td { font-size:14px;}
}
@media screen and (max-width:640px) {
    #sub .content .table.style03 { margin:12px 0 0; }
    #sub .content .table.style03 tr th ,
    #sub .content .table.style03 tr td { padding:12px; }
    #sub .content .table.style03 tr th { font-size:15px; }
    #sub .content .table.style03 tr td { font-size:13px;}
}



#sub .content .tab { margin:0 auto 55px; }
#sub .content .tab ul { overflow:hidden; margin:-0.5%; }
#sub .content .tab ul li { float:left; vertical-align:top;}
#sub .content .tab ul li a { display:block; background-color:#eeeeee; font-weight:500; color:#666666; font-size:18px; padding:15px 10px; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#sub .content .tab ul li a.on { background-color:#2e3092; color:#eeeeee; font-weight:700; color:#ffffff; }

#sub .content .tab.tab2 { max-width:600px; }
#sub .content .tab.tab2 ul li { width:49%; margin:0.5%; }
#sub .content .tab.tab4 { max-width:1000px; }
#sub .content .tab.tab4 ul li { width:24%; margin:0.5%; }
@media screen and (max-width:1280px) {
    #sub .content .tab { margin:0 auto 50px; }
    #sub .content .tab ul li a { font-size:17px; padding:14px 9px; }

    #sub .content .tab.tab2 { max-width:540px; }
    #sub .content .tab.tab4 { max-width:900px; }
}
@media screen and (max-width:1024px) {
    #sub .content .tab { margin:0 auto 45px; }
    #sub .content .tab ul li a { font-size:16px; padding:13px 8px; }

    #sub .content .tab.tab2 { max-width:480px; }
    #sub .content .tab.tab4 { max-width:800px; }
}
@media screen and (max-width:768px) {
    #sub .content .tab { margin:0 auto 40px; }
    #sub .content .tab ul { margin:-0.5%; }
    #sub .content .tab ul li a { font-size:15px; padding:0 7px; line-height:44px; }
    #sub .content .tab ul li a br { display:none; }

    #sub .content .tab.tab2 ,
    #sub .content .tab.tab4 { max-width:700px; }
    #sub .content .tab.tab4 ul li { width:49%; }
}
@media screen and (max-width:640px) {
    #sub .content .tab { margin:0 auto 35px; }
    #sub .content .tab ul li a { font-size:14px; padding:0 6px; line-height:41px; }

    #sub .content .tab.tab2 ,
    #sub .content .tab.tab4 { max-width:600px; }
}



#sub .content .dan { overflow:hidden; }
#sub .content .dan > div { float:left; }
#sub .content .dan.dan2 { margin:-1%; }
#sub .content .dan.dan2 > div { width:48%; margin:1%; }
@media screen and (max-width:1280px) {
}
@media screen and (max-width:1024px) {
}
@media screen and (max-width:768px) {
    #sub .content .dan > div { float:none; }
    #sub .content .dan.dan2 { margin:0; }
    #sub .content .dan.dan2 > div { width:auto; margin:0; }
}
@media screen and (max-width:640px) {
}



#sub .content .image_box {  }
#sub .content .image_box ul { overflow:hidden; }
#sub .content .image_box ul li { float:left; }
#sub .content .image_box ul li img { width:100%; }
#sub .content .image_box.image2 ul { margin:-1.5%; }
#sub .content .image_box.image2 ul li { width:47%; margin:1.5%; }
#sub .content .image_box.image3 ul { margin:-0.5%; }
#sub .content .image_box.image3 ul li { width:32.33%; margin:0.5%; }
#sub .content .image_box.image3.step ul { margin:-1% -3%; }
#sub .content .image_box.image3.step ul li { width:27.33%; margin:1% 3%; position:relative; }
#sub .content .image_box.image3.step ul li:after { content:''; width:27px; height:30px; position:absolute; top:50%; left:calc(100% + (106% * 3 * 0.03)); transform:translate(-50%, -50%); background-image:url('../img/common/image_box_arrow.png'); background-size:cover; background-repeat:no-repeat; background-position:center; }
#sub .content .image_box.image3.step ul li:nth-child(3n+0):after { content:none; }
#sub .content .image_box.image4 ul { margin:-0.5%; }
#sub .content .image_box.image4 ul li { width:24%; margin:0.5%; }

#sub .content .image_box .it { font-weight:500; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#sub .content .image_box .it.b { background-color:#2e3092; color:#fff; }
#sub .content .image_box .it.w { background-color:#ffffff; color:#333333; }
#sub .content .image_box .it.f18 { font-size:18px; padding:18px; }
#sub .content .image_box .it.f20 { font-size:20px; padding:20px; }
#sub .content .image_box .it.mt3 { margin-top:3%; }
#sub .content .image_box .it.mb6 { margin-bottom:6%; }
#sub .content .image_box dl { text-align:center; padding:30px 15px; border:1px solid #dddddd; }
#sub .content .image_box dl dt { font-size:16px; color:#666666; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#sub .content .image_box dl dd { font-size:18px; color:#333333; font-weight:700; margin:12px 0 0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
@media screen and (max-width:1280px) {
    #sub .content .image_box.image3.step ul li:after { width:24px; height:27px; }

    #sub .content .image_box .it.f18 { font-size:17px; padding:16px; }
    #sub .content .image_box .it.f20 { font-size:19px; padding:18px; }

    #sub .content .image_box dl { padding:27px 14px; }
    #sub .content .image_box dl dt { font-size:15px; }
    #sub .content .image_box dl dd { font-size:17px; margin:11px 0 0; }
}
@media screen and (max-width:1024px) {
    #sub .content .image_box.image3.step ul li:after { width:21px; height:24px; }
    #sub .content .image_box.image4 ul li { width:32.33%; }

    #sub .content .image_box .it.f18 { font-size:15px; padding:14px; }
    #sub .content .image_box .it.f20 { font-size:17px; padding:16px; }

    #sub .content .image_box dl { padding:24px 13px; }
    #sub .content .image_box dl dt { font-size:14px; }
    #sub .content .image_box dl dd { font-size:16px; margin:10px 0 0; }
}
@media screen and (max-width:768px) {
    #sub .content .image_box.image2 ul { margin:-0.5%; }
    #sub .content .image_box.image2 ul li { width:49%; margin:0.5%; }
    #sub .content .image_box.image3 ul li { width:49%; }
    #sub .content .image_box.image3.step ul li { width:44%; }
    #sub .content .image_box.image3.step ul li:after { content:'' !important; width:18px; height:21px; left:calc(100% + (106% * 2 * 0.03)); }
    #sub .content .image_box.image3.step ul li:nth-child(2n+0):after { content:none !important; }
    #sub .content .image_box.image4 ul li { width:49%; }

    #sub .content .image_box .it.f18 { font-size:14px; padding:12px; }
    #sub .content .image_box .it.f20 { font-size:16px; padding:14px; }
    #sub .content .image_box .it.mt3 { margin-top:1%; }
    #sub .content .image_box .it.mb6 { margin-bottom:3%; }

    #sub .content .image_box dl { padding:21px 12px; }
    #sub .content .image_box dl dt { font-size:13px; }
    #sub .content .image_box dl dd { font-size:15px; margin:9px 0 0; }
}
@media screen and (max-width:640px) {
    #sub .content .image_box.image3.step ul li:after { width:15px; height:18px; }

    #sub .content .image_box .it.f18 { font-size:12px; padding:10px; }
    #sub .content .image_box .it.f20 { font-size:14px; padding:12px; }

    #sub .content .image_box dl { padding:18px 11px; }
    #sub .content .image_box dl dt { font-size:12px; }
    #sub .content .image_box dl dd { font-size:14px; margin:8px 0 0; }
}






#app .attendance_visual { background-image:url('../img/common/app_bg.png'); background-size:cover; background-repeat:no-repeat; position:relative; height:170px; z-index:1; }
#app .attendance_visual .logo { position:absolute; top:20px; left:15px; }
#app .attendance_visual .logo img { width:160px; }
#app .attendance_visual .home { position:absolute; top:20px; right:15px; display:block; }
#app .attendance_visual .home img { width:17px; }
#app .attendance_visual .text { position:absolute; bottom:66px; right:15px; text-align:right; }
#app .attendance_visual .text strong { font-size:15px; color:#ffffff; }
#app .attendance_visual .text p { font-size:12px; color:#d6d7ff; }

#app .attendance_form { background-color:#f8f8f8; border-top-left-radius:20px; border-top-right-radius:20px; top:0; left:0; position:relative; z-index:10; margin:-40px 0 0; padding:25px 15px; }
#app .attendance_form h1 { text-align:center; font-size:15px; font-weight:700; color:#181818; margin:0 0 20px; }
#app .attendance_form select ,
#app .attendance_form input[type=text] { height:38px; line-height:36px; border-radius:19px; width:100%; padding:0 15px; margin:0 0 7px; font-size:14px; }
#app .attendance_form select { color:#363cdf; border:1px solid #363cdf; background-color:#ffffff; }
#app .attendance_form input[type=text] { color:#313131; border:1px solid #eeedf3; background-color:#eeedf3; }
#app .attendance_form .button { margin:7px -5px 0; font-size:0; }
#app .attendance_form .button input { line-height:56px; width:calc(33.33% - 10px); margin:0 5px; padding:0; display:inline-block; font-size:12px; border:none; border-radius:5px; color:#ffffff; box-shadow:0 3px 4px rgba(115, 115, 115, 0.2); background:linear-gradient(#3d43ea, #0c13b4); }
#app .attendance_form .button input.gray { color:#3f3f3f; background:#ffffff; }

#app .attendance_content { background-color:#f8f8f8; padding:25px 15px; }
#app .attendance_content h2 { font-size:12px; font-weight:700; color:#181818; margin:0 0 10px; position:relative; }
#app .attendance_content .button { text-align:right; font-size:0; margin:20px -1% 10px; }
#app .attendance_content .button li { display:inline-block; margin:0 1%; width:18%; }
#app .attendance_content .button li a { font-size:10px; background-color:#ffffff; display:block; border-radius:3px; font-weight:400; line-height:22px; color:#5156cf; border:1px solid #1f25bb; padding:0 0 0 10px; position:relative; }
#app .attendance_content .button li a img { position:absolute; top:50%; left:10px; transform:translate(0, -50%); max-width:10px; max-height:10px; }
#app .attendance_content h2 .search { position:absolute; top:50%; right:0; overflow:hidden; transform:translate(0, -50%); width:calc(100% - 80px); }
#app .attendance_content h2 .search form > * { display:block; box-sizing:border-box; border:1px solid #dddddd; color:#999999; background-color:#fff; float:left; height:28px; font-size:10px; padding:0 11px; }
#app .attendance_content h2 .search form input { width:100%; padding-right:36px; }
#app .attendance_content h2 .search form button { border:none; float:none; position:absolute; top:0; right:0; height:100%; background-color:transparent; width:26px; text-align:center; background-color:#2e3092; padding:0; }
#app .attendance_content h2 .search form button img { width:13px; }

#app .attendance_content .list ul li { background-color:#ffffff; border-radius:10px; margin:15px 0; box-shadow:0 2px 8px rgba(115, 115, 115, 0.17); font-size:12px; }
#app .attendance_content .list ul li.empty { text-align:center; padding:30px; }
#app .attendance_content .list ul li a { display:block; padding:15px; font-size:inherit; }
#app .attendance_content .list ul li a div { line-height:25px; border-radius:13px; padding:0 13px; background-color:#eeedf3; display:inline-block; color:#5e62e3; font-weight:700; margin:0 0 20px; }
#app .attendance_content .list ul li a dl { overflow:hidden; padding:0 10px; line-height:22px; }
#app .attendance_content .list ul li a dl dt { float:left; width:90px; color:#202020; font-weight:700;}
#app .attendance_content .list ul li a dl dd { float:left; width:calc(100% - 90px); color:#474747; font-weight:500; }

#app .attendance_content .chart { background-color:#ffffff; border-radius:10px; padding:15px; }
#app .attendance_content .chart form { font-size:12px; display:block; letter-spacing:0; padding:0 0 15px; position:relative; color:#505050; font-weight:700; text-align:center; margin:0 auto; width:170px; }
#app .attendance_content .chart form select { height:25px; line-height:27px; font-size:14px; border:none; padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:none; width:auto; }
#app .attendance_content .chart form span.dot { height:25px; line-height:25px; display:inline-block; margin:0 -3px; vertical-align:bottom; }
#app .attendance_content .chart form a { display:inline-block; width:25px; height:25px; border-radius:5px; position:absolute; top:0; }
#app .attendance_content .chart form a:after { display:block; content:''; width:8px; height:8px; border-top:2px solid #aaa; border-right:2px solid #aaaaaa; position:absolute; top:50%; }
#app .attendance_content .chart form a.left { left:0; }
#app .attendance_content .chart form a.right { right:0; }
#app .attendance_content .chart form a.left:after { transform:translate(-50%,-50%) rotate(-135deg); left:50%; }
#app .attendance_content .chart form a.right:after { transform:translate(-50%,-50%) rotate(45deg); left:50%; }

#app .attendance_content .calendar > tbody {  } 
#app .attendance_content .calendar > tbody > tr {  } 
#app .attendance_content .calendar > tbody > tr > td { padding:0 5px; vertical-align:top; } 
#app .attendance_content .calendar > tbody > tr > td.pointer { border:1px solid #000000; }
#app .attendance_content .calendar > tbody > tr > td dl { }
#app .attendance_content .calendar > tbody > tr > td dl dt { font-size:12px; font-weight:700; margin:5px 0; }
#app .attendance_content .calendar > tbody > tr > td dl dd { font-size:11px; font-weight:400; margin:5px 0; min-height:70px; }

#app .attendance_content .detail > tbody {  } 
#app .attendance_content .detail > tbody > tr {  } 
#app .attendance_content .detail > tbody > tr > td { padding:10px; vertical-align:top; } 
#app .attendance_content .detail > tbody > tr > td > div { border-top:2px solid #f8f8f8; }
#app .attendance_content .detail > tbody > tr > td dl { padding:10px 0; }
#app .attendance_content .detail > tbody > tr > td dl dt { font-size:15px; font-weight:700; margin:10px 0; }
#app .attendance_content .detail > tbody > tr > td dl dd { font-size:13px; font-weight:400; margin:10px 0; min-height:70px; }

#app .attendance_content .person { border-top:2px solid #363cdf; }
#app .attendance_content .person > tbody {  } 
#app .attendance_content .person > tbody > tr {  } 
#app .attendance_content .person > thead > tr > th { background-color:#f8f8f8; }
#app .attendance_content .person > tbody > tr > td { border-bottom:1px solid #eeedf3; }
#app .attendance_content .person > thead > tr > th ,
#app .attendance_content .person > tbody > tr > td { padding:10px; vertical-align:top; text-align:left; }
#app .attendance_content .person > tbody > tr > td > div { position:relative;  }
#app .attendance_content .person > tbody > tr > td > div.text:after { content:'. . .'; display:block; color:#313131; font-weight:700; position:absolute; bottom:-14px; left:0; right:0; border-top:1px solid #eeedf3; text-align:center; line-height:8px; }
#app .attendance_content .person > tbody > tr > td > div.text span { overflow:hidden; margin:0 0 20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
#app .attendance_content .person > tbody > tr > td > div.text.more:after { content:none; }
#app .attendance_content .person > tbody > tr > td > div.text.more span { margin:0; display:block; -webkit-box-orient:unset; -webkit-line-clamp:unset; }

#app .attendance_content .sat { color:#0086cd; }
#app .attendance_content .sun { color:#e66e6e; }
#app .attendance_content .now { color:#ed9148; }
#app .attendance_content .date { text-align:center; padding:0 !important; }
#app .attendance_content .date th ,
#app .attendance_content .date td { font-weight:400; }
#app .attendance_content .date td a { display:inline-block; color:inherit; border-radius:50%; position:relative; }
#app .attendance_content .date td a.action { background-color:#000000; color:#ffffff; }
#app .attendance_content .date td a.schedule:before { content:''; border-radius:50%; background-color:#363cdf; position:absolute; left:50%; transform:translate(-50%, 0); }
#app .attendance_content .date .small th ,
#app .attendance_content .date .small td { font-size:11px; padding:0 0 5px; }
#app .attendance_content .date .small td a { width:20px; line-height:20px; }
#app .attendance_content .date .small td a.schedule:before { width:3px; height:3px; bottom:-5px; }

#app .attendance_content .date .big th ,
#app .attendance_content .date .big td { font-size:12px; padding:0 0 10px; }
#app .attendance_content .date .big td a { width:30px; line-height:30px; }
#app .attendance_content .date .big td a.schedule:before { width:6px; height:6px; bottom:-10px; }
/* #app .attendance_content .calendar table {  }
#app .attendance_content .calendar table thead th { background-color:#eeedf3; }
#app .attendance_content .calendar table thead th ,
#app .attendance_content .calendar table tbody td { border:1px solid #eeedf3; font-size:11px; }
#app .attendance_content .calendar table thead .sat { background-color:#0086cd; }
#app .attendance_content .calendar table thead .sun { background-color:#e66e6e; }
#app .attendance_content .calendar table thead .now { background-color:#ed9148; } */

/* agree-box */
.agree-box h3 {font-size:18px; font-weight:700; display:block; margin:0 0 10px;}
.agree-box .agree {border:1px solid #ddd; padding:20px; max-height:200px; overflow-y:auto;}
.agree-box .agree p {font-size:15px; line-height:1.5; color:#666;}
.agree-box .check {margin:10px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.agree-box .check label {font-size:15px; line-height:1.5; color:#333; cursor:pointer;}
.agree-box .check input {width:14px; height:14px; margin:0 5px 0 0; cursor:pointer;}
@media (max-width:640px){
.agree-box h3 {font-size:14px;}
.agree-box .agree {padding:10px;}
.agree-box .agree p {font-size:12px;}
.agree-box .check label {font-size:12px;}
.agree-box .check input {width:12px; height:12px;}
}