@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');

@font-face {
    font-family: "PyeongChangPeace-Bold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }
/* 부트스트랩 무효화*/
html{line-height: 1;}
body{line-height: 1;}
a{color:inherit; }
a:hover{color:inherit;text-decoration: none;}
button{background: none; border: none;}
dl, ol, ul, p {margin-bottom: 0;}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #f8dc00;
    border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
    background: #18449b;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

/* common --------------------------------------------------------------------------------------------*/

body{
    background: #F6F6F6 !important;
    transition: all 0.4s ease;
}
button:focus{border:0; outline:0;}
.acce{position: absolute; z-index: 9;}
.circleStr {left: 85%; top: 20%; width: 20px; height: 20px; border-radius: 50%; 
    border: 2px solid #c2c2c2; animation: circleStr 2s ease alternate infinite;
}
@keyframes circleStr {
    from {transform: scale(1);}
    to {transform: scale(1.25);}
}
.plus { left: 10%; top:70%; animation: plus 13s ease alternate infinite; 
    transform-origin: 50%; font-size: 50px; color: #6b6868;
}
@keyframes plus{
    from {transform: scale(1) rotate(0);}
    to {transform: scale(1.5) rotate(720deg);}
}
.under-line{ left: 0%; top: 5%; fill: none; stroke: #F1A280; 
    stroke-width: 5px; stroke-linecap: butt; }
.under-line svg{width:150px; height: 30px;}
.under-line polyline {
    stroke-dasharray: 215px;
    animation: under-line 6s linear  infinite;
}
@keyframes under-line {
    0% {stroke-dashoffset: 215px;}
    50% {stroke-dashoffset: 0;}
    100% {stroke-dashoffset: 0;}
}

/* sect1 ----------------------------------------------------------------------------------------------- */

#sect1{position:relative; height: 97vh; 

    background: #fff;  
    overflow: hidden;
}
#sect1 .under-line {left: 91%; top: 54%; stroke: #D9D9D9;}
#sect1 .under-line svg {width: 102px;}
.bannerTxt h2{font-size: 6rem; font-weight: 800; 
    padding-bottom: 20px;
    font-family: "PyeongChangPeace-Bold";}

.bannerTxt p{font-size: 1rem; 
    
    
    font-weight: 400; margin-left: 1%; margin-top: .8%; line-height: 1.4;}

/* sect1 banner, sect4 bg fixed */
.fixed{position:fixed; width: 100%; height: 100%; top: 0; left: 0;}
.fixedElem{position:relative;}
.abstractGeo{top:4%; background: #fff; overflow: hidden;}
.abstractGeo .bannerImgL{top:10%;}

.image-parallax {position: absolute; width: 16%; left:41%; top:100%;}
.image-parallax img {position: absolute; width: 100%}


  

/* 모바일 */
@media screen and (max-width:767px){
#sect1{height: 44vh; min-height: 412px; border-radius: 0 0 0 0;}
.plus{font-size: 22px;}

/* 모바일 nav */
#nav_gnb { background:#000; width: 60%; height: 100vh; position: fixed !important; 
    right: 0; top: 0; z-index: 998; transition: 0.5s; transform: translateX(100%);}
#nav_gnb.on{ transform: translateX(0rem);  transition-timing-function: cubic-bezier(0.5, 1, 1, 1);}
#nav_gnb ul{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 
    width: 100%; padding: 8%;}
#nav_gnb ul li{margin-bottom: 20%;}
#nav_gnb ul li a{position: relative; font-size: 1.4rem; font-weight: 600; color: white;  margin: 5% 0; }
#nav_gnb ul li .iBox{display: inline-block;}
#nav_gnb ul li:nth-child(6) a,
#nav_gnb ul li:nth-child(7) a{display: flex; align-items: center; width: 100%;}
#nav_gnb ul li a i{margin-right: 4%;}
#nav_gnb ul li:last-child a i.fa-wordpress{font-size: 1.2rem;}

#nav_gnb ul li a::after{content: ''; position: absolute; left: 0%; bottom: -30%;
    width: 0%; height: 4px; background:#eee;  transition: 0.3s linear; margin: auto;}
#nav_gnb ul li:hover a::after{width: 100%;}
.navBar {position: fixed !important; right: 24px; top: 20px; cursor: pointer; z-index: 999;}
.navBar span{display: block; width: 30px;height: 4px; background:#000; margin: 4px 0; transition: .5s linear;}
.navBar.on span:nth-child(1){transform: rotate(-45deg) translate(-6px, 6px); background: white;}
.navBar.on span:nth-child(2){opacity: 0;}
.navBar.on span:nth-child(3){transform: rotate(45deg) translate(-5px, -5px); background: white;}

/* 모바일 배너 */
.header-pc, .banner-pc{display: none;}
.banner-m .bannerImgL{top:0%;}
.banner-m{max-height: 420px;}
.banner-m >*{position:absolute;}
.bannerTxtM{left: 13%; top:58%; transform: translateY(-50%); padding-top: 14%;
}
.banner-m h2 {width: 76%; font-size: 3.2rem;  font-weight: 800; font-family: "PyeongChangPeace-Bold";
    padding-bottom: 5%; letter-spacing: -0.2rem; line-height: 60px;}
.banner-m p {font-size: 0.8rem; line-height: 1.4;}
.abstractGeoM{width: 100%; height: 100%; left:0; top:15%;}
.abstractGeoM >*{position:absolute;}
.abstractGeoM img{width: 86%;}
.bannerImgLM {left: -44%;top: -35%;}
.bannerImgRM{right:-90%; bottom:-11%;}

}
/* 모바일 end*/

/* 테블렛  */
@media screen and (min-width:768px){
#sect1{background: none;}
.header-m, .banner-m{display: none;}
.header-pc, .banner-pc{display: block;}


#sect1{height: 80vh;}

/* 해더-pc*/
.fixedOn{
    position: fixed;
    background-color: #fff/50%;
    backdrop-filter: blur(20px);
    top: 0;
    border: none;
}
.header-pc{
    width: 100%; height: 100px;  z-index: 999; 
    /* border-bottom: 2px solid #E1E1E1; */
    box-shadow: 1px 3px 4px rgba(0,0,0,.15);
    transition: all .4s;
    }
.header-pc .inner{width: 77%; height: 100%; display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    margin: 0 auto;}
    .header-pc .inner h1{
    display: flex; 
    justify-content: center; 
    align-items: center; 
     font-size: 1.4rem;
      font-weight: 600; 
      letter-spacing: -0.1rem;}
.header-pc .inner h1 img{margin:4px 6px 0 0;}
.header-pc .inner nav {text-align: center;}
 .header-pc .inner nav ul{display: flex; align-items: center;}
.header-pc .inner nav ul li{width: 100%; font-size: 1.2rem; font-weight: 600;}
    .header-pc .inner nav ul li:last-child a{
        display: inline-block;
        padding: 1em;
        background: none;
        border: 2px solid #fff;
        color: #131313;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
        border-radius: 10px;
        background-color: #f8dc00;
        font-weight: bolder;
        font-size: 18px;
}
.header-pc .inner nav ul li:last-child a:before{
    content: "";
    position: absolute;
    width: 120px;
    height: 120%;
    background-color: #ff6700;
    top: 50%;
    transform: skewX(30deg) translate(-150%, -50%);
    transition: all 0.5s;
}
.header-pc .inner nav ul li:last-child a:hover{
    background-color: #18449b;
    color: #fff;
    box-shadow: 0 2px 0 2px #0d3b66;
}
.header-pc .inner nav ul li:last-child a:hover::before{
    transform: skewX(30deg) translate(150%, -50%);
    transition-delay: 0.1s;
}
.header-pc .inner nav ul li:last-child a:active{
    transform: scale(0.9);
}
.gnb {
    gap: 50px;
}
.gnb li .Gmnav_list {
display: block;
width: 100%;
height: 24px;
padding: 3px;
color: #101010;
overflow: hidden;
transition: 0.35s;

}
.gnb li .Gmnav_list b {
display: block;
}

.gnb li .Gmnav_list span {
width: 100%;
height: 100%;
position: relative;
top: -22px;
transition: 0.3s;
}

.gnb li:hover .Gmnav_list span {top: 1.4px;color: #18449b;}
.gnb li .Gmnav_list:hover .gnb li .Gmnav_list::after b {display: block;}

 /* 배너-pc */
.bannerTxt {position:absolute; left:28%; top:35%;}
.bannerTxt {left: 14%; top: 47%;}
.image-parallax{top:103%;}
.image-parallax img{width: 93%;}
.abstractGeo .bannerImgL{left:-23%;}
.bannerImgL img{width: 40%;}
.abstractGeo .bannerImgR{right:-70%; bottom: -40%;}
}
/* 배너-pc end*/

/* 랩탑 */
@media screen and (min-width:1024px){
.header-m, .banner-m{display: none;}
.header-pc, .banner-pc{display: block;}
#sect1{height: 78vh;}
.header-pc .inner{padding:0;}
.header-pc .inner h1{width: 20%; min-width: 150px;margin-right: auto;}
.header-pc .inner nav {width: 60%; margin: 0 auto;}   
.header-pc .inner ul.utill{width: 13%; display: block; margin-left: auto;}
.header-pc .inner ul.utill li{display: inline-block; margin-right: 20px;}
.abstractGeo .bannerImgL{left:-9%;}
.abstractGeo .bannerImgR{bottom: -17%;}
.bannerTxt {left: 27%; top: 37%;}
.bannerTxt h2{width: 116%;}
.bannerTxt {margin: 11% 0 0 -2%;}
}
/* 랩탑 end*/

/* 데스크탑 */
@media screen and (min-width:1440px){
#sect1{height: 100vh; min-height: 670px;}
.abstractGeo img{width: 34%;}
.image-parallax {position: absolute; top:100%;}
.image-parallax img {display: none;}
.header-pc .inner h1{width: 25%;}
.header-pc .inner nav {width: 50%;}   
.header-pc .inner ul.utill{display: block;}
.header-pc .inner ul.utill li{display: inline-block; margin-right: 20px;}
.abstractGeo .bannerImgR{ bottom: -18%;}
.bannerTxt{margin: 0;}
.bannerTxt h2{font-size: 7rem;}
}
/* 데스크탑 end*/

/* 데스크탑 */
@media screen and (min-width:1920px){.image-parallax img {display: block; width: 100%;}}
/* 데스크탑 end*/

/* 빅 4K 데크탑*/
@media screen and (min-width:2560px){
.header-pc h1{font-size: 1.6rem;}
.header-pc nav ul li{font-size: 1.4rem;}
.bannerTxt h2{font-size: 10rem;}
.bannerTxt p{font-size: 2rem;}
}
/* 빅 4K 데크탑 end*/