﻿@charset "utf-8";


/* 메인비주얼 */
.msection1{position:relative;width:100%;}
.mvisual{height:556px;}
.mvisual .mvisual_txt{color:#2c3646;text-align:center;width:50%;margin:70px auto 40px;float:left;letter-spacing:-0.5px;}
.mvisual .mvisual_txt .txt1{display:block;padding-bottom:20px;}
.mvisual .mvisual_txt .txt2{font-weight:600;font-size:17px;line-height:27px;letter-spacing:-0.7px;}
.mvisual .swiper-slide.bg{width:100%;height:556px;object-fit:cover;background-repeat:no-repeat;background-position:center center;}
.mvisual .swiper-slide.bg01{background-image:url(/nanum/site/builder/main/sample01/img/mv_bg01.jpg);}
.mvisual .swiper-slide .mv_img{position:absolute;bottom:-3px;}

/*팝업존*/
.popupzone{width:1200px;position:absolute;top:50px;left:50%;margin-left:-600px;}
.popupzone .pop_box{position:relative;width:500px;float:right;overflow:hidden;border-radius:20px;height:270px;}
.popupzone .pop_box .swiper-slide{border-radius:20px;}
.popupzone .pop_box .swiper-slide a{display:block;}
.popupzone .pop_box .swiper-slide a img{width:100%;height:100%;}
.mcontrol{position:relative;margin-top:-40px;background:rgb(255 255 255 / 0.8);z-index:11;width:130px;height:40px;}
.mcontrol .pagination{float:left;width:auto;height:30px;font-size:15px;color:#8c8b8b;padding:11px 0 0 17px;font-weight:500;}
.mcontrol .pagination .swiper-pagination-current{font-weight:bold;color:#000;}
.mcontrol .btn_area{float:right;width:70px;height:30px;}
.mcontrol .btn_area .btn{position:absolute;top:14px;overflow:hidden;width:7px;height:13px;background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;cursor:pointer;}
.mcontrol .btn_area .btn.prev{background-image:url(/nanum/site/builder/main/sample01/img/btn_prev.png);right:55px;}
.mcontrol .btn_area .btn.next{background-image:url(/nanum/site/builder/main/sample01/img/btn_next.png);right:15px;}
.mcontrol .btn_area .btn.stop{background-image:url(/nanum/site/builder/main/sample01/img/btn_stop.png);}
.mcontrol .btn_area .btn.play{background-image:url(/nanum/site/builder/main/sample01/img/btn_play.png);}
.mcontrol .btn_area .btn.stop,
.mcontrol .btn_area .btn.play{right:35px;}

/*비주얼 바로가기 아이콘*/
.visual_icon{position:absolute;left:50%;top:66%;margin-left:-600px;width:1200px;z-index:20;}
.visual_icon ul{float:right;width:500px;height:137px;box-shadow:5px 5px 10px rgba(0,0,0,0.1);background-color:#283168;z-index:30;border-radius:20px;}
.visual_icon ul li{position:relative;width:33.3%;float:left;background-position:50% 30%;background-repeat:no-repeat;line-height:70px;}
.visual_icon ul li::before{content:"";position:absolute;right:0;top:16%;width:1px;height:97px;background:#484f7b;}
.visual_icon ul li::last-child::before{background:none;}
.visual_icon ul li a{display:block;font-size:17px;color:#e2e6ff;padding-top:67px;}
.visual_icon ul li.goicon01{background-image:url(/nanum/site/builder/main/sample01/img/mv_icon01.png);}
.visual_icon ul li.goicon02{background-image:url(/nanum/site/builder/main/sample01/img/mv_icon02.png);}
.visual_icon ul li.goicon03{background-image:url(/nanum/site/builder/main/sample01/img/mv_icon03.png);}
.visual_icon ul li:hover a{color:#fff;font-weight:bold;}

/*퀵메뉴 아이콘*/
.msection2{padding:50px 0;border-bottom:1px solid #e5e5e5;}
/* .msection2 .service_box{width:1200px;margin:0 auto;overflow:hidden;box-sizing:border-box;}
.msection2 .service_box .swiper-wrapper{justify-content:space-between;} */
.msection2 .service_box a{display:block;font-size:17px;color:#2f2f2f;text-align:center;padding-top:105px;font-weight:600;background-position:50% 0;background-repeat:no-repeat;}
.msection2 .service_box a.service1{background-image:url(/nanum/site/builder/main/sample01/img/service_icon01.png)}
.msection2 .service_box a.service2{background-image:url(/nanum/site/builder/main/sample01/img/service_icon02.png)}
.msection2 .service_box a.service3{background-image:url(/nanum/site/builder/main/sample01/img/service_icon03.png)}
.msection2 .service_box a.service4{background-image:url(/nanum/site/builder/main/sample01/img/service_icon04.png)}
.msection2 .service_box a.service5{background-image:url(/nanum/site/builder/main/sample01/img/service_icon05.png)}
.msection2 .service_box a.service6{background-image:url(/nanum/site/builder/main/sample01/img/service_icon06.png)}
.msection2 .service_box a.service7{background-image:url(/nanum/site/builder/main/sample01/img/service_icon07.png)}
.msection2 .service_box a.service8{background-image:url(/nanum/site/builder/main/sample01/img/service_icon08.png)}
.msection2 .service_box a:hover{font-weight:bold;color:#000;}
.msection2 .service_box{width:1200px;margin:0 auto;}
.msection2 .service_box ul{display:inline-block;width:100%;}
.msection2 .service_box ul li{width:12.5%;float:left;}

/*커뮤니티*/
.msection3{display:flex;justify-content:space-between;width:1200px;height:300px;margin:50px auto;padding-bottom:50px;}
.msection3 .board{position:relative;width:43%;}
.msection3 ul.commu_tab{position:relative;display:inline-block;float:left;width:530px;}
.msection3 ul.commu_tab > li{float:left;padding-right:30px;}
.msection3 ul.commu_tab > li > a{display:block;}
.msection3 ul.commu_tab h4{display:inline-block;font-size:25px;color:#ababab;font-weight:500;} 
.msection3 ul.commu_tab > li > a.on h4{color:#000;border-bottom:1px solid #000;font-weight:600;}
.msection3 ul.commu_tab > li > h4::hover{opacity:0.5;}
.msection3 .commu_tab .cmlist1{position:absolute;top:55px;left:0;width:100%;}
.msection3 .commu_tab .cmlist1 > ul > li{line-height:49px;width:100%;text-align:left;}
.msection3 .commu_tab .cmlist1 > ul > li > a{display:block;font-size:17px;color:#333;font-weight:500;position:relative;background:url(/nanum/site/builder/main/sample01/img/board_li_bg.png)no-repeat left center;padding-left:20px;}
.msection3 .commu_tab .cmlist1 > ul > li > a > .date{position:absolute;right:15px;top:0;color:#888;display:inline-block;font-size:14px;letter-spacing:0;font-weight:500;}
.msection3 .board .more{position:absolute;right:0;top:0;display:inline-block;font-size:15px;color:#979eaa;font-weight:600;border:1px solid #979eaa;border-radius:50px;width:75px;height:30px;line-height:30px;text-align:center;}
.msection3 .community{display:flex;justify-content:space-between;width:53%;}
.msection3 .community h4{color:#000;font-weight:600;font-size:25px;text-align:left;padding-bottom:30px;position:relative;}
.msection3 .community .more{position:absolute;right:0;display:inline-block;text-indent:-9999px;}
.msection3 .community .more::after{content:"";position:absolute;top:10px;right:0;width:13px;height:13px;background:url(/nanum/site/builder/main/sample01/img/comu_more.png)no-repeat 50% 50%;}
.msection3 .community .campain{width:47.5%;}
.msection3 .community .campain p img{width:100%}
.msection3 .community .campain .detail{text-align:left;}
.msection3 .community .campain .detail li:nth-child(1){font-size:17px;color:#333;font-weight:500;padding:20px 0;line-height:1;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msection3 .community .campain .detail li:nth-child(2){font-size:14px;color:#888;font-weight:500;letter-spacing:0;}
.msection3 .community .campain .more::after{right:0;}
.msection3 .community .media{width:47.5%;}
.msection3 .community .media .media_list a{display:flex;justify-content:space-between;}
.msection3 .community .media .media_list a + a{margin-top:20px;}
.msection3 .community .media .media_list a .img_box img{width:130px;height:85px;}
.msection3 .community .media .media_list .detail_box{text-align:left;width:52%;}
.msection3 .community .media .media_list .detail_box .cont{display:-webkit-box;font-size:14px;font-weight:500;color:#222;word-break:keep-all;line-height:1.2;word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.msection3 .community .media .media_list .detail_box .date{padding-top:15px;font-size:13px;color:#aaa;letter-spacing:0;}

/*교육신청*/
.msection4{background:#f0f0f0;width:100%;height:320px;position:relative;margin-bottom: 100px;}
.msection4 .edu_top{width:100%;padding:50px 0 40px 0;display:inline-block;}
.msection4 .edu_top h3{float:left;font-size:30px;color:#000;font-weight:600;}
.msection4 .edu_top .more{float:right;display:inline-block;font-size:15px;color:#979eaa;font-weight:600;border:1px solid #979eaa;border-radius:50px;width:75px;height:30px;line-height:30px;text-align:center;}
.msection4 .edu_list{display:flex;justify-content:space-between;overflow:hidden;}
.msection4 .edu_list .box{position:relative;width:280px;text-align:center;background:#fff;cursor:pointer;border-radius:20px;border:1px solid #d9d9d9;box-sizing:border-box;z-index:10;}
.msection4 .edu_list .box:hover{box-shadow:15px 5px 15px rgba(0,0,0,0.1);}
.msection4 .edu_list .box a:hover:after{content:'';position:absolute;left:0;top:0;border:none;border:2px solid #2270fe;width:100%;height:100%;box-sizing:border-box;border-radius:20px;}
.msection4 .edu_list .box .c_inner{padding:30px 15px 0;min-height:170px;}
.msection4 .edu_list .box .tit{display:block;font-size:23px;color:#222;font-weight:600;margin:20px 0 25px 0;word-break:keep-all;word-wrap: break-word;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
.msection4 .edu_list .box span{display:inline-block;font-size:15px;padding:5px 10px;border-radius:30px;font-weight:600;}
.msection4 .edu_list .box span.orange{color:#fe7a22;border:1px solid #fe7a22;}
.msection4 .edu_list .box span.green{color:#00b153;border:1px solid #00b153}
.msection4 .edu_list .box span.blue{color:#146ff6;border:1px solid #146ff6}
.msection4 .edu_list .box span.purple{color:#aa39e5;border:1px solid #aa39e5}
.msection4 .edu_list .box .data{font-size:15px;color:#585858;letter-spacing:0;font-weight:600;}
.msection4 .edu_list .box .btn{display:block;color:#fff;padding:17px 0;font-size:17px;font-weight:600;border-radius:0 0 20px 20px;}
.msection4 .edu_list .box .open{background:#2270fe;color:#fff;}
.msection4 .edu_list .box .close{background:#979eaa;color:#fff;}

.msection4 .arrow_btn{position:absolute;left:50%;top:220px;width:1350px;transform:translate(-50%);}
.msection4 .arrow_btn .button-next{background:url(/nanum/site/builder/main/sample01/img/edu_next.png)no-repeat;width:19px;height:32px;right:0;}
.msection4 .arrow_btn .button-prev{background:url(/nanum/site/builder/main/sample01/img/edu_prev.png)no-repeat;width:19px;height:32px;left:0;}
.button-next, .button-prev{position:absolute;top:0;z-index:10;cursor:pointer;}


/*sns*/
.msection5{margin:150px 0 120px 0;}
.msection5 .commu{width:100%;display:inline-block;padding-bottom:20px;line-height:1;}
.msection5 .commu .mtit{float:right;font-size:29px;color:#000;padding-top:30px;}
.msection5 .commu ul.sns li{float:left;padding:10px;}

.msection5 ul.sns_golink{display:flex;justify-content:center;background:#f4f4f4;border-radius:20px;padding:50px 0;}
.msection5 ul.sns_golink li{float:left;width:279px;height:589px;margin-right:27px;border-radius:20px;padding:30px 20px;background-color:#fff;background-repeat:no-repeat;border:1px solid #ddd;background-position:30px 20px;box-sizing:border-box;}
.msection5 ul.sns_golink li a.sns_tit p{text-indent:-9999px;}
.msection5 ul.sns_golink li.icon01{background-image:url(/nanum/site/builder/main/sample01/img/sns_tit01.png);}
.msection5 ul.sns_golink li.icon02{background-image:url(/nanum/site/builder/main/sample01/img/sns_tit02.png);}
.msection5 ul.sns_golink li.icon03{background-image:url(/nanum/site/builder/main/sample01/img/sns_tit03.png);}
.msection5 ul.sns_golink li.icon04{background-image:url(/nanum/site/builder/main/sample01/img/sns_tit04.png);}
.msection5 ul.sns_golink li.icon05{background-image:url(/nanum/site/builder/main/sample01/img/sns_tit05.png);margin-right:0;}
.msection5 ul.sns_golink li a.sns_tit{position:relative;display:block;height:35px;}
.msection5 ul.sns_golink li a.sns_tit p span{position:absolute;top:3px;right:0;display:block;width:26px;height:7px;background:url(/nanum/site/builder/main/sample01/img/sns_more.png)no-repeat;}
.msection5 ul.sns_golink li .cont{width:244px;height:480px;margin-top:20px;overflow-y:auto;overflow-x:hidden;}
.msection5 ul.sns_golink li .cont a{display:block;width:224px;}
.msection5 ul.sns_golink li .cont a span.bdate{display:block;font-size:14px;color:#9f9f9f;letter-spacing:0;font-weight:500;padding-bottom:20px;}
.msection5 ul.sns_golink li .cont a .tit{font-size:17px;color:#2d2d2d;font-weight:600;line-height:25px;padding-bottom:7px;}
.msection5 ul.sns_golink li .cont a .stxt{font-size:15px;color:#616161;line-height:21px;word-break:keep-all;padding-top:10px;}
.msection5 ul.sns_golink li .cont a + a{border-top:1px solid #ddd;padding-top:20px;margin-top:20px;}
.msection5 ul.sns_golink li .cont a img{width:100%;height:150px;}
.msection5 ul.sns_golink li a .ytb_tit{font-size:15px;color:#000;font-weight:600;display:block;padding:10px 0 7px 0;}
.msection5 ul.sns_golink li a .ytb_cont{font-size:14px;font-weight:500;color:#555;}

.msection5 ::-webkit-scrollbar{width:6px;height:285px;}
.msection5 ::-webkit-scrollbar-track-piece{background-color:#e8e8e9;border-radius:8px;}
.msection5 ::-webkit-scrollbar-thumb{border-radius: 8px;background-color: #949494;}


/*사이트바로가기 배너*/
.mbanner{padding:20px 0;border-top:1px solid #dddddd;background:#fff;}
.mbanner .wsize{position:relative;}
.mbanner .control{position:absolute;left:0;top:15px;clear:both;overflow:hidden;border-left:1px solid #d2d2d2;}
.mbanner .control div{float:left;width:30px;height:30px;background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:auto;text-indent:-9999px;}
.mbanner .control > div{border:1px solid #d2d2d2;margin-left:-1px;}
.mbanner .swiper{margin-left:110px;overflow:hidden;}
.mbanner .swiper .swiper-slide a{display:block;text-align:center;}

.mbanner .control .swiper-button-prev{position:static;background-image:url(/nanum/site/builder/main/sample01/img/ban_prev.png);margin-top:0;}
.mbanner .control .swiper-button-next{position:static;background-image:url(/nanum/site/builder/main/sample01/img/ban_next.png);margin-top:0;}
.mbanner .control .swiper_stop{position:static;background-image:url(/nanum/site/builder/main/sample01/img/ban_stop.png);margin-top:0;}
.mbanner .swiper  .swiper-wrapper{align-items:center;}




/******************************1023******************************/
@media all and (max-width:1023px){
	

.mvisual{height:700px;}	
.popupzone{width:100%;top:27%;margin-left:0;left:0;border-radius:20px;}
.popupzone .pop_box{height:250px;float:none;height:auto;margin:0 auto;}
.mvisual .mvisual_txt{width:100%;float:none;text-align:center;margin:50px auto 0;}
.visual_icon{width:100%;left:0;margin-left:0;top:85%;}
.visual_icon ul{float:none;width:90%;margin:0 auto;}
.mvisual .swiper-slide .mv_img{position:absolute;left:52%;transform:translate(-52%);bottom:-3%;}
.mvisual .swiper-slide .mv_img img{width:90%;}
	
.msection2{position:relative;padding:60px 0 40px 0;}

.msection2 .service_box{width:100%;}
.msection2 .service_box a{padding-top:90px;font-size:16px;}
.msection2 .service_box ul li{width:25%;padding-bottom:20px;}
.msection2 .service_box ul li a{background-size:80px auto;}


.msection3{width:100%;height:auto;flex-flow:wrap;}
.msection3 .board{display:inline-block;height:270px;}
.msection3 .box{width:100%;}
.msection3 .board{padding:0 20px;}
.msection3 ul.commu_tab{width:100%;}
.msection3 ul.commu_tab > li a{font-size:22px;}

.msection4 .edu_list .box .c_inner{padding:15px 15px 0 15px;}
.msection4 .edu_list .box .tit{font-size:19px;}
.msection4 .edu_list .box .data{padding-bottom:20px}


.msection5{margin:80px 0 80px 0;}
.msection5 .commu{text-align:center;}
.msection5 .commu .mtit{float:none;font-size:24px;}
.msection5 .commu ul.sns{display:inline-block;float:none;margin-top:20px;}
.msection5 .commu ul.sns li{margin-right:5px;padding:8px;}
.msection5 .commu ul.sns li img{width:40px;}
.msection3 .commu_tab .cmlist1 > ul > li{line-height:30px;}

.msection5 ul.sns_golink{width:100%;}
.msection5 ul.sns_golink li{width:46%;height:auto;margin-bottom:20px;box-sizing:border-box;}
.msection5 ul.sns_golink li.icon02{margin-right:0;}
.msection5 ul.sns_golink li .cont{width:100%;}
.msection5 ul.sns_golink li .cont img{width:100%;}
.msection5 ul.sns_golink li .cont a{width:99%;}


.mbanner{padding:15px;}
.mbanner .control{top:10px;}
.mbanner .control div{width:25px;height:25px;}
.mbanner .swiper .swiper-slide a img{width:80%;}

}


/******************************767******************************/
@media all and (max-width:767px){

.mvisual{height:640px;}
.mvisual .mvisual_txt{margin:35px auto 0;}
.mvisual .mvisual_txt .txt1{padding-bottom:10px;}
.mvisual .mvisual_txt .txt1 img{width:200px;}
.mvisual .mvisual_txt .txt2{font-size:15px;line-height:22px;}
.mvisual .swiper-slide .mv_img{bottom:10%;}
.mvisual .swiper-slide .mv_img img{width:300px;}
.visual_icon{top:85%;}
.visual_icon ul{height:106px;}
.visual_icon ul li{background-size:40px auto;line-height:50px;}
.visual_icon ul li a{font-size:14px;padding-top:55px;}	
.mcontrol .pagination{font-size:13px;height:auto;}

.visual_icon ul li::before{height:70px;}
.popupzone{top:20%;}
.popupzone .pop_box{width:65%;height:auto;}
.mcontrol{margin-top:-42px;}

.msection2{padding:60px 20px 30px 20px;}
.msection2 .service_box a{font-size:15px;padding-top:77px;}
.msection2 .service_box ul li a{background-size:70px auto;}
	
.msection3{width:96%;margin:30px auto;padding:2%;}
.msection3 ul.commu_tab h4{font-size:19px;}
.msection3 .commu_tab .cmlist1 > ul > li a{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 75px 0 13px;}
.msection3 .community h4{font-size:19px;}

.msection3 .community{padding-top:20px;}
.msection3 .community .campain .detail li:nth-child(1){font-size:15px;padding:10px 0;}
.msection3 .board{padding:0 10px;height:240px;}
.msection3 .board .more{font-size:13px;width:50px;height:25px;line-height:25px;right:0;}
.msection3 .box{flex-wrap:wrap;}
.msection3 ul.commu_tab > li{padding-right:15px;}
.msection3 .community .data{padding-top:40px;}

.msection4{height:auto;padding-bottom:20px;}
.msection4 .edu_top{padding:20px 0;}
.msection4 .edu_top h3{font-size:20px;text-align:center;float:none;}
.msection4 .edu_top .more{    text-align: center; margin: 0 auto;float: none; display: block;margin-top: 10px;font-size: 13px;width:50px;height:25px;line-height:25px}
.msection4 .edu_list{padding: 0 3%;}
.msection4 .edu_list .box .btn{font-size:14px;padding:10px 0;}
.msection4 .edu_list .box .tit{font-size:16px;margin: 15px 0;}
.msection4 .edu_list .box .data{font-size:14px;padding-bottom:15px;}
.msection4 .edu_list .box span{font-size:14px;}
.msection4 .edu_list .box{width:45% !important;}

.msection5{margin:40px 0;}
.msection5 .wsize{padding:0 3%;width:94%;}
.msection5 ul.sns_golink{flex-wrap:wrap;}
.msection5 ul.sns_golink li{float:none;width:100%;box-sizing:border-box;margin:20px 30px;}
.msection5 ul.sns_golink li.icon05{margin:20px 30px;}

.mbanner{display:none;}
.mbanner .control{top:10px;left:10px}
.mbanner .control div{width:20px;height:20px;}
.mbanner .swiper .swiper-slide a img{width:110px;}
.mbanner .swiper{margin-left:80px;}


}



/******************************500******************************/
@media all and (max-width:500px){
	
.mvisual{height:500px}
.mvisual .swiper-slide .mv_img{bottom:8%;}
.mvisual .swiper-slide .mv_img img{width:100%;}
.popupzone{top:25%;}
.visual_icon ul li{background-size:35px auto;}
.mcontrol{margin-top:-33px;height:30px;}
.mcontrol .btn_area .btn{top:9px;}
.mcontrol .pagination{padding:8px 0 0 15px;}


.msection2 .service_box ul li{width:33.3%;padding-bottom:20px;}

}
