@CHARSET "UTF-8"; /* HEADER **********************************************************/ #nav { border: none; background: none; } #nav .gn_header .logo { display: none } #nav .gn_list>li>a { color: #fff } #nav .gn_list>li>a:BEFORE { background: url(/somang_new/common/images/common/ico_dot_w.png) no-repeat center center } #nav .gn_list>li:HOVER>a, #nav.fullpage_nav .gn_list>li.active>a { color: #0089d0 } #nav .gn_header .menu_mobile { background: url(/somang_new/common/images/common/btn_menu_m_w.png) no-repeat center center } #nav .gn_header .links .select_box { border: 1px solid #fff; background: url(/somang_new/common/images/common/ico_arrow_bottom.png) no-repeat 85px center; } #nav .gn_header .links .select_box>label { color: #fff } #nav .gn_header .links .selbox_lang .select_box { border: 1px solid #fff; background: url(/somang_new/common/images/common/ico_arrow_bottom.png) no-repeat 58px center; } #nav.fixed { border-bottom: 1px solid #cecece; background: #fff; } #nav.fixed .gn_list>li>a { color: #252525 } #nav.fixed .gn_list>li>a:BEFORE { background: url(/somang_new/common/images/common/ico_dot_b.png) no-repeat center center } #nav.fixed .gn_header .logo { display: block } #nav.fixed .gn_header .menu_mobile { background: url(/somang_new/common/images/common/btn_menu_m.png) no-repeat center center } #nav.fixed .gn_header .links .select_box { border: 1px solid #dcdcdc; background: #fff url(/somang_new/common/images/common/ico_arrow_bottom.png) no-repeat 85px center; } #nav.fixed .gn_header .links .select_box>label { color: #3e3e3e } #nav.fixed .gn_header .links .selbox_lang .select_box { border: 1px solid #dcdcdc; background: #fff url(/somang_new/common/images/common/ico_arrow_bottom.png) no-repeat 58px center; } /* CONTENT **********************************************************/ #container.fullpage { padding: 0 } .section { position: relative } .section .sec_warp { width: 800px; margin: 0 auto; } .section .sec_warp1 { width: 1200px; margin: 0 auto; } .section .sec_warp3 { width: 400px; margin: 0 auto; } .section:nth-child(3) .sec_warp { width: 1100px; margin: 0 auto; } .section h2 { height: 53px; margin: 0 0 52px 0; line-height: 53px; font-size: 20px; font-weight: 700; letter-spacing: 2.5px; text-align: center; background: url(/somang_new/common/images/common/ico_title_back.png) no-repeat center; } .section_01 { position: relative } .section_01 .slider { width: 100%; height: 100%; } .section_01 .bx-viewport, .section_01 .bx-wrapper { position: relative; width: 100%; top: 0; left: 0; } .section_01 .bx-viewport.important, .section_01 .bx-wrapper.important { height: 100% !important } .section_01 .bxslider, .section_01 .bxslider li { height: 100% !important } .section_01 .slider li { width: 100%; height: 100% !important; font-size: 0px; text-indent: -9999px; } .section_01 .slider li .img_slide_mobile { display: none } .section_01 .slide_01 { background: url(/somang_new/common/images/main/bg_sec01_04_1800.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_02 { background: url(/somang_new/common/images/main/bg_sec01_01_1800.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_03 { background: url(/somang_new/common/images/main/bg_sec01_02_1800.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_04 { background: url(/somang_new/common/images/main/bg_sec01_03_1800.jpg) no-repeat top center; background-size: cover; } .section_01 .controller { position: absolute; bottom: 2%; left: 0px; width: 100%; text-align: center; } .section_01 .controller .pager { display: inline-block; *display: inline; zoom: 1; margin: 0 5px 0 0; } .section_01 .controller .pager .bx-pager-item { display: inline-block; *display: inline; zoom: 1; margin: 0 5px 0 0; } .section_01 .controller .pager .bx-pager-item .bx-pager-link { display: block; width: 11px; height: 15px; font-size: 0px; text-indent: -9999px; background: url(/somang_new/common/images/common/btn_slide_control.png) no-repeat -72px 0px; } .section_01 .controller .pager .bx-pager-item .bx-pager-link.active { display: block; width: 62px; height: 15px; font-size: 0px; text-indent: -9999px; background: url(/somang_new/common/images/common/btn_slide_control.png) no-repeat 0px 0px; } .section_01 .controller .btns { display: inline-block; *display: inline; zoom: 1; } .section_01 .controller .btns .bx-controls-auto-item { display: inline-block; *display: inline; zoom: 1; margin: 0 5px 0 0; } .section_01 .controller .btns .bx-controls-auto-item .bx-start { display: block; width: 15px; height: 15px; font-size: 0px; text-indent: -9999px; background: url(/somang_new/common/images/common/btn_slide_control.png) no-repeat -118px 0px; } .section_01 .controller .btns .bx-controls-auto-item .bx-stop { display: block; width: 15px; height: 15px; font-size: 0px; text-indent: -9999px; background: url(/somang_new/common/images/common/btn_slide_control.png) no-repeat -93px 0px; } .section_01 .main_notice { box-sizing: border-box; position: absolute; top: 58%; left: 12%; width: 500px; height: 300px; } .section_02 { background: #f3f3f3 } .section_02 .service { margin: 0 0 90px 0; overflow: hidden; } .section_02 .service li { float: left; width: 386px; margin: 0 0 0 21px; } .section_02 .service li:FIRST-CHILD { margin: 0 } .section_02 .service li .title { margin: 0 0 16px 0; font-size: 16px; font-weight: 500; line-height: 1; text-align: center; } .section_02 .service li figure { margin: 0 } .section_02 .info { overflow: hidden; padding:0; } .section_02 .info li { float: left; width: 386px; margin: 0 0 0 21px; } .section_02 .info li:FIRST-CHILD { margin: 0 } .section_02 .info li .title { margin: 0 0 16px 0; font-size: 16px; font-weight: 500; line-height: 1em; text-align: center; } .section_02 .info li .cont { border-top: 1px solid #dedede; padding: 19px 0 0 0; } .section_02 .info li .cont .desc { margin: 0 0 19px 0; line-height: 24px; font-size: 16px; font-weight: 300; color: #3d3d3d; text-align: center; word-break: keep-all; } .section_02 .info li .cont .btn_m1 { margin: 0 auto } .section_02 .info li.news .cont { position: relative; overflow: hidden; } .section_02 .info li.news .link_thumb { float: left; margin: 0 20px 0 0; } .section_02 .info li.news .link_thumb img { display: block; width: 100%; } .section_02 .info li.news .news_title { display: block; text-decoration:none; height: 46px; margin: 0 0 20px 0; line-height: 23px; font-size: 13px; font-weight: 300; color: #3d3d3d; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: keep-all;} .section_02 .info li.news .news_date { position: absolute; bottom: 0px; left: 167px; font-size: 12px; font-weight: 300; color: #b5b5b5; } .section_03 .brand { overflow: hidden } .section_03 .brand li { position: relative; float: left; width: 350px; height: 403px; margin: 0 10px 10px 0; overflow: hidden; } .section_03 .brand li:FIRST-CHILD { margin-left: 0 } .section_03 .brand li a { display: block; width: 100%; height: 100%; overflow: hidden; } .section_03 .brand li .box_d { display: block; width: 100%; height: 100%; overflow: hidden; } .section_03 .brand li .box_h {position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; overflow: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: opacity 500ms ease; -moz-transition: opacity 500ms ease; -o-transition: opacity 500ms ease; transition: opacity 500ms ease; } .section_03 .brand li.danahan { background: url(/somang_new/common/images/main/bg_brand_danahan.jpg?v=20230822) no-repeat center } .section_03 .brand li.vprove { background: url(/somang_new/common/images/main/bg_brand_vprove.jpg?v=20230822) no-repeat center } /*.section_03 .brand li.flordeman { background: url(/somang_new/common/images/main/bg_brand_flordeman.jpg?v=20230822) no-repeat center }*/ .section_03 .brand li.salon { background: url(/somang_new/common/images/main/bg_brand_bethesalon.jpg?v=20230822) no-repeat center } .section_03 .brand li.inusth { background: url(/somang_new/common/images/main/bg_brand_inusth.jpg?v=20230822) no-repeat center } .section_03 .brand li.flower { background: url(/somang_new/common/images/main/bg_brand_flower.jpg?v=20230822) no-repeat center } .section_03 .brand li.danahan .box_h { background: url(/somang_new/common/images/main/bg_brand_danahan.jpg) no-repeat top center; } .section_03 .brand li.vprove .box_h { background: url(/somang_new/common/images/main/bg_brand_vprove_hover.jpg) no-repeat top center; } .section_03 .brand li.flordeman .box_h { background: url(/somang_new/common/images/main/bg_brand_flordeman.jpg) no-repeat top center; } .section_03 .brand li.flower .box_h { background: url(/somang_new/common/images/main/bg_brand_flower.jpg) no-repeat top center; } /*.section_03 .brand li a:HOVER .box_h { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }*/ .section_03 .brand li .box_h .corner_t { position: absolute; top: 0px; left: 0px; } .section_03 .brand li .box_h .corner_b { position: absolute; bottom: 0px; right: 0px; } .section_03 .brand li .box_h .txt_title { position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -76px; } .section_03 .brand li .link_thumb { display: block; width: 100%; height: 100%; } .section_03 .brand li .name { position: absolute; top: 22px; left: 24px; } .section_03 .brand li .product { position: absolute; bottom: 0px; left: 27px; } .section_03 .brand li.danahan .product { bottom: -25px } .section_03 .brand li.danahan .product { bottom: -25px } .section_04 { background: #f3f3f3 } .section_04 .bg { display: none; width: 100%; } .section_04 h2 { margin: 0 0 120px 0 } .section_04 .inner_sec { position: relative; width: 100%; height: 354px; padding: 86px 0 0 0; background: url(/somang_new/common/images/main/bg_onlinemall.jpg) no-repeat center center; background-size: cover; } .section_04 .inner_sec .ico { position: absolute; top: -40px; left: 50%; width: 77px; height: 69px; margin: 0 0 0 -38px; background: url(/somang_new/common/images/main/ico_diamond.png) no-repeat center center; } .section_04 .inner_sec .desc { margin: 0 0 45px 0; font-size: 20px; font-weight: 500; text-align: center; color: #fff; font-size: 20px; } .section_04 .inner_sec .desc span { font-weight: 700 } .section_04 .inner_sec .onlinemall { overflow: hidden } .section_04 .inner_sec .onlinemall li { position: relative; float: left; width: 399px; height: 201px; margin: 0 0 0 1px; background: #fff; } .section_04 .inner_sec .onlinemall li a { display: block; width: 100%; height: 100%; } .section_04 .inner_sec .onlinemall li .name { position: absolute; top: 50%; left: 50%; width: 175px; height: 86px; margin: -43px 0 0 -87.5px; } /* .section_04 .inner_sec .onlinemall li.link_vm { background: #2e2e2e; } */ .section_04 .inner_sec .onlinemall li .box_d { display: block; width: 100%; height: 100%; overflow: hidden; } .section_04 .inner_sec .onlinemall li .box_h { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; background: #f99710; overflow: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: opacity 500ms ease; -moz-transition: opacity 500ms ease; -o-transition: opacity 500ms ease; transition: opacity 500ms ease; } .section_04 .inner_sec .onlinemall li.link_bc .box_h { background: #ea6c1f; } .section_04 .inner_sec .onlinemall li.link_fm .box_h { background: #572701; } .section_04 .inner_sec .onlinemall li.link_coc .box_h { background: #9233B5; } .section_04 .inner_sec .onlinemall li a:HOVER .box_h { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .section_04 .inner_sec .onlinemall li .corner_t { position: absolute; top: 0px; right: 0px; } .section_04 .inner_sec .onlinemall li .corner_b { position: absolute; bottom: 0px; left: 0px; } .section_04 .inner_sec .onlinemall li .box_h .txt_title { position: absolute; top: 0; left: 0; margin: 0; } .section_05 .inner_sec { position: relative } .section_05 .inner_sec .ico { position: absolute; top: -35px; left: 50%; width: 68px; height: 96px; margin: 0 0 0 -34px; background: url(/somang_new/common/images/main/ico_pointer.png) no-repeat center center; } .section_05 .desc { margin: 0 0 89px 0; line-height: 1em; font-size: 16px; font-weight: 300; color: #787878; text-align: center; } .section_05 .inner_sec { width: 100%; height: 171px; padding: 154px 0 0 0; height: 171px; background: url(/somang_new/common/images/main/bg_store.jpg) no-repeat center center; background-size: cover; } .section_05 .sec_warp { width: 500px } .section_05 .select_box { float: left; width: 310px; height: 52px; margin: 0 8px 0 0; border: none; background-position: 280px center; } .section_05 .select_box>label { left: 27px; font-size: 20px; font-weight: 300; color: #525252; } .section_05 .select_box>select { height: 52px; padding: 0px 22px; min-height: 52px; line-height: 52px; font-size: 20px; font-weight: 300; color: #525252; } .section_05 .btn_l1 { float: left } @media screen and (max-width:1200px) { .br_point_p { display: none } .section .sec_warp,.section:nth-child(3) .sec_warp { width: 96%; padding: 0 2%; } .section_01 .slide_01 { background: url(/somang_new/common/images/main/bg_sec01_04_1200.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_02 { background: url(/somang_new/common/images/main/bg_sec01_01_1200.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_03 { background: url(/somang_new/common/images/main/bg_sec01_02_1200.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_04 { background: url(/somang_new/common/images/main/bg_sec01_03_1200.jpg) no-repeat top center; background-size: cover; } .section_02 .service li { width: 32%; margin: 0 0 0 2%; } .section_02 .service li img { display: block; width: 100%; } .section_02 .info li { width: 32%; margin: 0 0 0 2%; } .section_02 .info li.news .link_thumb { width: 48%; margin: 0 2% 0 0; } .section_02 .info li.news .news_date { left: 50% } .section_03 .brand li { width: 32%; margin: 0 0.5% 0.5% 0; } .section_04 .inner_sec .onlinemall li { width: 98%; margin: 0 0 0 2%; } .section_04 .inner_sec .onlinemall li:FIRST-CHILD { margin: 0 } .section_05 .sec_warp { width: 500px; padding: 0; overflow: hidden; } } @media screen and (max-width:1024px) { .section_01 .slide_01 { background: url(/somang_new/common/images/main/bg_sec01_04_1024.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_02 { background: url(/somang_new/common/images/main/bg_sec01_01_1024.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_03 { background: url(/somang_new/common/images/main/bg_sec01_02_1024.jpg) no-repeat top center; background-size: cover; } .section_01 .slide_04 { background: url(/somang_new/common/images/main/bg_sec01_03_1024.jpg) no-repeat top center; background-size: cover; } /* .section_04 .inner_sec .onlinemall li.link_vm { display:none; } */ .section_04 .inner_sec .onlinemall li { width: 100%; } } @media screen and (max-width:768px) { /* .section_03 .brand li.vprove { display:none; } */ .section_03 .brand li { width: 49%; margin: 0 0.5% 0.5% 0; } .section_03 .brand li:nth-child(3) { margin-left: 0; } } @media screen and (max-width:640px) { #container .section { padding: 50px 0 } #container .section.section_01 { padding: 0 } #container .section.section_04 { padding: 0 } #container .section.section_05 { padding: 50px 0 0 0 } .section_01 .slider li { height: auto !important } .section_01 .slider li .img_slide_mobile { display: block; width: 100%; } .section_01 .slide_01 { background: url(/somang_new/common/images/main/bg_sec01_04_640.jpg) no-repeat top center; background-size: 100%; } .section_01 .slide_02 { background: url(/somang_new/common/images/main/bg_sec01_01_640.jpg) no-repeat top center; background-size: 100%; } .section_01 .slide_03 { background: url(/somang_new/common/images/main/bg_sec01_02_640.jpg) no-repeat top center; background-size: 100%; } .section_01 .slide_04 { background: url(/somang_new/common/images/main/bg_sec01_03_640.jpg) no-repeat top center; background-size: 100%; } .section_01 .main_notice { display: none; } .section h2 { font-size: 40px; background: url(/somang_new/common/images/common/ico_title_back_m.png) no-repeat center; } .section_02 .service li { float: none; width: 100%; margin: 50px 0 0 0; } .section_02 .service li .title { font-size: 1.4em } .section_02 .service { margin: 0 0 50px 0 } .section_02 .info { margin: 0 0 0 -2% } .section_02 .info li { width: 48% } .section_02 .info li .title { font-size: 1.4em } .section_02 .info li .cont .desc { line-height: normal; font-size: 1.2em; } .section_02 .info li.news { float: none; width: 100%; margin: 0 0 10% 0; padding: 0 0 0 2%; } .section_02 .info li.news .cont { border: none; padding: 0; } .section_02 .info li.news .link_thumb { width: 35%; height: auto; max-width: none; margin: 0 5% 0 0; } .section_02 .info li.news .news_title { line-height: normal; font-size: 1.2em; height: auto; margin: 0;} .section_02 .info li.news .news_date { left: 40%; font-size: 1em; } /* .section_03 .brand li.vprove { display:none; } */ .section_03 .brand li.danahan { background: url(/somang_new/common/images/main/bg_brand_danahan_m.jpg?v=20230616) no-repeat center center } /*.section_03 .brand li.flordeman { background: url(/somang_new/common/images/main/bg_brand_flordeman_m.jpg?v=20230616) no-repeat center center }*/ .section_03 .brand li.flower { background: url(/somang_new/common/images/main/bg_brand_flower_m.jpg?v=20230616) no-repeat center center } .section_03 .brand li.vprove { background: url(/somang_new/common/images/main/bg_brand_vprove_m.jpg?v=20230616) no-repeat center center } .section_03 .brand li.salon { background: url(/somang_new/common/images/main/bg_brand_bethesalon_m.jpg?v=20230616) no-repeat center center } .section_03 .brand li.inusth { background: url(/somang_new/common/images/main/bg_brand_inusth_m.jpg?v=20230616) no-repeat center center } .section_03 .brand li .product { left: 5% } .section_03 .brand li .product img { width: 70% } .section_03 .brand li .box_h { display: none } .section_04 .bg { display: block } .section_04 h2 { position: absolute; top: 15%; left: 0px; display: block; width: 100%; color: #fff; background: none; } .section_04 .inner_sec { position: absolute; top: 22%; left: 0px; width: 100%; height: 70%; padding: 0; background: none; } .section_04 .inner_sec .ico { display: none } .section_04 .sec_warp { width: 80%; height: 100%; padding: 0 10%; } .section_04 .sec_warp3 { width: 80%; height: 100%; padding: 0 10%; } .section_04 .inner_sec .desc { margin: 10px 5px 5% 5px } .section_04 .inner_sec .onlinemall { height: 100% } .section_04 .inner_sec .onlinemall li { float: none; width: 100%; height: 30%; margin: 1% 0 0 0; } .section_04 .inner_sec .onlinemall li:FIRST-CHILD { margin: 0 } .section_04 .inner_sec .onlinemall li a:HOVER .box_h { display: none } .section_05 .sec_warp { width: 96%; padding: 0 2%; } .section_05 .select_box { width: 59%; margin: 0 1% 0 0; background-position: 95% center; } .section_05 .btn_l1 { width: 40%; min-width: 0px; padding: 0; } } @media screen and (max-width:480px) { }