@charset "UTF-8";

/* wrapper */
#wrapper:before{opacity:0; visibility:hidden; position:fixed; top:0; left:0; z-index:21; width:100%; height:100%; background-color:rgba(0,0,0,0.24); content:''; transition:0.25s ease-in-out;}
.gnb-show #wrapper:before{opacity:1; visibility:inherit;}
.wrap{max-width:1504px; margin:0 auto; padding:0 32px;}

/* accessibility */
.accessibility{overflow:hidden; position:absolute; top:0; left:0; z-index:3000; width:100%}
.accessibility a{display:block; overflow:hidden; z-index:3000; width:1px; height:1px; margin:0 -1px -1px 0; font-size:0; text-align:center; line-height:0}
#accessibility a:active,#accessibility a:hover,.accessibility a:focus{width:auto; height:30px; margin:0; padding:8px 0; background-color:#333; color:#fff; font-size:14px; line-height:16px}

/* header */
#header{overflow:hidden; position:fixed; top:0; left:0; right:0; z-index:30; background-color:var(--color-white); transition:0.25s ease-in-out;}
#header:before{opacity:0; position:absolute; top:78px; left:0; right:0; height:2px; background-color:var(--color-gray-f4); content:''; transition:0.25s ease-in-out;}
.gnb-show #header:before{opacity:1;}
#header .wrap{display:flex; max-width:100%; justify-content:space-between;}
#header .logo{margin-top:24px;}
#header .logo a{display:block; width:256px; height:32px; background:url(../images/layout/logo.svg) no-repeat center / cover; font-size:0; transition:background-image 0.25s ease-in-out;}
#header .m-gnb-btns,
#header .gnb-close{display:none;}

#header .gnb{display:flex; display:-webkit-flex; position:relative; z-index:2;}
#header .gnb > li{position:relative;width:192px; flex:0 0 auto;}
#header .gnb > li.active:before,
#header .gnb > li:hover:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-gray-fa);}
#header .gnb > li:last-child{padding-right:0;}
#header .gnb > li > a{display:block; position:relative; color:var(--color-gray-2); font-size:20px; font-weight:600; line-height:80px; transition:none;text-align:center;}
#header .gnb > li > a span{display:inline-block; position:relative; color:inherit; font-size:inherit; font-weight:inherit; line-height:inherit;width:100%;}
#header .gnb > li.active > a ,
#header .gnb > li:hover > a,
#header .gnb > li > a:focus {color:var(--color-primary);background:var(--color-white);}
#header .gnb > li > ul{overflow:hidden; position:relative; width:100%; max-height:0; text-align:left; transition:max-height 0.25s ease-in-out;height:100%;}
#header .gnb > li > ul > li{display:flex; position:relative; min-height:56px; align-items:center;justify-content: center;}
#header .gnb > li > ul > li:first-child{margin-top:16px;}
#header .gnb > li > ul > li:last-child{margin-bottom:32px;}
#header .gnb > li > ul > li > a{color:var(--color-gray-4); font-size:16px; line-height:150%;text-align:center;}
#header .gnb > li.active > ul > li.active > a,
#header .gnb > li > ul > li > a:hover,
#header .gnb > li > ul > li > a:focus{color:var(--color-primary); text-decoration:underline;}

#header .language{margin-top:28px;}
#header .btn-lang{display:flex; color:var(--color-gray-2); font-size:16px; font-weight:600; transition:color 0.25s ease-in-out; gap:4px;}
#header .btn-lang .icon{transition:background-image 0.25s ease-in-out;}

body:not(.gnb-show):not(.m-gnb-show) #header.transparent{background-color:transparent;}
body:not(.gnb-show):not(.m-gnb-show) #header.transparent:before{}
body:not(.gnb-show) #header.transparent .logo a{background-image:url(../images/layout/logo_white.svg);}
body:not(.gnb-show):not(.m-gnb-show) #header.transparent .gnb > li > a{color:var(--color-white);}
body:not(.gnb-show):not(.m-gnb-show) #header.transparent .btn-lang{color:#fff;}
body:not(.gnb-show):not(.m-gnb-show) #header.transparent .btn-lang .icon{background-image:url(../images/common/icon_language_white.svg);}

#container{position:relative; z-index:10;}

#footer{position:relative; z-index:20; padding:48px 0; background-color:var(--color-gray-f4);}
#footer .wrap{position:relative;}
#footer .footer-logo{padding:8px 0;}
#footer .footer-info{margin-top:48px;}
#footer .footer-info address{color:var(--color-gray-4); font-size:16px; font-weight:500; word-break:keep-all;}
#footer .footer-info ul{display:flex; margin-top:16px;}
#footer .footer-info ul li{position:relative; color:var(--color-gray-4); font-size:16px; font-weight:500;}
#footer .footer-info ul li + li{padding-left:34px;}
#footer .footer-info ul li + li:before{position:absolute; top:0; left:16px; bottom:0; width:2px; height:16px; margin:auto 0; background-color:var(--color-gray-d); content:'';}
#footer .custom-select{position:absolute; top:0; right:32px;}
#footer .custom-select .toggle-btn{min-width:240px; color:var(--color-gray-2);}
#footer .custom-select:not(.active) .toggle-btn{border-color:transparent;}
#footer .top-btn{display:none;}
#footer .footer-copyright{position:absolute; right:32px; bottom:0; color:var(--color-gray-4); font-size:16px; font-weight:500;}

.sub{padding-top:80px;}
.sub > .wrap{max-width:100%; padding:0;}

.sub-head{display:flex; position:relative; height:480px; background:url(../images/sub/img_sub_bg_04.jpg) no-repeat center / cover; align-items:center;justify-content:center;}
.sub-head.sub1{background-image:url(../images/sub/img_sub_bg_01.jpg);}
.sub-head.sub2{background-image:url(../images/sub/img_sub_bg_02.jpg);}
.sub-head.sub3{background-image:url(../images/sub/img_sub_bg_03.jpg);}
.sub-head.sub4{background-image:url(../images/sub/img_sub_bg_04.jpg);}
.sub-head.sub5{background-image:url(../images/sub/img_sub_bg_05.jpg);}
.sub-head .sub-title{position:relative; color:var(--color-gray-2); font-size:72px; font-weight:700;}

.contents{max-width:1504px; margin:0 auto; padding:64px 32px 128px;}

.page-head{display:flex; margin-bottom:64px; justify-content:space-between;align-items:center;}
.page-head .page-title{color:var(--color-gray-2); font-size:48px; font-weight:700;}

.breadcrumb ol{display:flex; align-items:center;}
.breadcrumb ol li{display:flex; color:var(--color-gray-a); font-size:16px; font-weight:500; align-items:center;}
.breadcrumb ol li + li:before{display:inline-block; width:24px; height:24px; margin:0 16px; background:url(../images/sub/icon_breadcrumb_arrow.svg) no-repeat center / cover; content:'';}
.breadcrumb ol li:last-child{color:var(--color-gray-2); font-weight:600;}

@media (min-width:1681px){
    #header .wrap{padding-right:120px; padding-left:120px;}
}
@media (max-width:1503px){
    #header .gnb > li{width:160px;}
    #header .gnb > li > a{font-size:20px;}
    #header .gnb > li > ul > li{min-height:48px;}
}
@media (max-width:1279px){
    #header .logo{margin-top:28px;}
    #header .logo a{width:192px; height:24px;}
    #header .gnb{padding-left:20px;}
    #header .gnb > li{width:134px;}
    #header .gnb > li > a{font-size:18px;}
    #header .gnb > li > ul > li{min-height:44px;}
    #header .language{margin-top:29px;}
    #header .language a{font-size:16px;}
    #footer .footer-copyright{position:relative; right:auto; bottom:auto; margin-top:16px;}
}
@media (min-width:1024px){
    #header .gnb > li > a span:before{position:absolute; right:0; bottom:0; width:0; height:2px; margin:0 auto; background-color:var(--color-primary); content:''; transition:width 0.25s ease-in-out;}
    #header .gnb > li.active > a span:before,
    #header .gnb > li:hover > a span:before{left:0; right:auto; width:100%;}
}
@media (max-width:1023px){
    .wrap{padding:0 16px;}
    #header{height:64px;}
    #header .wrap{height:100%; align-items:center;}
    .m-gnb-show #header .wrap:before{position:absolute; top:0; left:0; right:0; z-index:3; height:62px; border-bottom:2px solid var(--color-gray-f4); background-color:var(--color-white); content:'';}
    #header .logo{margin-top:0;}
    #header .gnb{display:none; position:fixed; top:64px; right:0; bottom:0; width:100%; padding:0; background-color:var(--color-white); flex-direction:column;overflow-x:hidden;overflow-y:auto;}
    #header .gnb:after{display:block; margin-top:auto; padding:32px 16px; content:'ⓒ SAIHA Information System Corp. All rights reserved.'; color:#888; font-size:12px; font-weight:500;}
    .m-gnb-show{overflow:hidden;}
    .m-gnb-show #header .gnb{display:flex;}
    #header .gnb li{width:100%;}
    #header .gnb > li > a{display:flex; padding:0 16px; font-size:24px; align-items:center; justify-content:space-between;}
    #header .gnb > li > a span{text-align:left;justify-content: flex-start;}
    #header .gnb > li > a:after{width:32px; height:32px; background:url(../images/common/icon_gnb_arrow.png) no-repeat center / 24px; content:'';}
   /*  #header .gnb > li > a:hover:after{background-image:url(../images/common/icon_gnb_arrow_primary.svg);} */
    #header .gnb > li.active > a:after{background-image:url(../images/common/icon_gnb_arrow_primary.svg); /* transform:rotate(180deg); */}
   /* #header .gnb > li > ul{background-color:var(--color-gray-fa);} */
    #header .gnb > li.active > ul{max-height:inherit;}
    #header .gnb > li > ul > li:first-child{margin-top:0;}
    #header .gnb > li > ul > li:last-child{margin-bottom:0;}
    #header .gnb > li > ul > li > a{display:block; width:100%; padding:12px 32px; color:var(--color-gray-2); font-weight:500;text-align:left;}
    #header .m-gnb-btns{display:flex;gap:16px;align-items: center;}
    #header .m-gnb-btns .gnb-open{ width:24px; height:24px; background:url(../images/common/icon_menu.svg) no-repeat center / cover; font-size:0;}
    body:not(.gnb-show) #header.transparent .m-gnb-btns .gnb-open{background-image:url(../images/common/icon_menu_white.svg);}
    

    #header .gnb-close{display:none; position:absolute; top:16px; right:16px; z-index:4; width:32px; height:32px; background:url(../images/common/icon_menu_close.svg) no-repeat center / 24px; font-size:0;}
    .m-gnb-show #header .gnb-close{display:block;}

    #header .language{display:none; position:absolute; top:20px; left:16px; z-index:4; margin-top:0;}
    .m-gnb-show #header .language{display:block;}

    .sub{padding-top:64px;}

    .sub-head{height:160px;}
    .sub-head.sub2{background-position:center right 40%;}
    .sub-head.sub4{background-position:center right 30%;}
    .sub-head .sub-title{font-size:32px;}

    .contents{padding:32px 16px 64px;}

    .page-head{margin-bottom:32px; flex-direction:column;align-items:start;gap:24px;}
    .page-head .page-title{font-size:24px; order:2;}

    .breadcrumb{order:1;}
    .breadcrumb ol li{font-size:14px;}
    .breadcrumb ol li + li:before{width:20px; height:20px; margin:0 8px;}
    .breadcrumb ol li.home .icon{width:20px; height:20px;}
}

@media (max-width:767px){
    #footer{padding:40px 0;}
    #footer .footer-logo{height:24px; padding:0;}
    #footer .footer-info{margin-top:32px;}
    #footer .footer-info address{font-size:14px;}
    #footer .footer-info ul{margin-top:8px; flex-wrap:wrap;gap:8px 0;}
    #footer .footer-info ul li{font-size:14px;}
    #footer .footer-info ul li + li:before{height:14px;}
    #footer .footer-info ul li:nth-child(3){display:block; padding-left:0;}
    #footer .footer-info ul li:nth-child(3):before{display:none;}
    #footer .custom-select{position:relative; top:auto; right:auto; width:100%; margin-top:32px;}
    #footer .top-btn{display:flex; width:64px; height:64px; margin:16px auto 0; border-radius:50%; background-color:var(--color-white); color:var(--color-gray-a); font-size:12px; font-weight:500; transition:opacity 0.3s ease-in-out; align-items:center;justify-content:center;flex-direction:column;}
    #footer .footer-copyright{font-size:14px;}
}
@media (max-width:380px){
	#header .m-gnb-btns{gap:12px}
}

/* main */
.main section{position:relative;}
.main section .main-title{color:var(--color-gray-2); font-size:48px; font-weight:700; word-break:keep-all;}
.main section .main-text{display:flex; align-items:center;justify-content:space-between;}
.main section .main-text p{color:var(--color-gray-2); font-size:24px; font-weight:600; word-break:keep-all;}

.main .visual{height:100vh;}
.main .visual .swiper-container{height:100%;}
.main .visual .swiper-slide{display:flex; height:100%; padding-top:100px; background-repeat:no-repeat; background-size:cover; text-align:center; flex-direction:column;justify-content:center;gap:16px;}
.main .visual .swiper-slide .img{overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%;}
.main .visual .swiper-slide .img img{width:100%; height:100%; transition:transform 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); object-fit:cover;}
.main .visual .swiper-slide .text{overflow:hidden; position:relative; z-index:1;}
.main .visual .swiper-slide .text p{opacity:0; color:var(--color-white); font-size:80px; font-weight:600; transform:translateY(120px); transition:1.25s ease-in-out;}
.main .visual .swiper-slide.swiper-slide-active .text p{opacity:1; transform:none; transition-delay:0s;}
.main .visual .swiper-slide .text + .text p{font-size:32px; font-weight:500; transition-delay:0.15s;}
.main .visual .visual-scroll{position:absolute; left:50%; bottom:0; z-index:1; transform:translateX(-50%);}
.main .visual .visual-scroll:before,
.main .visual .visual-scroll:after{display:block; position:absolute; left:50%; width:2px; height:40px; content:''; transform:translateX(-50%);}
.main .visual .visual-scroll:before{bottom:0; background-color:var(--color-white); animation:scroll2 1.5s ease 0s infinite;}
.main .visual .visual-scroll:after{top:100%; background:#174795; animation:scroll3 1.5s ease 0s infinite;}
.main .visual .visual-scroll span{position:absolute; left:50%; bottom:56px; color:var(--color-white); font-size:16px; font-weight:500; white-space:nowrap; animation:scroll 1.5s ease 0s infinite; transform:translateX(-50%);}
@keyframes scroll{
    0%{transform:translate(-50%,0);}
    70%{transform:translate(-50%,8px);}
    100%{transform:translate(-50%,0);}
}
@keyframes scroll2{
    0%{height:40px;}
    70%{height:32px;}
    100%{height:40px;}
}
@keyframes scroll3{
    0%{height:40px;}
    70%{height:48px;}
    100%{height:40px;}
}

.main .service{overflow:hidden; padding:120px 0;}
.main .service .service-list{display:flex; margin-top:40px; flex-wrap:wrap;gap:12px;}
.main .service .service-list li{width:calc(calc(100% - 24px) / 3);}
.main .service .service-list li a{display: block;overflow:hidden;position:relative;height:260px;border-radius:8px;background-color:var(--color-primary);}
.main .service .service-list li a img{width:100%; height:100%; transition:opacity 0.35s ease-in-out; object-fit:cover;}
.main .service .service-list li a .text{display:flex;position:absolute;top:calc(50% - 18px);left:0;bottom:0;width:100%;padding:0 24px;transition: top 0.25s ease-in-out;align-items:center;flex-direction:column;gap:16px;justify-content: center;}
.main .service .service-list li a .text div{color:var(--color-white); font-size:24px; font-weight:600;}
.main .service .service-list li a .text p{opacity:0; visibility:hidden; min-height:48px; color:var(--color-white); font-size:16px; font-weight:500; transform:translateY(-20px); transition:0.25s ease-in-out;}
.main .service .service-list li a .text span{display:flex; opacity:0; visibility:hidden; width:40px; height:40px; border-radius:50%; background-color:var(--color-white); transform:translateY(-20px); transition:0.25s ease-in-out; align-items:center;justify-content:center;}
.main .service .service-list li a:hover img{opacity:0.05;}
.main .service .service-list li a:hover .text{top: 0;}
.main .service .service-list li a:hover .text p{opacity:1; visibility:inherit; transform:none;}
.main .service .service-list li a:hover .text span{opacity:1; visibility:inherit; transform:none;}

.main .partner{padding:120px 0; background-color:var(--color-gray-f4);}
.main .partner .partner-list{display:flex; margin-top:48px; padding:36px 0; border-radius:8px; background-color:var(--color-white);}
.main .partner .partner-list li{display:flex; width:calc(100% / 3); align-items:center;flex-direction:column;gap:16px;}
.main .partner .partner-list li + li{border-left:2px solid var(--color-gray-f4);}
.main .partner .partner-list li p{color:var(--color-gray-4); font-size:24px; font-weight:600;}
.main .partner .partner-list li div{color:var(--color-gray-2); font-size:20px; font-weight:600; line-height:100%;text-align:center;}
.main .partner .partner-list li:first-child div{font-size:24px;}
.main .partner .partner-list li div span{display:inline-block; font-size:56px; font-weight:inherit; line-height:100%; vertical-align:sub;color:var(--color-gray-2);}
.main .partner .swiper-container{margin-top:48px;}
.main .partner .swiper-wrapper{display:flex;}
.main .partner .swiper-slide{display:flex; height:180px; padding:24px 20px; border-radius:8px; background-color:var(--color-white); flex-direction:column;gap:16px;align-items:center;justify-content:center;}
.main .partner .swiper-slide img{height:64px;}
.main .partner .swiper-slide p{color:var(--color-gray-4); font-size:16px; font-weight:500;}
.main .partner .partner-text{margin-top:16px; color:var(--color-gray-8); font-size:16px; font-weight:500;}
.main .partner .partner-img{opacity:0; width:100%; margin-top:48px; will-change:opacity;}

.main .news{padding:120px 0;}
.main .news .swiper{position:relative;}
.main .news .swiper-container{margin-top:48px;}
.main .news .swiper-slide a{display:block;}
.main .news .swiper-slide a span{display:block;}
.main .news .swiper-slide a .img{overflow:hidden; border-radius:8px;}
.main .news .swiper-slide a .img img{width:100%; transition:transform 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
.main .news .swiper-slide a .title{overflow:hidden; margin-top:20px; color:var(--color-gray-4); font-size:20px; font-weight:600; text-overflow:ellipsis; white-space:nowrap;}
.main .news .swiper-slide a .date{margin-top:8px; color:var(--color-gray-8); font-size:16px; font-weight:500;}
.main .news .swiper-button-prev,
.main .news .swiper-button-next{display:none;}
.main .news .swiper-slide a:hover .img img{transform:scale(1.125);}

.main .sustainability{overflow:hidden;}
.main .sustainability .sustainability-bg{width:1440px; height:560px; margin:0 auto; border-radius:30px; background:url(../images/main/img_sustainability.jpg) no-repeat center / cover; background-attachment:fixed; content:'';}
.main .sustainability .wrap{display:flex; position:absolute; top:0; left:0; right:0; bottom:0; flex-direction:column;gap:32px;justify-content:center;}
.main .sustainability .main-title{color:var(--color-white);}
.main .sustainability .main-text{margin-top:0 !important; flex-direction:column;align-items:start;gap:32px;}
.main .sustainability .main-text p{color:var(--color-white); font-size:48px; font-weight:700; word-break:keep-all;}
@media (max-width:1503px){
    .main .visual .swiper-slide .text p{font-size:54px;}
    .main .visual .swiper-slide .text + .text p{font-size:26px;}
    .main .service .service-list li a:hover .text{}
    .main .service .service-list li a .text p{}
    .main .partner .partner-list li p{font-size:22px;}
}
@media (min-width:1024px){
    .main .visual:hover .swiper-slide .img img{transform:scale(1.125);}
}
@media (max-width:1023px){
    .main section .main-title{font-size:32px;}
    .main section .main-text{margin-top:4px; flex-direction:column;align-items:start;}
    .main section .main-text p{font-size:14px;}
    .main section .main-text .button-box{margin-top:24px;}

    .main .visual{height:480px;}
    .main .visual .swiper-slide{padding-top:64px; gap:12px;}
    .main .visual .swiper-slide .text p{font-size:32px;}
    .main .visual .swiper-slide .text + .text p{font-size:16px;}
    .main .visual .visual-scroll:before,
    .main .visual .visual-scroll:after{width:1.5px;}
    .main .visual .visual-scroll span{bottom:48px; font-size:12px;}

    .main .service{padding:64px 0;}
    .main .service .main-title{font-size:40px;}
    .main .service .service-list{margin-top:32px; gap:8px;}
    .main .service .service-list li{width:calc(50% - 6px);}
    .main .service .service-list li a{width:100%;height:180px;}
    .main .service .service-list li a .text{top: calc(50%);gap:12px;}    
    .main .service .service-list li a .text div{font-size:20px;}
    .main .service .service-list li a .text p{font-size:14px;}
    .main .service .service-list li a .text span{width:32px; height:32px;}
    .main .service .service-list li a .text span .icon{width:20px; height:20px;}

    .main .partner{padding:64px 0;}
    .main .partner .partner-list{margin-top:32px; padding:0 32px; flex-direction:column;}
    .main .partner .partner-list li{width:100%; padding:32px 0;}
    .main .partner .partner-list li + li{border-top:2px solid var(--color-gray-f4); border-left:0;}
    .main .partner .partner-list li p{font-size:20px;}
    .main .partner .partner-list li div{font-size:16px !important;}
    .main .partner .partner-list li div span{font-size:48px;}
    .main .partner .swiper-container{margin-top:32px;}
    .main .partner .swiper-slide{height:100px; padding:15px 8px; gap:12px;}
    .main .partner .swiper-slide img{height:40px;}
    .main .partner .swiper-slide p{font-size:12px;}
    .main .partner .partner-text{margin-top:12px; font-size:14px;}
    .main .partner .partner-img{margin-top:32px;}

    .main .news{padding:64px 0;}
    .main .news .swiper-container{margin-top:32px;}
    .main .news .swiper-slide a .title{margin-top:12px; font-size:16px;}
    .main .news .swiper-slide a .date{margin-top:4px; font-size:14px;}

    .main .sustainability .sustainability-bg{width:calc(100vw - 32px); height:320px; border-radius:8px;}
    .main .sustainability .wrap{gap:20px;}
    .main .sustainability .main-title{font-size:24px;}
    .main .sustainability .main-text{gap:20px;}
    .main .sustainability .main-text p{font-size:24px;}
    .main .sustainability .main-text .button-box{margin-top:0;}
}

@media (max-width:767px){
    .main .service .service-list li{width:100%;}
    .main .service .service-list li{opacity:0; transform:translateX(20px); transition:opacity 1s ease, transform 1s ease;}
    .main .service .service-list li.is-visible{opacity:1; transform:translateX(0);}

    .main .news .swiper-button-prev,
    .main .news .swiper-button-next{display:block; top:0; bottom:61px; width:32px; height:32px; margin:auto 0; border-radius:50%; background-color:rgba(255,255,255,0.6);}
    .main .news .swiper-button-prev:after,
    .main .news .swiper-button-next:after{display:none;}
    .main .news .swiper-button-prev .icon,
    .main .news .swiper-button-next .icon{margin:4px 0 0 4px;}
    .main .news .swiper-button-prev{left:10px;}
    .main .news .swiper-button-next{right:10px;}

    .main .sustainability{background-position:right 60% center;}
}