@charset "utf-8"; /*common*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 13px; background-color:#fff; line-height:normal; color:#36342f; letter-spacing:0px; text-align: left; word-break: keep-all; } 
.kor { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } 
.en { font-family: 'Montserrat', sans-serif; font-weight: 500; } 
html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p, button, input { margin: 0; padding: 0 } 
ul, ol, dl { list-style: none } 
ul { list-style: none; padding: 0; margin: 0 } 
img, fieldset, iframe { border: 0 } 
img { vertical-align:top } 
input, select, button { font-family: 'Noto Sans KR', sans-serif; vertical-align: middle; } 
input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; } 
textarea:focus, input:focus { outline: none; } 
textarea { font-family: 'Noto Sans KR', sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
button, input { position: relative; border:none; } 
button { cursor:pointer; outline: none; border:none; } 
em, address { font-style: normal } 
a { text-decoration: none; color: inherit; display: block; position: relative; } 
.clear { clear: both; } 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 
* { -webkit-tap-highlight-color:transparent } 
img.map, map area { outline: none; } 
img::-moz-selection { background-color: transparent; color: #000; } 
img::selection { background-color: transparent; color: #000; } 

.relative { position: relative; } 
.blind { font:0/0 a; height: 0; overflow: hidden; position: absolute; width: 0; } 
.obj { position: absolute; z-index: 2; } 

.pc{display: block;}
.mobile{display: none;}

#wrap { position: relative; } 

.pcmain{display: block;}
.pcmain{top: 0%;left: 0%; width:100%; height:100%; position: absolute; z-index: 1000;}
.pcmain .logo{width:80px; top: 50%;left: 50%; transform: translate(-50%, -50%); position: absolute;}
.pcmain .logo.end{top:23px; left:50px;}

/* header */
header { text-align:center; position:absolute; z-index: 999; width: 100%; position: fixed; background-color: #eae6db;} 
header .wrap {width:500px; margin:0px auto; box-sizing:border-box; padding: 20px 0px;} 
header h1 { position: absolute; top:20px; left: 30px; } 
header h1 img {width:96px; height:auto; } 
header ul {float:left;} 
header ul li { margin:0 3px; display: inline-block; } 
header ul li.active a{ font-weight:700; } 
header ul li a {padding:5px 10px; color:#fff;} 
header h3{display: inline-block; margin-left:15px;}
header h3 span { display: inline-block; vertical-align: middle; margin-top: -5px; } 
header h1 a img.type2{display: none;}
header h3 a img.type2{display: none;}

/* footer */
footer { height:200px; background-color:#eae6db; } 
footer .wrap { width: 1000px; margin:0 auto; box-sizing:border-box; padding-top:33px; overflow: hidden;} 
footer h2 { position: absolute; left: 38px; } 
footer h2 img{width:96px; height:auto;} 
footer .contact { float: right; } 
footer .contact p { display:inline-block; } 
footer .contact p+p { padding-left:70px; } 

#wrap #content { width: 100%; height: 100vh; min-height:850px; position: relative; box-sizing: border-box; overflow: hidden;} 
#wrap.sub #content{padding-top:110px;}
#wrap #content .wrap { width: 100%; height: 100%; } 

/* sub */
#wrap > header > div > h3 > a > span.pc > img{ width: 115px; margin-top: 4px; }
#wrap.sub { background-color:#eae6db; } 
#wrap.sub header h1 a img.type1{display: none;}
#wrap.sub header h1 a img.type2{display: block;}
#wrap.sub header h3 a img.type1{display: none; margin-top: 7px;}
#wrap.sub header h3 a img.type2{display: block; margin-top: 7px;}
#wrap.sub header li a { color:#000000; } 
#wrap .sub-menu {margin-top:20px; overflow: hidden;} 
#wrap .sub-menu ul {
  /* text-align: right; */
   display:none; float:none} 
#wrap.sub .sub-menu li { margin:0 15px; display:inline-block; } 
#wrap.sub .sub-menu li.active a { color:#000; font-weight: 500; } 
#wrap.sub .sub-menu li a { color:#bbb7ae; } 
#wrap.sub .content-wrap { height: 100%; margin: 0 auto; position:relative; } 

/* home */
#wrap.home header{background-color: transparent;} 
#wrap.home #content .main-bg {background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; background-position: center; } 
#wrap.home #content .main-bg .swiper{width:100%; height:100%; position: absolute;}
#wrap.home #content .main-bg .swiper-container{width:100%; height:100%; position: absolute;}
#wrap.home #content .main-bg .swiper-slide{background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; background-position: center; }

/* about_message */
#wrap.about.message { } 
#wrap.about.message .content-wrap { max-width: 1585px; } 
#wrap.about.message .content-wrap>div { position:absolute; width: 50%; } 
#wrap.about.message .left { left:0; bottom: 150px; padding-left: 230px; box-sizing: border-box; } 
#wrap.about.message .left p { font-weight:400; } 
#wrap.about.message .left p+p { margin-top:25px; } 
#wrap.about.message .left p:last-of-type { margin-top:47px; } 
#wrap.about.message .right { right:0; top:0; background-image:url(../images/about_message_ceo.jpg); background-size: contain; background-position-x: right; background-repeat: no-repeat; height: 95%; max-width: 720px; background-position-y: top; } 

/* about_characteristic */
#wrap.about.characteristic .content-wrap { width: 1098px; display: flex; align-items: center; flex-direction: row-reverse; } 
#wrap.about.characteristic .right { width: 50%; margin-right: 20px; } 
#wrap.about.characteristic .right dl+dl { margin-top:35px; } 
#wrap.about.characteristic .right dt { font-weight:700; margin-bottom:3px; } 
#wrap.about.characteristic .right dd { font-weight:400; } 

/* about_index */
#wrap.about.index .content-wrap { padding:0 80px; } 
#wrap.about.index .year-wrap { position:absolute; top:25%; } 
#wrap.about.index .year-cate li { display:inline-block; } 
#wrap.about.index .year-cate li+li { margin-left:105px; } 
#wrap.about.index .year-cate li.active a { color:#36342f; } 
#wrap.about.index .year-cate li a { color:#8d8a82; } 
#wrap.about.index .year-content { } 
#wrap.about.index .year-content>div { display:none; margin-top: 30px; } 
#wrap.about.index .year-content>div.active { display:block; } 
#wrap.about.index .year-content ul { display: inline-block; } 
#wrap.about.index .year-content ul+ul { margin-left:8vw; } 
#wrap.about.index .year-content ul li { color:#8d8a82; font-size:12px; font-weight:400; margin-bottom: 8px; cursor:pointer;} 
#wrap.about.index .year-content ul li em { color:#36342f; } 
#wrap.about.index .year-content ul li em::after { content:'|'; color:#36342f; margin: 0 7px; } 

/* project */
#wrap.project #content { height: auto; padding-top:0px;} 
#wrap.project #content .wrap { display:flex; align-items: center; } 
#wrap.project .content-wrap { width:100%; } 
#wrap.project .con {height : 100vh; min-height:750px; position:relative;  display: flex; align-items: center; justify-content: center } 
/* 세로이미지 테스트 */
/* #wrap.project .con .bg { width: 100%; height:auto; filter: saturate(0%) brightness(95%);}  <원본 */
/* #wrap.project .con .bg  { width: 100%; height: 800px; object-fit: cover; object-position: center center; filter: saturate(0%) brightness(95%);}  */
/* #wrap.project .con .bg { max-width: 1100px; height: 800px; object-fit: cover; object-position: center center; filter: saturate(0%) brightness(95%); display: block; margin: auto;}  */
#wrap.project .con .bg { max-width: 1100px; height: 800px; object-fit: cover; object-position: center center; filter: saturate(0%) brightness(95%);display: block; margin: auto;} 
#popup_project_detail .img img {max-width: 100%; object-fit: cover; object-position: center center;} 

#wrap.project .con>div:hover .txt { opacity:1; }
/* 세로이미지 테스트 */ 
/* #wrap.project .con .txt { opacity:0; text-align: center; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(215 212 205 / 85%); display: flex; align-items: center; justify-content: center; flex-direction: column; }  */
#wrap.project .con .txt { opacity:0; text-align: center; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; position:absolute; top: 0; left: 0; width: 100%; height: 800px; background-color: rgb(215 212 205 / 85%); display: flex; align-items: center; justify-content: center; flex-direction: column; } 

#wrap.project .con .txt .title { font-size:18px; margin-bottom:30px; } 
#wrap.project .con>div {width:1100px; position: relative;
 margin-top:95px; 
} 

/* recruit */
#wrap.recruit .content-wrap { width: 1000px; display: flex; align-items: center; flex-direction: row-reverse; } 
#wrap.recruit .right {} 
#wrap.recruit .right .title { display:inline-block; vertical-align: top; margin-right: 48px; margin-top: 3px; } 
#wrap.recruit .right .title img{width:185px;}
#wrap.recruit .right .txt { display:inline-block; } 
#wrap.recruit .right .t1 { margin-bottom:35px; } 
#wrap.recruit .right p { margin-bottom:12px; } 
#wrap.recruit .right p a { display:inline-block; } 
#wrap.recruit .right p span { width:60px; display:inline-block; } 

/* contact */
#wrap.contact .content-wrap { width: 1000px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-left: 250px; } 
#wrap.contact .content-wrap2 { width: 500px;margin:auto; margin-top:160px; justify-content: center; box-sizing: border-box;} 
#wrap.contact .top { } 
#wrap.contact .top .title { width:180px; font-size:18px; display:inline-block; vertical-align: top; margin-top: 3px; } 
#wrap.contact .top .info { display:inline-block; } 
#wrap.contact .top .info p+p { margin-top:22px; } 
#wrap.contact .top .info p:last-child { margin-top:0; } 
#recruit-content{margin-top :-15px !important;}
#wrap.contact .top .logo img{width:105px;}
#wrap.contact .bottom { margin-top:100px; } 
#wrap.contact .bottom .title { width:180px; font-size:18px; display:inline-block; vertical-align: top; margin-top: 3px; } 
#wrap.contact .bottom .mail-form { display:inline-block; width: 550px; } 
#wrap.contact .bottom .mail-form li { margin-bottom:14px; } 
#wrap.contact .bottom .mail-form li .title { font-size:13px; width: 20%; font-weight: 400; } 
#wrap.contact .bottom .mail-form li span { width: 70%; display: inline-block; margin-top: 0; vertical-align: middle; } 
#wrap.contact .bottom .mail-form li span input { border:1px solid #bfbbaf; background-color: transparent; height: 28px; padding:0 10px; } 
#wrap.contact .bottom .mail-form li span input[type="text"] { width: 100%; } 
#wrap.contact .bottom .mail-form li span input[type="number"] { width: 100%; } 
#wrap.contact .bottom .mail-form li span textarea { resize:none; width: 100%; border:1px solid #bfbbaf; background-color: transparent; height:128px; padding:5px 10px; } 
#wrap.contact .bottom .mail-form li span input[type="checkbox"] { position: absolute; width: 0px; height: 0px; padding: 0; margin: -1px; overflow: hidden; border: 0; } 
#wrap.contact .bottom .mail-form li span input[type="checkbox"] + label { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; display:inline-block; position:relative; padding-left:20px; cursor:pointer; color:#8d8a82; } 
#wrap.contact .bottom .mail-form li span input[type="checkbox"] + label:before { content:''; position:absolute; left:0; top:3px; width:13px; height:13px; text-align:center; border:1px solid #8d8a82; box-sizing:border-box; border-radius: 50%; } 
#wrap.contact .bottom .mail-form li span input[type="checkbox"]:checked + label:after { content: ''; position:absolute; top:3px; left:0; width:13px; height:13px; border:1px solid #8d8a82; box-sizing: border-box; border-radius: 50%; background:#8d8a82; } 
#wrap.contact .bottom .mail-form li.type li { display:inline-block; margin-right:25px; } 
#wrap.contact .bottom .mail-form .filebox { } 
#wrap.contact .bottom .mail-form .filebox .upload-name { display: inline-block; padding: 0 10px; vertical-align: middle; border: 1px solid #bfbbaf; width: 75%; color: #8d8a82; height: 28px; } 
#wrap.contact .bottom .mail-form .filebox label { display: inline-block; color: #fff; vertical-align: middle; background-color: #36342f; cursor: pointer; height: 28px; margin-left: 1px; padding: 0 17px; line-height: 28px; } 
#wrap.contact .bottom .mail-form .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } 
#wrap.contact .bottom .mail-form .agree {padding-left:25px; margin-top:20px; margin-left:21%; position: relative; } 
#wrap.contact .bottom .mail-form .agree input { position: absolute; width: 0px; height: 0px; padding: 0; margin: -1px; overflow: hidden; border: 0; } 
#wrap.contact .bottom .mail-form .agree label {top:0px; left:0px; position:absolute; cursor:pointer; } 
#wrap.contact .bottom .mail-form .agree input[type="checkbox"] + label:before { content:''; position:absolute; left:0; top:2px; left:0px; width:17px; height:17px; text-align:center; border:1px solid #8d8a82; box-sizing:border-box; border-radius: 3px; } 
#wrap.contact .bottom .mail-form .agree input[type="checkbox"]:checked + label:after { content: ''; position:absolute; top:2px; left:0; width:17px; height:17px; border:1px solid #8d8a82; box-sizing: border-box; border-radius: 3px; background:#8d8a82; } 
#wrap.contact .bottom .mail-form .agree span {text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: #8d8a82; font-weight: 400; } 
#wrap.contact .bottom .mail-form .send { display: block; color: #fff; vertical-align: middle; background-color: #36342f; cursor: pointer; height: 28px; margin-left: 1px; line-height: 28px; width: 108px; text-align: center; margin: 0 auto; margin-top: 30px; } 


/* de archium */
#wrap.dearchium { background-color:#9c867a; } 
#wrap.dearchium header{background-color:#9c867a; } 
#wrap.dearchium #content { height: auto; padding-top:0px;} 

#wrap.dearchium header h1 a img.type1{display: block;}
#wrap.dearchium header h1 a img.type2{display: none;}
#wrap.dearchium header h3 a img.type1{display: block;}
#wrap.dearchium header h3 a img.type2{display: none;}

#wrap.dearchium header ul li a { color:#fff;} 
#wrap.dearchium .content-wrap { width: 100%;} 
#wrap.dearchium .con .txt p { color:#eae6db;} 
#wrap.dearchium .con .txt p+p { margin-top:20px; } 
#wrap.dearchium #content .wrap { display:flex; align-items: center; } 
/* 20231205 슬라이드 수정test */
/* #wrap.dearchium .con { position:relative; height: 100vh; min-height:750px; display: flex; align-items: center; justify-content: center;}  */
#wrap.dearchium .con {margin: 250px 0px; position: relative; display: flex; align-items: center; justify-content: center; }
#wrap.dearchium .con1{margin-bottom: 170px;}
#wrap.dearchium .con2 {margin-top:0px;} 
/* // */

#wrap.dearchium .con>div { width: 100%; max-width:1300px; position: relative; display: flex; align-items: center; justify-content: flex-end; } 
#wrap.dearchium .con1>div {flex-direction: column; align-items: flex-end; justify-content: center; } 
#wrap.dearchium .con2>div{flex-direction: row-reverse; justify-content: right;}
#wrap.dearchium .con4>div{flex-direction: row-reverse; justify-content: right;}
#wrap.dearchium .con1 .txt { margin-top:60px; margin-right:90px; } 
#wrap.dearchium .con2 .img { margin-right:40px; } 
#wrap.dearchium .con2 .img img{width:380px;}
#wrap.dearchium .con2 .txt { margin-right:60px; margin-top: 188px; } 
#wrap.dearchium .con3 .img { margin-right:90px; } 
#wrap.dearchium .con3 .img img{width:560px;}
#wrap.dearchium .con4 .txt { margin-right:70px; margin-top: 150px; } 
#wrap.dearchium .con5 .img { margin-right:80px; } 
#wrap.dearchium .con5 .img img{width:390px;} 
#wrap.dearchium .con5 .img dl{display: flex; justify-content: flex-end;}
#wrap.dearchium .con5 .img dl+dl{margin-top:20px;}
#wrap.dearchium .con5 .img dl dt{margin-right:25px; color:#eae6db;}
#wrap.dearchium .con5 .txt { margin-top: -380px; } 


/*팝업*/
.popup {margin:0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 9999; box-sizing: border-box; text-align: center; display: none; background-color: #eae6db; } 
.popup:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em; } 
.popup .wrap { max-width:1380px; width: 80%; margin:0 auto; vertical-align: middle; position: relative; z-index: 2; display: inline-block; } 

.popup .close { width:28px; height:28px; background:url(../images/popup_close.png) no-repeat; background-size: contain; background-repeat: no-repeat; background-position: center; top:-60px; right:90px; position: absolute; z-index: 2; cursor:pointer; } 
.popup .close a { width:100%; height:100%; top:0%; left:0%; position: absolute; font-size:0px; } 
.popup .content { text-align:left;} 

#popup_project_detail { } 
#popup_project_detail .content {padding-left:340px; position: relative; } 
#popup_project_detail .txt {width:330px; bottom: 65px; left:0px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; position: absolute; } 
#popup_project_detail .txt p { } 
#popup_project_detail .txt .title { font-size:18px; margin-bottom:30px; } 
#popup_project_detail .img { overflow-y: scroll; height:70vh; padding-right: 10px; } 
#popup_project_detail .img div.con{clear:both; margin-bottom:30px;}
#popup_project_detail .swiper-container-vertical>.swiper-pagination-progressbar { right:0; left:auto; } 
#popup_project_detail .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#000; } 
/* 스크롤바 */
#popup_project_detail ::-webkit-scrollbar { width:5px;  background-color: #eae6db; } 
#popup_project_detail ::-webkit-scrollbar-thumb { background-color: #acabab; } 

#popup_contact_personal { } 
#popup_contact_personal .close { top: -100px; right:0px; } 
#popup_contact_personal .wrap { width:900px; padding-left:0; } 
#popup_contact_personal .content { float:right; } 
#popup_contact_personal .txt .title { font-size:18px; margin-bottom:23px; } 
#popup_contact_personal .txt div p:nth-child(even) { margin-bottom:20px; } 
#popup_contact_personal .txt div p:nth-child(odd) { margin-bottom:7px; } 

/* 메인 수정  */
/* #wrap.home header .wrap{padding-top:0px; display: flex; align-content: center; flex-wrap: wrap; justify-content: center; height: 100vh;} */
/* #wrap.home header ul {width: 100%;} */
/* #wrap.home header li{display: block;width: 100%; font-size: 15pt; line-height: 50px; } */
/* #wrap.home header h3{margin-top:30px; margin-left:0px; top:auto; right:auto; position: relative;} */

@media screen and (max-height: 960px){
  #wrap.project .cont>div { width: 860px; height: 561px; } 
}

/* 모바일 */
@media (max-width: 1000px){
  .pc{display: none;}
  .mobile{display: block;}
  /* 1208 */
  #wrap img{
    width:100%; 
    height:auto;}

  #menu-container > h3 > a > span.mobile {margin-top: 1.3px; margin-left: 15.5px;}
  #wrap.sub header h3 a img.type2{margin-top: 0px;}
  #wrap.dearchium header h3 a img.type1{margin-top: 0px;}
  #wrap.home .intro{top: 0%;left: 0%; width:100%; height:100%; position: absolute; z-index: 1000;}
  #wrap.home .intro .logo{width:80px; top: 50%;left: 50%; transform: translate(-50%, -50%); position: absolute;}
  #wrap.home .intro .logo.end{top:23px; left:50px;}

  header h1{width:80px; top:15px; left:10px;}
  header h3{width:110px; top:15px; right:10px; position: absolute; }
  #wrap.sub header h3{width:90px; top:20px;}
  header .wrap{width:auto; padding-top:50px;}
  header ul{float:none;}
  header ul li a{padding:5px;}
  #wrap .sub-menu{margin-top:10px;}
  #wrap .sub-menu ul{text-align: center;}
  #wrap.sub .sub-menu li{margin:0px 7px;}
  #wrap.sub .sub-menu li a{font-size:12px;}

  #wrap.home header{position: absolute;}
  #wrap.home header .wrap{padding-top:0px; display: flex; align-content: center; flex-wrap: wrap; justify-content: center; height: 100vh;}
  #wrap.home header ul{width:100%;}
  #wrap.home header ul li{font-size:14px; margin:20px 0px; display: block;}
  #wrap.home header li{display: block;width: 100%; font-size: 15pt; line-height: 20px; }
  /* #wrap.home header h3{margin-top:30px; margin-left:0px; top:auto; right:auto; position: relative;} */

  footer {padding:30px 10px; height:auto; position: relative;} 
  footer h2{width: 80px;top: 35px; right: 10px; left:auto;}
  footer .wrap { width: auto; padding-top:0px; } 
  footer .contact{margin:60px 0px 0px 0px; float:none;}
  footer .contact p{font-size:10px; text-align: right; display: block;}
  footer .contact p+p{padding-left:0px;}

  #wrap #content{min-height:auto;}
  #wrap.sub #content{font-size:12px; padding-top:130px; height:auto;}
  #wrap #content .wrap{width:auto; height:auto;}
  #wrap.sub .content-wrap{width:100% !important; padding-left: 0px;  padding-right: 0px;}

  #wrap.about.message .content-wrap>div{width:auto; position: relative;}
  #wrap.about.message .right{height:100vw; margin-left:33vw;}
  #wrap.about.message .left{padding:30px 20px; bottom:auto;}
  #wrap.about.message .left p+p{margin-top:20px;}
  #wrap.about.message .left p:last-of-type{margin-top:20px;}

  #wrap.about.characteristic .right { width: 80%; margin:0px auto; padding:40px 0px;} 
  #wrap.about.characteristic .right dl { margin-bottom:30px; } 

  #wrap.about.index .content-wrap{padding:0px;}
  #wrap.about.index .year-wrap{margin:30px 15px; position: relative;}
  #wrap.about.index .year-cate{overflow: hidden;}
  #wrap.about.index .year-cate li{width:25%; float:left; text-align: center;}
  #wrap.about.index .year-cate li+li{margin-left:12%;}
  #wrap.about.index .year-content ul{width:100%; display: block;}
  #wrap.about.index .year-content ul+ul{margin-left:0px;}

  #wrap.project .con{height:auto; min-height:auto; margin:20px auto;}
  #wrap.project .con>div{height:auto;}
  #wrap.project .con .txt{padding:10px; width:auto; height:auto; display: block; top:auto; left:auto; position: relative; opacity: 1; background-color: transparent; text-align: left;
  clear: both;
  }
  #wrap.project .con .txt .title{font-size:12px; margin-bottom:0px;}
  #wrap.project .con .txt div{display: none;}

  #popup_project_detail .close{top:10px; right:10px;}
  #popup_project_detail .wrap{width:98%; height:100%; overflow: hidden;}
  #popup_project_detail .content{height:100%; overflow-y: auto; padding-left:0px;}
  #popup_project_detail .img{padding-right:0px; height:auto; overflow-y: hidden;}
  #popup_project_detail .img div.con{margin-bottom:7px;}
  #popup_project_detail .txt{font-size:11px; margin:15px; margin-top:0px; width:auto; bottom:0px; position: relative; clear: both;}
  #popup_project_detail .txt .title{font-size:12px; margin-bottom:0px;}

  #wrap.recruit .content-wrap{display: block; margin-bottom:50px;}
  #wrap.recruit .right{padding:40px 30px;}
  #wrap.recruit .right .title{margin-bottom:30px;}
  #wrap.recruit .right .title img{width:150px;}

  #wrap.contact #content .wrap{padding:20px;}
  #wrap.contact .top .title{font-size:15px; margin-bottom:20px; display: block;}
  #wrap.contact .bottom .title{font-size:15px; margin-bottom:20px; display: block;}
  #wrap.contact .top .logo img{width:80px;}
  #wrap.contact .top .info p+p{margin-top:15px;}
  #wrap.contact .bottom{margin-top:50px;}
  #wrap.contact .bottom .mail-form{width:100%;}
  #wrap.contact .bottom .mail-form li{margin-bottom:10px;}
  #wrap.contact .bottom .mail-form li .title{font-size:12px; width:28%; margin-bottom:0%;}
  #wrap.contact .bottom .mail-form li span{position: relative;}
  #wrap.contact .bottom .mail-form li.type li{margin-right:8px; margin-bottom:5px;}
  #wrap.contact .bottom .mail-form li span textarea{height:70px;}
  #wrap.contact .bottom .mail-form .filebox .upload-name{width:68%;}
  #wrap.contact .bottom .mail-form .filebox label{width:30%; position: absolute; top:0px; right:0px; margin:0px; padding:0px; text-align: center;}
  #wrap.contact .bottom .mail-form .agree{margin-left:10%;}
  #wrap.contact .content-wrap2 {padding-left: 0px;margin-top:0px; } 

  #wrap.dearchium #content .wrap{padding:0px 15px 30px 50px;}
  #wrap.dearchium .con{margin: 0px; min-height:auto; height:auto; margin-bottom:80px; display: block;}
  #wrap.dearchium .con>div {height: auto; display: block;} 
  #wrap.dearchium .con1 .txt{margin:0px; margin-top:20px;}
  #wrap.dearchium .con2 .img{margin:0px;}
  #wrap.dearchium .con2 .img img{width:100%;}
  #wrap.dearchium .con2 .txt{margin:0px; margin-top:20px;}
  #wrap.dearchium .con3 .img{margin:0px;}
  #wrap.dearchium .con3 .img img{width:100%;}
  #wrap.dearchium .con4 .img img{width:80%;}
  #wrap.dearchium .con3 .txt{margin-top:20px;}
  #wrap.dearchium .con4 .txt{margin:0px; margin-top:20px;}
  #wrap.dearchium .con5 .img{margin:0px;}
  #wrap.dearchium .con5 .img img{width:100%;}
  #wrap.dearchium .con5 .img dl{display: block;}
  #wrap.dearchium .con5 .img dt{margin-bottom:10px;}
  #wrap.dearchium .con5 .txt{margin-top:0px; margin-top:20px;}
  
  /* test */
  #wrap.dearchium .con1{margin-bottom: 150px;}
  #wrap.dearchium .con3 {margin:150px 0px;} 
  #wrap.dearchium .con4 {margin:150px 0px;} 
  #wrap.dearchium .con5 {margin-top: 100px;}
/* test */


  #popup_contact_personal .close{width:20px;}
  #popup_contact_personal .wrap{width:90%; font-size:12px;}
  #popup_contact_personal .txt .title{font-size:13px; font-weight: 500;}
  
/* 새로이미지관련 */
  /* #wrap.project .con .bg {height:auto; object-fit: contain;  filter: saturate(0%) brightness(95%);}  */
  #wrap.project .con .bg {height:auto; object-fit: contain;  filter: saturate(0%) brightness(95%);} 
  #popup_project_detail .img img {max-width: none;  display: block; margin: auto;} 


  #wrap.project .con>div {margin-top:0px; }
}

/* ================================================================
   2026-09 수정 모음  (여기서부터 끝까지가 이번에 고친 부분입니다)
   · PC = @media (min-width: 1001px)   핸드폰 = @media (max-width: 1000px)
   · 같은 항목을 두 번 쓰지 않도록 정리했습니다. 고칠 때는 여기만 보시면 됩니다.
   ================================================================ */

/* ---------- 1. 하위메뉴 줄(Company ~ Index) 가운데 정렬 ---------- */
/*  인스타그램·유튜브 탭을 뺀 뒤 4개 기준으로 다시 맞췄습니다.             */
#wrap.sub .sub-menu { overflow:visible; }
#wrap.sub .sub-menu ul { white-space:nowrap; }

/* 선택 안 된 글자색(검정의 60%) / 선택된 글자 굵기 */
#wrap.sub .sub-menu ul.m1 li a { color:#666666; }
#wrap.sub .sub-menu ul.m1 li.active a { color:#000; font-weight:600; }

/* ---------- 2. PC 상단 ---------- */
@media (min-width: 1001px){
  /* 스크롤바가 생겼다 사라졌다 하며 메뉴가 흔들리지 않게 자리 확보 */
  html { overflow-y:scroll; scrollbar-gutter:stable; }

  /* 윗줄 전체를 가운데로 (원래 float 때문에 왼쪽으로 밀려 있었음) */
  #wrap header .main-menu { float:none; display:inline-block; vertical-align:middle; }
  header .wrap { width:720px; padding-top:40px; }   /* 글자줄 20px 아래로 */
  #wrap.sub #content { padding-top:130px; }         /* 머리글이 길어진 만큼 본문 시작도 내림 */

  /* 글자 크기 (원래 크기 13px) */
  #wrap header .main-menu li a { font-size:13px; padding:5px 10px; }
  #wrap.sub .sub-menu li a { font-size:13px; }
  #wrap.sub .sub-menu { margin-top:24px; }
  #wrap.sub .sub-menu li { margin:0 18px; }   /* ★ 항목 사이 간격. 키우면 넓어집니다 */

  /* 로고 : 크기와 높이 (글자 아랫선에 맞춤) */
  header h1 { top:44px; }
  header h1 img { width:96px; }
  header h3 { margin-left:18px; }
  #wrap header h3 a span.pc img.type1,
  #wrap header h3 a span.pc img.type2 { width:115px; }
  #wrap.home header h3 a span.pc { position:relative; top:1px; }
  #wrap.sub  header h3 a span.pc { position:relative; top:2px; }

  /* 첫 화면 가운데 de Archiis 로고 - 원래 파일 그대로 */
  .pcmain .logo { width:80px; }
  .pcmain .logo img { width:136px; height:auto; max-width:none; }
}

/* ---------- 3. 핸드폰 하위메뉴 ---------- */
/*  6개였을 때는 화면 양끝까지 벌려 넣었는데(justify-content:space-between),
    4개가 된 지금은 그러면 너무 벌어져 보여서 가운데 모음으로 되돌렸습니다.
    ★ 항목 사이 간격은 아래 margin, 글자 크기는 font-size 숫자로 조절합니다. */
@media (max-width: 1000px){
  #wrap.sub .sub-menu ul { width:auto; max-width:100%; position:static; left:auto; transform:none;
                           text-align:center; white-space:nowrap; }
  #wrap.sub .sub-menu ul.m1[style*="block"] { display:block !important; }
  #wrap.sub .sub-menu ul.m1 li { margin:0 9px; float:none; display:inline-block; }
  #wrap.sub .sub-menu ul.m1 li a { font-size:12px; font-size:min(12px, 3.1vw); letter-spacing:0; }
  #wrap.sub .sub-menu li { margin:0 9px; }
  #wrap.sub .sub-menu li a { font-size:12px; }
}

/* ---------- 4. PC 하단(주소줄) ---------- */
@media (min-width: 1001px){
  footer .wrap { display:flex; justify-content:flex-start; align-items:baseline;
                 width:880px; max-width:100%; padding-left:24px; padding-right:24px; }
  footer h2 { position:static; left:auto; margin-right:46px; }   /* 로고를 주소 왼쪽에 */
  footer h2 img { position:relative; top:4px; }
  footer .contact { float:none; }
  footer .contact p+p { padding-left:40px; }
}

/* ---------- 5. PC ABOUT 네 화면 : 하위메뉴 아래 여백을 똑같이 ---------- */
/*  아래 139px 네 개를 같이 바꾸면 네 화면이 계속 같은 높이에서 시작합니다  */
@media (min-width: 1001px){
  #wrap.about.company #content .company-text { margin-top:139px; }
  #wrap.about.message .content-wrap { padding-top:139px; }
  #wrap.about.characteristic .content-wrap { padding-top:139px; box-sizing:border-box; }
  #wrap.about.index .year-wrap { top:139px; }
}

/* ---------- 6. PC Company ---------- */
@media (min-width: 1001px){
  #wrap.about.company #content .company-text p { font-size:13px; }
  #wrap.about.company #content .company-text p.lead { font-size:16px; }
}

/* ---------- 7. PC Message (사진 30% 작게, 글·사진 가운데, 아래끝 맞춤) ---------- */
@media (min-width: 1001px){
  #wrap.about.message #content { height:auto; min-height:0; padding-bottom:70px; }
  #wrap.about.message #content .wrap { display:flex; align-items:center; }
  #wrap.about.message .content-wrap { display:flex; justify-content:center; align-items:flex-end;
                                      max-width:none; width:100%; height:auto; gap:77px;
                                      padding-left:30px; padding-right:30px; box-sizing:border-box; }
  #wrap.about.message .content-wrap>div { position:static; }
  #wrap.about.message .content-wrap>div.left { padding-left:0; bottom:auto; left:auto; width:auto; flex:0 1 auto; order:1; }
  #wrap.about.message .right { right:auto; top:auto; width:345px; height:500px; max-height:none;
                               flex:0 1 345px; min-width:280px; order:2;
                               background-size:contain; background-position:center; }
  #wrap.about.message .left p { font-size:13px; line-height:2.05; }
  #wrap.about.message .pc.left p:last-of-type { margin-top:47px; }   /* 서명 위 간격 */
}

/* ---------- 8. PC Characteristic ---------- */
@media (min-width: 1001px){
  #wrap.about.characteristic #content { height:auto; min-height:0; padding-bottom:130px; }
}

/* ---------- 9. PC INDEX ---------- */
/*  목록 시작선 : 숫자를 키우면 왼쪽, 줄이면 오른쪽  */
@media (min-width: 1001px){
  #wrap.about.index .content-wrap { padding-left:calc(50% - 211px); }
}

/* ---------- 10. 핸드폰 INDEX : 최근 것이 위로 ---------- */
/*  PC 는 왼쪽 위가 과거, 오른쪽 아래가 최근.
    핸드폰은 한 줄로 이어지므로 순서를 뒤집어 최근 것이 위에 오게 한다  */
@media (max-width: 1000px){
  #wrap.about.index .year-content>div.active { display:flex !important; flex-direction:column-reverse; }
  #wrap.about.index .year-content ul { display:flex; flex-direction:column-reverse; }
}

/* ---------- 11. 내용이 짧은 화면에서 아래쪽 흰 여백 없애기 ---------- */
/*  화면보다 내용이 짧으면 body 바깥이 흰색으로 비쳤습니다. 기본 바탕색으로 채웁니다  */
html { background-color:#eae6db; }
#wrap.dearchium { min-height:100vh; }   /* 이 화면만 바탕색이 갈색이라 화면을 꽉 채우게 */

/* ---------- 12. 내용이 짧아도 주소줄(footer)은 화면 맨 아래에 ---------- */
#wrap { display:flex; flex-direction:column; min-height:100vh; }
#wrap > footer { margin-top:auto; }

/* ---------- 13. PROJECT 화면 : 사진 위 글상자가 좁아져 줄바꿈이 많아지는 것 방지 ---------- */
@media (min-width: 1001px){
  #wrap.project .con > div { width:1100px; max-width:100%; flex:0 0 auto; }
  #wrap.project .con .bg   { width:100%; max-width:100%; }
  #wrap.project .con .txt  { width:100%; min-width:360px; box-sizing:border-box; padding:0 20px; }
  #wrap.project .con .txt .title { white-space:nowrap; }
}

/* ---------- 14. PC : ABOUT 네 화면의 높이를 같게 (하단 주소줄 위치 통일) ---------- */
/*  ★ 하단 주소줄 위치는 아래 height 숫자 하나로 정해집니다 (네 화면 공통)
       숫자를 키우면 주소줄이 내려가고, 줄이면 올라갑니다.
         690px = 이전 (Company 글 끝 ~ 주소줄 사이 350px)
         875px = 지금 (그 간격의 1.5배인 525px)            */
@media (min-width: 1001px){
  #wrap.about.company #content,
  #wrap.about.message #content,
  #wrap.about.characteristic #content,
  #wrap.about.index #content { height:875px !important; min-height:0 !important; padding-bottom:0 !important; }

  /* 네 화면 모두 내용이 같은 높이에서 시작하도록 위쪽 정렬 */
  #wrap.about.characteristic .content-wrap { align-items:flex-start; }
  #wrap.about.message #content .wrap { align-items:flex-start; }
  #wrap.about.message .right { height:420px; }   /* 사진 크기 */
}

/* ---------- 15. CONTACT 화면 : 주소 오른쪽에 인스타그램 · 유튜브 + 알게 된 경로 ---------- */
/*  ★ 주소(www.dearchiis.co.kr) 와 Instagram 사이의 간격은 아래 left 숫자 하나로 정해집니다.
       숫자를 키우면 멀어지고, 줄이면 가까워집니다.
         PC     : 145px  (주소 글자폭 115px + 간격 30px)
         핸드폰 : 126px  (주소 글자폭 106px + 간격 20px)                       */
#wrap.contact .top .info { position:relative; }
#wrap.contact .top .info p.sns-links { position:absolute; bottom:0; margin:0; white-space:nowrap; }
#wrap.contact .top .info p.sns-links a { display:inline-block; color:#36342f;
                                         border-bottom:1px solid transparent; }
#wrap.contact .top .info p.sns-links a + a { margin-left:30px; }
#wrap.contact .top .info p.sns-links a:hover { border-bottom-color:#36342f; }

@media (min-width: 1001px){
  #wrap.contact .top .info p.sns-links { left:145px; }
}
@media (max-width: 1000px){
  #wrap.contact .top .info p.sns-links { left:126px; font-size:12px; }
  #wrap.contact .top .info p.sns-links a + a { margin-left:22px; }
}


/* ---------- 16. CONTACT 문의칸 : 선택 동그라미·글자색 통일 ---------- */
/*  '프로젝트 유형' 이 흐린 회색(#8d8a82) 이어서 '알게 된 경로' 와 달라 보였습니다.
    두 줄 모두 본문과 같은 진한색(#36342f) 동그라미 + 진한 글씨로 맞춥니다.
    (두 줄 다 중복 선택 가능한 체크박스입니다)
    ★ 색을 바꾸려면 아래 #36342f 를 모두 같은 값으로 고치면 됩니다.            */
#wrap.contact .bottom .mail-form li span input[type="checkbox"] + label {
  font-family:'Noto Sans KR', sans-serif; font-weight:400; display:inline-block;
  position:relative; padding-left:20px; cursor:pointer; color:#36342f; }

#wrap.contact .bottom .mail-form li span input[type="checkbox"] + label:before {
  content:''; position:absolute; left:0; top:3px; width:13px; height:13px;
  border:1px solid #36342f; box-sizing:border-box; border-radius:50%; }

#wrap.contact .bottom .mail-form li span input[type="checkbox"]:checked + label:after {
  content:''; position:absolute; top:3px; left:0; width:13px; height:13px;
  border:1px solid #36342f; box-sizing:border-box; border-radius:50%; background:#36342f; }

/* ---------- 17. CONTACT 문의칸 : 선택 항목과 왼쪽 제목의 수평 맞춤 (PC) ---------- */
/*  '알게 된 경로' / '프로젝트 유형' 의 보기 항목에 아래쪽 여백 14px 이 붙어 있어서
    왼쪽 제목이 7px 아래로 내려가 보였습니다. PC 에서는 한 줄로 다 들어가므로
    그 여백을 없애 제목과 보기 항목이 같은 높이에 오게 합니다.
    (핸드폰은 두 줄로 나뉘므로 기존 줄간격 5px 을 그대로 둡니다)               */
@media (min-width: 1001px){
  #wrap.contact .bottom .mail-form li.type span li { margin-bottom:0; }
}

/* ---------- 18. PC Characteristic : 내용을 화면 가운데로 ---------- */
/*  오른쪽으로 치우쳐 있던 글 묶음을 화면 한가운데로 옮깁니다.
    ★ 좌우 위치는 아래 left 숫자 하나로 조절합니다.
          0px  = 정가운데 (지금)
        -40px  = 왼쪽으로 40px 이동
         40px  = 오른쪽으로 40px 이동
    ★ 위아래 위치는 위쪽 5번 칸의 139px (네 화면 공통) 으로 조절합니다.   */
@media (min-width: 1001px){
  #wrap.about.characteristic .content-wrap { justify-content:center; max-width:100%; box-sizing:border-box; }
  #wrap.about.characteristic .content-wrap > div.pc.right {
      width:max-content; max-width:100%; margin-right:0;
      position:relative; left:0px; }
}