@charset "utf-8"; @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); /*--- init ---------------------------------------------------------------------------------------*/ *{margin: 0; padding: 0; outline: 0; background: transparent; } html, body{height:100%; width: 100%; } ol, ul, li {list-style: none; } a{text-decoration: none; color:#9c9c9c; } a, button{cursor:pointer;} table {border-collapse: collapse; border-spacing: 0; } input, img, a{vertical-align: middle; } img{border:0; -webkit-user-select: none; -ms-user-select: none; user-select: none; } div {display:block; } body {color: #000; background-color: #fff; font-size: 12px; padding: 0; margin: 0; } body, select, select option, button{font-family: "Nanum Gothic", "Roboto", "Arial", sans-serif; } html{scrollbar-track-color: #eeeeee; scrollbar-base-color: #dddddd; scrollbar-face-color: #dddddd; scrollbar-shadow-color: #cccccc; scrollbar-arrow-color: #cccccc; scrollbar-3dlight-color: #eeeeee; scrollbar-highlight-color: #eeeeee; scrollbar-dark-shadow-color: #eeeeee; } ::-webkit-scrollbar {width: 5px; height:5px; } ::-webkit-scrollbar-thumb {border-radius: 10px; background: #ccc; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.1); } ::selection {background-color: #e44131; color:#fff; } ::-moz-selection {background: #e44131; color:#fff; } .block{display: block !important} .inline{display: inline !important} .inline-b{display: inline-block !important} .float-l{float: left !important} .float-r{float: right !important} .line{display:block; position:relative; width: 100%; background-image: url(./_default/images/basic/hr.png); background-position: left top; background-repeat: repeat-x; border:0; border-top:1px dashed gray; height:3px; margin: 10px 0px; overflow:inherit; } .line:before{position: absolute; top:-10px; left:50%; margin-left:-36px; content: "절취선"; z-index:1; } .clear {display: block; width: 100%; height:0; clear: both; } .t-all{-webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .dbox{position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .dbox.active{padding-bottom: 100%; } .dbox > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .dbox > video, .dbox > iframe {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } button#topBtn{ color:#e44131; font-weight: bold; font-size: 12px; border:0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;} button#topBtn:before{display:table-cell; vertical-align: middle; content:"TOP\a0"; height:25px; padding-right:5px; } button#topBtn:after{display:table-cell; content: "\a0"; width:23px; height:25px; background-image: url(/_default/images/introduce/btn_top.png); background-repeat: no-repeat; } /*--- layer --------------------------------------------------------------------------------------*/ #wrap {width:100%; height:100%; } #wrap *{ -webkit-box-sizing: border-box; box-sizing: border-box } #wrap #contents{padding-top:123px; }/* header fixed 제거시 해당라인 삭제 */ #wrap .container{width:1100px; height:100%; margin: 0 auto; } /*--- header -------------------------------------------------------------------------------------*/ #wrap #header{width:100%; min-width:1100px; position: fixed; top:0; z-index:2;} /* header fixed 제거시 width제외 모든 속성 삭제 */ #wrap #header .h-top{display:table; width:100%; background-color:#fff; border-bottom: 1px solid #dddddd;} #wrap #header .h-top .logo-box{display: table-cell; vertical-align: middle; height:78px; } #wrap #header .h-top .logo-box img{border:0;} #wrap #header .h-top .link-box{display: table-cell; vertical-align: middle; height:78px; width:100%; text-align: right; } #wrap #header .h-top .link-box ul{display: table; float:right; height:100%; text-align: right; } #wrap #header .h-top .link-box ul li{display: table-cell; vertical-align: middle; height:100%; padding:0 10px; } #wrap #header .h-top .link-box ul li a{font-weight: bold; } #wrap #header .h-top .link-box ul li a:hover{color:#e44131;} #wrap #header .h-top .link-box ul li .search-wrap {display: inline-block; vertical-align: middle; width: 160px; height: 25px; } #wrap #header .h-top .link-box ul li .search-wrap input {float: left; width: 82%; height:100%; line-height: 24px; border:1px solid #9c9c9c; border-right:0; color: #9c9c9c; padding-left:10px; } #wrap #header .h-top .link-box ul li .search-wrap button {float: left; height: 100%; width: 18%; border:1px solid #9c9c9c; border-left:0; padding: 0; text-align: center; } #wrap #header .h-top .link-box ul li .search-wrap button:after{display: inline-block; vertical-align: middle; width:13px; height:13px; content:'\a0'; background: url("/_default/images/templates/search.png") no-repeat; } #wrap #header .h-top .link-box ul li .search-wrap:hover input , #wrap #header .h-top .link-box ul li .search-wrap:hover button , #wrap #header .h-top .link-box ul li .search-wrap input:focus , #wrap #header .h-top .link-box ul li .search-wrap input:focus + button{color:#fff; border-color:#fff; outline: 0; } #wrap #header .h-bottom{border-bottom:1px solid #dddddd; background-color: #fff; height: 45px; } #wrap #header .h-bottom ul.menu-wrap {position: relative; height: 44px; } #wrap #header .h-bottom ul.menu-wrap > li {display: inline-block; vertical-align: middle; width: 25%; margin-left: -3px; height: inherit; color:#121212; font-weight:500; text-align: center; overflow: hidden; } #wrap #header .h-bottom ul.menu-wrap > li > h2 {display: table; width:100%; height: inherit; } #wrap #header .h-bottom ul.menu-wrap > li > h2.active{color:#e44131; } #wrap #header .h-bottom ul.menu-wrap > li > h2 > a {color: inherit; font-size: 16px; display: table-cell; } #wrap #header .h-bottom ul.menu-wrap > li > h2 > a > span {display: block; width:100%; border: 0; border-right:1px solid #dddddd; } #wrap #header .h-bottom ul.menu-wrap > li:first-child > h2 > a > span {border-left:1px solid #dddddd; } #wrap #header .h-bottom ul.menu-wrap > li:hover{overflow: visible; color:#e44131; } #wrap #header .h-bottom ul.menu-wrap > li > ul {background-color: #fff; border:1px solid #dddddd; border-top:0; color:#121212; } #wrap #header .h-bottom ul.menu-wrap > li > ul > li {display: table; color: inherit; height: 40px; width:100%; border-bottom: 1px solid #dddddd; } #wrap #header .h-bottom ul.menu-wrap > li > ul > li > a{display: table-cell; width: 100%; font-size: 12px; color: inherit; } #wrap #header .h-bottom ul.menu-wrap > li > ul > li:last-child{border:0; } #wrap #header .h-bottom ul.menu-wrap > li > ul > li:hover {background-color: #e44131; color:#fff; } /*--- footer -------------------------------------------------------------------------------------*/ #wrap #footer{border-top:1px solid #dfdfdf; min-width:1100px;} #wrap #footer .business_logo{border-bottom:1px solid #dfdfdf; } #wrap #footer .business_logo > div{display: table; height: 60px; table-layout: fixed; } #wrap #footer .business_logo > div > div{display: table-cell; vertical-align: middle; } #wrap #footer .business_logo > div > div.more{width:170px; } #wrap #footer .business_logo > div > div.more > a {font-size: 18px; font-weight: bold; color:#1d1d1d; } #wrap #footer .business_logo > div > div.more > a > span, #wrap #footer .business_logo > div > div.more > a > img{display: inline-block; vertical-align: middle; } #wrap #footer .business_logo > div > div.more > a > img{margin-left:5px; } #wrap #footer .business_logo > div > div.btn{width:50px; text-align: center; } #wrap #footer .business_logo > div > div.btn > button{border:0; display: inline-block; vertical-align: middle; background:url(/_default/images/templates/btn_next.png) no-repeat center center; background-size: 8px 14px; width:20px; height: 20px; } #wrap #footer .business_logo > div > div.btn > button.left{background:url(/_default/images/templates/btn_prev.png) no-repeat center center; } #wrap #footer .f-top{display: table; height:132px; } #wrap #footer .f-top > .f-top-layer{display: table-cell; vertical-align: middle; } #wrap #footer .f-top > .f-top-layer > .foot-ft{width: 42px; float: left; } #wrap #footer .f-top > .f-top-layer > div{position: relative; margin-left: 57px; } #wrap #footer .f-top .rbox{ position: absolute; top: 50%; transform: translate3d(0, -50%, 0); right: 0; text-align: center; } #wrap #footer .f-top .rbox img{ display: block; } #wrap #footer .f-top .rbox a{ display: inline-block; vertical-align: middle; } #wrap #footer .f-top .rbox-top{ margin-bottom: 10px; } #wrap #footer .f-top .rbox-top a{ margin: 0 7px; } #wrap #footer .f-top .rbox-top img.size1{ height: 32px; } #wrap #footer .f-top .rbox-top img.size2{ height: 27px; } #wrap #footer .f-top .rbox-bottom a{ margin: 0 3px; } #wrap #footer .f-top .link-box{width:100%; margin-bottom: 10px; } #wrap #footer .f-top .link-box a{font-size: 13px; color:#757474; font-weight: bold; } #wrap #footer .f-top .link-box a:hover{color:#e44131; } #wrap #footer .f-top .link-box a span{color:#dfdfdf; margin:0 5px; } #wrap #footer .f-top .info-box{width:100%; color:#999999; font-size:12px; display: table; line-height: 1.6em; } #wrap #footer .f-top .info-box > div{display: table-cell; vertical-align: top; } #wrap #footer .f-top .info-box > div.social{text-align: right; } #wrap #footer .f-top .info-box > div.social > a{margin-left:7px; } #wrap #footer .f-top .info-box span{margin-right:5px; } #wrap #footer .f-bottom{background-color:#1d1d1d; color:#767676; width:100%; height:50px; line-height: 46px; } #wrap #footer .f-bottom .text-box{float:left; width:500px; height:100%; font-size:12px; } #wrap #footer .f-bottom .select-box{margin-left:500px; text-align:right; } #wrap #footer .f-bottom .select-box > div{border:1px solid #707070; display: inline-block; vertical-align: middle; background: url(/_default/images/templates/select_arrow.png) no-repeat 95% center; height: 25px; width: 190px; color:gray; overflow: hidden; transition: all 0.3s ease;} #wrap #footer .f-bottom .select-box > div:focus, #wrap #footer .f-bottom .select-box > div:hover{border-color:#fff; color:#fff; } #wrap #footer .f-bottom .select-box > div > select {display: block; color:inherit; background: transparent; border: none; font-size: 13px; height: 100%; width: 220px; padding:0 10px; } #wrap #footer .f-bottom .select-box > div > select option{color:gray; } /*--- header sub ( sub menu & sub title & sub common tag ) ----------------------------------------------------------------------------*/ #wrap #contents .sub-header-location-box{text-align: right; margin:30px 0 30px; } #wrap #contents .sub-header-location-box a{color:#b2b2b2; font-size: 11px; font-weight: bold; } #wrap #contents .sub-header-location-box a:last-child{color:#1d1d1d; } #wrap #contents .sub-header-location-box a:hover{color: #e44131; } #wrap #contents .sub-header-location-box a span{ margin:0 5px; } #wrap #contents .sub-header-location-box a span:after{content:"\3e"; } #wrap #contents .sub-header-location-box a:last-child span:after{content:""; } #wrap #contents .sub-header-blank{float:left; width:65px; } #wrap #contents .sub-header-menu{float:left; width:165px; padding-bottom:60px;} #wrap #contents .sub-header-menu .title{border-bottom:3px solid #1d1d1d; padding:10px 0 30px; font-weight: bold; } #wrap #contents .sub-header-menu .title.sub{border-bottom:1px solid #dddddd; padding:16px 2px; } #wrap #contents .sub-header-menu ul {width: 100%; } #wrap #contents .sub-header-menu ul li{position: relative; width:100%; border-bottom:1px solid #dddddd; padding:14px 2px; } #wrap #contents .sub-header-menu ul li a{position: relative; color:#1d1d1d; font-weight:500; font-size: 14px; width:100%; } #wrap #contents .sub-header-menu ul li a.active{color:#e44131; } #wrap #contents .sub-header-menu ul li a.font-17{font-size: 17px; } #wrap #contents .sub-header-menu ul li span.light{position: absolute; right:10px; top:19px; } #wrap #contents .sub-header-menu ul li span.light.active:before{background: url(/_default/images/introduce/munu_on.png) no-repeat; width:7px; height:7px; content: "\a0"; display: block; } #wrap #contents .sub-header-menu ul li:hover a{color:#e44131; } #wrap #contents .sub-header-menu > .support-guide-box {margin-top:20px; } #wrap #contents .sub-header-menu > .support-guide-box a{display: block; border:2px solid #e44131; background-color: #e44131; color:#fff; width:100%; text-align: center; height:100px; vertical-align: middle; padding-top:15px; } #wrap #contents .sub-header-menu > .support-guide-box a:before {display: block; content:"\a0"; width:33px; height:33px; margin: 0 auto; background: transparent url(/_default/images/supportGuide/guide_arrow_support.png) no-repeat; } #wrap #contents .sub-header-menu > .support-guide-box a > span{text-align: center; display: block; font-weight: bold; font-size: 13px; margin-top:10px; } /*컨텐츠박스 공통*/ @-webkit-keyframes sub_header_fadeIn {from {opacity: 0; } to {opacity: 1; } } @keyframes sub_header_fadeIn {from {opacity: 0; } to {opacity: 1; } } #wrap #contents .sub-header-contents{margin-left:230px; -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: sub_header_fadeIn; animation-name: sub_header_fadeIn; } #wrap #contents .sub-header-contents .title{font-size:40px; border-bottom:3px solid #1d1d1d; padding-bottom:22px; font-weight: bold; } #wrap #contents .sub-header-contents .title.title-s{font-size:35px; padding-bottom:27px; } /*컨텐츠박스 공통 > 페이지네이션*/ #wrap #contents .pagination{text-align: center; margin-bottom:5px;} #wrap #contents .pagination .pagination-wrap{display:inline-block;} #wrap #contents .pagination ul{display: table; border:1px solid #cccccc; border-right:0; } #wrap #contents .pagination ul li{display:table-cell; vertical-align: middle; border-right:1px solid #ccc; color:#999999; width:37px; height:35px; font-weight: bold; margin:0; } #wrap #contents .pagination ul li.active, #wrap #contents .pagination ul li:hover{background: #000; color:#fff; } #wrap #contents .pagination ul li a{display: block; color:inherit; padding:6px 0; } /*컨텐츠박스 공통 > 검색박스*/ #wrap #contents .sub-header-contents .search-box {text-align: center; } #wrap #contents .sub-header-contents .search-box .select-wrap {width: 110px; position: relative; display: inline-block; vertical-align: middle; padding: 0; margin: 0; height:35px; overflow: hidden; border:1px solid #cccccc; } #wrap #contents .sub-header-contents .search-box .select-wrap:after{z-index: 1; content: ' '; position: absolute; right:0; width: 30px; height:100%; background: url(/_default/images/introduce/tab_arrow_off.png) no-repeat 50% 50%; } #wrap #contents .sub-header-contents .search-box .select-wrap select {position: absolute; top:0px; left:0px; height:100%; padding:5px; width: 130%; color:gray; border: 0; } #wrap #contents .sub-header-contents .search-box .select-wrap select:focus {outline: none; } #wrap #contents .sub-header-contents .search-box .select-wrap select option{color:#000; } #wrap #contents .sub-header-contents .search-box .search-wrap {display: inline-block; vertical-align: middle; width: 180px; height: 35px; border: 1px solid #cccccc; } #wrap #contents .sub-header-contents .search-box .search-wrap .search-text {width: 140px; float: left; color: gray; border: 0; padding:10px; height:100%; background: transparent; } #wrap #contents .sub-header-contents .search-box .search-wrap .search-btn {position: relative; float: right; border: 0; padding: 0; height: 100%; width: 35px; color: gray; background: transparent; } #wrap #contents .sub-header-contents .search-box .search-wrap .search-btn:after{content:'\a0'; background-image: url(/_default/images/introduce/btn_search.gif); background-repeat: no-repeat; display: inline-block; width:18px; height:18px; } #wrap #contents .sub-header-contents .search-box .search-wrap button:focus, #wrap #contents .sub-header-contents .search-box .search-wrap input:focus{outline: 0; } /*컨텐츠박스 공통 > 빈컨텐츠 표시*/ #wrap #contents .sub-header-contents .nothing{padding:20px 0 ; margin: 30px 0; color:gray; font-weight:bold; font-size:14px; text-align:center; background-image: url(/_default/images/bg.gif); border:1px solid #cccccc; } /*--- main ---------------------------------------------------------------------------------------*/ #wrap #contents .home > .story-box{padding:70px 0;} #wrap #contents .home > .story-box h2{font-weight: bold; color:#121212; margin-bottom:20px; font-size:20px; } #wrap #contents .home > .story-box ul{width:100%; } #wrap #contents .home > .story-box ul:after{content:"\a0"; display: block; width:100%; height:0; clear:both; } #wrap #contents .home > .story-box ul li{float:left; width:260px; height:100%; margin-right:15px; } #wrap #contents .home > .story-box ul li:last-child{margin-right:0; } #wrap #contents .home > .story-box ul li img{width:100%; height:160px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #wrap #contents .home > .story-box ul li h3{font-weight: bold; color:#121212; font-size:14px; margin:15px 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing: -1px; } #wrap #contents .home > .story-box ul li p{font-size:12px; line-height: 1.4em; color:#4a4a4a; } #wrap #contents .home > .donation{width:100%; min-width:1100px; height:780px; background: #EDEDED url(/_default/images/home/donation_img2.jpg) no-repeat bottom center; background-size: 100%; background-attachment: fixed; } #wrap #contents .home > .donation .title i{font-weight: bold; letter-spacing: -1px; } #wrap #contents .home > .donation .text-box{position: relative; text-align: center; top:150px; color:#1d1d1d; height:auto;} #wrap #contents .home > .donation .text-box p{margin:15px 0 40px; font-size:35px; line-height: 1.3em; letter-spacing: -1px; } #wrap #contents .home > .donation .text-box p strong{font-size: 40px; } #wrap #contents .home > .donation button.do-btn{border:0; width:170px; height:47px; border:1px; background-color: #fff; } #wrap #contents .home > .donation-info{padding:80px 0 100px; } #wrap #contents .home > .donation-info h2{font-weight: bold; color:#121212; margin-bottom:20px; font-size:20px; } #wrap #contents .home > .donation-info .contents-box{width:100%; height:330px;} #wrap #contents .home > .donation-info .contents-box:after{content:"\a0"; display:block; width:100%; height:0; clear:both; } #wrap #contents .home > .donation-info .contents-box .movie{float: left; width:50%; height:100%; padding-right:20px; } #wrap #contents .home > .donation-info .contents-box .movie img{width:100%; } #wrap #contents .home > .donation-info .contents-box .project{float: left; width:25%; height:100%; padding-right:10px; display: table; } #wrap #contents .home > .donation-info .contents-box .project .project-wrap{display: table-cell; vertical-align: middle; height:100%; color:#fff; background-image: url(/_default/images/home/thum_project_round_back.png); text-align: center; } #wrap #contents .home > .donation-info .contents-box .project .project-wrap > p.title span{display: block; color: inherit; color:#fff; font-size: 20px; font-weight: bold; line-height: 1.4em; } #wrap #contents .home > .donation-info .contents-box .project .project-wrap > .photo-box{margin:10px auto; height:91px; width:91px; background-image: url(/_default/images/home/donation_logo.png); } #wrap #contents .home > .donation-info .contents-box .project .project-wrap > .info span{display: block; line-height: 1.5em; } #wrap #contents .home > .donation-info .contents-box .project .project-wrap > .info span.highlight{color:#e44131; } #wrap #contents .home > .donation-info .contents-box .project .project-wrap > .info span.last{margin-top: 8px; } #wrap #contents .home > .donation-info .contents-box .facebook{float: left; width:25%; height:100%; padding-left:10px;} #wrap #contents .home > .donation-info .contents-box .facebook .fb-page{background: #eee url(/_default/images/home/facebook_img.jpg) 50% 50%; height:100%; width:100%; } /*--- LOVE FNC 소개 ------------------------------------------------------------------------------*/ /*컨텐츠박스 > LOVE FNC 정신*/ #wrap #contents .sub-header-contents .spirit {width:100%; padding:0; margin:0;} #wrap #contents .sub-header-contents .spirit > .top{width:100%; } #wrap #contents .sub-header-contents .spirit > .top > .division {margin-bottom:70px; } #wrap #contents .sub-header-contents .spirit > .top > .division > h1{margin:40px 0 20px; font-size: 27px; } #wrap #contents .sub-header-contents .spirit > .top > .division > img{width:100%; } #wrap #contents .sub-header-contents .spirit > .top > .division > p{font-size:16px; color:#4a4a4a; margin:15px 0; line-height: 1.4em; } #wrap #contents .sub-header-contents .spirit .center{width:100%; margin-top:100px;} #wrap #contents .sub-header-contents .spirit .center h1{margin-bottom:25px; font-size: 27px; } #wrap #contents .sub-header-contents .spirit .center .layer{margin-bottom:30px; } #wrap #contents .sub-header-contents .spirit .center .layer:after{display:block; clear:both; width:100%; height:0; content:"\a0"; } #wrap #contents .sub-header-contents .spirit .center .half{width:48%; float:left;} #wrap #contents .sub-header-contents .spirit .center .half.blank{width:4%;} #wrap #contents .sub-header-contents .spirit .center .half.blank:before{content:"\a0";} #wrap #contents .sub-header-contents .spirit .center .half .sub-title{position: relative; } #wrap #contents .sub-header-contents .spirit .center .half .sub-title span{position: absolute; bottom:18px; color:#ed4858; font-size:20px; margin-left:15px; font-weight: bold; } #wrap #contents .sub-header-contents .spirit .center .half p{padding-left:80px; color:#4a4a4a; font-size:15px; line-height: 1.4em; } #wrap #contents .sub-header-contents .spirit .center .half .sub-title img{-webkit-transition: all 1.5s ease; transition: all 1.5s ease; } #wrap #contents .sub-header-contents .spirit .bottom{width:100%; margin:100px 0 100px; } #wrap #contents .sub-header-contents .spirit .bottom h1{width:100%; font-size: 27px; margin:40px 0 25px;} #wrap #contents .sub-header-contents .spirit .bottom .left{float:left; width:330px; } #wrap #contents .sub-header-contents .spirit .bottom .right{margin-left:330px; } #wrap #contents .sub-header-contents .spirit .bottom .right > p{color:#4a4a4a; font-size:15px; line-height: 1.4em; } #wrap #contents .sub-header-contents .spirit .bottom .right > p > span{display: block; } #wrap #contents .sub-header-contents .spirit .bottom .right .color-rule h2{margin:50px 0 20px; font-size:20px; color:#2f2f2f; } #wrap #contents .sub-header-contents .spirit .bottom .right .color-rule span{padding:5px 0; display:block; font-size:15px; color:gray; } #wrap #contents .sub-header-contents .spirit .top-btn-box {text-align: right; margin-bottom:30px; } /*컨텐츠박스 > 인사말*/ #wrap #contents .sub-header-contents .greeting {width:100%; padding:0; margin:50px 0;} #wrap #contents .sub-header-contents .greeting .column {float: left;} #wrap #contents .sub-header-contents .greeting .column.left {width:345px; } #wrap #contents .sub-header-contents .greeting .column.left img.ceo-img {width:100%; } #wrap #contents .sub-header-contents .greeting .column.left p { margin:15px 0;} #wrap #contents .sub-header-contents .greeting .column.left p span {font-weight: bold; font-size: 13px; vertical-align: middle; margin-right:5px; } #wrap #contents .sub-header-contents .greeting .column.right {width:470px; } #wrap #contents .sub-header-contents .greeting .column.right .sub-title h1{font-size: 29px; } #wrap #contents .sub-header-contents .greeting .column.right .sub-title h1.bottom{color:#e44131;} #wrap #contents .sub-header-contents .greeting .column.right .sub-contents {margin:20px 0; font-size: 14px; color:#666666; font-weight: 500; line-height: 2em} #wrap #contents .sub-header-contents .greeting .column.right .sub-contents h3{font-size: 20px; margin:40px 0 10px;} #wrap #contents .sub-header-contents .greeting .column.right .sub-contents span{display: block; border-bottom:1px solid #dddddd; font-size: 16px; } #wrap #contents .sub-header-contents .greeting .column.right .sub-contents span.blank {line-height: 1em; border:0; } #wrap #contents .sub-header-contents .greeting .column.right .sub-contents span.blank:after{content:"\a0"; } #wrap #contents .sub-header-contents .greeting .column.blank {width:55px; } #wrap #contents .sub-header-contents .greeting .column.blank:before {content:"\a0"; } #wrap #contents .sub-header-contents .greeting .top-btn-box {text-align: right; margin:100px 0 30px; } /*컨텐츠박스 > 걸어온길*/ #wrap #contents .sub-header-contents .history .tab{display: table; width:100%; margin-bottom: 50px; } #wrap #contents .sub-header-contents .history .tab .half {display: table-cell; width:50%; } #wrap #contents .sub-header-contents .history .tab .half:first-child{padding-right:2px; } #wrap #contents .sub-header-contents .history .tab .half:last-child{padding-left:2px; } #wrap #contents .sub-header-contents .history .tab .half button{border:1px solid #dddddd; padding:10px 20px; color: #909090; font-weight: 600; font-size:18px; height: 45px; width:100%; text-align: left; } #wrap #contents .sub-header-contents .history .tab .half button:before{content: "글"; display: inline-block; width: 0; visibility: hidden; } #wrap #contents .sub-header-contents .history .tab .half button:after{display:inline-block; float: right; content: "\a0"; margin-top:7px; width:15px; height:7px; background-image: url(/_default/images/introduce/tab_arrow_off.png); background-repeat: no-repeat; } #wrap #contents .sub-header-contents .history .tab .half button.active{background-color: #e44131; border-color:#e44131; color:#fff; } #wrap #contents .sub-header-contents .history .tab .half button.active:after{background-image: url(/_default/images/introduce/tab_arrow_on.png); } #wrap #contents .sub-header-contents .history .history-wrap {margin-bottom:40px; } #wrap #contents .sub-header-contents .history .history-wrap:after{display: inline-block; clear:both; width:100%; height:0; content:"\a0"; } #wrap #contents .sub-header-contents .history .history-wrap .year{ float:left; width:180px; font-size:22px; } #wrap #contents .sub-header-contents .history .history-wrap .year-contents{ margin-left:180px; padding-top:10px;} #wrap #contents .sub-header-contents .history .history-wrap .year-contents p{position: relative; display: table; width:100%; color:#555555; font-size:16px; line-height: 1.5em; font-weight: 600; vertical-align: middle; } #wrap #contents .sub-header-contents .history .history-wrap .year-contents p span.img{content:"\a0"; display: table-cell; vertical-align: middle; width:17px; height:36px; background: url(/_default/images/introduce/history_bullet.png) no-repeat; padding-right:30px; } #wrap #contents .sub-header-contents .history .history-wrap .year-contents p span.date{display: table-cell; vertical-align: middle; width:30px; padding-right:20px; font-weight: bold; } #wrap #contents .sub-header-contents .history .history-wrap .year-contents p span.text{display: table-cell; vertical-align: middle; } #wrap #contents .sub-header-contents .history .top-btn-box{ margin:100px 0 50px; text-align:right;} /*컨텐츠박스 > 경영보고*/ #wrap #contents .sub-header-contents .report {width:100%; padding:0; margin:0;} #wrap #contents .sub-header-contents .report .tab{display: table; width:100%; margin:20px 0 10px; } #wrap #contents .sub-header-contents .report .tab .column {display: table-cell; width:50%; } #wrap #contents .sub-header-contents .report .tab .column:first-child{padding-right:2px; } #wrap #contents .sub-header-contents .report .tab .column:last-child{padding-left:2px; } #wrap #contents .sub-header-contents .report .tab .column button{border:1px solid #dddddd; padding:10px 20px; color: #909090; font-weight: 600; font-size:18px; height: 45px; width:100%; text-align: left; } #wrap #contents .sub-header-contents .report .tab .column button:before{content: "글"; display: inline-block; width: 0; visibility: hidden; } #wrap #contents .sub-header-contents .report .tab .column button:after{display:inline-block; float: right; content: "\a0"; margin-top:7px; width:15px; height:7px; background-image: url(/_default/images/introduce/tab_arrow_off.png); background-repeat: no-repeat; } #wrap #contents .sub-header-contents .report .tab .column button.active{background-color: #e44131; border-color:#e44131; color:#fff; } #wrap #contents .sub-header-contents .report .tab .column button.active:after{background-image: url(/_default/images/introduce/tab_arrow_on.png); } #wrap #contents .sub-header-contents .report .list-box{width:100%; margin-bottom:40px; } #wrap #contents .sub-header-contents .report .list-box > .sub-notice{font-weight: bold; font-size: 24px; line-height: 1.3em; margin: 20px 0 40px; } #wrap #contents .sub-header-contents .report .list-box > .sub-notice > p.top{color:#000; } #wrap #contents .sub-header-contents .report .list-box > .sub-notice > p.bottom{color:#e44131; } #wrap #contents .sub-header-contents .report .list-box > table { width: 100%; font-size: 14px; border-top:2px solid #000; text-align: left; } #wrap #contents .sub-header-contents .report .list-box > table tr.info-none {background-image: url(/_default/images/bg_pattern.gif); text-align: center; } #wrap #contents .sub-header-contents .report .list-box > table tr:hover {background-color: #eeeeed; } #wrap #contents .sub-header-contents .report .list-box > table tr .a-center {text-align: center; } #wrap #contents .sub-header-contents .report .list-box > table tr th {padding:10px 0; font-weight: bold; border-bottom:1px solid #ccc; background-image: url(/_default/images/bg_pattern.gif); } #wrap #contents .sub-header-contents .report .list-box > table tr td {color:gray; padding:10px 0; border-bottom:1px solid #ccc; } #wrap #contents .sub-header-contents .report .list-box > table tr td:first-child, #wrap #contents .sub-header-contents .report .list-box > table tr td:last-child{ font-size: 13px; } #wrap #contents .sub-header-contents .report .list-box > table tr td span {margin:0 1px; } #wrap #contents .sub-header-contents .report .list-box > table tr td span.file:after{display: inline-block; content: "\a0"; width: 11px; height: 11px; vertical-align: middle; background-image: url(/_default/images/introduce/icon_add.gif); } #wrap #contents .sub-header-contents .report .list-box > table tr td span.new:after{display: inline-block; content: "\a0"; width: 15px; height: 15px; vertical-align: middle; background-image: url(/_default/images/introduce/icon_new.png); } #wrap #contents .sub-header-contents .report .list-box > table tr td > a {color:#555555; font-weight: bold; margin-right:7px; } #wrap #contents .sub-header-contents .report .top-btn-box { margin:40px 0 30px; text-align: right} /*컨텐츠박스 > 봉사단*/ #wrap #contents .sub-header-contents .volunteers{margin: 40px 0; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .text-wrap{margin:40px 0;} #wrap #contents .sub-header-contents .volunteers > .main-wrap > .text-wrap > img{width:100%; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .text-wrap > h1{font-weight: 400; line-height: 1.3em; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .text-wrap > h1 + h1{font-weight: bold; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .text-wrap > p{margin-top:15px; font-size: 14px; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .vedio-wrap{display: table; width:100%; margin-bottom:40px; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .vedio-wrap > .vedio{display: table-cell; vertical-align: middle; width:400px; height:225px; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .vedio-wrap > .text{display: table-cell; vertical-align: bottom; padding-left:20px; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .vedio-wrap > .text p{border-bottom:1px solid #ccc; padding:5px 0; line-height: 1.7em; font-size: 14px; font-weight: bold; } #wrap #contents .sub-header-contents .volunteers > .main-wrap > .vedio-wrap > .text p span{color:#e44131; display: inline-block; vertical-align: top; } #wrap #contents .sub-header-contents .volunteers > .info-wrap {padding:40px 0; border-bottom:1px solid #ccc; } #wrap #contents .sub-header-contents .volunteers > .info-wrap.last{border-bottom:0; } #wrap #contents .sub-header-contents .volunteers > .info-wrap > h2 {font-size: 20px; } #wrap #contents .sub-header-contents .volunteers > .info-wrap > p {font-size: 14px; line-height: 1.4em; margin:15px 0 25px; } #wrap #contents .sub-header-contents .volunteers > .info-wrap > .img-wrap{display: table; width:100%; } #wrap #contents .sub-header-contents .volunteers > .info-wrap > .img-wrap .colum{display: table-cell; } #wrap #contents .sub-header-contents .volunteers > .info-wrap > .img-wrap .colum.blank{width:20px; } #wrap #contents .sub-header-contents .volunteers > .info-wrap > .img-wrap .colum img{width:100%; } #wrap #contents .sub-header-contents .volunteers > .question-wrap{font-weight: bold; margin-top:20px; } #wrap #contents .sub-header-contents .volunteers > .question-wrap > h2{font-size: 20px; margin-bottom:10px; } #wrap #contents .sub-header-contents .volunteers > .question-wrap > span{margin-right:15px; font-size: 14px; } #wrap #contents .sub-header-contents .volunteers > .question-wrap > span img{margin-right:5px; } #wrap #contents .sub-header-contents .volunteers > .question-wrap > span+span img{margin-right:0; } #wrap #contents .sub-header-contents .volunteers .top-btn-box{text-align: right; margin:60px 0 30px; } /*컨텐츠박스 > 오시는길*/ #wrap #contents .sub-header-contents .map {padding:40px 0; } #wrap #contents .sub-header-contents .map .map-wrap {width:100%; height:500px; margin:30px 0; border-radius: 7px; /*box-shadow: 0 0 10px #000*/ } #wrap #contents .sub-header-contents .map table{text-align: left;} #wrap #contents .sub-header-contents .map table tr{line-height: 2.2em} #wrap #contents .sub-header-contents .map table tr th{ color:#e44131; font-size:18px; font-weight: bold; text-align: left; } #wrap #contents .sub-header-contents .map table tr td{ color:#4a4a4a; font-size:15px; } #wrap #contents .sub-header-contents .map .top-btn-box{text-align: right; margin:50px 0 30px; } /*컨텐츠박스 > 공지사항 & 언론보도*/ #wrap #contents .sub-header-contents .notice {width:100%; padding:0; margin:0;} #wrap #contents .sub-header-contents .notice .tab{display: table; width:100%; margin-bottom: 10px; } #wrap #contents .sub-header-contents .notice .tab .half {display: table-cell; width:50%; } #wrap #contents .sub-header-contents .notice .tab .half:first-child{padding-right:2px; } #wrap #contents .sub-header-contents .notice .tab .half:last-child{padding-left:2px; } #wrap #contents .sub-header-contents .notice .tab .half button{border:1px solid #dddddd; padding:10px 20px; color: #909090; font-weight: 600; font-size:18px; height: 45px; width:100%; text-align: left; } #wrap #contents .sub-header-contents .notice .tab .half button:before{content: "글"; display: inline-block; width: 0; visibility: hidden; } #wrap #contents .sub-header-contents .notice .tab .half button:after{display:inline-block; float: right; content: "\a0"; margin-top:7px; width:15px; height:7px; background-image: url(/_default/images/introduce/tab_arrow_off.png); background-repeat: no-repeat; } #wrap #contents .sub-header-contents .notice .tab .half button.active{background-color: #e44131; border-color:#e44131; color:#fff; } #wrap #contents .sub-header-contents .notice .tab .half button.active:after{background-image: url(/_default/images/introduce/tab_arrow_on.png); } #wrap #contents .sub-header-contents .notice table {width:100%; margin:40px 0 30px; } #wrap #contents .sub-header-contents .notice table tr{ border:1px solid #dddddd; border-left: 0; border-right: 0; line-height: 4em; font-size:15px; text-align: center; color:gray; } #wrap #contents .sub-header-contents .notice table tr.active{background-image: url(/_default/images/bg.gif); } #wrap #contents .sub-header-contents .notice table tr td.sort-l{text-align: left; } #wrap #contents .sub-header-contents .notice table tr td.sort-l.new:after{display: inline-block; vertical-align: middle; content: "\a0"; background: url(/_default/images/introduce/icon_new.png) no-repeat; width:15px; height:15px; margin-left:10px; } #wrap #contents .sub-header-contents .notice table tr td.sort-l a{ color:#2f2f2f; } #wrap #contents .sub-header-contents .notice table tr td.date{ font-size: 15px;} #wrap #contents .sub-header-contents .notice table tr td.user{ font-size: 15px; color:#e44131; } #wrap #contents .sub-header-contents .notice table tr td span.n1{color:#fff; background-color: #e44131; padding:2px 10px; border-radius: 3px; font-size: 14px; vertical-align: middle; } #wrap #contents .sub-header-contents .notice .top-btn-box{text-align: right; margin:60px 0 20px; } /*컨텐츠박스 > 나눔스토리*/ #wrap #contents .sub-header-contents .story .col-tr {margin:40px 0;} #wrap #contents .sub-header-contents .story .col-tr:after{display:inline-block; clear:both; width:100%; height:0; content:"\a0"; } #wrap #contents .sub-header-contents .story .col-tr .col-td{float: left; width:30%; } #wrap #contents .sub-header-contents .story .col-tr .col-td.blank{width:5%; border:0;} #wrap #contents .sub-header-contents .story .col-tr .col-td.blank:after{content:"\a0";} #wrap #contents .sub-header-contents .story .col-tr .col-td .img-box{position:relative; width:100%; height:160px; overflow: hidden; } #wrap #contents .sub-header-contents .story .col-tr .col-td .img-box.new:after{ position: absolute; top:10px; right:10px; display: inline-block; content:"\a0"; width:41px; height:41px; background: url(/_default/images/introduce/icon_up.png) no-repeat; } #wrap #contents .sub-header-contents .story .col-tr .col-td .img-box > img{width:100%; height:100%; } #wrap #contents .sub-header-contents .story .col-tr .col-td .text-box{padding:20px; height: 150px; overflow: hidden; border:1px solid #ccc; background-color: #fff; letter-spacing: -1px;} #wrap #contents .sub-header-contents .story .col-tr .col-td .text-box .top{font-size: 15px; color:#2f2f2f; font-weight: 600; margin-bottom:10px; width:100%; line-height: 1.4em; overflow:hidden; } #wrap #contents .sub-header-contents .story .col-tr .col-td .text-box .bottom{color:#777777; font-size:13px; line-height: 1.4em; height:56px; overflow:hidden; } #wrap #contents .sub-header-contents .story .top-btn-box{text-align: right; margin:60px 0 20px; } /*컨텐츠박스 > 공통 view 페이지*/ #wrap #contents .sub-header-contents .bbsView {width:100%; padding:0; margin:0;} #wrap #contents .sub-header-contents .bbsView > table { width:100%; margin-bottom: 15px; } #wrap #contents .sub-header-contents .bbsView > table tr{ border:1px solid #dddddd; border-left: 0; border-right: 0; line-height: 1.7em; font-size:16px; font-weight: 500; text-align: center; color:gray; background-color: #fcfcfc; } #wrap #contents .sub-header-contents .bbsView > table tr td{padding:20px 0; } #wrap #contents .sub-header-contents .bbsView > table tr td.sort-l{text-align: left; } #wrap #contents .sub-header-contents .bbsView > table tr td.sort-l.new:after{display: inline-block; vertical-align: middle; content: "\a0"; background: url(/_default/images/introduce/icon_new.png) no-repeat; width:15px; height:15px; margin-left:10px; } #wrap #contents .sub-header-contents .bbsView > table tr td.sort-l strong{ color:#2f2f2f; } #wrap #contents .sub-header-contents .bbsView > table tr td.date{ font-size: 15px;} #wrap #contents .sub-header-contents .bbsView > ul.file-list { margin:20px 0 0 20px;} #wrap #contents .sub-header-contents .bbsView > ul.file-list a.list{display: inline; color:#444444; line-height: 1.7em} #wrap #contents .sub-header-contents .bbsView > ul.file-list a.list:before{display: inline-block; vertical-align: middle; content:"\a0"; width:10px; height:10px; margin-right:4px; background: url(/_default/images/introduce/icon_file.gif) no-repeat; } #wrap #contents .sub-header-contents .bbsView > ul.file-list a.list:hover{text-decoration: underline; } #wrap #contents .sub-header-contents .bbsView > .list-back{border-top:1px solid #cccccc; margin:50px 0 0; text-align: center; } #wrap #contents .sub-header-contents .bbsView > .list-back button{border:1px solid #cccccc; color:#888; font-size: 16px; font-weight: 500; padding:10px 40px; margin:20px 0; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form {padding:20px; background-color: #f4f4f4; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap{display: table; width:100%; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap:first-child{margin-bottom:10px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer1{display: table-cell; vertical-align: top; width:80px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer1 > img{width:70px; height:70px; border:1px solid #ccc; border-radius: 4px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer1 > span{font-size: 14px; font-weight: bold; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2{display: table-cell; vertical-align: top; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span{position: relative; top:1px; background-color: #fff; display: inline-block; border:1px solid #ccc; border-bottom:0; padding:5px 15px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label{display: inline-block; vertical-align: middle; content: "\a0"; width:18px; height:18px; background: url(/_default/images/introduce/social_icon.png) no-repeat 0px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label.fnc{background-position: 0px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label.kakao{background-position: -90px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label.naver{background-position: -119px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label.facebook{background-position: -60px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label.twitter{background-position: -30px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > label.google{background-position: -180px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > div > span > span{display: inline-block; vertical-align: middle; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > textarea {float: left; width: 85%; height: 110px; border:1px solid #ccc; border-right:0; background-color: #fff; resize:none; padding:10px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .textarea-wrap > button {float: left; width: 15%; height: 110px; border:1px solid #ccc; background-color: #f2f2f2; font-size: 14px; font-weight:bold; letter-spacing: 1px; color:#444; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .comment {display: table; width:100%; padding-top:5px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .comment > p{display: table-cell; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .comment > p + p{text-align: right; padding-right: 10px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button{display: inline-block; vertical-align: middle; border:0; width:24px; height:24px; background: url(/_default/images/introduce/social_icon.png) no-repeat -100px; border:2px solid transparent; border-radius: 4px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.active{border-color: #e44131; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.fnc{background-position: 0px 0px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.kakao{background-position: -90px 0px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.naver{background-position: -119px 0px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.facebook{background-position: -60px 0px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.twitter{background-position: -30px 0px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > button.google{background-position: -180px 0px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap .writer-form > .layer-wrap > .layer2 > .icon-wrap > a{float: right; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .overview{font-size: 14px; font-weight: bold; padding:50px 0 7px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .overview > span{color:#e30000; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list.reply{padding-left:70px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list.reply > div{background-color: #f9f9f9; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list.reply > div > div.layer2 > .btn-wrap > button.submit{display: none; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div {display: table; width:100%; border-top:1px solid #ccc; padding:20px 10px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div{display: table-cell; vertical-align: top; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1{width:70px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a{position: relative; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > .user{border:1px solid #ccc; width:50px; border-radius: 4px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span{position: absolute; display: inline-block; bottom:-25px; right:-9px; content: "\a0"; width:18px; height:18px; background: url(/_default/images/introduce/social_icon.png) no-repeat 0px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span.fnc{background-position: 0px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span.kakao{background-position: -90px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span.naver{background-position: -119px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span.facebook{background-position: -60px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span.twitter{background-position: -30px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer1 > a > span.google{background-position: -180px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .info > a{color:inherit; font-size: 14px; font-weight: bold; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .info > span{margin-left:10px; font-size: 12px; color: #666; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > p{margin:10px 0; line-height: 1.45em; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .btn-wrap > button{display: inline-block; vertical-align: middle; margin-right:5px; border:0; padding-left: 18px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .btn-wrap > button.submit{background: url(/_default/images/introduce/bbs_icon.png) no-repeat 4px -62px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .btn-wrap > button.submit:hover{background-position: 4px -78px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .btn-wrap > button.del{background: url(/_default/images/introduce/bbs_icon.png) no-repeat 4px -29px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > .btn-wrap > button.del:hover{background-position: 4px -46px; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > form{margin-top:10px; display: none; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .list-wrap > .list > div > div.layer2 > form > div {border:1px solid #ccc; } #wrap #contents .sub-header-contents .bbsView > .replay-wrap > .pagination{display: block; width:100%; border:1px solid #ccc; padding:10px; background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(243,243,243))); background: -webkit-linear-gradient(rgb(255,255,255), rgb(243,243,243)); background: linear-gradient(rgb(255,255,255), rgb(243,243,243)); } #wrap #contents .sub-header-contents .bbsView > .top-btn-box{text-align: right; margin:50px 0 20px; } #wrap #contents .sub-header-contents .bbsView > .view-contents {max-width: 710px; margin: 0 auto;} #wrap #contents .sub-header-contents .bbsView > .view-contents img{ max-width: 100%; } /*--- 지원사업 -----------------------------------------------------------------------------------*/ /*사업소개*/ #wrap #contents .sub-header-contents .business{ width:100%; margin:0; padding:0; } #wrap #contents .sub-header-contents .business div.hr{display:block; width:100%; border:1px solid #ccc; border-bottom:0 } #wrap #contents .sub-header-contents .business > .photo-box{display: table; width:100%; height:380px; background: url(/_default/images/business/aboutBusiness_main_img.jpg) no-repeat center center; background-size: 100% 100%; color:#fff; margin-top:40px; } #wrap #contents .sub-header-contents .business > .photo-box > .text-box{display: table-cell; vertical-align: middle; height:100%; width:100%; text-align: center; } #wrap #contents .sub-header-contents .business > .photo-box > .text-box > h1{line-height: 1.4em; font-size:30px; } #wrap #contents .sub-header-contents .business > .photo-box > .text-box > h1:first-child{font-weight: 100; } #wrap #contents .sub-header-contents .business > .division{width:100%; padding:50px 0; } #wrap #contents .sub-header-contents .business > .division > .left{width:180px; font-size: 13px; float:left; color:#000; } #wrap #contents .sub-header-contents .business > .division > .right{margin-left:180px; } #wrap #contents .sub-header-contents .business > .division > .right > h1{font-size: 25px; margin:0 0 15px; } #wrap #contents .sub-header-contents .business > .division > .right > p.text-box{ line-height: 1.7em; color:#777777; font-size: 14px; margin-bottom:25px;} #wrap #contents .sub-header-contents .business > .division > .right > p.text-box span{ display: block;} #wrap #contents .sub-header-contents .business > .division > .right > .column-box{width:100%; } #wrap #contents .sub-header-contents .business > .division > .right > .column-box:after{content:"\a0"; display: inline-block; clear:both; width:100%; height:0; } #wrap #contents .sub-header-contents .business > .division > .right > .column-box > .column{display: table; float:left; width:48%; } #wrap #contents .sub-header-contents .business > .division > .right > .column-box > .column.blank{ width:4%; } #wrap #contents .sub-header-contents .business > .division > .right > .column-box > .column.blank:after{ content:"\a0"; } #wrap #contents .sub-header-contents .business > .division > .right > .column-box > .column > img{display: table-cell; vertical-align: middle; } #wrap #contents .sub-header-contents .business > .division > .right > .column-box > .column > span{display: table-cell; vertical-align: middle; line-height: 1.4em; padding-left:15px; font-size: 14px; } #wrap #contents .sub-header-contents .business > .top-btn-box{text-align: right; color:#444444; margin:50px 0 30px; } /*해외 > 교육지원사업*/ #wrap #contents .sub-header-contents .internationalEducation{ width:100%; margin:0; padding:0; } #wrap #contents .sub-header-contents .internationalEducation > .photo-box{display: table; width:100%; height:380px; background: url(/_default/images/business/internationalEducation_main_img.jpg) no-repeat center center; background-size: 100% 100%; color:#fff; margin:40px 0 30px; } #wrap #contents .sub-header-contents .internationalEducation > .photo-box > .text-box{display: table-cell; vertical-align: middle; text-align: center; font-size: 17px; padding:0 50px; } #wrap #contents .sub-header-contents .internationalEducation > .photo-box > .text-box > p{line-height: 1.4em; } #wrap #contents .sub-header-contents .internationalEducation > .photo-box > .text-box > h1{font-size: 42px; } #wrap #contents .sub-header-contents .internationalEducation > .photo-box img{ width:100%; } #wrap #contents .sub-header-contents .internationalEducation > .text-box > p{line-height: 1.5em; font-size: 17px; letter-spacing: -1px; color:#666666; } #wrap #contents .sub-header-contents .internationalEducation > h2.sub-title{font-size: 20px; margin:80px 0 25px; } #wrap #contents .sub-header-contents .internationalEducation > .column-box{margin-bottom:30px; } #wrap #contents .sub-header-contents .internationalEducation > .column-box:after{ display:block; width:100%; height:0; clear:both; content:"\a0";} #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column{ float:left; width:48%;} #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column.blank{ width:4%; } #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column.blank:after{ content:"\a0"; } #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column > h1{ margin:7px 0 15px; font-weight: bold; } #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column > .group-box {display: table-row; } #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column > .group-box img {display: table-cell; vertical-align: middle; } #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column > .group-box p {display: table-cell; vertical-align: middle; padding-left:25px; } #wrap #contents .sub-header-contents .internationalEducation > .column-box > .column > .group-box p span{display: block; color:#666666; font-size: 16px; line-height: 1.7em; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-wrap{position: relative; top:1px; display: table; z-index: 1; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-wrap > button{display: table-cell; padding:10px 40px; border: 1px solid #dddddd; border-left:0; color:#666666; background-color: #f6f6f6; font-weight: bold; font-size: 16px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-wrap > button:first-child{border-left:1px solid #dddddd;} #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-wrap > button.active{background-color: #fff; color: #e44131; border-bottom-color:#fff; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-wrap > button:hover{background-color: #fff; color:#e44131; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap{position: relative; border:1px solid #dddddd; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > img.earth{width:100%; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap button{ border:0; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div{position: absolute; text-align: center; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.burkinaFaso{top:280px; left:40px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.nepal{top:235px; left:230px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.mongol{top:180px; left:265px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.cambodia{top:285px; left:288px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.myanmar{top:252px; left:264px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.philippines{top:285px; left:322px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div.ecuador{top:322px; right:154px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup{position: absolute; z-index:1; display: none; width:280px; border:1px solid #222222; background-color: #fff; margin-bottom:10px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > .p-title{background-color: #222222; color:#fff; font-size: 12px; padding:5px 25px; text-align: center; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > .icon{padding:10px; border-bottom:1px solid #ddd; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > .icon > span{font-size: 14px; font-weight: bold; margin-left:5px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > table{display: inline-block; margin:15px 20px;;} #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > table th{text-align: right; white-space: nowrap; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > table td{text-align: left; min-width:100px; word-break: keep-all; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > table th, #wrap #contents .sub-header-contents .internationalEducation > .map-new > .img-wrap > div > .popup > table td{padding:3px 5px; vertical-align: top; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-box1{ text-align: center; width:100%; margin-top:30px; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-box1 > button{width:265px; height:47px; border:0; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-box2{ text-align: center; width:100%; padding:30px 0 0; } #wrap #contents .sub-header-contents .internationalEducation > .map-new > .btn-box2 > button{padding:20px 80px; border:0; background-color: #e44131; color:#fff; font-weight: bold; font-size: 16px; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box {padding:20px 0; border-top:1px solid #ccc; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box:last-child{border-bottom:1px solid #ccc; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box .story-group{display: table; width:100%; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box .story-group .img-box{width: 260px; height:160px; display: table-cell; vertical-align: middle; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box .story-group .img-box img{width:100%; height:100%; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box .story-group .text-box{padding:0 30px; height:145px; display: table-cell; vertical-align: middle; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box .story-group .text-box h2{margin-bottom: 15px; color:#444444; font-size: 20px; } #wrap #contents .sub-header-contents .internationalEducation > .story-layer > .story-box .story-group .text-box p{line-height: 1.5em; color:#666666; font-size: 15px; letter-spacing: -1px;} #wrap #contents .sub-header-contents .internationalEducation > .pagination {margin:30px 0; } #wrap #contents .sub-header-contents .internationalEducation > .top-btn-box {text-align: right; margin:100px 0 30px; } /*국내 > 아동청소년지원사업*/ #wrap #contents .sub-header-contents .domesticChild{width:100%; margin:0; padding:0; } #wrap #contents .sub-header-contents .domesticChild > .photo-box{display: table; width:100%; height:380px; color:#fff; margin:40px 0 30px; background: url(/_default/images/business/domesticChild_main_img.jpg) no-repeat center center; background-size: 100% 100%; } #wrap #contents .sub-header-contents .domesticChild > .photo-box > .text-box{display: table-cell; vertical-align: middle; font-size: 17px; line-height: 3em; text-align: center; } #wrap #contents .sub-header-contents .domesticChild > .photo-box > .text-box > h1{font-size: 42px; font-size: 40px; } #wrap #contents .sub-header-contents .domesticChild > .photo-box img{width:100%; } #wrap #contents .sub-header-contents .domesticChild > .text-box > p{line-height: 1.5em; font-size: 17px; letter-spacing: -1px; color:#666666; } #wrap #contents .sub-header-contents .domesticChild > h2.sub-title{font-size: 20px; margin:80px 0 20px; } #wrap #contents .sub-header-contents .domesticChild > .column-box{width:100%; } #wrap #contents .sub-header-contents .domesticChild > .column-box:after{ content:"\a0"; display: block; clear:both; width:100%; height:0; } #wrap #contents .sub-header-contents .domesticChild > .column-box > .column{ float:left; width:30%;} #wrap #contents .sub-header-contents .domesticChild > .column-box > .column.blank{ width:5%; } #wrap #contents .sub-header-contents .domesticChild > .column-box > .column.blank:after{ content:"\a0"; } #wrap #contents .sub-header-contents .domesticChild > .column-box > .column img{ width:100%; } #wrap #contents .sub-header-contents .domesticChild > .column-box > .column .text-box {margin-top:20px; text-align: center; color:#666666; font-size:16px; } #wrap #contents .sub-header-contents .domesticChild > .column-box > .column .text-box p{ line-height: 1.5em; } #wrap #contents .sub-header-contents .domesticChild > .btn-box{ text-align: center; width:100%; border-top:1px solid #ccc; padding:30px 0 0; margin-top:50px;} #wrap #contents .sub-header-contents .domesticChild > .btn-box > button{padding:13px 80px; border:0; background-color: #e44131; color:#fff; font-weight: bold; font-size: 16px; } #wrap #contents .sub-header-contents .domesticChild > .top-btn-box{ text-align: right; margin:100px 0 30px;} /*--- 후원안내 -----------------------------------------------------------------------------------*/ /*후원안내*/ #wrap #contents .sub-header-contents .supportGuide > h1{margin-bottom:25px; font-size: 36px; } #wrap #contents .sub-header-contents .supportGuide > .visual-wrap {display: table; background: url(/_default/images/supportGuide/main_visual.jpg) no-repeat center center; width:100%; height: 380px; } #wrap #contents .sub-header-contents .supportGuide > .visual-wrap > .text{display: table-cell; vertical-align: middle; color:#fff; width:100%; text-align: center; } #wrap #contents .sub-header-contents .supportGuide > .visual-wrap > .text > h1{font-weight: 500; font-size: 30px; line-height: 1.6em; } #wrap #contents .sub-header-contents .supportGuide > .visual-wrap > .text > h1 + h1{font-weight: bold; } #wrap #contents .sub-header-contents .supportGuide > .means{margin:70px 0;} #wrap #contents .sub-header-contents .supportGuide > .means > h2{font-size: 20px; margin-bottom:20px; } #wrap #contents .sub-header-contents .supportGuide > .means > div{display: table; width:100%;} #wrap #contents .sub-header-contents .supportGuide > .means > div > .column{display: table-cell; width:31%; border:1px solid #ccc; padding:30px 20px; text-align: center; } #wrap #contents .sub-header-contents .supportGuide > .means > div > .column.blank{width:3.5%; border:0; } #wrap #contents .sub-header-contents .supportGuide > .means > div > .column > h2{font-size: 24px; white-space: nowrap; letter-spacing: -1px; } #wrap #contents .sub-header-contents .supportGuide > .means > div > .column > img{margin:15px 0; } #wrap #contents .sub-header-contents .supportGuide > .means > div > .column > p{line-height: 1.5em; font-weight: bold; font-size: 13px; } #wrap #contents .sub-header-contents .supportGuide > .means > div > .column > button{margin-top:40px; border:0; background-color: #e44131; color:#fff; font-weight: 600; padding:8px 50px; } #wrap #contents .sub-header-contents .supportGuide > .means > div > .column > button.low{margin-top:20px;} #wrap #contents .sub-header-contents .supportGuide > .story > h2{font-size: 20px; margin-bottom:20px; } #wrap #contents .sub-header-contents .supportGuide > .story > a{display: table; width:100%; padding:30px 0; border-bottom:1px solid #ccc; border-top:1px solid #ccc; } #wrap #contents .sub-header-contents .supportGuide > .story > a + a{border-top:0; } #wrap #contents .sub-header-contents .supportGuide > .story > a > div{display: table-cell; vertical-align: middle; } #wrap #contents .sub-header-contents .supportGuide > .story > a > div.img{width:220px; overflow: hidden; } #wrap #contents .sub-header-contents .supportGuide > .story > a > div.img > img{width:100%; } #wrap #contents .sub-header-contents .supportGuide > .story > a > div.text{padding-left:30px; color:#666; font-size: 14px; } #wrap #contents .sub-header-contents .supportGuide > .story > a > div.text > h3{color:#000;} #wrap #contents .sub-header-contents .supportGuide > .story > a > div.text > p{line-height: 1.4em; margin:10px 0 15px; } #wrap #contents .sub-header-contents .supportGuide > .story > a > div.text > span{text-decoration: underline; color:#e44131; font-weight: 500; } #wrap #contents .sub-header-contents .supportGuide > .story > .pagination{ margin-top:20px; } #wrap #contents .sub-header-contents .supportGuide > .contact{font-weight: bold; margin-top:70px; } #wrap #contents .sub-header-contents .supportGuide > .contact > h2{font-size: 20px; margin-bottom:15px; } #wrap #contents .sub-header-contents .supportGuide > .contact > span{margin-right:15px; font-size: 14px; } #wrap #contents .sub-header-contents .supportGuide > .contact > span img{margin-right:5px; } #wrap #contents .sub-header-contents .supportGuide > .contact > span+span img{margin-right:0; } #wrap #contents .sub-header-contents .supportGuide > .top-btn-box{text-align: right; margin:100px 0 10px; } /*후원안내 > 기념일 기부 */ #wrap #contents .anniversary > .subject{display: table; width:100%; height: 450px; text-align: center; background: url(/_default/images/supportGuide/anniversary_top_img.jpg) no-repeat center; background-size: center 100%; } #wrap #contents .anniversary > .subject > div{position: relative; top:-10px; display: table-cell; vertical-align: middle; color:#fff; font-size: 16px; font-weight: bold; } #wrap #contents .anniversary > .subject h1{font-size: 50px; padding:5px 0 20px; } #wrap #contents .anniversary > .subject p{font-weight: 600; line-height: 1.6em; } #wrap #contents .anniversary > .process{padding:70px 0; } #wrap #contents .anniversary > .process > h1{font-size: 30px; padding-bottom:30px; } #wrap #contents .anniversary > .process > .column-wrap {display: table; width:100%; } #wrap #contents .anniversary > .process > .column-wrap > .column{display: table-cell; vertical-align: top; } #wrap #contents .anniversary > .process > .column-wrap > .column.img{width:400px; } #wrap #contents .anniversary > .process > .column-wrap > .column ol{display: table; width:100%; margin-top:20px; } #wrap #contents .anniversary > .process > .column-wrap > .column ol:first-child{margin-top:0;} #wrap #contents .anniversary > .process > .column-wrap > .column ol > li{display: table-cell; vertical-align: top; font-weight: bold; font-size: 14px; line-height: 1.8em; } #wrap #contents .anniversary > .process > .column-wrap > .column ol > li.num{width:24px; } #wrap #contents .anniversary > .process > .column-wrap > .column ol > li.num > span{display: inline-block; vertical-align: top; text-align: center; width: 24px; height: 24px; background: url(/_default/images/supportGuide/anniversary_num.png) no-repeat center center; color:#fff; } #wrap #contents .anniversary > .process > .column-wrap > .column ol > li.sub{width:160px; padding:0 20px; } #wrap #contents .anniversary > .process > .column-wrap > .column ol > li.text{color:#666; font-weight: 600; } #wrap #contents .anniversary > .process > .btn-wrap {text-align: center; padding-top:50px; } #wrap #contents .anniversary > .process > .btn-wrap > button{background:url(/_default/images/supportGuide/anniversary_arrow.png) no-repeat 150px center; width:180px; padding:10px 20px; text-align: left; font-size: 18px; font-weight: bold; border:1px solid #ccc; color:#e44131; } #wrap #contents .anniversary > .process > .btn-wrap > button > span{display: inline-block; vertical-align: bottom; } #wrap #contents .anniversary > .project{padding:70px 0; background-color: #f6f6f6; } #wrap #contents .anniversary > .project > div > h1{font-size: 30px; padding-bottom:30px; } #wrap #contents .anniversary > .project > div > .column-wrap{display: table; width:100%; } #wrap #contents .anniversary > .project > div > .column-wrap > .column{display: table-cell; vertical-align: middle; width:31%; } #wrap #contents .anniversary > .project > div > .column-wrap > .column.blank{width:3.5%; } #wrap #contents .anniversary > .project > div > .column-wrap > .column > .img-wrap{position: relative; height: 240px; overflow: hidden; } #wrap #contents .anniversary > .project > div > .column-wrap > .column > .img-wrap > img{width:100%; } #wrap #contents .anniversary > .project > div > .column-wrap > .column > .img-wrap > span{position: absolute; bottom:0; left:0; width:100%; padding:10px; font-size: 14px; text-align: center; line-height: 1.5em; color:#fff; background-image:url(/_default/images/supportGuide/bb-5.png); } #wrap #contents .anniversary > .project > div > .column-wrap > .column > div + div{text-align: center; background-color: #fff; padding:30px 30px; border-bottom:1px solid #ccc; } #wrap #contents .anniversary > .project > div > .column-wrap > .column > div + div > table{width:100%; line-height: 1.6em; font-size: 13px; } #wrap #contents .anniversary > .project > div > .column-wrap > .column > div + div > table tr td, #wrap #contents .anniversary > .project > div > .column-wrap > .column > div + div > table tr th{text-align: left; } #wrap #contents .anniversary > .project > div > .column-wrap > .column > div + div > button{width:100%; margin-top:20px; padding:12px 0; border:0; background-color: #e44131; color:#fff; font-size: 14px; font-weight: bold; } #wrap #contents .anniversary > .story{padding:70px 0; } #wrap #contents .anniversary > .story > h1{font-size: 30px; padding-bottom:30px; } #wrap #contents .anniversary > .story > a{display: table; width:100%; padding:30px 0; border-bottom:1px solid #ccc; border-top:1px solid #ccc; cursor: auto; } #wrap #contents .anniversary > .story > a + a{border-top:0; } #wrap #contents .anniversary > .story > a > div{display: table-cell; vertical-align: middle; } #wrap #contents .anniversary > .story > a > div.img{width:220px; overflow: hidden; } #wrap #contents .anniversary > .story > a > div.img > img{width:100%; } #wrap #contents .anniversary > .story > a > div.text{padding-left:30px; color:#666; font-size: 14px; } #wrap #contents .anniversary > .story > a > div.text > h2{color:#000;} #wrap #contents .anniversary > .story > a > div.text > div{margin:10px 0; font-weight: bold; } #wrap #contents .anniversary > .story > a > div.text > div > img{display: inline-block; vertical-align: middle; width:24px; height: 16px; margin-right:10px; } #wrap #contents .anniversary > .story > a > div.text > div > span{display: inline-block; vertical-align: middle; } #wrap #contents .anniversary > .story > a > div.text > p{line-height: 1.4em; } #wrap #contents .anniversary > .story > .pagination{margin-top:40px; } #wrap #contents .anniversary > .story > .top-btn-box{text-align: right; margin:40px 0 0; } /*후원안내 > 기념일 기부 > 기념일 신청서 */ #wrap #contents .applicationForm > .app-container{width:480px; margin:0 auto; } #wrap #contents .applicationForm .subject{text-align: center; padding:60px 0; font-size: 14px; } #wrap #contents .applicationForm .subject > span{font-weight: bold; } #wrap #contents .applicationForm .subject > h1{font-size: 45px; padding:5px 0 20px; } #wrap #contents .applicationForm .subject > p{color:#666; font-weight: 600; line-height: 1.6em; } #wrap #contents .applicationForm .group{margin-bottom:15px; } #wrap #contents .applicationForm .group label.input-wrap{display: table; vertical-align: middle; height:50px; width:100%; border: 1px solid #ccc; border-top-width:0; } #wrap #contents .applicationForm .group label.input-wrap:first-child{border-top-width:1px; } #wrap #contents .applicationForm .group label.input-wrap > * {display: table-cell; vertical-align: middle; } #wrap #contents .applicationForm .group label.input-wrap > input {width:100%; height: 100%; line-height: 48px; border:0; padding-left:15px; color: inherit; font-size: 16px; font-weight: 500; } #wrap #contents .applicationForm .group label.input-wrap > span {width: 30px; height: 100%; background:url(/_default/images/supportGuide/applicationForm_icon_e01.png) no-repeat center center; } #wrap #contents .applicationForm .group label.input-wrap > span:after {content : "\a0\a0\a0\a0\a0\a0\a0"; } #wrap #contents .applicationForm .group label.input-wrap.text{border-bottom:0; } #wrap #contents .applicationForm .group label.input-wrap.text > span{font-weight: bold; text-align: center; width:50px; background:none; line-height: 0; } #wrap #contents .applicationForm .group label.input-wrap.text2{border-bottom: 0; } #wrap #contents .applicationForm .group label.input-wrap.text2 > input{padding:0 15px; } #wrap #contents .applicationForm .group label.selection-wrap {position: relative; display: inline-block; vertical-align: middle; width: 100%; background-color: #fff; } #wrap #contents .applicationForm .group label.selection-wrap button {display: inline-block; font-size: 16px; width: 100%; height: 50px; border: 1px solid #ccc; text-align: left; padding:15px; } #wrap #contents .applicationForm .group label.selection-wrap > button > span.arrow {position: absolute; right:0; top:0; height:50px; width:30px; background: #fff url(/_default/images/supportGuide/applicationForm_arrow.png) no-repeat center center; border:1px solid #ccc; border-left:0; } #wrap #contents .applicationForm .group label.selection-wrap > div {display: none; z-index:1; position: absolute; top:49px; left:0; width:100%; max-height: 200px; overflow-y:auto; border:1px solid #ccc; border-top:0; background-color: #fff; } #wrap #contents .applicationForm .group label.selection-wrap > div > button{border:0; height: 40px; padding:10px 15px; } #wrap #contents .applicationForm .group label.selection-wrap > div > button:hover{background-color: #f9f9f9; } #wrap #contents .applicationForm .group label.selection-wrap > select {display: none; } #wrap #contents .applicationForm .group > .comment{padding:15px; border:1px solid #ccc; color:#999; border-top:0; border-bottom: 0; background-color: #f9f9f9; } #wrap #contents .applicationForm .group > .date{display: table; width:100%; border:1px solid #ccc; } #wrap #contents .applicationForm .group > .date > span{display: table-cell; vertical-align: middle; padding:0 15px; font-size: 16px; } #wrap #contents .applicationForm .group > .date > label.selection-wrap{display: table-cell; vertical-align: middle; width:105px; } #wrap #contents .applicationForm .group > .date > label.selection-wrap > div{top:50px;} #wrap #contents .applicationForm .group > .date > label.selection-wrap > button, #wrap #contents .applicationForm .group > .date > label.selection-wrap > button > span.arrow{ border:0; } #wrap #contents .applicationForm form > .guid{border:1px solid #ccc; background-color: #f9f9f9; padding:15px 20px; font-size: 12px; } #wrap #contents .applicationForm form > .guid > h3{margin-bottom:10px; color:#444; } #wrap #contents .applicationForm form > .guid > p{line-height: 1.6em; font-weight: 500; color:#999; letter-spacing: -0.5px; } #wrap #contents .applicationForm form > button{width:100%; padding:13px; border:0; color:#fff; background-color: #e44131; font-weight: bold; font-size: 16px; } #wrap #contents .applicationForm > .top-btn-box{text-align: right; padding:100px 0 10px;} /*후원안내 > 프로젝트 */ #wrap #contents .project > .title{text-align: center; padding:50px 0 ; } #wrap #contents .project > .title > h1{padding-bottom:20px; font-size: 35px; font-weight: bold line-height: 1.6em; } #wrap #contents .project > .title > p{line-height: 1.6em; font-size: 14px; font-weight: 500; color:#888; } #wrap #contents .project > .info{padding:35px 0 ; display: table; width:100%; border:1px solid #ccc; border-left:0; border-right:0; } #wrap #contents .project > .info > div{display: table-cell; vertical-align: bottom; } #wrap #contents .project > .info > div.col-l{width:70%; } #wrap #contents .project > .info > div.col-c{width: 5%; } #wrap #contents .project > .info > div.col-r{widows: 25%; } #wrap #contents .project > .info > div.col-l > img{width:100%; } #wrap #contents .project > .info > div.col-r > h3{font-size: 16px; padding-bottom:5px; } #wrap #contents .project > .info > div.col-r > p{font-size: 35px; font-weight: bold; padding-bottom:15px; white-space: nowrap; } #wrap #contents .project > .info > div.col-r > p.date{font-size: 20px; font-weight: 500; padding-bottom:120px;} #wrap #contents .project > .info > div.col-r > button{color:#fff; border:0; text-align: left; font-weight: bold; font-size: 20px; padding:25px 30px; width: 100%; background:#e44131 url(/_default/images/supportGuide/project_btn_arrow.png) no-repeat 210px center; } #wrap #contents .project > .contents{margin:40px 0; word-break:break-all; } #wrap #contents .project > .top-btn-box{text-align: right; padding:10px 0 10px;} /*후원안내 > 캠페인 */ #wrap #contents .campaign > .subject{display: table; width:100%; height: 450px; text-align: center; background: url(/_default/images/supportGuide/campaign_top_img.jpg) no-repeat center; background-size: center 100%; } #wrap #contents .campaign > .subject > div{position: relative; top:-10px; display: table-cell; vertical-align: middle; color:#fff; font-size: 16px; font-weight: bold; } #wrap #contents .campaign > .subject h1{font-size: 50px; padding:5px 0 20px; } #wrap #contents .campaign > .subject p{font-weight: 600; line-height: 1.6em; } #wrap #contents .campaign > .project{padding:70px 0 0; } #wrap #contents .campaign > .project > div > h1{font-size: 30px; padding-bottom:30px; } #wrap #contents .campaign > .project > div > .column-wrap{display: table; width:100%; } #wrap #contents .campaign > .project > div > .column-wrap > .column{display: table-cell; width:31%; } #wrap #contents .campaign > .project > div > .column-wrap > .column.blank{width:3.5%; } #wrap #contents .campaign > .project > div > .column-wrap > .column > .img-wrap{height: 240px; overflow: hidden; } #wrap #contents .campaign > .project > div > .column-wrap > .column > .img-wrap > img{width:100%; } #wrap #contents .campaign > .project > div > .column-wrap > .column > .info{text-align: center; background-color: #f9f9f9; padding:30px 30px; border:1px solid #e1e1e1; border-top:0; } #wrap #contents .campaign > .project > div > .column-wrap > .column > .info > span{display: block; font-size: 13px; color:#666; line-height: 1.4em; width:290px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap #contents .campaign > .project > div > .column-wrap > .column > .info > h2{margin-top:10px; font-size:18px; line-height: 1.4em; width:290px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap #contents .campaign > .project > div > .column-wrap > .column > .info > button{width:100%; margin-top:25px; padding:12px 0; border:0; background-color: #e44131; color:#fff; font-size: 14px; font-weight: bold; } #wrap #contents .campaign > .project .pagination{margin-top:60px; } #wrap #contents .campaign > .project .top-btn-box{text-align: right; padding:70px 0 10px;} /*후원안내 > 기업사회공헌 */ #wrap #contents .csr > .subject{display: table; width:100%; height: 450px; text-align: center; background: url(/_default/images/supportGuide/CSR_top_img.jpg) no-repeat center; background-size: center 100%; } #wrap #contents .csr > .subject > div{position: relative; top:-10px; display: table-cell; vertical-align: middle; color:#fff; font-size: 16px; font-weight: bold; } #wrap #contents .csr > .subject h1{font-size: 50px; padding:5px 0 20px; } #wrap #contents .csr > .subject p{font-weight: 500; line-height: 1.6em; } #wrap #contents .csr > .sponsor{padding:70px 0 0; } #wrap #contents .csr > .sponsor > h1{font-size: 30px; padding-bottom:30px;} #wrap #contents .csr > .sponsor > ul{margin: -15px 0 0 -15px; } #wrap #contents .csr > .sponsor > ul:after{content: ""; display: block; width: 100%; clear: both; } #wrap #contents .csr > .sponsor > ul > li {float: left; width: 20%; padding: 15px 0 0 15px; list-style-type: none; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #wrap #contents .csr > .sponsor > ul > li > img{display: block; width: 100%; } #wrap #contents .csr > .way{padding:70px 0 0; } #wrap #contents .csr > .way > h1{font-size: 30px; padding-bottom:30px; } #wrap #contents .csr > .way > div {display: table; width:100%; } #wrap #contents .csr > .way > div > div {display: table-cell; vertical-align: middle; } #wrap #contents .csr > .way > div > div.col-l{width:40%;} #wrap #contents .csr > .way > div > div.col-c{width:2%;} #wrap #contents .csr > .way > div > div.col-r{width:58%;} #wrap #contents .csr > .way > div > div > h2{font-weight: bold; font-size: 20px; padding-bottom:10px; } #wrap #contents .csr > .way > div > div > h2{font-weight: bold; font-size: 20px; padding-bottom:10px; } #wrap #contents .csr > .way > div > div > div{display: table; width:100%; } #wrap #contents .csr > .way > div > div > div > .column-l{width: 48.5%; } #wrap #contents .csr > .way > div > div > div > .column-l.blank{width:2%; } #wrap #contents .csr > .way > div > div > div > .column-r{width: 33%; } #wrap #contents .csr > .way > div > div > div > .column-r.blank{width:1%; } #wrap #contents .csr > .way > div > div > div > div{display: table-cell; vertical-align: bottom; text-align: center; border-bottom:1px solid #ccc; line-height: 1.6em; } #wrap #contents .csr > .way > div > div > div > div > h3{background-color: #222; color:#fff; font-size: 14px; padding:5px; } #wrap #contents .csr > .way > div > div > div > div > p{font-size: 12px; color:#666; font-weight: bold; padding:30px 0; letter-spacing: -1px;} #wrap #contents .csr > .process{padding:70px 0 0; } #wrap #contents .csr > .process > h1{font-size: 30px; padding-bottom:30px; } #wrap #contents .csr > .process > div {display: table; width:100%; } #wrap #contents .csr > .process > div > div {display: table-cell; vertical-align: top; text-align: center; } #wrap #contents .csr > .process > div > div.arrow{width:101px; background:url(/_default/images/supportGuide/CSR_icon_process_arrow.png) no-repeat center 90px; background-size: 101px; } #wrap #contents .csr > .process > div > div > img{width:199px; } #wrap #contents .csr > .process > div > div > h3 {font-size: 14px; font-weight: bold; padding:30px 0 10px; } #wrap #contents .csr > .process > div > div > p {font-size: 12px; line-height: 1.5em; color:#777; } #wrap #contents .csr > .inquire{padding:70px 0 0; } #wrap #contents .csr > .inquire > h1{font-size: 30px; padding-bottom:20px; } #wrap #contents .csr > .inquire > p{color:#666; font-size: 16px; margin-bottom:15px; } #wrap #contents .csr > .inquire > span{color:#666; font-weight: 600; margin-right:15px; font-size: 16px; } #wrap #contents .csr > .inquire > span img{margin-right:5px; } #wrap #contents .csr > .inquire > span+span img{margin-right:0; } #wrap #contents .csr > .example{padding:70px 0 0; background:url(/_default/images/supportGuide/CSR_moolbbang.png) no-repeat right center; } #wrap #contents .csr > .example > h1{font-size: 30px; padding-bottom:20px; } #wrap #contents .csr > .example > p{color:#666; font-size: 16px; margin-bottom:30px; } #wrap #contents .csr > .example > button{text-align: left; border:1px solid #ccc; color:#e44131; padding:10px 20px; width:220px; font-size: 16px; font-weight: bold; background:url(/_default/images/supportGuide/CSR_arrow_b.png) no-repeat 190px center; } #wrap #contents .csr > .example > .top-btn-box{padding: 70px 0 10px; text-align: right; } /*후원안내 > FAQ */ #wrap #contents .sub-header-contents .FAQ > .btn-group{display: table; width:100%; } #wrap #contents .sub-header-contents .FAQ > .btn-group > .column{display: table-cell; vertical-align: top width:24.25%; } #wrap #contents .sub-header-contents .FAQ > .btn-group > .column.blank{width:1%; } #wrap #contents .sub-header-contents .FAQ > .btn-group button{background-color: transparent; font-weight: bold; font-size: 16px; text-align: left; padding:13px; width:100%; border:1px solid #ccc; color: #aaa; } #wrap #contents .sub-header-contents .FAQ > .btn-group button span{display: inline-block; float: right; margin-top:7px; width:15px; height:7px; background: url(/_default/images/supportGuide/tab_arrow_off.png) no-repeat center center; } #wrap #contents .sub-header-contents .FAQ > .btn-group button.active{background-color: #e44131; border-color:#e44131; color:#fff; } #wrap #contents .sub-header-contents .FAQ > .btn-group button.active span{background-image: url(/_default/images/supportGuide/tab_arrow_on.png); } #wrap #contents .sub-header-contents .FAQ > .info-wrap{margin:30px 0 50px; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail{border-bottom:1px solid #ccc; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail:first-child{border-top:1px solid #ccc; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a{display: table; width:100%; color:inherit; font-weight: bold; font-size: 14px; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a > span, #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a > p {display: table-cell; padding:25px 30px; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a > p{width:100%; padding:25px; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a > span:first-child{color:#e44131; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a > span + p + span{background: url(/_default/images/supportGuide/icon_open.gif) no-repeat center center; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > a.active > span + p + span{background-image: url(/_default/images/supportGuide/icon_close.gif); } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > div{display: table; width:100%; border-top:1px solid #e6e6e6; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > div > span, #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > div > div{display: table-cell; padding:25px 30px; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > div > div{width:100%; padding:25px; } #wrap #contents .sub-header-contents .FAQ > .info-wrap > .detail > div > span{font-size:14px; font-weight: bold; } #wrap #contents .sub-header-contents .FAQ > .top-btn-box{text-align: right; margin:40px 0 30px; } /*--- 기부하기 -----------------------------------------------------------------------------------*/ /*기부하기*/ #wrap #contents .sub-header-contents .donate > .layer-top > h1{font-size: 36px; margin-bottom:20px;} #wrap #contents .sub-header-contents .donate > .layer-top > h1 > span{color:#e44131; } #wrap #contents .sub-header-contents .donate > .layer-top > p{font-size:16px; line-height: 1.6em; } #wrap #contents .sub-header-contents .donate > .layer-top > .visual-wrap{background: url(/_default/images/donate/big_banner_img.jpg) no-repeat center center; border:1px solid #d9d9d9; display: table; height:278px; width:100%; margin:30px 0; } #wrap #contents .sub-header-contents .donate > .layer-top > .visual-wrap > div{display: table-cell; vertical-align: middle; padding-left:40px; font-weight: bold; } #wrap #contents .sub-header-contents .donate > .layer-top > .visual-wrap > div > h2{font-size: 26px; font-weight: 600; line-height: 1.3em; } #wrap #contents .sub-header-contents .donate > .layer-top > .visual-wrap > div > button{margin-top:30px; border:0; background-color: #e44131; color:#fff; font-weight: bold; font-size: 16px; padding:10px 50px; } #wrap #contents .sub-header-contents .donate > .layer-bottom{margin:60px 0; } #wrap #contents .sub-header-contents .donate > .layer-bottom > h2{font-size:20px; margin-bottom:20px; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box{display: table; width:100%; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column{display: table-cell; text-align: center; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column.blank{width:25px; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > div{border:1px solid #d9d9d9; padding:20px; text-align: left; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > div > img, #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > div > div{display: inline-block; vertical-align: middle; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > div > div{padding-left:20px; max-width:290px;} #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > div > div > h3{font-size: 16px; margin-bottom:10px; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > div > div > span {display: block; font-size: 14px; line-height: 1.4em; } #wrap #contents .sub-header-contents .donate > .layer-bottom > .donate-box > .column > button{font-size: 14px; margin:20px 0; padding:7px 25px; color:#fff; background-color: #333; text-align: center; border:0; } #wrap #contents .sub-header-contents .donate > .top-btn-box{text-align: right; margin:40px 0 30px; } /* 페이팔 결제페이지 */ #wrap #contents .donate-pay{width:85%; margin: 0 auto; text-align: center; } #wrap #contents .donate-pay > .subject{width:100%; font-size: 35px; font-weight: bold; padding:50px 0; } #wrap #contents .donate-pay > .box{display: table; width:100%; } #wrap #contents .donate-pay > .box > div.column{display: table-cell; width:48%; } #wrap #contents .donate-pay > .box > div.column.blank{width:4%; } #wrap #contents .donate-pay > .box > div.column > .donate-box{border:1px solid #ccc; padding:40px; } #wrap #contents .donate-pay > .box > div.column > .donate-box:hover{border-color:#e44131; } #wrap #contents .donate-pay > .box > div.column > .donate-box > .title{font-size: 25px; font-weight: bold; margin-bottom:30px; } #wrap #contents .donate-pay > .box > div.column > .donate-box > .input-wrap{display: table; width:100%; border:1px solid #ccc; margin-bottom:10px; } #wrap #contents .donate-pay > .box > div.column > .donate-box > .input-wrap > label{display: table-cell; vertical-align: middle; width:10px; height: 40px; font-size: 18px; font-weight: bold; padding:0 5px 0 10px; } #wrap #contents .donate-pay > .box > div.column > .donate-box > .input-wrap > input{display: table-cell; vertical-align: middle; width:100%; height: 40px; font-size: 18px; font-weight: 500; line-height: 40px; border:0; } #wrap #contents .donate-pay > .box > div.column > .donate-box > .input-wrap > span{display: table-cell; vertical-align: middle; width:120px; height: 40px; font-size: 16px; font-weight: 400; padding:0 10px; } #wrap #contents .donate-pay > .box > div.column > .donate-box > button{width:100%; height:40px; background-color: #e44131; border:0; color:#fff; font-size: 16px; font-weight: 500; } #wrap #contents .donate-pay > .box > div.column > button{width:160px; height:40px; background-color: #222; border:0; color:#fff; font-size: 16px; font-weight: 500; margin-top:20px; } #wrap #contents .donate-pay > .top-btn-box{margin:120px 0 20px; text-align: right; } /*--- 기부하기 End -------------------------------------------------------------------------------*/ /*--- 회원 관련 ----------------------------------------------------------------------------------*/ /* 로그인, 회원가입 */ #wrap #contents .sign-wrap{display: table; margin:50px auto; width:350px; } #wrap #contents .sign-wrap > .subject{font-size: 35px; font-weight: bold; text-align: center; padding:10px 10px 40px 10px; } #wrap #contents .sign-wrap > .input-wrap{position: relative; display: table; width:100%; padding:10px 0; } #wrap #contents .sign-wrap > .input-wrap > input{float: left; border:1px solid #ccc; height:45px; width:100%; padding:10px; } #wrap #contents .sign-wrap > .input-wrap > input.active{border-color:#e44131; } #wrap #contents .sign-wrap > .input-wrap > input.active + button{border-color:#e44131; } #wrap #contents .sign-wrap > .input-wrap.toggle > input{width:80%; border-right:0; } #wrap #contents .sign-wrap > .input-wrap.toggle > button{float: left; border:1px solid #ccc; border-left:0; height:45px; width:20%; font-size: 16px; font-weight: bold; } #wrap #contents .sign-wrap > .input-wrap > img.img-chk{display: none; position: absolute; top: 26px; right: -24px; } #wrap #contents .sign-wrap > .input-wrap > label.comment{display: none; position: relative; float: left; width:0; } #wrap #contents .sign-wrap > .input-wrap > label.comment > div{position: relative; width:100%; top: 13px; left: 10px; font-size: 14px; font-weight: bold; white-space:nowrap; color:#e44131; } #wrap #contents .sign-wrap > .input-wrap > label.comment > div > *{display: inline-block; vertical-align: middle; } #wrap #contents .sign-wrap > .input-wrap > label.comment > div > img{margin-right:5px; } #wrap #contents .sign-wrap > .email-code-info{position: relative; border:1px solid #ccc; background-color: #f1f1f1; padding:10px; font-size:14px; font-weight: bold; text-align: center; line-height: 1.4em; color:#e44131; } #wrap #contents .sign-wrap > .email-code-info > .arrow {position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f1f1f1; top:-9px; left:50%; margin-left:-5px; } #wrap #contents .sign-wrap > .email-code-info > .arrow-border{position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ccc; top:-10px; left:50%; margin-left:-5px; } #wrap #contents .sign-wrap > .checkbox-wrap{padding:10px 0; } #wrap #contents .sign-wrap > .checkbox-wrap > label{display:block; cursor: pointer; font-size: 14px; padding:5px 0;} #wrap #contents .sign-wrap > .checkbox-wrap > label input[type="checkbox"]{display: none; } #wrap #contents .sign-wrap > .checkbox-wrap > label input[type="checkbox"] + span {display: inline-block; vertical-align: middle; width: 12px; height: 12px; content: "\a0"; background: url(/_default/images/member/icon_check_box_off.png) no-repeat 0 top; margin-right:10px; } #wrap #contents .sign-wrap > .checkbox-wrap > label p{display: inline-block; vertical-align: middle; } #wrap #contents .sign-wrap > .checkbox-wrap > label span.checked {background: url(/_default/images/member/icon_check_box_on.png) !important; } #wrap #contents .sign-wrap > .btn-wrap > button{display: block; width:100%; height:45px; border:0; font-size: 14px; font-weight: bold; background-color: #e44131; color:#fff; margin:10px 0; } #wrap #contents .sign-wrap > .btn-wrap > button + button{background-color: #ddd; color:#333; } #wrap #contents .sign-wrap > .info-wrap{border-top:1px solid #ccc; text-align: center; font-size: 14px; font-weight: bold; margin:20px 0; padding:20px 10px; } #wrap #contents .sign-wrap > .info-wrap > span{vertical-align: middle; } #wrap #contents .sign-wrap > .info-wrap > a{vertical-align: middle; color:#e44131; } /*--- 회원 관련 End ------------------------------------------------------------------------------*/ /*--- 검색 ---------------------------------------------------------------------------------------*/ #wrap #contents .search-form{padding:30px 0; } #wrap #contents .search-form > .title-container{width:450px; margin: 0 auto; text-align: center; } #wrap #contents .search-form > .title-container > .title{font-size: 32px; font-weight: bold; padding:20px 0 30px; } #wrap #contents .search-form > .title-container > .search-box{height:42px; } #wrap #contents .search-form > .title-container > .search-box > input{float: left; width:82%; border:2px solid #e44131; height: 100%; font-size: 16px; font-weight: bold; line-height: 40px; padding:0 10px; } #wrap #contents .search-form > .title-container > .search-box > button{float: left; width:18%; height:100%; border: 0; background-color: #e44131; color:#fff; font-size:15px; font-weight: 600; letter-spacing: 1px; } #wrap #contents .search-form > .search-contents{margin:50px 0 30px; } #wrap #contents .search-form > .search-contents > .nothing{padding:60px 10px 30px; font-size: 16px; font-weight: 600; text-align: center; } #wrap #contents .search-form > .search-contents > .overview{border-bottom:1px solid #000; padding:10px 0; font-size: 20px; font-weight: bold; } #wrap #contents .search-form > .search-contents > .overview > span{color:#e44131; } #wrap #contents .search-form > .search-contents > .list-wrap{display: block; color:inherit; padding:30px 0; border-bottom:1px solid #eee; } #wrap #contents .search-form > .search-contents > .list-wrap > .title{font-size: 16px; font-weight: bold; } #wrap #contents .search-form > .search-contents > .list-wrap > .title > div{display: inline-block; vertical-align: middle; } #wrap #contents .search-form > .search-contents > .list-wrap > .title > span.date{display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 400; color: #999; padding-left:15px; } #wrap #contents .search-form > .search-contents > .list-wrap > .detail{margin-top:10px; color:#555; font-size: 14px; font-weight: 500; line-height: 1.6em; } #wrap #contents .search-form > .top-btn-box{margin:40px 0 0; text-align: right; } /*--- 검색 End -----------------------------------------------------------------------------------*/ /*--- 나의 계정 ----------------------------------------------------------------------------------*/ #wrap #contents .accountSet > .title {text-align: center; padding:70px 0 30px; border-bottom: 1px solid #ccc; } #wrap #contents .accountSet > .title > h1{font-size: 50px;} #wrap #contents .accountSet > .title > h2{font-size: 40px; color:#e44131; } #wrap #contents .accountSet > h2{font-size:25px; margin:40px 0 20px } #wrap #contents .accountSet > .set-box{display: table; width:100%; } #wrap #contents .accountSet > .set-box > div{display: table-cell; vertical-align: top; width:48%; } #wrap #contents .accountSet > .set-box > div.blank{width: 4% } #wrap #contents .accountSet > .set-box > div > .user_img{width:100%; } #wrap #contents .accountSet > .set-box > div > .bundle{padding-bottom:20px; } #wrap #contents .accountSet > .set-box > div > .bundle > h3{font-size: 18px; font-weight: bold; margin-bottom: 10px; } #wrap #contents .accountSet > .set-box > div > .bundle > input[type='text']{border:1px solid #ccc; background-color: #fff; width:100%; height: 45px; line-height: 43px; font-size: 16px; color: #666; padding:0 10px; } #wrap #contents .accountSet > .set-box > div > .link-list > div{padding:0 0 5px 15px; background:url(/_default/images/mypage/icon_arrow.png) no-repeat left center; } #wrap #contents .accountSet > .set-box > div > .link-list > div >a{border-bottom:1px solid #666; color: #666; font-size: 15px; } #wrap #contents .accountSet > .set-box > div > .cancel-box{display: none; background-color: #f1f1f1; margin:5px 0; padding:20px; text-align: center; } #wrap #contents .accountSet > .set-box > div > .cancel-box > p {padding-bottom:15px; font-weight: bold; font-size: 14px; } #wrap #contents .accountSet > .set-box > div > .cancel-box > div{display: table; width:100%;} #wrap #contents .accountSet > .set-box > div > .cancel-box > div > span{display: table-cell; vertical-align: middle; width:49%; } #wrap #contents .accountSet > .set-box > div > .cancel-box > div > span.blank{width:2%; } #wrap #contents .accountSet > .set-box > div > .cancel-box > div > span > button{width:100%; border:1px solid #ccc; background-color: #fff; font-size: 14px; padding:10px; color:#777; font-weight: bold; } #wrap #contents .accountSet > .set-box > div > button{margin-top:15px; border:0; width:100%; padding:12px 15px; background-color: #e44131; color:#fff; font-size: 16px; font-weight: bold; } #wrap #contents .accountSet > .top-btn-box{margin:60px 0 10px; text-align: right; } /*--- 나의 계정 End ------------------------------------------------------------------------------*/ .vlayout{ position: fixed; z-index: 100; top: -2px; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); padding: 80px 100px 0; box-sizing: border-box; } .vlayout > button{ position: absolute; z-index: 10; top: 15px; left: 50%; width: 48px; height: 48px; margin-left: -24px; border: 0; background: url(/_default/images/baseline_close_white_48dp.png) no-repeat center; } /*--- new 에디터 ----------------------------------------------------------------------------------*/ .editor{ /* min-height: 500px; */ /* max-width: 650px; */ max-width: 710px; margin: 0 auto; /* line-height: 1.2; */ line-height: 2.2; font-size: 16px; } /* .editor-text{ margin: 15px 0; } */ .editor-text:after{ content: "\00a0"; } /** * inline tags */ .editor a{ color: #f26122 !important; text-decoration: underline; } .editor a:visited{ color: gray !important; } .editor .inline-code{ background: rgba(250, 239, 240, 0.78); color: #b44437; padding: 3px 4px; margin: 0 1px; font-family: inherit; font-size: 0.86em; font-weight: 500; letter-spacing: 0.3px; } .editor .cdx-marker{ background: #fff0b3; padding: 3px 0; } /** * list */ .editor ol, .editor ul, .editor li{ margin: 0; padding: 0; } .editor ol, .editor ul{ padding-left: 20px; } .editor ol > li{ list-style-type : decimal; margin-left: 15px; } .editor ul > li{ list-style-type : disc; margin-left: 15px; } /** * quote */ .editor blockquote{ padding: 5px 15px; margin: 0; border-left: 5px solid #343434; } /** * delimiter */ .editor-delimiter{ display: block; margin: 30px 0; text-align: center; } .editor-delimiter:before{ content: "***"; display: inline-block; vertical-align: middle; padding-top: 0.5em; font-size: 2em; letter-spacing: 0.2em; } /** * table */ .editor-table{ clear: both; border-collapse: collapse; } .editor-table th, .editor-table td{ padding: 5px 10px; border: 1px solid #ccc; } /** * image */ .editor-image{ display: block; width: 100%; margin: 0; padding: 0; } .editor-image img{ display: block; max-width: 100%; } .editor-image figcaption{ display: block; margin: 0 auto; padding: 10px 15px; background: #f5f5f5; color: #777; font-size: 85%; box-sizing: border-box; } .editor-image.editor-image-border{ border: 1px solid #343434; } .editor-image.editor-image-background{ padding: 30px; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADklEQVQIW2NgQAXGZHAAGioAza6+Hk0AAAAASUVORK5CYII="); box-sizing: border-box; } .editor-image.editor-image-background img, .editor-image.editor-image-background figcaption{ margin: 0 auto; max-width: 80%; } .editor-image.editor-image-background figcaption{ background-color: #fff; } .editor-image.editor-image-stretched { width: 120%; margin-left: -10%; } .editor-image.editor-image-stretched img{ width: 100%; margin: 0 auto; } /** * embed */ .editor-embed{ margin: 0 auto; max-width: 100%; } .editor-embed > div { position: relative; display: block; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; background-color: #ededed; } .editor-embed > div > iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .editor-embed-instagram{ max-width: 400px; border:1px solid #343434; } .editor-embed-instagram > div{padding-bottom: 77%; } /*--- new 에디터 End ------------------------------------------------------------------------------*/