#global-container {background: #f9f9f9;} #page-container {background: #fff; max-width: 1440px;} .embed-container {position: relative; padding-bottom: 56%; height: 0; overflow: hidden; max-width: 100%; margin: 0px auto 0px; background: #eee;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } .embed-outer {border: 1px solid #000; background: #000;} #right-col #qt-videos .one-of-two {background: #dff2ff; padding: 20px;} #right-col #qt-videos .one-of-two:last-of-type {background: #e5f8e7;} .sfw-slide {width: 90%; margin: 0 auto;} .credit {border-top: 1px dotted #ccc; padding-top: 20px;} .credit p, .credit p a {font-size: 11px !important; color: #555 !important;} /* 게시판 override */ .exForm .address, .exForm .date, .exForm .email_address, .exForm .homepage, .exForm .tel, .exForm .text, .board .iText {height: 32px;} .board .btn {font-size: 1.3rem; line-height: 36px!important; height: 36px!important;} .list_footer .board_search .iText, .list_footer .board_search select {height: 36px;} .board_list td.lastReply a, .board_list td.readNum, .board_list td.time, .board_list td.voteNum {font-size: 1.3rem;} .board, .board button, .board input, .board label, .board select, .board table, .board textarea {font-size: 1.3rem !important;} .fileList2 a {font-size:1rem; font-weight: normal;} /* body {} */ /* image viewer override */ .pswp {z-index: 30000 !important;} #xe_gallery_controls {z-index: 21000 !important;} #xe_gallery_screen {z-index: 20000 !important;} #xe_gallery_holder {max-width: 95% !important;} #xe_gallery_prevbtn, #xe_gallery_closebtn, #xe_gallery_nextbtn {opacity: 1 !important; outline: 0 !important} #xe_gallery_prevbtn {left:0 !important;} #xe_gallery_nextbtn {right: 0 !important;} /* jquery ui override */ #accordion h3 {border-radius: 0 !important; outline: 0; background: #dedede !important; border: 0 !important; margin-top: 6px !important;} #accordion h3:active, #accordion h3:hover {background: #3b5ec2 !important; color: #fff !important;} #accordion ul {border: 0 !important; background: #ececec;} .ui-widget {font-family: inherit !important} .ui-widget-content {border: 0px !important} /* table {display: block;} */ /* bx override */ .bx-wrapper .bx-viewport {box-shadow: none; border: 0px; left: 0px} .bx-wrapper {margin-bottom: 0;} ul.bxslider {margin:0; padding:0;} .bx-pager {display: none;} .bx-wrapper .bx-next {right: -16px; background: url(/layouts/fglv/include/js/images/controls3.png) no-repeat -43px -32px;} .bx-wrapper .bx-prev {left: -16px; background: url(/layouts/fglv/include/js/images/controls3.png) no-repeat 0 -32px;} #left-col {float: left; width: 400px; min-height: 850px;} .sub-bg1 {background: url(../images/sub-bg1.jpg) center bottom;} .sub-bg2 {background: url(../images/sub-bg2.jpg) center bottom;} .sub-bg3 {background: url(../images/sub-bg3.jpg) center bottom;} .sub-bg4 {background: url(../images/sub-bg4.jpg) center bottom;} #logo {float: right; width: 100%; padding-top: 20px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);} #logo .mobile-off {float: right} #logo h1 {margin: 0;} #logo img {display: inline-block;} .clearfix {clear: both; font-size: 0.0001rem;} .clearfix.margin-top {padding-top: 40px;} .center {margin: 0 auto; position: relative; float: none !important} .text-center {text-align: center;} #nav-school-building, #nav-sfw { background: #ffffff; border: 1px solid #3b5ec2; color: #3b5ec2; z-index: 3; padding: 14px 10px; width: 200px; float: right; margin: 0px 10px 10px 0px; text-decoration: none; text-align: left; font-weight: 500; font-size: 14px;} #nav-school-building:hover, #nav-sfw:hover {background: #3b5ec2; color: #ffffff;} nav {background: rgba(0,0,0,0.6); z-index:10000; padding: 10px 0px 5px; width: 220px; float: right; margin: 15px 15px 15px 0px;} nav > ul {margin: 0;} nav > ul > li {float: right; bottom: 10px; display: block; width: 200px; min-height: 40px; margin: 0px 10px 5px 0px; list-style: none; color: #fff; transition: padding 1s; padding: 15px 10px; font-size: 18px; font-weight: 400;} .nav-height {padding-bottom:60px !important; transition: padding .3s !important;} nav > ul > li > a {color: #fff; text-decoration: none; cursor: default;} nav > ul > li:first-child {display:none;} nav > ul > li:nth-child(2) {background-color: #4098a5;} nav > ul > li:nth-child(2).background {background-color: #4098a5; background: url(../images/nav-bg-1.jpg) bottom no-repeat;} nav > ul > li:nth-child(3) {background-color: #9e63e8;} nav > ul > li:nth-child(3).background {background-color: #9e63e8; background: url(../images/nav-bg-2.jpg) bottom no-repeat;} nav > ul > li:nth-child(4) {background-color: #38a85d;} nav > ul > li:nth-child(4).background {background-color: #38a85d; background: url(../images/nav-bg-3.jpg) bottom no-repeat;} nav > ul > li:nth-child(5) {background-color: #d98e6d;} nav > ul > li:nth-child(5).background {background-color: #d98e6d; background: url(../images/nav-bg-4.jpg) bottom no-repeat;} nav > ul > li > ul {display: none; padding: 14px 0px 0px;} nav > ul > li.active > ul {display: block;} nav > ul > li > ul > li {list-style: none; margin: 0; padding:0; font-size: 14px; font-weight: 300} nav > ul > li > ul > li > a {display: block; color: #fff; text-decoration: none; line-height: 1.5rem; font-size: 1.2rem; padding: 8px 8px 6px; margin-bottom: 5px; background: rgba(0,0,0,.2); transition: all .2s;} nav > ul > li > ul > li > a:hover {background: rgba(0,0,0,.8);} nav > ul > li > ul > li.active {background: rgba(0,0,0,.8);} #right-col {float: left; width: calc(100% - 400px); padding: 63px 40px 40px 40px; max-width: 970px; text-align: left;} .read_header h1 a {font-size: 26px !important;} .read_header .meta {display: none !important;} #right-col h1 {font-size: 2rem !important; } #right-col h2 {margin-top: 0px; font-size: 1.8rem; } #right-col h3 {margin-top: 0px; font-size: 1.5rem; } #right-col h3.section-title {text-align: center; width: 100%; margin: 40px auto 25px; display: flex; flex-direction: row;} #right-col h3.section-title:before, #right-col h3.section-title:after {content: ""; flex: 1 1; border-bottom: 1px solid #b7b7b7;} #right-col h3.section-title:before {margin: auto 20px auto 0px} #right-col h3.section-title:after {margin: auto 0px auto 20px} #right-col h4 {margin-top: 0px; font-size: 1.3rem; } #right-col p {font-size: 1.3rem; line-height: 2rem; margin-bottom: 1.3rem; } #right-col table p {margin-bottom: 0.2rem; } #right-col ul {margin-bottom: 2rem;} #right-col ol li, #right-col ol li ol li, #right-col ol li ul li {font-size: 1.2rem; line-height: 2rem; margin-bottom: 0.6rem; } #right-col ul li, #right-col ul li ul li, #right-col ul li ol li {font-size: 1.2rem; line-height: 2rem; margin-bottom: 0.6rem; } #right-col ul li ul {padding-top: 10px;} #right-col .sfw-slide ul {padding-top: 0px;} #right-col .sfw-slide ul li {list-style-type: disc} #right-col a.bttn {display: inline-block; line-height: 1.5rem; font-size: 1.2rem; padding: 12px 14px 10px;color: #fff !important; background: #3b5ec2; border: 1px solid #3b5ec2; transition: all 0.5s; min-width: 20%; text-align: center} #right-col a.bttn:hover {color: #3b5ec2 !important; background: #fff; text-decoration: none;} #right-col a.bttn-invert {display: inline-block; line-height: 1.5rem; font-size: 1.2rem; padding: 12px 14px 10px;color: #3b5ec2 !important; background: #fff; border: 1px solid #3b5ec2; transition: all 0.5s; min-width: 20%; text-align: center} #right-col a.bttn-invert:hover {color: #fff !important; background: #3b5ec2; text-decoration: none;} #right-col a.full-width {width: 100%; text-align: center;} #right-col .bttn-tithely {display: block!important; width: auto; margin:1rem auto 10px!important; border-radius: 0 !important; line-height: 24px!important; font-size: 20px!important; font-weight: 500 !important; padding: 12px 20px 10px 20px!important;color: #fff !important; background: #3b5ec2!important; border: 1px solid #3b5ec2!important; transition: all 0.5s;} #right-col .bttn-tithely:hover {color: #3b5ec2 !important; background: #fff!important; text-decoration: none;} #right-col a.bttn-large {display: inline-block; margin:10px 10px 0px 0px; line-height: 40px; font-size: 18px; padding: 0px 24px;color: #fff !important; background: #3b5ec2; border: 1px solid #3b5ec2; transition: all 0.5s;} #right-col a.bttn-large:hover {color: #3b5ec2 !important; background: #fff; text-decoration: none;} #right-col a.bttn-large2 {display: inline-block; margin:10px 10px 0px 0px; line-height: 40px; font-size: 18px; padding: 0px 24px;color: #3b5ec2 !important; background: #fff; border: 1px solid #3b5ec2; transition: all 0.5s;} #right-col a.bttn-large2:hover {color: #fff !important; background: #3b5ec2; text-decoration: none;} #right-col hr {border-top: 1px solid #c7c7c7; margin: 30px 0px; border-bottom-style: none;} #right-col .list td {font-size: 1.2rem; text-align: center; border-bottom: 1px dotted #cccccc;} #right-col .list {width: 100%;} #right-col .list tr:first-child {background: #ececec;} #right-col .list tr:first-child td:first-child {width: 15%;} #right-col .list tr:first-child td:nth-child(2) {width: 15%;} #right-col .list tr:first-child td:nth-child(3) {width: 30%;} #right-col .list tr:first-child td:nth-child(2) img {width: 100%; height: auto; display: inline-block;} #right-col .service-list td {font-size: 1.2rem; text-align: center; padding: 10px 4px; border-bottom: 1px dotted #ccc;} #right-col table.service-list {border-top: 1px dotted #999; border-bottom: 1px dotted #999; margin-bottom: 1.5rem; width: 100%} #right-col .service-list tr:first-child td:first-child {width: 30%;} #right-col .service-list tr:first-child td:nth-child(2) {width: 20%;} #right-col .service-list tr:first-child td:nth-child(3) {width: 30%;} #right-col .service-list tr:first-child td:nth-child(4) {width: 20%;} #right-col a:link {color: #3b5ec2; text-decoration: none;} #right-col a:visited {color: #3b5ec2;} #right-col a:hover {color: #000; text-decoration: underline;} .feedback .fbHeader h2 {font-size: 14px !important;} #right-col #sub-left {width: 70%; float: left; padding: 0 20px 0 0; border-right: 1px dotted #d0d0d0;} #right-col #sub-right {width: 30%; float: left; padding: 0px 10px;} #right-col #sub-right ul {margin:0; padding: 0 0 0 30px; text-align: left;} #right-col #sub-right ul li {font-size: 1.2rem; line-height: 1.4rem; margin-bottom: 1rem;} #right-col .info {border-collapse: collapse; border: 0; width:100%; padding: 16px; margin-bottom: 1.5rem;} #right-col .info p {margin: 0; line-height: 2rem} #right-col .info.green {background: #e6ffdc; color: green;} #right-col .info.yellow {background: #fff1c0; color: #975300} #right-col .info.red {background: #ffebeb; color: #b12525;} /* Component */ /* Circular Image */ .image-cirle-cropper { width: auto; height: auto; max-width: 100%; position: relative; overflow: hidden; border-radius: 50%; display: inline-block; } .image-cirle-cropper img { display: block; margin: 0 auto; height: auto; width: auto; max-width: 100%; } /* photo gallery */ #right-col #sub-left p.photo-gallery {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-flow: dense;} #right-col #sub-left p.photo-gallery img {border: 5px solid #fff; box-shadow: 3px 3px 10px #ccc; opacity: 0.8;} #right-col #sub-left p.photo-gallery img:hover {transform: rotate(1.5deg); transition: transform 0.5s; cursor: pointer; opacity: 1} /* one of two */ #right-col .one-of-two {float: left; width: 49%; margin: 0 2% 1rem 0; padding: 0; } #right-col .one-of-two:last-of-type {margin: 0 0 1rem 0;} /* one of four */ .page-component.four-block {border-bottom: 1px dashed #c0c0c0; padding: 20px 0 0 0;} .page-component.four-block:last-of-type {border-bottom: none;} #right-col .one-of-four {float: left; width: 24%; margin: 0 1% 10px 0px; padding: 20px 10px 20px 10px; } #right-col .one-of-four h3 {margin: 0px 0px 6px; font-size: 16px; line-height: 18px;} #right-col .one-of-four p {font-size: 13px; margin-bottom: 6px; line-height: 16px;} #right-col h2.hdr {text-align: center; overflow: hidden; font-size: 22px;} #right-col h2.hdr span {display: inline-block; position: relative; padding: 0 .625rem;} #right-col h2.hdr span:after {right: 100%;} #right-col h2.hdr span:before {left: 100%;} #right-col h2.hdr span:after, h2.hdr span:before {border-top: .0625rem solid #999; width: 45rem; position: absolute; height: 0; top: 50%; content: ""; display: block;} #right-col .three-of-four {float: left; width: 75%; padding: 10px 10px 20px 10px;} #right-col .one-of-three {float: left; width: 33%; padding: 10px 10px 20px 10px;} #right-col .one-of-three h3 {margin: 0px 0px 6px; font-size: 18px; line-height: 22px;} #right-col .left-image {width: 180px; height: auto; float: left; margin: 0 30px 30px 0;} .mission-team ul {padding-left: 1.5rem;} .mission-team { background: #edf8ff; /* Old browsers */ background: -moz-linear-gradient(top, #edf8ff 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #edf8ff 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #edf8ff 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf8ff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #right-col ul.widgetA li {list-style: disc !important;} #right-col ul.widgetA .summary {display: none;} .section-container {background: #f5f5f5; padding: 20px 20px 20px; margin-bottom: 20px;} .credit p { line-height: 1.2rem !important;} @media all and (max-width:1550px) { #page-container {width: 100%;} } @media all and (max-width:1280px) { #left-col {width: 300px;} #right-col {width: calc(100% - 300px);} #right-col .one-of-four {width: 49%;} #right-col .one-of-three {width: 50%;} #right-col .three-of-four {width: 100%;} #right-col .one-of-four img {max-width: 80%;} #right-col .list {width: 100%;} #right-col .list tr:first-child td:first-child {width: 15%;} #right-col .list tr:first-child td:nth-child(2) {width: 20%;} } @media all and (max-width:1024px) { #right-col {width: calc(100% - 260px); padding: 63px 20px 40px 20px;} #left-col {width: 260px;} #right-col #sub-left p.photo-gallery {grid-template-columns: repeat(2, 1fr);} } @media all and (max-width:800px) { #logo {width: 240px;} nav #mobile-nav {display: none;} #right-col #sub-left {width: 100%; padding: 0; border-right: 0px dotted #d0d0d0;} #right-col #sub-right {width: 100%; float: left; padding: 30px 0px 0px; border-top: 1px dashed gray;} #right-col #sub-right ul {margin:0; padding: 0 0 0 30px;} #right-col #sub-right ul li {font-size: 1.2rem; line-height: 1.4rem;} } @media all and (max-width:767px) { .mobile-off {display:none} .mobile-on {display:block} #logo {float: none; margin: 0px 0px 0px; text-align: center; left:0 !important; top:0; padding: 0; background: none; width: auto; height: 60px; z-index: 15000; position: fixed} #left-col {width: 100%; min-height: 0; background-image: none; background: #fff; background-position: top;} nav #mobile-nav {display: block;} nav {width: 100%; float: none; padding: 0; margin: 0; top: 0; box-sizing: content-box;} nav > ul {display: none; padding: 0;} nav > ul > li {width: 100%; margin: 0; background-image: none !important; background-repeat: repeat !important;} nav > ul > li:nth-child(2) {background: #4098a5 !important;} nav > ul > li:nth-child(3) {background: #9e63e8 !important;} nav > ul > li:nth-child(4) {background: #38a85d !important;} nav > ul > li:nth-child(5) {background: #d98e6d !important;} .nav-height {padding-bottom:10px !important;} #right-col {width: 100%; padding: 80px 20px 40px 20px;} #right-col h1 {font-size: 1.8rem !important; margin-top: 5px;} #right-col h2 {font-size: 1.6rem !important;} #right-col h3 {font-size: 1.4rem !important;} #right-col h3.section-title:before {margin: auto 8px auto 0px} #right-col h3.section-title:after {margin: auto 0px auto 8px} #right-col h4 {font-size: 1.3rem !important;} #right-col .one-of-four h3 {font-size: 16px !important;} /* one of two */ #right-col .one-of-two {float: left; width: 100%; margin: 0 0 20px 0;} #right-col #qt-videos .one-of-two {padding: 0px; background: none !important;} #right-col .service-list tr:first-child td:first-child {width: 30%;} #right-col .service-list tr:first-child td:nth-child(2) {width: 30%;} #right-col .service-list tr:first-child td:nth-child(3) {width: 20%;} #right-col .service-list tr:first-child td:nth-child(4) {width: 20%;} .read_header h1 {white-space: inherit; text-overflow: clip;} #right-col .one-of-three {width: 60%;} #right-col .left-image {width: 120px; margin: 0 20px 10px 0;} /* image viewer override */ #xe_gallery_holder {left: 2.5% !important; border: 0 !important; border-radius: 0 !important} #xe_gallery_prevbtn {left: -24px !important;} #xe_gallery_nextbtn {right: -24px !important;} .embed-outer {padding: 0px;} } @media all and (max-width:320px) { }