/*포토갤러리*/ .galList{display:flex; flex-flow:row wrap; padding:2rem 0 4rem 0/*justify-content:space-between;*/} .galList .cardtheum {position:relative; width:100%; cursor:pointer; overflow:hidden;} .galList .cardtheum .p-photo:after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0)} .galList .cardtheum .p-photo {display:flex; justify-content:center; width:100%; position:relative; overflow:hidden} .galList .cardtheum .p-photo img {width:100%; height:100%; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;} .galList .cardtheum:hover .p-photo img{transform: scale(1.1);} .galList .cardtheum .p-name { word-break: keep-all; } .p-name { display:flex; flex-flow:row wrap; justify-content:center; align-items:center; width:100%; padding:1rem; opacity:0; position:absolute; z-index:200; left:50%; top:50%; transform:translate(-50%,-50%); font-family: 'Pretendard'; font-size:1.25rem; font-weight:500; text-align:center; letter-spacing:-0.08em; line-height:1.1; color:#fff; text-shadow: 1px 2px 4px rgba(0,0,0,0.2); transition-duration:0.5s } .p-name>span {display:inline-block; white-space:pre-wrap;} .galList .cardtheum:hover .p-name {opacity:1} .p-name>li {width:100%;display:flex; flex-flow:row wrap; justify-content:center; } .p-name>li:nth-of-type(1) {margin-bottom:1em} .p-name>li>span {font-weight:300; color:#999; font-size:14px; margin:2px 3px} .cardtheum {position: relative;cursor: pointer; overflow: hidden; margin: 0 0 7% 0;} .cardtheum a {display:block} .css-ecqpj1 {background-color: transparent;border: none;font-size: 14px;-webkit-flex: 1;-ms-flex: 1;flex: 1;color: #ffffff;font-size: 20px;overflow: visible;padding: 0.5em;height: 100%;width: 100%;outline: none;} .n-grid {width:100%;} .grid-sizer, .grid-item {width: 100%;} .gutter-sizer {width: 2%;} .galList .cardtheum a:before{ content:""; display:block; position:absolute; z-index:100; width:100%; height:100%; transform:translateY(100%); transition: transform 0.6s ease-in-out; background-color: rgba(2,157,247, 0.8); } /* hover effect */ .galList .cardtheum a:hover:before{ transform:translateY(0%); } @media only screen and (min-width:768px){ .grid-sizer, .grid-item {width:48%;} } @media only screen and (min-width:1000px){ .grid-sizer, .grid-item {width:31.333%;} .p-name {font-size:1.5rem;} } @media only screen and (min-width:1500px){ /*.grid-sizer, .grid-item {width:23%;}*/ .p-name {font-size:1.625rem;} } .button-group {display:flex; flex-flow:row wrap; justify-content:center; margin-top:2rem} .button-group>button {font-family: var(--font-title); border:none; padding:0.333em 1em; background:none; font-size:1.25rem; font-weight:700 !important; color:#ccc; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} .button-group>button:hover, .button-group>button.btn-active{color:var(--pcolor-blue); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} /*검색*/ .sch-option {background:rgba(214,209,198,0.4); height:0; overflow:hidden;} .schWarp {max-width:1400px; margin:0 auto} div.memSch {display:flex; flex-flow:row wrap; text-align:center; padding:1.5em 1em 0 1em;} div.memSch>.btnW {display:flex; justify-content:space-between; width:100%; font-size:14px; margin:5px 0 0 0} div.memSch>.btnW>a {display:inline-block} div.memSch>.btnW>a:focus {text-decoration:none} .memSch input[type=text] {width:100%;} .memSch .btnW input,.memSch .btnW a {display:inline-block; background:#fff; font-size:1.125em; font-weight:500; color:#fff; vertical-align:middle; height:56px; line-height:56px; width:49%; padding: 0 1em; border:none; border-radius:4px; transition:.2s ease-out;-webkit-appearance:none;-moz-appearance:none;} .memSch .btnW input {background-color:#003366;} .memSch .btnW a {background-color:#666666; } .memSch .btnW a:hover {text-decoration:none} .memSch select,.memSch input[type=text] {border-radius:4px;height: 56px;padding: 11px 20px 13px 20px; border: 2px solid #373737;font-size: 22px;} div.memSch .btnW .de-open {display:none;} div.memSch .btnW .de-close:after {content:"\e936"; font-family: xeicon!important; margin-left:5px} div.memSch .btnW .de-open:after {content:"\e930"; font-family: xeicon!important; margin-left:5px} .schWarp.active div.memSch .btnW .de-close {display:none;} .schWarp.active div.memSch .btnW .de-open {display:block} .schWarp.active .sch-option {height:auto;border:1px solid #ccc; padding:1em; margin:5px 1em 1em 1em} @media all and (min-width:980px){ .memSch input[type=text] {width:68%;} } /*검색옵션*/ .sch-option .schtit{padding-left:0 !important; margin-bottom:0.333em} .sch-option>div>div {margin-bottom:1em; padding-bottom:1em; border-bottom:1px dotted #ccc;} .sch-option.donation>div>div {border:0} .sch-option>div>div:last-child {margin-bottom:0; border:none} .sch-option .frm_chkbox01 input[type=checkbox] {display:inline-block;position:absolute;left:-1000px;width:1px;height:1px;opacity:0} .sch-option .frm_chkbox01 span {display:inline-block; position:relative; background-color:#fff; border:1px solid #ccc; border-radius:5px; height:38px; color:#666; font-size:14px; line-height:36px;text-align:center; margin:0 0.2% 1% 0.2%; padding:0 1em} .sch-option .frm_chkbox01 input:checked+span {border:1px solid #000000; color:#fff;background-color:#000000} .sch-option .frm_chkbox01 input:checked+span:after {content:"\e929"; font-family: xeicon!important; color:#ffff00; font-size:1.25em; vertical-align:middle; margin-left:5px} .inputW {display:flex; align-items:center} .inputW>input {width:48%} .inputW span.dash {width:4%; text-align:center;} .inputW span.dash:after {content:"~"; font-family: 'DM Sans'; color:#666} .option {display:flex; flex-flow:row wrap; align-items:flex-start; padding:0 1em;} .search-data {justify-content:space-between; color:#999999; font-weight:300; font-size:14px; border-bottom:0 !important} .search-data dl dt {margin-right:1em; color:#333; font-weight:400} .search-data dl dt i {margin-right:5px} .search-data dl dd {display:inline-block; margin:0 5px; color:#c24300; font-weight:500} .search-data dl dd span {vertical-align:top;height:16px; line-height:16px} .search-data .btn_del {vertical-align:top; text-indent: -2000px; width:16px; height:18px; margin-left:5px} .search-data .btn_del:after {content:"\e925";font-family: xeicon!important; text-indent: 0; font-size:1.25em; color:#000} .search-data a {font-size:1.125em; color:#003366; font-weight:500} .datepick {width:100%; display:flex; flex-flow:row wrap; align-items:center} .datepick li {position:relative;width:48%} .datepick span{position:relative;} .datepick li input {width:100%} .datepick li.dash {width:4%; text-align:center} .datepick li.dash:after{content:"~"; font-family: 'DM Sans'; color:#666} .datepick li.dash:before {display:none} .datepick li:before ,.datepick span:before{content:"\e9a4"; font-family: xeicon!important; font-size:24px; color:#ccc; position:absolute; right:10px; top:6px} @media all and (min-width:768px){ div.memSch {justify-content:space-between;} .schWarp.active .sch-option {padding:1em; margin:1em 0 1em 0} .sch-option>div.Flex-grid {justify-content:space-between} .sch-option>div>div {margin-bottom:0.666em; padding-bottom:0; border-bottom:0;} .sch-option>div>div:last-child {margin-bottom:0em; border-bottom:0px dotted #ccc;} .sch-option .schtit{padding:0 0.666em !important; text-align:center; margin-bottom:0} .schWarp>div.memSch>.btnW{width:25%; vertical-align:top; margin-top:0} .memSch select {width:15%;} .memSch input[type=text] {width:74%;} .process span {width:150px} } @media all and (min-width:1024px){ .button-group {margin:4rem 0 1rem 0} .sch-option>div>div {margin-bottom:0 } } @media all and (min-width:1200px){ div.memSch {padding:2em 0 0 0;} .sch-option>div>div {padding-bottom:0 !important; margin-bottom:0 !important; border-bottom:none !important} } /*상세화면*/ #detail_pop_up{position:fixed !important; display:none;} #detail-button {cursor:pointer; color:#fff; z-index:1001} table #detail-button {display:flex; justify-content:center; align-items:center; color:#222} .popupT {position:relative; width:100%; height:4rem; background:#003187; padding:1rem 4rem 1rem 1rem;} .popupT:before {content:""; left:1rem; top:1rem; position:absolute; width:130px; height:33px; background: url(../images/common/logo.png) no-repeat left center; background-size: cover;} /*.popupT:after {content:""; position: absolute; right:5rem; top:50%; transform:translateY(-50%); width: 100px;height: 75px;background: url(../images/common/slogun.svg) no-repeat center center;background-size: 80%;}*/ .infoBox {width:94%; min-width:320px; max-width:1000px; margin:0 auto; background:#fff; position:absolute; top:50% !important; left:50% !important; transform: translate(-50%,-50%); z-index:9001} .detailBox {display:flex; flex-flow:row wrap; justify-content:space-between; max-width:500px; padding:3%; margin:0 auto;/*align-items:center*/} .detailBox pre{white-space:pre-wrap; font-family:'DM Sans','nbg','Dotum','arial','sans-serif'; font-size:0.825em; color:#555; font-weight:300} #detail_pop_up .popupW {position:relative; width:100%; box-shadow:0 10px 20px rgba(0,0,0,0.15); overflow-y:auto} #detail_pop_up .popupW>.popup-close {box-shadow:none} #detail_pop_up .popupW:before {background:none} /*.popupW:before {content:""; position:absolute; left:0; top:0; z-index:8500; width:100%; height:50px; background:#1b355f url("../images/sub/popLogo.png") no-repeat 10px; 5px; background-size:95px }*/ #detail_pop_up .popupW {overflow-y: auto; padding:0} #detail_pop_up .popupW:before {display:none;} #detail_pop_up .popupW h3,#detail_pop_up .popupW h4 {font-family: var(--title-font); } #detail_pop_up .popupW h3 {color:#000; font-size:1.5rem;line-height:1.2; margin:0.666em 0 1em 0} #detail_pop_up .popupW h4 {color:#222; font-size:1.25rem; margin:0.333em 0 0.999em 0} #detail_pop_up .popupW h3 span {display:inline-block; /*white-space:nowrap;*/} #detail_pop_up .popupW .popup-close{ position:absolute; z-index: 9500; right:0em; top:0em; width:4rem; height:4rem; cursor:pointer; line-height:4rem; background:#c30e23; color:#fff; text-align:Center; font-size:1.5rem; transition: background .6s; } #detail_pop_up .popupW .popup-close:before { display:inline-block; font-family: 'Linearicons-Free'; content:"\e870"; transform:rotate(0deg); transition: all .6s; } #detail_pop_up .popupW .popup-close:hover{transition: all .6s; background-color:#333} #detail_pop_up .popupW .popup-close:hover:before{transform:rotate(90deg); transition: all .6s;} #detail_pop_up .popupW .popup-close span {background:rgba(255,255,255,0.3); width: 3rem; height: 2px;display: block;margin:0.25rem 0.6rem;border-radius: 35px; transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);} #detail_pop_up .popupW .popup-close span:nth-of-type(2) {position: relative; opacity: 0;} #detail_pop_up .popupW .popup-close span:first-of-type {margin-top:1.25rem;transition: all 0.6s; transform: rotate(-45deg) translate(-8px, 8px);} #detail_pop_up .popupW .popup-close span:last-of-type { position: relative;margin-top: 0;transform: rotate(45deg) translate(-4px, -4px);} .detailInfo {width:100%} .detailInfo dl {display:flex; flex-flow:row wrap; justify-content:space-between; padding:2rem 0; border-top:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8} .detailInfo dl dt,.detailInfo dl dd {margin-bottom:0.333em} .detailInfo dl dt {position:relative;width:30%;padding-left:0.666em; color:#a7a7a7; font-size:0.725em; text-transform: uppercase} .detailInfo dl dt:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:4px; background:#ccc } .detailInfo dl dd {width:70%; color:#000; font-family:var(--default-font); font-size:0.875em; } .detailInfo .btnW {width:90%; display:flex; flex-flow:row wrap; justify-content:space-between} .detailInfo .btnW li {width:48%; margin:0 0 4% 0} .detailInfo .btnW li a {width:100%} .theumSlider {width:100%;} .theumSlider .slick-dotted.slick-slider {margin-top:1rem} .theum-slide-for{position:relative; width:100%; margin:0 0 1em 0 !important;} .theum-slide-for li{display:flex !importat; /*height:300px;*/} .theum-slide-for li img{width:100%; height:auto; max-height:500px; margin:0 auto} .theumSlider .slick-dots li {margin:0 3px} .theumSlider .slick-dots {bottom:2rem; z-index:9100} .theumSlider .slick-dots button:before {color:#fff; font-size:0.825rem} .theumSlider .slick-dots .slick-active button:before {color:#c30e23} .inbox1 {width:90%; padding:0.666rem 1.5rem; margin:1rem 0 1.5rem 0; border:1px dotted #ccc; background:#f7f7f7; font-size:0.875em} .inbox1>dl>dt {width:70px} .inbox1>dl>dd {width:calc(100% - 70px)} .theum-slide-nav li a{display:block; background:#fff; padding:4px} .theum-slide-nav .slick-current a{border:1px solid #000; box-sizing:border-box;} .theum-slide-nav .slick-current a:focus{} .theum-slide-nav li a img{/*height:45px;*/ margin:0 auto; max-height: 70px !important;} .theum-slide-nav .slick-prev,.theum-slide-nav .slick-next {position:absolute; top:50%; z-index:1; width:30px; height:100%; border:0px; font-size:0px; background:rgba(0,0,0,1)!important} .theum-slide-nav .slick-prev:hover,.theum-slide-nav .slick-next:hover {background:rgba(0,0,0,1)} .theum-slide-nav .slick-prev{left:0px;} .theum-slide-nav .slick-prev:before,.theum-slide-nav .slick-next:before {color:#fff; font-family: xeicon !important; font-size:24px} .theum-slide-nav .slick-prev:before {content: "\e93d";} .theum-slide-nav .slick-next{right:0px;} .theum-slide-nav .slick-next:before {content: "\e940";} .potfoloSwiper .swiper-button-next:after, .potfoloSwiper .swiper-button-prev:after { font-family: 'Linearicons-Free'; color:#fff; } .potfoloSwiper .swiper-button-next:after {content:"\e876";} .potfoloSwiper .swiper-button-prev:after {content:"\e875";} @media all and (min-width:1000px){ .detailBox {max-width:none; padding:3%;} #detail_pop_up .popupW {overflow:hidden} #detail_pop_up .popupW h3 {font-size:2.0em; margin:1em 0 0.875em 0; line-height:1.0} .detailInfo {width:50%} .detailInfo dl dt {width:120px} .detailInfo dl dd {width:calc(100% - 120px)} .detailInfo dl dt,.detailInfo dl dd {margin-bottom:0.666em} .inbox1>dl>dt {width:70px} .inbox1>dl>dd {width:calc(100% - 70px)} .theumSlider {width:400px} .theum-slide-for li{/* height:500px;*/} .theum-slide-nav{/*height:100px;*/} .theum-slide-nav li a img{} } @media all and (min-width:1500px){ } /*갤러리*/ .galSec {background:#f3f3f3} .galSlider {display:flex; flex-flow:row wrap; justify-content:space-between} .gal-slide-for {width:100%} .gal-slide-nav {width:100%} .gal-slide-for img {width:100%} .gal-slide-nav .slick-track {width:100% !important; display:flex; flex-flow:row wrap; transform: translate3d(0px, 0px, 0px)!important;} .gal-slide-nav .slick-slide {width:21% !important; margin:2%; line-height:0} .gal-slide-nav .slick-slide {border:6px solid #fff; transition: all 0.6s;} .gal-slide-nav .slick-slide:hover,.gal-slide-nav .slick-current {border:6px solid #00dbef} .gal-slide-nav .slick-slide img {max-width:100%;} .gal-slide-nav .slick-list {padding:0!important} @media all and (min-width:1000px){ .gal-slide-for {width:60%} .gal-slide-nav {width:35%} .gal-slide-nav .slick-slide {width:46% !important; margin:2%} } /*탭메뉴*/ .bbstab {position:relative; background:#fff; padding:0 1em;} .bbstab .bbsTotal {position:absolute; top:50%; right:1em; transform:translateY(-50%)} .bbstab>ul{position:relative; display:flex; align-items:center; margin:1em 0 0.333em 0;} .bbstab>ul>li {position:relative; border-radius:16px; overflow:hidden; margin: 0 9px 9px 0;} .bbstab>ul>li:first-child {border-right:0} .bbstab>ul>li>a{text-align:center; font-size:0.825em; background-color:#f6f6f6; color:#808080; font-weight:400; padding:0.666em 1em; display:block;} .bbstab>ul>li>a,.bbstab>ul>li>a:hover,.bbstab>ul>li>a:visited,.bbstab>ul>li>a:active {text-decoration:none !important} .bbstab .board-con {position:relative; padding:0 1em} .mBoard.hide{position:absolute; left:-9999em; top:-9999em; width:100%;} /*.bbstab>ul>li.current:after{content:""; display:block; width:80%; height:2px; background:#143632; position:absolute; left:0; bottom:-2px}*/ .bbstab>ul>li.current>a{background:#8a7257; color:#f6f6f6; font-weight:700; letter-spacing:-1px} @media only screen and (min-width:1000px){ .bbstab {padding:0} .bbstab>ul {margin:3em 0 0.333em 0;} .bbstab>ul>li>a {font-size:1.125em; padding:1em 1.5em;} } @media only screen and (min-width:1200px){ .bbstab>ul {margin:4em 0 0.333em 0;} } /*스크롤*/ .scroll-down { position:relative; padding-top: 25px; text-align:center; width: 100%; cursor: pointer; margin-bottom:4rem; } .arrow-down { display: block; margin: 0 auto; width: 11px; } .arrow-down:after { content: ''; display: block; margin: 0; padding: 0; width: 11px; height: 11px; border-top: 3px solid #222; border-right: 3px solid #222; behavior: url(-ms-transform.htc); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .scroll-text { display: block; text-transform: uppercase; color: #222; font-style:normal; font-size:0.625rem; letter-spacing:-0.03em; margin:1rem 0 } .scroll-down:before { -webkit-animation: elasticus 1.2s ease-in-out infinite; /* Safari 4+ */ -moz-animation: elasticus 1.2s ease-in-out infinite; /* Fx 5+ */ -o-animation: elasticus 1.2s ease-in-out infinite; /* Opera 12+ */ animation: elasticus 1.2s ease-in-out infinite; /* IE 10+, Fx 29+ */ position: absolute; top: 0px; left: 50%; transform:translateX(-50%); width: 2px; height: 36px; background: #222; content: ' '; } @-webkit-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @-moz-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @-o-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } /*페이징*/ .boardPaging {position:relative; padding:0 0 0 0; /*margin-top:3rem; border-top:1px solid #ccc*/} .allPage{display:none; position:absolute; top:0; padding:0.333em 1em; background:#eee; border-radius:20px; font-size:0.725rem; color:#666} .allPage span{font-weight:400;} .allPage span.b{color:#202020; font-weight:700} .allPage strong{padding-right:10px;} .pagenation{display:none;} .m-pagenation{display:block;} .m-pagenation .inner {display:flex; justify-content:center; align-items:center /*justify-content:space-between*/} .m-pagenation{margin-top:1rem; text-align: center} .m-pagenation a{display:inline-block; vertical-align:middle; padding:0 0.222em} .m-pagenation a.last{margin-right:0} .m-pagenation .num{display:inline-block; margin:0 0.333em; padding:0.333em 0.666em; font-size:1.725rem; color:#666; line-height:1em; vertical-align:middle; background: #f8f8f8; border-radius:10px} .m-pagenation .num strong{color:#202020;} @media only screen and (min-width:1200px){ .allPage {display:block} .galList>div.cardtheum {width:23%;} .m-pagenation{display:none;} .pagenation{display:block; text-align:center; margin:2.5rem 0; clear:both;} .pagenation .inner {display:flex; justify-content:center; align-items:center} .pagenation a{display:inline-block; vertical-align:top; margin-right:25px;} .pagenation a img{width:24px; height:27px;} .pagenation a.prev img, .pagenation a.next img{width:14px; height:27px;} .pagenation a.last{margin-right:0} .pagenation ul{display:inline-block; line-height:27px; vertical-align:middle;} .pagenation ul li{display:inline-block;} .pagenation ul li a{font-size:24px; color:#999; line-height:24px;} .pagenation ul li a.on{color:#222; box-sizing: border-box} .pagenation ul li:last-child{margin-right:0} } /*회사소개*/ .infoW { background-color:#383c3d; background-image:url(/images/contents/infoBG.jpg); background-repeat:no-repeat; background-size:cover; background-position:left bottom; background-attachment: fixed; } [class*='infosec'] { padding:3rem 2rem; font-family:var(--default-font); color:#fff; } .infosec1 {background-color:var(--base-color2)} .infosec1 h3 {margin-bottom:var(--margin-1);} .infosec1 h3 span {display:inline-block; position:relative; z-index:1} .infosec2 {background-color:rgba(27,28,33,0.8);} .infosec1 p:nth-of-type(1) {line-height:var(--lineH1)} .infosec2 ul {position:relative; } .infosec2 ul li {padding-left:1.5rem;font-family:var(--title-font); font-size:var(--text-xl); margin-bottom:var(--margin-1)} .infosec2 ul:before { content:""; width:5px; height:100%; background-color:var(--point-color); position:absolute; left:0; top:5px } .infosec2 dl {display:flex; flex-flow:row wrap; gap:1rem} .infosec2 dl dt {font-size:var(--text-3xl); font-weight:var(--font-weight-8)} .infosec3 p {font-size:var(--text-xl);} /*Business*/ .aboutBox {background-color:#eee} .inText {padding:0 var(--secgap);} .ctlogo img {max-height:60px} @media only screen and (min-width:768px){ } @media only screen and (min-width:1000px){ .infosec3 p {margin-bottom:1rem; font-size:var(--text-2xl);} .infosec1 h3:after { content:""; position:absolute; z-index:0; top:50%; right:0; width:70%; height:1px; background-color:var(--point-color); animation-duration: 3s; animation-name:titleLine2; animation-direction: alternate; } } @media only screen and (min-width:1400px){ } .subHeader { background-color:#f7f7f7; border-radius:30px; padding:2rem 4rem 2rem 2rem; margin-bottom:var(--margin-buttom-2); position:relative; background-repeat:no-repeat; background-position:120% bottom; background-size:40%; object-fit:contain; } .hisHeader {background-image:url(/images/contents/historyTop.svg);} .organHeader {background-image:url(/images/contents/organTop.svg);} .supportHeader { background-image:url(/images/contents/supportTop.svg); background-position:96% top !important; } .volunteerHeader { background-image:url(/images/contents/volunteerTop.svg); background-position:98% 100% !important; background-size:25%; } .subHeader h4 {position:relative; display:inline-block; font-size: var(--stxt); margin-bottom:1.5rem; padding-bottom:4px} .subHeader h4:before { content:""; box-shadow: 0 -0.7em 0 rgb(0 0 0 / 70%) inset; position:absolute; width:100%; height:2px; bottom:-2px; } .subHeader p { font-family:var(--default-font); color:#666; font-weight: var(--font-weight-5); } .subHeader p span {display:inline-block; white-space:nowrap} @media only screen and (min-width:980px){ .subHeader {background-size:contain; background-position:right bottom;} } @media only screen and (min-width:1400px){ .subHeader {padding:4rem 30% 4rem 4rem;} .subHeader p {font-size: var(--mtxt);} .supportHeader p,.volunteerHeader p {font-size: var(--lmtxt); color:var(--font-color-5)} .subHeader h4 { margin-bottom:2rem} .hiscnt>ul>li {padding-left:200px; font-size: var(--ltxt); margin-bottom:2rem} .historyW>div.histit {padding:2rem 4rem} } /*제품리스트*/ .bezier {transition: transform 0.55s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);} .theumList {display:flex; flex-flow:row wrap; gap:1rem; width:calc(100% + 1rem); margin-bottom:var(--secgap)} .theumList>div { width:calc(50% - 1rem); transition: transform 0.55s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1); } .theumList .pic {display:flex; align-items:cetner; min-height:250px; border:1px solid #ccc; padding:1.25rem} .theumList .pic img {transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);} .theumList h4 {color:var(--color-1); font-weight:var(--font-weight-8); font-size:var(--text-2xl); margin-bottom:var(--margin-1)} .theumList span {color:var(--color-1); font-size:var(--text-l)} .theumList a:hover .pic { transform: scale(1.0); overflow:hidden} .theumList a:hover .pic img{ transform: scale(0.9); transform-origin: center; animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-fill-mode: both; } .theumList a:hover .theumTit {transform:translateX(1rem);} .theumList a:hover h4 { color:var(--point-color);} .theumList span {color:var(--color-1)} .arrowmore {display:flex; align-items:center; gap:1rem} @keyframes imgReveal { 0% { transform: scale(1.0); } 100% { transform: scale(0.9); } } @media (min-width: 768px){ } @media (min-width: 1200px){ .theumList {width:calc(100% + 2rem); gap:2rem} .theumList>div {width:calc(33.333% - 2rem);} .theumList h4 {font-size:var(--text-2xl);} } @media (min-width: 1600px){ .theumList {width:calc(100% + 3rem); gap:3rem} .theumList>div {width:calc(25% - 3rem);} } /*오시는 길*/ .fullmapW {position:relative; border-bottom:1px solid #ccc} .fullmap { width:100% !important; height:400px; overflow:hidden; } .fullmapW a {position:absolute; z-index:9990; right:1rem; bottom:1rem} .contactInfo { padding:var(--boxpd) 0; font-family:var(--sub-title); font-size: var(--15ltxt); color:var(--font-color-5); } .contactInfo ul li{ position:relative; padding-left:2rem; line-height:1; margin-bottom:var(--margin-1) } .contactInfo ul li:before { content:""; font-family: 'Linearicons-Free'; position:absolute; left:0; top:0; } .contactInfo ul li.locate:before {content:"\e833";} .contactInfo ul li.tel:before {content:"\e831";} .contactInfo ul li.mail:before {content:"\e818";} .number { font-family:var(--eng-title); font-weight: var(--font-weight-8); color:var(--font-color-6); font-size:1.25em } @media only screen and (min-width:768px){ } /*사업안내*/ .titHeader { position:relative; background-color:#f6f6f1; background-size:80px; background-position:96% 10%; background-repeat:no-repeat; padding:1.25rem 1rem 1.25rem 2rem; border-radius:22px; overflow:hidden; margin-bottom:var(--margin-buttom-2); } .titHeader:before { content:""; width:0.666rem; height:100%; background-color:#95b1c3; position:absolute; left:0; top:0; } .titH1 {background-image:url(/images/contents/titHicon1.svg)} .titH2 {background-image:url(/images/contents/titHicon2.svg)} .titH3 {background-image:url(/images/contents/titHicon3.svg)} .titH4 {background-image:url(/images/contents/titHicon4.svg)} .titH5 {background-image:url(/images/contents/titHicon5.svg)} .titH6 {background-image:url(/images/contents/titHicon6.svg)} .titH7 {background-image:url(/images/contents/titHicon7.svg); background-size:100px; background-position:96% 50%} .titHeader h3{ font-family:var(--sub-title-font); font-weight: var(--font-weight-7); font-size: var(--2ltxt); color:#0072bc; margin-bottom:1.5rem } .titHeader h4 {position:relative; display:inline-block; font-size: var(--stxt); margin-bottom:1.5rem; padding-bottom:4px} .titHeader h4:before { content:""; box-shadow: 0 -0.7em 0 rgb(0 0 0 / 70%) inset; position:absolute; width:100%; height:2px; bottom:-2px; } .service { display:flex; flex-flow:column; gap:2em } .service.row {flex-flow:row wrap} .service>div { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; margin-bottom:var(--margin-buttom-1); } .service.row div { flex-flow:column; justify-content:flex-start; flex:1 1 0; min-width:200px; /*max-width:280px;*/ background:#f7f7f7; border-radius:22px 0 } .service.row div.wide {flex:2 1 0;} .service.row div ul {width:100%; padding:2rem} .service>div>p {width:100%; font-weight: var(--font-weight-5); line-height:var(--lineH-w)} .service>div>p>span {display:inline-block; white-space:nowrap;} .service>div>h4 { min-width:160px; width:20%; max-width:200px; background:#b3c188; padding:1rem; font-family:var(--sub-title-font); font-weight: var(--font-weight-7); font-size: var(--ltxt); color:#fff; text-align:center; line-height:1.2; border-radius:22px 5px; margin-bottom:var(--margin-buttom-1); } .service>div>ul>li { margin-bottom:0.333rem; font-size: var(--mtxt); font-weight: var(--font-weight-7); color:var(--font-color-5) } .service>div>ul>li>ul{display:flex; flex-flow:row wrap; padding:0.333rem 0 !important} .service>div>ul>li>ul>li{ font-size: var(--smtxt); color:var(--font-color-6); font-weight: var(--font-weight-4); margin-bottom:0.333rem; margin-right:0.333rem; padding:0 } .service.row>div>h4 {width:100%; max-width:100%; border-radius:22px 0 0} .service>div:nth-of-type(2n)>h4{background:#b88371;} @media only screen and (min-width:640px){ .service>div>p {width:calc(100% - 250px); font-size: var(--mtxt);} .service>div>h4{padding:1.5rem 0; margin-bottom:var(--margin-buttom-0);} } @media only screen and (min-width:980px){ .titHeader {background-size:128px;background-position:94% center; padding:2rem 2rem 2rem 4rem} .titHeader:before {width:1rem} .service>div>ul>li>ul {/*gap:1rem;*/} } @media only screen and (min-width:1400px){ .titHeader {background-size:144px; padding:2.125rem 2.125rem 2.125rem 4.125rem} .titHeader.titH7 {background-size:100px;} .titHeader p {font-size: var(--mtxt);} .service>div>p {font-size: var(--lmtxt);} } /*사진*/ .gridPhoto { display:flex; flex-flow:row wrap; justify-content:space-evenly; gap:1rem; } .gridPhoto li {width:calc(50% - 1rem)} .gridPhoto li span {display:block; text-align:center; padding:0.666rem; background-color:var(--bg-color-f7)} @media only screen and (min-width:780px){ .gridPhoto li {width:calc(33.333% - 1rem)} } @media only screen and (min-width:1200px){ .gridPhoto {gap:2rem;} .gridPhoto li {width:calc(25% - 2rem)} } /*갤러리*/ .phGallery{position:relative; max-width:1200px; margin:0 auto; margin-bottom:3rem} .phGallery:before { width:100%; height:calc(50% - 40px); content:""; background-color:#f5f5f5; position:absolute; left:0; bottom:0; border-radius:0px; } .phSwiper {position:relative; overflow:hidden; margin-bottom:2rem; } .phSwiper .swiper-slide {position:relative;overflow:hidden /*max-height:720px;*/} .phSwiper .swiper-slide img {width:100%; object-fit:contain;} .phSwiper .swiper-slide p { position:absolute; right:2%; transform: translate(-2rem,-200%); font-family:var(--sub-title-font); font-weight: var(--font-weight-7); font-size: var(--15ltxt); color:#fff; text-shadow: rgba(0,0,0,0.5) 1px 0 10px; } .cv_button {position:relative; width:150px; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin:1rem} .swiper-pagination-cv { display:none; width:100%; margin-top:1rem; text-align:center; position:absolute; z-index:90; right:1rem; bottom:120px !important } .phGallery:after { display:block; width:120px; height:120px; background-image:url(/images/contents/people1.svg); content:""; position:absolute; transform:translateX(-10%); z-index:10; right:0; bottom:0 } .swiper-button-prev-cv,.swiper-button-next-cv {width:60px; height:20px; padding:1rem; background-repeat:no-repeat; background-position:center; cursor:pointer; opacity:0.4; transition: opacity 0.6s, width 0.6s, height 0.6s;} .swiper-button-prev-cv {background-image:url(/images/contents/arr_basic.svg); transform: rotate(180deg);} .swiper-button-next-cv {background-image:url(/images/contents/arr_basic.svg); margin-left:1rem} .swiper-button-next-cv .cursor{position: absolute; border-radius: 50%; border: 1px solid white; top: 0; left: 0; pointer-events: none; user-select: none; transform: translate(-50%,-50%); opacity: 0; width: 40%; height: 40%; transition: opacity 0.6s, width 0.6s, height 0.6s;} .swiper-button-next-cv .cursor.on{opacity: 1; width: 100%; height: 100%;} .swiper-button-prev-cv:hover,.phSwiper .swiper-button-next-cv:hover {opacity:1} .swiper-pagination-cv .swiper-pagination-bullet {margin:0.222rem; width:4px; height:4px} .swiper-pagination-cv .swiper-pagination-bullet-active {background:#c6a582;} .picName {opacity:0; color:#666; position:absolute; bottom:-10%; left:50%; transform:translate(-50%,100%);transition: 0.3s;} .swiper-slide-active .picName {opacity:1;transform:translate(-50%,0);} @media all and (min-width:1200px) { .swiper-pagination-cv {display:block; display:flex; justify-content:center} .cv_button {margin:2rem; justify-content:space-between} .swiper-pagination-cv .swiper-pagination-bullet {margin:0.333rem; width:8px; height:8px} .phGallery:before {transform:translateY(5%)} .phGallery:after { width:240px; height:240px; } } ul.board_tabs { margin:20px; auto; text-align:center; } ul.board_tabs li { display:inline-block; margin:0 5px; } ul.board_tabs li a { display:block; padding:15px; border:1px solid #ccc; border-radius:5px; } ul.board_tabs li.active a, ul.board_tabs li a:hover { background:#626262; color:#efefef; } /*견적문의*/ .contactUs {display:flex; flex-flow:row wrap; justify-content:space-between} @media all and (min-width:1200px) { .lcnt {width:30%} .rcnt {width:60%} } /*글쓰기*/ .write-form-prt { margin:var(--secgap) 0; background-color: #fff; padding: 40px 30px; box-shadow: #ccc 0px 1px 11px; } .contact-group { display: flex; flex-flow: row wrap; width: 100%; justify-content: space-between; padding-top: 20px; padding-bottom: 40px; } .contact-group .contact-form-prt { width: 100%; background-color: #fff; padding: 40px 30px; box-shadow: #ccc 0px 1px 11px; } .contact-info { width: 34%; background-color: #1089ff; font-family:var(--sub-title-font); color: #fff; padding: 40px 30px; } .contact-group h4 { font-family:var(--eng-title); font-weight:var(--font-weight-8); font-size: var(--2ltxt); color: #000; margin: 0 0 10px 0px; } .contact-info h4 { color: #fff; } .c-info-item span.lnr { display:flex; justify-content:center; align-items:center; background-color:var(--base-color1); width:50px; height:50px; color:#fff; font-size:var(--text-xl) } .form { display: flex; flex-flow: row wrap; width: 100%; margin: auto; justify-content: space-between; } .form-group { width: calc(50% - 10px); margin: 10px 0px; } .form-group-100 { width: calc(100%); margin: 10px 0px; } .form-control { width: 100%; padding: 10px 15px; outline: none; border: #ccc 1px solid; font-size: 1.25rem; font-family: var(--default-font); transition: 0.5s all; } select.form-control { appearance: none; padding: 12px; background-image: url(/images/contents/slt-arrow-down.svg); background-repeat: no-repeat; background-position: calc(100% - 5px) 20px; } .form-control:focus { border-color: #000; } .form-control::-webkit-input-placeholder { color: #000; font-size:var(--text-xs); font-weight:var(--font-weight-3); } .form-control:-ms-input-placeholder { color: #000; } .form-control::placeholder { color: #000; } .fg-full-width { width: 100%; } textarea.form-control { height: 150px; } .submit-btn { padding: 10px 40px; border: none; outline: none; font-family: var(--title-font); font-size: var(--ltxt); text-transform: uppercase; background-color: var(--point-color); color: #fff; cursor: pointer; transition: 0.5s all; } .submit-btn:hover { opacity: 0.8; } .gray-btn {background-color:#666} .c-info-item { display: flex; flex-flow: row wrap; width: 100%; margin: 30px 0px; align-items: center; } .c-info-item .c-info-icon { width: 60px; height: 60px; border-radius: 100%; background-color: rgba(255, 255, 255, 0.3); display: flex; flex-flow: row wrap; align-items: center; justify-content: center; } .c-info-item .c-info-icon img { width: 26px; filter: brightness(0) invert(1); } .c-info-item .c-info-cont { width: calc(100% - 60px); padding-left: 1rem; display: inline-block; font-weight:var(--font-weight-8); font-size:var(--text-lg); } .c-info-item .c-info-cont span {display:inline-block; white-space:nowrap} .c-info-item .c-info-cont a {color:var(--color-1)} .file-main { max-width: 500px; width: 100%; margin: auto; padding: 40px; min-height: 300px; background-color: #e1e1e1; display: flex; flex-flow: row wrap; align-content: center; justify-content: center; } .file-group { width: 100%; position: relative; font-size: 15px; } .file-group>input {display:none} .file-group .btnupload { position: absolute; right: 10px; top: 10px; background-color: #3F7799; color: #fff; display: flex; flex-flow: row wrap; justify-content: center; pointer-events: none; padding: 6px 14px; } .file-group .custom-text { white-space: nowrap; overflow: hidden; width: 100%; display: inline-block; text-overflow: ellipsis; padding: 14px 90px 14px 16px; border-radius: 4px; font-size: 16px; border: 1px #3F7799 solid; color: #3F7799; line-height: normal; cursor: pointer; } @media(max-width:992px) { .form-group { width: 100%; } .contact-group .contact-form-prt, .contact-info { width: 100%; padding: 25px 15px; } }