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

/* Default Layout */
#wrap {width:100%; height: 100%;}
#seoul-common-gnb {z-index: 300; position: absolute; left: 0; top: 0; width: 100%; height: 48px; display: none; background-color: #eee;}
.fp-viewing-firstPage #seoul-common-gnb {display: block;}
.fp-viewing-firstPage .toparea {top: 48px;}

/*메뉴*/
#main .toparea {position: fixed;}
.toparea {z-index: 303; position: absolute; top: 0; left: 0; width: 100%; height: 155px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.toparea .topmenu {padding: 0 60px; display: flex; display:-webkit-flex; justify-content: space-between; align-items: center; height: 100%;}
.toparea .logo {z-index: 310; position: relative; display: block; width: 152px; height: 47px; padding-left: 52px; font-size: 16px; line-height: 22px; letter-spacing: -1px; color: #fff; background-repeat: no-repeat; background-position: 0 center; background-image: url('/images/web/logo.png'); background-size: 45px auto;}
.toparea .logo.active {background-image: url('/images/web/logo_b.png') !important;}
.toparea .gnb {display: flex; display:-webkit-flex; justify-content: center;}
.toparea .gnb a {transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.toparea .gnb > li {position: relative; padding: 0 35px;}
.toparea .gnb > li > a {display: block; line-height: 155px; color: #fff; text-align: center; font-size: 20px; font-weight: 600; font-family: 'Nanum Square', sans-serif;}
.toparea .gnb > li .menu_list {z-index: 206; position: absolute; left: calc(50% - 100px); top: 135px; padding: 20px 10px; width: 200px; display: none; background-color: #555; box-shadow: 3px 0px 12px rgba(0, 0, 0, 0.3);}
.toparea .gnb > li .menu_list li a {display: block; color: #eee; line-height: 35px; text-align: center;}
.toparea .gnb > li .menu_list li:hover a {color: #fff; font-weight: 500;}
.toparea .button_box {margin-top: 0;}
.toparea .button_box .d_flex {height: 100%;}
.toparea .button_box a {margin-left: 25px; color: #fff; font-size: 14px;}
.toparea .button_box a:first-child {margin-left: 0;}
.toparea .button_box button {margin-left: 25px;}
.toparea .button_box .btn_menu {width: 30px; height: 19px;}
.toparea .button_box .btn_language {padding: 0 12px; height: 25px; line-height: 23px; border-radius: 25px; border: 1px solid #fff;}
.toparea .button_box .btn_language:hover {background-color: #fff; color: #000; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.toparea .total_search_area {z-index: 212; position: absolute; left: 0; top: 155px; padding: 50px 0 70px; display: none; width: 100%; box-shadow: 0 -1px 2px -1px  rgba(0, 0, 0, 1); background-color: #333;}
.toparea .total_search_area .btn_close {position: absolute; top: calc(50% - 11px); right: 60px;}
.toparea .total_search_area .search_box {overflow: hidden; position: relative; margin: 0 auto; width: 720px; height: 65px; border-bottom: 2px solid #fff;}
.toparea .total_search_area .search_box input {padding: 0 40px 0 10px; width: 100%; height: 100%; color: #fff; font-size: 22px; background-color: transparent;}
.toparea .total_search_area .search_box input::-webkit-input-placeholder {color:#fff !important; opacity: 0.6;}
.toparea .total_search_area .search_box input:-moz-placeholder {color:#fff !important; opacity: 0.6;}
.toparea .total_search_area .search_box input::-moz-placeholder {color:#fff !important; opacity: 0.6;}
.toparea .total_search_area .search_box input:-ms-input-placeholder {color:#fff !important; opacity: 0.6;}
.toparea .total_search_area .search_box input:focus {outline:none;}
.toparea .total_search_area .search_box .btn_search {position: absolute; right: 2px; top: calc(50% - 15px);}
.toparea .total_search_area .search_box .btn_search .icon {width: 31px; height: 31px;}
.toparea .total_search_area .search_box .btn_search .icon::after {width: 23px; height: 23px;}
.toparea .total_search_area .search_box .btn_search .icon::before {width: 12px;}
.toparea .allmenu-category {z-index: 304; position: absolute; left: 0; top: 0; display: none; width: 100%; background-color: #fff; }
.toparea .allmenu-category .menu_box {position: relative; padding: 130px 8% 60px;}
.toparea .allmenu-category .menu_box .btn_close {position: absolute; right: 60px; top: 65px; background-color: #fff;}
.toparea .allmenu-category .menu_box .btn_close .icon {width: 25px; height: 25px;}
.toparea .allmenu-category .menu_box .btn_close .icon::after,
.toparea .allmenu-category .menu_box .btn_close .icon::before {top: 11px; width: 32px; background-color: #222;}
.toparea .allmenu-category .menu_box .top_bar {display: none; position: absolute; top: 25px; left: 15px;}
.toparea .allmenu-category .menu_box .top_bar li {float: left; position:relative; padding-right: 20px;}
.toparea .allmenu-category .menu_box .top_bar li:first-child::after {content:''; position: absolute; top: 4px; right: 10px; width: 1px; height: 10px; background: #ccc;}

.toparea .allmenu-category .menu_box .all_gnb {position: relative; display: flex; display:-webkit-flex;}
.toparea .allmenu-category .menu_box .all_gnb > li {padding: 0 10px 0 40px; width: 100%; border-right: 1px solid #eee;}
.toparea .allmenu-category .menu_box .all_gnb > li:last-child {border-right: 0}
.toparea .allmenu-category .menu_box .all_gnb > li > a {position: relative; margin-bottom: 30px; display: block; color: #000; font-size: 28px; line-height: 50px; letter-spacing: -1px; font-weight: 900; font-family: 'Nanum Square', sans-serif;}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li {margin-bottom: 20px;}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:last-child {margin-bottom: 0;}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > a {display: block; color: #000; font-size: 18px; line-height: 30px;}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:hover > a,
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li.active > a {color: #000; font-weight: 500;}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li.active > a .icon::before {transform: rotate(0deg);}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:hover > a .icon::after,
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:hover > a .icon::before {background-color: #015ab8;}
.toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:hover > a::after {background-color: #015ab8;}

.fp-viewing-4rdPage .toparea {background: #fff;}
.fp-viewing-4rdPage .toparea .logo {background-image: url("/images/web/logo_b.png");}
.fp-viewing-4rdPage .toparea .gnb > li > a {color: #000;}
.fp-viewing-4rdPage .toparea .button_box a {color: #000;}
.fp-viewing-4rdPage .btn_menu span { position: absolute; left: 0px; width: 100%; height: 3px; background-color: rgb(0, 0, 0); }
.fp-viewing-4rdPage .d_flex .btn_search .icon::after {border: 2px solid rgb(0, 0, 0);}
.fp-viewing-4rdPage .d_flex .btn_search .icon::before {height: 2px; background-color: rgb(0, 0, 0);}
.fp-viewing-4rdPage > .btn_close .icon::after, .fp-viewing-4rdPage > .btn_close .icon::before {background-color: rgb(0, 0, 0);}
.fp-viewing-lastPage .toparea {background: #fff;}
.fp-viewing-lastPage .toparea {background: #fff;}
.fp-viewing-lastPage .toparea .logo {background-image: url("/images/web/logo_b.png");}
.fp-viewing-lastPage .toparea .gnb > li > a {color: #000;}
.fp-viewing-lastPage .toparea .button_box a {color: #000;}
.fp-viewing-lastPage .btn_menu span { position: absolute; left: 0px; width: 100%; height: 3px; background-color: rgb(0, 0, 0); }
.fp-viewing-lastPage .d_flex .btn_search .icon::after {border: 2px solid rgb(0, 0, 0);}
.fp-viewing-lastPage .d_flex .btn_search .icon::before {height: 2px; background-color: rgb(0, 0, 0);}
.fp-viewing-lastPage > .btn_close .icon::after, .fp-viewing-lastPage > .btn_close .icon::before {background-color: rgb(0, 0, 0);}

#fp-nav {position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0,0,0);} 
#fp-nav.right {right: 60px;} 
#fp-nav ul {margin: 0; padding: 0;} 
#fp-nav ul li {display: block; width: 22px; height: 22px; margin: 0 0 15px; position:relative;} 
#fp-nav ul li a {display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none;} 
#fp-nav ul li a span {display: block; z-index: 1; height: 100%; width: 100%; background: url('/images/web/icon_main_section_paging.png') no-repeat center; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;} 
#fp-nav ul li a.active span {background-image: url('/images/web/icon_main_section_paging_active.png');} 
.fp-viewing-4rdPage #fp-nav ul li a span,
.fp-viewing-lastPage #fp-nav ul li a span {background: url('/images/web/icon_main_section_paging_b.png') no-repeat center;}
.fp-viewing-lastPage #fp-nav ul li a.active span,
.fp-viewing-4rdPage #fp-nav ul li a.active span {background-image: url('/images/web/icon_main_section_paging_active_b.png');}

.maincontents .section {overflow: hidden; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.maincontents .section h2 {color: #fff; font-size: 55px; font-weight: 600; text-align: center; height: 52px; line-height: 52px;}
.maincontents .section .d_area * {transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.maincontents .section.section1 {padding: 270px 8% 0; background-image: url('/images/web/bg_main_section1.jpg');}
.maincontents .section.section1 .slide_box.banner {width: 100%; height: auto;}
.maincontents .section.section1 .slide_box.banner .slick-list {}
.maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a {display: block; padding: 1px;}
.maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .img_box {padding-top: 32.24%; float: left; width: 49.6%; height: 0;}
.maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box {float: right; padding: 50px 0 0 75px; width: 50.4%;}
.maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h3 {margin-bottom: 40px; color: #fff; font-size: 65px; font-weight: 900; line-height: 80px; word-break: keep-all;}
.maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h4 {width: 75%; margin-bottom: 60px; color: #fff; font-size: 27px; line-height: 40px; word-break: keep-all;}
.maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box p {color: #fff; font-size: 20px; line-height: 36px;}
.maincontents .section.section1 .slide_box.banner .pro-bar {overflow: hidden; position: absolute; left: calc(50% - 43px); bottom: 30px; width: 70px; height: 2px; background-color: rgba(255, 255, 255, 0.4);}
.maincontents .section.section1 .slide_box.banner .pro-ani::after {content: ''; position: absolute; left: 0; top: 0; height: 100%; background-color: #fff; animation: visualBar 4s 1; width:100%;}
@keyframes visualBar{
    0% {width:0;}
    100% {width:100%;}
}
.maincontents .section.section1 .slide_box.banner.pause .pro-ani::after, .maincontents .section.section1 .slide_box.banner:hover .pro-ani::after {animation-play-state: paused;}
.maincontents .section.section1 .slide_box.banner .slick-dots {position: absolute; left: calc(50% - 67px); bottom: 20px;}
.maincontents .section.section1 .slide_box.banner .slick-dots li {display: none; font-size: 16px; color: #ddd;}
.maincontents .section.section1 .slide_box.banner .slick-dots li .num {margin-right: 85px;}
.maincontents .section.section1 .slide_box.banner .slick-dots li.slick-active {display: block;}
.maincontents .section.section1 .slide_box.banner .slick-pause {position: absolute; left: calc(50% + 63px); bottom: 27px; width: 7px; height: 10px; background-repeat: no-repeat; background-position: center center; background-size: 100%; background-image: url('/images/web/icon_pause.png');}
.maincontents .section.section1 .slide_box.banner.pause .slick-pause {background-image: url('/images/web/icon_play.png');}
.maincontents .section.section1 .slide_box.banner .slick-arrow {bottom: 21px; width: 21px; height: 21px;}
.maincontents .section.section1 .slide_box.banner .slick-arrow::after, 
.maincontents .section.section1 .slide_box.banner .slick-arrow::before {left: calc(50% - 3px); top: calc(50% - 2px); width: 8px; height: 2px; border-radius: 0;}
.maincontents .section.section1 .slide_box.banner .slick-arrow::before {top: calc(50% - 1px);}
.maincontents .section.section1 .slide_box.banner .slick-prev.slick-arrow {left: calc(50% + 74px);}
.maincontents .section.section1 .slide_box.banner .slick-next.slick-arrow {left: calc(50% + 94px);}

.maincontents .section.section2 {padding: 250px 0 0; background-image: url('/images/web/bg_main_section2.jpg');}
.maincontents .section.section2 h2 {position: absolute; width:100%; z-index: 9;}
.maincontents .section.section2 ul {overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100vh;}
.maincontents .section.section2 ul li {position: relative; float: left; width: 25%; height: 100%; text-align: center; cursor: pointer;}
.maincontents .section.section2 ul li a {position: absolute; top: 475px; left: 0; display: block; width: 100%; z-index: 1;}
.maincontents .section.section2 ul li a .text_box {padding-top:125px;}
.maincontents .section.section2 ul li.list1 a .text_box {background: url('/images/web/icon_section2_1.png') no-repeat center 0;}
.maincontents .section.section2 ul li.list2 a .text_box {background: url('/images/web/icon_section2_2.png') no-repeat center 0;}
.maincontents .section.section2 ul li.list3 a .text_box {background: url('/images/web/icon_section2_3.png') no-repeat center 0;}
.maincontents .section.section2 ul li.list4 a .text_box {background: url('/images/web/icon_section2_4.png') no-repeat center 0;}
.maincontents .section.section2 ul li a .text_box h3 {font-size: 28px; color: #fff;}
.maincontents .section.section2 ul li a .text_box p {font-size: 18px; color: #fff; padding: 15px 0 60px;}
.maincontents .section.section2 ul li a .go {width: 60px; height: 60px; text-align: center; line-height: 58px; font-weight: 600; font-size:20px; border: 1px solid #fff; color: #fff; margin: 0 auto; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
.maincontents .section.section2 ul li:hover a .go {background:#fff; color: #000;}
.maincontents .section.section2 ul li .bg {z-index: 0; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); transform: scaleX(0); transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.maincontents .section.section2 ul li:hover .bg {transform: scaleX(1);}

.maincontents .section.section3 {padding: 220px 0 0; background-image: url('/images/web/bg_main_section3.jpg');}
.maincontents .section.section3 .d_area ul {position: relative; margin: 40px 0 60px; height: 230px;}
.maincontents .section.section3 .d_area ul li {text-align: center;}
.maincontents .section.section3 .d_area ul li a {display:block; position: absolute; top: 10px; width:210px; height: 210px; font-size:20px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;}
.maincontents .section.section3 .d_area ul li.list1 a {left:0; padding: 130px 0 0; background: url('/images/web/icon_section3_1.png') no-repeat center 34px;}
.maincontents .section.section3 .d_area ul li.list2 a {left: calc(33% - 147.5px); padding: 140px 0 0; background: url('/images/web/icon_section3_2.png') no-repeat center 42px;}
.maincontents .section.section3 .d_area ul li.list3 a {left: calc(50% - 105px); padding: 140px 0 0; background: url('/images/web/icon_section3_3.png') no-repeat center 42px;}
.maincontents .section.section3 .d_area ul li.list4 a {right: calc(33% - 147.5px); padding: 130px 0 0; background: url('/images/web/icon_section3_4.png') no-repeat center 34px;}
.maincontents .section.section3 .d_area ul li.list5 a {right: 0; padding: 130px 0 0; background: url('/images/web/icon_section3_5.png') no-repeat center 43px;}
.maincontents .section.section3 .d_area ul li:hover a {top:0; width:230px; height: 230px; border: 1px solid rgba(255, 255, 255, 1);}
.maincontents .section.section3 .d_area ul li.list1:hover a {left: -10px; padding: 140px 0 0; background: url('/images/web/icon_section3_1.png') no-repeat center 44px;}
.maincontents .section.section3 .d_area ul li.list2:hover a {left: calc(33% - 157.5px); padding: 150px 0 0; background: url('/images/web/icon_section3_2.png') no-repeat center 52px;}
.maincontents .section.section3 .d_area ul li.list3:hover a {left: calc(50% - 115px); padding: 150px 0 0; background: url('/images/web/icon_section3_3.png') no-repeat center 52px;}
.maincontents .section.section3 .d_area ul li.list4:hover a {right: calc(33% - 157.5px); padding: 140px 0 0; background: url('/images/web/icon_section3_4.png') no-repeat center 44px;}
.maincontents .section.section3 .d_area ul li.list5:hover a {right: -10px; padding: 140px 0 0; background: url('/images/web/icon_section3_5.png') no-repeat center 53px;}

.maincontents .section.section3 dl {position: relative; width: 100%; left: calc(50% - 600px); display: flex; display:-webkit-flex;}
.maincontents .section.section3 dl dt {flex: none; width: 175px; font-size: 32px; line-height: 44px; color: #fff; overflow: hidden;}
.maincontents .section.section3 dl dd {width: 100%; color:#fff;}
.maincontents .section.section3 .slide_box .slick-slider {position: relative;}
.maincontents .section.section3 .slide_box .slick-slider .slick-slide {}
.maincontents .section.section3 .slide_box .slick-slider .slick-slide > div {padding: 0 7px;}
.maincontents .section.section3 .slide_box .slick-slider .slick-slide a {display: block; border: 5px solid rgba(255, 255, 255, 0);}
.maincontents .section.section3 .slide_box .slick-slider .slick-slide.slick-current a { border: 5px solid #fff;}
.maincontents .section.section3 .slide_box .slick-slider .slick-slide a .img_box {padding-top: 70%; width: 100%; height: 0;}
.maincontents .section.section3 .slide_box .slick-slider .slick-slide a p {padding: 10px 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background: #fff;}
.maincontents .section.section3 .slide_box .slick-slider .slick-arrow {z-index: 102; position: absolute; width: 50px; height: 50px; font-size: 0; color: transparent; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%;}
.maincontents .section.section3 .slide_box .slick-slider .slick-arrow::after,
.maincontents .section.section3 .slide_box .slick-slider .slick-arrow::before {content: ''; position: absolute; left: calc(50% - 8px); top: calc(50% - 1px); width: 14px; height: 3px; background-color: #fff; border-radius: 3px; transform-origin: left;}
.maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-prev {bottom: 0; left: -175px;}
.maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-next {bottom: 0; left: -115px;}

.maincontents .section.section4 {overflow: hidden; padding: 230px 0 0; background-image: url('/images/web/bg_main_section4.jpg');}
.maincontents .section.section4 h2 {padding: 0 0 20px; color: #000;} 
.maincontents .section.section4 h3 {padding: 0 0 20px; font-size: 28px; font-weight: 600; color: #000;}
.maincontents .section.section4 .d_area {overflow: hidden; padding: 100px 0 0;}
.maincontents .section.section4 .archive {float:left; width: calc(50% - 40px);}
.maincontents .section.section4 .archive .box{position:relative; height: 400px; background: #fff;}
.maincontents .section.section4 .archive .box .swiper-container{width: 100%; height: calc(100% - 60px);overflow: hidden;}
.maincontents .section.section4 .archive .box .swiper-container .swiper-wrapper {width: 100%;height: 100%;}
.maincontents .section.section4 .archive a {display: block; text-align: center; margin: 0 auto; width: calc(100% - 170px);}
.maincontents .section.section4 .archive .img_box {margin: 30px 0 15px; width: 100%; height: 260px;}
.maincontents .section.section4 .archive a p {display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 250px; font-size: 20px; color: #555;}



.maincontents .section.section4 .archive .swiper-notification{display: none;}
.maincontents .section.section4 .archive .swiper-button-next:after,
.maincontents .section.section4 .archive .swiper-button-prev:after{font-size: 30px;color: #555;}


.maincontents .section.section4 .archive .swiper-pagination{margin-bottom: 15px}
.maincontents .section.section4 .archive .swiper-pagination-bullet{width: 10px; height: 10px;opacity: unset;background: #cccccc;}
.maincontents .section.section4 .archive .swiper-pagination-bullet-active{background: #333;}

.maincontents .section.section4 .archive .swiper-pagination-bullet:focus-visible{
	
}




.maincontents .section.section4 .company_box {float: right; width: calc(50% - 40px); }
.maincontents .section.section4 .company_box .info {padding: 40px 50px 0; height: 240px; background: #fff; display: flex; justify-content: center;}
.maincontents .section.section4 .company_box .info li {width: 50%; text-align: center;}
.maincontents .section.section4 .company_box .info li a {display: block; padding: 130px 0 0; font-size: 20px; color: #555;}
.maincontents .section.section4 .company_box .info li:hover a { color: #555;}
.maincontents .section.section4 .company_box .info li.list1 a {background: url('/images/web/icon_section4_1.png') no-repeat center 0;}
.maincontents .section.section4 .company_box .info li.list2 a {background: url('/images/web/icon_section4_2.png') no-repeat center 0;}
.maincontents .section.section4 .company_box .company {position: relative;width: 100%; height: 160px; padding: 0px calc(50% - 192px); background: #555;}

.maincontents .section.section4 .company_box .company .box{position:relative; height: 100%;padding: 20px 0px;}
.maincontents .section.section4 .company_box .company .swiper-container{width: 100%;overflow: hidden;padding: 20px 20px 20px 3px;}
.maincontents .section.section4 .company_box .company .swiper-wrapper{display: flex;}
.maincontents .section.section4 .company_box .company .swiper-wrapper .swiper-slide{width: auto !important;flex-shrink: 0;margin-right: 10px;}
.maincontents .section.section4 .company_box .company .box .swiper-slide a {display: inline-block;padding: 8px 15px; border: 2px solid #fff; color: #fff; border-radius: 50px;white-space: nowrap;}
.maincontents .section.section4 .company_box .company .box .swiper-slide a:hover,
.maincontents .section.section4 .company_box .company .box .swiper-slide a:focus-visible{background: #fff; color: #555;}
.maincontents .section.section4 .company_box .company .box .swiper-slide-active a.active{background: #fff; color: #555;}




.maincontents .section.section4 .company_box .company .swiper-notification{display: none;}
.maincontents .section.section4 .company_box .company .swiper-button-next:after,
.maincontents .section.section4 .company_box .company .swiper-button-prev:after{font-size: 30px;color: #fff;}
.maincontents .section.section4 .company_box .company .swiper-pagination{margin-bottom: 15px;}
.maincontents .section.section4 .company_box .company .swiper-pagination-bullet{width: 10px; height: 10px;background: #626262;opacity: unset;}
.maincontents .section.section4 .company_box .company .swiper-pagination-bullet-active{background: #EAEAEA;}
.maincontents .section.section4 .company_box .company .swiper-button-next,
.maincontents .section.section4 .company_box .company .swiper-button-prev{top: calc(var(--swiper-navigation-top-offset,50%) - 30px);}


.maincontents .section.section5 {height: 200px !important; background: #212121;}
.bottomarea {height: 200px !important; background: #212121;}
.bottomarea .d_area {position: relative;}
.bottomarea .agree_area {padding: 40px 0 20px; border: 0;}
.bottomarea .agree_area a {margin-right: 15px; font-size: 16px; color: #b0b0b0;}
.bottomarea .agree_area a:last-child {margin-right: 0;}
.bottomarea .agree_area a.pri {color: #eee;}
.bottomarea address p {font-size: 14px; color: #a6a5a5;}
.bottomarea .img_box {position: absolute; top:30px; right:0;}
.bottomarea .img_box a {margin-left: 30px;}
.bottomarea .img_box a.mark_webwatch img {width: auto; height: 70px;}
.bottomarea .btn_top {position: absolute; right: -110px; top: -30px;}
.bottomarea .btn_top a {font-size: 0; text-indent: -9999px;}
#main .bottomarea .btn_top {display: none;} 

/*팝업*/
.modal {display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 600; -webkit-overflow-scrolling: touch; outline: 0; background-color: rgba(43, 43, 43, 0.6);}
.modal.on {display: block;}
.popup {z-index: 1100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; max-height: calc(100% - 20px); max-width: calc(100% - 20px); background: #fff;}
.popup .popup_title {padding: 30px 40px 0; display: flex; display:-webkit-flex; min-height: 80px; justify-content: space-between; align-items: center;}
.popup .popup_title h3 {font-size: 24px; font-weight: 600;}
.modal .modal_close {position: absolute; top: 0; right: -50px; flex: none; width: 50px; height: 50px; background: #000;}
.modal .modal_close::after, .modal .modal_close::before {content: ''; position: absolute; left: calc(50% - 10px); top: 50%; width: 22px; height: 1px; background-color: #fff; transform-origin: center;}
.modal .modal_close::after {transform: rotate(-45deg);}
.modal .modal_close::before {transform: rotate(45deg);}
.popup .popup_inner {padding: 20px 40px 50px; word-break: keep-all;}
.popup .popup_inner .button_box {margin-top: 20px;}
.popup.img_box {overflow-y: auto; display: flex; display:-webkit-flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: transparent; border: 0;}
.popup .popup_inner .tablebasic {padding: 0;}

/*비밀번호팝업*/
.popup.password {width: 420px;}
.popup.password .popup_inner {padding: 40px 50px 50px;}
.popup.password .popup_inner .password_box p {text-align: center; margin-bottom: 25px;}
.popup.password .popup_inner .password_box .inpbox {width: 240px; margin: 0 auto;}
.popup.password .popup_inner .button_box {margin-top: 40px;}

/*메인팝업*/
.popup.main {transform: translate(0, 0);}
.popup.main .popup_title {margin-bottom: 25px;}
.popup.main .popup_inner img {max-width: 100%;}
.popup.main .popup_inner .content_box {margin-bottom: 20px;}
.popup.main .button_box {margin-top: 0;}
.popup.main .button_box button {margin-left: 0; width: 100%; height: 40px; color: #d2d2d2; font-size: 15px; font-weight: 500; background-color: #0b0e16;}
.popup.main .button_box button:first-child {border-right: 1px solid #393c48;}
.popup.main.img .popup_inner {padding: 0;}

/*에러페이지*/
.error {padding: 150px 0; width: 100%; height: 100%; display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-flow: column; align-items: center; justify-content: center;}
.error .error_box {text-align: center; word-break: keep-all;}
.error .error_box p.p1 {margin: 0 0 50px; font-size: 40px; font-weight: 600; color: #222;}
.error .error_box p.p2 {font-size: 16px; color: #666;}
.error .error_box img {border: 1px solid #333; margin-bottom: 50px;}
.error .button_box {margin-top: 60px;}
.error .btn {width: 200px; height: 60px; font-size: 20px;}

/*서비스중단페이지*/
.stop {position: fixed; width: 100%; height: 100%; display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-flow: column; align-items: center; justify-content: center; background: url('/images/web/bg_stop.jpg') no-repeat center / cover;}
.stop .stop_box {text-align: center; word-break: keep-all; padding: 100px;}
.stop .stop_box h1 {font-size: 95px; line-height: 95px; color: #fff; font-family:'SeoulNamsanMedium', sans-serif;}
.stop .stop_box p.p1 {font-size: 40px; line-height: 40px; color: #c0f7fc; margin: 115px 0 40px;}
.stop .stop_box p.p2 {font-size: 36px; line-height: 36px; color: #fff;}

/*서울시GNB*/
#seoul-gnb-plugin {
    background-color: #fff !important;
}
/*white*/
#seoul-common-gnb.white #seoul-gnb-plugin {background-color:#fff;}
#seoul-common-gnb.white #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-link a {background-position:-5px -165px;}
#seoul-common-gnb.white #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-news dd a {color:#575757;}
#seoul-common-gnb.white #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-icon-notice {background-position: 1px -46px; background-size: 300px auto} 
#seoul-common-gnb.white #seoul-gnb-plugin .seoul-gnb-menu > dd > a {color:#575757;}
#seoul-common-gnb.white #seoul-gnb-plugin .seoul-gnb-menu > dd .seoul-gnb-icon-menu4 {color:#575757;}

@media screen and (max-width:1600px) {
    .toparea .gnb > li {padding: 0 33px;}
    .toparea .gnb > li > a {font-size: 19px;}
    .toparea .gnb > li .menu_list li a {word-break: keep-all;}
    .toparea .button_box a {margin-left: 18px;}
    .toparea .button_box button {margin-left: 18px;}

    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box {padding: 40px 0 0 60px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h3 {margin-bottom: 30px; font-size: 45px; font-weight: 900; line-height: 60px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h4 {width: 100%; margin-bottom: 40px; font-size: 25px; line-height: 38px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box p {font-size: 20px; line-height: 34px;}
    .maincontents .section.section3 .d_area ul {height: 200px; margin: 50px 10px 70px;}

}
@media screen and (max-width:1520px) {
    .toparea .gnb > li {padding: 0 23px;}

}
@media screen and (max-width:1420px) {
    .toparea .gnb > li {padding: 0 18px;}

}
@media screen and (max-width:1366px) {
    .toparea .topmenu {padding: 0 30px;}
    .toparea .gnb > li {padding: 0 15px;}
    .toparea .gnb > li > a {font-size: 18px;}
    .toparea .button_box a {margin-left: 15px;}
    .toparea .button_box button {margin-left: 15px;}
    #main .button_box {padding: 0;}

    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box {padding: 20px 0 0 60px;}
    .maincontents .section.section2 ul li a .text_box h3 {font-size: 22px;}
    .maincontents .section.section2 ul li a .text_box p {font-size: 16px;}
    .maincontents .section.section3 {padding: 250px 30px 0;}
    .maincontents .section.section3 .d_area {width: 900px;}
    .maincontents .section.section3 .d_area ul {height: 180px; margin: 50px 0 70px;}
    .maincontents .section.section3 .d_area ul li a {width:160px; height: 160px; font-size: 14px;}
    .maincontents .section.section3 .d_area ul li.list1 a {left: 0; padding: 100px 0 0; background: url('/images/web/icon_section3_1.png') no-repeat center 24px / 65px auto; }
    .maincontents .section.section3 .d_area ul li.list2 a {left: calc(33% - 112px); padding: 110px 0 0; background: url('/images/web/icon_section3_2.png') no-repeat center 38px / 50px auto; }
    .maincontents .section.section3 .d_area ul li.list3 a {left: calc(50% - 80px); padding: 110px 0 0; background: url('/images/web/icon_section3_3.png') no-repeat center 35px / 50px auto; }
    .maincontents .section.section3 .d_area ul li.list4 a {right: calc(33% - 112px); padding: 100px 0 0; background: url('/images/web/icon_section3_4.png') no-repeat center 25px / 60px auto; }
    .maincontents .section.section3 .d_area ul li.list5 a {right: 0; padding: 100px 0 0; background: url('/images/web/icon_section3_5.png') no-repeat center 25px / 60px auto; }
    .maincontents .section.section3 .d_area ul li:hover a {width: 180px; height: 180px;}
    .maincontents .section.section3 .d_area ul li.list1:hover a {left: -10px; padding: 110px 0 0; background: url('/images/web/icon_section3_1.png') no-repeat center 34px / 65px auto;}
    .maincontents .section.section3 .d_area ul li.list2:hover a {left: calc(33% - 122px); padding: 120px 0 0; background: url('/images/web/icon_section3_2.png') no-repeat center 48px / 50px auto;}
    .maincontents .section.section3 .d_area ul li.list3:hover a {left: calc(50% - 90px); padding: 120px 0 0; background: url('/images/web/icon_section3_3.png') no-repeat center 45px / 50px auto;}
    .maincontents .section.section3 .d_area ul li.list4:hover a {right: calc(33% - 122px); padding: 110px 0 0; background: url('/images/web/icon_section3_4.png') no-repeat center 35px / 60px auto;}
    .maincontents .section.section3 .d_area ul li.list5:hover a {right: -10px; padding: 110px 0 0; background: url('/images/web/icon_section3_5.png') no-repeat center 35px / 60px auto;}
    .maincontents .section.section3 dl {left: calc(50% - 450px);}
    .maincontents .section.section4 {padding: 210px 0 0;}
    .maincontents .section.section4 .d_area {width: 900px; padding: 60px 0 0;}
    .maincontents .section.section4 .archive, .maincontents .section.section4 .company_box {width: calc(50% - 25px)}
    .bottomarea .d_area {width: 900px;}
    

}
@media screen and (max-width:1240px) {
    .toparea .gnb > li {padding: 0 10px;}
    .toparea .gnb > li > a {font-size: 15px; letter-spacing: -1px;}
    .toparea .gnb > li .menu_list li a {word-break: break-all;}
    .toparea .button_box a {margin-left: 10px; letter-spacing: -1px;}
    .toparea .button_box button {margin-left: 10px;}

    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box {padding: 10px 0 0 45px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h3 {margin-bottom: 20px; font-size: 40px; font-weight: 900; line-height: 55px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h4 {width: 100%; margin-bottom: 30px; font-size: 23px; line-height: 36px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box p {font-size: 20px; line-height: 34px;}
    .maincontents .section.section2 ul li a {top: 400px;}

}
@media screen and (max-width:1024px) {
    #seoul-common-gnb {display: block !important; position: fixed;}
    .toparea {top: 48px;}
    
    /*메뉴*/
    .toparea {height: 60px;}
    .toparea .top_bar {border-top: 0; border-bottom: 0;}
    .toparea .allmenu-category .menu_box .top_bar.active {display: block;}
    .toparea .top_bar .d_area {height: 60px;}
    .toparea .top_bar .d_area a.logo img {width: 104px;}
    .toparea .top_bar .d_area .membership {display: none;}
    .toparea .top_bar .d_area .btn_search {right: 13px; transform: scale(0.82);}
    .toparea .topmenu {position: relative; padding: 0 15px; border-top: 1px solid #eee;}
    .toparea .logo {width: 30px; height:30px; background-image: url('/images/web/logo_b.png'); background-size: contain; z-index: 0; font-size:0; text-indent: -9999px;}
    .toparea .button_box a {margin-left: 15px;}
    .toparea .button_box button {margin-left: 15px;}
    .toparea .button_box .btn_menu {width: 20px; height: 14px;}
    .toparea .button_box .btn_menu span {height: 2px;}
    .toparea .topmenu .btn_allgnb {z-index: 210; left: 15px; top: -37px; transform: translateY(0); width: 20px; height: 14px; line-height: 0;}
    .toparea .topmenu .btn_allgnb::after {padding-left: 0; font-size: 0; color: transparent;}
    .toparea .topmenu .btn_allgnb span {width: 20px; height: 2px;}
    .toparea .topmenu .gnb {display: none; display:-webkit-none;}
    .toparea .total_search_area {top: 60px; padding: 15px; background-color: #333; box-shadow: none;}
    .toparea .total_search_area .btn_close {padding: 5px; top: -46px; right: 46px; transform: scale(0.82);}
    .toparea .total_search_area .search_box {width: 100%; height: 30px; border-bottom: 0;}
    .toparea .total_search_area .search_box input {padding: 0 25px 0 5px; width: calc(100% - 15px); color: #fff; font-size: 13px;}
    .toparea .total_search_area .search_box button.btn_search {right: 0; top: calc(50% - 12px); transform: scale(1);}
    .toparea .total_search_area .search_box button.btn_search .icon::before {left: 13px !important; bottom: 10px !important; }
    .toparea .total_search_area .btn_search .icon::after {left: 2px !important; top: 2px !important; width: 12px !important; height: 12px !important;}
    .toparea .total_search_area .btn_search .icon::before {width: 8px !important;}
    .toparea .button_box .btn_search.active .icon::after, .toparea .button_box .btn_search.active .icon::before {opacity: 1;}
    .toparea .button_box .btn_search.none .icon::after, .toparea .button_box .btn_search.none .icon::before {opacity: 0;}

    #main .toparea {background: #fff;}
    #main .toparea .button_box a {color: #000 !important;}
    #main .btn_menu span {background-color: #000 !important;}
    #main .btn_search .icon::after {border: 2px solid #000 !important;}
    #main .btn_search .icon::before {background-color: #000 !important;}
    #main .btn_close .icon::after, #main .btn_close .icon::before {background-color: #000 !important;}
    #main .toparea .total_search_area .search_box button.btn_search .icon::after {border-color: #fff !important;}
    #main .toparea .total_search_area .search_box button.btn_search .icon::before {background-color: #fff !important;}

    #main.fp-viewing-firstPage .toparea {background: none !important;}
    #main.fp-viewing-firstPage .toparea .logo {background-image: url('/images/web/logo.png'); background-size: contain;}
    #main.fp-viewing-firstPage .toparea .logo.active {background-image: url('/images/web/logo.png') !important;}
    #main.fp-viewing-firstPage .toparea .button_box a { color: #fff !important;}
    #main.fp-viewing-firstPage .btn_menu span {background-color: #fff !important;}
    #main.fp-viewing-firstPage .btn_search .icon::after {border: 2px solid #fff !important;}
    #main.fp-viewing-firstPage .btn_search .icon::before {background-color: #fff !important;}
    #main.fp-viewing-firstPage .total_search_area .btn_close .icon::after, #main.fp-viewing-firstPage .total_search_area .btn_close .icon::before {background-color: #fff !important;}

    .toparea .allmenu-category {position: fixed; top: 0; padding-left: 40px; transform: translateX(0); width: 100%; height: 100% !important; background-color: rgba(0, 0, 0, 0.8); animation: allmenu 1s 1;}
    @keyframes allmenu {
        0% {left: 0;}
        99% {left: 100%;}
        100% {display: none;}
    }
    .toparea .allmenu-category.active {animation: allmenu2 1s 1;}
    @keyframes allmenu2 {
        0% {left: 100%;}
        1% {display: block;}
        100% {left: 0;}
    }
    .toparea .allmenu-category .btn_close {top: 22px !important; right: initial; right: 15px !important; transform: scale(0.81);}
    .toparea .allmenu-category .btn_close .icon::after, .toparea .allmenu-category .btn_close .icon::before {background-color: #000 !important;}
    .toparea .allmenu-category .membership {top: 0; right: 7px; padding: 20px 0; display: flex;}
    .toparea .allmenu-category .membership li {padding: 0 8px;}
    .toparea .allmenu-category .membership li::after {top: 6px; height: 10px;}
    .toparea .allmenu-category .membership li a {font-size: 11px;}
    .toparea .allmenu-category .menu_box {overflow-y: auto; padding: 72px 0 0; height: 100%; background-color: #fff;}
    .toparea .allmenu-category .menu_box .all_gnb {display: block; display:-webkit-block; border-left: 0; border-bottom: 1px solid #b2bac1;}
    .toparea .allmenu-category .menu_box .all_gnb > li {padding: 0; border-right: 0; border-top: 1px solid #b2bac1;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a {margin-bottom: 0; padding: 0 20px; font-size: 18px; line-height: 50px;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon {position: relative; margin-left: 10px; display: inline-block; width: 10px; height: 10px;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon::after, .toparea .allmenu-category .menu_box .all_gnb > li > a .icon::before {content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: #333;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon::before {transform: rotate(90deg);}
    .toparea .allmenu-category .menu_box .all_gnb > li.active > a .icon::before {transform: rotate(0deg);}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list {padding: 15px 20px; display: none; height: auto !important; background-color: #f3f4f4; border-top: 1px solid #b2bac1;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active .menu_list {display: block;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list li {margin-bottom: 15px;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list li a {font-size: 15px; letter-spacing: 0;}
    
    .maincontents .main_visual .main_slide .slick-arrow {transform: scale(0.4);}
    .maincontents .main_visual .main_slide .slick-arrow.slick-prev {left: -5px;}
    .maincontents .main_visual .main_slide .slick-arrow.slick-next {right: -5px; transform: scale(0.4) rotate(180deg);}
    .maincontents .main_visual .slick-dots {bottom: 18px;}
    .maincontents .main_visual .slick-pause {bottom: 23px;}
    .maincontents .main_visual .pro-bar {bottom: 28px;}
    
    .maincontents .section {height: auto !important;}
    .maincontents .section .fp-tableCell {height: auto !important;}
    .maincontents .section h2 {font-size: 28px; height: 28px; line-height: 28px;}
    .maincontents .section.section1 {padding: 140px 30px 80px; height: auto !important;}
    .maincontents .section.section1 .slide_box.banner {width: 100%; height: auto;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .img_box {float: none;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box {float: none; padding: 0; width: 100%;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h3 {margin: 25px 0 15px; font-size: 35px; line-height: 45px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h4 {width: 100%; margin-bottom: 15px; font-size: 18px; line-height: 30px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box p {font-size: 18px; line-height: 28px;}
    .maincontents .section.section1 .slide_box.banner .pro-bar-wrap {padding-right: 50px;}
    .maincontents .section.section1 .slide_box.banner .pro-bar {left: calc(50% - 63px); bottom: 25px; width: 75px; height: 4px;}
    .maincontents .section.section1 .slide_box.banner .slick-dots {position: absolute; left: calc(50% - 87px); bottom: 24px;}
    .maincontents .section.section1 .slide_box.banner .slick-dots li {font-size: 16px;}
    .maincontents .section.section1 .slide_box.banner .slick-dots li .num {margin-right: 87px;}
    .maincontents .section.section1 .slide_box.banner .slick-pause {position: absolute; left: calc(50% + 55px); bottom: 24px; width: 11px; height: 17px;}
    .maincontents .section.section1 .slide_box.banner .slick-arrow {display:none !important; bottom: 19px;}

    .maincontents .section.section2 {padding: 50px 0 15px;}
    .maincontents .section.section2 h2 {position: static;}
    .maincontents .section.section2 ul {position: static; padding: 65px 0 0; height: auto !important;}
    .maincontents .section.section2 ul li {width:50%; height: auto; margin: 0 0 50px;}
    .maincontents .section.section2 ul li a {position: static;}
    .maincontents .section.section2 ul li a .text_box {padding-top: 70px}
    .maincontents .section.section2 ul li.list1 a .text_box {background: url('/images/web/icon_section2_1.png') no-repeat center 0; background-size: auto 50px;}
    .maincontents .section.section2 ul li.list2 a .text_box {background: url('/images/web/icon_section2_2.png') no-repeat center 0; background-size: auto 50px;}
    .maincontents .section.section2 ul li.list3 a .text_box {background: url('/images/web/icon_section2_3.png') no-repeat center 0; background-size: auto 50px;}
    .maincontents .section.section2 ul li.list4 a .text_box {background: url('/images/web/icon_section2_4.png') no-repeat center 0; background-size: auto 50px;}
    .maincontents .section.section2 ul li a .text_box h3 {font-size: 18px;}
    .maincontents .section.section2 ul li a .text_box p {font-size: 13px; padding: 10px 0 20px;}
    .maincontents .section.section2 ul li a .go {width: 40px; height: 40px; line-height: 38px; font-size: 15px;}
    .maincontents .section.section2 ul li .bg {background: none;}
    .maincontents .section.section2 ul li:hover .bg {transform: scaleX(0);}

    .maincontents .section.section3 {padding: 50px 0 40px; }
    .maincontents .section.section3 dl {width: 100%; padding: 0; left: 0; display: block;}
    .maincontents .section.section3 dl dt {float: none; width: 100%; padding: 0 30px 20px; font-size: 20px; line-height: 20px;}
    .maincontents .section.section3 dl dt br {display: none;}
    .maincontents .section.section3 dl dd {float: none; width: calc(100% + 150px); color:#fff;}
    .maincontents .section.section3 .slide_box .slick-slider {position: relative; margin: 0 24px;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-slide > div {padding: 0 6px;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-slide a { border: 0; }
    .maincontents .section.section3 .slide_box .slick-slider .slick-slide.slick-current + .slick-active a { border: 0; }
    .maincontents .section.section3 .slide_box .slick-slider .slick-slide a .img_box {padding-top: 70%; float: left; width: 100%; height: 0;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-slide a p {overflow: hidden; padding: 10px 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background: #fff;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow {z-index: 102; position: absolute; width: 35px; height: 35px; font-size: 0; color: transparent; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow::after,
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow::before {content: ''; position: absolute; left: calc(50% - 5px); top: calc(50% - 1px); width: 8px; height: 2px; background-color: #fff; border-radius: 3px; transform-origin: left;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-prev {top: -48px; right: 192px; left: auto; bottom: auto;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-next {top: -48px; right: 150px; left: auto; bottom: auto;}
    .maincontents .section.section3 .d_area {overflow: hidden; width: 100%;}
    .maincontents .section.section3 .d_area ul {overflow: hidden; display: block !important; height: auto; margin: 40px 20px 50px; letter-spacing: -1px;}
    .maincontents .section.section3 .d_area ul li {float: left; width: 33.333333%; margin: 0 0 15px;}
    .maincontents .section.section3 .d_area ul li:nth-child(4), .maincontents .section.section3 .d_area ul li:nth-child(5) {width: 50%; text-align: center;}
    .maincontents .section.section3 .d_area ul li a {display:block; position: static; width: 100%; height: 106px; font-size: 13px; border: 0; border-radius: 0;}
    .maincontents .section.section3 .d_area ul li.list1 a {padding: 65px 0 0; background: url('/images/web/icon_section3_1.png') no-repeat center 0px / 52px auto;}
    .maincontents .section.section3 .d_area ul li.list2 a {padding: 75px 0 0; background: url('/images/web/icon_section3_2.png') no-repeat center 8px / 40px auto;}
    .maincontents .section.section3 .d_area ul li.list3 a {padding: 75px 0 0; background: url('/images/web/icon_section3_3.png') no-repeat center 5px / 38px auto;}
    .maincontents .section.section3 .d_area ul li.list4 a {padding: 70px 0 0; background: url('/images/web/icon_section3_4.png') no-repeat center 0px / 52px auto;}
    .maincontents .section.section3 .d_area ul li.list5 a {padding: 70px 0 0; background: url('/images/web/icon_section3_5.png') no-repeat center 3px / 50px auto;}
    .maincontents .section.section3 .d_area ul li:hover a {top: 0; width: auto; height: auto; border: 0;}
    .maincontents .section.section3 .d_area ul li.list1:hover a {padding: 65px 0 0; background: url('/images/web/icon_section3_1.png') no-repeat center 0px / 52px auto;}
    .maincontents .section.section3 .d_area ul li.list2:hover a {padding: 75px 0 0; background: url('/images/web/icon_section3_2.png') no-repeat center 8px / 40px auto;}
    .maincontents .section.section3 .d_area ul li.list3:hover a {padding: 75px 0 0; background: url('/images/web/icon_section3_3.png') no-repeat center 5px / 38px auto;}
    .maincontents .section.section3 .d_area ul li.list4:hover a {padding: 70px 0 0; background: url('/images/web/icon_section3_4.png') no-repeat center 0px / 52px auto;}
    .maincontents .section.section3 .d_area ul li.list5:hover a {padding: 70px 0 0; background: url('/images/web/icon_section3_5.png') no-repeat center 3px / 50px auto;}
    
    .maincontents .section.section4 {padding: 50px 30px 40px;}
    .maincontents .section.section4 h2 {padding: 0;}
    .maincontents .section.section4 h3 {padding: 25px  0 15px; font-size: 20px;}
    .maincontents .section.section4 .d_area {width: 100%; padding: 0;}
    .maincontents .section.section4 .archive {float: none; width: 100%;}
    .maincontents .section.section4 .archive .box{height: 300px;}
    .maincontents .section.section4 .archive .img_box{height: 175px;}
    .maincontents .section.section4 .archive a{width: 250px;}
    .maincontents .section.section4 .archive a p{font-size: 15px;}
    

    .maincontents .section.section4 .company_box {float: none; width: 100%; } 
    .maincontents .section.section4 .company_box .info {padding: 25px 7%; height: auto;}
    .maincontents .section.section4 .company_box .info li {width: 50%;}
    .maincontents .section.section4 .company_box .info li a {padding: 90px 0 0; font-size: 13px;}
    .maincontents .section.section4 .company_box .info li.list1 a {background: url('/images/web/icon_section4_1.png') no-repeat center 0 / 80px auto;}
    .maincontents .section.section4 .company_box .info li.list2 a {background: url('/images/web/icon_section4_2.png') no-repeat center 0 / 80px auto;}
    .maincontents .section.section4 .company_box .company {height: 140px;}
	.maincontents .section.section4 .company_box .company .box{padding: 20px;}
/* 	.maincontents .section.section4 .company_box .company .swiper-container{height: 80px;}
	.maincontents .section.section4 .company_box .company .swiper-wrapper .swiper-slide{height: 44px;} */
	.maincontents .section.section4 .company_box .company .swiper-pagination{margin-bottom: 10px;}
 
 
 
 
    .maincontents .section.section5 {height: auto !important;}
    .bottomarea {height: auto !important;}
    .bottomarea .d_area {position:relative; width: 100%; padding: 25px 30px 40px;}
    .bottomarea .agree_area {padding: 0; text-align:center; border: 0;}
    .bottomarea .agree_area a {font-size: 13px;}
    .bottomarea address p {font-size:11px; text-align:center; word-break: keep-all;}  
    .bottomarea address p.copyright {margin-top: 5px;}
    .bottomarea .img_box {position:static; width: 220px; height: auto; padding: 25px 0; margin: 0 auto;}
    .bottomarea .img_box a {margin-left: 0;}
    .bottomarea .img_box a.mark_webwatch img {height: 50px; margin-bottom: 20px;}
    .bottomarea .btn_top {display: none !important;}

    /*팝업*/
    .popup .popup_title {padding: 20px 20px 0; min-height: auto;}
    .popup .popup_title h3 {font-size: 16px;}
    .modal .modal_close {position: absolute; top: auto; bottom: -25px; right: 10px; flex: none; width: 40px; height: 25px; background: #000; z-index: 9;}
    .modal .modal_close::after, .modal .modal_close::before {left: auto; right: 0; width: 14px;}
    .modal .modal_close span.mobile_only {display: inline-block !important; position: absolute; top: 3px; right: 20px; font-size: 10px; text-align: right; color: #fff;}
    .popup .popup_inner {padding: 20px;}
    .popup .popup_inner::after {content:''; position: absolute; bottom: -25px; left: 0; width: 100%; height: 25px; background: #000;}
    
    /*비밀번호팝업*/
    .popup.password .popup_inner .password_box .inpbox {width: 80%;}
    .popup.password .popup_inner::after {display: none;}

    /*에러페이지*/
    .error {padding: 70px 0;}
    .error .error_box {text-align: center; word-break: keep-all; padding: 0 15px;}
    .error .error_box p.p1 {margin: 0 0 30px; font-size: 25px; line-height: 34px;}
    .error .error_box p.p2 {font-size: 13px; line-height: 22px;}
    .error .error_box img {margin-bottom: 30px;}
    .error .button_box {margin-top: 40px;}
    .error .btn {width: 130px !important; height: 45px; font-size: 13px;}

    /*서비스중단페이지*/
    .stop .stop_box {width: 100%; padding: 50px;}
    .stop .stop_box h1 {font-size: 46px; line-height: 54px;}
    .stop .stop_box p.p1 {font-size: 20px; line-height: 28px; margin: 58px 0 20px; }
    .stop .stop_box p.p2 {font-size: 18px; line-height: 26px;}
    
}
@media screen and (max-width:640px){
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .img_box {padding-top: 65%; width: 100%;}
    .maincontents .section.section3 dl dd {width: calc(100% + 300px);}
    .maincontents .section.section3 dl dt {float: none; width: 100%; padding: 0 20px 20px; font-size: 20px; line-height: 20px;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-prev {top: -48px; right: 352px; left: auto; bottom: auto;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-next {top: -48px; right: 310px; left: auto; bottom: auto;}
    .maincontents .section.section3 .slide_box .slick-slider {margin: 0 14px;}
    .maincontents .section.section4 {padding: 50px 20px 30px;}
    
    
}
@media screen and (max-width:480px){
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h3 {font-size: 30px; line-height: 40px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h4 {font-size: 16px; line-height: 28px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box p {font-size: 16px; line-height: 28px;}
    .maincontents .section.section2 ul li a .text_box h3 {font-size: 14px;}
    .maincontents .section.section2 ul li a .text_box p {font-size: 12px;}
    .maincontents .section.section3 dl dd {width: calc(100% + 150px);}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-prev {right: 192px;}
    .maincontents .section.section3 .slide_box .slick-slider .slick-arrow.slick-next {right: 150px;}
    
    .maincontents .section.section4 .archive a{width: 250px;}


    .bottomarea address p:first-child {width: 200px; margin: 0 auto;}

}
@media screen and (max-width:360px){
    .maincontents .section h2 {font-size: 25px;}
    .maincontents .section.section2 ul li a .text_box h3 {font-size: 13px;}
    .maincontents .section.section2 ul li a .text_box p {font-size: 11px;}
    .maincontents .section.section3 .d_area ul li.list1 a {font-size: 12px; letter-spacing: -1px;}
    
}
@media screen and (max-width:320px){
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h3 {font-size: 25px; line-height: 38px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box h4 {font-size: 14px; line-height: 26px;}
    .maincontents .section.section1 .slide_box.banner .slick-list .slick-slide a .text_box p {font-size: 14px; line-height: 26px;}
    .maincontents .section.section2 ul li a .text_box h3 {font-size: 12px;}
    .maincontents .section.section2 ul li a .text_box p {font-size: 11px;}

}