.dh-builder select, #form_preview select { background:url("/static/img/select.png") no-repeat; background-color:#fff; background-position: right 10px top 14px; background-size: 10px ; padding:6px 45px 6px 10px; width:auto; font-size:14px; text-align: left; color:#333; border: 1px solid #d5d5d5; border-radius:3px; -webkit-border-radius:3px; -webkit-appearance: none; cursor: pointer; outline:0; height: 34px } .dh-5 {position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px){ .dh-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;} } .recommendation{background:#ff2dd0; color:#fff;} :focus{outline: 0} @media (min-width: 767.98px) { .v-submenu-layout .content-block-edit{max-width: calc(100% - 170px);} } .dh-builder { width: 100%; height: 100%} .dh-builder > .wrapper{min-height: calc(100vh - 220px)} .right-btn-block-edit {width: auto; right:0; bottom: 0; position: fixed;text-align: right; } .right-btn-block-edit .right-btn-con{text-align: right; margin-right: 20px; margin-bottom: 20px; display: none; z-index: 999} .sp-block.right-btn-con .top-btn, .sp-block.right-btn-con .quick-btn { display: none } .sp-block.right-btn-con a { background: #a6a6a6; color: #fff; font-size: 20px; display: inline-block; width: 60px; height: 60px;border-radius: 30px; text-align: center; line-height: 60px } .right-btn-block-edit .m-right-btn{display: inline-block !important;} .pc-visible{display: none} .builder-header-height {display: none} .section.builder-footer, .section.builder-header{padding: 2px } .content-block-edit{width: 100%} body > .dh-builder .right-btn-block-edit{z-index: 999} @media (min-width: 768px){ .right-btn-block-edit .pc-right-btn{display: inline-block !important;} .right-btn-block-edit .m-right-btn{display: none !important} .pc-visible{display: block} .m-visible, .msection {display: none;} } .dh-builder .section-inner, .dh-builder .item-inner, .dh-builder .container, .dh-builder .block-width{position: relative} .button_box a{ display: flex; justify-content: center; align-items: center; width: 100%; height: auto; height: 70px; background-color: #295398; border-radius: 0px; color: #fff; font-size: 18px; font-weight: 600; } .button_box a:hover { color: #fff; font-size: 18px; text-decoration: none !important;} .button_box .sns-box {width: 30px; height: 30px; margin-right: 10px; } .button_box .icon-wrap{display: flex !important;} .section{position: relative} .section p{margin-bottom: 0} .section-inner .h-con{padding: 28px 15px} .section-inner .h-con .row, .footer1 .block-inner .h-con .row{align-items: flex-start} .item-h-con{position:relative;} .item-block[data-item-id="text"] .item-inner .item-h-con, .item-block[data-item-id="table"] .item-inner .item-h-con, .item-block[data-item-id="icon-box"] .item-inner .item-h-con, .item-block[data-item-id="quote5"] .item-inner .item-h-con, .item-block[data-item-id="line1"] .item-inner .item-h-con, .item-block[data-item-id="line2"] .item-inner .item-h-con{padding: 8px 0} .item-block[data-item-id="mouseover"] .tab-pane > .item-inner > .item-h-con, .item-block[data-item-id="item-slide"] .tab-pane > .item-inner > .item-h-con{padding: 25px 0} .pw-input .fa-eye-slash {font-size:18px; color:#ababab;} .pw-input .fa-eye {font-size:18px; color:#ababab;} .item-block[data-item-id="line1"] .item-h-con, .item-block[data-item-id="line2"] .item-h-con, .item-block[data-item-id="line3"] .item-h-con, .item-block[data-item-id="img"], .item-block[data-item-id="icon"] .item-h-con{font-size: 0} .sp-block.right-btn-con ul { list-style: none; padding-left: 0; margin-bottom: 0} .sp-block.right-btn-con .top-btn:not(button) { margin-top: 15px } .sp-block.right-btn-con .quick-btn li { margin-bottom: 15px} .sp-block.right-btn-con .quick-btn ul { display: none; } .sp-block.right-btn-con .quick-btn ul.active {display: block; } .sp-block.right-btn-con.active, .sp-block.right-btn-con.active .setting-con { border: 1px solid #A566FF; position: relative; padding: 5px } .sp-block.right-btn-con.active {border: 1px solid #4c7ff2; position: relative; padding: 5px} .sp-block.right-btn-con.active { padding-top: 30px } .sp-block.right-btn-con .setting-btn-con { display: none } .sp-block.right-btn-con.active .setting-btn-con { display: block } .sp-block.right-btn-con .setting-btn { background: #A566FF; color: #fff; border: none; float: left} .sp-block.right-btn-con .setting-btn.setting.right-btn{ background: #4c7ff2; color: #fff; border: none; float: left} .sp-block.right-btn-con .setting-btn-con:after { display: block; content: ""; clear: both} .sp-block.right-btn-con .setting-btn-con { position: absolute; top: 0; right: 0px } .frame-inner { width: 100%; } .dh-builder .section .bg-video { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; background: #000; } .dh-builder .section .bg-video .video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%;} .dh-builder .section .bg-video iframe { position: absolute; left: 0; width: 100%; height: 100%;} .dh-builder .section .section-inner .frame-inner { height: 100% } /*.section[data-block-type="frame"] .section-inner .frame-inner{overflow: hidden}*/ #editor .section[data-block-type="frame"] .section-inner .frame-inner{overflow: visible} .item-block img { width: auto; max-width: 100%; max-height: 100%} .item-block .wrap { display: inline-block } .item-block .img-wrapper, .item-block .img-wrapper a { display: inline-block;} .item-block .img-wrapper .img { width: 100%;} .item-block .line1 { border-top: 1px solid #ddd} .item-block .line2 { border-top: 1px dashed #ddd} .item-block .line-wrap{display: inline-block; width: 100%} .item-block .line-wrap .zigzag {position: relative;width: 100%; height: 1px; border: 0; color: #333; margin-top: 5px} .item-block .line-wrap .zigzag:before{content: ""; display: block; position: relative; height: 12px; background:linear-gradient( 45deg, transparent 26px, #333 27px, transparent 25px) 0 0, linear-gradient(-45deg, transparent 26px, #333 27px, transparent 25px) 0 0; background-repeat: repeat-x !important; background-size: 20px 28px !important; } .item-block .video-wrap {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden} .item-block .video-wrap iframe, .item-block .video-wrap object, item-block .video-wrap embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .social-wrap{display: inline-block} .item-block .social-wrap .social-icon {float: left; margin: 0 15px 15px 0 } .item-block .social-wrap .social-icon:last-of-type{margin-right: 0 !important} .item-block .social-wrap:after{content: ""; display: block; clear: both;} .item-block .social-wrap.social-s .social-icon {width: 30px; height: 30px; } .item-block .social-wrap.social-m .social-icon {width: 40px; height: 40px; } .item-block .social-wrap.social-l .social-icon {width: 50px; height: 50px; } .item-block .social-wrap.social-xl .social-icon {width: 60px; height: 60px; } .item-block .social-wrap.social-xxl .social-icon {width: 80px; height: 80px; } .item-block .table-wrap td{padding: 5px; border: 1px solid #5b5b5b; height: 33px} .item-block .table-wrap tr:nth-of-type(odd) td{background: #eeeeee} .item-block .table-wrap tr:nth-of-type(even) td{background: #fff} .item-block .map-wrap .map{width: 100%; height: 500px} .item-block .shape-wrap{display: inline-block; width: 100%; max-width: 500px;text-align: center;} .item-block .shape-wrap .shape1, .item-block .shape-wrap .shape2 {position: relative; padding-bottom: 100%; height: 0;overflow: hidden} .item-block .shape-wrap .shape1 .wrap, .item-block .shape-wrap .shape2 .wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%;display: table} .item-block .shape-wrap .shape-style .wrap{ background: #ddd; color: #333; } .item-block .shape-wrap .shape3 .wrap {padding: 15px 0; width: 100%} .item-block .shape-wrap .shape1{border-radius: 50%} .item-block .shape-wrap .shape1 .wrap .shape-text, .item-block .shape-wrap .shape2 .wrap .shape-text{display: table-cell; vertical-align: middle; } .item-block .shape-wrap .shape3 {position:relative} .item-block[data-item-id="shape1"] .item-h-con, .item-block[data-item-id="shape2"] .item-h-con, .item-block[data-item-id="shape3"] .item-h-con {padding:1px } .item-block .shape-wrap.shape-s{max-width: 100px} .item-block .shape-wrap.shape-m{max-width: 200px} .item-block .shape-wrap.shape-l{max-width: 300px} .item-block .shape-wrap.shape-xl{max-width: 400px} .item-block .shape-wrap.shape-xxl{max-width: 500px} .shape-inner{font-size: 0} .item-block .icon-wrap {display: inline-block} .item-block .icon-bg{padding: .4em; display: inline-block; } .item-block .icon-wrap .bg2.icon-bg{background: #ddd; } .item-block .icon-wrap .bg3.icon-bg{background: #ddd; border-radius: 5px} .item-block .icon-wrap .bg4.icon-bg{background: #ddd; border-radius: 50%} .item-block .icon-wrap .bg5.icon-bg{background: none; border: .1em solid #ddd} .item-block .icon-wrap .bg6.icon-bg{background: none; border: .1em solid #ddd; border-radius: 5px} .item-block .icon-wrap .bg7.icon-bg{background: none; border: .1em solid #ddd; border-radius: 50%} .item-block .icon-wrap i{color: #fff; display: block; width: 1em; height: 1em; position: relative} .item-block .icon-wrap i::before{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .item-block .icon-wrap .bg1 i, .item-block .icon-wrap .bg5 i, .item-block .icon-wrap .bg6 i, .item-block .icon-wrap .bg7 i{color: #333;} .item-block .icon-box {display: inline-flex; align-items: flex-start} .item-block .icon-box .icon {padding-right: 10px; order: 0; font-size: 0} .item-block .icon-box .text{min-width: 50px;} .item-block .icon-wrap.icon-s .icon-bg{font-size: 16px} .item-block .icon-wrap.icon-m .icon-bg{font-size:32px} .item-block .icon-wrap.icon-l .icon-bg{font-size:50px} .item-block .icon-wrap.icon-xl .icon-bg{font-size:100px} .item-block .icon-wrap.icon-xxl .icon-bg{font-size:200px} .item-block .icon-bg.bg1{padding: 5px} .e-btn {display: inline-block; background:#6c757d; border: 1px solid #6c757d; color: #fff; padding: 6px 20px; } .button-wrap .e-btn{margin: 0 15px 15px 0;} .e-btn:hover { background:#545b62; border-color: #545b62; color: #fff; text-decoration: none} .e-btn2{display: inline-block; background:#fff; border: 1px solid #545b62; color: #333; padding: 6px 20px; } .e-btn:hover { background:rgba(0, 0, 0, .2); border-color: #545b62; color: #333; text-decoration: none} .basicPage_btn{padding:6px 20px!important;} .button-wrap .e-btn{float: left} .item-block .button-wrap{display: inline-block} .item-block .button-wrap .e-btn:last-of-type{margin-right: 0} .item-block .button-wrap:after{content: ""; display: block; clear: both;} .item-block .location-wrap {display: flex; flex-wrap: wrap; align-items: center} .item-block .location-wrap .location-link {color:#333333} .item-block .location-wrap .location-link:hover{text-decoration: none} .item-block .location-wrap .location-now{display: inline-block; color: #747474 } .item-block .location-wrap .location-now:hover{text-decoration: none} .item-block[data-item-id='location1'] .location-wrap .fa-angle-right{padding: 0 10px; opacity: .8;} .item-block[data-item-id='location2'] .location-wrap .line{ font-size: .8em; opacity: .8; padding: 0 12px} .item-block[data-item-id='location3'] .location3 {border: 1px solid #ddd; display: flex; flex-wrap: wrap; align-items: center} .item-block[data-item-id='location3'] .location-wrap .location-link{ border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding: 0 8px; display: inline-block;} .item-block[data-item-id='location3'] .location-wrap .location3 > .location-link:first-of-type{border-left: none;} .item-block[data-item-id='location3'] .location-wrap .fa-angle-right{padding: 0 10px} .item-block[data-item-id='location3'] .location-wrap .location-now {border-left: 1px solid #ddd; padding: 0 8px} .item-block .bubble-wrap { position: relative;padding: 15px; margin: 0; background: #C4DEFF ; border-radius: 10px; width: 100%; } .item-block .bubble-after.bubble-left{ width: 0px; height: 0px; border-top: 20px solid #C4DEFF; border-bottom: 20px solid none; border-right: 20px solid transparent; border-left: 20px solid none; margin-left: 20px;} .item-block .bubble-after.bubble-right{width: 0px; height: 0px; border-top: 20px solid #C4DEFF; border-bottom: 20px solid none; border-right: 20px solid none; border-left: 20px solid transparent; margin-right: 20px; float: right;} .item-block .space{padding-top: 100px} .item-block .bracket-wrap {padding: 10px 40px 15px; position: relative; display: inline-block; border-color: #ddd} .item-block .bracket-wrap:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 15px; height: 100%; border: 4px solid #ddd; border-right:none} .item-block .bracket-wrap:after{content: ""; display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; border: 4px solid #ddd; border-left:none} .item-block .quote-mark{font-family: 'Nanum Myeongjo'; font-size: 120px; text-align:center; line-height: 1.1; height: 50px; color:#bdbdbd} .item-block .quote-line-wrap:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 10px; height: 100%; border-left: 5px solid #333; } .item-block .quote-line-wrap{position: relative; padding-left: 20px; padding-bottom: 5px; border-color: #333} body > .dh-builder .item-block[data-item-id="mouseover"] .tab-content{position: relative;} body > .dh-builder .item-block[data-item-id="mouseover"] .mouseover-wrap1{display: block; opacity: 1; width: 100%;} body > .dh-builder .item-block[data-item-id="mouseover"] .mouseover-wrap2 { position: absolute; top: 0;left: 0; display: block; opacity: 0; width: 100%;} body > .dh-builder .item-block[data-item-id="mouseover"].on .fadein .mouseover-wrap2{animation: fadein .5s; -moz-animation: fadein .5s; /* Firefox */ -webkit-animation: fadein .5s; /* Safari and Chrome */ -o-animation: fadein .5s; /* Opera */ opacity:1} body > .dh-builder .item-block[data-item-id="mouseover"].off .fadein .mouseover-wrap2{animation: fadeinOff .5s; -moz-animation: fadeinOff .5s; /* Firefox */ -webkit-animation: fadeinOff .5s; /* Safari and Chrome */ -o-animation: fadeinOff .5s; /* Opera */ opacity:0} body > .dh-builder .item-block[data-item-id="mouseover"].on .flipY .mouseover-wrap2{animation: flipY .5s; -moz-animation: flipY .5s; /* Firefox */ -webkit-animation: flipY .5s; /* Safari and Chrome */ -o-animation: flipY .5s; /* Opera */opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .flipY .mouseover-wrap2{animation: flipYOff .5s; -moz-animation: flipYOff .5s; /* Firefox */ -webkit-animation: flipYOff .5s; /* Safari and Chrome */ -o-animation: flipYOff .5s; /* Opera */opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .rotate1 .mouseover-wrap2{ animation: rotate1 .5s; -moz-animation: rotate1 .5s; /* Firefox */ -webkit-animation: rotate1 .5s; /* Safari and Chrome */ -o-animation: rotate1 .5s; /* Opera */ opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .rotate1 .mouseover-wrap2{ animation: rotate1Off .5s; -moz-animation: rotate1Off .5s; /* Firefox */ -webkit-animation: rotate1Off .5s; /* Safari and Chrome */ -o-animation: rotate1Off .5s; /* Opera */ opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .scaleUp .mouseover-wrap2{animation: scaleUp .6s; -moz-animation: scaleUp .6s; /* Firefox */ -webkit-animation: scaleUp .6s; /* Safari and Chrome */ -o-animation: scaleUp .6s; /* Opera */ opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .scaleUp .mouseover-wrap2{animation: scaleUpOff .6s; -moz-animation: scaleUpOff .6s; /* Firefox */ -webkit-animation: scaleUpOff .6s; /* Safari and Chrome */ -o-animation: scaleUpOff .6s; /* Opera */opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .slideRight .mouseover-wrap2{animation: slideRight .5s; -moz-animation: slideRight .5s; /* Firefox */ -webkit-animation: slideRight.5s; /* Safari and Chrome */ -o-animation: slideRight .5s; /* Opera */opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .slideRight .mouseover-wrap2{animation: slideRightOff .5s; -moz-animation: slideRightOff .5s; /* Firefox */ -webkit-animation: slideRightOff .5s; /* Safari and Chrome */ -o-animation: slideRightOff .5s; /* Opera */opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .slideLeft .mouseover-wrap2{animation: slideLeft .5s; -moz-animation: slideLeft .5s; /* Firefox */ -webkit-animation: slideLeft .5s; /* Safari and Chrome */ -o-animation: slideLeft .5s; /* Opera */opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .slideLeft .mouseover-wrap2{animation: slideLeftOff .5s; -moz-animation: slideLeftOff .5s; /* Firefox */ -webkit-animation: slideLeftOff .5s; /* Safari and Chrome */ -o-animation: slideLeftOff .5s; /* Opera */opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .slideDown .mouseover-wrap2{animation: slideDown .5s; -moz-animation: slideDown .5s; /* Firefox */ -webkit-animation: slideDown .5s; /* Safari and Chrome */ -o-animation: slideDown .5s; /* Opera */ opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .slideDown .mouseover-wrap2{animation: slideDownOff .5s; -moz-animation: slideDownOff .5s; /* Firefox */ -webkit-animation: slideDownOff .5s; /* Safari and Chrome */ -o-animation: slideDownOff .5s; /* Opera */ opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .slideUp .mouseover-wrap2{animation: slideUp .5s; -moz-animation: slideUp .5s; /* Firefox */ -webkit-animation: slideUp .5s; /* Safari and Chrome */ -o-animation: slideUp .5s; /* Opera */opacity:1 } body > .dh-builder .item-block[data-item-id="mouseover"].off .slideUp .mouseover-wrap2{animation: slideUpOff .5s; -moz-animation: slideUpOff .5s; /* Firefox */ -webkit-animation: slideUpOff .5s; /* Safari and Chrome */ -o-animation: slideUpOff .5s; /* Opera */opacity:0 } body > .dh-builder .item-block[data-item-id="mouseover"].on .mouseover-wrap1{position: absolute; width: 100%; top: 0;left: 0; bottom: 0; animation: fadeinOff .9s; -moz-animation: fadeinOff .9s; /* Firefox */ -webkit-animation: fadeinOff .9s; /* Safari and Chrome */ -o-animation: fadeinOff .9s; /* Opera */ opacity:0; display: block; } body > .dh-builder .item-block[data-item-id="mouseover"].on .mouseover-wrap2{position: static; width: 100%; opacity: 1} @keyframes fadein { from { opacity: 0; } to { opacity: 1; }} @keyframes fadeinOff { from { opacity: 1; } to { opacity: 0; }} @keyframes flipY { from { transform: rotateY(180deg); opacity: 0;} to { transform: rotateY(360deg); opacity: 1; }} @keyframes flipYOff { from { transform: rotateY(180deg); opacity: 1;} to { transform: rotateY(360deg); opacity: 0; }} @keyframes rotate1 { from { transform: rotate(180deg); opacity: 0;} to { transform: rotate(360deg); opacity: 1; }} @keyframes rotate1Off { from { transform: rotate(180deg); opacity: 1;} to { transform: rotate(360deg); opacity: 0; }} @keyframes scaleUp { 0% { transform: scale(1); opacity: 0;} 50% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; }} @keyframes scaleUpOff { 0% { transform: scale(1); opacity: 1;} 20% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 0; }} @keyframes slideLeft { from { transform: translateX(-50px);opacity: 0; } to { transform: translateX(0); opacity: 1; }} @keyframes slideLeftOff { from { transform: translateX(0);opacity: 1; } to { transform: translateX(-50px); opacity: 0; }} @keyframes slideRight { from { transform: translateX(50px); opacity: 0;} to { transform: translateX(0); opacity: 1; }} @keyframes slideRightOff { from { transform: translateX(0); opacity: 1;} to { transform: translateX(50px); opacity: 0; }} @keyframes slideUp { from { transform: translateY(-50px); opacity: 0;} to { transform: translateY(0); opacity: 1; }} @keyframes slideUpOff { from { transform: translateY(0); opacity: 1;} to { transform: translateY(-50px); opacity: 0; }} @keyframes slideDown { from { transform: translateY(50px);opacity: 0; } to { transform: translateY(0); opacity: 1; }} @keyframes slideDownOff { from { transform: translateY(0);opacity: 1; } to { transform: translateY(50px); opacity: 0; }} .dh-builder .builder-header a:hover{text-decoration: none} .show>.dropdown-menu.dropdown-menu-center {left: 50% !important;transform: translateX(-50%) !important; top:100% !important} .dropdown-menu.dropdown-menu-center {left: 50% !important;transform: translateX(-50%) !important; top:100% !important} .dh-builder .builder-header .dropdown-toggle::after {display: none} /* 슬라이드 */ .slide .slide-overlay { position: absolute; width: 100%; height: 100%} .slide .section-inner{overflow-y: hidden} .slide .swiper-pagination-bullets span{background: #000; } .slide .swiper-pagination-bullets .swiper-pagination-bullet-active{background:rgba(0, 0, 0, .5)} .slide .swiper-button-next, .slide .swiper-button-prev{color: rgba(0, 0, 0, .3)} .slide .block-width{overflow-x: hidden} .slide .swiper-button-next:hover, .edit .swiper-button-prev:hover{color: rgba(0, 0, 0, .5)} .thumb-slide .thumb-wrap {overflow: hidden;} body > .dh-builder .slide{overflow: hidden;} .item-block[data-item-id="item-slide"] .slide-overlay { position: absolute; width: 100%; height: 100%} .item-block[data-item-id="item-slide"] .swiper-pagination-bullets span{background: #000; } .item-block[data-item-id="item-slide"] .swiper-pagination-bullets .swiper-pagination-bullet-active{background:rgba(0, 0, 0, .5)} .item-block[data-item-id="item-slide"] .swiper-button-next, .item-block[data-item-id="item-slide"] .swiper-button-prev{color: rgba(0, 0, 0, .3)} .item-block[data-item-id="item-slide"] .block-width{overflow-x: hidden} .item-block[data-item-id="item-slide"] .swiper-button-next:hover, .edit .swiper-button-prev:hover{color: rgba(0, 0, 0, .5)} body > .dh-builder .swiper-container.container{overflow-x: hidden} body > .dh-builder .slide .block-width{overflow-y: hidden} .slide-inner {overflow: hidden; padding: 20px 0} .custom-slide-wrap .section-inner {padding-top: 0 !important; padding-bottom: 0 !important;} .builder-nav ul.sub{z-index: 999} .dh-builder .builder-header .dropdown button{background: none; border: none;} .dh-builder .builder-header .builder-menu .dropdown .dropdown-menu{min-width: 5rem; } .dh-builder .builder-header .builder-menu .dropdown .dropdown-menu a{padding: .25rem 1rem; font-size: .8rem} .builder-header .builder-menu button:hover, .builder-header .builder-menu .dropdown.show button{opacity:.6} .dh-builder .pc-menu{display: none} .dh-builder .m-menu .navbar-brand{padding-left: 15px; padding-right: 15px } .dh-builder .m-menu {display: flex; justify-content: space-between; align-items: center} .dh-builder .m-menu-wrapper {width: 100%; height: 100vh; position: fixed; background-color: #fff; z-index: 999; top: 0; transition: .3s} .dh-builder .m-menu-wrapper.right{right: -100%} .dh-builder .m-menu-wrapper.left{left: -100%} .dh-builder .m-menu-wrapper.active{display: block;} .dh-builder .m-menu-wrapper.right.active{ right: 0} .dh-builder .m-menu-wrapper.left.active{ left: 0; } .dh-builder .m-menu-wrapper .navbar-toggler {padding-top: 10px; padding-bottom: 10px} .dh-builder .m-menu-wrapper ul{list-style: none; padding-left: 0; margin-bottom: 0;} .dh-builder .m-menu-wrapper .page-menu{text-align: center; margin-top: 20px} .dh-builder .m-menu-wrapper .builder-menu{margin-top: 20px} .dh-builder .m-menu-wrapper .builder-menu ul{display: flex; justify-content: center} .dh-builder .builder-header .m-menu-wrapper a.sub-link{padding:.5rem 1rem; display:block;} .m_menu_collapse .sub-link {display:block; padding: .5rem 1rem;} .item-block[data-item-id="line1"] .item-h-con, .item-block[data-item-id="line2"] .item-h-con, .item-block[data-item-id="line3"] .item-h-con {overflow: hidden} .section .container {padding-left: 0; padding-right: 0} .section .container-fluid {padding-left: 0; padding-right: 0} .dh-builder{overflow-x: hidden; overflow-y: hidden; min-height: 100vh} #editor .dh-builder{overflow-x: auto; overflow-y: auto;} @media (max-width: 767.98px) { body > .dh-builder .item-block[data-item-id="mouseover"] { touch-action: none; } .builder-submenu .block-inner .h-con {padding: 0} .builder-submenu .block-inner{padding-top: 0; padding-bottom: 0} .mobile-hide, .mobile-item-hide {display: none;} .board .container, .form .container, .insta .container{padding-left: 0 ; padding-right: 0 ;} /* .builder-submenu .block-inner .submenu-nav ul{display: block} .builder-submenu .block-inner .submenu-nav ul li{float: inherit; margin-bottom: 15px} .builder-submenu .block-inner .submenu-nav ul li:last-of-type{margin-bottom: 0} .builder-submenu .block-inner .submenu-nav ul li a{width: 100%; margin: 0} */ .section:not(.msection) .section-inner .frame{margin-bottom: 15px; } .section:not(.msection) .section-inner .frame:last-of-type{margin-bottom: 0; } .section[data-block-id="frame1"] .section-inner .frame{margin-bottom: 0; } .slide .swiper-button-next:after, .slide .swiper-button-prev:after{font-size: 26px} .item-block .quote-mark{ font-size: 100px;} .builder-header .block-inner{padding-top: 5px; padding-bottom: 0} div:not(#editor) .section.builder-footer .col-md-12, div:not(#editor) .section.builder-footer .col-md-8, div:not(#editor) .section.builder-footer .col-md-4{padding-left: 0; padding-right: 0} div:not(#editor) .section.builder-footer .row{margin-left: 0; margin-right: 0} .submenu-block-edit{display: none} } .dh-builder .board-top{text-align: right; margin-bottom: 10px} .dh-builder .board-top .search-wrapper {display: flex; justify-content: flex-end;} .dh-builder .board-top .search-box .search{background-color: #fff} .dh-builder .board-top .search-wrapper .select{margin-right: 5px;} .dh-builder .board-top .select select{ background-color: #fff } .dh-builder .board-top .search{height: 34px;font-size: 14px; width: 250px; border-right: none; border-radius: .25rem 0 0 .25rem; border-color: #d5d5d5} .dh-builder .board-top button{height: 34px !important; min-height: auto;min-width: auto; border:1px solid #d5d5d5; border-radius: 0 .25rem .25rem 0; padding:1px 10px; background: #fff; color: #333; border-left: none;} .dh-builder .board-top button:hover{color: #000} .dh-builder .search-wrapper{margin-bottom: 15px} .dh-builder .search-wrapper:after{display: block; clear: both; content: "";} .dh-builder .search-box{display: flex} .dh-builder table{width: 100%} .dh-builder .badge.notice{background: #ffbd02; color: #fff} .dh-builder .select.small select {font-size: 12px; padding: 2px 25px 2px 5px; height: auto; background-size: 8px; background-position: right 5px top 10px;} .page-link:focus{box-shadow: none} .dropdown-fontname, .dropdown-fontsize {max-height: 300px; overflow-y: scroll} button:focus{outline: none; box-shadow: none} .board-more-btn{background: #fff; width: 100%; padding: 15px; border: 1px solid #d5d5d5; margin-bottom: 15px} .btn.focus, .btn:focus{box-shadow: none; } .page-item .page-link {color: #333; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.5); margin: 0 1px} .page-item.active .page-link{color:#fff ; background:#747474;border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0); } .page-item:hover .page-link{color:#fff ; background:#5D5D5D; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0); } .board-wrap .board-title, .board-wrap .title, .board-wrap .content{word-break: break-all;} .board1 .pc-visible .table-wrap tr td, .board1 .pc-visible .table-wrap tr th{vertical-align: middle;} .section.board1 .m-visible .title, .section.board3 .title, .section.board4 .title, .section.board5 .title, .section.shop-board2 .p-name, .section.shop-board1 .p-name { text-overflow: ellipsis;white-space: nowrap; word-wrap: normal; overflow: hidden;} .section.shop-board2 .pc-visible .left{max-width: calc(100% - 150px); width: 100%} .section.board1 .pc-visible .title, .section.board1 .board-content, .section.board2 .title, .section.board3 .content, .section.board4 .content, .shop-board1 .info .p-summary , .shop-board2 .info .p-summary, .section.board3 .title a .title-text {word-break: break-all} .shop-board2 .pc-visible .info .old-price{padding-left: 30px} .shop-board2 .pc-visible .info .price{word-break: break-all !important;} .shop-board2 .pc-visible .info .old-price{word-break: break-all !important;} .shop-board3 .shop_box{position: relative;} .shop-board3 .wrapper{position: absolute;top: 0;left: 0;right: 0;} .shop-board3 .recommendation {position: relative;} .shop-board3 .info{position: absolute;right: 0; top: 0; padding-left: 20px;} .shop-board3 .info .old-price{font-size: 80%; text-decoration: line-through;} .shop-board3 .info .p-price{position: relative; float: right;} .shop-board3 .discount {width: 40px;font-size: 16px;background: rgba(219, 0, 0);color: #fff;display: flex;align-content: center;justify-content: center;flex-wrap: wrap;border-radius: .25rem;} .shop-board3 .discount small{color: #fff !important} .shop-board3 .p-name{width: 100%;display: flex;z-index: 1;position: relative;} .shop-board3 .p-name .shop_title{position: relative;display: inline-block;padding-right: 5px;} .shop-board3 .recommendation{line-height: unset;} .shop-board3 .wrapper{position: relative;} .shop-board3 .blink_box{width: 4px;height: 20px;} .shop-board3 .wrapper::after{content: " ";border-top: 1px solid #ededed;width: 100%;display: block;position: absolute;top: 10px; left: 0; right: 0;} .shop-board3 .p-summary {width: 80% !important; font-size: 80%;} .shop-board3 .gal {padding-bottom: 30px;} .shop-board3 *:hover {text-decoration: none;} .section[data-block-type="board"] .board-text-overflow, .section.board1 .board-text-overflow a, .section.board1 .board-text-overflow a.title span.text, .section[data-block-type="shop-board"] .p-summary, .section.board3 .title a .title-text{display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; max-height: 4.2em; word-wrap: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .section[data-block-type="board"] .board-text-overflow, .section.board1 .board-text-overflow a, .section.board1 .board-text-overflow a.title span.text, .section.board3 .title a .title-text{text-align:left} .shop-board2 .section-inner .h-con .table-row {align-items: center} .shop-board2 .section-inner .img{font-size: 0} .section.board1 .board-text-overflow a.title, .section.board1 .m-visible .title a, .section.board3 .title a, .section.board4 .title a, .section.board5 a.title {display: flex;} .section.board1 .board-text-overflow a.title span.title-text, .section.board3 .title a span.title-text, .section.board4 .title-text, .section.board5 .title .title-text, .section.board1 .m-visible .title a .title-text{text-overflow: ellipsis; white-space: normal; overflow-wrap: break-all; display: -webkit-box;-webkit-box-orient: vertical; overflow: hidden; max-height: 1.4em; -webkit-line-clamp: 1; width: auto; max-width: calc(100% - 50px); } .section.board1 .board-text-overflow{margin-bottom: 5px} .section.board4 .content{line-height: 1.4; max-height: 4.2em; } .section.board3 .m-visible .content .board-text-overflow, .section.board4 .m-visible .content .board-text-overflow{line-height: 1.4; max-height: 2.8em;-webkit-line-clamp:2; } .latest .board5-wrap .title, .latest .board5-wrap .content{text-overflow: ellipsis; white-space: nowrap;word-wrap: normal; overflow: hidden; word-break: break-word;} .latest .board1 .board-wrap .title {display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; max-height: 2.8em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;} .section.latest .latest-wrap{position: relative;} .latest .board1 .table-wrap-m .table-row .info .writer {display: none !important; margin-right: 15 !important;} .latest .board1 .table-wrap-m .table-row .info .board-writer {display: inline-block !important;margin-right: 0 !important;} .latest-wrap.board1 {text-align: left;} .board5 .board5-wrap .text a{line-height: 1.4} .latest .board-wrap {position: relative;} .section.board1 .board-title .board-text-overflow:first-of-type, .board1 .table-wrap a.title, .board1 .table-wrap-m .title, .board1 .table-wrap-m .title{margin-bottom: 0 !important;} .board1 .table-wrap-m .title + .board-text-overflow, .board1 .table-wrap-m .title + .board-text-overflow, .section.board1 .board-title .board-text-overflow:nth-of-type(2) {margin-top: 5px;} .board1 .table-wrap-m .table-row, .board1-custom .table-wrap-m .table-row, .latest .board1 .table-wrap-m .table-row, .board3 .m-visible .table-row, .board3-custom .m-visible .table-row, .board4 .m-visible .table-row, .board4-custom .m-visible .table-row{padding: 10px 5px !important} .board2 .accordion .card-header button, .board2-custom .accordion .card-header button, .board2 .accordion .card-body, .board2-custom .accordion .card-body{padding: 15px 10px !important;} .board-view .title, .board-view .board-content{word-break: break-word; } .board-view .comments .contents, .m-comment-wrap .comments .contents{word-break: break-word;} .default-page .board .board-write {padding-top: 30px; margin-top: 0 !important;} .board3 .content, .board3 .info, .board4 .content, .board4 .info{text-align: left;} .container.board .bottom-btn button{ padding : 6px 20px; } .write-btn { padding : 6px 20px !important; } #modal_reload_btn{padding : 6px 20px !important;} .form-term {margin: 50px 0} .form-term .checkbox{margin-bottom: 15px} .form-term .checkbox label{vertical-align: sub; position: relative;} .form-term .checkbox .check-input{opacity: 0; visibility: hidden; margin-right: 10px} .form-term .checkbox .check{position: absolute; width: 20px; height: 20px; border: 1px solid #4b4b4b; background: #fff; left: 0; top: 3px;} .form-term .checkbox .check:after{content: "\f00c"; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top:-2px; left: 2px; color: #4c7ff2; display: none; font-size: 14px} .form-term .checkbox .check-input:checked + .check:after{display: inline-block} .form-term .term-text{width: 100%; max-height: 300px; margin-bottom: 50px; overflow-y: scroll; border: 1px solid #d5d5d5; border-radius: 1px; padding: 15px; background: #fff} .form-wrapper .tui-datepicker-input{background: #fff} .form-wrap .form-wrapper .form-group{margin-bottom: 15px} .dh-builder .sn-editor, .dh-builder .sn-table{word-break: break-all} .dh-builder .note-editable{word-break: break-all} .insta .hover-box {overflow: hidden} .insta .hover-box .con2 {word-break: break-word} .container.board{background-color: #fff; padding-bottom: 50px;} .note-editor { border-color: #00000032 !important; } /* 폰트 사이즈*/ .font8 {font-size:8px} .font9 {font-size:9px} .font10 {font-size:10px} .font11 {font-size:11px} .font12 {font-size:12px} .font13 {font-size:13px} .font14 {font-size:14px} .font15 {font-size:15px} .font16 {font-size:16px} .font17 {font-size:17px} .font18 {font-size:18px} .font19 {font-size:19px} .font20 {font-size:20px} .font24 {font-size:24px} .font26 {font-size:26px} .font28 {font-size:28px} .font32 {font-size:32px} .font40 {font-size:40px} .font50 {font-size:50px} .font60 {font-size:60px} .font72 {font-size:72px} .font80 {font-size:80px} .font90 {font-size:90px} .font100 {font-size:100px} .font120 {font-size:120px} .font140 {font-size:140px} .font160 {font-size:160px} .font180 {font-size:180px} .font200 {font-size:200px} @media (max-width: 767.98px){ .gm1 .font8:not(.logo) {font-size:8px} .gm1 .font9:not(.logo) {font-size:8px} .gm1 .font10:not(.logo) {font-size:8px} .gm1 .font11:not(.logo) {font-size:9px} .gm1 .font12:not(.logo) {font-size:9px} .gm1 .font13:not(.logo) {font-size:10px} .gm1 .font14:not(.logo) {font-size:11px} .gm1 .font15:not(.logo) {font-size:12px} .gm1 .font16:not(.logo) {font-size:13px} .gm1 .font17:not(.logo) {font-size:13px} .gm1 .font18:not(.logo) {font-size:14px} .gm1 .font19:not(.logo) {font-size:14px} .gm1 .font20:not(.logo) {font-size:15px} .gm1 .font24:not(.logo) {font-size:16px} .gm1 .font26:not(.logo) {font-size:17px} .gm1 .font28:not(.logo) {font-size:17px} .gm1 .font32:not(.logo) {font-size:18px} .gm1 .font40:not(.logo) {font-size:19px} .gm1 .font50:not(.logo) {font-size:20px} .gm1 .font60:not(.logo) {font-size:22px} .gm1 .font72:not(.logo) {font-size:24px} .gm1 .font80:not(.logo) {font-size:26px} .gm1 .font90:not(.logo) {font-size:28px} .gm1 .font100:not(.logo) {font-size:30px} .gm1 .font120:not(.logo) {font-size:35px} .gm1 .font140:not(.logo) {font-size:40px} .gm1 .font160:not(.logo) {font-size:50px} .gm1 .font180:not(.logo) {font-size:60px} .gm1 .font200:not(.logo) {font-size:70px} .gm2 .font8:not(.logo) {font-size:8px} .gm2 .font9:not(.logo) {font-size:8px} .gm2 .font10:not(.logo) {font-size:9px} .gm2 .font11:not(.logo) {font-size:10px} .gm2 .font12:not(.logo) {font-size:11px} .gm2 .font13:not(.logo) {font-size:12px} .gm2 .font14:not(.logo) {font-size:13px} .gm2 .font15:not(.logo) {font-size:14px} .gm2 .font16:not(.logo) {font-size:14px} .gm2 .font17:not(.logo) {font-size:15px} .gm2 .font18:not(.logo) {font-size:16px} .gm2 .font19:not(.logo) {font-size:16px} .gm2 .font20:not(.logo) {font-size:18px} .gm2 .font24:not(.logo) {font-size:19px} .gm2 .font26:not(.logo) {font-size:20px} .gm2 .font28:not(.logo) {font-size:21px} .gm2 .font32:not(.logo) {font-size:22px} .gm2 .font40:not(.logo) {font-size:23px} .gm2 .font50:not(.logo) {font-size:24px} .gm2 .font60:not(.logo) {font-size:26px} .gm2 .font72:not(.logo) {font-size:30px} .gm2 .font80:not(.logo) {font-size:32px} .gm2 .font90:not(.logo) {font-size:35px} .gm2 .font100:not(.logo) {font-size:40px} .gm2 .font120:not(.logo) {font-size:45px} .gm2 .font140:not(.logo) {font-size:50px} .gm2 .font160:not(.logo) {font-size:60px} .gm2 .font180:not(.logo) {font-size:70px} .gm2 .font200:not(.logo) {font-size:80px} .gm3 .font8:not(.logo) {font-size:8px} .gm3 .font9:not(.logo) {font-size:9px} .gm3 .font10:not(.logo) {font-size:10px} .gm3 .font11:not(.logo) {font-size:11px} .gm3 .font12:not(.logo) {font-size:12px} .gm3 .font13:not(.logo) {font-size:13px} .gm3 .font14:not(.logo) {font-size:14px} .gm3 .font15:not(.logo) {font-size:15px} .gm3 .font16:not(.logo) {font-size:16px} .gm3 .font17:not(.logo) {font-size:17px} .gm3 .font18:not(.logo) {font-size:18px} .gm3 .font19:not(.logo) {font-size:19px} .gm3 .font20:not(.logo) {font-size:20px} .gm3 .font24:not(.logo) {font-size:21px} .gm3 .font26:not(.logo) {font-size:22px} .gm3 .font28:not(.logo) {font-size:23px} .gm3 .font32:not(.logo) {font-size:24px} .gm3 .font40:not(.logo) {font-size:25px} .gm3 .font50:not(.logo) {font-size:26px} .gm3 .font60:not(.logo) {font-size:28px} .gm3 .font72:not(.logo) {font-size:30px} .gm3 .font80:not(.logo) {font-size:32px} .gm3 .font90:not(.logo) {font-size:34px} .gm3 .font100:not(.logo) {font-size:40px} .gm3 .font120:not(.logo) {font-size:50px} .gm3 .font140:not(.logo) {font-size:60px} .gm3 .font160:not(.logo) {font-size:65px} .gm3 .font180:not(.logo) {font-size:70px} .gm3 .font200:not(.logo) {font-size:80px} .gm4 .font8:not(.logo) {font-size:8px} .gm4 .font9:not(.logo) {font-size:9px} .gm4 .font10:not(.logo) {font-size:10px} .gm4 .font11:not(.logo) {font-size:11px} .gm4 .font12:not(.logo) {font-size:12px} .gm4 .font13:not(.logo) {font-size:13px} .gm4 .font14:not(.logo) {font-size:14px} .gm4 .font15:not(.logo) {font-size:15px} .gm4 .font16:not(.logo) {font-size:16px} .gm4 .font17:not(.logo) {font-size:17px} .gm4 .font18:not(.logo) {font-size:18px} .gm4 .font19:not(.logo) {font-size:19px} .gm4 .font20:not(.logo) {font-size:20px} .gm4 .font24:not(.logo) {font-size:21px} .gm4 .font26:not(.logo) {font-size:22px} .gm4 .font28:not(.logo) {font-size:23px} .gm4 .font32:not(.logo) {font-size:24px} .gm4 .font40:not(.logo) {font-size:25px} .gm4 .font50:not(.logo) {font-size:30px} .gm4 .font60:not(.logo) {font-size:38px} .gm4 .font72:not(.logo) {font-size:45px} .gm4 .font80:not(.logo) {font-size:60px} .gm4 .font90:not(.logo) {font-size:65px} .gm4 .font100:not(.logo) {font-size:75px} .gm4 .font120:not(.logo) {font-size:80px} .gm4 .font140:not(.logo) {font-size:100px} .gm4 .font160:not(.logo) {font-size:110px} .gm4 .font180:not(.logo) {font-size:120px} .gm4 .font200:not(.logo) {font-size:150px} .gm5 .font8:not(.logo) {font-size:8px} .gm5 .font9:not(.logo) {font-size:9px} .gm5 .font10:not(.logo) {font-size:10px} .gm5 .font11:not(.logo) {font-size:11px} .gm5 .font12:not(.logo) {font-size:12px} .gm5 .font13:not(.logo) {font-size:13px} .gm5 .font14:not(.logo) {font-size:14px} .gm5 .font15:not(.logo) {font-size:15px} .gm5 .font16:not(.logo) {font-size:16px} .gm5 .font17:not(.logo) {font-size:17px} .gm5 .font18:not(.logo) {font-size:18px} .gm5 .font19:not(.logo) {font-size:19px} .gm5 .font20:not(.logo) {font-size:20px} .gm5 .font24:not(.logo) {font-size:24px} .gm5 .font26:not(.logo) {font-size:26px} .gm5 .font28:not(.logo) {font-size:28px} .gm5 .font32:not(.logo) {font-size:32px} .gm5 .font40:not(.logo) {font-size:40px} .gm5 .font50:not(.logo) {font-size:50px} .gm5 .font60:not(.logo) {font-size:60px} .gm5 .font72:not(.logo) {font-size:72px} .gm5 .font80:not(.logo) {font-size:80px} .gm5 .font90:not(.logo) {font-size:90px} .gm5 .font100:not(.logo) {font-size:100px} .gm5 .font120:not(.logo) {font-size:120px} .gm5 .font140:not(.logo) {font-size:140px} .gm5 .font160:not(.logo) {font-size:160px} .gm5 .font180:not(.logo) {font-size:180px} .gm5 .font200:not(.logo) {font-size:200px} .m1 .font8 {font-size:8px} .m1 .font9 {font-size:8px} .m1 .font10 {font-size:8px} .m1 .font11 {font-size:9px} .m1 .font12 {font-size:9px} .m1 .font13 {font-size:10px} .m1 .font14 {font-size:11px} .m1 .font15 {font-size:12px} .m1 .font16 {font-size:13px} .m1 .font17 {font-size:13px} .m1 .font18 {font-size:14px} .m1 .font19 {font-size:14px} .m1 .font20 {font-size:15px} .m1 .font24 {font-size:16px} .m1 .font26 {font-size:17px} .m1 .font28 {font-size:17px} .m1 .font32 {font-size:18px} .m1 .font40 {font-size:19px} .m1 .font50 {font-size:20px} .m1 .font60 {font-size:22px} .m1 .font72 {font-size:24px} .m1 .font80 {font-size:26px} .m1 .font90 {font-size:28px} .m1 .font100 {font-size:30px} .m1 .font120 {font-size:35px} .m1 .font140 {font-size:40px} .m1 .font160 {font-size:50px} .m1 .font180 {font-size:60px} .m1 .font200 {font-size:70px} .m2 .font8 {font-size:8px} .m2 .font9 {font-size:8px} .m2 .font10 {font-size:9px} .m2 .font11 {font-size:10px} .m2 .font12 {font-size:11px} .m2 .font13 {font-size:12px} .m2 .font14 {font-size:13px} .m2 .font15 {font-size:14px} .m2 .font16 {font-size:14px} .m2 .font17 {font-size:15px} .m2 .font18 {font-size:16px} .m2 .font19 {font-size:16px} .m2 .font20 {font-size:18px} .m2 .font24 {font-size:19px} .m2 .font26 {font-size:20px} .m2 .font28 {font-size:21px} .m2 .font32 {font-size:22px} .m2 .font40 {font-size:23px} .m2 .font50 {font-size:24px} .m2 .font60 {font-size:26px} .m2 .font72 {font-size:30px} .m2 .font80 {font-size:32px} .m2 .font90 {font-size:35px} .m2 .font100 {font-size:40px} .m2 .font120 {font-size:45px} .m2 .font140 {font-size:50px} .m2 .font160 {font-size:60px} .m2 .font180 {font-size:70px} .m2 .font200 {font-size:80px} .m3 .font8 {font-size:8px} .m3 .font9 {font-size:9px} .m3 .font10 {font-size:10px} .m3 .font11 {font-size:11px} .m3 .font12 {font-size:12px} .m3 .font13 {font-size:13px} .m3 .font14 {font-size:14px} .m3 .font15 {font-size:15px} .m3 .font16 {font-size:16px} .m3 .font17 {font-size:17px} .m3 .font18 {font-size:18px} .m3 .font19 {font-size:19px} .m3 .font20 {font-size:20px} .m3 .font24 {font-size:21px} .m3 .font26 {font-size:22px} .m3 .font28 {font-size:23px} .m3 .font32 {font-size:24px} .m3 .font40 {font-size:25px} .m3 .font50 {font-size:26px} .m3 .font60 {font-size:28px} .m3 .font72 {font-size:30px} .m3 .font80 {font-size:32px} .m3 .font90 {font-size:34px} .m3 .font100 {font-size:40px} .m3 .font120 {font-size:50px} .m3 .font140 {font-size:60px} .m3 .font160 {font-size:65px} .m3 .font180 {font-size:70px} .m3 .font200 {font-size:80px} .m4 .font8 {font-size:8px} .m4 .font9 {font-size:9px} .m4 .font10 {font-size:10px} .m4 .font11 {font-size:11px} .m4 .font12 {font-size:12px} .m4 .font13 {font-size:13px} .m4 .font14 {font-size:14px} .m4 .font15 {font-size:15px} .m4 .font16 {font-size:16px} .m4 .font17 {font-size:17px} .m4 .font18 {font-size:18px} .m4 .font19 {font-size:19px} .m4 .font20 {font-size:20px} .m4 .font24 {font-size:21px} .m4 .font26 {font-size:22px} .m4 .font28 {font-size:23px} .m4 .font32 {font-size:24px} .m4 .font40 {font-size:25px} .m4 .font50 {font-size:30px} .m4 .font60 {font-size:38px} .m4 .font72 {font-size:45px} .m4 .font80 {font-size:60px} .m4 .font90 {font-size:65px} .m4 .font100 {font-size:75px} .m4 .font120 {font-size:80px} .m4 .font140 {font-size:100px} .m4 .font160 {font-size:110px} .m4 .font180 {font-size:120px} .m4 .font200 {font-size:150px} .m5 .font8 {font-size:8px} .m5 .font9 {font-size:9px} .m5 .font10 {font-size:10px} .m5 .font11 {font-size:11px} .m5 .font12 {font-size:12px} .m5 .font13 {font-size:13px} .m5 .font14 {font-size:14px} .m5 .font15 {font-size:15px} .m5 .font16 {font-size:16px} .m5 .font17 {font-size:17px} .m5 .font18 {font-size:18px} .m5 .font19 {font-size:19px} .m5 .font20 {font-size:20px} .m5 .font24 {font-size:24px} .m5 .font26 {font-size:26px} .m5 .font28 {font-size:28px} .m5 .font32 {font-size:32px} .m5 .font40 {font-size:40px} .m5 .font50 {font-size:50px} .m5 .font60 {font-size:60px} .m5 .font72 {font-size:72px} .m5 .font80 {font-size:80px} .m5 .font90 {font-size:90px} .m5 .font100 {font-size:100px} .m5 .font120 {font-size:120px} .m5 .font140 {font-size:140px} .m5 .font160 {font-size:160px} .m5 .font180 {font-size:180px} .m5 .font200 {font-size:200px} .font8 .m1 {font-size:8px} .font9 .m1 {font-size:8px} .font10 .m1 {font-size:8px} .font11 .m1 {font-size:9px} .font12 .m1 {font-size:9px} .font13 .m1 {font-size:10px} .font14 .m1 {font-size:11px} .font15 .m1 {font-size:12px} .font16 .m1 {font-size:13px} .font17 .m1 {font-size:13px} .font18 .m1 {font-size:14px} .font19 .m1 {font-size:14px} .font20 .m1 {font-size:15px} .font24 .m1 {font-size:16px} .font26 .m1 {font-size:17px} .font28 .m1 {font-size:17px} .font32 .m1 {font-size:18px} .font40 .m1 {font-size:19px} .font50 .m1 {font-size:20px} .font60 .m1 {font-size:22px} .font72 .m1 {font-size:24px} .font80 .m1 {font-size:26px} .font90 .m1 {font-size:28px} .font100 .m1 {font-size:30px} .font120 .m1 {font-size:35px} .font140 .m1 {font-size:40px} .font160 .m1 {font-size:50px} .font180 .m1 {font-size:60px} .font200 .m1 {font-size:70px} .font8 .m2 {font-size:8px} .font9 .m2 {font-size:8px} .font10 .m2 {font-size:9px} .font11 .m2 {font-size:10px} .font12 .m2 {font-size:11px} .font13 .m2 {font-size:12px} .font14 .m2 {font-size:13px} .font15 .m2 {font-size:14px} .font16 .m2 {font-size:14px} .font17 .m2 {font-size:15px} .font18 .m2 {font-size:16px} .font19 .m2 {font-size:16px} .font20 .m2 {font-size:18px} .font24 .m2 {font-size:19px} .font26 .m2 {font-size:20px} .font28 .m2 {font-size:21px} .font32 .m2 {font-size:22px} .font40 .m2 {font-size:23px} .font50 .m2 {font-size:24px} .font60 .m2 {font-size:26px} .font72 .m2 {font-size:30px} .font80 .m2 {font-size:32px} .font90 .m2 {font-size:35px} .font100 .m2 {font-size:40px} .font120 .m2 {font-size:45px} .font140 .m2 {font-size:50px} .font160 .m2 {font-size:60px} .font180 .m2 {font-size:70px} .font200 .m2 {font-size:80px} .font8 .m3 {font-size:8px} .font9 .m3 {font-size:9px} .font10 .m3 {font-size:10px} .font11 .m3 {font-size:11px} .font12 .m3 {font-size:12px} .font13 .m3 {font-size:13px} .font14 .m3 {font-size:14px} .font15 .m3 {font-size:15px} .font16 .m3 {font-size:16px} .font17 .m3 {font-size:17px} .font18 .m3 {font-size:18px} .font19 .m3 {font-size:19px} .font20 .m3 {font-size:20px} .font24 .m3 {font-size:21px} .font26 .m3 {font-size:22px} .font28 .m3 {font-size:23px} .font32 .m3 {font-size:24px} .font40 .m3 {font-size:25px} .font50 .m3 {font-size:26px} .font60 .m3 {font-size:28px} .font72 .m3 {font-size:30px} .font80 .m3 {font-size:32px} .font90 .m3 {font-size:34px} .font100 .m3 {font-size:40px} .font120 .m3 {font-size:50px} .font140 .m3 {font-size:60px} .font160 .m3 {font-size:65px} .font180 .m3 {font-size:70px} .font200 .m3 {font-size:80px} .m4 .font8 {font-size:8px} .m4 .font9 {font-size:9px} .font10 .m4 {font-size:10px} .font11 .m4 {font-size:11px} .font12 .m4 {font-size:12px} .font13 .m4 {font-size:13px} .font14 .m4 {font-size:14px} .font15 .m4 {font-size:15px} .font16 .m4 {font-size:16px} .font17 .m4 {font-size:17px} .font18 .m4 {font-size:18px} .font19 .m4 {font-size:19px} .font20 .m4 {font-size:20px} .font24 .m4 {font-size:21px} .font26 .m4 {font-size:22px} .font28 .m4 {font-size:23px} .font32 .m4 {font-size:24px} .font40 .m4 {font-size:25px} .font50 .m4 {font-size:30px} .font60 .m4 {font-size:38px} .font72 .m4 {font-size:45px} .font80 .m4 {font-size:60px} .font90 .m4 {font-size:65px} .font100 .m4 {font-size:75px} .font120 .m4 {font-size:80px} .font140 .m4 {font-size:100px} .font160 .m4 {font-size:110px} .font180 .m4 {font-size:120px} .font200 .m4 {font-size:150px} .font8 .m5 {font-size:8px} .font9 .m5 {font-size:9px} .font10 .m5 {font-size:10px} .font11 .m5 {font-size:11px} .font12 .m5 {font-size:12px} .font13 .m5 {font-size:13px} .font14 .m5 {font-size:14px} .font15 .m5 {font-size:15px} .font16 .m5 {font-size:16px} .font17 .m5 {font-size:17px} .font18 .m5 {font-size:18px} .font19 .m5 {font-size:19px} .font20 .m5 {font-size:20px} .font24 .m5 {font-size:24px} .font26 .m5 {font-size:26px} .font28 .m5 {font-size:28px} .font32 .m5 {font-size:32px} .font40 .m5 {font-size:40px} .font50 .m5 {font-size:50px} .font60 .m5 {font-size:60px} .font72 .m5 {font-size:72px} .font80 .m5 {font-size:80px} .font90 .m5 {font-size:90px} .font100 .m5 {font-size:100px} .font120 .m5 {font-size:120px} .font140 .m5 {font-size:140px} .font160 .m5 {font-size:160px} .font180 .m5 {font-size:180px} .font200 .m5 {font-size:200px} } @media (min-width: 768px){ .dh-builder .pc-menu{display: block} .dh-builder .m-menu, .dh-builder .m-menu-collapse{display: none} } @media (max-width: 767.98px){ .dh-builder .board-top .search-wrapper {display: block !important} .dh-builder .board-top .search-wrapper .select {margin-right:0; margin-bottom: 5px} .dh-builder .board-top .search-wrapper .select select{width: 100%} .dh-builder .board-top .search-wrapper .search-box input{width: 100%} .dh-builder .board-top .search-wrapper .search-box button span{display: none} .section[data-block-type="frame"]:not(.msection) .frame{ padding-left: 15px !important; padding-right: 15px !important } .section[data-block-type="frame"]:not(.msection) .row{ margin-left: -15px !important; margin-right: -15px !important } #builder_submenu {display: none;} } .mobile-mode #builder_submenu, .pc-mode #builder_submenu{display: block;} .mobile-mode #submenu-block-edit {display: none;} .pc-mode .submenu-block-edit {display: block !important;} .mobile-mode .section[data-block-type="frame"]:not(.msection) .frame{ padding-left: 15px !important; padding-right: 15px !important } .mobile-mode .section[data-block-type="frame"]:not(.msection) .row{ margin-left: -15px !important; margin-right: -15px !important } .mobile-mode .dh-builder .board-top .search-wrapper {display: block !important} .mobile-mode .dh-builder .board-top .search-wrapper .select {margin-right:0; margin-bottom: 5px} .mobile-mode .dh-builder .board-top .search-wrapper .select select{width: 100%} .mobile-mode .dh-builder .board-top .search-wrapper .search-box input{width: 100%} .mobile-mode .dh-builder .board-top .search-wrapper .search-box button span{display: none} .board .board-top .search{background: none;} .gal{padding: 15px} .gal-1{width: 100%;} .gal-2{width: 50%;} .gal-3{width: 33.33333%;} .gal-4{width: 25%;} .gal-5{width: 20%; } .gal-6{width: 16.66667%;} .builder-header .m-menu .logo img{max-width: 200px} .builder-header .m-menu .logo {max-width:200px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal} .mobile-mode .shop-board1 .wrapper .discount{width: 40px; height: 40px; font-size: 16px; right: 10px; bottom: 10px} .mobile-mode .shop-board1 .info .old-price{display: none;} .mobile-mode .shop-board2 .text{width: calc(100% - 60px); } .mobile-mode .shop-board2 .img{width: 60px; } .mobile-mode .mouseover-tab{display: none;} .gallery-wrap .m-visible .hover-box{display: none} /* 고정페이지 */ .col-md-3 .my-menu-wrapper{background: #fff; height: 100%; border-radius: .25rem} .col-md-3 .my-menu-wrapper ul {list-style: none; padding-left: 0} .col-md-3 .my-menu-wrapper ul a{color: #333; padding: 10px 15px; display: inline-block; width: 100%} .col-md-3 .my-menu-wrapper ul a.active{font-weight: 600} .col-md-9 .my-content-wrapper{background: #fff; height: 100%; padding: 15px; border-radius: .25rem} .my-content-wrapper .title {font-size: 26px; border-bottom: 1px solid #d5d5d5; padding-bottom: 15px; margin-bottom: 45px} .my-content-wrapper .tui-datepicker-input {border-color: #ced4da; height: calc(1.5em + .75rem + 2px); padding: .375rem .05rem;border-radius: .25rem; background:#fff} .tui-datepicker{z-index: 2} .dh-builder input:focus{box-shadow: none} .board .board-view .board-content{min-height: 400px} .board .board-view .board-content img{max-width: 100%} #page_join .wrapper, #page_findid .wrapper .login, #page_findid .login .box, #page_login .login .box , .default-page{position:relative;} #page_mapboard .board .bottom-btn {} @media (max-width: 768px){ .my.row{display: block} .my-content-wrapper .title {font-size: 20px} .col-md-3 .my-menu-wrapper ul{display: flex; font-size: 15px} .col-md-3 .my-menu-wrapper {margin-bottom: 30px} } /* 무료 배너 */ .free-banner{background: rgba(0, 0, 0, .8); position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px; text-align: center; color: #fff; font-size: 20px; font-weight: 600; z-index: 999} .free-banner img{width: 150px; margin-right: 15px} .free-banner img.icon{display: none} @media (max-width: 768px){ .free-banner{font-size: 14px} .free-banner img.logo{width: 120px} .free-banner span{word-break: keep-all} } @media (max-width: 430px){ .free-banner{font-size: 14px} .free-banner img.icon{display: inline-block} .free-banner img.logo{display: none} .free-banner img.icon{width: 30px} .free-banner span{word-break: keep-all} } /* ie만 적용 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .item-block img{width:auto; max-width: 100%;} .item-block[data-item-id="img"] .wrap, .item-block[data-item-id="img"] .img-wrapper{width:100%} } body > .dh-builder .swiper-container{position: relative} /* 애니메이션 */ body > .dh-builder [data-aos=fadeIn] {opacity: 0;} body > .dh-builder [data-aos=fadeIn].aos-animate {opacity: 1;} body > .dh-builder [data-aos=rotate] {transform: rotate(180deg);opacity: 0; transition-property: transform, opacity;} body > .dh-builder [data-aos=rotate].aos-animate {transform: rotate(0); opacity: 1;} /* 고정페이지 */ /* #page_board{padding-bottom: 10px} */ /* 로딩 디자인 */ .loading-wrap {display: flex; justify-content: center; align-items: center; height:100vh; text-align: center; font-size: 16px;position: fixed; top: 0; left: 0; width: 100%; z-index: 12000;} .loading-wrap .size0 {font-size: 20px;} .loading-wrap .size25 {font-size: 35px;} .loading-wrap .size50 {font-size: 50px;} .loading-wrap .size75 {font-size: 65px;} .loading-wrap .size100 {font-size: 80px;} .loading-wrap .icon{margin-bottom: 15px} /* 캘린더 */ .dh-builder .fc-header-toolbar {flex-wrap: wrap} .dh-builder .fc-header-toolbar .fc-toolbar-chunk:first-of-type button {background: none; color: #333; border: 1px solid #ddd} .dh-builder .fc-header-toolbar .fc-toolbar-chunk:nth-of-type(2) > div {display: flex; align-items: center} .dh-builder .fc-header-toolbar .fc-toolbar-chunk:nth-of-type(2) > div .fc-button{background: none; border: none; color: #818181; outline: none; padding: 6px 5px} .dh-builder .fc .fc-button-primary:focus {box-shadow: none !important;} .dh-builder .fc .fc-toolbar-title {font-size: 24px; min-width: 135px; text-align: center} .dh-builder .fc-header-toolbar .fc-toolbar-chunk:last-of-type > div .fc-button {background: none; border: 1px solid #ddd; color: #333; padding: 0.4em 1em} .dh-builder .fc .fc-daygrid-day .fc-daygrid-day-number {font-size: 13px; margin-right: 5px; margin-top: 2px} .dh-builder .fc .fc-daygrid-day.fc-day-today {background: none;} .dh-builder .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{border-bottom: 2px solid #4c7ff2; } .dh-builder .fc a{color: #333} .dh-builder .fc-bg-event.holiday .fc-event-title{font-size: 12px; max-width: calc(100% - 35px);} .fc-toolbar-chunk:first-of-type .fc-prevYear-button, .fc-toolbar-chunk:first-of-type .fc-nextYear-button, .fc-toolbar-chunk:first-of-type .fc-prev-button, .fc-toolbar-chunk:first-of-type .fc-next-button {opacity: .8} .fc-toolbar-chunk:first-of-type .fc-prevYear-button,:hover .fc-toolbar-chunk:first-of-type .fc-nextYear-button:hover, .fc-toolbar-chunk:first-of-type .fc-prev-button:hover, .fc-toolbar-chunk:first-of-type .fc-next-button:hover {opacity: 1} .fc .fc-timegrid-col.fc-day-today {background: none !important;} .fc .fc-bg-event.holiday{background-color: none; background: none !important; opacity: 1} .dh-builder .fc .fc-view-harness-active > .fc-view {position: relative;} .dh-builder .fc .fc-scroller-liquid-absolute{position: relative;} .dh-builder .fc .fc-view-harness{height: 100% !important; background:#fff;} .dh-builder .fc-event.holiday {background: none !important; border: none !important;} .dh-builder .fc-event.holiday .fc-event-main{color: #E82A2A !important;} .fc-toolbar-chunk:nth-child(1){background:#fff;} .fc-toolbar-chunk:nth-child(3){background:#fff;} @media (max-width: 768px){ body > .dh-builder .fc-header-toolbar .fc-toolbar-chunk:first-of-type {order: 1} body > .dh-builder .fc-header-toolbar .fc-toolbar-chunk:nth-of-type(2) {order: 0; width: 100%; justify-content: center;text-align: center; margin-bottom: 10px} body > .dh-builder .fc-header-toolbar .fc-toolbar-chunk:nth-of-type(2) > div{justify-content: center; width: 100%} body > .dh-builder .fc-header-toolbar .fc-toolbar-chunk:last-of-type {order: 2} body > .dh-builder .fc .fc-dayGridMonth-view .fc-daygrid-day-frame{min-height: 180px} } .add-schedule-modal .form-control {4px 12px;} .add-schedule-modal .datepicker-con{float: none;} .add-schedule-modal .all-day .form-group, .add-schedule-modal .col-md-9 .time .form-group{display: flex; align-items: center; flex-wrap: wrap} .add-schedule-modal .form-check .form-check-label input{margin-top: 6px} .add-schedule-modal textarea{width: 100%;border: 1px solid #d5d5d5; border-radius: 5px} .add-schedule-modal .modal-body > .row {margin-bottom: 15px} .add-schedule-modal .dropdown-schedules-wrap button{background: none; border: 1px solid #d5d5d5; border-radius: .25rem; color: #333; padding: 4px 12px} .add-schedule-modal .dropdown-schedules-wrap .dropdown-schedules span, .add-schedule-modal .dropdown-schedules-wrap button.dropdown-toggle span{width: 15px; height: 15px; border: 1px solid #ddd; border-radius: 20px; display: inline-block; margin-right: 5px; margin-bottom: 1px;} .add-schedule-modal .dropdown-schedules-wrap .dropdown-schedules {border: 1px solid #d5d5d5;max-height: 150px; overflow: auto ; padding: 8px 0} .add-schedule-modal .dropdown-schedules-wrap .dropdown-schedules li a{padding: 6px 15px;display: flex; align-items: center;} .view-schedule-modal .title-wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px} .view-schedule-modal .title-wrap .cat {font-size: .8em; display: flex; align-items: center} .view-schedule-modal .title-wrap .cat .category-color{width: 12px; height: 12px; border: 1px solid #ddd; border-radius: 20px; display: inline-block; margin-right: 5px; margin-bottom: 1px;} .view-schedule-modal .date {font-size: .9em; margin-bottom: 15px; color:#404245; font-weight:600 } .view-schedule-modal .contents{margin-bottom: 15px} .view-schedule-modal .writer{font-size: .9em; color:#404245; font-weight:600 } .tui-datepicker-input > input:focus, .tui-datepicker-input > input:focus-visible{outline: none;} .tui-datepicker-input > input{border-radius: 0.25rem;} .tui-datepicker-input.tui-has-focus {border-color: #ced4da; vertical-align: middle; border-radius: 0.25rem;} .date-select {display: flex; flex-wrap: wrap} .date-select > div {display: flex; flex-wrap: wrap} .date-select .time {display: flex; flex-wrap: wrap} .date-select .time .time-input {width: 80px; margin-right: 5px } .date-select .time .time-input input{border:1px solid #d5d5d5;border-radius: 4px; width: 100%; font-size: 12px; padding: 6px 27px 6px 10px; height: 100%;} .date-select .time .time-input input:focus{outline: none;} .date-select .datepicker-con{margin-right: 10px} .modal .modal-content .modal-header { padding: 10px 16px; background: #F4F4F4} .modal .modal-content .modal-header .modal-title{font-size: 14px;} .modal .modal-content .modal-header button{ opacity: 1; padding: 10px 16px} .add-schedule-modal .dropdown-schedules-wrap button.dropdown-toggle span{vertical-align: -3px} button:focus{outline: none; } .modal .modal-footer .btn {font-size: .9em; padding: 6px 10px; min-width: 85px} .modal .modal-content .modal-header.no-title{background: none; border-bottom: none; padding: 15px 16px} .modal .modal-content {color:#333} /* 스크롤바 스타일 */ /* 크롬 */ ::-webkit-scrollbar {width: 10px;} ::-webkit-scrollbar-thumb {background-color: rgb(126, 126, 126, .9); border-radius: 10px;background-clip: padding-box; border: 2px solid transparent;} ::-webkit-scrollbar-track {background-color: rgba(221, 221, 221, 0.8); border-radius: 10px; box-shadow: inset 0px 0px 5px rgba(221, 221, 221, 0.8);} /* 파이어폭스 */ html, body , .sidebar-form, .map-board-con .board-wrap .list { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .2) rgba(0, 0, 0, .2); } .map-board .no-result {padding: 30px 0; text-align: center; display: block; width: 100%;} .map-board .board-wrap .count span:last-of-type:after {display: none !important;} .map-board .map-pin .pin-wrap .count span:last-of-type:after {display: none !important;} .map-board .board-wrap .title, .map-board .map-pin .title {display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; max-height: 2.8em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;} .map-board .m-visible .cat-btn-wrapper{display: flex; align-items: center; justify-content: flex-end; margin-bottom: 5px;} .map-board .m-visible .cat-btn-wrapper .select select {height: 32px; font-size: .9em;} .map-board .m-visible .cat-btn-wrapper .view-map-btn {display: none;} .map-board .m-visible .cat-btn-wrapper .view-list-btn, .map-board .m-visible .cat-btn-wrapper .view-map-btn {font-size: .8em; padding: 6px 10px;border-radius: 5px;} .map-board .m-visible .top-bar .sort .write-btn {font-size: .9em; padding: 4px 15px !important;} .map-board .m-visible .board-wrap .top-bar {padding: 5px 0 !important;} .map-board1 .map-pin, #editor .map-board1 .map-pin .title a {color:#333} body > .dh-builder .left-menu{z-index: 102 !important;} .section.latest .latest-top{display: flex; justify-content: space-between; align-items: center;} .section.latest .latest-top a{font-size: .875em} .section.board3 .table-wrap, .section.board4 .table-wrap {padding: 0 15px} .section.board5-custom .board-wrap .pc-visible > .row {margin-left: -7.5px; margin-right: -7.5px} .section.board5-custom .board-wrap .pc-visible > .row .gal{padding: 15px 7.5px} .top-search-con {position: fixed; top:-100%; width: 100%; left: 0; background: #fff; border-bottom: 1px solid #ddd; padding: 15px 15px 50px; text-align: center; z-index: 10001; box-shadow: 10px 10px 10px rgba(0, 0, 0, .05); opacity: 0; transition: .4s} .top-search-con button{background: none; border: none;} .top-search-con .close-btn-box{text-align: right} .top-search-con .close-btn-box button{font-size:24px} .top-search-con .container{padding-top: 15px;} .top-search-con .container p{font-size: 22px; font-weight: 600; color: #333} .top-search-con .container .search-bar {position: relative} .top-search-con .container input{border: none; border-bottom: 1px solid #ddd; width: 100%; padding: 10px; 5px; padding-right: 50px} .top-search-con .container button{position: absolute; right: 0; height: 100%; padding: 4px 20px} .top-search-con-bg{position: fixed; width: 100%;height: 100%; top: 0; left: 0; z-index: 1000; background: rgba(0,0,0,.1); display: none;} .top-search-con.on {opacity: 1; top: 0} .top-search-con.on + .top-search-con-bg{display:block; } .m-top-search-con {position: fixed; top:0; width: 100%;height: 100%; left: -100%; background: #fff; border-bottom: 1px solid #ddd; padding: 15px; text-align: center; z-index: 10001; box-shadow: 10px 10px 10px rgba(0, 0, 0, .05); opacity: 0; transition: .4s} .m-top-search-con .close-btn-box{text-align: left} .m-top-search-con button{background: none; border: none;font-size: 24px;} .m-top-search-con .container p{font-size: 22px; font-weight: 600; color: #333; margin-bottom: 30px;} .m-top-search-con .container .search-bar {position: relative; margin-bottom: 150px} .m-top-search-con .container input{border: none; border-bottom: 1px solid #ddd; width: 100%; padding: 10px; 5px; padding-right: 50px; } .m-top-search-con .container button{position: absolute; right: 0; height: 100%; padding: 4px 20px} .m-top-search-con .wrap {display: flex; height: calc(100vh - 53px); align-items: center; width: 100%;} .m-top-search-con .wrap .inner{width: 100%;} .dh-builder .m-menu-wrapper .page-menu .search-bar {position: relative; padding: 15px; margin-bottom: 30px; display: flex; align-items: center} .dh-builder .m-menu-wrapper .page-menu .search-bar input{width: 100%; padding: 5px; padding-left: 50px; border-radius: 7px; border :1px solid rgba(133, 133, 133, .6)} .dh-builder .m-menu-wrapper .page-menu .search-bar i{position: absolute; left: 15px; padding: 4px 20px} @media (max-width: 768px){ .top-search-con, .top-search-con-bg{display: none !important} .m-top-search-con.on {opacity: 1; left: 0} } /* 게시판 동영상 짤림 수정*/ .note-video-clip{width: 100% !important; max-width: 640px !important; height: 360px } /* 공백문자 여백으로 수정 */ .form-wrap .tel-wrapper span{display: inline-block; margin: 0 5px;} .note-editor .note-toolbar .dropdown-item{color:#333} #page_board .note-editor.note-frame.card, .note-editor.note-frame, #page_mapboard .note-editor.note-frame.card{background: none;} .more-warp {display: flex; align-items: center; justify-content: space-between;} .more-warp .text {width: 50%;} .more-warp .more {width: 50%;} .more-warp .more a {float: right; color: #000;} .more-warp hr {border-top: 1px solid; color: #000;} .more-warp-2 {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #a3a3a3;} .more-warp-2 .title_text {position: relative; display: inline-block; padding-bottom: 10px;} .more-warp-2 .title_text::after {content: " "; position: absolute; width: 100%; left: 0; bottom: -1px; border-bottom: 1.5px solid #000;} .more-warp-2 .more {margin-bottom: 10px;} .more-warp-2 .more a {color: #000;} .more-warp-2 .more a:hover {color: #000;} .sub{max-height: 400px;overflow-y: auto; scrollbar-width: thin;} .iconImg{width: 24px;} .menu-swiper-button-next{padding-left: 15px !important;} .menu-swiper-button-prev{padding-right: 15px !important;} .board_contents_warp {display: flex;} .board_contents_warp .thumbnail {width: 40% !important;} .board_contents_warp .content {width: 60%; word-break: break-all;} .sub-board {display: none;} .board1 .table-wrap td:not(.title), .board1 .table-wrap th:not(.title) {text-align: center} .board1 .table-wrap td, .board1 .table-wrap th {padding: .75em; vertical-align: top; border-top: 1px solid #d5d5d5} .board1 .table-wrap {border-bottom: 1px solid #d5d5d5; margin-bottom: 15px} .board1 td a{color: #333} .board1 a:hover{text-decoration: none;} .board1 .table-wrap-m{border-top: 1px solid #d5d5d5; margin-bottom: 15px} .board1 .table-wrap-m .table-row {border-bottom: 1px solid #d5d5d5; padding: 10px 0; } .board1 .table-wrap-m .table-row a{color: #333} .board1 .table-wrap-m .table-row .num {display: inline-block; padding-right: 10px; font-size: .93em; opacity:.8} .board1 .table-wrap-m .table-row .info{font-size: .85em; opacity:.8} .board1 .table-wrap-m .table-row .info span{display: inline-block; margin-right: 15px} .board1 .table-wrap-m .category{display: inline-block; padding-right: 5px; opacity:.8} .board1 .table-wrap-m .title{margin-bottom: 5px} .board1 .table-wrap-m .content{font-size: .9em; margin-bottom: 5px} .board1 .table-wrap .board-num, .board1 .table-wrap th.board-no{min-width: 60px } .board1 .table-wrap .board-cat{min-width: 100px } .board1 .table-wrap .board-content{text-align: left;} .board1 .table-wrap .board-content img{max-width:100%} .board1 .table-wrap a{display: inline-block; width:100%} .board1 .table-wrap a.title{margin-bottom: 5px; text-align: left;} .board1 .table-wrap a.content{font-size: .9em; text-align: left;} .board1 .table-wrap .board-writer{min-width: 100px } .board1 .table-wrap .board-date{min-width: 120px } .board1 .table-wrap .board-views{min-width: 100px } .board3 .table-row{border-bottom: 1px solid #ddd; padding: 15px 0 } .board3 .table-row:first-of-type{border-top: 1px solid #ddd;} .board3 .title{font-weight: 600; line-height: 1.4em; max-height: 2.8em; overflow: hidden} .board3 .content{font-size: .9em; margin: 10px 0; overflow: hidden; line-height: 1.4em; height: 7em; overflow: hidden} .board3 .info{font-size: .85em; opacity: .8 } .board3 .info span{ padding-right: 15px; } .board3 .wrapper{display: inline-block; width: 100%; height: 100%} .board3 .thumbnail {height: 100%; min-height: 150px; background-position: center center; background-size: cover; background-repeat: no-repeat} .board3 .table-pagination{margin-top: 15px} .board3 .m-visible {margin-bottom: 15px} .board3 .m-visible .table-row{padding: 15px} .board3 .m-visible .text{width: calc(100% - 120px); display: inline-block; float: left;} .board3 .m-visible .img{width: 120px; display: inline-block; float: left; padding-right: 15px; } .board3 .m-visible .title{line-height: 1.4em; max-height: 2.8em; overflow: hidden} .board3 .m-visible .content{line-height: 1.4em; max-height: 2.8em; overflow: hidden} .board3 .m-visible .wrapper{position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 100%; } .board3 .m-visible .thumbnail { width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat} .board3 .m-visible .thumbnail {position: absolute; top: 0; left: 0; background-position: center center; background-size: cover; background-repeat: no-repeat} .board3 .m-visible .board-more-btn{margin-top: 15px} @media (min-width: 992px){ .dh-builder .table3 .content{line-height: 1.4em; height: 11.2em; } } .board4 .table-row{border-bottom: 1px solid #ddd; padding: 15px; justify-content: center; align-items: center} .board4 .table-row:first-of-type{border-top: 1px solid #ddd;} .board4 .table-row:after{content: ""; clear: both; display: block} .board4 .title{font-weight: 600} .board4 .content{font-size: .9em; margin: 10px 0; overflow: hidden} .board4 .info{font-size: .85em; opacity: .8 } .board4 .info span{padding-right: 15px;} .board4 .wrapper{position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 100%; display: inline-block} .board4 .thumbnail { width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat} .board4 .thumbnail {position: absolute; top: 0; left: 0; background-position: center center; background-size: cover; background-repeat: no-repeat} .board4 .text{width: calc(100% - 150px); display: inline-block; float: left; padding-right: 15px;} .board4 .img{width: 150px; display: inline-block; float: left; } .board4 .title{line-height: 1.4em; max-height: 1.4em; overflow: hidden} .board4 .content{line-height: 1.4em; max-height: 2.8em; overflow: hidden} .board4 .table-pagination{margin-top: 15px} .board4 .m-visible .board-more-btn{margin-top: 15px} @media (max-width: 768px){ .board4 .text{width: calc(100% - 100px); } .board4 .img{width: 100px; } } @media (max-width: 552px){ .board4 .text{width: calc(100% - 60px); } .board4 .img{width: 60px; } } .board5-wrap .thumbnail {position: relative; width:} .board5-wrap .thumbnail:after{content: ""; display: block; padding-bottom: 100%;} .board5-wrap .gal-2 .thumbnail:after{ padding-bottom: 70%;} .board5-wrap .img{position: absolute; width: 100%; display: inline-block; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; top:0; left:0} .board5-wrap .text {padding:5px 0 } .board5-wrap .text a{display: block; padding: 4px 0; line-height: 1.3; word-break:break-all} .board5-wrap .text a:hover{text-decoration: none} .board5-wrap .text .title{font-weight: 600} .board5-wrap .text .content{font-size: .9em} .board5-wrap .m-visible .info{border-bottom: 1px solid #ddd; padding-bottom: 15px} .board5-wrap .info {opacity: .8} .board5-wrap .board-date, .board5-wrap .board-writer {font-size: .8em; padding: 2px 0 } .board5-wrap .m-visible .info span{display: inline-block; padding: 2px 8px 2px 0} .board5-wrap .info .board-writer .writer{display: none} .board5-wrap .info .board-writer .writer.active{display: inline} .board5-wrap .m-visible .gal{width:100%} .board6-wrap .thumbnail {position: relative; width: 40%;} .board6-wrap .thumbnail:after{content: ""; display: block; padding-bottom: 100%;} .board6-wrap .gal-2 .thumbnail:after{ padding-bottom: 70%;} .board6-wrap .img{position: absolute; width: calc(100% - 10px); display: inline-block; height: calc(100% - 10px); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; top:10px; left:10px} .board6-wrap .text {padding:5px 0 } .board6-wrap .text a{display: block; padding: 4px 0; line-height: 1.3; word-break:break-all} .board6-wrap .text a:hover{text-decoration: none} .board6-wrap .text .title{font-weight: 600} .board6-wrap .text .content{font-size: .9em} .board6-wrap .m-visible .info{border-bottom: 1px solid #ddd; padding-bottom: 15px} .board6-wrap .info {opacity: .8} .board6-wrap .board-date, .board5-wrap .board-writer {font-size: .8em; padding: 2px 0 } .board6-wrap .m-visible .info span{display: inline-block; padding: 2px 8px 2px 0} .board6-wrap .info .board-writer .writer{display: none} .board6-wrap .info .board-writer .writer.active{display: inline} .board6-wrap .m-visible .gal{width:100%} .blockMinHeight {height: 100vh; overflow: hidden;} .item-inner[data-img-origin="true"] img {cursor: pointer;} .item-inner[data-img-origin="true"] .img-wrapper {cursor: pointer;} .radio-group { display: flex; align-items: center; gap: 10px; } @media screen and (max-width: 768px){ .radio-group {display: none !important} .sub-board {display: none !important} } .radio-button label { cursor: pointer; font-size: 16px; color: #7f7f7f; margin-bottom: 0px !important; display: inline-block; transform-origin: center center; vertical-align: middle; margin-top: -7px; } .radio-button.active label { color: #161616; font-weight: bolder; } .radio-button input[type="radio"] { display: none; } .board4-icon{ transform: rotate(180deg); margin-bottom: 4px; display: inline-block; } .board1-icon{ margin-bottom: 4px; } #board-tmp-name{ font-size: 70%; } .tmp_slide_content{ position: absolute; top: 28px; left: 0; right: 0; margin: 0 auto; z-index: 2; pointer-events: none; } .tmp_slide_content .block-width{ pointer-events: auto; } .swiper-container { z-index: 0; }