@charset "utf-8"; @import url('base.css'); @import url('http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700'); @import url('owl.carousel.css'); @import url('../plugin/chosen_v1.6.2/chosen.css'); @import url('jquery-ui.css'); /************************************************ layout ************************************************/ /* 글로벌 GNB */ .global_gnb {text-align: center; position: relative;} .global_gnb:before {content: ""; display: block; height: 1px; background: #000; position: absolute; left: 0; right: 0; bottom: 0} .global_gnb h1 {padding: 30px 0 20px;font-size: initial;} .global_gnb .gnb_tab {position: relative; z-index: 1} .global_gnb .gnb_tab li {display: block; float: left; width: calc(100% / 9);} .global_gnb .gnb_tab:after {display: block; clear: both; content: ""} .global_gnb .gnb_tab li a { display: block; height: 40px; line-height: 40px; background: #000; color: #fff; font-size: 14px; box-sizing: border-box; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .global_gnb .gnb_tab li a span {font-weight: bold} .global_gnb .gnb_tab li.m01 a {background: #399235} .global_gnb .gnb_tab li.m02 a {background: #015b41} .global_gnb .gnb_tab li.m03 a {background: #1d448f} .global_gnb .gnb_tab li.m04 a {background: #ff8400} .global_gnb .gnb_tab li.m05 a {background: #ffc300} .global_gnb .gnb_tab li.m06 a {background: #ffa0c0} .global_gnb .gnb_tab li.m07 a {background: #e14479} .global_gnb .gnb_tab li.m08 a {background: #6838b1} .global_gnb .gnb_tab li.m09 a {background: #9a1b1e;} .global_gnb .gnb_tab li.active a {background: #fff; color: #000;} .global_gnb .gnb_tab li:hover a {background: #fff; color: #000;} /**/ #wrap{ position:relative; min-width:1100px;} #header{ position:relative; height:126px; padding:45px 0 0 0; z-index:5;} #header.on{ background-color:#f7f7f7; } #header h1.logo{ position:absolute; top:30px; left:50%; width:66px; margin-left:-550px;} #header h1.logo>a{ height:66px; display:block; text-indent:-9999px; background:url(../images/logo.png) 50% 50% no-repeat; } #header .header-top{ position:absolute; top:0; right:50%; height:45px; line-height:45px; margin-right:-550px;} #header .header-top li{ display:inline-block; } #header .header-top li a{ position:relative; display:block; color:#0b7a40; font-size:14px; padding:0 14px;} #header .header-top li a:hover{ text-decoration:underline;} #header .header-top li a:after{ content:""; position:absolute; display:block; background-color:#a7bebf; width:1px; height:13px; top:50%; right:0; margin-top:-7px;} #header .header-top li.lang a{ display:block; color:#0b7a40; font-size:14px; padding:0 10px 0 14px; color:#333; font-size:13px; font-weight:bold;} #header .header-top li.lang a:after, #header .header-top li:last-child a:after{ display:none;} #header .header-sch{ position:absolute; top:0; right:50%; margin-right:-550px; border:#ebebec 1px solid; border-radius:20px; width:260px; padding:0 60px 0 0; background-color:#fff;} #header .header-sch .input{ width:100%; height:40px; border:none; border-radius:20px; text-indent:20px; color:#333;} #header .header-sch .bt-search{ position:absolute; top:0; right:0; width:60px; height:40px; background:url(../images/bt_search.png) 50% 50% no-repeat; display:block; text-indent:-9999px;} #header .sub-bg{ position:absolute; top:125px; left:0; height:376px; width:100%; border-top:#e6e5e5 1px solid; background-color:#f7f7f7; z-index:3; display:none;} #gnb-wrap{ position:relative; z-index:9;} #gnb{ position:relative; width:1100px; margin:0 auto; padding:0 0 0 100px; z-index:4;} #gnb>li{ float:left;} #gnb>li>a{ position:relative; display:block; font-size:21px; color:#000; padding:10px 15px 0; line-height:1; height:80px; } #gnb>li>a:hover, #gnb>li:hover>a, #gnb>li.top_2th_ov>a{ color:#06954a; } #gnb>li>a:after{ content:""; position:absolute; display:block; width:100%; height:3px; background-color:#06954a; bottom:0; left:0; opacity:0; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;} #gnb>li>a:hover:after, #gnb>li:hover>a:after{ content:""; display:block; opacity:1;} #gnb>li>.subdepth{ position:absolute; top:78px; left:0; width:100%; padding:42px 0 0 102px; height:376px; display:none;} #gnb>li.gnb1>.subdepth{ padding-left:102px;} #gnb>li.gnb3>.subdepth{ padding-left:30px;} #gnb>li.gnb4>.subdepth{ padding-left:30px;} #gnb>li.gnb5>.subdepth{ padding-left:35px;} #gnb>li.gnb6>.subdepth{ padding-left:20px;} #gnb>li>.subdepth>li{ float:left; width:150px; margin-bottom:5px;} #gnb>li>.subdepth>li:nth-child(3n+1){ clear:both;} #gnb>li>.subdepth>li>a{ position:relative; display:block; line-height:30px; font-size:18px; color:#444; padding-left:12px;} #gnb>li>.subdepth>li>a:after{ content:""; position:absolute; top:50%; left:0; margin-top:-2px; width:3px; height:3px; display:block; border-radius:50%; background-color:#a6a6a6;} #gnb>li>.subdepth>li>a:hover, #gnb>li>.subdepth>li.top_3th_ov>a{ color:#06954a; text-decoration:underline;} #gnb>li>.subdepth>li>a:hover:after, #gnb>li>.subdepth>li.top_3th_ov>a:after{ background-color:#06954a;} .coming{ width:410px; line-height:130px; color:#1d963f; font-size:24px; text-align:center;} .gnb-brn{ position:absolute; top:106px; right:50%; margin-right:-550px; display:none; z-index:9;} .gnb-brn .item{ float:left;} .gnb-brn .item+.item{ margin-left:5px;} #container{ position:relative; z-index:2; margin:0;} #container>#content{ position:relative; width:1100px; margin:0 auto; padding:0 0 100px 0;} .tit-area>h2{ text-align:center; line-height:1; padding:60px 0; color:#222; font-size:48px; font-weight:normal; margin:0;} .tit-area>h2.lg{ font-size:100px; color:#06954a; text-transform:uppercase; font-weight:bold;} .tit-area>.sub-tx{ margin-top:-30px; text-align:center; font-size:18px; color:#222;} .tit-area.line>h2{ border-bottom:#0f6347 3px solid; width:1100px; margin:0 auto;} #footer{ position:relative; background-color:#f7f7f7; z-index:3; padding:50px 0;} #footer .footer-wrap{ width:1100px; margin:0 auto; display:table;} #footer .footer-wrap .footer-info{ position:relative; display:table-cell; width:285px; vertical-align:top; position:relative;} #footer .footer-wrap .footer-info address{ margin-top:15px; font-size:11px; color:#666; font-family: 'Nanum Barun Gothic','돋움', '굴림', Dotum, Gulim, sans-serif;} #footer .footer-wrap .footer-info .copy{ color:#118f4c; font-size:11px; font-family: 'Nanum Barun Gothic','돋움', '굴림', Dotum, Gulim, sans-serif;} #footer .footer-wrap .footer-info .footer-brn{ position:relative; margin-top:90px; width:285px; } #footer .footer-wrap .footer-info .footer-brn>a{ display:block;} #footer .footer-wrap .footer-info .footer-brn>a.shopping{ width:307px; display:block; margin-left:-25px;} #footer .footer-wrap .footer-info .footer-brn>a.shopping>img{ width:307px;} #footer .footer-wrap .footer-info .family-site{ margin-top:5px; } #footer .footer-wrap .footer-info .family-site>a{ position:relative; display:block; border:#eaeaea 1px solid; background-color:#fff; line-height:36px; padding:0 0 0 15px; font-size:13px; color:#666;} #footer .footer-wrap .footer-info .family-site>a:after{ content:""; position:absolute; top:50%; right:13px; margin-top:-6px; width:15px; height:12px; display:block; background:url(../images/blt_family.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-info .family-site>ul{ position:absolute; bottom:36px; left:0; width:100%; border:#eaeaea 1px solid; background-color:#fff; display:none;} #footer .footer-wrap .footer-info .family-site>ul>li>a{ padding:0 15px; font-size:13px; line-height:30px;} #footer .footer-wrap .footer-bx{ position:relative; display:table-cell; width:815px; vertical-align:top; padding:0 0 0 36px;} #footer .footer-wrap .footer-bx:after{content:'';display:block;clear:both;height:0px;visibility:hidden;} #footer .footer-wrap .footer-bx .footer-link{ border-top:#0f6347 2px solid; border-bottom:#0f6347 2px solid;} #footer .footer-wrap .footer-bx .footer-link:after{content:'';display:block;clear:both;height:0px;visibility:hidden;} #footer .footer-wrap .footer-bx .footer-link li{ float:left; margin-right:40px;} #footer .footer-wrap .footer-bx .footer-link li>a{ display:block; line-height:40px; font-size:15px; color:#666; padding:0 20px 0 0; background:url(../images/dot_green.png) 100% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-link li>a:hover{color:#06954a;} #footer .footer-wrap .footer-bx .footer-gnb{ padding:0 0 18px 0; border-bottom:#0f6347 2px solid;} #footer .footer-wrap .footer-bx .footer-gnb:after{content:'';display:block;clear:both;height:0px;visibility:hidden;} #footer .footer-wrap .footer-bx .footer-gnb>li{ float:left;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb1{ width:110px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb2{ width:120px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb3{ width:88px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb4{ width:106px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb5{ width:100px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb7{ width:110px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb6{ width:86px;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb8{ width:55px;} #footer .footer-wrap .footer-bx .footer-gnb>li>a{ display:block; padding:18px 0; font-size:15px; color:#222;} #footer .footer-wrap .footer-bx .footer-gnb>li>a:hover{ text-decoration:underline;} #footer .footer-wrap .footer-bx .footer-gnb>li.gnb7>a, #footer .footer-wrap .footer-bx .footer-gnb>li.gnb8>a{ color:#0b7a40;} #footer .footer-wrap .footer-bx .footer-gnb>li>.subdepth>li>a{ font-size:12px; color:#666; display:block; line-height:22px;} #footer .footer-wrap .footer-bx .footer-gnb>li>.subdepth>li>a:hover{ color:#06954a; text-decoration:underline;} #footer .footer-wrap .footer-bx .footer-bn{ position:absolute; top:120px; right:75px;} #footer .footer-wrap .footer-bx .footer-link2{ padding:23px 0; float:left;} #footer .footer-wrap .footer-bx .footer-link2:after{content:'';display:block;clear:both;height:0px;visibility:hidden;} #footer .footer-wrap .footer-bx .footer-link2 li{ float:left;} #footer .footer-wrap .footer-bx .footer-link2 li a{ display:block; line-height:1; padding:0 15px; font-size:12px;} #footer .footer-wrap .footer-bx .footer-link2 li a:hover{ color:#06954a; text-decoration:underline;} #footer .footer-wrap .footer-bx .footer-link2 li:first-child a{ padding-left:0;} #footer .footer-wrap .footer-bx .footer-link2 li.privacy a{ color:#0f6347;} #footer .footer-wrap .footer-bx .footer-sns{ float:right; padding:8px 0 0 0;} #footer .footer-wrap .footer-bx .footer-sns li{ float:left; margin:0 0 0 6px;} #footer .footer-wrap .footer-bx .footer-sns li a{ display:block; width:43px; height:43px; text-indent:-9999px;} #footer .footer-wrap .footer-bx .footer-sns li.sns1 a{ background:url(../images/footer_sns1.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns2 a{ background:url(../images/footer_sns2.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns3 a{ background:url(../images/footer_sns3.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns4 a{ background:url(../images/footer_sns4.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns5 a{ background:url(../images/footer_sns5.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns1 a:hover{ background:url(../images/footer_sns1_over.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns2 a:hover{ background:url(../images/footer_sns2_over.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns3 a:hover{ background:url(../images/footer_sns3_over.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns4 a:hover{ background:url(../images/footer_sns4_over.png) 50% 50% no-repeat;} #footer .footer-wrap .footer-bx .footer-sns li.sns5 a:hover{ background:url(../images/footer_sns5_over.png) 50% 50% no-repeat;} #footer .footer-eve{ position:absolute; top:170px; left:50%; margin-left:380px; } #back-top{ position:fixed; bottom:574px; right:50%; border-radius:50%; margin:0 -586px 0 0; z-index:6; width:38px; height:38px; background:url(../images/top.png) 50% 50% no-repeat; display:block; padding:15px 0 0 0; cursor:pointer;text-indent:-9999px;} /* BreadCrumb */ .location{ position:relative; z-index:3; background:#f5f5f5; margin:0; border-top:#e9e9e9 1px solid; border-bottom:#e9e9e9 1px solid;} .location:after{ content:''; display:block; clear:both; height:0; visibility:hidden;} .location .path{ width:1100px; margin:0 auto;} .location .path>li{ position:relative; float:left; line-height:40px; min-width:140px; text-align:left;} .location .path>li>a{ display:block; padding-left:14px; color:#666; line-height:40px; padding-right:40px; border-left:#e9e9e9 1px solid; font-weight:400; } .location .path>li>span{ display:block; padding-left:14px; color:#666; line-height:40px; padding-right:16px; border-left:#e9e9e9 1px solid; } .location .path>li>a:after{ content:""; position:absolute; top:50%; right:20px; margin-top:-2px; width:10px; height:5px; display:inline-block; background:url(../images/blt_loc.png) 50% 50% no-repeat;} .location .path>li.on>a, .location .path>li>a:focus, .location .path>li>a:hover{ text-decoration:underline} .location .path>li>a img{vertical-align:0} .location .path>li:first-child{ margin-left:0; padding-left:0; background-image:none; width:66px; min-width:66px; } .location .path>li:first-child>a:after{ display:none;} .location .path>li:first-child>a{ width:66px; line-height:40px; padding-right:0; background:url(../images/icon_home.png) 50% 50% no-repeat; text-indent:-9999px; border-left:#e9e9e9 1px solid;} .location .path>li:first-child>a:hover, .location .path>li:first-child>a:focus{ } .location .path>li:last-child{ min-width:160px;} .location .path>li:last-child>a, .location .path>li:last-child>span{ border-right:#e9e9e9 1px solid; color:#222;} .location .path .sub-path{ display:none; position:absolute; top:40px; left:0; z-index:30; width:100%;} .location .path .sub-path.show,.location .path .low_path.show .location .path > li.on .sub-path,.location .path > li:hover .sub-path{ display:block;} .location .path .sub-path ul{ background-color:#fff; border:1px solid #e7e7e7;} .location .path .sub-path ul li{ position:relative; border-top:1px solid #e7e7e7;} .location .path .sub-path ul li:first-child{ border-top:0 none;} .location .path .sub-path ul li > a{ display:block; min-width:100%; height:32px; padding:0 10px 0 14px; color:#333; line-height:32px;} .location .path .sub-path ul li.on > a , .location .path .sub-path ul li > a:focus, .location .path .sub-path ul li > a:hover{ background-color:#f9f9f9; color:#0f6347;} /* select-box */ span.select-boxBox{ position:relative; display:inline-block; min-width:120px; height:40px; border:1px solid #d4d4d4; background:#fff url('../images/blt_search.png') no-repeat 100% 50%; color:#b2b2b2; font-size:14px; line-height:1.2; vertical-align:middle; z-index:99; text-align:left;} span.select-boxBox:focus, span.select-boxBox:hover{ border:#06954a 1px solid; z-index:100;} span.select-boxBox .selected{ display:block; height:38px; line-height:38px; padding:0 20px 0 10px; color:#333; text-align:left;} span.select-boxBox .selected:hover{ text-decoration:none;} span.select-boxBox>ul{ overflow:auto; position:absolute; z-index:100; max-height:120px; border:1px solid #e1e1e1; background-color:#fff; color:#b2b2b2; font-size:14px; line-height:1.2; cursor:default;} span.select-boxBox>ul li a{height:30px; line-height:30px; padding:0 0 0 6px; display:block; color:#b2b2b2;} span.select-boxBox>ul li a:hover{text-decoration:none;} span.select-boxBox>ul li.hover, ul.select-type1 li a:focus{background-color:#dedede;} span.select-boxBox2{ position:relative; display:inline-block; min-width:100px; height:32px; border:1px solid #d4d4d4; background:#fff url('../images/blt_search.png') no-repeat 100% 50%; color:#b2b2b2; font-size:14px; line-height:1.2; vertical-align:middle; z-index:99;} span.select-boxBox2:focus, span.select-boxBox2:hover{ border:#06954a 1px solid; z-index:100;} span.select-boxBox2 .selected{ display:block; height:30px; line-height:30px; padding:0 20px 0 10px; color:#333;} span.select-boxBox2 .selected:hover{ text-decoration:none;} span.select-boxBox2>ul{ overflow:auto; position:absolute; z-index:100; max-height:120px; border:1px solid #e1e1e1; background-color:#fff; color:#b2b2b2; font-size:14px; line-height:1.2; cursor:default;} span.select-boxBox2>ul li a{height:30px; line-height:30px; padding:0 0 0 6px; display:block; color:#b2b2b2;} span.select-boxBox2>ul li a:hover{text-decoration:none;} span.select-boxBox2>ul li.hover, ul.select-type1 li a:focus{background-color:#dedede;} .chosen-container{ font-size:14px; text-align:left;} .chosen-container-single .chosen-single{ height:40px; line-height:38px; border:1px solid #d4d4d4; color:#b2b2b2; border-radius:0; box-shadow:none; background:none; background-color:#fff;} .chosen-container-single .chosen-single span{ line-height:38px; color:#333;} .chosen-container-single .chosen-single div{ width:23px;} .chosen-container-single .chosen-single div b{/* background:url('../images/blt_search.png') no-repeat 100% 50%;*/ background-size: 75px 37px !important;} .chosen-container-single .chosen-drop{ border-radius:0; border:1px solid #d4d4d4; background:none; background-color:#fff;} .chosen-container-active.chosen-with-drop .chosen-single{ border:1px solid #d4d4d4; box-shadow:none; background:none; background-color:#fff;} .chosen-container .chosen-results{ padding:0; margin-right:0;} .chosen-container .chosen-results li.highlighted{ background-image:none; background-color:#dedede; color:#333;} table .chosen-container-single .chosen-single{ height:32px; line-height:30px; border:1px solid #d4d4d4; color:#b2b2b2; border-radius:0; box-shadow:none; background:none; background-color:#fff;} table .chosen-container-single .chosen-single span{ line-height:30px; color:#333;} .product-wr .chosen-container-single .chosen-single{ height:50px; line-height:48px;} .product-wr .chosen-container-single .chosen-single span{ line-height:48px; color:#333;} /* table */ .tbl-hd{ margin:20px 0; line-height:40px; color:#222;} .tbl-hd:after{ content:''; display:block; clear:both; height:0; visibility:hidden;} .tbl-hd .tit{ font-size:20px; color:#222; font-weight:normal; padding:0 0 0 20px; line-height:40px;} .tbl-hd .right{ float:right;} .tbl-hd .sel-grp{ float:right;} .tbl-hd .sel-grp:after{ content:''; display:block; clear:both; height:0; visibility:hidden;} .tbl-hd .sel-grp span.select-boxBox{ float:left;} .tbl-hd .sel-grp span.select-boxBox+span.select-boxBox{ margin-left:-1px;} .tbl-hd .sel-grp .chosen-container{ float:left; margin-left:-1px;} .tbl-hd .inp-grp{ float:right; position:relative; width:368px; padding:0 80px 0 0;} .tbl-hd .inp-grp .input{ border:#c7c7c7 1px solid; border-right:none; width:100%; line-height:40px; height:40px;} .tbl-hd .inp-grp .bt-search{ position:absolute; top:0; right:0; background-color:#0f6347; color:#fff; text-align:center; line-height:40px; height:40px; width:80px; display:block;} .tbl-hd.bgcolor{ background-color:#f7f7f7; padding:20px; text-align:center;} .tbl-hd.bgcolor .sel-grp{ float:none;} table.write{ width:100%; border-collapse:separate; *border-collapse:collapse; border-spacing:0px; clear:both; table-layout:fixed; background:#fff; border-top:#0f6347 2px solid; } table.write tbody th{ padding:12px 0 12px 30px; text-align:left; font-size:14px; color:#222; font-weight:normal; vertical-align:middle; background-color:#f7f7f7; border-bottom:#dbdbdb 1px solid;} table.write tbody td{ padding:12px 20px; text-align:left; vertical-align:middle; border-bottom:#dbdbdb 1px solid;} table.list{ width:100%; border-collapse:separate; *border-collapse:collapse; border-spacing:0px; clear:both; table-layout:fixed; background:#fff; border-top:#0f6347 2px solid;} table.list thead th{ padding:15px 0; text-align:center; font-size:16px; color:#222; background-color:#f7f7f7; font-weight:normal; border-bottom:#b7b7b7 1px solid;} table.list tbody td{ padding:18px 0; text-align:center; border-bottom:#dbdbdb 1px solid;} table.list tbody td.l{ text-align:left;} table.data{ width:100%; border-collapse:separate; *border-collapse:collapse; border-spacing:0px; clear:both; table-layout:fixed; background:#fff; border-top:#e3e3e3 1px solid; border-left:#e3e3e3 1px solid;} table.data thead th{ padding:15px 0; text-align:center; font-size:14px; color:#222; background-color:#f5f5f5; font-weight:normal; border-bottom:#e3e3e3 1px solid; border-right:#e3e3e3 1px solid;} table.data tbody td{ padding:18px 0; text-align:center; border-bottom:#e3e3e3 1px solid; border-right:#e3e3e3 1px solid;} table.data tbody td.l{ text-align:left;} /* 이전글/다음글 */ .viewBottomList{ margin:0;} .viewBottomList .viewBottomPrev{padding:0 10px 0 135px; height:50px; line-height:50px; position:relative; border-bottom:#e6e7e8 1px solid;} .viewBottomList .viewBottomNext{padding:0 10px 0 135px; height:50px; line-height:50px; position:relative; border-bottom:#e6e7e8 1px solid;} .viewBottomList .orderPrev{ vertical-align:middle; position:absolute; top:0; left:0; width:118px; line-height:50px; padding-left:60px; font-size:16px; color:#444;} .viewBottomList .orderNext{ vertical-align:middle; position:absolute; top:0; left:0; width:118px; line-height:50px; padding-left:60px; font-size:16px; color:#444;} .viewBottomList .orderPrev:after, .viewBottomList .orderNext:after{ content:""; position:absolute; top:50%; right:0; margin-top:-7px; width:1px; height:13px; display:block; background-color:#e6e7e8; } .viewBottomList .orderPrev:before, .viewBottomList .orderNext:before{ content:""; position:absolute; width:28px; height:28px; display:block; border-radius:50%; border:#0f6347 2px solid; top:50%; left:24px; margin-top:-14px;} .viewBottomList .orderPrev:before{ background:url(../images/arr_t.png) 50% 50% no-repeat;} .viewBottomList .orderNext:before{ background:url(../images/arr_d.png) 50% 50% no-repeat;} .viewBottomList a{ text-overflow:ellipsis; overflow:hidden; display:block; white-space:nowrap; height:50px; line-height:50px; font-size:16px;} .viewBottomList .viewBottomPrev:hover, .viewBottomList .viewBottomNext:hover{ background-color:#f8f8f8;} .viewBottomList .viewBottomPrev:hover a, .viewBottomList .viewBottomNext:hover a{ color:#222; text-decoration:underline;} /* paging */ div.paging{ text-align:center; padding:0; margin:40px 0 0 0; position:relative;} div.paging a, div.paging span{ display:inline-block; width:24px; height:24px; border:none; background:#fff; line-height:24px; font-size:12px; text-align:center; margin:0 2px; color:#777; vertical-align:middle; } div.paging a:hover, div.paging a.on{ color:#06954a; font-weight:bold; text-decoration:underline;} div.paging .direction, div.paging .direction:hover{ text-indent:-9999px; width:24px; border:#dbdbdb 1px solid;} div.paging .direction.prev{ background:#fff url(../images/paging_prev.png) 50% 50% no-repeat; margin:0 5px 0 -5px;} div.paging .direction.next{ background:#fff url(../images/paging_next.png) 50% 50% no-repeat; margin:0 -5px 0 5px;} div.paging .direction.fir{ background:#fff url(../images/paging_first.png) 50% 50% no-repeat; margin:0;} div.paging .direction.last{ background:#fff url(../images/paging_last.png) 50% 50% no-repeat; margin:0;} div.paging .direction.prev:hover{ background:#fff url(../images/paging_prev_on.png) 50% 50% no-repeat; } div.paging .direction.next:hover{ background:#fff url(../images/paging_next_on.png) 50% 50% no-repeat; } div.paging .direction.fir:hover{ background:#fff url(../images/paging_first_on.png) 50% 50% no-repeat; } div.paging .direction.last:hover{ background:#fff url(../images/paging_last_on.png) 50% 50% no-repeat; } .bt-more a{ background-color:#f5f5f5; text-align:center; display:block; border:#e6e7e8 1px solid; line-height:50px;} .bt-more a:hover{ text-decoration:underline;} .bt-more a em{ color:#222;} /* tab */ .div-tab ul:after{ content:''; display:block; clear:both; height:0; visibility:hidden;} .div-tab li{ float:left; } .div-tab ul.n2 li{ width:50%;} .div-tab ul.n3 li{ width:33.3%;} .div-tab ul.n5 li{ width:20%;} .div-tab li a{ display:block; line-height:50px; text-align:center; background-color:#f5f5f5; border:#e6e7e8 1px solid; border-left:none; font-size:16px; color:#666;} .div-tab li:first-child a{ border-left:#e6e7e8 1px solid;} .div-tab li.active a, .div-tab li a:hover{ background-color:#fff; border-bottom:#fff 1px solid; color:#222;} .tag-list{ text-align:center; padding:25px 170px 0; } .tag-list a{ position:relative; color:#222; display:inline-block; margin:0 12px; line-height:34px;} .tag-list a:hover, .tag-list a.on{ color:#06954a; text-decoration:none;} .tag-list a:hover:after, .tag-list a.on:after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background-color:#06954a;} /* ul, ol */ .num-list li{ text-indent:-15px; padding-left:15px;} .num-list li+li{ margin-top:10px;} .ul-list01 li{ text-indent:-11px; padding-left:11px;} .ul-list01 li+li{ margin-top:3px;} .ul-list01 li:before{ content:""; width:3px; height:3px; display:inline-block; background-color:#06954a; vertical-align:middle; margin-right:8px;} .ul-list02 li{ text-indent:-18px; padding-left:18px;} .ul-list02 li+li{ margin-top:8px;} .ul-list03 li{ text-indent:-8px; padding-left:8px;} .ul-list03 li+li{ margin-top:8px;} /* popup */ .bPopup{ display:none; width:600px;} .bPopup .pop-tit{ line-height:70px; margin:0; color:#fff; background-color:#0f6347; font-size:20px; padding:0 30px;} .bPopup .pop-con{ padding:40px 30px; background-color:#fff;} .bPopup .bt-close{ position:absolute; top:24px; right:24px; width:22px; height:22px; background:url(../images/bt_close.png) 50% 50% no-repeat; text-indent:-9999px; display:block;} .pop-email .mail-tx{ font-size:16px;} .pop-email .mail-tx strong{ color:#222;} body#popup{ background-color:#133f30; } .pop-wrap{ background-color:#0f6347;} .pop-wrap .pop-con img{ width:100%; max-width:100%; display:block;} .pop-wrap .pop-slide{ padding:0; } .pop-wrap .pop-slide .slide{ position:relative;} .pop-wrap .pop-slide .item img{display:block;} .pop-wrap .pop-slide .bx-pager{ position:absolute; bottom:0; left:0; width:100%; text-align:center; margin:22px 0 0 0; padding:0; height:15px;} .pop-wrap .pop-slide .bx-pager .bx-pager-item{ display:inline-block; margin:0 5px;} .pop-wrap .pop-slide .bx-pager .bx-pager-item a{ background:#134e3a; width:15px; height:15px; display:block; border-radius:50%; text-indent:-9999px;} .pop-wrap .pop-slide .bx-pager .bx-pager-item a.active{ background-color:#fff;} .pop-wrap .pop-slide .bt-next{ display:block; width:288px; margin:16px auto 0; font-size:20px; color:#fff; text-align:center; height:52px; line-height:52px; border-radius:26px; border:#fff 2px solid; } .pop-wrap .pop-bottom{ position:fixed; bottom:0; left:0; width:100%; background-color:#133f30; line-height:52px; padding:0; } .pop-wrap .pop-bottom:after{ content:''; display:block; clear:both; height:0; visibility:hidden;} /* .pop-wrap .pop-bottom a{ display:block; color:#fff; line-height:52px; width:50%; float:left; text-align:center; border-top:#103528 1px solid;} */ .pop-wrap .pop-bottom a{ display:block; color:#fff; line-height:52px; text-align:center; border-top:#103528 1px solid;} .pop-wrap .pop-bottom a.bt-close{ border-left:#103528 1px solid;} .quick_wing {position: fixed; right: 0; top:50%; margin-top: -150px; z-index:10} .quick_wing li {vertical-align: top; display: block} .quick_wing li a {display: block; height: 155px} .quick_wing li a.mall {height: 148px} /* 실바니안 히스토리관 */ .sylva_history_door {background: url('../images/shistory/bg_pt.jpg'); text-align:center; padding: 100px 0} .gallery-history {background: url('../images/shistory/bg_pt.jpg'); padding-bottom: 100px; overflow-x: hidden} .gallery-history .title_image{ width: 350px; margin-left: auto; margin-right: auto; display: block; padding-top: 124px; } .chapter_content .part_boxed{ position: relative; width: 1000px; margin-left: auto; margin-right: auto; position: relative; padding-bottom: 94px; } .chapter_content {background: url('../images/shistory/bg_visual.jpg') no-repeat center top; background-size: 100% auto;} .chapter_content .part_boxed .title_image2{margin-top: 95px;} .chapter_content .part_boxed .card_container{position: relative;} .chapter_content .part_boxed .card_container .card{ position: relative; margin-top: 100px; text-align: center; } .chapter_content .ab_1{ position: absolute; top: 13px; right:-118px; overflow-x: hidden; } .chapter_content .ab_2{ position: absolute; top: -98px; left: -147px; overflow-x: hidden; } .chapter_content .ab_3{ position: absolute; right: -77px; top: 99px; overflow-x: hidden; } .chapter_content .ab_4{ position: absolute; top: -75px; left: -288px; overflow-x: hidden; } .chapter_content .ab_5{ position: absolute; bottom: 0; right: -172px; overflow-x: hidden; } .photo_sylva { background: url('../images/shistory/group.jpg')50% 0 no-repeat fixed; overflow: hidden; background-size: cover; height: 636px; width: 100%; } .frame_outer:after{ display: block; clear: both; content: ""; margin-bottom: 124px; } .frame_boxed{ margin-left: auto; margin-right: auto; width: 1000px; position: relative; padding-top: 103px; } .frame_boxed:after {display: block; clear: both; content: ""} .frame_boxed li{ list-style: none; } .frame_boxed .frame_02{ float:left } .frame_boxed .frame_03{ position: relative; float: right; margin-top: -295px; } .frame_boxed .frame_04{ float: right; } .frame_boxed .frame_05{ position: relative; float: left; margin-top: 67px; } /*------------------------------------------------------------- */ .gallery-history .s_img{ width:100%;} .gallery-history .paper{ max-width: 1400px; padding:100px 0; margin: 0 auto; background: white; position: relative; z-index: 1; } .gallery-history .paper .history_title {display: block; text-align: center; margin-bottom: 20px} .gallery-history .paper .paper_inner{} .gallery-history .paper:before{ content: ''; display: block; width: 2px; position: absolute; left: 70px; top: 210px; bottom: 100px; background: #DB002A; } /*----------------*/ .year_title{ position: relative; font-size: 2.6rem; font-weight: 700; line-height: 1; padding-left: 50px; margin-left: -37px; color: #000; } .year_title:before{ content: ''; display: block; width: 16px; height: 16px; background: #DB002A; border-radius: 50%; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .year_title:after{ content: ''; display: inline-block; width: 12px; height: 1px; margin-bottom: 4px; vertical-align: middle; margin-left: 10px; background: #000000; } .historyBox {padding: 0 100px} .historyBox:after {display: block; clear: both; content: ""} .historyBox li { float: left; display: block; width: 25%; margin-bottom: 2%; } .historyBox .ff{ position: relative; padding: 0 5%; text-align: center; margin-top: 5%; } .historyBox span{ display: flex; justify-content: center; align-items: center; width: 74px; height: 34px; border-radius: 37px; background: #fff; position: absolute; top: 10px; left: 33px; z-index: 2; font-weight: 500; padding-top: 2px; color: #000; font-weight: bold; } /*********** 달님이 애니메이션+인형 페이지 **********/ @font-face { font-family: 'NEXON_Lv1_Light'; font-weight: normal; src: url(../font/nexon/NEXON_Lv1_Light.eot); src: url(../font/nexon/NEXON_Lv1_Light.eot?#iefix) format('embedded-opentype'), url(../font/nexon/NEXON_Lv1_Light.woff) format('woff'), url(../font/nexon/NEXON_Lv1_Light.ttf) format('truetype'); } @font-face { font-family: 'NEXON_Lv1'; font-weight: normal; src: url(../font/nexon/NEXON_Lv1.eot); src: url(../font/nexon/NEXON_Lv1.eot?#iefix) format('embedded-opentype'), url(../font/nexon/NEXON_Lv1.woff) format('woff'), url(../font/nexon/NEXON_Lv1.ttf) format('truetype'); } @font-face { font-family: 'NEXON_Lv1_Bold'; font-weight: normal; src: url(../font/nexon/NEXON_Lv1_Bold.eot); src: url(../font/nexon/NEXON_Lv1_Bold.eot?#iefix) format('embedded-opentype'), url(../font/nexon/NEXON_Lv1_Bold.woff) format('woff'), url(../font/nexon/NEXON_Lv1_Bold.ttf) format('truetype'); } .about_dalnim {height: 750px; background: url('../images/brand/dalnim/main_dalnim.jpg') no-repeat center center} .about_dalnim a {height: 750px; display: block;} .dalnim_wrap {position: relative; font-family: 'NEXON_Lv1'; color: #333} .dalnim_wrap .visual {background: linear-gradient(to bottom, #cee7f7, #eed0e3);} .dalnim_wrap .visual .pic {height: 1209px; background: url('../images/brand/dalnim/dalnim_visual.jpg') no-repeat center top} .dalnim_wrap .description {text-align: center; background: #eed0e3; padding-bottom: 100px} .dalnim_wrap .description .copy {display: block; padding: 0 0 30px} .dalnim_wrap .description .copy dt {font-size: 50px; font-family: 'NEXON_Lv1_Bold'; font-weight: normal; color: #3d304b; margin-bottom: 30px; letter-spacing: -1px} .dalnim_wrap .description .copy dt em {color: #ed2f82; font-family: 'NEXON_Lv1_Bold'; font-weight: normal; } .dalnim_wrap .description .copy dd {font-size: 18px; line-height: 1.8em; font-family: 'NEXON_Lv1';} .dalnim_wrap .description .box {background: #fff; margin: auto 100px; padding: 100px 0; border-radius: 30px} .dalnim_wrap .description .pic {position: relative; margin-bottom: -200px} .dal_logo01 {position: absolute; left: 50px; top:50px;} .dal_logo02 {position: absolute; right: 50px; top:50px;} .dalnim_feature {max-width: 1100px; margin: auto; padding: 100px 0} .dalnim_feature:after {display: block; clear: both; content: ""} .dalnim_feature ul {display: block; clear: both} .dalnim_feature ul.one .copy, .dalnim_feature ul.two .copy {height: 615px} .dalnim_feature .pic {display: block; width: 50%; float: left} .dalnim_feature .copy {display: table; width: 50%; float: left; height: 670px;} .dalnim_feature .copy dl {display: table-cell; vertical-align: middle; text-align: center} .dalnim_feature .copy dt {color: #333; display: block; margin-bottom: 30px} .dalnim_feature .copy dt p {font-size: 30px;font-family: 'NEXON_Lv1_Bold'; color: #333} .dalnim_feature .copy dt h3 {font-size: 44px;font-family: 'NEXON_Lv1_Bold'; color: #333} .dalnim_feature .copy dd {font-size: 18px; line-height: 1.8em; font-family: 'NEXON_Lv1';} .dalnim_feature .even .pic {float: right} .dalnim_animation {clear: both; background: #457824; padding: 0 0 100px} .dalnim_animation .visual {position: relative} .dalnim_animation .visual img {width: 100%; vertical-align: top} .dalnim_animation .visual .logo {position: absolute; left: 50%; top:50%; margin:-400px 0 0 -225px} .dalnim_animation .vodBox {max-width: 1000px; margin: -100px auto 0} .dalnim_animation .txt {text-align: center; margin: 50px 0 0 0;} .dalnim_animation .txt dt {font-size: 60px;font-family: 'NEXON_Lv1_Bold'; color: #fff} .dalnim_animation .txt dt em {font-family: 'NEXON_Lv1_Bold'; color: #fff567} .dalnim_animation .txt dd {font-size: 18px; line-height: 1.8em; font-family: 'NEXON_Lv1'; color: #fff} .dalnim_animation .btn_wrap {text-align: center; margin-top: 50px} .dalnim_animation .btn_wrap .btn_link {display: inline-block; padding: 10px 50px; border-radius: 50px; font-size: 30px; font-family: 'NEXON_Lv1_Bold'; color: #457824; background: #fff } .dalnim_time {text-align: center; background: #fbd0e1; padding: 30px 0 50px} .section_title {text-align: center; clear: both; margin-bottom: 50px} .section_title .title {display: inline-block; width: 468px; height: 103px; font-family: 'NEXON_Lv1_Bold'; color: #fff; font-size: 50px; line-height: 105px; background: url('../images/brand/dalnim/bg_title.png') no-repeat center center; letter-spacing: -1px} .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoWrapper video{ position: absolute; overflow: hidden; right: 0; bottom: 0; top:0; right:0; min-width: 100%; min-height: 100%; width: auto; height: auto; background-size: 100% 100%; background-color: black; /* in case the video doesn't fit the whole page*/ background-image: /* our video */; background-position: center center; background-size: contain; object-fit: cover; /*cover video background */ z-index:-1; } /* 애니메이션 */ section {opacity: 1;} section.on [class*="fade_in"] {opacity: 0;} section .fade_in_up, section .fade_in_left, section .fade_in_right {opacity: 0} section.on .fade_in_up{ animation-name: fadeInUp; animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99); animation-fill-mode: forwards; animation-delay:0; } section.on .fade_in_up:nth-child(1){animation-delay:0} section.on .fade_in_up:nth-child(2){animation-delay:0.5s} section.on .fade_in_up:nth-child(3){animation-delay:1s} section.on .fade_in_up:nth-child(4){animation-delay:1.5s} section.on .fade_in_up:nth-child(5){animation-delay:2s} section.on .fade_in_up:nth-child(6){animation-delay:2.5s} section.on .fade_in_up:nth-child(7){animation-delay:3s} section.on .fade_in_up:nth-child(8){animation-delay:3.5s} section.on .fade_in_up:nth-child(9){animation-delay:4s} section.on .fade_in_up:nth-child(10){animation-delay:4.5s} section.on .fade_in_left{ animation-name: fadeInLeft; animation-duration: 1s; animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99); animation-fill-mode: forwards; animation-delay:.5s; } section.on .fade_in_left:nth-child(1){animation-delay: 0} section.on .fade_in_left:nth-child(2){animation-delay: 1s} section.on .fade_in_left:nth-child(3){animation-delay: 2s} section.on .fade_in_left:nth-child(4){animation-delay: 3s} section.on .fade_in_right{ animation-name: fadeInRight; animation-duration: 1s; animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99); animation-fill-mode: forwards; animation-delay:.5s; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @media screen and (max-width: 1300px) { .dalnim_wrap .description .box {margin: 0 50px} .dalnim_animation .vodBox {margin: -100px 50px 0;} .dalnim_animation .visual .logo {margin: -240px 0 0 -150px} .dalnim_animation .visual .logo img {width: 300px} .dalnim_wrap .description .copy dt {font-size: 40px} .dalnim_feature .copy dt h3 {font-size: 40px} .dalnim_wrap .description .pic img {width: 60%} .dalnim_wrap .visual .pic {background-size:1200px; height: 1000px} .dalnim_animation .txt dt {font-size: 50px} } .as_cmt .cmt-tx {margin-bottom: 10px; font-size: 15px}