/* COMMON */ .pc-block{display:block!important;} .m-block{display:none!important;} html:not(.is-mobile) .article-con-bookmark ul::-webkit-scrollbar{width:4px;} html:not(.is-mobile) .article-con-bookmark ul::-webkit-scrollbar-track{background-color:#e7e7e7; margin:22px 0;} html:not(.is-mobile) .article-con-bookmark ul::-webkit-scrollbar-thumb{background-color:#333; border-radius:20px;} .wrap{position:relative; /*min-width:1760px;*/} .center-wrap{width:100%; max-width:1760px; margin:0 auto;} .center-1200{max-width:1200px;} .article-title{display:flex; align-items:center; margin:0 0 14px;} .article-title img{height:15px; display:block; margin:0 4px 0 0;} .article-title span{font-size:16px; font-weight:700; line-height:1; color:#c5001e; margin:-4px 0 0;} /* BUTTON */ .btn-custom01{background:#c5001e; color:#fff;} .btn-custom01:hover{background:#d50727; color:#fff;} .btn-outline-custom01{background:none; border:1px solid #ddd; color:#333;} .btn-outline-custom01:hover{border:1px solid #c5001e; color:#c5001e;} /* HEADER */ .header-wrap{width:100%; background:#fff; box-shadow:0 0 10px 0 rgba(0,0,0,0.1); z-index:20; position:relative;} .header-wrap header{display:flex; align-items:center;} .header-wrap header .header-l{} .header-wrap header .header-l a{display:block;} .header-wrap header .header-l a img{height:48px; display:block;} .header-wrap header .header-r{flex-grow:1; display:flex; justify-content:flex-end;} .header-wrap header .header-r ul{display:flex;} .header-wrap header .header-r ul li{} .header-wrap header .header-r ul li+li{margin:0 0 0 60px;} .header-wrap header .header-r ul li a{height:82px; font-size:18px; font-weight:500; line-height:1; color:#333; display:flex; align-items:center;} .header-wrap header .header-r .hamburger-bt{margin:0 0 0 60px;} .header-wrap header .header-r .hamburger-bt a{height:82px; font-size:18px; font-weight:500; line-height:1; color:#333; display:flex; align-items:center;} .header-wrap header .header-r .hamburger-bt a img{height:20px; display:block;} /* 로그인 MODAL */ .join-modal{} .join-modal .modal-dialog{width:500px;} .join-modal .modal-content{width:100%;} .join-modal .modal-body{padding:40px;} .join-modal .modal-body .close{position:absolute; top:10px; right:10px;} .join-modal .modal-body .close i{font-size:30px; color:#111;} .join-modal .modal-body .single{padding:0; margin:0;} .modal-title{font-size:28px; font-weight:700; line-height:1; color:#111; text-align:center; margin:0 0 32px;} .login-sns{border-bottom:1px dashed #ddd; padding:0 0 28px; margin:0 0 26px;} .login-sns button{width:100%; height:48px; font-size:16px; font-weight:500; position:relative; border-radius:6px; text-align:center;} .login-sns button+button{margin:8px 0 0;} .login-sns button img{position:absolute; top:50%; left:0; transform:translate(10px, -50%);} .login-sns .login-naver{background:#1ec800; color:#fff;} .login-sns .login-naver img{height:18px;} .login-sns .login-kakao{background:#fae100; color:#371d1e;} .login-sns .login-kakao img{height:23px;} .login-sns .login-general{background:#ddd; color:#000;} .form-area{} .form-area dl{} .form-area dl+dl{margin:32px 0 0;} .form-area dl dt{margin:0 0 10px;} .form-area dl dt h4{font-size:15px; font-weight:500; line-height:1; color:#111; display:block;} .form-area dl dt label{font-size:15px; font-weight:500; line-height:1; color:#111; display:block;} .form-area dl dd{} .form-area dl dd+dd{margin:4px 0 0;} .form-area dl dd input[type="text"], .form-area dl dd input[type="password"]{width:100%; height:44px; border:1px solid #ddd; border-radius:6px; padding:10px; overflow:hidden;} .form-area .id-save{margin:12px 0 0;} .form-area .join-agree-box{} .form-area .join-agree-box .form-check{display:flex;} .form-area .join-agree-box .form-check label{flex-grow:1;} .form-area .join-agree-box .form-check label strong{font-weight:500;} .form-area .join-agree-box .form-check button{} .form-area .join-agree-box .form-check button i{font-size:18px;} .form-area .join-agree-box .form-check button[aria-expanded="true"] i:before{content: "\f106";} .form-area .join-agree-box .form-check .collapse{} .form-area .join-agree-box .agree-con{width:100%; height:100%; max-height:140px; font-size:13px; line-height:1.45; background:#f5f5f5; border-radius:8px; padding:10px; margin:8px 0 20px; overflow-y:auto;} .form-area .btn-wrap{margin:32px 0 0;} .form-area .id_pw-find-wrap{text-align:center; background:#f3f3f3; border-radius:12px; padding:32px 20px; margin:40px auto 0;} .form-area .id_pw-find-wrap .id-count{font-size:20px; color:#222;} .form-area .id_pw-find-wrap .id-count span{font-weight:500; color:#c5001e;} .form-area .id_pw-find-wrap .id-name{font-size:22px; font-weight:700; line-height:1; color:#222; margin:10px 0 0;} /* 버튼 */ .btn-wrap{display:flex; flex-direction:column; margin:54px 0 0;} .btn-wrap .btn-type{width:100%; height:52px; font-size:17px; font-weight:500; border-radius:6px;} .btn-wrap .btn-type+.btn-type{margin:8px 0 0;} .btn-wrap .btn-type.btn-type01{color:#fff; background:#c5001e;} .btn-wrap .btn-type.btn-type02{color:#c5001e; border:1px solid #c5001e;} .btn-wrap .btn-type.btn-type03{color:#fff; background:#555;} .login-find{display:flex; justify-content:center; margin:16px 0 0;} .login-find li{display:flex; align-items:center;} .login-find li:after{content:""; width:1px; height:13px; background:#aaa; margin:0 16px;} .login-find li:last-of-type:after{display:none;} .login-find li a{display:block; font-size:14px; line-height:1; color:#333; white-space:nowrap;} .login-find li a:hover{color:#111;} .login-find li a.login-find-join{color:#c5001e;} .login-find li a.login-find-join:hover{color:#f21738;} /* 구독 MODAL */ .membership-modal{} .membership-modal.join-modal .modal-dialog{width:540px;} .membership-modal.join-modal .modal-content{background:#1a1a1a; overflow:hidden;} .membership-modal .membership-modal-box{text-align:center;} .membership-modal .membership-modal-box p{font-size:21px; font-weight:500; line-height:1.3; color:#fff; word-break:keep-all;} .membership-modal .membership-modal-box small{font-size:15px; font-weight:300; line-height:1.3; color:rgba(255, 255, 255, 0.6); word-break:keep-all; display:block; margin:6px 0 0;} .membership-modal .membership-modal-box button{width:100%; font-size:18px; color:#fff; background:#c5001e; padding:8px; margin:28px 0 0;} /* HAMBURGER */ #hamburger{width:326px; background:; border:none;} #hamburger .hamburger-top{background:; padding:22px 22px;} #hamburger .hamburger-top .hamburger-close{display:flex; justify-content:flex-end;} #hamburger .hamburger-top .hamburger-close a{width:auto; height:auto; display:block; background:none; padding:0; opacity:1;} #hamburger .hamburger-top .hamburger-close a img{height:25px; display:block; margin:auto;} #hamburger .hamburger-top .hamburger-logo{} #hamburger .hamburger-top .hamburger-logo a{display:block;} #hamburger .hamburger-top .hamburger-logo a img{height:84px; display:block; margin:auto;} #hamburger .hamburger-strong{width:calc(100% - 18px); gap:4px; display:flex; justify-content:center; background:#f3f3f3; border-radius:8px; padding:10px 12px; margin:auto;} #hamburger .hamburger-strong a{width:25%;} #hamburger .hamburger-strong a+a{} #hamburger .hamburger-strong a dl{display:flex; flex-direction:column; align-items:center;} #hamburger .hamburger-strong a dl dt{width:48px; height:48px; display:flex; justify-content:center; align-items:center; font-size:18px; background:#fff; border:1px solid #eee; border-radius:50px; padding:10px;} #hamburger .hamburger-strong a dl dt i{font-size:22px; color:#555;} #hamburger .hamburger-strong a dl dd{font-size:12px; font-weight:500; line-height:1.2; color:#333; text-align:center; word-break:keep-all; margin:4px 0 0;} #hamburger .hamburger-strong a:hover dt{background:; border:1px solid rgba(197, 0, 30, 0.5);} #hamburger .hamburger-strong a:hover dt i{color:#c5001e;} #hamburger .hamburger-strong a:hover dd{color:#c5001e;} #hamburger .hamburger-bot{height:100%; display:flex; flex-direction:column; padding:18px 22px;} #hamburger .hamburger-bot ul{flex-grow:1; margin:10px 0 0;} #hamburger .hamburger-bot ul li{} #hamburger .hamburger-bot ul li+li{margin:18px 0 0;} #hamburger .hamburger-bot ul li a{width:100%; display:flex; align-items:center; padding:4px 0;} #hamburger .hamburger-bot ul li a p{flex-grow:1; font-size:17px; font-weight:500; line-height:1; color:#333;} #hamburger .hamburger-bot ul li a i{font-size:17px; color:#555; margin:0 0 0 20px;} #hamburger .hamburger-bot ul li a:hover p, #hamburger .hamburger-bot ul li a:hover i{color:#c5001e;} /* #hamburger .hamburger-bot ul li a:before{content:""; width:3px; height:3px; background:#333; border-radius:50%; margin:0 18px 0 0;} */ /* #hamburger .hamburger-bot ul li .hamburger-bts{display:flex; align-items:center;} #hamburger .hamburger-bot ul li .hamburger-bts a{font-size:14px; justify-content:center;} #hamburger .hamburger-bot ul li .hamburger-bts a:before{display:none;} #hamburger .hamburger-bot ul li .hamburger-bts a img{height:17px; display:block; margin:0 6px 0 0;} #hamburger .hamburger-bot ul li .hamburger-bts a i{font-size:20px; margin:0 4px 0 0;} #hamburger .hamburger-bot ul li .hamburger-bts span{width:1px; height:30px; background:#ccc;} */ #hamburger .hamburger-bot .hamburger-login{display:flex; flex-direction:column;} #hamburger .hamburger-bot .hamburger-login button{width:100%; height:54px; font-size:18px; font-weight:500; border-radius:8px; *box-shadow:0 0 10px rgba(0,0,0,0.1);} #hamburger .hamburger-bot .hamburger-login button.hamburger-loginBt{background:#c5001e; color:#fff;} #hamburger .hamburger-bot .hamburger-login button.hamburger-joinBt{background:#fff; border:1px solid rgba(197, 0, 30, 0.5); color:#c5001e;} #hamburger .hamburger-bot .hamburger-login button+button{margin:10px 0 0;} /* MAIN */ .main-section{width:100%; height:100vh; display:flex; flex-wrap:wrap; position:relative;} /* MAIN - LEFT */ .main-section .main-section-input{width:500px; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 80px; background:#f4f7ff;} .main-section .main-section-input article{} .main-section .main-section-input article+article{margin:60px 0 0;} .article-con{} .article-con .input-group{box-shadow:0 0 8px rgba(0,0,0,0.1);} .article-con .input-group input{height:42px; border:1px solid #c5001e;} .article-con .input-group input::placeholder{font-size:13px; color:#989898;} .article-con .input-group input:focus{box-shadow:none;} .article-con .input-group button{width:44px; background:#c5001e;} .article-con .input-group button img{height:16px; margin:auto;} .article-con.article-con-area ul{display:flex; flex-wrap:wrap; margin:-8px 0 0;} .article-con.article-con-area ul li{margin:8px 8px 0 0;} .article-con.article-con-area ul li:nth-of-type(3n+0){margin:8px 0 0 0;} .article-con.article-con-area ul li button{width:108px; height:40px; background:#f3f3f3; border-radius:6px; font-size:14px; font-weight:500; color:#333;} .article-con.article-con-area ul li button:hover, .article-con.article-con-area ul li button.active{background:#c5001e; color:#fff;} .article-con.article-con-bookmark{background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 0 8px rgba(0,0,0,0.1);} .article-con.article-con-bookmark ul{height:224px; display:flex; flex-direction:column; padding:8px 22px; overflow-y:auto;} .article-con.article-con-bookmark ul li{padding:12px 0;} .article-con.article-con-bookmark ul li+li{border-top:1px solid #eee;} .article-con.article-con-bookmark ul li a{display:flex; align-items:center; font-size:13px; font-weight:500; color:#333;} .article-con.article-con-bookmark ul li a:before{content:""; display:inline-block; width:3px; height:3px; background:#333; border-radius:50%; margin:0 6px 0 0;} .article-con.article-con-bookmark ul li a:hover{color:#c5001e;} .article-con.article-con-bookmark ul li a:hover:before{background:#c5001e;} /* MAIN - RIGHT */ .main-section-map{flex-grow:1; display:flex; justify-content:center; align-items:center; background:#ecf0f8;} .main-section-map span{font-size:160px; font-weight:500;} /* MAIN - INFO */ .main-info{margin:0 auto 120px;} .main-tree{text-align:center; padding:120px 0 100px;} .main-tree h3{font-size:38px; font-weight:400; color:#333;} .main-tree h3 strong{font-weight:700;} .main-tree h2{font-size:86px; font-weight:700; line-height:1; color:#c5001e; display:block; margin:10px 0 60px;} .main-tree h2 small{font-size:30px; font-weight:500;} .main-tree h4{font-size:18px; font-weight:400; line-height:24px; color:#555;} .main-notice{} .main-notice ul{display:flex;} .main-notice ul li{} .main-notice ul li+li{margin:0 0 0 20px;} .main-notice ul li.notice-area{flex-grow:1; padding:40px; background:#edf9f3;} .main-notice ul li.notice-area .notice-title{display:flex;} .main-notice ul li.notice-area .notice-title h2{flex-grow:1; font-size:28px; font-weight:700; line-height:1; color:#111; margin:0 0 47px;} .main-notice ul li.notice-area .notice-title a{width:23px; height:23px; display:flex; justify-content:center; align-items:center;} .main-notice ul li.notice-area .notice-title a span{width:1px; height:23px; position:relative; background:#404040;} .main-notice ul li.notice-area .notice-title a span:after{content:""; width:23px; height:1px; position:absolute; top:11px; left:-11px; background:#404040;} .main-notice ul li.notice-area .notice-list{display:flex; flex-direction:column;} .main-notice ul li.notice-area .notice-list li{border-top:1px solid #ddd;} .main-notice ul li.notice-area .notice-list li+li{margin:20px 0 0;} .main-notice ul li.notice-area .notice-list li a{display:flex; padding:20px 0 0;} .main-notice ul li.notice-area .notice-list li a p{flex-grow:1; font-size:17px; font-weight:400; line-height:1; color:#454545;} .main-notice ul li.notice-area .notice-list li a span{font-size:15px; font-weight:400; line-height:1; color:#454545;} .main-notice ul li > a{display:block;} .main-notice ul li > a img{display:block;} /* MAIN - NEW */ .main-section{width:100%; height:100vh; display:flex; position:relative;} .main-section .main-section-l{width:300px; height:100%; display:flex; flex-direction:column; background:#fff; box-shadow:0 0 6px rgba(0,0,0,0.1); position:fixed; z-index:10;} .main-section .main-section-l .main-lnb{flex-grow:1; padding:0 24px;} .main-section .main-section-l .main-lnb .main-logo{padding:42px 0;} .main-section .main-section-l .main-lnb .main-logo img{height:80px; display:block; margin:auto;} .main-section .main-section-l .main-lnb .main-menu{border:1px solid #e1e1e1; border-width:1px 0; padding:42px 0;} .main-section .main-section-l .main-lnb .main-menu{} .main-section .main-section-l .main-lnb .main-menu li{} .main-section .main-section-l .main-lnb .main-menu li+li{margin:26px 0 0;} .main-section .main-section-l .main-lnb .main-menu li a{display:block; font-size:18px; font-weight:700; line-height:1; color:#333; text-align:center;} .main-section .main-section-l .main-lnb .main-menu li a strong{color:#c5001e;} .main-section .main-section-l .main-lnb .main-member{display:flex; flex-wrap:wrap; justify-content:center; padding:18px 0;} .main-section .main-section-l .main-lnb .main-member li{flex:1 0 0; display:flex; justify-content:center;} .main-section .main-section-l .main-lnb .main-member li+li{border-left:1px solid #c3c3c3;} .main-section .main-section-l .main-lnb .main-member li a{display:block; font-size:14px; font-weight:400; line-height:1; color:#555;} .main-section .main-section-l .main-lnb .main-member .main-member-name{width:100%; display:flex; justify-content:center; margin:0 0 18px;} .main-section .main-section-l .main-lnb .main-member .main-member-name a{display:block; font-size:16px; font-weight:700; line-height:1; color:#222;} .main-section .main-section-l footer{background:none; padding:0;} .main-section .main-section-l footer .footer-menu{border:none; margin:0;} .main-section .main-section-l footer .footer-menu ul{width:100%; justify-content:flex-start; background:#eee; padding:15px 24px;} .main-section .main-section-l footer .footer-menu ul li{} .main-section .main-section-l footer .footer-menu ul li+li{margin:0 0 0 32px;} .main-section .main-section-l footer .footer-menu ul li a{font-size:12px; font-weight:300; line-height:1; color:#999;} .main-section .main-section-l footer address{padding:24px 24px; text-align:left;} /* .main-section .main-section-l footer address h3{font-size:16px; font-weight:500; line-height:1; color:#222; margin:0 0 22px;} .main-section .main-section-l footer address p{font-size:12px; font-weight:400; line-height:1; color:#777; text-align:left; margin:0;} .main-section .main-section-l footer address p+p{margin:6px 0 0;} */ .main-section .main-section-l footer address img{height:42px; display:block; margin:0 auto 18px;} .main-section .main-section-l footer address p{display:flex; flex-direction:column;} .main-section .main-section-l footer address p span{display:flex; align-items:center; font-size:13px; font-weight:300; line-height:1; color:#858585;} .main-section .main-section-l footer address p span+span{margin:4px 0 0;} .main-section .main-section-l footer address p span+span:before{content:""; display:none;} .main-section .main-section-l footer address h4{font-size:11px; font-weight:300; line-height:1; color:#aaa; margin:22px 0 0;} .main-section .main-section-r{width:100%; padding:0 0 0 300px;} .main-section .main-section-r .mainSwiper{width:100%; height:100%;} .main-section .main-section-r .mainSwiper .main-swiper-text{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:56px; font-weight:500; line-height:1.25; color:#fff; text-shadow:1px 5px 8px rgba(0, 0, 0, 0.5);} .main-section .main-section-r .mainSwiper .main-swiper-img{width:100%; height:100%; *background-size:100%!important;} .main-section .main-section-r .mainSwiper .main-swiper-img img{width:100%; height:100vh; display:block; object-fit:cover; object-position:50% 50%; margin:auto;} .main-section .main-section-r .mainSwiper .main-swiper-img.main-swiper-img01{background:url(/img/main-bg01.jpg)no-repeat center;} .main-section .main-section-r .mainSwiper .main-swiper-img.main-swiper-img02{background:url(/img/main-bg01.jpg)no-repeat center;} .main-section .main-section-r .mainSwiper .main-swiper-img.main-swiper-img03{background:url(/img/main-bg01.jpg)no-repeat center;} .main-section .main-section-r .mainSwiper .swiper-button-prev, .main-section .main-section-r .mainSwiper .swiper-button-next{width:auto; height:auto; top:50%; margin-top:calc(-85px / 2); opacity:0.85;} .main-section .main-section-r .mainSwiper .swiper-button-prev{left:40px;} .main-section .main-section-r .mainSwiper .swiper-button-next{right:40px;} .main-section .main-section-r .mainSwiper .swiper-button-prev:after, .main-section .main-section-r .mainSwiper .swiper-button-next:after{content:""; width:43px; height:85px;} .main-section .main-section-r .mainSwiper .swiper-button-prev:after{background:url(/img/arrow-l-w.png)no-repeat center;} .main-section .main-section-r .mainSwiper .swiper-button-next:after{background:url(/img/arrow-r-w.png)no-repeat center;} .main-section .main-section-r .mainSwiper .swiper-pagination{bottom:20px; line-height:1;} .main-section .main-section-r .mainSwiper .swiper-pagination-bullet{width:12px; height:12px; background:#fff; opacity:0.8; margin:0 8px;} .main-section .main-section-r .mainSwiper .swiper-pagination-bullet-active{background:#c5001e; opacity:1;} /*.main-section .main-section-r .main-swiper-img img{width:100%; display:block;}*/ /* FOOTER */ footer{width:100%; background:#333; position:relative; padding:0 0 40px;} footer .footer-menu{border-bottom:1px solid rgba(255,255,255,0.25); margin:0 0 28px;} footer .footer-menu ul{display:flex; justify-content:center; padding:20px 0;} footer .footer-menu ul li{} footer .footer-menu ul li+li{margin:0 0 0 42px;} footer .footer-menu ul li a{display:block; font-size:13px; font-weight:400; line-height:1; color:#aaa;} footer img{height:42px; display:block; margin:0 auto 18px;} footer address{display:flex; flex-wrap:wrap; justify-content:center; line-height:1.3; text-align:center;} footer address span{display:flex; align-items:center; font-size:14px; font-weight:500; line-height:1; color:#858585;} footer address span+span{} footer address span+span:before{content:""; width:1px; height:11px; display:block; background:#656565; margin:0 12px;} footer p{font-size:13px; font-weight:500; line-height:1; color:#adadad; text-align:center; margin:14px 0 0;} .m-bot-fix{display:none;} /* MAP */ .map-section{width:100%; height:100vh; position:relative;} .map-section .map-section-pc{display:block;} .map-section .map-section-m{display:none;} .map-section article{background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.1);} .map-top-left01{position:absolute; top:30px; left:30px;} .map-top-left01 .map-search-area{width:400px; padding:20px;} .map-top-left01 .map-search-area .nav{display:flex; align-items:center; border:none; margin:0 0 20px;} .map-top-left01 .map-search-area .nav li{display:flex; align-items:center; float:none; margin-bottom:0;} .map-top-left01 .map-search-area .nav li+li{} .map-top-left01 .map-search-area .nav li+li:before{content:""; width:1px; height:14px; display:inline-block; background:#aaa; margin:0 12px;} .map-top-left01 .map-search-area .nav li a{border:none; padding:0; margin:0;} .map-top-left01 .map-search-area .nav li a:hover{background:none;} .map-top-left01 .map-search-area .nav li a h2{margin:0;} .map-top-left01 .map-search-area .nav li a h2 img{} .map-top-left01 .map-search-area .nav li a:not(.active) h2 img{display:none;} .map-top-left01 .map-search-area .nav li a h2 span{} .map-top-left01 .map-search-area .nav li a:not(.active) h2 span{font-size:14px; font-weight:400; line-height:1; color:#333;} .map-top-left01 .map-search-area #map-search-tab .input-group{box-shadow:none;} .map-top-left01 .map-search-area #map-area-tab1{} .map-top-left01 .map-search-area #map-area-tab1 ul{} .map-top-left01 .map-search-area #map-area-tab1 ul li{} .map-top-left01 .map-search-area #map-area-tab1 ul li button{background:#f4f4f4; border:none; box-shadow:none;} .map-top-left01 .map-search-area #map-area-tab1 ul li button.active{background:#c5001e; color:#fff;} .map-top-left01 .map-search-area #map-area-tab1 ul li button:hover{background:#c5001e;} .article-area-result{display:flex; justify-content:center; border-top:1px dotted #ccc; padding:15px 0 0; margin:18px 0 0;} .article-area-result h3{display:block; font-size:15px; font-weight:700; line-height:1; color:#333; text-align:center; margin:0 14px 0 0;} .article-area-result dl{display:flex;} .article-area-result dl+dl{} .article-area-result dl+dl:before{content:"/"; display:inline-block; font-size:13px; line-height:1; margin:0 10px;} .article-area-result dl dt, .article-area-result dl dd{font-size:15px; font-weight:400; line-height:1; color:#333;} .article-area-result dl dt{flex-grow:1; margin:0 4px 0 0;} .article-area-result dl dd{font-weight:500; color:#c5001e;} .map-top-left02{position:absolute; top:calc(0px + 130px); left:0;} .map-top-left02 table{width:380px; table-layout:fixed;} .map-top-left02 table tr{} .map-top-left02 table tr+tr{border-top:1px solid #ddd;} .map-top-left02 table tr td{vertical-align:middle; font-size:13px; font-weight:400; line-height:1; color:#333; padding:16px 0;} .map-top-left02 table tr td:first-of-type, .map-top-left02 table tr td:last-of-type{padding:16px 20px;} .map-top-left02 table tr td p{width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .map-top-left02 table tr td a{display:block;} .map-top-left02 table tr td a img{height:27px; display:block; margin:auto;} .map-top-left02 table tr.page-area{} .map-top-left02 table tr.page-area td{font-size:12px; color:#555; text-align:center;} .map-top-left02 .search-wrap{width:400px;} .map-top-left02 .search-wrap dl{display:flex; align-items:center; padding:14px 20px;} .map-top-left02 .search-wrap dl+dl{border-top:1px solid #ddd;} .map-top-left02 .search-wrap dl dt, .map-top-left02 .search-wrap dl dd{font-size:13px; font-weight:400; line-height:1.2; color:#333; word-break:break-all;} .map-top-left02 .search-wrap dl dt{flex-grow:1; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .map-top-left02 .search-wrap dl.sitem1{} .map-top-left02 .search-wrap dl.sitem1 dd:nth-of-type(1){flex: 0 0 48px;} .map-top-left02 .search-wrap dl.sitem1 dd:nth-of-type(2){flex: 0 0 60px;} .map-top-left02 .search-wrap dl.sitem2{} .map-top-left02 .search-wrap dl.sitem2 dd:nth-of-type(1){flex: 0 0 52px;} .map-top-left02 .search-wrap dl.sitem2 dd:nth-of-type(2){flex: 0 0 96px;} .map-top-left02 .search-wrap dl dt+*, .map-top-left02 .search-wrap dl dd+*{margin:0 0 0 14px} /* .map-top-left02 .search-wrap dl dd > img{display:block;} .map-top-left02 .search-wrap dl dd a{display:block;} .map-top-left02 .search-wrap dl dd a img{height:27px; display:block; margin:auto;} */ .map-top-left02 .search-wrap dl.sorting-line{display:flex; padding:12px 20px;} .map-top-left02 .search-wrap dl.sorting-line h2{flex-grow:1; display:flex; align-items:flex-end; font-size:16px; font-weight:500; line-height:1; color:#333; margin:0;} .map-top-left02 .search-wrap dl.sorting-line h2 small{font-size:14px; font-weight:400; line-height:1; color:#555; margin:0 0 0 3px;} .map-top-left02 .search-wrap dl.sorting-line ul{display:flex;} .map-top-left02 .search-wrap dl.sorting-line ul li{} .map-top-left02 .search-wrap dl.sorting-line ul li+li{margin:0 0 0 12px;} .map-top-left02 .search-wrap dl.sorting-line ul li button{display:flex; align-items:center; font-size:13px; font-weight:400; color:#666;} .map-top-left02 .search-wrap dl.sorting-line ul li button.active{font-weight:500; color:#c5001e;} .map-top-left02 .search-wrap dl.sorting-line ul li button span{margin:0 0 0 -1px;} .map-top-left02 .search-wrap dl.sorting-line ul li button span i{font-size:13px;} .map-top-left02 .search-wrap dl.sorting-line ul li button span i:before{} .search-wrap .page-area{display:flex; align-items:baseline; border-top:1px solid #bbb; padding:14px 20px;} .search-wrap .page-area ul{flex-grow:1; display:flex; justify-content:center;} .search-wrap .page-area ul li{} .search-wrap .page-area ul li+li{margin:0 0 0 6px;} .search-wrap .page-area ul li a{display:flex; justify-content:center; align-items:center; font-size:12px; font-weight:400; line-height:1; color:#555; padding:4px;} .search-wrap .page-area ul li a.active{color:#c5001e;} .search-wrap .page-area .page-area-arrow{} .search-wrap .page-area .page-area-arrow a{display:flex; align-items:center; padding:4px;} .search-wrap .page-area .page-area-arrow a i{font-size:12px;} .search-wrap .page-area .page-area-arrow.page-area-arrow-l{} .search-wrap .page-area .page-area-arrow.page-area-arrow-r{} .search-wrap .page-area .page-area-arrow.disabled{} .search-wrap .page-area .page-area-arrow.disabled a{cursor:auto;} .map-top-center{position:absolute; top:30px; left:50%; transform:translate(-50%, 0);} .map-top-center a{display:block; padding:12px 20px;} .map-top-center a ul{display:flex; align-items:center;} .map-top-center a ul li{display:flex; align-items:center; font-size:14px; font-weight:500; line-height:1; color:#333;} .map-top-center a ul li:hover{text-decoration:underline;} .map-top-center a ul li:after{content:"\f105"; font-size:12px; font-family:"Font Awesome 6 Free"; font-weight:900; margin:0 18px;} .map-top-center a ul li:last-of-type:after{display:none;} .map-top-right01{position:absolute; top:30px; right:30px;} .map-section article.map-top-right01{background:none; border:none; border-radius:none; box-shadow:none;} .map-top-right01 ul{display:flex; align-items:center;} .map-top-right01 ul li{background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.1); margin:0 4px 0 0;} .map-top-right01 ul li:first-of-type a{padding:0 14px;} .map-top-right01 ul li:last-of-type{margin:0 0 0 30px;} .map-top-right01 ul li:last-of-type a{width:48px; padding:0;} .map-top-right01 ul li a{height:42px; display:flex; align-items:center; font-size:14px; font-weight:500; line-height:1; color:#333; padding:0 20px;} .map-top-right01 ul li a:hover{color:#c5001e;} .map-top-right01 ul li a img{height:14px; display:block; margin:auto;} .map-top-right02{position:absolute; top:calc(30px + 72px); right:30px;} .map-top-right02 > ul{width:48px;} .map-top-right02 > ul > li{} .map-top-right02 > ul > li+li{border-top:1px solid #e6e6e6;} .map-top-right02 > ul > li > a{display:block; position:relative; padding:10px 0;} .map-top-right02 > ul > li > a:hover > i, .map-top-right02 > ul > li > a:hover > p{color:#c5001e;} .map-top-right02 > ul > li > a > i{display:block; font-size:20px; color:#333; text-align:center; margin:0 auto 4px;} /*.map-top-right02 > ul > li > a img{height:19px; display:block; margin:0 auto 4px;}*/ .map-top-right02 > ul > li > a > p{font-size:11px; font-weight:500; line-height:1; color:#333; text-align:center;} .map-top-right02 > ul > li > a > .map-top-right-layer{width:auto; display:none; flex-wrap:wrap; position:absolute; top:0; right:55px; background:#fff; border-radius:4px; padding:14px 16px; box-shadow:0 0 10px rgba(0,0,0,0.1);} .map-top-right02 > ul > li > a.active > .map-top-right-layer{display:flex;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul{display:flex;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li{border:1px solid #eee; border-radius:4px; overflow:hidden;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li:hover{border:1px solid #c5001e;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li:hover p{color:#c5001e;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li+li{margin:0 0 0 6px;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li button{} .map-top-right02 > ul > li > a .map-layer-mapSelect ul li button img{width:104px; max-width:inherit; height:auto; display:block;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li button span{width:124px; height:68px; display:block;} .map-top-right02 > ul > li > a.active .map-layer-mapSelect ul li button p{font-size:11px; line-height:1; color:#555; padding:5px;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting ul{width:380px; display:flex; flex-wrap:wrap; margin:-6px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting ul li{width:32%; border:1px solid #eee; margin:6px 6px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting ul li:hover{border:1px solid #0475f4; color:#0475f4;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting ul li:nth-of-type(3n+0){margin:6px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting ul li button{width:100%; font-size:11px; color:#555; padding:6px;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting h2{flex-basis:100%; font-size:16px; font-weight:500; line-height:1; color:#555; border-bottom:1px solid #ddd; padding:0 0 8px; margin:0 0 8px; display:none;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list{width:380px;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list dl{} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list dl+dl{margin:28px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list dl dt{font-size:16px; font-weight:500; line-height:1; color:#454545; border-bottom:1px solid #eee; padding:0 0 10px; margin:0 0 8px;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list dl dd{display:flex; flex-wrap:wrap;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list dl dd .form-check{font-size:15px; font-weight:400; color:#454545; margin:0 20px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list dl dd .form-check+.form-check{} .map-top-right02 > ul > li > a.active .map-layer-mapSetting .map-setting-list button{width:100%; height:42px; font-size:14px; color:#fff; background:#c5001e; margin:28px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-bookmark{} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul{display:flex; flex-direction:column;} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li{} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li+li{border-top:1px dashed #d1d1d1; padding:10px 0 0; margin:10px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li button{width:100%; display:flex; align-items:center;} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li button p{flex-grow:1; font-size:15px; font-weight:400; line-height:1; color:#555; text-align:left; white-space:nowrap; margin:0 28px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li button p i{font-size:16px; margin:0 4px 0 0;} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li button span{width:21px; height:21px; display:flex; justify-content:center; align-items:center; font-size:11px; font-weight:500; line-height:1; color:#fff; background:#c5001e; border-radius:50px;} .map-top-right02 > ul > li > a.active .map-layer-bookmark ul li button:hover p{color:#c5001e;} .map-bot-right{position:absolute; bottom:30px; right:30px; box-shadow:none!important;} .map-bot-right .mapcontrol-here{width:42px; height:42px; background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.1); overflow:hidden;} .map-bot-right .mapcontrol-here i{font-size:22px; color:#333;} .map-bot-right .mapcontrols-zoom{display:flex; flex-direction:column; background:#fff; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.1); margin:8px 0 0;} .map-bot-right .mapcontrols-zoom button{width:42px; height:42px; border:1px solid #ddd;} .map-bot-right .mapcontrols-zoom button+button{border-width:0 1px 1px;} .map-bot-right .mapcontrols-zoom button i{font-size:22px; color:#333;} /* AREA - 비회원 */ .cityArea-wrap{} .cityArea-wrap .cityArea{width:120px; height:120px; background:rgba(36,50,159,0.75); border-radius:100px; display:flex; justify-content:center; align-items:center; font-size:42px; font-weight:500; line-height:1; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,0.3); position:absolute;} .cityArea-wrap .cityArea.cityArea01{top:500px; left:1200px;} /* MAP - Detail */ .view-modal{} .view-modal .modal-dialog{width:1218px;} .view-modal .modal-content{width:100%;} .view-modal .modal-body{padding:20px;} .view-modal .modal-body .close{display:flex; justify-content:center; align-items:center; position:absolute; top:-52px; right:0;} .view-modal .modal-body .close img{width:23px; display:block;} .view-modal .modal-body .close i{font-size:42px; color:#fff;} .view-modal .view-wrap{display:flex;} .view-modal .view-wrap .view-l{width:660px;} /* .view-modal .view-wrap .view-l .slider-for{height:; border:1px solid #eee; border-radius:8px; margin:0 0 14px; overflow:hidden;} .view-modal .view-wrap .view-l .slider-for a{height:auto; display:block;} .view-modal .view-wrap .view-l .slider-for a img{} .view-modal .view-wrap .view-l .slider-nav{margin:0 34px;} .view-modal .view-wrap .view-l .slider-nav .slick-track{display:flex; align-items:baseline;} .view-modal .view-wrap .view-l .slider-nav .item-slick{height:100%; border-radius:8px; border:1px solid #eee; overflow:hidden;} .view-modal .view-wrap .view-l .slider-nav .item-slick+.item-slick{margin:0 0 0 14px;} .view-modal .view-wrap .view-l .slider-nav .item-slick img{width:100%; background-size:cover; background-position:center;} .view-modal .view-wrap .view-l .slider-nav .item-slick.slick-current.slick-active{border:1px solid #c5001e;} .view-modal .view-wrap .view-l .slider-nav .slick-arrow{width:20px; height:100%; background:#fff;} .view-modal .view-wrap .view-l .slider-nav .slick-prev{left:-34px;} .view-modal .view-wrap .view-l .slider-nav .slick-next{right:-34px;} .view-modal .view-wrap .view-l .slider-nav .slick-prev:before{content:"\f104";} .view-modal .view-wrap .view-l .slider-nav .slick-next:before{content:"\f105";} .view-modal .view-wrap .view-l .slider-nav .slick-prev:before, .view-modal .view-wrap .view-l .slider-nav .slick-next:before{font-size:14px; color:#555; font-family:'Line Awesome Free'; font-weight:900;} .view-modal .view-wrap .view-l .slider-nav .slick-prev:hover:before, .view-modal .view-wrap .view-l .slider-nav .slick-prev:focus:before, .view-modal .view-wrap .view-l .slider-nav .slick-next:hover:before, .view-modal .view-wrap .view-l .slider-nav .slick-next:focus:before{color:#d31e1e;} */ .view-modal .view-wrap .view-l .view-l-pic{width:660px; height:400px; border:1px solid #eee; border-radius:8px; margin:0 0 10px; position:relative; overflow:hidden;} .view-modal .view-wrap .view-l .view-l-pic .view-watermark{position:absolute; bottom:20px; right:20px; z-index:2000;} .view-modal .view-wrap .view-l .view-l-pic .view-watermark img{width:80px; display:block; opacity:0.75;} .view-modal .view-wrap .view-l .view-l-pic .view-l-pic-box{width:660px; height:400px;} .view-modal .view-wrap .view-l .view-l-pic .layer{position:absolute; top:0; left:0; right:0; bottom:0; z-index:1000;} .view-modal .view-wrap .view-l .view-l-thumb{display:flex; align-items:baseline;} .view-modal .view-wrap .view-l .view-l-thumb li{width:16.66%; max-width:100px; height:62px; border:1px solid #eee; border-radius:8px; position:relative; overflow:hidden; cursor:pointer;} .view-modal .view-wrap .view-l .view-l-thumb li:before{content:""; width:100%; height:100%; display:block; position:absolute; background:rgba(0,0,0,0.55); border-radius:8px; z-index:10;} .view-modal .view-wrap .view-l .view-l-thumb li.pano_active{} .view-modal .view-wrap .view-l .view-l-thumb li.pano_active:before{background:rgba(0,0,0,0); border:1px solid #c5001e;} .view-modal .view-wrap .view-l .view-l-thumb li+li{margin:0 0 0 10px;} .view-modal .view-wrap .view-l .view-l-thumb li .view-l-thumb-box{width:100%; height:100%; top:50%; left:50%; transform:translate(-50%, -50%);} .view-modal .view-wrap .view-l .view-l-thumb li .layer{position:absolute; top:0; left:0; right:0; bottom:0;} .view-modal .view-wrap .view-l .view-l-thumb li:before:hover{background:red; transition:transform 1s; transform:scale(1.5);} .view-modal .view-wrap .view-r{flex-grow:1; display:flex; flex-direction:column; margin:0 0 0 32px;} /* .view-modal .view-wrap .view-r .view-bt-wrap{display:flex; justify-content:flex-end;} .view-modal .view-wrap .view-r .view-bt-wrap button{display:flex; align-items:center; font-size:12px; padding:4px 8px;} .view-modal .view-wrap .view-r .view-bt-wrap button+button{margin:0 0 0 4px;} .view-modal .view-wrap .view-r .view-bt-wrap button:hover{background:#c5001e; border-color:#c5001e;} .view-modal .view-wrap .view-r .view-bt-wrap button i{font-size:16px; margin:0 2px 0 0;} .view-modal .view-wrap .view-r h2{font-size:22px; font-weight:500; color:#333; line-height:1.2; height:calc(2.4em + 14px); overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; border-top:1px solid #555; padding:14px 0 0; margin:14px 0 0;} */ .view-modal .view-wrap .view-r .tree-addr-wrap{display:flex; flex-direction:column;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr{display:flex; align-items:baseline;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr+.tree-addr{margin:12px 0 0;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr .tree-badge{flex-shrink:0;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr .tree-badge strong{width:44px; height:24px; display:flex; justify-content:center; align-items:center; font-size:12px; font-weight:400; color:#555; border:1px solid #aaa; position:relative; margin:0 8px 0 0;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr .tree-badge button{display:none;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr h2{font-size:16px; font-weight:400; line-height:1.4; color:#333; margin:0;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr h2 span{vertical-align:text-top; margin: 0 0 0 2px;} .view-modal .view-wrap .view-r .tree-addr-wrap .tree-addr h2 span button{font-size:11px; font-weight:400; color:#fff; background:#006ac5; padding:4px 7px 5px;} .view-modal .view-wrap .view-r .view-info{flex-grow:1; border:1px solid #006ac5; border-width:1px 0 0; padding:20px 0 0; margin:13px 0 0;} .view-modal .view-wrap .view-r .view-info dl{display:flex; align-items:center;} .view-modal .view-wrap .view-r .view-info dl+dl{margin:24px 0 0;} .view-modal .view-wrap .view-r .view-info dl dt, .view-modal .view-wrap .view-r .view-info dl dd{line-height:1;} .view-modal .view-wrap .view-r .view-info dl dt{flex-basis:124px; font-size:17px; font-weight:400; color:#333;} .view-modal .view-wrap .view-r .view-info dl dd{font-size:17px; font-weight:500; color:#333;} .view-modal .view-wrap .view-r .view-info dl dd strong{font-weight:700; color:#111;} .view-modal .view-wrap .view-r .view-bt-wrap{} .view-modal .view-wrap .view-r .view-bt-wrap ul{display:flex; justify-content:center; background:#eee; border-radius:8px; padding:10px 26px;} .view-modal .view-wrap .view-r .view-bt-wrap ul li{width:20%;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a{display:flex; flex-direction:column; align-items:center;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a:hover strong{border:1px solid #c5001e;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a:hover strong i{color:#c5001e;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a:hover p{color:#c5001e;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a.on strong{background:#c5001e; border:1px solid #c5001e;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a.on strong i{color:#fff;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a.on p{color:#c5001e;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a strong{width:42px; height:42px; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #ddd; border-radius:50px;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a strong i{font-size:22px; color:#333;} .view-modal .view-wrap .view-r .view-bt-wrap ul li a p{font-size:13px; font-weight:400; line-height:1.25; color:#454545; text-align:center; margin:8px 0 0;} .view-modal .view-wrap .view-r p.img-copyright{display:block; font-size:13px; color:#777; border:1px solid #bbb; border-width:0 0 1px; padding:0 0 6px; margin:0 0 13px;} /* .view-modal .slider-for .slick-prev, .view-modal .slider-for .slick-next{z-index:100;} .view-modal .slider-for .slick-prev{left:10px;} .view-modal .slider-for .slick-next{right:10px;} .view-modal .slider-for .slick-prev:before, .view-modal .slider-for .slick-next:before{font-size:16px; color:#555;} .view-modal .slider-for .slick-dots{bottom:10px;} .view-modal .slider-for .slick-dots li{width:16px; height:16px; margin:0 2px;} .view-modal .slider-for .slick-dots li button{width:16px; height:16px;} .view-modal .slider-for .slick-dots li button:before{content:""; top:50%; left:50%; transform:translate(-50%, -50%); width:6px; height:6px; background:#000; border-radius:50%;} */ /* MAP - 길찾기 */ #map-direction{} #map-direction .direction-close{width:42px; height:42px; background:#fff; border:1px solid rgba(0,0,0,0.175); border-width: 1px 1px 1px 0; font-size:22px; line-height:1; color:#333; position:absolute; top:20px; right:-42px;} #map-direction{/*height:185px;*/ height:140px; border-radius:0 0 8px 8px; z-index:9999;} .direction-input-wrap{width:calc(100% - 20px); display:flex; flex-direction:column; margin:10px auto;} .direction-input-wrap .direction-input{display:flex;} .direction-input-wrap .direction-input input{flex-grow:1; font-size:15px; background:#f5f5f5; border-radius:8px; padding:4px 10px;} .direction-input-wrap .direction-input button{width:44px; height:44px; display:flex; justify-content:center; align-items:center; padding:0 0 0 10px;} .direction-input-wrap .direction-input button i{font-size:18px; color:#555; transform:rotate(90deg);} .direction-input-wrap .direction-input.direction-start{} .direction-input-wrap .direction-input.direction-start i{font-size:24px;} .direction-input-wrap .direction-input.direction-goal{margin:6px 0 0;} .direction-input-wrap ul{width:calc(100%); display:flex; margin:18px 0 8px;} .direction-input-wrap ul li{width:33.33%; background:#fff;} .direction-input-wrap ul li+li{border-left:1px solid #e3e3e3;} .direction-input-wrap ul li a{display:flex; flex-direction:column; justify-content:center; align-items:center;} .direction-input-wrap ul li a img{height:26px;} .direction-input-wrap ul li a p{font-size:12px; font-weight:400; line-height:1; color:#333; margin:6px 0 0;} /* 마이페이지 */ .my-title{font-size:28px; font-weight:700; line-height:1; color:#111; text-align:center; margin:120px auto 40px;} .my-wrap{min-height:calc(100vh - 573px); background:#fff; margin:0 auto 80px;} .my-wrap .my-tab{display:flex;} .my-wrap .my-tab li{flex-basis:0; flex-grow:1; text-align:center;} .my-wrap .my-tab li+li{border-left:1px solid #fff;} .my-wrap .my-tab li a{height:52px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:400; line-height:1; color:#222; border:none; border-radius:0; background:#eceef1;} .my-wrap .my-tab li a.active{background:#fff; border-top:1px solid #c5001e;} .my-wrap .my-content{padding:60px 40px;} .my-wrap .my-content .form-area{width:418px; margin:auto;} .my-wrap .my-content .form-area hr{margin:32px auto 32px;} .my-wrap .my-content .form-area h5{font-size:17px; font-weight:700; line-height:1.2; color:#000; text-align:center; margin:20px 0 0;} .my-wrap .my-content .payService{background:#f2f4f7; border-radius:8px; padding:1em 1.25em; margin:10px 0 0;} .my-wrap .my-content .payService ul{display:flex; flex-direction:column;} .my-wrap .my-content .payService ul li{display:flex; align-items:baseline; font-size:14px; font-weight:400; color:#333;} .my-wrap .my-content .payService ul li+li{margin:12px 0 0;} .my-wrap .my-content .payService ul li:before{content:"-"; display:inline; margin:0 6px 0 0;} .my-wrap .my-content .payService ul li strong{font-weight:700;} .my-wrap .my-content .member-time{border:1px solid #ccc; border-radius:8px; padding:1em 1.5em; margin:0;} .my-wrap .my-content .member-time dl{display:flex;} .my-wrap .my-content .member-time dl+dl{margin:22px 0 0;} .my-wrap .my-content .member-time dl dt, .my-wrap .my-content .member-time dl dd{white-space:nowrap;} .my-wrap .my-content .member-time dl dt{flex:1; margin:0;} .my-wrap .my-content .member-time dl dd{font-weight:700;} .my-wrap .my-content .member-time b{color:#c5001e;} .my-wrap .my-content .payTime{display:flex;} .my-wrap .my-content .payTime label{width:49%; border:1px solid #ccc; border-radius:8px; padding:1em 1.5em; margin:0;} .my-wrap .my-content .payTime label+label{margin:0 0 0 2%;} .my-wrap .my-content .payTime label.active{border:1px solid #c5001e;} .my-wrap .my-content .payTime label .form-check{margin:0;} .my-wrap .my-content .payTime label .form-check-input{} .my-wrap .my-content .payTime label h4{display:inline-block; font-size:18px; line-height:1; margin:0;} .my-wrap .my-content .payTime label p{display:inline-block; float:right; font-size:18px; line-height:1; color:#333;} .my-wrap .my-content .paySelect{border:1px solid #ddd; border-radius:8px; overflow:hidden;} .my-wrap .my-content .paySelect .card{border:none; border-radius:0;} .my-wrap .my-content .paySelect .card+.card{border-top:1px solid #ddd;} .my-wrap .my-content .paySelect .card > label{padding:1em 1.5em;} .my-wrap .my-content .paySelect .card > label h4{font-size:16px; margin:0;} .my-wrap .my-content .paySelect .card > label .form-check{margin:0;} .my-wrap .my-content .paySelect .card > label .form-check-input{margin-top:0.1em;} .my-wrap .my-content .paySelect .card .collapse{padding:1em 1.5em;} .my-wrap .my-content .paySelect .card .collapse label{font-size:13px; flex-basis:160px;} .my-wrap .my-content .refund-area{font-size:12px; font-weight:400; line-height:1.45; color:#555;} .my-wrap .my-content .refund-area .refund-area-box{margin:20px 0 0;} .my-wrap .my-content .refund-area .refund-area-box+.refund-area-box{margin:14px 0 0;} .my-wrap .my-content .refund-area strong{display:block; font-size:13px; font-weight:700; color:#222; margin:0 0 1px;} .my-wrap .my-content .refund-area ul{} .my-wrap .my-content .refund-area ul li{display:block; text-indent:-10px; padding-left:10px;} .my-wrap .my-content .refund-area ul li span{width:3px; height:3px; display:inline-block; background:#555; border-radius:50px; margin:0 6px 3px 0;} .my-wrap .my-content .refund-area ul li b{font-weight:500; color:#333;} .my-wrap .my-content .refund-area p{margin:10px 0 0;} /* 마이페이지 - NAV */ .my-content-nav-wrap{display:flex; justify-content:center; margin:0 0 40px;} .my-content-nav-wrap .my-content-nav{display:flex; border-bottom:1px solid #ddd;} .my-content-nav-wrap .my-content-nav li{} .my-content-nav-wrap .my-content-nav li a{display:block; font-size:14px; font-weight:400; line-height:1; color:#555; padding:12px 28px;} .my-content-nav-wrap .my-content-nav li a.active{position:relative;} .my-content-nav-wrap .my-content-nav li a.active:before{content:""; width:100%; display:block; position:absolute; left:0; bottom:-1px; border-bottom:1px solid #c5001e;} /* 마이페이지 - TABLE */ .my-wrap .my-content .table-header{margin:0 0 12px;} .my-wrap .my-content .table-header:after{content:""; display:block; clear:both;} .my-wrap .my-content .table-header .table-header-l{float:left;} .my-wrap .my-content .table-header .table-header-l button{font-size:13px;} .my-wrap .my-content .table-header-r{float:right;} .my-wrap .my-content .table-header-r .form-select{font-size:13px;} .my-wrap .my-content .table-header-r .form-select:hover{border:1px solid #c5001e;} .my-wrap .my-content .table-header-r button.btn-type01{font-size:14px; color:#fff; background:#c5001e;} .my-wrap .my-content .table-header-r button.btn-type02{font-size:14px; color:#c5001e; border:1px solid #c5001e;} .my-wrap .my-content .table-header-r .btn-md{font-size:14px;} .my-wrap .my-content .my-table{border-top:1px solid #555;} .my-wrap .my-content .my-table thead{} .my-wrap .my-content .my-table thead th{background:#f5f5f5;} .my-wrap .my-content .my-table tbody{} .my-wrap .my-content .my-table tr{} .my-wrap .my-content .my-table tr th, .my-wrap .my-content .my-table tr td{height:; vertical-align:middle; text-align:center; border-bottom:1px solid #e5e5e5;} .my-wrap .my-content .my-table tr th{font-size:14px; font-weight:500; color:#000;} .my-wrap .my-content .my-table tr td{font-size:15px; font-weight:400; color:#333; padding:0.8rem 0.5rem;} .my-wrap .my-content .my-table .form-check{min-height:auto; margin-bottom:0;} .my-wrap .my-content .my-table .form-check input{width:15px; height:15px;} .add-line-wrap{} .add-line{} .add-line+.add-line{margin:6px 0 0;} .add-line p{display:inline-block; cursor:pointer;} .add-line p strong{display:inline-block; font-size:12px; line-height:1; border:1px solid #ddd; padding:4px 6px 5px; margin:0 4px 0 0;} .add-line span{vertical-align:text-top; margin:0 0 0 2px;} .add-line span button{font-size:11px; font-weight:400; color:#fff; background:#006ac5; padding:2px 5px 3px;} .my-wrap .my-content .my-table-tool{font-size:13px; line-height:1; padding:5px 10px; border-radius:4px;} .my-wrap .my-content .my-table-tool.my-table-tool01{background:#fff2d6; color:#ffab00;} .my-wrap .my-content .my-table-tool.my-table-tool02{background:#d7f5fc; color:#03c3ec;} .my-wrap .my-content .list-del{font-size:20px; line-height:1; color:#666;} .my-wrap .my-content .noData{padding:80px 0;} /* 마이페이지 - 글쓰기 */ .write-wrap{} .write-wrap .qna_guide{display:block; font-size:22px; font-weight:500; line-height:1.25; color:#333; text-align:center; word-break:keep-all; margin:10px auto 40px;} .write-wrap dl{display:flex; align-items:center; border-top:1px solid #ddd;} .write-wrap dl:last-of-type{border-bottom:1px solid #ddd;} .write-wrap dl+dl{} .write-wrap dl dt, .write-wrap dl dd{padding:16px 16px;} .write-wrap dl dt{flex:0 0 180px; font-size:15px; font-weight:500; line-height:1; color:#454545;} .write-wrap dl dd{flex-grow:1; color:#222;} .write-wrap dl dd input[type="text"], .write-wrap dl dd input[type="number"]{width:100%; height:44px; border:1px solid #ddd; border-radius:6px; padding:0 16px;} .write-wrap dl dd input[type="file"]{width:auto; height:auto; border:none; padding:0;} .write-wrap dl dd textarea{width:100%; height:220px; resize:none; border:1px solid #ddd; padding:16px;} .write-wrap .write-complete{display:block; margin:40px auto 0;} /* 마이페이지 - 뷰 */ .qna-v-title{} .qna-v-title dt{} .qna-v-title dd{} .qna-v-title strong{display:block; font-size:16px; font-weight:500; line-height:1.4; color:#222; margin:0 0 12px;} .qna-v-title p{display:block; font-size:16px; font-weight:400; line-height:1.4; color:#555;} /*회원가입*/ #joinform{ visibility:hidden; height:0px; } #joinform.open, #joinform.social_open{ visibility:visible; height:auto; } #joinform.social_open #join_id{ pointer-events: none; background:#ddd; } #joinform.social_open #dl_join_pw{ display:none; } .noborder{ border:0; } /*자동완성*/ .ui-autocomplete{ max-width:340px; z-index:10004;} /**/ .area_list_wrap { display:none; position: absolute; top: 80px; left: 50%; width:378px; transform: translate(-50%, 0); border: 1px solid rgba(0,0,0,.2); background-clip: padding-box; background-color: #fff; white-space: normal; } .area_list_wrap::before { position: absolute; top: -10px; left: 50%; margin-left: -10px; border-right: 10px solid transparent; border-bottom: 10px solid rgba(0,0,0,0.25); border-left: 10px solid transparent; content: ""; } .area_list_wrap::after { position: absolute; top: -9px; left: 50%; margin-left: -9px; border-right: 9px solid transparent; border-bottom: 9px solid rgba(255,255,255,1); border-left: 9px solid transparent; content: ""; } .area_list--district { overflow-y: auto; max-height: 430px; } .area_list--district .area_item { display: block; float: left; width: 33.3%; height: 40px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; letter-spacing: -1px; } .area_list--district .area_item:nth-child(3n) { border-right: 0 } .area_list--district .radio_label_district { font-size: 13px; line-height: 18px; letter-spacing: -0.4px; display: inline-block; width: 100%; height: 100%; padding: 6px 0 4px 13px; } .area_list--district .radio_label_district::before { display: inline-block; height: 100%; vertical-align: middle; content: ""; } .area_list--district .radio_label_district:hover, .area_list--district .radio_label_district:focus { background-color: #fafafa } /**/ .tree_marker{position:absolute; left:50%; top:50%;} .tree_marker img{transform:translate(-50%, -50%);} .tree_active:before{ display:block; content:''; width: 102px; height: 52px; background:#f508083d; border-radius:50%; cursor: pointer; cursor: pointer; position: absolute; margin-left: -51px; margin-top: 0px; } /* 페이징 */ .pagination{display:flex; justify-content:center; margin:;} .pagination ul { display: inline-block; *display: inline; margin-bottom: 0; margin-left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; *zoom: 1; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .pagination ul > li { display: inline; } .pagination ul > li > a, .pagination ul > li > span { float: left; padding: 5px 12px; font-size:13px; line-height: 20px; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; border-left-width: 0; } .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span { background-color: #f5f5f5; } .pagination ul > .active > a, .pagination ul > .active > span { color: #999999; cursor: default; } .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus { color: #999999; cursor: default; background-color: transparent; } .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topleft: 4px; } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; } .pagination ul > li > a > i{font-size:10px;} .pagination-centered { text-align: center; } .pagination-right { text-align: right; } .pagination-large ul > li > a, .pagination-large ul > li > span { padding: 11px 19px; font-size: 17.5px; } .pagination-large ul > li:first-child > a, .pagination-large ul > li:first-child > span { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-topleft: 6px; } .pagination-large ul > li:last-child > a, .pagination-large ul > li:last-child > span { -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; } .pagination-mini ul > li:first-child > a, .pagination-small ul > li:first-child > a, .pagination-mini ul > li:first-child > span, .pagination-small ul > li:first-child > span { -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-topleft: 3px; } .pagination-mini ul > li:last-child > a, .pagination-small ul > li:last-child > a, .pagination-mini ul > li:last-child > span, .pagination-small ul > li:last-child > span { -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; } .pagination-small ul > li > a, .pagination-small ul > li > span { padding: 2px 10px; font-size: 11.9px; } .pagination-mini ul > li > a, .pagination-mini ul > li > span { padding: 0 6px; font-size: 10.5px; } /* 약관, 정책 */ .document-wrap{} .document-wrap strong{font-weight:500;}