body,input,select,textarea {font-family: 'Noto Sans CJK', sans-serif;} /* ALL STYLE */ #all {width:100%; min-width: 1300px; overflow:hidden; font-weight: 400;} .layout_wrap {clear:both; width:100%;} .layout_inner {width:1200px; margin:0 auto;} .userFullWidth {width:1200px;} .userCWidth {width:820px;} .userCWidth2 {width:1200px;} .width100 {width:100%;} /* 상단영역 */ #top_wrap {clear: both; height: 120px; text-align: center; background-color: #fff; position: relative; z-index: 9999; font-weight: 300;} #top_wrap * {background-repeat: no-repeat;} #top_wrap #wrap {width: 100%; box-shadow: 0 1px 0 rgba(0,0,0,0.15);height: 100%;} #top_wrap #wrap .inner {width: 1200px; margin: 0 auto; position: relative;} #top_wrap .wrap_line {width: 100%; height: 1px; background-color: #d6d6d6; position: absolute; left: 0; bottom: 0;} #top {height: 100%;} #top_area .all_wrap {float: right; position:relative; z-index: 99;} #top_area .all_inner_wrap {position:relative;} #top_area .wrap {width: 138px; height: 45px; border-left: 1px solid #404455; border-right: 1px solid #404455; background: #1c2131;} #top_area .arrow {width: 7px; height: 5px; background-image: url(/images/share/top_arrow.png); position: absolute; top: 20px; right: 25px;} #top_area .options {width:138px; height: 45px;line-height: 45px; border: 1px solid #404455; background: #1c2131; margin-bottom:-1px;} #top_area .options:hover {background-color: #0f121d;} #top_area .options:hover .opt_text {font-weight: 500; letter-spacing: -0.2px; text-decoration: underline;} #top_area .opt_text {color: #00f3ff; float:left; font-size: 12px; line-height: 45px; margin-left: 20px;} #top_area .hiddens {display:none; background-color:#fff; position:absolute; top: 45px;} #top_btn {float: right; width: 100%; background: #f5f5f5; border-bottom: 1px solid #ddd; padding: 5px 0;} #top_btn ul {float: right;} #top_btn li {float:left;} #top_btn li a {display: block; color: #555; font-size: 13px; line-height: 150%;} #top_btn li a:hover {} #top_btn li a.admin {color: #f19149;} #top_btn li.top_btn_line { margin: 0px 8px; height: 20px; width: 1px;} /*#top_wrap #wrap.jbFixed {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 80px; background-color: #fff;} #top_wrap #wrap.jbFixed #top_logo {float: left; margin-top: 14px;} #top_wrap #wrap.jbFixed #top_area {display: none;} #top_wrap #wrap.jbFixed #top {height: 80px;} #top_wrap #wrap.jbFixed .top_search {margin-top: 24px;} #top_wrap #wrap.jbFixed #top_menu {margin: 0; height: 80px; float: right; margin-right: 60px; position: initial;} #top_wrap #wrap.jbFixed #top_menu tr {margin: 0;} #top_wrap #wrap.jbFixed #top_menu tr td {height: 80px; line-height: 80px;} #top_wrap #wrap.jbFixed #top_menu tr td>a {} #top_wrap #wrap.jbFixed #top_menu .sub_menu {top: 80px;} #top_wrap #wrap.jbFixed #top_menu .sub_menu li {line-height: 45px;} #top_wrap #wrap.jbFixed #top_menu .sub_bg {top: 80px;} #top_wrap #wrap.jbFixed #top_menu tr.sub_bg td {height: 1px;} */ #top_logo {float: left; margin: 20px 0;} #top_logo a {float: left;} #top_logo img {float: left;} .top_search {float: right; margin-top: 44px;} .top_search .searchBar {width: 200px; height: 30px; position: relative; overflow: hidden; border-bottom: 1px solid #2a2f42;} .top_search .input_search {float: left; width: 171px; height: 30px; margin: 0; padding: 0; padding-left: 5px; border: 0 none; font-size: 14px; line-height: 28px; color: #2a2a2a; outline: none; ime-mode:active; background-color: transparent; position: relative; z-index: 2;} .top_search .btn_search {position: absolute; right: 0; top: 5px; overflow:hidden; width: 20px; height: 20px; border: 0 none; cursor: pointer; padding: 0; margin: 0; background-color: transparent; z-index: 2;} .top_search .btn_search img {position: absolute; right: 0; top: 0; padding: 3px;} .top_search.on u {width: 392px; height: 40px; box-sizing: border-box; border: 2px solid #323232; position: absolute; top: 0; left: 0; z-index: 1; border-radius: 4px;} .top_search *:focus {outline: none;} /*입력 창 글자 설정 S*/ .top_search input {font-weight: 400; font-size: 14px;} .top_search input::-webkit-input-placeholder {color: #adadad; font-size: 14px;} .top_search input::-moz-input-placeholder {color: #adadad; font-size: 14px;} .top_search input:-moz-input-placeholder {color: #adadad; font-size: 14px;} .top_search input:-ms-input-placeholder {color: #adadad; font-size: 14px;} /*입력 창 글자 설정 E*/ #top_menu {z-index: 990; width: 980px; position: relative; float: right;} #top_menu .layout_inner {position: relative;} #top_menu tr {} #top_menu tr td {font-size: 17px; text-align: center; margin: 0; position: relative; font-weight: 500; padding: 0; width: auto;line-height: 89px;height: 89px; border: none;} #top_menu tr td > a {color: #000; position: relative; font-size: 19px; width: 80%; padding: 10px;} .lt-ie9 #top_menu tr td>a {font-weight: 600;} #top_menu tr td > a > i {width: 100%; height: 0; left: 0; bottom: -16px; position: absolute; z-index: 999; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; } #top_menu tr td:hover a {color: #2a2f42;} #top_menu tr td:hover i {background: #2a2f42; height: 3px;} #top_menu .sub_menu {position: absolute; top: 74px; left: 0px; padding: 15px 0; width: 100%; z-index: 99; text-align: center; display: none; font-weight: 400;} #top_menu .sub_menu li { position: relative; z-index: 99; float: left; width: 100%;} #top_menu .sub_menu a {font-size: 16px; color: #313131; z-index: 999999;width: 100%;line-height: 250%;float: left;} #top_menu .sub_menu .line {position: absolute; top: 0; right: 0; background: #eee; width: 1px; height: 100%;} #top_menu .sub_menu .linel {left: 0;} #top_menu .sub_menu li:hover {z-index: 999;} #top_menu .sub_menu li span {position: relative;} #top_menu .sub_menu li span i {position: absolute; width: 0; height: 1px; background: #555; bottom: 0; left: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; } #top_menu .sub_menu li:hover span {font-weight: 500;} #top_menu .sub_menu li:hover span i {width: 100%;} #top_menu .sub_bg {position: absolute; width: 1000%; background-color: #fff; z-index: -1; top: 74px; left: -500%; border-bottom: 1px solid #000; opacity: .97; display: none;} .ie7 #top_menu .sub_menu .line {top: -1px;} .ie7 #top_menu .sub_bg {margin: 0; border-top: 1px solid #eee;} #top_menu .sub_bg td {width: 1000%; height: 1px; background-color: #eee; position: absolute; top: 0; left: -500%; z-index: 1;} #top_menu .sub_bg td.bottom {bottom: 0;} /*헤더 콘텐츠 영역 */ #contain_wrap {} #contain {/*overflow:hidden;*/ width: 1200px;} #containV {overflow:visible;} #left {clear:both; float:left; position: relative; z-index: 900;} #content {float:left; width: 1200px; margin-top: 60px; position: relative;} #pages {/*display: inline-block;*/ position: relative;} /* 비주얼 영역 */ /* 레프트 영역 & 서브타이틀 */ #LeftMenu {position: relative;} #LeftMenu .left_top {position: relative;} /* 다국어줄바꿈 */ /* #left_navi 메뉴 css goto!!! /css/style_left.css */ #subTitle {height: 100%; width: 100%; font-weight: 300; position: absolute; z-index: 9; left: 0;top: 0;} #subTitle .sub_title {height: 100%; width: 100%; text-align: center; margin: 0 auto;} .sub_title .maps_title {line-height: 240px; height: 100%; vertical-align: middle; font-size: 36px; position: relative; color: #fff;} .sub_title .maps_navi {height: 24px; line-height: 24px; margin-top: 48px; letter-spacing: -1px;display: none;} .sub_title .maps_navi img {float: left; margin: 6px 3px;} .sub_title .maps_navi span {float: left; color: #6a6a6a; font-size: 14px;} .sub_title .maps_navi .first_navi {color: #acacac;} .sub_title .maps_navi .arrow {margin: 4px 9px;} /*마이오피스*/ #subTitle .maps_title2 {line-height: 220px; height: 220px; vertical-align: middle; font-size: 36px; position: relative; color: #fff; font-weight: 300; text-align: center; top: -15px;} /* #content .stit {overflow: hidden; width: 100%; margin: 30px 0;} #content .stit p {font-size: 26px; color: #c2a88e; float: left; line-height: 26px;} #content .stit span {width: 100%; height: 2px; background: #c2a88e; display: block; margin-top: 2px;} */ /*카피라이터 영역 */ #sitemap_a {height:50px; background:#1c2335; margin-top:60px;} #sitemap_a ul {height:50px;} #sitemap_a ul li {display:block; float:left;} #sitemap_b {background:#3b4766;padding-bottom:17px;} #sitemap_b ul {float:left; margin-top:17px;} #sitemap_b ul li {text-indent:11px; line-height:25px; background:url(/images_kr/share/sitemap_dot.gif) 0 9px no-repeat;} #sitemap_b a {color:#878fa4;} .sitemap01 {width:160px;} .sitemap02 {width:217px;} .sitemap03 {width:157px;} .sitemap04 {width:212px;} .sitemap05 {width:127px;} .sitemap06 {width:127px;} #rolling_area {height:100px; background:url(/images_kr/share/rolling_bg.png) 0 0 repeat-x; margin-top:40px;} #DB_banner10 {position:relative;width:960px; margin-left:20px;} #DB_banner10 .DB_mask{height:90px;line-height:90px;width:960px;;position:relative;overflow:hidden;} #DB_banner10 ul{white-space:nowrap;font-size:0; margin-top:10px;} #DB_banner10 ul li{display:inline;} #DB_banner10 ul li a{padding:0px 10px} #DB_banner10 ul li a img{vertical-align:middle;} #DB_banner10 .DB_prev{position:absolute;top:40px;left:-20px} #DB_banner10 .DB_next{position:absolute;top:40px;right:-20px} #bottom_wrap {clear: both; float: left; background: #242627; margin-top: 50px; font-weight: 300;} #bottom_wrap .layout_inner {position: relative; overflow: hidden;} #bottom_wrap div.top {position: absolute; top: 0; right: 0; cursor: pointer;} #bottom_wrap span.tit {color: #fff; font-size: 19px; line-height: 21px; font-weight: 400; margin-top: 45px; display: block;} #bottom_wrap .bottom_menu {margin-top: 35px;} #bottom_wrap .bottom_menu ul {margin: 0 -27px; width: 100%; overflow: hidden;} #bottom_wrap .bottom_menu li {float: left;margin: 0 17px;} #bottom_wrap .bottom_menu li a {float: left; padding: 10px; line-height: 18px; color: #e7e7e7; font-size: 16px;} #bottom_wrap .bottom_menu i {width: 1px; height: 16px; background: #4d4d4d; float: left; margin: 12px 7px;} #bottom_wrap .bottom_menu .bold a {} #bottom_wrap .bottom_menu .bold span {width: 100%; height: 2px; background: #aaa; display: block; margin-top: 4px;} #bottom_wrap #bottom {margin-top: 18px; overflow: hidden;} #bottom_wrap .bottom_info {float: left;} #bottom_wrap .bottom_info p {margin-left: -18px;} #bottom_wrap .bottom_info span {margin: 0 18px; font-size: 15px; line-height: 160%; color: #a0a0a0;} #bottom_wrap p.copyright {margin: 50px 0; font-size: 12px; line-height: 150%; color: #8d8d8d; letter-spacing: 0.5px; text-align: center;} #bottom_wrap .bottom_bn {float: right; margin-top: 15px;} #bottom_wrap .bottom_bn .bn {float: left; margin-left: 5px;} #bottom_wrap .all_wrap2 {position: absolute; right: 0; bottom: 95px; z-index: 99;} #bottom_wrap .all_inner_wrap {position:relative;} #bottom_wrap .wrap {width: 160px; height: 45px; border: 1px solid #686868; background: #4f4f4f;} #bottom_wrap .arrow {width: 7px; height: 5px; background-image: url(/images/share/bottom_arrow.png); position: absolute; top: 20px; right: 25px;} #bottom_wrap .options {width:160px; height: 45px;line-height: 45px; border: 1px solid #686868; background: #4f4f4f; margin-bottom:-1px;;} #bottom_wrap .options:hover {background-color: #353535;} #bottom_wrap .options:hover .opt_text {font-weight: 500; letter-spacing: 0.4px; text-decoration: underline;} #bottom_wrap .opt_text {color: #fff; font-size: 12px; line-height: 45px; margin-left: 20px; letter-spacing: 0.6px} #bottom_wrap .all_wrap2 .hiddens {display:none; position:absolute; top: 44px;} /*인덱스 영역 */ #indexWrap {clear:both; overflow: hidden;} /*#mainVisual_Wrap {width:100%;height:680px;margin:0 auto; overflow:hidden;clear:both;} #mainVisual {height:680px;margin:0 auto;} #mainVisual .mainVisual_a {margin-left:-399px;position:relative;width:2000px;height:680px;} #mainVisual .visual_img{position:relative;} #mainVisual .visual_img li{position:absolute;width:2000px;height:680px;} #mainVisual .visual_img span {position: absolute; z-index: 9;} #mainVisual .visual_img img {position: relative; z-index: 9;} #mainVisual #visual_menu {position: absolute; bottom: 143px; z-index: 99; width: 100%; text-align: center;} #mainVisual .visual_menu {display: inline-block;} .ie7 #mainVisual .visual_menu {display: inline; zoom: 1;} #mainVisual .visual_menu li {width: 8px; height: 8px; border-radius: 8px; margin: 0 5px; background: #fff; float: left; cursor: pointer; opacity: .7; transition: width .1s, height .1s, margin .1s; -webkit-transition: width .1s, height .1s, margin .1s; -moz-transition: width .1s, height .1s, margin .1s; -o-transition: width .1s, height .1s, margin .1s; } #mainVisual .visual_menu li.DB_select {width: 14px; height: 14px; margin: -3px 5px; opacity: 1;} .lt-ie9 #mainVisual .visual_menu li {background: url(/images/index/dot_off.png);} .lt-ie9 #mainVisual .visual_menu li.DB_select {background: url(/images/index/dot_on.png);}*/ /*기타*/ #subVisuals {width: 100%; overflow: hidden;height: 100%;} #subVisualWrap {position:relative; width: 1200px; height: 240px; margin: 0 auto;} #subVisualWrapD2 {width: 100%; height: 260px; overflow: hidden; margin: 0 auto;} #subVisualWrapD1 {clear: both; z-index: 105; width: 2000px; overflow: hidden; margin-left: -400px;height: 100%;} #subVisuals li {width: 2000px; height: 260px; background-repeat: no-repeat; background-size: 100%;} #subVisuals p {position: absolute; z-index: 9; color: #fff;} #subVisuals .v01 p {position: absolute; z-index: 10; color: #fff; text-align: right; right: 400px;} #subVisuals .v01 .p01 {font-size: 40px; line-height: 44px; font-weight: 500; top: 60px;} #subVisuals .v01 .p02 {font-size: 15px; line-height: 24px; font-weight: 300; letter-spacing: -0.4px; top: 120px;} /*ie8*/ @media \0screen {#subVisuals .v01 p {margin-left: -600px;}} .csul {background:url(/upload/category/cate110_bg.gif) 0 0 repeat-x;} /*#pages .map {border:1px solid #cccccc; width:818px; height: 498px;}*/ .titleLine {height:35px;} .titleLine .navi {margin-top:10px; font-size:8pt; color:#a5c0c8;} .titleLine .navi a {color:#a5c0c8;} .titleLine .navi a:hover {color:#508c9e;} /* COMMON */ #login {overflow:hidden;} #login .login_bg {border:0px none; background:url(/images_kr/login/input_bg.png) 0 0 no-repeat; line-height:30px; height:30px; padding:0px 12px; width:337px;} #login {width:600px; padding-bottom:30px; margin:0px auto; margin-top:20px; overflow:hidden;} #login .underline {border-bottom:1px solid #e7e7e9; text-align:center; padding:40px 0px;} #login .in_area {width:600px; } #login .login_left {margin-top:38px; margin-left:50px;} #login .login_left .types {height:30px; line-height:30px;} #login .login_left .types label {margin-left:8px;} #login .login_left .types label span {margin-left:3px;} #login .login_left .types label:first-child {margin-left:0px;} #login .login_area {margin-top:15px;} #login .login_area span.input {display:block;padding-right:14px; background:url(/images_kr/login/input_bg_right.png) right 0 no-repeat; width:420px;} #login .login_area span.input input {border:0px none;} #login .login_area span.typespan {display:block;} #login .login_area .cleft {margin-top:3px;} #login .login_right { margin-top:38px; margin-right:50px;} #login .login_btn {margin-top:30px !important; width:100%; text-align:center;} #login .login_btn ul {margin-left:70px;} #login .login_btn li {float:left; margin-left:15px;} #login .login_btn li:first-child {float:left; margin-left:0px;} #login .login_alert {font-size:11px; margin-top:20px; background-color:#f9f9f9; border:1px solid #cdcdcd; padding:20px;} #login .login_alert li {line-height:16px;} /* 팝업관련 */ #pop_all {width:100%;} #pop_all .top {clear:both;width:100%; background:url(/images_kr/admin/pop/pop_top_bg.jpg) 0 0 repeat-x;} #pop_all .bottom {clear:both;width:100%; background:url(/images_kr/admin/pop/pop_bottom_bg.gif) 0 0 repeat-x; height:60px;} #pop_all .bottom .info {clear:both;float:left;} #pop_all .bottom .btn_area {float:right;} #popAll1 {width:100%;} #popAll1 .top {clear:both;width:100%; background:url(/images_kr/admin/pop/popAll1_bg.gif) 0 0 repeat-x;} #popAll1 .bottom {clear:both;width:100%; background:url(/images_kr/admin/pop/pop_bottom_bg.gif) 0 0 repeat-x; height:60px;} #popAll1 .bottom .info {clear:both;float:left;} #popAll1 .bottom .btn_area {float:right;} /* 공통영역 */ .input_chk {vertical-align:middle; margin:0px 0px 2px 0px;} .input_chk2 {vertical-align:middle; margin:0px 0px 0px 0px; padding:0px;width:13px; height:13px;} .input_chk3 {vertical-align:middle; margin:0px 0px 3px 0px; padding:0px;width:13px; height:13px;} .input_radio {vertical-align:middle; margin:0px 0px 3px 0px; padding:0px;width:13px; height:13px;} .notBor {border:0px none !important;} /* 카테고리 */ .category_left {float:left;} .category_right {float:right;} .categoryTable th, .categoryTable td {border:1px solid #cfcfcf;padding:4px 0px;} .categoryTable th {background-color:#f4f4f4;} .categoryTable li {float:left; padding:8px 14px;} .cateList td {text-align:center;} .cateList td .bors1 {border:2px solid #e5e5e5; width:200px;} .cateList td.cateComment {padding-top:4px;} .cateList td.cateSubject {padding:6px 0px;font-weight:bold; color:#000;} .cateList td.catePrice {color:#ccc;} .cateList td.cateCustomer {font-weight:bold; color:#f09d1a;} .cateList td.cateIcon {padding:4px 0px;} .SubCate {clear:both;float:left; width:768px; border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;} .SubCate .parentCateTd {text-align:center; font-weight:bold; font-size:13pt;} .SubCate .subCateTd {text-align:center; font-weight:bold; font-size:11pt;} /* 인덱스 */ /* Member_join Style */ .notData {padding:30px 0px; text-align:center;} .inLiImg li img {display:block;} #counsel {margin-top:25px;} #counsel th {border:1px solid #ccc; height:32px; background-color:#eee;} #counsel td {border:1px solid #ccc; padding:4px 0px; padding-left:7px;} #counsel .input_text {border:1px solid #ccc; padding:2px;} #counsel .input_area {border:1px solid #ccc; padding:2px;} #counsel .submitArea {padding:20px 0px; text-align:center;} #pages .agree_box {clear:both; width:778px;border:1px solid #9e9e9e;margin-top:5px;background:#e0e0e0;} #pages .agree_content1 {width:762px; height:550px; margin:2px;border:1px solid #c7c7c7;overflow-y:scroll;background:#fff;padding:5px;} #pages .agree_content2 {width:330px;height:550px; margin:2px;border:1px solid #c7c7c7;overflow-y:scroll;background:#fff;padding:5px;} /*index css*/ .goods_wrap {width: 1200px; margin: 0 auto; text-align: center; overflow: hidden;} .goods_wrap .tit {color: #373737; font-size: 28px; line-height: 32px; font-weight: 500; margin-top: 37px;} .goods_wrap .stit {color: #959595; font-size: 15px; line-height: 19px; margin-top: 10px;} .goods_wrap .list {width: 1200px; font-size: 0; margin-top: 32px;} .goods_wrap .list ul {display: inline-block; *display: inline; zoom: 1;} .goods_wrap .list li {width: 200px; height: 45px; line-height: 45px; float: left; margin: 0 5px;} .goods_wrap .list a {color: #686868; font-size: 15px; display: block; width: 198px; height: 43px; border: 1px solid #e5e5e5; border-radius: 40px; background: #f8f8f8;} .goods_wrap .list .on a {color: #fff; border-color: #3b3ebb; background: #3b3ebb;} .goods_wrap .inner {width: 1230px; margin: 20px -15px; overflow: hidden; font-size: 0;} .goods_wrap .goods {width: 260px; height: 460px; padding: 9px; margin: 15px 13px; border: 1px solid #e5e5e5; position: relative; display: inline-block; *display: inline; zoom: 1;} .goods_wrap .goods .img {width: 258px; height: 258px; position: relative; z-index: 5; border: 1px solid #e5e5e5; overflow: hidden;} .goods_wrap .goods a {display: block;} .goods_wrap .goods .img a {width: 100%; height: 100%;} .goods_wrap .goods .img img {position: absolute; top: 50%; left: 50%; margin-top: -129px; margin-left: -129px;} .goods_wrap .goods .txt {text-align: left; padding: 0 10px; margin-top: 20px; position: relative; z-index: 5;} .goods_wrap .goods .txt .p01 {color: #9e9e9e; font-size: 14px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;/*길어진 텍스트 ...로 자르기*/} .goods_wrap .goods .txt .p02 {color: #3a3a3a; font-size: 16px; line-height: 20px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .goods_wrap .goods ul {overflow: hidden; padding: 0 10px; margin-top: 20px; position: relative; z-index: 5;} .goods_wrap .goods li {width: 100%; float: left; margin: 5px 0;} .goods_wrap .goods li p {line-height: 20px;} .goods_wrap .goods li .p01 {color: #797979; font-size: 14px; float: left;} .goods_wrap .goods li .p02 {font-size: 15px; font-weight: 500; text-align: right; float: right; margin-top: -2px;} .goods_wrap .goods li .p02 span {margin-right: 5px; font-size: 18px;} .goods_wrap .goods .li01 .p02 {color: #f6685f;} .goods_wrap .goods .li02 .p02 {color: #797979;} .goods_wrap .goods .btn {padding: 0 10px; overflow: hidden; margin-top: 6px; position: relative; z-index: 5;} .goods_wrap .goods .btn div {height: 32px; text-align: center;} .goods_wrap .goods .btn a {border-radius: 4px;} .goods_wrap .goods .btn p {display: inline-block; *display: inline; zoom: 1;} .goods_wrap .goods .btn i {display: inline-block; *display: inline; zoom: 1;} .goods_wrap .goods .btn .bt01 {width: 110px; float: left; line-height: 30px;} .goods_wrap .goods .btn .bt01 a {height: 30px; border: 1px solid #f6685f;} .goods_wrap .goods .btn .bt01 p {color: #f6685f; font-size: 14px; font-weight: 500;} .goods_wrap .goods .btn .bt01 .p02 {text-align: right;} .goods_wrap .goods .btn .bt01 i {width: 1px; height: 10px; background: #f6685f; margin: 0 3px;} .goods_wrap .goods .btn .bt01 span {margin-right: 1px;} .goods_wrap .goods .btn .bt02 {width: 120px; float: right; line-height: 32px;} .goods_wrap .goods .btn .bt02 a {height: 32px; background: #6c6c6c;} .goods_wrap .goods .btn .bt02 p {color: #ededed; font-size: 13px; margin-left: 6px; } .goods_wrap .goods .btn .bt02 i {width: 17px; height: 13px; background: url(/images/index/goods_cart.png); float: right; margin: 10px 0; margin-right: 14px;} .goods_wrap .goods u {position: absolute; top: -1px; left: -1px; width: 274px; height: 474px; border: 3px solid #000; display: none; z-index: 0;} .goods_wrap .goods:hover u {display: block;} #index_btn .img .on {opacity: 0; filter: alpha(opacity=0); transition: opacity .3s; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; } /*오시는길*/ .maps {width: 580px; position: relative;} .maps .tit {font-size: 26px;color: #2a2a2a;} .maps .map {width: 100%; height: 500px; margin: 15px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1), 0 1px 30px rgba(0,0,0,0.1);border: 1px solid #aaa;} #pages .add {width: 100%; margin-top: 20px; position: relative; padding-top: 10px;} #pages .add i {width: 30px; background: #014F7F; position: absolute; left: 0; height: 3px; top: 0;} #pages .add p {color: #2a2a2a; font-size: 25px; line-height: 150%; text-align: left; word-break: keep-all; font-weight: 300;} #pages .add .p02 {font-weight: 500; font-size: 20px;} /*준비중 페이지*/ .ready {width: 100%; height: 100%; min-height: 500px; text-align: center; font-weight: 400; overflow: hidden; position: relative;} .ready .img {width: 100%; height: 100%; background: url(/images/content/ready.png) no-repeat center 0; position: absolute; top: 0; left: 0; z-index: 1;} .ready .color {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #555; z-index: 0; display: none;} .ready .tit {margin-top: 265px; position: relative; z-index: 2;} .ready .tit p {font-size: 45px; line-height: 50px; color: #696b6c;} .ready .tit span {font-weight: 600; font-size: 48px; color: #333; margin: 0 5px;} .ready .stit {font-size: 18px; line-height: 24px; color: #959595; margin-top: 25px; position: relative; z-index: 2;} #pages .con.com03 .wrap_controllers {display: none;} #pages .con.com03 .root_daum_roughmap_landing {margin-top: 40px;} /*floating2*/ #floating2 {width: 100px; overflow: hidden; text-align: center;} #floating2 .tit {width: 100%; height: 60px; background-color: #f19913;} #floating2 .tit p {color: #fff; font-size: 16px; font-weight: 500; line-height: 60px; letter-spacing: -1px;} #floating2 .con {background-color: #f9f9f9; border: 1px solid #dcdcdc; overflow: hidden;} #floating2 p {letter-spacing: -0.3px;} #floating2 ul {margin: 11px 0; width: 98px; display: block;} #floating2 li {margin: 6px 0; display: inline-block; *display: inline; zoom: 1;} #floating2 a {width: 80 px; float: left; cursor: pointer;} #floating2 i {width: 51px; height: 50px; display: block; background-image: url(/images_kr/share/quick_sns.png); background-size: 51px; margin: 3px auto;} #floating2 li p {color: #6d6d6d; font-size: 13px; line-height: 15px; font-weight: 500;} #index_btn {height: 440px; font-weight: 300; text-align: center; background: #eceade;} #index_btn .layout_inner {height: 440px;} #index_btn li {float: left; position: relative; width: 600px; height: 410px; z-index: 10;} #index_btn .index_btn {margin-top: -70px;} #index_btn .index_btn a {width: 100%; height: 410px; float: left; cursor: pointer;} #index_btn .index_btn span {position: relative; z-index: 1; color: #fff; width: 100%; display: block;} #index_btn .index_btn .img {position: absolute; top: 0; left: 0; z-index: 0;} #index_btn .index_btn .img i {position: absolute; z-index: 1; width: 100%; height: 410px; top: 0; left: 0; background: linear-gradient(130deg, #48a770, #49adab); mix-blend-mode: multiply; opacity: 0; transition: opacity .3s; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; } .lt-ie10 #index_btn .index_btn .img i {background: none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F48A770,endColorstr=#7F49ADAB); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F48A770,endColorstr=#7F49ADAB); zoom: 1; } .lt-ie9 #index_btn .index_btn .img i {display: none;} #index_btn .index_btn .tit {font-size: 34px; line-height: 36px; margin-top: 80px;} #index_btn .index_btn .txt {font-size: 15px; line-height: 28px; font-weight: 400; margin-top: 20px;} #index_btn .index_btn div {width: 160px; height: 50px; margin: 80px auto; position: relative; z-index: 99; line-height: 50px; font-size: 14px; font-weight: 400; color: #fff; transition: box-shadow .15s; -webkit-transition: box-shadow .15s; -moz-transition: box-shadow .15s; -o-transition: box-shadow .15s; } #index_btn .index_btn div i {width: 160px; height: 50px; border: 2px solid #fff; position: absolute; top: 0; left: 0; opacity: .8; z-index: 0; background: transparent; transition: background .15s, opacity .15s; -webkit-transition: background .15s, opacity .15s; -moz-transition: background .15s, opacity .15s; -o-transition: background .15s, opacity .15s; } #index_btn .index_btn a:hover .img i {opacity: .9;} #index_btn .index_btn a:hover div {box-shadow: 0 10px 20px rgba(0,0,0,0.2);} #index_btn .index_btn a:hover div i {background: #fff; opacity: 1;} #index_btn .index_btn a:hover div span {color: #1D755F; font-weight: 600;} .is-ie #index_btn .index_btn a:hover .img i {opacity: .5;} .lt-ie9 #index_btn .index_btn a:hover .img i {display: block;} #index_btn .index_notice {background: #fff; margin-top: -30px;} .index_notice .inner {margin: 40px; width: 520px;} .index_notice span {width: 100%; display: block; line-height: 30px; position: relative; z-index: 1;} .index_notice dl {overflow: hidden; font-weight: 500; margin: 10px; float: left;} .index_notice a {display: block; cursor: pointer;} .index_notice dt {width: 88px; height: 88px; float: left; text-align: center; margin-right: 30px; position: relative; color: #414141; border: 1px solid #dedede; background: #f2f2f2;} .index_notice dt .tit {font-size: 20px; margin-top: 15px;} .index_notice dt .txt {font-size: 13px;} .index_notice dt i {width: 90px; height: 90px; background: linear-gradient(135deg, #60a74a, #418a67); position: absolute; top: -1px; left: -1px; z-index: 0; opacity: 0; transition: opacity .15s; -webkit-transition: opacity .15s; -moz-transition: opacity .15s; -o-transition: opacity .15s; } .lt-ie10 #index_btn .index_notice dt i {background: url(/images/index/index_notice.jpg);} .lt-ie9 #index_btn .index_notice dt i {display: none;} .index_notice dd {float: left; width: 380px; height: 60px; margin: 15px 0; overflow: hidden; text-overflow: ellipsis; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .index_notice dd span {text-align: left;} .index_notice dd .tit {color: #414141; font-size: 16px; font-weight: 600;} .index_notice dd .txt {color: #8d8c8c; font-size: 15px; text-indent: 2px;} .index_notice dl:hover dt {color: #fff;} .index_notice dl:hover dt i {opacity: 1;} .index_notice dl:hover dd span {text-decoration: underline;} .lt-ie9 #index_btn .index_notice dl:hover dt i {display: block;} .index_notice table {width: 100%; font-size: 18px; line-height: 28px; height: 330px;} .index_notice td {vertical-align: middle;} #indexWrap .tit p {text-align: left;} #indexWrap .tit .p01 {color: #343434; font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -2px;} #indexWrap .tit .p02 {color: #4f4f4f; font-size: 15px; line-height: 19px; font-weight: 300; letter-spacing: -0.6px;} #indexWrap .tit .line {margin: 18px 0; width: 100%; overflow: hidden;} #indexWrap .tit i {background: #ce2123; width: 60px; height: 2px; float: left;} #index_visual {text-align: center; height: 780px;overflow: hidden;} #index_visual .swiper-container {width: 1400px; height: 610px;margin: 80px auto 90px auto;position: relative;} #index_visual .swiper-inner {width: 540px;} #index_visual .swiper-slide {position: relative; text-align: center; width: 400px; height: 100%; opacity: .4;} #index_visual .swiper-slide .img {width: 100%; height: 100%; position: relative; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; } #index_visual .swiper-slide .img:before {content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle;} #index_visual .swiper-slide .img i {width: 0; height: 0; border-radius: 100%; background: #f5f6fb; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; } #index_visual .swiper-slide .img img {mix-blend-mode: multiply; transform: scale(0.7); vertical-align: middle; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; } #index_visual .swiper-slide .txt {position: absolute; width: 100%; top: 442px; left: 0; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; } #index_visual .swiper-slide .txt div {color: #111; font-size: 30px;line-height: 150%;letter-spacing: -2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;/*길어진 텍스트 ...로 자르기*/} #index_visual .swiper-slide .txt p {color: #898989; font-size: 15px;line-height: 150%; margin-top: 20px; padding: 0 50px; letter-spacing: -0.7px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;/*길어진 텍스트 ...로 자르기*/} #index_visual .swiper-slide-active {opacity: 1;} #index_visual .swiper-slide-active .img {height: 540px;} #index_visual .swiper-slide-active .img i {width: 540px; height: 540px;} #index_visual .swiper-slide-active .img img {transform: scale(1);} #index_visual .swiper-slide-active .txt {top: 470px;} #index_visual .swiper-slide-active .txt div {font-size: 38px;} #index_visual .swiper-slide-active .txt p {font-size: 18px; margin-top: 20px;} #index_visual .swiper-button {width: 70px; height: 70px; border-radius: 100%; border: none; opacity: .5; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s;top: 558px; } #index_visual .swiper-button-prev {background: #9ea5d1 url('/images/index/index_visual_prev.png') no-repeat center; left: 0;} #index_visual .swiper-button-next {background: #9ea5d1 url('/images/index/index_visual_next.png') no-repeat center; left: auto; right: 0;} #index_visual .swiper-button:hover {opacity: 1;} #bottom_visual {letter-spacing: -1px; background: #f5f5f5; overflow: hidden;padding: 85px 0 110px 0; } #bottom_visual .layout_inner {position: relative;} #bottom_visual .bottom_left {text-align: left; float: left; width: 380px;position: absolute;height: 140px; top: 0;left: 0;background: #f5f5f5;z-index: 999999;} #bottom_visual .bottom_left .swiper-text {display: none;} #bottom_visual .bottom_left .tit {color: #111; font-size: 44px; line-height: 150%; font-weight: 200;margin-top: 15px;} #bottom_visual .bottom_left .tit strong {font-weight: 500;} #bottom_visual .bottom_left .stit {color: #898989; font-size: 18px; line-height: 150%;} #bottom_visual .swiper-text {width: 380px; height: 380px;float: left;background: #f5f5f5; z-index: 9999999;position: relative;margin-top: 136px;} #bottom_visual .swiper-text .swiper-slide {width: 100%; float: left;height: 50px;} #bottom_visual .swiper-text a {color: #212121; font-size: 22px; font-weight: 400; line-height: 200%; width: 100%; height: 50px; float: left; text-align: left;position: relative;z-index: 9999;} #bottom_visual .swiper-text .box {width: 50px; height: 50px; line-height: 48px; text-align: center; border: 1px solid #e0e0e0; font-size: 18px; font-weight: 400; float: left; font-family: 'Gmarket Sans', 'Noto Sans CJK', sans-serif; letter-spacing: 0;} #bottom_visual .swiper-text .txt {margin-left: 20px; float: left; line-height: 46px; position: relative; width: 250px;height: 50px;} #bottom_visual .swiper-text .txt p {color: #212121; font-family: 'Noto Sans CJK', sans-serif;} #bottom_visual .swiper-text .txt span {width: 26px; height: 50px; position: absolute; right: 0; top: 0; background: url('/images/index/index_bn_more.png') no-repeat center; display: none;} #bottom_visual .swiper-text .txt i {width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: #111; display: none;} #bottom_visual .swiper-slide-thumb-active .box {background: #000; border-color: #000; color: #fff;} #bottom_visual .swiper-slide-thumb-active .txt span {display: block;} #bottom_visual .swiper-slide-thumb-active .txt i {display: block;} #bottom_visual .swiper-wrapper {width: 820px;} #bottom_visual .swiper-slide .inner {width: 820px; height: 510px; position: relative;} #bottom_visual .swiper-image {width: 100%; height: 510px;} #bottom_visual .swiper-image .img {width: 650px; height: 460px; overflow: hidden; float: right;} #bottom_visual .swiper-image .img + .txt {color: #fff;background: #354262;position: absolute;left: 0;bottom: 0;font-size: 16px;line-height: 180%;font-weight: 200;text-align: left;padding: 30px 30px;width: 360px; height: 340px; word-break: keep-all;} #bottom_visual .swiper-image .img + .txt p {margin-bottom: 15px;} #bottom_visual .swiper-image .img + .txt strong {font-weight: 500;} #bottom_visual .swiper-inner {width: 100%;} #bottom_visual .swiper-pagination {position: relative;width: 100%;float: left;left: 0;bottom: 0;font-size: 22px;font-weight: 400;line-height: 200%;} #bottom_visual .swiper-pagination-bullet {width: 100%;display: block;float: left;height: 50px;background: transparent;margin: 5px 0;position: relative;opacity: 1;} #bottom_visual .swiper-pagination-bullet-active .box {background: #000; border-color: #000; color: #fff;} #bottom_visual .swiper-pagination-bullet-active .txt span {display: block;} #bottom_visual .swiper-pagination-bullet-active .txt i {display: block;} /*#bottom_visual .swiper-button {} #bottom_visual .swiper-button-prev {} #bottom_visual .swiper-button-next {background: url('/images/index/index_bn_next.png') no-repeat center; top: 490px;}*/ #company {position: relative; width: 100%; overflow: hidden; float: left; clear: both;} #company * {word-break: keep-all; word-wrap: break-word;} #company em {font-style: normal;} .c01 {text-align: left; margin: 30px 0;} .c01 .top {width: 100%; height: 424px;} .c01 .fleft.img {width: 600px; height: 424px; background: url(/images/content/com01_01.jpg) no-repeat center;} .c01 .fright.txt {color: #343233; font-size: 32px; line-height: 48px; width: 600px; padding: 10px 25px; padding-right: 0;} .c01 .fright.txt em {color: #ba2129; letter-spacing: -1px;} .c01 .fleft.txt {color: #6a6a6a; font-size: 18px; line-height: 34px; padding: 30px 25px; padding-left: 0; width: 520px;} .c01 .fright.img {width: 655px; height: 410px; background: url(/images/content/com01_02.jpg) no-repeat center; margin-top: -280px;} .c02 {text-align: left; margin: 20px 0;} .c02 .tit {color: #343233; font-size: 32px; line-height: 48px; margin-bottom: 25px;} .c02 p {color: #6a6a6a; font-size: 18px; line-height: 34px; letter-spacing: -0.4px;} .c02 .stit {color: #343233; font-size: 22px; line-height: 34px; margin-top: 45px; margin-bottom: 10px;} .c02 .img {width: 570px; height: 330px; background: url(/images/content/com02_01.jpg) no-repeat center; margin-top: 10px;} .c02 .fright {padding-left: 30px; width: 630px;} /*마이오피스 서브타이틀*/ #content_M {} /*인트로*/ #intro {height: 900px; overflow: hidden; text-align: center; font-family: 'Spoqa Han Sans', 'Noto Sans CJK', sans-serif; background: #fff;} #intro table {width: 100%; height: 100%;} #intro td {width: 100%; height: 100%; vertical-align: middle; font-size: 0;} #intro a {position: relative; display: inline-block;} #intro .logo {width: 452px; height: 464px; background: url('/images/intro_logo(2).png') no-repeat center; margin: 0 auto; position: relative; z-index: 1;} #intro .bg {position: absolute; top: 50%; left: 50%; margin-top: -450px; margin-left: -450px; width: 900px; height: 900px; background: radial-gradient(#112b23, #112b23, #112b23, #2a5145, #6c9d8e 55%, transparent 70%); z-index: 0; animation: bgcolor 1s; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } #intro .txt {font-size: 40px; color: #ffffff; line-height: 150%; font-weight: 500; margin-top: 45px; position: relative; z-index: 1;} #intro .txt span {color: #ffffff; font-weight: 700;} #intro .txt span img{width: 240px;} #intro a:hover + .bg {width: 1200px; height: 1200px; margin-top: -600px; margin-left: -600px;} @keyframes bgcolor { 0% {width: 0; height: 0; margin: 0;} 50% {width: 1000px; height: 1000px; margin-top: -500px; margin-left: -500px;} 100% {width: 900px; height: 900px; margin-top: -450px; margin-left: -450px;} }