/* 메인 비쥬얼 */ .main_visual{width: 100%;} .main_visual .swiper-container{position: relative;} .main_visual .swiper-slide{position: relative;} .main_visual .swiper-slide .txt_wrap{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; margin-top: 300px;} .main_visual .swiper-slide .txt_wrap p{color: #fff; text-align: center;} .main_visual .swiper-slide .txt_wrap .s_txt{font-size: 39px; line-height: 42px; font-weight: 300;} .main_visual .swiper-slide .txt_wrap .l_txt{font-size: 66px; line-height: 68px; font-weight: 500; margin: 24px 0 40px;} .main_visual .swiper-slide .txt_wrap .ico_top{display: inline-block; position: relative; font-size: 0; line-height: 42px;} .main_visual .swiper-slide .txt_wrap .ico_top::after{content: '' ;display: inline-block; width: 50px; height: 45px; position: absolute; right: -40px; top: -40px; background-repeat: no-repeat; background-image: url(../images/main/ico_title_top.png);} .main_visual .swiper-slide .img_wrap{position: relative; width: 100%; height: 100vh; background-size: cover; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;} .main_visual .swiper-slide .img_wrap img{position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; object-position: center;} .main_visual .swiper_control{position: absolute; left: 0; right: 0; width: 100%; z-index: 10; bottom: 160px; display: flex; justify-content: center; align-items: center;} .main_visual .swiper_control .btn_play{display: block; width: 12px; height: 15px; background-repeat: no-repeat; background-size: contain; font-size: 0;} .main_visual .swiper_control .btn_stop{background-image: url(../images/main/ico_slide_stop.png);} .main_visual .swiper_control .btn_start{display: none;background-image: url(../images/main/ico_slide_start.png);} .main_visual .swiper_control .swiper-button-next, .main_visual .swiper_control .swiper-button-prev{position: static; width: 8px; height: 16px; background-size: contain; margin: 0;} .main_visual .swiper_control .swiper-button-prev{background-image: url(../images/main/ico_slide_prev.png); margin-right: 20px;} .main_visual .swiper_control .swiper-button-next{background-image: url(../images/main/ico_slide_next.png); margin-left: 20px;} .main_visual .swiper_control .swiper-pagination{position: static; margin-right: 33px;} .main_visual .swiper_control .swiper-pagination-bullet{width: 45px; height: 4px; border-radius: 0; border: 1px solid #fff; background: transparent; opacity: 1; margin-right: 10px; vertical-align: middle;} .main_visual .swiper_control .swiper-pagination-bullet-active{background: #fff;} .main_visual .link_control{position: absolute; left: 0; right: 0; bottom: 0; background: rgba(40, 65, 20, 0.70); z-index: 10;} /* 20231117 웹접근성 */ .main_visual .link_control ul{max-width: 1400px; min-width: 1105px; width: 73%; margin: 0 auto; font-size: 0;} .main_visual .link_control ul li{display: inline-block; vertical-align: top; width: 20%;} .main_visual .link_control ul li a{display: block; height: 80px; padding: 30px 0; font-size: 20px; color: #fff; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.44); transition: all .2s; background-color: rgba(40, 65, 20, 0.70);} /* 20231117 웹접근성 */ .main_visual .link_control ul li:last-child a{border-right: 1px solid rgba(255, 255, 255, 0.44); } /*.main_visual .link_control ul li:hover a{background: transparent linear-gradient(82deg, rgba(40, 65, 20, 0.70) 0%, rgba(82, 170, 110, 0.66) 100%) 0% 0% no-repeat padding-box; border-color: transparent; font-weight: 600;} */ /* 202311 웹접근성 */ /*.main_visual .link_control ul li.on a{background: transparent linear-gradient(82deg, rgba(40, 65, 20, 0.70) 0%, rgba(82, 170, 110, 0.66) 100%) 0% 0% no-repeat padding-box; border-color: transparent; font-weight: 600;} */ /* 202311 웹접근성 */ /* 게시판, 가이드 */ .main .inner{max-width: 1400px; margin: 0 auto; padding: 160px 0; display: flex; justify-content: space-between;} .main_content{width: 48%; max-width: 650px; /*flex: 1 1 auto;*/ position: relative;} .main_content .tit_area{display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px;} .main_content .tit_area .tit{display: inline-block; font-size: 24px; line-height: 26px; color: #111; font-weight: 600; position: relative;} .main_content .tit_area .tit::after{content: ''; width: 10px; height: 10px; background-color: #004f4a; border-radius: 10px; position: absolute; right: -18px; top: 0;} .main_content .tit_area .tab_area{border: none;} .main_content .tit_area .tab_area .tab_btn{font-size: 16px; color: #242424; margin-left: 20px;} .main_content .tit_area .tab_area .tab_btn:first-child{margin-left: 0;} .main_content .tit_area .tab_area .tab_btn.selected{color: #004f4a; font-weight: 500;} .main_content .tit_area .btn_more{display: block; width: 26px; height: 26px; font-size: 0; background-color: #bcbcbc; background-repeat: no-repeat; background-position: 50% 50%; background-size: 11px; background-image: url(../images/main/ico_btn_more.png);} .main_content .tab_content{display: none;} .main_content .tab_content ul .today{border: 1px solid #d3d3d3; padding: 31px 0; margin-bottom: 28px;} .main_content .tab_content ul .today a{display: flex; align-items: center;} .main_content .tab_content ul .today .date{width: 108px; text-align: center;} .main_content .tab_content ul .today .date strong{font-size: 34px; font-weight: 700; color: #282828;} .main_content .tab_content ul .today .date p{font-family: "Rubik", sans-serif !important; font-size: 16px; color: #8d8d8d;} .main_content .tab_content ul .today .cnt_txt{width: calc(100% - 108px); padding-right: 26px;} .main_content .tab_content ul .today .cnt_txt p{font-size: 18px; color: #282828; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .main_content .tab_content ul .list{position: relative; margin-bottom: 15px;} .main_content .tab_content ul .list::before{content: ''; width: 6px; height: 6px; background-color: #b2b2b2; border-radius: 6px; position: absolute; left: 0; top: 50%; margin-top: -3px;} .main_content .tab_content ul .list:last-child{margin-bottom: 0;} .main_content .tab_content ul .list a{display: block; padding-left: 40px;} .main_content .tab_content ul .list a::after{content: ''; display: block; clear: both;} .main_content .tab_content ul .list p{font-size: 16px; line-height: 21px; font-weight: 500; color: #484848; width: calc(100% - 90px); float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .main_content .tab_content ul .list span{font-family: "Kanit", sans-serif !important; font-size: 16px; line-height: 18px; color: #484848; float: right;} .main_content .guide_content ul{display: flex;} .main_content .guide_content ul li{width: calc(100% / 3 - 20px); margin-left: 20px; flex: 1;} .main_content .guide_content ul li:first-child{margin-left: 0;} .main_content .guide_content ul li a{display: block;} /* 202311 웹접근성 */ .main_content .guide_content ul li .img_wrap{display: block; padding-top: 155%; position: relative; overflow: hidden; border: 1px solid #d3d3d3;} .main_content .guide_content ul li .img_wrap img{width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); object-fit: contain;} .main_content .guide_content ul li .txt_wrap .tit{font-size: 16px; line-height: 18px; color: #000; font-weight: 600; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 25px;} .main_content .guide_content ul li .txt_wrap .txt{font-size: 14px; line-height: 16px; color: #43945b; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 20px;} /* 202311 웹접근성 */ .main_content .bbs_tab li .tab_btn{font-size: 16px; color: #242424; margin-left: 20px;position: absolute;top: 0;right: 0;} .main_content .bbs_tab li:first-child .tab_btn{right: 200px;} .main_content .bbs_tab li:nth-child(2) .tab_btn{right: 65px;} .main_content .bbs_tab li .tab_btn:first-child{margin-left: 0;} .main_content .bbs_tab li .tab_btn.selected{color: #004f4a; font-weight: 500;} .main_content .bbs_tab li a.selected + .tab_content{display: block;} /* 그래프 */ .main.type-bg{width: 100%; /*height: 800px;*/ background-repeat: no-repeat; background-size: cover; background-image: url(../images/main/img_btm_bg.png);} .main.type-bg .inner{width: 100%; max-width: 100%; margin: 0 auto; padding: 120px 0 150px 0;} .left_menu{width: 27%;} .left_menu ul > li .tab_btn2{display: block; width: 100%; height: 108px; line-height: 108px; font-size: 24px; font-weight: 500; padding-left: 50%; text-align-last: left;} .left_menu ul > li .tab_btn2.selected{color: #fff; background-color: #013547; position: relative;} .left_menu ul > li .tab_btn2.selected::before{content: ''; width: 150px; height: 108px; background-repeat: no-repeat; background-image: url(../images/main/img_left_bg.png); position: absolute; right: -23px; top: 6px; z-index: 3;} .main_content_area{width: 70%; background-color: rgba(255, 255, 255, 0.7); padding: 60px 0 30px 60px;} .main_content_area .cnt_tit{font-size: 25px; line-height: 27px; font-weight: 600; color: #111; margin-bottom: 44px; position: relative; padding-left: 23px;} .main_content_area .cnt_tit::before{content: ''; width: 9px; height: 9px; background-color: #3d427a; border-radius: 9px; position: absolute; left: 0; top: 50%; margin-top: -4px;} .main_content_area img{max-width: 100%;} .main_content_area .tab_inner2{display: none; font-size: 0; max-width: 1078px;} .main_content_area .tab_inner2 div{display: inline-block; width: 50%; } .main_content_area .tab_inner2 .left{width: calc(50% - 20px); margin-right: 20px;} /* 메인 팝업 */ .main_popup{position: fixed; z-index: 300; background-color: #fff; width: 100%; height: 100%;} .main_popup .img_box{width: 480px; height: 600px; background-image: url(../images/main/img_popup.png); background-size: contain; background-repeat: no-repeat; position: relative;} .main_popup .btn_area{position: absolute; top:350px; left: 50%; transform: translateX(-50%);} .main_popup .btn.link{display: block; padding:0 64px; height: 46px; line-height: 46px; background-color: #14642b;font-weight: 700; font-size: 14px; color: #fff; border-radius: 6px;} .main_popup .pop_bot{display: flex; align-items: center; justify-content: space-between; background-color: #222; color: #fff; height: 35px; padding:0 20px;} .main_popup .pop_bot .chk_area input{vertical-align: middle;} .main_popup .pop_bot .chk_area .chk{color: #fff;font-size: 13px;} .main_popup .pop_bot .btn{color: #fff;font-size: 13px;} .main_popup .pop_content{display: block; width: 100%; height: 100%; max-height: calc(100% - 35px); padding: 60px; background-repeat: no-repeat;background-position: center;background-image: cover;} .main_popup .pop_content.bg_1{background-image: url(../images/main/img_popup_bg_01.png);} .main_popup .pop_content.bg_2{background-image: url(../images/main/img_popup_bg_02.png); padding: 90px;} .main_popup .pop_content .cnt_box{height: 380px; overflow: auto;} .main_popup .pop_content .pop_btn_area{text-align: center; margin-top: 60px;} .main_popup .pop_content .pop_btn_area .btn{display: inline-block; width: 165px; height: 44px; font-size: 16px; color: #fff; font-weight: 500; background-color: #052a34; border-radius: 3px;} .main_popup .pop_content.bg_2 .cnt_box{height: 320px;} .main_popup .pop_content.bg_2 .pop_btn_area{margin-top: 30px;} @media only screen and (max-width: 1780px) { .main_content_area{padding-right: 105px;} } @media only screen and (max-width: 1650px) { .main .inner{width: 85%;} .main_content{width: 47%;} } @media only screen and (max-width: 1440px) { .header{padding: 0 20px;} .header .nav > ul > li > a{font-size: 16px;} }