@charset "utf-8";
#header{border-bottom: 0;}
#headerLine{display: none;}
#subPage{margin: 0 auto; padding-top: 100px;position: relative;}
#cont{position: relative; padding-top: ; padding-top: 90px;}
#subVisual{position: relative; max-width:1760px; margin: 0 auto; padding: 0 1rem; background: url('') top center no-repeat; background-size:auto 563px; color: #fff;; text-align: center; border: 1px solid #333; height: 414px;display: table;width: 100%; background-attachment:fixed;}
#subVisual > .sub-t{display: table-cell; vertical-align: middle;}
.sub-t .t{font-size: 60px; font-weight: 700; line-height: 1.18;}
.sub-t .t .border{display: inline-block; position: relative; margin-right: 3px; font-size: 0; top:3px}
.sub-t .t .border.s{margin-right: 0; top:2px}
.sub-t .t .border img{display: block;}
.sub-t .add{margin-top: 1.18em; font-weight: 400; line-height: 1.35; font-weight: 400;     word-break: keep-all;}

#sub-tabs{position: absolute; left: 0; bottom: 0; width: 100%; font-size: 0; line-height: 1.18; text-align: left;}
#sub-tabs li{display: inline-block; margin-right: 50px; position: relative; font-size: 14px; font-weight: 400; color: #fff}
#sub-tabs li:last-child{margin-right: 0;}
#sub-tabs a{display: block; padding-bottom: 20px}
#sub-tabs a:focus,#sub-tabs a:hover,#sub-tabs .active a{color: #d73f29}
#sub-tabs .active a{font-weight: 500;}

#sub-tabs a:after{position: absolute; left:0; bottom: 0; width: 0; height: 4px; background: #d73f29; content: ''; transition: all ease-in-out .3s}
#sub-tabs a:focus:after,#sub-tabs .active a:after,#sub-tabs a:hover:after{width: 100%}

.sub #sub-menu{background: none; color: #fff; border-left: 1px solid #ccc; color: #fff; }
/* .sub .down-ott{background-image: url('../img/common/btn-down_on.png')} */

#sub-menu a:hover,#sub-menu a:focus,.sub #sub-menu .active a{color: #d73f29}

.sub_page{word-break:keep-all}
.cont-st1{display:flex; width: 100%; flex-wrap:wrap}
/* .cont-st1 > *{display: table-cell; vertical-align: top;} */
.cont-st1 .left{width: 345px; padding-right: 30px;font-weight:700;}
.cont-st1 .left .small{font-size: 13px;    writing-mode: tb-rl; margin-right: 30px;}
.cont-st1 .big{font-size: 2rem; color: #000; line-height: 1.35; font-weight: 500; margin-top: -7px; letter-spacing: -0.03em;}
.cont-st1 .right{flex:1}

.txt_com{margin-bottom: 50px; font-weight: 400; line-height: 1.7;}

.history_w .js-tabs_w{border:1px solid #000; border-top: -1px;}
.tabs-his{ color: #ccc; font-weight: 700; display: flex;align-items: flex-end; position: relative;z-index: 1; width: calc(100% + -1px); left: 1px; font-size: 0; flex-wrap:wrap; line-height: 1.18;}
.tabs-his > li{display: inline-block; flex:1; min-width: 0; border: 1px solid #ccc; position: relative; height: 65px; border-top: 1px solid #ccc; margin-left: -1px; border-bottom: 0; font-size: 1.125rem;}
.tabs-his a{display: block; padding: 0 5px; display: table; width: 100%; text-align: center; height: 100%; background: #fff}
.tabs-his a > span{display: table-cell; vertical-align: middle;}
.tabs-his .active{border:0; color: #000;  height: 76px; background: #fff; z-index: 1}
.tabs-his .active:before{position: absolute; left: 0; top:0; right: 0; bottom: -1px; border:1px solid #000; border-bottom: 1px solid #fff; content: ''; z-index: 1}
.js-tabs_w .tab_cont{display: none;}
.js-tabs_w .tab_cont:first-child{display: block;}

.his_w .item{padding: 40px 50px; border-bottom: 1px solid #ccc; display: table; width: 100%}
.his_w .item:last-child{border-bottom: 0;}
.his_w .item > *{display: table-cell; vertical-align: top;}
.his_w .year{font-weight: 900; font-size: 2.250em; width: 18%; line-height: 1.18;}
.his_w .c{font-size: 14px; padding: 0 0 0 1em}
.his_w .img_w{width: 28.5%; display: none !important;}
.his_w .img{border:1px solid #000; background: #ccc; padding-bottom: 35%; position: relative; overflow: hidden;}
.his_w .img img{position: absolute;left: 0; top:0; right: 0; bottom: 0; margin: auto;}

.group_com_w .group{margin-top: 140px;}
.group_com_w .group:first-child{margin-top: 0;}

.co-st1 .sect{padding: 50px 0; border-bottom: 1px solid #ccc;}
.co-st1 .sect:first-child{border-top: 1px solid #ccc}
.overview_img{margin: 70px 0;}
.overview_img img{display: block;}

.cont-st2{display: table; width: 100%}
.cont-st2 > *{display: table-cell; vertical-align: top;}
.cont-st2 .ico{width: 140px}
.cont-st2 .ico img{display: block; margin: 0 auto;}
.cont-st2 .c dt,.cont-st2 .ttt{margin-bottom: 1em; font-weight: 500; font-size: 1.25em; line-height: 1.18; display: block;}
.cont-st2 .c dd{line-height: 1.67;}
.cont-st2 .c .half{display: flex; flex-wrap:wrap; margin-bottom: -10px;    justify-content: space-between;}
.cont-st2 .c .half > li{width: 48.5%; margin: 0 0 10px 0;}

.ci_down_w{padding-right: 238px; line-height: 1.4}
.ci_down_w .btn{bottom: 0;top:auto; padding: 10px 30px; border-radius:100px; font-size: 14px; border:1px solid #d73f29; color: #d73f29; font-weight: 400; white-space: nowrap;}
.ci_down_w .btn span{position: relative; display: inline-block; width: 13px; height: 15px; border-bottom: 1px solid #d73f29; margin-left: .71rem; vertical-align: text-bottom; top:-1px}
.ci_down_w .btn span:before,.ci_down_w .btn span:after{position: absolute; content: ''; left: 50%;}
.ci_down_w .btn span:before{top:0; width: 1px; height: calc(100% - 5px); background: #d73f29; transition:background ease-in-out .15s}
.ci_down_w .btn span:after{width: 6px; height: 6px; border: 1px solid #d73f29; transform: rotate(-135deg); border-right: 0; border-bottom: 0; bottom: 4px; margin-left: -3px}

.ci_down_w .btn:hover{background: #d73f29; color: #fff}
.ci_down_w .btn:hover span:before{background: #fff}
.ci_down_w .btn:hover span,.ci_down_w .btn:hover span:after{border-color: #fff}
.ci_down_w .btn span,.ci_down_w .btn span:after{transition:border ease-in-out .15s}
.ci_down_w .btn{transition:background ease-in-out .15s}

.ci-box{border:1px solid #ccc; padding: 80px 0; display: flex; flex-wrap:wrap; align-items:center; margin-top: 40px; justify-content: center;}
.ci-box > li{padding: 0 70px;float: left; width: 50%}
.ci-box > li:last-child{border-left: 1px solid #ccc;}
.ci-box img{display: block;margin: 0 auto;}
.ci-box .t{font-size: 1.25em; font-weight: 500; display: block; margin-bottom: 1em; line-height: 1.15;}
.ci-box .c_s{display: flex; flex-wrap:wrap; width: 100%}
.ci-box .c_s li{margin-right: 50px; display: flex}
.ci-box .c_s li:last-child{margin-right: 0;}
.ci-box .c_s .circle{width: 35px; height: 35px; border-radius:50%;margin-right: 1.125rem; display: block;}
.ci-box .c_s dl{font-size: 14px; line-height: 1.15; letter-spacing: -0.015em;}
.ci-box .c_s dd{margin-top: 5px;}

.c_benefit{display: flex; flex-wrap:wrap; margin: 0 0 -40px -40px; font-size: 14px; text-align: center;}
.c_benefit > li{border:1px solid #ccc; float: left; width: calc(25% - 40px); margin: 0 0 40px 40px; height: 210px; padding: 40px 1em; }
.c_benefit img{display: block; margin: 0 auto; max-width:67%}
.c_benefit .c{margin-top: 1.25rem; letter-spacing: -0.018em;}

.page-team .sect{border:1px solid #000; margin-top: 20px; line-height: 1.15; text-align: center; border-right: 0; border-top: 0;}
.page-team .sect:first-child{margin-top:0}
.page-team .item{display: block;  width: 100%;border-right: 1px solid #000; border-top: 1px solid #000; position: relative;  color: #000; height: 9.38rem; display: flex; flex-flow:column; align-items:center; justify-content:center}
.page-team .item.w6{width: 55%}
.page-team .item.w4{width: 45%}
.page-team .item.w3{width: 33.3333%}
.page-team .item.w2{width: 25%}
.page-team .item.w1{float:none}
.page-team .item.ceo{background: url('../img/sub/t1.gif') center center no-repeat; color: #fff}
.page-team .str{font-size: 1.25rem; font-weight: 500}
.page-team .small{color: #666; font-size: 14px; margin-top: 8px;}
.page-team .in{padding: 0 1rem; position: relative; z-index: 1; display: flex; flex-flow:column; align-items:center; justify-content:center}
.page-team .item:hover .in > *{color: #fff}
.page-team .dev,
.page-team .bot{display: flex; flex-wrap:wrap; justify-content: space-between;}
.page-team .ceo .str{margin-top: 0;}
.page-team .item button{position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 3}
.page-team .item .bg{ background: #fff url('') center center no-repeat; background-size:cover; position: absolute; left: 0; top:0; width: 100%; height: 100%; transition: all ease-in-out .3s; opacity:0}
.page-team .item.bg2 .bg{background-image: url('../img/sub/t1_2.gif')}
.page-team .item.bg3 .bg{background-image: url('../img/sub/t1_3.gif')}
.page-team .item.bg4 .bg{background-image: url('../img/sub/t1_4.gif')}
.page-team .item.bg5 .bg{background-image: url('../img/sub/t1_5.gif')}
.page-team .item.bg6 .bg{background-image: url('../img/sub/t1_6.gif')}
.page-team .item.bg7 .bg{background-image: url('../img/sub/t1_7.gif')}
.page-team .item.bg8 .bg{background-image: url('../img/sub/t1_8.gif')}
.page-team .item.bg-rd .bg{background-image: url('../img/sub/t1_rd.gif')}
.page-team .item:hover .bg,.page-team .item:focus .bg{opacity:1}

.page-team .r{background: url('../img/sub/team/img-m.gif') 91% 90% no-repeat;}
.part-m .r{background-image: url('../img/sub/team/img-m.gif')} /* 경영지원부 */
.part-sp .r{background-image: url('../img/sub/team/img-sp.gif')} /* 전략기획팀 */
.part-d .r{background-image: url('../img/sub/team/img-d.gif')} /* 디자인팀 */
.part-p .r{background-image: url('../img/sub/team/img-p.gif')} /* 퍼블리싱팀 */
.part-b .r{background-image: url('../img/sub/team/img-b.gif')} /* 개발팀 */
.part-o .r{background-image: url('../img/sub/team/img-o.gif')} /* 운영관리팀 */
.part-sb .r{background-image: url('../img/sub/team/img-sb.gif')} /* 전략사업팀 */
.part-rd .r{background-image: url('../img/sub/team/img-rd.gif')} /* 전략사업팀 */



.company_group .c_group{display: none;}
.company_group .c_group:first-child{display: block;}

.page-privacy{font-size: 14px; line-height: 1.67;}
.page-privacy .t{color: #333; font-weight: 500; border-bottom: 1px solid #ccc; padding-bottom: ; line-height: 1.15; margin-bottom: 1em; padding-bottom: 1em; font-size: 1.25rem;}
.page-privacy .sect{margin-top: 80px;}
.page-privacy .sect:first-child{margin-top: 0;}

.page-privacy .sect > ol,.page-privacy .sect > ul{font-weight: 400;}
.page-privacy .sect > ol > li,
.page-privacy .sect > ul > li{margin-top: 1rem;}
.page-privacy .sect > ol > li:first-child,.page-privacy .sect > ul > li:first-child{margin-top: 0;}
.page-privacy .sect > ol ol,.page-privacy .sect > ol ul{margin-top: 10px; font-weight: 400;}
.page-privacy .sect > ol ul > li{margin-top: .5em;}
.page-privacy .sect > ol ul > li:first-child{margin-top: 0;}
.page-privacy .txt{line-height: 1.7; margin-bottom: 30px; font-size: .938rem;;}
.page-privacy .txt:last-child{margin-bottom: 0;}
.page-privacy .mg-t{margin-top: 1rem;}

.page-privacy .sect a{color: #0067bf}
.page-privacy .sect a:hover,.page-privacy .sect a:focus{text-decoration: underline;}

#footer .logo{display: none;}

#sub-menu{background: #fff}

.page-team{position: relative; font-size: 14px;}
.pop-team{display: none; position: fixed; left:0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 153}
.pop-team .rel{position: relative; left: 50%; top:50%; z-index: 3; width: 100%; background: #fff; border:1px solid #000; transform:translate(-50%,-50%); max-width:97%; max-height:97%; width:1400px}
.pop-team .flex{display: flex; height: 100%}
.pop-team .l{background: url('../img/sub/team/new/bg.gif') right bottom repeat; color: #fff; font-weight: 400; padding: 70px 40px; border-right: 1px solid #000; width: 34.5%; position: relative;}
.pop-team .l .bg{position: absolute; right: 0; bottom: 0; width: 100%; height: 100%;background: url('../img/sub/team/bg-d.gif') left bottom no-repeat; background-size:100%}
.pop-team .l .txt{position: relative; z-index: 1; display: flex;    flex-flow: column; height: 100%}
.pop-team .l .ico{position: absolute; left: 0; top:60px}

.pop-team .l .txt-team{font-size: 2.250rem; margin: 30px 0 50px;}
.pop-team .l > *{display: block; line-height: 1.18;}
.pop-team .l .txt-b{opacity:.87}
.pop-team .r{flex:1; padding: 60px 50px 70px 50px; position: relative; overflow-y: auto;}
.pop-team dt{font-size: 1.125rem; color: #000; margin-bottom: .87em; font-weight: 500; letter-spacing: -.07em;}
.pop-team .section{margin-top: 50px; position: relative; z-index: 1}
.pop-team .section:first-child{margin-top: 0;}
.pop-team .bul-dash > dd{margin-top: .3em;} 
.pop-team .lh{line-height: 1.5;}
.pop-team .r .img_t{position: absolute; right: 50px; bottom: 40px}
.pop-team .r .img_t img{display: block;}
.pop-team .r,.pop-team .append{height: 100%}

.part-m .l .bg{background-image: url('../img/sub/team/new/bg-m.png')} /* 경영지원부 */
.part-sp .l .bg{background-image: url('../img/sub/team/new/bg-sp.png')} /* 전략기획팀 */
.part-d .l .bg{background-image: url('../img/sub/team/new/bg-d.png')} /* 디자인팀 */
.part-p .l .bg{background-image: url('../img/sub/team/new/bg-p.png')} /* 퍼블리싱팀 */
.part-b .l .bg{background-image: url('../img/sub/team/new/bg-b.png')} /* 개발팀 */
.part-o .l .bg{background-image: url('../img/sub/team/new/bg-o.png')} /* 운영관리팀 */
.part-sb .l .bg{background-image: url('../img/sub/team/new/bg-sb.png')} /* 전략사업팀 */
.part-rd .l .bg{background-image: url('../img/sub/team/new/bg-rd.png')} /* 전략사업팀 */

.close-pop_t{position: absolute; right: -1px; top:-1px;; width: 55px; height: 55px; border:1px solid #000; z-index: 3}
.close-pop_t:before,.close-pop_t:after{position: absolute;left: 50%;content:' ';height: 50%;width: 1px;background-color: #000; top:25%}
.close-pop_t:before {transform: rotate(45deg);}
.close-pop_t:after {transform: rotate(-45deg);}
.close-pop_t:hover,.close-pop_t:focus{background: #d73f29}
.close-pop_t:hover:before,.close-pop_t:hover:after,.close-pop_t:focus:before,.close-pop_t:focus:after{background-color: #fff}
.pop-team .r .img_t{max-width:25%;}

.page-sc1 .img-cms{margin: 70px 0;}
.page-sc1 .img-cms img{display: block; margin: 0 auto;}
.page-sc2 .c{letter-spacing: -0.04em; word-break:keep-all}
.page-sc2 .c .half > li:nth-child(odd){width: 35%}
.page-sc2 .c .half > li:nth-child(2n){width: 62%}

.com_hover > *:hover{background: #f7f7f7}
.com_hover > *:hover img{
  animation: shakeCom 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shakeCom{
  0%{transform: rotate(0);}
  50%{transform: rotate(10deg);}
  100%{transform: rotate(0)}
}

.budget-btn_w{position: absolute; top:100%; width: 100%; display: flex; justify-content:space-between}

.client-dev ul{margin: 0 0 -40px -40px; display: flex; flex-wrap:wrap}
.client-dev .item{float: left; width: calc(25% - 40px); margin: 0 0 40px 40px; background: #f4f4f4; position: relative; padding-bottom: calc(25% - 40px); overflow: hidden;; position: relative;}
.client-dev .item:hover{}
.client-dev img{display: block; margin: auto; position: absolute; left: 0; top:0; right: 0; bottom: 0; max-width:87%; max-height: 87%}
.client-dev .item:before{background:#f4f4f4 url('../img/main/client/bg-lg.gif') left top no-repeat; background-size:cover; position: absolute; left: 0; top:0; width: 100%; opacity:0; transition:all ease-in-out .18s; content:''; height: 100%}
.client-dev .item:hover:before{opacity:1}
/* .client-dev .scb:hover:before{background-image: url('../img/main/client/bg-scb.gif')}
.client-dev .eco:hover:before{background-image: url('../img/main/client/bg-eco.gif')}
.client-dev .house:hover:before{background-image: url('../img/main/client/bg-house.gif')}
.client-dev .sb:hover:before{background-image: url('../img/main/client/bg-sb.gif')}
.client-dev .citizen:hover:before{background-image: url('../img/main/client/bg-citizen.gif')}
.client-dev .nab:hover:before{background-image: url('../img/main/client/bg-nab.gif')}
.client-dev .future:hover:before{background-image: url('../img/main/client/bg-future.gif')}
.client-dev .junggu:hover:before{background-image: url('../img/main/client/bg-junggu.gif')}
.client-dev .jd:hover:before{background-image: url('../img/main/client/bg-jd.gif')}
.client-dev .sejong:hover:before{background-image: url('../img/main/client/bg-sejong.gif')}
.client-dev .economic:hover:before{background-image: url('../img/main/client/bg-economic.gif')} */

.client-dev .lg:before{background-image: url('../img/sub/clients/bg-lg.gif')}
.client-dev .lg2:before{background-image: url('../img/sub/clients/bg-lg2.gif')}
.client-dev .kh:before{background-image: url('../img/sub/clients/bg-kh.gif')}
.client-dev .inje:before{background-image: url('../img/sub/clients/bg-inje.gif')}
.client-dev .seoul:before{background-image: url('../img/sub/clients/bg-seoul.gif')}
.client-dev .house:before{background-image: url('../img/sub/clients/bg-house.gif')}
.client-dev .nt:before{background-image: url('../img/sub/clients/bg-nt.gif')}
.client-dev .sejong:before{background-image: url('../img/sub/clients/bg-sejong.gif')}
.client-dev .chest:before{background-image: url('../img/sub/clients/bg-chest.gif')}
.client-dev .jg:before{background-image: url('../img/sub/clients/bg-jg.gif')}
.client-dev .hj:before{background-image: url('../img/sub/clients/bg-hj.gif')}
.client-dev .mb:before{background-image: url('../img/sub/clients/bg-mb.gif')}
.client-dev .st:before{background-image: url('../img/sub/clients/bg-st.gif')}
.client-dev .dorco:before{background-image: url('../img/sub/clients/bg-dorco.gif')}
.client-dev .yamaha:before{background-image: url('../img/sub/clients/bg-yamaha.gif')}
.client-dev .future:before{background-image: url('../img/sub/clients/bg-future.gif')}

.client-dev .small-i img{max-width:87%}

/* .w-etc #cont{padding-top: 40px;} */
.w-etc #sub-tabs{display: none;}

.page-privacy hr{margin-top: 35px; border:0}
.page-privacy .t2{font-size: 1.063rem; margin-bottom: 15px; font-weight: 500;}

#page-guide hr{margin-top:50px; border:0}
#page-guide hr.small{margin-top: 15px;}

.guide-box{padding: 1.5rem; border: 4px double #aaa;}

#page-guide .colorscripter-code{margin-top: 30px;}
#page-guide .colorscripter-code table{width: 100%}
#page-guide .copy-b{text-align: center; margin-top: 18px;}
.btn-copy{font-size: 1rem; width: 10rem; height: 3.5rem; font-weight: 500; background: #000; color: #fff; position: relative; transition:all ease-in-out .18s}
.btn-copy:hover{}
.btn-copy:active{top:1px}

.tabs-guide{text-align: center;margin-bottom: 3em;color:#999}
.tabs-guide li {display: inline-block;position: relative; font-size: 1.25rem;position: relative;margin: 0 0.5em 1.5em .5em;line-height: 1}
.tabs-guide li a{display: block;z-index: 1;position: relative;}
.tabs-guide .active{font-weight: 700;color:#000}
.tabs-guide .active:after{left: 0; bottom: -0.833em;width: 100%;height:3px;background: #222;content: '';position: absolute;content: ''}

/* 오픈 타입 */
.open-type{background: #F7F7F7; border:1px solid #ccc; padding: 20px; display: flex; color: #333; font-weight: 400; font-size: 18px; align-items: center; margin: 20px 0;}
.open-type .open-img{width: 200px; margin-right: 20px;}
.open-type .open-img img{display: block;}
.open-type .open-txt{flex:1;}

.join_ok{text-align: center; border-top: 1px solid #111; border-bottom: 1px solid #ccc; padding: 70px 0; color: #333; line-height: 1.5; font-size: 1.25rem;}
.join_ok .big{font-size: 1.5rem; margin-bottom: 10px; display: block; font-weight: 500;}

@media (max-width:1024px){
	.open-type{display: block; font-size: 15px; padding: 1em}
	.open-type .open-img{margin: 0 0 15px; width: 100%}
}

.satis-box{font-size: 16px; line-height: 1.35; margin: 20px 0; color: #666}
.satis-top{display: flex; padding: 15px 20px;    justify-content: space-between; align-items: end; }
.satis-top strong{font-weight: 600;}
.satis-top .det{display: flex; align-items: center; flex-wrap:wrap; flex:1; margin: 0 -10px -10px 0;}
.satis-top .det > *{margin: 0 50px 10px 0}
.satis-top .det strong{background: url('../img/common/ico-part.png') left center no-repeat; padding-left: 1.35em; color:#333; margin-right: 8px;}
.satis-top .det .ico-person{background-image: url('../img/common/ico-person.png')}
.satis-top .det .ico-call{background-image: url('../img/common/ico-call.png')}
.satis-top .det .ico-fax{background-image: url('../img/common/ico-fax.png')}
.satis-top .edit strong{background: url('../img/common/ico-time.png') left center no-repeat; padding-left: 1.35em; margin-right: 10px; position: relative; padding-right: 15px;}
.satis-top .edit strong:after{position: absolute; right: 0; top:50%; width: 1px; height: 8px; background: #ccc; content: ''; margin-top: -4px;}
.satis-form{background: #F7F7F7;display: flex; padding: 45px 60px;justify-content: space-between; align-items: center; border: 1px solid #ccc; }
.satis-radio{font-size: 1.125em; color: #333; display: flex; flex-wrap:wrap}
.satis-radio > * {position: relative; display: inline-block;; margin-right: 50px;}
.satis-radio > *:last-child{margin-right: 0;}
.satis-radio > * input{position:absolute; top:50%; left:50%; width:40%; height:40%; transform:translate(-50%, -50%)}
.satis-radio > * label {position: relative;display: block;background: #F7F7F7;padding-left: 1.5em; z-index: 1;}
.satis-radio input + label span{position: absolute; display: block; width:1em;height:1em; top:.15em; left: 0; border:1px solid #ccc; border-radius: 50%; background: #fff}
.satis-radio input:focus + label span{border:1px solid #000}
.satis-radio input:checked + label span:before{position: absolute; left: 50%; top:50%; width: 10px; height: 10px; transform:translate(-50%,-50%); content: ''; background: #000; border-radius:50%}

.satis-form .s-t{background: url('../img/common/smile.png') left top no-repeat; color :#111; font-size: 1em; font-weight: 500; padding-left: 70px; line-height: 1.5}
.satis-form .s-t_small{font-size: 1.35em;font-weight: 600;}
.satis-submit{margin-top: 15px; position: relative; padding-right: 124px;}
.satis-submit button{position: absolute; right: 0; top:0; height: 100%; width: 114px; text-align: center;background: #333; color: #fff;}
.satis-submit input[type="text"]{width: 100%; height: 40px; padding: 0 20px}

.satis-form .s-t{width: 47%; margin-right: 4%; max-width:600px; display: block;}
.satis-form .s-f{flex:1}

.satis_w{margin-top: 150px;}
.satis_w .satis-box{margin-top: 0;}

.member-common#cont{margin: 0 0 -95px;}
.member-common{padding: 100px 0; min-height: 1050px}
.inner-member{max-width:640px; margin: 0 auto; background: #fff; border:1px solid #ccc; border-radius:8px; padding: 80px 60px}
.inner-member.page-ac{max-width:1056px}

.tit-member{font-size: 2rem; font-weight: 700; line-height: 1.15; text-align: center; margin-bottom: 1.250em; color: #111}
.tit-member .c{margin-top: 20px; font-size: 1rem; font-weight: 400; color: #666; text-align: center;}
.tit-member2{font-weight: 700; line-height: 1.15; text-align: center; margin-bottom: .87em; color: #111; font-size: 1.5em;}

.login-form_w{font-size: 14px;}

.login-form > li{margin-top: 10px; position: relative;}
.login-form > li:first-child{margin-top: 0;}
.login-form input[type="text"],.login-form input[type="password"]{height: 60px; padding: 0 30px; font-size: 14px; background: #fff; border:1px solid #ccc; width: 100%; letter-spacing: -0.04em;}
.login-form input[type="text"]:focus,.login-form input[type="password"]:focus{border-color: #111; color: #111; outline: 0px solid #111}
.login-form input[type="text"]:focus::placeholder,.login-form input[type="password"]:focus::placeholder {color: #111;}
.login-form .error input{border-color:#dd2b2b}
.login-form .error .txt{color: #dd2b2b; position: absolute; right: 30px; top:50%; transform:translateY(-50%); letter-spacing: -0.03em;}

.login-form_w .remember{margin-top: 20px;}

.ck-st1{position: relative;}
.ck-st1 input{position:absolute; top:5px; left:5px; width:0; height:0;}
.ck-st1 label {position: relative;display: block; padding-left: 1.8rem; z-index: 1;}
.ck-st1 input + label span{position: absolute; display: block; width:1.25rem;height:1.25rem; top:50%; left: 0; border:1px solid #ccc; border-radius: 4px; background: #fff; transform:translateY(-50%)}
.ck-st1 input:focus + label span{border-color:#000}
.ck-st1 input:checked + label span{border-color:#d73f29}
.ck-st1 input:checked + label span:before{position: absolute; left: 0; top:0; width: 100%; height: 100%; content: ''; background: #d73f29 url('../img/bbs/ck.png') center center no-repeat}

.ck-st1, .radio-st2{display: inline-block;}

.btn-login_w{margin-top: 40px; display: flex; justify-content:space-between}
.btn-login{background: #000; color: #fff; font-size: 1rem; height: 60px; display: block; width: 100%; font-weight: 500; display: flex;
    align-items: center;
    justify-content: center;}
.btn-login.half{width: calc(50% - 5px)}
.btn-login.grey{background: #999}
.find-box{background: #f7f7f7; text-align: center; font-size: 1.125rem; color:#333; padding: 50px 1.5rem; word-break:keep-all;    letter-spacing: -.03em;}

.login-etc{display: flex; justify-content:center; color: #666; margin-top: 20px;}
.login-etc span{position: relative; padding-left: 1em; margin-left: 1em;}
.login-etc span:before{position: absolute; left: 0; top:50%; width: 1px; height: 10px; background: #ccc; content: ''; margin-top: -5px;}
.login-etc span:first-child{padding-left: 0; margin-left: 0;}
.login-etc span:first-child:before{background: none}

.login-sns{display: flex; flex-wrap:wrap; margin: 30px 0 -10px -10px; font-size: 14px; color: #fff; font-weight: 500;}
.login-sns > *{width: calc(50% - 10px); margin: 0 0 10px 10px; height: 48px; border-radius:5px}
.login-sns .naver{background: #03c75a}
.login-sns .kakao{background: #fee500; color: #181600}
.login-sns .face{background: #4272b9}
.login-sns .google{background: #fff; border:1px solid #ccc; color: #333}
.login-sns span{background: url('') left center no-repeat; padding-left: 29px;}
.login-sns .naver span{background-image:url('../img/member/naver.png')}
.login-sns .kakao span{background-image:url('../img/member/kakao.png')}
.login-sns .face span{background-image:url('../img/member/face.png')}
.login-sns .google span{background-image:url('../img/member/google.png')}

.modal_w{position: fixed; left:0; top:0; width: 100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,.3); z-index: 151}
.modal_w .pop-st1{position: relative; max-height: 97%; width:97%; max-width:720px; margin: 0 auto; top:50%; transform:translateY(-50%); background: #fff; border:1px solid #000}
.pop-st1 .pop-tit{background: #111; height: 60px; display: flex; justify-content:space-between; align-items:center; font-size: 1.125rem; font-weight: 500; color: #fff; padding: 0 20px 0 30px}
.pop-st1 .pop-tit .t{font-weight: 500;}
.pop-st1 .pop-cont{padding: 40px; word-break:keep-all}
.pop-st1 .pop-ok{height: 42px; margin: 30px auto 0; border-radius:100px; font-size: 1rem; color: #fff; background: #111; display: block; padding:0 40px}

.d-a-dl{display: flex; color: #333}
.d-a-dl dt{display: flex; align-items:center; background: #f0f0f0; color: #666; width: 7.5rem;padding: 1rem;}
.d-a-dl dd{flex:1;  padding: 1rem; width: calc(100% - 7.5rem)}
.d-a-dl > *{}

.login-fail{display: flex; align-items:flex-top; jusify-content:space-between; letter-spacing: -0.04em; line-height: 1.8;}
.login-fail .ico{width: 63px; margin-right: 30px;}
.login-fail .c{flex:1; color:#666}

.pop-c{position: relative; white-space: nowrap; overflow: hidden; text-indent: -999px; display: block; width: 20px; height: 20px}
.pop-c:before,.pop-c:after{position: absolute;
  left: 50%;
  content: ' ';
  height: 100%;
  width: 2px;
  background-color: #fff; top:0}
.pop-c:before{ transform: rotate(45deg);}
.pop-c:after{ transform: rotate(-45deg);}

.page-ac .group{margin-top: 40px;}
.page-ac .sect{margin-top: 20px}
.tit-ac{font-size: 1.25rem; font-weight: 700; color: #111; line-height: 1.15; margin-bottom: 1em;}
.agree-st1 .t{font-size: 1rem; margin-bottom: 10px; font-weight: 400; color: #111}
.agree-st1 .box{border:1px solid #ddd; height: 100px; overflow-y: auto; padding: 20px; margin-bottom: 10px;}

.agree-all{border:1px solid #ddd; background: #f4f4f4; padding: 20px; font-size: 1.125rem; font-weight: 500; color: #111}

.page-ac .agree-all{margin-top: 40px;}
.page-ac .btn-login_w{max-width:520px; margin-left:auto; margin-right: auto;}

.join_box{max-width:872px; margin: 0 auto; color: #111;    display: flex; justify-content: space-between;}
.join_box li{border:1px solid #ccc; transition:all ease-in-out .3s; width: 48%; text-align: center; border-radius:5px; background: #fff}
.join_box .in{padding: 80px 30px; display: block;}
.join_box .in:hover,.join_box .in:focus{border-color: #000}
.join_box .t{display: block; font-size: 1.375em;}
.join_box .txt{display: block; font-size: 1.125em; margin-top: 10px;}
.join_box .btn_w{margin-top: 50px;}

.join_box .btn-st1{max-width: 183px}
.join_box .ico{height: 93px;background: url('') center center no-repeat; margin-bottom: 40px;}
.join_box .type1 .ico{background-image: url('../img/member/type1.png')}
.join_box .type2 .ico{background-image: url('../img/member/type2.png')}

.join_agree .group{margin-top: 50px;}
.join_agree .group:first-child{margin-top: 0;}

@media (max-width:1380px){
	.satis-box{font-size: 15px;}
	.satis-form{padding: 25px}
	.satis-form .s-t{font-size: 1em;}
	.satis-form .s-t_small{font-size: 1.125em; font-weight: 600;}
	.satis-radio > *{margin-right: 1.5em;}
	.satis-top .det{margin-right: 0;}
	.satis-top .det > *{margin-right: 25px;}
}
@media (max-width:1076px){
	.page-ac{margin-left: 1rem; margin-right: 1rem;}
}
@media (max-width:1024px){
	.satis-box{font-size: 14px;}
	.satis-form,.satis-top{display: block;}
	.satis-top,.satis-form{padding: 15px}
	.satis-top .edit{text-align: right; margin-top: 15px; font-size: 13px;}
	.satis-top .det > *{width: calc(50% - 25px);}
	
	.satis-form .s-t{max-width:100%; width: 100%; margin: 0 0 18px;}
	.member-common#cont{margin: 0 0 -70px; min-height: auto; padding: 80px 0 80px}
	/* .inner-member{margin-left: 1rem; margin-right: 1rem;} */
}
@media (max-width:720px){
	.satis-top .det > *{width: calc(100% - 25px);}
	.satis-form .s-t{background-size: 2em; padding-left: 2.9em;}
	
	.satis-radio{margin: 0 0 -5px;}
	.satis-radio > *{width: 50%; margin: 0 0 5px;}
	.satis-submit{padding-right: calc(5em + 5px);}
	.satis-submit input[type="text"]{padding: 0 10px}
	.satis-submit button{width: 5em}
	
	.pop-st1 .pop-cont{padding: 1rem 1rem 30px}
	.login-fail{display: block; text-align: center;}
	.login-fail .ico{margin: 0 0 15px 0; width: 100%}
	.login-fail img{display: block;margin: 0 auto}
	
	.pop-st1 .pop-tit{padding:  0 20px}
	
    .join_box{display: block;}
    .join_box li{width: 100% !important; margin-top: 1em;}
    .join_box li:first-child{margin-top: 0;}
    .join_box .in{padding: 2.5em}
    .join_box .btn_w{margin-top: 2.5em;}
    .join_box .ico{height: 5em; background-size: auto 100%; margin-bottom: 30px;}
    
    .join_box .btn-st1{width:100%}
    
    .join_ok{padding: 30px 0}
}

@media (max-width:650px){
	.member-common#cont{padding: 1rem 0}
	.inner-member{padding: 50px 1rem 40px; margin-left: 1rem; margin-right: 1rem;}
	
	.login-form input[type="text"], .login-form input[type="password"],.btn-login{height: 50px}
	.tit-member{margin-bottom: 1em;}
	.login-sns > *{width: calc(100% - 10px)}
	
	.login-form input[type="text"], .login-form input[type="password"]{padding: 0 1rem}
	.find-box{padding: 35px 1.5rem}
	
}