html {letter-spacing: -0.5px; font-size: 62.5%; width:100%; max-width:100%; scroll-behavior: smooth;}

body {font-family:'Inter','sans-serif';
      font-weight:400;
      color:#111;
      line-height:1.6;
      position:relative;
      word-break: keep-all;
      width:100%;
      max-width:100%;
}




.hidden {overflow: hidden;}

.orbitron {font-family: "Orbitron", 'sans-serif';}
.ms {font-family: "Montserrat";}
.cc {pointer-events: none;}
.hh {overflow-y:hidden}
.zz {z-index:-50;}
.blue {color:#172A88;}
.orange {color:#F94B00;}
.gray-bg {background-color:#f8f8f8;}
.mt {font-family: "Montserrat","Sans-serif";}
.flex {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.flex-end {justify-content: flex-end;}
.flex-start {justify-content: flex-start;}
.flex-wrap {flex-wrap: wrap;}
.stretch {align-items: stretch;}

.flex-1ea {display: flex; justify-content: center; align-items: center;}
.flex-1ea .content {flex-basis: 100%; max-width: 100%;}
.flex-1ea .content>img {width: 100%;}

.dot-ul>li {position: relative; padding-left:1.2rem;}
.dot-ul>li::before {content:''; position: absolute; top:1.1rem; left:0; width:4px; height:4px; border-radius: 50%; background-color: #333333;}
.bold-900 {font-weight: 900;}

.wrap {width:100%; max-width:100%;}
/* .main-wrap {overflow: hidden;} */
.sub_wrap {overflow: hidden; width:100%; max-width:100%;}

.section_wrap {padding:12rem 0;}
.section_inner {margin:8rem 0 12rem;}
.main_p {font-size: 1.8rem; font-weight:400;}
::selection {color:#fff; background:#F09866}

.no-data {width: 100%; font-size: 2rem; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; padding:3rem; margin-bottom: 10rem; margin-top: 5rem;}
.no-data>h4 {font-size:2.4rem; flex-basis: 100%;}
.no-data>p {font-size:1.6rem; flex-basis: 100%;}
.no-data>button {padding:1rem 2rem; background-color: #00001A; color:#fff; font-size: 1.4rem; margin-top:1rem;}


#skrollr-body {
  float: left;
  width: 100%;
  height: 100%;
}

.main-table {width: 100%; border-bottom:2px  solid #000;}
.main-table thead tr th {background-color: #000; color:#fff; padding:1rem; text-align: center;} 
.main-table thead tr th.left {text-align: left;} 
.main-table tbody tr td {border-bottom:1px solid #ddd; padding:1rem;}



/* 헤더 공통 */
.header {width:100%; height: 10rem;  position: fixed; top:0; left:0; z-index: 1000; transition:all 0.5s; border-bottom:1px solid rgba(255,255,255,0.5); background-color:#172A88;  display: flex; justify-content: space-between; align-items: stretch; }
.header.nav-down { height: 8rem;}
.header.nav-up { top:-13rem !important;}
.header.nav-zero { background:rgba(0,0,26,0);}
.header.nav-black-fixed { background:rgba(0,0,26,1);}
.header.nav-hover {background-color:#00001A;}

.header .header_logo {z-index: 200; height: 100%; display: flex; justify-content: center; align-items: center; flex: 1; width: 100%;}
.header .header_logo > a {display: block; padding-left:1rem;}


.header .header_inner {width:100%; max-width: 1200px; height:100%; display: flex; justify-content:space-between; align-items: center;  } 
.header .header_inner .menu-wrap {display: flex; justify-content: center; align-items: center; flex-basis: 100%; max-width: 100%; height: 100%; }
/* PC메뉴 */
.header .header_inner .nav {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.header .header_inner .nav .main_nav  {width: 100%; height: 100%;}
.header .header_inner .nav .main_nav .main_menu {display: flex; justify-content: center; align-items: center; flex-basis: 100%; max-width: 100%; height: 100%; }
.header .header_inner .nav .main_nav .main_menu .dp2 {position: relative; display: flex;  justify-content: center; align-items: center; flex-basis: 20%; max-width: 20%; height: 100%; text-align: center; font-weight: 900;}
.header .header_inner .nav .main_nav .main_menu .dp2 .dp02 {font-size: 1.6rem; position: relative; font-weight:600; letter-spacing: 0; transition:all 0.3s;  color:#fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.header .header_inner .nav .main_nav .main_menu .dp2.active>a {color:#fff; font-weight: 900;}
.header .header_inner .nav .main_nav .main_menu .dp2.active .dp02::before {content:''; position: absolute; top:35%; left:50%; transform: translate(-50%,-50%); width:0.5rem; height:0.5rem; background-color:#fff !important; border-radius: 50%; transition:all 0.4s;}
.sub_wrap .header .header_inner .nav .main_nav .main_menu .dp2 .dp02 {color:#111}
.header .header_inner .nav .main_nav .main_menu .dp2 .dp02:hover {transition:all 0.3s}
.header .header_inner .nav .main_nav .main_menu .dp2:hover .dp02::before {content:''; position: absolute; top:35%; left:50%; transform: translate(-50%,-50%); width:0.8rem; height:0.8rem; background-color:#fff; border-radius: 50%;}

.header .header_inner .nav .main_nav .main_menu .dp2 .submenu {position: absolute; left: 100%; transform: translateX(-100%); top: 7rem; width: 90%; background: #172A88; padding: 1.5rem 1rem; transition: all 0.3s ease-out; transition-property: opacity, top, visibility; transition-delay: 0s, 0s, 0s; visibility: hidden; opacity: 0; border:1px solid #ddd;} 
.header .header_inner .nav .main_nav .main_menu .dp2 .submenu.active {visibility:visible; opacity: 1; transition-delay: 0.1s; top:8rem; }

.header .header_inner .nav .main_nav .main_menu .dp2 .submenu > li {text-align: left;}
.header .header_inner .nav .main_nav .main_menu .dp2 .submenu > li > a {display: inline-block; font-size: 1.5rem; line-height: 1.2; padding:0.8rem 0.6rem; width:100%; transition:all 0.3s; font-weight: 400; color:rgba(255,255,255,0.5);}
.header .header_inner .nav .main_nav .main_menu .dp2 .submenu > li > a.active {color:#fff; opacity: 1;}
.header .header_inner .nav .main_nav .main_menu .dp2 .submenu > li > a:hover {transition:all 0.3s; color:rgba(255,255,255,1);}
.header .header_inner .nav .main_nav + .lang_box {margin-left:6rem}


/* 오른쪽메뉴 */
.header .r-menu {display: flex; justify-content: center; align-items: center; flex: 1;}
/* 햄버거메뉴 */
.header .r-menu .ham-wrap {flex-basis:4.4rem; max-width: 4.4rem; height: 4.4rem; position: relative; cursor: pointer;}
.header .r-menu .ham-wrap .ham-inner {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.header .r-menu .ham-wrap .ham-inner .bar {width:20px; height: 2px; display: block;}
.header .r-menu .ham-wrap .ham-inner .bar02 {margin:6px 0;}
.r-menu .ham-wrap {border:0px; }
.r-menu .ham-wrap .ham-inner .bar {background:#fff;}


/* 언어 */
.header .header_inner .r-menu .lang_box .lang_list {display: flex; justify-content: flex-end; align-items: center;}
.header .header_inner .r-menu .lang_box .lang_list .lang {font-size: 1.6rem; font-weight: 500; cursor: pointer; color:rgba(255,255,255,0.5)}
.header .header_inner .r-menu .lang_box .lang_list .bar {width:1px; height: 9px; display: block; margin:0 1rem; background: #fff;}
.header .header_inner .r-menu .lang_box .lang_list .lang.active_lang {position: relative; color:#ED702C; }
.header .header_inner .r-menu .lang_box .lang_list .lang.active_lang::after {content:""; display: block; width:100%; height: 2px; position: absolute; left:0; bottom:0; background:#ED702C;  }

.sub_wrap .header .header_inner .r-menu .lang_box .lang_list .lang {color:#999;}
.sub_wrap .header .header_inner .r-menu .lang_box .lang_list .bar {background: #999;}
.sub_wrap .header .header_inner .r-menu .lang_box .lang_list .lang.active_lang {color:#ED702C; }
.sub_wrap .header .header_inner .r-menu .lang_box .lang_list .lang.active_lang::after {background: #ED702C; }
.sub_wrap .header .header_inner .r-menu .ham-wrap {border:1px solid #999; }
.sub_wrap .header .header_inner .r-menu .ham-wrap .ham-inner .bar {background:#999;}

.header .sub-nav {display: none;}
.header .sub-nav.on {width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; height: 5rem; background-color: #00001A; margin-top:1px; border-bottom:1px solid rgba(255,255,255,0.5);}
.header .sub-nav.on>.menu-container {width: 100%; max-width: 1440px; height: 100%; display: flex; justify-content: flex-start; align-items: stretch; border-left:1px solid rgba(255,255,255,0.5); border-right:1px solid rgba(255,255,255,0.5);} 
.header .sub-nav.on>.menu-container>li {color:#fff; font-size:1.4rem; border-right:1px solid rgba(255,255,255,0.5);}
.header .sub-nav.on>.menu-container>.menu {flex-basis: 20rem; max-width: 20rem; cursor: pointer; transition: all 0.4s; position: relative; flex-wrap: nowrap; padding-left:1.6rem; padding-right:1.6rem; }
.header .sub-nav.on>.menu-container>.menu>ul {position: absolute; top:5rem; left:0; width: 100%; background-color:#222222; color:#fff; display: none;}
.header .sub-nav.on>.menu-container>.menu>ul>li {width: 100%; text-align: center;}
.header .sub-nav.on>.menu-container>.menu>ul>li:hover>a {color:rgba(255,255,255,1);}
.header .sub-nav.on>.menu-container>.menu>ul>li.active {background-color:#1D59A8;}
.header .sub-nav.on>.menu-container>.menu>ul>li.active>a {color:#fff;}
.header .sub-nav.on>.menu-container>.menu>ul>li>a {color:rgba(255,255,255,0.6); padding:1rem;}
.header .sub-nav.on>.menu-container>.menu:hover {background-color:rgba(255,255,255,0.1);}
.header .sub-nav.on>.menu-container>.menu>p {padding-right:1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.header .sub-nav.on>.menu-container>.home-btn {background-color:#1D59A8; height: 100%; width:5rem;} 
.header .sub-nav.on>.menu-container>.home-btn>a {width: 100%; height: 100%; display: flex;}
.header .sub-nav.on>.menu-container>.home-btn>a>img {max-width: 100%; object-fit: none;}


header .lang {display: flex; justify-content: space-between; align-items: center; background-color:rgba(255,255,255,0.2); padding:0.5rem 1rem; border-radius: 3rem; font-size:1.4rem; font-weight: bold; margin-right:1rem; position: relative; cursor: pointer;}
header .lang>p {display: flex; justify-content: space-between; align-items: center; color:#fff; text-wrap:nowrap;}
header .lang>p>img:first-child {margin-right:0.5rem;}
header .lang>p>img:last-child {margin-left:0.5rem;}
header .lang>ul{position: absolute; top:4.4rem; width: 100%; left:0; text-align: center;  border-radius: 1rem; overflow: hidden; transition: all 0.4s cubic-bezier(.23,1,.32,1); opacity: 0; visibility: hidden;}
header .lang>ul>li {padding:0.5rem; background-color:#efefef; }
header .lang.on {background-color:#172A88; color:#fff;}
header .lang.on img {filter: brightness(1000);}
header .lang.on>ul { visibility: visible; opacity: 1; top:3.4rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
header .lang.on>ul>li.active {color:#ffff; font-weight: bold; background-color:#172A88;}
header .lang.on>ul>li {color:#000000;}
header .lang.on>ul>li:hover {text-decoration: underline;}




.side-menu {position: fixed; top:50%; right:0; z-index: 99; width:5rem; background-color: #000000; color:#fff; display: flex; flex-direction: column; flex-wrap: wrap; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.25) 0px 50px 100px -20px, rgba(255, 255, 255, 0.3) 0px 30px 60px -30px;}
.side-menu>div:first-child {writing-mode: vertical-rl; width: 5rem; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.4rem; padding:4rem 0rem; transition: all 0.4s; }
.side-menu:hover div:first-child {background-color: #172A88; color:#ffff;}
.side-menu>div:last-child {background-color: #F94B00; display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; transition: all 0.4s;}
.side-menu:hover div:last-child {background-color: #da4100; display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem;}


/*서브배너*/
.sub-banner {width: 100%; height: 55.5rem; position: relative; overflow: hidden;}
.sub-banner .sub-banner-image {position: absolute; top:0; left:0; width: 100%; height: 100%; animation: subBanner 4s forwards;}
.sub-banner .boundary {display: flex; justify-content: center; align-items: center; color:#fff; text-align: center;}
.sub-banner .boundary .title-wrap {position: relative;}
.sub-banner .boundary .title-wrap>h3 {font-size:1.8rem}
.sub-banner .boundary .title-wrap>h1 {font-size:5rem; font-weight: bold;}

.sub-banner .boundary .title-wrap .menu-nav {display: flex; justify-content: center; align-items: center;}
.sub-banner .boundary .title-wrap .menu-nav>a {color:#fff; font-size: 1.6rem; position: relative; padding-right:3rem; padding-left:1.6rem;}
.sub-banner .boundary .title-wrap .menu-nav>a:first-child {padding-left:0;}
.sub-banner .boundary .title-wrap .menu-nav>a:hover {cursor: pointer; text-decoration: underline;}
.sub-banner .boundary .title-wrap .menu-nav>a::before {content:''; position: absolute; top:1.1rem; right:0; width:5px; height:5px; background-color: #fff; border-radius: 50%;}
.sub-banner .boundary .title-wrap .menu-nav>a:last-child::before {display: none;}
.sub-banner .boundary .title-wrap .menu-nav>a:last-child {padding-right:0;}

@keyframes subBanner {
  0% {transform: scale(1.05);}
  100% {transform: scale(1);}
}


.sticky-wrap {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
.sticky-wrap .item:first-child {font-size:3.6rem; font-weight: bold; line-height: 1.2; position: sticky; top:12rem; left:0; width: 30%; padding-right:2rem;}
.sticky-wrap .item:first-child p {font-size:1.6rem; line-height: 1.6; font-weight: 400; padding-top:1rem;}
.sticky-wrap .item:last-child {width: 70%; padding-left:2rem;}
.sticky-wrap .item:last-child .flex-1ea {width: 100%; display: flex; justify-content: center ;align-items: center; flex-wrap: wrap;}
.sticky-wrap .item:last-child .flex-1ea .content {flex-basis: 100%; max-width: 100%; margin-bottom:5rem;}
.sticky-wrap .item:last-child .flex-1ea .content img {background-color: #fff; border-radius: 0.5rem; padding:0.75rem;}
.sticky-wrap .item:last-child .img-wrap>img {vertical-align: middle;}
.sticky-wrap .item:last-child .img-wrap h4 {font-size:2.4rem; padding-top:2rem; line-height: 1.4; padding-bottom: 1rem;}
.sticky-wrap .item:last-child .img-wrap h3 {font-size:1.6rem; padding-top:1rem; line-height: 1.4;}
.sticky-wrap .item:last-child .img-wrap p {font-size:1.4rem; color:rgba(255,255,255,0.7); width: 100%; display: block; padding-bottom: 1rem;}
.sticky-wrap .item:last-child .flex-2ea {align-items: flex-start; flex-wrap: wrap; overflow: hidden;}
.sticky-wrap .item:last-child .flex-2ea .content {padding:0.5rem; margin-bottom: 3rem;}
.sticky-wrap .item:last-child .flex-2ea .content .tag-wrap>li {font-size:1.3rem; padding: 0.6rem 1.6rem; border-radius: 0.2rem;}


.sticky-wrap .design-line {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1rem;}
.sticky-wrap .design-line>li {width: 2rem; height: 0.5rem; background-color: #fff;}
.sticky-wrap .design-line>li:nth-child(2) {background-color: rgba(255,255,255,0.75);}
.sticky-wrap .design-line>li:nth-child(3) {background-color: rgba(255,255,255,0.5);}
.sticky-wrap .design-line>li:nth-child(4) {background-color: rgba(255,255,255,0.25);}

.sticky-wrap .item:first-child h3 {font-size:3.6rem; margin-bottom: 2rem;}
.sticky-wrap .item:first-child h4 {font-size:2rem;  margin-bottom: 2rem;}
.sticky-wrap .item:first-child p {font-size:1.6rem;}
/* 모바일메뉴 */
.mobile-wrap {position: fixed; top:0; right:0;z-index: 2000; width:0%; height:100vh; transition:all  0.5s ease; overflow-x: hidden; overflow-y: auto; visibility: hidden; opacity: 0;  opacity:0;   background-color: rgba(23, 42, 136, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: opacity 0.2s ease
}
/* .mobile-wrap::before {content:''; position: absolute; top:0; left:0; width: 100%; height: 100%;   filter: blur(10px); -webkit-filter: blur(10px); background-color: rgba(0,0,0,0.6);} */
.mobile-wrap.open {transition:all  0.5s ease;  width: 100%; visibility: visible; opacity: 1;}
.mobile-wrap .mobile-box {position: relative; vertical-align: middle; width:100%; height: 100%; padding-top:15rem;}
.mobile-wrap .mobile-box .box-inner {position: relative; margin:0px auto; max-width:1400px; height: 100%; padding-left:1.6rem; padding-right:1.6rem;}
.mobile-wrap .mobile-box .box-inner .box-top { margin-bottom:0;}
.mobile-wrap .mobile-box .box-inner .box-top > h2 {font-size:5rem; color:#fff; line-height: 2; font-weight: 900; border-bottom:1px solid rgba(255,255,255,0.3);}
.mobile-wrap .mobile-box .close {position: absolute; top:1.6rem; right:1.6rem; width:10rem; height:10rem; cursor: pointer; border:1px solid #fff; z-index: 1;}
.mobile-wrap .mobile-box .close > span {position: relative; width:100%; height:100%; display: block;}
.mobile-wrap .mobile-box .close > span::before {content:""; display: block; width:4rem; height:2px; position: absolute; transition:all 0.3s ease-in-out; transform:translate(-50%,-50%) rotate(-45deg); background: #fff; left:50%; top:50%;}
.mobile-wrap .mobile-box .close > span::after {content:""; display: block; width:4rem; height:2px; position: absolute; transition:all 0.3s ease-in-out; transform:translate(-50%,-50%) rotate(45deg); background: #fff; left:50%; top:50%;}
.mobile-wrap .mobile-box .close:hover>span {transform: rotate(180deg); transition: all 0.5s;}
.mobile-wrap .mobile-box .close:hover {background-color:#F94B00;}

.mobile-wrap .mobile-box .box-inner .m-nav-wrap {width:100%; }
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box {width:100%; display: flex; justify-content: flex-start; align-items: flex-start;}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav {flex-basis:25%; max-width:25%; padding:3rem 2%; min-height: 45rem;}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav:last-child {border-right:0;}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav .m-tit {font-size: 2.4rem; font-weight: 600; color:#fff; transition:all 0.3s; font-weight: 900;}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav:hover .m-tit {color:#F94B00; transition:all 0.3s;}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav .m-submenu {width:100%; padding-top:2rem; }
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav .m-submenu > li + li {margin-top:1.5rem}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav .m-submenu > li > a {font-size: 1.8rem; color:#fff; font-weight: 400;transition:all 0.3s; opacity: 0.75;}
.mobile-wrap .mobile-box .box-inner .m-nav-wrap .m-nav-box .m-nav .m-submenu > li:hover > a {text-decoration: underline; transition:all 0.3s; opacity: 1;}

.mobile-wrap .mobile-box .box-inner .copyright>p {color:rgba(255,255,255,1); text-align: left; padding-top:1rem; padding-bottom:1rem; font-size:1.6rem; border-top:1px solid rgba(255,255,255,0.3); }


/*푸터*/
footer {width: 100%; background-color:#F3F3F3; color:#000000; z-index: 1;}
footer .boundary {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding-left:3.2rem; padding-right:3.2rem;}
footer #client-wrap {width: 100%; background-color:#fff; padding-top:2rem; padding-bottom:2rem; border-top:1px solid #ddd; display: none;}
footer #client-wrap .swiper-wrapper{align-items: center;}
/* footer #client-wrap .swiper-slide>{} */
footer  {width: 100%; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
footer .logo-wrap {flex-basis: 55%; max-width: 55%;}
footer .logo-wrap>a {margin-bottom:2rem; display: inline-block;}
footer .logo-wrap>img {margin-bottom:2rem; display: inline-block;}
footer .logo-wrap>ul {width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
footer .logo-wrap>ul>li {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;  font-size:1.4rem; margin-bottom:0.3rem;}
footer .logo-wrap>ul>li:first-child {flex-basis: 100%; max-width: 100%;}
footer .logo-wrap>ul>li:nth-child(2) {flex-basis: 100%; max-width: 100%;}
footer .logo-wrap>ul>li {flex-basis: 50%; max-width: 50%;}
footer .logo-wrap>ul>li>b {padding-right:1rem; border-right:1px solid #ddd; margin-right:1rem; width: 6rem;}
footer .site-map {flex-basis: 45%; max-width: 45%; width: 100%; display: flex; justify-content: flex-end; align-items: stretch;}
footer .site-map>ul {flex-basis: 25%; max-width: 25%; padding:1rem; }
footer .site-map>ul>li{width: 100%; font-size:1.3rem;}
footer .site-map>ul>li:first-child {font-weight: bold; font-size:1.4rem; margin-bottom:1rem;}
footer .site-map>ul>li:first-child>a {color:#000;}
footer .site-map>ul>li>a{color:rgba(0,0,0,0.5); padding-bottom:0.8rem; padding-top:0.3rem; line-height: 1.2;}
footer .copy-right {flex-basis:100%; max-width: 100%; font-size:1.4rem; flex-basis: 100%; max-width: 100%; color:rgba(0,0,0,0.5); border-top:1px solid #ddd; margin-top:2rem;}


#main-visual {width: 100%; height: 920px; position: relative; overflow: hidden;}
#main-visual .swiper-slide {position: relative; background-color:#000; overflow: hidden;}
#main-visual .swiper-slide .boundary {width: 100%; height: 100%; position: relative;} 
#main-visual .swiper-slide .banner-image {opacity: 1; transition: all 2s cubic-bezier(.23,1,.32,1); position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(1.2); width: 100%; height: 100%; }
#main-visual .swiper-slide.swiper-slide-active .banner-image {opacity: 1; transform: translate(-50%,-50%) scale(1.0); width: 100%; z-index: 0; transition: all 2s cubic-bezier(.23,1,.32,1); }

.border {position: absolute; top:0; width: 1px; height:100%; background-color:rgba(255,255,255,0.25); transition: all 4s;}
.boundary .border.border-left {left:0;}
.boundary .border.border-right { right:0;}
.border.black {position: absolute; top:0; width: 1px; height:100%; background-color:rgba(0,0,0,0.1); transition: all 0.5s;}



/* 메인 인덱스 */
#main-visual .event-wrap {position: absolute; right:0; bottom:0; width: 100%; max-width: 43.2rem; height: 26.8rem; background-color: #000000; padding:4rem; color:#fff; background-image: url(/SAEMAH/image/event-01.jpg); background-size: cover; z-index: 11; cursor: pointer; transition: all 0.4s;}
#main-visual .event-wrap:hover {opacity: 0.6;}
#main-visual .event-wrap>h4 {font-size: 2rem; margin-bottom: 1rem;}
#main-visual .event-wrap>h5{font-size: 1.6rem; font-weight: bold;}
#main-visual .event-wrap>p{font-size: 1.3rem; margin-top:2rem;}
#main-visual .event-wrap>button {padding:1rem 2rem; color:#fff; background-color:#3334A9; display: inline-block; font-size: 1.3rem; border-radius: 0.3rem; margin-top:1rem; display: none;}
#main-visual .swiper-slide .boundary {display: flex; justify-content: center; align-items: center;}
#main-visual .swiper-slide .boundary .nav-btn {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border:1px solid #fff; width: 8rem; height: 8rem; flex-shrink: 0;  cursor: pointer;}
#main-visual .swiper-slide .boundary .nav-btn:hover {background-color: #3334A9; border:1px solid #3334A9;}
#main-visual .swiper-slide .boundary .nav-btn.right>img {transform: rotate(180deg);}

#main-visual .swiper-slide .boundary .main-text {width: 90%; max-width: 90%; margin-left:5%; margin-right:5%; position: relative; top:-3rem;}
#main-visual .swiper-slide .boundary .company-text {font-size:1.8rem; font-weight: 800;}
#main-visual .swiper-slide .boundary .title-text {font-size:4.5rem; font-weight: 800; line-height: 1.2; font-family: "Orbitron", 'sans-serif'; text-transform: uppercase; -webkit-text-stroke-width: 0.5px; /* Safari/Chrome */
  -webkit-text-stroke-color: #fff; /* Safari/Chrome */
  text-stroke-width: 0.5px; /* Firefox */
  text-stroke-color: #fff; /* Firefox */}
#main-visual .swiper-slide .boundary .sub-text {font-size:1.8rem; margin-top:1rem;}
#main-visual .swiper-slide .boundary .text-wrap {color:#fff; display: flex; justify-content: space-between; align-items: center; width: 100%;} 


#main-visual .swiper-pagination {bottom:5rem;}
#main-visual .swiper-pagination-bullet {border-radius: 0; width: 5rem; height: 6px; background-color: rgba(255,255,255,0.7);}
#main-visual .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #172A88;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {color:rgba(255,255,255,0.3);}
/* #main-visual .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:root {color:#172A88;} */


.scroll { cursor: pointer; transition: opacity .3s; font-size:1.2rem; color:rgba(255,255,255,0.5);}
.scroll:hover {opacity:.5;}
#scroll-down {width: 100%; position: relative;}
#scroll-down .container {position: relative; width: 100%; display: flex; justify-content: center;  align-items: center; margin-top:5rem;}
#scroll-down a { padding-top: 60px;}
#scroll-down a span { position: absolute; top: 0; left: 50%; width: 30px;height: 50px; margin-left: -15px; border: 2px solid #fff; border-radius: 50px; box-sizing: border-box;}
#scroll-down a span::before { position: absolute; top: 10px; left: 50%; content: ''; width: 6px; height: 6px; margin-left: -3px; background-color: #fff;  border-radius: 100%;animation: sdb9 2s infinite; box-sizing: border-box;}

@keyframes sdb9 {
  0% {transform: translate(0, 0); opacity: 0;}
  40% {opacity: 1;}
  80% {transform: translate(0, 20px); opacity: 0;}
  100% {opacity: 0;}
}

.section .title {width: 100%; text-align: center;}
.section .title .sub-title {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.section .title .sub-title .tab-btn {font-size: 4rem; font-weight: 800; display: flex; justify-content: flex-start; align-items: center; margin-left:4rem;}
.section .title .sub-title .tab-btn>.tab {padding:2rem; position: relative; cursor: pointer; transition: all 0.4s; color:rgba(0,0,0,0.3);}
.section .title .sub-title .tab-btn>.tab::before {content:''; position: absolute; top:10%; left:50%; transform: translate(-50%); width:1.2rem; height:1.2rem; border-radius: 50%; background-color:rgba(0,0,0,0.3);}
.section .title .sub-title .tab-btn>.tab.active {color:#1D59A8;}
.section .title .sub-title .tab-btn>.tab.active::before  {background-color:#1D59A8;}

.section .title h2 {font-size:4.5rem; font-weight: 900; line-height: 1.2; font-family: "Orbitron","sans-serif"; text-transform: uppercase; margin-bottom: 2rem;}
.section .title>h3 {font-size:2.4rem; font-weight: 400; line-height: 1.4; font-weight: 800; margin-top:2rem; margin-bottom:2rem;}
.section .title>p {font-size:1.6rem; font-weight: 300; line-height: 1.6; font-weight: 400;}
.section .title .vertical-line {width: 1px; height: 10rem;  background-color:#D9D9D9; margin: 0 auto; margin-top:2rem; display: none;}

#section-02 {position: relative; width: calc(100% - 4rem); margin: 0 auto;}
#section-02 .ship-animation {position: absolute; left:0; bottom:0;}
#section-02.section .title>p {width:100%; max-width: 80rem; margin: 0 auto; font-size: 1.6rem;}
#section-02.section .title {padding-bottom: 15rem;}

/* 인덱스 1 */
#section-01 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#section-01>.img-wrap {flex-basis: 100%; max-width: 100%; position: absolute; right:0; top:75%; transform: translate(5%,-50%); z-index: -1; transition: all 1s;}
.youtube-wrap.flex-2ea {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.youtube-wrap.flex-2ea>.item {flex-basis: 49%; max-width: 49%;}

/* 인덱스 3 */
#section-03 {width: calc(100% - 4rem); margin:0 auto; position: relative; background: #000000; color:#fff; overflow: hidden;}
#section-03::before {content:''; width: 100%; height: 35%; position: absolute; top:0; left:0; display: none;}
#section-03 #solution-wrap {width: 100%; position: relative; overflow: hidden; max-width: 100%;}
#section-03 .btn { position: absolute; top:0%; z-index: 3;  transform: translate(-50%,-50%); background-color:#000000; border:1px solid #fff; z-index: 2; width: 10rem; height: 10rem; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; cursor: pointer; transition: all 0.4s; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; display: none;}
#section-03 .btn:hover {background-color:#1D59A8; box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;}
#section-03 .btn>img {transition: all 0.4s;}
#section-03 .btn.left-btn {position: absolute; top:35%; left:0%; }
#section-03 .btn.left-btn:hover>img {transform: translateX(-0.5rem);}
#section-03 .btn.right-btn:hover>img {transform: translateX(0.5rem);}
#section-03 .btn.right-btn {position: absolute; top:35%; right:-7%; }

#section-03 .boundary {padding-top:15rem; padding-bottom:10rem; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; }
#section-03 .boundary .text-wrap {flex-basis: 40%; margin-bottom: 8rem; padding-right:2rem; padding-left:2rem;}
#section-03 .boundary .text-wrap>h3 {font-size:4.5rem; text-transform: uppercase; line-height: 1.2; margin-bottom: 2rem;}
#section-03 .boundary .text-wrap>p {font-size:1.6rem; line-height: 1.4; color:#b3b3b3; margin-bottom:2rem;}
#section-03 .boundary .img-wrap {border-radius: 0.5rem; overflow: hidden; position: relative; margin-bottom: 8rem; flex-basis: 60%; max-width: 60%;}
#section-03 .boundary .img-wrap>img {vertical-align: middle; width: 100%;}
.tag-wrap {display: flex; justify-content: flex-start; align-items: center; margin-top: 2rem; gap:1rem;}
.tag-wrap>li {font-size:1.4rem; border :1px solid #172A88; padding:1rem 2rem; color:#6D6FDE; font-weight: 800; border-radius: 0.5rem; }
/* #section-03 .boundary .img-wrap>img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%;} */


#section-03 #solution-wrap::before {content:""; position: absolute; width: 100%; height: 35%; background-color:black; background-position: bottom;}
#section-03 #solution-wrap .swiper-slide {width: 100%; max-width: 1440px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; color:#fff; cursor: pointer;}
#section-03 #solution-wrap .swiper-slide>.img-wrap {overflow: hidden; margin:0 auto; position: relative;}
#section-03 #solution-wrap .swiper-slide>.img-wrap>img {vertical-align: middle; transition: all 0.4s; transform: scale(1.0);}
#section-03 #solution-wrap .swiper-slide:hover>.img-wrap>img {transform: scale(1.1);}
#section-03 #solution-wrap .swiper-slide>.img-wrap>p {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#fff; font-weight: bold; text-align: center; font-size:1.4rem; line-height: 1.2;  text-transform: uppercase; font-family: "Montserrat"; letter-spacing: 2.5px;}
#section-03 #solution-wrap .swiper-slide>.text-wrap { width: 100%;  display: flex; justify-content: space-between; align-items: stretch; color:#fff; padding:3rem 0; position: relative;  flex-wrap: wrap;} 
#section-03 #solution-wrap .swiper-slide>.text-wrap>.sub-title {text-align: center; flex-basis: 100%; max-width: 100%;}
#section-03 #solution-wrap .swiper-slide>.text-wrap>.sub-title>p.ms {font-size:1.3rem; line-height: 1.4; color:rgba(255,255,255,0.5); text-align: left;  text-transform: uppercase; margin-bottom:0.5rem;}
#section-03 #solution-wrap .swiper-slide>.text-wrap>.sub-title>h3 {font-size:2.6rem; text-align: left;}
/* #section-03 #solution-wrap .swiper-slide>.text-wrap>.sub-title #port-air {font-size:3rem; text-align: center; line-height: 1.2; } */
#section-03 #solution-wrap .swiper-slide>.text-wrap>.contents {padding:2rem 0; padding-top:1rem; max-width: 100%; flex-basis: 100%;}
#section-03 #solution-wrap .swiper-slide>.text-wrap>.contents>p {font-size:1.4rem; font-weight: 300; margin-bottom:2rem; color:rgba(255,255,255,0.7);}
#section-03 #solution-wrap .swiper-slide>.text-wrap>.contents>a {font-size:1.6rem; font-weight: 800; color:#fff; display: inline; position: relative;}
#section-03 #solution-wrap .swiper-slide>.text-wrap>.contents>a::before {content:''; position: absolute; background-color:#fff; top:50%; right:-2rem; width:6px; height:6px; transform: translateY(-50%);  border-radius: 50%; transition: all 0.4s;}
#section-03 #solution-wrap .swiper-slide:hover>.text-wrap>.contents>a{text-decoration: underline;}
#section-03 #solution-wrap .swiper-slide:hover::before>.text-wrap>.contents>a {right:-2.5rem;}
#section-03 #solution-wrap .swiper-pagination {color:#fff; font-size:1.4rem; top:10%; left:97%; transform: translate(-50%,-50%); width: auto; height: 24px; display: none;}
#section-03 #solution-wrap .swiper-pagination .swiper-pagination-total {opacity: 0.5;}


.swiper-container-cube .swiper-cube-shadow {opacity: 0.1 !important;}

#section-04 {background-color: #091B74; color:#fff; width: calc(100% - 4rem); margin: 0 auto;}
#section-04 .pd-100 {padding-bottom:0;}
#section-04 .map-wrap {width: 100%; position: relative;}
#section-04 .map-wrap .nation { padding:0.25rem 1rem; border-radius: 5rem; background: #172A88;  color:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); display: flex; justify-content: flex-start; align-items: center; gap:1rem; flex-wrap: wrap; transition: all 0.4s; background: #00518C;
  background: linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  background: -moz-linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  background: -webkit-linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  background: linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006dbb', endColorstr='#00684d',GradientType=1 );
  background-size: 600% 600%;
  -webkit-animation: playani 3s ease infinite;
  -moz-animation: playani 3s ease infinite;
  -o-animation: playani 3s ease infinite;
  animation: playani 3s ease infinite;
  font-weight: bold;
}

#section-04 .map-wrap .nation .circle {background-color:#fff; width: 1rem; height: 1rem;}
.sub-section#section-04 {width: 100%; background-color:#f8f8f8;}
.sub-section#section-04 .sub-title {color:#000000; text-align: center;}
.sub-section#section-04 .sub-title>h3 {font-size:3rem; margin-bottom:1rem; line-height: 1.4;}
.sub-section#section-04 .sub-title>p {color:#000000; font-size:1.6rem;}

@-webkit-keyframes playani {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes playani {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-o-keyframes playani {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes playani {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

#section-04 .map-wrap .nation .text {font-size:1.4rem; font-weight: 500;}
#section-04 .map-wrap .nation .img-wrap {display: none; position: absolute; top:0; left:0; width: 20rem; visibility: hidden; opacity: 0; background-color: #fff; border-radius: 1.5rem; overflow: hidden;  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border:1px solid #fff; display: flex; justify-content: center; align-items: center;}
#section-04 .map-wrap .nation:hover .img-wrap {width: 20rem; height: auto; transition: all 0.4s; visibility: visible; opacity: 1; display: none;}
#section-04 .map-wrap .nation:hover {z-index: 99;}

#section-04 .map-wrap .nation#korea {top:34%; left:48%}
#section-04 .map-wrap .nation#japan {top:38%; left:51%;}
#section-04 .map-wrap .nation#shanghai {top:40%; left:42%;}
#section-04 .map-wrap .nation#qingdao {top:36%; left:41%;}
#section-04 .map-wrap .nation#singapore {top:55%; left:38%;}
#section-04 .map-wrap .nation#dubai {top:43%; left:25%;}
#section-04 .map-wrap .nation#istanbul {top:34%; left:17%;}
#section-04 .map-wrap .nation#rotterdam {top:27%; left:18%;}
#section-04 .map-wrap .nation#usa {top:37%; left:76%;}
#section-04 .map-wrap .nation#panama {top:51%; left:75%;}
#section-04 .map-wrap .nation#houston {top:39%; left:67%;}
#section-04 .map-wrap .nation#indonesia {top:57%; left:48%;}
#section-04 .map-wrap .nation#shanghai {top:40%; left:42%;}
#section-04 .map-wrap .nation#malaysia {top:51%; left:38%;}
#section-04 .map-wrap .nation#thailand {top:46%; left:38%;}
#section-04 .map-wrap .nation#taiwan {top:44%; left:48%;}
/* #section-04 .map-wrap .nation:hover {background: #e97e0a;} */


#section-05 {background-color: #f9f9f9;}
#section-05 #product-wraps {width: calc(100% - 4rem); margin: 0 auto; margin-top:5rem; text-align: center;}
#section-05 #product-wraps .swiper-wrapper {flex-wrap: wrap;}
#section-05 #product-wraps .swiper-slide {flex-basis: 19%; max-width: 19%; margin:0.5%; position: relative; height: 54rem; overflow: hidden; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;}
#section-05 #product-wraps .swiper-slide::before {content:''; position: absolute; bottom:0; left:0; width: 100%; height: 8rem; background: rgb(23,42,136);
  background: rgb(23,42,136);
background: linear-gradient(0deg, rgba(23,42,136,1) 15%, rgba(244,243,239,0) 100%); z-index: 1;}
#section-05 #product-wraps .swiper-slide .text-wrap {position: absolute; color:#fff; z-index: 1; bottom:1.4rem; left:50%; transform: translate(-50%,-50%); width: 100%; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
#section-05 #product-wraps .swiper-slide .text-wrap>h3 {font-size:2.4rem; font-weight: bold; line-height: 1.2; width: 100%;}
#section-05 #product-wraps .swiper-slide .text-wrap>p {font-size:1.4rem; text-decoration: underline; display: none;}
#section-05 #product-wraps .swiper-slide>img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%; transition: all 0.4s;}
#section-05 #product-wraps .swiper-slide:hover::before {content:''; background-color: rgba(23,42,136,0.6); height: 100%;}
#section-05 #product-wraps .swiper-slide:hover .text-wrap {position: absolute; color:#fff; z-index: 1; bottom:40%; left:50%; transform: translate(-50%,-50%); width: 100%;}
/* #section-05 #product-wraps .swiper-slide:hover .text-wrap>h3 {font-size: 3rem;} */
#section-05 #product-wraps .swiper-slide:hover .text-wrap>p {display: block;}
#section-05 #product-wraps .swiper-slide:hover>img {transform: translate(-50%,-50%) scale(1.1);}


#section-06 {width:calc(100% - 4rem); background-image:url(/SAEMAH/image/esg-bg-01.jpg); background-attachment: fixed; height: auto; padding-top:10rem; padding-bottom:10rem; background-repeat: no-repeat; color:#fff; display: flex; justify-content: center; align-items: center; margin: 0 auto; background-size: cover; position: relative;}
#section-06::before {content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);}
#section-06 .boundary { display: flex;  justify-content: center; align-items: flex-start;  gap:2rem; flex-wrap: wrap;}
#section-06 .boundary>.img-wrap {flex-basis: 100%; max-width: 100%; display: flex; justify-content: center; align-items: center; position: sticky; top:12rem; left:0;}
#section-06 .boundary>.img-wrap>h4 {font-size:4rem; border-left:1px solid #ddd; padding-left:2rem; }
#section-06 .boundary>.img-wrap>p {width: 100%;}
#section-06 .boundary>.text-wrap {flex-basis: 100%; max-width: 100%; font-size: 1.6rem; display: flex; justify-content: flex-start; align-items: flex-start; margin-top:4rem;  margin-bottom:4rem; position: relative;}

#section-06 .boundary>.text-wrap>ul {padding-bottom:2rem; flex-basis: 31.333%; max-width: 31.333%; margin: 1.5%;}
#section-06 .boundary>.text-wrap>ul>li>h3 {font-size:2rem; padding-bottom:1rem; line-height: 1.2;}
#section-06 .boundary>.text-wrap>ul>li>p {font-size:1.4rem;}
#section-06 .boundary>.text-wrap>p {margin-bottom:1.6rem;}
#section-06 .boundary>.text-wrap>.btn {background-color:#091B74; color:#fff; padding:1rem 4rem; text-align: center; display: inline-block; border-radius: 0.5rem; font-size:1.4rem;}



#section-06 .boundary>.end-wrap {font-size:1.6rem; text-align: center;}
.effect-a {margin-top:2rem; padding:1rem 3em; border-radius: 5rem; color:#fff; background: #172A88;  color:#fff; display: flex; justify-content: flex-start; align-items: center;  flex-wrap: wrap; transition: all 0.4s; background: #00518C;
  background: linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  background: -moz-linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  background: -webkit-linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  background: linear-gradient(230deg, #006dbb, #00518C, #45b1ff, #00518C);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006dbb', endColorstr='#00684d',GradientType=1 );
  background-size: 600% 600%;
  -webkit-animation: playani 3s ease infinite;
  -moz-animation: playani 3s ease infinite;
  -o-animation: playani 3s ease infinite;
  animation: playani 3s ease infinite;
  font-weight: bold;
text-align: center;
display: inline-block;
font-size: 1.6rem;}


.contact-us {width: 100%; max-width: 1920px;  background-repeat: no-repeat; background-size:cover; background-attachment: fixed;  background-position: top; display: flex; justify-content: flex-end; align-items: flex-end; z-index: 0; position: relative; margin: 0 auto;}
.contact-us .white-banner {width: auto; height:auto; position: absolute; right:0; bottom:-1px; z-index: 1; background-color:#000000; }
.contact-us .boundary.pd-100 {padding-bottom:0;}
.contact-us .contact-us-wrap {width: 100%;}
.contact-us .contact-us-wrap> .title {border-bottom: 1px solid #ddd; padding-bottom: 5rem;} 
/* .contact-us .contact-us-wrap .title h2.white {color:#fff;} */
.contact-us .contact-us-wrap .title>ul {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; margin-top:2rem; margin-bottom:2rem;}
.contact-us .contact-us-wrap .title>ul>li {display: flex; justify-content: flex-start; color:#fff; font-size:1.6rem; margin-right:4rem; font-weight: bold; margin-bottom:1rem;}
.contact-us .contact-us-wrap .title>ul>li>span {padding:0 1rem;}
.contact-us .contact-us-wrap .title>ul>li>a {color:#000000; text-align: left;}
.contact-us .contact-us-wrap .title>ul:first-child {display: flex; justify-content: center; align-items: center; flex-direction: row;}
.contact-us .contact-us-wrap .title>ul:first-child>li {margin-right: 0;}


.form-wrap {background-color:#fff; width: 100%; padding: 0;  display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; position: relative; margin-top:5rem; margin-bottom: 10rem; }
.form-wrap::before {content:''; position: absolute; top:0; right:-180px; background-color:#fff; width: 100%;}
.form-wrap>li:first-child {flex-basis: 100%; max-width: 100%; margin-bottom: 2rem; text-align: center;}
.form-wrap>li:first-child>h3 {font-size: 3rem; text-transform: uppercase;}
.form-wrap>li:first-child>p {font-size: 1.6rem; margin-bottom: 3rem;}
.form-wrap>li {flex-basis: 48%; max-width: 48%; margin-bottom:2rem;}
.form-wrap>li>label {font-size:1.6rem; font-weight: bold;}
/* .form-wrap>li:nth-child(3),.contact-us .contact-us-wrap .form-wrap>li:last-child {flex-basis: 100%; max-width: 100%;} */
.form-wrap>li>textarea {flex-basis: 100%; max-width: 100%; width: 100%; border:0; background-color:#F8F8F8; padding:2rem; font-size:1.6rem;  resize: none; }
.form-wrap>li>textarea::placeholder { color:rgba(0,0,0,0.3);}
.form-wrap>li>input {width: 100%; padding:1.7rem; border:none; background-color:#F8F8F8; margin-top:0.5rem; font-size:1.6rem; font-family: "Inter", "sans-serif";}
.form-wrap>li>input::placeholder {color:rgba(0,0,0,0.3); font-size:1.6rem; }
.form-wrap>li>input:focus { outline: 1px solid #F94B00;}
/* .form-wrap>li:nth-child(4), .contact-us .contact-us-wrap .form-wrap>li:nth-child(5){flex-basis: 100%; max-width: 100%;} */

.form-wrap>li:last-child {width: 100%; flex-basis: 100%; max-width: 100%; display: flex; justify-content: center; align-items: center;}
.form-wrap>li:last-child>button {width:100%; max-width: 20rem; color:#fff; padding-top:1.6rem; padding-bottom:1.6rem; font-size:2rem; font-weight: bold; background-color:#172A88;}
.form-wrap>li:last-child>button:hover { background-color:#F94B00;}
.form-wrap>li .alarm {font-size:1.4rem; color:#F94B00; padding-top:0.5rem; display: none;}
.form-wrap>li.contents {flex-basis: 100%; max-width: 100%;} 
.form-wrap>li.contents textarea:focus {outline: 1px solid #F94B00;}

.send-btn {background-color:#fff; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; width: calc(100% - 32px); max-width: 45rem; padding:5rem; position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 1rem; text-align: center; z-index: 2; display: none;}
.send-btn>ul>li>img {margin: 0 auto; display: block; }
.send-btn>ul>li>h3 {font-size:2rem; padding-top:1rem; padding-bottom:1rem;}
.send-btn>ul>li>p {font-size:1.4rem;}
.send-btn>ul>.close-btn {font-size:1.6rem; color:#fff; width: 100% !important; padding: 1rem 2rem; background-color:#1D59A8; border-radius: 0.5rem; margin-top:2rem; cursor: pointer; transition: all 0.4s; position: relative;}
.send-btn>ul>.close-btn.cancel {background-color:#fff; border:1px solid #F94B00; color:#F94B00;}
.send-btn>ul>.close-btn.cancel:hover {background-color: #F94B00; color:#fff;}
.send-btn>ul>.close-btn:hover {opacity: 0.8;}

/* 전송중일때*/
.send-btn>ul {display: none;}
.send-btn>ul.success {display: block;}



.loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%;  width: 120px; height: 120px; animation: spin 2s linear infinite; }
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.contact-form {position: relative; top:20%;}
.contact-form .boundary {display: flex; justify-content: flex-start; align-items: stretch; overflow: hidden; border-radius: 0.5rem 0.5rem 0 0 ;}
.contact-form .boundary .contact-text {background-color: #fff; padding:8.5rem; padding-left:0; padding-right:0;}
.contact-form .boundary .contact-text>li {display: flex; justify-content: flex-start; margin-bottom:1rem;}
.contact-form .boundary .contact-text>li>h2 {font-size:5rem; font-weight: 900;}
.contact-form .boundary .contact-text>li>p {font-size:1.6rem; font-weight: 600;}
.contact-form .boundary .contact-text>li>img {margin-right:2rem;}
.contact-form .boundary>ul {flex-basis: 50%; max-width: 50%;}
.contact-form .form-wrap {padding:8.5rem; border-radius: 0; padding-left:0; padding-right:0;}


.new-contents {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; position:relative; margin-top:5rem; padding-bottom:10rem;}
.new-contents .sticky-wrap {flex-basis: 25%; max-width: 25%; position: relative; top:25rem; left:0; position: sticky;} 
.new-contents .sticky-wrap p {font-size:1.4rem; color:rgba(0,0,0,0.3); letter-spacing: 10px; font-weight: 300; line-height: 1.2;}
.new-contents .sticky-wrap a {font-size:1.4rem; color:rgba(0,0,0,0.5); text-align: left;}
.new-contents .sticky-wrap a:hover { color:rgba(0,0,0,1);}
.new-contents .sticky-wrap .num.ms {font-size:8rem; font-weight: 800; color:rgba(0,0,0,0.1); line-height: 1.1;}
.new-contents .sticky-wrap h2 {font-size:4rem; font-weight: 800;}
.new-contents .sticky-wrap h2>img {margin:0 auto; display: block;}
.new-contents>.contents-wrap {width: 100%; padding-bottom:5rem; flex-basis: calc(75% - 20px); max-width: calc(75% - 20px);}
.new-contents>.contents-wrap>.img-wrap>.video-wrap {width: 100%; overflow: hidden; position: relative;}
.new-contents>.contents-wrap>.img-wrap>.video-wrap>video {width: 100%;}
.new-contents>.contents-wrap>.img-wrap {width: 100%; height: 0 !important; padding-bottom:40%; background-color:rgba(0,0,0,0.1); overflow: hidden;}
.new-contents>.contents-wrap>#solutions-01 {background-image:url(/SAEMAH/image/solution-01.jpg); background-size:cover;}
.new-contents>.contents-wrap>#solutions-02 {background-image:url(/SAEMAH/image/solution-02.jpg); background-size:cover;}
.new-contents>.contents-wrap>#solutions-02-01 {background-image:url(/SAEMAH/image/solution-02-01.jpg); background-size:cover;}
.new-contents>.contents-wrap>#solutions-02-02 {background-image:url(/SAEMAH/image/solution-02-02.jpg); background-size:cover;}
.new-contents>.contents-wrap>#solutions-03 {background-size:cover;}
.new-contents>.contents-wrap>#solutions-03-01 {background-image:url(/SAEMAH/image/solution-03-01.jpg); background-size:cover;}
.new-contents>.contents-wrap>#solutions-03-02 {background-image:url(/SAEMAH/image/solution-03-02.jpg); background-size:cover;}
.new-contents>.contents-wrap .text-cont-wrap {margin-top:3rem; margin-bottom:6rem;}
.new-contents>.contents-wrap .text-cont-wrap .sub-title-wrap {font-size:6rem; margin-bottom:2rem;  line-height: 1.2;}


.new-contents .flex-2ea {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.new-contents .flex-2ea .content {flex-basis: calc(50% - 15px); max-width: calc(50% - 15px); margin-bottom:6rem;}
.new-contents .flex-2ea .content .img-wrap {border:1px solid rgba(255,255,255,0.5);}
.new-contents .flex-2ea .content .img-wrap>img {width: 100%; vertical-align: middle;}
.new-contents .flex-2ea .content .text-wrap {margin-top:3rem;}
.new-contents .flex-2ea .content h2 {font-size:3.6rem; margin-bottom:1rem; font-family: "Montserrat","S-Core",'sans-serif'; line-height: 1.2; margin-bottom:1rem;}
.new-contents .flex-2ea .content h3 {font-size:2.4rem; margin-bottom:1rem; font-family: "Montserrat","S-Core",'sans-serif';}
.new-contents .flex-2ea .content h4 {font-size:1.8rem;}
.new-contents .flex-2ea .content p {font-size:1.6rem; margin-top:1rem;}

.new-contents .flex-3ea {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.new-contents .flex-3ea .content {flex-basis: calc(33.333% - 15px); max-width: calc(33.333% - 15px); margin-bottom:6rem;}
.new-contents .flex-3ea .content .img-wrap {border:1px solid rgba(255,255,255,0.5);}
.new-contents .flex-3ea .content .img-wrap>img {width: 100%; vertical-align: middle;}
.new-contents .flex-3ea .content .text-wrap {margin-top:1rem;}
.new-contents .flex-3ea .content h3 {font-size:2rem; margin-bottom:0.1rem; font-family: "Montserrat","S-Core",'sans-serif'; text-align: center;}
.new-contents .flex-3ea .content p {font-size:1.6rem; text-align: center;}

.page-view .view-cont {font-size: 1.6rem;}
.page-view .view-cont p {margin:0; padding:0; margin-bottom:0 !important; }
.page-view .view-cont ol {list-style-type: decimal;}
.page-view .view-cont ol li {margin-left:25px;}
.page-view .view-cont ol li::marker {font-size:1.6rem;}
.page-view .view-cont ul {list-style-type:disc !important;}
.page-view .view-cont ul li {margin-left:25px;}
.page-view .view-cont .table-bordered { width: 100%; border-collapse: collapse;}
.page-view .view-cont .table-bordered td {border:1px solid #ddd; padding:5px 3px;}

.blue_black-bg .new-contents {padding-top:18rem;}
.blue_black-bg .new-contents .sticky-wrap p {color:rgba(255,255,255,0.3);}
.blue_black-bg .new-contents .sticky-wrap .num.ms {color:rgba(255,255,255,0.3);}
.blue_black-bg .new-contents .flex-2ea .content p {color:rgba(255,255,255,0.5); font-weight: 300;}

.overview-wrap {width: 100%; position: relative; padding-bottom:0; margin-top:10rem;}
.overview-wrap>img {position: relative; top:3rem; z-index: 0;}
.overview-wrap>h2 {font-size:5rem; padding-left:20%; bottom:13rem; position: relative;}
.p_1-6 {font-size:1.6rem;}
.p-gray {color:rgba(0,0,0,0.5);}
.p-dot {margin-left:3rem; position: relative;}
.p-dot::before {content:''; position: absolute; top:1rem; left:-2rem; width:4px; height: 4px; border-radius: 50%; background-color:rgba(0,0,0,0.5);}

.width-50 {width: 100%; max-width: 50%;}


#adcs-product {position: relative;}
#adcs-product>img {width: 100%;}
#adcs-product>img>ul {width: 100%; height: 100%;}
#adcs-product>ul {width: 100%; height: 100%; position: absolute; top:0; left:0;}
.circle {position: relative; width: 6rem; height: 6rem; background-color:rgba(29,89,168,0.3); color:#fff; border-radius: 50%; overflow: hidden;}
.circle>.smart-circle {width: 5rem; height: 5rem; background-color:rgba(29,89,168,1); color:#fff; font-size:2rem; border-radius: 50%;}
#circle-01 {top:42%; left:50%;}
#circle-02 {top:34%; left: 70%;}
#circle-03 {top:40%; left: 75%;}


#smart-marine-wrap.flex-3ea .content {flex-basis: calc(33.333% - 10px); max-width: calc(33.333% - 10px);} .flex-3ea .content {flex-basis: calc(33.333% - 10px); max-width: calc(33.333% - 10px);}
.smart-marine-cont.flex-start {flex-wrap: nowrap; align-items: flex-start; margin-bottom:2rem;}
.smart-marine-cont.flex-start .circle {flex-shrink: 0;}
.smart-marine-cont li:last-child {padding-left:2rem;}
.smart-marine-cont li:last-child>h4 {font-size:1.8rem; font-weight: 800; margin-bottom:0.5rem;} 
.smart-marine-cont li:last-child>p {font-size:1.4rem !important; text-align: left !important; line-height: 1.4;}


.title-news {width: 100%; text-align: center;}
.title-news>p {font-size:1.4rem; letter-spacing: 10px; font-weight: 300; line-height: 1.2; color:rgba(0,0,0,0.3); }

.news-blog-wrap.flex-3ea {display: flex; justify-content: flex-start; padding-bottom:15rem; align-items: flex-start;}
.news-blog-wrap.flex-3ea .content {flex-basis: 31.333%; max-width: 31.333%; margin: 0 1%; margin-bottom:4rem; cursor: pointer; }
.news-blog-wrap.flex-3ea .content .img-wrap {height:0; width: 100%; padding-bottom:60%; background-color:#fff; overflow: hidden; position: relative;}
.news-blog-wrap.flex-3ea .content .img-wrap>img { position: absolute; width: 100%; min-width: 100%; top:50%; left:50%; transform: translate(-50%,-50%);  transition: all 0.4s;}
.news-blog-wrap.flex-3ea .content .img-wrap:hover img {transform: translate(-50%,-50%) scale(1.05);}
.news-blog-wrap.flex-3ea .content .text-wrap {padding-top:2rem; padding-bottom:2rem;}
.news-blog-wrap.flex-3ea .content .text-wrap >h3 {font-size:2rem; font-weight: 600; margin-bottom:1rem;}
.news-blog-wrap.flex-3ea .content .text-wrap >p {font-size:1.6rem; color:rgba(0,0,0,0.5); margin-bottom:2rem;  width:100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 표시할 줄 수를 지정합니다 */ overflow: hidden;  text-overflow: ellipsis;}
.news-blog-wrap.flex-3ea .content .text-wrap >.date {font-size:1.4rem; color:rgba(0,0,0,0.5); font-weight: bold;}
.news-blog-wrap.flex-3ea .content:hover .text-wrap >h3 {color:#172A88; transition: all 0.4s;}
.news-blog-wrap.flex-3ea .content:hover .text-wrap >p { color:rgba(0,0,0,0.8); transition: all 0.4s;}

.result-text {font-size:1.6rem; width: 98%; margin: 0 auto; font-weight: bold; margin-bottom:1rem;}


.boundary {width: 100%; height:100%; max-width: 1200px; margin:0 auto; position: relative; padding-left:1.6rem; padding-right:1.6rem;}
.boundary-full  {width: 100%; height:100%; max-width: 100%; margin:0 auto; position: relative; padding-top:10rem; padding-bottom:10rem;}
.border-left-right {border-left:1px solid rgba(255,255,255,0.5); border-right:1px solid rgba(255,255,255,0.5);}
.border-left-right.gray {border-left:1px solid rgba(0,0,0,0.5); border-right:1px solid rgba(0,0,0,0.5);}

.pd-80 {padding-top:8rem; padding-bottom:8rem; }
.pd-100 {padding-top:10rem; padding-bottom:10rem; }
.pd-130 {padding-top:13rem; padding-bottom:13rem; }
.pd-150 {padding-top:15rem; padding-bottom:15rem; }
.mg-top-50 {margin-top:5rem;}
.pd-top-150 {padding-top:15rem;}
.pd-top-180 {padding-top:18rem;}
.pd-top-230 {padding-top:23rem;}
.pd-top-300 {padding-top:30rem;}

.upc {text-transform: uppercase;}
.sub-section {padding-top:10rem;}
.sub-section.first {padding-top:23rem;}
/* .sub-section.first p {font-size:1.6rem;} */
.sub-section.first p>span {font-size:1.6rem;}
.sub-section.blue_black-bg {background-color:#00001A; color:#fff;}
#greeting-wrap .boundary:first-child {margin-top:5rem;}
#greeting-wrap .boundary:first-child .flex-2ea .content:first-child>img {max-width: 30rem;}

#greeting-wrap.sub-section .text-wrap {width: 100%;}
#greeting-wrap.sub-section .text-wrap>h2 {font-size:4rem; line-height: 1.4; margin-bottom:4rem;}
#greeting-wrap.sub-section .text-wrap>p {font-size:1.6rem; line-height: 1.6; color:rgba(0,0,0,0.5); margin-bottom:2rem;}

.flex-2ea {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.flex-2ea .content {flex-basis: 50%; max-width: 50%;}
.flex-2ea .content.flex_basis_100 {flex-basis: 100%; max-width: 100%;}
.flex-2ea .content .download-btn {border:1px solid #1D59A8; display: flex; justify-content: center; align-items: stretch; padding:1.6rem 1rem; font-size:1.4rem; border-radius: 0.5rem;}
.flex-2ea .content .download-btn>img {object-fit: none; margin-right:1rem;}
.flex-2ea .content .download-btn.blue {background-color:#1D59A8; color:#fff;}
.flex-2ea .content .download-btn.white {background-color:#fff; color:#1D59A8;}
.flex-2ea.gap-1 .content {flex-basis: 49%; max-width: 49%; margin:0.5%;}


.flex-3ea {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.flex-3ea .content {flex-basis: 33.333%; max-width: 33.333%;}
.flex-3ea .content.flex_basis_100 {flex-basis: 100%; max-width: 100%;}

.banner-wrap {width: 100%; height:0% !important; padding-bottom:25%; background-image:url(/SAEMAH/image/greeting-image.jpg); background-repeat: no-repeat; background-size:contain; background-attachment: fixed; background-position: bottom; background-size:cover; }



/* Who We Are */
#about .content {padding-bottom: 10rem;}
#about .content>img {width: 100%; max-width: 30rem;}
#about .content>h3 {font-size:2.4rem; margin-bottom:1rem;}
#about .content>p {font-size:1.6rem;}

#esg-wrap {position: relative;  height: auto;  padding-top: 10rem; padding-bottom: 10rem; background-repeat: no-repeat; color: #fff; display: flex; justify-content: center; align-items: center;margin: 0 auto; background: #fff; background-size: cover;  background-image:url(/SAEMAH/image/esg-bg-01.jpg)}
#esg-wrap::before {content:''; position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5);}
#esg-wrap .sticky-wrap .item:last-child .img-wrap p {color:rgba(255,255,255,0.75); font-size: 1.6rem;}
#esg-wrap .sticky-wrap .design-line {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1rem;}
#esg-wrap .sticky-wrap .design-line>li {width: 2rem; height: 0.5rem; background-color: #fff;}
#esg-wrap .sticky-wrap .design-line>li:nth-child(2) {background-color: rgba(255,255,255,0.75);}
#esg-wrap .sticky-wrap .design-line>li:nth-child(3) {background-color: rgba(255,255,255,0.5);}
#esg-wrap .sticky-wrap .design-line>li:nth-child(4) {background-color: rgba(255,255,255,0.25);}

#certi-wrap {background-attachment: fixed; height: auto; background-size:cover; padding-top: 10rem; padding-bottom: 10rem; background-repeat: no-repeat; color: #000000; display: flex; justify-content: center; align-items: center;margin: 0 auto;}
#certi-wrap .sticky-wrap .item:last-child .img-wrap p {color:rgba(0,0,0,0.7); font-size: 1.6rem;}
#certi-wrap .sticky-wrap .design-line {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1rem;}
#certi-wrap .sticky-wrap .design-line>li {width: 2rem; height: 0.5rem; background-color: #000;}
#certi-wrap .sticky-wrap .design-line>li:nth-child(2) {background-color: rgba(0,0,0,0.75);}
#certi-wrap .sticky-wrap .design-line>li:nth-child(3) {background-color: rgba(0,0,0,0.5);}
#certi-wrap .sticky-wrap .design-line>li:nth-child(4) {background-color: rgba(0,0,0,0.25);}

#certi-wrap .flex-4ea  {flex-wrap: wrap; display: flex; justify-content: flex-start; align-items: stretch; gap:1.5%; overflow: hidden;}
#certi-wrap .flex-4ea .content {flex-basis: 23%; max-width: 23%; }
#certi-wrap .flex-4ea .content img {border:1px solid #ddd; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;}
#certi-wrap .flex-4ea .content:hover img {border:1px solid #091B74; }
#certi-wrap .flex-4ea .content p {font-size: 1.4rem !important; font-weight: 600;}
#certi-wrap .flex-4ea .content:hover .img-wrap p {color:#091B74; }

#our-st {background-color: #000000; color:#fff;}

#location .sticky-wrap .item:last-child .img-wrap p {color:rgba(0,0,0,0.7);}
#location .boundary-full {padding-top:0;}
#location table {width: 100%; border-top:1px solid #000000; table-layout: fixed;}
#location table tr {border-bottom:1px solid #ddd;}
#location table tr th {font-size: 1.4rem; text-align: left; padding:1.6rem 2rem; font-weight: bold;}
#location table tr td {font-size: 1.4rem; text-align: left; padding:1.6rem 2rem;}



/* What We Supply */
#product-explanation {width: 100%;}
#product-explanation .flex-2ea {flex-wrap: wrap; align-items: stretch;}
#product-explanation .flex-2ea .content {padding-bottom: 5rem;}
#product-explanation .flex-2ea .content:first-child {font-size:3.6rem; font-weight: bold;}
#product-explanation .flex-2ea .content:nth-child(2) {font-size:1.6rem; font-weight: 300;}
#product-explanation .flex-2ea .content.pd-main-image {flex-basis: 100%; max-width: 100%; width: 100%; height: 0%; padding-bottom:25%; background-image:url(/SAEMAH/image/product-bg-01.jpg); background-repeat: no-repeat; background-size:100%; background-attachment: fixed; background-position: center;  margin-bottom:5rem; }


#product-list {padding-top:0; margin-top:5rem;}
#product-list .boundary {display: flex; flex-direction: column; align-items: center;}
#product-list .boundary .select-wrap> select{background-color: #FFF0E6; color:#FF6600; font-weight: bold; border: 0; font-size:1.6rem; padding:1.2rem 2.2rem; border-radius: 5rem; border:2px solid #FF6600; outline: none; margin-right:1rem;}
#product-list .patent-wrap {width: 100%; font-size: 1.3rem; margin-top: 1rem; padding:1rem; background-color: #f8f8f8; position: relative;}
#product-list .patent-wrap>li {position: relative; padding-left: 2rem;}
#product-list .patent-wrap>li::before {content:''; position: absolute; top:50%; left:1rem; width: 3px; height: 3px;  background: #333333; border-radius: 50%;}
.search-wrap {width: 100%; max-width: 100%; border:2px solid #000000; border-radius: 5rem; overflow: hidden; display: flex; justify-content: space-between; align-items: stretch; margin: 0 auto;}
.search-wrap select {padding-left:2rem; padding-right:2rem; outline: none; border:none; border-right:1px solid #ddd; width: 100%; max-width: 15rem; background-image:url(/SAEMAH/image/select.svg); background-position: 90%; background-repeat: no-repeat;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all 0.4s; cursor: pointer;} 
.search-wrap select:hover {background-color:#f8f8f8;}
.search-wrap input[type='text'] {font-size:1.6rem;  border-width: 0; font-family: "Inter"; outline: none; width: 100%; padding:1rem 2rem; margin: 2px 0 2px 2px;}
.search-wrap input[type='text']::placeholder {color:rgba(0,0,0,0.4); font-size:1.4rem;}
.search-wrap button {background-color: #000; width:100%;  max-width: 15rem; border-radius: 5rem; padding:0.5rem 2rem; margin: 2px 2px 2px 2px; display: flex; justify-content: center; align-items: center;}
.search-wrap button:hover {background-color: #FF6600; transition: all 0.4s;}
.result-wrap {text-align: right; font-size:1.4rem; text-align: right; width: 99%; margin-left:0.5%; margin-right: 0.5%; padding-top:1rem; padding-bottom:1rem; border-bottom:1px solid #ddd;}

.product-wraps {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; width: 100%; padding-bottom:10rem;}
.product-wraps>.item {flex-basis: 32.333%; max-width: 32.333%; margin-bottom:2rem; margin:0.5%; margin-bottom:3rem; }
.product-wraps>.item .img-wrap {border:1px solid #ddd; display: flex; justify-content: center; align-items: center; border-radius: 1rem; box-sizing: border-box; overflow: hidden;}
.product-wraps>.item .img-wrap>img {width: 100%; transition: all 0.4s;}
.product-wraps>.item:hover .img-wrap>img {transform: scale(1.06);}
.product-wraps>.item .text-wrap {margin-top:1.6rem;}
.product-wraps > .item .text-wrap > p {
  font-size: 1.4rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 표시하고자 하는 줄 수 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  color:#777;
}
.product-wraps>.item .text-wrap>h4 {font-size:1.4rem; font-weight: 300;}
.product-wraps>.item .text-wrap>h3 {font-size:2.4rem; font-weight: 800; line-height: 1.2; padding-bottom: 0.5rem;}



.filter-container {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.filter-container>li {margin-bottom: 1.6rem;}
.filter-container>li.name {flex-basis: 20%; max-width: 20%; font-size: 1.6rem; font-weight: 600;}
.filter-container>li.list {flex-basis: 80%; max-width: 80%;}
.filter-wrap .filter label {border:1px solid #ddd; font-size: 1.4rem; background: #eef1ff; border:1px solid #eef1ff; color:#172A88; margin-bottom: 1rem;}
.filter-wrap .filter label:hover {background-color: #4b5db8; color:#fff;}

.filter-checkbox {
  display: none;
}

.filter label {
  display: inline-block;
  padding: 0.6rem 2.2rem;
  margin-right: 1rem;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}

.filter label>img {
  margin-right: 0.5rem;
  visibility: hidden;

}

.filter-checkbox:checked + label {
  background-color: #172A88;
  color:#eef1ff;
  /* font-weight: bold; */
}

.filter-checkbox:checked + label>img {
  display: inline-block;
}

.check {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}


.check-container {
  display: block;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 1.3rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 2rem;
  margin-bottom: 1rem;
}


.check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 2rem;
  width: 2rem;
  background-color: #eee;
  border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
  background-color: #172A88;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
  left: 0.7rem;
  top: 0.4rem;
  width: 0.5rem;
  height: 1rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadeIn {
  animation: fadeIn 2s forwards;
}

.product-wraps {
  opacity: 0; /* 초기 상태를 투명하게 설정 */
  transition: all 0.4s;
}


/* .product-wraps .item {
  animation: fadeIn 0.5s;
} */

.orange {
  color: orange;
}

/*제품 전체페이지*/
.pd_con{width: 100%;}
.pd_con .swiper-slide{height: 650px; width: 100%; cursor: pointer;}
.pd_con .swiper-slide img{width: auto; height: 100%; object-fit: inherit;}

.pd_con .gallery-thumbs {margin-top: 32px;}
.pd_con .gallery-thumbs .swiper-slide{height: 150px; background-color: #f5f5f5;}
.pd_con .gallery-thumbs .swiper-wrapper{justify-content: center;}
.pd_con .swiper-button-next.swiper-button-white, .pd_con .swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ddd; display: none;}



.pd_con .category_wrap{width: 100%;}
.pd_con .category_wrap .big_category{width: 100%; margin-bottom: 1.6rem;}
.pd_con .category_wrap .big_category ul{
  margin-top: 1rem;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    justify-content: flex-start; align-items: center;
    -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.pd_con .category_wrap .big_category ul li{cursor: pointer; padding: 0.8rem 0.8rem 0.8rem 0;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row;
}

/* .pd_con .category_wrap .big_category ul li:last-child{padding-right: 0;} */
.pd_con .category_wrap .big_category ul li p{position: relative; background-color: #eef1ff; border: 1px solid #eef1ff; padding: 0.8rem 1.6rem; font-size: 1.6rem; opacity: 1; transition-duration: 0.3s;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height:100%; width: 100%;
    border-radius: 0.5rem;
    color:#172A88;
}
:lang(en) .pd_con .category_wrap .big_category ul li p{font-size: 1.4rem;}
.pd_con .category_wrap .big_category ul li p.tab_on{background-color: #172A88; color: #eef1ff;  font-weight: 600; opacity: 1; }
.pd_con .category_wrap .sub_category{width: 100%; padding:0 1.6rem; }
.pd_con .category_wrap .sub_category dl dt{width: 15rem; font-size: 1.6rem; font-weight: 500;  display: flex; justify-content: flex-start; align-items: center;}
.pd_con .category_wrap .sub_category dl dd{width: calc(100% - 150px); display: inline-block; vertical-align:top; margin-right: -4px;}
.pd_con .category_wrap .sub_category dl dd .type_wrap{width: 100%; }
.pd_con .category_wrap .sub_category dl dd .type_wrap label{ display: inline-block;width: auto;  vertical-align: top; position: relative;margin: 8px 16px 4px 0; }
.pd_con>input[type=checkbox]{width: 20px; height: 20px;}
.pd_con>input{position: absolute; left: 0; top: 0;}
.pd_con .category_wrap .sub_category dl dd .type_wrap label>input {position: absolute;}
.pd_con .category_wrap .sub_category dl dd .type_wrap label p{padding-left: 3.2rem; color: #777; font-size: 1.4rem; cursor: pointer; vertical-align: middle;}
.pd_con .category_wrap .btn{width: 145px; margin: 48px auto 0 auto;}
:lang(en) .pd_con .category_wrap .btn{width: 158px; font-size: 16px;}
.pd_con .category_wrap .btn a{display: block; text-align: center; background-color: #172A88; color: #fff; padding: 16px 24px;}
.pd_con .category_wrap .sub_category input{opacity: 0;}
.pd_con .category_wrap .sub_category input:checked ~ p{color: #172A88!important;}
.pd_con .category_wrap .sub_category label p{position: relative;}
.pd_con .category_wrap .sub_category label p::before{content: ""; font-size: 14px; color: #172A88; border: 1px solid #ddd; background-color: #fff; color: #ddd;
 position: absolute; left: 0; top:2px; width: 2rem; height: 2rem;
}
.pd_con .category_wrap .sub_category input:checked ~ p::before{content: ""; color: #fff;  background:#172A88 url(../img/sub/check_icon.svg)no-repeat; background-position: center;}

.pd_con .category_wrap .sub_category>dl {display: flex; justify-content: flex-start; align-items: stretch;}

.pd_con .product_list{width: 100%; margin-top: 3rem; border-top: 1px solid #ddd; padding-top: 72px;}
.pd_con .product_list>p{font-size: 17px; font-weight: 600;}
.pd_con .product_list>p>span{ color: #172A88; font-weight: 600;}
.pd_con .product_list ul {margin-left: -16px; margin-right: -16px;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.pd_con .product_list ul li{width:20%; display: inline-block; vertical-align: top; margin-right: -4px; padding: 8px; margin-bottom: 48px;
    display: -webkit-box; display: -ms-flexbox; display: flex;
}
.pd_con .product_list ul li .con_wrap{width: 100%; cursor: pointer;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
}
.pd_con .product_list ul li .con_wrap .img_wrap{width: 100%; background-color: #f5f5f5; padding: 16px;}
.pd_con .product_list ul li .con_wrap .img_wrap .img_in{width: 100%; height: 310px; background: url(../img/sub/test_long_en.png)no-repeat; background-position: center; background-size: cover;}
.pd_con .product_list ul li .con_wrap .text_wrap{position: relative; padding: 16px 0 24px 0; border-bottom: 1px solid #ddd;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
    height: 100%;
}

.pd_con .product_list ul li .con_wrap .text_wrap::after{content: ""; width: 0%; height: 2px; background-color: #172A88;
    position: absolute; left: 0; bottom: -1px; transition-duration: 0.5s;
}
.pd_con .product_list ul li .con_wrap:hover .text_wrap::after{width: 100%;}
.pd_con .product_list ul li .con_wrap .text_wrap span{display: block; color: #777; font-size:15px; font-family: 'Ubuntu','Noto Sans KR', sans-serif; font-weight: 400; }
.pd_con .product_list ul li .con_wrap .text_wrap b{font-weight: 600; display: block; font-size: 18px;}





  /* 기본 스타일 설정 */
  .radio-input {
    display: none; /* 실제 라디오 버튼 숨기기 */
  }

  /* 커스텀 라디오 버튼 스타일 */
  .radio-wrap {display: flex; justify-content: center; align-items: center; margin-top: 2rem;}
  .radio-label { padding:0.8rem 1.6rem; background-color: #FFF0E6; color:#FF6600; cursor: pointer;  display: inline-block; margin-right: 10px; /* 라벨 간 간격 */ cursor: pointer; font-size:1.4rem; font-weight: bold;border-radius: 0.5rem;}
  .radio-input:checked + .radio-label { background-color: #FF6600; /* 검은색 배경 */ color: #FFF0E6; /* 흰색 글씨 */}

  .radio-wrap#big-category .radio-label { padding:0.8rem 1.6rem; background-color: #eef1ff; color:#172A88; cursor: pointer;  display: inline-block; margin-right: 10px; /* 라벨 간 간격 */ cursor: pointer; font-size:1.4rem; font-weight: bold;border-radius: 0.5rem;}
  .radio-wrap#big-category .radio-input:checked + .radio-label { background-color: #172A88; /* 검은색 배경 */ color: #eef1ff; /* 흰색 글씨 */}


.gallery-warps {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; width: 100%; padding-bottom:10rem;}
.gallery-warps>.item {flex-basis: 23%; max-width: 23%; margin-bottom:2rem; margin:1%; margin-bottom:2%; }
.gallery-warps>.item .img-wrap {border:1px solid #ddd; display: flex; justify-content: center; align-items: center; box-sizing: border-box; overflow: hidden; position: relative; padding-bottom: 75%;}
.gallery-warps>.item .img-wrap>img {width: 100%; height: 100%; transition: all 0.4s; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.gallery-warps>.item:hover .img-wrap>img {transform: translate(-50%,-50%) scale(1.05);}
.gallery-warps>.item .text-wrap {margin-top:1.6rem;}
.gallery-warps>.item .text-wrap>h4 {font-size:1.4rem; font-weight: 300; display: flex; justify-content: space-between; align-items: center;}
.gallery-warps>.item .text-wrap>h4>span {display: flex; justify-content: flex-end;}
.gallery-warps>.item .text-wrap>h4>span>img {max-width: 2rem; object-fit: contain; padding-right:0.5rem; opacity: 0.3;}
.gallery-warps>.item .text-wrap>h3 {font-size:1.8rem; font-weight: 800; line-height: 1.2; padding-bottom: 0.5rem;   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 텍스트를 표시할 최대 줄 수 */
  -webkit-box-orient: vertical;
  white-space: normal;}



#catalog-wraps .item .img-wrap {cursor: pointer; padding-bottom: 140%; border:1px solid #ddd; border-radius: 0; box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;}
#catalog-wraps .item:hover .img-wrap {position: relative;}
#catalog-wraps .item:hover .img-wrap>img {transform: translate(-50%,-50%) scale(1.0);}
#catalog-wraps .item:hover .img-wrap::before {content:'Requesting a Catalog'; font-size:1.6rem; position: absolute; z-index: 2; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background-color: rgba(23, 42, 136,0.5); backdrop-filter: blur(5px); transition:opacity 0.2s ease; text-align: center; display: flex; justify-content: center; align-items: center; color:#fff; font-weight: bold; }

.close-btn {width: 5rem; height: 5rem; background-color: #000000; position: absolute; top:0; right:0;}
.close-btn {padding:1rem; cursor: pointer;}
.close-btn > span {position: relative; width:100%; height:100%; display: block;}
.close-btn > span::before {content:""; display: block; width:2.5rem; height:2px; position: absolute; transition:all 0.3s ease-in-out; transform:translate(-50%,-50%) rotate(-45deg); background: #fff; left:50%; top:50%;}
.close-btn > span::after {content:""; display: block; width:2.5rem; height:2px; position: absolute; transition:all 0.3s ease-in-out; transform:translate(-50%,-50%) rotate(45deg); background: #fff; left:50%; top:50%;}
.close-btn:hover {background-color:#172A88;}
.close-btn:hover>span {transform: rotate(180deg); transition: all 0.5s;}

.download-wraps {width: 100%; height: 100vh; position: fixed; top:0; left:0; background-color:rgba(0,0,0,0.8); z-index: 1000; display: none; justify-content: center; align-items: center; }
.download-wraps.on {display: flex;}
.download-wraps.on .contents {width: 100%; max-width: 70rem; height: auto; background-color: #fff; padding:5rem; position: relative;}
.download-wraps.on .contents>h3 {font-size:2.4rem; line-height: 1.2; margin-bottom: 1rem;}
.download-wraps.on .contents>p {font-size:1.4rem;}
.download-wraps.on .contents>ul {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; margin-top:2rem;}
.download-wraps.on .contents>ul>li label {font-size: 1.3rem; font-weight: bold; display: none;}
.download-wraps.on .contents>ul>li:first-child {flex-basis: 25%; max-width: 25%;}
.download-wraps.on .contents>ul>li:first-child>p {font-size:1.3rem; line-height: 1.2; padding-top:0.5rem; font-weight: 800; text-align: center;}
.download-wraps.on .contents>ul>li:first-child>img {border:1px solid #ddd; vertical-align: middle;}
.download-wraps.on .contents>ul>li:last-child {flex-basis: 75%; max-width: 75%; padding-left:1.6rem;}
.download-wraps.on .contents>ul>li:last-child>input {width: 100%; padding:1rem 2rem; border:none; background-color: #efefef; margin-bottom:1rem; font-size:1.3rem; font-family: "Inter", "sans-serif";}
.download-wraps.on .contents>ul>li:last-child>input::placeholder {font-size: 1.4rem;}
.download-wraps.on .contents button {font-size:1.4rem; color:#fff; background-color: #172A88; width: 100%; padding:1.2rem; border-radius: 0.5rem; margin-top:2rem; transition: all 0.4s;}
.download-wraps.on .contents button:hover {background-color: #FF6600; border-radius: 5rem;}

.product-wraps {margin-top:3rem;}
.product-wraps .item .text-wrap .tag-wrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap:1rem; margin-top:1rem; margin-bottom:1rem;}
.product-wraps .item .text-wrap .tag-wrap>li {padding:0.4rem 0.8rem; color:#172A88; cursor: pointer; font-size:1.3rem; background-color: #efefef; border:1px solid #efefef; color:#9b9b9b; font-weight: 500; cursor: no-drop;}
/* .product-wraps .item .text-wrap .tag-wrap>li:hover {background-color: #FF6600; color:#fff;} */

#product-detail {margin-top:5rem;}
#product-detail .flex-2ea {align-items: flex-start; margin-bottom:9rem;}
#product-detail .content:nth-child(1) {flex-basis: 50%; max-width: 50%; position: sticky; top:12rem; left:0;}
#product-detail .content:nth-child(1) #product-main {overflow: hidden; margin-bottom:1rem; border:1px solid #ddd; position: relative;}
#product-detail .content:nth-child(1) #product-main .swiper-slide { display: flex; justify-content: center; align-items: center; border-radius: 0; overflow: hidden;}
#product-detail .content:nth-child(1) #product-main .swiper-slide>img {width: 100%;}
#product-detail .content:nth-child(1) #product-main .navigation-wrap  {display: flex; justify-content: center; align-items: stretch; width: 100%; height: 100%; position: absolute; z-index: 1; left:0; top:0;}
#product-detail .content:nth-child(1) #product-main .navigation-wrap .prev {width: 50%; height: 100%; cursor: url('/SAEMAH/image/prev-btn.svg'), auto;  }
#product-detail .content:nth-child(1) #product-main .navigation-wrap .next {width: 50%; height: 100%; cursor: url('/SAEMAH/image/next-btn.svg'), auto;}

/* .navigation-thumb-wrap {position: absolute; top:0; left:0;} */
/* #product-thumb .prev {width: 40px; height: 40px  } */
/* #product-detail .content:nth-child(1) #product-main .navigation-thumb-wrap .next {width: 50%; height: 100%; cursor: url('/SAEMAH/image/next-btn.svg'), auto;} */

#product-detail .content:nth-child(1) #product-thumb {overflow: hidden; display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative;}
#product-detail .content:nth-child(1) #product-thumb .control-btn {position: absolute;  z-index: 3;}
/* #product-detail .content:nth-child(1) #product-thumb .prev {width:35px; height: 35px; top:50%; left:0%; transform: translate(-50%,-50%);} */
/* #product-detail .content:nth-child(1) #product-thumb .next {width:35px; height: 35px; top:50%; right:0%; transform: translate(-50%,-50%) rotate(180deg);} */
#product-detail .content:nth-child(1) #product-thumb .swiper-wrapper {width: 100%;   gap: 5px; /* 썸네일 간격 */ /* 슬라이드 간격 */}
#product-detail .content:nth-child(1) #product-thumb .swiper-slide {border:2px solid #ddd; display: flex; justify-content: center; align-items: center; cursor: pointer;  flex: 0 0 calc((100% - 15px) / 4); /* 1열에 4개의 썸네일 */ /* 1열에 4개 배치 */}
#product-detail .content:nth-child(1) #product-thumb .swiper-slide-thumb-active {opacity: 1; border:2px solid #F94B00;}


#product-detail .content:nth-child(2) {flex-basis: 50%; max-width: 50%; padding:3rem;}
#product-detail .content>li.disable {display: none;}
#product-detail .content:nth-child(2)>li {margin-bottom:2rem;}
#product-detail .content:nth-child(2)>li:first-child {border-bottom: 1px solid #ddd;}
#product-detail .content:nth-child(2)>li>h3 {font-size:3.4rem;}
#product-detail .content:nth-child(2)>li>h4 {font-size:1.6rem;}
#product-detail .content:nth-child(2)>li>h5 {font-size:1.4rem;}
#product-detail .content:nth-child(2)>li>p {font-size:1.4rem;}

#product-detail .content:nth-child(2)>li.button-wrap {width: 100%; display: flex; justify-content: space-between; align-items: center; gap:1rem;}
#product-detail .content:nth-child(2)>li.button-wrap>button {font-size:1.6rem; background: #000; flex-basis: 50%; max-width: 50%; padding:1.5rem 3rem; border-radius: 0.3rem; transition: all 0.4s;}
#product-detail .content:nth-child(2)>li.button-wrap>button.catalog {background-color:#F94B00; color:#fff; display: none;}
#product-detail .content:nth-child(2)>li.button-wrap>button.inquiry {background-color:#091B74; color:#fff;}
#product-detail .content:nth-child(2)>li.button-wrap>button:hover {opacity: 0.8;}

#detail-wrap {width: 100%;}
#detail-wrap>.detail-page-wrap {width: 100%; margin-bottom:10rem;}
#detail-wrap>.detail-page-wrap iframe {width: 100%;   aspect-ratio: 16 / 9; /* 16:9 비율 설정 */
  border: none; /* 불필요한 테두리 제거 */}

#detail-wrap>.detail-page-wrap table {width: 100%; overflow-x: auto; }
#detail-wrap>.detail-page-wrap table tr td {word-break: break-all; border:1px solid #ddd;}
/* #detail-wrap>.detail-page-wrap table tr th {min-width: 20rem;} */
#detail-wrap>.detail-page-wrap>.list-wrap {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; position: relative;}
#detail-wrap>.detail-page-wrap>.list-wrap::before {content:''; position: absolute; width: 100%; height: 1px; background-color: #000000; bottom:0; z-index: -1;}
#detail-wrap>.detail-page-wrap>.list-wrap>a {padding:1rem 3rem; border-radius: 1rem 1rem 0 0; font-size: 1.6rem; font-weight: bold;  text-wrap: nowrap; background: #fff; position: relative; border-bottom:1px solid #000; text-align: center;}
#detail-wrap>.detail-page-wrap>.list-wrap>a:hover {color:#F94B00; }
#detail-wrap>.detail-page-wrap>.list-wrap>a.active {border:1px solid #000000; border-bottom:1px solid #fff;}
#detail-wrap>.detail-page-wrap>.content {padding:2rem; font-size:16px; word-wrap: break-word;  max-width: 100%; overflow: hidden;}
/* #detail-wrap>.detail-page-wrap>.content table {overflow-x: auto;} */
#product-detail .content:nth-child(2)>li .tag-wrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap:1rem; margin-top:1rem; margin-bottom:1rem;}
#product-detail .content:nth-child(2)>li .tag-wrap>li {padding:0.6rem 1.2rem; background-color: #efefef; color:#9b9b9b; border:1px solid #efefef; font-weight: 400; font-size: 1.4rem;}

#detail-wrap .comparison {width: 100%; max-width: 100%; margin: 0 auto;}
#detail-wrap .comparison .flex-2ea {align-items: stretch;}
#detail-wrap .comparison .flex-2ea .content:first-child {background-color: #f8f8f8;}
#detail-wrap .comparison .flex-2ea .content {flex-basis: 50%; max-width: 50%; border-radius: 2rem; overflow: hidden;}
#detail-wrap .comparison .flex-2ea .content#uhmwpe_rope {border:6px solid #F94B00; position: relative;}
#detail-wrap .comparison .flex-2ea .content#uhmwpe_rope .text-wrap {background-color: #F94B00; color:#fff;}
#detail-wrap .comparison .flex-2ea .content#uhmwpe_rope .text-wrap .dot-ul>li::before {content:''; background-color: #fff;}
#detail-wrap .comparison .flex-2ea .content>.img-wrap {width: 100%; display: flex; justify-content: center; align-items: center;}
#detail-wrap .comparison .flex-2ea .content>.img-wrap>img {width: 100%;}
#detail-wrap .comparison .flex-2ea .content>.text-wrap {padding: 3rem;}
#detail-wrap .comparison .flex-2ea .content>.text-wrap>h3 {font-size:2.4rem;}



.category-wrap {width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap:1rem; margin-top:2rem;}
.category-wrap>a {padding:0.8rem 1.6rem; background-color: #eef1ff; color:#172A88; cursor: pointer; font-size:1.4rem; font-weight: bold;border-radius: 0.5rem;}
.category-wrap>a:hover {opacity: 0.8;}
.category-wrap>a.active {background-color: #172A88; /* 검은색 배경 */ color: #eef1ff; /* 흰색 글씨 */}

.radio-wrap#big-category .radio-label { padding:0.8rem 1.6rem; background-color: #eef1ff; color:#172A88; cursor: pointer;  display: inline-block; margin-right: 10px; /* 라벨 간 간격 */ cursor: pointer; font-size:1.4rem; font-weight: bold;border-radius: 0.5rem;}
.radio-wrap#big-category .radio-input:checked + .radio-label { background-color: #172A88; /* 검은색 배경 */ color: #eef1ff; /* 흰색 글씨 */}

.notice-wrap {width: 100%; border-top:4px solid #000; margin-bottom: 3rem; table-layout: fixed;}
.notice-wrap thead tr th {border-bottom:1px solid #000; font-size:1.6rem; font-weight: bold; padding: 2rem 1rem; text-align: center; width: 10%;}
.notice-wrap thead tr th:nth-child(2) {border-bottom:1px solid #000; font-size:1.6rem; font-weight: bold; padding: 2rem 1rem; text-align: center; width: 60%;}
.notice-wrap thead tr th:nth-child(3) {border-bottom:1px solid #000; font-size:1.6rem; font-weight: bold; padding: 2rem 1rem; text-align: center; width: 15%;}
.notice-wrap thead tr th:nth-child(4) {border-bottom:1px solid #000; font-size:1.6rem; font-weight: bold; padding: 2rem 1rem; text-align: center; width: 15%;}
.notice-wrap tbody tr td {border-bottom:1px solid #ddd; font-size:1.6rem; text-align: center;}
.notice-wrap tbody tr td:nth-child(2) {text-align: left; padding: 2rem 1rem;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; cursor: pointer;}
.notice-wrap tbody tr td:nth-child(2):hover {text-decoration: underline;}


.pagination-wrap {flex-basis: 100%; max-width: 100%; gap:20px; margin-bottom: 10rem;}
.pagination-wrap>li {font-size:1.4rem; text-transform: uppercase; display: flex; justify-content: center; align-items: center; }
.pagination-wrap>li.prev,.news-blog-wrap .pagination-wrap>li.next {cursor: pointer;}
.pagination-wrap>li.prev:hover, .pagination-wrap>li.next:hover {text-decoration: underline; text-decoration: underline;}
.pagination-wrap>li {width: 4rem; height: 4rem; color:#000000; background-color:transparent; font-weight: bold; border-radius: 50%; cursor: pointer;}
.pagination-wrap>li.active {width: 4rem; height: 4rem; color:#fff; background-color:#000000; font-weight: bold; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center;}




#cf-wrap {align-items: stretch; margin-bottom:0 !important;}
#cf-wrap h3 {font-size:2.4rem; margin-bottom:2rem; letter-spacing: 5px;}
#cf-wrap h2 {font-size:5rem; line-height: 1.2; margin-bottom:3rem;}
#cf-wrap p {font-size:1.6rem; color:rgba(0,0,0,0.5);}
#cf-wrap .content:last-child>img {vertical-align: middle;}
/* #cf-wrap .gray-bg{padding-top:7.5rem; padding-bottom:7.5rem;} */

.contact-here {width: 100%; height: 0 !important; padding-bottom:35%; position: relative; background-image:url(/SAEMAH/image/here-company.jpg); background-repeat: no-repeat; background-size:cover; background-attachment: fixed; }
.contact-here>.text {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#fff; width: 100%;}
.contact-here>.text>p {font-size:2rem; text-align: center;}
.contact-here>.text>h2.mt {font-size:8rem; text-transform: uppercase; font-weight: 900; text-align: center;}


/*****탑버튼*****/
.topbtn {position: fixed; right:0.8rem; bottom:0.8rem; display: none; z-index:99; width:4.5rem; height:4.5rem; background:#172A88; cursor:pointer; transition:all 0.3s; border-radius: 50%;}
.topbtn::before {content:""; display: block; background: url(/SAEMAH/image/topbtn-arr.svg) no-repeat center center; position: absolute; left: 50%; transform: translate(-50%,-50%); top:50%; width:50px; height:50px; transition:all 0.3s;}
.topbtn:hover::before {top:40%; transition:all 0.3s;}


.sstop {position: absolute; bottom:7%; transition:all 0.3s;  background:#111; border:1px solid #333;}



/*****메인탑버튼*****/
.top-btn > a {position: absolute; right:1%; top:9%;; width:45px; height:45px; background:#111; cursor:pointer; transition:all 0.3s; border:1px solid #333;}
.top-btn > a::before {content:""; display: block; background: url(/SAEMAH/image/topbtn-arr.svg) no-repeat center center; position: absolute; left: 50%; transform: translate(-50%,-50%); top:50%; width:50px; height:50px; transition:all 0.3s;}


/* 팝업 */
.popup-wraps {width:100%; height:100%; position: fixed; top:0; left:0; max-width:100%; display: flex; justify-content: center; align-items:center; background-color:rgba(0,0,0,0.6); z-index: 999; flex-wrap: wrap;}
.popup-wraps .content {width:100%; max-width:50rem; transition: all 0.4s; border:5px solid rgba(0,0,0,0.3);}
.popup-wraps .content .img-wraps {background-color: #fff;}

.popup-wraps .content .img-wraps img {width:100%; vertical-align: middle;}
.popup-wraps .content .text-wraps {display:flex; justify-content: space-between; align-items: center; color:#fff; font-weight: 400; background: #ED702C; margin-top:-5px; padding:1.2rem; }
.popup-wraps .content .text-wraps div {flex-basis: auto; max-width:auto; text-align: center; transition: all 0.4s; cursor: pointer; font-size:1.4rem; }
.popup-wraps .content .text-wraps div:hover {opacity: 0.8;}
.pop_none {display:none;}
.popup-wraps .content .text-wraps div:last-child {background-color: #000; padding: 0.5rem 1rem;}

.popup-wraps .content .text-wraps .today-close .icon {
  margin-right:0.3rem
}
.popup-wraps .content .text-wraps .today-close .icon > img {
  width:1.8rem; display: inline-block; vertical-align: middle;
}

.popup-wraps .content .text-wraps .closed-btns > img {
  width:1.6rem; vertical-align: middle;
}


/* 내부페이지 - 공통 */
.page-view .view-top {width:100%; border-bottom:1px solid #ddd; text-align: left; padding:3rem 1.6rem; border-top:1px solid #111;}
.page-view .view-top .title {font-size: 2.4rem; font-weight: 800;}
.page-view .view-top .date {font-size: 1.6rem; font-weight: 400; margin-top:0.5rem}

.page-view .view-cont {width:100%; padding:3rem 1.6rem;}

.page-view .view-file {width:100%; display: flex; justify-content: flex-start; align-items: flex-start; background: #fafafa; padding:1.5rem 3rem;}
.page-view .view-file .f-tit {flex-basis:10rem; max-width:10rem; font-size: 1.6rem; color:#555; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 
.page-view .view-file .f-list {flex-basis:calc(100% - 10rem); max-width:calc(100% - 10rem);}
.page-view .view-file .f-list > li {width:100%; position: relative;}
.page-view .view-file .f-list > li::before {content:""; display: block; width:2.5rem; height: 2.5rem; background: url(/SAEMAH/image/file-icon.svg) no-repeat 0 0; background-size:cover; position: absolute; left:0; top:0rem;}
.page-view .view-file .f-list > li + li {margin-top:0.5rem}
.page-view .view-file .f-list > li > a {display: block;}
.page-view .view-file .f-list > li > a .main_p {width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem; padding-left:3.5rem}
.page-view .view-file .f-list > li > a:hover .main_p {text-decoration: underline;}

.page-view .view-btn {width:100%; display: flex; justify-content: flex-start; align-items: center; border-top:1px solid #ddd; padding-top:3rem;}

.page-view .view-btn .v-btn {flex-basis:calc(50% - 3rem); max-width:calc(100% - 3rem); }
.page-view .view-btn .v-btn > a > p {font-size: 2rem; font-weight: 500; transition:all 0.5s; color:#555}
.page-view .view-btn .v-btn > a:hover > i {color:#1D59A8}
.page-view .view-btn .v-btn > a:hover > p {color:#1D59A8}

.page-view .view-btn .prev > a {display: flex; justify-content: flex-start; align-items: center;}
.page-view .view-btn .prev > a > i {color:#555; margin-right:1rem; transition:all 0.5s;}
.page-view .view-btn .next > a {display: flex; justify-content: flex-end; align-items: center;}
.page-view .view-btn .next > a > i {color:#555; margin-left:1rem; transition:all 0.5s;}

.page-view .list-btn {flex-basis:6rem; max-width: 6rem;}
.page-view .list-btn > a {display: block; width:100%; height: 6rem; background: #172A88; transition:all 0.5s; position: relative;}
.page-view .list-btn > a:hover {background: #111; transition:all 0.5s;}
.page-view .list-btn > a > i {color:#fff; font-size: 3rem; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

.page-view .view-cont .video-wrap {margin:3rem 0;}
.page-view .view-cont .video-wrap .video {position: relative; width:100%; height: auto; padding-top:56.25%}
.page-view .view-cont .video-wrap .video > iframe {width:100%; height: 100%; position: absolute; top:0; left:0; z-index: 1;}


.no-results{width:100%; text-align: center; background-color:#f9f9f9; margin-top:2rem; padding: 50px 0; margin-bottom:50px;}  
.no-results>h3 {font-size:2.4rem; font-weight:bold; width:100%; }
.no-results>p {font-size:1.6rem; opacity: 0.6;}
.no-results .return-btn { padding:10px; color:#fff; background-color: #00518C; width:100%; max-width: 200px; margin: 20px auto; cursor: pointer; font-size:1.8rem;}
.no-results .return-btn:hover {opacity: 0.7;}


.embed-youtube {position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.embed-youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


#loading {
  display: none;
  align-items: center;
  font-size: 2rem;
  position: fixed;
  top:50%; 
  left:50%; 
  transform: translate(-50%,-50%);
  z-index: 9999;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #767676;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  animation: spin 1s linear infinite;
  margin-right: 8px;

}

/* .none {
  display: none;
} */


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*섬머노트*/
.detail-page-wrap ul  {list-style:circle !important; padding-left:3rem;}
.detail-page-wrap ol  {list-style:decimal; padding-left:3rem;}


/*이미지 효과*/
.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}