.fp-sr-only {display: none !important;}
body #fp-nav.fp-right {right: 70px;}
body #fp-nav ul li, 
body .fp-slidesNav ul li {width: 18px; height: 18px; margin: 0; left: 0; top: 0; margin: 0 0 20px !important;}
body #fp-nav ul li:last-child, 
body .fp-slidesNav ul li:last-child {margin: 0;}
body #fp-nav ul li a span, 
body .fp-slidesNav ul li a span,
body #fp-nav ul li:hover a span, 
body .fp-slidesNav ul li:hover a span {display: inline-block; position: relative; width: 18px; height: 18px; margin: 0; left: 0; top: 0; background: transparent; font-size: 0;}
body #fp-nav ul li a span::before, 
body .fp-slidesNav ul li a span::before,
body #fp-nav ul li:hover a span::before, 
body .fp-slidesNav ul li:hover a span::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background:rgba(70,60,102,0.2); border-radius: 50%; transition: .3s ease;}
body #fp-nav ul li a span::after,
body .fp-slidesNav ul li a span::after,
body #fp-nav ul li:hover a span::after ,
body .fp-slidesNav ul li:hover a span::after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border-radius: 50%; border: 2px solid #333;; opacity: 0; transition: .3s ease;}
body #fp-nav ul li a.active span, 
body .fp-slidesNav ul li a.active span, 
body #fp-nav ul li:hover a.active span, 
body .fp-slidesNav ul li:hover a.active span {width: 18px; height: 18px; margin: 0; left: 0; top: 0;}
body #fp-nav ul li a.active span::after,
body .fp-slidesNav ul li a.active span::after,
body #fp-nav ul li:hover a.active span::after,
body .fp-slidesNav ul li:hover a.active span::after {opacity: 1;}
body #fp-nav ul li a.active span::before,
body .fp-slidesNav ul li a.active span::before,
body #fp-nav ul li:hover a.active span::before,
body .fp-slidesNav ul li:hover a.active span::before {background: #463c66;}
/* common */
.section {min-height: 700px;}

.main_title {text-align: center;}
.main_title b {display: block; font-family: 'Poppins', sans-serif; font-style: italic; font-size: 0.9375rem; font-weight: 500; color: #463c66; margin: 0 0 10px; text-transform: uppercase;}
.main_title strong {display: block; margin: 0 0 10px; font-size:  2.5rem; font-weight: 700; color: #000000;}
.main_title p {font-size: 1.125rem; font-weight: 400; color: #666666;}
.main_title.white b ,
.main_title.white strong {color: #fff;}
.main_title.white p {color: #dddddd;}
.main_title.white a {display: inline-block; margin: 50px 0 0; color: #fff;  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1rem; border: 1px solid #fff; padding: 5px 30px; letter-spacing: 1px; transition: .3s ease;}
.main_title.white a:hover {background: #fff; color: #333; }
/* main-slide */

.main_slide .swiper-container {height: 100%;}
.main_slide .swiper-slide {display: table; width: 100%; height: 100vh; min-height: 700px; background-position: center !important; background-size: cover !important;}
.main_slide .swiper-slide > div {display: table-cell; vertical-align: middle; text-align: center;}
.main_slide .swiper-slide > div strong {position: relative; display: inline-block; font-family: 'Poppins', sans-serif; font-size:  4.625rem; font-weight: 700; color: #fff; margin: 0 0 20px; padding: 0 10px;text-shadow: 0 0 5px rgba(0,0,0,0.4);}
.main_slide .swiper-slide > div strong::after {content: ""; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; height: 1px;}
.main_slide .swiper-slide > div p {font-size: 1.375rem; font-weight: 500; color: #fff; padding: 0 10px;}
.main_slide .swiper-pagination {bottom: 180px;}
.main_slide .swiper-pagination-bullet {background: rgba(255,255,255,0.5); opacity: 1; border-radius: 0; width: 60px; height: 4px; margin: 0 5px !important; transition: .3s ease;}
.main_slide .swiper-pagination-bullet-active {background: #fff;}
.main_slide .swiper-button {margin: 0; top: 50%; transform: translate(0,-50%); width: 37px; height: 72px;}
.main_slide .swiper-button img {position: absolute; left: 0; top: 0;}
.main_slide .swiper-button-prev {left: 150px;}
.main_slide .swiper-button-next {right: 150px;}
.main_slide .swiper-button::after {display: none;}

.icon_scroll {position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; z-index: 2;}

/* section2 */
.section2 {background: linear-gradient(to bottom, #fff, #f1f0f2); text-align: center;}
.circle_list {margin: 60px 0 0;}
.circle_list li {position: relative; display: inline-block; width: calc((100% - 90px) / 4); float: left; margin: 0 30px 0 0; border-radius: 50%; box-shadow: inset 2px 2px 4px 0 rgba(0,0,0,0.2); border: 2px solid #faf9fa;} 
.circle_list li div.circle {position: absolute; display: table; width: calc(100% - 40px); height: calc(100% - 40px); left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 50%; box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.1);}
.circle_list li div.circle > div {display: table-cell; vertical-align: middle;}
.circle_list li div.circle > div .img_wrap {height: 80px; margin: 0 0 20px;}
.circle_list li div.circle > div .img_wrap img {max-height: 100%;}
.circle_list li div.circle > div p {font-size: 1.25rem; font-weight: 500; color: #000001;}
.circle_list li:last-child {margin: 0;}

/* section3 */
.section3 {text-align: center;}
.section3 ul {margin: 60px 0 0;}
.section3 li {display: table; float: left; width : calc((100% - 30px) / 2); margin: 0 30px 0 0; background-position: center !important; background-size: cover !important; height: 410px;}
.section3 li:last-child {margin: 0;}
.section3 li > div {display: table-cell; vertical-align: middle; color: #fff;}
.section3 li > div b {display: block; font-size: 1.75rem; font-weight: 700; margin: 0 0 15px;}
.section3 li > div p {font-size: 0.9375rem; font-weight: 200; margin: 0 0 30px;}
.section3 li > div a {display: table; margin: 0 auto; width: 100%; max-width: 105px; height: 35px; text-align: center; border: 2px solid #fff; transition: .3s ease;}
.section3 li > div a span {display: table-cell; vertical-align: middle; color: #fff; transition: .3s ease; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1rem;}

.section3 li > div a:hover {background: #fff;}
.section3 li > div a:hover span {color: #000000;}

/* section4 */
.section4 .main_tit_bg {display: table; width: 100%; height: calc(100vh - 400px); max-height: 320px; background-position: center !important; background-size: cover !important;}
.section4 .main_tit_bg > div {display: table-cell; vertical-align: middle; padding: 20px 0;}
.section4 .list_part { text-align: center; margin: 80px 0 0; }
.section4 .list_part > div {display: inline-block; float: left; padding: 0 50px; width: 50%;  text-align: left;}
.section4 .top_wrap {border-bottom: 2px solid #000; padding: 0 0 20px;}
.section4 .top_wrap em {display: inline-block; float: left; font-size: 1.563rem; font-weight: 700;} 
.section4 .top_wrap a {position: relative; display: inline-block; float: right; width: 30px; height: 30px; border: 1px solid #000000; } 
.section4 .top_wrap a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.section4 .list_part .conts {height: 320px;}
.section4 .list_part .conts a {table-layout: fixed; display: table; width: 100%; border-bottom: 1px solid #ddd; transition: .3s ease;}
.section4 .list_part .conts a > div {display: table-cell; vertical-align: middle; width: 100%;}
.section4 .list_part .conts a > div > * {display: inline-block; float: left;}
.section4 .list_part .conts .date {font-size: 1rem; font-weight: 400; color: #666666;}

.section4 .list_part .conts.four a {height: 25%;}
.section4 .list_part .conts.four a:hover {background: #eaeaea;}
.section4 .list_part .conts.four a > div p {width: calc(100% - 80px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 1.125rem; font-weight: 400; color: #333333; line-height: 1;}
.section4 .list_part .conts.four a .date {float: right; line-height: 1;}

.section4 .list_part .conts.two a {height: 50%; }
.section4 .list_part .conts.two .photo {position: relative; width: 150px; height: 96px; background: url('/images/main/no_img.jpg')no-repeat; background-position: center !important; background-size: cover !important; }
.section4 .list_part .conts.two .photo .plus_wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition: .3s ease;}
.section4 .list_part .conts.two .photo .plus_wrap img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.section4 .list_part .conts.two .txt_wrap {position: relative; width: calc(100% - 150px); height: 96px; padding: 0 0 0 20px;}
.section4 .list_part .conts.two .txt_wrap p {font-size: 1.125rem; font-weight: 400; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 여러 줄 자르기 추가 스타일 */ white-space: normal; line-height: 1.5; height: 3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.section4 .list_part .conts.two .date {position: absolute; left: 20px; bottom: 0; }

.section4 .list_part .conts.two a:hover .photo .plus_wrap {opacity: 1;}

/* section5 */
.section5 .main_tit_bg {display: table; width:100%; height: calc(100vh - 300px); background-position: center !important; background-size: cover !important; padding: 90px 0 0; min-height: 400px;}
.section5 .main_tit_bg > div {display: table-cell; vertical-align: middle; color: #fff;}

@media screen and (max-width: 1300px) {
    .main_slide .swiper-button-next {right: 10px;}
    .main_slide .swiper-button-prev {left: 10px; }
    body #fp-nav.fp-right {right: 10px;}
}
@media screen and (max-width: 1024px) {
    .main_slide .swiper-button {display: none;}
    .main_slide .swiper-slide {min-height: 560px;}

    .section .fp-tableCell,
    .section {height: auto !important; min-height: 0;}


    .section {padding: 40px 0;}
    .section5,
    .section1 {padding: 0 !important; }
    
    .main_slide .swiper-pagination {bottom: 50px;}

    .circle_list {margin: 50px auto 0; max-width: 500px;}
    .circle_list li {width: calc((100% - 15px) / 2); margin: 0 15px 15px 0;}
    .circle_list li:nth-of-type(2n) {margin: 0 0 15px;}

    .section3 li {width: 100%; margin: 0 0 20px; height: auto; padding: 50px 0;}

    .section4 .list_part {margin: 40px 0 0;}
    .section4 .main_tit_bg {max-height: none; height: 200px;}
    .section4 .list_part > div {padding: 0; width: calc((100% - 10px)/2); margin: 0 10px 0 0;}
    .section4 .list_part > div:last-child {margin: 0}
    

    .section5 .main_tit_bg {height: auto; padding: 40px 0; min-height: 0;}
}
@media screen and (max-width: 768px) {
    .main_slide .swiper-slide > div strong {font-size: 4rem;}
    .main_slide .swiper-slide > div p br {display: none;}
    
    .section4 .top_wrap {padding: 0 0 10px;}
    .section4 .list_part > div {width: 100%; margin: 0 0 20px;}
    .section4 .list_part .conts {height: auto;}
    .section4 .list_part .conts.two a,
    .section4 .list_part .conts.four a {height: auto; padding: 20px 0;}

    .section5 .main_tit_bg {height: auto; padding: 20px 0;}

    .circle_list {margin: 30px auto 0;}
    .section3 ul {margin: 30px 0 0;}

    .section {padding: 30px 0;}
}
@media screen and (max-width: 480px) {
    .main_slide .swiper-slide > div strong {line-height: 1.1;}
    .main_slide .swiper-pagination-bullet {width: 40px; height: 2px;}

    .circle_list li div.circle {width: calc(100% - 20px); height: calc(100% - 20px);}
    .circle_list li div.circle > div .img_wrap {height: 40px; margin: 0 0 10px;}
    .section4 .list_part .conts.two .txt_wrap {padding: 0 0 0 10px;}
    .section4 .list_part .conts.two .date {left: 10px;}
    .section4 .top_wrap a {width: 25px; height: 25px;}
}