@charset "utf-8";


/*  공통 */
html { padding:0; margin:0; }
body, body * { padding:0; margin:0; font-size:18px; line-height:25px;  border:0; outline:0; position:relative; }
ul, li { list-style:none; }
.wrap { width:100%; max-width:780px; margin:0 auto; position:relative; }
.wrap img { width:100%; }
nav.nav_wrap { width:100%; text-align:center; position:fixed; bottom:0; left:0;  z-index:100; background:#ded8ce; padding:10px; box-sizing:border-box; }
nav.nav_wrap>ul.nav { display:grid;  grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:780px; justify-content:center; margin:0 auto; }
button.go-to  {width:100%; height:50px; background:#fff; color:#352b06; border-radius:10px; border:1px solid #c3baa1; cursor:pointer; }
i.fa-phone-volume { display:inline-block; font-size:17px; position:relative; top:0; margin-right:5px; }
.wrap ul.con_wrap { display:flex; flex-wrap:wrap; flex:0;}
.wrap ul.con_wrap>li { width:100%; line-height:0 }
.wrap ul.con_wrap>li.bg { background:url("songdo_img/background.jpg") repeat-y center; height:auto;  padding:0 0 30px 0; text-align:center;  }
.wrap ul.con_wrap>li.bg>a { display:inline-flex;  align-items:center; justify-content:center; width:150px; padding:5px 0;  background:#43380b; color:#efefed; text-align:center; margin:5px 5px 5px 0; border-radius:5px; text-decoration:none;  font-size:14px; }
.wrap ul.con_wrap>li.bg.page01 { padding:120px 0 80px 0;}
.wrap ul.con_wrap>li.bg.page01 img { width:80%;}
ul.voice_wrap { width:90%; margin:0 auto; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;  }
ul.voice_wrap li { display:flex;   height:40px;  align-items:center; justify-content:space-between;  position:relative; margin:0 5px 10px 5px; background:rgba(255,255,255,.6); border:1px solid #c3baa1; border-radius:30px; padding:5px 5% 5px 7%}
ul.voice_wrap li span.voice { display:inline-block; font-size:18px; line-height:22px; word-break:keep-all;  color:#352b00; margin-right:10px; font-weight:500;    }
.btn_wrap { display:inline-block; height:35px; }
button.v_btn { border:2px solid #d0c7b7; color:#fff; overflow:hidden; border-radius:100%;   font-size:1px; width:35px; height:35px; line-height:20px;  cursor:pointer;  position:relative; }
button.v_btn>span {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
button.v_btn.play { margin-right:0px; }
button.play:after { display:block; content:""; position:absolute;  top:50%;  left:50%; transform:translate(-30%,-50%); width: 0; height: 0; border-style: solid; border-width: 6px 0px 6px 8px; border-color: transparent transparent transparent #665023;  }
button.stop:after {display:block; content:""; position:absolute; top:50%;  left:50%; transform:translate(-40%,-50%); width:8px; height:12px; border-left:3px solid #665023; border-right:3px solid #665023; box-sizing: border-box;}

.wrap ul.con_wrap li.bg02 {  background:#43380b; padding-top:70px; }
.wrap ul.con_wrap>li:last-child { padding-bottom:90px; }
#daumRoughmapContainer1766976369421 { width:86% !important; margin:0 7% !important;   }
.cont { display:none; }
.roughmap_maker_label .roughmap_lebel_text { font-size:14px !important; padding:10px !important }
.root_daum_roughmap .wrap_controllers { padding:15px 10px !important; }
.root_daum_roughmap .wrap_controllers .wrap_btn_roadview .txt { font-size:14px; }


a.top_btn { display:flex; justify-content:center; align-items:center; position:fixed; bottom:150px; right:5%; width:40px; height:40px; line-height:40px; text-align:center; background:rgba(119,94,41,.7);  background-size:15px; border-radius:100%; border:3px solid rgba(255,255,255,.5); z-index:9999;  text-decoration:none; }
a.top_btn:before { display:block; content:""; position:absolute; top:9px; left:50%; width:5px; height:5px; transform:translateX(-50%) rotate(45deg); border-left:2px solid #fff; border-top:2px solid #fff; }
a.top_btn span { display:flex; height:auto; padding-top:0; margin-top:8px; color:#fff; box-sizing:border-box; font-size:13px; font-family:'Outfit','Noto Sans KR','Malgun Gothic','나눔 고딕', sans-serif; font-weight:500; text-decoration:none; position:relative; }
a.top_btn>i.arrow { position:relative; top:22px; }
a.top_btn>i.arrow:before { border-color:#fff; border-top-left-radius:2px; }

@media(max-width:550px){
i.fa-phone-volume {  font-size:15px; top:1px; margin-right:3px; }
.wrap ul.con_wrap li.bg>a { width:calc(50% - 20px); min-height:30px; line-height:18px; }
.wrap ul.con_wrap li.bg.page01 { padding:18% 0;} 
.wrap ul.con_wrap li.bg02 { padding-top:15%; }
ul.voice_wrap { width:90%; max-width:230px; flex-wrap:wrap; }
ul.voice_wrap li  { width:100%; padding: 5px 7% 5px 10%; margin:0 0 10px 0;}
button.go-to { font-size:14px; }
#daumRoughmapContainer1766976369421 { width:80% !important;  margin:0 10% !important;   }
#daumRoughmapContainer1766976369421>.wrap_map{ height:250px !important;}
.roughmap_maker_label .roughmap_lebel_text { font-size:13px !important; }
}

@media(max-width:360px){ 
.wrap ul.con_wrap li.bg.page01 { padding:15% 0;}
button.go-to { height:40px; }
}