/**---------  (수정)   ----------**/ 

* {
    box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



body {

     /**--------- 
     margin:0 auto;  /*****전체를 가운데로 정렬하는 태그임
     width: 1130px;  /*****네이버가 2020년 4월 28일 부터 시행하는 사이즈임. 1130  
     }   ****/

  margin: 0;
  color: ; 
  background-color: #fff;
}

.line {
            height: 1px;
            transform: scaleY(0.5);
            width: 90%;
            background-color: rgba(223, 216, 207, 0.5);
            text-align:  center;
            margin: 0em 0em 0em 0em;
        }
        
.NanumGothic22{
   font-family: "Nanum Gothic";
   font-size: 22px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic21{
   font-family: "Nanum Gothic";
   font-size: 21px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic20{
   font-family: "Nanum Gothic";
   font-size: 20px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic19{
   font-family: "Nanum Gothic";
   font-size: 19px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic18{
   font-family: "Nanum Gothic";
   font-size: 18px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
}
.NanumGothic17{
   font-family: "Nanum Gothic";
   font-size: 17px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic16{
   font-family: "Nanum Gothic";
   font-size: 16px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic16W{
   font-family: "Nanum Gothic";
   font-size: 16px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic15{
   font-family: "Nanum Gothic";
   font-size: 15px;
   font-weight : 300;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic15W{
   font-family: "Nanum Gothic";
   font-size: 15px;
   font-weight : 300;
   color: #fff;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic14{
   font-family: "Nanum Gothic";
   font-size: 14px;
   font-weight : 400;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic13{
   font-family: "Nanum Gothic";
   font-size: 13px;
   font-weight : 400;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;

}

.NanumGothic13W{
   font-family: "Nanum Gothic";
   font-size: 13px;
   font-weight : 400;
   color: #fff;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic12{
   font-family: "Nanum Gothic";
   font-size: 12px;
   font-weight : 400;
   color: #000;
   line-height: 0.75em;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic12G{
   font-family: "Nanum Gothic";
   font-size: 12px;
   font-weight : 400;
   color: #a19d9d;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic12W{
   font-family: "Nanum Gothic";
   font-size: 12px;
   font-weight : 400;
   color: #fff;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic11{
   font-family: "Nanum Gothic";
   font-size: 11px;
   font-weight : 400;
   color: #000;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic11G{
   font-family: "Nanum Gothic";
   font-size: 11px;
   font-weight : 400;
   color: #aca7a7;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic10{
   font-family: "Nanum Gothic";
   font-size: 10px;
   font-weight : 400;
   color: #000;
   line-height: 1em;
   letter-spacing: 1px;
   word-spacing :-2px;
}
.NanumGothic10G{
   font-family: "Nanum Gothic";
   font-size: 10px;
   font-weight : 400;
   color: #757272;
   line-height:1px;
   letter-spacing: 1px;
   word-spacing :-2px;
}

.NanumBrush27{
   font-family: "Nanum Brush Script";
   font-size: 27px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush26{
   font-family: "Nanum Brush Script";
   font-size: 26px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush25{
   font-family: "Nanum Brush Script";
   font-size: 25px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush24{
   font-family: "Nanum Brush Script";
   font-size: 24px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush23{
   font-family: "Nanum Brush Script";
   font-size: 23px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush22{
   font-family: "Nanum Brush Script";
   font-size: 22px;
   font-weight : 300;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 4px 4px 4px rgba(100, 100, 100, 0.6);
}
.NanumBrush21{
   font-family: "Nanum Brush Script";
   font-size: 21px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush20{
   font-family: "Nanum Brush Script";
   font-size: 20px;
   font-weight : 300;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 4px 4px 4px rgba(100, 100, 100, 0.6);
}

.NanumBrush19{
   font-family: "Nanum Brush Script";
   font-size: 19px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush18{
   font-family: "Nanum Brush Script";
   font-size: 18px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush17{
   font-family: "Nanum Brush Script";
   font-size: 17px;
   font-weight : 400;
   color: #4d0303;
   font-weight:  100;
   line-height:30px;
   letter-spacing: 4px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(100, 100, 100, 0.0);
}
.NanumBrush16W{
   font-family: "Nanum Brush Script";
   font-size: 16px;
   font-weight : 300;
   color: #fff;
   line-height:10px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush15{
   font-family: "Nanum Brush Script";
   font-size: 15px;
   font-weight : 300;
   color: #000;
   line-height:2px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush15D{
   font-family: "Nanum Brush Script";
   font-size: 15px;
   font-weight : 300;
   color: #000;
   line-height:50px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush15W{
   font-family: "Nanum Brush Script";
   font-size: 15px;
   font-weight : 300;
   color: #fff;
   line-height:2px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush15WD{
   font-family: "Nanum Brush Script";
   font-size: 15px;
   font-weight : 300;
   color: #000;
   line-height:10px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush14{     /**---------  footer   ----------**/ 
   font-family: "Nanum Brush Script";
   font-size: 14px;
   font-weight : 300;
   color: #000;
   line-height:20px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush14WD{
   font-family: "Nanum Brush Script";
   font-size: 14px;
   font-weight : 300;
   color: #000;
   line-height:50px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}   
.NanumBrush14W{
   font-family: "Nanum Brush Script";
   font-size: 14px;
   font-weight : 300;
   color: #fff;
   line-height:2px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush13{
   font-family: "Nanum Brush Script";
   font-size: 13px;
   font-weight : 300;
   color: #000;
   line-height:2px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}
.NanumBrush13W{
   font-family: "Nanum Brush Script";
   font-size: 13px;
   font-weight : 300;
   color: #fff;
   line-height:2px;
   letter-spacing: 1px;
   word-spacing : nomal;
   text-shadow: 3px 3px 4px rgba(241, 240, 213, 0.0);
}

<!-- ****************************** font end ****************************** -->

.phone {
text-align: left;
margin:3em 0em 0em 0em;
}

.first-line {
text-align: justify;
margin:0em 0.5em -0.6em 0.5em;
}
.middle-line {
text-align: justify;
margin:-0.6em 0.5em -0.6em 0.5em;
}
.last-line {
margin:-0.6em 0.5em 1em 0.5em;
}


<!-- ****************************** 상부 nav start ****************************** -->

.container,                <!-- **************고정폭 레이아웃을 만들 때 사용한다.**************** -->
.container-fluid,             <!-- **************좌우로 꽉찬 레이아웃을 만들 때 사용한다.**************** -->
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
 width: 90%;

}




.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.py-3 {
  padding-top: 0rem;  /*------   상부 네비바가 전체 화면 일 경우 상부에서 내려오는 거리 --------*/
  padding-bottom: 0rem;     /*------    전체 화면 일 경우  상부 네비 상하폭 --------*/
  box-shadow: 0px 2px 15px 5px rgba(204,204,204,0.0); /*-- 그림자 <X거리><Y거리><흐림정도:커질수록 부드러운><번짐정도><색상> ---*/
}

.text-1000 {
  color: #212121 !important;
}

.fs-0 {
  font-size: 1rem !important;
}

.fw-bold {
  font-weight: 400 !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}



<!-- ****************************** 상부 nav end ****************************** -->




.menu{

margin:0em 0em 0em 0em;
}


.item1{      /*----- 풀 화면 -------------- */
  list-style: none;
  text-align:  center;
margin: 0em 0em 0em 0em;
}
.item2{
  list-style: none;
  text-align:  center;
margin: 0.5em 3em 0em .em;
}
.subitem{
  list-style: none;
  text-align:  center;
margin: 0.5em 2em 0.5em 2em;
}
@media (max-width: 767px) {
video { width: 80%;
}
.item1{
  list-style: none;
  text-align:   center;
margin: 0.5em 0em 0.5em 0em;
}
.item2{
  list-style: none;
  text-align:  center;
margin: 0.5em 1.5em 0em 1.5em;
}
.subitem{
  list-style: none;
  text-align:  center;
margin: 0.5em 1.5em 0em 1.5em;
}
}


ul{      /*----- 풀 화면 -------------- */
  list-style-type: none;     /*-----------   앞에 점을 없애는 태그 ------------ */
  list-style: none;   
  text-align:  center;
margin: 0.5em 0em 0.5em 0em;
}
li {      /*----- 풀 화면 -------------- */
  list-style-type: none;    /*-----------   앞에 점을 없애는 태그 ------------ */
  list-style: none;  
  text-align:   center;
margin: 0.5em 0em 0.5em 0em;
}
a { text-decoration:none !important }
a:hover { text-decoration:none !important }

.jssor1{
text-align:  center;
margin: 0em 0em 0em 0em;
}
.jssor2{
text-align:  center;
margin: -1.4em 0em 0em 0em;
}
@media (max-width: 767px) {
.jssor1{
text-align:  center;
margin: 0em 0em 0em 0em;
}
.jssor2{
text-align:  center;
margin: 2em 0em 0em 0em;
}
}


.row{
    margin:0em 0em 0em 0em;
}
.row.uniform > * > :first-child {
margin-top: 0;
}

fontbackcolor{       /**---------가벽----------**/
background: rgba(166,222,96,0.3);
border-radius: 2px;
padding: 1px 2px 1px 2px;
}
fontbackcolor1{   
background: rgba(255,255,255,0.8);
border-radius: 3px;
padding: 0px 15px 0px 15px;
}
fontbackcolor2{         /**--------상부 설명---------**/
background: rgba(255,255,255,0.9);
border-radius: 3px;
padding: 1px 15px 1px 15px;
}

fontbackcolor9{   
background: rgba(216,226,243,0.4);
border-radius: 3px;
padding: 1px 10px 1px 10px;
}
fontbackcolor10{   
background: rgba(242,245,157,0.4);
border-radius: 3px;
padding: 0px 0px 0px 0px;
}

fontbackcolor16{   
background: rgba(155,202,65,0.5);
border-radius: 0px;
padding: 1px 3px 1px 3px;
margin: 0em 0em 0em 0em;
}
fontbackcolor17{   
background: rgba(200,200,200,0.2);
border-radius: 0px;
padding: 1px 3px 1px 3px;
margin: 0em 0em 0em 0em;
}

.clients-slider {
  width: 80%;
  max-width: 1200px;
}



.jb-box{         /*----- 풀 화면 -------------- */
width: 100%;    /*----- 있어야 중앙에 위치 -------------- */
height: auto;
top: 0px;
left: 0px;
margin: 0 auto;
}
@media (max-width: 767px) {
.jb-box{ 
top: 0px;
left: 0px;
text-align: center;
margin: 0.5em 1em 0.5em 1em;
}
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 또는 동영상 비율에 맞는 값 */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* 혹시 모를 충돌을 막기 위해 */
    height: 100% !important; /* 혹시 모를 충돌을 막기 위해 */
    object-fit: cover !important;
}

.jb-text{        /*----- 풀 화면 -------------- */
width: 100%; 
text-align: center;
padding: 0.5em 0em 0.5em 0em;
margin: 0.5em 10em 0.5em 10em;
}
@media (max-width: 767px) {
.jb-text{ 
width: 100%; 
text-align: center;
padding: 1em 1em 1em 1em;
margin: 0em 0.5em 1em 0.5em;
}
}

.jb-text1{        /*----- 풀 화면 -------------- */
width: 100%; 
text-align: center;
padding: 0em 15em 0em 15em;
margin: 0em 0em 0em 0em;
}
@media (max-width: 767px) {
.jb-text1{ 
text-align: center;
padding: 0em 1em 0em 1em;
margin: 0em 0em 1em 0em;
}
}


.welding{ 
padding-top: px;
}
@media (max-width: 767px) {
.welding{ 
padding: 0em 0em 0em 0em;
margin: 10em 0em 0em 0em;
}
}



.images{ 
margin: 0em 1em 0em 0em;
}
.images2{ 
padding-top:;
}



.phone2{
    width: 100%;
    height: 60px;
    background-color: ;
    color: #fff;
    padding: 10px;
    box-sizing: border-box; /* padding이 width에 포함되도록 설정 */
    
    position: sticky; /* 스티키 속성 적용 */
    top: 0;           /* 화면 상단에 고정 */
    z-index: 1000;    /* 다른 콘텐츠 위로 오도록 설정 */

    /* sticky 요소가 부모의 padding 영역으로 들어가게 됩니다. */
    margin-top: px;
}

.wrap {
  display: flex;
    display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 첫 번째와 세 번째 열은 1배, 두 번째 열은 2배의 비율을 갖습니다. */
}
  margin: 0em 1em 0em 1em;
}


@media (max-width: 767px) {
  .wrap {
    flex-direction: column; /* 모바일 화면: 아이템을 세로로 정렬 */
        display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 첫 번째와 세 번째 열은 1배, 두 번째 열은 2배의 비율을 갖습니다. */
}
}
@media (min-width: 768px) and (max-width: 1024px) {
  .wrap {
    flex-direction: column; /* 모바일 화면: 아이템을 세로로 정렬 */
        display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 첫 번째와 세 번째 열은 1배, 두 번째 열은 2배의 비율을 갖습니다. */
}
}


.special-menu{ 
top: 0px;
left: 0px;
text-align: center;
margin: 2em 15em 0.5em 15em;
}
@media (max-width: 767px) {
.special-menu{ 
position: sticky;
text-align: center;
margin: 0em 1em 0em 1em;
}  
} 



.section{ 
top: 0px;
left: 0px;
text-align: center;
margin: 4em 15em 1em 15em;
}
@media (max-width: 767px) {
.section{ 
top: 0px;
left: 0px;
text-align: center;
margin: 4em 1.5em 1em 1.5em;
}
}


.section1{       /**---------  목수 금망치 backvideo1  ----------**/ 
overflow: hidden; 
text-align: center;
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 0.5em 3em 0.5em 3em;
}
@media (max-width: 767px) {
.section1{ 
overflow: hidden; 
text-align: center;
padding: 0em 0.5em 1em 0.5em;
margin: 3em 0em 3em 0em;
}
}


.section2{   
top: 0px;
left: 0px;
text-align: center;
margin: 3em 15em 0em 15em;
}
@media (max-width: 767px) {
.section2{ 
top: 0px;
left: 0px;
text-align: center;
padding: 0em 0em 0em 0em;
margin: 8em 1.5em 0em 2em;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.section2{ 
top: 0px;
left: 0px;
text-align: center;
padding: 0em 0em 0em 0em;
margin: 0em 1.5em 0em 2em;
}
}

.section3{  
background-image: url(../images/use/wall38-2.png);
  background-size: 800px;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 4em 12em 4em 12em;
overflow: hidden; 
text-align: center;
}

@media (min-width: 767px) {
.section3{ 
background-image: url(../images/use/wall38-2.png);
  margin: 4em auto 1em auto; 
  text-align: center; 
  display: block;  
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 4em 1em 4em 1em;
}
}



.section4{    /*  저희 금망치는 <br> 정성과...  */
  background-image:  url(../images/carp/counter3.png);
  background-size: 800px;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 4em 12em 0em 12em;
overflow: hidden; 
text-align: center;
}
@media (max-width: 767px) {
.section4{ 
  background-image:   url(../images/carp/counter3.png);
  margin: 4em auto 1em auto; 
  text-align: center; 
  display: block;  
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 4em 1em 2em 1em;
}
}


.section5{   
top: 0px;
left: 0px;
text-align: center;
margin: 3em 0em 0em 0em;
}
@media (max-width: 767px) {
.section5{ 
top: 0px;
left: 0px;
text-align: center;
padding: 0em 0em 0em 0em;
margin: 3em 0.5em 0em 0.5em;
}
}


.section6{   
top: 0px;
left: 0px;
text-align: center;
margin: 3em 20em 0em 20em;
}
@media (max-width: 767px) {
.section6{ 
top: 0px;
left: 0px;
text-align: center;
padding: 0em 0em 0em 0em;
margin: 8em 1.5em 0em 1.5em;
}
}


.section7{   
top: 0px;
left: 0px;
text-align: justify;
text-align-last: center;
margin: 1em 20em 0em 20em;
}
@media (max-width: 767px) {
.section7{ 
top: 0px;
left: 0px;
text-align: justify;
text-align-last: center;
padding: 0em 0em 0em 0em;
margin: 1em 2em 0em 3.5em;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.section7{ 
top: 0px;
left: 0px;
text-align: justify;
text-align-last: center;
padding: 0em 0em 0em 0em;
margin: 1em 10em 0em 10em;
}
}
.section8{   
top: 0px;
left: 0px;
text-align: center;
margin: 0em 15em 0em 15em;
}
@media (max-width: 767px) {
.section8{ 
top: 0px;
left: 0px;
text-align: center;
padding: 0em 0em 0em 0.5em;
margin: 1em 1.5em 0em 3em;
}
}


.section9{   
  background-image:  url(../images/carp/counter3.jpg);
  background-size: 800px;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 4em 12em 4em 12em;
/* margin: 0 auto;      블록 요소여야 함 (div, section 등) width 값이 명확히 지정되어 있어야 함 (예: width: 300px)   CSS에서는 후에 선언된 값이 최종적으로 적용되므로, 첫 번째 margin: 0 auto;는 무시되고 두 번째 margin: 4em 10em 4em 10em;만 적용됨 */
overflow: hidden; 
/*  top: 0px;     top/left를 쓰려면 반드시 position을 함께 지정 */
/*  left: 0px;    top/left를 쓰려면 반드시 position을 함께 지정 */
text-align: center;
}

@media (max-width: 767px) {
.section9{ 
  background-image:   url(../images/carp/counter3.jpg);
  margin: 4em auto 1em auto;  /* ✅ 상-좌우-하 마진: 가운데 정렬 유지 */
  text-align: center; 
  display: block;  
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 4em 0.5em 4em 0.5em;
}
}


.section10{    /*  저희 금망치는 <br> 정성과...  */
  background-image:  url(../images/use/wall38-2.png);
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden; 
  text-align: center;
padding: 1em 0em 1em 0em;
margin: 3em 12em 4em 12em;

}
@media (max-width: 767px) {
.section10{ 
  background-image:  url(../images/use/wall38-2.png);
  text-align: center; 
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 15em 1em 4em 1em;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.section10{ 
  background-image:  url(../images/use/wall38-2.png);
  text-align: center; 
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
padding: 1em 0em 1em 0em;
margin: 8em 3em 4em 3em;
}
}

#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity:1;
  transform: translate(-50%, -50%); /* 비디오를 정확히 가운데로 정렬 */
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  z-index: -1; /* 다른 콘텐츠 뒤로 보냄 */
  object-fit: cover; /* 비디오가 부모 요소를 꽉 채우도록 설정 */
}


.explan10{ 
  background-image: url(../images/use/section2back.jpg); 
  max-width: 100%
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: 1em 0em 1em 0em;
  margin: 1em 15em 1em 15em;
}
@media (max-width: 767px) {
.explan10{ 
  background-image: url(../images/use/section2back.jpg); 
  max-width: 100%
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 1em 0em 1em 0em;
  margin: 1.5em 1.5em 0.5em 5em;
}
}


.blur {
  backdrop-filter: blur(3px);     
   background: rgba(255,255,255,0.2);
  text-align:  center;
  padding: 1em 0em 1em 0em;
}





.gallery-single{   /*---------- 그림자 있음 ----------*/
text-align:  center;
	margin: 30px 30px 30px 30px;
    position: relative;
    overflow: hidden;
    /*--    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 4px 4px 12px 5px rgba(0,0,0,.1); 이미지 그림자 <수평거리><수직거리><흐림정도:커질수록 부드러운><번짐정도><색상> ---*/
}
@media (max-width: 767px) {
.gallery-single{
text-align:  center;
	margin: 15px 2px 1px 2px;
    position: relative;
    overflow: hidden;
    /*---   -webkit-box-shadow: 0 0 10px #ccc;   ---*/
    /*---   box-shadow: 5px 5px 15px 5px rgba(0,0,0,.1); 이미지 그림자 <수평거리><수직거리><흐림정도:커질수록 부드러운><번짐정도><색상> ---*/
}
}


.gallery-single2{          /*-------------이미지 ----------------------*/
	margin: 25px 10px 25px 10px;/*------------------  이미지와 사이의 간격  ----------------------*/
    position: relative;
    overflow: hidden;
    /*---   -webkit-box-shadow: 0 0 10px #;   ---*/
    box-shadow: 5px 10px 45px 5px rgba(0,0,0,.);      /*------------------  이미지 그림자 없음. ----------------------*/
}
@media (max-width: 767px) {
.gallery-single2{ 
	margin: 20px 5px 20px 5px;
    position: relative;
    overflow: hidden;
    /*---   -webkit-box-shadow: 0 0 10px #;   ---*/
    /*---   box-shadow: 5px 10px 45px 5px rgba(0,0,0,.);  이미지 그림자 없음. ----------------------*/
}
}


.menu-box{

margin:0em 4em 0em 7em;
}
@media (max-width: 767px) {
.menu-box{ 
margin: 0em 1.5em 0em 3.5em;
}
} 


.sticky {
  position: sticky;
  position: -webkit-sticky;        /*------------ Safari에서 동작하게 함. --------------*/ 
  top: 0;     /*------------------  top, bottom, left, right 중에 하나는 반드시 설정을 해줘야 됨. ----------------------*/
  background: ;
}     /*------------   sticky 속성의 경우, 부모 또는 조상 노드에 overflow: hidden
overflow: scroll overflow: auto 설정이 아래와 같이 설정되어 있으면 동작하지 않음 
sticky 속성을 갖는 엘리먼트의 부모 노드는 반드시 height  (height: auto
height: unset height: 100vh height: 1000px height: 5em ) 가 설정되어 있어야 함. -----------------*/


.top {
  text-align: center;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: "Jost", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 0.5em; 
}

h1, .h1 {
  font-size: calc(1.37383rem + 1.48598vw);
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.48832rem;
  }
}

h2, .h2 {
  font-size: calc(1.33236rem + 0.98832vw);
}

@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2.0736rem;
  }
}

h3, .h3 {
  font-size: calc(1.2978rem + 0.5736vw);
}

@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.728rem;
  }
}

h4, .h4 {
  font-size: calc(1.269rem + 0.228vw);
}

@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.44rem;
  }
}

h5, .h5 {
  font-size: 1.2rem;
}

h6, .h6 {
  font-size: 0.83333rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: #212121;
  text-decoration: none;
}

a:hover {
  color: #1a1a1a;
  text-decoration: none;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}



.btn-light {
  color: #666;
  background-color: rgba(131, 11, 11, 0.8);   /**---------  (수정) 글자색이 되었음?  ----------**/
  text-align: center;
  border-color: #;
}

.btn-light:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);   /**---------  (수정)   ----------**/
  text-align: center;
  border-color: #;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.collapse:not(.show) {
  display: none;
}


.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}




.shadow-transition {                        /**---------  없으면 상부네비 음영 없어짐   ----------**/ 
  -webkit-box-shadow: 0 1.5625rem 2.8125rem rgba(66, 66, 66, 0.075);
  box-shadow: 0 1.5625rem 2.8125rem rgba(66, 66, 66, 0.075);
  -webkit-transition: -webkit-box-shadow 0.4s ease;
  transition: -webkit-box-shadow 0.4s ease;
  -o-transition: box-shadow 0.4s ease;
  transition: box-shadow 0.4s ease;
  transition: box-shadow 0.4s ease, -webkit-box-shadow 0.4s ease;
}


.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #212121;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .nav-link {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.nav-link:hover, .nav-link:focus {
  color: #1a1a1a;
}

.nav-link.disabled {
  color: #9E9E9E;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #EEEEEE;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #F5F5F5 #F5F5F5 #EEEEEE;
  isolation: isolate;
}

.nav-tabs .nav-link.disabled {
  color: #9E9E9E;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #757575;
  background-color: #F5F5F5;
  border-color: transparent;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #212121;
  background-color: #E0E0E0;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.navbar {
    display: none !important;
}
 /**--------- 
.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
padding: 0.5em 2em 0.5em 1em;
}
----------**/ 

.navbar {                       /**---------  아무데서도 안먹힘.  ----------**/ 
     background: rgba(255,255,255,8);
    height: 0px; /* 높이를 50픽셀로 설정 */
    padding: 0px; /* 내부 여백 추가 */
}


.navbar-brand {                         /**---------  전화번호 부분임 지워도 상부바는 남아있음.  ----------**/ 
background-color: rgba(228,230,234, 0.5);
padding: 0.1em 1em 0.1em 0.5em;
margin: 1em 0em 0em 0em;
  font-size: calc(1.2978rem + 0.5736vw);
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .navbar-brand {
    font-size: 1.728rem;
  }
}

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}


.navbar-text {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}




.rm_wrapper{
	width:840px;     /*-- rotate 이미지 크기 --*/
	margin:0 auto;
	position:relative;
}
.rm_container{
	width:840px;     /*-- rotate 이미지 크기 --*/
	overflow:hidden;
	position:relative;
	height:530px;
	margin:0 auto;
}
.rm_container h2{
	background:transparent url(../images/lines.png) repeat top left;
	padding:10px 30px;
	position:absolute;
	bottom:170px;
	right:0px;
	color:#fff;
	font-size:36px;
	text-transform:uppercase;
	text-shadow:1px 0px 1px #fff;
}
.rm_container ul{
	width:1170px;
}
.rm_container ul li{
	float:left;
	margin-left:-80px;
	position:relative;
	overflow:hidden;
	width:310px;
	height:465px;
	border:30px solid #f0f0f0;
	border-width:50px 30px 0px 30px;
	background-color:#f0f0f0;
}
.rm_container ul li img{
	position:absolute;
	top:0px;
	left:0px;
}
.rm_mask_right, .rm_mask_left{
	position: absolute;
	height: 110px;
	background: #f0f0f0;
	width: 530px;
	bottom: -30px;
	left: 0px;
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.rm_mask_right{
	left:auto;
	right:0px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
	background: #f0f0f0;
	position:absolute;
	width:200px;
	height:100px;
	bottom:0px;
	left:-65px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.rm_corner_right{
	left:auto;
	right:-65px;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.rm_nav a{
	position:absolute;
	top:200px;
	width:38px;
	height:87px;
	cursor:pointer;
	opacity:0.7;
}
.rm_nav a:hover{
	opacity:1.0;
}
.rm_nav a.rm_next{
	background:transparent url(../images/) no-repeat top left;
	right:0px;
}
.rm_nav a.rm_prev{
	background:transparent url(../images/) no-repeat top left;
	left:0px;
}
.rm_controls{
	position:absolute;
	top:0px;
	left:-40px;
	height:20px;
}
.rm_controls a{
	cursor:pointer;
	opacity:0.7;
	padding-left:24px;
	font-size:16px;
	text-transform:uppercase;
	height:20px;
	float:left;
	line-height:20px;
}
.rm_controls a:hover{
	opacity:1.0;
}
.rm_controls a.rm_play{
	display:none;
	background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
	background:transparent url(../images/) no-repeat center left;
}

@media (max-width: 767px) {
.rm_wrapper{
	width:100%;     /*-- 모바일 rotate 이미지 크기 --*/
	margin:0 auto;
	position:relative;
}
.rm_container{
	width:100%;     /*--  모바일 rotate 이미지 크기 --*/
	overflow:hidden;
	position:relative;
	margin:0 auto;
}
.rm_container h2{
	background:transparent url(../images/lines.png) repeat top left;
	padding:10px 30px;
	position:absolute;
	bottom:170px;
	right:0px;
	color:#fff;
	font-size:36px;
	text-transform:uppercase;
	text-shadow:1px 0px 1px #fff;
}
.rm_container ul{
	width:100%;
}
.rm_container ul li{
	float:left;
	margin-left:-80px;
	position:relative;
	overflow:hidden;
	width:100%;
	border:30px solid #f0f0f0;
	border-width:50px 30px 0px 30px;
	background-color:#f0f0f0;
}
.rm_container ul li img{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
.rm_mask_right, .rm_mask_left{
	position: absolute;
	background: #f0f0f0;
	width:100%;
	bottom: -30px;
	left: 0px;
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.rm_mask_right{
	left:auto;
	right:0px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
	background: #f0f0f0;
	position:absolute;
	width:100%;
	bottom:0px;
	left:-65px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.rm_corner_right{
	left:auto;
	right:-65px;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.rm_nav a{
	position:absolute;
	top:200px;
	width:38px;
	height:87px;
	cursor:pointer;
	opacity:0.7;
}
.rm_nav a:hover{
	opacity:1.0;
}
.rm_nav a.rm_next{
	background:transparent url(../images/next.png) no-repeat top left;
	right:0px;
}
.rm_nav a.rm_prev{
	background:transparent url(../images/prev.png) no-repeat top left;
	left:0px;
}
.rm_controls{
	position:absolute;
	top:0px;
	left:-40px;
	height:20px;
}
.rm_controls a{
	cursor:pointer;
	opacity:0.7;
	padding-left:24px;
	font-size:16px;
	text-transform:uppercase;
	height:20px;
	float:left;
	line-height:20px;
}
.rm_controls a:hover{
	opacity:1.0;
}
.rm_controls a.rm_play{
	display:none;
	background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
	background:transparent url(../images/pause.png) no-repeat center left;
}
}


    /**********************-----   원근감 start  -----*********************/

/* =Common Styles
-------------------------------------------------------------- */

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}


/* =Typography
-------------------------------------------------------------- */
a {
    text-decoration: none;
}

h1, h2 { margin: 0; }

h1 {
	font-size: 80px;
	font-weight: 800;
	line-height: 0.5em; 
	letter-spacing: -0.08em;
	color: #161a1b; 
}

h2 {
	font-size: 18px;
	font-weight: 800;
	line-height: 0.5em; 
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #161a1b;
}

#countdown div span {
	display:block;
	font-size: 50px;
	line-height: 50px;
	letter-spacing: initial;
	font-weight: 100;
	text-transform: uppercase;
}

#countdown div {
	display:inline-block;
    margin: 0 34px;
}



/* =Content Styles
-------------------------------------------------------------- */


.wrapper {
  z-index:100;
  text-align: center;
  position: absolute;
  overflow: visible;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  margin: 4em 0em 0em 0em;
}
@media (max-width: 767px) {
.wrapper {
  z-index:100;
  text-align: center;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  margin: 4em 0em 0em 0em;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.wrapper {
  z-index:100;
  text-align: center;
  position: absolute;
  overflow: visible;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  margin: 4em 0em 0em 0em;
}
}
.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.scene {
  position: relative;
  overflow: hidden;
}

.layer { position: absolute; 
z-index:10;
}

.layer div {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}


.title {
	display: block;
	text-align: center;
	width: 100%;
	position: absolute;
	z-index: 2;
	top: 10%;
}

.sub-title {
	font-size: 18px;
	margin-top: 5px;
	margin-bottom: 0px;
}



/* Flakes Sizing */
.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6,0.6);
	transform: scale(0.6);
}

/* Flakes Positioning */
.depth-5 {
	position: absolute;
	right: -100%;
	top: -24%;
}

.depth-4 {
	position: absolute;
	left: -10%;
	top: 37%;
 }

.depth-3.flake1 {
	display: none;
}

.depth-3.flake2 {
	position: absolute;
	right: 16%;
	bottom: 20%;
}

.depth-3.flake3 {
	position: absolute;
	left: 10%;
	bottom: 16%;
}

.depth-3.flake4 {
	display: none;
}

.depth-2.flake1 { 
	display: none;
}

.depth-2.flake2 {
	display: none;
}

.depth-1.flake1 {
	display: none;
}

.depth-1.flake2 { 
	position: absolute;
	right: 40%;
	top: 50%;
}

.depth-1.flake3 { 
	display: none;
}

.depth-1.flake4 { 
	position: absolute;
	right: 0;
	top: 0;
}


/* =Responsive Styles
-------------------------------------------------------------- */

@media (max-width: 320px) {
	/* HERO */
	h1 { font-size: 40px; line-height: 40px; }
	#countdown div span {font-size: 24px; line-height: 34px;}
	.sub-title { font-size: ; line-height: ; margin-top: 10px; }
	/* TITLE & CONTACT */
	.title { top: 15%;}
	.contact .icons { margin-bottom: 0px; }

	/* POSITIONING */
	.depth-5 {
		position: absolute;
		right: -50%;
		top: -50%;
	}

	.depth-4 {
		left: -4%;
		top: 20%;
	 }

	.depth-3.flake1 {
		display: none;
	}

	.depth-3.flake2 {
		position: absolute;
		right: 16%;
		bottom: 20%;
	}

	.depth-3.flake3 {
		position: absolute;
		left: 10%;
		bottom: 16%;
	}

	.depth-3.flake4 {
		display: none;
	}

	.depth-2.flake1 { 
		display: none;
	}

	.depth-2.flake2 {
		display: none;
	}

	.depth-1.flake1 {
		display: none;
	}

	.depth-1.flake2 { 
		position: absolute;
		right: 40%;
		top: 40%;
	}

	.depth-1.flake3 { 
		display: none;
	}

	.depth-1.flake4 { 
		position: absolute;
		right: 0;
		top: 0;
	}
}



@media all and (min-width: 400px) {
	/* HERO */
	h1 { font-size: 40px; line-height: 40px; }
	#countdown div span {font-size: 24px; line-height: 34px;}
	.sub-title { font-size: ; line-height: ; margin-top: 10px; }
	/* TITLE & CONTACT */
	.title { top: 15%;}
	.contact .icons { margin-bottom: 0px; }

	/* POSITIONING */
	.depth-5 {
		position: absolute;
		right: -50%;
		top: -50%;
	}

	.depth-4 {
		left: -4%;
		top: 20%;
	 }

	.depth-3.flake1 {
		display: none;
	}

	.depth-3.flake2 {
		position: absolute;
		right: 16%;
		bottom: 20%;
	}

	.depth-3.flake3 {
		position: absolute;
		left: 10%;
		bottom: 16%;
	}

	.depth-3.flake4 {
		display: none;
	}

	.depth-2.flake1 { 
		display: none;
	}

	.depth-2.flake2 {
		display: none;
	}

	.depth-1.flake1 {
		display: none;
	}

	.depth-1.flake2 { 
		position: absolute;
		right: 40%;
		top: 40%;
	}

	.depth-1.flake3 { 
		display: none;
	}

	.depth-1.flake4 { 
		position: absolute;
		right: 0;
		top: 0;
	}
}

/* Tablet Portrait */
@media all and (min-width: 700px) {
	/* HERO */
	h1 { font-size: 90px; line-height: 90px; }
	.sub-title { font-size: 20px; line-height: 20px; margin-top: 10px; }
	/* TITLE & CONTACT */
	.title { top: 18%;}

	.contact { bottom: 10%; }
	.contact .icons { margin-bottom: 12px; }
	/* SIZES */

	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8,0.8);
		transform: scale(0.8);
	}
	/* POSITIONING */
	.depth-5 {
		right: -25%;
		top: 3%;
	}

	.depth-4 {
		left: -3%;
		top: 15%;
	 }

	.depth-3.flake1 {
		display: none;
	}

	.depth-3.flake2 {
		right: 25%;
		bottom: 25%;
	}

	.depth-3.flake3 {
		left: 20%;
		bottom: 20%;
	}

	.depth-3.flake4 {
		display: block;
		position: absolute;
		left: 10%;
		bottom: 40%;
	}

	.depth-2.flake1 {
		display: none;
	}

	.depth-2.flake2 {
		display: none;
	}

	.depth-1.flake1 {
		display: none;
	}

	.depth-1.flake2 { 
		display: block;
		left: 15%;
		top: 25%;
	}

	.depth-1.flake3 { 
		display: none;
	}

	.depth-1.flake4 { 
		display: none;
	}
	
}

@media all and (min-width: 900px) {
	/* HERO */
	h1 { font-size: 120px; line-height: 120px; }

	#countdown div span {font-size: 34px; line-height: 34px;}
	
	.sub-title { font-size: 20px; line-height: 20px; margin-top: 20px; }
	/* TITLE & CONTACT */
	.title { top: 15%;}
	.contact { bottom: 8%; }
	.contact .icons { margin-bottom: 12px; }

	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8,0.8);
		transform: scale(0.8);
	}
	/* POSITIONING */
	.depth-5 {
		right: -25%;
		top: 3%;
	}

	.depth-4 {
		left: -3%;
		top: 15%;
	 }

	.depth-3.flake1 {
		display: none;
	}

	.depth-3.flake2 {
		right: 25%;
		bottom: 25%;
	}

	.depth-3.flake3 {
		left: 20%;
		bottom: 20%;
	}

	.depth-3.flake4 {
		display: block;
		position: absolute;
		left: 10%;
		bottom: 40%;
	}

	.depth-2.flake1 {
		display: none;
	}

	.depth-2.flake2 {
		display: none;
	}

	.depth-1.flake1 {
		display: none;
	}

	.depth-1.flake2 { 
		display: block;
		left: 15%;
		top: 25%;
	}

	.depth-1.flake3 { 
		display: none;
	}

	.depth-1.flake4 { 
		display: none;
	}
}

@media all and (min-width: 1200px) {
	/* HERO */
	h1 { font-size: 150px; line-height: 150px; }
	#countdown div span {font-size: 44px; line-height: 44px;}
	.sub-title { font-size: 25px; line-height: 25px; margin-top: 20px; }
	/* SIZES */

	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1,1);
		transform: scale(1);
	}
	/* POSITIONING */
	.depth-5 {
		right: -10%;
		top: -10%;
		-webkit-animation: wave 9s 0.1s infinite linear;
		-moz-animation: wave 9s 0.1s infinite linear;
		animation: wave 9s 0.1s infinite linear;
	}

	.depth-4 {
		left: -3%;
		top: 15%;
		-webkit-animation: wave 7s 0.1s infinite linear;
		-moz-animation: wave 7s 0.1s infinite linear;
		animation: wave 7s 0.1s infinite linear;
	 }


	.depth-3 {
		-webkit-animation: wave 6s 0.1s infinite linear;
		-moz-animation: wave 6s 0.1s infinite linear;
		animation: wave 6s 0.1s infinite linear;
	}

	.depth-3.flake1 {
		display: block;
		position: absolute;
		left: 20%;
		top: 40%;
	}

	.depth-3.flake2 {
		right: 25%;
		bottom: 25%;
	}

	.depth-3.flake3 {
		left: 20%;
		bottom: 20%;
	}

	.depth-3.flake4 {
		display: block;
		position: absolute;
		left: 10%;
		bottom: 40%;
	}

	.depth-2 {
		-webkit-animation: wave 5s 0.1s infinite linear;
		-moz-animation: wave 5s 0.1s infinite linear;
		animation: wave 5s 0.1s infinite linear;
	}

	.depth-2.flake1 { 
		display: block;
		position: absolute;
		right: 40%;
		top: 40%;
	}

	.depth-2.flake2 { 
		display: none;
	}

	.depth-1 {
		-webkit-animation: wave 4s 0.1s infinite linear;
		-moz-animation: wave 4s 0.1s infinite linear;
		animation: wave 4s 0.1s infinite linear;
	}

	.depth-1.flake1 {
		display: block;
		position: absolute;
		left: 30%;
		bottom: 20%;
	}

	.depth-1.flake2 { 
		display: block;
		left: 15%;
		top: 25%;
	}

	.depth-1.flake3 { 
		display: none;
	}

	.depth-1.flake4 { 
		display: none;
	}
}

@media all and (min-width: 1400px) {
	/* HERO */
	h1 { font-size: 160px; line-height: 160px; }
	.sub-title { font-size: 25px; line-height: 25px; margin-top: 20px; }
	/* POSITIONING */
	.depth-5 {
		right: -10%;
		top: -5%;
	}

	.depth-4 {
		left: -3%;
		top: 15%;
	 }

	.depth-3.flake1 {
		display: block;
		position: absolute;
		left: 20%;
		top: 40%;
	}

	.depth-3.flake2 {
		right: 25%;
		bottom: 25%;
	}

	.depth-3.flake3 {
		left: 40%;
		bottom: 20%;
	}

	.depth-3.flake4 {
		display: block;
		position: absolute;
		left: 10%;
		bottom: 40%;
	}

	.depth-2.flake1 { 
		display: block;
		position: absolute;
		right: 40%;
		top: 40%;
	}

	.depth-2.flake2 { 
		display: none;
	}

	.depth-1.flake1 {
		display: block;
		position: absolute;
		left: 30%;
		bottom: 30%;
	}

	.depth-1.flake2 { 
		display: block;
		left: 15%;
		top: 25%;
	}

	.depth-1.flake3 { 
		display: block;
		position: absolute;
		bottom: 20%;
		right: 40%;
	}

	.depth-1.flake4 { 
		display: block;
		right: 40%;
		top: 25%;
	}
}

@media all and (min-width: 1600px) {
	/* HERO */
	h1 { font-size: 180px; line-height: 180px; }
	#countdown div span {font-size: 54px; line-height: 54px;}
	.sub-title { font-size: 25px; line-height: 25px; margin-top: 25px; }
}


@media all and (min-width: 1920px) {
	/* HERO */
	h1 { font-size: 200px; line-height: 200px; }
	.sub-title { font-size: 30px; line-height: 30px; margin-top: 30px; }
	/* POSITIONING */
	.depth-5 {
		right: -10%;
		top: 5%;
	}

	.depth-4 {
		left: 3%;
		top: 15%;
	 }

	.depth-3.flake1 {
		display: block;
		position: absolute;
		left: 20%;
		top: 40%;
	}

	.depth-3.flake2 {
		right: 25%;
		bottom: 25%;
	}

	.depth-3.flake3 {
		left: 40%;
		bottom: 20%;
	}

	.depth-3.flake4 {
		display: block;
		position: absolute;
		left: 10%;
		bottom: 40%;
	}

	.depth-2.flake1 { 
		display: block;
		position: absolute;
		right: 40%;
		top: 40%;
	}

	.depth-2.flake2 { 
		display: none;
	}

	.depth-1.flake1 {
		display: block;
		position: absolute;
		left: 30%;
		bottom: 30%;
	}

	.depth-1.flake2 { 
		display: block;
		left: 20%;
		top: 30%;
	}

	.depth-1.flake3 { 
		display: block;
		position: absolute;
		bottom: 30%;
		right: 40%;
	}

	.depth-1.flake4 { 
		display: block;
		right: 40%;
		top: 25%;
	}
}

/* =Animation
-------------------------------------------------------------- */

@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

    /**********************-----   원근감 end  -----*********************/