.visualNotice{position:relative;height:480px;margin:0 0 100px;}
.visual-list{position:relative;z-index:0;width:100%;height:480px;overflow:hidden;}
.visual-list > div{width:100%;height:100%;}
.visual-list a{display:block;position:relative;width:100%;height:100%;margin:0;padding:0;font-size:0;line-height:0;}

.visual-list .pc_img {width:100%; height:100%; display:inline-block; background-repeat:no-repeat; background-position:center center; background-size:auto;}
.visual-list .m_img {display: none}
.visual-list .m_img img {width: 100%; max-width: 100%;}
.visual-control{position:relative;z-index:1;width:100%;max-width:1400px;margin:0 auto;}
.visual-control .control_wrap{display:block;position:absolute;left:calc(50% - 105px);  width:210px; bottom:35px;height:47px;padding:13px 30px 0;background:#222;border-radius:25px;font-size:0;vertical-align:top;}
.visual-control .count,.visual-control button,.visual-control a{display:inline-block;vertical-align:top;}
.visual-control .count{margin:2px 15px 0;color:#fff;font-size:14px;font-weight:500;line-height:16px;}
.visual-control .count .current{color:#2299fd;}
.visual-control .count .total{position:relative;margin:0 0 0 4px;padding:0 0 0 22px;}
.visual-control .count .total::before{display:block; content:""; position:absolute;top:50%;left:0;width:15px;height:1px;background:#fff;}
.visual-control button,.visual-control a{position:relative;width:20px;height:20px;}
.visual-control svg{position:absolute;top:50%;left:50%;width:8px;height:12px;transform:translate(-50%, -50%);}
.visual-control .next{transform:scaleX(-1);}
.visual-control .more{margin:0 0 0 15px;}
.visual-control .more svg{width:12px;height:12px;}

/* 강의 목록 공통 스타일 */
.lecture{margin:0 0 100px;}
.lecture-wrap{position:relative;width:100%;max-width:1400px;margin:0 auto;}

.lecture h3{display:block;color:#1c1c1c;font-size:24px; letter-spacing:-0.025em; font-weight:600; margin-bottom:15px}
.lecture h3 span {color:#13488d}

.lecture .slide-control{position:absolute;top:5px;right:0;width:180px;font-size:0;text-align:right;}
.lecture .slide-control .count{display:inline-block;margin:3px 10px 0;font-size:18px;line-height:20px;}
.lecture .slide-control .count span{display:inline-block;vertical-align:top;}
.lecture .slide-control .current{color:#63554a;font-weight:700;}
.lecture .slide-control .total{position:relative;padding:0 0 0 26px;}
.lecture .slide-control .total::before{display:block; content:""; position:absolute;top:50%;left:2px;width:18px;height:1px;background:#b1b1b1;transform:translateY(-50%) rotate(-45deg);}
.lecture .slide-control button,.lecture .slide-control a{display:inline-block;position:relative;width:24px;height:24px;margin:0 2px;vertical-align:top;}
.lecture .slide-control button svg{position:absolute;top:50%;left:50%;width:18px;height:15px;transform:translate(-50%, -50%);}
.lecture .slide-control a::before,.lecture .slide-control a::after{display:block; content:""; position:absolute;top:50%;background:#111;transform:translateY(-50%);}
.lecture .slide-control a::before{right:0;width:16px;height:2px;}
.lecture .slide-control a::after{right:7px;width:2px;height:16px;}

.lecture_list{width:calc(100% + 15px); overflow:hidden;margin:0 0 0 -15px;font-size:0;}
.lecture_list .item{display:inline-block;width:calc(25% - 15px); margin:0 0 0 15px;vertical-align:top;padding:10px 0}
.lecture_list a{display:block;width:100%;height:100%;     transition: all .25s ease;}
.lecture_list a:hover{transform: translate(0px, -10px); }
.lecture_list .photo{position:Relative; display:block;width:100%;height:auto; overflow:hidden;margin:0 0 10px;padding:0; border-radius:6px;line-height:0;}
.lecture_list .photo img{width:100%;height:100%;}
.lecture_list .photo .area_name {position:absolute; top:15px; right:15px; font-size:15px; height: 28px;    margin: 0;    padding: 0 10px;    line-height: 28px;    background: #f9f9fa;    border-radius: 4px;    color: #2b2b2b;    text-align: center; box-shadow:1px 5px 5px rgba(0,0,0,0.15) }

.lecture_list .post_info {display: block; margin: 10px 0 0; font-size: 0;}
.lecture_list .post_info em {display: inline-block;  position: relative;  margin: 5px 0 0 10px; color: #3b3b3b;  font-size: 15px; line-height: 16px; vertical-align: top;}
.lecture_list .post_info .state {height: 28px;  margin: 0; padding: 0 15px; line-height:28px; background: #2b2b2b; border-radius: 4px; color: #fff; text-align: center;}
.lecture_list .post_info .state.current {background: #002c52;}
.lecture_list .post_info .state.expect {background: #0073af;}
.lecture_list .post_info .name + .category {padding: 0 0 0 10px;}
.lecture_list .post_info .name + .category::before {display: block; content:""; position: absolute;  top: 5px;  left: 0; width: 1px; height: 8px; background: #d9d9d9;}
.lecture_list .post_title {display: block; word-break:keep-all;  max-height: 42px; overflow: hidden; margin: 10px 0 0; font-weight: 600; color: #1c1c1c; font-size: 17px; line-height: 21px;}
.lecture_list .date {display: block; position: relative; margin: 16px 0 0; padding: 0 0 0 20px; color: #393939; font-size: 14px; line-height: 16px;}
.lecture_list .date::before {display: block;   content:""; position: absolute;  top: 1px;  left: 0; width: 14px; height: 14px; background: url(../image/sub/sprite_subPng.png) no-repeat -63px 0;}
.lecture_list .date + .date {margin-top:10px}



.lecture .bottom_more{display:block;width:100%;max-width:340px;height:48px;margin:40px auto 0;padding:14px 0 0;border:1px solid #dbdee2;border-radius:4px;font-size:0;text-align:center;}
.lecture .bottom_more:hover::after{display:none;}
.lecture .bottom_more span{color:#363636;font-size:16px;font-weight:600;line-height:18px;vertical-align:top;}
.lecture .bottom_more svg{display:inline-block;width:8px;height:14px;margin:1px 0 0 25px;vertical-align:top;}

.lectureAlarm{margin:0 0 100px;background:#f3f6ff;}
.lectureAlarm a{display:block;position:relative;z-index:1;width:100%;max-width:900px;height:100%;margin:0 auto;padding:52px 0 0;letter-spacing:-0.1em;}
.lectureAlarm span{display:block;margin:0 0 15px;color:#0c1328;font-size:17px;font-weight:600;line-height:19px;}
.lectureAlarm p{color:#2d2d2d;font-size:34px;font-weight:700;line-height:36px;}

.lecture-tab{margin:10px 0 20px;font-size:0;}
.lecture-tab button{display:inline-block;width:64px;height:42px;margin:0 5px 0 0;background:#f9f9fa; border-radius:5px;color:#333;font-size:15px; text-align:center;vertical-align:top;}
.lecture-tab button.active{background:#13488d;color:#fff;}
.lecture-tab button:last-child{margin:0;}
.lecture.offline .slide-control{top:57px;}


.news{padding:65px 0 92px;background:#fafafa;}
.news h3{display:block;position:relative;width:100%;max-width:380px;margin:0 auto 40px;color:#050505;font-family:GMKSans;font-size:25px;letter-spacing:-0.02em;line-height:27px;text-align:center;}
.news h3::before{display:block;position:absolute;top:8px;right:0;width:6px;height:6px;background:#002e74;border-radius:100%;}
.news h3 span{color:#064781;font-size:45px;letter-spacing:-0.03em;line-height:47px;}

.news-tab{overflow:hidden;width:100%;max-width:770px;height:56px;margin:0 auto 40px;border:1px solid #ededed;border-radius:4px;font-size:0;text-align:center;}
.news-tab button{display:inline-block;position:relative;width:33.33%;height:100%;color:#2b2b2b;font-size:18px;font-weight:600;line-height:18px;vertical-align:top;}
.news-tab button::before{display:block; content:""; position:absolute;top:0;left:0;width:1px;height:100%;background:#eee;}
.news-tab button.active{background:#346cff;color:#fff;}
.news-tab button:first-child::before,.news-tab button.active::before,.news-tab button.active + .news-tab button::before{display:none;}

.news-data{width:100%;max-width:1240px;height:420px;overflow:hidden;margin:0 auto;font-size:0;}
.news-data li{display:inline-block;position:relative;width:calc(25% - 20px);height:185px;margin:7px 10px 18px;vertical-align:top;}
.news-data a{display:block;position:relative;z-index:0;width:100%;height:100%;margin:0;padding:35px 23px 23px;background:#fff;border:1px solid #eaeaea;border-radius:4px;overflow:hidden;font-size:15px;line-height:17px;}
.news-data a:hover{box-shadow:5px 5px 0 #efefef;}
.news-data a:hover::after{display:none;}
.news-data .category{    display: inline-block;    font-size: 15px;    vertical-align: top; position:absolute;top:-6px;left:25px;z-index:1; height: 28px;  margin: 0; padding: 0 15px; line-height:28px; background: #2b2b2b; border-radius: 4px; color: #fff; text-align: center;}
.news-data .category.notice{background:#4678a4;}
.news-data .category.db{background:#367c3b;}
.news-data .category.faq{background:#333}
.news-data .title{display: block;  word-break: keep-all;  max-height: 42px;  overflow: hidden; margin:0 0 10px; font-weight: 600; color: #1c1c1c; font-size: 17px; line-height: 21px; word-break: keep-all}
.news-data .text{display:block;height:34px;overflow:hidden;margin:0 0 20px;color:#383838;font-weight:400; word-break: keep-all}
.news-data .date{position:absolute; bottom:20px; left:20px;  padding:0 0 0 20px;color:#b4b4b4;font-size:13px;line-height:15px;}
.news-data .date svg{position:absolute;top:0;left:0;opacity:.4;width:14px;height:14px;}

.centerLecture{background:#f5f8fc;}

/* W-1400/100=14 H-710/100=7.1 */
.center-wrap{position:relative;width:100%;max-width:1240px;height:710px;margin:0 auto;padding:0;overflow:hidden;}
.center-wrap::before{display:block; content:""; width:100%;height:19.71830986%;}
.centerLecture h3{display:block;margin:0 0 13px 40px;color:#000;font-size:42px;font-weight:800;line-height:44px;}/* margin:140px 0 13px 40px */
.centerLecture .title_text{margin:0 0 2.22222222% 40px;color:#366e9d;font-size:16px;line-height:18px;}

.center_list{width:28.42857143%;height:34.22535211%;overflow:hidden;margin:0 0 0 2.85714286%;border-radius:7px;box-shadow:0 0 15px rgba(0, 95, 175, .25);}/* width:398px;height:243px;margin:0 0 0 40px; 398/14 243/7.1*/
.center_list .slick-list{height:100%;}
.center_list .item{display:block;position:relative;width:100%;height:100%;padding:1px 0 0; background:#fff;}
.center_list .item::before{display:block; content:""; position:absolute;left:0;bottom:0;right:0;height:60px;background:#014099;}
.center_name{display:block;margin:28px 34px 17px;color:#000;font-size:20px;line-height:22px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.center_info{margin:0 34px; min-height: 115px;  display: inline-block;  vertical-align: top;}
.center_info li{position:relative;padding:4px 0 4px 70px; font-size:15px;}
.center_info span{display:block;position:absolute;top:6px;left:0;color:#000; }
.center_lecture{position:relative;z-index:1; width:100%; padding:15px 0;font-size:0;text-align:center; display: inline-block;  vertical-align: top;}
.center_lecture li{display:inline-block;padding:1px 10px;color:#fff;font-size:16px;line-height:18px;vertical-align:top;}
.center_lecture span{display:inline-block;width:28px;height:28px;margin:0 0 0 5px;padding:5px 0 0;background:#fff;border-radius:5px;color:#014099;}
.center_control{position:absolute;top:50%;left:1.28571429%;width:31.42857143%;height:0;}/* top:355 left:18 width:440 */
.center_control button{display:block;position:absolute;top:0;width:36px;height:36px;background:#fff;border-radius:100%;box-shadow:0 0 15px rgba(0, 95, 175, .25);}
.center_control .prev{left:0;}
.center_control .next{right:0;}
.center_control svg{display:block;position:absolute;top:50%;left:50%;width:9px;height:14px;transform:translate(-50%, -50%);}
.center_control .prev svg{transform:translate(-50%, -50%) scaleX(-1);}

.map_marker{position:absolute;top:10.56338028%;left:34.64285714%;width:34.28571429%;height:89.57746479%;background:url(../image/main/eduMap.png) no-repeat 0 0;background-size:100% auto;}/* top:75px;left:485px;width:457px -> 480 ;height:611px -> 636; w-14 / h-7.1*/
.map_marker button{display:block;position:absolute;width:46px;height:28px;color:#fff;font-size:15px;text-align:center;}/* width:50px;height:30px;font-size:14px;line-height:16px; */
.map_marker button::before{display:block; content:""; position:absolute;top:0;left:0;width:100%;height:100%;background:#5871ad;border-radius:7px;}
.map_marker button::after{display:block; content:""; position:absolute;top:-12px;left:-5px;width:18px;height:24px;background:url(../image/main/sprite_mainPng.png) no-repeat 0 0;}
.map_marker button.current::before{background:#2149a6;}
.map_marker button span{position:relative;z-index:1;}
/* 부모요소 width:457px;height:611px; W-457/100=4.57 H-611/100=6.11 */
.map_marker .su{top: 15.67594108%; left: 29.72866521%;}/* top:108px;left:145px; */
.map_marker .ic{top: 16.93126023%; left: 17.69365427%;}/* top:134px;left:90px; */
.map_marker .gg{top: 20.09492635%; left: 42.54485777%;}/* top:135px;left:199px; */
.map_marker .gw{top: 15.80360065%; left: 60%;}/* top:121px;left:291px; */
.map_marker .cb{top:28.91489362%;left:44.42013129%;}/* top:195px;left:203px; */
.map_marker .sj{top: 33.29787234%;left: 32.57330416%;}/* top:234px;left:158px; */
.map_marker .dj{top:39.86252046%;left:37.19912473%;}/* top:268px;left:170px; */
.map_marker .gj{top:58.12111293%;left:19.91247265%;}/* top:404px;left:91px; */
.map_marker .us{top:53.88379705%;left: 72.55579869%;}/* top:372px;left:359px; */
.map_marker .bs{top:60.92144026%;left:64.74179431%;}/* top:415px;left:337px; */
.map_marker .tg{top:45.92144026%;left: 60.74179431%;}/* top:415px;left:337px; */
.map_marker .jy{top:55.92144026%;left: 49.74179431%;}/* top:415px;left:337px; */

.area_lecture{display:block;position:absolute;top:18.30985915%;right:2.5%;width:26.42857143%;height:60.56338028%;padding:1px 0;background:#fff;border-radius:7px;box-shadow:0 0 15px rgba(0, 95, 175, .25);}/* top:130px;right:35px;width:370px;height:430px; */
.area_lecture ul{width:89.18918919%;height:90.69767442%;margin:4.65116279% auto 0;padding:3.48837209% 0;overflow-y:auto;}/* width:330px;height:390px; */
.area_lecture ul::-webkit-scrollbar{width:3px;height:3px;}
.area_lecture ul::-webkit-scrollbar-track{background:#fff;border-radius:7px;}
.area_lecture ul::-webkit-scrollbar-thumb{background:#5871ad;border-radius:7px;}
.area_lecture ul::-webkit-scrollbar-thumb:hover{background:#385280;}
.area_lecture li{display:block;margin:0 10px;padding:10px 0;border-bottom:1px solid #f2f2f2;}
.area_lecture a{display:block;position:relative;padding:2px 0 0 58px;}
.area_lecture .area{display:block;position:absolute;top:0;left:0;width:50px;height:30px;padding:6px 0 0;background:#5871ad;border-radius:7px;color:#fff;font-size:14px;line-height:16px;text-align:center;}
.area_lecture .title{display:block;margin:0 0 5px;font-size:16px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.area_lecture .period{display:block;position:relative;height:20px;padding:3px 0 0 60px;font-size:12px;line-height:14px;}
.area_lecture .period em{display:block;position:absolute;top:0;left:0;width:56px;height:20px;padding:3px 0 0;background:#0060af;border-radius:5px;color:#fff;text-align:center;}
/* 메인 컨텐츠 영역 h*, title hidden 처리 */
main h2,.visualNotice h3,.visual-control button span,.visual-control a span,.lecture .slide-control button span,.lecture .slide-control a span,.lectureAlarm h3,.center_control span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* slick style 초기화 */
.slick-slide{display:flex; height:100%;}
.slick-track{display:flex;height:100%; float:left;}
.slick-active{position:relative;z-index:1;}

@media all and (max-width:1450px) {
    .centerLecture{overflow:hidden;}
    .lecture-wrap{width:calc(100% - 50px);max-width:initial;margin:0 25px;}
}
@media all and (max-width:1400px) {
    .visualNotice{height:auto;}
    .visual-list{height:420px;}
    .visual-control .control_wrap{width: 190px; bottom: 35px; height: 40px;  padding: 10px 20px 0;}
    .lectureAlarm-wrap::before{right:2%;}
    .lectureAlarm a{width:calc(100% - 50px);max-width:1300px;}
}
@media all and (max-width:1300px) {
    .centerLecture{padding:80px 0;}
    .center-wrap::before{display:none;}
    .center_list{height:240px;background:#fff;}
    .center_control{top:200px;}
    .lecture_list.offline-list{height:auto;}
    .lecture_list.offline-list .item{height:auto;}
    /*

    .area_lecture{position:static;}
    .center_list{position:absolute;top:15px;right:15px;z-index:2;width:33%;height:240px;margin:0;background:#fff;}

    .map_marker{left:initial;right:1.15384615%;}*/
}

@media all and (max-width:1240px) {

    .visual-list{height:360px;}
    .visual-list .pc_img { background-size: 1600px auto;}
    .news-data {width: calc(100% + 20px);     margin: 0 0 0 -10px;}
    .lecture .slide-control {right: 20px}
}
@media all and (max-width:1160px) {
    .center_list{position:relative;z-index:3;width:330px;}
    .center_control{width:360px;z-index:3;}
}
@media all and (max-width:1110px) {
    .lecture.offline .slide-control{top:5px;}
    .lecture-tab button{margin:0 5px 5px 0;}
    .visual-list .pc_img { background-size: 1500px auto;}
}
@media all and (max-width:1000px) {
    .visual-list .pc_img { background-size: 1300px auto;}
    .centerLecture{padding:80px 0 330px;}
    .center-wrap{overflow:initial;}
    .area_lecture{position:static;width:330px;margin:20px 0 0 2.85714286%;}
    .map_marker{top:18%;left:initial;right:1.5%;width:40.60913706%;height:107.21442886%;}
    .lectureAlarm-wrap{height:auto;}
    .lectureAlarm-wrap::before{width:140px;height:100%;background-size:100% 100%;}
    .lectureAlarm a{padding:30px 0;}
    .lectureAlarm span{margin:0 0 7px;}
    .lectureAlarm p{font-size:24px;line-height:26px;}
}
@media all and (max-width:880px) {
    .lecture-tab button,.lecture-tab button:last-child{width:calc(7.692307692307692% - 5px);margin:0 0 5px 5px;}
    .lecture-tab button:first-child{width:7.692307692307692%;margin:0 0 5px 0;}
}
@media all and (max-width:840px) {
    .news-tab{width:calc(100% - 50px);margin:0 25px 40px;}
    .visualNotice {margin:0 0 50px 0;}
    .visual-list{height:300px;}
    .visual-list .pc_img { background-size: 1200px auto;}
}
@media all and (max-width:800px) {
    .visual-control .control_wrap{left:0;right:0;bottom:20px;width:250px;height:32px;margin:0 auto;padding:6px 20px 0;text-align:center;}
    .visual-list .pc_img { display: none;}
    .visual-list .m_img { display: block}
    .visual-list{height:auto}
    .lecture {margin:0 0 50px 0}
    .lecture h3{font-size:20px;}
    .lecture .slide-control{ top: 0px;   width: auto;  right: 20px;}
    .lecture .slide-control .count{margin:3px 5px 0;}
    .lecture .slide-control .total{padding:0 0 0 15px;}
    .lecture .slide-control .total::before{left:0;width:12px;transform:translateY(-50%) rotate(-65deg)}
    .news{text-align:center; padding:45px 0;}
    .news h3{display:inline-block;width:auto; margin:0 auto 25px; padding:0 5px 0 0;font-size:20px;line-height:22px;}
    .news h3::before{top:-2px;}
    .news h3 span{font-size:24px;line-height:26px;}
    .news-tab {height: 48px;}
    .news-tab button {font-size: 17px;}
    .news-data{height:auto;}
    .news-data{text-align:left;}
    .news-data li{height:180px; width:calc(50% - 20px); }
    .news-data a{padding:35px 20px 15px;}
    .news-data .category {left:20px}
    .news-data .title{ font-size:16px;line-height:20px;}
    .centerLecture {padding:50px 0 300px;}
    .centerLecture h3{margin:0 25px 7px;font-size:20px;line-height:22px;}
    .centerLecture .title_text{position:relative;z-index:1;margin:0 25px 2.22222222%;}

}
@media all and (max-width:760px) {
    .news-data .title{font-size:16px;line-height:20px;}
}
@media all and (max-width:660px) {
    .lecture .slide-control .prev,.lecture .slide-control .next{display:none;}
    .map_marker{display: none;}
    .centerLecture {padding:50px 0 80px}
    .center-wrap{height:auto !important;}
    .center_list{width:calc(100% - 40px);margin:0 20px;}
    .center_name{padding:20px 30px 15px; margin:0px; font-size:18px;line-height:20px;}
    .center_info{padding:0 30px; margin: 0px; width: 100%;}
    .center_lecture{position:absolute;left:0;bottom:0px;width:100%;margin:0;}
    .center_control { width: calc(100% - 14px);  z-index: 3;  left: 7px;  top: 150px;    }

    .area_lecture{position:relative;top:initial;right:initial;width:calc(100% - 40px);height:480px;margin:20px 20px 0;}
    .area_lecture ul{width:calc(100% - 30px);height:calc(100% - 30px);margin:15px;padding:0;}
}
@media all and (max-width:600px) {
    .lecture-tab button,.lecture-tab button:last-child{width:calc(14.28571428571429% - 5px);margin:0 0 5px 5px;}
    .lecture-tab button:first-child,.lecture-tab button:nth-child(8){width:14.28571428571429%;margin:0 0 5px 0;}
}
@media all and (max-width:580px) {
    .news-data li{width:calc(50% - 20px);}
    .lectureAlarm-wrap::before{opacity:0.4;}
}
@media all and (max-width:480px) {
    .lecture_list .item{width:280px}
    .lecture_list {margin:0px; width: calc(100% + 20px);}
    .lecture .slide-control {display: none}
    .lecture .bottom_more {margin:20px auto 0;}
    .news-tab {height: 40px;}
    .news-tab button {font-size: 16px;}
    .news-data {height: 810px}

    .visual-control .control_wrap {bottom:-16px;}
}


@media all and (max-width:400px) {
    .news-data li {width:calc(100% - 20px)}
}



/* 대수 추가팝업 */
         /*modal popup*/
         /*modal popup*/
     .mainModalPopupWrap{
         width: auto;
         height: auto;
         border: 1px solid #ddd;
         position: absolute;
         left: 50px;
         top: 100px;
         z-index: 100000;
     }
.mainModalPopupWrap .popupBody{ width: auto; height: auto;  border: 1px solid #ddd; min-width: 100px; min-height: 100px; background: #fff}
.mainModalPopupWrap .popupFooter{
    background: #fff;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    display: inline-block;
    line-height: 30px;
    padding: 0 10px;
    color: #444;
    overflow: hidden;
    border: 1px solid #ddd;
    border-top: none;
}
.mainModalPopupWrap .popClose{
    width: auto;
    height: auto;
    position: relative;
    background: none;
    float:right;
}

.mainModalPopupWrap img{ width: auto;  vertical-align: top}


.pop_wrap {width:auto; display:inline-block; position: relative; padding-bottom:30px;}
.mainModalPopupWrap{
    /*width: 456px;*/
    height: auto;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 100000;
}
.mainModalPopupWrap .popupFooter .left {float:left}

@media ( min-width: 1950px){
    .mainModalPopupWrap:nth-child(4n - 3){ left: 50%; transform: translateX(-50%); margin-left: -716px}
    .mainModalPopupWrap:nth-child(4n - 2){ left: 50%; transform: translateX(-50%); margin-left: -240px}
    .mainModalPopupWrap:nth-child(4n - 1){ left: 50%; transform: translateX(-50%); margin-left: 240px}
    .mainModalPopupWrap:nth-child(4n){ left: 50%; transform: translateX(-50%); margin-left: 716px}

    .mainModalPopupWrap:nth-child(n+5):nth-child(-n+8){ top: 465px}
    .mainModalPopupWrap:nth-child(n+9):nth-child(-n+12){ top: 877px}
    .mainModalPopupWrap:nth-child(n+13):nth-child(-n+16){ top: 1289px}
}
@media ( max-width: 1950px){
    .mainModalPopupWrap:nth-child(3n - 1){ left: 50%; transform: translateX(-50%)}
    .mainModalPopupWrap:nth-child(3n){ left: auto; }

    .mainModalPopupWrap:nth-child(n+4):nth-child(-n+6){ top: 465px}
    .mainModalPopupWrap:nth-child(n+7):nth-child(-n+9){ top: 877px}
    .mainModalPopupWrap:nth-child(n+10):nth-child(-n+12){ top: 1289px}
    .mainModalPopupWrap:nth-child(n+13):nth-child(-n+15){ top: 1701px}
    .mainModalPopupWrap:nth-child(16){ top: 2113px}
}
@media ( max-width: 1500px){
    .mainModalPopupWrap:nth-child(2n - 1){ left: 50%; transform: translateX(-50%); margin-left: -240px}
    .mainModalPopupWrap:nth-child(2n){ left: 50%; transform: translateX(-50%); margin-left: 240px}

    .mainModalPopupWrap:nth-child(n+3):nth-child(-n+4){ top: 465px}
    .mainModalPopupWrap:nth-child(n+5):nth-child(-n+6){ top: 877px}
    .mainModalPopupWrap:nth-child(n+7):nth-child(-n+8){ top: 1289px}
    .mainModalPopupWrap:nth-child(n+9):nth-child(-n+10){ top: 1701px}
    .mainModalPopupWrap:nth-child(n+11):nth-child(-n+12){ top: 2113px}
    .mainModalPopupWrap:nth-child(n+13):nth-child(-n+14){ top: 2495px}
    .mainModalPopupWrap:nth-child(n+15):nth-child(-n+16){ top: 2877px}

    .mainModalPopupWrap img {width:auto !important;  }
}

@media ( max-width:1000px){
    .mainModalPopupWrap{ width: calc(100vw - 30px)!important; left:15px !important; top: 85px !important; text-align: center; margin-left: 0 !important; transform: translate(0%,0) !important}
    .mainModalPopupWrap .popupBody,
    .mainModalPopupWrap .popupFooter {     display: inline-block;}
}

@media ( max-width: 800px) {
    .mainModalPopupWrap img {max-width:100%; height: auto  }

}
}


.popClose{
    width: 65px;
    height: 65px;
    display: inline-block;
    background: url("/resource/templete/manpa/img/common/icon_close_w.png") no-repeat center;
    position: absolute;
    right: 0;
    top: 0;
}
.popClose a:focus{ border: 2px solid #000;}

.position_center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%}