html {
    height:100%;
}
body {
    font-family: 'Pretendard Variable';
    -webkit-overflow-scrolling: touch;
    height:100%;
    margin:0;
    border:0;
    padding:0;
    overflow: scroll;  
   overflow-x: hidden;  
}

/*스크롤바 숨기기*/
::-webkit-scrollbar{
    width: 0;
}

ul{
    margin: 0;
    padding: 0;
}
.wrap {
    position:relative;
    top:0;
    width:100vw;
    height:100vh;
    transition-property: top;
    transition-duration: 1.5s;
    
}
.more_div_hover{
    
    transition-property: border-bottom;
    transition-duration: 2s;
}

.container {
    width:100%;height:100%;
    display: block;  
    overflow: hidden;

}

.container:nth-child(1){background-color: none;
                        overflow: hidden;
                         overflow-y:
                        hidden; opacity: 1;
                    } 

.section1{
    display: flex;
    justify-content: center;
    align-items: center;
}

nav{
    position: absolute;
}

.section2{
    opacity: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.section2 *{
    z-index: 1;      
}

.section2::before{
    content: "";
    background-color: rgb(8, 8, 8);
    background-image: url(./image/section2.jpg);
    background-size: cover;
   /* background-attachment: fixed;*/
    width: 100%;
    position: absolute;
    left: 0; 
    height: 100%;   
    opacity: 1; 
    filter: drop-shadow(50px 5px 5px #000);  
}
.section2::after{
    content: "";
    background-color: rgb(243, 242, 242);

    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    position: absolute;
    left: 0;
    /*top: 0;*/
    height: 100%;   
    opacity: .0;  
}

/*표기되는 내역*/
.container_wrap{
   /* background-color: rgb(199, 117, 18);  */
    display: flex;
    opacity: 1;  
    width: 60%;
    height: 65%;
    min-width: 800px;
    min-height: 600px;
}

.p_info_text
{
    position: relative;
}

.p_info_text .write_area{
    position: absolute;
    top: 25px;
    left: 35px;
    width: 90%;
    overflow: visible;
    white-space: nowrap;
}
.p_info_text .write_area li{
    list-style: none;
}
.write_area .info_title{
    width: 70px;
    padding: 5px;
    background-color: rgb(64, 46, 41);
    text-align: center;
    font-size: 23px;
    color: aliceblue;
    font-weight: 700;

}

.write_area ul{
margin-top: .7vw;
margin-bottom: 2vw;
}

.write_area li, .extra_info {
    color: rgb(64, 46, 41);
    font-weight: 400;
    font-size: 20px;
}

/*왼쪽 위 모서리*/
.line_top{
    position: absolute;
    width:50px;
    height: 50px;
    border-left: 2px solid rgb(64, 46, 41);
    border-top: 2px solid rgb(64, 46, 41);
}

/*오른쪽 아래 모서리*/
.line_bottom{
   
    position: absolute;
    bottom: 0;
    right:  0;
    width:500px;
    height: 50px;
    border-right: 2px solid rgb(64, 46, 41);
    border-bottom: 2px solid rgb(64, 46, 41);
    color: rgb(64, 46, 41);
    display: flex;   
    align-items: end;
    box-sizing: border-box;
}
.line_bottom .name{
    font-size: 40px;
    font-weight: 700;
  
}
.line_bottom .name .job{
    font-size: 20px;
    font-weight: 300;
    padding-left: .5vw;
}


/*사진과 정보가 차지하는 영역*/
.container_wrap>div{
    width: 50%;
}

.p_info_picture{
    position: relative;
}

/*사진크기*/
.p_info_picture img{
    filter:drop-shadow(5px -1px 9px);
    position: absolute;
    width: 350px;
    bottom: 2px;
    right: 1vw;
}

.section3{
    opacity: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.section3 *{
    z-index: 1;      
}

.section3::before{
    content: "";
    background-image: url(./image/section3.jpg);
    background-size: cover;
    width: 100%;
    position: absolute;
    left: 0;
    /*top: 0;*/
    height: 100%;   
    opacity: 1;
    background-position: center; 
     
}

.section4::before{
    content: "";
    background-color: rgb(8, 8, 8);
    background-image: url(./image/section4.jpg);
    background-size: cover;
    width: 100%;
    position: absolute;
    left: 0;
    /*top: 0;*/
    height: 100%;   
    opacity: 1;
    filter: brightness(80%);
    
}

.section4{
    display: flex;
    justify-content: center;
    align-items: center;
}

.section4 *{
    z-index: 1;
}


.section4 .inner{
    width: 900px;
    height: 700px;
    margin-top: 70px;
 
 

    display: flex;
    flex-flow: column;  
   
    

}

.section4 .inner .inner1{
    padding-top:100px;
    padding-bottom: 10px;
    box-sizing: border-box;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;  
    & a{
        text-decoration: none;
        color: white;
    }
 
   
   
}

.section4 .inner .inner2{
    height: 20%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10%;
    color: aliceblue;
    font-size: 17px;
    font-weight: 200;
  
}

.square{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0px 40px;  
    width: 182px;
    height: 182px;
    border: 1px solid rgba(255, 255, 255, 0.301);
    background-image: url("");
    position: relative;
    /*
    &:hover{
        &::before{
            width: 100%;
            height: 100%;
            position: absolute;
            content: "";
            background-color: white;
            opacity: .2;
        }
 
    }
        */
}


    .square:hover::before{
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
        background-color: white;
        opacity: .2;
    }



.square .pic{
    width: 50%;
    height: 50%;
    background-image: url("./image/log_white.png");
    background-repeat: no-repeat;
    background-size : contain ;
    background-position: center;
    margin-bottom: 10px;  
  
}
.square1 .pic{

    background-image: url("./icon/work/work1.png");  
}
.square2 .pic{

    background-image: url("./icon/work/work2.png");  
}
.square3 .pic{

    background-image: url("./icon/work/work3.png");  
}
.square4 .pic{

    background-image: url("./icon/work/work4.png");  
}
.square5 .pic{

    background-image: url("./icon/work/work5.png"); 
    
}

.square .line_top2{
    width: 20%;
    height: 20%;
    position: absolute;
    left: -1px;
    top: -1px;
    border-left: 2px solid rgba(255, 255, 255, 0.774);
    border-top: 2px solid rgba(255, 255, 255, 0.774);
    padding: 1px;
}
.square .line_bottom2{
    width: 20%;
    height: 20%;
    position: absolute;
    right: -1px;
    bottom: -1px;
    border-right: 2px solid rgba(255, 255, 255, 0.774);
    border-bottom: 2px solid rgba(255, 255, 255, 0.774);
    padding: 1px;
}


/*   section 5*/
.section5::before{
    content: "";
    background-color: rgb(8, 8, 8);
    background-image: url(./image/section5.jpg);
    background-size: cover;
    width: 100%;
    position: absolute;
    left: 0;
    /*top: 0;*/
    height: 100%;   
    opacity: 1;
    filter: brightness(80%);
    
}

.section5{
    display: flex;
    justify-content: center;
    align-items: center;
}

.section5 *{
    z-index: 1;
    box-sizing: border-box;
}


.section5 .inner{

    width: 1000px;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 842px;
    min-height: 740px;
    padding-top: 70px;
    
    
}

.section5 .inner .inner1{
    height: 17%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 20px;
   
}
.section5 .inner .inner1 .square2{
    width: 185px;
    height: 95px;
  
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section5 .inner .inner1 .square2 .square2_line
{
    position: absolute;
    width: 30px;
    height: 30px;      
}

.section5 .inner .inner1 .square2 .line_top3
{ 
    top: -1px;
    left:-1px;
    border-left: 2px solid rgba(255, 255, 255, 0.459);
    border-top: 2px solid rgba(255, 255, 255, 0.459);;      
}

.section5 .inner .inner1 .square2 .line_bottom3
{ 
    bottom: -1px;
    right:-1px;
    border-right: 2px solid rgba(255, 255, 255, 0.459);
    border-bottom: 2px solid rgba(255, 255, 255, 0.459);      
}

.section5 .inner .inner1 .square2 .txt{
    color: white;
    text-align: center;
    font-size: 17px;
}

.section5 .inner .inner1 .square2 .txt span{  
    display: inline-block;
    width: 100%;
    padding: 2px;
}
.section5 .inner .inner1 .square2 .txt .txt1{  
    font-weight: 400;
}
.section5 .inner .inner1 .square2 .txt .txt2{  
    font-weight: 100;
}






.section5 .inner .inner2{
    height: 72%;
    width: 100%;
    padding: 10px 0;
  
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.section5 .inner2 .succ_pic{
    width: 190px;
    height: 260px;
    background-color: aliceblue;  
    box-sizing: border-box;
    margin: 5px 25px;
    box-shadow: 10px 10px 20px black;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.section5 .inner3{
   display: flex;
   align-items: center;
   justify-content: center;
}

.section5 .inner3 a{
    text-decoration: none;
    color: white;
}


.section5 .inner .inner3{
    height: 11%;
    width: 100%;

}
.section5 {
    box-sizing: border-box;
    
}

/*   section 6*/
.section6::before{
    content: "";
    background-color: rgb(8, 8, 8);
    background-image: url(./image/section6.jpg);
    background-size: cover;
    width: 100%;
    position: absolute;
    left: 0;
    /*top: 0;*/
    height: 100%;   
    opacity: 1;
    filter: brightness(80%);
    
}
.section6 *{
    z-index: 1;
    box-sizing: border-box;
}
.section6{
    display: flex;
    flex-direction: column ;
    justify-content: center;
    align-items: center;  

    &>.page6_title{
        position: relative;
        padding: 30px;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0);

        & .line6{
            position: absolute;
            width: 30px;
            height: 30px;
        

            &.line_bottom6{
                bottom: -1px;
                right:-1px;
                border-right: 2px solid rgba(255, 255, 255, 0.459);
                border-bottom: 2px solid rgba(255, 255, 255, 0.459);      
            

            }
            &.line_top6{
                top: -1px;
                left:-1px;
                border-left: 2px solid rgba(255, 255, 255, 0.459);
                border-top: 2px solid rgba(255, 255, 255, 0.459);  

            }
        }
        
        & > .txt1,.txt2{
            font-size: 17px;
            padding: 2px;
        }
        & > .txt2{
            font-weight: 100;
        }
    }

    .map_info_section{
        display: flex;
        width: 1200px;
        height: 500px;
        align-items: end;
        justify-content: center;
     
        background-color: rgba(211, 238, 176, 0);

       .map_section, .info_section{
            width: 45%;
        
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            
        }
        .map_title_section{
            width: 400px;
          
            text-align: center;
            color: white;
            border-bottom: 1px solid white;
            padding-bottom: 10px;
            font-size: 15px;
            margin-bottom: 10px;
          

        }
        .map{
            width: 400px;
            height: 400px;
           
            background-color: white;
            box-sizing: border-box;
            overflow: hidden;
        }

        .info_section{
            color: white;
          
            img{
                width: 60px;
                margin: 15px;
            }

            >span{
                font-size: 15px;
                margin-bottom: 15px;
            }
        
            >.info_input{
                width: 400px;
                height: 40px;
                line-height:50px;
                margin: 1px 0;
                color: white;
               
                vertical-align: text-top;
                border: 1px solid rgba(255, 255, 255, 0.541);
                background: transparent;
                &::placeholder{
                    color: rgba(255, 255, 255, 0.685);
                    font-size: 10px;
                    padding-left: 10px;
                    vertical-align: baseline;
                    
                }         
    
            }
            .info_input4{
                height: 180px;
            }
            .check_wrap{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 400px;
                margin: 5px;
                font-size: 10px;
                position: relative;
                z-index: 9;
                
                >#check_wrap1{
                    display: flex;
                 
                    align-items: center;
                }
                   
                >#check_wrap2 a{
                 color: white !important;
                 text-underline-offset : 3px;
                 text-decoration: underline;
                }

                >#check_detail{
                   
                   width: 441px;
                    background-color: white;
                    border: 1px solid rgba(0, 0, 0, 0.514);
                    position: absolute;
                    top : 20px;
                    right:0;
                    display: none;
                    justify-content: center;
                    flex-direction: column;
                    padding: 20px;
                    >#check_detail_title{
                        color: black;
                        margin-bottom: 5px;
                        font-size: 17px;
                        display: flex;
                        justify-content: space-between;

                        a{
                            text-decoration: none;
                            color: black;
                        }
                    }
                    >#check_detail_content{
                        font-size: 13px;
                        padding: 15px;
                        color: black;
                        border: 1px solid rgba(0, 0, 0, 0.096);
                        border-top: 1px solid rgb(0, 0, 0);
                    }
                
                }
                span{
                    padding-left: 6px;
                }
                input{
                    zoom:1.2;
                    margin:0;
                    border-radius: 0;
                }
            }
            .Request{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 400px;
                height: 40px;
                background-color: white;
                margin-top: 15px;

                a{
                    text-decoration: none;
                    color: rgba(0, 0, 0, 0.973);
                    font-size: 15px;
                    font-weight: 700;
                }
            }

        }
    }

    

    


}