@charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); /* 초기화 */ html {overflow-y:scroll} body{margin:0;padding:0;font-size:0.75em; font-family:'Nanum Gothic', '맑은 고딕','Malgun Gothic', dotum, 굴림, Gulim, 'Helvetica Neue', Helvetica, Arial, sans-serif} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Nanum Gothic', '맑은 고딕','Malgun Gothic', dotum, 굴림, Gulim, 'Helvetica Neue', Helvetica, Arial, sans-serif;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} ul, li, dl, dt, dd {padding:0; margin:0;} #hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle} input, button {margin:0;padding:0;font-family:'Nanum Gothic', '맑은 고딕','Malgun Gothic', dotum, 굴림, Gulim, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:1em} button {cursor:pointer} textarea, select {font-family:'Nanum Gothic', '맑은 고딕','Malgun Gothic', dotum, 굴림, Gulim, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-word} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a:link, a:visited {color:#000;text-decoration:none} a:hover, a:focus, a:active {color:#000;text-decoration:underline} /* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;width:auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops_con {} .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right} .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff} /* 상단 레이아웃 */ #hd {z-index:4;position:relative;min-width:970px;background:#fff} .hd_zindex {z-index:10 !important} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {position:relative;margin:0 auto;padding:26px 0;width:970px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #logo {float:left;padding:5px 0 0} /* 전체 검색 */ #hd_sch {float:left;margin:0 0 0 20px;padding:0;border:1px solid #c3c6ca} #hd_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} #hd_sch #sch_stx {padding-left:5px;width:110px;height:24px;border:0;background:#fff;line-height:1.9em !important;line-height:1.6em} #hd_sch #sch_submit {padding:0 5px;height:26px;border:0;background:#e2e6eb;color:#333;cursor:pointer} /* 텍스트 크기 조절 */ #text_size {float:left;margin:0 0 0 10px;letter-spacing:-3px} #text_size button {margin:0;padding:1px 2px;border:1px solid #c3c6ca;background:transparent;vertical-align:middle;cursor:pointer} .ts_up {font-size:1.167em !important} .ts_up2 {font-size:1.3em !important} /* 상단 회원가입 등 링크 */ #tnb {float:right;margin:0;padding:0;list-style:none;zoom:1} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #tnb li {float:left;margin:0 0 0 10px} #tnb a {display:inline-block;padding:0 10px;height:28px;color:#333;letter-spacing:-0.1em;line-height:2.4em} #tnb a:focus, #tnb a:hover, #tnb a:active {text-decoration:none} #tnb img {margin-right:3px} /* 메인메뉴 */ #gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7} #gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1} #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""} .gnb_1dli {z-index:10;position:relative;float:left} .gnb_1da {display:inline-block;padding:0 40px 0 10px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none} .gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none} .gnb_1dli_air .gnb_1da {background-color:#333;color:#fff} .gnb_1dli_on .gnb_1da {background-color:#333;color:#fff} .gnb_2dul {display:none;position:absolute;top:35px;width:180px} .gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none} .gnb_1dli_air .gnb_2da {background-color:#333;color:#fff} .gnb_1dli_on .gnb_2da {background-color:#333;color:#fff} .gnb_2da:focus, .gnb_2da:hover {background:#666;text-decoration:none} .gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff} .gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff} #gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em} #gnb_empty a {text-decoration:underline} /* 중간 레이아웃 */ #wrapper {z-index:5;margin:0 auto;width:970px;border-right:1px solid #dde4e9;border-left:1px solid #dde4e9;zoom:1} #wrapper:after {display:block;visibility:hidden;clear:both;content:""} #aside {float:right;margin:0 0 0 -1px;width:210px;border-left:1px solid #dde4e9;background:#fff} #container {z-index:4;position:relative;float:left;padding:15px 16px 15px 15px;width:728px;min-height:500px;height:auto !important;height:500px;border-right:1px solid #dde4e9;font-size:1em;zoom:1} #container:after {display:block;visibility:hidden;clear:both;content:""} #container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold} /* 하단 레이아웃 */ #ft {min-width:970px;border-top:1px solid #dde4e9;background:#f2f5f9} #ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #ft p {margin:0;padding:10px 0;line-height:1.8em} #ft_catch {position:relative;margin:0 auto;padding:20px 0 0;width:970px;text-align:center} #ft_company {text-align:center} #ft_copy {background:#414141} #ft_copy div {position:relative;margin:0 auto;padding:10px 0;width:970px;color:#fff} #ft_copy a {display:inline-block;margin:0 10px 0 0;color:inherit} #ft_copy #ft_totop {position:absolute;top:10px;right:0} /* 게시물 선택복사 선택이동 */ #copymove {} .copymove_current {float:right;color:#ff3061} .copymove_currentbg {background:#f4f4f4} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* ie6 이미지 너비 지정 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;} #captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {position:absolute;top:0;left:161px;;margin:0;padding:0;width:31px;height:31px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer} #captcha #captcha_mp3 span {position:absolute;top:0;left:0;width:31px;height:31px;background:url('../../../img/captcha.png') no-repeat;} #captcha #captcha_reload {position:absolute;top:31px;left:161px;margin:0;padding:0;width:31px;height:31px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha.png') no-repeat 0 -30px;border-top:1px solid #ccc;text-indent:-999px} #captcha #captcha_key {margin:0 0 0 33px;padding:0 5px;width:70px;height:60px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:2.8em;vertical-align:top} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* 캡챠 자동등록(입력)방지 기본 - mobile */ #captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px} #captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block;} #captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:31px;height:31px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha.png') no-repeat 0 -30px;text-indent:-999px} #captcha.m_captcha #captcha_reload span{display:none;} #captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px} #captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} #captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../../img/captcha.png') no-repeat; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none} /* ckeditor 단축키 */ .cke_sc {margin:0 0 5px;text-align:right} .btn_cke_sc{display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer} .cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center} .cke_sc_def dl{margin:0 0 5px;text-align:left;zoom:1} .cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} .cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9} .cke_sc_def dt {width:20%;font-weight:bold} .cke_sc_def dd {width:30%} /* 버튼 */ a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm {text-align:center} /* 서식단계 진행 */ .btn_submit {padding:8px;border:0;background:#ff3061;color:#fff;letter-spacing:-0.1em;cursor:pointer} fieldset .btn_submit {padding:0 7px;height:24px;line-height:1em} a.btn_cancel {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} button.btn_cancel {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;vertical-align:top;text-decoration:none} a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;height:24px;border:0;background:#333;color:#fff;letter-spacing:-0.1em;text-decoration:none;vertical-align:top} /* 우편Number검색버튼 등 */ a.btn_frmline {line-height:24px} button.btn_frmline {font-size:1em} /* 게시판용 버튼 */ a.btn_b01 {display:inline-block;padding:7px;border:1px solid #d9ded9;background:#f2f5f9;color:#000;text-decoration:none;vertical-align:middle} a.btn_b01:focus, .btn_b01:hover {text-decoration:none} a.btn_b02 {display:inline-block;padding:7px 7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn_b02:focus, .btn_b02:hover {text-decoration:none} a.btn_admin {display:inline-block;padding:7px;border:1px solid #e8180c;background:#e8180c;color:#fff;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ a.btn_admin:focus, a.btn_admin:hover {text-decoration:none} /* 댓글 스타일 */ .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold} /* 기본테이블 */ .tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0; border-top:2px solid #bb9c00;} .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} .tbl_head01 {margin:0 auto 10px; max-width:1100px; } .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head01 thead th {padding:12px 0;border-top:2px solid #bb9c00;border-bottom:1px solid #bb9c00;background:#f6f6f6;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head01 thead a {color:#383838} .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 List 사용시 체크박스 라인 깨짐 */ .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head01 tbody th {padding:8px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9} .tbl_head01 td {padding:8px 5px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;line-height:1.5em;word-break:break-all} .tbl_head01 a {} .tbl_head02 {margin:0 0 10px} .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head02 thead th {padding:5px 0; border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head02 thead a {color:#383838} .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 List 사용시 체크박스 라인 깨짐 */ .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9} .tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;line-height:1.4em;word-break:break-all} .tbl_head02 a {} /* 폼 테이블 */ .tbl_frm01 {margin:20px 0 20px} .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_frm01 th {width:10%; padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left} .tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} .tbl_frm01 textarea, .frm_input {border:1px solid #e4eaec;background:#f7f7f7;color:#000;vertical-align:middle;line-height:2em} .tbl_frm01 textarea {padding:2px 2px 3px} .frm_input {height:22px} .tbl_frm01 textarea {width:98%;height:100px} .tbl_frm01 a {text-decoration:none} .tbl_frm01 .frm_file {display:block;margin-bottom:5px} .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em} /* 자료 없는 List */ .empty_table {padding:50px 0 !important;text-align:center} .empty_list {padding:20px 0 !important;text-align:center} /* 필수입력 */ .required, textarea.required {background-image:url('../img/wrest.gif')!important; background-position:top right!important; background-repeat:no-repeat !important} /* 테이블 항목별 정의 */ .td_board {width:120px;text-align:center} .td_category {width:80px;text-align:center} .td_chk {width:30px;text-align:center} .td_date {width:60px;text-align:center} .td_datetime {width:110px;text-align:center} .td_group {width:100px;text-align:center} .td_mb_id {width:100px;text-align:center} .td_mng {width:80px;text-align:center} .td_name {width:100px;text-align:left} .td_nick {width:100px;text-align:center} .td_num {width:50px;text-align:center} .td_numbig {width:80px;text-align:center} .td_stat {width:60px;text-align:center} .txt_active {color:#5d910b} .txt_done {color:#e8180c} .txt_expired {color:#ccc} .txt_rdy {color:#8abc2a} /* 새창 기본 스타일 */ .new_win {} .new_win .tbl_wrap {margin:0 20px} .new_win #win_title {margin:0 0 20px;padding:20px;border-top:3px solid #333;border-bottom:1px solid #dde4e9;background:#fff;font-size:1.2em} .new_win #win_title .sv {font-size:0.75em;line-height:1.2em} .new_win .win_ul {margin:-20px 0 20px 0;padding:0 20px;border-bottom:1px solid #455255;background:#484848;list-style:none;zoom:1} .new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_ul li {float:left;margin-left:-1px} .new_win .win_ul a {display:block;padding:10px 10px 8px;border-right:1px solid #455255;border-left:1px solid #455255;color:#fff;font-family:微软雅黑, simsun, Arial, sans-serif;font-weight:bold;text-decoration:none} .new_win .win_desc {padding:20px} .new_win .win_btn {clear:both;padding:20px;text-align:center} /* 새창용 */ .new_win .win_btn button {display:inline-block;padding:0 10px;height:30px;border:0;background:#4b545e;color:#fff;line-height:2em;cursor:pointer} .new_win .win_btn input {padding:0 10px;height:30px;line-height:2em} .new_win .win_btn a {display:inline-block;padding:0 10px;height:30px;background:#4b545e;color:#fff;vertical-align:middle;line-height:2.4em} .new_win .win_btn a:focus, .new_win .win_btn a:hover {text-decoration:none} /* 검색결과 색상 */ .sch_word {color:#ff3061} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 사이드뷰 */ .sv_wrap {display:inline-block;position:relative;font-weight:normal} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #283646} .sv_wrap .sv a {display:inline-block;margin:0;padding:3px;width:94px;border-bottom:1px solid #283646;background:#111;color:#fff !important} .sv_wrap a:focus, .sv_wrap a:hover, .sv_wrap a:active {text-decoration:none} .sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 페이징 */ .pg_wrap {clear:both;margin:0 0 20px;padding:20px 0 0;text-align:center} .pg {} .pg_page, .pg_current {display:inline-block;padding:0 8px;height:25px;color:#000;letter-spacing:0;line-height:2.2em;vertical-align:middle} .pg a:focus, .pg a:hover {text-decoration:none} .pg_page {background:#e4eaec;text-decoration:none} .pg_start, .pg_prev {/* 이전 */} .pg_end, .pg_next {/* 다음 */} .pg_current {display:inline-block;margin:0 4px 0 0;background:#333;color:#fff;font-weight:normal} /* Mobile화면으로 */ #device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center} /* css 오버라이드 */ body {width:100%;} #wrapper {width:100%; border:0; background:#f6f6f6} #container {float:none; width:100%; border:0; padding:0 0 80px; width:100%; margin:0 auto;} #aside {display:none;} #ctt {border:0; margin:0; padding:0;} a.btn_admin {position:absolute; top:0; right:0;} /* common */ a:hover, a:link, a:visited {text-decoration:none;} .clearFix { *zoom:1; } .clearFix:after { content:''; display:block; clear:both; } .displayNone {display:none;} .inner_area {width:100%; max-width:1100px; margin:0 auto; box-sizing:border-box} .ta_c {text-align:center;} .ta_l {text-align:left;} .ta_r {text-align:right;} .fc_6f5e06 {color:#6f5e06}/* 서브타이틀 컬러 */ .fc_ceac00 {color:#ceac00} /* 골드 */ .fc_004c55 {color:#004c55} /* 청록 */ .fc_9d2e1f {color:#9d2e1f} /* 빨강 */ .fs_17 {font-size:17px;} .mb_15 {margin-bottom:15px;} .deskhide {display:none;} .mobileshow{ display: none;} .tabletshow { display: none;} /* ================================================================== header ------------------------------------------------------------------ */ #header {position:relative; z-index:10; background: #162108} #header #header_wrapper {position:relative; border-bottom:2px solid #354521; padding:27px 0;} #header #header_wrapper .top_section {position:absolute; z-index:1; width:100%;} #header #header_wrapper h1 {position:relative; z-index:2; width:235px; margin:0 auto;} #header #header_wrapper .left_section {float:left; padding-top:21px;} #header #header_wrapper .left_section a {display:inline-block; padding-right:4px; color:#fff} #header #header_wrapper .left_section a img {position:relative; top:-1px;} #header #header_wrapper .right_section {float:right;padding-top:21px;} #header #header_wrapper .right_section a {display:inline-block; padding-left:4px; color:#fff} #header #header_wrapper .right_section a img {position:relative; top:-1px;} #header #gnb_area {background: #162108} #header #gnb_area .gnb {overflow:hidden; display:block;} #header #gnb_area .gnb > ul {width:122%; padding:0; margin:0 0 0 -11%;} #header #gnb_area .gnb > ul > li {float:left; width:25%; padding:0; margin:0; text-align:center;} #header #gnb_area .gnb > ul > li:first-child {margin-left:0} #header #gnb_area .gnb > ul > li > a {color:#fff; line-height:48px; font-size:16px; font-weight:400; } #header #gnb_area .gnb > ul > li > a:hover {color:#c8ac00;text-decoration:none;} #header #gnb_area .gnb > ul > li .dep2 {display:none;} #header #gnb_area .mobile_gnb {display:none!important; width:75%; position:absolute; top:118px; right:0px; z-index:100;background: #162108; height:700px;} #header #gnb_area .mobile_gnb.show {display:block!important;} #header #gnb_area .mobile_gnb > ul {width:100%; margin:0;} #header #gnb_area .mobile_gnb > ul > li {width:100%; border-bottom:1px solid #354521; text-align:left; text-indent:10px; } #header #gnb_area .mobile_gnb > ul > li span {display:block;color:#fff; line-height:48px; font-size:16px; font-weight:bold;} #header #gnb_area .mobile_gnb > ul > li span.current {color:#c8ac00} #header #gnb_area .mobile_gnb > ul > li > .dep2 {display:none; background: #9a9f93} #header #gnb_area .mobile_gnb > ul > li > .dep2 li a {display:block; padding:0.8em 0; font-size:14px; color:#3f433a} .mask.block {position:fixed; top:0; left:0; width:100%; height:100%; background: #000; opacity: 0.5;z-index:5;overflow:hidden;} /* ================================================================== footer ------------------------------------------------------------------ */ #footer {position:relative;} #footer .fixTop {display:none} #footer .top_section {padding: 18px 0; background: #353934;} #footer .top_section .com {display:inline-block; width:37.527%; border-right:1px solid #494e51; box-sizing:border-box;vertical-align: top;} #footer .top_section .manager {display:inline-block; width:37.527%;padding-left:3.5%;border-right:1px solid #494e51; box-sizing:border-box;vertical-align: top;} #footer .top_section p {display:inline-block; padding-right:22px; vertical-align:top; color:#ffffff; font-size:13px; line-height:1.4em;} #footer .top_section a {display:inline-block; vertical-align:top; color:#fff; border:1px solid #626d65; padding: .7em 1.4em; background: #454742; font-size: 13px; text-align: center;} #footer .top_section p span {font-size:12px; color:#b8b8b8;} #footer .copy_area {padding:28px 0; text-align:center;} #footer .copy_area p {color:#373737} #footer .copy_area p:first-child {margin-bottom:19px; font-weight:bold;} #footer .copy_area p:last-child {padding-top:10px;} #footer .top_section .sns {display:inline-block; padding-left:3.5%;vertical-align: top;} #footer .top_section .sns a {background:#2c2e2b} #footer .top_section .sns a.gotop {border:0; padding:0; margin-left:13px;} #footer .footer_meu {display:none} #footer .footer_meu ul {font-size:0; padding:0; margin:0;} #footer .footer_meu ul li {display: inline-block;width: 33.33333333%;margin-top: -1px; border: 1px solid #c2c2c2; margin-left: -1px; margin-right: -1px; text-align: center; white-space: nowrap;} #footer .footer_meu ul li a {display: block; height: 33px; padding: 0 9px; line-height: 35px; font-size:13px; color: #585858; background-color: #fff; letter-spacing: 0;} @media all and (min-width:1201px){ .deskhide {display:none !important;} .deskshow { display: block!important;} .mobileshow{ display: none!important;} .tabletshow { display: none!important;} } @media all and (max-width:1060px){ #footer .fixTop {display:block; position:fixed; bottom:20px; right:20px;z-index:10;} #footer .top_section .com {width:48%;padding-left:1.5%;} #footer .top_section .manager {width:50%;padding-left:1.5%; border-right:0} #footer .top_section p {width: 59%; padding-right:10px;} #footer .top_section .manager p {width:60%;} #footer .top_section a {padding:0.7em 0.5em;} #footer .top_section .sns {display:none; width: 7%;padding:0; text-align:center;} #footer .top_section .sns .face_book {display:block; width:30px; height:30px; padding:0; margin:0 auto;} #footer .top_section .sns .face_book span {display:none;} #footer .top_section .sns .gotop {position:absolute; top:-50px; z-index: 10;} } @media all and (max-width:999px) { .deskhide {display:block !important;} .deskshow { display: none!important;} .mobileshow{ display: none!important;} .tabletshow { display: block!important;} #footer .top_section .com {width:45%;padding-left:0.5%;} #footer .top_section .manager {width:53%;padding-left:0.5%; border-right:0} #footer .top_section p {width: 59%; padding-right:10px;} #footer .top_section a{ padding: 0.7em 0.4em;} } @media (max-width: 767px){ #container {padding-bottom:30px;} #header #header_wrapper .right_section a span {display:none;} #footer {border-top:1px solid #d0d0d0; padding:10px;} #footer .top_section {display:none;} #footer .footer_meu {display:block} } @media all and (max-width:640px) { /*모바일 */ .deskhide {display:block !important;} .mobilehide {display:none !important;} .deskshow { display: none!important;} .mobileshow{ display: block!important;} .tabletshow { display: none!important;} #container {padding-bottom:30px;} #header {background: none;} #header #header_wrapper {background: #162108; overflow:hidden; width:100%;} #header #header_wrapper {padding:0;} #header #header_wrapper .top_section {position:relative; padding:5px 0; height:20px; border-bottom:1px solid #354521;} #header #header_wrapper .top_section .right_section {padding:3px 5px 0 0;} #header #header_wrapper .top_section .right_section img {width: 17px;} #header #header_wrapper .logo_section {position:relative; } #header #header_wrapper h1 {width:auto; margin:0 auto; height:85px; padding:20px 0; box-sizing:border-box; text-align:center;} #header #header_wrapper h1 img {height:45px;} #header #header_wrapper .mobile_menu_btn {position:absolute; top:50%; right:10px; z-index:10; width:40px; margin-top:-20px;} #header #header_wrapper .mobile_menu_btn img {width:100%;} #header #header_wrapper .right_section {} #header #gnb_area .gnb {display:none;} } /* ================================================================== main ------------------------------------------------------------------ */ .main_wrapper #container {max-width:100%;} .toggle_area {position:relative;} .toggle_area .toggle_banner {overflow:hidden; } .toggle_area .toggle_banner.show {position:relative; width:100%; overflow:hidden; background: url(/img/main/sky_bg.jpg) 50% 0;text-align:center;} .toggle_area .toggle_banner a {display:block; margin:0 auto; padding:2em 0; text-align: center;} .toggle_area .toggle_banner a > div {display:inline-block; vertical-align:middle;font-family:'Nanum Gothic', '맑은 고딕','Malgun Gothic', dotum, 굴림, Gulim, 'Helvetica Neue', Helvetica, Arial, sans-serif;} .toggle_area .toggle_banner a > div.text1 {color:#b2b2b2; font-size:15px; margin-right:15px;} .toggle_area .toggle_banner a > div.text2 {font-size:30px; margin-right:15px;} .toggle_area .toggle_banner a > div .text2_1 {color:#d5b9c3;} .toggle_area .toggle_banner a > div .text2_2 {color:#a1cb88;} .toggle_area .toggle_banner a > div.text3 {color:#a1a1a1; font-size:15px; margin-right:30px;} .toggle_area .toggle_banner a > div.text4 {color:#d7984d; font-size:15px; text-decoration: underline;} .toggle_area .btn_toggle {position:absolute; top:0; left:50%; margin-left:500px; z-index:10; cursor:pointer} .main .bx-wrapper {margin:0} .main .bx-wrapper .bx-viewport {width:100%; overflow:hidden; margin:0 0 0%; box-shadow:none; left:0; border:0;} .main .bx-wrapper .bx-viewport img {width:100%;} .main .bx-wrapper .bx-viewport img.deskhide {display:none;} .main .bx-wrapper .bx-viewport .roll00 {background: url(/img/main/main_roll_bg0.jpg) no-repeat 50% 0;color:#6c5029;} .main .bx-wrapper .bx-viewport .roll01 {background: url(/img/main/main_roll_bg1.jpg) no-repeat 50% 0;color:#5d292a;} .main .bx-wrapper .bx-viewport .roll02 {background: url(/img/main/main_roll_bg2.jpg) no-repeat 50% 0; color:#763e1a} .main .bx-wrapper .bx-viewport .roll03 {background: url(/img/main/main_roll_bg3.jpg) no-repeat 50% 0; color:#5a6278} .main .bx-wrapper .bx-viewport .roll04 {background: url(/img/main/main_roll_bg4.jpg) no-repeat 50% 0; color:#7e6061;} .main .bx-wrapper .bx-viewport .roll05 {background: url(/img/main/main_roll_bg5.jpg) no-repeat 50% 0; color:#24698d;} .main .bx-wrapper .bx-viewport .roll06 {background: url(/eng/img/main/main_roll_bg6.jpg) no-repeat 50% 0; color:#d8928d;} .main .bx-wrapper .bx-viewport .roll07 {background: url(/img/main/main_roll_bg15.jpg) no-repeat 50% 0; color:#737e95;} .main .bx-wrapper .bx-viewport .rollWrap {background-size:cover} .main .bx-wrapper .bx-viewport .rollWrap .inner_area {position:relative; width:100%; max-width:1100px} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area {position:absolute; top:24%; left:5%; z-index:5; width:58%; opacity:0; -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .main .bx-wrapper .bx-viewport .rollWrap.current .inner_area .text_area {opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); } .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area img {width:100%;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area p.text2 {padding-top:20px; font-size: 18px; text-align: left;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area p.text3 {padding-top:20px; font-size: 15px; } .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area a {display:inline-block; border:1px solid #926464; padding:0.9em 1.7em; margin-top:30px; font-size:1em} .main .bx-wrapper .bx-viewport .rollWrap.roll00 .text_area a {border:1px solid #634720; color:#634720} .main .bx-wrapper .bx-viewport .rollWrap.roll00 .text_area a:hover {background: #634720; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll01 .text_area a {border:1px solid #5d292a; color:#5d292a} .main .bx-wrapper .bx-viewport .rollWrap.roll01 .text_area a:hover {background: #5d292a; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll02 .text_area a {border:1px solid #763e1a; color:#763e1a} .main .bx-wrapper .bx-viewport .rollWrap.roll02 .text_area a:hover {background: #763e1a; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll03 .text_area a {border:1px solid #5a6278; color:#5a6278} .main .bx-wrapper .bx-viewport .rollWrap.roll03 .text_area a:hover {background: #5a6278; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll04 .text_area a {border:1px solid #7e6061; color:#7e6061} .main .bx-wrapper .bx-viewport .rollWrap.roll04 .text_area a:hover {background: #7e6061; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll05 .text_area a {border:1px solid #24698d; color:#24698d} .main .bx-wrapper .bx-viewport .rollWrap.roll05 .text_area a:hover {background: #24698d; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll06 .text_area a {border:1px solid #d8928d; color:#d8928d} .main .bx-wrapper .bx-viewport .rollWrap.roll06 .text_area a:hover {background: #d8928d; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap.roll07 .text_area a {border:1px solid #737e95; color:#737e95} .main .bx-wrapper .bx-viewport .rollWrap.roll07 .text_area a:hover {background: #737e95; color:#fff;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .prod_img {position:absolute; top:0; right:0; z-index:2; width:57%;opacity:0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } .main .bx-wrapper .bx-viewport .rollWrap.roll07 .inner_area .prod_img {width: 48.4%; top: 11%;} .main .bx-wrapper .bx-viewport .rollWrap.roll06 .inner_area .prod_img {width:63.5%; top: 10%; right: -8%;} .main .bx-wrapper .bx-viewport .rollWrap.roll04 .inner_area .prod_img {width:101.6%;right:-22.54%; } .main .bx-wrapper .bx-viewport .rollWrap.roll05 .inner_area .prod_img {width:80%;right:-13%; }/* 실제 이미지 너비 / 1100 에서 *100 으로 퍼센트 잡아주시면 됩니다 */ .main .bx-wrapper .bx-viewport .rollWrap.roll00 .inner_area .prod_img {width:95.18%;right:-30%; }/* 실제 이미지 너비 / 1100 에서 *100 으로 퍼센트 잡아주시면 됩니다 */ .main .bx-wrapper .bx-viewport .rollWrap.current .inner_area .prod_img {opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .prod_img img {width:100%} .main .bx-wrapper .bx-controls {text-align:center; position:absolute;bottom:10%; width:100%; z-index:10;} .main .bx-wrapper .bx-controls > div {display:inline-block; vertical-align:top;} .main .bx-wrapper .bx-has-controls-auto.bx-has-pager .bx-pager {} .main .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item {display:inline-block; margin:0 2px} .main .bx-wrapper .bx-pager.bx-default-pager a {display: inline-block; width:13px; height:13px; background: #fff; border:2px solid #fff; box-sizing:border-box; text-indent:-9999px; border-radius:10px;} .main .bx-wrapper .bx-pager.bx-default-pager a:hover, .main .bx-wrapper .bx-pager.bx-default-pager a.active {background: transparent; border:2px solid #3c3c3c; } .main .bx-wrapper .bx-controls-direction {display:none!important; } .main .bx-wrapper .bx-controls-auto {margin-left:5px;} .main .bx-wrapper .bx-controls-auto .bx-controls-auto-item {position:relative; display:inline-block; } .main .bx-wrapper .bx-controls-auto .bx-controls-auto-item a {display:inline-block; width:13px;height:13px;text-indent:-9999px;} .main .bx-wrapper .bx-controls-auto .bx-controls-auto-item a.bx-stop {background: url(/img/main/playstop_bg.png) no-repeat 0 0;} .main .bx-wrapper .bx-controls-auto .bx-controls-auto-item a.bx-start {background: url(/img/main/playstop_bg.png) no-repeat -13px 0;} .main .bx-wrapper .bx-controls-auto .bx-controls-auto-item a.active {display:none;} .main > .inner_area{opacity:0; -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); -o-transform:translateY(20px); transform:translateY(20px); -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; transition:all 1s } .main > .inner_area.animate{opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } .main .section01 {margin-top:3%; text-align:center; margin-bottom:2%;} .main .section01 .col {display:block; float:left; margin-left:2.6%; width:31.54%; text-align:center; color:#fff; vertical-align:top;} .main .section01 .col01 {background: #26252f; margin-left:0;} .main .section01 .col02 {background: #4b333e;} .main .section01 .col03 {background: #3f0f12;} .main .section01 .col dl {padding:2em 5px;} .main .section01 .col dl dt {font-size:18px; padding-bottom:1em} .main .section01 .col dl dd {margin:0; font-size: 12px; line-height: 1.4em;} .main .section01 .col .img_wrap {position:relative; overflow:hidden;} .main .section01 .col .img_wrap img {width:100%;} .main .section01 .col .img_wrap span {display:none;position:absolute; top:45%; left:0%; width:100%; z-index:1;} .main .section01 .col .img_wrap span a {display:inline-block; border:1px solid #fff; color:#fff; padding:0.7em 1.5em; font-weight:normal} .main .section01 .col .img_wrap:hover img {opacity:0.5;} .main .section01 .col .img_wrap:hover span {display:block;} .main .section02 {text-align:left; margin-bottom:2%;} .main .section02 .col {display:block; overflow:hidden; position:relative; float:left; width:50%; text-align:center; color:#1e1b19; vertical-align:top;} .main .section02 .col .text_area {position:absolute; top:0; left:0; text-align:left; padding:4.5em 0 0 3.5em; z-index:10;} .main .section02 .col .text_area .tit {font-size:12px;} .main .section02 .col .text_area .tit strong {display:block; padding-top:.2em; padding-bottom:1.2em; font-size:18px;} .main .section02 .col .text_area p {padding-bottom:10px; color:#4a4a4a;} .main .section02 .col .text_area .text_area strong a {color:#ffffff;} .main .section02 .col .text_area .sub_text a {display:inline-block; margin-top:1em; border:1px solid #6b6b6b; color:#6b6b6b; padding:0.7em 1.5em;} .main .section02 .col .text_area .sub_text a:hover {border:1px solid #333; color:#fff; background: #333 } .main .section02 .col .bg {overflow:hidden;} .main .section02 .col .bg img {width:100%; -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; transition:all 1s } .main .section02 .col .bg:hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1) } .main .section03 .col {float:left; display:table; width:48.72%; margin-left:2.5%;} .main .section03 .col:first-child {margin-left:0;} .main .section03 .col .text_area {width:42%; display:table-cell; color:#fff; box-sizing:border-box; padding:0 2em 0; vertical-align:middle; } .main .section03 .col .text_area strong {display:block; padding-top:2px; padding-bottom:10px; font-size:19px;} .main .section03 .col .text_area p {margin-bottom:30px;} .main .section03 .col .text_area a {display: inline-block; color:#fff; border:1px solid #fff; padding:0.7em 1em;} .main .section03 .col .img_wrap {width:58%; display:table-cell; vertical-align:middle; overflow:hidden; } .main .section03 .col .img_wrap img {width:120%;} .main .section03 .col01 {background: #2d1617; } .main .section03 .col02 {background: #151905; } @media all and (max-width:1099px) { .toggle_area .toggle_banner.show, .toggle_area .toggle_banner.show a {height:auto!important} .toggle_area .btn_toggle {display:none} } @media all and (max-width:1050px) { .toggle_area .toggle_banner a > div.text3 {display:none;} .main .section01 .col dl dd {font-size:11px;} } @media all and (max-width:999px) { #header #gnb_area .gnb ul {width:100%; margin:0;} .main .section01 .col dl {padding:2em 0;} .main .section01 .col dl dt {} .main .section01 .col dl dd {font-size:12px;} .main .section02 .col .text_area p {display:none;} .main .section03 .col .text_area strong {display:block; padding-top:2px; padding-bottom:10px; font-size:15px;} .main .section03 .col .img_wrap {width:44%;} } @media all and (max-width:900px) { .inner_area {padding:0 10px;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area p.text2 {display:none} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area p.text3 {font-size: 12px;} .main .section01 .col .img_wrap span {display:block;} .main .section02 .col .text_area {padding: 2.5em 1.5em;} .main .section02 .col .text_area .tit strong {padding-bottom:0.5em} .main .section02 .col .text_area .sub_text a {margin-top:0.8em;} .main .section03 .text_area p {display:none} .main .section03 .col .text_area {width:42.5%} } @media (max-width: 767px){ .toggle_area .toggle_banner.show {background: url(/img/main/sky_bg.jpg) 0% 0;} .toggle_area .toggle_banner a {padding:1em 0} .toggle_area .toggle_banner a > div.text1 {color:#b2b2b2; font-size:12px; margin-right:15px;} .toggle_area .toggle_banner a > div.text2 {font-size:25px; margin-right:15px;} .toggle_area .toggle_banner a > div .text2_1 {color:#d5b9c3;} .toggle_area .toggle_banner a > div .text2_2 {color:#a1cb88;} .toggle_area .toggle_banner a > div.text4 {color:#d7984d; font-size:12px; text-decoration: underline;} .main .section03 {display:none;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .prod_img {top:auto; bottom:0;} } @media all and (max-width:640px) { .toggle_area .toggle_banner a > div.text1 {display:none} .toggle_area .toggle_banner a > div.text2 {font-size:20px; margin-right:15px;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area p.text3 {display:none;} .main .bx-wrapper .bx-viewport .rollWrap .inner_area .text_area a {padding:0.7em 1em;margin-top:10px; font-size:0.75em; } .main .inner_area.section2_area {padding:0} .main .section01 .col {width:100%; float:none; display:table; margin:0 0 2% 0; text-align:right;} .main .section01 .col dl {display:table-cell;width:53%; padding:0; vertical-align:middle; } .main .section01 .col dl dt {text-align:center;padding-bottom:0.5em} .main .section01 .col dl dd {text-align:center;font-size:11px;} .main .section01 .col .img_wrap {display:table-cell; width:47%; vertical-align:top; text-align:center; overflow:hidden;} .main .section01 .col .img_wrap img {width:110%;} .main .section01 .col .img_wrap span {display:block;} .main .section02 {padding: 10px; margin-bottom:0; background: #e2e2e2} .main .section02 .col {width:100%; float:none;} .main .section02 .col01 {margin-bottom:10px} .main .section02 .col .text_area {padding:2em 1.5em; top: 3%; left: 3%; } /* .main .section02 .col01 .text_area {background: #523b2b} .main .section02 .col02 .text_area {background: #610f19} */ .main .section02 .col .text_area .tit strong {padding-bottom:0;} .main .section02 .col .text_area .sub_text a {margin-top: 1.5em; padding: 0.6em 1.3em;} .main .section02 .col .bg {overflow:hidden; max-height:190px;} .main .section02 .col .bg img {width:120%;margin-left:-20%;} } /* ================================================================== container ------------------------------------------------------------------ */ /* container common */ .cnt_top {background: #fff; padding:28px 0;} .cnt_area {padding-top:35px; color:#686868; font-size:15px; line-height:1.5 } .cnt_area h2.tit {padding:20px 0 17px; text-align:center; font-family: 'Nanum Myeongjo', serif; font-size:30px; color:#004c55; font-weight:normal} .cnt_area h2.tit2 {padding:20px 0 0px; text-align:center; font-family:'Nanum Myeongjo', serif; font-size:30px; color:#004c55; font-weight:normal} .cnt_area h2.tit2.pb-25 {padding-bottom:25px;} .cnt_area h2.tit strong {font-weight: 600;} .cnt_area h3.sub_tit {padding-bottom:25px; font-size:17px; text-align:center; } .cnt_area p {padding-bottom:18px;} .cnt_area .section {padding-top:37px; margin-top:40px; border-top:1px solid #e1e1e1} .cnt_area .section:first-child {padding-top:0; border-top:0; margin-top:0;} .cnt_top .page_top_tab {font-size:0; text-align:center; padding:0; margin:0;} .cnt_top .inner_area {position:relative;} .cnt_top .page_top_tab_wrap {font-size:0; text-align:center; padding:0; margin:0 auto; overflow: hidden;} .cnt_top .page_top_tab_wrap .tab { text-align:center; margin:0 auto;} .cnt_top .page_top_tab_wrap .tab div {display: inline-block; min-width:120px; margin-left: -1px; border:1px solid #d6d8d7; text-align:center; box-sizing:border-box;} .cnt_top .page_top_tab_wrap .tab div:first-child {margin-left:0;} .cnt_top .page_top_tab_wrap .tab div a {display:block; font-size:15px; line-height:40px; padding:0 5px} .cnt_top .page_top_tab_wrap .tab div.current {background: #004c54} .cnt_top .page_top_tab_wrap .tab div.current a {color:#fff;} .cnt_top .page_roll_wrap {display:none;} @media all and (max-width:800px) { .cnt_top .page_top_tab li {width:120px;} } @media all and (max-width:640px) { /*모바일 */ .cnt_area h2.tit {font-size:22px;} .cnt_top {width:100%; text-align:left;} } @media all and (max-width:550px) { .cnt_top.basic .inner_area {padding:0; overflow:hidden;} .cnt_top.basic .page_top_tab_wrap.molie_hide {display:none;} .cnt_top.basic .page_top_tab_wrap .tab div {min-width:auto;} .cnt_top.basic .page_top_tab_wrap .tab div a {font-size:13px; white-space: nowrap;} .cnt_top.basic .page_roll_wrap {display:block; width:86.5%; margin:0 auto;} .cnt_top.basic .swiper-container {margin:0 auto;font-size:0; width:100%; height: 40px;} .cnt_top.basic .swiper-container .swiper-wrapper {width:100%; margin:0 auto} .cnt_top.basic .swiper-container .swiper-slide {width:15%; margin-left: -1px; border:1px solid #d6d8d7; text-align:center; box-sizing:border-box; float:left; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; display: -webkit-flex; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center;} .cnt_top.basic .swiper-container .swiper-slide a {display:block; width: 100%;font-size:13px; line-height:40px; } .cnt_top.basic .swiper-container .swiper-slide.current {background: #004c54} .cnt_top.basic .swiper-container .swiper-slide.current a {color:#fff;} .cnt_top.basic .swiper-button-next { height:42px; margin-top:-21px; right:0%; width:8%;background: #dfdfdf url(/img/common/btn_next.png) no-repeat 50% 50%; opacity:0.5; background-size:31px 61px; } .cnt_top.basic .swiper-button-prev { height:42px; margin-top:-21px; left:0%; width:8%; background: #dfdfdf url(/img/common/btn_prev.png) no-repeat 50% 50%; opacity:0.5;background-size:31px 61px; } .cnt_top.basic .swiper-button-next.swiper-button-disabled, .cnt_top.basic .swiper-button-prev.swiper-button-disabled {opacity:1;background-color:#666 } } /* 생그린소개========================================================= */ /* introduce 브랜드소개 */ .introduce .top_banner .bxslider {margin:0} .introduce .top_banner .bx-wrapper .bx-viewport {width:100%; overflow:hidden; margin:0 0 0%; box-shadow:none; left:0; border:0;} .introduce .top_banner li {padding:8.5em 0; list-style:none; } .introduce .top_banner .bx-wrapper .bx-viewport li.roll01 {background: url(/img/brand/brand_roll_img01.jpg) no-repeat;} .introduce .top_banner .bx-wrapper .bx-viewport li.roll02 {background: url(/img/brand/brand_roll_img02.jpg) no-repeat 50% 50%;} .introduce .top_banner .bx-wrapper .bx-viewport p { padding:0 2em 0.5em; font-family:Georgia, "Times New Roman", "FangSong", "仿宋", STFangSong, "华文仿宋", serif; font-size: 1.8em; text-align:center; color:#fff; font-weight:bold} .introduce .top_banner .bx-wrapper .bx-viewport p.sub_text {text-align:center; font-family:微软雅黑, simsun, Arial, sans-serif; font-size:14px; padding:0; font-weight:normal} .introduce .top_banner .bx-wrapper .bx-controls {position:absolute; bottom:5%;width:100%; text-align:center;} .introduce .top_banner .bx-wrapper .bx-controls .bx-pager-item {display:inline-block;margin:0 2px} .introduce .top_banner .bx-wrapper .bx-controls .bx-pager-item a {text-indent:-99999px;background: #fff; border:2px solid #fff; box-sizing:border-box;display:inline-block;width:12px; height:12px; border-radius:10px;} .introduce .top_banner .bx-wrapper .bx-pager.bx-default-pager a.active {background: transparent; border:2px solid #fff; } .introduce .top_banner img {width:100%; padding-bottom:30px} .introduce .top_txt p { padding:0 0.5em 0; font-family:'Nanum Myeongjo', serif; font-size: 1.8em; text-align:center; font-weight:bold} .introduce .top_txt p.sub_text { font-family: 'Nanum Gothic', sans-serif; font-size:14px; padding:0; font-weight:normal; padding-bottom:30px;} .introduce .brand_ci dl {margin:0 0 2em;} .introduce .brand_ci dt { display:inline-block; width:37%; vertical-align:middle;} .introduce .brand_ci dt img {width:100%; max-width:410px;} .introduce .brand_ci dd{ display:inline-block; padding:0; width:60%; margin-left:2%; vertical-align:middle; font-size:15px; line-height:21px; letter-spacing:-1px;} .introduce .history ul.history_tab {text-align:center; font-size:0; margin-bottom:35px;} .introduce .history ul.history_tab li {display:inline-block; width:171px; list-style:none; margin-left:-1px; padding-bottom:5px; cursor:pointer} .introduce .history ul.history_tab li span {display:block; box-sizing: border-box; font-size:18px; padding:0.2em;border:1px solid #cecece; } .introduce .history ul.history_tab li.current {background: url(/ch/img/common/tab_arrow.gif) no-repeat 50% 100%;} .introduce .history ul.history_tab li.current span {background: #004c55; color:#fff;border:1px solid #004c55; } .introduce .history .tab_panels > div {display:none; } .introduce .history .tab_panels > div:first-child {display:block;} .introduce .history .tab_history {overflow:hidden; background: url(/img/brand/history_bar.gif) repeat-y 50% 0;} .introduce .history .tab_history .year_wrap { text-align:right; margin-top: 10px; opacity:0;} .introduce .history .tab_history.current .year_wrap .tit {font-size:26px; color:#252525;background: url(/img/brand/history_bar2.gif) no-repeat 100% 50%; padding:0 25px; } .introduce .history .tab_history .year_wrap ul {padding:0; margin:2% 25px; } .introduce .history .tab_history .year_wrap li {overflow:hidden; list-style:none} .introduce .history .tab_history .year_wrap li .date {float:right; width:13%; max-width:50px;} .introduce .history .tab_history .year_wrap li .text {float:right; width:85%;} .introduce .history .tab_history .year_wrap.left {float:left; width:50%; margin-right:0.1%; opacity:0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .introduce .history .tab_history .year_wrap.right {float:right; width:50%; margin-left:0.1%; text-align:left;opacity:0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;} .introduce .history .tab_history .year_wrap.animate {opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);} .introduce .history .tab_history .year_wrap.right .tit {font-size:26px; color:#252525;background: url(/img/brand/history_bar2.gif) no-repeat 0% 50%; padding:0 25px; } .introduce .history .tab_history .year_wrap.right li .date {float:left;} .introduce .history .tab_history .year_wrap.right li .text {float:left;} /* introduce2 생그린 기술원 */ .introduce2 .section01 .section0101 {padding-bottom:1.5em; background: url(/img/common/border_dotted.png) repeat-x 0 100%; margin-bottom:3em;} .introduce2 .section01 .section0101 .img_section { float:left; width:48.2727%;} .introduce2 .section01 .section0101 .img_section img {max-width:100%; padding-bottom:10px;} .introduce2 .section01 .section0101 .text_section { float:left; width:49.5454%; margin-left:2.18%;} .introduce2 .section01 .section0101 .text_section dl {padding-bottom:30px;} .introduce2 .section01 .section0101 .text_section dt {color:#6f5e06; font-size:17px; margin-bottom:10px;} .introduce2 .section01 .section0101 .text_section dd {font-size:15px; letter-spacing:-1px;} .introduce2 .section01 .section0101 .text_section dd p {padding:0 0 0 15px; background: url(/img/brand/text_bar.png) no-repeat 3px 2px; } .introduce2 .section01 .section0102 .section_tit { float:left; color:#6f5e06; font-size:17px; } .introduce2 .section01 .section0102 .text_area {padding-left:228px;} .introduce2 .section01 .section0102 .text_area dl {display:inline-block; vertical-align:top; width:48%;} .introduce2 .section01 .section0102 .text_area dt {padding-left:15px; background: url(/img/brand/text_bar.png) no-repeat 3px 2px; color:#252525; font-size:15px; } .introduce2 .section01 .section0102 .text_area dd {padding-left:15px; padding-bottom:20px; color:#686868; font-size:15px; letter-spacing: -1px; } .introduce2 .section02 .section0201 {padding-bottom:1.5em; background: url(/img/common/border_dotted.png) repeat-x 0 100%; margin-bottom:3em;} .introduce2 .section02 .section0201 .img {float:left; width:40.54%; overflow:hidden; } .introduce2 .section02 .section0201 .img img {width:100%;} .introduce2 .section02 .section0201 .text {float:right; width:58%;} .introduce2 .section02 .section0201 .text .tit {margin-bottom:12px; font-size:17px; color:#6f5e06; } .introduce2 .section02 .section0201 .text dl {margin-bottom:18px;} .introduce2 .section02 .section0201 .text dt {color:#242424} .introduce2 .section02 .section0201 .text dd {padding-left:12px;} .introduce2 .section02 .section0202 {padding-bottom:1.5em; background: url(/img/common/border_dotted.png) repeat-x 0 100%; margin-bottom:1.5em;} .introduce2 .section02 .section0202 .tit {float:left; width:8%; margin-bottom:10px; color:#6f5e06} .introduce2 .section02 .section0202 .text {float:left; width:92%;} .introduce2 .section02 .section0202 .text .col {float:left;} .introduce2 .section02 .section0202 .text .col1 {width:54%} .introduce2 .section02 .section0202 .text .col2 {width:46%} .introduce2 .section02 .section0202 .text .col div {margin-bottom:20px;} .introduce2 .section02 .section0202 .text .col div p {padding:0 0 0 12px; margin:0; letter-spacing:-1px;} .introduce2 .section02 .section0202 .text .col div p:first-child {padding:0;} /* introduce3 생그린 영상 */ .introduce3 .introduce3_bbs_0 {display:none;} .introduce3 #top_area {width:100%;} .introduce3 #top_area #bo_v_con {width:100%; margin:0;} .introduce3 #top_area #bo_v_con iframe, .introduce3 #top_area #bo_v_con embed, .introduce3 #top_area #bo_v_con object {max-width:100%;} .introduce3 .subject_wrap {padding:10px 0;background:#e7e7e7; } .introduce3 .subject_area {display:table; width:100%; } .introduce3 .subject_area .tit {display:table-cell; text-align:center; width:233px; color:#6f5e06;border-right:1px solid #b2b2b2; margin:7px 0} .introduce3 .subject_area .subject_text {display:table-cell; padding-left:30px; color:#484747; margin:7px 0} .introduce3 .list_area {width:100%; font-size:0} .introduce3 .list_area .list_wrap {width:25%;display:inline-block;padding:2% 1%; box-sizing:border-box;vertical-align:top;} .introduce3 .list_area .list_wrap .list_thumb img {width:100%;} .introduce3 .list_area .list_wrap .list_subject {margin-top:5px;padding:0 5px;} .introduce3 .list_area .list_wrap .list_subject a {font-size:15px; color:#686868;} .introduce3_view #bo_v_title {margin-top:20px; margin-bottom:20px; border-top:2px solid #bb9c00; border-bottom:1px solid #ddd;} .introduce3_view #bo_v_img {display:none;} /* introduce4 Contact Us */ .introduce4 .col {width:48%; margin-bottom:15px;} .introduce4 .col img {width:100%;} .introduce4 .col1 {float:left;} .introduce4 .col2 {float:right;} .introduce4 table {width:100%; border-top:2px solid #6f5e06} .introduce4 table th, .introduce4 table td {border-bottom:1px solid #cacaca; padding:8px 17px 7px; text-align:left;} .introduce4 table th {font-size:17px; color:#6f5e06} .introduce4 table td {font-size:15px; color:#686868} .introduce4 table td a {color:#bb1111} .introduce4 .section01 .map {margin-bottom:20px; width:100%;} .introduce4 .section01 .map img {width:100%;} .introduce4 .section02 .sub_tit {width: 100%; max-width: 580px; margin: 0 auto;} .introduce4 .section03 .col .tit { color:#6f5e06;} .introduce4 .section03 .section0301, .introduce4 .section03 .section0302 {padding-bottom:1.5em; background: url(/img/common/border_dotted.png) repeat-x 0 100%; margin-bottom:1.5em;} .introduce4 .section03 .section0302 .tit {float:left; width:20%; margin-bottom:10px; color:#6f5e06} .introduce4 .section03 .section0302 .text {float:left; width:80%;} .introduce4 .section03 .section0302 .text p {padding:0} @media all and (max-width:999px) { .introduce .top_banner li {padding:5.5em 0; list-style:none; } .introduce4 .section03 .section0302 .tit {float:none; width:100%; color:#6f5e06} .introduce4 .section03 .section0302 .text {float:none; width:100%;} .introduce4 .section03 .section0302 .text p {padding:0} } @media all and (max-width:900px) { .introduce .brand_ci dt {display:block; width:100%; margin-bottom:10px; text-align:center;} .introduce .brand_ci dd {display:block; width:100%;margin-left:0;} .introduce2 .section01 .section0101 .img_section { float:none; width:100%;} .introduce2 .section01 .section0101 .img_section img {width:100%;} .introduce2 .section01 .section0101 .img_section img:last-child {display:none;} .introduce2 .section01 .section0101 .text_section { float:none; width:100%; margin-left:0;} .introduce2 .section01 .section0102 .section_tit {float: none;} .introduce2 .section01 .section0102 .text_area {padding-left:0;} .introduce2 .section02 .section0201 .img {float: none;width:100%; max-height:250px;} .introduce2 .section02 .section0201 .text {float: none;width:100%;} .introduce2 .section02 .section0202 .tit {float: none;width:100%; } .introduce2 .section02 .section0202 .text {float: none;width:100%; } } @media (max-width: 767px){ .introduce .top_banner li {padding:3.5em 0; list-style:none; } .introduce2 .section01 .section0102 .text_area dl {display: block; vertical-align: top; width: 100%;} .introduce2 .section02 .section0202 .text .col {float: none;width:100%; } .introduce3 .subject_area {display:block;} .introduce3 .subject_area .tit {display:block; padding:0 10px; border:0; text-align:left;} .introduce3 .subject_area .subject_text {display:block; padding:0 10px; color:#484747; margin:7px 0} .introduce3 .list_area .list_wrap {width:49%} } @media all and (max-width:640px) { /*모바일 */ .introduce .brand_ci dt {display:block; width:100%; margin-bottom:10px; text-align:center;} .introduce .brand_ci dd {display:block; width:100%;margin-left:0;} .introduce .history {padding-bottom:20px;} .introduce .history ul.history_tab li {width:29%;} .introduce .history ul.history_tab li span {font-size:14px;} .introduce .history .tab_history {background: url(/img/brand/history_bar.gif) repeat-y 10% 0} .introduce .history .tab_history .year_wrap {float:none!important; width:100%!important; padding:2% 0 2% 10%; text-align:left; box-sizing:border-box;} .introduce .history .tab_history .year_wrap.left, .introduce .history .tab_history .year_wrap.right {float:right; width:50%; margin-left:0.1%; text-align:left;opacity:0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;} .introduce .history .tab_history .year_wrap.animate {opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);} .introduce .history .tab_history.current .year_wrap .tit {background: url(/img/brand/history_bar2.gif) no-repeat 0% 50%} .introduce .history .tab_history .year_wrap li .date {float:left; width:20%;} .introduce .history .tab_history .year_wrap li .text {float:left; width:80%;} .introduce2 .section01 .img_section { float:none; width:100%;} .introduce2 .section01 .img_section img {max-width:100%; } .introduce2 .section01 .text_section { float:none; width:100%; margin-left:0%;} .introduce4 .col1 {float:none; width:100%;} .introduce4 .col2 {float:none; width:100%;} } /* 생그린 제품 ========================================================= */ /* 제품 메인 3단 */ .product_main .product_section {display:table; width:100%; padding-top:2em; margin-top:2em; border-top:1px solid #e1e1e1;} .product_main .product_section.section01 {padding-top:0; margin-top:0; border-top:0px solid #e1e1e1;} .product_main .product_section .img_area {position:relative; overflow:hidden; width:51.2%; display:table-cell;} .product_main .product_section .img_area img {width:100%;} .product_main .product_section .img_area img.thumb { position:absolute; top:0;left:50%; margin-left:-50%; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s } .product_main .product_section .img_area:hover img.thumb { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1) } .product_main .product_section dl {display:table-cell; vertical-align:middle; text-align:center;background: #fff;} .product_main .product_section dt {color:#6f5e06; padding-bottom:10px; margin-bottom:10px; background: url(/img/product/product_bar.gif) no-repeat 50% 100%; font-size:24px; font-weight:600;} .product_main .product_section dd p { padding-top:10px; color:#686868;} .product_main .product_section dd a {display:inline-block; border:1px solid #949494;color:#6c6c6c; font-size:0.7em; padding:0.6em 1.2em} .product_main .product_section dd a:hover {border:1px solid #6f5e06;color:#fff; background:#6f5e06;} /* 생그린화장품 list */ .product_list .section ul {font-size:0} .product_list .section li {display:inline-block; width:32%; margin-right:1.9%; list-style:none; margin-bottom:20px; vertical-align:top; opacity:0; -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); -o-transform:translateY(20px); transform:translateY(20px); -webkit-transition:all 1.5s; -moz-transition:all 1.5s; -ms-transition:all 1.5s; -o-transition:all 1.5s; transition:all 1.5s } .product_list .section li.animate{opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } .product_list .section li.last {margin-right:0%; } .product_list .section li a {display:block; text-align:center;} .product_list .section li a .img {margin-bottom:10px; overflow:hidden;} .product_list .section li a .img img {width:100%; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s } .product_list .section li a:hover .img img{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1) } .product_list .section li a .tit { color:#363636; font-size:16px; font-family: 'Nanum Gothic', sans-serif; margin-bottom:0px; font-weight: bold;} .product_list .section li a .sub_tit {margin-top:3px; color:#686868; font-size:13px; line-height:1.3; letter-spacing:-1px; font-family: 'Nanum Gothic', sans-serif; margin-bottom:5px;} .product_list .section li a .sub_sub_tit2 { color:#999; font-size:10px; font-family: 'Nanum Gothic', sans-serif; margin-bottom:0px;} .product_list .section li a .sub_tit3{ color:#fff; font-size:12px; font-family: 'Nanum Gothic', sans-serif;height:4.8em; margin-top:10px;} .product_list .section li a .sub_tit3 span{padding:3px 3px 4px; background:#859685; } .product_list .section li a .bar span {display:inline-block; width:15px; border-top:1px solid #c0c0c0;padding-bottom:10px;margin-top:8px;} @media all and (max-width:999px) { .product_main .product_section dt {font-size:20px;} .product_main .product_section dd p { font-size:13px;} .product_main .product_section dd a { font-size:1em; padding:0.5em 0.7em} } @media (max-width: 800px){ .product_main .product_section {display:block;} .product_main .product_section .img_area {display:block; width:100%;} .product_main .product_section .img_area img.empty {height:80%;} .product_main .product_section dl {display:block; width:100%; padding:2em 0;} } @media (max-width: 767px){ .product_list .section li {width:49%; margin-right:0%;} .product_list .section li a {padding:0 2%} } /* 생그린 라인별 탭 */ .cnt_top .product_page {font-size:0;text-align:center} .cnt_top .product_page li {display:inline-block; list-style:none; width:12.3%; max-width:125px; min-width:98px; border:1px solid #cfcfcf; margin-left:-1px;} .cnt_top .product_page.line0102 li {width:16%; max-width:115px; min-width:112px; border:1px solid #cfcfcf; margin-left:-1px;} .cnt_top .product_page.line0103 li {width:10%; max-width:115px; min-width:98px; border:1px solid #cfcfcf; margin-left:-1px;} .cnt_top .product_page li a {display:block; font-size:12px; padding-bottom:1em; text-align:center; letter-spacing:-1.5px; line-height:15px;} .cnt_top .product_page li a img {display:block; width:100%; border-bottom:1px solid #cfcfcf; margin-bottom:1em;} .cnt_top .product_page li.current { background: #f2efdc;} .cnt_top .product_page li.current a {color:#675709} .cnt_top .top_btn {padding-top:20px; text-align:center;} .cnt_top .top_btn img {cursor:pointer;} .prodcut_view .cnt_top h2.tit2 {padding: 20px 0 0px; text-align: center; font-family: 'Nanum Myeongjo', serif; font-size: 30px; color: #004c55; font-weight: normal;} .prodcut_view .cnt_top h3.sub_tit {padding-bottom: 25px; font-size: 17px; text-align: center; font-family: 'Nanum Gothic', '맑은 고딕','Malgun Gothic', dotum, sans-serif; color: #686868;} @media all and (max-width:915px) { .cnt_top.prod_page .inner_area {padding:0; overflow:hidden;} .cnt_top.prod_page .product_page {display:none} .cnt_top.prod_page .page_roll_wrap {display:block;} .cnt_top.prod_page .page_roll_wrap {display:block; width:90%; margin:0 auto;} .cnt_top.prod_page .swiper-container {margin:0 auto;font-size:0; width:100%; height: auto;} .cnt_top.prod_page .swiper-container .swiper-wrapper {width:100%; margin:0 auto} .cnt_top.prod_page .swiper-container .swiper-slide {width:100px; margin-left: -1px; border:1px solid #d6d8d7; text-align:center; box-sizing:border-box; float:left; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; display: -webkit-flex; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center;} .cnt_top.prod_page .swiper-container .swiper-slide:first-child {margin-left:0;} .cnt_top.prod_page .swiper-container .swiper-slide a {display:block; width: 100%;font-size:13px; line-height:40px; letter-spacing:-1.5px} .cnt_top.prod_page .swiper-container .swiper-slide a img {width:100%;border-bottom:1px solid #d6d8d7;} .cnt_top.prod_page .swiper-container .swiper-slide.current { background: #f2efdc;} .cnt_top.prod_page .swiper-container .swiper-slide.current a {color:#675709;} .cnt_top.prod_page .swiper-button-next, .cnt_top.prod_page .swiper-button-prev {top:0px; margin-top:0; height:100%;} .cnt_top.prod_page .swiper-button-next { right:0%; width:5.5%;background: #dfdfdf url(/img/common/btn_next.png) no-repeat 50% 50%; opacity:0.5; background-size:31px 61px; } .cnt_top.prod_page .swiper-button-prev {left:0%; width:5.5%; background: #dfdfdf url(/img/common/btn_prev.png) no-repeat 50% 50%; opacity:0.5;background-size:31px 61px; } .cnt_top.prod_page .swiper-button-next.swiper-button-disabled, .cnt_top.prod_page .swiper-button-prev.swiper-button-disabled {opacity:1;background-color:#666 } } @media all and (max-width:650px) { .cnt_top.prod_page2 .inner_area {padding:0; overflow:hidden;} .cnt_top.prod_page2 .product_page {display:none} .cnt_top.prod_page2 .page_roll_wrap {display:block;} .cnt_top.prod_page2 .page_roll_wrap {display:block; width:90%; margin:0 auto;} .cnt_top.prod_page2 .swiper-container {margin:0 auto;font-size:0; width:100%; height: auto;} .cnt_top.prod_page2 .swiper-container .swiper-wrapper {width:100%; margin:0 auto} .cnt_top.prod_page2 .swiper-container .swiper-slide {width:100px; margin-left: -1px; border:1px solid #d6d8d7; text-align:center; box-sizing:border-box; float:left; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; display: -webkit-flex; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center;} .cnt_top.prod_page2 .swiper-container .swiper-slide:first-child {margin-left:0; } .cnt_top.prod_page2 .swiper-container .swiper-slide a {display:block; width: 100%;font-size:13px; line-height:40px; letter-spacing:-1.5px} .cnt_top.prod_page2 .swiper-container .swiper-slide a img {width:100%;border-bottom:1px solid #d6d8d7;} .cnt_top.prod_page2 .swiper-container .swiper-slide.current { background: #f2efdc;} .cnt_top.prod_page2 .swiper-container .swiper-slide.current a {color:#675709; } .cnt_top.prod_page2 .swiper-button-next, .cnt_top.prod_page2 .swiper-button-prev {top:0px; margin-top:0; height:100%;} .cnt_top.prod_page2 .swiper-button-next { right:0%; width:5.5%;background: #dfdfdf url(/img/common/btn_next.png) no-repeat 50% 50%; opacity:0.5; background-size:31px 61px; } .cnt_top.prod_page2 .swiper-button-prev {left:0%; width:5.5%; background: #dfdfdf url(/img/common/btn_prev.png) no-repeat 50% 50%; opacity:0.5;background-size:31px 61px; } .cnt_top.prod_page2 .swiper-button-next.swiper-button-disabled, .cnt_top.prod_page2 .swiper-button-prev.swiper-button-disabled {opacity:1;background-color:#666 } } @media all and (max-width:550px) { .cnt_top.prod_page3 .inner_area {padding:0; overflow:hidden;} .cnt_top.prod_page3 .product_page {display:none} .cnt_top.prod_page3 .page_roll_wrap {display:block;} .cnt_top.prod_page3 .page_roll_wrap {display:block; width:90%; margin:0 auto;} .cnt_top.prod_page3 .swiper-container {margin:0 auto;font-size:0; width:100%; height: auto;} .cnt_top.prod_page3 .swiper-container .swiper-wrapper {width:100%; margin:0 auto} .cnt_top.prod_page3 .swiper-container .swiper-slide {width:100px; margin-left: -1px; border:1px solid #d6d8d7; text-align:center; box-sizing:border-box; float:left; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; display: -webkit-flex; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center;} .cnt_top.prod_page3 .swiper-container .swiper-slide:first-child {margin-left:0;} .cnt_top.prod_page3 .swiper-container .swiper-slide a {display:block; width: 100%;font-size:13px; line-height:40px; letter-spacing:-1.5px} .cnt_top.prod_page3 .swiper-container .swiper-slide a img {width:100%;border-bottom:1px solid #d6d8d7;} .cnt_top.prod_page3 .swiper-container .swiper-slide.current { background: #f2efdc;} .cnt_top.prod_page3 .swiper-container .swiper-slide.current a {color:#675709;} .cnt_top.prod_page3 .swiper-button-next, .cnt_top.prod_page3 .swiper-button-prev {top:0px; margin-top:0; height:100%;} .cnt_top.prod_page3 .swiper-button-next { right:0%; width:5.5%;background: #dfdfdf url(/img/common/btn_next.png) no-repeat 50% 50%; opacity:0.5; background-size:31px 61px; } .cnt_top.prod_page3 .swiper-button-prev {left:0%; width:5.5%; background: #dfdfdf url(/img/common/btn_prev.png) no-repeat 50% 50%; opacity:0.5;background-size:31px 61px; } .cnt_top.prod_page3 .swiper-button-next.swiper-button-disabled, .cnt_top.prod_page3 .swiper-button-prev.swiper-button-disabled {opacity:1;background-color:#666 } .cnt_top .product_page.line0102 li {min-width:86px; } .cnt_top .product_page.line0102 li span{display:block} } @media all and (max-width:450px) { .cnt_top.prod_page4 .inner_area {padding:0; overflow:hidden;} .cnt_top.prod_page4 .product_page {display:none} .cnt_top.prod_page4 .page_roll_wrap {display:block;} .cnt_top.prod_page4 .page_roll_wrap {display:block; width:90%; margin:0 auto;} .cnt_top.prod_page4 .swiper-container {margin:0 auto;font-size:0; width:100%; height: auto;} .cnt_top.prod_page4 .swiper-container .swiper-wrapper {width:100%; margin:0 auto} .cnt_top.prod_page4 .swiper-container .swiper-slide {width:100px; margin-left: -1px; border:1px solid #d6d8d7; text-align:center; box-sizing:border-box; float:left; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; display: -webkit-flex; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-box-align: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center;} .cnt_top.prod_page4 .swiper-container .swiper-slide:first-child {margin-left:0;} .cnt_top.prod_page4 .swiper-container .swiper-slide a {display:block; width: 100%;font-size:13px; line-height:40px; letter-spacing:-1.5px} .cnt_top.prod_page4 .swiper-container .swiper-slide a img {width:100%;border-bottom:1px solid #d6d8d7;} .cnt_top.prod_page4 .swiper-container .swiper-slide.current { background: #f2efdc;} .cnt_top.prod_page4 .swiper-container .swiper-slide.current a {color:#675709;} .cnt_top.prod_page4 .swiper-button-next, .cnt_top.prod_page4 .swiper-button-prev {top:0px; margin-top:0; height:100%;} .cnt_top.prod_page4 .swiper-button-next { right:0%; width:5.5%;background: #dfdfdf url(/img/common/btn_next.png) no-repeat 50% 50%; opacity:0.5; background-size:31px 61px; } .cnt_top.prod_page4 .swiper-button-prev {left:0%; width:5.5%; background: #dfdfdf url(/img/common/btn_prev.png) no-repeat 50% 50%; opacity:0.5;background-size:31px 61px; } .cnt_top.prod_page4 .swiper-button-next.swiper-button-disabled, .cnt_top.prod_page4 .swiper-button-prev.swiper-button-disabled {opacity:1;background-color:#666 } } @media all and (max-width:640px) { .cnt_top.prod_page .page_roll_wrap {display:block; width:89%; margin:0 auto;} .cnt_top.prod_page .swiper-button-next, .cnt_top.prod_page .swiper-button-prev {width:6%;} } /* 생그린 라인별 메인 */ .prodcut_view .line_info_page {overflow:hidden; } .prodcut_view .line_info_page .section01 {overflow:hidden; width:100%; display:table; margin-bottom:30px;} .prodcut_view .line_info_page .section01 .visual {width:50%; display:table-cell;overflow:hidden;} .prodcut_view .line_info_page .section01 .visual img {width:100%;} .prodcut_view .line_info_page .section01 .cont_area {width:50%; display:table-cell; padding:0 4%; vertical-align:middle; background: #fff; box-sizing:border-box;} .prodcut_view .line_info_page .section01 .cont_area h4 {margin-bottom:10px; color:#6f5e06; font-family: 'Nanum Gothic', sans-serif; font-size:17px;} .prodcut_view .line_info_page .section01 .cont_area p {padding-bottom:18px; color: #686868; font-size: 15px; line-height: 1.5;} .prodcut_view .line_info_page .section01 .cont_area p.subtit {padding-bottom:10px; color: #363636;font-size: 15px; line-height: 1.5;} .prodcut_view .line_info_page .section01 .cont_area ol {padding-left:15px;margin:0;} .prodcut_view .line_info_page .section01 .cont_area li {color: #686868;font-size: 14px; line-height: 1.3; margin-bottom:7px} .prodcut_view .line_info_page .section01 .cont_area .prod_0101_img {text-align:left;} .prodcut_view .line_info_page .section01 .cont_area .prod_0101_img li {display:inline-block; list-style:none; border:1px solid #cfcfcf; text-align:center; font-size:13px; background: #fff;} .prodcut_view .line_info_page .section01 .cont_area .prod_0101_img li img {display:block; border-bottom:1px solid #cfcfcf; width:100%;} .prodcut_view .line_info_page .section01 .cont_area .prod_0101_img li div {display:table; height:45px; width:100%;} .prodcut_view .line_info_page .section01 .cont_area .prod_0101_img li div p {display: table-cell; padding:0; vertical-align:middle; font-size: 13px; } .prodcut_view .line_info_page .bottom_text {text-align:center; font-size:15px; margin-bottom:30px;padding-bottom:18px; color: #686868; line-height: 1.5; } .prodcut_view .bottom_btn {display:none; margin-top:20px; text-align:center; cursor:pointer;} .prodcut_view .line_info_page .prodcut_detail {display:none; opacity:0; -webkit-transform:translateY(-20px); -moz-transform:translateY(-20px); -ms-transform:translateY(-20px); -o-transform:translateY(-20px); transform:translateY(-20px); -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; transition:all 1s } .prodcut_view .line_info_page .prodcut_detail.show {display:block; opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); } /* 제품 디테일페이지 상단 라인별 메인 */ .cnt_top .top_info_area {display:none} .cnt_top .bottom_btn {display:none!important} .prodcut_view .cnt_top h2.tit2 {padding-top:40px} .prodcut_view .cnt_top .line_info_page .section01 .cont_area {background: #f6f6f6} /* 제품 디테일 */ .prodcut_view .prodcut_detail {overflow:hidden; } .prodcut_view .prodcut_detail .section01 {background: #f1f2e8; padding:2.5em; box-sizing:border-box;} .prodcut_view .prodcut_detail .section01 .thumb {float:left; width:46%} .prodcut_view .prodcut_detail .section01 .thumb img {width:100%;} .prodcut_view .prodcut_detail .section01 .cont {float:right; width:49%} .prodcut_view .prodcut_detail .section01 .cont h3 {font-family: 'Nanum Gothic', sans-serif; font-size:1.4em; color:#b39602; line-height:2.5em} .prodcut_view .prodcut_detail .section01 .cont p {padding-bottom:20px;} .prodcut_view .prodcut_detail .section01 .cont .line {border-bottom:1px solid #d1cac7; padding-top:15px;margin-bottom:15px;} .prodcut_view .prodcut_detail .section01 .cont .add_area {padding-bottom:20px; min-height:60px; font-size:16px;} .prodcut_view .prodcut_detail .section01 .cont .add_area dl {padding-bottom:5px;} .prodcut_view .prodcut_detail .section01 .cont .add_area dt {display:inline-block; margin-right:10px;font-weight:bold;} .prodcut_view .prodcut_detail .section01 .cont .add_area dd {display:inline-block;} .prodcut_view .prodcut_detail .section01 .cont .add_area dd span {color:#004c55; font-weight:bold;} .prodcut_view .prodcut_detail .section01 .cont .btn_wrap {padding-top:10px; text-align:left;} .prodcut_view .prodcut_detail .section01 .cont .btn_wrap a {display:inline-block; padding: 0.5em 2em; color:#fff; background: #444849} .prodcut_view .prodcut_detail .section02 .row_wrap {padding:27px 0; border-top:1px solid #e1e1e1} .prodcut_view .prodcut_detail .section02 .row_wrap:first-child {border-top:0} .prodcut_view .prodcut_detail .section02 .row_wrap .tit {float:left; width:200px; color:#6f5e06; font-size:17px;} .prodcut_view .prodcut_detail .section02 .row_wrap .text_area {padding-left: 220px;} @media all and (max-width:1085px) { .prodcut_view .line_info_page .section01 .cont { padding:0 2%; } .prodcut_view .line_info_page .section01 {display:block;} .prodcut_view .line_info_page .section01 .visual {width:100%; display:block; } .prodcut_view .line_info_page .section01 .cont_area { width:100%; display:block; padding:2em;} } @media all and (max-width:1050px) { .prodcut_view .prodcut_detail .section01 .thumb {float:none; width:100%} .prodcut_view .prodcut_detail .section01 .cont {float:none; width:100%;} } @media all and (max-width:768px) { .prodcut_view .slick-slider .slick-track, .prodcut_view .slick-slider .slick-list {width:80%; padding:0; margin:0 auto;} .prodcut_view .prodcut_detail .section01 .cont .btn_wrap a {padding:0.5em 0; width:40%; font-size:13px; text-align:center; min-width: 110px;} .prodcut_view .section02 .row_wrap .tit {float:none;} .prodcut_view .section02 .row_wrap .text_area {float:none; padding-left:0; padding-bottom:10px;} } /* 생그린지사 ========================================================= */ /* 지사모집, 생그린매니저 모집 공통 css*/ .branch .section01 .top_banner {width:100%; margin-bottom:20px; background: url(/img/branch/branch_img01.jpg) no-repeat 0 50%; background-size:100%; color:#fff; text-align:center; } .branch .section01 .top_banner .text {padding:8.5em 0;} .branch .section01 .top_banner .text p {padding:0; font-family: 'Nanum Myeongjo', serif; font-size:26px; letter-spacing:-1px; font-weight:bold; line-height:1.6} .branch .section01 .top_banner .text p.small_text {font-family: 'Nanum Gothic', sans-serif; font-size:14px; font-weight:normal;} .branch .section01 .text_area span {color:#9e2e1f} .branch .branch_guide {} .branch .branch_guide .clearFix {display:table; width:100%; background: #fff;} .branch .branch_guide .img {display: table-cell; width:50%; overflow:hidden; } .branch .branch_guide .img img {width:141%;} .branch .branch_guide .text_section {display: table-cell; width:50%; vertical-align:middle;} .branch .branch_guide .text_section dl {padding:10px 30px;} .branch .branch_guide .text_section dt {color:#1c474e; font-size:18px; margin-bottom:20px; } .branch .branch_guide .text_section dd {overflow:hidden; margin-bottom:7px; font-size:15px;} .branch .branch_guide .text_section dd span {display:block; line-height:20px;} .branch .branch_guide .text_section dd span:first-child {color:#343232; font-weight:bold;} .branch .branch_guide .text_section dd span.text {padding-left:0; letter-spacing:-1px; color:#686868;} .branch .branch_guide .text_section dd span.text.fc_9d2e1f {color:#9d2e1f} /* 생그린매니저 모집 */ .branch2 .section01 .top_banner {background: url(/img/branch/manager_img01.jpg) no-repeat 0 50%; background-size:100%; } .branch2 .branch_guide .text_section dl {padding:10px 0 10px 40px;} @media all and (max-width:999px) { .branch .section01 .top_banner {} .branch .branch_guide .img, .branch2 .branch_guide .img {display: block; width:100%; overflow:hidden; max-height:335px;} .branch .branch_guide .img img {margin-top:-30px;} .branch .branch_guide .text_section, .branch2 .branch_guide .text_section {display: block; width:100%;} } @media (max-width: 767px){ .branch .section01 .top_banner .text {padding:4.5em 0;} .branch .branch_guide .img {display: block; width:100%; overflow:hidden; max-height:250px;} .branch .branch_guide .img img {margin-top:0px;} .branch2 .branch_guide .text_section dl {padding:10px 0 10px 20px;} } /*생생소식 면세점*/ .panel1 .top_txt p { padding:0 0.5em 0; font-family: 'Nanum Myeongjo', serif; font-size: 1.8em; text-align:center; font-weight:bold} .panel1 .top_txt p.sub_text { font-family: 'Nanum Gothic', sans-serif; font-size:14px; padding:0; font-weight:normal; padding-bottom:30px;} .panel1 .top_banner img {width:100%; padding-bottom:30px} .panel1 .bottom_img img {width:100%; padding-bottom:30px} /* 생생패널, 게시판 ========================================================= */ #bo_sch {display:none;} .bbs .cnt_area .sub_text {text-align:center;} .bbs .cnt_area .sub_text p {font-size:15px; color:#686868; padding:0; margin:0} .bbs .cnt_area .sub_text p:first-child {font-size:17px; color:#4b4b4b} .bbs.write #bo_w .tbl_frm01 {border-top:2px solid #bb9c00} #bo_v_act, #bo_v_table {display:none;} #bo_list {margin-top:40px;} /* 패널모집 */ .panel1 #bo_list {margin-top:0;} .panel1 .panel1_bbs_wrap {display:table; margin-bottom:23px; background: #fff; width:100%; table-layout: fixed;} .panel1 .panel1_bbs_wrap .thum {display:table-cell; width:50%; position:relative; } .panel1 .panel1_bbs_wrap .thum div {display:block; overflow:hidden; width:100%} .panel1 .panel1_bbs_wrap .thum div img {} .panel1 .panel1_bbs_wrap .thum .subject_wrap {display:none;} .panel1 .panel1_bbs_wrap .cont {display:table-cell; width:50%; box-sizing:border-box; padding:2em 2em 0; vertical-align: middle;} .panel1 .panel1_bbs_wrap .cont .pr_subject {color:#6f5e06; font-size:19px;} .panel1 .panel1_bbs_wrap .cont .pr_subject2 {display:none;} .panel1 .panel1_bbs_wrap .cont .add_info {margin-bottom:5px;} .panel1 .panel1_bbs_wrap .cont .add_info .tit {float:left; color:#343232;} .panel1 .panel1_bbs_wrap .cont .add_info .text {padding-left:80px; color:#686868} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0{display:block; position:relative;} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .thum {display:block; width:100%; } .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .thum img {max-height:485px;} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .thum .subject_wrap {display:block; position:absolute; bottom:0; text-align:center; z-index:10; font-size:27px; color:#430e03; padding-bottom:3%; padding-top:2%; background: rgba(0,0,0,0.5)} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .thum .subject_wrap .pr_subject {font-size:27px; color:#fff} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .thum .subject_wrap .pr_subject2 {font-size:16px; color:#f1f1f1; width:70%; margin:10px auto 0; } .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .cont {display:block; width:100%; padding-bottom:2em; } .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .cont .subject_wrap { } .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .cont .pr_subject {display:none;} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .cont .pr_subject2 {display:none;} /* 공지사항 .bbs.notice .cnt_area #bo_list .text_area #bo_v_con {padding-bottom:30px}*/ .bbs.notice .cnt_area #bo_list .text_area #bo_v_atc {padding:8px 5px 30px; display:none; overflow:hidden; } .bbs.notice .cnt_area #bo_list .text_area #bo_v_act {display:none;}/* 스크랩버튼 */ .bbs.notice .cnt_area #bo_list td {background:#f6f6f6; border-top: 0;} .bbs.notice .cnt_area #bo_list td.text_area {padding:0; background:#efefef; border: 0;} /* 문의 */ #fwrite textarea, .inquiry .tbl_wrap table {table-layout: fixed;} .inquiry #bo_w .tbl_frm01 th {width: 14%; padding: 7px 0 7px 12px;} .inquiry .tbl_frm01 textarea, .inquiry .frm_input, .inquiry #captcha #captcha_key{background: #fff!important;} .inquiry .frm_input {min-width:100px;height:29px} .inquiry #wr_name {min-width:160px;} .inquiry .btn_submit {background:#467d84; border:1px solid #467d84;font-size: 15px; -webkit-appearance: button; border-radius:0; padding:0 7px; line-height:35px;} .inquiry a.btn_cancel {padding:0 7px; line-height:35px;} .frm_file {border-radius:0} /* 문의 보기페이지 */ #bo_v_title {margin-top:20px; border-top:2px solid #bb9c00} .tbl_wrap table {border-top:1px solid #ddd} @media all and (min-width:1000px) { .panel1 .panel1_bbs_wrap .thum img {max-height: 330px;} } @media all and (max-width:999px) { .panel1 .panel1_bbs_wrap .thum {display:block; width:100%; position:relative; } .panel1 .panel1_bbs_wrap .thum img {width:100%; height:auto; max-height: 500px;} .panel1 .panel1_bbs_wrap .cont {display:block; width:100%; position:relative; padding:2em 2em 1.5em;} } @media (max-width: 767px){ .inquiry #bo_w .tbl_frm01 th {width: 24%; padding: 7px 0} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .thum .subject_wrap {display:none;} .panel1 #bo_list .tbl_wrap .panel1_bbs_wrap.panel1_bbs_0 .cont .pr_subject {display:block;} .inquiry .frm_input {min-width:80px;height:29px} #wr_email, #wr_subject, .frm_file {max-width:100%!important} .inquiry .frm_input.inputStyleTel {min-width:auto; max-width:25%!important} .inquiry #captcha.m_captcha audio {min-width:auto; max-width:25%!important} }