@charset "utf-8"; /** * @File Name : chatbot.css * @Description : chatbot * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2025.02.27 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2025.02.27 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* chatbot */ #chatbot1 {position:fixed;top:0;right:-440px;width:440px;;height:100%;box-shadow:0 0 20px rgba(0,0,0,.15);padding-top:70px;border-radius:40px 0 0 0;z-index:100;transition:right .35s ease} #chatbot1.open {right:0} #chatbot1 .b2 {position:absolute;top:110px;left:-60px;width:60px;height:180px;border:0;margin:0;z-index:10;padding:0;border-radius:20px 0 0 20px;background-color:#c92026} #chatbot1 .b2:focus-visible {outline-color:yellow;outline-offset:-1px} #chatbot1 .b2:before, #chatbot1 .b2:after {position:absolute;content:"";display:block;} #chatbot1 .b2:before {top:25px;left:50%;width:13px;height:11px;background:url(../../img/inc/layout_sprite.png) no-repeat -387px -25px / auto 80px;margin-left:-3px;z-index:1} #chatbot1 .b2:after {top:0;left:0;background-color:#363940;width:100%;height:60px;border-radius:20px 0 0 0} #chatbot1 .b2 .t1 {display:block;color:#fff;font-family:"HANAMDAUM", sans-serif;font-size:12px;letter-spacing:.025em;text-transform:uppercase;transform:rotate(-90deg) translate(-39px, 3px);} #chatbot1 .b2.open {display:block;} #chatbot1 .b2.close {display:none;} #chatbot1.open .b2.open {display:none;} #chatbot1.open .b2.close {display:block;} #chatbot1 .tinfo1 {position:absolute;top:4px;right:40px;z-index:2} #chatbot1 .tinfo1 .b1 {position:absolute;top:-11px;right:-21px;display:block;width:40px;height:40px;background-color:#07818e;border-radius:100%;box-shadow:5px 5px 10px rgba(0,0,0,.35);z-index:1} #chatbot1 .tinfo1 .b1.open {background-image:url(../../img/inc/layout_sprite.png);background-repeat:no-repeat;background-position:-425px 0;background-size:auto 80px;} #chatbot1 .tinfo1 .b1.open.on {display:none;} #chatbot1 .tinfo1 #tinfo1c {display:none;background:#fff;border-radius:15px;padding:14px 20px 14px;box-shadow:5px 5px 20px rgba(0,0,0,.15)} #chatbot1 .tinfo1 #tinfo1c ul {list-style:none;margin:0;padding:0;font-size:15px;color:#000;letter-spacing:-.025em;width:160px;} #chatbot1 .tinfo1 #tinfo1c ul li {position:relative;border-bottom:1px solid #e9e9e9;padding:6px 0 5px 1px} #chatbot1 .tinfo1 #tinfo1c ul li label {font-size:15px;font-weight:400;color:#000;padding:5px 0;display:block;line-height:1.1;} #chatbot1 .tinfo1 #tinfo1c ul li input[type=checkbox] {position:absolute;top:50%;right:1px;margin:0;-webkit-appearance:none;appearance:none;width:28px;height:21px;background:url(../../img/inc/layout_sprite.png) no-repeat -497px -25px / auto 80px;margin-top:-10px} #chatbot1 .tinfo1 #tinfo1c ul li input[type=checkbox]:checked {background-position:-467px -25px} #chatbot1 .tinfo1 #tinfo1c ul li:last-child {border-bottom:0} #chatbot1 .tinfo1 #tinfo1c .b1.close:before, #chatbot1 .tinfo1 #tinfo1c .b1.close:after {position:absolute;top:50%;left:50%;content:"";display:block;width:4px;height:12px;background:#fff;margin:-6px -2px} #chatbot1 .tinfo1 #tinfo1c .b1.close:before {transform:rotate(45deg)} #chatbot1 .tinfo1 #tinfo1c .b1.close:after {transform:rotate(-45deg)} #chatbot1 .tab {position:absolute;top:0;width:50%;height:90px;margin:0;background:#363940} #chatbot1 .tab:before {position:absolute;top:0;content:"";display:block;width:200%;height:100%;z-index:-1;background:#363940;border-radius:40px 0 0 0} #chatbot1 .tab.on {border-radius:40px 40px 0 0;background:#C92027} #chatbot1 .tab a {display:block;line-height:1.1;font-family:"HANAMDAUM", sans-serif;font-size:20px;color:#fff;text-align:center;font-weight:500;padding-top:24px;padding-bottom:20px} #chatbot1 .tab a:before {content:"";display:inline-block;vertical-align:middle;width:26px;height:27px;background:url(../../img/inc/layout_sprite.png) no-repeat;background-size:auto 80px;margin:-2px 5px 0 0} #chatbot1 .tab:nth-of-type(1) {left:0;border-top-left-radius:40px;} #chatbot1 .tab:nth-of-type(2) {left:50%;} #chatbot1 .tab:nth-of-type(1) a:before {background-position:-31px 0} #chatbot1 .tab:nth-of-type(2) a:before {background-position:-59px 0} #chatbot1 .tab.on a:focus-visible {outline-color:#000} #chatbot1 .cont {position:relative;height:calc(100vh - 70px);background:#FDF4F5;z-index:1;border-radius:20px 20px 0 0;padding:30px 20px 90px;box-sizing:border-box;} #chatbot1 .cont .wrap1 {height:100% !important;overflow-y:auto;scroll-behavior:smooth;overflow-x:hidden;} #chatbot1 #plan1c.cont {height:100vh} #chatbot1 .your1chat1 {position:relative;padding-left:40px;margin-right:20px;} #chatbot1 .your1chat1 .talker {position:absolute;top:0;left:0;width:33px;height:33px;background:url(../../img/inc/chatbot1/ic66a1your1chat.png) no-repeat 0 0 / cover;text-indent:-9999px;} #chatbot1 .your1chat1 .chat {background:#fff;margin-bottom:15px;border-radius:0 20px 20px 20px;padding:15px 20px;font-size:15px;line-height:21px;font-weight:400;color:#1d1d1d;letter-spacing:-.025em;word-break:keep-all} #chatbot1 .your1chat1 .chat .a1 {position:relative;display:block;background:#f2f2f2;border-radius:10px;font-weight:500;color:#000;letter-spacing:-.05em;padding:14px 35px 15px 15px;margin-top:15px;} #chatbot1 .your1chat1 .chat .a1:after {position:absolute;top:50%;right:14px;content:"";display:block;width:16px;height:15px;background:url(../../img/inc/chatbot1/ic32a1link.png) no-repeat 0 0 / cover;margin-top:-7.5px;} #chatbot1 .your1chat1 .ask {position:relative;border:1px solid #F9C4CE;background:#FFEAEC;color:#080000;font-weight:400;margin-bottom:15px;padding:10px 65px 8px 15px;border-radius:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} #chatbot1 .your1chat1 .ask .t1 {position:relative;z-index:1} #chatbot1 .your1chat1 .ask .a2 {position:absolute;top:9px;right:10px;background:#eb4050;color:#fff;font-size:13px;font-weight:500;letter-spacing:-.025em;width:50px;line-height:28px;text-align:center;border-radius:15px;z-index:1} #chatbot1 .your1chat1 .ask:hover {color:#fff;} #chatbot1 .your1chat1 .ask:before {position:absolute;top:-1px;left:-1px;content:"";display:block;width:calc(100% + 2px);height:calc(100% + 2px);background:#FFEAEC;border-radius:10px;opacity:0;transition:all .35s ease} #chatbot1 .your1chat1 .ask:hover:before {background:#eb4050;opacity:1;} #chatbot1 .your1chat1 .ask:hover .a2 {background-color:#fff;color:#eb4050;text-decoration:underline;text-underline-position:under;} #chatbot1 .your1chat1 .tip {border:1px solid #f5d477;background:#fcf6de;border-radius:12px;padding:15px 20px;margin-bottom:15px;word-break:keep-all} #chatbot1 .your1chat1 .tip .ht1 {position:relative;color:#1d1d1d;font-size:17px;font-weight:600;line-height:21px;padding-left:25px;} #chatbot1 .your1chat1 .tip .ht1:before {position:absolute;top:1px;left:0;content:"";display:block;width:20px;height:20px;background:url(../../img/inc/chatbot1/ic40a1tip.png) no-repeat 0 0 / cover;} #chatbot1 .your1chat1 .tip .t1 {font-size:15px;line-height:21px;color:#1d1d1d;font-weight:400;margin:5px 0 0} #chatbot1 .my1chat1 {text-align:right;margin-left:20px;} #chatbot1 .my1chat1 .chat {display:inline-block;vertical-align:top;background:#00004c;border-radius:20px 0 20px 20px;padding:15px 20px;font-size:15px;line-height:21px;font-weight:400;color:#fff;letter-spacing:-.025em;margin-bottom:15px;} #chatbot1 .chatbot1foot {position:absolute;bottom:-100px;right:0;width:100%;background:#363940;padding:11px;box-sizing:border-box;border-radius:40px 40px 0 0;opacity:0;transition:all .45s ease .3s;} #chatbot1.open .chatbot1foot {bottom:0;opacity:1;} #chatbot1 .chatbot1foot form {position:relative;background:#fff;height:60px;border-radius:30px;padding:5px;box-sizing:border-box} #chatbot1 .chatbot1foot form * {margin:0;padding:0;border:0} #chatbot1 .chatbot1foot input.text {display:block;width:calc(100% - 135px);height:50px;margin-left:25px;margin-right:110px} #chatbot1 .chatbot1foot button.b1 {position:absolute;top:5px;width:50px;height:50px;background:url(../../img/inc/layout_sprite.png) no-repeat;background-size:auto 80px;box-shadow:5px 5px 8px rgba(0,0,0,.33);border-radius:100%;} #chatbot1 .chatbot1foot button.b1.submit {right:59px;background-color:#C92027;background-position:-52px -29px} #chatbot1 .chatbot1foot button.b1.voicesearch {right:5px;background-position:0 -30px;background-color:#000;} #chatbot1 .chatbot1foot input.text:focus-visible {outline:2px dotted #ff2000} #chatbot1 .chatbot1foot button.b1.submit:focus-visible {outline-color:#000;outline-offset:1px} /* 여행일시선택 */ #chatbot1 .schedule1 {position:relative;background:#fff;border:1px solid #ddd;border-radius:20px;/* padding-top:54px; */} #chatbot1 .schedule1 .ht1 {position:relative;background:#41478f;font-size:16px;font-weight:500;color:#fff;padding:17px 20px 15px 50px;margin:0;} #chatbot1 .schedule1 .ht1:before {position:absolute;top:18px;left:20px;content:"";display:block;width:18px;height:18px;background:url(../../img/inc/chatbot1/ic36a1notice.png) no-repeat 0 0 / cover;} #chatbot1 .schedule1 .scont1 {padding:15px 20px;} #chatbot1 .schedule1 .scont1 .date1, #chatbot1 .schedule1 .scont1 .select1 {position:relative;float:left;width:calc(50% - 2.5px);height:46px;border:1px solid #ddd;border-radius:5px;margin-bottom:6px;margin-left:5px;box-sizing:border-box;padding:2px;} #chatbot1 .schedule1 .scont1 * {color:#1d1d1d;font-size:15px;font-weight:600;width:100%;height:100%;margin:0;border-color:#fff;} #chatbot1 .schedule1 .scont1 .date1 {margin-left:0;padding-left:20px;} #chatbot1 .schedule1 .scont1 .date1 .ui-datepicker-trigger {position:absolute;top:50%;left:20px;width:18px;height:18px;z-index:1;margin:-8px 0;box-sizing:border-box;padding:0;border:0} #chatbot1 .schedule1 .scont1 .date1 input.text {padding-left:25px;} #chatbot1 .schedule1 .scont1 span:nth-child(3) {margin-left:0} #chatbot1 .schedule1 .scont1 .select1 {padding-left:16px;padding-right:16px;} #chatbot1 .schedule1 .scont1 .memo1 {display:block;height:46px;border:1px solid #ddd;box-sizing:border-box;float:left;background:#f1f4f8;border-radius:5px;margin-bottom:5px;} #chatbot1 .schedule1 .scont1 .memo1 input.text {background:transparent;border:0;width:100%;height:100%;font-size:15px;color:#1d1d1d;font-weight:400;padding:0 15px} #chatbot1 .schedule1 .scont1 .b1.submit {display:block;height:46px;background:#eb4050;color:#fff;border-radius:5px;font-size:15px;} @media screen and (min-width:1260px){ #chatbot1 .b2:before {animation:chat_ani1 1.5s ease-out infinite} #chatbot1.open .b2:before {background-position:-325px -25px} } @media screen and (max-width:1259px){ #chatbot1 {top:100px;right:0;width:100%;transition:top .4s ease;padding-top:81px;box-sizing:border-box;background:#363940;border-radius:0;box-shadow:0 -10px 15px rgba(0,0,0,.2)} #chatbot1 .tab {top:20px;height:71px;} #chatbot1 .tab a {font-size:18px;padding-top:20px;padding-bottom:16px;} #chatbot1 .cont {height:calc(100dvh - 180px);padding:25px 15px 90px} #chatbot1 .chatbot1foot, #chatbot1.open .chatbot1foot {position:absolute;bottom:0;right:0;width:100%;transition:bottom .35s ease .1s;opacity:1;} #chatbot1 .b2 {top:-15px;left:0;width:100%;height:62px;background:transparent;text-indent:-9999px;z-index:-1} #chatbot1 .b2:before {position:absolute;top:11px;left:50%;content:"";display:block;width:11px;height:13px;background:url(../../img/inc/layout_sprite.png) no-repeat -104px -43px / auto 80px;margin-left:-5.5px;border-radius:0;animation:chat_ani2 1s ease-out infinite} #chatbot1 .b2:after {position:absolute;top:0;left:50%;content:"";display:block;width:62px;height:100%;background:#363940;border-radius:25px;margin-left:-31px} #chatbot1 .b2.open:before {background-position:-104px -58px;border-radius:0} #chatbot1 .b2 .t1 {display:none} #chatbot1.open {top:83%} .chatbot1open #chatbot1.open {top:83%;} #chatbot1.open .chatbot1foot {bottom:-90px;} #chatbot1 #plan1c.cont {height:calc(100vh - 115px);overflow-y:auto;} #chatbot1.close .b2.open:before {background-position:-104px -58px} #chatbot1.open .b2.close:before {background-position:-104px -43px} .chatbot1open #chatbot1.open .chatbot1foot {bottom:0} #chatbot1:before {position:fixed;top:0;left:0;width:100%;height:0;content:"";display:block;background:rgba(0,0,0,.7);z-index:-1;transition:height .3s ease} html.chatbot1open #chatbot1:before {height:100px;} } @media screen and (max-width:768px){ #chatbot1 {padding-top:70px;} #chatbot1 .tab {top:15px;} #chatbot1 .tab a {font-size:17px;padding-top:18px;height:calc(100% - 35px)} #chatbot1 #plan1c.cont {height:calc(100dvh - 95px);} } @media screen and (max-width:599px){ #chatbot1 .cont {padding:25px 15px 90px} #chatbot1 .your1chat1 {margin-right:15px;} } @media screen and (max-width:499px){ #chatbot1 .cont {padding-left:10px;padding-right:10px;height:calc(100dvh - 170px)} #chatbot1 .your1chat1 {margin-right:10px;} #chatbot1 .chatbot1foot input.text {margin-left:15px;width:calc(100% - 125px)} } @media screen and (max-width:399px){ #chatbot1 {padding-top:63px;} #chatbot1.open {top:85%} #chatbot1 .tab {height:61px} #chatbot1 .tab a {font-size:16px;padding-top:15px} #chatbot1 .tab.on {border-radius:32px 32px 0 0} #chatbot1 .cont {padding-top:15px;height:calc(100dvh - 150px)} #chatbot1 .your1chat1 {margin-right:0;margin-bottom:10px;} #chatbot1 .your1chat1 .chat {padding:13px 15px;margin-bottom:10px;} #chatbot1 .chatbot1foot form {height:54px;} #chatbot1 .chatbot1foot input.text {height:45px;} #chatbot1 .chatbot1foot button.b1 {width:45px;height:45px;background-size:auto 72px} #chatbot1 .chatbot1foot button.b1.submit {background-position:-47px -26px;right:55px;} #chatbot1 .chatbot1foot button.b1.voicesearch {background-position:0 -27px;} #chatbot1 #plan1c.cont {height:calc(100vh - 88px);} } @keyframes chat_ani1 { 0% {transform:translateX(0%);} 30%{transform:translateX(-20%);} 50%{transform:translateX(0);} 70%{transform:translateX(-15%);} 100%{transform:translateX(0);} } @keyframes chat_ani2 { 0% {transform:translateY(0%);} 30%{transform:translateY(-25%);} 50%{transform:translateY(0%);} 70%{transform:translateY(-20%);} 100% {transform:translateY(0%);} } /* 안드로이드용 */ @media screen and (max-width:599px){ html.is-android.chatbot1open #head {z-index:-1} html.is-android.chatbot1open #chatbot1 {top:10px;height:calc(100dvh - 10px);} html.is-android.chatbot1open #chatbot1 .cont {height:100dvh;padding-bottom:170px} html.is-android.chatbot1open #chatbot1 .chatbot1foot {position:fixed;} } /* jquery-ui.css overwrite */ .ui-datepicker .ui-icon {padding:0} .ui-datepicker {z-index:101 !important} /* 플랜비짓 */ #tabs1 {text-align:center;margin-bottom:25px;} #tabs1 ul {list-style:none;padding:0;margin:0;display:inline-block;vertical-align:top;background:#fff;border-radius:23px;border:1px solid #ddd;box-sizing:border-box;overflow:hidden;} #tabs1 ul li {display:inline-block;vertical-align:top;margin:0 -2px;} #tabs1 ul li a {display:block;line-height:46px;padding:0 24px;font-weight:500;color:#505050} #tabs1 ul li.on a {background:#41478f;color:#fff;border-radius:23px;font-weight:600;} #tabs1 ul li.on a:before {content:"";display:inline-block;vertical-align:middle;width:12px;height:12px;margin:-4px 10px 0 0;background:url(../../img/inc/chatbot1/ic24a1check.png) no-repeat 0 0 / cover;} .tab1cont .tabs1pane {position:relative;display:none;} .tab1cont .tabs1pane.on {display:block;} /* 플랜비짓 기본문구 */ .plan1info {background:#fff;border-radius:20px;padding:30px;} .plan1info .h1 {position:relative;display:block;font-size:22px;color:#000;font-weight:700;line-height:1.1;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #d7d7d7;padding-left:42px} .plan1info .h1:before {position:absolute;top:-3px;left:6px;content:"";display:block;width:26px;height:32px;background:url(../../img/inc/chatbot1/ic64a1planv.png) no-repeat 0 0 / cover;} .plan1info .t1 {margin:0;line-height:24px;color:#000;font-weight:400;word-break:keep-all} /* 내 여행일정 */ .myschedule1 .b1.toggle {display:block;text-align:center;font-weight:500;color:#000;padding:3px 0;margin-bottom:7px;} .myschedule1 .b1.toggle:after {content:"";display:inline-block;vertical-align:middle;width:24px;height:24px;background:url(../../img/inc/chatbot1/plan1_sprite.png) no-repeat -154px 0 / auto 100px;margin:-4px 0 0 7px} .myschedule1 .b1.toggle.on:after {transform:rotate(180deg)} .myschedule1 #pastplan1 {display:none} .myschedule1 .sche1list {margin-bottom:30px} .myschedule1 .sche1list .hg1 {position:relative;border:1px solid #e1e1e1;background:#fff;border-radius:10px;padding:10px 20px;margin-bottom:10px;} .myschedule1 .sche1list .hg1 .ht1, .myschedule1 .sche1list .hg1 dl, .myschedule1 .sche1list .hg1 dl * {display:inline-block;vertical-align:top;line-height:32px;} .myschedule1 .sche1list .hg1 .ht1 {font-size:18px;color:#000;font-weight:700;margin:0 11px 0 0} .myschedule1 .sche1list .hg1 dl, .myschedule1 .sche1list .hg1 dl dd {margin:0} .myschedule1 .sche1list .hg1 dl dd {font-size:16px;color:#000;font-weight:600;margin-left:7px;} .myschedule1 .sche1list .hg1 dl dd img {width:35px;height:auto;} .myschedule1 .sche1list .hg1 .b1.map {position:absolute;top:50%;right:18px;width:33px;height:33px;background:url(../../img/inc/chatbot1/ic66a1map.png) no-repeat 0 0 / cover;margin-top:-16px;} .myschedule1 .sche1list .lst1 {position:relative;list-style:none;margin:0;padding:0;} .myschedule1 .sche1list .lst1:after {position:absolute;top:0;left:50%;content:"";display:block;width:2px;height:100%;background:#e1e1e1;z-index:-1;margin-left:-1px;} .myschedule1 .sche1list .lst1 li {position:relative;background:#fff;border:1px solid #e1e1e1;border-radius:10px;margin-bottom:10px;padding:20px;} .myschedule1 .sche1list .lst1 li .h1, .myschedule1 .sche1list .lst1 li span[data-category] {display:inline-block;vertical-align:top;line-height:24px;} .myschedule1 .sche1list .lst1 li .h1 {font-size:20px;color:#000;font-weight:600;margin-right:5px;} .myschedule1 .sche1list .lst1 li .h1 a {display:block;color:inherit;} .myschedule1 .sche1list .lst1 li span[data-category] {width:45px;font-size:13px;color:#fff;font-weight:500;border-radius:12px;text-align:center;margin-left:5px;} .myschedule1 .sche1list .lst1 li span[data-category=오전] {background-color:#009c81} .myschedule1 .sche1list .lst1 li span[data-category=오후] {background-color:#1b52a2} .myschedule1 .sche1list .lst1 li dl {margin:7px 0 0;font-size:15px;color:#333;line-height:26px;font-weight:500;} .myschedule1 .sche1list .lst1 li dl dd {position:relative;margin:0;padding-left:26px;} .myschedule1 .sche1list .lst1 li dl dd:before {position:absolute;top:4px;left:1px;content:"";display:block;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;} .myschedule1 .sche1list .lst1 li dl dd.time:before {background-image:url(../../img/inc/chatbot1/ic36a1time.png);} .myschedule1 .sche1list .lst1 li dl dd.memo:before {background-image:url(../../img/inc/chatbot1/ic36a1memo.png);} .myschedule1 .sche1list .lst1 li .b1.modify {position:absolute;top:20px;right:20px;width:26px;height:26px;background:url(../../img/inc/chatbot1/ic52a1modify.png) no-repeat 0 0 / cover;border-radius:100%;} /* 일정 내려받기 */ .myschedule1 .b1.pdownload {display:block;background-color:#303440;border-radius:25px;color:#fff;font-weight:500;text-align:center;width:160px;line-height:50px;box-sizing:border-box;margin:-10px auto 20px;box-shadow:5px 5px 10px rgba(0,0,0,.2)} .myschedule1 .b1.pdownload .t1 {position:relative;display:inline-block;vertical-align:middle;padding-left:30px;} .myschedule1 .b1.pdownload .t1:before {position:absolute;top:50%;left:0;content:"";display:block;width:23px;height:24px;background:url(/scms-static/img/board/default/icon/xls.png) no-repeat 0 0 / cover;margin-top:-12px;} /* 플랜알림 */ #plan1c [class*=alarm] {position:relative;background:#fff;border-radius:12px;margin-bottom:15px;padding:18px 20px 14px;} #plan1c [class*=alarm] .hg1 {position:relative;color:#1d1d1d;line-height:21px;padding-bottom:13px;border-bottom:1px solid #ebebeb;margin-bottom:15px;} #plan1c [class*=alarm] .hg1 .h1 {display:block;font-weight:600;} #plan1c [class*=alarm] .hg1 .t2 {display:block;margin:0;font-weight:400;font-size:15px;margin-top:3px;} #plan1c .alarm1 .hg1 .h1 {font-size:17px;margin-right:95px} #plan1c .alarm1 .hg1 .t2 {margin-top:7px;margin-right:95px;word-break:keep-all} #plan1c .alarm1 .hg1 .check1 {position:absolute;top:0;right:0;} #plan1c .alarm1 .hg1 .check1 input[type=checkbox] {position:absolute;top:0;right:0;width:90px;height:36px;margin:0;overflow:hidden;-webkit-appearance:none;appearance:none;} #plan1c .alarm1 .hg1 .check1 label {display:block;width:90px;height:36px;text-indent:-9999px;background:#e9e9ea url(../../img/inc/chatbot1/plan1_sprite.png) no-repeat 0 -29px / auto 100px;margin:0;padding:0;border-radius:9999px} #plan1c .alarm1 .hg1 .check1 input[type=checkbox]:checked + label {background-position:-92px -29px} #plan1c .alarm1 .hg1 .frm1 {margin-top:8px;overflow:hidden;padding-right:5px} #plan1c .alarm1 .hg1 .frm1 input[type=text].text {float:left;width:calc(100% - 85px);height:46px;border-color:#c5c5c5;} #plan1c .alarm1 .hg1 .frm1 button.b1.save {float:right;width:75px;height:46px;background:#141719;border-radius:7px;border:0;color:#fff} #plan1c .alarm1 .time {margin:0;} #plan1c .alarm1 .time:after, #plan1c .alarm1 .time dd ul:after {content:"";display:block;clear:both;} #plan1c .alarm1 .time dt, #plan1c .alarm1 .time dd {margin:0;float:left;letter-spacing:-.075em} #plan1c .alarm1 .time dt {position:relative;font-size:15px;color:#1d1d1d;font-weight:600;width:79px;line-height:34px;padding-left:24px;margin-right:6px;box-sizing:border-box;} #plan1c .alarm1 .time dt:before {position:absolute;top:50%;left:0;content:"";display:block;width:20px;height:18px;background:url(../../img/inc/chatbot1/plan1_sprite.png) no-repeat 0 0 / auto 100px;margin-top:-9px;} #plan1c .alarm1 .time dd {width:calc(100% - 86px);} #plan1c .alarm1 .time dd ul {margin:0;padding:0;list-style:none;} #plan1c .alarm1 .time dd ul li {position:relative;float:left;width:calc(33.33% - 2px);margin-left:3px;} #plan1c .alarm1 .time dd ul li:first-child {margin-left:0} #plan1c .alarm1 .time dd ul li input[type=radio] {position:absolute;top:0;left:0;width:100%;height:100%;margin:0;overflow:hidden;-webkit-appearance:none;appearance:none;} #plan1c .alarm1 .time dd ul li label {position:relative;display:block;line-height:32px;border:1px solid #e7e7e7;border-radius:9999px;padding:0 0 0 24px;margin:0;font-size:15px;color:#3d3e42;min-width:80px;box-sizing:border-box;} #plan1c .alarm1 .time dd ul li label:before {position:absolute;top:50%;left:9px;content:"";display:block;width:13px;height:9px;background:url(../../img/inc/chatbot1/plan1_sprite.png) no-repeat -37px 0 / auto 100px;margin-top:-4.5px;} #plan1c .alarm1 .time dd ul li input[type=radio]:checked {outline-offset:0} #plan1c .alarm1 .time dd ul li input[type=radio]:checked + label {background-color:#eb4050;border:0;line-height:34px;color:#fff} #plan1c .alarm1 .time dd ul li input[type=radio]:checked + label:before {background-position:-22px 0} #plan1c .alarm2 .hg1 {position:relative;padding-left:49px;} #plan1c .alarm2 .hg1:before {position:absolute;top:4px;left:6px;content:"";display:block;width:29px;height:27px;background:url(../../img/inc/chatbot1/plan1_sprite.png) no-repeat -96px 0 / auto 100px;} #plan1c .alarm2 .hg1 .h1 {margin-top:0;margin-bottom:0} #plan1c .alarm2 .date {position:relative;font-size:14px;color:#7f7f7f;display:block;padding-left:30px} #plan1c .alarm2 .date:before, #plan1c .alarm2 .date:after {position:absolute;content:"";display:block;background:url(../../img/inc/chatbot1/plan1_sprite.png) no-repeat;background-size:auto 100px;} #plan1c .alarm2 .date:before {top:2px;left:7px;width:20px;height:20px;background-position:-52px 0} #plan1c .alarm2 .date:after {top:0;right:2px;width:26px;height:26px;background-position:-126px 0;} #plan1c .your1chat1 {padding-left:0;margin-right:0} /* 챗봇결과 */ #chatbot1 .your1chat1.result1 {display:none;} #chatbot1 .your1chat1.result1.on {display:block;} #chatbot1 .your1chat1 .ask.on {background:#eb4050;border-color:transparent;color:#fff;} #chatbot1 .your1chat1 .ask.on .a2 {background-color:#fff;color:#eb4050;text-decoration:underline;text-underline-position:under;} /* 여행지 */ #chatbot1 .your1chat1 ul {list-style:none;margin:0;padding:0} #chatbot1 .your1chat1 .card1list1 li {position:relative;display:table;width:100%;height:90px;background:#fff;border-radius:20px;margin-bottom:10px;overflow:hidden;box-sizing:border-box;} #chatbot1 .your1chat1 .card1list1 li .f1 {position:absolute;top:10px;left:10px;width:70px;height:70px;overflow:hidden;border-radius:20px;background:#f6f7fd url(/_res/tour/img/sub/noimg01.jpg) no-repeat 50% 50% / cover} #chatbot1 .your1chat1 .card1list1 li .f1 .f1p1 {position:absolute;top:0;left:0;width:100%;height:100%;} #chatbot1 .your1chat1 .card1list1 li .f1 .f1p1 img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;} #chatbot1 .your1chat1 ul li {position:relative;} #chatbot1 .your1chat1 ul li label, #chatbot1 .your1chat1 ul li a {display:table-cell;vertical-align:middle;font-size:17px;line-height:24px;color:#1d1d1d;font-weight:600;word-break:keep-all;padding:0} #chatbot1 .your1chat1 ul li label .h1, #chatbot1 .your1chat1 ul li a .h1 {margin-left:90px;margin-right:80px;display:block;font-size:inherit} #chatbot1 .your1chat1 ul li .lbl {position:absolute;top:50%;right:10px;margin-top:-17px;display:block;width:70px;height:34px;line-height:34px;border-radius:17px;background:#a5a5a5;color:#fff;text-align:center;box-sizing:border-box;font-size:14px;} #chatbot1 .your1chat1 ul li input[type=radio] {position:absolute;top:50%;right:58px;width:17px;height:17px;margin:-8.5px 0 0;z-index:1;border-radius:100%;-webkit-appearance:none;appearance:none;} #chatbot1 .your1chat1 ul li input[type=radio]:before {position:absolute;top:3px;left:0;content:"";display:block;width:100%;height:100%;background:#a5a5a5;} #chatbot1 .your1chat1 ul li input[type=radio]:checked, #chatbot1 .your1chat1 ul li a:active {right:53px} #chatbot1 .your1chat1 ul li input[type=radio]:focus-visible {outline:2px dotted #000;outline-offset:2px;} #chatbot1 .your1chat1 ul li input[type=radio]:checked:before {background:#eb4050 url(../../img/sub/ic28a1checked.png) no-repeat 0 0 / 14px auto;} #chatbot1 .your1chat1 ul li input[type=radio]:checked + label .lbl, #chatbot1 .your1chat1 ul li a:active .lbl {padding-left:16px;background-color:#eb4050} #chatbot1 .your1chat1 ul li .chk1 input[type=radio]:checked + label {padding-left:16px;background-color:#eb4050} #chatbot1 .your1chat1 ul li a .lbl:before {position:absolute;top:50%;right:53px;content:"";display:block;width:17px;height:17px;margin:-8.5px 0 0;z-index:1;border-radius:100%;background:#a5a5a5;} #chatbot1 .your1chat1 ul li a:active .lbl:before, #chatbot1 .your1chat1 ul li a:target .lbl:before {right:44px;margin-top:-6.5px;background:#eb4050 url(../../img/sub/ic28a1checked.png) no-repeat 0 0 / 14px auto;} /* 버스정류소 / 주유소 */ #chatbot1 .your1chat1 .bus1list1 li, #chatbot1 .your1chat1 .stat1list1 li {position:relative;display:table;width:100%;height:60px;background:#fff;border-radius:20px;margin-bottom:10px;overflow:hidden;box-sizing:border-box;} #chatbot1 .your1chat1 .bus1list1 li:before, #chatbot1 .your1chat1 .stat1list1 li:before {position:absolute;top:50%;left:13px;content:"";display:block;width:35px;height:35px;background:url(../../img/sub/ic70a1bus.png) no-repeat 0 0 / cover;margin-top:-17.5px} #chatbot1 .your1chat1 .bus1list1 li label .h1, #chatbot1 .your1chat1 .stat1list1 li label .h1 {margin-left:60px} /* 버스노선 */ #chatbot1 .your1chat1 .bus1route1 {margin-bottom:15px;} #chatbot1 .your1chat1 .bus1route1 .h1 {position:relative;background:#41478f;font-weight:500;color:#fff;height:60px;line-height:64px;padding:0 0 0 44px;font-size:16px;margin:0;border-radius:20px 20px 0 0} #chatbot1 .your1chat1 .bus1route1 .h1:before {position:absolute;top:50%;left:17px;content:"";display:block;width:17px;height:20px;background:url(../../img/sub/ic40a1busstop.png) no-repeat 0 0 / cover;margin-top:-8px;} #chatbot1 .your1chat1 .bus1route1 .stops {border-radius:0 0 20px 20px;background:#fff;padding:9px 20px 15px 14px;box-sizing:border-box} #chatbot1 .your1chat1 .bus1route1 .stops ol {position:relative;list-style:none;margin:0;padding:0 0 0 7px;height:480px;overflow-y:auto;} #chatbot1 .your1chat1 .bus1route1 .stops ol li {position:relative;border-bottom:1px solid #d9d9d9;padding:13px 0 13px 28px;line-height:1.1;margin-left:1px;} #chatbot1 .your1chat1 .bus1route1 .stops ol li:last-child {border-bottom:0} #chatbot1 .your1chat1 .bus1route1 .stops ol li:before, #chatbot1 .your1chat1 .bus1route1 .stops ol li:after {position:absolute;content:"";display:block;} #chatbot1 .your1chat1 .bus1route1 .stops ol li:after {top:0;left:0;width:3px;height:calc(100% + 1px);background:#41478f;z-index:1} #chatbot1 .your1chat1 .bus1route1 .stops ol li:first-child:after {top:26px;} #chatbot1 .your1chat1 .bus1route1 .stops ol li:first-child:after, #chatbot1 .your1chat1 .bus1route1 .stops ol li:last-child:after {height:calc(100% - 25px);} #chatbot1 .your1chat1 .bus1route1 .stops ol li .stopname {display:block;font-size:14px;margin-bottom:4px;} #chatbot1 .your1chat1 .bus1route1 .stops ol li .stopname em {display:inline-block;vertical-align:middle;width:30px;height:18px;font-size:10px;color:#eb4050;border-radius:9999px;box-sizing:border-box;border:1px solid #eb4050;line-height:16px;text-align:center;margin-top:-2px;margin-left:3px;} #chatbot1 .your1chat1 .bus1route1 .stops ol li .busid {display:block;font-size:12px;color:#a1a1a1;font-weight:400} #chatbot1 .your1chat1 .bus1route1 .stops ol li .stopname:before {position:absolute;content:"";display:block;top:50%;left:-7px;width:17px;height:17px;background:url(../../img/sub/ic34a1bus.png) no-repeat 0 0 / cover;margin-top:-8.5px;z-index:2} #chatbot1 .your1chat1 .bus1route1 .stops ol li em.stopname {font-weight:600} #chatbot1 .your1chat1 .bus1route1 .stops ol li em.stopname:before {background-image:url(../../img/sub/ic34a1bus_on.png);} /* 요트예약 */ #chatbot1 .your1chat1 .schedule1 .lst {padding:0 20px;} #chatbot1 .your1chat1 .schedule1 .lst li {position:relative;padding:18px 80px 18px 0;display:table;border-bottom:1px dashed #ddd;width:100%;box-sizing:border-box;} #chatbot1 .your1chat1 .schedule1 .lst li:last-child {border-bottom:0} #chatbot1 .your1chat1 .schedule1 .lst li .h1 {display:table-cell;vertical-align:middle;border:0;background:transparent;padding:0;text-align:left;height:48px;line-height:24px;} #chatbot1 .your1chat1 .schedule1 .lst li input[type=radio] {right:48px;} #chatbot1 .your1chat1 .schedule1 .lst li input[type=radio]:checked, #chatbot1 .your1chat1 ul li a:active {right:43px} #chatbot1 .your1chat1 .schedule1 .lst li .lbl {right:0} /* 달력 */ #chatbot1 .schedule1 .hg1 {position:absolute;top:0;left:0;width:100%;height:54px;} #chatbot1 .schedule1 .hg1 .m {position:absolute;top:50%;right:0;width:40px;height:30px;background-color:rgba(0,0,0,.3);border:0;margin-top:-15px;text-indent:-9999px;background-repeat:no-repeat;background-size:13px auto;background-position:50% 50%;} #chatbot1 .schedule1 .hg1 .m.prev {right:61px;border-radius:20px 0 0 20px;background-image:url(../../img/sub/ic32a1next.png)} #chatbot1 .schedule1 .hg1 .m.next {right:20px;border-radius:0 20px 20px 0;background-image:url(../../img/sub/ic32a1prev.png)} #chatbot1 .schedule1 table {width:calc(100% - 30px);border:0;font-size:13px;margin:15px 15px 10px} #chatbot1 .schedule1 table th, #chatbot1 .schedule1 table td {border:0;text-align:center;height:40px;line-height:40px;} #chatbot1 .schedule1 table th {font-size:15px;color:#41478f;font-weight:700;} #chatbot1 .schedule1 table td {position:relative;color:#000;font-weight:600;z-index:1} #chatbot1 .schedule1 table td a {color:inherit;display:block;width:100%;height:100%;} #chatbot1 .schedule1 table td a.on {color:#fff;} #chatbot1 .schedule1 table td a.on:before {position:absolute;top:50%;left:50%;content:"";display:block;width:33px;height:33px;background:#eb4050;border:5px solid #f9c6cb;border-radius:100%;margin:-21.5px;z-index:-1} #chatbot1 .schedule1 .yacht1list li {position:relative;padding:15px 20px;font-size:15px;line-height:26px;border-bottom:1px solid #ddd;color:#000} #chatbot1 .schedule1 .yacht1list li:last-child {border-bottom:0} #chatbot1 .schedule1 .yacht1list li[data-status=마감] {background:#efefef;border-bottom:0;color:rgba(0,0,0,.5)} #chatbot1 .schedule1 .yacht1list li[data-status=마감] label {color:#979797} #chatbot1 .schedule1 .yacht1list li label {overflow:hidden;margin:0;font-size:inherit;font-weight:400;} #chatbot1 .schedule1 .yacht1list li label .dt, #chatbot1 .schedule1 .yacht1list li label .dd {margin:0;padding:0;float:left;} #chatbot1 .schedule1 .yacht1list li label .dt {position:relative;width:40px;} #chatbot1 .schedule1 .yacht1list li label .dt:after {position:absolute;top:0;right:4px;content:":";display:block;} #chatbot1 .schedule1 .yacht1list li label .dd {width:calc(100% - 40px);} #chatbot1 .schedule1 .yacht1list li label .dt.num {width:75px;} #chatbot1 .schedule1 .yacht1list li label .dt.num + .dd {width:calc(100% - 75px)} #chatbot1 .schedule1 .yacht1list li .lbl {top:18px;right:15px;margin:0;} #chatbot1 .schedule1 .yacht1list li input[type=radio] {top:27px;margin-top:0;right:62px;} #chatbot1 .schedule1 .yacht1list li input[type=radio]:checked {right:57px} #chatbot1 .schedule1 .yacht1list li[data-status=마감] .lbl {background-color:#a5a5a5;} #chatbot1 .schedule1 .yacht1list li[data-status=예약가능] .lbl, #chatbot1 .schedule1 .yacht1list li[data-status=예약가능] input[type=radio]:checked + label .lbl {background-color:#41478f} #chatbot1 .schedule1 .yacht1list li[data-status=예약가능] input[type=radio]:before, #chatbot1 .schedule1 .yacht1list li[data-status=예약가능] input[type=radio]:checked:before {background-color:#41478f} #chatbot1 .schedule1 .b1.booking {display:block;width:100%;height:50px;background:#eb4050;border:0;text-align:center;color:#fff;font-size:15px;font-weight:600;margin:0} /* bgm 듣기 */ #chatbot1 .your1chat1 .bgm1 {background:#fff;border-radius:12px;margin:0;overflow:hidden;padding:10px 10px 5px;margin-top:10px;} #chatbot1 .your1chat1 .bgm1 dt, #chatbot1 .your1chat1 .bgm1 dd {margin:0;font-size:14px;letter-spacing:-.025em;} #chatbot1 .your1chat1 .bgm1 dt {font-weight:400;color:#000;margin-left:8px;margin-bottom:2px} #chatbot1 .your1chat1 .bgm1 dd {position:relative;font-weight:500;color:#000;background:#f5f5f5;border-radius:10px;margin-bottom:5px;padding:5px 10px;} #chatbot1 .your1chat1 .bgm1 dd a {display:block;color:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-right:35px;padding:3px 0 2px} #chatbot1 .your1chat1 .bgm1 dd a:after {position:absolute;top:50%;right:12px;content:"";display:block;width:20px;height:20px;background:url(../../img/sub/ic40a1bgm.png) no-repeat 0 0 / cover;margin-top:-10px;} /* 모달 bgm */ #layer1bgm.layer1bgm {display:block !important;position:fixed;top:0;left:0;width:100%;height:0;background:rgba(0,0,0,.6);z-index:100;transition:all .35s ease;overflow:hidden;} #layer1bgm.layer1bgm.on {height:100%} #layer1bgm.layer1bgm .wrap1 {position:relative;max-width:420px;height:90%;margin:3% auto;background:#363940;border-radius:30px;box-shadow:15px 15px 30px rgba(0,0,0,.25);overflow:hidden;} #layer1bgm.layer1bgm .wrap1 iframe {width:100%;height:100%;} #layer1bgm.layer1bgm .wrap1 .b1.close {position:absolute;top:12px;right:20px;width:30px;height:30px;z-index:1;background-color:#a41111} #layer1bgm.layer1bgm .wrap1 .b1.close:before, #layer1bgm.layer1bgm .wrap1 .b1.close:after {position:absolute;top:50%;left:50%;content:"";display:block;width:1px;height:30px;background:#fff;margin:-15px 0} #layer1bgm.layer1bgm .wrap1 .b1.close:before {transform:rotate(45deg)} #layer1bgm.layer1bgm .wrap1 .b1.close:after {transform:rotate(-45deg)} @media screen and (max-width:1259px){ #layer1bgm.layer1bgm .wrap1 {margin-top:20px;height:calc(97dvh - 20px) !important;} html.is-android #layer1bgm#layer1bgm.layer1bgm .wrap1 {margin-top:20px;height:calc(97dvh - 20px) !important;} } @media screen and (max-width:499px){ #layer1bgm.layer1bgm .wrap1 .b1.close {top:11px;right:24px} } /* 주유소 정보 */ #chatbot1 .your1chat1 .stat1list1 li:before {background-image:url(../../img/sub/ic70a1station.png);} #chatbot1 .your1chat1 .stat1list1 li .h1 {font-size:15px;font-weight:500;} #chatbot1 .your1chat1 .stat1info1 {background:#fff;border-radius:20px;margin-bottom:15px} #chatbot1 .your1chat1 .stat1info1 .h1 {position:relative;background:#41478f;font-weight:500;color:#fff;height:60px;line-height:64px;padding:0 0 0 44px;font-size:16px;margin:0;border-radius:20px 20px 0 0} #chatbot1 .your1chat1 .stat1info1 .h1:before {position:absolute;top:50%;left:17px;content:"";display:block;width:20px;height:20px;background:url(../../img/sub/ic40a1station.png) no-repeat 0 0 / cover;margin-top:-8px;} #chatbot1 .your1chat1 .stat1info1 .info1cont {padding:15px 16px 5px;} #chatbot1 .your1chat1 .stat1info1 .info1cont .h2 {margin:0 0 10px;font-size:17px;font-weight:600;color:#000;line-height:1.1;} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst {background:#f4f6f9;border-radius:10px;padding:10px 15px;font-size:15px;margin-bottom:15px} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst li {position:relative;padding-left:10px;line-height:20px;margin:6px 0} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst li:before {position:absolute;top:8px;left:0;content:"";display:block;width:3px;height:3px;background:#464646;border-radius:100%;} #chatbot1 .your1chat1 .stat1info1 .info1cont .sinfo3 {position:relative;font-size:15px;color:#000;margin:10px 0;padding-left:27px;line-height:21px} #chatbot1 .your1chat1 .stat1info1 .info1cont .sinfo3:before {position:absolute;top:0;left:0;content:"!";display:block;width:22px;height:22px;background:#eb4050;border-radius:100%;text-align:center;line-height:22px;font-size:11px;color:#fff;font-family:"TmonMonsori", sans-serif;font-weight:500} #chatbot1 .your1chat1 .stat1info1 .info1cont .sinfo3 + .h2 {margin-top:18px} #chatbot1 .your1chat1 .stat1info1 .info1cont table {border:0;border-top:2px solid #000;font-size:15px;width:100%;margin-bottom:10px} #chatbot1 .your1chat1 .stat1info1 .info1cont table th, #chatbot1 .your1chat1 .stat1info1 .info1cont table td {border:1px solid #d0d0d0;border-right:0;text-align:center;font-weight:400;color:#333;} #chatbot1 .your1chat1 .stat1info1 .info1cont table th:first-child, #chatbot1 .your1chat1 .stat1info1 .info1cont table td:first-child {border-left:0} #chatbot1 .your1chat1 .stat1info1 .info1cont table thead th {background:#f5f5f5;font-weight:500} /* 스마트물품보관함 정보 */ #chatbot1 .your1chat1 .stat1list1.storage1 li {padding-right:85px} #chatbot1 .your1chat1 .stat1list1.storage1 li .h1 {font-size:15px;font-weight:500;margin-right:0} #chatbot1 .your1chat1 .stat1list1.storage1 li:before {background-image:url(../../img/sub/ic70a1storage.png)} #chatbot1 .your1chat1 .stat1info1.storage1 .h1:before {background-image:url(../../img/sub/ic40a1storage.png)} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 {background:#f4f6f9;border-radius:10px;padding:10px 15px 8px;font-size:14px;margin-bottom:10px;text-align:center;} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 li {position:relative;display:inline-block;vertical-align:top;color:#000;font-weight:400;width:33%;padding-left:27px;text-align:left;box-sizing:border-box;line-height:22px} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 li:before {position:absolute;top:0;left:0;content:"";display:block;width:22px;height:22px;background:url(../../img/sub/storage1_sprite.png) no-repeat;background-size:auto 22px;border-radius:100%;} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 li:first-child {width:30%} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 li.n1:before {background-position:0 0} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 li.n2:before {background-position:-24px 0} #chatbot1 .your1chat1 .stat1info1 .info1cont .lst2 li.n3:before {background-position:-48px 0} #chatbot1 .your1chat1 .stat1info1 .storage1box {position:relative;overflow:hidden;margin-bottom:10px} #chatbot1 .your1chat1 .stat1info1 .storage1box:before {position:absolute;content:"";display:block;width:100%;height:100%;border:1px solid #d7d7d7;border-radius:10px;box-sizing:border-box;} #chatbot1 .your1chat1 .stat1info1 .storage1box ul {margin-right:-1px;margin-top:1px;overflow:hidden;border-radius:10px;} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li {float:left;border-right:1px solid #d7d7d7;border-bottom:1px solid #d7d7d7;width:20%;box-sizing:border-box;text-align:center;padding:9px 15px 8px;} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li .num {display:block;font-size:10px;font-weight:600;color:#252525;} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li .t1 {width:24px;height:24px;text-indent:-9999px;display:block;margin:auto;background:url(../../img/sub/storage1_sprite.png) no-repeat;background-size:auto 24px} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li[data-status=사용중] .t1 {background-position:0 0} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li[data-status=사용가능] .t1 {background-position:-26px 0} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li[data-status=사용불가] .t1 {background-position:-52px 0} #chatbot1 .your1chat1 .stat1info1 .storage1box ul li[data-status=사용불가] {background-color:#ebebeb} /* 공공wifi */ #chatbot1 .your1chat1 .stat1list1.wifi1 li:before {background-image:url(../../img/sub/ic70a1wifi.png)} #chatbot1 .your1chat1 .stat1info1.wifi1 .h1:before {background-image:url(../../img/sub/ic40a1wifi.png)} /* 공중화장실 */ #chatbot1 .your1chat1 .stat1list1.ptoilet1 li label .h1 {font-size:15px;font-weight:500;color:#1d1d1d} #chatbot1 .your1chat1 .stat1list1.ptoilet1 li:before {background-image:url(../../img/sub/ic70a1ptoilet.png)} #chatbot1 .your1chat1 .stat1info1.ptoilet1 .h1:before {background-image:url(../../img/sub/ic40a1ptoilet.png)} /* 주차장 */ #chatbot1 .your1chat1 .stat1list1.parking1 li label .h1 {font-size:15px;font-weight:500;color:#1d1d1d} #chatbot1 .your1chat1 .stat1list1.parking1 li:before {background-image:url(../../img/sub/ic70a1parking.png)} #chatbot1 .your1chat1 .stat1info1.parking1 .h1:before {background-image:url(../../img/sub/ic40a1parking.png)} #chatbot1 .your1chat1 .stat1info1.parking1 .info1cont table {font-size:14px;margin-top:5px;background:#fff} /* 약국 */ #chatbot1 .your1chat1 .stat1list1.pharm1 li:before {background-image:url(../../img/sub/ic70a1pharm.png)} #chatbot1 .your1chat1 .stat1info1.pharm1 .h1:before {background-image:url(../../img/sub/ic40a1pharm.png)} /* 챗봇애니메이션 */ #chatbot1 .chat, #chatbot1 .ask, #chatbot1 .schedule1, #chatbot1 .tip, #chatbot1 [class*=alarm], #chatbot1 .myschedule1 .sche1list, #chatbot1 #plan1c .plan1info {transform:translateY(20px);opacity:0;transition-duration:.4s;transition-property:opacity,transform} body.loaded #chatbot1 .chat, body.loaded #chatbot1 .ask, body.loaded #chatbot1 .schedule1, body.loaded #chatbot1 .tip, body.loaded #chatbot1 #plan1c[aria-hidden=false] [class*=alarm], body.loaded #chatbot1 #plan1c[aria-hidden=false] .myschedule1 .sche1list, body.loaded #chatbot1 #plan1c[aria-hidden=false] .plan1info {transform:none;opacity:1;transition-duration:.5s;} body.loaded #chatbot1 .result1 .talker, body.loaded #chatbot1 .result1 .chat, body.loaded #chatbot1 .result1 ul, body.loaded #chatbot1 .result1 .bus1route1, body.loaded #chatbot1 .result1 .stat1info1, body.loaded #chatbot1 .result1 .ask, body.loaded #chatbot1 .result1 .schedule1, body.loaded #chatbot1 .dpn .chat, body.loaded #chatbot1 .dpn .ask {transform:translateY(20px);opacity:0;transition-duration:.4s;transition-property:opacity,transform} body.loaded #chatbot1 .result1 .talker {transform:scale(.7)} .myschedule1 .b1.pdownload {opacity:0;transition-duration:.4s;transition-property:opacity} #chatbot1 .talker, body.loaded #chatbot1 .dpn .talker {opacity:0;transition:all .35s ease;transform:scale(.7)} body.loaded .myschedule1 .b1.pdownload {opacity:1;transition-duration:.4s;} body.loaded #chatbot1 .talker, body.loaded #chatbot1 .result1.ani .talker, body.loaded #chatbot1 .result1.ani .chat, body.loaded #chatbot1 .result1.ani ul, body.loaded #chatbot1 .result1.ani .bus1route1, body.loaded #chatbot1 .result1.ani .stat1info1, body.loaded #chatbot1 .result1.ani .ask, body.loaded #chatbot1 .result1.ani .schedule1, body.loaded #chatbot1 .dpn.ani .talker, body.loaded #chatbot1 .dpn.ani .chat, body.loaded #chatbot1 .dpn.ani .ask {transform:none;opacity:1;} body.loaded #chatbot1 .dpn.on {display:block !important;} #chatbot1 [data-aos-delay="1"] {transition-delay:.2s} #chatbot1 [data-aos-delay="2"] {transition-delay:.4s} #chatbot1 [data-aos-delay="3"] {transition-delay:.6s} #chatbot1 [data-aos-delay="4"] {transition-delay:.8s} #chatbot1 [data-aos-delay="5"] {transition-delay:1s} #chatbot1 [data-aos-delay="6"] {transition-delay:1.2s} #chatbot1 [data-aos-delay="7"] {transition-delay:1.4s} #chatbot1 [data-aos-delay="8"] {transition-delay:1.6s} #chatbot1 [data-aos-delay="9"] {transition-delay:1.8s} #chatbot1 [data-aos-delay="10"] {transition-delay:2s} #chatbot1 [data-aos-delay="11"] {transition-delay:2.2s} #chatbot1 [data-aos-delay="12"] {transition-delay:2.4s} #chatbot1 [data-aos-delay="13"] {transition-delay:2.6s} #chatbot1 [data-aos-delay="14"] {transition-delay:2.8s} #chatbot1 [data-aos-delay="15"] {transition-delay:3s} #chatbot1 [data-aos-delay="16"] {transition-delay:3.2s} #chatbot1 [data-aos-delay="17"] {transition-delay:3.4s} #chatbot1 [data-aos-delay="18"] {transition-delay:3.6s} #chatbot1 [data-aos-delay="19"] {transition-delay:3.8s} #chatbot1 [data-aos-delay="20"] {transition-delay:4s} #chatbot1 [data-aos-delay="21"] {transition-delay:4.2s} #chatbot1 [data-aos-delay="22"] {transition-delay:4.4s} #chatbot1 [data-aos-delay="23"] {transition-delay:4.6s} #chatbot1 [data-aos-delay="24"] {transition-delay:4.8s} #chatbot1 [data-aos-delay="25"] {transition-delay:5s} #chatbot1 [data-aos-delay="26"] {transition-delay:5.2s} #chatbot1 [data-aos-delay="27"] {transition-delay:5.4s} #chatbot1 [data-aos-delay="28"] {transition-delay:5.6s} #chatbot1 [data-aos-delay="29"] {transition-delay:5.8s} #chatbot1 [data-aos-delay="30"] {transition-delay:6s}