/* 스크롤바 정의 */
  ::-webkit-scrollbar{width:4px;background:#eee;}
  ::-webkit-scrollbar-thumb{background:#0e9acd}
  ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent}

html { scroll-behavior: smooth;}
/* .header {width:100%;height:90px;display: flex;justify-content: center;background-color: rgba(0, 0, 0, .1)} */
/* .fixed-top { position: fixed;top: 0; right: 0;left: 0;z-index: 999;} */
header .inner {width:1320px;max-width: 100%;display: flex;align-items: center;justify-content: space-between;z-index: 99;;}
header nav {display: flex;}
header nav ul {display: flex;align-items: center;}
header nav ul li a {font-size:19px;color:#fff;padding:0 0 0 50px}
header nav ul li a:hover {color:#58d2ff}
/* header .top_add_btn a {background-color:#0e9acd;color:#fff;padding:10px 30px;border-radius: 30px;font-size:16px;font-weight: 600;margin-left:50px} */
header .top_add_btn a {background-color:#f9e000;color:#fff;padding:10px 30px;border-radius: 30px;font-size:16px;font-weight: 600;margin-left:50px; color: #000;}
/* header .top_add_btn a:hover {background-color:#1090be;} */
header .top_add_btn a:hover {background-color:#f9e000;}

.main-tool-bar {
  z-index:99 ;
  height: 90px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .0);
  transition: ease 0.4s;
/*   &--scrolled {
    height: 50px;
  } */
}
.main-tool-bar--scrolled {height:70px;background-color: rgba(0, 0, 0, .7);}

/* .scrollable-area {
  height: 200vh;
} */

.main-banner {width:100%;height: 917px;/*min-height: 100vh;max-height: 578px;*/position: relative;z-index: 10;}
.main-banner .swiper {width:100%;height: 100%;}
.main-banner .swiper-slide {position: relative;}
.main-banner .swiper-slide::after {content: "";position: absolute;left:0;top:0;    background-color: rgba(0, 0, 0, .50);;width: 100%;height:100%}
.main-banner .swiper-slide .txt_box {position: absolute;width:1320px;max-width: 100%;left:50%;top:50%;transform: translate(-50%, -50%);z-index: 99;margin-top:-50px}
/* .main-banner .swiper-slide .txt_box {position: absolute;width:100%;max-width: 100%;left:15%;top:50%;transform: translate(0, -50%);z-index: 99;margin-top:-50px} */

.main-banner .swiper-slide .txt_box p {font-size:36px;color:#fff;font-weight: 600;}
.main-banner .swiper-slide .txt_box strong {position: relative;display:inline-block;font-size:51px;color:#58d2ff;font-weight: 800;padding:0 0 10px 0;margin-bottom:30px}
.main-banner .swiper-slide .txt_box strong::after {content: "";position: absolute;left:0;top:100%; width: 100%;height:6px;background-color: #58d2ff;}
.main-banner .swiper-slide .txt_box span {display: block;font-size:24px;color:#fff;font-weight: 800;line-height: 1.5;font-weight: 300;}
.main-banner .swiper-slide .txt_box em {font-size:16px;color:#999}
.main-banner .swiper-slide .txt_box .more_btn {display: block;width: 240px;font-size:19px;padding:15px;border-radius: 30px;background-color: #ffff00;text-align: center;margin-top:25px;font-weight: 400;}
.main-banner .swiper-slide .txt_box .more_btn:hover {background-color: #bfeeff;}
.main-banner .swiper-slide img {min-height: 100%; max-width: 100%;position: relative;top: 50%;transform: translateY(-50%);}
.main-banner .swiper-button-next, .main-banner .swiper-button-prev {color:#fff !important}
.main-banner .swiper-button-next:after,.main-banner .swiper-button-prev:after {font-weight: 800 !important;}
.main-banner .swiper-button-prev {left:80px !important}
.main-banner .swiper-button-next {right:80px !important}





.container {width:100%}
.container .section {width:100%;display: flex;justify-content: center;align-items: flex-start}
.container .section1 {height:636px;background-color: #f4f8fa;}
.container .section2 {height:100%;background-color: #ffffff;}
.container .section .inner {width:1320px;max-width: 100%;display: flex;}

.container .section1 .inner {padding:125px 0;display: flex;justify-content: space-between}
.container .section1 .artcle1 {display: flex;flex-wrap: wrap; justify-content: flex-start; flex-direction: column; align-content: flex-start; align-items: flex-start;}
/* .container .section1 .artcle1 .tx1 {background-color: #0e9acd;padding:15px 18px;font-size:30px;font-weight: 600;color:#fff;margin-bottom:20px} */
.container .section1 .artcle1 .tx1 {background-color: #0e9acd;padding:15px 18px;font-size:30px;font-weight: 600;color:#fff;margin-bottom:20px; width: 540px;}
.container .section1 .artcle1 .tx2 {font-size: 34px;}
.container .section1 .artcle2 {}
.container .section1 .artcle2 ul li {width: 100%;;padding:15px 37px;background-color: #fff;font-size:26px;font-weight: 700;color: #1c50a7;margin-bottom: 20px;box-shadow:0px 1px 5px 0px  rgba(51, 64, 70, .1);}
.container .section1 .artcle2 ul li:nth-child(even) {color: #0e9acd;}

.container .section2 {height:100%;min-height: 10vh;max-height: 1000px;}
/* .container .section2 .inner {padding:125px 0;display: flex;justify-content: space-between;flex-wrap: wrap} */
.container .section2 .inner {padding:125px 0;display: flex;justify-content: space-between;flex-wrap: wrap; position: relative; justify-content: center;}
.view_tab_box {width: 100%;}
.view_tab_box .btn {width: 100%;display: grid;grid-gap: 20px;grid-template-columns: auto auto auto auto;}
.view_tab_box .btn li {position: relative;;cursor: pointer;text-align: center;font-size:20px;border:1px solid #9facb0;padding:20px 0; border-radius:100px;}
.view_tab_box .btn li:hover {background-color: #0e9acd;color:#fff;border:1px solid #0e9acd}
.view_tab_box .btn li.active {background-color: #0e9acd;color:#fff;border:1px solid #0e9acd; border-radius:100px;}
.view_tab_box .btn li.active::after {content: "";width:10px;height:10px;position: absolute;bottom:-10px;left:50%;transform: translateX(-50%);clip-path: polygon(50% 100%, 0 0, 100% 0);background-color: #0e9acd;}
.view_tab_box .tabs { width:100%;padding:70px 0 0 0;}
.view_tab_box .tabs .tab_box {display: none;}
.view_tab_box .tabs .tab_box.active { display:flex;}
.section2 .tab_box .box1 {width: 50%;float:left}
.section2 .tab_box .box1 p {color:#1c50a7;font-size:26px;font-weight: 600;}
.section2 .tab_box .box1 span {display: inline-block;color:#666;font-size:20px;font-weight: 500;margin:20px 0 60px 0;line-height: 1.5;width: 90%;word-wrap: normal;
  white-space: pre-line;/*text-align: justify;*/}
.section2 .tab_box .box1 .list {display: flex;}
.section2 .tab_box .box1 .list ul {}
.section2 .tab_box .box1 .list ul:first-child {margin-right:15px}
.section2 .tab_box .box1 .list ul li {position: relative;font-size:18px;font-weight: 500;margin:10px 0;padding:0 0 0 15px}
.section2 .tab_box .box1 .list ul li::after {content: ""; position: absolute;left:0;top:5px;width: 5px;height:5px;background-color: #0e9acd;}
.section2 .tab_box .box2 {width:calc(50% - 12px);height:100%;float:right;background-color:#1e5fb2 ;}

.container .section3 {position: relative;;height:784px;max-height: 784px;background: url(../img/bg1.jpg) no-repeat;background-size: cover;background-position: center 13%; }
.container .section3::after {content: ""; position: absolute;left:0;top:0;width: 100%;height:100%;background-color: rgba(79, 82, 83, .7);}
.container .section3 .inner {padding:125px 0;display: flex;justify-content: center;flex-wrap: wrap;position: relative;z-index: 9;}
.container .section3 .inner .more_bt {display: block;position: absolute;right:0;font-size:14px;color:rgba(256, 256, 256, 1);background-color: rgba(0, 0, 0, .7); padding: 7px 7px; border-radius: 20px; margin-top: 6px; width: 30px;height: 30px; text-align: center;}
.container .section3 .inner h2 {font-size:40px;color:#fff;text-align: center;margin-bottom:90px}
.mySwiper2 {}
.mySwiper2 .swiper-slide {}
.mySwiper2 .swiper-slide .photo_box {height:356px;background-color: #000;cursor: pointer;}
.mySwiper2 .swiper-slide .photo_box .photo_img {height:250px;}
.mySwiper2 .swiper-slide .photo_box .photo_img img {width: 100%;;height:100%;max-height:250px}
.mySwiper2 .swiper-slide .photo_box .photo_tx {height:110px;display: flex;align-items: center;justify-content: center;}
.mySwiper2 .swiper-slide .photo_box .photo_tx span {color:#fff;font-size:24px;}
.section3  .swiper-button-next2, .section3  .swiper-button-prev2 {color:#fff !important}
.section3  .swiper-button-next2:after,.section3  .swiper-button-prev2:after {font-weight: 800 !important;}
.section3  .swiper-button-prev2 {left:-80px !important;z-index: 10;background-color: #000;height:56px;width:56px;margin-top:40px;position: absolute;top:calc(50% - 20px);display: flex;align-items: center;justify-content: center;font-size:20px;cursor: pointer;}
.section3  .swiper-button-next2 {right:-80px !important;background-color: rgba(0, 0, 0, 1);height:56px;width:56px;margin-top:40px;position: absolute;top:calc(50% - 20px);display: flex;align-items: center;justify-content: center;font-size:20px;cursor: pointer;}
.section3  .swiper-button-next2.swiper-button-disabled ,.section3  .swiper-button-prev2.swiper-button-disabled {background-color: rgba(0, 0, 0, .3);}


.container .section4 {position: relative; background: #f4f8fa;/*height:784px;max-height: 784px; */}
.container .section4 .inner {padding:125px 0;display: flex;justify-content: center;flex-wrap: wrap;position: relative;z-index: 9;}
.section4 .inner h2 {font-size:40px;text-align: center;margin-bottom:70px}
.section4 .form_boxs {width:100%;border-top:2px solid #000;padding:30px 0 0px 0}
.section4 .btn_box {display: flex;justify-content: center;margin-top:30px}
.section4 .btn_box button:first-child {width:264px;height:54px;background-color: #0e9acd;font-size:18px;font-weight: 600;color:#fff;margin-right:16px}
.section4 .btn_box button:last-child {width:264px;height:54px;background-color: #aeafaf;font-size:18px;font-weight: 600;color:#fff;}

.section4 .form_boxs .box {width: 100%;height:auto;overflow: hidden;}
.section4 .form_boxs .box .form_list {display: flex;flex-wrap: wrap;margin-right:-12px;width: 100%;width: -webkit-fill-available;}
.section4 .form_boxs .box .form_list>li {width: calc((100% / 3 ) - 12px);margin-right:12px;margin-bottom:8px}
.section4 .form_boxs .box .form_list label {position: relative;display: flex;}
.section4 .form_boxs .box .form_list label.hit::after {content: "*";color:#c70d0d;position: absolute;right:10px;top:5px;z-index: 9;font-size:18px}
.section4 .form_boxs .box .form_list input {width: 100%;border:1px solid #e7e7e7;padding:14px 15px; }
.section4 .form_boxs .box .form_list input:hover {border:1px solid #999;}
.section4 .form_boxs .box .form_list input::placeholder {color:#666 !important;font-size:16px;opacity: 1;transition: 0.2s ease;}
.section4 .form_boxs .box .form_list input:focus::placeholder {opacity: 0;}
.section4 .form_boxs .box .form_list>li .nice-select {width: 100%;;border:1px solid #e7e7e7;border-radius: 0;line-height: 49px;height:49px;color:#666;font-size:16px; }
.section4 .form_boxs .box .form_list li .nice-select .list {width: 100%;border-radius: 0;}
.section4 .nice-select:active, .section4 .nice-select.open, .section4 .nice-select:focus ,.section4 .nice-select:hover{border:1px solid #999 !important;}

.section4 .form_boxs .box .text_add {display: flex;margin-right:-18px;margin-top:15px}\
.section4 .form_boxs .box .text_add li {width: 100%;margin-right:18px;}
/* .section4 .form_boxs .box .text_add li {width: calc((100% / 2 ) - 18px);margin-right:18px;} */
.section4 .form_boxs .box .text_add li label {font-size:16px;width: 100%;display: block;margin-bottom:10px}
.section4 .form_boxs .box .text_add li textarea {border:1px solid #e7e7e7;height:100px;    resize: none;padding:5px}
.section4 .form_boxs .box .text_add li span {display: block;border:1px solid #e7e7e7;padding:10px 15px;height:45px; }
.section4 .form_boxs .box .text_add li span:last-child {margin-top:7px}
.section4 .form_boxs .box .text_add li span svg {color:#666;margin-right:10px}
textarea:focus,.textarea_box textarea:active {box-shadow: none;border:0;outline: 0;}
.section4 .form_boxs .box .info_check {width:100%;display: inline-block;text-align: center;font-size:16px;margin:20px 0}
.section4 .form_boxs .box input[type="checkbox"] {width: 17px; height: 17px; vertical-align:middle;background-color: #e7e7e7;margin-bottom: 2px;}
.infomation_box {width:100%;height:120px;border:1px solid #e7e7e7;overflow-y: auto ;padding:30px }
.infomation_box strong {font-size: 15px;display: block;margin:0 0px 15px 0;}
.infomation_box span {font-size: 15px;color:#666;word-break: keep-all;}


.container .section5 {position: relative;;height:784px;max-height: 784px;background: url(../img/bg2.jpg) no-repeat;background-size: cover;background-position: center 13%; }
.container .section5::after {content: ""; position: absolute;left:0;top:0;width: 100%;height:100%;background-color: rgba(0, 0, 0, .7);}
.container .section5 .inner {padding:125px 0;display: flex;justify-content: center;flex-wrap: wrap;position: relative;z-index: 9;}

.container .section5 .box {width: calc((100% - 828px) - 30px );margin-right:30px;display: flex;
  flex-wrap: wrap;align-content: center;}
.container .section5 .box p {position: relative;padding:20px 0 20px 0;}
.container .section5 .box p::after {position: absolute;content: "";width: 100%;height:1px;background-color: #617780;left:0;bottom:0;}
.container .section5 .box .tx1 {width: 100%;;color:#58d2ff;font-size:40px;font-weight: 600;}
.container .section5 .box .tx2 {width: 100%;color:#fff;font-size:20px;font-weight: 600;}
.container .section5 .box .tx3 {width: 100%;color:#fff;font-size:36px;font-weight: 600;}
.container .section5 .box .tx3 span {display: flex;color:#fff;font-size:20px;font-weight: 300;align-items: center;}
.container .section5 .box .tx3 span svg {margin-right:8px}
.container .section5 .box ul {padding:20px 0}
.container .section5 .box ul li {color:#fff;font-size:15px;padding:5px 0}


.container .section5 .map_box {background-color: #999;width: 828px;height:528px}



.footer {background-color: #000;width: 100%;padding:75px 0 85px 0}
.footer .inner {width: 1320px; max-width: 100%;height:100%;margin:0 auto}
.footer .inner h5 {margin-bottom:30px}
.footer .inner p {font-size:15px;color:#8a8a8a}

.close_btn {display: none;}
.mo_nav {display: none;}
@media screen and (max-width:1580px){
  .main-banner .swiper-button-prev ,.main-banner .swiper-button-next {overflow: none;opacity: 0;}
}

@media screen and (max-width:1320px){
  .main-banner .swiper-slide .txt_box {text-align: center;}
  .main-banner .swiper-slide .txt_box p {font-size:27px;margin-bottom:20px}
  .main-banner .swiper-slide .txt_box .more_btn {margin:25px auto 0 auto}
}
@media screen and (max-width:1200px){
  .close_btn { display: block;}
  .mo_nav { display: block;}
  .mo_nav {width: 30px; height: 30px; display: block;position: absolute;top:50%; margin-top:-12px; right: 14px; cursor: pointer;
    transition: 0.3s;}
  .mo_nav svg {color:#fff;font-size:24px}
  .sidebar {width: 250px; height: 100vh; background-color: #0e9acd; position: fixed; top: 0;right: -250px; transition: 0.3s; z-index: 1000;}
  .close_btn {position: absolute;top:30px;left:20px;width: 30px;height:30px;padding:0}
  .close_btn svg {color:#fff;font-size:30px}


  .header {padding:0 5%}
  header nav ul {flex-wrap: wrap;align-content: flex-start;padding:70px 14px}
  header nav ul li a {padding:0;clear: both;}
  header nav ul li {padding:20px 14px;width: calc(100% - 14px);text-align: left;}
  h1 img {width: 120px;}
  header .top_add_btn a {font-size: 14px;padding:10px 15px;margin-right:40px}
  .main-banner {height:768px}
  .main-banner .swiper-slide .txt_box {margin-top: -17px;}
  .container .section {padding:0 5%}

  .container .section1 {height:auto}
  .container .section1 .inner {padding:90px 0;justify-content: flex-start;}
  .container .section1 .artcle1 {margin-right:5%}
  .container .section1 .artcle1 .tx1 {font-size: 22px;}
  .container .section1 .artcle1 .tx2 {font-size:26px}
  .container .section1 .artcle2 {width: calc(100% - 400px - 5%);}
  .container .section1 .artcle2 ul li {font-size:18px}

  .container .section2 {height: 100%; min-height: auto;max-height: auto}
  .container .section2 .inner {padding:90px 0}
  .view_tab_box .btn li {padding:10px 0;font-size:18px}
  .section2 .tab_box .box1 p {font-size:22px}
  .section2 .tab_box .box1 span {font-size:16px;    margin: 20px 0 20px 0;white-space:normal}
  .section2 .tab_box .box1 .list ul li {font-size:15px}
  .view_tab_box .btn { grid-gap: 10px;grid-template-columns: auto auto auto auto;}
  .view_tab_box .tabs {padding: 30px 0 0 0;}

  .section3  .swiper-button-next2, .section3  .swiper-button-prev2 {display: none;}
  .section3 .swiper-pagination {top:auto !important;bottom:10% !important}
  .section3 .swiper-pagination-bullet {background-color: #fff;;}
  .section3 .swiper-pagination-bullet-active {background-color: #fff;;}

  .container .section3 .inner {padding:90px 0;}
  .container .section3 {height: auto;max-height: auto;}
  .container .section3 .inner h2 {margin-bottom:30px;font-size:32px}
  .mySwiper2 .swiper-slide .photo_box {height:260px}
  .mySwiper2 .swiper-slide .photo_box .photo_img {height:180px}
  .mySwiper2 .swiper-slide .photo_box .photo_tx {height:calc(100% - 180px)}
  .mySwiper2 .swiper-slide .photo_box .photo_tx span {font-size:20px}

  .container .section4 .inner {padding:90px 0;}
  .section4 .inner h2 {margin-bottom:30px;font-size:32px}
  .section4 .btn_box button:first-child {width: 200px;height:40px;font-size:16px}
  .section4 .btn_box button:last-child {width: 200px;height:40px;font-size:16px}
  .section4 .form_boxs .box .form_list input {padding:10px }
  .section4 .form_boxs .box .form_list input::placeholder {font-size:14px;}
  .section4 .form_boxs .box .form_list>li .nice-select {height:41px;line-height: 41px;font-size:14px;}
  .form-control {font-size:13px}
  .section4 .form_boxs .box .info_check {font-size:14px;}
  .infomation_box strong {font-size:14px;}
  .infomation_box span {font-size:14px;}

  .container .section5 {height:auto;max-height:auto}
  .container .section5 .inner {padding:90px 0;}
  .container .section5 .box { width: calc((100% - 50%) - 30px);}
  .container .section5 .map_box {width: 50%;height:400px}
  .container .section5 .box .tx1 {font-size:26px}
  .container .section5 .box .tx2 {font-size: 18px;}
  .container .section5 .box .tx3 {font-size:26px}
  .container .section5 .box .tx3 span {font-size: 16px;}
  .container .section5 .box ul li {font-size: 14px;}
  .container .section5 .box p {padding: 10px 0 10px 0;}
  .container .section5 .box ul {padding: 10px 0 10px 0;}

  .footer {padding: 20px 5% 20px 5%;}
  .footer .inner h5 {width: 120px;margin-bottom: 10px;}
  .footer .inner p {font-size:13px}
}

@media screen and (max-width:940px){
  .container .section1 .inner { flex-direction: column; align-items: center;}
  .container .section1 .artcle1 {width:100%;margin-right:0;text-align: center;align-content: center;align-items: center;margin-bottom:30px}
  .container .section1 .artcle2 {width:90%;text-align: center;}
  .container .section1 .artcle1 .tx1 {margin-bottom:10px}
  .container .section1 .artcle2 ul li {margin-bottom:10px}

  .view_tab_box .tabs .tab_box.active {flex-wrap: wrap;}
  .section2 .tab_box .box1 {width: 100%;order: 2 !important;margin-top:20px}
  .section2 .tab_box .box2 {width: 100%;order: 1 !important;height:300px}
  .section2 .tab_box .box2 img {max-height: 300px;width: 100%;}
}

@media screen and (max-width:768px){
  .main-banner {height:540px}
  .main-banner .swiper-slide .txt_box {margin-top:0}
  .main-banner .swiper-slide .txt_box p {font-size:20px;margin-bottom:10px}
  .main-banner .swiper-slide .txt_box strong {font-size:40px}
  .main-banner .swiper-slide .txt_box span {font-size: 16px;}
  .main-banner .swiper-slide .txt_box .more_btn {font-size: 16px;}

  .section4 .form_boxs .box .text_add {margin-right:0;flex-wrap: wrap;margin-top: 0px;}
  .section4 .form_boxs .box .text_add li {width: 100%;margin-right:0;margin-top: 5px;}

  .container .section5 .inner {flex-direction: column}
  .container .section5 .box {width: 100%;}
  .container .section5 .map_box {width: 100%;}
}

@media screen and (max-width:540px){ 
  .main-banner .swiper-slide .txt_box {padding:0 2%}
  .main-banner .swiper-slide .txt_box p {font-size:18px}
  .main-banner .swiper-slide .txt_box strong {font-size:32px}

  .container .section1 .artcle1 .tx1 {padding:10px 13px;font-size:19px}
  .container .section1 .artcle1 .tx2 {font-size:18px}
  .container .section1 .artcle2 ul li {font-size:16px}

  .view_tab_box .btn {grid-gap: 5px;grid-template-columns: auto auto ;}
  .view_tab_box .btn li  {font-size:16px}
  .view_tab_box .btn li.active::after {display: none;}

  .view_tab_box .tabs {padding:15px  0 0 0}
  .section2 .tab_box .box2 {height: 200px;}
  .section2 .tab_box .box2 img {max-height: 200px;}

  .section2 .tab_box .box1 p {font-size:20px}
  .section2 .tab_box .box1 span {margin: 5px 0 0px 0;font-size:15px}
  .section2 .tab_box .box1 .list ul li {font-size:14px;padding: 0 0 0 10px;}
  .section2 .tab_box .box1 .list ul:first-child {margin-right: 6px;}

  .container .section3 .inner h2 {font-size:26px}

  .section4 .inner h2 {font-size:26px}
  .section4 .form_boxs {padding: 10px 0 0px 0;}
  .section4 .form_boxs .box .form_list input {font-size: 13px;}
  .section4 .form_boxs .box .form_list>li .nice-select {font-size: 13px;height: 37px;line-height: 37px;}
  .section4 .form_boxs .box .text_add li label { font-size: 15px;margin-bottom: 5px;}

  .infomation_box {height: 80px;padding: 10px;}
  .infomation_box strong {font-size: 13px;margin: 0 0px 5px 0;}
  .infomation_box span {font-size: 12px;}
  .section4 .btn_box button:first-child {width:calc(50% - 3px);margin-right:3px}
  .section4 .btn_box button:last-child {width:calc(50% - 3px);margin-left:3px}

  .container .section5 .box ul li {padding:2px 0;font-size:13px}
  .container .section5 .map_box {height:250px}
}

/*서브공통*/
.sub_main {height:300px;width: 100%;position: relative;overflow: hidden;text-align: center;}
.sub_main::after {content: "";position: absolute;top:0;left:0;background-color: rgba(0, 0, 0, .3);width: 100%;height:100%;z-index: inherit;}
.sub_main img {width: 100%;;height:auto;}
.sub_main h4 {width: 100%;font-size:36px;color:#fff;position: relative;z-index: 10;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);margin-top:20px;padding:0 5%}


/*리스트 앨범*/
.list_area {width: 1320px;max-width: 100%;margin: 0 auto; position: relative;padding:100px 0;}
.list_inner {width: 100%;border-top:2px solid #c9d6db;padding:20px 0;}
.list_inner ul.items_box {display: flex;flex-wrap: wrap;margin-right:-30px}
.list_inner ul.items_box li {position:relative;width:calc((100% / 4) - 30px)/*width:486px;*/;margin-right:30px;margin-bottom:50px;}
.list_inner ul.items_box li a {width:100%;height: 100%;display: block;}
.list_inner ul.items_box li a .img_box {position:relative;width:100%;padding-top:60%;background-color: #003f54;}
.list_inner ul.items_box li a img {position:absolute;top:0px;bottom:0;left:0;right:0;width:auto;max-width:100%;height:auto;max-height:100%;margin:auto;min-height:100%;min-width: 100%;object-fit:cover;object-position:center;vertical-align:middle;opacity:1;filter:alpha(opacity=100);display:block;transition: 0.3s ease-in;}
.list_inner ul.items_box li a .txt_box{margin:10px 0} 
.list_inner ul.items_box li a .txt_box>p {font-size:18px;font-weight: 600;} 
.list_inner ul.items_box li a .txt_box>span {font-size:14px;font-weight: 400;color:#666;white-space:normal;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;margin-top:5px} 

/*Pagination*/
.Pagination {margin:0px 0 0 0;width:100%;overflow: hidden;clear: both;}
.Pagination ul.pag_box {display: flex;width:100%;justify-content: center}
.Pagination ul{margin-right:-7px;}
.Pagination ul li {margin-right:7px;}
.Pagination ul li a {width:30px;height:30px;border:1px solid #ccc;display: block;text-align: center;line-height: 30px;font-weight: bold;color:#666;font-size:14px}
.Pagination ul li.prev01  a {background:#ebebeb; border:none}
.Pagination ul li.next01  a {background:#ebebeb;border:none;}
.Pagination ul li a:hover,.Pagination ul li a:active,.Pagination ul li a:focus {background-color: rgb(201, 201, 201);;border:rgb(201, 201, 201);;color:#fff}
.Pagination ul li a.active {background-color: #1090be;;border:#1090be;;color:#fff}
.disabled {pointer-events: none;opacity: 0.5;}


@media screen and (max-width:1200px){
  .list_area {padding:100px 5%}
}
@media screen and (max-width:940px){
  .list_inner ul.items_box {display: flex;flex-wrap: wrap;margin-right:-20px}
  .list_inner ul.items_box li {position:relative;width:calc((100% / 3) - 20px)/*width:486px;*/;margin-right:20px;margin-bottom:50px;}
  .list_inner ul.items_box li a .txt_box>p {font-size: 15px;}
  .list_inner ul.items_box li a .txt_box>span {font-size: 13px;}
}
@media screen and (max-width:540px){
  .sub_main {height:200px}
  .sub_main h4 {font-size:26px}
  .list_area {padding:60px 5%}
  .list_inner ul.items_box li {width:calc((100% / 2) - 20px);margin-bottom:20px;}
}
@media screen and (max-width:400px){
  .list_inner ul.items_box li {width:calc((100% / 1) - 20px);margin-bottom:20px;}
}

/* 뷰 상세 */
.view_area {width: 1320px;max-width: 100%;margin: 0 auto; position: relative;padding:100px 0;}
.view_area .subject_box {font-size:22px;padding-bottom:10px;font-weight: 600;}
.view_inner {width: 100%;border-top:2px solid #c9d6db;padding:20px 0;border-bottom:1px solid #c9d6db}
.view_inner .portfolio_info {width: 100%;overflow: hidden;height:auto;min-height: 100px;background-color: #eee;padding:20px 30px;margin-bottom:30px}
.view_inner .portfolio_info strong {font-size:18px;font-weight: 600;}
.view_inner .portfolio_info dl {margin:5px 0}
.view_inner .portfolio_info dl dt {float: left;clear:both;font-weight: 600;color:#666;font-size:15px;margin:2px 10px 2px 0}
.view_inner .portfolio_info dl dd {float: left;color:#666;font-size:15px;margin:2px 0}
.view_area  .more_btn {width: 200px;background-color: #8a8a8a;margin:50px auto;}
.view_area  .more_btn button {width: 100%;border:none;color:#fff;font-size:18px;font-weight: 600;padding:15px 20px;}
/* .view_area  .more_btn button {width: 100%;height:100%;border:none;color:#fff;font-size:18px;font-weight: 600;padding:15px 20px;} */

@media screen and (max-width:1200px){
  .view_area {padding:100px 5%}
}
@media screen and (max-width:940px){
  .view_inner .portfolio_info strong {font-size:16px;}
  .view_area  .more_btn button {font-size:15px;}
}
@media screen and (max-width:540px){
  .view_area {padding:60px 5%}
  .view_inner .portfolio_info {margin-bottom:10px}
}