@charset "utf-8";

@import url("/share/css/eliceDX.css");

@font-face {
    font-family: 'nexon_lv1';
    src: url('/share/css/font/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexon_lv1';
    src: url('/share/css/font/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

:root{--color:#DD2222; --color_sub01:#02825A; --color_sub02:#2F6050; --color01:#BA2E2B; --color02:#FFD3AB; --wrapMx:1380px; --wrap:90%; --blank:5%}
::selection{background:var(--color_sub02); color: #fff;}
#main ::selection{background:var(--color); color: #fff;}
html{overflow-y: scroll; }
html, body{overflow-x:hidden; word-break:keep-all; word-wrap:break-word; overflow-wrap:break-word}
.wrapper{width: var(--wrap); max-width: var(--wrapMx); margin: auto;}

header{position: relative; z-index: 900}
#gnb{border-bottom:1px solid rgba(0,0,0,.05)}
#gnb .wrapper{display: flex; justify-content:space-between; align-items: center}
#gnb .gnb_sns{overflow: hidden; margin-left: -1rem;;}
#gnb .gnb_sns>li{float: left;}
#gnb .gnb_sns>li a{display: block; position: relative; width: 4rem; height: 4.5rem; font-size: 0px}
#gnb .gnb_sns>li a:before{display: block; content: ''; position: absolute; margin: auto; left: 0px; right: 0px; top: 50%; transform:translateY(-50%); width: 2rem; height: 2rem; background:url(/img/inc/gnb_sns.png) no-repeat left center / cover}
#gnb .gnb_sns>li:nth-child(2) a:before{background-position-x: -2rem}
#gnb .gnb_sns>li:nth-child(3) a:before{background-position-x: -4rem}
#gnb .gnb_login>li{display: inline-block; font-size: 1.4rem;}
#gnb .gnb_login li+li{margin-left: 1.5rem;}
/* nav li.select a{color: brown} */

footer{position: relative; border-top:1px solid #f0f0f0}
footer:After{display: block; content: ''; position: absolute; width: 50%; height: 100%; top: 0px; left:50%; background: #f0f0f0; z-index: -1;}
footer .wrapper{display: flex; position: relative; color:#666; width: 100%;}
footer .wrapper>div{display: flex; flex-direction:column; padding-top: 5rem; padding-bottom: 4.5rem;}
footer .tit{color:#333}
footer .grow{flex-grow:1}
footer *{font-size: 1.4rem}
footer .conL{flex-basis:35%;}
footer .conL .tit{font-size:2.1rem; font-weight: 600;}
footer .conL address{margin-top: .5rem; }
footer .conL .copy{margin-top: .5rem; }
footer .wrapper>.conM{flex-direction: row; justify-content:space-between; align-items: center; flex-basis:44%; background: #f8f8f8;}
footer .conM div{padding: 0px 7%; padding-right: 2%; flex-basis:50%}
footer .conM div+div{ border-left: 1px solid rgba(0,0,0,.05); }
footer .conM .tit{font-size: 1.7rem; }
footer .conM .tel{margin-top: .4rem; font-size: 2.1rem; font-weight: bold; color: #333;}
footer .conM ul{margin-top: 2rem;}
footer .conM ul li{font-size: 1.3rem;}
footer .conM div.contact01{display: flex; flex-wrap: wrap; }
footer .conM div.contact01 :where(.tit, .tel){font-size: 1.7rem; margin-top:0; line-height: 120%;}
footer .conM div.contact01 .tit{margin-right: 5px;}
footer .conM div.contact01 .tit span{font-size: 1em;}
footer .conM div.contact01 .tel+.tit{font-size: 1.65rem;}
footer .conR{padding-left:4% ; flex-grow:1; background: #f0f0f0}
footer .conR>div{position: relative; margin: .8rem 0px}
footer .conR select{width: 100%; padding: 1rem .7rem; border: 0px; border-bottom:1px solid #ddd; background: transparent;}
footer .conR p a{display: block; position: relative; padding: 1.2rem .7rem; border-bottom:1px solid #666}
footer .conR p a:after{content: ''; position: absolute; right: 1rem; top: 1.2rem; height:.5rem; border:5px solid transparent; border-width: 8px 5px; border-bottom-color: #666}
footer .conR ul{display: none; position: absolute; left: 0px; right: 0px; bottom: 100%; padding: 1.5rem 2rem; background: #fff; box-shadow:0px 1px 5px rgba(0,0,0,.3)}
footer .conR ul>li+li{border-top:1px solid #ddd}
footer .conR ul>li a{display: block; padding: 10px; font-size: 1.3rem;}
footer .btn_goTop{position: absolute; right: min(-5%, -12rem); top: -3.2rem;}
footer .btn_goTop a{display: block; width: 6.5rem; height: 6.5rem; background: var(--color); font-size: 0px; transition:all ease .2s}
footer .btn_goTop a:hover{box-shadow: 0px 1px 5px rgba(0,0,0,.5)}
footer .btn_goTop a:after{content: ''; display: block; position: relative; margin: auto; margin-top: -8%; width: 30%; height: 30%; top: 50%; border:2px solid #fff; border-width:2px 0px 0px 2px; transform:rotate(45deg)}


/***************************************************************************************************************************/


@media all and (min-width:800px){
	#wrap:before{display: block; content: ''; position:absolute; right: 0px; top: 0px; width: calc(((100vw - min(90%, 1380px)) / 2) + calc(min(90%, 1380px) * 0.19) + 1.5rem); height: 20rem; background: linear-gradient(165deg, #D22229 29.17%, #FF2F61 87.93%), linear-gradient(165deg, rgba(2, 130, 90, 0.40) 31.86%, rgba(190, 219, 9, 0.40) 97.94%), #02825A;}
	#main #wrap:before{height: calc(100vh - 350px + 35rem); max-height: calc(610px + 35rem); min-height: calc(500px + 35rem);}
	body:not(#main) #wrap:before{background: #DD2222;}
	#gnb .gnb_login a{color: #fff; font-weight: 300; font-size: 1.3rem}
	#lnb{display: flex; justify-content: space-between; align-items:center; padding: 1.9rem 0px; color: #333}
	#lnb h1{width:30%; max-width: 245px; font-size: 0px; }
	#lnb h2.btn_Tmenu{display: none;}
	#lnb nav{flex-grow:1; max-width: 1014px;}
	#lnb nav>ul{display: flex; justify-content: space-between;}
	#lnb nav>ul>li{flex-grow:1; position: relative;}
	#lnb nav>ul>li:where(:nth-child(6), :nth-child(7)){color: #fff; }
	#lnb nav>ul>li:last-child{flex-grow:0}
	#lnb nav>ul>li>a{display: inline-block; position: relative; font-size: 2rem;}
	#lnb nav>ul>li.on:not(:nth-child(6), :nth-child(7))>a{color:var(--color) }
	#lnb nav>ul>li:nth-child(6){padding-left: 1.5vw}
	#main #lnb nav>ul>li:where(:nth-child(6), :nth-child(7))>a:before{display: block; content: ''; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 2px; background: #fff;}
	#lnb nav.on>ul>li:where(:nth-child(6), :nth-child(7))>a:before{display: none;}
	#lnb nav .submenu{opacity: 0; visibility: hidden;position: absolute; margin-top: 2.6rem; padding: 2.5rem 0px 3rem; width: 90%; word-break:keep-all; z-index: 2; transition:all ease .5s}
	#lnb nav.on .submenu{opacity: 1; visibility: visible; margin-top: 3.6rem; }
	#lnb nav .submenu ul>li a{display: block; padding: .5rem 0px; line-height: 1.3; color: #666;}
	#lnb nav li.on .submenu ul>li a{color: #111;}
	#lnb nav li.on .submenu ul>li a:hover{color: var(--color_sub02);;}
	/* 제일 긴 메뉴선택 */
	#lnb nav>ul>li:nth-child(7){z-index: 1;}
	#lnb nav>ul>li:nth-child(7) ul:before{display: block; content: ''; position: absolute; left:-90vw;  top: 0rem; width: 150vw; height: 100%; background: #f5f5f5; z-index: -1; box-shadow:0px 3px 4px rgba(0,0,0,.4); ; border-top:1px solid rgba(0,0,0,.05)}
	#main #lnb nav>ul>li:nth-child(2) ul:before{background: rgba(255,255,255,.95);; border-top:5px solid #feecf1}
}

@media screen and (max-width:1280px){
	#wrap:before{display: none;}
	#gnb .gnb_login{color: #333;}
	#gnb .gnb_login a{color: #333}
	#lnb{flex-direction: column;}
	#lnb nav{width: 100%; margin-top: 3rem;}
	#lnb nav>ul>li>a{font-size: min(2.2vw, 2rem)}
	#lnb nav>ul>li:where(:nth-child(6), :nth-child(7)){color: #333; font-weight: normal;}
	#lnb nav .submenu ul>li a{font-size: min(1.7vw, 1.5rem)}
	/* #lnb nav>ul>li:nth-child(2) ul:before{left: calc(50% + max(102px, 11.8vw));} */
}

@media screen and (max-width:800px){
	body{padding-top: .5rem;}
	h1{margin:3rem var(--blank) 2rem; width: 70%; max-width: 210px; font-size: 0px;}
	body#main h1{margin:1rem auto;}
	h2.btn_Tmenu{position: absolute; right: calc(var(--blank) - .6rem); top: 2.7rem}
	h2.btn_Tmenu a{display: block; width: 4.5rem; height: 4.5rem; font-size: 0px; }
	h2.btn_Tmenu a:before, h2.btn_Tmenu a:after{display: block; content: '' ; position: relative; margin: auto; width: 60%; height: 2px; background: #222;}
	h2.btn_Tmenu a.open_menu:before{ top: 1.2rem; box-shadow: 0px 8px 0px #222, 0px 16px 0px #222}
	h2.btn_Tmenu a.open_menu:after{display: none;}
	h2.btn_Tmenu a.close_menu{position: relative; top: 5rem;}
	h2.btn_Tmenu a.close_menu:before, h2.btn_Tmenu a.close_menu:after{position: absolute; right: 1rem; top: 50%; }
	h2.btn_Tmenu a.close_menu:before{transform: rotate(45deg);}
	h2.btn_Tmenu a.close_menu:after{transform: rotate(-45deg);}
	header{/* display: block  !important;  */position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #f5f5f5; overflow-y:auto}
	header h1{margin:3rem 2rem !important; width: 70%; max-width: 210px; font-size: 0px;}
	#gnb{padding: .5rem 0px 0rem; background: #fff;}
	#gnb .gnb_login{color: #333}
	#gnb .gnb_login>li>a{display: block; padding-left: 22px; background-repeat: no-repeat; background-position: left top; background-size:18px}
	#gnb .gnb_login>li.ic_login a{background-image: url(/img/inc/ic_login.png);}
	#gnb .gnb_login>li.ic_join a{background-image: url(/img/inc/ic_join.png);}
	#gnb .gnb_login>li.ic_mypage a{background-image: url(/img/inc/ic_mypage.png);}
	#gnb .gnb_login>li.ic_logout a{background-image: url(/img/inc/ic_logout.png);}
	#lnb.wrapper{min-width: 100%;}
	#lnb nav>ul{display:flex; flex-direction:column; min-height: clamp(400px, calc(100vh - 15rem), 550px); background: #fff; }
	#lnb nav>ul>li{display: flex; flex-grow:1; flex-direction:column; padding: 0px 3rem;}
	#lnb nav>ul>li>a{display: flex; flex-grow:1; align-items:center; position: relative; padding:1rem 1rem; font-size: 1.7rem;}
	#lnb nav>ul>li+li>a{border-top:1px solid #eee}
	#lnb nav>ul>li>a:after{position: absolute; content:''; right: .5rem; top: 50%; width: 10px; height: 10px; border:1px solid #666; border-width:0px 1px 1px 0px; transform: rotate(-45deg) translateY(-70%)}
	#lnb nav>ul>li>a.isDep:after{display: none;}
	#lnb nav .submenu{display: none; }
	#lnb nav .submenu ul{display: flex; gap:0px 5%; flex-wrap:wrap; margin:0rem 1rem 2rem}
	#lnb nav .submenu ul li{margin:0px 0px .5rem; min-width: 30%;}
	#lnb nav .submenu ul>li:before{display: inline; content: '- '; font-size: 1.2rem; color: #666;}
	#lnb nav .submenu ul>li a{display: inline-block; padding:5px 1px 0px; font-size: 1.4rem;}
	#lnb nav>ul>li.select{background: var(--color); color: #fff}
	#lnb nav>ul>li.select>a{border-color: var(--color);}
	#lnb nav>ul>li.select>a:after{border-color:#fff !important}
	#lnb nav .submenu ul>li.select a{border-bottom: 1px solid #fff}
	#lnb nav>ul>li.select .submenu ul>li:before{color: #fff;}
	footer *{font-size: 1.3rem;}
	footer .tit{color: #eee; font-weight: normal;}
	footer .wrapper{flex-direction: column}
	footer .wrapper>div{padding: 3rem; background: #333 !important; color: #aaa;}
	footer .wrapper>div.conM{padding:3rem 0px;}
	footer .wrapper>div.conM div+div{border-color:rgba(255,255,255,.05)}
	footer:After,
	footer .wrapper>div.conR{display: none;}
	footer .conL{order:1; border-top:1px solid #000}
	footer .conL .tit{margin-bottom: .5rem; font-size: 1.8rem; font-weight: normal;}
	footer .conL .copy{margin-top: 0px;}
	footer .conM{display: flex; flex-direction: row !important; flex-grow:1; flex-wrap: wrap;}
	footer .conM .tel{font-size: 1.8rem; color: #eee}
	footer .conM ul{width: 100%;}
	footer .btn_goTop{right: 0px;  }
}