@charset "utf-8";
/* CSS Document */

/*skip*/
#skip{height:0}
#skip a{text-align:center; width:100%; height:0px; display:block; position:absolute; left:0; top:-100px;}
#skip a:focus, #skip a:active{font-size:20px; font-weight:700; color:#FFFFFF; line-height:42px; background:#000000; position:absolute; top:0; height:42px; z-index:1000;}

/*layout*/
#wrap, #root{min-width:768px; position:relative;}
#wrap.travelSt #container{padding-bottom:462px;}
#wrap.travelSt #contents{margin-top:60px; padding:0 40px;}
#wrap.chatHotel #contents{position:relative;}

/*header*/
#header{background:#FFFFFF; border-bottom:1px solid #E5E5E5; padding:24px 40px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; left:0; right:0; z-index:999;}
#header .logo a{display:flex; justify-content:flex-start; align-items:center;}
#header .logo .ci_tht{width:57px; height:20px; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/t_bi_tht2.svg) no-repeat left top; text-indent:-999px; overflow:hidden; display:block;}
#header .logo .ci_hotel{font-size:20px; font-weight:700; margin-left:24px; line-height:1; display:block; position:relative;}
#header .logo .ci_hotel:after{content:''; width:1px; background:#E5E5E5; position:absolute; top:0px; bottom:0px; left:-12px;}
#header .gnb{position:relative;}
#wrap.travelSt #header .gnb{display:none;}
#header .gnb .btnMenu{font-size:18px; line-height:1; padding-right:24px; display:block; position:relative;}
#header .gnb .btnMenu:after{content:''; width:12px; height:7px; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_arrow_dropdown.svg) no-repeat 50% 50%; position:absolute; top:50%; right:0px; transform:translate(0, -50%) rotate(0deg); transition:transform 0.2s ease-out;}
#header .gnb.active .btnMenu:after{transform:translate(0, -50%) rotate(180deg);}
#header .gnb .menu{background:#FFFFFF; border:1px solid #E5E5E5; border-radius:12px; margin-top:12px; display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);}
#header .gnb .menu li + li{border-top:1px solid #E5E5E5;}
#header .gnb .menu li > a{width:240px; display:block; padding:12px 24px;}
#header .gnb .menu li > a:hover, .gnb .menu li.active > a{font-weight:500;}
#header .gnb.active{z-index:1;}
#header .gnb.active .menu{display:block;}
#header .member{display:flex; justify-content:flex-end; gap:24px;}
#header .member .my, #header .member .logout{line-height:20px; padding-left:26px; display:block; position:relative;}
#header .member .logout{cursor:pointer;}
#header .member .my:after{content:''; width:20px; height:20px; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_my.svg) no-repeat; position:absolute; top:0; left:0;}
#header .member .logout:after{content:''; width:20px; height:20px; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_logout.svg) no-repeat; position:absolute; top:0; left:0;}
#header .offCanvas, #header > .canvasToggle{display:none;}
/*footer*/
#footer, #footer a{color:#FFFFFF;}
#footer{color:#FFFFFF; background:#484848; margin-top:120px; position:absolute; bottom:0; left:0; right:0;}
#footer .footer_inner{width:calc(100% - 80px); margin:0 auto;}
#footer .footerTop{padding:20px 0; display:flex; justify-content:space-between; align-items:flex-start;}
#footer .footerTop .callcenter{font-size:20px; font-weight:500; line-height:1; display:flex; justify-content:flex-start; gap:10px;}
#footer .footerTop .callcenter .hour{font-size:13px; font-weight:400; margin-top:6px; display:flex; justify-content:flex-start; align-items:flex-start; gap:4px;}
#footer .footerTop .contact{display:flex; justify-content:flex-end; gap:12px;}
#footer .footerTop .contact > a{width:30px; height:30px; border-radius:50%; text-indent:-999px; overflow:hidden; display:block; }
#footer .footerTop .contact .kakao{background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_kakao.svg) no-repeat 50% 50%, #FFFFFF; background-size:20px;}
#footer .footerTop .contact .email{background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_mail.svg) no-repeat 50% 50%, #FFFFFF; background-size:20px;}
#footer .footerInfo{font-size:14px; border-top:1px solid #FFFFFF; padding:20px 0;}
#footer .footerInfo .company > div{display:flex; flex-direction:column; justify-content:flex-start; gap:4px;}
#footer .footerInfo .company a{display:inline-block; margin-left:10px;}
#footer .footerInfo .company > div + div{margin-top:6px;}
#footer .footerInfo .company .copy{margin:16px 0;}

/*//common//*/
.mbl{display:none !important;}
.blind{display:none !important;}
/*group*/
.section{margin-top:40px;}
/*font style*/
.fontDg{color:#004D45;}
.fontM{font-weight:500;}
.fontB{font-weight:700;}
.tit1{font-size:24px; font-weight:700;}
.tit2{font-size:20px; font-weight:500;}
.tit3{font-size:18px; font-weight:500;}
.pageHeader{text-align:center;}
.pageHeader .tit{font-size:36px; font-weight:700; line-height:1;}
.pageHeader .txt{font-size:18px; color:#797979; line-height:1.4; margin-top:20px;}
/*button*/
.btnD.left{display:flex; justify-content:flex-start; align-items:center; gap:12px;}
.btnLine{border:1px solid #E5E5E5; border-radius:5px; padding:5px 10px; }
.btnText, .btnText:hover, .btnText:focus, .btnText:active{font-size:14px; color:#484848; text-decoration:underline;}
/*tab*/
.tabSt01{}
.tabSt01 .tabBtn{background:#FFFFFF; border-radius:10px;}
.tabSt01 .tabBtn.center{display:flex; justify-content:center; gap:6px;}
.tabSt01 .tabBtn .item{font-weight:400; color:#A8A8A8; line-height:40px; text-align:center; width:calc(23% - 8px); height:40px; background:#F2F2F2; border-radius:12px; display:table-cell; cursor:pointer;}
.tabSt01 .item.isCurrent{font-weight:500; color:#FFFFFF; background:#004D45;}
.tabSt01 .tabCont{margin-top:40px;}
/*list*/
.imgList{}
.imgList .list .thum{width:100%; height:100%; display:block; position:relative;}
.imgList .list .thum:after{content:''; width:100%; height:100%; background:rgba(0,0,0,0.4); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.imgList .list .thum, .imgList .list .thum:after, .imgList .list .thum img{border-radius:20px;}
.imgList .list .thum .txt{font-size:22px; font-weight:700; color:#FFFFFF; position:absolute; z-index:2;}
.imgList .list .thum .txt > span{font-size:16px; font-weight:400; margin-top:10px; display:block;}
.imgList .list .thum .image{width:100%; height:100%; object-fit:cover;}
.imgList.aiList{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.imgList.aiList .list{width:100%; aspect-ratio:1;}
.imgList.aiList .list .thum .txt{text-align:center; width:80%; top:50%; left:50%; transform:translate(-50%, -50%);}
.imgList.aiSelList{display:flex; justify-content:center; flex-wrap:wrap; gap:20px;}
.imgList.aiSelList .list{width:calc(50% - 10px); aspect-ratio:2/1.6;}
.imgList.aiSelList .list .thum .txt{width:calc(100% - 80px); bottom:40px; left:50%; transform:translateX(-50%);}
/*Scrollbar*/
.scroll{width:100%; height:100%; padding-right:12px; overflow-y:auto;}
.scroll::-webkit-scrollbar{width:6px;}
.scroll::-webkit-scrollbar, .scroll::-webkit-scrollbar-thumb{overflow:visible; border-radius:4px;}
.scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);}

/*//chatroom//*/
/*/sidebar/*/
.sidebar{width:360px; height:calc(100vh - 69px); background:#F7F7F7; border-right:1px solid #E5E5E5; padding:24px; position:fixed; top:69px; left:-360px; z-index:999; zoom:1;}
.sidebar:after{content:''; clear:both; display:block;}
.sidebar .btnToggle{float:right;}
.sidebar .btnMovePage{text-align:center; width:312px; background:#FFFFFF; border:1px solid #E5E5E5; border-radius:12px; padding:11px; position:absolute; bottom:24px; left:50%; transform:translateX(-50%);}
.sidebar.minimized{width:72px;}
.sidebar.minimized .sidebarCont{visibility:hidden;}
.sidebar.minimized .btnMovePage{width:48px; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_prevpage.svg) no-repeat 50% 50%, #FFFFFF; border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); text-indent:-999px; overflow:hidden;}
.sidebar.minimized + #contents{margin-left:72px;}
.sidebar.minimized.expand{width:360px;}
.sidebar.minimized.expand .sidebarCont{visibility:visible;}
.sidebar.minimized.expand .btnMovePage{width:312px; background:#FFFFFF; border-radius:12px; position:absolute; left:50%; transform:translateX(-50%);text-indent:0; overflow:visible;}
.sidebar.minimized.expand .sidebarCont{visibility:visible;}
.sidebar.minimized.expand .sidebarCont .chatList{}
.sidebar .sidebarCont{height:100%;}
.sidebar .sidebarCont .tit{font-size:20px; font-weight:500; line-height:1;}
.sidebar .sidebarCont .history{height:calc(100% - 116px); margin-top:24px;}
.sidebar .sidebarCont .chatList{}
.sidebar .sidebarCont .chatList + .chatList{margin-top:6px;}
.sidebar .sidebarCont .chatList.thisYear .year{display:none;}
.sidebar .sidebarCont .chatList .year{color:#797979; font-weight:400; margin-bottom:3px;}
.sidebar .sidebarCont .chatList li + li{margin-top:3px;}
.sidebar .sidebarCont .chatList li a{font-weight:300; color:#797979; display:flex; justify-content:space-between; gap:12px;}
.sidebar .sidebarCont .chatList li a.active{font-weight:400; color:#303030;}/*2025-02-12 추가*/
.sidebar .sidebarCont .chatList li a .theme{width:calc(100% - 60px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.sidebar .sidebarCont .chatList li a .date{text-align:right; width:48px;}
@media(min-width:768px){
	.sidebar{left:0;} 
}
@media(min-width:768px){
    .chatHotel #contents{margin-left:360px;}
}
.animate .sidebar{transition:all 0.3s;}
@media(prefers-reduced-motion:reduce){
	.animate .sidebar{transition:none;} 
}
.animate .btnMovePage{overflow:hidden; white-space:nowrap; transition:width 0.3s;}
@media(prefers-reduced-motion:reduce){
    .animate .btnMovePage{overflow:hidden; white-space:nowrap; transition:none;} 
}
.animate #contents{transition:all 0.3s;}
@media(prefers-reduced-motion:reduce){
    .animate #contents{transition:none;}
}
/*/chat/*/
.chatroom{width:calc(100% - 144px); height:calc(100vh - 69px); margin:0 auto; position:relative;}
.chatroom .msgGroup{height:calc(100% - 72px); padding:24px 0;}
.chatroom .msgGroup .msgBox{display:flex; justify-content:flex-start; align-items:flex-start; gap:12px;}
.chatroom .msgGroup .msgBox + .msgBox{margin-top:24px;}
.chatroom .msgGroup .msgBox.bot .icoBot{width:28px; height:28px; text-indent:-999px; overflow:hidden; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_ai.svg) no-repeat 50%}
.chatroom .msgGroup .msgBox.user .icoUser{width:28px; height:28px; text-indent:-999px; overflow:hidden; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_user.svg) no-repeat 50%}
/*.chatroom .msgGroup .msgBox.bot + .msgBox.bot .icoBot{visibility:hidden;} 2025-02-24 숨김처리*/
.chatroom .msgGroup .msgBox .msg{width:calc(100% - 40px);}
.chatroom .msgGroup .msgBox.bot .msg{margin-top:2px;}
.chatroom .msgGroup .msgBox.user .msg{font-size:24px; font-weight:500; line-height:1.25;}
.chatroom .msgGroup .msgBox .msg .part + .part{margin-top:24px;}
.chatroom .msgGroup .msgBox .msg .part .tit{font-size:20px; font-weight:700; margin-bottom:12px;}
.msg .btnD{margin-top:12px;}
/*호텔추천*/
.hotelList{}
.hotelListItem{width:100%; min-width:100%; border:1px solid #E5E5E5; border-radius:12px; position:relative;}
.hotelListItem + .hotelListItem{margin-top:24px;}
.hotelListItem .hotel{padding:24px; display:flex; justify-content:space-between; gap:24px;}
.hotelListItem .hotel .hotelInfo{width:calc(100% - 264px); display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:12px;}
.hotelListItem .hotel .hotelInfo .label{font-size:13px; line-height:1; border-radius:12px; padding:5px 8px; display:inline-block; position:absolute; top:32px; right:32px;}
.hotelListItem .hotel .hotelInfo .label.aiRecomm{color:#004D45; background:#F9FEF5; border:1px solid #C9DFB7;}
.hotelListItem .hotel .hotelInfo .label.tht{color:#D99528; background:#FBF3E7; border:1px solid #F2DBB7;}
.hotelListItem .hotel .hotelInfo .label.check{color:#797979; background:#F7F7F7; border:1px solid #E5E5E5;}
.hotelListItem .hotel .hotelInfo .hotelTit{display:flex; justify-content:flex-start; gap:24px;}
.hotelListItem .hotel .hotelInfo .hotelTit > p{font-size:24px; font-weight:700; line-height:1; position:relative;}
.hotelListItem .hotel .hotelInfo .hotelTit > p + p:after{content:''; width:1px; background:#000000; position:absolute; top:0; bottom:0; left:-12px;}
.hotelListItem .hotel .hotelInfo .desc{font-size:14px; color:#797979; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.hotelListItem .hotel .hotelInfo .priceD{margin-top:auto;}
.hotelListItem .hotel .hotelInfo .priceD .price .night{font-size:14px; color:#797979;}
.hotelListItem .hotel .hotelInfo .priceD .price .unit, .hotelListItem .hotel .hotelInfo .priceD .discount{font-size:14px; color:#484848;}
.hotelListItem .hotel .hotelInfo .priceD .price .unit .num{font-size:24px; font-weight:700; color:#004D45; margin-left:6px;}
.hotelListItem .hotel .thum{width:240px; height:180px; border-radius:12px; overflow:hidden;}
.hotelListItem .hotel .thum > img{width:100%; height:100%; object-fit:cover; object-position:center center;}
.hotelListItem .promo{background:#F7F7F7; border-radius:0 0 12px 12px; padding:24px; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px;}
.hotelListItem .promo li{font-size:14px; font-weight:500; color:#FFFFFF; background:#000000; border-radius:16px; padding:3px 12px;}
/*관련이미지*/
.hotelImg{}
.hotelImg .swiper{width:100%; height:180px;}
.hotelImg .swiper .swiper-slide{width:calc(31.25% - 9px); height:180px; display:flex; justify-content:center; align-items:center;}
.hotelImg .swiper .swiper-slide .thumbnail{width:100%; height:100%; border-radius:12px; overflow:hidden;}
.hotelImg .swiper .swiper-slide .thumbnail img{width:100%; height:100%; object-fit:cover;}
/**/
.viewbox-container{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:1000;}
.viewbox-body{display:flex; flex-direction:column; position:absolute; top:50%; left:50%; overflow:hidden;}
.viewbox-header{font-size:18px; font-weight:500; color:#FFFFFF; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.viewbox-content{margin-top:12px; border-radius:12px; overflow:hidden;}
.viewbox-content .viewbox-image{object-fit:cover;}
.viewbox-button-default{height:48px; width:48px; cursor:pointer;}
.viewbox-button-default > svg{width:100%; height:100%; background:inherit; fill:inherit; pointer-events:none; transform:translateX(0px);}
.viewbox-button-default{fill:#E5E5E5;}
.viewbox-button-default:hover{fill:#FFFFFF;}
.viewbox-button-close{position:absolute; top:0px; right:0px; z-index:9;}
.viewbox-button-next, .viewbox-button-prev{width:72px; height:72px; margin-top:-36px; position:absolute; top:50%; z-index:9;}
.viewbox-button-next{right:0px;}
@-webkit-keyframes sk-bounce{
	0%, 100% { -webkit-transform:scale(0.0);}
	50% { -webkit-transform:scale(1.0);}
}
@keyframes sk-bounce{
	0%, 100% { 
		transform:scale(0.0);
		-webkit-transform:scale(0.0);
	} 50% { 
		transform:scale(1.0);
		-webkit-transform:scale(1.0);
	}
}

/*관련질문&답변*/
.Question .faq li a{font-size:16px; color:#666666; background:#F7F7F7; border:1px solid #E5E5E5; border-radius:6px; padding:6px 12px; display:inline-block; cursor:pointer;}/*2025-02-12 수정*/
.Question .faq li + li{margin-top:6px;}
/*메세지양식-관련질문 답변 등*/
.msgForm{color:#666666;}
.msgForm + .msgForm{border-top:1px solid #E5E5E5; margin-top:24px; padding-top:24px;}
.msgForm:last-child{border-bottom:1px solid #E5E5E5; padding-bottom:24px;}
.msgForm .tit1, .msgForm .tit2, .msgForm .tit3{color:#000000; margin-bottom:6px;}
.msgForm .tit1{line-height:28px; margin-bottom:12px;}/*2025-02-24 추가*/
.msgForm .numList{}
.msgForm .numList, .msgForm .dotList{margin-top:4px;}
.msgForm .numList > li + li{margin-top:4px;}
.msgForm .numList .dotList{margin-left:12px;}
.msgForm .dotList li{position:relative; padding-left:10px;}
.msgForm .dotList li:after{content:''; width:4px; height:4px; background:#666666; border-radius:2px; position:absolute; top:10px; left:0;}
.msgForm .parnassus{margin-top:12px;}

/*send message*/
.sendMsgGroup{position:absolute; bottom:24px; left:0; right:0;}
.sendMsgGroup .sendMsg{width:100%; height:48px; border:1px solid #004D45; border-radius:10px; padding:3px; display:flex; justify-content:space-between;} 
.sendMsgGroup .sendMsg > input{font-size:18px; width:calc(100% - 48px); height:40px; border:none;}
.sendMsgGroup .btnSend{width:40px; height:40px; background:url(https://img.hyundaidreamtour.com/images/aihdt/hotel/ico_sendmsg.svg) no-repeat 50% 50%,#004D45; border-radius:10px; text-indent:-999px; overflow:hidden; cursor:pointer;}