@charset "UTF-8";

/* 메인슬라이더 */
#main_slider { position: relative; display: flex; flex-wrap: wrap; }
#main_slider .slide_box, #main_slider .txt_box { float: left; }
#main_slider .slide_box { position: relative; width: 65%; padding-top: 100px; }
#main_slider .slide_box .swiper-container { border-radius: 160px 0 0 0; overflow: hidden; }
#main_slider .slide_box .swiper-slide { height: 670px; background-repeat: no-repeat; background-size: cover; background-position: center; font-size: 0; }
#main_slider .slide_box .slide_btn_box { z-index: 11; position: absolute; bottom: 0; right: 0; text-align: right; font-size: 0; }
#main_slider .slide_box .slide_btn_box > div { display: inline-block; width: auto; vertical-align: bottom; font-size: 16px; }
#main_slider .slide_box .slide_btn_box > div.main_paging { height: 70px; line-height: 70px; color: #fff; }
#main_slider .slide_box .slide_btn_box > div.main_btn { position: relative; height: 70px; width: 70px; border: 1px solid #ddd; cursor: pointer; background: #fff; }
#main_slider .slide_box .slide_btn_box > div.main_btn_l { border-right: 0; margin-left: 25px; }
#main_slider .slide_box .slide_btn_box > div.main_btn img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); }
#main_slider .txt_box { width: 35%; padding-left: 75px; display: flex; align-items: center; }
#main_slider .txt_box:after { z-index: -2; content: ""; position: absolute; top: 0; left: calc(65% - 65px); width: calc(((100vw - 100%) / 2) + (35% + 70px)); height: 100%; background: url('../img/main/main_back01.png') right top no-repeat, linear-gradient(45deg, #0d3e6f 0%, #0074a4 100%); }
#main_slider .txt_box:before { z-index: -1; content: ""; position: absolute; bottom: 0; left: calc(65% - 5px); width: calc(((100vw - 100%) / 2) + (35% + 10px)); height: 70px; background: #fff url('../img/main/main_back02.png') left 35px center no-repeat; }
#main_slider .txt_box small { display: block; font-size: 20px; margin-bottom: 5px; line-height: 20px; font-weight: 700; color: #fff; }
#main_slider .txt_box h2 { font-size: 34px; margin-bottom: 15px; line-height: 130%; color: #fff; }
#main_slider .txt_box p { font-size: 15px; line-height: 160%; margin-bottom: 40px; color: #fff; font-weight: 300; }
#main_slider .txt_box a { margin-bottom: 10px; }
#main_slider .txt_box a:last-child { margin-bottom: 0; }

/* KOLAS 인정 시험 분야, 퀵 */
#main_section01 ul { display: flex; flex-wrap: wrap; }
#main_section01 ul li { position: relative; float: left; width: 14.2857142857%; text-align: center; }
#main_section01 ul li:last-child:after { content: none; }
#main_section01 ul li:after { content: ""; width: 1px; height: 134px; background: #ddd; position: absolute; top: 50%; right: -0.5px; margin-top: -67px; }
#main_section01 ul li a { display: block; padding: 0 10px; }
#main_section01 ul li img { width: 60%; max-width: 103px; min-width: 50px; }
#main_section01 ul li strong { display: block; margin-top: 10px; font-size: 18px; color: #333; line-height: 130%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
#main_section01 ul li a:hover strong, #main_section01 ul li a:focus strong { color: #094e93; }

/* 중간퀵 */
#main_section02 { background: #f6f6f6; padding: 90px 0; }
#main_section02 ul { display: flex; flex-wrap: wrap; }
#main_section02 li { float: left; width: 23%; margin-right: 2.6666666667%; background: #fff; }
#main_section02 li:last-child { margin-right: 0; }
#main_section02 li img { width: 100%; }
#main_section02 li .txt_box { padding: 25px; border-bottom: 4px solid #fff; text-align: center; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
#main_section02 li .txt_box h2 { font-size: 20px; line-height: 130%; margin-bottom: 7px; color: #333; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
#main_section02 li .txt_box p { font-size: 15px; color: #666; line-height: 150%; }
#main_section02 li a:hover .txt_box, #main_section02 li a:focus .txt_box { border-bottom-color: #00a1df; }
#main_section02 li a:hover .txt_box h2, #main_section02 li a:focus .txt_box h2 { color: #00a1df; }

/* COMMUNITY */
#main_section03 { background: url('../img/main/main_section3_back01.jpg') center top 30% no-repeat; background-size: cover; padding: 90px 15px 130px 15px; overflow: hidden; }
#main_section03 .tit_h2 { color: #fff; }
#main_section03 .desc_p { color: #fff; }
#main_section03 .main_section03_tab { text-align: center; font-size: 0; margin-bottom: 40px; }
#main_section03 .main_section03_tab li { display: inline-block; border: 1px solid #fff; border-left: 0; }
#main_section03 .main_section03_tab li:first-child { border-left: 1px solid #fff; }
#main_section03 .main_section03_tab li a { display: block; font-size: 18px; width: 110px; height: 50px; line-height: 50px; color: #fff; border: 1px solid rgba(255,255,255,0); transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
#main_section03 .main_section03_tab li:hover a, #main_section03 .main_section03_tab li.on a { border-color: rgba(255,255,255,1); font-weight: 700; }

/* 스와이퍼 컨테이너: 네비/페이징 위치 보강 */
#main_section03 .swiper-container { display:none; position:relative; padding:8px 44px; box-sizing:border-box; overflow:hidden; }
#main_section03 .swiper-container.on { display:block; }
#main_section03 .swiper-container,
#main_section03 .swiper {
    height: 400px;
}
/* 슬라이드 카드 */
#main_section03 .swiper-slide { background: #fff; border: 4px solid rgba(0,161,223,0); transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
#main_section03 .swiper-slide-active { border: 4px solid rgba(0,161,223,1); transform: translateY(40px); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); }
#main_section03 .swiper-slide > a { display: block; padding: 40px; }
#main_section03 .swiper-slide > a > strong { display: block; line-height: 150%; font-size: 22px; margin-bottom: 10px; color: #333; height: 65px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#main_section03 .swiper-slide > a > div { font-size: 16px; line-height: 160%; color: #666; margin-bottom: 30px; height: 75px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#main_section03 .swiper-slide > a > span { display: block; font-size: 16px; color: #666; line-height: 16px; }

/* 스와이퍼 네비/페이징 (COMMUNITY) */
#main_section03 .main_btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; background: transparent; padding: 0; cursor: pointer; z-index: 5; }
#main_section03 .main_btn_l { left: 4px; }
#main_section03 .main_btn_r { right: 4px; }
#main_section03 .main_paging { position: absolute; left: 12px; bottom: 8px; z-index: 5; }

/* 하단 비디오 */
#main_section04 { background: url('../img/main/main_section4_back01.png') right top no-repeat, url('../img/main/main_section4_back02.png') left bottom no-repeat; padding: 90px 0; }
#main_section04 > div { display: flex; flex-wrap: wrap; }
#main_section04 .video_box, #main_section04 .txt_box { float: left; width: 50%; }
#main_section04 .video_box iframe { width: 100%; height: 430px; }
#main_section04 .txt_box { padding-left: 90px; display: flex; align-items: center; }
#main_section04 .txt_box h2 { font-size: 26px; line-height: 140%; font-weight: 500; margin-bottom: 20px; }
#main_section04 .txt_box p { font-size: 16px; line-height: 160%; margin-bottom: 20px; }

/* -------------------- 반응형 -------------------- */
@media all and (max-width: 1630px) { #main_slider .txt_box { padding: 0 50px; } #main_slider .txt_box p br { display: none; } }
@media all and (max-width: 1200px) { #main_slider .txt_box { padding: 0 30px; } #main_section02 li .txt_box p br { display: none; } #main_section04 .txt_box { padding-left: 50px; } }
@media all and (max-width: 1024px) {
    #main_slider { padding-bottom: 30px; }
    #main_slider .slide_box { position: static; width: calc(100% + 30px); padding-top: 0; margin-left: -15px; }
    #main_slider .slide_box .swiper-container { position: static; border-radius: 0; }
    #main_slider .slide_box .swiper-slide { height: 430px; }
    #main_slider .slide_box .slide_btn_box > div.main_btn { display: none; }
    #main_slider .slide_box .slide_btn_box { z-index: 99; right: 45px; bottom: 60px; }
    #main_slider .slide_box .slide_btn_box > div.main_paging { height: auto; line-height: 1; }
    #main_slider .txt_box { position: relative; z-index: 11; margin-top: -230px; width: 100%; padding: 30px; background: right top / 30% no-repeat url(../img/main/main_back01.png), linear-gradient(45deg, #0d3e6f 0%, #0074a4 100%); }
    #main_slider .txt_box:after { content: none; }
    #main_slider .txt_box:before { display: block; width: 90%; max-width: 400px; bottom: -50px; left: 100%; height: 50px; background: #fff url(../img/main/main_back02.png) right center no-repeat; background-size: 100%; transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
    #main_slider .txt_box small { font-size: 18px; }
    #main_slider .txt_box h2 { font-size: 30px; }
    #main_slider .txt_box p { font-size: 14px; }
    #main_section01 ul { border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
    #main_section01 ul li { width: 20%; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
    #main_section01 ul li a { padding: 30px 10px; }
    #main_section01 ul li:after { content: none; }
    #main_section01 ul li strong { font-size: 16px; margin-top: 5px; }
    #main_section02 { padding: 60px 0; }
    #main_section02 li .txt_box { padding: 20px; }
    #main_section02 li .txt_box h2 { font-size: 18px; }
    #main_section02 li .txt_box p { font-size: 14px; }
    #main_section03 { padding: 60px 15px 100px 15px; }
    #main_section03 .main_section03_tab li a { font-size: 16px; height: 40px; line-height: 40px; width: 100px; }
    #main_section03 .swiper-slide > a { padding: 25px; }
    #main_section03 .swiper-slide > a > strong { font-size: 20px; height: 60px; }
    #main_section03 .swiper-slide > a > div { font-size: 14px; height: 60px; }
    #main_section03 .swiper-slide > a > span { font-size: 14px; }
    #main_section04 { padding: 60px 0; }
    #main_section04 .txt_box { padding: 0 30px; }
    #main_section04 .txt_box h2 { font-size: 23px; margin-bottom: 10px; word-break: keep-all; }
    #main_section04 .txt_box p { font-size: 14px; word-break: keep-all; }
    #main_section04 .txt_box br { display: none; }
    #main_section04 .txt_box img { width: 250px; max-width: 100%; }
}
@media all and (max-width: 768px) {
    #main_slider .txt_box small { font-size: 16px; }
    #main_slider .txt_box h2 { font-size: 25px; margin-bottom: 10px; }
    #main_section01 ul li { width: 33.33%; }
    #main_section01 ul li a { padding: 20px 10px; }
    #main_section01 ul li strong { font-size: 14px; }
    #main_section02 li { width: 48.5%; margin-right: 3%; }
    #main_section02 li:nth-child(2n+2) { margin-right: 0; }
    #main_section02 li:nth-last-child(-n+2) { margin-top: 3%; }
    #main_section02 li .txt_box h2 { font-size: 17px; }
    #main_section03 .main_section03_tab li a { font-size: 14px; }
    #main_section03 .swiper-slide-active { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); }
    #main_section03 .swiper-slide > a > strong { font-size: 18px; height: 55px; margin-bottom: 5px; }
    #main_section04 .video_box, #main_section04 .txt_box { width: 100%; }
    #main_section04 .video_box iframe { height: 300px; }
    #main_section04 .txt_box { padding: 0; margin-top: 20px; }
    #main_section04 .txt_box h2 { font-size: 20px; }
    #main_section04 .txt_box h2 br { display: block; }
}
@media all and (max-width: 380px) { #main_slider .txt_box { padding-bottom: 70px; } }

#main_section03 .swiper{height:400px;overflow:hidden}