@charset "utf-8";
@import url(setting.css);
/* ************************************************************************************************************************************************************
						《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/*
	z-index 위계
	#header			100
*/

/* ============================== [ 레이아웃 리셋 Layout Reset ] ========================================================================================== */
/* Reset */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,big,cite,code,del,dfn,font,figure,figcaption,img,ins,q,s,samp,small,strike,sub,sup,tt,var,
b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font:16px/1.2em 'Pretendard',sans-serif;}
button,input,textarea {font:16px/1.2em 'Pretendard',sans-serif;}
select {font:16px/1.2em 'Pretendard',sans-serif;}
.go_view {position:absolute; left:0; top:0; height:100%; width:100%;}
figure img {display:block; width:100%; height:auto; object-fit:cover;}
.img_wrap img {display:block; width:100%; height:auto; object-fit:cover;}
a {display: block;}
* {word-wrap:break-word; word-break:keep-all; box-sizing: border-box;}
.dot {position: relative;}
.dot::before {display: block; content: ''; width: 3px; height: 3px; background: rgb(197, 197, 199); border-radius: 50%; position: absolute; left: 3px; top: 8px;}
/* ============================== [ 공통레이아웃 ] ========================================================================================== */
#wrap {background-color: #b8b8b8; width: 100%; height: 100vh;}
.toggle_btn {width: 21px; height: 46px;  border-radius: 0px 9px 9px 0px; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background-color: #fff; border:1px solid #f0f0f0}
.toggle_btn span {background: url(../images/ico_lnb.png) no-repeat;display: block; width: 8px; height: 12px; transform: rotate(180deg); position: absolute; left: calc(50% - 4px); top: calc(50% - 6px);}

#sidebar.active span {transform: rotate(0);}
/* -------------------- #sidebar ---------------------------------------- */
#sidebar {width: 390px; height: 100vh;  background-color: #fff; position: fixed; left: 0; top: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;}
#sidebar.active {left: -390px;}
#sidebar.dt_on.active {left: -860px;}

.srch_bar {padding: 15px 25px; border-bottom: 1px solid #f0f0f0;}
.srch_bar .box {height: 42px; border: 2px solid rgb(25, 206, 96); border-radius: 5px; padding-left: 45px; padding-right: 42px; position: relative;}
.srch_bar .box .btn_search {width: 24px; height: 24px; position: absolute; left: 9px; top: 8px; background: url(../images/ico_srch.png) no-repeat 0 0;}
.srch_bar .box input {height: 100%; width: 100%;}
.srch_bar .box .clear {position: absolute; right: 0; top: 0;width: 42px; height: 39px;}
.srch_bar .box .clear::after {display: block; content: ''; width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../images/ico_clear.png) no-repeat 0 0;}

.lnb {height: 100%; z-index: 10; position: relative; background-color: #fff;}
.lnb ul li {padding: 20px 20px 30px; display: flex;}
.lnb ul li ~ li {border-top: 1px solid #f0f0f0;}
.lnb ul li .txt_wrap {flex:1;}
.lnb ul li .tit h3 {font-size: 17px; color: #0068c3;}
.lnb ul li .tit h3 span {margin-left: 4px; font-size: 15px; color: #939396;}
.lnb ul li .info {margin-top: 3px;}
.lnb ul li .info span:first-child {font-size: 15px; color: #222;}
.lnb ul li .info span:last-child {font-size: 15px; color: #555; padding-left: 13px;}
.lnb ul li .addr {margin-top: 3px; position: relative;}
.lnb ul li .addr strong {font-size: 15px; font-weight: 700; color: #222;}
.lnb ul li .addr a {display: inline-block; padding-left: 13px; font-size: 15px; color: #555; position: relative; padding-right: 15px;}
.lnb ul li .addr a::after {display: block; content: ''; width: 12px; height: 8px; background: url(../images/addr_arr.png) no-repeat 0 0; position: absolute; right: 0; top: 5px;}
.lnb ul li .addr a.on::after {transform: rotate(180deg);}
.lnb ul li .img_wrap {width: 88px; height: 88px; position: relative; border-radius: 12px; overflow: hidden; }
.lnb ul li .img_wrap span {display: block; width: 22px; height: 22px; line-height: 24px; background-color: rgba(0,0,0,.6); border-radius: 50%; position: absolute; right: 4px; bottom: 4px; color: #fff; font-weight: 600; font-size: 11px; text-align: center;}

.page {display: flex; align-items: center; justify-content: center; height: 40px; width: 100%; position: absolute; left: 0; bottom: 0; border-top: 1px solid #f0f0f0;}
.page a {width: 24px; height: 24px;}
.page .num {font-size: 13px; line-height: 24px; text-align: center; border-radius: 50%;}
.page .num.active {color: #0475f3;}
.page .num:hover {background-color: #f8f8f8;}
.page .prev {background: url(../images/page_prev.png) no-repeat center; background-size: 12px;}
.page .next {background: url(../images/page_next.png) no-repeat center; background-size: 12px;}

.addr_pop {display: none; width: 340px; position: absolute; left: 0; top: calc(100% + 10px); background-color: #fff; box-shadow: 0 3px 6px 0 rgba(0,0,0,.1),0 0 6px 0 rgba(0,0,0,.05); border-radius: 12px; z-index: 1;}
.addr_pop .inner {padding: 16px 32px 16px 16px;}
.addr_pop.on {display: block;}
.addr_pop div {overflow: hidden; color:rgb(85, 85, 88); font-size: 14px;}
.addr_pop div ~ div {margin-top: 5px;}
.addr_pop div span {display: inline-block; padding: 0 4px; border-radius: 2px; border:1px solid rgba(217, 217, 220); font-size: 11px; line-height: 18px;}
.addr_pop div span.type_bk {color: #555; background-color: rgba(233, 233, 236);}
.addr_pop div button {display: inline-block; color: #0068c3; font-size: 14px;}
.addr_pop .pop_close {width: 28px; height: 28px; background: url(../images/pop_close.svg) no-repeat center; background-size: 12px; position: absolute; right: 8px; top: 12px; }

/* 상세 */
.detail_wrap {position: absolute; left: -100%; top: 40px; height: calc(100vh - 80px); width: 430px; border-radius: 15px; overflow-y: auto; background-color: #fff; z-index: 9; opacity: 0;}
.detail_wrap.active {left: calc(100% + 40px); opacity: 1;}
.detail_wrap .btn_wrap {z-index: 1; position: absolute; left: 0; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.detail_wrap .btn_wrap .back {width: 44px; height: 44px; background: url(../images/ico_back.svg) no-repeat center; background-size: 12px 21px;}
.detail_wrap .btn_wrap .close {width: 44px; height: 44px; background: url(../images/ico_dt_close.svg) no-repeat center; background-size: 18px;}
.detail_wrap .img_wrap {overflow: hidden; height: 200px; width: 100%; background-color: #000;}
.detail_wrap .img_wrap .img {width: 200px;}
.detail_wrap .tit_area {padding: 20px; border-bottom: 1px solid #f0f0f0;}
.detail_wrap .tit_area h2 {font-size: 20px; font-weight: 700; color: #222;}
.detail_wrap .tit_area h2 span {font-size: 15px; color: #939393; margin-left: 5px; font-weight: 400;}
.detail_wrap .tab {border-bottom: 1px solid #f0f0f0;}
.detail_wrap .tab ul {display: flex;}
.detail_wrap .tab ul li {flex:1;}
.detail_wrap .tab ul li a {width: 100%; font-size: 17px; text-align: center; color: #939393; padding: 13px; position: relative;}
.detail_wrap .tab ul li.active a {font-weight: 700; color: #222;}
.detail_wrap .tab ul li.active span {position: relative;}
.detail_wrap .tab ul li.active span::after {display: block; content: ''; width: 100%; height: 1px; background-color: #222; position: absolute; left: 0; bottom: -14px;}
.detail_wrap .content ul li.active {display: block;}
.detail_wrap .content ul li {display: none; width: 100%; padding: 24px;}