/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */ /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2017 Daniel Eden */ .animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp} /* ========================================================================================================================= */ .sub-title {position:relative;font-size:36px;margin:10px 0 50px} .sub-title small {display:block;margin-top:10px;font-size:.9375rem;border-top:1px solid #757575;padding-top:10px} .aboutus-top {position:relative} .aboutus-img {position:absolute;top:50px;left:50px;max-height:480px} .aboutus-img:before {content:"";position:absolute;display:block;width:150px;height:150px;left:200px;bottom:-25px;background:#BD081C;z-index:1} .aboutus-img img {position:relative;display:block;width:320px;height:auto;z-index:2} .aboutus-top .text-1 {padding:50px 50px 50px 430px;margin:0;color:#fff;background:#252525} .aboutus-top .text-2 {padding:50px 50px 50px 430px;margin:0;color:#000;background:#e5e5e5} .page-words {margin:70px 0} .page-words h4 {font-size:1.875rem;font-weight:700;color:#34608D;text-align:center;word-break:keep-all;line-height:1.5} .aboutus-bottom {position:relative} @media (min-width:768px) and (max-width:991px){ .aboutus-top .text-2 {padding:80px 50px 50px} } @media (max-width:767px) { .page-words {margin:40px 0} .page-words h4 {font-size:1.25rem} .aboutus-img {top:20px;left:20px} .aboutus-img:before {left:165px;bottom:-15px} .aboutus-img img {width:300px} .aboutus-top .text-1 {padding:520px 20px 20px} .aboutus-top .text-2 {padding:20px} } /******************************************************** ■ 웹마을 추가 ********************************************************/ /* 공통 */ .whole-wrap, .board-whole-wrap { font-family:'Noto Sans KR', 'Nanum Gothic', sans-serif; font-weight:300; font-size:12px; line-height:16px; padding:0 20px 0 20px; word-break: keep-all; word-wrap: break-word; overflow:hidden; width:90%; margin:0 auto; } .internal-wrap { width:90%; margin:0 auto; } .mid_blue { font-weight:500; font-size:1em; color:#36f; } .mid_sea { font-weight:500; font-size:1em; color:#5e9195; } .mid_orange { font-weight:500; font-size:1em; color:#f90; } .mid_orange2 { font-weight:700; font-size:1em; color:#f90; } .mid_green { font-weight:500; font-size:1em; color:#8a0; } .mid_green2 { font-weight:700; font-size:1em; color:#95b000; } .bg_color_1 {background:rgba(133,163,191,0.7);} .bg_color_2 {background:rgba(132,207,200,0.7);} .bg_color_3 {background:rgba(221,190,133,0.7);} .bg_color_4 {background:rgba(245,175,1,0.7);} .bg_color_5 {background:rgba(245,245,245,0.7);} .article-title { color:#0083B9; font-weight:bold; padding-top:30px; padding-bottom:10px; } .page-content ul, .board-page-content ul { list-style:none; padding:0px; margin:0px; font-weight:normal; } .page-content ol, .board-page-content ol { margin-top:0px; margin-bottom:0px; } .page-content ol > li > ol > li, .board-page-content ol > li > ol > li { list-style:disc; } .content_font {font-size:1em;line-height:1.4em;color:#000;padding:5px;} .YearMonthDay {font-size:1em;color:#000;font-weight:500;} /* 년월일 표기 클래스 */ /* 도표 삽입 */ .page-content table { border-top:2px solid #999; border-bottom:1px solid #ddd; } .page-content th, .page-content td { line-height:1.6 !important; } .page-content table.tbl-center th, .page-content table.tbl-center td, .page-content th.text-center, .page-content td.text-center { text-align:center !important; } /* 일반 컨텐츠용 */ .ceo-image { padding:0 10px 10px 10px; text-align:center; } .ceo-image img { width:100%; max-width:250px; border:0; border-radius:10px; } .page-content { padding:0 10px 10px 10px; line-height:1.6em; font-size:1.2em; font-weight:300; overflow:hidden;} .page-content p { margin:0 0 15px;} #name_sign { font-family: 'Nanum Gothic', Verdana, Geneva, sans-serif, "굴림"; font-size: 1.2em; text-align: right; } #name_sign b{ font-family: 'Noto Sans KR', Verdana, Geneva, sans-serif, "굴림"; font-size: 1em; text-align: right; } /* letter-spacing: 0.2em; */ /* 다시 작성 */ .sub-page-title-wrap { padding-top:38px; text-align:center; line-height:1.6em; } /* 서브페이지 상단 타이틀 */ .sub-page-title-top { font-weight:700; font-size:2em; color:#555;} .sub-page-title-mid {} .sub-page-title-bottom {font-weight:300; font-size:1em; color:#777;} /* === 컨텐츠 위 메뉴 링크 === */ .top-menu-whole-wrap { width:100%; line-height:1.2em; font-size:1.2em; margin:20px auto 40px auto; overflow:hidden; } .top-menu { font-weight:500; font-size:1em; width:150px; height:50px; border-radius:8px; border:1px solid #eee; margin:0 0 15px 0; padding-top:8px; } .top-menu:hover { background:rgba(245,175,1,0.5); font-size:1.1em; border:1px solid #900; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease; } .top-menu-sub-en { font-weight:200; font-size:0.8em;} /* === 컨텐츠 내 소제목 === */ .board-page-title { padding:0 30px 0 30px; line-height:1.6em; font-size:1.2em; font-weight:300; overflow:hidden;} .s-title { font-weight:700; font-size:1.2em; width:30%; height:40px; border-radius:20px; border:5px solid #f5f5f5; line-height:30px; margin:0 0 15px 0; padding:0 0 0 20px;} .s-title-sub-en { font-weight:200; font-size:0.8em;} /* === 보드 상단 컨텐츠용 전체 레이아웃 === */ .board-page-content { padding:0 30px 20px 50px; line-height:1.6em; font-size:1.2em; font-weight:300; overflow:hidden;} .board-page-content p { margin:0 0 15px;} /* === 회원사 타이틀 === */ .board-ctitle-wrap-title-mem { margin:20px 0 20px 0; padding:3px 10px 3px 10px; border-top:5px solid #ddd; border-bottom:1px solid #ddd; border-radius:20px; } /* === 지부.지회 타이틀 캘리 === */ .board-cwb-top { font-weight:700; font-size:2.2em; line-height:1em; color:#555; padding:3px; width:100%; margin:3px auto; text-align:center;} .board-cwb-bottom { font-weight:300; font-size:1em; color:#777; padding:3px; margin:3px auto; text-align:center;} .pic-ceo { border-radius:5px; border:0px; width:100%; max-width:195px; float:left; margin:0 15px 10px 0; } /* 지부.지회 대표 사진 */ .pic-view { border-radius:5px; border:5px solid #eee; width:100%; margin:0 auto; margin-bottom:10px; } /* 지부.지회 사진 */ /* 연혁 */ .box_00 {padding:2px;margin:0 auto;border-radius:5px;width:90%;} .box_01 {padding:7px;margin:15px 0px 5px 5px;border-radius:5px;color:#777;display:block;font-weight:700;font-size:1.4em;text-align:center; /* 중간타이틀 바*/ background: #aadd00; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#e5e5e5, #ccc); /* For Safari 5.1 to 6.0 - 그래디언트 방향: 위에서 아래로 #aadd00-상단,#729300-하단*/ background: -o-linear-gradient(#e5e5e5, #ccc); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#e5e5e5, #ccc); /* For Firefox 3.6 to 15 */ background: linear-gradient(#e5e5e5, #ccc); /* Standard syntax */ } .box_02 {padding:2px;margin:5px 0px 5px 5px;border-radius:5px;border:1px solid #eee; display:block; justify-content:center; align-items:center;} /* 상세내용 포괄 */ .box_03 {padding:2px 2px 2px 10px;margin:0px; font-size:1em;text-align:left;} /* 상세 내용 - 오른쪽 */ .box_04 {padding:2px 10px 2px 50px;margin:0px; font-size:1.1em;text-align:left;} /* 상세 내용 - 왼쪽*/ /* 반응형 중간기기 1200px 사이즈 이하*/ @media all and (max-width:1200px){ .s-title { width:40%; } } /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:992px){ .s-title { width:50%; } } @media all and (max-width:767px) { .whole-wrap, .board-whole-wrap { width:96%; margin:0 auto; } .s-title { width:100%; } .box_02 {padding:5px;margin:5px 0px 5px 5px;border-radius:5px;border:1px solid #eee;} /* 상세내용 포괄 */ .box_03 {padding:0px;margin:0px; font-size:1em;text-align:center;} /* 상세 내용 - 오른쪽 */ .box_04 {padding:0px;margin:0px; font-size:1.1em; text-align:center;} /* 상세 내용 - 왼쪽*/ } @media all and (max-width:420px) { .box_02 {padding:5px;margin:5px 0px 5px 5px;border-radius:5px;border:1px solid #eee;} /* 상세내용 포괄 */ .box_04 {padding:0px;margin:0px; font-size:1.1em;text-align:center;} /* 상세 내용 - 왼쪽*/ } /* 조직 & 임원 */ .orgbox_00 {padding:10px;margin:0px;border-radius:5px;} .orgbox_01 {padding:10px;margin:10px;border-radius:5px; background: #ffc845; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#ffc845, #ff8400); /* For Safari 5.1 to 6.0 - 그래디언트 방향: 위에서 아래로 #ffc845-상단,#ff8400-하단*/ background: -o-linear-gradient(#ffc845, #ff8400); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#ffc845, #ff8400); /* For Firefox 3.6 to 15 */ background: linear-gradient(#ffc845, #ff8400); /* Standard syntax */ } .orgbox_02 {padding:10px;margin:10px;border-radius:10px;border:5px solid #eee;background:#fefefe;} .orgbox_02_01 {padding:10px;margin:10px;border-radius:10px;border:5px solid #eee;background:#ffffcc;} .orgbox_02_02 {padding:10px;margin:10px;border-radius:10px;border:5px solid #eee;background:#f1ffc1;} .orgbox_03 {padding:5px;margin:0px;border-radius:5px;} .title_font1 {font-weight:700; font-size:1.6em;color:#fff;padding:5px;} .title_font2 {font-weight:700; font-size:1.2em;color:#669900;padding:5px;} .title_font3 {font-weight:700; font-size:1.2em;color:#ff9900;padding:5px;} .pic_1 {height:100%;max-height:200px;text-align:left;} .pic_1 img {height:100%;max-height:200px;} /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 조직 및 임원 +++++++++++++++++++++++++++++++ */ .pline { width:100%; height:150px; padding:0; } .pline2 { width:100%; height:325px; overflow:hidden; } .spacer { display:block; width:100%; height:15px; text-align:center;} .item_all { margin:0 auto; font-weight:700; width:150px; height:150px; border-radius:75px; border:#ddd 15px solid; text-align:center; font-size:22px; } .item_blank { margin:0 auto; font-weight:700; width:150px; height:150px; border-radius:75px; border:rgba(255,255,255,0) 15px solid; text-align:center; font-size:22px; } .item_01 { padding:50px 0 0 0; } .item_03 { padding:35px 0 0 0; line-height:28px; } .item_04 { font-size:20px; padding:40px 0 0 0; line-height:24px; } .item_05 { font-size:20px; padding:35px 0 0 0; line-height:24px; } .item_06 { padding:50px 0 0 0; font-weight:700; width:150px; height:150px; border-radius:75px; border:#ddd 15px solid; text-align:center; font-size:22px; } .subexp1 { font-size:16px; } .sptop { padding:92px 0 0 0; } .line01 { height:15px; background:url('http://pummaul.net/img/subpage/org-line-vt01.png') center; background-repeat: repeat-y; } .line01_blank { height:15px; } .line02 { height:25px; background:url('http://pummaul.net/img/subpage/org-line-vt02.png') center; background-repeat: repeat-y; } .line03 { height:25px; background:url('http://pummaul.net/img/subpage/org-line-vt03.png') top; } .line04 { height:25px; background:url('http://pummaul.net/img/subpage/org-line-vt04.png') top; } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .pline { width:100%; height:100px; padding:0; } .pline2 { width:100%; height:225px; overflow:hidden; } .spacer { display:block; width:100%; height:15px; text-align:center;} .item_all { margin:0 auto; font-weight:700; width:100px; height:100px; border-radius:50px; border:#ddd 10px solid; text-align:center; font-size:18px; } .item_blank { margin:0 auto; font-weight:700; width:100px; height:100px; border-radius:50px; border:rgba(255,255,255,0) 10px solid; text-align:center; font-size:18px; } .item_01 { padding:30px 0 0 0; } .item_03 { padding:25px 0 0 0; line-height:20px; } .item_04 { font-size:16px; padding:23px 0 0 0; line-height:20px; } .item_05 { font-size:16px; padding:23px 0 0 0; line-height:18px; } .item_06 { padding:30px 0 0 0; font-weight:700; width:100px; height:100px; border-radius:50px; border:#ddd 10px solid; text-align:center; font-size:18px; } .subexp1 { font-size:11px; } .sptop { padding:62px 0 0 0; } .line01 { height:15px; background:url('http://pummaul.net/img/subpage/org-line-vt01.png') center; background-repeat: repeat-y; } .line01_blank { height:15px; } .line02 { height:25px; background:url('http://pummaul.net/img/subpage/org-line-vt02.png') center; background-repeat: repeat-y; } .line03 { height:25px; background:url('http://pummaul.net/img/subpage/org-line-vt03.png') top; } .line04 { height:25px; background:url('http://pummaul.net/img/subpage/org-line-vt04.png') top; } } /* 반응형 작은기기 480사이즈 이하 */ @media screen and (max-width: 480px) { }