/*공통 해더*/ .beri_header { width: 100%; height: 160px; background: url("../images/beri/beri_01.jpg") no-repeat center right; padding: 0 50px; margin-bottom: 30px;} .beri_header, .beri_header *, #container.beri #contents.fullPage > div > div, #container.beri #contents.fullPage > div > div *, #container.beri #contents .visual_title_m, #container.beri #contents .visual_title_m * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .beri_header:before { display: inline-block; width: 0; height:100%; content: ""; vertical-align: middle;} .beri_header dl { display:inline-block; vertical-align: middle; width: 100%; text-align: left} .beri_header dl dt { margin-bottom: 15px;} .beri_header dl dt span { display: none;} .beri_header dl dd { font-size: 14px; color:#fff; opacity: 0.6;} .beri_header dl dd > span { display: block; text-align: left; line-height: 18px;} /*스크롤 내릴때 addClass*/ #container.beri #contents .visual_title_m.header_scroll { width: 100%; position: fixed; top:85px; left: 0; z-index:100; background: #fff;} #container.beri #contents.fullPage > div.header_scroll { margin-top: 210px;} .beri #header .sitemap, .beri #header .search{top:55px;} /*타이틀 불릿 공통 + nav*/ #container.beri #contents .visual_title { position: relative; padding-left: 17px;} #container.beri #contents .visual_title:after { display: block; content: ""; width: 13px; height: 8px; position: absolute; top:7px; left:0; background: url("../images/beri/beri_03.png")no-repeat;} #container.beri #contents .visual_title .beri_nav { display: inline-block; position: absolute; top:0; right: 0;} #container.beri #contents .visual_title .beri_nav span { display: inline-block; color:#888; font-size: 12px; position: relative; padding-right:8px;} #container.beri #contents .visual_title .beri_nav span img { display:inline-block; width: 13px; height: 13px; margin-top: 3px; padding-right: 3px;} #container.beri #contents .visual_title .beri_nav span:after { display: block; content: ""; width: 3px; height:5px; position: absolute; top:7px; right:0; background: url("../images/beri/beri_04.png")no-repeat;} #container.beri #contents .visual_title .beri_nav .beri_nav_last { color:#333; padding-right: 0} #container.beri #contents .visual_title .beri_nav .beri_nav_last:after {display: none;} #container.beri #contents .visual_title_m { display: none;} .visual_title_m > ul { width: 100%; height:50px; border-bottom: 1px solid #ced2d7; } .visual_title_m > ul > li.beri_menu { width:50%; height: 100%; float:left; text-align: left; position: relative; } .visual_title_m > ul > li.beri_menu:first-child:after { display: block; content:""; width: 1px; height: 100%; background: #ced2d7; position: absolute; top:0; right:-1px;} .visual_title_m .beri_menu .menu_go { display: block; width:100%; height: 100%; padding-left: 10px;line-height:48px; position: relative; font-size: 16px; color:#444;} .visual_title_m .beri_menu .menu_go > span { display: block; width:18px; height: 100%; position: absolute; top:0; right:10px; background: url("../images/beri/beri_07.svg") no-repeat center; background-size: 15px 10px;} .visual_title_m .beri_menu .menu_go > span.reverse { background: url("../images/beri/beri_07_2.svg") no-repeat center; background-size: 15px 10px;} .visual_title_m .beri_menu ul { width: 100%; position: absolute; top:50px; left: 0; display: none; z-index: 50 } .visual_title_m .beri_menu ul li { background: #f7f7f7; height:50px; border-bottom:1px solid #ced2d7; border-left: 1px solid #ced2d7; } .visual_title_m > ul > li.beri_menu:first-child ul li { border-left: 0 none; } .visual_title_m > ul > li.beri_menu:first-child ul li:after { display: block; content:""; width: 1px; height: 100%; background: #ced2d7; position: absolute; top:0; right:-1px;} .visual_title_m .beri_menu ul li a { display: block; height: 100%; line-height: 48px; padding-left: 10px; font-size: 16px; color:#444;} #container.beri #contents.fullPage > div > h4 { display: none;} #container.beri #contents.fullPage > div > p { font-size: 13px; margin-top: 26px; } #container.beri #contents.fullPage > div > p span { display: block; line-height: 18px; color:#888;} @media screen and (max-width: 1120px){ #container.beri #contents.fullPage .side_depth {float: right; display: block; width: 20%;} #container.beri #contents.fullPage > div {float: right; width: 80%;} } @media screen and (max-width: 900px){ #container.beri #contents.fullPage .side_depth {float: none; display: none;} #container.beri #contents.fullPage > div {float: none; width: 100%; text-align: center} #container.beri #contents.fullPage > div div { text-align: left} #container.beri #contents.fullPage > div div.bery_con_img, #container.beri #contents.fullPage > div div .paging{ text-align: center;} .beri_header { margin-bottom: 0; padding: 0 20px; background: url("../images/beri/beri_01_3.jpg") no-repeat center right; background-size: 900px 160px; } .beri_header dl dt { margin-bottom: 10px; margin-top: 2px;} .beri_header dl dt img { display: none;} .beri_header dl dt span { display: block; font-size: 30px; color:#fff; font-weight: bold; } .beri_header dl dd { opacity: 0.8;} .beri_header dl dd > span { line-height: 20px;} .beri_header dl dd > span:nth-child(2) { display: none;} #container.beri #contents .visual_title { display: none;} #container.beri #contents .visual_title_m { display: block;} #container.beri #contents.fullPage > div > h4 {display: inline-block; position:relative; font-size:22px; color:#333; font-weight: bold; padding: 30px 0; line-height: 1; } #container.beri #contents.fullPage > div > h4:after { display: block; content: ""; width: 36px; height: 1px; background: #9fa2a6; position:absolute; bottom:0; left:50%; margin-left:-18px; } #container.beri #contents.fullPage > div > p { /*padding:0 20px;*/ display: none;} #container.beri #contents .view_con { overflow: auto;} } @media screen and (max-width: 600px){ .beri_header dl dd > span:nth-child(1) { display: none;} .beri_header dl dd > span:nth-child(3) span{ display: block;} } /*양옆 간격*/ #container.beri #contents.fullPage > div > div.beri_1_2_con { padding:0 50px;} .bery_con_img { width: 100%; text-align: center; margin-top:50px;} .bery_con_img.multi .m900{ display: none;} .bery_con_img span { display: block; font-size: 16px; line-height: 30px; font-weight: bold; color:#444; } @media screen and (max-width: 900px){ #container.beri #contents.fullPage > div > div { padding:0 50px;} .bery_con_img.multi .pc{ display: none;} .bery_con_img.multi .m900{ display: inline-block;} .bery_con_img { width: 100%; text-align: center; margin-top:40px;} .bery_con_img span { display: none;} } @media screen and (max-width: 640px){ #container.beri #contents.fullPage > div > div { padding:0 10px;} #container.beri #contents.fullPage > div > div.beri_1_2_con { padding:0 10px;} .bery_con_img { width: 100%; text-align: center; margin-top:30px;} } /*개별설정*/ /*1_2*/ .beri_1_2 .beri_1_2_con { margin-top: 40px; position: relative;} .beri_1_2 .beri_1_2_con p { margin-bottom: 30px; line-height: 24px; word-break: keep-all; padding-right: 250px; z-index: 10; position: relative; color:#888; font-size: 14px;} .beri_1_2 .beri_1_2_con p span { display: block; } .beri_1_2 .beri_1_2_con > img { width: 300px; display: inline-block; position: absolute; top:0; right: 0;} @media screen and (max-width: 900px){ .beri_1_2 .beri_1_2_con p { text-align: left;} #container.beri #contents.fullPage > div > div.beri_1_2_con { text-align: center;} #container.beri #contents.fullPage > div > div.beri_1_3_con { padding:0 10px;} } @media screen and (max-width: 640px){ .beri_1_2 .beri_1_2_con { margin-top: 25px;} .beri_1_2 .beri_1_2_con p { color:#666; padding-right: 0; margin-bottom: 20px; word-break:break-all} .beri_1_2 .beri_1_2_con > img { position: static; } } /*1_3*/ .beri_1_3_con #history_tab { width:100%; margin-top:30px; } .beri_1_3_con #history_tab .tabs { height:50px; font-size:12px; text-align: center; border:1px solid #ced2d7;} .beri_1_3_con #history_tab .tabs li { display:block; width: 33.3333%; height:100%; float: left; cursor: pointer; line-height: 50px; position: relative; border-left: 1px solid #ced2d7; font-size: 15px; color:#999; } .beri_1_3_con #history_tab .tabs li:first-child { border-left: 0 none;} .beri_1_3_con #history_tab .tabs li:hover { color:#333;} .beri_1_3_con #history_tab .tabs li.active { background: #f7f7f7; color:#333; font-weight: bold; } .beri_1_3_con #history_tab .tab_container { width:100%;} .beri_1_3_con #history_tab .tab_container .tab_content { padding: 50px 0; position: relative; } .beri_1_3_con #history_tab .tab_container .tab_content:after{ content:""; display:block; clear:both; } .history_text { width: 67%; float:left} .history_text ul { width: 100%; padding-right: 30px; position: relative;} .history_text ul:after { display: block; content: ""; width: 1px; height: 100%; background: #ced2d7; position: absolute; top:5px; left: 103px;} .history_text ul li { width: 100%; padding-bottom: 110px; position: relative;} .history_text ul li:before { display: block; content: ""; width:17px; height:17px; background: #247acd; position: absolute; top:5px; left: 95px; border-radius: 50%; z-index: 1} .history_text ul li:after { display: block; content: ""; width:7px; height:7px; background: #fff; position: absolute; top:10px; left: 100px; border-radius: 50%; z-index: 1} .history_text ul li p { display: inline-block; font-size:32px; color:#247acd; position: absolute; top: -5px; left: 0; font-family: 'malgun gothic' !important;} .history_text ul li dl { padding-left:150px; position: relative; } .history_text ul li dl dt { width:35px; position: absolute; top:3px; left:150px; font-size: 14px; color:#000; font-family: 'malgun gothic' !important; } .history_text ul li dl dd { padding-left: 35px; } .history_text ul li dl dd * { display: block; font-size: 14px; color:#666; line-height: 22px; margin:8px 0; } .history_text ul li dl dd a {display: inline; position: relative;} .history_text ul li dl dd a:hover { color:#247acd} .history_text ul li dl dd a span { display: inline-block; width: 13px; height: 13px; margin-top:4px; margin-left: 5px; margin-bottom: -3px; background: url("../images/beri/beri_10.svg")no-repeat; background-size: 13px;} .history_text ul li dl dd a:hover span {background: url("../images/beri/beri_10_2.svg")no-repeat; background-size: 13px;} .history_img { width:33%; float:right} .history_img ul { width: 100%; height: auto} .history_img ul li { margin-bottom:50px } .history_img ul li > a { display: block; height: 100%;} .history_img ul li > a:hover span { color:#333; } .history_img ul li .history_thumb { display: block; position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; margin-top: 0;} .history_img ul li .history_thumb img {display: block; position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; min-width: 100%; } .history_img ul li .history_thumb.long { padding-bottom:0; height: auto;} .history_img ul li .history_thumb.long img {position: static; max-height:400px; height: auto} .history_img ul li span { display: block; font-size: 13px; color:#999; text-align: right; margin-top: 10px; word-break: keep-all;} @media screen and (max-width: 900px){ .beri_1_3_con #history_tab .tabs li:hover { color:#999;} .beri_1_3_con #history_tab .tabs li.active:hover { color:#333;} .history_text { width: 100%; float:none; text-align: left; padding:0 5px;} .company .history_text { padding:0 15px;} .history_text ul { padding-right:0; } .history_text ul li { padding-bottom: 50px;} .history_text ul li dl dd a:hover { color:#666;} .history_text ul li dl dd a:hover span {background: url("../images/beri/beri_10.svg")no-repeat; background-size: 13px;} .history_img { display: none; float:none;} .history_img ul li > a:hover span { color:#999; } .beri_1_3_con #history_tab .tab_container .tab_content { padding: 20px 0; } } @media screen and (max-width: 560px){ .history_text ul:after { top:5px; left: 67px;} .history_text ul li:before { top:5px; left: 59px; } .history_text ul li:after { top:10px; left: 64px; } .history_text ul li p { font-size:24px; top: -3px;} .history_text ul li dl { padding-left:75px; } .history_text ul li dl dt { top:3px; left:88px; } .history_text ul li dl dd { padding-left:37px; } } /*2_1*/ @media screen and (max-width: 900px){ .beri_2_1 .bery_con_img { margin-top: 25px;} .beri_2_1 .bery_con_img span { line-height: 18px; color:#888; font-size: 13px; font-weight: normal;} } /*게시판 beri 전용*/ #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(1){ width: 50px;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(2){ width: 140px;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(3){ width: auto;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(4){ width: 140px;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(5){ width: 120px;} #container.beri #contents .beri_3_1 .list_wrap, #container.beri #contents .beri_2_1 .list_wrap, #container.beri #contents .beri_3_3 .list_wrap, #container.beri #contents .beri_4_1 .list_wrap{ margin-top:20px} #container.beri #contents .beri_2_1 .list_wrap.berivisual2_1 { margin-top: -50px;} #container.beri #contents .beri_3_3 .list_wrap table.type03 td:nth-child(3) span { display:inline-block; width: 43px; color:#fff; font-size: 12px;} #container.beri #contents .beri_3_3 .list_wrap table.type03 td:nth-child(3) .ing { background:#247acd; border:1px solid #155899 } #container.beri #contents .beri_3_3 .list_wrap table.type03 td:nth-child(3) .end { background:#8d8d8d; border:1px solid #717171;} @media screen and (max-width: 900px){ #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(3){ width: auto;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(5){ width: 90px;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(4), #container.beri #contents .beri_2_1 .list_wrap table.type03 td:nth-child(4), #container.beri #contents .beri_3_1 .list_wrap table.type03 th:nth-child(3), #container.beri #contents .beri_3_1 .list_wrap table.type03 td:nth-child(3), #container.beri #contents .beri_3_2 .list_wrap table.type03 th:nth-child(4), #container.beri #contents .beri_3_2 .list_wrap table.type03 td:nth-child(4), #container.beri #contents .beri_3_2 .list_wrap table.type03 th:nth-child(5), #container.beri #contents .beri_3_2 .list_wrap table.type03 td:nth-child(5), #container.beri #contents .beri_3_2 .list_wrap table.type03 th:nth-child(6), #container.beri #contents .beri_3_2 .list_wrap table.type03 td:nth-child(6), #container.beri #contents .beri_3_3 .list_wrap table.type03 th:nth-child(4), #container.beri #contents .beri_3_3 .list_wrap table.type03 td:nth-child(4), #container.beri #contents .beri_3_3 .list_wrap table.type03 th:nth-child(5), #container.beri #contents .beri_3_3 .list_wrap table.type03 td:nth-child(5), #container.beri #contents .list_wrap table.type03 .none900 { display: none;} #container.beri #contents .beri_3_1 .list_wrap, #container.beri #contents .beri_2_1 .list_wrap, #container.beri #contents .beri_4_1 .list_wrap, #container.beri #contents .beri_3_3 .list_wrap, #container.beri #contents .beri_2_1 .list_wrap.berivisual2_1 { margin-top:30px;} } @media screen and (max-width: 640px){ #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(2), #container.beri #contents .beri_2_1 .list_wrap table.type03 td:nth-child(2), #container.beri #contents .list_wrap table.type03 .none640 { display: none;} #container.beri #contents .beri_2_1 .list_wrap table.type03 th:nth-child(2){ width: 120px;} #container.beri #contents .beri_3_2 .list_wrap table.type03 th:nth-child(3), #container.beri #contents .beri_3_2 .list_wrap table.type03 td:nth-child(3){ width:90px } } .search_no { margin-top: 30px; text-align: center; padding-top: 20px; padding-bottom: 50px; } .search_no h5{ font-size: 18px; color:#333; padding-bottom: 30px; border-bottom: 1px solid #dadada; margin-bottom: 30px;} .search_no h5 span { color:#247acd; letter-spacing: 1;} .search_no ul { display: inline-block; padding-left: 10px;} .search_no li { font-size:13px; display: block; text-align: left; line-height: 26px; position: relative;} .search_no li.dot:after { display: block; content: ""; width:3px; height:3px; position: absolute; top:12px; left:-8px; background: #247acd; border-radius: 50%;} .search_no li.no_email { color:#333; line-height: 16px;} .search_no li.no_email img { margin:3px 3px 0 0;} @media screen and (max-width:900px){ .search_no { padding-top: 0; padding-bottom: 30px; } .search_no h5{ padding-bottom: 22px; text-align: center} .search_no li { font-size:14px; line-height: 18px; margin-top: 8px; } .search_no li.dot:after { top:7px;} .search_no li.no_email img { margin:4px 3px 0 0;} } @media screen and (max-width:520px){ .search_no h5{ font-size: 16px;padding-bottom:20px; margin-bottom: 20px; } }