@charset "utf-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('/css/notosanskr.css');
@import url('/css/remixicon.css');
@import url('/css/xeicon.css');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

/* Reset */
*{margin:0; padding:0; box-sizing:border-box;}
*:focus { outline:none; }
body{position: relative;}
html, body { font-family:'NotoSansCJKkr', 'Noto Sans KR', 'Roboto', '나눔고딕', 'sans-serif'; font-size:100%; color:#555; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;  -webkit-font-smoothing: antialiased; line-height:1; letter-spacing: -0.01em; word-break: keep-all;}
html, body, div, span, form, input, select, button, textarea, legend, fieldset, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, blockquote, address, p, th, td, caption {margin:0;padding:0}
ol, ul, li {list-style:none;}
em, dt, dd, address, i {font-style:normal}
img {vertical-align:top}
img, fieldset {border:0 none;}
button {border:0 none;background:transparent;cursor:pointer;}
hr {display:none;}
legend, .skip, .blind, .skip_nav, .hide {width:0;height:0;visibility:hidden;font-size:0;line-height:0;position:absolute;top:0;left:-9999em;overflow:hidden;}
table caption {display:none}
table {border-collapse:collapse;border-spacing:0;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block;}
a{color: inherit;}
a:link, a:visited {text-decoration:none; }
a:hover, a:active {text-decoration:none}
h1, h2, h3, h4, h5, h6, b, strong{font-family: inherit; font-weight: 600; color: inherit;margin: 0;}
input, textarea, select,button {font-family: inherit; font-size: inherit; letter-spacing: 0em; color: inherit;	padding: 0; outline: none;}
button {border:0; cursor: pointer;}

.clearfix { display:block; }
.clearfix:after { display:block; clear:both; content:"."; visibility:hidden; height:0; }

/* 입력 스타일 */
input[type="checkbox"] {-webkit-appearance:checkbox;vertical-align:middle}
input[type="radio"] {-webkit-appearance:radio;-webkit-border-radius:50px;width:13px;height:13px;margin:0 0 3px;padding:0;vertical-align:middle}
input[type="password"],
input[type="text"] {-webkit-appearance:none; -webkit-border-radius:0; width:100%; background:#fff;  border:1px solid #d8d8d8; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0px 10px;  box-sizing:border-box;  height: 2rem; text-align:left;}
select::-ms-expand {  display: none;    -webkit-display: none;    -moz-display: none;    -o-display: none;    -ms-display: none;}
select{ background-image:none;   -webkit-appearance: none;    -moz-appearance: none;    -o-appearance: none;	-ms-appearance: none; padding:0px 10px; height:2rem; border:1px solid #d8d8d8;background-image:none;   -webkit-appearance: none;    -moz-appearance: none;    -o-appearance: none;	-ms-appearance: none;	 background:#fff url("/images/default/content/sel_icon.png") no-repeat 92% 50%; min-width:100px;}
textarea{padding:20px; width:100%; box-sizing:border-box; vertical-align:middle; line-height:1.5; background:#fff; border:1px solid #b2b2b2;  color:#898989; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius:0;}

/* IPHONE */
input[type='button'],
input[type='submit'] { -webkit-appearance: none; -webkit-border-radius: 0; }
input:disabled, textarea:disabled { opacity: 1; -webkit-text-fill-color: inherit; }
input[type="text"], input[type="password"] { -webkit-appearance: none; border-radius: 0; }


/* placeholder */
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */    color:    #818181 !important; }
input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color: #818181 !important;}
input:-moz-placeholder { /* Mozilla Firefox 19+ */    color: #818181 !important;}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */   color: #818181 !important;}
input:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */   color:#818181 !important;}


/* button */
.button{display:inline-block; overflow:hidden; position:relative; min-width:100px; height:45px; line-height:43px; box-sizing:border-box; padding:0 15px; margin:2px 0px; border:1px solid #262520; background: #262520; color:#fff !important; text-align:center; vertical-align:top; transition:all 0.4s ease-out 0.1s; cursor:pointer; z-index:0;}
.button span{position:relative; z-index:2;}
.button.red{background:#c40251; border:1px solid #c40251;}
.button.blue{background:#2377d0; border:1px solid #1760ad;}
.button.black{background:#2d2b2b; border:1px solid #1f1f1f;}
.button.gray{background:#92999e; border:1px solid #92999e;}
.button.white{background:#fff; border:1px solid #cdcdcd; color:#444 !important;}

/* button hover */
.button:before{content:''; display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:-1; width:120%; height:110%; background:#fff; transform:translateX(-120%) skew(-15deg); transition:transform 0.7s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.button:hover:before,
.button:focus:before{background:#fff; transform:translateX(-10%) skew(-15deg) perspective(500px);}
.button:hover,
.button:focus{color:#222 !important; box-shadow:0px 10px 15px rgba(0,0,0,0.15);}
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important;}
label.button.white:hover,
label.button.white:focus{color:#222 !important;}
label.button.white:before{display:none;}


/*basic*/
.clear {clear:both;}
.of{overflow:hidden;}
.blind{display:none;}

/*text-color*/
.text_white {color:#fff !important;}
.text_red {color:#ff4b00 !important;}
.text_blue {color:#55b9ff;}
.text_green {color:#7dd237;}
.text_scal {color:#e68e27;}

/*font-size*/
.fs12 {font-size:12px !important;}
.fs14 {font-size:14px !important;}
.fs16 {font-size:16px !important;}
.fs18 {font-size:18px !important;}
.fs20 {font-size:20px !important;}

/*width*/
.w0 { width:0% !important; }
.w10 { width:10% !important; }
.w20 { width:20% !important; }
.w22 { width:22% !important; }
.w30 { width:30% !important; }
.w40 { width:40% !important; }
.w45 { width:45% !important; }
.w50 { width:50% !important; }
.w60 { width:60% !important; }
.w70 { width:70% !important; }
.w80 { width:80% !important; }
.w90 { width:90% !important; }
.w100 { width:100% !important; }

.w10p { width:10px !important; }
.w20p { width:20px !important; }
.w30p { width:30px !important; }
.w40p { width:40px !important; }
.w50p { width:50px !important; }
.w60p { width:60px !important; }
.w70p { width:70px !important; }
.w80p { width:80px !important; }
.w90p { width:90px !important; }
.w100p { width:100px !important; }
.w150p { width:150px !important; }
.w200p { width:200px !important; }
.w300p { width:300px !important; }
.w400p { width:400px !important; }
.w500p { width:500px !important; }

/*height*/
.mh0 {min-height:0 !important;}

/*margin*/
.m100 {margin:100px !important;}
.m90 {margin:90px !important;}
.m80 {margin:80px !important;}
.m70 {margin:70px !important;}
.m60 {margin:60px !important;}
.m50 {margin:50px !important;}
.m40 {margin:40px !important;}
.m30 {margin:30px !important;}
.m20 {margin:20px !important;}
.m10 {margin:10px !important;}
.m5 {margin:5px !important;}
.m0a {margin:0 auto;}
.ma0 {margin:auto 0;}
.ma {margin:auto;}

/*margin-top*/
.mt100 {margin-top:100px !important;}
.mt90 {margin-top:90px !important;}
.mt80 {margin-top:80px !important;}
.mt70 {margin-top:70px !important;}
.mt60 {margin-top:60px !important;}
.mt50 {margin-top:50px !important;}
.mt40 {margin-top:40px !important;}
.mt30 {margin-top:30px !important;}
.mt20 {margin-top:20px !important;}
.mt10 {margin-top:10px !important;}
.mt5 {margin-top:5px !important;}
.mt0 {margin-top:0 !important;}

/*margin-left*/
.ml100 {margin-left:100px !important;}
.ml90 {margin-left:90px !important;}
.ml80 {margin-left:80px !important;}
.ml70 {margin-left:70px !important;}
.ml60 {margin-left:60px !important;}
.ml50 {margin-left:50px !important;}
.ml40 {margin-left:40px !important;}
.ml30 {margin-left:30px !important;}
.ml20 {margin-left:20px !important;}
.ml10 {margin-left:10px !important;}
.ml5 {margin-left:5px !important;}
.ml0 {margin-left:0 !important;}

/*margin-right*/
.mr100 {margin-right:100px !important;}
.mr90 {margin-right:90px !important;}
.mr80 {margin-right:80px !important;}
.mr70 {margin-right:70px !important;}
.mr60 {margin-right:60px !important;}
.mr50 {margin-right:50px !important;}
.mr40 {margin-right:40px !important;}
.mr30 {margin-right:30px !important;}
.mr20 {margin-right:20px !important;}
.mr10 {margin-right:10px !important;}
.mr5 {margin-right:5px !important;}
.mr0 {margin-right:0 !important;}

/*margin-bottom*/
.mb100 {margin-bottom:100px !important;}
.mb90 {margin-bottom:90px !important;}
.mb80 {margin-bottom:80px !important;}
.mb70 {margin-bottom:70px !important;}
.mb60 {margin-bottom:60px !important;}
.mb50 {margin-bottom:50px !important;}
.mb40 {margin-bottom:40px !important;}
.mb30 {margin-bottom:30px !important;}
.mb20 {margin-bottom:20px !important;}
.mb10 {margin-bottom:10px !important;}
.mb5 {margin-bottom:5px !important;}
.mb0 {margin-bottom:0 !important;}

/*padding*/
.p100 {padding:100px !important;}
.p90 {padding:90px !important;}
.p80 {padding:80px !important;}
.p70 {padding:70px !important;}
.p60 {padding:60px !important;}
.p50 {padding:50px !important;}
.p40 {padding:40px !important;}
.p30 {padding:30px !important;}
.p20 {padding:20px !important;}
.p10 {padding:10px !important;}
.p5 {padding:5px !important;}
.p0 {padding:0 !important;}

/*padding_horizontal*/
.ph100 {padding:0 100px !important;}
.ph90 {padding:0 90px !important;}
.ph80 {padding:0 80px !important;}
.ph70 {padding:0 70px !important;}
.ph60 {padding:0 60px !important;}
.ph50 {padding:0 50px !important;}
.ph40 {padding:0 40px !important;}
.ph30 {padding:0 30px !important;}
.ph20 {padding:0 20px !important;}
.ph10 {padding:0 10px !important;}
.ph5 {padding:0 5px !important;}

/*padding_vertical*/
.pv100 {padding:100px 0 !important;}
.pv90 {padding:90px 0 !important;}
.pv80 {padding:80px 0 !important;}
.pv70 {padding:70px 0 !important;}
.pv60 {padding:60px 0 !important;}
.pv50 {padding:50px 0 !important;}
.pv40 {padding:40px 0 !important;}
.pv30 {padding:30px 0 !important;}
.pv20 {padding:20px 0 !important;}
.pv10 {padding:10px 0 !important;}
.pv5 {padding:5px 0 !important;}

/*padding-top*/
.pt100 {padding-top:100px !important;}
.pt90 {padding-top:90px !important;}
.pt80 {padding-top:80px !important;}
.pt70 {padding-top:70px !important;}
.pt60 {padding-top:60px !important;}
.pt50 {padding-top:50px !important;}
.pt40 {padding-top:40px !important;}
.pt30 {padding-top:30px !important;}
.pt20 {padding-top:20px !important;}
.pt10 {padding-top:10px !important;}
.pt5 {padding-top:5px !important;}
.pt0 {padding-top:0 !important;}

/*padding-left*/
.pl100 {padding-left:100px !important;}
.pl90 {padding-left:90px !important;}
.pl80 {padding-left:80px !important;}
.pl70 {padding-left:70px !important;}
.pl60 {padding-left:60px !important;}
.pl50 {padding-left:50px !important;}
.pl40 {padding-left:40px !important;}
.pl30 {padding-left:30px !important;}
.pl20 {padding-left:20px !important;}
.pl10 {padding-left:10px !important;}
.pl5 {padding-left:5px !important;}
.pl0 {padding-left:0 !important;}

/*padding-right*/
.pr100 {padding-right:100px !important;}
.pr90 {padding-right:90px !important;}
.pr80 {padding-right:80px !important;}
.pr70 {padding-right:70px !important;}
.pr60 {padding-right:60px !important;}
.pr50 {padding-right:50px !important;}
.pr40 {padding-right:40px !important;}
.pr30 {padding-right:30px !important;}
.pr20 {padding-right:20px !important;}
.pr10 {padding-right:10px !important;}
.pr5 {padding-right:5px !important;}
.pr0 {padding-right:0 !important;}

/*padding-bottom*/
.pb100 {padding-bottom:100px !important;}
.pb90 {padding-bottom:90px !important;}
.pb80 {padding-bottom:80px !important;}
.pb70 {padding-bottom:70px !important;}
.pb60 {padding-bottom:60px !important;}
.pb50 {padding-bottom:50px !important;}
.pb40 {padding-bottom:40px !important;}
.pb30 {padding-bottom:30px !important;}
.pb20 {padding-bottom:20px !important;}
.pb15 {padding-bottom:15px !important;}
.pb10 {padding-bottom:10px !important;}
.pb5 {padding-bottom:5px !important;}
.pb0 {padding-bottom:0 !important;}

/*border-radius*/
.bra50 {border-radius:50%;}
.bra10 {border-radius:10px;}
.bra5 {border-radius:5px;}
.bra3 {border-radius:3px;}

/*background-color*/
.bg_fff {background-color:#fff;}
.bg_gray {background-color:#f9f9fb;}
.bg_dgray {background-color:#f2f2f4;}
.bg_dblue {background-color:#3c4650;}
.bg_blue {background-color:#55b9ff;}
.bgn {background:none !important;}
.bgcn {background-color:transparent !important;}

/*float*/
.fl {float:left !important;}
.fr {float:right !important;}
.fn {float:none !important;}

/*text-align*/
.ac {text-align:center !important;}
.al {text-align:left !important;}
.ar {text-align:right !important;}
.aj {text-align:justify !important;}

/*font-weight*/
.tb {font-weight:bold;}
.tn {font-weight:normal;}

/*text-decoration*/
.tdo {text-decoration:overline;}
.tdl {text-decoration:line-through;}
.tdo {text-decoration:underline;}

/*display*/
.db {display:block !important;}
.di {display:inline !important;}
.dib {display:inline-block !important;}



/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden;}
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}
#wrap object{pointer-events: none;}

/*-----폰트-----*/
#menuAll h3{font-size:1.5rem; }
#menuAll .mobile_top ul li > a{font-size:1.1rem;}
#header .header_inner #nav ul li a{font-size:1rem;}
#header{font-size: .9rem;}
#header .header_inner #nav ul li ul li a{font-size: .85rem;}
#menuAll .mobile_top ul li ul li a,
#footer{font-size:.8rem;}
#wrap .log_menu li a{font-size: .75rem;}

/*헤더*/
#header{position:relative; width:100%;-webkit-transition:all .3s;transition:all .3s;}
#header h1{position:absolute; left:1rem; top:50%; transform:translateY(-50%); z-index:100;}
#header h1 a{display: block;}
#header h1 a img{width: 13.65rem; vertical-align: middle;}
#header .header_inner{position:relative; width:1300px; margin:0 auto; height:4.2rem; }
#header .header_inner:after{content:""; display:block; clear:both;}
/*-----네비게이션-----*/
#header .header_inner #nav {display: flex; flex-direction: row; justify-content: center; align-items: center;}
#header .header_inner #nav{margin-left: 5rem;} /* 2021-07-20추가 */
#header .header_inner #nav ul {clear:both;  position:relative; box-sizing:border-box;height:100%;}
#header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header .header_inner #nav ul li {position:relative; }
#header .header_inner #nav > ul > li:after{position: absolute; content: ''; display: block; width: .4rem; height: .4rem; border-radius: 50%; overflow: hidden; right:-.2rem; top: 50%; transform:translateY(-50%); background-color: #dbf2bd;}
#header .header_inner #nav > ul > li:last-child:after{background: none;}
#header .header_inner #nav ul li a{text-align:center; color:#000; font-weight: 600;  display:inline-block; height:4.3rem; line-height:4.3rem; text-transform: uppercase; position:relative;padding:0 1.85rem; transition: all .2s; -webkit-transition: all .2s;}

#header .header_inner #nav ul li ul {z-index: 100; display:none; position: absolute; width:9rem;  left:50%; margin-left:-4.5rem; top:4.3rem; padding:1rem 0 .5rem; box-sizing:border-box;  border-top:none; text-align:center; background:#fff; border: 2px solid #000; border-radius: .5rem; height:auto;  opacity:0;   display: none;	animation-name: slide_down;	animation-duration:0.5s;    animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards; box-shadow: .4rem .4rem 0 rgba(0,0,0,.1); -webkit-box-shadow: .4rem .4rem 0 rgba(0,0,0,.1);}
#header .header_inner #nav ul li ul:before {display: block; content: '';  position: absolute; z-index: 4000; top:-.4rem;  left: 50%;  width: .5rem;  height: .5rem; background: #fff;  border-left: solid 2px #000; border-top: solid 2px #000;  -webkit-transform: rotate(45deg);   -ms-transform: rotate(45deg); margin-left:-5px;  transform: rotate(45deg); }
#header .header_inner #nav ul li ul li {display:block;margin:0; margin-bottom:13px; line-height:1.5;}
#header .header_inner #nav ul li ul li a{display:block;color:#000; padding:0; height:auto; font-weight: 500; line-height:1.5; transition: all .2s; -webkit-transition: all .2s;}
#header .header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;}
#header .header_inner #nav ul li ul li a:hover{color:#416ead;}
#header .header_inner #nav ul li.active a:before{width:100%; left:0%;}
#header .header_inner #nav ul li.active > div > a{color:#416ead;}
#header .header_inner #nav ul li.active ul li:after{display:none;}
/*-----회원서비스-----*/
#wrap .log_menu{position: absolute; right:4.2rem; top:50%; transform:translateY(-50%); box-sizing:border-box; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;}
#wrap .log_menu > li{position: relative;}
#wrap .log_menu > li:after{position: absolute; content:''; display: block; right:.75rem; top: 50%; transform: translateY(-50%); width: 1px; height: 45%; background: #000;}
#wrap .log_menu > li:last-child:after{display: none;}
#wrap .log_menu > li > a{position: relative; display: block; padding:0 1.5rem; height: 2rem; line-height: 2rem; vertical-align: -0.1rem; transition: all .2s; -webkit-transition: all .2s;}
#wrap .log_menu > li > a:after{position: absolute; content:''; display: block; left:0; top: 50%; transform: translateY(-50%); width: 1.2rem; height: .95rem;}
#wrap .log_menu > li:last-child > a{padding: 0 1rem 0 1.5rem;}
#wrap .log_menu li.log_join a:after{background: url("/images/default/main/log_menu01.png") no-repeat center center / 1.25rem .95rem;}
#wrap .log_menu li.log_in a:after{background: url("/images/default/main/log_menu02.png") no-repeat center center / 1.25rem .95rem;}
#wrap .log_menu li.log_mypage a:after{background: url("/images/default/main/log_menu03.png") no-repeat center center / 1.25rem .95rem;}
#wrap .log_menu li.log_out a:after{background: url("/images/default/main/log_menu04.png") no-repeat center center / 1.25rem .95rem;}

#wrap .log_menu li.log_mypage{position:relative;}
#wrap .log_menu li.log_mypage > a{position:relative;}
#wrap .log_menu li.log_mypage .mypage_list {padding-right: 0; z-index: 101; display:none; position: absolute;  top: 3.1rem;  left:-1rem;  }
#wrap .log_menu li.log_mypage .mypage_list li{margin-right: 0; width: 8rem; background: #fff; transition: all 1s; -webkit-transition: all .6s;}
#wrap .log_menu li.log_mypage .mypage_list li:after{display: none;}
#wrap .log_menu li.log_mypage .mypage_list li .m_link{display: block; line-height: 1; padding: .75rem .5rem;}
#wrap .log_menu li.log_mypage .mypage_list li .m_link:after{display: none;}
#wrap .log_menu li.log_mypage .mypage_list li img{padding-right: .5rem; vertical-align: top;}
#wrap .log_menu li.log_mypage .mypage_list li:hover{background: #ff8931; color: #fff;}
/*-----해더탑 2021-07-20 추가-----*/
#wrap .header_top{position: relative; height: 2.2rem; line-height: 2.2rem; background: #f3f3f3; z-index: 101;}
#wrap .header_top .log_menu{right: 3.5rem;}
#wrap .header_top .log_menu li.log_mypage .mypage_list{left: -1.5rem; top: 2.1rem;}
#wrap .header_top .log_menu li.log_mypage .mypage_list li{background: #f3f3f3;}
#wrap .header_top .log_menu li.log_mypage .mypage_list li:hover{background: #ff8931;}

/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{position:absolute; right:0; top:0; width:4.2rem; height:4.2rem; background: #416ead; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}
#header .btnAll {position:relative; width:1.6rem; height:1.5rem; top:45%; transform:translateY(-45%);outline: none; z-index:9999;}
#header .btnAll span { display: block; width: 100%; height: 0.15rem; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 0.5rem; right:0;}
#header .btnAll > span:nth-child(3) { top: 1rem; right:0;}
#header.open .btn-gnb-menu{display:block; background:#b4d1ee;}
#header.open .btn-gnb-menu{top:-2.2rem; -webkit-transition: all 0.25s; transition: all 0.25s;} /* 2021-07-20추가 */
#header.open .btnAll > span{background:#000;}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}
@keyframes slide_down {
  from {
    transform: translateX(0px) translateY(-30px);
	opacity:0;
  }
  to {
    transform: translateX(0px) translateY(0px);
	opacity:1;
  }
}


/*사이트맵*/
#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:0;  z-index:200; transition:right 0.45s;}
#header.open #navi{transition:right 0.45s; right:0px;}
#menuAll .log_mobile,
#menuAll .my_bx{display: none;}
#menuAll .mobile_top{width:100%; height:100%;position:relative; background: url('/images/default/main/menu_bg.jpg') no-repeat center bottom / cover; display: flex; flex-direction: column; justify-content: center;}
#menuAll .mobile_top:before{position: absolute; content: ''; display: block; width: 11.7rem; height: 15.8rem; left: 1vw; bottom:0; background: url('/images/default/main/menu_bgL.png') no-repeat center bottom / 11.7rem 15.8rem; z-index: 2;}
#menuAll .mobile_top:after{position: absolute; content: ''; display: block; width: 9.8rem; height: 18.75rem; right: 1vw; bottom:0; background: url('/images/default/main/menu_bgR.png') no-repeat center bottom / 9.8rem 18.75rem; z-index: 2;}
#menuAll .mobile_top .menuAll_title{margin: 0 auto; width: 18.25rem; height: 4.25rem; background: url('/images/default/main/prog_bg.gif') no-repeat center bottom / 18.25rem 4.25rem; display: flex; justify-content: center; align-items: flex-end;color:#fff; padding-bottom:10px; margin-bottom: -.5rem; font-size:0.85rem;}
#menuAll .mobile_top .menuAll_title b{color:#ffec00;}
#menuAll .mobile_top .menuAll_title .ma_subtitle{height: .85rem; margin-bottom: .85rem;}
#menuAll .mobile_top .ma_title{height: 3rem; margin-bottom: -1.5rem; z-index: 5;}
#menuAll .mobile_top .mbtop{width: 1300px; margin: 0 auto; border-radius: 1rem; border: .5rem solid #000;  background: #fff; padding: 4rem 2rem; display: flex; flex-wrap: wrap; margin-bottom: 5rem;}
#menuAll .mobile_top .mbtop > li{width: calc(100%/3 - 2%);}
#menuAll .mobile_top .mbtop > li > a{position:relative; text-align: center; border: 2px solid #000; background: #f9bcd3; border-radius: .5rem; color: #000; font-weight: 700; padding:.5rem 0;}
#menuAll .mobile_top .mbtop > li:nth-of-type(4) > a, #menuAll .mobile_top .mbtop > li:nth-of-type(5) > a,
#menuAll .mobile_top .mbtop > li:nth-of-type(6) > a{background: #b4d1ee;}
#menuAll .mobile_top ul {overflow: hidden;}
#menuAll .mobile_top ul li{ margin:1%; }
#menuAll .mobile_top ul li > a{display:block; font-weight:500; padding:1rem 0; width:100%; position:relative; transition: all .5s; -webkit-transition: all .5s;}
#menuAll .mobile_top ul li ul{margin-top:1rem; margin-left: 1rem;}
#menuAll .mobile_top ul li ul li{float:none; width:100%; position:relative; margin-top:1rem;}
#menuAll .mobile_top ul li ul li:first-child{margin-top:0;}
#menuAll .mobile_top ul li ul li a{ display:block; background:none; text-align: left; padding:0; color:#666;}
#menuAll .mobile_top ul li ul li ul{margin:.5rem 0 1rem;}
#menuAll .mobile_top ul li ul li ul li{margin-top: .2rem;}
#menuAll .mobile_top ul li ul li ul li:before{content : ""; display : block; position : absolute; left :0px;  top:10px; background:#666; width: .2rem; height:.2rem; border-radius:50%; }
#menuAll .mobile_top ul li ul li ul li a{color:#777; font-weight:400; padding-left: .5rem;}
#menuAll .mobile_top ul li ul li a strong{position: relative; color: #000; font-weight: 700;}
#menuAll .mobile_top ul li ul li a strong:after{position: absolute; content: ''; display: block; width: 100%; height: 2px; background: #000; bottom:-.2rem; left: 50%; transform: translateX(-50%);}
#menuAll .mobile_top .mbtop > li.active > a{box-shadow: .3rem -.3rem 0 rgba(0,0,0, .2);}


/*푸터*/
#footer{clear:both; background:#363636; color:#fff; letter-spacing:0.02em;}
#footer .f_t{display:flex;}
#footer .copyright{position: relative; background: #434343; width:100%; padding: 0 0 0 1rem; margin:0 auto; display:flex; justify-content:space-between;}
#footer .copyright .main_ft{display:flex; height: 3.5rem; line-height: 3.5rem;}
#footer .copyright .main_ft li {margin-right:1rem;}
#footer .copyright .main_ft li a{color:#fff;border-right:1px solid #919191;padding-right:1rem;}
#footer .copyright .main_ft li:last-child{margin-right:0;}
#footer .copyright .main_ft li:last-child a{border-right:0;}

#footer .copyright .site_shotcut {width:13rem; border-left:1px solid #919191;}
#footer .copyright .site_shotcut dl{position:relative;}
#footer .copyright .site_shotcut .site_click {position:relative; height: 3.5rem; line-height: 3.5rem; width:100%; padding: 0 1rem; text-align:left; color:#fff; opacity:1; transform:none; -webkit-transform:none; transition:none; -webkit-transition:none;}
#footer .copyright .site_shotcut .site_click:after { content:''; position:absolute; right:1rem; top:50%; width:.3rem; height:.3rem; border:0 solid #fff; border-width:.1rem 0 0 .1rem; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
#footer .copyright .site_shotcut.on .site_click:after { margin-bottom:4px; -webkit-transform:rotate(225deg); transform:rotate(225deg); }
#footer .copyright .site_shotcut .site_click:hover{background:#333;transition:all .5s;}
#footer .copyright .site_shotcut .site_list { position:absolute; bottom: 3.5rem;width:100%; right: 0; display:none; padding:.55rem 0;background-color:#333; }
#footer .copyright .site_shotcut .site_list li a { display:block; padding:.5rem .9rem; color:#fff; }

#footer .address{width:100%; padding: 2.5rem 1rem;  margin:0 auto; display:flex; justify-content:space-between;}
#footer .address p {color: #a8a8a8; margin-top:.25rem; font-weight: 300; line-height: 1.3;}
#footer .address p em{color: #fff;}
#footer .address p span{padding:0 .2rem;}
#footer .address .copy{ padding-top: .25rem; /* text-transform: uppercase; */}
#footer .address h3 object{width: 12rem;}



/********************************************************
■ 레이아웃 변경
********************************************************/
@media (max-width:1500px){
	#header .header_inner #nav ul li a {font-size: .85rem; padding: 0 1.5rem;}
	#wrap .log_menu li a{font-size: .75rem; padding: 0 1.25rem;}
	#wrap .log_menu li:last-child a{padding: 0 1rem 0 1.25rem;}
	#wrap .log_menu li:after{right: .625rem;}
}


@media (max-width:1300px){
	/*헤더*/
	#header .header_inner{width: 100%;}
	#header .header_inner #nav {display: none;}

	/*전체메뉴*/
	#menuAll .mobile_top ul {width:100%; padding:0 1rem; }
	/* #menuAll .mobile_top .mbtop{overflow: hidden;width: 100%;position: absolute;left: 50%;top: 5%;transform: translateX(-50%);padding:1rem;} */
	#menuAll .mobile_top .mbtop {width: calc(100% - 4rem); }

	/*푸터*/
	#footer .copyright .site_shotcut {width:11rem;}
	#footer .address h3 object{width: 10rem;}
}



/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
    body{font-size:1rem}
	.tablet{display:block;}
	/*-----폰트-----*/
	#menuAll .my_list li a{font-size: 1.1rem;}

	/*헤더*/
	#header .header_inner {height: 4rem;}
	/*-----회원서비스-----*/
	#wrap .log_menu{display: none;}
	/*-----해더탑 2021-07-20 추가-----*/
	#wrap  .header_top{display: none;}
	/*-----사이트맵 버튼-----*/
	#header .btn-gnb-menu{width: 4rem; height: 4rem;}
	#header.open .btn-gnb-menu{top:0;} /* 2021-07-20 추가 */


	/*전체메뉴*/
	#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:4rem; z-index:100; transition:right 0.45s;}
    #header.open #navi{transition:right 0.45s; right:0px;}
    #menuAll{display: block;}
    #navi h3{font-size:1.2rem; padding:1rem 0.75rem; line-height:1.3; font-weight:normal; margin:0; text-align: center;background: linear-gradient(to left, #a5c854, #67c5cc); }
    #navi h3 em{font-weight:600;color:#fff;}
	#menuAll .mobile_top{width:100%;height:100%; background: #b4d2ee; justify-content: flex-start; padding-top: 1rem; margin-bottom: 0;}
	#menuAll .mobile_top:before,
	#menuAll .mobile_top:after{display: none;}
	
	

	
	#menuAll .mobile_top .mbtop{border: 0; width: calc(100% - 2rem); padding: 4rem 1rem;}
	#menuAll .mobile_top .mbtop > li{width: 100%;}
	#menuAll .mobile_top .mbtop > li > a:after{display:none;}
	/*-----회원서비스-----*/
	#menuAll .log_mobile{width: 100%; position:absolute; right:0; top:2rem; box-sizing:border-box; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 1rem; padding-left: 2rem; background:#b4d2ee;}
	#menuAll .log_mobile li a{font-size: 1.2rem; padding: 0 1.5rem; color: #000; font-weight: 500;}
	#menuAll .log_mobile li:last-child a{padding: 0 1rem 0 1.5rem;}
	#menuAll .log_mobile li:after{right: .75rem; background: #000; width: 2px;}
	/*-----마이페이지-----*/
	#menuAll .my_bx{display: block; background: #b4d2ee;}
	#menuAll .my_list {clear:both;overflow:hidden;  }
	#menuAll .my_list li {position: relative; float:left;width: 50%; background:rgba(255,255,255,0.4);text-align:center; line-height:1;padding:1.3rem 0;}
	#menuAll .my_list li:after{content : ""; display : block; position : absolute; right:0; top: 50%; transform: translateY(-50%); width :1px; height : 60%; background:#b4d2ee;}
	#menuAll .my_list li:nth-of-type(2n):after{display: none;}
	#menuAll .my_list li a{color:#000;}


    /*1차*/
	#menuAll .mobile_top .mbtop > li:nth-of-type(1) > a, #menuAll .mobile_top .mbtop > li:nth-of-type(2) > a, #menuAll .mobile_top .mbtop > li:nth-of-type(3) > a,
	#menuAll .mobile_top .mbtop > li:nth-of-type(4) > a, #menuAll .mobile_top .mbtop > li:nth-of-type(5) > a, #menuAll .mobile_top .mbtop > li:nth-of-type(6) > a,
	#menuAll .mobile_top .mbtop > li:nth-of-type(7) > a{background: #fff;}
	#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; padding: 1rem 1.5rem; text-align: left;}
    #navi ul.mbtop {width:100%; margin:0; padding:0;}
    #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px #eee solid; position:relative;}
	#navi ul.mbtop li:after{ content :"\e941"; display : block; position : absolute; right:1rem;  top:1rem; font-family:'xeicon'; font-weight:500; }
	#navi ul.mbtop li:nth-of-type(2):after,
	#navi ul.mbtop li:nth-of-type(7):after{display: none;}

    #navi ul.mbtop > li:first-child{border-top:1px #eee solid;}
	#navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem;  font-weight: 700;  color:#262626;}
    #navi ul.mbtop li.open_li{position:relative;}
	#navi ul.mbtop > li.open_li > a{ background: #abd5f2 !important; border-bottom: 1px solid #b5b5b5;}

    #navi ul.mbtop li.open_li:after{ content :"\e944";}
    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; background-color:#eaf5ff; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;}
    #navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none; padding-left:0;}
    #navi ul.mbtop li ul li a {background:url(none);  height:auto; padding-left:0;  font-size:1rem;}	
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}
    /*3차*/
    #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
    #navi ul.mbtop li ul li ul li {display:none;}
	#menuAll .mobile_top .mbtop > li.active > a{box-shadow: none;}


	/*푸터*/
	#footer .address{display: block;}
	#footer .address h3{margin-top: 1.5rem;}
	#footer .address h3 object{width: 12rem;}
}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html{font-size:15px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}

	
	/*전체메뉴*/
	#menuAll .mobile_top {display: block}
	#menuAll .mobile_top .menuAll_title{width: 16rem; height: 3.726rem; background: url('/images/default/main/prog_bg.gif') no-repeat center bottom / 16rem 3.726rem; margin-bottom: -.5rem;}
	#menuAll .mobile_top .menuAll_title .ma_subtitle{height: .75rem; margin-bottom: .75rem;}
	#menuAll .mobile_top .ma_title{position: absolute; left: 50%; transform: translateX(-50%); top: 3.9rem; height: 2rem; margin-bottom: 0;}
	#menuAll .mobile_top .mbtop{padding: 3rem 1rem; overflow-Y: scroll; height: 80vh; max-height: 30rem;}


	/*푸터*/
	#footer .copyright{display: block; padding:0;}
	#footer .copyright .site_shotcut {width: 100%; border: 0; border-top:1px solid #919191; border-bottom:1px solid #919191;}
	#footer .copyright .site_shotcut .site_list{border-bottom:1px solid #919191;}
	#footer .copyright .main_ft{width: 100%; flex-wrap: wrap; margin-top: -.5rem; padding: 1rem 0; height: auto; line-height: inherit;}
	#footer .copyright .main_ft li{width: 50%; text-align: center; margin-right:0; margin-top: .5rem;}
	#footer .copyright .main_ft li a{display: block; width: 100%;  padding-right:0;}
	#footer .copyright .main_ft li:nth-of-type(2n) a{border-right: 0;}

	#footer .address p span{display: block; height:.2rem; text-indent:-10000px}
}


@media (max-width:480px){
	/*-----폰트-----*/
	#menuAll .my_list li a{font-size: .9rem;}
}	