@charset "utf-8";
@import url('font.css');

@keyframes shake {
    0% {transform: rotate(0) scale(1);}
    25% {transform: rotate(-15deg) translateY(15px) scale(0.98);}
    50% {transform: rotate(-5deg) translateY(20px) scale(0.95);}
    75% {transform: rotate(5deg) translateY(15px) scale(0.98);}
    100% {transform: translate(0) scale(1);}

}
.edu_card .wrapper .pic {overflow: hidden;}
.edu_card:hover .ecard_img{animation: shake 0.7s alternate infinite;}
.edu_card:hover .wrapper .txt ul li {border:1px solid #ccc;}
.edu_card .wrapper .txt ul li {border: 1px solid #fff;}

@media (min-width:1300px) {

    /* 메인 슬라이드  */
    .mainbanner {  height:520px; text-align:center;}	
    #wrap-mainbanner {position: relative;width: 100%;  height: 520px;   overflow: hidden;display: flex;align-items: center;}
	#slider {  position: absolute;width: 100%; height: 520px; }	
	#slider .slide {position: absolute;width: 100%;height: 520px;overflow: hidden;padding: 0;}
	/*#slider .slide img { margin-left: 350px;}*/
	#slide-nav {position: absolute; top:0; left: 50%; margin-left: -650px;  }
	#slide-nav>ul {background: rgba(55, 55, 55, 0.75); width: 150px; height: 500px; padding-top: 20px;}
	#slide-nav>ul>li>a{display: block; height: 60px; line-height: 60px; font-size: 1.1rem; color: #fff;}
	#slide-nav>ul>li.on>a{ background: #fff;color: #ed1c24; font-weight: bold;}
	#slide-nav>ul ul{display: none;position: absolute; top:0; left: 150px; background: #fff; width: 150px;  height: 480px;padding: 20px 0;}
	#slide-nav>ul ul.on{display: block;}
	#slide-nav>ul ul>li>a{display: block; height: 40px; line-height: 40px;}
	#slide-nav>ul ul>li>a:hover{color:#ed1c24; font-weight: bold;}
    #slider.animated {-webkit-transition: left .3s ease-in;transition: left .3s ease-in;}

    /* 메인 슬라이드 좌우 버튼 */
    #next,#prev {position: absolute;z-index: 1;width: 60px;height: 60px;cursor: pointer;}
    #next {right: 0;}
    #prev {left: 0;}
    .main__item svg {width: 64px;height: 64px;stroke: #333;stroke-width: 1.5;stroke-linecap: round;stroke-linejoin: round;fill: none; color: #333;  }
        
    #lecture { width:1300px; margin:65px auto 55px; overflow:hidden;display:flex;justify-content: space-around; align-items: center; }
    #lecture .title { float:left; width:15%; color:#222; }
    #lecture .title p { display:block; font-size:1.3em; font-weight:600; }
    #lecture .title strong { display:block; margin:20px 0 30px; font-size:2.2em; font-weight:800; line-height:1.2em;}
    #lecture .title span a {transition: ease 0.3s; display:block; background:url(../img/more_arr.png) 40% 4px no-repeat; border-bottom:1px solid #404040; width:100%; padding-bottom:10px; font-weight:800; color:#222; }
    #lecture .title:hover span a {background:url(../img/more_arr.png) 50% 4px no-repeat;}
    
    .lct_wrap { display:flex; justify-content:space-evenly; flex-wrap:wrap; margin-left:auto; width:81%; }
    .lct_wrap .content { width:18.5%; }
    .lct_wrap .content .pic { display:block; width:100%; padding:0; text-align:center; }
    .lct_wrap .content .pic img {width:100%; border-radius: 4px;}
    .lct_wrap .content p { display:block; margin-top:8px; font-size:0.9em; color:#9e9e9e; }
    .lct_wrap .content p span { display:block; margin-top:3px; font-size:1.05em; color:#222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

    .edu_card { background:url(../img/edu_card_bg.gif) top; }
    .edu_card .wrapper a { display:table; width:1000px; margin:0 auto;}
    .edu_card .wrapper .pic { display:table-cell; vertical-align:middle; }
    .edu_card .wrapper .tit { display:table-cell; vertical-align:middle; padding-top:2%; color:#497e98; }
    .edu_card .wrapper .tit strong { display:block; font-size:1.5em; color:#222; line-height:1.5em; }
    .edu_card .wrapper .txt { display:table-cell; vertical-align:middle; padding-top:2%; overflow:hidden;}
    .edu_card .wrapper .txt ul li { float:left; background:#fff; border-radius:15px; margin:0 5px; padding:5px 10px; font-size:0.9em; color:#646464; letter-spacing:-0.5px; text-align:center; }

    .support { width:1300px; margin:0 auto; }
    .support .tit { border-bottom:1px solid #e0e0e0; padding-bottom:10px; font-size:1.3em; font-weight:600; color:#222; }
    .support_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; margin-left:auto; width:100%; }
    .support_wrap .content { width:11.5%; margin:2% 0; }
    .support_wrap .last { display:none;} 
    .support_wrap .content .pic {transition: ease 0.3s; display:block; width:100%; padding:0; text-align:center; }
    .support_wrap .content .pic img { width:39px; }
    .support_wrap .content p {transition: ease 0.3s; display:block; margin-top:8px; font-size:1.0em; color:#636363; text-align:center;}
    .support_wrap .content:hover .pic,.support_wrap .content:hover p {transform: translateY(-7px); }

    .info_banner { width:1300px; margin:20px auto; overflow:hidden; }
    .info_banner .manual a { float:left; background:url(../img/info_banner_01.gif) left; margin-right:1.5%; width:14%; padding:25px 0 25px 11%; font-size:0.9em; color:#646464; }
    .info_banner .company a { float:left; background:url(../img/info_banner_02.gif) left; margin-right:1.5%; width:14%; padding:25px 0 25px 11%; font-size:0.9em; color:#646464; }
    .info_banner .manual strong, .info_banner .company strong { display:block; font-size:1.4em; font-weight:500; color:#222; line-height:1.7em; }
    .info_banner .ceo a { float:right; background:url(../img/info_banner_03.jpg); width:44%; padding:24px 0 25px 3%; font-weight:300; font-size:0.9em; color:#fff;}
    .info_banner .ceo strong { display:block; font-size:1.5em; font-weight:600; line-height:1.5em; }

    .bottom { width:1300px; margin:50px auto; overflow:hidden;}
    .bottom .bbs_wrap { float:left; width:70%;}
    .bottom .bbs_wrap .board { float:left; margin-right:5%; width:45%; }
    .bottom .bbs_wrap .board .tit { border-bottom:1px solid #e0e0e0; padding-bottom:12px; margin-bottom:12px; font-size:1.3em; font-weight:600; color:#222; }
    .bottom .bbs_wrap .board .tit a { float:right; font-size:0.7em; }
    .bottom .bbs_wrap .board .tit .text {display: inline-block; position: relative; padding: 1px 13px 0 0; height: 21px; vertical-align: top; line-height: 1; font-size: 16px; letter-spacing: -0.05em;}
    .bottom .bbs_wrap .board .tit .text:after {content: ''; display: block; position: absolute; top: calc(50% - 2px); right: 0; width: 2px; height: 2px; background: #20222d; box-shadow: -4px 4px 0 0 #20222d, -3px 3px 0 0 #20222d, -2px 2px 0 0 #20222d, -1px 1px 0 0 #20222d, -1px -1px 0 0 #20222d, -2px -2px 0 0 #20222d, -3px -3px 0 0 #20222d, -4px -4px 0 0 #20222d;}

    /*기본게시판*/
    .latestBBS { clear: both; margin-left:0;}
    .latestBBS li { width:100%; overflow:hidden; }
    .latestBBS li .title { display:inline-block; width:320px; font-size:0.95em; font-weight:400; color:#646464; line-height:1.5em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
    .latestBBS li .date {display:; float:right; font-size:0.9em; color:#9e9e9e; line-height:1.5em; letter-spacing:0;}

    .bottom .customer { float:right; width:30%; }
    .bottom .tit { margin-bottom:12px; font-size:1.3em; font-weight:600; color:#222; }
    .bottom .content { border:1px solid #e0e0e0; padding:27px 15px;}
    .bottom .content ul { display:table; }
    .bottom .content ul li { display:table-cell; vertical-align:middle; }
    .bottom .content ul li strong { display:block; margin:0 15px 0 10px; font-size:1.7em; font-weight:800; color:#222; letter-spacing:-1.0px;}
    .bottom .content ul li p { display:block; font-size:0.9em; color:#646464; line-height:1.5em; }

    .patners { background:#f7f7f7; border-top:1px solid #e0e0e0;}
    .patners .content { width:1300px; margin:0 auto; text-align:center; overflow:hidden;}
    .patners .content ul li { display:inline-block; width:12%;}
}


@media (min-width:768px) and (max-width:1299px) {

    /* 메인 슬라이드  */	
    .mainbanner {  height:40vw; text-align:center;}	
    #wrap-mainbanner {position: relative;width: 100%;  height: 40vw;   overflow: hidden;display: flex;align-items: center;}
    #slider {  position: absolute;width: 90%; padding: 0 5%;height: 40vw;   }	
    #slider .slide {position: absolute;width: 100%;height: 40vw;overflow: hidden;padding: 0;}
    #slider .slide img { width: 100%; height: 100%;}
    #slide-nav {display: none !important ;position: absolute; top:0; left: 50%; margin-left: -45%;  }
    #slider.animated {-webkit-transition: left .3s ease-in;transition: left .3s ease-in;}

    /* 메인 슬라이드 좌우 버튼 */
    #next,#prev {position: absolute;z-index: 1;width: 60px;height: 60px;cursor: pointer; display: none;}
    #next {right: 0;}
    #prev {left: 0;}
    .main__item svg {width: 64px;height: 64px;stroke: #333;stroke-width: 1.5;stroke-linecap: round;stroke-linejoin: round;fill: none; color: #333;  }
        
    #lecture { width:90%; margin:50px auto 45px; overflow:hidden; }
    #lecture .title { float:left; width:15%; color:#222; }
    #lecture .title p { display:block; font-size:1.1em; font-weight:600; }
    #lecture .title strong { display:block; margin:20px 0 30px; font-size:1.6em; font-weight:800; line-height:1.2em;}
    #lecture .title span a { display:block; background:url(../img/more_arr.png) 75px 4px no-repeat; border-bottom:1px solid #404040; width:100%; padding-bottom:10px; font-size:0.9em; font-weight:800; color:#222; }

    .lct_wrap { display:flex; justify-content:space-evenly; flex-wrap:wrap; margin-left:auto; width:81%; }
    .lct_wrap .content { width:18.5%; }
    .lct_wrap .content .pic { display:block; width:100%; padding:0; text-align:center; }
    .lct_wrap .content .pic img { width:100%; border-radius: 4px; }
    .lct_wrap .content p { display:block; margin-top:8px; font-size:0.9em; color:#9e9e9e; }
    .lct_wrap .content p span { display:block; margin-top:3px; font-size:1.0em; color:#222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .edu_card { background:url(../img/edu_card_bg.gif) top; }
    .edu_card .wrapper a { display:table; width:90%; margin:0 auto;}
    .edu_card .wrapper .pic { display:table-cell; vertical-align:middle; }
    .edu_card .wrapper .tit { display:table-cell; vertical-align:middle; padding-top:2.2%; color:#497e98; }
    .edu_card .wrapper .tit strong { display:block; font-size:1.2em; color:#222; line-height:1.5em; }
    .edu_card .wrapper .txt { display:table-cell; vertical-align:middle; padding-top:2.2%; overflow:hidden;}
    .edu_card .wrapper .txt ul li { float:left; background:#fff; border-radius:15px; margin:0 3px; padding:5px 10px; font-size:0.8em; color:#646464; letter-spacing:-0.5px; text-align:center; }

    .support { width:90%; margin:0 auto; }
    .support .tit { border-bottom:1px solid #e0e0e0; padding-bottom:10px; font-size:1.1em; font-weight:700; color:#222; }
    .support_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; margin-left:auto; width:100%; }
    .support_wrap .content { width:11.5%; margin:2% 0; }
    .support_wrap .last { display:none;} 
    .support_wrap .content .pic { display:block; width:100%; padding:0; text-align:center; }
    .support_wrap .content .pic img { width:28px; }
    .support_wrap .content p { display:block; margin-top:8px; font-size:0.85em; color:#636363; text-align:center;}	
        
    .info_banner { width:90%; margin:20px auto; overflow:hidden; }
    .info_banner .manual a { float:left; background:url(../img/info_banner_01.gif) left; background-size:cover; margin-right:1.5%; width:17%; padding:18px 0 18px 10%; font-size:0.8em; color:#646464; }
    .info_banner .company a { float:left; background:url(../img/info_banner_02.gif) left; background-size:cover; margin-right:1.5%; width:17%; padding:18px 0 18px 10%; font-size:0.8em; color:#646464; }
    .info_banner .manual strong, .info_banner .company strong { display:block; font-size:1.1em; font-weight:500; color:#222; line-height:1.4em; }
    .info_banner .ceo a { float:right; background:url(../img/info_banner_03.jpg); background-size:cover; width:40%; padding:18px 0 18px 3%; font-weight:300; font-size:0.8em; color:#fff;}
    .info_banner .ceo strong { display:block; font-size:1.2em; font-weight:600; line-height:1.2em; }
        
    .bottom { width:90%; margin:50px auto; overflow:hidden;}
    .bottom .bbs_wrap { float:left; width:70%;}
    .bottom .bbs_wrap .board { float:left; margin-right:5%; width:45%; }
    .bottom .bbs_wrap .board .tit { border-bottom:1px solid #e0e0e0; padding-bottom:12px; margin-bottom:12px; font-size:1.1em; font-weight:600; color:#222; }
    .bottom .bbs_wrap .board .tit a { float:right; font-size:0.7em; }
    .bottom .bbs_wrap .board .tit .text {display: inline-block; position: relative; padding: 1px 13px 0 0; height: 21px; vertical-align: top; line-height: 1; font-size: 16px; letter-spacing: -0.05em;}
    .bottom .bbs_wrap .board .tit .text:after {content: ''; display: block; position: absolute; top: calc(50% - 2px); right: 0; width: 2px; height: 2px; background: #20222d; box-shadow: -4px 4px 0 0 #20222d, -3px 3px 0 0 #20222d, -2px 2px 0 0 #20222d, -1px 1px 0 0 #20222d, -1px -1px 0 0 #20222d, -2px -2px 0 0 #20222d, -3px -3px 0 0 #20222d, -4px -4px 0 0 #20222d;}

    /*기본게시판*/
    .latestBBS { clear: both; margin-left:0;}
    .latestBBS li { width:100%; overflow:hidden; }
    .latestBBS li .title { display:inline-block; width:75%; font-size:0.8em; font-weight:400; color:#646464; line-height:1.8em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
    .latestBBS li .date {display:; float:right; font-size:0.8em; color:#9e9e9e; line-height:1.8em; letter-spacing:0;}

    .bottom .customer { float:right; width:30%; }
    .bottom .tit { margin-bottom:12px; font-size:1.1em; font-weight:600; color:#222; }
    .bottom .content { border:1px solid #e0e0e0; padding:10px 0;}
    .bottom .content ul { text-align:center;}
    .bottom .content ul li { }
    .bottom .content ul li strong { display:block; margin:10px; font-size:1.5em; font-weight:800; color:#222; letter-spacing:-1.0px;}
    .bottom .content ul li p { display:block; font-size:0.8em; color:#646464; line-height:1.5em; }

    .patners { background:#f7f7f7; border-top:1px solid #e0e0e0;}
    .patners .content { width:90%; margin:0 auto; text-align:center; overflow:hidden;}
    .patners .content ul li { display:inline-block; width:12%;}
    .patners .content ul li img { width:75%;}
	
	
    .main_tit {display:none;}
}



@media (max-width:767px) {
    /* 메인 슬라이드  */	
    .mainbanner {  height:50vw; text-align:center;}	
    #wrap-mainbanner {position: relative;width: 100%;  height: 50vw;   overflow: hidden;display: flex;align-items: center;}
    #slider {  position: absolute;width: 90%; padding: 0 5%; height: 50vw;   }	
    #slider .slide {position: absolute;width: 100%;height: 50vw;overflow: hidden;padding: 0;}
    #slider .slide img { width: 100%; height: 100%;}
    #slide-nav {display: none !important ;position: absolute; top:0; left: 50%; margin-left: -45%;  }
    #slider.animated {-webkit-transition: left .3s ease-in;transition: left .3s ease-in;}

    /* 메인 슬라이드 좌우 버튼 */
    #next,#prev {position: absolute;z-index: 1;width: 60px;height: 60px;cursor: pointer; display: none;}
    #next {right: 0;}
    #prev {left: 0;}
    .main__item svg {width: 64px;height: 64px;stroke: #333;stroke-width: 1.5;stroke-linecap: round;stroke-linejoin: round;fill: none; color: #333;  }
        
    #lecture { width:85%; margin:40px auto 20px; overflow:hidden; }
    #lecture .title { color:#222; }
    #lecture .title p { display:block; font-size:1.1em; font-weight:600; }
    #lecture .title strong { display:block; margin:5px 0 15px; font-size:1.5em; font-weight:; line-height:1.2em;}
    #lecture .title span a { display:block; background:url(../img/more_arr.png) 75px 5px no-repeat; border-bottom:0px solid #404040; width:100%; padding-bottom:10px; font-weight:800; color:#222; }

    .lct_wrap { display:flex; justify-content:space-evenly; flex-wrap:wrap; width:100%; }
    .lct_wrap .content { width:100%; margin:5% 0; }
    .lct_wrap .content .pic { display:block; width:100%; padding:0; text-align:center; }
    .lct_wrap .content .pic img { width:100%; border-radius: 4px;}
    .lct_wrap .content p { display:block; margin-top:8px; font-size:0.9em; color:#9e9e9e; }
    .lct_wrap .content p span { display:block; margin-top:; font-size:1.05em; color:#222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .edu_card { background:url(../img/edu_card_bg.gif) top; padding-bottom:6%; }
    .edu_card .wrapper a {  width:85%; margin:0 auto; text-align:center;}
    .edu_card .wrapper .pic { }
    .edu_card .wrapper .pic img { width:30%; }
    .edu_card .wrapper .tit { margin:10px 0 5px; color:#497e98; }
    .edu_card .wrapper .tit strong { display:block; font-size:1.3em; color:#222; line-height:1.3em; }
    .edu_card .wrapper .txt { overflow:hidden;}
    .edu_card .wrapper .txt ul li { display:inline-block; background:#fff; border-radius:15px; margin:5px 2.5px; padding:5px 10px; font-size:0.8em; color:#646464; letter-spacing:-0.5px; text-align:center; }

    .support { width:85%; margin:0 auto; }
    .support .tit { border-bottom:1px solid #e0e0e0; padding-bottom:10px; font-size:1.1em; font-weight:700; color:#222; }

    .support_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; margin-left:auto; width:100%; }
    .support_wrap .content { width:30%; margin:4% 0; }
    .support_wrap .last { opacity:0;} /* opacity:0; */
    .support_wrap .content .pic { display:block; width:100%; padding:0; text-align:center; }
    .support_wrap .content .pic img { width:28px; }
    .support_wrap .content p { display:block; margin-top:8px; font-size:0.9em; color:#636363; text-align:center;}	

    .info_banner { width:85%; margin:20px auto; overflow:hidden; }
    .info_banner .manual { background:url(../img/info_banner_01.gif) left top; background-size:cover;}
    .info_banner .company { background:url(../img/info_banner_02.gif) left top; background-size:cover;}
    .info_banner .manual strong, .info_banner .company strong { display:block; font-size:1.05em; font-weight:500; color:#222; line-height:1.2em; }
    .info_banner .manual a, .info_banner .company a { display:block; margin-bottom:3%; width:70%; padding:15px 0 10px 30%; font-size:0.9em; color:#646464;}
    .info_banner .ceo { background:url(../img/info_banner_03.jpg); background-size:cover;}
    .info_banner .ceo strong { display:block; font-size:1.2em; font-weight:600; line-height:1.2em; }
    .info_banner .ceo a { display:block; width:92%; padding:15px 0 12px 8%; font-weight:300; font-size:0.8em; color:#fff;}

    .bottom { width:85%; margin:40px auto; overflow:hidden;}
    .bottom .bbs_wrap { width:100%;}
    .bottom .bbs_wrap .board { margin-bottom:8%; width:100%; }
    .bottom .bbs_wrap .board .tit { border-bottom:1px solid #e0e0e0; padding-bottom:10px; margin-bottom:10px; font-size:1.1em; font-weight:600; color:#222; }
    .bottom .bbs_wrap .board .tit a { float:right; font-size:0.7em; }
    .bottom .bbs_wrap .board .tit .text {display: inline-block; position: relative; padding: 1px 13px 0 0; height: 21px; vertical-align: top; line-height: 1; font-size: 16px; letter-spacing: -0.05em;}
    .bottom .bbs_wrap .board .tit .text:after {content: ''; display: block; position: absolute; top: calc(50% - 2px); right: 0; width: 2px; height: 2px; background: #20222d; box-shadow: -4px 4px 0 0 #20222d, -3px 3px 0 0 #20222d, -2px 2px 0 0 #20222d, -1px 1px 0 0 #20222d, -1px -1px 0 0 #20222d, -2px -2px 0 0 #20222d, -3px -3px 0 0 #20222d, -4px -4px 0 0 #20222d;}

    /*기본게시판*/
    .latestBBS { clear: both; margin-left:0;}
    .latestBBS li { width:100%; overflow:hidden; }
    .latestBBS li .title { display:inline-block; width:75%; font-size:0.9em; font-weight:400; color:#646464; line-height:1.8em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
    .latestBBS li .date {display:; float:right; font-size:0.8em; color:#9e9e9e; line-height:1.8em; letter-spacing:0;}

    .bottom .customer { width:100%; }
    .bottom .tit { margin-bottom:12px; font-size:1.1em; font-weight:600; color:#222; }
    .bottom .content { border:1px solid #e0e0e0; padding:10px 0;}
    .bottom .content ul { text-align:center;}
    .bottom .content ul li { }
    .bottom .content ul li strong { display:block; margin:10px; font-size:1.5em; font-weight:800; color:#222; letter-spacing:-1.0px;}
    .bottom .content ul li p { display:block; font-size:0.8em; color:#646464; line-height:1.5em; }
    .patners { background:#f7f7f7; border-top:1px solid #e0e0e0;}
    .patners .content { width:85%; margin:0 auto; text-align:center; overflow:hidden;}
    .patners .content ul li { display:inline-block; width:24%;}
    .patners .content ul li img { width:90%;}
	
	.main_tit {display:none;}
}