* {margin: 0; padding: 0; box-sizing: border-box; color: #333;}
ul,ol,li {list-style: none;}
a {text-decoration: none; color: #333; display: inline-block;}
img {width: 100%; height: 100%; display: inline-block;}
@import url('https://fonts.googleapis.com/css2? family= Nanum+Gothic:wght@400;700;800 & display=swap');

@font-face {
    font-family:'Cambria Math';
    font-weight : normal;
    font-style: normal;
    src: url('font/Cambria.ttc')
}

@font-face {
    font-family:'NanumSquare_acR';
    font-weight : normal;
    font-style: normal;
    src: url('font/NanumSqure_acR.ttf')
}


@keyframes fadeIn {
    0%{opacity: 0; transform: translateX(30px);}
    100%{opacity: 1; transform: translateX(0px);}
}

body {font-family: 'Cambria Math';}
.center {max-width: 1500px; margin: 0 auto; position: relative;}

/*헤더영역*/
/* .h_wrap { background: url(img/main.mp4) no-repeat 0 0; background-size: 100%;} */
#header {height: 80px; position: fixed; width: 100%; z-index: 999; }
#header .topmenu {background: rgba(0, 0, 0, 0.5);  }
#header .topmenu ul {display: flex; justify-content: space-around; max-width: 600px; margin: 0 auto;}
#header .topmenu ul li {height: 80px; line-height: 80px;}
#header .topmenu ul li a {font-size: 20px; color: #fff;}

#mv {display: flex; height: 1000px; width: 100%; display: inline-block;}
#mv .mvimg img {width: 100%; display: block; }
.intro {top: 40%; animation: fadeIn 3s;}
.intro1 {font-size: 60px; font-weight: bold;}
.intro2 {font-size: 30px; color: #333;}

.mv_tx p {text-align: right; font-size: 20px; padding-bottom: 50px;}

/*첫번째섹션*/
#section1 {padding: 80px 15px;}
#section1 .tit_h2 {text-align: center; padding: 30px 0 60px 0; border-top: 1px solid #999; border-bottom: 1px solid #999; color: #333;}
#section1 .tit_h2 h2 {font-size: 60px; font-weight: 500; margin: 15px 0;}
#section1 .tit_h2 p {font-size: 20px;}
#section1 .box_wrap {padding: 50px 0 50px 0;}
#section1 .box_wrap ul {display: flex; position: relative;}
#section1 .box_wrap ul li {width: 33.333%;  }
#section1 .box_wrap ul li::after {content: ""; background: #999; display: inline-block; width: 1px; height: 667px; position: absolute; top: -51px; margin-right: 10px;}
#section1 .box_wrap ul li:first-child::after {display: none;}
#section1 .box_wrap ul li .box_in {  padding: 20px; width: 100%; text-align: center;}
#section1 .box_wrap ul li .box_in a img {width: 100%; display: block; height: 250px; }
#section1 .box_wrap ul li .box_in .tx_box {text-align: center; margin: 10px 0;}
#section1 .box_wrap ul li .box_in .tx_box h3 {font-size: 23px; font-weight: 500; padding: 30px 0 15px 0;}
#section1 .box_wrap ul li .box_in .tx_box p {font-size: 18px; padding: 15px 0 30px 0; color: #666;}
#section1 .box_wrap ul li .box_in .btn {text-align: center; margin-bottom: 10px;}
#section1 .box_wrap ul li .box_in .btn a { padding: 15px 30px; font-size: 18px; transition: 0.3s;  border: 1px solid #d1d1d1; background: #572808; color: #fff;}
#section1 .box_wrap ul li .box_in .btn a:hover {background: none; color: #333; transition: 0.3s;}

/* .container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 24px;
    color: #666;
    margin-bottom: 20px;
} */


.image-box {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    transition: all .3s;
}

.projects {
}

.projects ul {
    display: flex;
    flex-wrap: wrap;
}
.projects ul li {
    width: 33.333%;
    padding: 10px;
}

.project {
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.project .imgBox img {
    width: 100%;
    height: 100%;
    transition: .3s;
}

.project .imgBox{
    overflow: hidden;
    height: 280px;
}

.project .imgBox img:hover {
    transform: scale(1.2);
}

.project01{
    background: #ef9459;
}

.project02{
    background: #23385b;
}

.project-info {
    padding: 15px;
}

.project-info h2 {
    font-size: 18px;
    color: #333;
    margin: 0 0 10px;
}

.project-info p {
    font-size: 14px;
    margin: 5px 0;
}



.menu {
    margin: 20px 0;
}
.menu button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
}
.menu button.active {
    background-color: #e75832;
}
/* .image-container {
    display: flex;
    flex-wrap: wrap;
}

.image-box img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: all .3s;
}
.image-box .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    display: none;
    text-align: center;
    transition: all .3s;
}

.image-box .info p {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    transition: all .3s;
}

.image-box:hover .info p {
    position: absolute;
    left: 30px;
    
}

.image-box:hover .info {
    display: block;
}

.image-box:hover img {
    transform: scale(1.1);
} */



#section2 {}
.box_wrap2 {display: flex;} 
#section2 .box_wrap2 .lft {width: 50%;}
#section2 .box_wrap2 .lft img {display: block;}
#section2 .box_wrap2 .rgt {width: 50%; line-height: 30px;}
#section2 .box_wrap2 .rgt .rgt_inner{padding: 120px 30px 0 30px;}
.rgth3 {background: #f1e6d6; border-radius: 10px; display: inline-block; padding: 5px 15px; margin-bottom: 30px;}
.rgt1 {margin-bottom: 30px;}
.rgt1 p {font-size: 17px;}
.rgt2 {display: flex; flex-wrap: wrap;}
.rgt2 p{font-size: 17px;}
.info1 {width: 50%; margin-bottom: 60px;}
.info2 {width: 50%; margin-bottom: 60px;}
.info3 {width: 50%; margin-bottom: 60px;}
.info3 ul {display: flex; flex-wrap: wrap;}
.info3 ul li {margin-right: 15px;}
.info3 ul li img {width: 50px; }
.info3 ul li:nth-child(2) img{border-radius: 8px;}
.info3 ul li:nth-child(3) img{border-radius: 8px;}
.info4 {width: 50%; margin-bottom: 60px;}
.info4 li {font-size: 18px;}
.info4 ul li:nth-child(1)::before {content: ""; display: inline-block; background: url(img/phone-call.png)no-repeat 0 0; width: 16px; height: 16px; margin-right:10px;}
.info4 ul li:nth-child(2)::before {content: ""; display: inline-block; background: url(img/email.png)no-repeat 0 0; width: 16px; height: 16px; margin-right:10px;}
.info4 ul li:nth-child(3)::before {content: ""; display: inline-block; background: url(img/house.png)no-repeat 0 0; width: 16px; height: 16px; margin-right:10px;}
 
/* 푸터영역*/
#footer {background: #333;}
#footer .footer_text {padding: 20px 0;}
#footer .footer_text p {color: #fff; margin-bottom: 10px;}

/*반응형*/
@media (max-width : 1600px) {
    #section2 .box_wrap2 {flex-wrap: wrap;}
    .box_wrap2 .lft {display: none;}
    .box_wrap2 .rgt {width: 100%!important;}
    .rgt1 {background: #fef9f1; padding: 20px; border-radius: 30px; max-width: 1200px; margin: 30px auto; }
    .rgt1 h3 {background: none;}
    .rgt2 {text-align: center;}
    .info3 ul {justify-content: center;}
}


@media (max-width : 1430px) {
#mv {flex-wrap: wrap;}
#mv .mvimg {width: 50%;}
.well {display: none;}
.come {display: none;}

.mv_tx p {text-align: center; font-size: 25px; padding: 50px 0;}

    

}


@media (max-width : 1100px){
#section1 .box_wrap ul {flex-wrap: wrap;}
#section1 .box_wrap ul li {width: 100%;  border-bottom: 1px solid #999; }
#section1 .box_wrap ul li:last-child {border-bottom: none; }
#section1 .box_wrap ul li::after {display: none;}
#section1 .box_wrap ul li .box_in {  display: flex;}
#section1 .box_wrap ul li .box_in a img {width: 100%; display: block; }
 #section1 .box_wrap ul li .box_in .r_trans{width: 50%;}
}
@media(max-width : 997px){
    
    
}
@media (max-width : 767px){
#section1 .tit_h2 h2 {font-size: 40px;}
#section1 .tit_h2 p {font-size: 18px;}
 #section1 .box_wrap ul li .box_in {width: 100%;}
#section1 .box_wrap ul li .box_in a {width: 50%;}
#section1 .box_wrap ul li .box_in a img {width: 100%; display: block; }

#section1 .box_wrap ul li .box_in .tx_box h3 {font-size: 16px; padding: 30px 0 15px 0;}
#section1 .box_wrap ul li .box_in .tx_box p {font-size: 16px; padding: 15px 0 15px 0; color: #666;}

#section1 .box_wrap ul li .box_in .btn a { padding: 15px 15px; font-size: 16px;}
   
    
    .rgt2 {flex-wrap: wrap;}
    .info1 {width: 100%;}
    .info2 {width: 100%;}
    .info3 {width: 100%;}
    .info4 {width: 100%;}

    
} 

@media (max-width : 550px) {
    #mv .mvimg {width: 100%;}

    .projects ul li {width: 50%;}
#section1 .box_wrap ul li .box_in {  display: flex; flex-wrap: wrap;}
#section1 .box_wrap ul li .box_in a {width: 100%;}
     #section1 .box_wrap ul li .box_in .r_trans{width: 100%;}

}