.d_clear{clear:both} /*pc*/ @media all and (min-width:1200px) { body.scroll #header .bg{opacity:1;transition:.5s; } .d_container{margin:0 auto; max-width:1400px;} body.pc{min-width:1200px} /* body.scroll #header .bg{background:#414141;opacity:1;transition:.5s}*/ body.scroll #hs1{display:none;} #header{position:fixed; top:0; z-index:999;width:100%; max-width:2000px; margin:0 auto; background:#ffffff; border-bottom: 1px solid #eee;/* -webkit-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3); box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3); */} #header .bg{position:absolute;left:0;top:0;width:100%;height:100%; transition:0.5s; opacity:0; background:#ffffff} body.lnb_over #header .bg{border-bottom:1px solid #dcdcdc; opacity:1; } body.lnb_over #header .bg{transition:0.5s} #hs00 {height: 30px; line-height: 30px; background: #f8f9fa; position: relative;} #hs00 a {background: #2889ca; display: block; height: 30px; width: 70px; text-align: center; color: #fff; float: right;} #hs0 {height: 120px; font-family: 'Noto Sans KR', sans-serif; padding-top: 15px;} #hs0 .util_area {display: flex; justify-content: space-between; align-items: center;} /* #hs0 #util_gnb {overflow:hidden;} */ #hs0 .util_area #util_gnb ul {float: right;} #hs0 .util_area #util_gnb ul li {display: inline-block; position:relative;} #hs0 .util_area #util_gnb ul li a {color: #333; padding: 20px 8px;} h1.logo {width: 28%; float: left;} h1.logo a {width: 100%; height: 100%; display: block;} #hs1{position:relative; overflow:hidden; display:none} body.lnb_over #hs1{background:#2f3438 } #hs1 .d_container{position:relative; border:1px solid #dcdcdc; border-color:rgba(255,255,255,0.3); border-width:0 0 0 1px;} #d_gnb{overflow:hidden;} #d_gnb li{display:block; float:left; font-size:0.9em; font-weight:500; color:#ccc; position:relative;} #d_gnb li.d2 span{display:inline-block; margin-right:20px;} #d_gnb li.d2 span img{width:18px; margin-right:10px;} #d_gnb li.d3{padding-right:20px;} #d_gnb li.d4{margin-left:0; padding-left:0; border-left:0;} #d_gnb li.d4 a{background:#ffa60a; padding:10px 20px; color:#ffffff; } #d_gnb li.d4 a:before{font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f2bb"; color:#ffffff; padding-right:10px} /*#d_gnb li span:before{font-family:'FontAwesome'; color:#ccc; font-size:18px; content:'\f0ac'; padding-right:10px;}*/ #d_gnb li a{display:block;height:100%;text-align:center; color:#ccc; font-size:14px; border-right:1px solid #dcdcdc; border-color:rgba(255,255,255,0.3); } #d_gnb li a{position:relative; display:block; padding:13px 25px} #d_gnb li:first-child a{padding-left:50px;} #hs2{/*background:#fff;*/ position:relative; width:100%; border-top: 1px solid #eee;} .mobile_logo {display: none;} #d_lnb_bg{position:absolute;left:0;top:99px; width:100%; background:#ffffff; height:0;overflow:visible !important; z-index:0; } body.lnb_over #d_lnb_bg{background:#ffffff; border-bottom:1px solid #dcdcdc;} #d_lnb_bg .shadow{position:absolute;left:0;width:100%;height:15px;bottom:-15px;display:none} #d_lnb_bg > .d_container{overflow:hidden;height:100%} #d_lnb_bg .thumb{padding:40px 40px} /*body.lnb_over #d_lnb_bg{min-height:180px}*/ body.lnb_over #d_lnb_bg .shadow{display:block} body.lnb_over #header{background:#ffffff; } #d_lnb_btn{display:none} #d_lnb{width:72%; height:100px; float: right;} #d_lnb ul{position:relative;} #d_lnb > ul > li{position:relative;float:left;} #d_lnb > ul > li { width:16%; max-width:266px} #d_lnb > ul > li > a:before{content:''; position:absolute; bottom:10px; left:50%; width:0; height:4px; background:#124184; transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1)} #d_lnb > ul > li:hover > a:before{width:60px; margin-left:-30px;} #d_lnb > ul > li > a{display:block; font-size: calc(0.26vw + 17.08px); font-weight:700; line-height:100px; text-align:center; padding-left:0px; text-transform:uppercase; color:#333333} body.scroll #d_lnb li > a, body.lnb_over #d_lnb li > a{color:#323232} #d_lnb li > a:hover, #d_lnb li.on > a{font-weight:600; transition:.3s; color:#124184 !important; position:relative;} #d_lnb li.on .sub{} #d_lnb li .sub{position:absolute;width:100%; height:0;overflow:hidden;} /* #d_lnb li .sub dl{padding-top:10px} */ /* #d_lnb li.tail{float:right; text-align:right; width:20%; max-width:100%; overflow:hidden;} #d_lnb li.tail a{display:block; float:left; font-size:14px; font-weight:normal; color:#808080 !important; line-height:100px; height:100px; position:relative;} #d_lnb li.tali:hover > a:before{color:inherit; font-weight:normal; margin-left:0; transition:none} #d_lnb li.tail a:before{display:none} #d_lnb li.tail a.g3{width:50%; background:#22b14c; color:#ffffff !important; font-family:'jn'; line-height:100%; text-align:left; font-size:13px; line-height:1.2; padding-left:10px; padding-top:35px} #d_lnb li.tail a.g1:before{background:url("../img/g01.png") no-repeat center center} #d_lnb li.tail a.g2:before{background:url("../img/g02.png") no-repeat center center} #d_lnb li.tail a.g3:before{display:block; content:''; width:25px; height:25px; position:absolute; left:auto; right:10px; top:10px; background-size:100% !important; background:url("../img/g03.png") no-repeat center center} #d_lnb li.tail a:hover{} #d_lnb li.tail a.lnb_contact{text-align:right; padding-right:15px; margin-right:10px; position:relative; display:inline-block; font-size:13px} #d_lnb li.tail a.lnb_contact:after{content:''; position:absolute; width:1px; height:10px; background:#ffffff; top:0; bottom:0; right:0; margin:auto} body.scroll #d_lnb li.tail a.lnb_contact:after, body.lnb_over #d_lnb li.tail a.lnb_contact:after{background:#dcdcdc} #d_lnb li.tail a span{border-bottom:1px solid #36c2f1} */ #d_lnb li .sub dl{padding-top:10px; height: 225px; transition: all 300ms cubic-bezier(1, 0, 0, 1); } #d_lnb li .sub dd { position: relative;margin: 10px 0 0;line-height: 18px;text-align: left;} #d_lnb li .sub dd a:hover::before, #d_lnb li .sub dd a:focus::before {position:absolute;right: 0px;top: -10px;width: 32px;height: 28px;background: url("https://www.changwon.go.kr/mom/images/gnb_on.png") no-repeat center;background-size: 100%;content: "";/* display: block; *//* z-index: 99999; */} #d_lnb li .sub dd:first-child {margin-top:0;} #d_lnb li .sub dd a{transition: all .3s;display:block;position: relative;padding:4px 0 4px 10px;font-size:14px;color:#323232; line-height:25px; ;text-align:center;} #d_lnb li .sub dd::before {display:block; content: ""; position: absolute; top: 50%;z-index:-1;left: 0;width: 3px;height: 3px;background: #3d454f;border-radius: 50%;transition: all .3s;transform: translateY(-50%);} #d_lnb li .sub dd a::after { content: '';position: absolute;bottom: 0;z-index: 0;left: 50%;width: 0px;height: 6px;background: #f6dda4;border-radius: 10px;transition: all .3s;} #d_lnb li .sub dd a:hover, #d_lnb li .sub dd a:focus {color: #000;} #d_lnb li .sub dd a:hover::after, #d_lnb li .sub dd a:focus::after {right: 0;left: 10px;width: 100%;max-width: 141px;} #d_lnb li .sub dd a{display:block;padding:4px 0;font-size:14px;color:#323232; line-height:25px; ;text-align:center;} #d_lnb li .sub dd a:hover{color:#124184; font-weight:500;} #d_lnb li .sub dd a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;} #d_lnb_mask{display:none} .tail .lag{display:inline-block; color:#ffffff; position:relative; min-width:70px; line-height:50px; height:50px; vertical-align:top; border-bottom:2px solid #2797ff; margin-top:20px} .tail .lag li{float:none !important; width:100% !important} .tail .dropbtn {background:none; width:100%; text-align:left; border:none; display:inline-block; height:auto; position:relative; color:#ffffff; font-size:13px; font-weight:700; line-height:30px;} .tail .dropbtn:after{font-family:'FontAwesome'; content:'\f078'; position:absolute; right:10px; color:#ffffff; font-size:8px; line-height:30px;} body.lnb_over #d_lnb li.tail .dropbtn, body.scroll #d_lnb li.tail .dropbtn{color:#ffa60a} body.lnb_over #d_lnb li.tail .dropbtn:after, body.scroll #d_lnb li.tail .dropbtn:after{color:#ffa60a !Important} .tail .dropmenu {display: none; width:100%; position: absolute; z-index: 5; border-width:0 1px 1px 1px; margin-top:-1px} .tail .dropmenu a {display:block; color:inherit; font-size:14px !important; line-height:30px !Important; } .tail .dropmenu.show {display:block;} .tail .dropmenu ul{background:#ffa60a; } .tail .dropmenu ul li{padding:5px 0px; font-size:0.9em; cursor: pointer; color:#ffffff; text-align:left; line-height:32px;} .tail .dropmenu ul li:hover a{color:#ffffff !important} body.scroll #d_lnb li.tail .dropmenu ul li a, body.lnb_over #d_lnb li.tail .dropmenu ul li a{color:#ffffff !important} /* sns 아이콘 */ #d_lnb > ul > li.tail {width: 12%; margin-top: 32px;} #d_lnb > ul > li.tail li.sns_icon {width: 50px; float: left;} } @media all and (min-width:1400px) { #d_lnb > ul > li{width:16%; margin-left: 9px;} #d_lnb li .sub dd a{font-size:18px; font-weight: 400;} #d_lnb li.tail a.g3{font-size:18px; padding-top:25px;} } /*mobile*/ @media all and (max-width:1199px) { .bikeinfowrap {display: none;} #header{position:fixed;z-index:9999;width:100%;height:65px; top:0; min-width:320px;} #header .bg{position:absolute;left:0;top:0;width:100%;height:100%;opacity:1;transition:.5s} #hs00 {display: none;} #hs0 {display: none;} #hs2 h1 span{display:none} body.mo{} body.lnb_on{overflow:hidden} body.lnb_on #d_lnb_mask{position:fixed;left:0;top:0;width:100%;height:100%;z-index:990; background:rgba(0,0,0,0.4)} .mobile_logo {display: block;} #d_gnb{position:fixed;right:-100%;top:0;height:0px;width:100%; max-width:420px; z-index:991;text-align:center;} #d_gnb ul{ background:#393939; overflow:hidden;} #d_gnb li{ position:relative; width:10%; float:left; font-weight:600; height:70px; line-height:70px; padding: 10px 0 0 7px } #d_gnb li a{display:block; width:100%; height:100%; font-weight:600; color:#ffffff !important; text-transform:uppercase} /* #d_gnb li a:before{ display:inline-block; vertical-align:middle; content:''; width:25px; height:25px; margin-right:10px; background-size:100% !important; } */ /* 본인인증버튼 (모바일) */ li.myreservation_btn {width: 84px !important;text-align: center;height: 50px !important;line-height: 50px !important;margin-left: 10px;} li.myreservation_btn a {display: block;background: #3d7db7;border-radius: 4px;line-height: 40px;} #d_gnb li.d1 a:before{background:url("../img/g01_w.png") no-repeat center center} #d_gnb li.d2 a:before{background:url("../img/g02_w.png") no-repeat center center} #d_gnb li.d3 {display:none} #d_gnb li a{color:#ffffff; display:block;} #d_gnb li:last-child a{border-right:0} #d_gnb ul{background:#ffffff} #d_gnb li.d2{background:#ffffff} #d_gnb .close{position:absolute;right:0px;top:0px;width:70px;height:70px;cursor:pointer; background:#3d4144} #d_gnb .close span{display:inline-block; position:absolute; top:55%; right:5px;} #d_gnb .close span:before, #d_gnb .close span:after{content:''; display:inline-block; width:45px; height:4px; background:#ffffff; position:absolute; right:10px; border-radius:5px} #d_gnb .close span:after{top:-11px} #d_gnb .close span:before { -webkit-transform: translateX(4px) translateY(-5px) rotate(45deg); -moz-transform: translateX(4px) translateY(-5px) rotate(45deg); -ms-transform: translateX(4px) translateY(-5px) rotate(45deg); -o-transform: translateX(4px) translateY(-5px) rotate(45deg); transform: translateX(4px) translateY(-5px) rotate(45deg); } #d_gnb .close span:after { -webkit-transform: translateX(4px) translateY(6px) rotate(-45deg); -moz-transform: translateX(4px) translateY(6px) rotate(-45deg); -ms-transform: translateX(4px) translateY(6px) rotate(-45deg); -o-transform: translateX(4px) translateY(6px) rotate(-45deg); transform: translateX(4px) translateY(6px) rotate(-45deg); } #hs2{position:relative;background:#ffffff ; height:70px; -webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3); box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3); } #hs2 h1{text-align:left; display:inline-block; padding:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #hs2 h1 a{display:block; } /*body.scroll #hs2 h1 a, body.lnb_over #hs2 h1 a{background:url(../img/logo_b.png) no-repeat center center !important; background-size:100% !important}*/ #hs2 h1 a img {max-width:120px; margin-left:3%; transform: scale(1.5);} #d_lnb_bg{display:none} #d_lnb_btn{position:absolute;right:0%;top:0px;cursor:pointer; padding:0 20px; padding-top:21px; height:100%} #d_lnb{position:fixed;right:-100%;top:70px;width:100%; max-width:420px; height:100%;overflow:auto;background:#ffffff;z-index:991} #d_lnb h2{position:relative;text-align:center;color:#333;padding:20px 0;border-bottom:1px solid #c8c8c8} #d_lnb h2 .close{position:absolute;right:10px;top:10px;cursor:pointer} #d_lnb h2 .close img {max-width:65px;} #d_lnb ul{height:100%;overflow:auto; text-align:left; background:#ffffff;} #d_lnb li > a{ display:block;padding:17px 30px; font-size:19px; font-weight:600; color:#323232; position:relative; border-bottom:1px solid #e6e6e6} #d_lnb li > a i{display:block; position:absolute; right:20px; width:30px; height:30px; border:1px solid #193389; top:0; bottom:0; margin:auto} #d_lnb li > a i:before, #d_lnb li > a i:after{content:''; display:block; width:15px; height:1px; border-radius:100px; background:#193389; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto} #d_lnb li > a i:after{width:1px; height:15px} #d_lnb li.on > a i {background:#193389; border-color:#193389} #d_lnb li.on > a i:after {content:''; display:none;} #d_lnb li.on > a i:before, #d_lnb li.on > a i:after{background:#ffffff} #d_lnb li > a:before{content:''; position:absolute; top:0; bottom:0; right:0px; margin:auto; background:#ffffff; width:6px; height:6px; border-radius:500px; margin-right:20px; } #d_lnb li.on > a{color:#124184; font-weight:600; position:relative;} /*#d_lnb li.on > a:after{content:''; position:absolute; top:0; bottom:0; right:0px; margin:auto; margin-right:20px; transition:0.5s; width:6px; height:6px; border-radius:500px; background:#051444}*/ #d_lnb li.on > a:before{display:none } #d_lnb li.tail a:before, #d_lnb li.tail a:after{display:none;} #d_lnb li.tail a.g1, #d_lnb li.tail a.g2{display:none} #d_lnb li.tail a.g3{display:block; font-size:17px; font-weight:normal; font-family:'jn'; background:#23b14d; color:#ffffff; border-bottom:0px; position:relative} #d_lnb li.tail a.g3:before{display:block; content:''; border-radius:0; width:40px; height:40px; position:absolute; left:auto; right:0px; top:0px; background-size:100% !important; background:url("../img/g03.png") no-repeat center center} #d_lnb li .sub{background:#f8f8f8; height:0;display:none} #d_lnb li.on .sub{display:block;height:auto !important; padding:10px 0px; border-bottom:1px solid #e6e6e6; } #d_lnb li .sub dl{position:relative;} #d_lnb li .sub dd a{display:block;padding:0px 30px; line-height:45px; font-size:17px; } #d_lnb li .sub dd a:hover{font-weight:500; color:#193389} .icon-bar {display: block; margin-top: 4px; width: 30px;height: 4px; background: #4a4646; border-radius:5px} #d_lnb li.lag{display:none} /* body.scroll .icon-bar {background: #ffffff;} */ /* sns 아이콘 */ #d_lnb > ul > li.tail {display: none;} } @media all and (max-width: 440px) { #hs2 h1 {left: 25%;} #hs2 h1 a img { transform: scale(1.3);} } /*모바일 메뉴*/ .mo_bottom_menu{position:fixed; bottom:0; left:0; right:0; z-index:100; min-width:300px; max-width:1200px; height:85px; background:#0a4088;/* filter: drop-shadow(6px 3px 8px #ccc); */ color: #fff;} .mo_bottom_menu ul{padding:7px 3%; text-align:center; overflow:hidden} .mo_bottom_menu ul li{float:left; width:25%; font-size:0.9em} .mo_bottom_menu ul li img{width:100%; max-width:42px; transition:all 0.3s;} .mo_bottom_menu ul li a{font-weight: 500; display:block;} .mo_bottom_menu ul li span{display:block; margin-top: 5px;} /*body.mainWrap .mo_bottom_menu{display:none}*/ @media all and (min-width:1200px) { .mo_bottom_menu{display:none} }