@charset "utf-8";
/**
* import
*/
@import url("../../common/css/reset.css");
@import url("../../common/css/style.css");
@import url("../../common/css/common.css");
@import url("../../common/css/ui.css");
@import url("../../common/css/inplus.layer.css?after");
@import url("../../common/css/inplus.select.css");
@import url("../../common/css/inplus.sms.css");
@import url("../../common/css/inplus.datepicker.css");
@import url("../../common/css/inplus.clone.css");
@import url("../../common/css/inplus.calendar.css");
@import url("../../common/css/inplus.auto_list.css");

@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css");
.flex{display: flex;}
::selection{background-color: red; color: #ffffff; opacity: 1;}
::-webkit-scrollbar {background-color:#fff;}
::-webkit-scrollbar-track{border: 2px solid #fff; box-sizing:border-box;}
::-webkit-scrollbar-thumb {background-color: red;}
::-webkit-scrollbar-thumb:hover{background: #222;}
a{}
button{color: #222;}
.red{color: red;}
.txt.txt42{font-size: 42px}
.txt.gray{color: #666;}
.txt.txt600{font-weight:600}
.txt.txt800{font-weight: 800}
/**
* Common Style
*/
div.button { margin-top:30px; }
button { display:inline-block; width:auto; height:auto; margin:0; padding:0; border:0; background:0; cursor:pointer; }
.blind{position:absolute;overflow:hidden;top:0;bottom:100%;width:1px;background:none}

.center { text-align:center; }
.txt_left { text-align:left; }
.txt_right { text-align:right; }

/* 글자 border*/
.txt_bd{text-shadow:-1px -1px 0 #222,  1px -1px 0 #222, -1px 1px 0 #222,  1px 1px 0 #222; /*-webkit-text-stroke: 1px #222;*/ color:#fff; }
/* 글자 그림자*/
.txt_sc{text-shadow:5px 5px rgba(36,96,206,0.3);}
/* 글자 크기 */
.tit{font-size:8rem;}
.tit_l{font-size:4.8rem;}
.tit_m{}
.tit_s{font-size:2.8rem;}
.txt_xl{font-size:2.4rem;}
.txt_l{font-size:2.2rem;}
.txt_m{font-size:2rem;}
.txt{font-size:1.8rem;}
.txt_s{font-size:1.4rem;}
/* 글자 색 */
.txt_bk{color:#222;}
.txt_gr{color:#666;}

div.button > div.left {float: left;width: 50%;}
div.button > div.right {width: 50%;float: right; text-align: right;}

/**
* input
*/
input.text,
input.searchbox,
textarea.textarea,
select.select {
  -webkit-appearance: none;
  -webkit-appearance: none; /* 화살표 없애기 for chrome*/
  -moz-appearance: none;    /* 화살표 없애기 for firefox*/
}
select::-ms-expand {
  display: none;            /* 화살표 없애기 for IE10, 11*/
}

a{text-decoration:none !important; color:#666;}
/*input.text:hover,*/
/*input.text:focus{border:0 !important; background:transparent; outline:0;}*/

select.select{background:url("../../common/img/ico_select_arrow.png") right center no-repeat; background-size:44px;}

/**
 * common
 */
.pc_hidden{display:none !important;}

.primary{color:#e7161a !important;}
.secondary{color:#0d2c5a !important;}
.third{color:#ec3845 !important;}
.bg_primary{background-color:#e7161a !important; color:#fff;}
.bg_secondary{background-color:#0d2c5a !important; color:#fff;}
.bg_third{background-color:#ec3845 !important; color:#fff;}
.bg_softgray{background-color:#ec3845;}

.group:after{ display:block; clear:both; content:"";}
ul.group > li{float:left;}
.group > div.left{float:left;}
.group > div.right{float:right;}


.thin{font-weight:400 !important;}
.bold{font-weight:600 !important;}
.bolder{font-weight:800 !important;}
.txt_bk{color:#222 !important;}
.txt_bg{color:#444 !important;}
.txt_gr{color:#666 !important;}

.txt_dot{ position:relative; padding-left:15px;}
.txt_dot:before{position:absolute; left:0; top:10px; content:""; display:block; width:3px; height:3px; border-radius:50%; background:#999;}

ul.list_dot{}{padding:0 4%;}
ul.list_dot li{font-weight:300; position:relative; padding-left:15px; box-sizing:border-box;}
ul.list_dot li:before{position:absolute; left:0; top:11px; content:""; display:block; width:3px; height:3px; border-radius:50%; background:#999;}

div.inner{margin:0 auto; width:1366px;}

input.text{height:4.5rem; padding: 0 .5rem; line-height:4.5rem; font-size:1.5rem; box-sizing: border-box;}
input:focus {outline: 2px; outline-color:#ec2929; outline-style:solid; }

.txt.txt14{font-size: 14px;}

/**
* Layout Style
*/
*{box-sizing: border-box; font-family:'Noto Sans KR'!important;}
html {width:100%; font-size:10px; font-family:'Noto Sans KR'!important;}
body {background-color: #fff; font-size:1.6rem;letter-spacing: -0.6px; line-height: normal; font-family:'Noto Sans KR'!important;}
body, button, input, select, textarea{}
textarea.textarea{font-size:1.6rem;}
a{color: #222;}

/* body */
body {color:#222; font-size:1.6rem; font-weight: 400; word-break: keep-all;}

/* wrap */
#wrap {position:relative; min-width:136rem; width:100%; overflow: hidden;/* font-size:75%; */}

/* header */

#header {top:10px; left: 2%; align-items: center; display: flex; justify-content: space-between; position:fixed; z-index:200; width:100%;}
#header h1 {width: 160px; height:60px; background: url("./img/logo.png") center center no-repeat;}
#header h1 a{display: block; width: 100%; height: 100%;}
/* depth 1  */
#gnb {position: fixed; align-items: center; right: 2%; top:10px; z-index: 999; mix-blend-mode: difference;}
#gnb > ul{display: flex;}
#gnb > ul > li{position: relative;}
#gnb > ul > li > a {transition:ease all 0.3s; position: relative; padding: 0 8px; margin: 0 4px; font-weight: 600; font-size: 26px; color: #fff;}
#gnb > ul > li > a:hover:before{width: 100%; height: 4px; background-color: #fff; content: ""; display: block; position: absolute; bottom: -10px; right: 0px;}
#gnb > ul > li.new > a:after{content: "new";color: #000;background-color: #fff;border-radius: 100px;padding: 0px 6px 3px;font-size: 11px;position: absolute;font-weight: 800;top: -12px;left: -6px;}
#gnb > ul > li:nth-child(4){display: none;}
#gnb > ul > li:nth-child(5){display: none;}
#gnb div.gnb-btn{margin-left: 12px; width: 55px; height: 50px; border:2px solid #fff;}
#gnb div.gnb-btn > button{ padding:10px 12px;display: flex;align-items:baseline; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; }
#gnb div.gnb-btn > button > span{transition:ease all 0.3s; width: 100%; height: 5px; background-color: #fff; display: block;}
#gnb div.gnb-btn > button:hover{ }
#gnb div.gnb-btn > button:hover > span{border-radius: 100px;}
#gnb div.gnb-btn > button:hover > span:nth-child(1){width:70%;}
#gnb div.gnb-btn > button:hover > span:nth-child(2){width:96%;}
#gnb div.gnb-btn > button:hover > span:nth-child(3){width:80%;}

div.gnb-on.open{right: 0;}
div.gnb-on.open div.gnb-btn {display: block;}
div.gnb-on{transition: ease all 0.3s; overflow: scroll; padding: 62px; position: fixed;width: 100%;top: 0;right: -100%;background: #fff;height: 100vh;z-index: 999;}
div.gnb-on ul.gnbM > li > a{display: block; border-bottom: 4px solid #222; position: relative; padding:12px 0; font-size: 42px;font-weight:800;color: #222;text-transform: uppercase;}
div.gnb-on ul.gnbM > li.new > a:after{content: "new"; color: #fff; background-color: red; border-radius: 100px; padding: 12px 22px;font-size: 26px;}
div.gnb-on ul.gnbM > li > a:hover{color: red;}
div.gnb-on div.gnb-btn{display: none; position: fixed; top: 10px;right: 2%; margin-left: 12px; width: 55px; height: 50px; border:2px solid #222;}
div.gnb-on div.gnb-btn > button{transition: ease all 0.3s; padding:10px 12px;display: flex; flex-direction: column;  width: 100%; height: 100%; }
div.gnb-on div.gnb-btn > button > span{transition:ease all 0.3s; width: 100%; height: 5px; background-color: #222; display: block;}
div.gnb-on div.gnb-btn > button > span:nth-child(1) {transform: rotate(45deg) translateY(6px) translateX(7px);}
div.gnb-on div.gnb-btn > button > span:nth-child(2) {transform: rotate(-45deg) translateY(4px) translateX(-3px);}
div.gnb-on div.gnb-btn > button:hover{background-color: red; }
div.gnb-on div.gnb-btn > button:hover > span{border-radius: 100px; background-color: #fff;}
div.gnb-on ul.link-ul {padding-top: 62px;}
div.gnb-on ul.link-ul li > div {
  background-color: #0072ff;
  box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.4);
  margin-bottom: 3%;
  transition: ease 0.6s all;
  width: 20%;
  border-radius: 20px;
  overflow: hidden;
}
div.gnb-on ul.link-ul li > div:hover{
  /*box-shadow: -20px -16px 0px 0px #4f96ff;*/
  transform: skew(0deg, -2deg) !important;
}

div.gnb-on ul.link-ul li > div > a{
  position: relative;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding:50px 30px;
}
div.gnb-on ul.link-ul li > div > a > div.txt-box{
  position: relative;
  z-index: 1;
}
div.gnb-on ul.link-ul li > div > a > div.txt-box > p.tt{
  padding-top:20px;
  font-weight:800;
  font-size:25px;
  margin-bottom:50px;
}
div.gnb-on ul.link-ul li > div > a p.m05-btn{
  position: relative;
  z-index: 1;
  background-color: #fff;
  width: fit-content;
  padding: 14px 20px;
  border-radius: 10px;
  color: #222;
  align-items: center;
  font-weight: 800;
  font-size: 16px;
  animation: ico05-btn 2s alternate infinite;
}
div.gnb-on ul.link-ul li > div > a div.ico-box{
  position: absolute;
  right:4%;
  bottom:12%;
  width:160px;
}
div.gnb-on ul.link-ul li > div > a div.ico-box div{
  transition: ease all 0.4s;
  position: relative;
}
div.gnb-on ul.link-ul li > div > a div.ico-box > div.ico05-01{
  top:44px;
  left:0;
}
div.gnb-on ul.link-ul li > div > a div.ico-box > div.ico05-02{
  top:40px;
  left:80px;
}
div.gnb-on ul.link-ul li > div > a div.ico-box > div.ico05-03{
  top:72px;
  left:0px;
}
div.gnb-on ul.link-ul li > div > a div.ico-box > div.ico05-06{
  animation: ico05-06 3s alternate infinite;
  top: 42px;
  right: -28px;
  width:200px;
}
div.gnb-on ul.link-ul li > div > a div.ico-box > div.ico05-06 > img{
  width:100%;
  height:100%;
}
div.gnb-on ul.link-ul li > div:hover > a div.ico-box > div.ico05-01{
  left:66px;
}
div.gnb-on ul.link-ul li > div:hover > a div.ico-box > div.ico05-02{
  left:-60px;
}
div.gnb-on ul.link-ul li > div:hover > a div.ico-box > div.ico05-03{
  left:60px;
  transform: rotate(20deg);
}
div.gnb-on ul.link-ul li > div:hover > a div.ico-box > div.ico05-06{
  top: 90px;
}




  /*div.gnb-on ul.link-ul li a {*/
/*  display: block;*/
/*  color: #222;*/
/*  padding: 10px;*/
/*  border-radius: 20px;*/
/*  border: 2px solid #222;*/
/*  font-size: 20px;*/
/*  width: fit-content;*/
/*}*/
/*div.gnb-on ul.link-ul li a:hover{background-color: #222; color: #fff;}*/

  /* container */
#container {overflow: hidden; width:100%; min-width:980px; *zoom:1; }
#container div.containerWrap {position:relative; /*background: #eee; padding: 6rem 0 0;*/ z-index:0;}
#container div.containerWrap:before,
#container div.containerWrap:after{display:block; content:""; position: absolute; z-index:-1;}
#container div.containerWrap:before{top:0; right:0; width:55rem; height:13.4rem; background:url("./img/bg_container1.png") no-repeat;}
#container div.containerWrap:after{bottom:0; left:0; width:80rem; height:30rem; background:url("./img/bg_container2.png") no-repeat;}

/* content */
#title_path {}
#title_path a{display:inline-block; position:relative; height:50px; line-height:50px; font-size:1.4rem; font-weight:300; color:#fff;}
#title_path a:before{display:inline-block; padding:0 5px; content:"\e940"; color:#eee; font-family:"xeicon" !important; font-weight:300 !important;}
#title_path a:first-child:before{content:"\e900";}

/* content */
#content {position:relative; padding:18rem 0 18rem; box-sizing:border-box; }
#content div.sub_title{text-align: left; margin-bottom:7rem;}
#content div.sub_title h3{position:relative; display:inline-block; font-size:3.8rem; line-height:120%; font-weight:800; color:#222; margin-bottom:0;}
body.sub #content div.sub_title h3{  opacity: 0;  animation-duration: 1s; animation-delay: .5s; animation-iteration-count: 1;}

#content > #article {position:relative;}
/*#content > #article h4 {padding-left:30px;font-weight:600;font-size:20px;line-height:24px;background:url("img/bu_h4.png") 0 5px no-repeat;color:#333;}*/
/*#content > #article h4{position:relative; margin-bottom:1.5rem; padding-left:2.2rem; line-height:120%; font-size:3rem; font-weight:500; color:#222;}*/
/*#content > #article h4:before{display:block; content:""; position: absolute; top:.6rem; left:.5rem; width:0.6rem; height:2.5rem; background-color:#35437f; transform: skew(-25deg);}*/
#content > #article div.con {margin-top:35px;}
#content > #article p.bu {padding-left:10px;background:url("img/bu_dot.gif") 0 50% no-repeat;}
#content > #article div.cont_area{background:none;}
#content > #article div.cont_area:first-child{margin-top:0;}
#content > #article ul.list > li{position:relative; padding:.3rem 0 .3rem 1rem; line-height:150%;}
#content > #article ul.list > li:before{position:absolute; top:1.4rem; left:0; display:block; content:""; width:.4rem; height:.4rem; background:#999; border-radius:50%;}
#content > #article ul.list > li.tit{font-size:2.5rem;}
#content > #article ul.list > li.tit:before{top:2rem;}
#content p.guidance{position:relative; padding-left:18px; margin-top:.8rem; color:#888; line-height:130%; font-size:1.5rem;}
#content p.guidance i{position: absolute; top:1px; left:0; }

#content > #article div.sub_title_txt{}
#content > #article div.sub_title_txt p{font-size:1.8rem; color:#444;}

/* quick */
#quick{position:fixed; bottom:0; background:#222;  width:100%; transition:all 0.5s;}
#quick.on{position:relative;}
#quick.web{background:#f3b007;}
#quick.star{ background: #db3333;}
#quick.sms{background: #2460ce;}
#quick.cs{background: #72be09;}
#quick.kakao{background: #fcd000;}
#quick.com{background: #00c73c; }



#quick div.inner{}
#quick div.inner > ul > li{position:relative; width:16.66%; height:6rem; line-height:6rem; text-align:center; z-index:5;}
#quick div.inner > ul > li > a{display:block; width:100%; color:#fff; }
#quick div.inner > ul > li > div.txt_box{display:block; opacity: 0; transition:all 1s; position:absolute; top:0; left:-4rem; width:18rem; height:6rem;  border:1px solid #ddd; background:#fff; box-sizing:border-box;  text-align:left;}
#quick div.inner > ul > li > div.txt_box:before{opacity: 0; transition:all 1s; position:absolute; top:1rem; left:1rem;  z-index:-1; content:""; display:block;  width:17.2rem; height:5.2rem; border:4px solid #f3b007; }
#quick div.inner > ul > li > div.txt_box:after{opacity: 0; transition:all 1s; position:absolute; bottom:-2.1rem; right:0.5rem; content:""; display:block; width:0.8rem; height:2.8rem; background:url("./img/bg_quick.png")0 0 no-repeat;}
#quick div.inner > ul > li > div.txt_box p{ width:100%; height:100%; line-height:1.5; background: #fff; padding:1rem 0.5rem; box-sizing: border-box;}
#quick div.inner > ul > li:hover{}
#quick div.inner > ul > li:hover > a{font-weight:800; font-size:1.8rem;}
#quick div.inner > ul > li:hover > div.txt_box{top:-10rem; }
#quick div.inner > ul > li:hover > div.txt_box,
#quick div.inner > ul > li:hover > div.txt_box:before,
#quick div.inner > ul > li:hover > div.txt_box:after{opacity:1;}

#quick div.inner > ul > li.star > div.txt_box:before{border:4px solid #db3333;}
#quick div.inner > ul > li.sms > div.txt_box:before{border:4px solid #2460ce;}
#quick div.inner > ul > li.cs > div.txt_box:before{border:4px solid #72be09;}
#quick div.inner > ul > li.kakao > div.txt_box:before{border:4px solid #fcd000;}
#quick div.inner > ul > li.com > div.txt_box:before{border:4px solid #00c73c;}


/* footer */
#footer {position:relative;width:100%;height:auto;border-top:1px solid rgba(255,255,255,0.2); background:#222; z-index:25;}
#footer div.footerWrap{position:relative; padding-bottom:5rem; box-sizing:border-box; font-size:14px;}
#footer div.footerWrap > div.f_util {margin-top:3.5rem; }
#footer div.footerWrap > div.f_util > div a{display:block; padding:0 1.5rem; height:4rem; line-height:4rem;}
#footer div.footerWrap > div.f_util > div.left{background:none;}
#footer div.footerWrap > div.f_util > div.left a{padding-left:0;}
#footer div.footerWrap > div.f_util > div.on a{font-weight:600; color:#fff;}
#footer div.footerWrap > div.f_util > div.right{position:relative; border:1px solid #ddd; width:18rem;}
#footer div.footerWrap > div.f_util > div.right a{color:#ddd;}
#footer div.footerWrap > div.f_util > div.right i{position:absolute; right:1.5rem; top:1rem;}
#footer div.footerWrap div.f_info p.center_tit,
#footer div.footerWrap div.f_info dl,
#footer div.footerWrap div.f_info dl dt,
#footer div.footerWrap div.f_info dl dd{display:inline-block;}
#footer div.footerWrap div.f_info p.center_tit,
#footer div.footerWrap div.f_info dl{padding-right:18px; color:#777; font-weight:400; }
#footer div.footerWrap > p.copy { color:#777; font-weight:400;}
div.ff-flex{display: flex; align-items: center;}
div.ff-flex > p {color: #666;}
div.ff-flex > div.img-box{margin-left: 24px; width: 140px;}
div.ff-flex > div.img-box > img{width: 100%; mix-blend-mode: screen;}
/**
* layer popup
*/

#layer_back { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:990; width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
#layer_back.open { display:block; }
#layer_popup { display:none; position:fixed; top:50%; left:50%; z-index:995; width:600px; height:600px; background-color:#fff; margin:-300px 0 0 -300px; border:1px solid #000; }
#layer_popup.open { display:block; }
#layer_header { position:relative; width:100%; height:55px; background-color:#00aeef; }
#layer_header > h1 { width:80%; margin-left:15px; line-height:50px; color:#fff; font-size:20px; font-weight:bold; }
#layer_header > button { position:absolute; top:13px; right:13px; z-index:996; width:24px; height:24px; margin:0; padding:0; border:0; cursor:pointer; background:none; }
#layer_header > button > i { font-size:24px; color:#fff; }
#layer_content { height:500px; padding:20px 20px 0 20px; margin-bottom:0; overflow-y:auto; *zoom:1;  box-sizing: border-box;}
#layer_content h2 { height:20px; line-height:20px; margin-top:30px; color:#3c3c3c; font-weight:bold; }
#layer_content h2:first-child { margin-top:0; }

/* 레이어팝업 - 뉴스레터 */
#layer_popup {width:510px; height:500px;}
/*#layer_popup #layer_content p{width:350px; margin-top:10px; padding-left:50px; text-align:center; font-weight:bold; font-size:16px; color:#333;}*/
#layer_popup #layer_content form ul{ margin:2rem 0 1rem; padding:20px 0; border-top:2px solid #666; border-bottom:2px solid #666;}
#layer_popup #layer_content form ul li {position:relative;padding-left:20px; padding-bottom:15px; font-size:16px; font-weight:bold;  color:#555; line-height:4.5rem;}
#layer_popup #layer_content form ul li:last-child{padding-bottom:0;}
#layer_popup #layer_content form ul li input {position:absolute; left:100px; top:0; width:60%;}
#layer_popup #layer_content form ul li.check_point{margin-top:1rem; padding-top:1rem; border-top:1px solid #ddd;}
#layer_popup #layer_content form ul li.check_point p{text-align:left; font-weight:500; padding:1rem 0; font-size:1.6rem;}
#layer_popup #layer_content form ul li.check_point div label{font-size:1.4rem; font-weight:400; margin-right: 9rem;}
/*#layer_popup #layer_content form ul li.check_point div label:before{background:#fff;}*/
#layer_popup #layer_content div.agree {font-size:14px;}
#layer_popup #layer_content div.btn_group {margin-top:2rem; text-align:center; font-size:14px; }
#layer_popup #layer_content div.btn_group button.apply,
#layer_popup #layer_content div.btn_group a.apply {display:inline-block; width:90px;  height:40px; line-height:40px; font-weight:bold; background-color:#0062c3; color:#fff;}
#layer_popup #layer_content div.btn_group button.cancel,
#layer_popup #layer_content div.btn_group a.cancel{display:inline-block; width:90px; height:40px; line-height:40px; font-weight:bold; background-color:#555; color:#fff;}

/**
* layer loading
*/
#layer_loading { display:none; position:fixed; top:50%; left:50%; z-index:999; width:200px; height:200px; margin:-100px 0 0 -100px; }
#layer_loading > p { width:200px; height:140px; padding:30px 0; text-align:center; }
#layer_loading > p > i {font-size:100px; color:#eee; }
#layer_loading > p > strong { display:inline-block; margin:10px 0; font-size:12px; font-weight:bold; color:#fff; }

/* 레이어팝업 */
#popup_area{ display:block; position:fixed; top:50%; left:50%; z-index: 999; transform:translate(-50%, -50%); width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
.popup_list{margin: 5% auto 0; z-index:1000; width:50rem; height:auto; background:transparency;  }

.popup_cs > a{display:block; width: 100%; }
.popup_cs > a > img,
.popup_cs > img{width:100% !important; height:100% !important;}
.popup_bottom {position:relative; margin:0 auto; width:50rem;  text-align: center; z-index:999;}
.popup_bottom a {display:block;color:#111; border-radius:2.5rem; line-height: 5rem; background:rgba(255,255,255,0.8)}
.popup_bottom span {padding:0 5px;}
.popup_bottom .popup_allday{width:22.5rem; height:5rem; font-size:2rem; cursor: pointer;}
.popup_bottom .popup_close{position:absolute; top:0; right:0; width:5rem; height:5rem; font-size:2.5rem;  cursor: pointer;}
.popup_bottom .popup_close i{line-height: 5rem;}

.popup_list .slick-dotted.slick-slider{margin:1rem;}
.popup_list .slick-dots{bottom:0;}
.popup_list .slick-prev{left:-5rem;}
.popup_list .slick-next{right:-5rem;}
.popup_list .slick-prev,
.popup_list .slick-next{width:4rem; height:4rem;}
.popup_list .slick-prev:before,
.popup_list .slick-next:before{font-size:4rem;}

/**
* Contents Style
*/

.slick-prev,
.slick-prev:before,
.slick-next,
.slick-next:before {font-family:xeicon !important;}
.slick-prev:before{content:"\e93b" !important}
.slick-next:before{content:"\e93e" !important}

#content div.article div.tab2 ul.tab_wrap li {padding:0;line-height:0;background:none;}
#content div.article div.tab2 ul.tab_wrap div.tab_content div.floor_info > ul > li {padding-left:10px;line-height:20px;background:url("./img/bu_dot.gif") 0 50% no-repeat;}

/* tab3 (카테고리) */
div.tab3 {margin-bottom:45px;}
div.tab3 ul > li {float:left;width:20%;}
div.tab3 ul > li > a {display:block;overflow:hidden;height:48px;margin:-1px 0 0 -1px;border:1px solid #ddd;font-weight:500; line-height:48px; background:#f5f5f5;text-align:center;text-decoration:none;}
div.tab3 ul > li.on > a {border:1px solid #0062c3;background:#0062c3;color:#fff;}

div.write{margin-bottom:0;}

/* button */
span.btn_set a, span.btn_set button, span.btn_set input {display:inline-block;overflow:visible;position:relative;width:10rem;height:4.8rem; margin:0;padding:0;border:0;line-height:4.8rem;background:#00aeef;color:#fff;text-align:center;
  text-decoration:none !important;vertical-align:middle;white-space:nowrap;cursor:pointer;}
span.ok a, span.ok button, span.ok input,
span.list a, span.list button, span.list input{background-color:#0062c3;}
span.cancel a, span.cancel button, span.cancel input,
span.cancel modify, span.modify button, span.modify input{background-color:#999;}

span.btn_set.xsmall a, span.btn_set.xsmall button, span.btn_set.xsmall input {width:84px;height:20px;line-height:18px;}
span.btn_set.small a, span.btn_set.small button, span.btn_set.small input {width:100px;height:30px;line-height:28px;}
span.btn_set.large a, span.btn_set.large button, span.btn_set.large input {width:120px;}
span.btn_set.xlarge a, span.btn_set.xlarge button, span.btn_set.xlarge input {width:180px;height:50px;font-size:18px;line-height:48px;}

span.btn_set.download a, span.btn_set.download button, span.btn_set.download input {width:180px;padding-left:20px;text-align:left;background:url("./img/bg_download2.png") 148px 12px no-repeat #0062c3;}
span.btn_set.online a, span.btn_set.online button, span.btn_set.online input {width:160px;margin-bottom:50px; padding-left:20px;border:1px solid #333;text-align:left;font-weight:bold; background:url("./img/ico_pen.png") 148px 14px no-repeat #0062c3;}
span.btn_set.online a, span.btn_set.online button, span.btn_set.myapplication input {width:160px;margin-bottom:50px; padding-left:20px;border:1px solid #333;text-align:left;font-weight:bold; background:url("./img/ico_application.png") 148px 10px no-repeat #0062c3;}

span.btn_set.go a, span.btn_set.go button, span.btn_set.go input {width:150px;padding-left:20px;border:1px solid #d4e9fa;font-weight:600;background:url("./img/bg_arrow2.png") 114px 12px no-repeat #eff8ff;color:#333;text-align:left;}
span.btn_set.gov a, span.btn_set.gov button, span.btn_set.gov input {width:180px;padding-left:20px;background:url("./img/bg_home.png") 148px 12px no-repeat #0062c3;text-align:left;}

span.btn_set > .active {background:#0062c3;}

/* fieldset */
fieldset {}
fieldset.etc {margin-top:55px;}

/* comment */
p.comment { font-size:12px; color:#666; line-height:1.5em;  background-position:0 4px;}
span.comment { font-size:12px; color:#666; }


/*개인정보처리방침*/
body.privacy #article{font-family: "Noto Sans CJK KR", "Noto Sans Korean", "Malgun Gothic",dotum,Helvetica,sans-serif !important;}
div.privacy_box {padding:5rem; background-color:#efefef; margin-bottom:5rem;}
div.privacy_box p {margin-bottom:10px; }
div.privacy_box p:last-child {margin-bottom:0;}
div.privacybox {color:#333;}
div.privacybox div.box{margin-bottom:5rem;}
div.privacybox h4{font-weight:600; color:#333; display: block; font-size:2rem; margin-bottom:1rem;}
div.privacybox .number > li{list-style: decimal;}
div.privacybox .txt_ko > li{list-style: hangul;}
div.privacybox .txt_eng > li{list-style:lower-latin;}
div.privacybox .txt_line > li{position:relative;}
div.privacybox .txt_line > li:after{position:absolute; top:1.1rem; left:-1.3rem; content:""; width:0.5rem; height: 0.1rem; background: #999; display: block; }
div.privacybox .number > li strong{display: block; }
div.privacybox .indent{padding:0.5rem 0 1rem 3rem}
div.privacybox .indent.txt_line{padding-left:2rem;}



  /* list */
div.list div.button {position:relative;margin-top:30px;}
div.list_top {position:relative;padding:0;margin:0 0 4rem; background:none;}
div.list_top.no_margin {margin:0;}
div.list_top:after {display:block;content:'';clear:both;}
div.list_top > div.left {float:left; }
div.list_top > div.left > p {position:relative; font-size:16px; color:#222; padding-left:2.5rem; line-height:4rem;}
div.list_top > div.left > p > i{font-size:2rem; position:absolute; top:1rem; left:0;}
div.list_top > div.left > p > strong {padding-left:0.5rem;}
div.list_top > div.right {float:right;}
div.list_top div.search_box{position:relative; padding:0 45px 0 10px; width:300px; border:0; border-bottom:1px solid #222; background:#fff; box-sizing:border-box;}
div.list_top div.search_box input{width:100%; height:40px;  line-height:40px; border: 0; padding: 0; background-color:transparent; font-size: 14px; box-sizing:border-box;}
div.list_top div.search_box button{position: absolute; top: 0; right: 0; width:40px; height:40px; background: none; border:0; font-size: 20px; background:#fff;  text-align: center;}
div.list_top div.search_box button i{color:#222;}

/*project_top*/
div.list_top.type_project{position:relative; height:13rem;}
div.list_top.type_project > div.left{width:75%; }
div.list_top.type_project > div.right{width:20%;}
div.list_top.type_project > div.total{position:absolute; top:9.5rem; left:0; width:100%; }
div.list_top.type_project > div.total > p {position:relative; font-size:16px; color:#222; padding-left:2.5rem; line-height:4rem;}
div.list_top.type_project > div.total > p > i{font-size:2rem; position:absolute; top:1rem; left:0;}
div.list_top.type_project > div.total > p > strong {padding-left:0.5rem;}
div.list_top.type_project div.nav_area{width:100%; }
div.list_top.type_project div.nav_area ul li{ font-size:1.8rem; font-weight:800; }
div.list_top.type_project div.nav_area ul li a{display:block; width:100%; box-sizing:border-box; padding:0 2.5rem; color:#222; }
div.list_top.type_project div.nav_area ul li:first-child a{padding-left:0;}
div.list_top.type_project div.nav_area ul li.on a{color:#c21a18; }
div.list_top.type_project div.nav_area ul li:hover a{color:#c21a18; }


div.list_type{}
div.list_type a{display: block;}
div.list_type ul.row{display: table; width: 100%;}
div.list_type ul.row > li{position: relative; display: table-cell; padding:0 5px; text-align:center; vertical-align:middle;  box-sizing:border-box;}
div.list_type div.board_head ul.row{border-bottom:1px solid #ddd; font-weight:500; background:#f2fbfe; color:#222;}
div.list_type div.board_body ul{border-bottom:1px solid #ddd;}
div.list_type div.board_body ul.row li{color:#666;}
div.list_type div.board_body ul.row li.subject {text-align:left;}
div.list_type ul.row li.no{width:10%;}
div.list_type ul.row li.category,
div.list_type ul.row li.press{width:15%;}
div.list_type ul.row li.date{width:12%;}
div.list_type ul.row li.view{width:10%;}
div.list_type ul.row li.state{width:10%;}
div.list_type ul.row li.file{width:10%;}
div.list_type ul.row li.writer{width:10%;}
div.list_type ul.row li.producer,
div.list_type ul.row li.organ,
div.list_type ul.row li.period{width:20%;}
div.list_type ul.row li a:hover, table.list_table tr td a:focus, table.list_table tr td a:active {color:#333;}
div.list_type ul.row li span.icon {position:relative;top:-1px;margin-left:8px;}
div.list_type div.board_body{background:#fff;}
div.list_type div.board_body span.no_data{display:block; height:200px; line-height:190px; text-align:center; border-bottom:1px solid #ddd;}

/*list_more*/
div.list_type > div.more_area{position:relative; }
div.list_type > div.more_area:before{position:absolute; top:0; left:0; content:""; display:block; width:100%; height:0.1rem; background:#ddd; box-shadow:2px -2px 2px 0px rgba(0,0,0,0.1);}
div.list_type > div.more_area > button{font-size:1.8rem; position:relative; width:100%; height:8rem; background:#fff;}
div.list_type > div.more_area > button i{font-size:2rem; position:absolute; top:3.1rem; left:54%; }
div.list_type > div.more_area:hover:before{background:#c21a18;}
div.list_type > div.more_area:hover > button{color:#c21a18;}

div.list_type1 > ul{margin-bottom:11rem;}
div.list_type1 > ul > li{position:relative; min-height: 15rem; max-height: 15rem; margin-top:1rem; margin-bottom:3rem; box-shadow:3px 1px 5px 2px rgba(0,0,0,0.2); transition:all 0.5s;}
div.list_type1 > ul > li:before{position:absolute; top:0; right:0; content:""; display:block; width:99%; height:14rem; border:0.5rem solid #c21a18;}
div.list_type1 > ul > li > a{color:#222;}
div.list_type1 > ul > li > a > div.row{position:relative; height:15rem;  border:1px solid #ddd; background:#fff;}
div.list_type1 > ul > li > a > div.row > div.left_area{position:absolute; top:5rem; left:6rem;}
div.list_type1 > ul > li > a > div.row > div.left_area p{line-height:1.5;}
div.list_type1 > ul > li > a > div.row > div.left_area p strong{display:block;}
div.list_type1 > ul > li > a > div.row > p.sublect{padding-left:28rem;  margin-right:15rem; line-height:15rem; overflow:hidden; display:-webkit-box; text-overflow:ellipsis; white-space:normal;-webkit-line-clamp: 1; -webkit-box-orient: vertical;}
div.list_type1 > ul > li > a > div.row > span{position:absolute; top:7.5rem; right: 5rem; display:block; width:5rem; height:0.1rem; background:#222;}
div.list_type1 > ul > li > a > div.row > span:after{position:absolute;  top:-2.5rem; right:2.5rem; content:""; display:block; width:0.1rem; height:5rem; background:#222;}
div.list_type1 > ul > li:hover{margin-top:0; margin-left:-1rem; transition:all 0.5s;}
div.list_type1 > ul > li:hover > a{color:#fff;}
div.list_type1 > ul > li:hover > a > div.row{background:#c21a18; border-color:#c21a18;}
div.list_type1 > ul > li:hover span{transform: rotate(180deg); transition:all 1s;}
div.list_type1 > ul > li:hover > a > div.row > span,
div.list_type1 > ul > li:hover > a > div.row > span:after{background:#fff;}
div.list_type1 > ul > li:hover:before{top:1.5rem; right:-1.5rem; transition:all 0.5s;}


div.list_type1 > ul > li.notice_s > a > div.row{border:1px solid #c21a18}
div.list_type1 > ul > li.notice_s p.no{color:#c21a18;}
div.list_type1 > ul > li.notice_s p.no strong{color:#222;}
div.list_type1 > ul > li.notice_s:hover{}
div.list_type1 > ul > li.notice_s:hover p.no{color:#fff;}
div.list_type1 > ul > li.notice_s:hover p.no strong{color:#fff;}

div.list_type2 > ul > li{position:relative; width:30%; margin:0 5% 5% 0; min-height: 307px; max-height: 307px; }
div.list_type2 > ul > li:before{position:absolute; top:0; left:0; content:""; z-index:-1; display:block; width:99.5%; height:99%; box-sizing:border-box; border:5px solid #c21a18; transition:all 0.5s;}
div.list_type2 > ul > li:nth-child(3n){margin-right:0;}
div.list_type2 > ul > li > div.img_area{position:relative; border: 1px solid #ddd; width:100%;  overflow: hidden; transition:all 0.5s; box-sizing:border-box;}
div.list_type2 > ul > li > div.img_area:after{position:absolute; top:0; left:0; content:""; display:block; width:100%; padding-top:75%; background:rgba(0,0,0,0.2);}
div.list_type2 > ul > li > div > a{display:block; width:100%; padding-top:75%; box-sizing:border-box; }
div.list_type2 > ul > li > div.img_area img{position: absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box;  border-bottom:0;}
div.list_type2 > ul > li > div > a > p.subject{z-index:1; position:absolute; top:21rem; left:3rem; width:61%; font-size:2.2rem; font-weight:600; color:#fff; line-height:1.3; text-shadow:-1px -1px 0 #999,  1px -1px 0 #999, -1px 1px 0 #999,  1px 1px 0 #999;  transition:all 0.8s;}
div.list_type2 > ul > li > div > a > p.category{position:absolute; top:24rem; left:3rem; opacity:0; font-size:2rem; text-shadow:-1px -1px 0 #444,  1px -1px 0 #444, -1px 1px 0 #444,  1px 1px 0 #444;   transition:all 0.8s; color:#fff;}
div.list_type2 > ul > li > div > a > p.ing{display:none; position:absolute; top:1.5rem;  left:3rem;padding:0.5rem 1rem; line-height: 1; font-size: 1.6rem; color:#fff;  background:#c21a18;  font-weight: 500;}

div.list_type2 > ul > li.ing > div > a > p.ing{display: block;}

/* 프로젝트 글작성시, 구분 선택에 따라 li에 클래스가 붙기를 희망합니다.  */
div.list_type2 > ul > li.pr_li_1:before{border-color:#c21a18;}/*맟춤형&플랫폼*/
div.list_type2 > ul > li.pr_li_2:before{border-color:#fcd000;}/*반응형70%할인*/
div.list_type2 > ul > li.pr_li_3:before{border-color:#fcd000;}/*반응형무료*/
div.list_type2 > ul > li.pr_li_4:before{border-color:#c21a18;}/*PR사이트*/
div.list_type2 > ul > li.pr_li_5:before{border-color:rgba(103, 58, 183, 1);}/* ETC */
div.list_type2 > ul > li.pr_li_6:before{border-color:#7209be;}/* 비상용 */

div.list_type2 > ul > li.ing{}

div.list_type2 > ul > li:hover:before{top:3rem; left:2rem;}
div.list_type2 > ul > li:hover > div.img_area{margin-top:-1rem; margin-left:-1rem;}
div.list_type2 > ul > li:hover > div.img_area:after{display:none;}
div.list_type2 > ul > li.ing:hover > div > a > p.subject{top:5rem;}
div.list_type2 > ul > li:hover > div > a > p.subject{top:3rem; text-shadow:-1px -1px 0 #444,  1px -1px 0 #444, -1px 1px 0 #444,  1px 1px 0 #444; /*-webkit-text-stroke: 1px #222;*/ color:#fff;}
div.list_type2 > ul > li:hover > div > a > p.category{opacity: 1;}

div.list_type1 > ul > li.no_data,
div.list_type2 > ul > li.no_data{width:100%; margin: 0 0 10rem 0; text-align: center; padding:15rem 0; border-top:0.1px solid #ddd; border-bottom:0.1px solid #999; min-height:auto; max-height:auto; box-shadow: none;}
div.list_type1 > ul > li.no_data:before,
div.list_type1 > ul > li.no_data:after,
div.list_type1 > ul > li.no_data:hover:before,
div.list_type1 > ul > li.no_data:hover:after,
div.list_type2 > ul > li.no_data:before,
div.list_type2 > ul > li.no_data:after,
div.list_type2 > ul > li.no_data:hover:before,
div.list_type2 > ul > li.no_data:hover:after{display:none;}

/* 사용자 페이지 프로젝트 상세  */
body.project_view #content{padding-top:10rem;}
body.project_view #content.inner{width:100%;}
body.project_view #content div.sub_title{display:none;}




div.board_view{}
div.board_view .view_header{position:relative; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:5rem 2rem;}
div.board_view .view_header div.left{width:80%;}
div.board_view .view_header div.left p.s_subject{position:relative; padding-left:2rem; margin-top:1rem;}
div.board_view .view_header div.left p.s_subject:before{position:absolute; top:1.2rem; left:0; content:""; display:block;  width:1rem; height:0.1rem; background:#666; }
div.board_view .view_header div.right{width:12%;}
div.board_view .view_header div.right p{position:absolute; top:50%; right:2rem; font-weight:600; color:#222; transform:translateY(-50%);}
div.board_view .view_header div.right p strong{padding-left:1.5rem;}

div.board_view.type_project .cont > div{overflow:visible;}
div.board_view.type_project .img_area{display:block; width:100%; height:57rem; background:url("./img/img_poroject_view_1.png") 0 0 no-repeat;  background-size:cover !important;}
div.board_view.type_project .view_header{width:100%; min-width:136.6rem; height:57rem;border-top:0; border-bottom:0; padding:0;}
div.board_view.type_project .view_header div.group{position:relative;}
div.board_view.type_project .view_header div.group div.left{position:absolute; top:-57rem; left:0;  width:52rem; height:57rem; padding:10rem 4rem 0; box-sizing:border-box; background:rgba(0,0,0,0.5);}
div.board_view.type_project .view_header div.group div.left p.subject{font-size:3.8rem; font-weight:600; color:#fff;margin-bottom:20rem; line-height:1.4;}
div.board_view.type_project .view_header div.group div.left ul{padding-left:2.5rem; position: absolute; top: 41rem; left: 4rem;}
div.board_view.type_project .view_header div.group div.left ul li{color:#fff;}
div.board_view.type_project .view_header div.group div.left ul li span{position:relative; display:inline-block; padding-left:1rem;}
div.board_view.type_project .view_header div.group div.left ul li span:after{position:absolute; top:1rem; left:0; content: ""; display:block; width:0.3rem; height: 0.3rem; border-radius:50%; background:rgba(255,255,255,0.7); }
div.board_view.type_project .view_header div.group div.left ul li span:first-child{padding-left:0;}
div.board_view.type_project .view_header div.group div.left ul li span:first-child:aftet{display: none;}
div.board_view.type_project .view_header div.group div.left ul li a{color:#fff; display:block; width:100%; }
div.board_view.type_project .view_header div.group div.left ul li a i{padding-left:1rem;}

div.board_view.type_project .cont{position:relative; padding:0;}
div.board_view.type_project .cont .txt_area{position:relative; height:45rem; padding-top:12rem; box-sizing:border-box;  }
div.board_view.type_project .cont .txt_area:before{position:absolute; top:0; left:-500%; content:""; display:block; width:2000%; height:45rem; background:url("./img/bg_pattern.png") repeat; z-index:-1;}
div.board_view.type_project .cont .txt_area div.tit.bolder{position:relative; margin-bottom:3rem; }
div.board_view.type_project .cont .txt_area div.tit.bolder p.bg{position:absolute; top:0.4rem; left:0.4rem; z-index:-1; color:#b2e6fa;}
div.board_view.type_project .cont .txt_area > p{width:60%; font-size:2rem; line-height:1.8; color:#222;}
div.board_view.type_project .cont .cimg_area{margin:-14rem 0 10rem;}
div.board_view.type_project .cont .cimg_area .img_box{position:relative; margin-bottom:6rem; border:1px solid #ddd; box-sizing:border-box;  box-shadow:1px 2px 3px 0px rgba(0,0,0,0.3);}
div.board_view.type_project .cont .cimg_area .img_box:last-child{margin-bottom:0;}
div.board_view.type_project .cont .cimg_area .img_box img{width:100%;}

/* view */
div.board_view .file { padding:15px 20px; border-bottom:1px solid #ddd;}
div.board_view .file > ul > li { padding-left:10px; background:url("./img/bu_dot2.gif") 0 50% no-repeat;}
div.board_view .file > ul > li > a {color:#666;}
div.board_view .file > ul > li > a:focus, div.board_view > dl > dd.file > ul > li > a:hover, div.board_view > dl > dd.file > ul > li > a:active {color:#333;}
div.board_view .file > ul > li > a > img {margin:0 4px 0 10px;}

div.board_view .cont { padding:30px 20px 60px 20px; line-height:1.6;color:#666; border-bottom:1px solid #ddd;}
div.board_view .cont > div {overflow:hidden; min-height:200px; }
div.board_view .cont > div.btn_area {margin-top:40px; min-height:0; }
div.board_view .cont > div > *,
div.board_view .cont > div > p > *,
div.board_view .cont > div > p > a * { max-width:100%; }

div.board_view .view_paging{}
div.board_view .view_paging ul li{position:relative; width:45%; height:8rem; line-height:8rem;  box-sizing:border-box; font-size:1.6rem;  }
div.board_view .view_paging ul li a{display:block; width:100%; height:100%; overflow:hidden; display:-webkit-box; text-overflow:ellipsis; white-space:normal;-webkit-line-clamp: 1; -webkit-box-orient: vertical; }
div.board_view .view_paging ul li i{font-size:2rem;}
div.board_view .view_paging ul li.prev{padding-left:3rem; }
div.board_view .view_paging ul li.list{width:10%; text-align:center; }
div.board_view .view_paging ul li.next{text-align:right; padding-right:3rem; }
div.board_view .view_paging ul li.list i{font-size:2.4rem;}
div.board_view .view_paging ul li.prev i,
div.board_view .view_paging ul li.next i{position:absolute; top:3rem;}
div.board_view .view_paging ul li.prev i{left:0;}
div.board_view .view_paging ul li.next i{right:0;}
div.board_view .view_paging ul li:hover a{color:#c21a18;}

/* 페이드 */
.animation .fade {animation: fade; animation-timing-function:ease-in-out; animation-direction:normal; animation-fill-mode:forwards; transition:all ease 0.5s;}
.animation .fade.up {animation-name:fadeup;}
.animation .fade.down {animation-name:fadedown;}
.animation .fade.left {animation-name:fadeleft; }
.animation .fade.right {animation-name:faderight;}

@keyframes fade {
  from{
    opacity: 0;
  }
  to {
    opacity: 1;
    transition:all ease 0.5s;
  }
}

@keyframes fade {
  from{
    opacity: 0;
  }
  to {
    opacity: 1;
    transition:all ease 0.5s;
  }
}

@keyframes fadedown {
  from{
    top:-100px;
    opacity: 0;
  }
  to {
    opacity: 1;
    transition:all ease 0.5s;
  }
}
@keyframes fadeup {
  from{
    bottom:-100px;
    opacity: 0;
  }
  to {
    opacity: 1;
    transition:all ease 0.5s;
  }
}
@keyframes faderight {
  from{
    right:-80px;
    opacity: 0;
  }
  to {
    opacity: 1;
    transition:all ease 0.5s;
  }
}

@keyframes fadeleft {
  from{
    left:0;
    opacity: 0;
  }
  to {
    opacity: 1;
    transition:all ease 0.5s;
  }
}

div.main02-footer{padding: 200px 0 42px; background-color: #222; color: #fff;}
div.main02-footer p.txt42{padding-bottom: 112px; font-size: 58px; font-weight: 800;}
div.main02-footer div.inner{width: 100%;
  padding: 0 6%; }
div.main02-footer div.inner > ul > li > a{display: block; position: relative; color: #fff; width: fit-content; font-size: 32px; padding: 22px;  border: 4px solid #fff;  transition: ease all 0.3s; overflow: hidden;z-index: 1;}
div.main02-footer div.inner > ul > li > a:after{background-color: red; content: "";  width:100%; height: 100%; position: absolute; top:0; left:-100%;transition: ease all 0.3s; z-index: -1;}
div.main02-footer div.inner > ul > li > a:hover:after{left: 0%; }
div.main02-footer div.inner > p:nth-child(3){
  padding-top:140px;
  color: #666;
}
div.main02-footer div.inner > div.flex{padding-top:0;display: flex; align-items: center; }
div.main02-footer div.inner > div.flex > div.flex-addr{display: flex; color: #666;}
div.main02-footer div.inner > div.flex > div.flex-addr > p {padding-right: 12px;}
div.main02-footer div.inner > div.flex > div.flex-f-list > ul {  display: flex}
div.main02-footer div.inner > div.flex > div.flex-f-list > ul > li {padding-right: 12px;}
div.main02-footer div.inner > div.flex > div.flex-f-list > ul > li > a {color: #fff;}
div.main02-footer div.inner > div.flex > div.flex-sns > ul {  display: flex}
div.main02-footer div.inner > div.flex > div.flex-sns > ul > li {padding-right: 12px;}
div.main02-footer div.inner > div.flex > div.flex-sns > ul > li > a {color: #fff; font-size: 30px;}
div.main02-footer div.inner > div.flex > div.f-copy {color: #666;}


div.ft-menu-wrap{ transition: ease all 0.3s; position: fixed; bottom: 0%; right: 0%; z-index: 999;}
div.ft-menu-wrap > .ft-menu-f {position: fixed;bottom: -100%; right: 1%; padding-bottom: 144px ; width: 420px; height: 600px; overflow: hidden; border-radius: 20px; box-shadow: 0px 0px 18px rgb(0 0 0 / 28%); background-color: #fff; transition: ease all 0.5s;}
div.ft-menu-wrap > .ft-menu-f{}
div.ft-menu-wrap > .ft-menu-f.on{ bottom: 2%;display: block;}
div.ft-menu-wrap > .ft-menu-f > div.ft-menu{padding: 0 24px; height: 100%;  overflow-y: scroll;}
div.ft-menu-wrap > .ft-menu-f > div.ft-menu > div{padding-bottom:32px; }
div.ft-menu-wrap p.i-t{font-weight: bold;}
div.ft-menu-wrap > .ft-menu-f > div.ft-menu > div.txt-box > p.tt{padding-bottom: 12px; line-height: 42px;font-size: 32px; font-weight: 800;}
div.flex-w{flex-wrap: wrap; display: flex;}
div.flex-w label{position: relative;}
.i-t{position: relative;}
.i-t:after,
div.flex-w label.required:after{display: inline-block; content: "*"; color: red;}
div.flex-check > div{position: relative; margin-top: 8px;}
div.flex-check > div:not(:last-child){margin-right: 8px;}
div.flex-check > div > label{padding:6px 20px; width: fit-content; display:inline-block; border: 1px solid #222; border-radius:100px; font-size: 14px;}
div.flex-check > div > input[type=checkbox],
div.flex-check > div > input[type=radio]{top:0; left: 0; position: absolute; width: 0; height: 0; opacity: 0;}
div.flex-check > div > label.on{background-color: #222; color: #fff;}
div.flex-text{padding-top: 8px;}
div.flex-text > div{width: 100%;}
div.flex-text > div:not(:last-child){padding-bottom: 12px;}
div.flex-text > div > label{padding-left: 8px; font-size: 14px;}
div.flex-text > div > input{height: 44px; font-size: 14px; padding: 0 12px; width: 100%; border-radius: 100px; border: 1px solid #ddd;}
div.flex-text > div > textarea{padding: 12px; border-radius: 20px; height: 200px;}
div.flex-text > div > p.gray{font-size: 12px;text-align: right; padding-right: 8px; padding-top: 4px;}
div.pr-ch > div{display: flex; align-items: center; position: relative;}
div.pr-ch > div > input[type=checkbox] {top:0; left: 0; position: absolute; width: 0; height: 0; opacity: 0;}
div.ft-menu-wrap > .ft-menu-f > div.close-b{text-align: right; padding:12px 12px 12px; font-size: 22px;}
div.ft-menu-wrap > .ft-menu-f > div.btn-po{font-weight: bold; padding: 24px;position: absolute;bottom: 0;background: #fff;width: 100%; box-sizing: border-box;}
div.ft-menu-wrap > .ft-menu-f > div.btn-po > button{font-weight: bold; background-color: #f5f5f5; border-radius: 100px; padding: 12px 24px; font-size: 20px;width: 100%;}
div.ft-menu-wrap > .ft-menu-f > div.btn-po > button.on,
div.ft-menu-wrap > .ft-menu-f > div.btn-po > button:hover{background-color: red; color: #fff;}
/*div.ft-menu-wrap > .ft-menu-f > div.btn-po > button.btn_on{background-color: red;color: #fff;}*/
div.ft-menu-wrap > .txt-box {display: flex;align-items: center;    cursor: pointer;}
div.ft-menu-wrap > .txt-box > p {    box-shadow: 0px 0px 30px 3px #ffffff9e;border-radius: 100px; font-weight: bold; padding: 18px 24px; background-color: #000; color: #fff;}
div.ft-menu-wrap > .txt-box > button > img{width: 160px;}
div.ft-menu-wrap .file-box{position: relative;}
div.ft-menu-wrap .file-box label {}
div.ft-menu-wrap .file-box i {position: absolute; top:36px; right: 4%; font-size: 20px; }
div.ft-menu-wrap .file-box input.file{line-height: 44px;}
div.ft-menu-wrap .file-box input::file-selector-button {  display: none;}
div.ft-menu-wrap .prb-ch div.flex{font-weight: 600; font-size:16px;align-items:center; color: #666;}
div.ft-menu-wrap .prb-ch div.flex > button{line-height: 18px; font-size: 24px; color: #ddd;}
div.ft-menu-wrap .prb-ch div.flex > a {margin: 0 6px; border-bottom: 2px solid #222; color: #222;}
div.ft-menu-wrap div.prc-cont {width: 100%;background: #fff;position: absolute;left: 0;bottom: -100%; transition: ease all 0.3s; height: 100%; background-color: rgba(0,0,0,0.8)}
div.ft-menu-wrap .prb-ch div.flex > p {cursor: pointer;}
div.ft-menu-wrap .prb-ch.on div.flex > button {color: #222;}
div.ft-menu-wrap div.prc-cont.on {bottom: 0; }

div.ft-menu-wrap div.prc-cont > div.prc-sr{position: absolute;
  bottom: 0; padding:50px 8px 100px 22px; background-color: #fff; height: 80%;border-top-right-radius: 20px;border-top-left-radius: 20px;overflow: hidden; }
div.ft-menu-wrap div.prc-cont > div.prc-sr > div.privacybox{height: 100%; overflow: scroll; font-size: 12px;  }
div.ft-menu-wrap div.prc-cont > div.prc-sr > div.privacybox div.box {padding-bottom: 20px; margin-bottom: 0;}
div.ft-menu-wrap div.prc-cont button {border-top-right-radius: 20px;border-top-left-radius: 20px;overflow: hidden; position: absolute; top:120px; background-color: #fff; color: #999; font-size: 26px; text-align: center; padding: 6px 0;  width: calc(100% - 10px);
  z-index: 1;}

div.ft-menu-wrap ::-webkit-scrollbar{width: 10px;}
div.ft-menu-wrap ::-webkit-scrollbar-track{box-sizing:border-box;}
div.ft-menu-wrap ::-webkit-scrollbar-thumb {background-color: #222;background-clip: padding-box;
  border: 2px solid transparent;}
div.ft-menu-wrap ::-webkit-scrollbar-thumb:hover{background: #666;}



@media screen and (max-width: 740px){

  .tit_l{font-size:3.8rem;}
  .tit_s{font-size:2.4rem}
  .txt{font-size:1.6rem;}
  .m_hidden{display:none !important;}
  .pc_hidden{display:block !important;}
  /**
   * Maincommon
   */

  div.inner{margin:0; width:100%; padding:0 4%; box-sizing:border-box;}

  ul.group > li{float:left;}
  div.group div.left,
  div.group div.right{float:none;}

  body{font-size:1.4rem;}
  textarea.textarea{font-size:1.4rem;}
  div.button > div.left,div.button > div.right{width:auto;}

  ul.x_scroll{overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap;}
  ul.x_scroll > li{float:none !important; display:inline-block; vertical-align: top; white-space: normal;}

  #wrap {min-width:100%;}
  #header{min-width:100%; width:100%; height:5.5rem;}
  #container {min-width:100%;}
  #content {}
  #footer{padding:0; min-width:100%;}

  /* header */
  #header h1 {width: 100px;height: 60px;background-size: contain;}
  #header div.headerWrap{position:relative; width:100%; height:auto;}
  #header div.headerWrap > h1 {position:absolute; top:0; left:0; width:13rem; height:55px;  z-index:10; background-size:12rem 3rem; }
  #header div.headerWrap > h1 a{display: block; height:55px;}

  #header div.headerWrap div.btn_toggle{position: absolute; top: 0px; right: 0; color: #333; margin-top:0 !important;;}
  #header div.headerWrap div.btn_toggle button{ border-left: 1px solid #ddd; display: block; width:55px; height:55px; line-height:55px; text-align: center; font-size: 24px; cursor: pointer;}

  /* depth 1  */
  #header > div.open {width:100%;}


  #container div.containerWrap:before{top:0; right:0; width:41rem; height:10rem; background-size:41rem 10rem;}
  #container div.containerWrap:after{bottom:0; left:0; width:56rem; height:21rem; background-size:56rem 21rem;}

  /* content */
  #content {position:relative; padding:12rem 4% 11rem;}
  #content div.sub_title{padding-bottom:4.5rem; margin-bottom: 0rem;}
  #content > #article div.cont_area{margin-top:4rem;}
  #content > #article ul.list > li:before{top:1.2rem;}
  #content > #article ul.list > li.tit{font-size:2rem;}
  #content > #article ul.list > li.tit:before{top:2rem;}
  #content > #article div.con {margin-top:35px;}
  #content > #article p.bu {padding-left:10px;background:url("img/bu_dot.gif") 0 50% no-repeat;}




  #gnb > ul {display: none;}
  div.gnb-on { padding: 42px 32px;}
  div.gnb-on ul.gnbM > li > a {font-size: 30px;}
  /* footer */
  #footer div.footerWrap{position:relative; padding:3rem 4% 4rem; font-size:1.3rem; text-align:left;}
  #footer div.footerWrap > ul.f_util{margin-top:0;}
  #footer div.footerWrap > p.copy{margin-top:1rem;}
  div.ff-flex{flex-direction: column; padding-top: 22px; align-items: flex-start}
  div.ff-flex > div.img-box{margin-top:12px; margin-left: 0; width: 140px}

  table.normal_table{font-size: 1.5rem;}

  /*개인정보처리방침*/
  div.privacy_box {padding:1.5rem;}
  div.privacy_box p {margin-bottom:.5rem; }
  div.privacybox .indent{padding:0.5rem 0 1rem 2rem}
  div.privacybox .indent.txt_line{padding-left:1rem;}

  /* layer_popup */
  #layer_back { overflow:hidden !important; }
  #layer_popup { top:0 !important; left:0 !important; width:100% !important; min-width: 360px; max-width:760px important; height:100% !important; margin:0 !important; border:0 !important; font-size:14px; padding-bottom:44px; -webkit-box-orient:vertical; position:fixed; overflow:hidden !important; box-sizing:border-box; }
  #layer_popup #layer_header { -webkit-box-flex:0; -webkit-flex:none; -moz-box-flex:0; -ms-flex:none; flex:none; position:fixed; width:100%; line-height:44px !important; height:44px; }
  #layer_popup #layer_header > h1 { margin-left:20px; height:44px; line-height:44px !important; height:44px !important; font-weight:500; }
  #layer_popup #layer_header > button {top:0; right:0; width:44px !important; height:44px !important; line-height:44px; }
  #layer_popup #layer_header > button > i { font-size:2.4rem; }
  #layer_popup #layer_content { position:relative; padding:2rem 2rem 3rem; margin:0; height:inherit !important; box-sizing:border-box; top:44px; }

  .popup_list{width:35rem; height:40rem !important; }
  .popup_bottom{width:94%; }
  .popup_list div{height:40rem !important;}
  .popup_list .slick-dots{bottom:2rem;}
  .popup_cs a img{width:100%;}
  #quick div.inner > ul > li{width:calc(100%/3)}
  #quick div.inner > ul > li{}
  #quick div.inner > ul > li:hover > div.txt_box{display:none;}


  div.list_top div.search_box{width: 190px;}
  div.list_top.type_project{height:10rem;}
  div.list_top.type_project > div.left{width:100%; float:none;}
  div.list_top.type_project > div.right{width:190px; float:none; position:absolute; right:0; bottom:0; }
  div.list_top.type_project > div.total{top: 6.5rem;}
  div.list_top.type_project div.nav_area ul li a{padding:0 1.5rem}

  div.list_type > div.more_area{margin-top:5rem;}
  div.list_type > div.more_area > button i{left:63%;}

  div.list_type1 > ul > li{min-height:auto;}
  div.list_type1 > ul > li:before{display:none;}
  div.list_type1 > ul > li > a > div.row{padding:3rem 2rem; height:auto;}
  div.list_type1 > ul > li > a > div.row > div.left_area{position:relative; top:0; left:0; margin-bottom:2rem;}
  div.list_type1 > ul > li > a > div.row > div.left_area p{ line-height:1.3;}
  div.list_type1 > ul > li > a > div.row > div.left_area p strong{display:inline-block; padding-left:3rem; font-size:1.4rem;}
  div.list_type1 > ul > li > a > div.row > p.sublect{padding-left:0; margin-right:0; line-height:1.3; font-size:2rem; -webkit-line-clamp: 2;}
  div.list_type1 > ul > li > a > div.row > span{display:none;}
  div.list_type1 > ul > li:hover{position:relative; top:0; left:0;}
  div.list_type1 > ul > li:hover > a{color:#c21a18;}
  div.list_type1 > ul > li:hover > a > div.row{background:#fff; border-color:#ddd;}

  div.list_type2 > ul > li{width:100%; margin-right:0;  min-height: auto;  max-height: auto;}
  div.list_type2 > ul > li > a > p{top: 16rem;}

  div.list_type2 > ul > li:before{display:none;}
  div.list_type2 > ul > li:hover{top:0; left:0;}
  div.list_type2 > ul > li:hover > a > div.img_area:after{display:block;}
  div.list_type2 > ul > li:hover > a > p{top:16rem; text-shadow:2px -1px 4px rgba(0,0,0,0.5)}
  div.list_type2 > ul > li > div > a > p.ing{left: 7%;}
  div.list_type2 > ul > li > div > a > p.subject{top: 70%; left: 7%; font-size:2rem;}

  div.board_view .view_header{padding:2rem 1rem 1rem;}
  div.board_view .view_header div.left,
  div.board_view .view_header div.right{width:100%; float:none;}
  div.board_view .view_header div.right p{position:relative; top:0; left:0; margin-top:3rem;}
  div.board_view.type_project .view_header{min-width:100%; }
  div.board_view.type_project .img_area{height:40rem;}
  div.board_view.type_project .view_header div.group div.left{width:100%; padding:10rem 2rem; top:-40rem; height:40rem;}
  div.board_view.type_project .view_header div.group div.left p.subject{font-size:2.8rem; margin-bottom:8rem;}

  div.board_view .cont img{width:100%; height:auto;}


  div.ft-menu-wrap > .ft-menu-f {width: 100%; height: 90vh; border-radius: 0;}
  div.ft-menu-wrap > .ft-menu-f.on {bottom: 0;}
  div.ft-menu-wrap {bottom: -100%;}
  div.ft-menu-wrap.on {bottom: 0%;}
  div.main02-footer {padding: 120px 0 162px;}
  div.main02-footer p.txt42 { padding-bottom: 46px;font-size: 32px;}
  div.main02-footer div.inner > ul > li > a {font-size: 16px;padding: 12px;}
  div.main02-footer div.inner > div.flex {padding-top: 40px;flex-direction: column; align-items: flex-start;}
  div.main02-footer div.inner > div.flex > div.flex-addr {flex-direction: column;}
  div.main02-footer div.inner > div.flex > div.flex-addr > p {padding-right: 0;padding-bottom: 4px;font-size: 12px;}
  div.main02-footer div.inner > div.flex > div.flex-f-list > ul {flex-direction:column; padding-top: 22px;}
  div.main02-footer div.inner > div.flex > div.flex-sns > ul { padding: 22px 0;}
  div.main02-footer div.inner > div.flex > div.flex-f-list > ul > li {padding-right: 0px;padding-top: 8px;}

}