/*Table Content
=================================================
* BASIC STYLE
- Typography Style
- Padding and Margin Style
- General Style
- Box Hover Style
- Form Style
* HEADER
- Header Style
- Header style 2
- Navigation Menu
* FOOTER
* ELEMENTS
- Main Banner
- Page Intro
- Testimonial
- Pagination Navigation
- Sidebar Widget
- blog Section
- Partner Section
- About Us Page
- Timeline Section
- Team
- Serve
- Faq Page
- 404 page
- Blog Page
- Register and login Pages
- Contact Page
- Preloader
================================================
*/
/*-------------------------------------------------------------------------------------------*/
/* BASIC STYLE ||---------------------------- */
/*-------------------------------------------------------------------------------------------*/
body, html {
margin: 0;
padding: 0;
}
body {
line-height: 24px;
color: #323232;
font-size: 14px;
font-weight: 400;
font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
}
/* Typography Style ||-----------*/
h1 {
font-size: 60px;
margin-top: 0;
font-family: 'Noto Sans KR', sans-serif;
text-transform: uppercase;
position: relative;
}
h1 span {
position: relative;
}
h1:before {
content: attr(data-title);
font-size: 61px;
margin-top: 0;
font-family: 'Noto Sans KR', sans-serif;
text-transform: uppercase;
position: absolute;
top: 4px;
left: 3px;
color: rgba(6, 60, 54, 0.08);
z-index: 0;
}
h2 {
font-size: 30px;
margin-top: 0;
font-family: 'Noto Sans KR', sans-serif;
text-transform: uppercase;
}
h5 {
font-size: 15px;
line-height: 1.5;
font-weight: 800;
}
h6 {
font-size: 13px;
letter-spacing: 2px;
line-height: 17px;
font-weight: 800;
}
h3, h4, h5, h6 {
font-family: 'Noto Sans KR', sans-serif;
text-transform: uppercase;
margin-top: 10px
}
h2 span, h3 span {
font-weight: 300;
}
a:hover, a:focus {
text-decoration: none;
outline: none;
}
a {
color: #333;
}
/* Padding and Margin Style ||-----------*/
.no-padding {
padding: 0;
}
.padding-20 {
padding: 20px;
}
.padding-30 {
padding: 30px;
}
.padding-40 {
padding: 40px;
}
.padding-60 {
padding: 60px;
}
.plr-0 {
padding-left: 0;
padding-right: 0;
}
.pl-0 {
padding-left: 0;
}
.pr-0 {
padding-right: 0;
}
.pr-30 {
padding-right: 30px;
}
.pl-70 {
padding-left: 70px;
}
.pr-70 {
padding-right: 70px;
}
.plr-20 {
padding-left: 20px;
padding-right: 20px;
}
.ptb-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.pt-0 {
padding-top: 0px;
}
.pb-0 {
padding-bottom: 0px;
}
.pt-30 {
padding-top: 30px;
}
.ptb {
padding-top: 80px;
padding-bottom: 80px;
}
.ptb2 {
padding-top: 40px;
padding-bottom: 100px;
}
.pt {
padding-top: 110px;
}
.pb {
padding-bottom: 110px;
}
.ptb-15 {
padding-top: 15px;
padding-bottom: 15px;
}
.pt-15 {
padding-top: 15px;
}
.pb-15 {
padding-bottom: 15px;
}
.ptb-60 {
padding-top: 80px;
padding-bottom: 80px;
}
.pt-60 {
padding-top: 60px;
}
.pt-80 {
padding-top: 80px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-40 {
padding-bottom: 40px;
}
.ptb-40 {
padding-bottom: 40px;
padding-top: 40px;
}
.ptb-80 {
padding-top: 80px;
padding-bottom: 80px;
}
.pt-80 {
padding-top: 80px;
}
.pb-80 {
padding-bottom: 80px;
}
.pt-50 {
padding-top: 50px;
}
.pb-50 {
padding-bottom: 50px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-38 {
padding-bottom: 38px;
}
.mtb-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.mlr-0 {
margin-left: 0px;
margin-right: 0px;
}
.mt-0 {
margin-top: 0px;
}
.mb-0 {
margin-bottom: 0px;
}
.ml-0 {
margin-left: 0px;
}
.mr-0 {
margin-right: 0px;
}
.mtb-80 {
margin-top: 80px;
margin-bottom: 80px;
}
.mt-20 {
margin-top: 20px;
}
.mt-80 {
margin-top: 80px;
}
.mb-80 {
margin-bottom: 80px;
}
.mtb-60 {
margin-top: 60px;
margin-bottom: 60px;
}
.mt-60 {
margin-top: 60px;
}
.mb-60 {
margin-bottom: 60px;
}
.mtb-45 {
margin-top: 45px;
margin-bottom: 45px;
}
.mt-45 {
margin-top: 45px;
}
.mb-45 {
margin-bottom: 45px;
}
.mt-40 {
margin-top: 40px;
}
.mb-35 {
margin-bottom: 35px;
}
.mb-20 {
margin-bottom: 20px;
}
.mtb-30 {
margin-top: 30px;
margin-bottom: 30px;
}
.ml-15 {
margin-left: 15px;
}
.mt-30 {
margin-top: 30px;
}
.mb-30 {
margin-bottom: 30px;
}
.ml-30 {
margin-left: 30px;
}
.mr-30 {
margin-right: 30px;
}
.mtb-25 {
margin-top: 25px;
margin-bottom: 25px;
}
.mt-25 {
margin-top: 25px;
}
.mb-25 {
margin-bottom: 25px;
}
.mtb-15 {
margin-top: 15px;
margin-bottom: 15px;
}
.mt-15 {
margin-top: 15px;
}
.mt-10 {
margin-top: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.mt-up {
margin-top: -100px;
}
@media (min-width: 768px) and (max-width: 991px) {
.mt-sm-30 {
padding-top: 30px;
}
.float-none-sm {
float: none;
}
.float-left-sm {
float: left;
}
.float-right-sm {
float: right;
}
.pl-sm-0 {
padding-left: 0;
}
.plr-xs-15 {
padding-right: 15px;
padding-left: 15px;
}
.mb-sm-30 {
margin-bottom: 30px;
}
.padding-sm-25 {
padding: 25px;
}
}
@media (max-width: 767px) {
.text-xs-left {
text-align: left;
}
.pr-xs-0 {
padding-right: 0;
}
.pl-xs-0 {
padding-left: 0;
}
.pr-xs-0 {
padding-right: 0;
}
.plr-xs-15 {
padding-right: 15px;
padding-left: 15px;
}
.padding-sm-25 {
padding: 25px;
}
.pb-xs-30 {
padding-bottom: 30px;
}
.pt-xs-60 {
padding-top: 60px;
}
.ptb-xs-40 {
padding-top: 40px;
padding-bottom: 40px;
}
.pt-xs-40 {
padding-top: 40px;
}
.pb-xs-40 {
padding-bottom: 40px;
}
.pb-xs-60 {
padding-bottom: 60px;
}
.ptb-xs-60 {
padding-top: 60px;
padding-bottom: 60px;
}
.ml-xs-0 {
margin-left: 0;
}
.mtb-xs-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.mt-xs-0 {
margin-top: 0px;
}
.mb-xs-0 {
margin-bottom: 0px;
}
.mtb-xs-15 {
margin-top: 15px;
margin-bottom: 15px;
}
.mt-xs-15 {
margin-top: 15px;
}
.mb-xs-15 {
margin-bottom: 15px;
}
.mtb-xs-30 {
margin-top: 30px;
margin-bottom: 30px;
}
.mt-xs-30 {
margin-top: 30px;
}
.mb-xs-30 {
margin-bottom: 30px;
}
.float-none-xs {
float: none;
}
.float-left-xs {
float: left;
}
.float-right-xs {
float: right;
}
}
/* General Style ||-----------*/
.no-brdr {
border: none;
}
.left-bg {
position: relative;
}
.right-bg {
position: relative;
}
.left-bg:before {
content: '';
width: 50%;
height: 100%;
background: #000;
position: absolute;
top: 0;
left: 0;
display: block;
}
.right-bg {
position: relative;
}
.right-bg:before {
content: '';
width: 36%;
height: 100%;
background: #000;
position: absolute;
top: 0;
right: 0;
display: block;
}
.color {
color: #daa106;
}
.light-color * {
color: #fff;
}
.italic {
font-style: italic;
}
.about-block p {
line-height: 2;
}
.v-align {
display: inline-block;
vertical-align: top;
}
.btn-text {
font-size: 13px;
color: #fff;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 700;
line-height: 60px;
border: 2px solid #daa106;
padding: 0 40px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 50px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
background: #daa106;
min-width: 172px;
height: 60px;
text-align: center;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.small-btn {
padding: 10px 30px;
}
.btn-text:hover {
background: none;
color: #daa106;
text-decoration: none;
}
.icon-box {
width: 80px;
height: 80px;
line-height: 80px;
background-color: #1fcab8;
margin: 20px auto;
color: #fff;
font-size: 25px;
text-align: center;
display: block;
border-radius: 50%;
}
.width-25per {
width: 25%;
}
.width-75per {
width: 75%;
}
@media (min-width: 768px) and (max-width: 991px) {
.width-25per {
width: 30%;
}
.width-75per {
width: 70%;
}
}
@media (max-width: 767px) {
.width-25per {
width: 100%;
}
.width-75per {
width: 100%;
}
}
.half-width {
width: 50%;
}
@media (max-width: 767px) {
.half-width {
width: 100%;
}
.img-responsive {
width: 100%;
}
}
.fl {
float: left;
}
.fr {
float: right;
}
.height-300 {
height: 300px;
}
.height {
height: 250px;
}
.border {
border: 1px solid #ccc;
}
.about-block {
-webkit-transition: all 0.4s linear 0s;
-ms-transition: all 0.4s linear 0s;
transition: all 0.4s linear 0s;
}
.v-line {
border-left: 3px solid #daa106;
padding-left: 20px;
}
.big-icon {
line-height: 185px;
margin: 20px auto;
color: #3bafda;
font-size: 100px;
text-align: center;
display: block;
}
.dark-bg, .hover-bg:hover {
background: #daa106;
}
.black-bg {
background: #2C2C2C;
}
.gray-bg {
background: #f3f4f7;
}
.dark-gray-bg {
background: #eaeff3;
}
img {
max-width: 100%;
}
.mt-15 {
margin-top: 15px;
}
.box-shadow {
box-shadow: 14px 14px 0 0 rgba(0, 0, 0, 0.19);
}
.box-shadow-l {
box-shadow: -14px 14px 0 0 rgba(0, 0, 0, 0.19);
}
@media (max-width: 767px) {
.box-shadow, .box-shadow-l {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
.height-300 {
height: 236px;
}
.pb-15 {
padding-bottom: 15px;
}
.m-height {
min-height: 183px;
}
/* Box Hover Style ||-----------*/
.grid figure {
position: relative;
overflow: hidden;
margin: 0px 0%;
background: #133642;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
max-width: 100%;
opacity: 0.5;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before, .grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption, .grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-size: 19px;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2, .grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** Sadie *****/
/*---------------*/
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fee;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
figure.effect-sadie figcaption::before, figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*-----------------*/
/***** Goliath *****/
/*-----------------*/
figure.effect-goliath {
background: #0e332f;
}
figure.effect-goliath img, figure.effect-goliath h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-goliath img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-goliath h2, figure.effect-goliath p {
position: absolute;
bottom: 0;
left: 0;
padding: 30px;
}
figure.effect-goliath p {
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
figure.effect-goliath:hover img {
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
}
figure.effect-goliath:hover h2 {
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
}
figure.effect-goliath:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.grid figure.effect-goliath {
margin: 0;
}
/*---------------*/
/***** Zoe *****/
/*---------------*/
.grid figure.effect-zoe {
background: none;
}
.grid figure.effect-zoe img {
opacity: 1;
}
figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 4.45em;
background: #1fcab8;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
figure.effect-zoe .name-block {
float: left;
}
figure.effect-zoe p.icon-links {
float: right;
margin-top: 8px;
}
figure.effect-zoe p.icon-links a {
float: left;
color: #323232;
font-size: 1.4em;
}
figure.effect-zoe:hover p.icon-links a:hover, figure.effect-zoe:hover p.icon-links a:focus {
color: #252d31;
}
figure.effect-zoe p.description {
position: absolute;
bottom: 5em;
padding: 2em;
color: #000;
text-transform: none;
font-size: 15px;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
backface-visibility: hidden;
background: rgba(31, 202, 184, 0.67);
left: 0;
}
figure.effect-zoe .name-block, figure.effect-zoe p.icon-links a {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}
figure.effect-zoe p.icon-links a span::before {
display: inline-block;
padding: 8px 10px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
figure.effect-zoe h2 {
display: inline-block;
}
figure.effect-zoe:hover p.description {
opacity: 1;
}
figure.effect-zoe:hover figcaption, figure.effect-zoe:hover .name-block, figure.effect-zoe:hover p.icon-links a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-zoe:hover .name-block {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
figure.effect-zoe:hover p.icon-links a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
figure.effect-zoe:hover p.icon-links a:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.effect-zoe:hover p.icon-links a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/* -------------------------------------*/
/* Carousel-Theme (Slider Elements - Bullets, Pagination, etc..) ---------*/
/* -------------------------------------*/
.owl-nav {
position: static;
}
.owl-carousel.white .owl-controls .owl-page span {
background: none repeat scroll 0 0 #fff;
}
.owl-carousel.white .owl-controls .owl-page.active span {
background: #e6ae49;
}
.nf-carousel-theme .owl-controls .owl-pagination {
position: absolute;
z-index: 2;
left: 0;
text-align: center;
width: 100%;
margin-top: 15px;
}
.nf-carousel-theme .owl-controls .owl-nav .owl-prev, .nf-carousel-theme .owl-controls .owl-nav .owl-next {
width: 31px;
height: 31px;
line-height: 31px;
font-size: 16px;
margin-top: -15px;
color: #fff;
}
.content-carousel .owl-controls .owl-nav .owl-prev, .content-carousel .owl-controls .owl-nav .owl-next, .image-slider .owl-controls .owl-nav .owl-prev, .image-slider .owl-controls .owl-nav .owl-next, .fullwidth-slider .owl-controls .owl-nav .owl-prev, .fullwidth-slider .owl-controls .owl-nav .owl-next, .nf-carousel-theme .owl-controls .owl-nav .owl-prev, .nf-carousel-theme .owl-controls .owl-nav .owl-next {
background: #1fcab8;
color: #fff;
display: block;
top: 50%;
transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
-webkit-transition: all 0.25s ease 0s;
z-index: 3;
position: absolute;
text-align: center;
}
.content-carousel .owl-controls .owl-nav .owl-prev:hover, .content-carousel .owl-controls .owl-nav .owl-next:hover, .image-slider .owl-controls .owl-nav .owl-prev:hover, .image-slider .owl-controls .owl-nav .owl-next:hover, .fullwidth-slider .owl-controls .owl-nav .owl-prev:hover, .fullwidth-slider .owl-controls .owl-nav .owl-next:hover, .nf-carousel-theme .owl-controls .owl-nav .owl-prev:hover, .nf-carousel-theme .owl-controls .owl-nav .owl-next:hover {
color: #fff;
}
.content-carousel .owl-controls .owl-nav .owl-next, .image-slider .owl-controls .owl-nav .owl-next, .fullwidth-slider .owl-controls .owl-nav .owl-next, .nf-carousel-theme .owl-controls .owl-nav .owl-next {
right: 0;
}
.nf-carousel-theme .owl-controls .owl-nav .owl-prev {
left: 0;
margin-left: -51px;
opacity: 0;
}
.nf-carousel-theme .owl-controls .owl-nav .owl-next {
right: 0;
margin-right: -51px;
opacity: 0;
}
.content-carousel:hover .owl-controls .owl-nav .owl-prev, .content-carousel:hover .owl-controls .owl-nav .owl-next, .image-slider:hover .owl-controls .owl-nav .owl-prev, .image-slider:hover .owl-controls .owl-nav .owl-next, .fullwidth-slider:hover .owl-controls .owl-nav .owl-prev, .fullwidth-slider:hover .owl-controls .owl-nav .owl-next, .nf-carousel-theme:hover .owl-controls .owl-nav .owl-prev, .nf-carousel-theme:hover .owl-controls .owl-nav .owl-next {
margin-right: 0;
margin-left: 0;
opacity: 1;
}
.owl-prev, .owl-next {
position: absolute;
top: 0;
height: 100%;
width: 0;
background: rgba(25, 169, 153, 0.56);
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 25px;
overflow: hidden;
color: #fff;
text-align: center;
}
.owl-nav i {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
/*Form Style ||-----------*/
button {
outline: none;
border: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
display: inline-block;
}
button, input, textarea, select {
font-family: 'Noto Sans KR', sans-serif;
font-size: 12px;
}
input, textarea, select {
margin-bottom: 20px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 12px;
}
input.input-sm, .input-sm {
padding: 8px 15px;
}
textarea {
height: 120px;
}
label {
color: #323232;
font-size: 0px;
margin-bottom: 10px;
padding-right: 3px;
margin-top: 6px;
font-weight: 600;
font-family: 'Raleway', sans-serif;
}
.form-full {
width: 100%;
}
.form-field-wrapper {
margin-bottom: 20px;
}
.form-field-wrapper input, .form-field-wrapper textarea, .form-field-wrapper select {
margin-bottom: 0px;
}
select.input-sm {
height: 37px;
line-height: 1;
}
form .error {
border-color: #e1534f;
}
form label.error {
margin-bottom: 0px;
margin-top: 3px;
color: #e1534f;
font-size: 12px;
font-weight: 400;
}
.successContent, .errorContent {
margin-bottom: 20px;
display: none;
text-transform: none;
letter-spacing: 1px;
}
/*-------------------------------------------------------------------------------------------*/
/* HEADER ||---------------------------- */
/*-------------------------------------------------------------------------------------------*/
/* Header Style ||-----------*/
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
background:#fff;
}
.boxed {
margin-left: auto;
margin-right: auto;
max-width: 1170px;
}
#header, .header {
background: #314555;
}
#header.header-1 {
background: #fff;
}
.logo, .nav-bg {
position: relative;
z-index: 9;
}
.logo a {
display: inline-block;
padding: 26px 0;
}
.header-1 .logo a {
display: inline-block;
padding: 26px 0 20px;
}
@media (min-width: 992px) {
.header-1 .logo a {
padding: 18px 0 20px;
}
}
.menu {
border-bottom: 4px solid #1fcab8;
border-top: 4px solid #1fcab8;
height: 29px;
position: absolute;
right: 29px;
top: 40px;
width: 44px;
background: none;
z-index: 10;
}
.menu:after {
position: absolute;
top: 9px;
right: 0;
content: '';
width: 100%;
height: 4px;
background: #1fcab8;
}
.header ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
}
.header ul li {
float: left;
position: relative;
}
.navigation ul li a {
font-size: 14px;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
}
.navigation > ul > li > a {
display: block;
padding: 38px 16px;
color: #323232;
transition: all 0.25s ease 0s;
-webkit-transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
outline: none;
}
.navigation > ul > li:last-child a {
padding-right: 0;
}
.navigation .sub-nav {
left: 0;
border-top: 20px solid transparent;
position: absolute;
top: 175%;
width: 200px;
z-index: 3;
background-clip: padding-box;
padding: 0;
transition: top 0.3s ease 0s, visibility 0.2s ease 0.2s, opacity 0.2s ease 0.1s;
-webkit-transition: top 0.3s ease 0s, visibility 0.2s ease 0.2s, opacity 0.2s ease 0.1s;
-moz-transition: top 0.3s ease 0s, visibility 0.2s ease 0.2s, opacity 0.2s ease 0.1s;
-ms-transition: top 0.3s ease 0s, visibility 0.2s ease 0.2s, opacity 0.2s ease 0.1s;
-o-transition: top 0.3s ease 0s, visibility 0.2s ease 0.2s, opacity 0.2s ease 0.1s;
opacity: 0;
visibility: hidden;
background-color: #2a3b48;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.navigation .sub-nav li {
display: block;
float: none;
margin: 0;
border-bottom: 1px solid #314351;
padding-bottom: 0;
position: relative;
}
.navigation li:hover .sub-nav {
opacity: 1;
top: 80%;
transition: top 0.3s ease 0s;
-webkit-transition: top 0.3s ease 0s;
visibility: visible;
}
.navigation li.sub-menu .sub-nav {
border: none;
opacity: 0;
top: 0;
visibility: visible;
left: auto;
right: 110%;
visibility: hidden;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.navigation li.sub-menu:hover .sub-nav {
visibility: visible;
opacity: 1;
right: 100%;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
@media only screen and (min-width: 768px) {
.navigation .sub-nav li:hover {
background: #263642;
}
}
.navigation .sub-nav li:last-child {
border-bottom: 0;
}
.navigation .sub-nav li a {
padding: 8px 20px;
display: block;
color: #fff;
}
/*Top bar*/
.top-bar-section {
padding-top: 10px;
padding-bottom: 10px;
background: #1a2731;
color: #fff;
}
.header-1 .top-bar-section{
background: #f7f7f7 ;
}
.top-contact {
float: left;
text-align: center;
}
.top-social-icon {
float: right;
}
.top-social-icon {
text-align: center;
}
.top-bar-section.top-bar-bg-color a {
color: #fff;
}
.top-contact a i {
padding-left: 5px;
padding-right: 5px;
}
.top-social-icon {
float: right;
}
.top-social-icon {
text-align: center;
}
.top-social-icon ul {
margin: 0;
padding: 0;
}
.top-social-icon li {
margin-left: 10px;
}
.top-contact .welcome-text {
padding-top: 8px;
padding-bottom: 8px;
letter-spacing: 0.5px;
display: block;
font-weight: 600;
font-size: 13px;
color: #fff;
text-transform: uppercase;
}
.header-1 .top-contact .welcome-text{
color:#2c3740;
}
.welcome-text i{
margin-right: 6px;
}
.top-bar-section a i {
font-size: 16px;
}
.top-social-icon a.btn {
padding: 9px 20px;
}
.top-social-icon a.btn:hover {
color: #1fcab8;
}
.link-hover-black > a:last-child {
margin-left: 10px;
}
.icons-hover-black i {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 5px 1px 5px 0;
display: inline-block;
background: #314555;
color: #fff;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
.icons-hover-black i:hover{
background: #1fcab8;
}
/* Header style 2 ||-----------*/
.header-2 .primary-header {
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.header-2 .navigation > ul {
float: left;
}
.header-2 .navigation > ul > li {
border-left: 1px solid #dedddd;
}
@media only screen and (min-width: 768px) {
.header-2 .navigation > ul > li:hover {
background: #2a3b48;
}
}
.header-2 .navigation > ul > li > a {
color: #314555;
padding: 18px 32px;
}
.header-2 .navigation li:hover>a{
color:#fff;
}
.header-2 .navigation li:hover .sub-nav {
top: 67%;
}
.call-us ul {
list-style-type: none;
line-height: 1.3;
padding-top: 22px;
}
.call-us ul li {
display: inline-block;
font-weight: bold;
padding: 0 1px;
vertical-align: top;
position: relative;
padding-left: 33px;
}
.call-us ul li:first-child:after {
content: "";
background: #d5dce4;
display: block;
position: absolute;
right: -15px;
top: -5px;
width: 1px;
height: 67px;
}
.call-box {
display: inline-block;
font-weight: 600;
font-size: 15px;
color: rgba(255, 255, 255, 0.58);
text-transform: uppercase;
}
.call-box > span {
display: block;
}
.call-us .phone-nomber i {
font-size: 23px;
margin-right: 12px;
vertical-align: top;
margin-top: 0;
display: inline-block;
color: rgba(255, 255, 255, 0.58);
}
.call-us i.ion-ios-email-outline{
margin-top: -10px;
}
.call-us ul li .position {
float: left;
display: inline;
margin-left: 6px;
margin-right: 6px;
padding-top: 5px;
color: rgba(255, 255, 255, 0.58);
}
.call-us ul li .icon-fa {
font-size: 50px;
font-weight: 400;
font-family: oswald;
float: left;
display: inline;
margin-left: 3px;
margin-right: 3px;
color: rgba(255, 255, 255, 0.58);
line-height: 47px;
}
.call-us ul li .time_block {
color: #fff;
font-size: 16px;
font-weight: 500;
padding-bottom: 2px;
}
.call-us ul li .date-block {
color: #fff;
font-weight: 600;
font-size: 18px;
font-family: open sans;
}
.call-us ul li a {
font-size: 22px;
color: #fff;
line-height: 1;
transition: 1s all ease;
-webkit-transition: 1s all ease;
}
.call-us ul li.phone-nomber a{
font-size: 26px;
}
.call-us ul li:first-child {
padding-left: 49px;
}
.mailing-icon{
margin-right: 7px;
}
.icons-hover-black .mailing-icon i{
background: none;
width: 17px;
}
.header-2 .top-bar-section {
background: #F7F7F7;
border-bottom: 1px solid #364f63;
padding-top: 4px;
padding-bottom: 4px;
}
body .header-2 .top-bar-section {
background: #1a2731;
}
.header-2 .top-bar-section.top-bar-bg-color a, .header-2 .top-social-icon li {
color: #909090;
}
.header-2 .top-bar-section.top-bar-bg-color a:hover, .call-us ul li a:hover {
color: #1fcab8;
}
.col-right {
text-align: right;
}
.col-right .opening {
float: right;
text-align: left;
padding: 25px 0 0 33px
}
.header .col-right ul, .header .col-right ul li {
float: none;
position: relative;
color: #2c3740;
font-weight: bold;
}
.header .col-right ul li span, .header .col-right ul li * {
color: #2c3740;
}
.col-right .call-us {
display: inline-block;
text-align: right;
float: none;
}
.col-right .opening ul:after {
content: "";
background: #d5dce4;
display: block;
position: absolute;
left: -15px;
top: -9px;
width: 1px;
height: 67px;
}
.header-style {
box-shadow: 0 0px 1px 1px rgba(0,0,0,0.1);
}
.header-style, .header-1 .nav-wrap {
box-shadow: 0 0px 1px 1px rgba(0,0,0,0.1);
}
.header-1 .nav-wrap {
position: relative;
}
.header-1 .nav-wrap:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: #1fcab8;
border-left-color: #1fcab8;
border-style: solid;
border-top-width: 46px;
border-right-width: 34px;
border-bottom-width: 40px;
border-left-width: 40px;
margin-left: -338px;
}
.header-1 .nav-wrap:before {
content: '';
width: 50%;
height: 86px;
background: #1fcab8;
position: absolute;
top: 0;
left: -338px;
}
.header-1 .navigation > ul > li > a {
padding: 30px 16px;
}
.fix-header #header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
@media only screen and (min-width: 767px) {
#header.fix .nav-wrap, #header.fix .primary-header, .header-style.fix-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999999;
}
#header.fix .nav-wrap, .header-style.fix-header {
background: #fff;
}
.p-top {
padding-top: 157px;
}
}
.boxed #header.fix .nav-wrap, .boxed #header.fix .primary-header, .boxed .header-style.fix-header {
max-width: 1170px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 992px) and (max-width: 1199px) {
.header-2 .navigation > ul > li > a {
padding-left: 28px;
padding-right: 28px;
}
.header.header-2 .navigation > ul > li > a {
padding-left: 28px;
padding-right: 25px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.navigation {
margin-left: 0;
}
.navigation > ul > li > a {
padding: 38px 13px;
}
.navigation .sub-nav {
left: -27px;
}
.header-1 .nav-wrap:after {
margin-left: -167px;
}
.header-1 .nav-wrap:before {
left: -166px;
}
.header-1 .navigation li:hover .sub-nav {
top: 77%;
}
.call-us ul li a{
font-size: 16px;
}
.header-2 .navigation > ul > li > a {
padding: 18px 23px;
}
.header-1 .navigation > ul > li > a {
padding: 30px 10px;
}
.header.header-2 .navigation > ul > li > a {
padding: 18px 10px;
}
.navigation .btn-text{
padding: 0 10px;
min-width:160px;
}
.top-contact .welcome-text{
font-size: 11px;
}
}
@media (max-width: 767px) {
.container {
margin: 0 auto;
max-width: 480px;
width: 100%;
}
.header ul, .header ul li {
float: none;
}
.top-social-icon {
text-align: center;
}
.top-social-icon ul li {
display: inline-block;
margin: 0 4px;
}
.top-social-icon ul li:last-child, .top-social-icon ul li:last-child a {
width: 100%;
margin: 0;
}
.story-content, .video-frame {
width: 100%;
margin-left: 0;
margin-right: 0;
float: none;
}
.logo a {
padding: 29px 0px;
}
.header-1 .logo a {
padding: 26px 0 20px;
}
.navigation {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
max-height: 100vh;
overflow-y: auto;
z-index: 9;
background: #314555;
}
.header-1 .navigation {
top: 0;
}
.navigation ul li {
border-bottom: 1px solid #fff;
}
.header-2 .navigation > ul > li {
border-left: none;
}
.navigation > ul > li > a, .header-2 .navigation > ul > li > a, .navigation > ul > li:last-child a, .header-1 .navigation > ul > li > a {
padding: 10px 15px;
color: #fff;
}
.header-2 .primary-header {
border-bottom: 1px solid #fff;
background: none;
}
.navigation .sub-nav, .navigation li.sub-menu .sub-nav, .navigation li.sub-menu:hover .sub-nav {
position: static !important;
opacity: 1;
visibility: visible;
width: 100% !important;
border-top: none;
transition: inherit;
-webkit-transition: inherit;
padding: 0;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: auto !important;
background-color: #263642;
margin: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: contents;
}
.navigation ul li i {
color: #fff;
font-size: 25px;
position: absolute;
right: 15px;
top: 9px;
cursor: pointer;
pointer-events: none;
}
.navigation ul li .bg {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
cursor: pointer;
pointer-events: auto;
z-index: 10;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.navigation ul li ul {
display: none;
}
.navigation ul li ul.sub-nav {
margin: 0;
padding: 0;
list-style: none;
}
.navigation li.on .sub-nav,
.navigation .on .sub-nav {
display: block !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
position: static !important;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.navigation .sub-nav li {
display: block !important;
position: relative !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
clear: both;
}
.navigation .sub-nav li:last-child {
border-bottom: none;
}
.navigation .sub-nav li a {
display: block;
padding: 12px 20px 12px 35px;
color: #fff;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.navigation .sub-nav li a:hover {
background-color: #1a252e;
}
/* 서브메뉴가 레이아웃 플로우에 자연스럽게 포함되도록 */
.navigation ul li {
position: relative;
}
.navigation .on > .ion-ios-plus-empty:before {
content: '\f462';
font-family: "Ionicons";
}
.nf-col-padding {
padding-left: 15px;
padding-right: 15px;
}
.footer h5:after {
margin-bottom: 18px;
}
.footer-info .col-xs-12 {
min-height: 0;
}
.call-us ul li a {
font-size: 24px;
}
.col-right .opening ul::after, .col-right {
display: none;
}
.header-style .logo {
padding-bottom: 56px;
}
.header-style .navigation {
top: 0;
}
.header-2 .navigation > ul, .top-social-icon {
float: none;
;
}
.header-2 .top-social-icon ul li:last-child, .header-2 .top-social-icon ul li:last-child a {
width: auto;
}
.header-2 .top-social-icon {
padding-bottom: 0;
}
.header-2 .appointment-button {
display: block;
margin: 10px auto;
width: 200px;
}
.header-2 .navigation {
top: 0;
}
.header-2.header-style .navigation {
top: 0;
}
.header-1 .nav-wrap:before, .header-1 .nav-wrap:after {
display: none;
}
}
/*==============================================================================================*/
/* FOOTER ||---------------------------- */
/*==============================================================================================*/
.footer {
background-color: #2d3740;
background-size: cover;
color: #f7f7f7;
text-align: center;
position: relative;
width: 100%;
display: block;
overflow: hidden;
}
.footer hr {
border-color: #eee;
}
.footer .footer-info p {
color: #7f7f7f;
margin-bottom: 0px;
}
.footer-info .col-xs-12 {
min-height: 150px;
}
.footer-logo {
max-width: 125px;
display: inline-block;
width: 100%;
}
.footer .social, .contact .social {
font-size: 17px;
}
.footer ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.footer ul.social li, .contact ul.social li {
display: inline-block;
margin: 0 7px 0 0;
}
.footer .link a {
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
color: #7f7f7f;
}
.footer h5 {
color: #f0eded;
margin-bottom: 30px;
}
.footer .link-small a {
text-transform: none;
color: #7f7f7f;
}
.footer address {
color: #7f7f7f;
position: relative;
padding-left: 30px;
}
.footer .blog-link li {
margin-right: 5px;
margin-bottom: 15px;
}
.footer .link-small a {
position: relative;
padding-left: 29px
}
.footer .link-small li {
margin-bottom: 0px;
}
.footer .icons-hover-black i {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin-bottom: 15px;
display: inline-block;
margin-right: 1px;
background: #1f272f;
color: #fff;
}
.footer .blog-link img {
width: 60px;
height: 40px;
}
.footer .copyright {
text-align: center;
padding: 18px 0 10px;
background: #29333c;
position: relative;
}
.footer .copyright p, .footer .copyright p a {
color: #7f7f7f;
}
.footer .post-content {
font-size: 12px;
color: #615F5F;
text-transform: uppercase;
}
.footer .fa-icons {
font-size: 22px;
position: absolute;
top: 0;
left: 0;
}
.entry-thumbnail {
float: left;
margin: 0 15px 0 0;
max-width: 60px;
padding-right: 0;
}
.entry-thumbnail {
float: left;
margin: 0 15px 0 0;
max-width: 60px;
padding-right: 0;
}
.blog-link .fa {
font-size: 15px;
margin-right: 8px;
}
/* light footer css */
.light-footer {
background-color: #EFEFEF;
border-top: 1px solid #D6D4D4;
color: #000;
}
.light-footer.footer h5, .light-footer.footer .footer-info p, .light-footer.footer .copyright, .light-footer .copyright a {
color: #000;
}
.light-footer.footer .copyright {
border-top: 1px solid #E0DFDF;
background: #FBFBFB;
}
.light-footer .newsletter .newsletter-input, .light-footer .newsletter .newsletter-input:focus {
background: #eee;
color: #000;
}
.newsletter {
position: relative;
}
.newsletter form {
position: relative;
margin-top: 20px;
}
.newsletter .newsletter-input, .newsletter .newsletter-input:focus {
width: 100%;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
padding-right: 40px;
background: none;
border-radius: 0;
border: 1px solid #B1AFAF;
color: #7f7f7f;
}
.newsletter .newsletter-btn {
position: absolute;
top: 0px;
right: 0px;
font-size: 18px;
background: #7f7f7f;
line-height: 23px;
border-radius: 0;
width: 49px;
}
.footer .icons-hover-black {
padding-top: 10px;
}
/*Footer Style 2*/
.footer-style-2:before {
content: '';
width: 517px;
height: 166%;
position: absolute;
top: 0;
left: 0;
background: #1fcab8;
transform: rotate(23deg);
transform-origin: 100% 0;
-webkit-transform: rotate(23deg);
-webkit-transform-origin: 100% 0;
}
.footer-style-2 .icons-hover-black i {
background: #02695e;
}
.footer-style-2 .footer-info p {
color: #fff;
margin-bottom: 15px;
}
.instagram ul {
margin: 0;
padding: 0;
}
.instagram li {
margin: 0 0 4px;
padding: 0;
list-style: none;
display: inline-block;
}
.footer-style-2 .blog-link li {
margin-right: 0;
margin-bottom: 15px;
width: 50%;
float: left;
}
/*-------------------------------------------------------------------------------------------*/
/* Main Banner ||---------------------------- */
/*-------------------------------------------------------------------------------------------*/
.main-banner {
position: relative;
}
.main-banner .banner-text span {
font-weight: 600;
color: #ffffff;
font-size: 16px;
display: block;
margin-bottom: 5px;
font-family: 'Noto Sans KR', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1;
}
.main-banner .banner-text h2 {
font-size: 42px;
color: #ffffff;
margin-bottom: 10px;
line-height: 1.3;
}
.main-banner .banner-text p {
font-family: 'Noto Sans KR', sans-serif;
color: #ffffff;
font-size: 15px;
margin-bottom: 20px;
line-height: 1.8;
}
.main-banner .more-btn {
background: #1fcab8;
line-height: 30px;
padding-left: 38px;
padding-right: 38px;
font-weight: 700;
color: #fff;
}
.main-banner li .btn-text {
line-height: 60px;
padding-left: 38px;
padding-right: 38px;
font-size:13px;
font-weight: 700;
}
#wrapper .main-banner .tp-bullets {
top: auto;
left: 52%;
display: block;
visibility: visible;
opacity: 1;
bottom: 66px;
}
.main-banner .tp-bullet {
width: 26px;
height: 3px;
background: #8f8f8f;
}
.main-banner .tp-bullet.selected {
background: #ffaf36;
}
.tparrows.tp-leftarrow, .tparrows.tp-rightarrow {
border: 1px solid #fff;
z-index: 99;
cursor: pointer;
background: none;
visibility: hidden;
}
.main-banner:hover .tparrows.tp-leftarrow, .main-banner:hover .tparrows.tp-rightarrow {
visibility: visible;
}
.tparrows.tp-leftarrow:hover, .tparrows.tp-rightarrow:hover {
background: #1fcab8;
border: 1px solid #1fcab8;
}
.slotholder:before {
border-top: none;
border-bottom: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0,0,0,.4);
content: '';
}
@media (max-width: 480px) {
.main-banner .banner-text h2 {
font-size: 18px;
}
.main-banner .banner-text p {
line-height: 1.2;
font-size: 15px;
}
}
/* Page Intro ||-----------*/
.inner-intro {
background-color: #f7f7f7;
height: 300px;
display: block;
position: relative;
overflow: hidden;
}
.inner-intro.inner-intro-small {
height: 380px;
}
.inner-intro .container {
position: relative;
height: 100%;
display: table;
}
.inner-intro .container .title {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.bg-img {
background: url(../images/hosting-slide3.jpg) 0 0 no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.overlay-before:before {
content: '';
width: 517px;
height: 166%;
position: absolute;
top: 0;
left: 0;
background: #1fcab8;
transform: rotate(23deg);
-webkit-transform: rotate(23deg);
transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
}
@media (max-width: 767px) {
.inner-intro {
height: 220px;
}
.overlay-before:before {
width: 100%;
transform: rotate(23deg);
-webkit-transform: rotate(23deg);
transform: rotate(0);
-webkit-transform: rotate(0);
transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
opacity: 0.9;
}
}
/* Testimonial ||-----------*/
#testimonial .client-pic {
width: 60px;
margin: 0 auto;
display: block;
border: 3px solid #1fcab8;
}
.client-name {
padding-top: 10px;
}
.client-name strong, .client-name span {
display: block;
line-height: 1.8;
}
.star i {
display: inline-block;
margin: 0 1px;
color: #1fcab8;
}
#testimonial-section h4 {
font-size: 14px;
font-weight: 400;
}
#testimonial-section h4 span {
text-transform: capitalize;
font-weight: 300;
display: inline-block;
margin-right: 5px;
}
#testimonial .owl-item .item {
opacity: 0.7;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.8);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
#testimonial .owl-item.center .item {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#testimonial .owl-controls {
text-align: center;
margin-top: 30px;
}
#testimonial .owl-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #1fcab8;
margin: 0 5px
}
#testimonial .owl-dot.active {
background: #1fcab8;
}
/* ----------------------------------------------------------------------*/
/* Pagination Navigation --------------------------------------------- */
/* ----------------------------------------------------------------------*/
.pagination-nav {
width: 100%;
display: block;
position: relative;
text-align: center;
}
.pagination-nav ul {
margin: 0px;
padding: 0px;
}
.pagination-nav ul li {
display: inline-block;
margin: 0px 2px;
}
.pagination-nav ul li a {
display: block;
border: 1px solid #1fcab8;
color: #1fcab8;
height: 36px;
width: 36px;
line-height: 34px;
text-align: center;
font-size: 14px;
}
.pagination-nav ul li.active a, .pagination-nav ul li:hover a {
background: #1fcab8;
color: #fff;
}
/* ----------------------------------------------------------------------*/
/* Sidebar Widget ---------------------------------------------------- */
/* ----------------------------------------------------------------------*/
.sidebar-widget {
margin-bottom: 50px;
}
.sidebar-widget h4 {
margin: 0px;
padding-top: 0;
padding-bottom: 15px;
}
.widget-search {
position: relative;
}
.widget-search input[type="text"] {
padding-right: 30px;
border: 1px solid #DEDEDE;
margin-bottom: 0;
}
.widget-search input[type="text"]:focus {
border: 1px solid #1fcab8;
}
.blog-post-hr input[type="text"], .blog-post-hr textarea {
border: 1px solid #DEDEDE;
}
.blog-post-hr input[type="text"]:focus, .blog-post-hr textarea:focus {
border: 1px solid #1fcab8;
}
.widget-search input[type="submit"] {
background-color: rgba(0,0,0,0);
border: 0 none;
color: #8d8d8d;
cursor: pointer;
float: right;
font-family: "FontAwesome", sans-serif;
margin: 0;
outline: 0 none;
white-space: nowrap;
padding: 0 3px;
text-decoration: none;
transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
-webkit-transition: all 0.25s ease 0s;
position: absolute;
top: 10px;
right: 10px;
}
.widget-search input[type="submit"]:hover {
color: #e6ae49;
}
.sidebar-widget hr {
margin-bottom: 15px;
}
.sidebar-widget ul {
margin: 0px;
padding-left: 0px;
}
.sidebar-widget ul li {
list-style: none;
font-weight: 400;
}
.categories li {
border-bottom: 1px solid #DEDEDE;
}
.sidebar-widget ul li a {
display: inline-block;
padding: 4px 0px;
font-size: 13px;
color: #323232;
cursor: pointer;
}
.sidebar-widget .categories li a {
padding: 10px 0px;
text-transform: capitalize;
}
.sidebar-widget ul li a:hover {
color: #1fcab8;
}
.widget-tag {
display: inline-table;
margin-top: 15px;
}
.widget-tag li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
text-transform: uppercase;
}
.widget-tag li a {
padding: 4px 10px;
display: block;
border: 1px solid #1fcab8;
color: #1fcab8;
}
.sidebar-widget .widget-tag li a:hover {
background: #1fcab8;
color: #fff;
}
.sidebar-widget .widget-post {
position: relative;
}
.sidebar-widget .widget-post .widget-post-media {
width: 118px;
display: table-cell;
padding: 0px 15px 0px 0px;
}
.sidebar-widget .widget-post li {
margin-bottom: 20px;
}
.sidebar-widget .widget-post a {
padding: 0px;
}
.sidebar-widget .widget-post .widget-post-media img, .sidebar-widget .widget-post .widget-post-media video {
width: 100%;
vertical-align: top;
}
.sidebar-widget .widget-post .widget-post-info {
display: table-cell;
vertical-align: top;
}
.sidebar-widget .widget-post .widget-post-info h5, .sidebar-widget .widget-post .widget-post-info h6 {
margin-bottom: 5px;
}
.sidebar-widget .widget-post .widget-post-info p {
margin: 0px;
}
.sidebar-widget .color-widget {
overflow: hidden;
}
.sidebar-widget .color-widget li {
float: left;
width: 25px;
height: 25px;
margin: 0 8px 8px 0;
border: 1px solid #f1f1f1;
}
.sidebar-widget .red-box {
background: #FF0000;
}
.sidebar-widget .yellow-box {
background: #FFD700;
}
.sidebar-widget .blue-box {
background: #0000FF;
}
.sidebar-widget .green-box {
background: #008000;
}
.sidebar-widget .orange-box {
background: #FF4500;
}
.sidebar-widget .light-b-box {
background: #ADD8E6;
}
.sidebar-widget .black-box {
background: #000;
}
.sidebar-widget .darkmagenta-box {
background: #8B008B;
}
.sidebar-widget .darkturquoise-box {
background: #00CED1;
}
.sidebar-widget .Olive-box {
background: #00CED1;
}
.sidebar-widget .Orchid-box {
background: #DA70D6;
}
.sidebar-widget .purple-box {
background: #800080;
}
.sidebar-widget .darkturquoise-box {
background: #8B4513;
}
.sidebar-widget .magenta-box {
background: #FF00FF;
}
.sidebar-widget .SaddleBrown-box {
background: #8B4513;
}
/* blog ||-----------*/
.post-media {
margin: 0 0 20px;
}
.post-media i {
display: inline-block;
font-size: 17px
}
.post-media span {
display: inline-block;
margin-right: 15px;
}
.post-content {
position: relative;
}
.divider {
border-top: 1px solid #ddd;
}
.item-nav {
text-align: center;
display: block;
overflow: hidden;
}
.item-nav .item-prev, .item-nav .item-next, .item-nav .item-all-view {
position: relative;
display: inline-block;
}
.item-nav .item-all-view h5, .item-nav .item-all-view h6 {
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.item-nav .item-all-view h5:hover, .item-nav .item-all-view h6:hover {
color: #e6ae49;
}
.item-nav .item-prev .prev-btn, .item-nav .item-next .next-btn, .item-all-view {
display: inline-block;
font-size: 25px;
text-align: center;
height: 51px;
line-height: 51px;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.item-nav .item-prev .prev-btn, .item-nav .item-next .next-btn {
color: #1fcab8;
width: 51px;
border: 1px solid #1fcab8
}
.item-nav .item-prev:hover .prev-btn, .item-nav .item-next:hover .next-btn {
background: #1fcab8;
color: #fff;
}
.item-nav .item-prev {
text-align: left;
float: left;
}
.item-nav .item-next {
text-align: right;
float: right;
}
.item-nav .item-prev .item-prev-text, .item-nav .item-next .item-next-text {
position: absolute;
line-height: 51px;
top: 10px;
z-index: -1;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
width: 150px;
font-size:10px;
}
.item-nav .item-prev:hover .item-prev-text, .item-nav .item-next:hover .item-next-text {
margin-left: 0;
margin-right: 0;
visibility: visible;
opacity: 1;
}
.item-nav .item-prev .item-prev-text {
left: 100%;
margin-left: -110px;
padding-left: 15px;
}
.item-nav .item-next .item-next-text {
right: 100%;
margin-right: -110px;
padding-right: 15px;
}
.item-nav .item-prev .item-prev-text p, .item-nav .item-prev .item-prev-text h5, .item-nav .item-prev .item-prev-text h6, .item-nav .item-next .item-next-text p, .item-nav .item-next .item-next-text h5, .item-nav .item-next .item-next-text h6 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.item-nav .item-prev .item-prev-text h5, .item-nav .item-prev .item-prev-text h6, .item-nav .item-next .item-next-text h5, .item-nav .item-next .item-next-text h6, .item-nav .item-all-view h5, .item-nav .item-all-view h6 {
padding-top: 8px;
}
/* Partner Section ||-----------*/
.logo-group {
overflow: hidden;
padding: 0;
border: 1px solid #ddd;
border-right: none;
border-bottom: none;
position: relative;
}
.logo-group li {
width: 20%;
float: left;
height: 150px;
list-style: none;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.logo-group li img {
display: block;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.logo-group li {
width: 50%;
}
}
@media only screen and (max-width: 500px) {
.logo-group li {
width: 100%;
}
}
.client-avtar {
position: absolute;
left: 42px;
top: -36px;
width: 70px;
height: 70px;
border: 2px solid #3bafda;
}
.right-pos {
left: auto;
right: 42px;
}
.bg-dark {
position: relative;
}
#testimonial .owl-carousel .owl-item {
opacity: 0.5;
transform: scale(0.8);
transition: all 0.3s ease-in;
}
#testimonial .owl-carousel .owl-item.center {
opacity: 1;
transform: scale(1);
transition: all 0.3s ease-out;
}
/* Time Line Section ||-----------*/
.btn-icon {
padding: 0;
display: inline-block;
text-align: center;
border-radius: 2px;
height: 35px;
width: 35px;
line-height: 35px
}
.btn-icon i {
line-height: 35px
}
.btn-icon.btn-icon-lined {
line-height: 31px
}
.btn-icon.btn-icon-lined i {
line-height: 31px
}
.btn-icon.btn-icon-lined.btn-icon-thin {
line-height: 33px
}
.btn-icon.btn-icon-lined.btn-icon-thin i {
line-height: 33px
}
.btn-icon-lined {
display: inline-block;
text-align: center;
border-radius: 2px;
background-color: #fff;
border-width: 2px;
border-style: solid;
border-color: #3D4051;
color: #3D4051;
height: 35px;
width: 35px;
line-height: 35px
}
.btn-icon-lined i {
line-height: 35px
}
.btn-icon-lined.btn-icon-lined {
line-height: 31px
}
.btn-icon-lined.btn-icon-lined i {
line-height: 31px
}
.btn-icon-lined.btn-icon-lined.btn-icon-thin {
line-height: 33px
}
.btn-icon-lined.btn-icon-lined.btn-icon-thin i {
line-height: 33px
}
.btn-icon-lined.btn-icon-thin {
border-width: 1px
}
.btn-icon-lined:hover {
background-color: #fff;
color: #fff
}
.btn-icon-lined.btn-default-light {
color: #bbb;
border: 2px solid #bbb
}
.btn-icon-lined.btn-default-light:hover {
color: #bbb;
border: 2px solid #bbb
}
.btn-icon-lined.btn-default {
color: #777;
border-color: #777
}
.btn-icon-lined.btn-default:hover {
color: #777;
border-color: #777
}
.btn-icon-lined.btn-primary {
color: #009688;
border-color: #009688
}
.btn-icon-lined.btn-success {
color: #8BC34A;
border-color: #8BC34A
}
.btn-icon-lined.btn-info {
color: #00BCD4;
border-color: #00BCD4
}
.btn-icon-lined.btn-warning {
color: #FFCA28;
border-color: #FFCA28
}
.btn-icon-lined.btn-danger {
color: #F44336;
border-color: #F44336
}
.btn-icon-round {
border-radius: 50%
}
.btn-icon-sm {
height: 30px;
width: 30px;
line-height: 30px
}
.btn-icon-sm i {
line-height: 30px
}
.btn-icon-sm.btn-icon-lined {
line-height: 26px
}
.btn-icon-sm.btn-icon-lined i {
line-height: 26px
}
.btn-icon-sm.btn-icon-lined.btn-icon-thin {
line-height: 28px
}
.btn-icon-sm.btn-icon-lined.btn-icon-thin i {
line-height: 28px
}
.btn-icon-md {
height: 45px;
width: 45px;
line-height: 45px;
font-size: 18px
}
.btn-icon-md i {
line-height: 45px
}
.btn-icon-md.btn-icon-lined {
line-height: 41px
}
.btn-icon-md.btn-icon-lined i {
line-height: 41px
}
.btn-icon-md.btn-icon-lined.btn-icon-thin {
line-height: 43px
}
.btn-icon-md.btn-icon-lined.btn-icon-thin i {
line-height: 43px
}
.btn-icon-lg {
height: 65px;
width: 65px;
line-height: 65px;
font-size: 28px
}
.btn-icon-lg i {
line-height: 65px
}
.btn-icon-lg.btn-icon-lined {
line-height: 61px
}
.btn-icon-lg.btn-icon-lined i {
line-height: 61px
}
.btn-icon-lg.btn-icon-lined.btn-icon-thin {
line-height: 63px
}
.btn-icon-lg.btn-icon-lined.btn-icon-thin i {
line-height: 63px
}
.btn-icon-lg-alt {
height: 70px;
width: 70px;
line-height: 70px
}
.btn-icon-lg-alt i {
line-height: 70px
}
.btn-icon-lg-alt.btn-icon-lined {
line-height: 66px
}
.btn-icon-lg-alt.btn-icon-lined i {
line-height: 66px
}
.btn-icon-lg-alt.btn-icon-lined.btn-icon-thin {
line-height: 68px
}
.btn-icon-lg-alt.btn-icon-lined.btn-icon-thin i {
line-height: 68px
}
.ui-timline-left .ui-timeline:before {
left: 0
}
@media (min-width: 768px) {
.ui-timline-left .ui-timeline .tl-item:before {
display: none
}
.ui-timline-left .ui-timeline .tl-item .tl-caption {
margin-left: -55px
}
.ui-timline-left .ui-timeline .tl-item .tl-body .tl-time {
left: auto;
right: 15px;
color: #777
}
}
.ui-timeline {
display: table;
position: relative;
table-layout: fixed;
width: 100%;
border-spacing: 0;
border-collapse: collapse
}
.ui-timeline:before {
background-color: #d5d5d5;
bottom: 0px;
content: "";
position: absolute;
left: 0;
top: 30px;
width: 1px;
z-index: 0
}
@media (min-width: 768px) {
.ui-timeline:before {
left: 50%
}
}
.ui-timeline .tl-item {
display: table-row;
margin-bottom: 5px
}
.ui-timeline .tl-item:before {
display: none;
content: ""
}
@media (min-width: 768px) {
.ui-timeline .tl-item:before {
display: block;
width: 50%
}
}
.ui-timeline .tl-item .tl-caption {
width: 150px;
margin-left: -55px
}
@media (min-width: 768px) {
.ui-timeline .tl-item .tl-caption {
margin-left: -110px
}
}
@media (min-width: 768px) {
.ui-timeline .tl-item.alt {
text-align: right
}
.ui-timeline .tl-item.alt:before {
display: none
}
.ui-timeline .tl-item.alt:after {
content: "";
display: block;
width: 50%
}
.ui-timeline .tl-item.alt .tl-body .tl-entry {
margin: 0 35px 15px 0
}
.ui-timeline .tl-item.alt .tl-body .tl-time {
right: -220px;
left: auto;
text-align: left
}
.ui-timeline .tl-item.alt .tl-body .tl-icon {
right: -53px;
left: auto
}
.ui-timeline .tl-item.alt .tl-body .tl-content:after {
right: -16px;
left: auto;
border: 8px solid transparent;
border-left: 8px solid rgba(255, 255, 255, 0.9);
border-top: 8px solid rgba(255, 255, 255, 0.9)
}
}
.ui-timeline .tl-item .tl-body {
display: table-cell;
width: 50%;
vertical-align: top
}
.ui-timeline .tl-item .tl-body .tl-entry {
position: relative;
margin: 0 0 35px 36px
}
.ui-timeline .tl-item .tl-body .tl-entry .btn-primary {
background-color: #1fcab8;
border-color: #1fcab8;
padding: 0px 0px;
}
.ui-timeline .tl-item .tl-body .tl-time {
z-index: 1;
position: absolute;
left: auto;
right: 15px;
top: 0;
width: 150px;
color: #777;
line-height: 35px;
text-align: right
}
@media (min-width: 768px) {
.ui-timeline .tl-item .tl-body .tl-time {
left: -220px;
right: auto;
color: #3D4051
}
}
.ui-timeline .tl-item .tl-body .tl-icon {
position: absolute;
left: -53px;
top: 0
}
.ui-timeline .tl-item .tl-body .tl-content {
position: relative;
padding: 15px;
border-radius: 2px;
background-color: rgba(240, 255, 255, 0.9)
}
.ui-timeline .tl-item .tl-body .tl-content:after {
content: " ";
line-height: 0;
position: absolute;
left: -16px;
top: 0;
border: 8px solid transparent;
border-right: 8px solid rgba(255, 255, 255, 0.9);
border-top: 8px solid rgba(255, 255, 255, 0.9)
}
.tooltip-inner {
padding: .85em
}
.ui-timeline {
display: table;
position: relative;
table-layout: fixed;
width: 100%;
border-spacing: 0;
border-collapse: collapse
}
.ui-timeline:before {
background-color: #d5d5d5;
bottom: 0px;
content: "";
position: absolute;
left: 0;
top: 30px;
width: 1px;
z-index: 0
}
@media (min-width: 768px) {
.ui-timeline:before {
left: 50%
}
}
.ui-timeline .tl-item {
display: table-row;
margin-bottom: 5px
}
.ui-timeline .tl-item:before {
display: none;
content: ""
}
@media (min-width: 768px) {
.ui-timeline .tl-item:before {
display: block;
width: 50%
}
}
@media (max-width: 767px) {
.ui-timeline .tl-item .tl-caption {
margin-left: -39px;
}
.ui-timeline .tl-item .tl-body .tl-icon {
left: -48px;
}
}
.bg-gray {
color: #000;
background-color: #EFF0F1;
}
/* Team Section ||-----------*/
.designation {
display: block;
text-transform: capitalize;
font-size: 15px;
}
/* Serve Section ||-----------*/
#serve-section img {
width: 100%;
}
/* Faq Page ||-----------*/
.faq h3 {
font-size: 24px;
font-weight: 400;
margin-bottom: 38px;
text-transform: capitalize;
}
.faq .page-header {
margin: 0;
}
.faq .faq-header h2 strong {
border-bottom-style: solid;
border-bottom-width: 2px;
}
.faq .faq-header h2 {
margin-bottom: 27px;
font-weight: 300;
}
.faq .faq-header {
margin-bottom: 0;
}
.faq .panel-title > a {
display: block
}
.faq .panel-group .panel + .panel {
margin-top: 14px;
}
.faq .panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
padding: 48px 18px;
background: #f2ede9;
}
.faq .panel-default > .panel-heading {
padding: 0;
background: #f2ede9;
}
.faq .panel-default > .panel-heading a {
padding: 13px 60px 14px 28px;
color: #26211d;
position: relative;
}
.faq .panel-default > .panel-heading a:hover {
text-decoration: none;
}
.faq .panel-default > .panel-heading a.collapsed {
background-position: right top
}
.faq .panel-group .panel {
border-radius: 0;
border: none;
box-shadow: none
}
.faq .panel-group .panel p {
font-weight: 300;
}
.save-lives.ask-us {
background: #faf8f6;
}
.save-lives.ask-us h2 {
font-weight: 300;
margin-bottom: 30px;
}
.faq .panel-heading {
border-radius: 0;
}
.faq .collape-plus {
position: absolute;
right: 0;
top: 0;
display: block;
width: 48px;
height: 100%;
text-align: center;
}
.collape-plus:before {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
font-weight: 400;
text-transform: capitalize;
}
.faq .collape-plus {
background: #1fcab8;
color: #fff;
}
.panel-title a[aria-expanded="true"] .fa-plus:before {
content: "\f068";
font-family: 'FontAwesome';
}
/* 404 page ||---------------------------- */
.big-font {
font-size: 130px;
margin-bottom: 22px;
display: block;
}
.big-font i {
color: #1fcab8;
}
.page-404 {
border-top: 1px solid #f1f1f1;
}
/* Blog Page --------------------------------------------------------- */
#blog {
background: #e5f0fb;
}
.blog-post {
display: inline-block;
width: 100%;
}
.blog-post .post-media {
position: relative;
overflow: hidden;
margin-bottom: 25px;
}
.blog-post .post-media iframe {
width: 100%;
}
.blog-post .post-meta, .comment-list .post-meta, .sidebar-widget .post-meta {
text-transform: uppercase;
color: #999;
font-size: 13px;
}
.post-meta span > a > i {
color: #1fcab8;
}
.blog-post .post-meta span, .comment-list .post-meta span {
margin-right: 3px;
}
.blog-post .post-header h5, .blog-post .post-header h4, .blog-post .post-header h3 {
margin-top: 10px;
margin-bottom: 20px;
}
.blog-post .post-header h2 {
margin-bottom: 30px;
margin-top: 10px;
}
.blog-post .post-entry {
margin-bottom: 30px;
}
.blog-post .post-entry p, .blog-post .post-entry blockquote, .post-entry ul {
margin-bottom: 20px;
}
.blog-post .post-entry ul {
color: #202020;
}
.lead-point li {
list-style: none;
margin-bottom: 10px;
color: #1fcab8;
font-weight: 600;
}
.lead-point li i {
margin-right: 10px;
}
.blog-post .post-tag {
color: #999;
text-transform: uppercase;
font-size: 13px;
}
.blog-post .post-tag span {
margin-right: 10px;
}
.blog-post .post-more-link {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.post-meta .post-more-link a {
padding: 8px 18px;
display: block;
text-align: center;
min-width: 0;
height: auto;
line-height: inherit;
}
.blog-post .post-more-link {
position: relative;
z-index: 2;
}
.blog-post .post-more-link a i {
font-size: 18px;
margin: 0;
background: none;
}
.blog-post .icons-hover-black {
position: absolute;
bottom: 39px;
padding: 10px 0;
visibility: hidden;
}
.post-section .post-more-link {
margin-top: 17px;
}
.post-section .blog-post .icons-hover-black {
bottom: auto;
top: 39px;
}
.blog-section .icons-hover-black {
bottom: auto;
top: 39px;
}
.blog-post .post-more-link:hover .icons-hover-black {
visibility: visible;
}
.blog-post .post-more-link:hover .btn-color-line {
background: #1fcab8;
color: #fff;
}
.blog-post .icons-hover-black a {
opacity: 0;
transition: all 0.25s ease 0s;
}
.blog-post .post-more-link:hover .icons-hover-black a {
opacity: 1;
transition: all 0.25s ease 0s;
}
.facebook-icon {
background: #3b5998;
}
.twitter-icon {
background: #00a0d1;
}
.linkedin-icon {
background: #00a0d1;
}
.googleplus-icon {
background: #db4a39;
}
.blog-post .icons-hover-black a {
padding: 8px 12px;
color: #fff;
}
.blog-post .icons-hover-black a:hover {
opacity: 0.8;
}
.blog-post .post-more-link .icons-hover-black i {
line-height: 28px;
}
.blog-post blockquote {
border-left: none;
color: #fff;
font-size: 17px;
font-weight: 400;
padding: 25px 25px;
margin: 0px;
font-weight: 300;
}
.blog-post blockquote:after {
content: "";
font-family: FontAwesome;
padding-left: 7px;
font-size: 12px;
}
.blog-post blockquote:before {
content: "";
font-family: FontAwesome;
padding-right: 7px;
font-size: 12px;
}
.blog-post-hr hr {
margin-bottom: 45px;
}
.post-author {
display: inline-block;
position: relative;
margin-bottom: 40px;
}
.post-author img {
width: 120px;
}
.post-author .post-author-details {
padding-left: 20px;
}
@media (max-width:767px){
.post-author .post-author-details {
padding-left: 0;
padding-top:25px;
}
}
.blog-post .fa-tag {
padding-right: 10px;
color: #1fcab8;
}
.post-author h6 {
margin-top: 0px;
margin-bottom: 0;
}
.post-author-blog {
overflow: hidden;
}
.post-author ul.social {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.post-author ul.social li {
list-style: none;
display: inline-block;
margin: 0 5px;
}
.post-comment .comment-numb {
font-weight: 300;
}
.post-comment .comment-list {
margin-left: 0px;
padding-right: 0px;
list-style: none;
padding: 0px;
}
.post-comment .comment-list h6 {
margin-top: 0px;
margin-bottom: 3px;
}
.post-comment .comment-list li:first-child {
padding-top: 0px;
}
.post-comment .comment-list li {
padding-top: 15px;
}
.post-comment .comment-list li:last-child .comment-detail {
border-bottom: 0px none;
}
.post-comment .comment-list li, .post-comment .comment-list .comment-reply {
position: relative;
padding-left: 100px;
}
.post-comment .comment-list .comment-detail {
border-bottom: 1px dotted #eee;
padding-bottom: 24px;
}
.post-comment .comment-list .comment-reply {
padding-top: 30px;
}
.post-comment .comment-list .comment-reply-btn i {
padding-right: 3px;
}
.post-comment .comment-avatar {
left: 0;
margin-right: 15px;
position: absolute;
width: 85px;
}
.post-comment .comment-avatar img {
width: 100%;
}
.post-comment-star .star-rat {
display: inline-block;
}
.post-comment-star label {
margin-right: 6px;
}
.blog-date {
position: absolute;
bottom: 0;
left: 0;
background: #1fcab8;
color: #fff;
}
.post-media {
position: relative;
}
.post-media .event-calender, .first-event .event-calender {
width: 100px;
height: 50px;
font-size: 23px;
padding-top: 11px;
z-index: 9;
text-align: center;
}
.post-media .event-calender span, .first-event .event-calender span {
font-size: 12px;
}
.blog-post .blog-date span, .post-media .event-calender span {
color: #fff;
}
.post-media img {
display: block;
}
.event-calender span {
font-size: 14px;
color: #fff;
display: block;
text-transform: uppercase;
margin-top: 0;
margin-right: 0;
}
/* Register and login Pages ||-----------*/
.page-signin .main-body {
max-width: 480px;
margin: 10px auto;
}
.page-signin .body-inner {
position: relative;
padding: 0 20px 20px;
}
.card {
position: relative;
overflow: hidden;
margin: 10px 0 20px 0;
border-radius: 2px;
}
.mdl-shadow--2dp, .card-panel, .card {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
}
.bg-white {
background-color: #fff;
color: #3D4051;
}
.z-depth-2, .page-signin .card {
box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.card .card-content {
padding: 20px;
border-radius: 0 0 2px 2px;
}
.page-signin .card .card-content {
padding: 30px 20px;
}
.page-signin .logo {
font-size: 26px;
font-weight: normal;
}
.page-signin .form-group {
position: relative;
margin: 0;
}
.ui-input-group {
position: relative;
margin: 18px 0 12px;
}
.card .card-action {
border-top: 1px solid rgba(0,0,0,0.05);
padding: 20px;
}
.card .card-action.no-border {
border: 0;
}
.color-primary, a.color-primary {
color: #1fcab8;
}
.card .card-action > a {
margin-right: 20px;
text-transform: uppercase;
}
.page-signin .additional-info {
text-align: center;
font-size: 12px;
}
.page-signin .additional-info a {
color: #fafafa;
}
.page-signin .additional-info .divider-h {
border-right: 1px solid #fafafa;
margin: 0 15px;
}
.page-signin .additional-info {
text-align: center;
font-size: 12px;
}
.page-signin .body-inner:before {
z-index: -1;
content: ' ';
line-height: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #1fcab8;
height: 220px;
}
.ui-input-group > input {
padding-left: 0;
padding-right: 0;
border: none;
box-shadow: 0 0 0 #fff;
border: none;
border-bottom: 1px solid #CBD5DD;
margin: 0;
}
.ui-input-group > input:focus {
border-bottom: 1px solid #CBD5DD;
box-shadow: 0 0 0 #fff;
}
.page-signin .ui-input-group .form-control {
color: #555;
}
.ui-input-group .input-bar {
position: relative;
display: block;
width: 100%;
}
.ui-input-group .input-bar:before {
left: 50%;
}
.ui-input-group .input-bar:before, .ui-input-group .input-bar:after {
content: '';
height: 1px;
width: 0;
bottom: 1px;
position: absolute;
background: #1fcab8;
-webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-input-group .input-bar:after {
right: 50%;
}
.ui-input-group .input-bar:before, .ui-input-group .input-bar:after {
content: '';
height: 1px;
width: 0;
bottom: 1px;
position: absolute;
background: #1fcab8;
-webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-input-group > label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
-webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0;
}
.ui-input-group>input:focus ~ label, .ui-input-group>input:valid ~
label {
top: -20px;
left: 0;
font-size: 12px;
}
.ui-input-group>input:focus ~ label, .ui-input-group>textarea:focus ~
label {
color: #1fcab8;
}
.ui-input-group>input:focus ~ .input-bar:before, .ui-input-group>input:focus ~
.input-bar:after {
width: 50%;
}
.ui-input-group>input:focus ~ .input-bar:before, .ui-input-group>input:focus ~
.input-bar:after {
width: 50%;
}
.checkbox-field label {
font-size: 12px;
}
.checkbox-field #check_box {
position: absolute;
top: 0;
left: 0;
opacity: 0
}
.custom-check {
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid #1fcab8;
top: 4px;
position: relative;
margin-right: 10px;
}
.custom-check:before {
content: "";
font-family: "Ionicons";
color: #1fcab8;
font-size: 24px;
position: absolute;
top: -3px;
left: 5px;
}
.checkbox-field #check_box:checked + .custom-check:before {
content: "\f3fd";
}
.spacer {
display: block;
margin-top: 15px;
margin-bottom: 15px;
}
/*Newslatter*/
.newsletter {
position: relative;
}
.newsletter form {
position: relative;
margin-top: 20px;
}
.newsletter .newsletter-input {
appearance: none;
-webkit-appearance: none;
border: 1px solid #fff;
-webkit-border-radius: 0px;
border-radius: 0px;
color: #202020;
outline: none;
font-weight: 400;
letter-spacing: 1px;
font-size: 13px;
padding: 12px 15px;
transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
display: inline-block;
}
.newsletter .newsletter-input, .newsletter .newsletter-input:focus {
width: 100%;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
padding-right: 40px;
background: none;
border-radius: 0;
border: 1px solid #B1AFAF;
color: #7f7f7f;
}
.newsletter .newsletter-btn {
position: absolute;
top: 0px;
right: 0px;
font-size: 18px;
background: #1fcab8;
line-height: 46px;
border-radius: 0;
width: 49px;
}
/*project*/
#project-section .italic {
margin-bottom: 8px;
}
#project-section .grid figure {
float: none
}
#project-section:hover .owl-prev, #project-section:hover .owl-next {
width: 40px;
}
/*======================*/
.block_wrapper{
overflow: hidden;
transform:translateZ(0);
-webkit-transform:translateZ(0);
}
.box-block {
border: 1px solid #ddd;
}
.title-box {
position: relative;
padding-left: 70px;
}
.box-icon {
position: absolute;
top: 0;
left: 0;
}
.box-icon {
color: #4b4e53;
font-size: 54px;
transition: all 0.1s ease 0s;
-webkit-transition: all 0.1s ease 0s;
}
.box-block:hover .box-icon {
font-size: 62px;
}
.title-box h3 {
color: #4b4e53;
line-height: 2;
font-size: 18px;
margin: 0;
}
.title-box p {
margin-bottom: 0;
}
.our-point {
padding: 0 0 0 20px;
}
.our-point li {
list-style: none;
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.61);
}
.our-point li i {
color: rgba(0, 0, 0, 0.61);
}
.our-vision p {
font-size: 17px;
line-height: 1.65;
}
/* Contact Page ||-----------*/
.map {
width: 100%;
height: 450px;
}
#map {
height: 100%;
}
#success {
display: none;
position: absolute;
top: -76px;
left: 0;
width: 100%
}
.dark-translucent-bg {
border-top: none;
border-bottom: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.dark-translucent-bg {
background-color: rgba(0,0,0,.4);
}
.contact-form {
position: relative;
background: #fff;
text-align: center;
}
.contact-form input[type="text"], .contact-form textarea {
padding-right: 30px;
border: 1px solid #DEDEDE;
margin-bottom: 0;
font-size: 14px;
}
form .error {
border-color: #e1534f;
}
.contact-form textarea {
height: 202px;
}
.contact-form input[type="text"] {
display: block;
height: 46px;
margin-bottom: 32px;
width: 100%;
font-size: 14px;
padding: 0 15px;
border: 1px solid #e5e5e5;
color: #878787;
background: transparent;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.contact-form input[type="text"]:focus, .contact-form textarea:focus {
border: 1px solid #1fcab8;
}
.i-block {
display: inline-block;
}
.icon-circle {
font-size: 50px;
border: 1px solid #d5d5d5;
height: 89px;
width: 89px;
text-align: center;
line-height: 89px;
margin: 0 auto;
border-radius: 100%;
display: block;
}
.contact .icon-circle {
border: 1px solid #1fcab8;
color: #1fcab8;
}
.mapmarker .ion-ios-location {
color: #1fcab8;
font-size: 50px;
}
@media (max-width: 767px) {
.inner-intro .container {
width: 100%;
max-width: 720px;
text-align: center;
}
}
/* Preloader ||-----------*/
#preloader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
background: #1fcab8;
}
.sk-circle {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #fff;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ==============================
20. Side Bar Widget styles
============================== */
.single-sidebar-widget ul {
list-style: none;
padding-left: 0;
}
.single-sidebar-widget {
margin-bottom: 0px;
}
.single-sidebar-widget:last-child {
margin-bottom: 0;
}
.single-sidebar-widget .sec-title {
margin-bottom: 30px;
}
.single-sidebar-widget .sec-title h2 {
font-size: 20px;
font-family: 'Noto Sans KR', sans-serif;
}
.single-sidebar-widget .sec-title {
font-size: 15px;
font-weight: 600;
}
.single-sidebar-widget .sec-title h2:after {
width: 35px;
}
.single-sidebar-widget .contact-form input, .single-sidebar-widget .contact-form .select-menu + .ui-selectmenu-button {
height: 40px;
}
.single-sidebar-widget .contact-form .select-menu + .ui-selectmenu-button {
margin-bottom: 2px;
}
.single-sidebar-widget .contact-form .select-menu + .ui-selectmenu-button .ui-selectmenu-text {
line-height: 40px;
}
.single-sidebar-widget .dwnld-broucher a {
text-transform: uppercase;
color: #08ADD0;
font-weight: 600;
margin-top: 30px;
font-size: 12px;
display: inline-block;
}
.single-sidebar-widget .special-links li:last-child {
margin-bottom: 0;
}
.single-sidebar-widget .special-links li a {
background: #f9f9f9;
color: #323232;
border: 1px solid #e9e9e9;
font-weight: 600;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
line-height: 50px;
position: relative;
padding: 0 20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
position: relative;
}
.single-sidebar-widget .special-links li:hover a:after, .single-sidebar-widget .special-links li.active a:after {
color: inherit;
}
.single-sidebar-widget .special-links li a:after {
content: '\f101';
font-family: 'FontAwesome';
position: absolute;
top: 0;
right: 20px;
line-height: 50px;
color: #6A6969;
font-weight: normal;
}
.single-sidebar-widget .special-links li a:before {
content: '\f0da';
font-family: 'FontAwesome';
position: absolute;
top: 0;
left: -1px;
color: #fab702;
font-size: 0px;
line-height: 50px;
opacity: 0;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-left: 4px solid #fab702;
}
.single-sidebar-widget .special-links li:hover a, .single-sidebar-widget .special-links li a.active {
background: #fff;
color: #fab702;
}
.single-sidebar-widget .special-links li a.active:after{
color: #fab702;
}
.single-sidebar-widget .special-links li a:hover:before, .single-sidebar-widget .special-links li a.active:before {
opacity: 1;
}
.search-box placeholder {
color: #000;
}
.single-sidebar-widget .search-box form {
background: #e5e5e5;
width: 100%;
height: 48px;
border: 1px solid #e9e9e9;
}
.single-sidebar-widget .search-box form input {
padding-left: 30px;
border: none;
outline: none;
height: 100%;
color: rgba(255, 255, 255, 0.5);
width: calc(100% - 55px);
background-color: transparent;
}
.single-sidebar-widget .search-box form input::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.single-sidebar-widget .search-box form input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.single-sidebar-widget .search-box form input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.single-sidebar-widget .search-box form input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba(255, 255, 255, 0.5);
}
.single-sidebar-widget .search-box form input:placeholder-shown {
/* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: rgba(186, 185, 185, 1);
}
.single-sidebar-widget .search-box form button {
position: relative;
left: 2px;
width: 50px;
background: #fab702;
color: #000000;
font-size: 16px;
padding: 11px 0px;
border: none;
outline: none;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.single-sidebar-widget .search-box form button:hover {
background: #1FB5C7;
}
.single-sidebar-widget .search-box form button:hover i {
color: #fff;
}
.single-sidebar-widget .search-box form button:hover:after {
background: #1FB5C7;
}
.single-sidebar-widget .search-box form button i {
position: relative;
z-index: 2;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.single-sidebar-widget .categories ul li:last-child a {
border: none;
}
.single-sidebar-widget .categories ul li a {
color: #898989;
text-transform: capitalize;
line-height: 42px;
display: block;
border-bottom: 1px solid #E6E6E6;
position: relative;
}
.single-sidebar-widget .categories ul li a:after {
content: '\f105';
font-family: 'FontAwesome';
color: #C8C8C8;
position: absolute;
top: 0;
right: 0;
}
.single-sidebar-widget .popular-post .img-cap-effect .img-box .img-caption:before {
border-width: 2px;
}
.single-sidebar-widget .popular-post li {
margin-bottom: 30px;
}
.single-sidebar-widget .popular-post li:last-child {
margin-bottom: 0;
}
.single-sidebar-widget .popular-post .img-box, .single-sidebar-widget .popular-post .content {
display: table-cell;
vertical-align: middle;
}
.single-sidebar-widget .popular-post .img-box {
width: 110px;
}
.single-sidebar-widget .popular-post .content {
padding-left: 30px;
}
.single-sidebar-widget .popular-post .content a h4 {
font-family: 'Noto Sans KR', sans-serif;
color: #242424;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.single-sidebar-widget .popular-post .content a h4:hover {
color: #1FB5C7;
}
.single-sidebar-widget .popular-post .content p {
color: #8E8D8D;
font-size: 13px;
line-height: 20px;
margin: 0;
}
.single-sidebar-widget .popular-post .content span {
color: #1CBAC8;
font-size: 13px;
display: block;
margin-top: 4px;
font-weight: 500;
}
.single-sidebar-widget .text-box p {
color: #8E8D8D;
}
.single-sidebar-widget .insta-feed ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.single-sidebar-widget .insta-feed ul .img-cap-effect .img-box .img-caption:before {
border-width: 2px;
}
.single-sidebar-widget .insta-feed {
font-size: 0;
display: inline-block;
}
.single-sidebar-widget .insta-feed img {
max-width: 100%;
display: inline-block;
font-size: 0;
margin-bottom: 1px;
margin-right: 1px;
}
.single-sidebar-widget .tag-cloud {
font-size: 0;
margin-left: -5px;
margin-right: -5px;
}
.single-sidebar-widget .tag-cloud li {
display: inline-block;
}
.single-sidebar-widget .tag-cloud li a {
display: block;
color: #787878;
text-transform: uppercase;
border: 1px solid #EAEAEA;
border-radius: 20px;
padding: 7px 22px;
font-size: 12px;
margin: 0 5px;
margin-bottom: 10px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.single-sidebar-widget .tag-cloud li a:hover {
background: #E5E5E5;
color: #787878;
border-color: #E5E5E5;
}
.single-client-box {
margin-bottom: 50px;
}
.single-client-box:last-child {
margin-bottom: 0;
}
.single-client-box .icon-box, .single-client-box .content {
display: table-cell;
vertical-align: middle;
}
.single-client-box .icon-box {
width: 170px;
text-align: center;
border-top: 4px solid #1FB5C7;
border-left: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}
.single-client-box .content {
padding-top: 30px;
padding-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
border-right: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
border-top: 1px solid #E9E9E9;
}
.single-client-box .content h3 {
font-size: 18px;
font-weight: bold;
font-family: 'Noto Sans KR', sans-serif;
color: #242424;
text-transform: uppercase;
margin-bottom: 10px;
}
.single-client-box .content p {
color: #898989;
margin: 0;
}
.single-sidebar-widget ul.brochure-btns li a {
font-family: 'Noto Sans KR', sans-serif;
color: #404040;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
display: block;
background: #FBFBFB;
border: 1px solid #EDEDED;
padding: 12px 20px;
}
.single-sidebar-widget ul.brochure-btns li {
display: block;
margin-bottom: 0px;
}
.single-sidebar-widget ul.brochure-btns li a i {
color: #e94429;
margin: 0 10px 0;
font-size: 1.2em;
}
.faq.service-box .panel-group .panel-heading + .panel-collapse > .panel-body {
padding: 20px 18px;
background: rgba(242, 237, 233, 0.38)
}
@media (max-width: 480px) {
h1 {
font-size: 36px;
}
}
/* Project ||-----------*/
.filter-button-group {
list-style: none;
padding: 0;
overflow: hidden;
}
.filter-button-group li {
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
.line-btn {
background: none;
color: #323232;
padding: 5px 10px;
border: 2px solid #e1e1e1;
display: block;
cursor: pointer;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.line-btn:hover, .line-btn.active {
background: #fab702;
border: 2px solid #fab702;
color: #fff;
}
.project-col-3 {
list-style: none;
padding-left: 0;
padding-top: 29px;
margin-left: -30px;
}
.project-col-3 li {
float: left;
padding-left: 30px;
width: 33.33%;
margin-bottom: 15px;
}
@media (max-width: 991px) {
.project-col-3 li {
width: 50%;
}
}
@media (max-width: 767px) {
.project-col-3 li {
width: 100%;
}
}
/* Project details ||-----------*/
.project-details {
position: relative;
}
.project-info {
position: absolute;
top: 80%;
right: 20px;
background: #d49c07;
color: #fff;
padding: 48px 30px;
width: 400px;
}
.project-box {
overflow: hidden;
width: 100%;
}
.project-info ul, .project-gallery {
list-style: none;
padding: 0;
}
.project-info li {
padding-top: 10px;
}
.project-info strong {
min-width: 133px;
display: inline-block;
}
.project-gallery {
overflow: hidden;
}
.project-gallery li {
margin-bottom: 20px;
width: 50%;
float: right;
padding-right: 20px;
}
.project-gallery li img {
width: 100%;
max-width: none;
}
#related-project .owl-prev, #related-project .owl-next {
top: -80px;
right: 0;
left: auto;
border: 2px solid #e9e9e9;
color: #ccc;
font-size: 22px;
height: 1.8em;
line-height: 1.6em;
padding: 0;
text-align: center;
width: 1.8em;
margin-right: 0;
margin-left: 0;
opacity: 1;
background: none;
}
#related-project .owl-prev {
right: 50px;
}
#related-project .owl-prev:hover, #related-project .owl-next:hover {
border: 2px solid #fab702;
color: #fff;
background: #fab702;
}
.project-col-3 li.width-2 {
width: 100%;
}
.project-col-3 li.grid-sizer {
margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
.project-info {
width: 100%;
}
.project-info {
position: static;
}
.project-info li {
float: left;
width: 50%;
}
.project-gallery {
margin-left: -20px;
}
.project-gallery li {
float: left;
width: 25%;
padding-right: 0;
padding-left: 20px;
margin-bottom: 0;
}
.project-col-3 li.width-2 {
width: 100%;
}
}
@media (max-width: 767px) {
.project-info {
width: 100%;
}
.project-info {
position: static;
}
.project-info li {
float: none;
}
.project-col-3 li.width-2 {
width: 100%;
}
.project-gallery li {
margin-bottom: 0;
}
}
/*Testimonial 2*/
.owl-item {
cursor: move;
}
.box-width {
margin: 0 auto;
text-align: center;
max-width: 598px;
}
.name-text {
color: #fff;
font-size: 14px;
display: block;
text-transform: uppercase;
}
.site-text {
color: #fff;
font-style: italic;
font-size: 14px;
}
.panel-group .panel {
border-radius: 0;
}
.get-touch .contact-form {
text-align: left;
}
.xs-size {
position: relative;
font-size: 16px;
right: 0;
top: 0;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.btn-text:hover .xs-size {
top: -6px;
right: -10px;
}
.date-bg {
background: #314555;
}
.chooose-box strong {
display: block;
margin-bottom: 15px;
}
.chooose-box strong i {
font-size: 20px;
margin-right: 10px;
color: #daa106;
}
#blog-section {
position: relative;
overflow: hidden;
}
#blog-section .blog-post .post-more-link {
float: none;
}
.project-info-box li {
padding-top: 10px;
}
.project-info-box strong {
min-width: 133px;
display: inline-block;
}
@media (max-width: 991px) {
.project-info-box {
padding-left: 26px;
}
.project-info-box strong {
min-width: 100px;
}
}
.top-btn {
min-width: 0;
padding: 0 29px;
line-height: 50px;
height: 50px;
margin-left: 20px;
background: #314555;
}
.top-btn:hover, .header-1 .icons-hover-black i:hover {
background: #a57a06;
}
.half-width {
overflow: hidden;
}
.none-responsive {
max-width: none;
}
.bg-img-1{
background: url(../images/new_slider02.jpg) 0 0 no-repeat;
background-size:cover
}
.bg-img-2{
background: url(../images/slider-home-construction-02.jpg) 0 0 no-repeat;
background-size:cover
}
/*Gallery*/
.gallery {
padding-bottom: 20px;
}
.isotope .item {
width: 25%;
float: left;
padding-bottom: 30px;
}
.gallery .item {
padding-bottom: 30px;
}
.gallery-col-2.isotope .item {
width: 50%;
}
.gallery-col-3.isotope .item {
width: 33.33%;
}
.icon-box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
font-size: 43px;
line-height: 100px;
}
.gallery-item-detail .icon-box {
color: #fff;
}
.nf-col-padding {
padding-left: 15px;
padding-right: 15px;
}
.gallery-item-detail a {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
}
.gallery-item-img {
position: relative;
overflow: hidden;
}
.gallery-item-img img {
transform: scale(1);
-webkit-transform: scale(1);
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
}
.gallery-item-img:hover img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
.gallery-item-img .gallery-item-detail {
background-color: #cb7b52;
text-align: center;
color: #fff;
display: -webkit-flex;
display: flex;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
}
.team-item-img .team-item-detail, .gallery-item-img .gallery-item-detail {
background-color: rgba(203, 123, 82, 0.32);
}
.gallery-item:hover .gallery-item-detail {
opacity: 1;
visibility: visible;
}
@media (max-width: 991px) {
.isotope .item {
width: 33.33%;
}
}
@media (max-width: 767px) {
.isotope .item, .gallery-col-3.isotope .item {
width: 50%;
}
}
@media (max-width: 480px) {
.isotope .item, .gallery-col-3.isotope .item, .gallery-col-2.isotope .item {
width: 100%;
}
}
/* ===== INDEX.PHP 인라인 스타일 추가 ===== */
/* 메인 배너 스타일 - 기존 이미지 사이즈에 맞춤 */
.main-banner {
position: relative;
width: 100%;
height: 600px; /* 기존 이미지 높이에 맞춤 */
overflow: hidden;
margin-bottom: 0;
}
/* 배너와 다음 섹션 사이의 자연스러운 연결 */
.main-banner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
z-index: 2;
pointer-events: none;
}
/* About 섹션과의 자연스러운 연결 */
#about-section {
position: relative;
background: linear-gradient(to bottom, rgba(255,255,255,0.95), #ffffff);
margin-top: -20px;
padding-top: 60px !important;
z-index: 1;
}
/* 갤러리 슬라이더 스타일 - 신간 도서 소개 테마 */
#project-section {
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #d1e7ff 100%);
padding: 80px 0;
position: relative;
}
/* 기존 스킨 스타일 오버라이드 */
#project-section .width-25per,
#project-section .width-75per,
#project-section .dark-bg,
#project-section .light-color,
#project-section .plr-20,
#project-section .m-height,
#project-section .block-title,
#project-section .block-content,
#project-section .grid,
#project-section #project,
#project-section .items,
#project-section .effect-goliath,
#project-section figure,
#project-section figcaption {
display: none !important;
}
#project-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.4;
pointer-events: none;
}
#project-section .block-title h2 {
font-size: 36px;
font-weight: bold;
color: #1976d2;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(25, 118, 210, 0.1);
position: relative;
}
#project-section .block-title h2::after {
content: 'NEW';
position: absolute;
top: -10px;
right: -40px;
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
font-size: 10px;
font-weight: bold;
padding: 4px 8px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
#project-section .title-line {
width: 100px;
height: 4px;
background: linear-gradient(90deg, #42a5f5, #1976d2, #1565c0);
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
position: relative;
}
#project-section .title-line::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #42a5f5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
}
/* 신간도서 타이틀 스타일 */
.book-gallery-title {
text-align: center;
margin-bottom: 50px;
padding: 0 20px;
}
.title-wrapper {
position: relative;
display: inline-block;
}
.main-title {
font-size: 42px;
font-weight: 700;
color: #1976d2;
margin: 0 0 15px 0;
text-shadow: 0 2px 4px rgba(25, 118, 210, 0.1);
background: linear-gradient(135deg, #1976d2, #42a5f5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.sub-title {
font-size: 18px;
color: #666;
margin: 0 0 25px 0;
font-weight: 300;
letter-spacing: 0.5px;
}
.title-decoration {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #42a5f5, #1976d2, #1565c0);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}
.title-decoration::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #42a5f5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
}
/* Swiper 갤러리 슬라이더 */
#book-gallery-slider .swiper {
width: 100%;
max-width: 100%;
margin: 40px auto 30px auto;
position: relative;
overflow: hidden;
padding: 0;
}
#book-gallery-slider .swiper-wrapper {
display: flex;
align-items: stretch;
}
#book-gallery-slider .swiper-slide {
/* Swiper의 inline width 계산을 존중: !important 제거 */
width: auto;
max-width: none;
height: auto;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
box-shadow: 0 10px 35px rgba(25, 118, 210, 0.12);
border: 3px solid rgba(66, 165, 245, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
#book-gallery-slider .swiper-slide:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(25, 118, 210, 0.2);
}
.book-card {
display: flex;
flex-direction: column;
height: 100%;
}
.book-image {
position: relative;
height: 400px;
overflow: hidden;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
}
.book-image img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 12px;
transition: transform 0.3s ease;
}
.book-card:hover .book-image img {
transform: scale(1.05);
}
.book-info {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.book-info h3 {
font-size: 18px;
font-weight: bold;
color: #1976d2;
margin-bottom: 10px;
line-height: 1.4;
}
.book-info p {
font-size: 14px;
color: #424242;
line-height: 1.4;
margin-bottom: 15px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.book-meta {
background: linear-gradient(135deg, #42a5f5, #1976d2);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
display: inline-block;
align-self: flex-start;
}
.book-link {
background: linear-gradient(135deg, #42a5f5, #1976d2);
color: white;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
display: block;
}
.book-link:hover {
background: linear-gradient(135deg, #1976d2, #1565c0);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
color: white;
text-decoration: none;
}
/* Swiper 네비게이션 버튼 */
#book-gallery-slider .swiper-button-prev::after,
#book-gallery-slider .swiper-button-next::after {
display: none !important;
}
#book-gallery-slider .swiper-button-prev,
#book-gallery-slider .swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px !important;
height: 50px !important;
border: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,248,255,0.9));
border: 2px solid #42a5f5;
border-radius: 50%;
cursor: pointer;
margin-top: 0px;
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
z-index: 1000; /* 어떤 카드/오버레이보다 위 */
pointer-events: auto;
}
#book-gallery-slider .swiper-button-prev:hover,
#book-gallery-slider .swiper-button-next:hover {
background: linear-gradient(135deg, #42a5f5, #1976d2);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(25, 118, 210, 0.3);
}
#book-gallery-slider .swiper-button-prev {
left: 0.5% !important;
}
#book-gallery-slider .swiper-button-next {
right: 0.5% !important;
}
#book-gallery-slider .swiper-navigation-icon {
width: 20px;
height: 20px;
color: #1976d2;
transition: color 0.3s ease;
}
#book-gallery-slider .swiper-button-prev:hover .swiper-navigation-icon,
#book-gallery-slider .swiper-button-next:hover .swiper-navigation-icon {
color: white;
}
.gallery-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #42a5f5, #1976d2, #1565c0);
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item::after {
content: 'NEW';
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
font-size: 9px;
font-weight: bold;
padding: 3px 6px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
z-index: 2;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 25px 50px rgba(25, 118, 210, 0.2);
border-color: rgba(66, 165, 245, 0.25);
}
.gallery-item:hover::before {
opacity: 1;
}
.gallery-item:hover::after {
opacity: 1;
transform: scale(1);
}
/* 갤러리 아이템 내부 스타일 */
.gallery-item .book-image {
position: relative;
height: 640px;
overflow: visible;
padding: 50px 40px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-item .book-image img {
max-width: 95%;
max-height: 95%;
object-fit: contain;
transition: transform 0.3s ease;
border-radius: 8px;
}
.gallery-item:hover .book-image img {
transform: scale(1.05);
}
.gallery-item .slide-info {
padding: 15px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gallery-item h3 {
font-size: 17px;
font-weight: bold;
color: #1976d2;
margin-bottom: 12px;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(25, 118, 210, 0.1);
position: relative;
}
.gallery-item h3::before {
content: '📚';
margin-right: 8px;
font-size: 14px;
}
.gallery-item p {
font-size: 14px;
color: #424242;
line-height: 1.6;
margin-bottom: 15px;
}
.gallery-item .item-meta {
font-size: 12px;
color: #1976d2;
margin-bottom: 15px;
font-weight: 600;
background: rgba(66, 165, 245, 0.1);
padding: 4px 8px;
border-radius: 12px;
display: inline-block;
}
.gallery-item .item-link {
display: inline-block;
padding: 12px 24px;
background: linear-gradient(135deg, #42a5f5, #1976d2);
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 13px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gallery-item .item-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.gallery-item .item-link:hover {
background: linear-gradient(135deg, #1e88e5, #1565c0);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(30, 136, 229, 0.4);
}
.gallery-item .item-link:hover::before {
left: 100%;
}
/* 갤러리 슬라이더 네비게이션 */
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 10;
}
.gallery-nav-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,248,255,0.9));
border: 2px solid rgba(66, 165, 245, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: auto;
box-shadow: 0 4px 20px rgba(30, 136, 229, 0.2);
backdrop-filter: blur(10px);
}
.gallery-nav-btn:hover {
background: linear-gradient(135deg, #42a5f5, #1e88e5);
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(30, 136, 229, 0.3);
border-color: rgba(255,255,255,0.3);
}
.gallery-nav-btn i {
font-size: 20px;
color: #1565c0;
transition: color 0.3s ease;
}
.gallery-nav-btn:hover i {
color: white;
}
.gallery-nav-btn.prev-btn {
margin-left: 0;
z-index: 20;
}
.gallery-nav-btn.next-btn {
margin-right: 0;
z-index: 20;
}
/* 갤러리 슬라이더 인디케이터 */
.gallery-indicators {
display: flex;
justify-content: center;
margin-top: 30px;
gap: 10px;
}
.gallery-indicator {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(66, 165, 245, 0.3);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(66, 165, 245, 0.2);
position: relative;
}
.gallery-indicator::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(66, 165, 245, 0.5);
transition: all 0.3s ease;
}
.gallery-indicator.active {
background: linear-gradient(135deg, #42a5f5, #1e88e5);
transform: scale(1.3);
border-color: rgba(255,255,255,0.3);
box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4);
}
.gallery-indicator.active::before {
background: white;
transform: translate(-50%, -50%) scale(1.2);
}
.gallery-indicator:hover {
background: rgba(66, 165, 245, 0.5);
transform: scale(1.2);
border-color: rgba(66, 165, 245, 0.4);
}
.banner-container {
position: relative;
width: 100%;
height: 100%;
}
.banner-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.fallback-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.banner-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 10;
padding: 0 100px;
}
.banner-text {
max-width: 600px;
color: white;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: translateY(0);
}
.banner-text span {
font-size: 16px;
font-weight: 600;
color: #ffffff;
display: block;
margin-bottom: 10px;
letter-spacing: 2px;
line-height: 1;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: slideInUp 0.8s ease-out;
}
.banner-text h2 {
font-size: 42px;
color: #ffffff;
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: slideInUp 0.8s ease-out 0.1s both;
}
.banner-text p {
font-family: 'Noto Sans KR', sans-serif;
color: #ffffff;
font-size: 15px;
margin-bottom: 20px;
line-height: 1.8;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: slideInUp 0.8s ease-out 0.2s both;
}
.btn-text {
line-height: 60px;
padding-left: 38px;
padding-right: 38px;
font-size: 13px;
font-weight: 700;
background: #1fcab8;
color: #fff;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.btn-text:hover {
background-color: #17a085;
color: white;
text-decoration: none;
}
/* 화살표 네비게이션 */
.banner-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 15;
pointer-events: none;
}
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
}
.nav-arrow:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
}
.nav-prev {
left: 30px;
}
.nav-next {
right: 30px;
}
/* 페이지네이션 도트 */
.banner-dots {
position: absolute;
bottom: 66px;
left: 52%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 15;
}
.dot {
width: 26px;
height: 3px;
background: #8f8f8f;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 2px;
}
.dot.active {
background: #ffaf36;
}
.dot:hover {
background: #ffaf36;
}
/* 키프레임 애니메이션 */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* 텍스트 변경 시 애니메이션 클래스 */
.banner-text.changing {
animation: fadeInScale 0.6s ease-out;
}
.banner-text span.changing {
animation: slideInUp 0.6s ease-out;
}
.banner-text h2.changing {
animation: slideInUp 0.6s ease-out 0.1s both;
}
.banner-text p.changing {
animation: slideInUp 0.6s ease-out 0.2s both;
}
/* 메뉴 드롭다운 완전 수정 */
.navigation .sub-nav {
z-index: 99999 !important;
position: absolute !important;
opacity: 0 !important;
visibility: hidden !important;
transition: all 0.3s ease !important;
pointer-events: none !important;
}
.navigation li {
z-index: 99998 !important;
position: relative !important;
}
.header {
z-index: 99997 !important;
position: relative !important;
}
/* 메뉴 호버 시 서브메뉴 표시 */
.navigation li:hover .sub-nav,
.navigation li .sub-nav:hover {
opacity: 1 !important;
visibility: visible !important;
top: 100% !important;
pointer-events: auto !important;
display: block !important;
}
/* 서브메뉴와 메인메뉴 사이의 간격 완전 제거 */
.navigation .sub-nav {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
top: 100% !important;
}
/* 서브메뉴 항목 스타일 */
.navigation .sub-nav li {
z-index: 99999 !important;
position: relative !important;
}
/* 메뉴 호버 영역 확장을 위한 가상 요소 */
.navigation li::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 20px;
z-index: 99998;
background: transparent;
}
/* 서브메뉴 강제 표시 (디버깅용) */
.navigation li:hover .sub-nav {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
pointer-events: auto !important;
z-index: 99999 !important;
}
/* 서브메뉴 항목 호버 효과 */
.navigation .sub-nav li:hover {
background-color: #263642 !important;
}
/* 메뉴 전체 영역 확장 */
.navigation {
position: relative !important;
z-index: 99997 !important;
}
/* 서브메뉴가 다른 요소에 가려지지 않도록 */
.navigation .sub-nav {
box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
border: 1px solid #314351 !important;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.main-banner {
height: 400px;
}
.banner-content {
padding: 0 30px;
}
.banner-text h2 {
font-size: 24px;
}
.banner-text span {
font-size: 14px;
}
.banner-text p {
font-size: 13px;
line-height: 1.4;
}
.nav-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}
.nav-prev {
left: 15px;
}
.nav-next {
right: 15px;
}
.banner-dots {
bottom: 30px;
}
/* Swiper 갤러리 슬라이더 모바일 스타일 */
#project-section {
padding: 60px 0;
}
#project-section .block-title h2 {
font-size: 28px;
}
/* 모바일 타이틀 스타일 */
.book-gallery-title {
margin-bottom: 30px;
padding: 0 15px;
}
.main-title {
font-size: 28px;
margin-bottom: 10px;
}
.sub-title {
font-size: 14px;
margin-bottom: 20px;
}
.title-decoration {
width: 60px;
height: 3px;
}
.title-decoration::before {
width: 6px;
height: 6px;
}
#book-gallery-slider {
margin: 0;
padding: 0;
}
#book-gallery-slider .swiper {
padding: 0;
margin: 0;
}
#book-gallery-slider .swiper-slide {
width: 100% !important;
max-width: 100% !important;
}
#book-gallery-slider .swiper-wrapper {
width: 100%;
}
.book-image {
height: 58vw; /* 기기에 맞춘 반응형 높이 */
max-height: 420px;
min-height: 240px;
padding: 16px;
}
.book-info {
padding: 18px;
}
.book-info h3 {
font-size: 20px;
}
.book-info p {
font-size: 16px;
}
/* 모바일에서 네비게이션 버튼 표시 */
#book-gallery-slider .swiper-button-prev,
#book-gallery-slider .swiper-button-next {
display: block !important;
width: 40px !important;
height: 40px !important;
}
#book-gallery-slider .swiper-button-prev {
left: 5% !important;
}
#book-gallery-slider .swiper-button-next {
right: 5% !important;
}
}
@media (max-width: 480px) {
.main-banner {
height: 350px;
}
.banner-text h2 {
font-size: 18px;
}
.banner-text p {
line-height: 1.2;
font-size: 12px;
}
}
/* ===== 갓등중창단 홍보 섹션 스타일 ===== */
#choir-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
/* 자동재생 안내 메시지 */
.autoplay-notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 15px 25px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
z-index: 10;
opacity: 1;
transition: opacity 0.3s ease;
pointer-events: none;
}
.autoplay-notice i {
font-size: 20px;
color: #ff6b6b;
}
.autoplay-notice.hidden {
opacity: 0;
pointer-events: none;
}
/* 비디오 오버레이 */
.video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
transition: background 0.3s ease;
}
.video-overlay:hover {
background: rgba(0, 0, 0, 0.5);
}
.play-button {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.play-button i {
font-size: 30px;
color: #333;
margin-left: 4px;
}
.video-overlay:hover .play-button {
transform: scale(1.1);
background: rgba(255, 255, 255, 1);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}
/* ===== 신입생 모집 섹션 스타일 ===== */
#admission-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
#admission-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
pointer-events: none;
}
.admission-header {
margin-bottom: 50px;
}
.admission-title {
font-size: 36px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.admission-subtitle {
font-size: 18px;
color: #7f8c8d;
margin-bottom: 20px;
font-weight: 400;
}
.admission-divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #3498db, #2980b9);
margin: 0 auto;
border-radius: 2px;
}
.admission-video-container {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.admission-info {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
height: 100%;
}
.info-title {
font-size: 24px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 25px;
text-align: center;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 15px;
}
.info-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 15px;
border-radius: 10px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.info-item:hover {
background: #e3f2fd;
transform: translateX(5px);
}
.info-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3498db, #2980b9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.info-icon i {
font-size: 24px;
color: white;
}
.info-content h5 {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.info-content p {
font-size: 14px;
color: #7f8c8d;
margin: 0;
line-height: 1.4;
}
.admission-message-section {
margin-top: 50px;
}
.message-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.message-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #3498db, #2980b9, #1abc9c);
}
.message-icon {
text-align: center;
margin-bottom: 30px;
}
.message-icon i {
font-size: 48px;
color: #3498db;
opacity: 0.7;
}
.bible-quote {
font-size: 24px;
font-style: italic;
color: #2c3e50;
text-align: center;
margin: 0 0 20px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
border-left: 5px solid #3498db;
line-height: 1.6;
}
.bible-quote cite {
display: block;
font-size: 16px;
color: #7f8c8d;
margin-top: 10px;
font-style: normal;
}
.message-text h3 {
font-size: 28px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
text-align: center;
}
.message-text p {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
text-align: justify;
}
.admission-buttons {
text-align: center;
margin-top: 30px;
}
.btn-admission {
display: inline-block;
padding: 15px 30px;
margin: 0 10px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-admission.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}
.btn-admission.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}
.btn-admission.btn-secondary {
background: transparent;
color: #3498db;
border-color: #3498db;
}
.btn-admission.btn-secondary:hover {
background: #3498db;
color: white;
transform: translateY(-2px);
}
.btn-admission i {
margin-right: 8px;
font-size: 18px;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.admission-title {
font-size: 28px;
}
.admission-subtitle {
font-size: 16px;
}
.admission-video-container,
.admission-info {
margin-bottom: 20px;
}
.info-item {
flex-direction: column;
text-align: center;
}
.info-icon {
margin-right: 0;
margin-bottom: 10px;
}
.message-card {
padding: 25px;
}
.bible-quote {
font-size: 20px;
}
.message-text h3 {
font-size: 24px;
}
.btn-admission {
display: block;
margin: 10px auto;
width: 80%;
}
}
@media (max-width: 480px) {
.admission-title {
font-size: 24px;
}
.admission-subtitle {
font-size: 14px;
}
.bible-quote {
font-size: 18px;
}
.message-text h3 {
font-size: 20px;
}
.btn-admission {
padding: 12px 25px;
font-size: 14px;
}
}
/* ===== 후원회원 모집 섹션 스타일 ===== */
#support-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
#support-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.4;
pointer-events: none;
}
.support-header {
margin-bottom: 50px;
}
.support-title {
font-size: 32px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
line-height: 1.3;
}
.support-subtitle {
font-size: 18px;
color: #7f8c8d;
margin-bottom: 20px;
font-weight: 400;
font-style: italic;
}
.support-divider {
width: 100px;
height: 4px;
background: linear-gradient(90deg, #e74c3c, #c0392b);
margin: 0 auto;
border-radius: 2px;
}
.mission-card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 30px;
height: 100%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mission-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #e74c3c, #c0392b, #8e44ad);
}
.mission-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.mission-icon {
text-align: center;
margin-bottom: 20px;
}
.mission-icon i {
font-size: 48px;
color: #e74c3c;
opacity: 0.8;
}
.mission-content h3 {
font-size: 20px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
line-height: 1.4;
}
.mission-content p {
font-size: 15px;
line-height: 1.7;
color: #555;
margin: 0;
text-align: justify;
}
.support-message-section {
margin-top: 50px;
}
.support-card {
background: white;
border-radius: 25px;
padding: 50px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.support-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg, #e74c3c, #c0392b, #8e44ad, #3498db);
}
.support-icon {
text-align: center;
margin-bottom: 30px;
}
.support-icon i {
font-size: 60px;
color: #e74c3c;
opacity: 0.8;
}
.support-content h3 {
font-size: 28px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 25px;
text-align: center;
}
.support-message p {
font-size: 17px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
text-align: justify;
}
.mission-statement {
font-size: 18px;
font-weight: 500;
color: #2c3e50;
text-align: center;
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
border-left: 5px solid #e74c3c;
}
.support-benefits {
margin: 40px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
}
.support-benefits h4 {
font-size: 22px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 25px;
text-align: center;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.benefit-item {
display: flex;
align-items: center;
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.benefit-item i {
font-size: 24px;
color: #27ae60;
margin-right: 15px;
flex-shrink: 0;
}
.benefit-item span {
font-size: 16px;
color: #2c3e50;
font-weight: 500;
}
.support-buttons {
text-align: center;
margin-top: 40px;
}
.btn-support {
display: inline-block;
padding: 18px 35px;
margin: 0 15px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-support.btn-primary {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}
.btn-support.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(231, 76, 60, 0.4);
}
.btn-support.btn-secondary {
background: transparent;
color: #e74c3c;
border-color: #e74c3c;
}
.btn-support.btn-secondary:hover {
background: #e74c3c;
color: white;
transform: translateY(-3px);
}
.btn-support i {
margin-right: 10px;
font-size: 20px;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.support-title {
font-size: 26px;
}
.support-subtitle {
font-size: 16px;
}
.mission-card {
margin-bottom: 20px;
padding: 25px;
}
.mission-content h3 {
font-size: 18px;
}
.mission-content p {
font-size: 14px;
}
.support-card {
padding: 30px;
}
.support-content h3 {
font-size: 24px;
}
.support-message p {
font-size: 16px;
}
.mission-statement {
font-size: 16px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.btn-support {
display: block;
margin: 15px auto;
width: 80%;
}
}
@media (max-width: 480px) {
.support-title {
font-size: 22px;
}
.support-subtitle {
font-size: 14px;
}
.mission-card {
padding: 20px;
}
.mission-content h3 {
font-size: 16px;
}
.support-card {
padding: 25px;
}
.support-content h3 {
font-size: 20px;
}
.btn-support {
padding: 15px 25px;
font-size: 16px;
}
}
/* ===== 관련사이트 섹션 스타일 ===== */
.related-sites-table {
margin-top: 40px;
}
.site-row {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 20px;
}
.site-cell {
flex: 1;
background: white;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.site-cell::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #3498db, #2980b9);
}
.site-cell:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.site-logo {
margin-bottom: 15px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.site-logo img {
max-width: 100%;
max-height: 70px;
object-fit: contain;
transition: transform 0.3s ease;
}
.site-cell:hover .site-logo img {
transform: scale(1.05);
}
.site-title h4 {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 6px;
line-height: 1.3;
}
.site-title p {
font-size: 13px;
color: #7f8c8d;
margin: 0;
line-height: 1.4;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.site-row {
flex-wrap: wrap;
gap: 15px;
}
.site-cell {
flex: 1 1 calc(50% - 7.5px);
padding: 15px;
}
.site-logo {
height: 60px;
}
.site-logo img {
max-height: 60px;
}
.site-title h4 {
font-size: 15px;
}
.site-title p {
font-size: 12px;
}
}
@media (max-width: 480px) {
.site-row {
flex-direction: column;
gap: 10px;
}
.site-cell {
flex: 1;
padding: 12px;
}
.site-logo {
height: 50px;
}
.site-logo img {
max-height: 50px;
}
.site-title h4 {
font-size: 14px;
}
.site-title p {
font-size: 11px;
}
}
/* ===== 바로가기 사이트 섹션 스타일 ===== */
#shortcut-section {
background: #f8f9fa;
margin-top: 40px;
margin-bottom: 60px;
overflow: visible;
padding: 0 15px;
width: 100%;
}
#shortcut-section .container {
overflow: visible;
max-width: 100% !important;
padding: 0 !important;
width: 100% !important;
margin: 0 auto;
}
.shortcut-bar {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
border-radius: 12px;
padding: 25px 80px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
overflow: visible;
flex-wrap: wrap;
gap: 15px;
width: 100%;
min-height: 140px;
position: relative;
box-sizing: border-box;
}
.shortcut-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
border-radius: 12px;
pointer-events: none;
}
.shortcut-item {
flex: 0 0 calc(16.666% - 12px);
text-align: center;
flex-shrink: 0;
min-width: 140px;
position: relative;
z-index: 1;
}
.shortcut-link {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-weight: 600;
font-size: 13px;
padding: 12px 8px;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
min-height: 2.8em;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.shortcut-link:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.15) 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.shortcut-link:active {
transform: translateY(0px);
}
.shortcut-link span {
display: block;
white-space: normal;
overflow: visible;
line-height: 1.5;
word-break: keep-all;
text-align: center;
word-wrap: break-word;
letter-spacing: 0.3px;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
#shortcut-section {
margin-bottom: 50px;
padding: 0 10px;
}
.shortcut-bar {
padding: 20px 15px;
gap: 12px;
border-radius: 10px;
}
.shortcut-item {
flex: 0 0 calc(33.333% - 8px);
min-width: 100px;
}
.shortcut-link {
font-size: 12px;
padding: 8px 5px;
min-height: 2.5em;
}
}
@media (max-width: 480px) {
#shortcut-section {
margin-bottom: 40px;
padding: 0 10px;
}
.shortcut-bar {
flex-wrap: wrap;
gap: 10px;
padding: 15px 10px;
border-radius: 8px;
}
.shortcut-item {
flex: 0 0 calc(50% - 5px);
min-width: 45%;
}
.shortcut-link {
font-size: 11px;
padding: 8px 4px;
font-weight: 500;
}
}
#choir-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.35;
pointer-events: none;
}
/* 갓등중창단 헤더 */
.choir-header {
position: relative;
z-index: 2;
}
.choir-title {
font-size: 48px;
font-weight: 700;
color: #1976d2;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(25, 118, 210, 0.1);
background: linear-gradient(135deg, #1976d2, #42a5f5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.choir-subtitle {
font-size: 20px;
color: #666;
margin-bottom: 25px;
font-weight: 300;
letter-spacing: 0.5px;
}
.choir-divider {
width: 100px;
height: 4px;
background: linear-gradient(90deg, #42a5f5, #1976d2, #1565c0);
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
position: relative;
}
.choir-divider::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #42a5f5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
}
/* 메인 비디오 컨테이너 */
.main-video-container {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(25, 118, 210, 0.15);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.main-video-container:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(25, 118, 210, 0.2);
}
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 비율 */
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
transition: opacity 0.3s ease;
}
.video-info {
padding: 25px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.video-info h3 {
font-size: 24px;
font-weight: bold;
color: #1976d2;
margin-bottom: 10px;
}
.video-info p {
font-size: 16px;
color: #666;
line-height: 1.6;
margin: 0;
}
/* 사이드 비디오 섹션 */
.side-videos {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 15px 35px rgba(25, 118, 210, 0.15);
position: relative;
z-index: 2;
}
.side-title {
font-size: 20px;
font-weight: bold;
color: #1976d2;
margin-bottom: 20px;
text-align: center;
padding-bottom: 15px;
border-bottom: 2px solid #e3f2fd;
}
.video-item {
display: flex;
margin-bottom: 20px;
padding: 15px;
border-radius: 15px;
transition: all 0.3s ease;
cursor: pointer;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid transparent;
}
.video-item:hover {
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
border-color: #42a5f5;
transform: translateX(5px);
box-shadow: 0 8px 25px rgba(25, 118, 210, 0.15);
}
.video-thumbnail {
position: relative;
width: 120px;
height: 80px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
margin-right: 15px;
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.video-item:hover .video-thumbnail img {
transform: scale(1.1);
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: rgba(25, 118, 210, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.play-overlay i {
color: white;
font-size: 16px;
margin-left: 2px;
}
.video-item:hover .play-overlay {
background: rgba(25, 118, 210, 1);
transform: translate(-50%, -50%) scale(1.1);
}
.video-desc {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-desc h5 {
font-size: 16px;
font-weight: bold;
color: #1976d2;
margin-bottom: 5px;
line-height: 1.3;
}
.video-desc p {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.4;
}
/* 갓등중창단 정보 섹션 */
.choir-info-section {
margin-top: 50px;
}
.choir-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 50px rgba(25, 118, 210, 0.15);
display: flex;
align-items: center;
position: relative;
z-index: 2;
border: 3px solid rgba(66, 165, 245, 0.1);
}
.choir-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #42a5f5, #1976d2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30px;
flex-shrink: 0;
box-shadow: 0 10px 30px rgba(25, 118, 210, 0.3);
}
.choir-icon i {
font-size: 36px;
color: white;
}
.choir-content {
flex: 1;
}
.choir-content h3 {
font-size: 28px;
font-weight: bold;
color: #1976d2;
margin-bottom: 15px;
}
.choir-content p {
font-size: 16px;
color: #666;
line-height: 1.8;
margin-bottom: 25px;
}
.choir-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.btn-choir {
display: inline-flex;
align-items: center;
padding: 15px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-choir i {
margin-right: 8px;
font-size: 16px;
}
.btn-choir.btn-primary {
background: linear-gradient(135deg, #42a5f5, #1976d2);
color: white;
}
.btn-choir.btn-primary:hover {
background: linear-gradient(135deg, #1976d2, #1565c0);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
color: white;
text-decoration: none;
}
.btn-choir.btn-secondary {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
color: #1976d2;
border: 2px solid #42a5f5;
}
.btn-choir.btn-secondary:hover {
background: linear-gradient(135deg, #42a5f5, #1976d2);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
text-decoration: none;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.choir-title {
font-size: 36px;
}
.choir-subtitle {
font-size: 18px;
}
.video-info h3 {
font-size: 20px;
}
.video-info p {
font-size: 14px;
}
.side-title {
font-size: 18px;
}
.video-item {
flex-direction: column;
text-align: center;
}
.video-thumbnail {
width: 100%;
height: 120px;
margin-right: 0;
margin-bottom: 15px;
}
.choir-card {
flex-direction: column;
text-align: center;
padding: 30px;
}
.choir-icon {
margin-right: 0;
margin-bottom: 20px;
}
.choir-content h3 {
font-size: 24px;
}
.choir-content p {
font-size: 15px;
}
.choir-buttons {
justify-content: center;
}
.btn-choir {
padding: 12px 20px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.choir-title {
font-size: 28px;
}
.choir-subtitle {
font-size: 16px;
}
.choir-card {
padding: 20px;
}
.choir-icon {
width: 60px;
height: 60px;
}
.choir-icon i {
font-size: 28px;
}
.choir-content h3 {
font-size: 20px;
}
.choir-content p {
font-size: 14px;
}
.choir-buttons {
flex-direction: column;
align-items: center;
}
.btn-choir {
width: 100%;
justify-content: center;
padding: 15px 20px;
}
}
/* ===== PC 화면에서 메뉴 강제 표시 ===== */
@media (min-width: 768px) {
.navigation {
display: block !important;
height: auto !important;
overflow: visible !important;
}
.navigation.mobile-menu-hidden {
display: block !important;
height: auto !important;
overflow: visible !important;
}
.navigation ul li ul {
display: block !important;
height: auto !important;
overflow: visible !important;
}
.navigation ul li.on ul {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
/* ========================================
모바일 전용 디자인 (768px 이하)
======================================== */
@media (max-width: 768px) {
/* 전체 레이아웃 */
.wrapper {
overflow-x: hidden;
}
/* 헤더 스타일 */
#header {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.top-bar-section {
padding: 8px 0;
}
.top-contact {
font-size: 11px;
text-align: center;
}
.secondary-header {
padding: 10px 0;
}
/* 모바일 메뉴 버튼 표시 */
.menu {
display: block !important;
visibility: visible !important;
}
/* 모바일 메뉴 초기 상태 - 숨김 */
.navigation {
display: none !important;
position: fixed;
left: 0;
top: 0;
width: 100%;
max-height: 100vh;
overflow-y: auto;
z-index: 9999;
background: #314555;
}
/* 모바일 메뉴 열림 상태 */
.navigation:not(.mobile-menu-hidden) {
display: block !important;
}
/* 로고 크기 조정 */
.logo img {
max-height: 40px;
}
/* 메인 배너 */
.main-banner {
height: 60vh !important;
min-height: 400px;
}
.banner-text {
width: 90% !important;
padding: 20px !important;
}
.banner-text h2 {
font-size: 24px !important;
line-height: 1.3 !important;
}
.banner-text span {
font-size: 14px !important;
}
.banner-text p {
font-size: 13px !important;
line-height: 1.6 !important;
}
/* 버튼 크기 */
.btn-text {
padding: 10px 20px !important;
font-size: 13px !important;
}
/* 신간도서 슬라이더 */
#book-gallery-slider {
padding: 20px 10px !important;
}
.book-gallery-title {
padding: 0 15px !important;
}
.main-title {
font-size: 24px !important;
}
.sub-title {
font-size: 14px !important;
}
/* 바로가기 바 - 모바일 최적화 */
#shortcut-section {
margin: 30px 0 40px;
padding: 0 !important;
}
.shortcut-bar {
padding: 20px 15px !important;
border-radius: 12px !important;
gap: 8px !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.shortcut-item {
flex: 0 0 calc(50% - 6px) !important;
min-width: calc(50% - 6px) !important;
}
.shortcut-link {
padding: 14px 8px !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.95) !important;
color: #333 !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
font-weight: 600 !important;
font-size: 13px !important;
min-height: auto !important;
transition: all 0.3s ease !important;
}
.shortcut-link:hover {
background: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}
.shortcut-link span {
line-height: 1.4 !important;
font-size: 12px !important;
}
/* 갓등중창단 섹션 */
#choir-section {
padding: 40px 10px !important;
}
.choir-title {
font-size: 32px !important;
}
.choir-subtitle {
font-size: 16px !important;
}
.main-video-container {
margin-bottom: 20px !important;
}
/* 푸터 */
.footer {
padding: 30px 15px 10px !important;
}
.footer-info {
text-align: center !important;
}
.footer-info h4 {
font-size: 20px !important;
margin-bottom: 15px !important;
}
.footer-info address {
font-size: 13px !important;
line-height: 1.8 !important;
}
.copyright {
padding: 15px 0 !important;
font-size: 11px !important;
}
}
/* ========================================
작은 모바일 디자인 (480px 이하)
======================================== */
@media (max-width: 480px) {
/* 헤더 */
.logo img {
max-height: 35px;
}
.top-contact {
font-size: 10px;
}
/* 메인 배너 */
.main-banner {
height: 50vh !important;
min-height: 350px;
}
.banner-text {
width: 95% !important;
padding: 15px !important;
}
.banner-text h2 {
font-size: 20px !important;
}
.banner-text span {
font-size: 12px !important;
}
.banner-text p {
font-size: 12px !important;
}
/* 바로가기 바 - 초소형 모바일 */
.shortcut-bar {
padding: 15px 10px !important;
border-radius: 10px !important;
gap: 6px !important;
}
.shortcut-item {
flex: 0 0 calc(50% - 4px) !important;
}
.shortcut-link {
padding: 12px 6px !important;
border-radius: 8px !important;
font-size: 11px !important;
}
.shortcut-link span {
font-size: 11px !important;
line-height: 1.3 !important;
}
/* 섹션 간격 */
#about-section,
#project-section,
#choir-section {
padding: 30px 10px !important;
}
/* 푸터 */
.footer-info h4 {
font-size: 18px !important;
}
.footer-info address {
font-size: 12px !important;
}
}
/* 터치 최적화 */
@media (max-width: 768px) {
/* 터치하기 좋은 크기의 버튼 */
button, .btn, a {
min-height: 44px;
min-width: 44px;
}
/* 스크롤 최적화 */
* {
-webkit-overflow-scrolling: touch;
}
/* 입력 필드 */
input, textarea, select {
font-size: 16px !important; /* iOS 줌 방지 */
}
}
/* 왼쪽 사이드바 메뉴 스타일 */
.sidebar-menu {
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
box-shadow: none;
margin-bottom: 30px;
}
.sidebar-header {
background: #ffffff;
padding: 20px 25px;
border-bottom: 1px solid #e0e0e0;
}
.sidebar-header h3 {
color: #333333;
font-size: 18px;
font-weight: 600;
margin: 0;
text-align: left;
font-family: 'Noto Sans KR', sans-serif;
}
.sidebar-nav {
list-style: none;
padding: 0;
margin: 0;
background: transparent;
}
.sidebar-nav li {
margin-bottom: 6px;
background: #ffffff;
border: 1px solid #e0e0e0;
position: relative;
transition: all 0.2s ease;
}
.sidebar-nav li:last-child {
margin-bottom: 0;
}
.sidebar-nav li::after {
display: none;
}
.sidebar-nav li:hover {
background: #ffffff;
}
.sidebar-nav li:hover::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #add8e6;
}
.sidebar-nav li.active {
background: #e0f2f7 !important;
position: relative;
}
.sidebar-nav li.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #add8e6;
}
.sidebar-nav li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 25px;
color: #333333;
text-decoration: none;
font-size: 15px;
font-weight: 400;
transition: all 0.2s ease;
font-family: 'Noto Sans KR', sans-serif;
}
.sidebar-nav li:hover a {
color: #add8e6;
background: #ffffff;
}
.sidebar-nav li.active a {
color: #333333 !important;
font-weight: 400;
background: transparent !important;
}
.sidebar-nav li a span {
flex: 1;
}
.sidebar-nav li a i {
font-size: 14px;
color: #333333;
opacity: 0.6;
transition: all 0.2s ease;
}
.sidebar-nav li:hover a i {
color: #add8e6;
opacity: 1;
}
.sidebar-nav li.active a i {
color: #333333 !important;
opacity: 0.6 !important;
}
/* 모바일 반응형 */
@media (max-width: 767px) {
.sidebar-menu {
margin-bottom: 20px;
}
.sidebar-header {
padding: 15px 20px;
}
.sidebar-header h3 {
font-size: 16px;
}
.sidebar-nav li a {
padding: 14px 20px;
font-size: 14px;
}
}
/* 역대총장 페이지 스타일 */
.president-history-content {
padding: 0 15px;
}
.president-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.president-card {
flex: 0 0 calc(50% - 15px);
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: visible;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.president-card > div {
background: transparent;
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
overflow: visible;
}
.president-card > div > div:first-child {
position: relative;
z-index: 3;
background: #ffffff;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.president-card > div > div:last-child {
position: relative;
z-index: 1;
flex: 1;
background: transparent;
overflow: visible;
min-height: 150px;
}
.president-card > div > div:last-child::before {
content: '';
position: absolute;
bottom: -10;
right: -15px;
width: 80%;
height: 100%;
min-height: 200px;
background-image: url('../../../../page/01_chongjang/img/back.png');
background-size: 100% auto;
background-position: right bottom;
background-repeat: no-repeat;
opacity: 0.1;
z-index: 0;
pointer-events: none;
}
.president-card > div > div:last-child > div {
position: relative;
z-index: 1;
}
.president-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(26, 84, 144, 0.2);
}
.president-card img {
border-radius: 4px;
border: 2px solid #1a5490;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: border-color 0.3s ease, transform 0.3s ease;
}
.president-card:hover img {
border-color: #1a5490;
transform: scale(1.05);
}
/* 총장 인사말 페이지 스타일 */
#mission-section .president-image-section {
display: flex;
align-items: flex-start;
gap: 30px;
}
#mission-section .president-photo-wrapper {
flex: 0 0 auto;
}
#mission-section .president-photo-wrapper img {
width: 400px;
max-width: 400px;
height: auto;
}
#mission-section .president-slogan-wrapper {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
#mission-section .president-slogan-wrapper div:first-child {
font-size: 20px;
color: #333;
line-height: 1.6;
margin-bottom: 8px;
}
#mission-section .president-slogan-wrapper div:last-child {
font-size: 24px;
color: #8b4513;
font-weight: 600;
line-height: 1.6;
}
/* PC 화면에서 사이드바 메뉴 표시 */
@media (min-width: 769px) {
#mission-section .col-md-3.col-sm-4.col-xs-12 {
display: block !important;
}
#mission-section .col-md-9.col-sm-8.col-xs-12 {
width: 75% !important;
}
}
/* 총장 인사말 페이지 모바일 스타일 */
@media (max-width: 768px) {
#mission-section .president-image-section {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
margin-bottom: 30px !important;
}
#mission-section .president-image-section > div[style*="flex: 1"] {
flex: 1 1 100% !important;
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
#mission-section .president-image-section img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
border-radius: 4px !important;
}
#mission-section .president-photo-wrapper {
flex: 0 0 auto !important;
}
#mission-section .president-photo-wrapper img {
width: 120px !important;
max-width: 120px !important;
height: auto !important;
}
#mission-section .president-slogan-wrapper {
flex: 1 !important;
min-width: 0 !important;
padding-left: 0 !important;
}
#mission-section .president-slogan-wrapper div:first-child {
font-size: 14px !important;
margin-bottom: 3px !important;
color: #333 !important;
}
#mission-section .president-slogan-wrapper div:last-child {
font-size: 16px !important;
color: #8b4513 !important;
font-weight: 600 !important;
}
/* 모바일에서 사이드바 표시 */
#mission-section .col-md-3.col-sm-4.col-xs-12 {
display: block !important;
}
/* 모바일에서 메인 콘텐츠 너비 조정 */
#mission-section .col-md-9.col-sm-8.col-xs-12 {
width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
#mission-section h2 {
font-size: 20px !important;
padding-bottom: 15px !important;
margin-bottom: 25px !important;
text-align: center !important;
}
#mission-section div[style*="font-size: 17px"] {
font-size: 14px !important;
line-height: 1.9 !important;
}
#mission-section div[style*="font-size: 17px"] p {
margin-bottom: 16px !important;
text-align: justify !important;
font-size: 14px !important;
}
#mission-section div[style*="font-size: 17px"] strong {
font-size: 15px !important;
}
#mission-section div[style*="margin-top: 50px"] {
margin-top: 30px !important;
padding-top: 20px !important;
}
#mission-section div[style*="margin-top: 50px"] img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
/* 총장소개 페이지 모바일 스타일 */
.president-profile-content {
padding: 0 10px;
}
.president-profile-content h2 {
font-size: 24px !important;
margin-bottom: 30px !important;
padding-bottom: 15px !important;
}
.president-profile-content .profile-section {
margin-bottom: 40px !important;
}
.president-profile-content .profile-section h3 {
font-size: 20px !important;
margin-bottom: 20px !important;
padding-left: 10px !important;
}
.president-profile-content .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.president-profile-content .profile-table {
font-size: 13px !important;
min-width: 500px;
}
.president-profile-content .profile-table th,
.president-profile-content .profile-table td {
padding: 10px 8px !important;
font-size: 13px !important;
}
.president-profile-content .profile-list {
padding: 20px 15px !important;
}
.president-profile-content .profile-list li {
padding: 10px 0 !important;
font-size: 13px !important;
line-height: 1.7 !important;
}
/* 역대총장 페이지 모바일 스타일 */
.president-history-content {
padding: 0 10px;
}
.president-history-content h2 {
font-size: 24px !important;
margin-bottom: 30px !important;
padding-bottom: 15px !important;
}
.president-grid {
flex-direction: column !important;
gap: 20px !important;
}
.president-card {
flex: 1 1 100% !important;
width: 100% !important;
}
.president-card > div {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 20px !important;
}
.president-card img {
width: 100px !important;
height: 120px !important;
margin-bottom: 15px !important;
margin-right: 0 !important;
}
.president-card > div > div:last-child {
text-align: center !important;
}
}
/* ==========================================
주보성인 페이지 스타일 (history_02.php)
========================================== */
/* 성인 콘텐츠 영역 */
.saint-content {
padding: 0 15px;
}
/* 제목 스타일 */
.saint-content h2 {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #1a5490;
position: relative;
}
/* 성인 프로필 섹션 */
.saint-profile-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 40px;
margin-bottom: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border: 1px solid #e8e8e8;
}
.saint-profile-section .row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
/* 성인 사진 컬럼 */
.saint-image-col {
flex: 0 0 300px;
max-width: 300px;
margin-right: 40px;
margin-bottom: 30px;
}
.saint-image-wrapper {
position: relative;
text-align: center;
}
.saint-image-frame {
background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 100%);
padding: 20px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}
.saint-image-frame img {
width: 100%;
max-width: 260px;
height: auto;
display: block;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.saint-image-caption {
margin-top: 20px;
padding: 15px;
background: rgba(212, 175, 55, 0.1);
border-radius: 8px;
border-left: 4px solid #d4af37;
}
.saint-image-caption p {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.6;
font-style: italic;
}
/* 성인 정보 컬럼 */
.saint-info-col {
flex: 1;
min-width: 300px;
}
.saint-info-col h3 {
font-size: 28px;
font-weight: 700;
color: #1a5490;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #d4af37;
position: relative;
}
/* 성인 타임라인 */
.saint-timeline {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.saint-timeline dl {
margin: 0;
padding: 0;
}
.saint-timeline dd {
margin: 0 0 18px 0;
padding: 0;
display: flex;
align-items: flex-start;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 18px;
}
.saint-timeline dd:last-child {
margin-bottom: 0;
border-bottom: none;
}
.saint-timeline .timeline-year {
font-weight: 700;
color: #d4af37;
min-width: 100px;
font-size: 15px;
}
.saint-timeline .timeline-desc {
color: #333;
font-size: 15px;
line-height: 1.6;
flex: 1;
}
.saint-timeline dd:last-child .timeline-desc {
font-weight: 600;
}
/* 성인 본문 내용 */
.saint-text-content {
background: #fff;
padding: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
line-height: 2;
border-top: 3px solid #d4af37;
}
.saint-text-content p {
font-size: 16px;
color: #333;
margin-bottom: 25px;
text-align: justify;
}
.saint-text-content p:last-child {
margin-bottom: 0;
}
.saint-text-content .saint-name-highlight {
font-weight: 700;
color: #1a5490;
font-size: 18px;
}
.saint-text-content .saint-message-box {
padding: 20px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(244, 228, 188, 0.1) 100%);
border-radius: 8px;
border-left: 4px solid #d4af37;
}
/* 반응형 스타일 */
@media (max-width: 991px) {
.saint-image-col {
flex: 0 0 100%;
max-width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.saint-info-col {
flex: 0 0 100%;
min-width: 100%;
}
}
@media (max-width: 767px) {
.saint-content h2 {
font-size: 24px;
margin-bottom: 30px;
padding-bottom: 15px;
}
.saint-profile-section {
padding: 25px;
margin-bottom: 30px;
}
.saint-info-col h3 {
font-size: 22px;
}
.saint-timeline {
padding: 20px;
}
.saint-timeline dd {
flex-direction: column;
}
.saint-timeline .timeline-year {
min-width: auto;
margin-bottom: 5px;
}
.saint-text-content {
padding: 25px;
}
.saint-text-content p {
font-size: 14px;
line-height: 1.8;
}
}
/* ==========================================
연혁 페이지 스타일 (history_03.php)
========================================== */
/* 연혁 제목 */
.history-content .history-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #1a5490;
}
/* 탭 메뉴 */
.history-tabs {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
border: none;
}
.history-tabs li {
margin: 0;
padding: 0;
}
.history-tabs .tab-link {
display: block;
padding: 14px 28px;
color: #666;
text-decoration: none;
font-size: 16px;
font-weight: 600;
background: #f5f5f5;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
position: relative;
min-width: 120px;
text-align: center;
}
.history-tabs .tab-link:hover {
color: #1a5490;
background: #fff;
border-color: #1a5490;
box-shadow: 0 4px 8px rgba(26, 84, 144, 0.15);
transform: translateY(-2px);
}
.history-tabs .tab-link.active {
color: #fff;
background: linear-gradient(135deg, #1a5490 0%, #2a6ba8 100%);
border-color: #1a5490;
font-weight: 700;
box-shadow: 0 4px 12px rgba(26, 84, 144, 0.3);
transform: translateY(-2px);
}
.history-tabs .tab-link.active::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1a5490;
}
/* 탭 콘텐츠 */
.tab-content {
display: none;
margin-top: 20px;
}
.tab-content:first-of-type {
display: block;
}
/* 연도별 리스트 */
.history-year-list {
list-style: none;
padding: 0;
margin: 0;
}
.history-year-list > li {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #e8e8e8;
}
.history-year-list > li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.history-year-list h3 {
font-size: 24px;
font-weight: 700;
color: #1a5490;
margin-bottom: 20px;
padding-left: 15px;
border-left: 4px solid #1a5490;
}
/* 연혁 이벤트 */
.history-events {
background: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.history-events dl {
margin: 0;
padding: 0;
}
.history-events dt {
font-weight: 700;
color: #1a5490;
font-size: 15px;
margin-top: 15px;
margin-bottom: 5px;
display: inline-block;
min-width: 60px;
}
.history-events dt:first-child {
margin-top: 0;
}
.history-events dd {
margin: 0 0 15px 0;
padding: 0 0 0 80px;
color: #333;
font-size: 15px;
line-height: 1.8;
}
.history-events dd:last-child {
margin-bottom: 0;
}
.history-events dd p {
margin: 0;
padding: 0;
}
/* 반응형 스타일 */
@media (max-width: 767px) {
.history-content .history-title {
font-size: 24px;
margin-bottom: 30px;
padding-bottom: 15px;
}
.history-tabs {
flex-direction: column;
gap: 8px;
}
.history-tabs .tab-link {
padding: 12px 20px;
min-width: auto;
width: 100%;
text-align: left;
}
.history-tabs .tab-link.active::after {
display: none;
}
.history-year-list h3 {
font-size: 20px;
}
.history-events {
padding: 20px;
}
.history-events dt {
display: block;
margin-bottom: 8px;
min-width: auto;
}
.history-events dd {
padding-left: 0;
margin-bottom: 20px;
}
}
/* ==========================================
사이버박물관 페이지 스타일 (history_04.php)
========================================== */
/* 박물관 제목 */
.museum-title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #1a5490;
flex-wrap: wrap;
gap: 20px;
}
.museum-content .museum-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin: 0;
flex: 1;
}
/* 가상투어 입장 버튼 */
.virtual-tour-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: linear-gradient(135deg, #1a5490 0%, #2a6ba8 100%);
color: #fff;
text-decoration: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(26, 84, 144, 0.3);
transition: all 0.3s ease;
white-space: nowrap;
}
.virtual-tour-btn:hover {
background: linear-gradient(135deg, #2a6ba8 0%, #1a5490 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(26, 84, 144, 0.4);
color: #fff;
text-decoration: none;
}
.virtual-tour-btn i {
font-size: 18px;
}
.virtual-tour-btn span {
font-size: 16px;
}
/* 이미지 섹션 */
.museum-image-section {
margin-bottom: 40px;
text-align: center;
}
.museum-main-image {
max-width: 100%;
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
}
.museum-main-image:hover {
transform: scale(1.01);
}
/* 전시 섹션 */
.museum-exhibition-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 50px 40px;
margin-bottom: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border: 1px solid #e8e8e8;
}
/* 성경 구절 */
.bible-quote {
text-align: center;
margin-bottom: 40px;
padding: 30px;
background: rgba(26, 84, 144, 0.05);
border-radius: 8px;
border-left: 4px solid #1a5490;
}
.bible-quote .quote-text {
font-size: 22px;
font-weight: 600;
color: #1a5490;
line-height: 1.8;
margin: 0 0 15px 0;
font-style: italic;
}
.bible-quote .quote-source {
font-size: 16px;
color: #666;
margin: 0;
font-weight: 500;
}
/* 전시 제목 */
.exhibition-title {
text-align: center;
margin-bottom: 30px;
}
.exhibition-title h3 {
font-size: 28px;
font-weight: 700;
color: #1a5490;
margin: 0 0 10px 0;
}
.exhibition-subtitle {
font-size: 18px;
color: #666;
margin: 0;
font-weight: 400;
letter-spacing: 1px;
}
/* 사진 콜라주 영역 */
.photo-collage-area {
text-align: center;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.collage-description {
font-size: 16px;
color: #666;
margin: 0;
line-height: 1.8;
}
/* 신학교의 하루 섹션 */
.daily-schedule-section {
background: #fff;
padding: 40px;
margin-bottom: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border-top: 4px solid #1a5490;
}
.schedule-title {
font-size: 28px;
font-weight: 700;
color: #1a5490;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #e0e0e0;
text-align: center;
}
/* 일정 타임라인 */
.schedule-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.schedule-item {
display: flex;
align-items: center;
padding: 15px 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 8px;
border-left: 4px solid #1a5490;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.schedule-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 8px rgba(26, 84, 144, 0.15);
border-left-color: #2a6ba8;
}
.schedule-time {
font-weight: 700;
color: #1a5490;
font-size: 16px;
min-width: 70px;
margin-right: 15px;
}
.schedule-activity {
color: #333;
font-size: 15px;
flex: 1;
}
/* 관람안내 섹션 */
.museum-guide-section {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
}
.guide-header {
background: linear-gradient(135deg, #1a5490 0%, #2a6ba8 100%);
padding: 25px 30px;
text-align: center;
}
.guide-header h3 {
font-size: 24px;
font-weight: 700;
color: #fff;
margin: 0;
}
.guide-content {
padding: 40px;
}
.guide-section {
margin-bottom: 35px;
}
.guide-section:last-child {
margin-bottom: 0;
}
.guide-section-title {
font-size: 20px;
font-weight: 700;
color: #1a5490;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e0e0e0;
}
.guide-list {
list-style: none;
padding: 0;
margin: 0;
}
.guide-list li {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
color: #333;
line-height: 1.8;
display: flex;
align-items: flex-start;
}
.guide-list li:last-child {
border-bottom: none;
}
.guide-list .bullet {
color: #1a5490;
font-weight: 700;
margin-right: 12px;
font-size: 16px;
flex-shrink: 0;
}
/* 반응형 스타일 */
@media (max-width: 767px) {
.museum-title-wrapper {
flex-direction: column;
align-items: flex-start;
margin-bottom: 30px;
padding-bottom: 15px;
}
.museum-content .museum-title {
font-size: 24px;
margin-bottom: 0;
width: 100%;
}
.virtual-tour-btn {
width: 100%;
justify-content: center;
padding: 10px 20px;
font-size: 15px;
}
.museum-image-section {
margin-bottom: 30px;
}
.museum-main-image {
border-radius: 8px;
}
.museum-exhibition-section {
padding: 30px 20px;
}
.bible-quote {
padding: 20px;
}
.bible-quote .quote-text {
font-size: 18px;
}
.exhibition-title h3 {
font-size: 22px;
}
.exhibition-subtitle {
font-size: 16px;
}
.daily-schedule-section {
padding: 25px 20px;
}
.schedule-title {
font-size: 22px;
}
.schedule-timeline {
grid-template-columns: 1fr;
}
.schedule-item {
padding: 12px 15px;
}
.schedule-time {
min-width: 60px;
font-size: 15px;
}
.guide-header {
padding: 20px;
}
.guide-header h3 {
font-size: 20px;
}
.guide-content {
padding: 25px 20px;
}
.guide-section-title {
font-size: 18px;
}
.guide-list li {
font-size: 14px;
padding: 10px 0;
}
}
/* ==========================================
조직도 페이지 스타일
========================================== */
.organization-content {
background: #fff;
padding: 0;
}
.organization-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #1a5490;
}
.organization-image-section {
text-align: center;
margin-bottom: 40px;
padding: 30px;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.organization-image {
max-width: 100%;
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
background: #fff;
padding: 20px;
}
/* 조직도 탭 메뉴 스타일 */
.organization-tabs-section {
margin-top: 50px;
}
.organization-tabs {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
border: none;
}
.organization-tabs li {
margin: 0;
padding: 0;
}
.organization-tabs .org-tab-link {
display: block;
padding: 14px 28px;
color: #666;
text-decoration: none;
font-size: 16px;
font-weight: 600;
background: #f5f5f5;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
position: relative;
min-width: 120px;
text-align: center;
}
.organization-tabs .org-tab-link:hover {
color: #1a5490;
background: #fff;
border-color: #1a5490;
box-shadow: 0 4px 8px rgba(26, 84, 144, 0.15);
transform: translateY(-2px);
}
.organization-tabs .org-tab-link.active {
color: #fff;
background: linear-gradient(135deg, #1a5490 0%, #2a6ba8 100%);
border-color: #1a5490;
font-weight: 700;
box-shadow: 0 4px 12px rgba(26, 84, 144, 0.3);
transform: translateY(-2px);
}
.organization-tabs .org-tab-link.active::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1a5490;
}
.org-tab-content {
display: none;
margin-top: 20px;
}
.org-tab-content:first-of-type {
display: block;
}
.org-team-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.org-team-item {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-left: 4px solid #1a5490;
transition: all 0.3s ease;
}
.org-team-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.org-team-title {
font-size: 24px;
font-weight: 700;
color: #1a5490;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e8e8e8;
}
.org-team-description {
font-size: 16px;
color: #333;
line-height: 1.8;
margin-bottom: 20px;
text-align: justify;
}
.org-team-contact {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 15px;
color: #555;
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-item i {
color: #1a5490;
font-size: 16px;
min-width: 20px;
}
.contact-item span {
flex: 1;
}
/* 반응형 스타일 */
@media (max-width: 767px) {
.organization-title {
font-size: 24px;
margin-bottom: 30px;
padding-bottom: 15px;
}
.organization-image-section {
padding: 20px 15px;
margin-bottom: 30px;
}
.organization-image {
padding: 15px;
}
.organization-tabs-section {
margin-top: 40px;
}
.organization-tabs {
flex-direction: column;
gap: 8px;
margin-bottom: 30px;
}
.organization-tabs .org-tab-link {
padding: 12px 20px;
min-width: auto;
width: 100%;
text-align: left;
}
.organization-tabs .org-tab-link.active::after {
display: none;
}
.org-team-item {
padding: 20px 15px;
}
.org-team-title {
font-size: 20px;
margin-bottom: 15px;
padding-bottom: 10px;
}
.org-team-description {
font-size: 14px;
margin-bottom: 15px;
}
.contact-item {
font-size: 14px;
}
}
/* ==========================================
부서연락처 페이지 스타일
========================================== */
.contact-content {
background: #fff;
padding: 0;
}
.contact-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #1a5490;
}
.contact-table-wrapper {
overflow-x: auto;
margin-bottom: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
background: #fff;
}
.contact-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #fff;
font-size: 15px;
}
.contact-table caption {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.contact-table thead {
background: linear-gradient(135deg, #1a5490 0%, #2a6ba8 100%);
}
.contact-table thead th {
padding: 18px 15px;
text-align: center;
font-weight: 700;
color: #fff;
border: 1px solid #1a5490;
font-size: 16px;
vertical-align: middle;
}
.contact-table tbody td {
padding: 15px;
text-align: center;
border: 1px solid #e0e0e0;
vertical-align: middle;
color: #333;
line-height: 1.6;
}
.contact-table tbody tr {
transition: background-color 0.2s ease;
}
.contact-table tbody tr:hover {
background-color: #f8f9fa;
}
.contact-table tbody tr:nth-child(even) {
background-color: #fafafa;
}
.contact-table tbody tr:nth-child(even):hover {
background-color: #f0f0f0;
}
.contact-group {
background-color: #e8f0f8 !important;
font-weight: 700;
color: #1a5490;
text-align: center;
vertical-align: middle;
}
.contact-table tbody td.contact-group {
background-color: #e8f0f8;
}
.contact-table tbody td p {
margin: 5px 0;
text-align: left;
}
.contact-table tbody td p:first-child {
margin-top: 0;
}
.contact-table tbody td p:last-child {
margin-bottom: 0;
}
/* 반응형 스타일 */
@media (max-width: 767px) {
.contact-title {
font-size: 24px;
margin-bottom: 30px;
padding-bottom: 15px;
}
.contact-table-wrapper {
margin-bottom: 30px;
border-radius: 0;
box-shadow: none;
border: 1px solid #e0e0e0;
}
.contact-table {
font-size: 13px;
min-width: 600px;
}
.contact-table thead th {
padding: 12px 8px;
font-size: 14px;
}
.contact-table tbody td {
padding: 10px 8px;
font-size: 13px;
}
.contact-table tbody td p {
font-size: 12px;
margin: 3px 0;
}
}
/* ==========================================
발전계획(갓등2030) 페이지 스타일
========================================== */
.vision-content {
background: #fff;
padding: 0;
}
.vision-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 3px solid #1a5490;
}
.vision-intro {
font-size: 16px;
color: #444;
line-height: 1.9;
margin-bottom: 35px;
}
.vision-graphic {
margin-bottom: 45px;
text-align: center;
}
.vision-graphic-image {
max-width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.vision-graphic figcaption {
margin-top: 12px;
font-size: 14px;
color: #777;
}
.vision-structure {
position: relative;
padding: 220px 30px 40px;
background: #f9fbff;
border-radius: 16px;
margin-bottom: 45px;
overflow: visible;
}
.vision-core {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(160deg, #00a7d6, #1a5490);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.4;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.vision-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 0;
}
.vision-card {
background: #fff;
padding: 30px 25px;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-top: 6px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.vision-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}
.vision-card.integration {
border-top-color: #00b5ad;
}
.vision-card.autonomy {
border-top-color: #f5a623;
}
.vision-card.openness {
border-top-color: #0073e6;
}
.vision-icon {
display: flex;
gap: 6px;
margin-bottom: 18px;
}
.vision-icon span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: currentColor;
}
.vision-card.integration .vision-icon span {
color: #00b5ad;
}
.vision-card.autonomy .vision-icon span {
color: #f5a623;
width: 18px;
border-radius: 6px;
}
.vision-card.openness .vision-icon span {
color: #0073e6;
width: 14px;
height: 14px;
border-radius: 4px;
}
.vision-card h3 {
font-size: 20px;
font-weight: 700;
color: #1a5490;
margin-bottom: 15px;
}
.vision-card p {
font-size: 15px;
color: #333;
line-height: 1.8;
margin: 0;
}
.vision-action {
background: #1a5490;
color: #fff;
border-radius: 16px;
padding: 35px 30px;
}
.vision-action h3 {
font-size: 22px;
margin-bottom: 18px;
}
.vision-action ul {
margin: 0;
padding-left: 20px;
line-height: 1.9;
font-size: 15px;
}
.vision-action li + li {
margin-top: 10px;
}
@media (max-width: 1024px) {
.vision-pillars {
grid-template-columns: 1fr;
margin-top: 0;
}
.vision-core {
position: static;
transform: none;
margin: 0 auto 30px auto;
}
}
@media (max-width: 767px) {
.vision-title {
font-size: 26px;
margin-bottom: 15px;
}
.vision-intro {
font-size: 14px;
}
.vision-structure {
padding: 160px 20px 30px;
}
.vision-card {
padding: 25px 20px;
}
.vision-core {
width: 160px;
height: 160px;
font-size: 18px;
}
}
.dept-tasks {
margin-top: 50px;
}
.dept-header {
text-align: center;
margin-bottom: 30px;
}
.dept-label {
font-size: 16px;
color: #9c9c9c;
margin-bottom: 6px;
}
.dept-header h3 {
font-size: 28px;
color: #5a2ca0;
font-weight: 800;
}
.dept-card {
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 25px 30px;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
background: #fff;
}
.dept-title {
display: inline-block;
padding: 8px 18px;
border-radius: 20px;
background: linear-gradient(135deg, #8731c9, #f7679d);
color: #fff;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
}
.dept-card ul {
margin: 0;
padding-left: 18px;
line-height: 1.9;
color: #444;
font-size: 15px;
}
.dept-card ul li {
position: relative;
padding-left: 5px;
}
.dept-card ul li::marker {
color: #8731c9;
}
@media (max-width: 767px) {
.dept-card {
padding: 20px 18px;
}
.dept-title {
font-size: 16px;
}
.dept-card ul {
font-size: 14px;
}
}
/* ==========================================
대학규정 PDF 뷰어 섹션
========================================== */
.regulation-content {
background: #fff;
padding: 0;
}
.regulation-header {
margin-bottom: 30px;
}
.regulation-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 15px;
}
.regulation-desc {
font-size: 16px;
color: #555;
line-height: 1.8;
}
.regulation-pdf-card {
border-radius: 16px;
padding: 25px 30px;
border: 1px solid #e1e7f5;
background: linear-gradient(135deg, rgba(26,84,144,0.08), rgba(0,171,193,0.08));
margin-bottom: 25px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.regulation-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #1a5490;
color: #fff;
font-weight: 700;
font-size: 13px;
margin-bottom: 12px;
}
.regulation-pdf-title {
font-size: 22px;
font-weight: 700;
color: #1a5490;
margin-bottom: 8px;
}
.regulation-pdf-meta {
font-size: 15px;
color: #3d3d3d;
margin-bottom: 20px;
}
.regulation-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.regulation-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 24px;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.regulation-btn.primary {
background: linear-gradient(135deg, #1a5490, #2a6ba8);
color: #fff;
box-shadow: 0 8px 18px rgba(26,84,144,0.25);
}
.regulation-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 22px rgba(26,84,144,0.3);
}
.regulation-btn.ghost {
border-color: #1a5490;
color: #1a5490;
background: rgba(255,255,255,0.8);
}
.regulation-btn.ghost:hover {
background: #1a5490;
color: #fff;
}
.regulation-viewer {
border-radius: 16px;
overflow: hidden;
border: 1px solid #e1e1e1;
background: #000;
margin-bottom: 18px;
}
.regulation-viewer iframe {
width: 100%;
height: 80vh;
min-height: 500px;
border: none;
background: #fff;
}
.regulation-helper {
font-size: 14px;
color: #555;
line-height: 1.8;
border-radius: 12px;
background: #f8f9fb;
padding: 18px 20px;
}
.regulation-helper p {
margin: 0;
}
.regulation-helper p + p {
margin-top: 6px;
}
@media (max-width: 767px) {
.regulation-title {
font-size: 26px;
}
.regulation-desc {
font-size: 14px;
}
.regulation-pdf-card {
padding: 20px;
}
.regulation-actions {
flex-direction: column;
}
.regulation-btn {
width: 100%;
justify-content: center;
}
.regulation-viewer iframe {
height: 60vh;
}
}
/* ==========================================
캠퍼스 안내 지도
========================================== */
.campus-guide-content {
background: #fff;
padding: 0;
}
.campus-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 15px;
}
.campus-description {
font-size: 16px;
color: #444;
line-height: 1.8;
margin-bottom: 30px;
}
.campus-map-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.campus-map-scroll {
width: 100%;
overflow-x: auto;
padding-bottom: 10px;
}
.campus-map-canvas {
position: relative;
width: 724px;
margin: 0 auto;
}
.campus-map-canvas img {
width: 724px;
height: auto;
display: block;
border-radius: 12px;
border: 1px solid #e0e0e0;
}
.campus-marker {
position: absolute;
width: 32px;
height: 32px;
border: none;
background: url('../img/numBg_off.png') no-repeat center/contain;
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
padding-top: 4px;
transition: transform 0.2s ease;
}
.campus-marker span {
display: block;
text-align: center;
}
.campus-marker.active,
.campus-marker:hover {
background-image: url('../img/numBg_on.png');
transform: translateY(-2px);
}
.campus-info-panel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 15px;
}
.campus-info-card {
display: none;
gap: 15px;
align-items: center;
padding: 18px;
border: 1px solid #e1e7f5;
border-radius: 14px;
background: #f9fbff;
}
.campus-info-card.active {
display: flex;
}
.campus-card-thumb img {
width: 110px;
height: auto;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.campus-card-body h3 {
font-size: 18px;
margin: 0 0 6px;
color: #1a5490;
}
.campus-card-body p {
margin: 0;
color: #555;
font-size: 14px;
}
.campus-spot-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.campus-spot-trigger {
flex: 1 1 calc(20% - 10px);
min-width: 180px;
border: 1px solid #d5d9ec;
border-radius: 10px;
padding: 10px 12px;
background: #f2f4fb;
font-size: 14px;
color: #444;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
}
.campus-spot-trigger:hover,
.campus-spot-trigger.active {
background: #1a5490;
color: #fff;
border-color: #1a5490;
box-shadow: 0 4px 12px rgba(26, 84, 144, 0.25);
}
@media (max-width: 991px) {
.campus-spot-trigger {
flex: 1 1 calc(33.33% - 10px);
min-width: auto;
}
}
@media (max-width: 767px) {
.campus-title {
font-size: 26px;
}
.campus-description {
font-size: 14px;
}
.campus-info-panel {
grid-template-columns: 1fr;
}
.campus-marker {
transform-origin: center;
}
.campus-spot-trigger {
flex: 1 1 100%;
}
}
/* ==========================================
오시는 길 섹션
========================================== */
.route-content {
background: #fff;
padding: 0;
}
.route-title {
font-size: 32px;
font-weight: 700;
color: #1a5490;
margin-bottom: 15px;
}
.route-desc {
font-size: 16px;
color: #444;
line-height: 1.8;
margin-bottom: 30px;
}
.route-map-card {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 22px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(26, 84, 144, 0.08), rgba(0, 171, 193, 0.08));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
.route-map {
flex: 1 1 380px;
min-width: 280px;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e1e1e1;
}
.route-map iframe {
width: 100%;
height: 350px;
border: 0;
}
.route-map-info {
flex: 1 1 280px;
min-width: 260px;
background: #fff;
border-radius: 14px;
padding: 20px 24px;
border: 1px solid #e1e7f5;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
.route-map-info h3 {
font-size: 24px;
margin-bottom: 10px;
color: #1a5490;
}
.route-address {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.route-phone {
font-size: 14px;
color: #555;
margin-bottom: 16px;
}
.route-map-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.route-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
border: 2px solid transparent;
transition: all 0.2s ease;
}
.route-btn.primary {
background: linear-gradient(135deg, #1a5490, #2a6ba8);
color: #fff;
box-shadow: 0 8px 18px rgba(26,84,144,0.25);
}
.route-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(26,84,144,0.3);
}
.route-btn.ghost {
border-color: #1a5490;
color: #1a5490;
background: #fff;
}
.route-btn.ghost:hover {
background: #1a5490;
color: #fff;
}
.route-table-wrapper {
margin-bottom: 25px;
}
.route-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #e1e1e1;
border-radius: 12px;
overflow: hidden;
}
.route-table th,
.route-table td {
padding: 16px;
border-bottom: 1px solid #e8e8e8;
font-size: 15px;
}
.route-table th {
background: #f7f9fc;
font-weight: 700;
color: #1a5490;
}
.route-table tr:last-child th,
.route-table tr:last-child td {
border-bottom: none;
}
.route-transport-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
}
.route-transport-card {
display: flex;
gap: 18px;
padding: 20px;
border: 1px solid #e1e1e1;
border-radius: 14px;
background: #fafcff;
}
.route-transport-card h4 {
margin: 0 0 8px;
font-size: 18px;
color: #1a5490;
}
.route-transport-card p,
.route-transport-card li {
margin: 0;
color: #444;
line-height: 1.7;
font-size: 14px;
}
.route-transport-card ul {
padding-left: 18px;
}
.route-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: #1a5490;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
}
.route-icon i { font-size: 22px; }
@media (max-width: 991px) {
.route-map-card {
flex-direction: column;
}
.route-map iframe {
height: 320px;
}
}
@media (max-width: 767px) {
.route-title {
font-size: 26px;
}
.route-desc {
font-size: 14px;
}
.route-map-info h3 {
font-size: 20px;
}
.route-transport-card {
flex-direction: column;
}
}
/* ==========================================
실시간 버스 도착 정보 스타일
========================================== */
.bus-realtime-section {
margin-top: 40px;
padding: 30px;
background: #f8f9fa;
border-radius: 16px;
border: 1px solid #e1e1e1;
}
.bus-realtime-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.bus-realtime-title {
margin: 0;
font-size: 22px;
color: #1a5490;
display: flex;
align-items: center;
gap: 10px;
}
.bus-realtime-title i {
font-size: 24px;
}
.bus-refresh-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #1a5490;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.bus-refresh-btn:hover {
background: #154a7a;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(26, 84, 144, 0.3);
}
.bus-refresh-btn i {
transition: transform 0.3s ease;
}
.bus-refresh-btn i.fa-spin {
animation: fa-spin 1s infinite linear;
}
.bus-realtime-info {
background: #fff;
padding: 25px;
border-radius: 12px;
border: 1px solid #e1e1e1;
}
.bus-station-info {
margin: 0 0 20px;
padding: 12px 16px;
background: #e8f0f8;
border-radius: 8px;
color: #444;
font-size: 15px;
}
.bus-station-info i {
color: #1a5490;
margin-right: 8px;
}
.bus-loading {
text-align: center;
padding: 40px 20px;
color: #666;
}
.bus-loading i {
font-size: 32px;
color: #1a5490;
margin-bottom: 15px;
display: block;
}
.bus-loading span {
display: block;
margin-top: 10px;
font-size: 15px;
}
.bus-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.bus-item {
padding: 20px;
background: #fafcff;
border: 1px solid #e1e1e1;
border-radius: 12px;
transition: all 0.3s ease;
}
.bus-item:hover {
border-color: #1a5490;
box-shadow: 0 4px 12px rgba(26, 84, 144, 0.1);
transform: translateY(-2px);
}
.bus-item-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.bus-route-no {
display: inline-block;
padding: 8px 16px;
background: #1a5490;
color: #fff;
border-radius: 20px;
font-weight: 700;
font-size: 16px;
min-width: 60px;
text-align: center;
}
.bus-destination {
color: #444;
font-size: 15px;
font-weight: 500;
}
.bus-platform {
display: inline-block;
margin-left: 8px;
padding: 4px 10px;
background: #ff9800;
color: #fff;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
vertical-align: middle;
}
.bus-item-times {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.bus-time-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #e8f0f8;
color: #1a5490;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
.bus-time-badge.first {
background: #1a5490;
color: #fff;
font-weight: 700;
font-size: 15px;
}
.bus-time-badge i {
font-size: 13px;
}
.bus-no-data {
text-align: center;
padding: 40px 20px;
color: #666;
font-size: 15px;
}
.bus-no-data i {
font-size: 32px;
color: #999;
margin-bottom: 15px;
display: block;
}
.bus-error {
text-align: center;
padding: 40px 20px;
color: #d32f2f;
}
.bus-error i {
font-size: 32px;
margin-bottom: 15px;
display: block;
}
.bus-error p {
margin: 8px 0;
font-size: 15px;
}
.bus-error-detail {
font-size: 13px;
color: #666;
margin-top: 10px;
}
@media (max-width: 767px) {
.bus-realtime-section {
padding: 20px;
margin-top: 30px;
}
.bus-realtime-title {
font-size: 18px;
}
.bus-realtime-header {
flex-direction: column;
align-items: flex-start;
}
.bus-refresh-btn {
width: 100%;
justify-content: center;
}
.bus-realtime-info {
padding: 20px;
}
.bus-item {
padding: 15px;
}
.bus-item-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.bus-route-no {
font-size: 15px;
padding: 6px 14px;
}
.bus-destination {
font-size: 14px;
}
}
/* ==========================================
법인정보 스타일
========================================== */
.corporate-content {
padding: 20px 0;
}
.corporate-title {
font-size: 28px;
font-weight: 700;
color: #1a5490;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #1a5490;
}
.section-title {
font-size: 22px;
font-weight: 700;
color: #1a5490;
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e0e0e0;
}
.section-title:first-of-type {
margin-top: 0;
}
/* 연락처 테이블 */
.corporate-contact-section {
margin-bottom: 40px;
}
.corporate-contact-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.corporate-contact-table th {
background: #1a5490;
color: #fff;
padding: 15px;
text-align: left;
font-weight: 600;
font-size: 15px;
}
.corporate-contact-table td {
padding: 15px;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #444;
}
.corporate-contact-table tr:last-child td {
border-bottom: none;
}
.corporate-contact-table tr:hover {
background: #f8f9fa;
}
/* 건학이념 섹션 */
.corporate-ideology-section {
margin-bottom: 40px;
}
.ideology-main-text {
font-size: 18px;
font-weight: 600;
color: #1a5490;
line-height: 1.8;
margin-bottom: 30px;
padding: 20px;
background: #f0f7ff;
border-left: 4px solid #1a5490;
border-radius: 4px;
}
.ideology-details {
margin-top: 30px;
}
.ideology-subtitle {
font-size: 18px;
font-weight: 700;
color: #333;
margin: 25px 0 15px;
padding-left: 10px;
}
.ideology-text {
font-size: 15px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
}
/* 조직도 섹션 */
.corporate-orgchart-section {
margin-bottom: 40px;
}
.orgchart-image-wrapper {
text-align: center;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.orgchart-image {
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* 조직도 차트 */
.organ-chart {
position: relative;
padding: 40px 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 500px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 1단계: 이사장 */
.organ-top-wrap {
text-align: center;
margin-bottom: 0;
position: relative;
padding-bottom: 40px;
}
.organ-node.chairman {
display: inline-block;
width: 180px;
height: 180px;
line-height: 180px;
border-radius: 50%;
background: #1a5490;
color: #fff;
font-size: 24px;
font-weight: 700;
text-align: center;
box-shadow: 0 4px 12px rgba(26, 84, 144, 0.3);
position: relative;
z-index: 2;
margin: 0 auto;
vertical-align: top;
}
/* 이사장 원의 아래쪽 가장자리에서 정확히 시작되는 수직선 */
.organ-node.chairman::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 40px;
background: #1a5490;
z-index: 0;
}
/* 2단계: 법인이사회, 감사 */
.organ-second-wrap {
display: flex;
justify-content: center;
gap: 150px;
margin-bottom: 40px;
position: relative;
padding-top: 0;
}
/* 이사장에서 내려온 수직선이 수평선으로 분기되는 부분 */
.organ-second-wrap::before {
content: "";
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 40px;
background: #1a5490;
z-index: 1;
}
/* 법인이사회와 감사를 연결하는 수평선 */
.organ-second-wrap::after {
content: "";
position: absolute;
top: -20px;
left: 25%;
right: 25%;
width: 50%;
height: 3px;
background: #1a5490;
z-index: 1;
}
.organ-article {
position: relative;
flex: 0 0 auto;
z-index: 2;
}
/* 법인이사회 위로 올라가는 수직선 */
.organ-article:first-child::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 20px;
background: #1a5490;
z-index: 1;
}
/* 감사 위로 올라가는 수직선 */
.organ-article:last-child::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 20px;
background: #1a5490;
z-index: 1;
}
/* 감사 아래로 내려가는 수직선 (학교법인실로) */
.organ-article:last-child::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 40px;
background: #1a5490;
z-index: 1;
}
.organ-node.board,
.organ-node.auditor {
display: inline-block;
min-width: 180px;
padding: 20px 30px;
background: #4a6fa5;
color: #fff;
font-size: 18px;
font-weight: 600;
text-align: center;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(74, 111, 165, 0.3);
position: relative;
z-index: 2;
}
/* 3단계: 학교법인실 */
.organ-third-wrap {
text-align: center;
margin-bottom: 40px;
position: relative;
padding-top: 20px;
}
/* 감사에서 내려온 수직선 */
.organ-third-wrap::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 20px;
background: #1a5490;
z-index: 1;
}
/* 학교법인실 아래로 내려가는 수직선 */
.organ-third-wrap::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 40px;
background: #1a5490;
z-index: 1;
}
.organ-node.office {
display: inline-block;
min-width: 200px;
padding: 20px 30px;
background: #8b6fa8;
color: #fff;
font-size: 18px;
font-weight: 600;
text-align: center;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(139, 111, 168, 0.3);
position: relative;
z-index: 2;
}
/* 4단계: 산하학교들 */
.organ-last-wrap {
position: relative;
padding-top: 20px;
}
/* 학교법인실에서 내려온 수직선이 수평선으로 분기 */
.organ-last-wrap::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 20px;
background: #1a5490;
z-index: 1;
}
/* 5개 학교를 연결하는 수평선 */
.organ-last-wrap::after {
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
width: 90%;
height: 3px;
background: #1a5490;
z-index: 1;
}
.organ-schools-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 15px;
padding-top: 20px;
position: relative;
}
.organ-school-item {
flex: 0 0 calc(18% - 12px);
min-width: 140px;
padding: 20px 15px;
background: #c4a882;
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(196, 168, 130, 0.3);
position: relative;
z-index: 2;
}
/* 각 학교 위로 올라가는 수직선 */
.organ-school-item::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 20px;
background: #1a5490;
z-index: 1;
}
/* 반응형 디자인 */
@media (max-width: 992px) {
.organ-second-wrap {
gap: 60px;
}
.organ-school-item {
flex: 0 0 calc(30% - 10px);
}
}
@media (max-width: 768px) {
.organ-chart {
padding: 30px 15px;
}
.organ-node.chairman {
width: 150px;
height: 150px;
line-height: 150px;
font-size: 20px;
}
.organ-second-wrap {
flex-direction: column;
gap: 30px;
align-items: center;
}
.organ-second-wrap::after {
display: none;
}
.organ-article::after {
display: none;
}
.organ-school-item {
flex: 0 0 calc(45% - 10px);
}
}
@media (max-width: 480px) {
.organ-node.chairman {
width: 120px;
height: 120px;
line-height: 120px;
font-size: 18px;
}
.organ-node.board,
.organ-node.auditor,
.organ-node.office {
min-width: 160px;
padding: 15px 20px;
font-size: 16px;
}
.organ-school-item {
flex: 0 0 100%;
min-width: auto;
}
}
/* 산하학교 현황 섹션 */
.corporate-schools-section {
margin-bottom: 40px;
}
.schools-list {
list-style: none;
padding: 0;
margin: 0;
}
.school-item {
padding: 15px 20px;
margin-bottom: 10px;
background: #f9f9f9;
border-left: 4px solid #1a5490;
border-radius: 4px;
font-size: 15px;
line-height: 1.8;
transition: all 0.3s ease;
}
.school-item:hover {
background: #f0f7ff;
transform: translateX(5px);
}
.school-item strong {
color: #1a5490;
margin-right: 10px;
}
.school-item a {
color: #0066cc;
text-decoration: none;
word-break: break-all;
}
.school-item a:hover {
text-decoration: underline;
color: #0052a3;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.corporate-title {
font-size: 24px;
}
.section-title {
font-size: 20px;
}
.corporate-contact-table {
font-size: 13px;
}
.corporate-contact-table th,
.corporate-contact-table td {
padding: 12px 10px;
}
.ideology-main-text {
font-size: 16px;
padding: 15px;
}
.ideology-subtitle {
font-size: 16px;
}
.ideology-text {
font-size: 14px;
padding: 12px;
}
.school-item {
font-size: 14px;
padding: 12px 15px;
}
}
@media (max-width: 480px) {
.corporate-contact-table {
display: block;
overflow-x: auto;
}
.corporate-contact-table th,
.corporate-contact-table td {
padding: 10px 8px;
font-size: 12px;
}
}
/* ==========================================
역대 이사장 스타일
========================================== */
.bishops-content {
padding: 20px 0;
}
.bishops-title {
font-size: 28px;
font-weight: 700;
color: #1a5490;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #1a5490;
}
.bishops-list {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: flex-start;
margin-top: 30px;
}
.bishop-item {
display: flex;
flex-direction: column;
align-items: center;
width: calc(33.333% - 27px);
min-width: 250px;
padding: 25px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.bishop-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.bishop-photo {
width: 180px;
height: 220px;
margin-bottom: 20px;
overflow: hidden;
border-radius: 8px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.bishop-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.bishop-info {
text-align: center;
width: 100%;
}
.bishop-name {
font-size: 20px;
font-weight: 700;
color: #1a5490;
margin-bottom: 10px;
line-height: 1.4;
}
.bishop-organization {
font-size: 15px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
}
.bishop-period {
font-size: 14px;
color: #888;
line-height: 1.6;
margin-top: 10px;
}
/* 반응형 디자인 */
@media (max-width: 992px) {
.bishop-item {
width: calc(50% - 20px);
}
}
@media (max-width: 768px) {
.bishops-list {
flex-direction: column;
gap: 30px;
}
.bishop-item {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.bishops-title {
font-size: 24px;
}
.bishop-name {
font-size: 18px;
}
}
@media (max-width: 480px) {
.bishop-photo {
width: 150px;
height: 180px;
}
.bishop-name {
font-size: 16px;
}
.bishop-organization,
.bishop-period {
font-size: 13px;
}
}
/* ==========================================
임원현황 페이지 스타일
========================================== */
/* 임원현황 테이블 섹션 */
.executive-table-section {
margin-bottom: 50px;
}
.executive-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
background: #fff;
margin-bottom: 30px;
}
.executive-table caption {
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
.executive-table thead {
background: #1a5490;
color: #fff;
}
.executive-table thead th {
padding: 15px 10px;
text-align: center;
font-weight: 600;
font-size: 15px;
border: 1px solid #ddd;
}
.executive-table tbody td {
padding: 15px 10px;
border: 1px solid #ddd;
text-align: left;
font-size: 14px;
line-height: 1.6;
}
.executive-table tbody tr:nth-child(even) {
background: #f9f9f9;
}
.executive-table tbody tr:hover {
background: #f0f7ff;
}
.executive-table .txt-center {
text-align: center;
}
.executive-table .txt-bold {
font-weight: 700;
color: #1a5490;
}
.executive-table .lettSp-1 {
letter-spacing: 1px;
color: #d32f2f;
font-weight: 600;
}
/* 친족관계 교직원 현황 섹션 */
.family-relation-section {
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid #ddd;
}
.family-relation-section .section-title {
font-size: 20px;
font-weight: 700;
color: #1a5490;
margin-bottom: 20px;
text-align: center;
}
.family-relation-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
background: #fff;
}
.family-relation-table thead {
background: #1a5490;
color: #fff;
}
.family-relation-table thead th {
padding: 15px 10px;
text-align: center;
font-weight: 600;
font-size: 15px;
border: 1px solid #ddd;
}
.family-relation-table tbody td {
padding: 15px 10px;
border: 1px solid #ddd;
text-align: center;
font-size: 14px;
}
.family-relation-table tbody tr:nth-child(even) {
background: #f9f9f9;
}
/* 반응형 디자인 */
@media (max-width: 992px) {
.executive-table {
font-size: 13px;
}
.executive-table thead th,
.executive-table tbody td {
padding: 12px 8px;
font-size: 13px;
}
.family-relation-table thead th,
.family-relation-table tbody td {
padding: 12px 8px;
font-size: 13px;
}
}
@media (max-width: 768px) {
.executive-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.executive-table thead th,
.executive-table tbody td {
padding: 10px 6px;
font-size: 12px;
}
.family-relation-section .section-title {
font-size: 18px;
}
.family-relation-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.family-relation-table thead th,
.family-relation-table tbody td {
padding: 10px 6px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.executive-table-section {
margin-bottom: 30px;
}
.executive-table thead th,
.executive-table tbody td {
padding: 8px 4px;
font-size: 11px;
}
.family-relation-section {
margin-top: 30px;
padding-top: 20px;
}
.family-relation-section .section-title {
font-size: 16px;
margin-bottom: 15px;
}
.family-relation-table thead th,
.family-relation-table tbody td {
padding: 8px 4px;
font-size: 11px;
}
/* ==========================================
입학안내 - 정시모집 PDF 섹션
========================================== */
.admission-content {
background: #fff;
border-radius: 16px;
padding: 40px 35px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.admission-header {
margin-bottom: 30px;
}
.admission-label {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #e8f1ff;
color: #1a5490;
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
}
.admission-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
color: #1a1a1a;
}
.admission-desc {
font-size: 16px;
line-height: 1.7;
color: #555;
margin: 0;
}
.admission-pdf-card {
position: relative;
border: 1px solid #e0e7f1;
border-radius: 14px;
padding: 30px 30px 30px 90px;
margin-bottom: 35px;
background: #f9fbff;
overflow: hidden;
}
.admission-badge {
position: absolute;
top: 24px;
left: 24px;
width: 48px;
height: 48px;
border-radius: 12px;
background: #1a5490;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1px;
}
.admission-card-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
}
.admission-card-meta {
font-size: 15px;
color: #4d5a6b;
margin-bottom: 12px;
}
.admission-meta-list {
margin: 0 0 20px 0;
padding-left: 18px;
color: #546071;
line-height: 1.7;
}
.admission-meta-list li {
margin-bottom: 4px;
}
.admission-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.admission-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
transition: all 0.2s ease;
}
.admission-btn.primary {
background: #1a5490;
color: #fff;
box-shadow: 0 10px 25px rgba(26, 84, 144, 0.25);
}
.admission-btn.primary:hover {
background: #164675;
color: #fff;
}
.admission-btn.ghost {
border: 1px solid #1a5490;
color: #1a5490;
}
.admission-btn.ghost:hover {
background: #e8f1ff;
}
.admission-btn i {
font-size: 16px;
}
.admission-viewer {
border: 1px solid #e0e7f1;
border-radius: 14px;
overflow: hidden;
margin-bottom: 30px;
background: #000;
}
.admission-viewer iframe {
width: 100%;
height: 700px;
border: none;
}
.admission-helper {
border: 1px dashed #c2d3ec;
border-radius: 12px;
padding: 24px 28px;
background: #fdfefe;
}
.admission-helper-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: #1a5490;
}
.admission-helper-list {
margin: 0;
padding-left: 18px;
color: #525e6e;
line-height: 1.7;
}
.admission-helper-list li {
margin-bottom: 6px;
}
@media (max-width: 992px) {
.admission-content {
padding: 30px 25px;
}
.admission-title {
font-size: 24px;
}
.admission-viewer iframe {
height: 600px;
}
}
@media (max-width: 768px) {
.admission-pdf-card {
padding: 90px 20px 25px 20px;
}
.admission-badge {
top: 20px;
left: 20px;
}
.admission-actions {
flex-direction: column;
align-items: stretch;
}
.admission-viewer iframe {
height: 520px;
}
}
@media (max-width: 480px) {
.admission-content {
padding: 25px 18px;
}
.admission-title {
font-size: 21px;
}
.admission-viewer iframe {
height: 420px;
}
}
/* ==========================================
입학자료모음 - 게시판 임베드
========================================== */
.admission-board-wrap {
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.admission-board-hero {
position: relative;
background: linear-gradient(135deg, rgba(13,53,97,0.9), rgba(20,114,174,0.8));
padding: 60px 40px;
color: #fff;
}
.admission-board-hero::after {
content: "";
position: absolute;
right: -40px;
bottom: -40px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
filter: blur(2px);
}
.admission-board-hero__inner {
position: relative;
z-index: 2;
}
.admission-board-crumb {
margin: 0 0 12px;
font-size: 14px;
opacity: 0.8;
}
.admission-board-crumb i {
margin-right: 6px;
}
.admission-board-title {
font-size: 34px;
font-weight: 700;
margin-bottom: 10px;
}
.admission-board-desc {
font-size: 16px;
line-height: 1.7;
max-width: 720px;
margin: 0;
}
.admission-board-guide {
display: flex;
gap: 20px;
flex-wrap: wrap;
padding: 30px 35px 10px;
background: #f8faff;
border-bottom: 1px solid #e6ecf4;
}
.admission-board-guide .guide-item {
flex: 1;
min-width: 220px;
}
.admission-board-guide .guide-item strong {
display: inline-block;
margin-bottom: 6px;
font-size: 15px;
color: #1a5490;
}
.admission-board-guide .guide-item p {
margin: 0;
font-size: 14px;
color: #4d5a6b;
line-height: 1.6;
}
.admission-board-frame {
padding: 20px 10px 40px;
}
.admission-board-frame iframe {
width: 100%;
min-height: 1200px;
border: none;
background: transparent;
}
@media (max-width: 768px) {
.admission-board-hero {
padding: 40px 25px;
}
.admission-board-title {
font-size: 26px;
}
.admission-board-guide {
padding: 20px 20px 5px;
}
}
@media (max-width: 480px) {
.admission-board-desc {
font-size: 14px;
}
.admission-board-guide .guide-item {
min-width: 100%;
}
}
}