/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; font-size: .9rem;}
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}
.lm_bg{position:relative;z-index:1;}

/*언어별*/
.select_btn{width:4.85rem;height:2.5rem;border-radius:2rem;font-size:0.8rem;font-weight:600;color:#fff;padding:0 1rem;display:flex;align-items: center;font-weight:600;justify-content:space-between;border-radius: 2.5rem;
border: 1px solid #FFF;background:url(/images/default/main/lang-arrow.svg)no-repeat center right+1rem}
.option_list { display:none; position: absolute;  top: 3rem; z-index:1000; background: #fff;   padding: 15px 25px;border-radius:0.4rem;box-shadow: 0 5px 1rem rgb(0 0 0 / 10%);width:4.85rem;}
.option_list li { margin-top: 5px;}
.option_list li a { display: block;  font-size: 0.8rem;  color: #666;text-align:center;}
.option_list li:first-child { margin-top: 0;}
.lang-wrap {position:relative;margin-left:0.8rem;}


/*헤더*/
#header {position:absolute;left:0;top:0;width:100%;z-index:999;}
#header .header-inner {width:1600px;margin:0 auto;display:flex;justify-content:space-between;padding-top:1.15rem;    align-items: center;}
#header .header-inner #nav {width:650px;border-radius:2.5rem;border:1px solid rgba(255,255,255,0.7);position:relative;}
#header .header-inner #nav > ul {display:flex;    padding: 0 3.75rem;}
#header .header-inner #nav > ul > li {flex:1;}
#header .header-inner #nav > ul > li > div {height:65px;display:flex;justify-content:center;align-items:center;text-align:center;}
#header .header-inner #nav > ul > li > div > a {font-size:0.9rem;color:#fff;font-weight:700;display:inline-block;width:100%;height:100%;line-height:65px;}
#header .header-inner #nav > ul > li > ul {position: absolute;top: 90px;left: 0;width: 100%;background: rgba(255, 255, 255, 0.05);-webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px);border-radius:1rem;border:1px solid rgba(255,255,255,0.7);padding:1.5rem 1.4rem;opacity:0;    visibility: hidden;    transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);min-height:302px;}
#header .header-inner #nav > ul > li > ul > li > a{width:170px;display:inline-block;height:40px;border-radius:50px;border:1px solid #fff;line-height:38px;font-size:0.8rem;color:#fff;padding:0 1rem;}
#header .header-inner #nav > ul > li > ul > li > a:hover{background:#fff url(/images/default/main/nav-arrow.svg)no-repeat center right+0.6rem;color:#13132E;}
#header .header-inner #nav > ul > li > ul > li:not(:last-child){margin-bottom:10px;}

@media (max-width:1600px){
	#header .header-inner {width:100%;padding:0 1rem;padding-top:1.15rem;}
}

@media (max-width:1030px){
	#header .header-inner #nav{display:none;}
}

/*헤더 이미지 영역*/
#header .header-inner #nav > ul > li:first-child > ul:after {content:'';position:absolute;right:1.4rem;top:1.5rem;background:url(/images/default/main/nav-img01.png)no-repeat center center;background-size:cover;width:15.7rem;height:12rem;}
#header .header-inner #nav > ul > li:nth-child(2) > ul:after {content:'';position:absolute;right:1.4rem;top:1.5rem;background:url(/images/default/main/nav-img02.png)no-repeat center center;background-size:cover;width:15.7rem;height:12rem;}
#header .header-inner #nav > ul > li:nth-child(3) > ul:after {content:'';position:absolute;right:1.4rem;top:1.5rem;background:url(/images/default/main/nav-img03.png)no-repeat center center;background-size:cover;width:15.7rem;height:12rem;}
#header .header-inner #nav > ul > li:nth-child(4) > ul:after {content:'';position:absolute;right:1.4rem;top:1.5rem;background:url(/images/default/main/nav-img04.png)no-repeat center center;background-size:cover;width:15.7rem;height:12rem;}

#header .header-inner #nav > ul > li:nth-child(2) > ul > li > a {width:220px;}


/*헤더 호버 효과*/
#header .header-inner #nav > ul > li.on > ul {    visibility: visible; opacity: 1.0;}

/*헤더 문의하기 버튼*/
#header .header-inner .header-right{display:flex;align-items: center;}
#header .header-inner .header-right a.link-btn {background:#000;color:#fff;width:6.25rem;height:2.5rem;display:flex;align-items: center;justify-content: center;border-radius:100px;z-index: 9999;background: linear-gradient(to right, #A8B2FF, #7B3DEA);}
#header .header-inner .header-right a.link-btn .link-box {display: flex;align-items: center;overflow: hidden;position: relative;}
#header .header-inner .header-right a.link-btn .link-box span {display:flex;align-items:center;transition: all .2s;  transform: translateY(0) rotate(0.00001deg);    --animation-bounce: 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);font-size:0.8rem;font-weight:500;}
#header .header-inner .header-right a.link-btn .link-box span.duplicate {position: absolute;transform: translateY(100%) rotate(0.00001deg);     transition: all .2s;}
#header .header-inner .header-right a.link-btn .link-box span img{margin-left:0.5rem;}
#header .header-inner .header-right a.link-btn:hover .link-box span {    transform: translateY(-100%) rotate(0.0001deg);}
#header .header-inner .header-right a.link-btn:hover .link-box span.duplicate {    transform: translateY(0) rotate(0.0001deg);}


/*-----사이트맵 버튼-----*/
.header-right-mob {display:none;}


#header .btn-gnb-menu{position:absolute; right:0; top:0; width:5rem; height:4.3rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}
#header .btnAll {position:relative; display:block; width:1.6rem; height:1.15rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; 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; width:80%;}
#header .btnAll > span:nth-child(3) { top: 1rem; right:0;}
#header.open .btnAll > span{}
#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:#13132E; position:fixed; top:0; left:-100%; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:20; transition:left 0.45s;overflow-y:scroll;}
#header.open #navi{transition:left 0.45s; left:0px;}
#header #navi .mobile_top{height:100%;position:relative;}
#header #navi .site-bg{position:absolute;z-index:1;width:0;margin:0 auto;height:100%;}
#header #navi .site-bg .bg{position: fixed;width:0;left: 0;top: 0;max-height: 980px;height: 100vh;margin-left: 0;background: url(/images/default/main/sitemap1.jpg) left no-repeat;background-size: cover;transition-duration: 0.5s;  animation-delay:1s; transition: all 0.5s cubic-bezier(.16,1,.64,1);}
#header #navi  .mbtop{width:0;padding-left:calc(30% + 5.75rem);background:#13132E;padding-top:4.75rem;transition-duration: 0.5s;padding-right:6.5rem;}
#header #navi  .mbtop li a{color:#fff;}

#header #navi{
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}
.mob-btn{display:flex;margin-top:1.5rem;padding:0 1rem;align-items:center;}


.mob-btn a.link-btn {background:#000;color:#fff;width:6.25rem;height:2.5rem;display:flex;align-items: center;justify-content: center;border-radius:100px;z-index: 9999;background: linear-gradient(to right, #A8B2FF, #7B3DEA);}
.mob-btn a.link-btn .link-box {display: flex;align-items: center;overflow: hidden;position: relative;}
.mob-btn a.link-btn .link-box span {display:flex;align-items:center;transition: all .2s;  transform: translateY(0) rotate(0.00001deg);    --animation-bounce: 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);font-size:0.8rem;font-weight:500;}
.mob-btn a.link-btn .link-box span.duplicate {position: absolute;transform: translateY(100%) rotate(0.00001deg);     transition: all .2s;}
.mob-btn a.link-btn .link-box span img{margin-left:0.5rem;}
.mob-btn a.link-btn:hover .link-box span {    transform: translateY(-100%) rotate(0.0001deg);}
.mob-btn a.link-btn:hover .link-box span.duplicate {    transform: translateY(0) rotate(0.0001deg);}




#header.open #navi .site-bg.open .bg {width:30%;transition: all 0.8s cubic-bezier(.16,1,.64,1);}
#header.open #navi .mbtop{width:100%;transition-duration: 0.5s;}
#header #navi  .mbtop > li {border-bottom:1px solid rgba(255,255,255,0.3);    opacity: 0;margin-left: 100px;transition-duration: 0.5s;}
#header.open #navi  .mbtop > li  {opacity: 1;margin-left: 0px;transition-duration: 0.5s;    animation-delay: .4s;}

#header.open #navi  .mbtop > li > ul > li:not(:last-child) {margin-bottom:0.75rem;}
#header #navi  .mbtop > li:first-child{padding-top:0;}
#header #navi  .mbtop > li:first-child{padding-top:0;}
#header #navi  .mbtop > li > a{font-size:1.3rem;font-weight:700;}
#header #navi  .mbtop .depth1-div{margin-top:0.75rem;}
#header #navi  .mbtop .depth1-div > ul {display:flex;}
#header #navi  .mbtop .depth1-div > ul > li:not(:last-child){margin-right:7rem;}
#header #navi  .mbtop .depth1-div > ul > li > a{font-size:0.9rem;color:rgba(255,255,255,0.7);font-weight:600;margin-top:0.75rem;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul {margin-top:0.75rem;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a{font-size:15px;color:rgba(255,255,255,0.4);position:relative;padding-left:0.5rem;display:inline-block;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:before{content:'';display:block;position:absolute;width:5px;height:1px;background:rgba(255,255,255,0.4);top:0.5rem;left:0;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:after{content:'';display:block;width:100%;height:1px;background:#fff;left:0;bottom:0;opacity:0;}

#header #navi  .mbtop .depth1-div > ul > li:hover > a {color:#fff;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:hover:after{opacity:1;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:hover{color:#fff;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:hover:before{background:#fff;}


#header.open #menuAll .mobile_top > ul > li:nth-child(1){    transition-delay: .2s;transition-duration: 0.5s;padding-top:0;}
#header.open #menuAll .mobile_top > ul > li:nth-child(2){    transition-delay: .4s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(3){    transition-delay: .6s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(4){    transition-delay: .8s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(5){    transition-delay: 1.0s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(6){    transition-delay: 1.2s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(7){    transition-delay: 1.4s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(8){    transition-delay: 1.6s;transition-duration: 0.5s;}

@media (max-width:1500px){
	#header #navi .mbtop{padding-left:calc(30% + 3rem);padding-right:3rem;	}

	#header .header_inner .header-right {right:1rem;}
}
@media (max-width:1300px){
	#header #navi .mbtop .depth1-div > ul > li:not(:last-child){margin-right:5rem;}
}

@media (max-width:1030px){
	#header #navi .site-bg{display:none;}
	#header #navi .mbtop{padding:0;}
	#header #navi .mbtop .depth1-div > ul{display:none;}
	#header #navi:after{background:#023a73;}
}




/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.header-right-mob{display:block !important;}
	.header-right-mob .btn-gnb-menu{display:block !important;}
	#header .header-inner .header-right{display:none;}

	#header #navi{ background : #13132E; overflow-y:scroll;}



	#menuAll .mobile_top{width:100%;height:auto; background:transparent; margin-top:1.5rem;border-top:1px solid #ddd;}
	#menuAll .mobile_top:before,
	#menuAll .mobile_top:after{display: none;}
	


    /*1차*/
	#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0; }
	#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
	#menuAll .mobile_top .mbtop > li:before{display:none;}
	#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.1rem; padding: 20px 1.5rem 14px; color:#333; }
	#menuAll .mobile_top .mbtop > li > a:before{display:none;}
    #navi ul.mbtop {width:100%; margin:0; padding:0;}
    #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;}

	#navi ul.mbtop li.nosub:after{display:none;}


	#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{}

    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none;position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;padding-top:0;}
    #navi ul.mbtop li ul.on{display:block;}
	#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; color:#333;}	
    #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;}
}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html,body,#wrap{height:auto;}
	html{font-size:15px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}

	/*팝업 롤링 추가*/
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}
}


#footer{position:relative;z-index:1;}
#footer .inner {border-top:1px solid rgba(242,242,242,0.2);padding-top:3rem;padding-bottom:5rem;}
#footer ul {display:flex;gap:2.5rem;margin-top:2rem;}
#footer ul li .tit{font-size:0.9rem;font-weight:700;color:#fff;}
#footer ul li .txt {color:#9F9F9F}
#footer .copy {font-size:0.8rem;color:#AAAAAA;margin-top:3rem;}


@media (max-width:830px){
	#footer ul {flex-direction:column;gap:0.5rem;}

}


/*챗봇*/
/*챗봇*/
.chatbot-btn{position: fixed; right: 1.65rem; bottom: 4.25rem; z-index: 999;}
.chatbot-btn a{display:inline-block; width:4.5rem; height:4.5rem; border-radius:50%;}
.chatbot-btn .chat-btn{background:#181c3b; color:#fff; font-family:"SUIT"; font-size:0.8rem; font-weight:500; position:relative; text-align:center; padding-top:2.7rem; line-height:1;}
.chatbot-btn .chat-btn:after{content:''; display:block; position:absolute; width:4.05rem; height:1.85rem; background:url('/images/default/content/chatbot-icon.png')no-repeat center center; background-size: cover; left:53%; transform:translateX(-50%); top:0.6rem;}
.chatbot-btn .chat-btn:hover:after{animation: motion 1s linear 0s infinite alternate;}
.chatbot-btn .chat-close{background:#181c3b url('/images/default/content/chat-close.svg')no-repeat center center; background-size:0.85rem; display:none;}
.chat-bx{position: fixed; right: 1.65rem; bottom: 9.5rem; z-index: 999; border-radius:0.7rem; overflow:hidden; width:17rem; height:27.4rem; box-shadow: 1px 1px 10px rgb(0 0 0 / 13%); display:none;}
.chat-bx .tit{font-size:0.75rem; color:#fff; background:#181c3b; font-weight:700; height:2.1rem; line-height:2.1rem; padding:0 0.5rem;}
.chat-bx .chat-cts{background:#fff; height:calc(27.4rem - 2.1rem); padding:0.6rem 0.5rem; font-size:0.7rem; color:#666;     overflow-x: auto; overflow-y: scroll;}
.chat-cts .bot{padding-left:2rem; position:relative;}
.chat-cts .bot:before{content:''; display:block; position:absolute; width:2rem; height:2rem; border-radius:50%; border:solid 1px #ddd; background:url('/images/default/content/chatbot-icon.png')no-repeat center center; background-size: 1.65rem; top:0; left:0;}
.chat-cts .message{padding-left:0.6rem; position:relative;}
.chat-cts .message:after{content:''; display:block; position:absolute; width:0.95rem; height:1.3rem; background:url('/images/default/content/bubble.png')no-repeat center center; background-size: cover; left:0; top:0.65rem;}
.msg-wrap{padding:0.65rem; background:#f7f7f7; border-radius:0.75rem 0.75rem 0.75rem 0;}
.question-wrap{margin-top:0.65rem;}
.question-wrap li{display:flex; align-items:flex-start; gap:0.25rem; background:#fff; border:solid 1px #ddd; padding:0.4rem 0.3rem; border-radius:0.25rem; cursor:pointer;}
.question-wrap li:not(:last-child){margin-bottom:0.4rem;}
.question-wrap li span{display:inline-block; width:0.95rem; height:0.95rem; line-height:0.95rem; background:#2f76e0; color:#fff; font-size:0.6rem; font-weight:500; text-align:center; border-radius:50%; margin-top:0.1rem;}
.question-wrap li p{width:calc(100% - 0.95rem - 0.25rem);}
.question-wrap li:hover{background:#2f76e0; color:#fff;}
.question-wrap li:hover span{background:#fff; color:#2f76e0;}
.conversation.end .question-wrap li{pointer-events: none;}
.chat-cts .user{margin:0.7rem 0; display:flex; justify-content:flex-end; display:none;}
.chat-cts .user-question{position:relative; padding-right:0.6rem;}
.chat-cts .user-question:after{content:''; display:block; position:absolute; width:0.85rem; height:1.35rem; background:url('/images/default/content/bubble-b.png')no-repeat center center; background-size: cover; right:0; bottom:0;}
.chat-cts .user-question p{background:#2f76e0; color:#fff; border-radius:0.75rem 0.75rem 0 0.75rem; padding:0.7rem 0.6rem;}
.chat-cts .bot.apply{display:none;}
.chat-cts .user.apply .user-question{cursor:pointer;}
.conversation .bot,
.conversation .user,
.conversation .bot.apply,
.conversation .user.apply {opacity: 0; animation: fadeIn 0.6s forwards;}
.conversation .bot{animation-delay: 0s;}
.conversation .user{animation-delay: 0.6s;}
.conversation .bot.apply{animation-delay: 1.2s;}
.conversation .user.apply{animation-delay: 1.8s;}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes motion {
    0% {top:0.6rem;}
    100% {top:0.2rem;}
}


.answers-wrap li a{display:flex; align-items:flex-start; gap:0.25rem; background:#fff; border:solid 1px #ddd; padding:0.4rem 0.3rem; border-radius:0.25rem; cursor:pointer;}
.answers-wrap li:not(:last-child){margin-bottom:0.4rem;}
.answers-wrap li span{display:inline-block; width:0.95rem; height:0.95rem; line-height:0.95rem; background:#2f76e0; color:#fff; font-size:0.6rem; font-weight:500; text-align:center; border-radius:50%; margin-top:0.1rem;}
.answers-wrap li p{width:calc(100% - 0.95rem - 0.25rem);}
.answers-wrap li:hover a{background:#2f76e0; color:#fff;}
.answers-wrap li:hover span{background:#fff; color:#2f76e0;}

@media (max-width:767px){
	.chatbot-btn{bottom:1.5rem;}
	.chat-bx{width:85%; height:70%; bottom:6.5rem;}
	.chat-bx .chat-cts{height:calc(100% - 2.1rem); font-size:0.75rem;}
	.question-wrap li{padding:0.65rem 0.3rem;}
	.question-wrap li span{width:1.1rem; height:1.1rem; line-height:1.1rem;}
	.question-wrap li p{width:calc(100% - 1.1rem - 0.25rem);}
}
@media (max-width:500px){
	.chatbot-btn a{width:4.2rem; height:4.2rem;}
	.chatbot-btn{right:1rem;}
	.chat-bx{width:calc(100% - 1rem - 1rem); right:1rem;}
}