/* base style - start */ /* navigation */ .navbar-fixed-top { background-color: #ffffff; border-bottom: 1px solid #999999; } /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .navbar .nav-justified > .dropdown > a { padding: 30px 0 18px 0; } } /* 상단 1차 메뉴 대표 이미지 영역 styles - start -------------------------------------------------- */ .groupInfo { width: 100%; color: #ffffff; background-size: 100% auto; } .groupInfo > .container { height: 248px; margin: 100px auto 0 auto; padding-right: 0; padding-left: 0; text-align: left; background-color: transparent; position: relative; } .groupInfo > .jumbotron > h1 { margin: 0 0 0 auto; color: #ffffff; font-weight: 700; position: absolute; right: 0; } .groupInfo > .jumbotron > p { margin: 0 0 0 auto; color: #ffffff; font-weight: 700; position: absolute; right: 0; } .groupInfo > .jumbotron > h1 { padding: 0; width: 55%; max-width: 470px; font-size: 2.35em; bottom: 2.165em; } .groupInfo > .jumbotron > p { padding: 0; width: 55%; max-width: 470px; font-size: 2.15em; bottom: 1.065em; word-break: keep-all; } /* 인사말 */ #UserHeader_groupInfo1 { background: url('../images/sub/sub_welcome_top01.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo1 > .jumbotron > h1 {} #UserHeader_groupInfo1 > .jumbotron > p {} /* 연혁 */ #UserHeader_groupInfo2 { background: url('../images/sub/sub_welcome_top02.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo2 > .jumbotron > h1 {} #UserHeader_groupInfo2 > .jumbotron > p {} /* 찾아오시는길 */ #UserHeader_groupInfo3 { background: url('../images/sub/sub_welcome_top03.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo3 > .jumbotron > h1 {} #UserHeader_groupInfo3 > .jumbotron > p {} /* 기본이용수칙 */ #UserHeader_groupInfo4 { background: url('../images/sub/sub_guide_top01.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo4 > .jumbotron > h1 {} #UserHeader_groupInfo4 > .jumbotron > p {} /* 교육시설 */ #UserHeader_groupInfo5 { background: url('../images/sub/sub_guide_top02.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo5 > .jumbotron > h1 {} #UserHeader_groupInfo5 > .jumbotron > p {} /* 숙박시설 */ #UserHeader_groupInfo6 { background: url('../images/sub/sub_guide_top03.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo6 > .jumbotron > h1 {} #UserHeader_groupInfo6 > .jumbotron > p {} /* 부대시설 */ #UserHeader_groupInfo7 { background: url('../images/sub/sub_guide_top04.png') no-repeat top; background-size: cover; } #UserHeader_groupInfo7 > .jumbotron > h1 {} #UserHeader_groupInfo7 > .jumbotron > p {} /* 상단 1차 메뉴 대표 이미지 영역 styles - end -------------------------------------------------- */ #bodySection { background: url('../images/sub/sub_bg_line.png') repeat-x top; } /* 페이지 타이틀 영역 */ #bodySection > .container > .contentArea > .titleSection .table-up { text-align: center; } #bodySection > .container > .contentArea > .titleSection .table-up h4 { color: #000000; font-weight: 700; font-size: 36px; margin: 35px auto 35px auto; } #bodySection > .container > .contentArea > .titleSection .table-list { display:none; } /* 페이지 본문 영역 */ #bodySection > .container > .contentArea > .contentSection { margin-right: 70px; margin-left: 70px; } #bodySection > .container > .contentArea > .contentSection p { word-break: keep-all; text-align: justify; color: #333333; font-weight: 700; font-size: 17px; line-height: 2.3em; margin: 4.12em auto auto auto; } /* [Menu] 연수원 소개 영역 - start -------------------------------------------------- */ /*[page] /about/welcome.aspx*/ #bodySection > .container > .contentArea > .contentSection.welcome .everyone {} #bodySection > .container > .contentArea > .contentSection.welcome .signature { margin-top: auto; text-align: right; } #bodySection > .container > .contentArea > .contentSection.welcome .signature > img { max-width: -webkit-fill-available; } /*[page] /about/welcome.aspx*/ #bodySection > .container > .contentArea > .contentSection.history { margin-top: 40px; margin-bottom: 265px; } #bodySection > .container > .contentArea > .contentSection.history > ul { list-style: none; padding: 0; } #bodySection > .container > .contentArea > .contentSection.history > ul > li { border-bottom: 1px solid #cccccc; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > label { color: #cccccc; font-weight: 700; font-size: 44px; line-height: 1em; margin: 30px 0 24px 0; vertical-align: top; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl { display: inline-block; margin: 0; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl > dt { color: #0075bf; font-weight: 400; font-size: 24px; display: inline-block; vertical-align: top; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl > dd { color: #333333; font-weight: 400; font-size: 18px; display: inline-block; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > label { width: 35%; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl { width: 60%; margin: 30px 0 30px 0; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl > dt { width: 60%; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl > dd { width: 40%; margin-top: 2px; } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl > dt ~ dt { margin-top: 20px } #bodySection > .container > .contentArea > .contentSection.history > ul > li > dl > dd:not(:nth-child(2)) { margin-top: 22px; } /*[page] /about/location.aspx*/ #bodySection > .container > .contentArea > .contentSection.location div { font-size: 17px; line-height: 2.3em; } #bodySection > .container > .contentArea > .contentSection.location .row.map { margin-top: 4.12em; } #daumRoughmapContainer1444106228304 { width: 100%; } /* 지도영역 */ #bodySection > .container > .contentArea > .contentSection.location .row.textinfo { word-break: keep-all; color: #666666; font-weight: 700; margin: 2.50em auto 7.50em auto; padding-bottom: 0.58em; border-bottom: 1px solid #cccccc; } #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(1) { width: 0; height: 2em; overflow: hidden; padding: 0.3em 19px 0 0; } #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(1):before { content:''; background: url('../images/sub/Address.png') no-repeat left; width:19px; height:26px; display: inline-block; } #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(2) { word-break: keep-all; } #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(3) { width: 0; height: 2em; overflow: hidden; padding: 0.3em 22px 0 0; } #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(3):before { content:''; background: url('../images/sub/Phone.png') no-repeat left; width:22px; height:26px; display: inline-block; } #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(4) { word-break: keep-all; } /* [Menu] 연수원 소개 영역 - end -------------------------------------------------- */ /* [Menu] 시설 안내 영역 - start -------------------------------------------------- */ #bodySection > .container > .contentArea > .contentSection.guide_fclt { margin-top: 70px; margin-bottom: 265px; } #bodySection > .container > .contentArea > .contentSection.guide_fclt > ul { list-style: none; padding: 0; } #bodySection > .container > .contentArea > .contentSection.guide_fclt > ul > li {} #bodySection > .container > .contentArea > .contentSection.guide_fclt > ul > li > h5 { color: #666666; font-weight: 700; font-size: 24px; line-height: 1em; margin: 70px 0 24px 0; vertical-align: top; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li > img {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-inner {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-inner > .item {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-control { opacity: 1; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-control.left {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-control.right {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-control .glyphicon-chevron-left:before { content: ""; background: url('../images/sub/left.png') no-repeat left; width:29px; height:62px; display: inline-block; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-control .glyphicon-chevron-right:before { content: ""; background: url('../images/sub/right.png') no-repeat left; width:29px; height:62px; display: inline-block; } /* [Menu] 시설 안내 영역 - end -------------------------------------------------- */ /* base style - end */ /* 반응형 처리 -------------------------------------------------- */ @media (min-width: 768px) { /* [Menu] 시설 안내 영역 - start -------------------------------------------------- */ #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel { max-width: 814px; margin-bottom: 174px; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators { bottom: -124px; left: auto; width: 100%; margin: auto; padding-bottom: 20px; max-height: 130px; overflow-x: overlay; white-space: nowrap; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li { max-width: 19%; width: auto; height: auto; margin: 18px auto auto auto; text-indent: unset; border-width: 0; overflow: hidden; border-radius: unset; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li:first-child { margin-left: 0; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li:last-child { margin-right: 0; } /* [Menu] 시설 안내 영역 - end -------------------------------------------------- */ } @media (min-width: 993px) { /* PC용 최소 폭 */ /* 상단 1차 메뉴 대표 이미지 영역 styles - start -------------------------------------------------- */ .groupInfo {} .groupInfo > .container {} .groupInfo > .jumbotron > h1 { font-size: 36px; bottom: 78px; } .groupInfo > .jumbotron > p { font-size: 30px; bottom: 32px; } /* 상단 1차 메뉴 대표 이미지 영역 styles - end -------------------------------------------------- */ /* [Menu] 연수원 소개 영역 - start -------------------------------------------------- */ /*[page] /about/location.aspx*/ #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(2) { max-width: 510px; } /* [Menu] 연수원 소개 영역 - end -------------------------------------------------- */ /* [Menu] 시설 안내 영역 - start -------------------------------------------------- */ #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel { max-width: 814px; margin-bottom: 174px; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators { bottom: -124px; left: auto; margin: auto; padding-bottom: 20px; max-height: 130px; overflow-x: overlay; white-space: nowrap; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li { max-width: unset; margin: 18px 9px auto 9px; text-align: left; } /* [Menu] 시설 안내 영역 - end -------------------------------------------------- */ } @media (min-width: 1200px) { /* 페이지 본문 영역 */ #bodySection > .container > .contentArea > .contentSection { margin-right: 150px; margin-left: 150px; } /* [Menu] 시설 안내 영역 - start -------------------------------------------------- */ #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators { top: 0; right: 0; bottom: auto; width: 165px; margin-right: -165px; padding-bottom: 0; padding-right: 20px; max-height: 600px; overflow-y: overlay; white-space: unset; text-align: left; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li { margin: auto auto 18px 18px; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li:first-child { margin-left: 18px; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li:last-child { margin-right: auto; } /* [Menu] 시설 안내 영역 - end -------------------------------------------------- */ } @media (min-width: 1450px) { /* [Menu] 시설 안내 영역 - start -------------------------------------------------- */ #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel {} #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators { width: 290px; margin-right: -290px; padding-right: 0; } /* [Menu] 시설 안내 영역 - end -------------------------------------------------- */ } @media all and (min-width: 1900px) { } @media (max-width: 992px) { /* 스마트 폰으로 인정하는 최대 폭 */ /* [Menu] 연수원 소개 영역 - start -------------------------------------------------- */ /*[page] /about/location.aspx*/ #bodySection > .container > .contentArea > .contentSection.location .row.textinfo > div:nth-child(2) { margin-left: -34px; padding-left: 50px; } /* [Menu] 연수원 소개 영역 - end -------------------------------------------------- */ } @media (max-width: 767px) { /*스마트 폰 가로방향*/ /* 상단 1차 메뉴 대표 이미지 영역 styles - start -------------------------------------------------- */ .groupInfo {} .groupInfo > .container { height: 158px; margin-top: 68px; } .groupInfo > .jumbotron > h1 { width: 65%; font-size: 1.7em; bottom: 2.2em; } .groupInfo > .jumbotron > p { width: 65%; font-size: 1.4em; bottom: 1.0em; } /* 상단 1차 메뉴 대표 이미지 영역 styles - end -------------------------------------------------- */ /* 페이지 타이틀 영역 */ #bodySection > .container > .contentArea > .titleSection .table-up h4 { font-size: 36px; margin: 35px auto 35px auto; } /* 페이지 본문 영역 */ #bodySection > .container > .contentArea > .contentSection { margin-right: 25px; margin-left: 25px; } /* [Menu] 연수원 소개 영역 - start -------------------------------------------------- */ /*[page] /about/welcome.aspx*/ #bodySection > .container > .contentArea > .contentSection.history { margin-bottom: 150px; } /*[page] /about/location.aspx*/ #daumRoughmapContainer1444106228304 { max-height: 450px; } /* 지도영역 */ /* [Menu] 연수원 소개 영역 - end -------------------------------------------------- */ /* [Menu] 시설 안내 영역 - start -------------------------------------------------- */ #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel { max-width: 814px; margin-bottom: 174px; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators { bottom: -124px; left: auto; width: 100%; margin: auto; padding-bottom: 20px; max-height: 130px; overflow-x: overlay; white-space: nowrap; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li { max-width: 19%; width: auto; height: auto; margin: 18px auto auto auto; text-indent: unset; border-width: 0; overflow: hidden; border-radius: unset; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li:first-child { margin-left: 0; } #bodySection > .container > .contentArea > .contentSection.guide_fclt .carousel .carousel-indicators > li:last-child { margin-right: 0; } /* [Menu] 시설 안내 영역 - end -------------------------------------------------- */ } @media (max-width: 427px) { /*스마트 폰 세로방향*/ /* 상단 1차 메뉴 대표 이미지 영역 styles - start -------------------------------------------------- */ .groupInfo {} .groupInfo > .container {} .groupInfo > .jumbotron > h1 { width: 80%; font-size: 1.7em; bottom: 2.2em; } .groupInfo > .jumbotron > p { width: 80%; font-size: 1.4em; bottom: 1.0em; } /* 상단 1차 메뉴 대표 이미지 영역 styles - end -------------------------------------------------- */ /* 페이지 타이틀 영역 */ #bodySection > .container > .contentArea > .titleSection .table-up h4 { font-size: 36px; margin: 35px auto 35px auto; } /* 페이지 본문 영역 */ #bodySection > .container > .contentArea > .contentSection { margin-right: 0; margin-left: 0; } } @media (max-width: 375px) { } @media (max-width: 349px) { }