.pc_view { display: block;} .m_view { display: none;} /*********** 메인배너 ************/ #main_movie { position: relative;} .movie_box { position: absolute; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; text-align: center} .movie_box .pc_movie img { width: auto; height: 100%;} .movie_box .m_movie img { display: none;} /* carousel */ #quote-carousel { display:none; position: relative; z-index: 10; width: 100%; height: 100vh; color: #fff; padding: 0; margin: 0; text-align: center; } /* indicator position */ #quote-carousel .carousel-indicators { width: 100%; height: 80px; left: 0; top: auto; bottom: 0; margin: 0;; background-color: rgba(2, 9, 20, 0.63) } /* indicator color */ #quote-carousel .carousel-indicators li { display: block; float: left; width: 33.3%; height: inherit; line-height: 80px; color: #f5f5f5; font-size: 1.6rem; text-align: center; text-indent: 0; border: 0; margin: 0; padding: 0; opacity: 0.5; } /* active indicator */ #quote-carousel .carousel-indicators .active { width: 33.3%; height: inherit; color: #fff; border: 0; background: transparent; opacity: 1.0;} /* typography */ /* pc */ .carousel-caption { top:40%; right: 20%; left: 20%; padding-bottom: 30px; } .item .pc_contents { display: block;} .item .pc_contents p:first-of-type { display: block; width: 50%; max-width: 550px; font-family: "Helvetica Neue", Helvetica,; letter-spacing: 12px; font-size: 1.0rem; border-bottom: 1px solid; padding: 10px; margin: 0 auto; margin-top: 0; } .item .pc_contents h3 { margin-top: 20px; font-size: 4.0rem; letter-spacing: 2px; font-weight: 400} .item .pc_contents span { display: block; width: 50%; height: 100px; border-right: 1px solid #fff; margin-bottom: 20px; } .item .pc_contents p:last-of-type { font-size: 1.6rem; font-weight: 300;} /* mobile */ .item .mobile_contents { display: none;} .m_copy01 { display: none;} /**********************왼쪽메뉴************************/ #left_menu { position: fixed; bottom: 50px;right:40px; z-index: 999; width: 110px; height: auto;} #left_menu ul li { width: inherit;/height:76px;background-color: rgba(87, 62, 51, 0.5); text-align: center;border:2px solid rgb(235,214,205,0.6);border-radius:10px;box-shadow:0px 2px 3px rgb(113, 110, 108,0.3);margin-bottom:6px; } #left_menu ul li:last-child {background:none;border:none;border-radius:none;box-shadow:none} #left_menu ul li:last-child img{width:70%;height:70%} #left_menu ul li a,#left_menu ul li a:link, #left_menu ul li a:visited { color: #ebd6cd; font-size: 1.5rem;font-weight: 600;display:block;line-height:76px;} /* #left_menu ul li a:hover { border-bottom: 2px solid #fff; padding: 5px 0;} */ #left_menu ul li a.left_on {border-bottom:0px solid #fff !important; opacity:1.0 !important; ;transition: all .5s;background-color:#fffcf7;color:#252d61} /**********************퀵메뉴************************/ #quick_menu { position: fixed; top: 160px;right:20px;z-index: 999; width: 142px; height: auto; text-align: center; } #quick_menu ul li { width: inherit; height: auto; padding: 12px 0; text-align: center; background-color: rgba(34, 43, 98, 0.55); transition: all 0.3s;} #quick_menu ul li:hover { cursor: pointer; background-color: rgba(34, 43, 98, 1.0) !important;} #quick_menu ul li:nth-child(odd) { background-color: rgba(34, 43, 98, 0.75); } #quick_menu ul li:nth-child(even) { background-color: rgba(34, 43, 98, 0.55); } #quick_menu ul li a { color: #fff; font-size: 1.35rem;} #quick_menu ul li a > span:first-child { display: inline-block; width:85px; text-align: left; margin-left: 5px; padding-left:5px; font-weight: 300} #quick_menu ul li a > span:nth-child(2) { display: inline-block; width:50px; text-align: center} #quick_menu ul li a > span > img { width:40px;} #quick_menu ul li a:hover { color: #fff;} #quick_menu ul li:last-child { padding:0; } /**********************온라인상담************************/ .online { position: fixed; top:330px; right:180px; z-index: 9999; width:280px; height:auto; border-radius: 10px; border:1px solid #575656; overflow: hidden; box-sizing: border-box; background-image:url(/shfood/new_img/online_bg01.png); background-size:100% auto; background-repeat:no-repeat; background-position:center top; background-color:#575656; display:none } .online_close { position: absolute; top:0; right:10px; z-index: 999; font-size: 2.0rem;} .online_close a:link, .online_close a:visited { font-size: 2.0rem; color:#333;} .online_head { text-align: center; } .online_head_title { font-size: 2.8rem; padding-top: 30px; font-weight: 300} .online_head_title::before { position: absolute; top: 25px; left:40px; content: ""; display: block; height: 15px; width: 200px; border:1px solid #333; border-bottom:0;} .online_head_title > span { font-weight: 400} .online_head_bottomTxt { font-size: 1.4rem; color:#3c3c3b; padding:10px 0 20px ;} .online_head_bottomTxt > span { padding-left: 5px;} .online_body { font-size: 1.4rem; font-weight:400; text-align:left; padding:10px 0; } .online_body label { color:#fff; font-weight: 400; padding:0 10px 0 20px; } .online_body input { width:200px; padding:5px; border:0; } .online_body select { width:200px; padding:5px; border:0; appearance:block;} .online_body input[type=radio] { width: 20px; height: 20px; position: relative; top: 5px; left: 0; border:0 !important; margin:0; padding:0; background-color: transparent; } .online_body ul li { margin:10px 0} .online_body ul li span { color:#fff; padding:0 10px 0 20px;} .privacy { width:100%; color:#fff; text-align: center; font-size: 1.2rem;} .privacy > span { padding-left: 5px;} .privacy a:link, .privacy a:visited { font-style: 0.7rem !important; color: #fff; padding-left: 5px; font-weight: 300;} .privacy a:hover { text-decoration: underline;} .privacy input[type=checkbox]{width:20px;} a.btn_online:link, a.btn_online:visited { display: block; width:50px; height: 50px; text-align: center; line-height: 50px;border-radius: 50%; margin: 0 auto; margin-top: 10px;background: #fff; } a.btn_online:hover { background-color: #252d61; color:#fff;} /**********************메인배너************************/ #section0 .fp-slides { z-index: 99 !important;} /**********************4가지배너************************/ #four_banner { width: 100%; height: 100vh; text-align: center; color: #fff;} #four_banner ul { width: 100%; height: inherit;} #four_banner ul li { position: relative; float: left; width: 25%; height: 100vh; box-sizing: border-box; display: table-cell; vertical-align: middle; overflow: hidden; transition: all 0.5s; background-size: auto 100%; background-position: center center; -webkit-filter: brightness(110%); filter: brightness(110%) } #four_banner ul li:first-child { background: url("/shfood/new_img/img_4banner01.jpg") no-repeat; border-bottom: 30px solid #a08172;} #four_banner ul li:nth-child(2) { background: url("/shfood/new_img/img_4banner02.jpg") no-repeat; border-bottom: 30px solid #684c40;} #four_banner ul li:nth-child(3) { background: url("/shfood/new_img/img_4banner03.jpg") no-repeat; border-bottom: 30px solid #422d24;} #four_banner ul li:nth-child(4) { background: url("/shfood/new_img/img_4banner04.jpg") no-repeat; border-bottom: 30px solid #5b4e49;} #four_banner ul li:hover { cursor:pointer; /*-webkit-filter: brightness(40%); filter: brightness(40%);*/ /* background-size:auto 140%;width:30% */ } #four_banner ul li:hover a{background-color:rgba(0,0,0,0.7)} a.four_banner_a:link, a.four_banner_a:visited { color:#fff; transition: all 0.5s; } a.four_banner_a:hover { font-size: 120%; transition: all 0.5s;} #four_banner span { display: block; transition: all 0.5s;} /* #four_banner span:first-child { */ /* #four_banner > ul > li:nth-child(1) span:first-child:after{ background: url('/shfood/new_img/icon_hair.png') no-repeat; } #four_banner > ul > li:nth-child(2) span:first-child:after{ background: url('/shfood/new_img/icon_scalp.png') no-repeat; } #four_banner > ul > li:nth-child(3) span:first-child:after{ background: url('/shfood/new_img/icon_hair_line.png') no-repeat; } #four_banner > ul > li:nth-child(4) span:first-child:after{ background: url('/shfood/new_img/icon_drug.png') no-repeat; } */ /* #four_banner span:nth-child(2) { margin-top: 10px; font-size: 1.6rem; font-weight: 300 } #four_banner span:nth-child(3) { display:none; position: absolute; bottom: 30px; left: 50%; width: 100%; margin: 220px 0 0 -45px; font-size: 1.6rem; font-weight: 300 } */ i.line { width:1px; background-color: #fff; height: 200px; position: absolute; left: 50%; top: calc(80vh - 300px); opacity: 0.2; display:block; transition: all 0.3s; } i.icons{ /* #four_banner > ul > li span:first-child:after { */ position: absolute; left: 50%; top: calc(80vh - 80px); /* content: ""; */ width:80px; height:80px; margin-left:-40px; display:block; transition: all 0.5s; } i.icons:first-child{ background: url('/shfood/new_img/icon_hair.png') no-repeat; } i.icons:nth-child(2){ background: url('/shfood/new_img/icon_scalp.png') no-repeat; } i.icons:nth-child(3){ background: url('/shfood/new_img/icon_hair_line.png') no-repeat; } i.icons:nth-child(4){ background: url('/shfood/new_img/icon_drug.png') no-repeat; } #four_banner ul li a{width:100%;height:100%;display:block;position:relative;} #four_banner span.toptile { position: relative; font-size: 4.0rem; top:80vh; /*;transition: all 0.3s 0.2s;*/ font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; } #four_banner .over_text01 { position: relative; font-size: 2.0rem; font-weight: 300;top:80vh;margin-top:10px; /*transition: all 0.4s 0.3s;*/ } #four_banner .over_text02 { position: relative; font-size: 1.6rem; top:80vh ; margin-top:10px; opacity:0; /*transition: all 0.4s 0.4s;*/ font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; line-height:2.6rem; color:rgba(255,255,255,0.7) } /********************* 의료기술 연구 협력 ***********************/ #rooney { width: 100%; height: inherit; text-align: center; padding-top: 6%; background: url("/shfood/new_img/img_section03_bg03.png"); background-size: cover; background-position: top center; } #rooney h5{ font-size: 1.8rem; color: #fff; font-weight: 300; margin: 0; padding-bottom:2%;line-height:2.6rem;} #rooney h3 { font-size: 4.0rem; color: #4b2e17; letter-spacing: 0; margin:; font-weight: 700 } /* #rooney ul { display: block; width: 100%; height: auto; position:relative;} #rooney p:last-of-type { font-size: 1.8rem; font-weight: 300; color: #706f6f; padding: 0 0 10px ; }*/ #rooney div.part {width:80%;height:auto;margin:0 auto;position:relative;text-align:center;clear:both;margin-left:18%;} #rooney div.part p{position:relative;width:10%;height:100%;float:left;margin:0.5% 0.7%;} #rooney div.part p span img{width:100%;height:100%;} #rooney div.part p i{ display:none; z-index:99; width:100%; height:100%; transition: all 10s ; } #rooney div.part p:hover i{ display:block; position:absolute; left:0; top:0; background-color:#fff; color:#333; font-style:bold; font-size:14pt; text-align:center; padding-top:42%; transition: all 3s ; box-shadow:4px 4px 8px #695f59} /*#rooney ul li img { padding: 0; width: 100%;height: auto;} #rooney ul.pc_ li p{left:0%;bottom:10%;position:absolute;z-index:999;width:100%;text-align:center;}*/ /* width:calc(100% - 4pt); height:calc(100% - 4pt); */ /* #rooney ul.pc_ li span:hover i b{margin-top:40%;position:absolute;z-index:999;display:block;text-shadow: 1px 1px 2px black; font-weight: 100;} #rooney ul.pc_ li span:before{ padding-top:55.17%; display:block; content:'' } #rooney ul.pc_ li span.bigSpan:before{padding-top:calc(110.34% + 10px)} #rooney ul.pc_ li span{background-repeat:no-repeat;background-size:100% auto;transition: all 0.5s;background-position: center center;cursor:pointer;} /* #rooney ul.pc_ li span:hover{ -webkit-filter: brightness(140%); filter: brightness(140%);background-size:110% auto;} */ /********************* 기술 ***********************/ #technology { width: 100%; height: 100vh; text-align: center; color: #fff;} #technology ul { width: 100%; height: inherit; } #technology ul li { position: relative; float: left; width: 50%; height: 50vh; display: block; box-sizing: border-box; overflow: hidden} #technology ul li img { width: auto; max-width: 960px; height: 50vh;} #technology div { max-width: 640px; width: 100%; height: 50vh; text-align: center; color: #666; background: #fff; box-sizing: border-box} #technology .tech_info01{ float: right;} #technology .tech_info02{ float: left; } #technology ul li img:nth-child(1) ,#technology ul li img:nth-child(2), #technology .tech_info02{display:none;} #technology .tech_info01{ display:block} .tech_info01 span, .tech_info02 span { display: block;} .tech_info01 span:first-child { margin-top: 90px; font-size: 1.8rem; font-weight: 300; } .tech_info02 span:first-child { margin-top: 50px; font-size: 4.2rem; font-weight: 300;} .tech_info01 p, .tech_info02 p { font-size: 4.2rem; color: #333; font-weight: 300 } .tech_info01 p > span, .tech_info02 p > span { display: inline-block; font-size: 4.0rem !important; color: #0069b4; font-weight: 400 !important; margin: 0 !important;} .tech_info01 span:nth-child(3), .tech_info02 span:nth-child(3) { margin: 0; font-size: 1.8rem;line-height: 160%; font-weight: 300; } .tech_info01 span:nth-child(4), .tech_info02 span:nth-child(4) { display: block; width: 50%; height: 80px; border-right: 1px solid #333; margin: 30px 0; } .tech_info01 span:nth-child(5) a:link, .tech_info01 span:nth-child(5) a:visited, .tech_info02 span:nth-child(5) a:link, .tech_info02 span:nth-child(5) a:visited { width: 90px; color: #333; font-size: 1.8rem; padding: 4px 10px 8px;/* border-top: 1px solid #fff; border-bottom: 1px solid #fff; */ opacity: 1.0; transition: 0.3s ease; } .tech_info01 span:nth-child(5) a:hover, .tech_info02 span:nth-child(5) a:hover { border-top: 1px solid #fff; border-bottom: 1px solid #333; padding: 0px 10px 3px; opacity: 1.0;} /********************* 모발이식 리얼스토리 ***********************/ #section4 { text-align: center;background-color: #fff; } #section4 p { font-size: 0.6rem; color: #333; margin:0; padding:0; font-weight: 300; } /* @keyframes bigFont{ 0%{font-size:0.6rem} 100%{font-size:3.6rem} } */ #section4 p > span { color:#6f5346; font-weight: 700; } /*#movie_contents {background-color: #fffcf7;}*/ /*#movie_contents { display:block; position: relative; z-index:10; height: auto; padding:0 30px 5vh; margin: 0; text-align: center; }*/ /*#movie_contents:before { position:absolute; top:-4%; left:46%; content: ""; width:94%; height:98%; border:1px solid #b8bac9; margin-left:-43%;}*/ #movie_contents .movieStory_box { position: relative; top:0; left:0; z-index: 10; display: block; width: 100%; color: #fff; background-image:url(/shfood/4th_img_2.png); background-position: center center; background-size:100% auto; background-repeat: no-repeat; } #movie_contents .movieStory_box span { display: block; } .movieStory_box span:first-child { font-size: 1.6rem; padding-top: 150px; } .movieStory_box span:nth-child(2) { font-size: 4.0rem; padding-top: 35px; font-weight: 300} .movieStory_box span:nth-child(3) { font-size: 4.0rem; padding-top: 40px; } .movieStory_box span:nth-child(4) { font-size: 1.7rem; padding-top: 35px; } .movieStory_box span a:link, .movieStory_box span a:visited { color: #fff; opacity: 0.7; transition: all 0.5s } .movieStory_box span a:hover { color: #fff; opacity: 1.0; transition: all 0.2s } #movie_box_pc { display:block;} #movie_box_m { display:none; } /********************* 리얼 with 스타 ***********************/ #star_contents_pc { display:block; width: 100%; height: 100vh; background: url('/shfood/new_img/withstar_bg.jpg') repeat-x ;overflow:hidden;} /*#star_contents_m { display:none; width: 100%; height: 100vh; background: url('/shfood/new_img/star_bg.jpg') repeat-x }*/ .star_detail { position: relative; top:12vh; width: 100%; max-width: 1717px; height: auto; margin: 0 auto; border: 0px solid ;} .star_detail h3 {width:100%;height:auto;margin:20px auto 40px;text-align:center;font-size:3.0rem;font-weight:600} .star_detail p span {display:block;width:450px;clear:both;margin:auto;text-align:center;background-color:#6d5d57;font-size:1.8rem;color:#fff;padding:15px 0;} .star_detail div .withImg {margin-bottom:17px;} .withstarimg{cursor:pointer;transition: 0.3s ease;background-size:100% auto;background-position:center center;background-repeat: no-repeat;} .withstarimg:hover{ -webkit-filter: brightness(105%); filter: brightness(105%);background-size:110% auto;} /*.star_detail .gotowith {} .star_detail .gotowith_hover {} .star_detail .gotowith:hover {} .star_detail .gotowith:hover ~.gotowith_hover {} .star_detail .gotowith:hover{img src='/shfood/new_img/gotowith.png'}*/ /*.star_detail img { width: 100%; max-width: 1717px; height: auto;} .star_detail:after { display: block; clear: both; content: ""; } .star_detail > p:before { border-right: 1px solid #222b62; content: ""; height: 270px; position: absolute; right: 50%; top: 5vh; transform: rotate(45deg) translateZ(0px); } .star_detail > p:after { border-right: 1px solid #222b62; content: ""; height: 270px; position: absolute; right: 50%; top: 47vh; transform: rotate(45deg) translateZ(0px); } .star_detail > p { position: relative; display: block; width:40%; height: 100vh; margin:0 auto; padding: 35vh 150px 0; background-color: transparent; border: 0px solid } .star_detail > p span { display: block;} .star_detail > p span:nth-child(1) { font-size: 1.8rem; color: #222b62; text-align: right; padding-right: 15%;} .star_detail > p span:nth-child(2) { font-size: 4.0rem; line-height: 100%; color: #222b62; font-weight: 300; padding:0 50px;} .star_detail > p span:nth-child(3) { position: absolute; top: 45.5vh; right: 27.5%; z-index: 99; font-size: 2.2rem; font-weight: bold; color: #222b62 } .star_detail > p span:nth-child(4) { width: 100%; font-size: 1.6rem; text-align: center; margin-top: 10px; padding: 6px 0; border-radius: 30px; background-color: #222b62; } .star_detail > p span:nth-child(4) a:link, .star_detail > p span:nth-child(4) a:visited { width: 100%;color: #fff; font-weight: 300; opacity: 1.0; transition: all 0.5s } .star_detail > p span:nth-child(4) a:hover { color: #fff; opacity: 1.0;transition: all 0.2s}*/ .section{position:relative;} /********************* 탈모칼럼 ***********************/ #column { width: 100%; /*background: url('/shfood/new_img/column_bg03.jpg') no-repeat top center;*/} #column .column_head { position: relative; width: 100%; margin:auto; height:500px; overflow: hidden; margin-top:5%; } #column .kakao_map{float:left;width:50%;height:100%;} #column .info1{float:left;width:25%;height:250px;background-color:#f3f3f3;text-align:center;} #column .info1 h3{color:#000;font-size:2.0rem;} #column .info1 p{color:#000;font-size:1.5rem;} #column .info2{float:left;width:25%;height:250px;background-color:#fff;text-align:center;} #column .info2 h3{color:#000;font-size:2.0rem;} #column .info2 p{color:#000;font-size:1.5rem;} /*#column .info3{float:left;width:25%;height:250px;background-color:#fbc50b;text-align:center;} #column .info3 h3{color:#fff;font-size:2.0rem;} #column .info3 p{background-color:#fff;width:50%;padding:20px;border-radius:10px;text-align:center;color:#000;font-size:1.5rem;margin-left:25%;}*/ /*#column .column_head > img { width: 100%; max-width:1920px; height: auto; } #column .column_body { width: 100%; height: 40vh; background-color: #fff; } #column .column_body ul {} } #column .column_body ul li { position: relative; width: 25%; height: inherit; overflow: hidden } .column_body span i{font-style:normal;font-size:45pt;font-weight:100;transform: rotate(0deg);display:block;opacity:0} .column_body span i:after{content:'';display:block;}*? /********************* 오시는길 ***********************/ #map_contents { position: relative; width: 100%; padding: 0; text-align: center; } .map_box { position: relative; width:100%; max-width: 1280px; height: auto; margin: 0 auto; padding: 0; text-align: center; background: #fff; -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3); } .indexing #map_contents { position: relative; top:0; } .indexing .map_box { position: relative; top: 0; left: 0; margin: 0 auto; } .map_box:after { display: block; clear: both; content: ""; } .map_more { position: absolute; top: 150px; left: -117px; z-index: 99; font-size: 1.8rem; padding: 30px 15px; background-color: #222b62; } .map_more::before { position: absolute; content: ''; display: block; left: 0; top: 0; width: 0; height: 0; border-bottom: 20px solid transparent; border-right: 20px solid transparent; border-left: 20px solid #fff; } .map_more a:link, .map_more a:visited { width: 100%; color: #fff; font-weight: 300; opacity: 1.0; transition: all 0.5s } .map_more a:hover { color: #fff; opacity: 1.0; transition: all 0.2s } .map_box p:nth-child(1) { float: left; width: 60%;height: 100%; padding: 30px;text-align:left;} .map_box p:nth-child(1) img { width: 100%; max-width:674px; height: auto; padding: 0px;} .map_box ul { float: left; width: 40%; color: #878787; padding-right: 30px;} .map_box ul > li { position: relative} .map_box ul > li:nth-child(1) { font-size: 4.0rem; margin-top:50px; font-weight: 300 } .map_box ul > li:nth-child(1) > span{ color: #6f5346} .map_box ul > li:nth-child(2) { text-align: center; font-size: 1.6rem; font-weight: 300; margin: 10px 0; padding-left: 30px; color: #917061; } .map_box ul > li:nth-child(3) { font-size: 1.6rem; font-weight: 300; line-height: 2.6rem; margin: 120px 0 } .map_box ul > li:nth-child(3) > span{ font-size: 2.2rem; color: #6f5346; font-weight: 500 } .map_box ul > li:nth-child(3):before { position: absolute; top: -90px; right: 50%; content: ""; height: 70px; border-right: 1px solid #222b62; } /*.map_box ul > li:nth-child(3):after { position: absolute; top: 90px; right: 50%; content: ""; height: 50px; border-right: 1px solid #222b62; }*/ .map_box ul > li:nth-child(4) { text-align: center; color: #333; font-size: 1.6rem; font-weight: 300; margin: 0; padding-left: 30px; } /********************* 상담신청 ***********************/ #consulting_contents { position:relative; width: 100%; height: 300px; color: #fff; background: #7f6b63; } .indexing #consulting_contents { position:relative;; bottom:0;z-index:1} .apply_wrap { width: 1280px; height: inherit; margin: 0 auto; padding: 0 0px 0;} .apply_wrap .apply_title { position:relative; float: left; font-size: 4.0rem; text-align:left; border-right: 1px solid #fff; margin-right: 60px; padding: 0px 60px 30px 0; } .apply_wrap .apply_title > span { font-weight: 300; display: block;} .apply_wrap .apply_title > span:last-of-type { display:block; font-size:1.6rem; } .consulting_contents_kakao { position: absolute; top:170px; left:0; z-index: 99; } .consulting_contents_phone { position: absolute; top:-27px; left:240px; z-index: 99; } .apply_wrap dl { position:relative; top:20px ; left:200px; float: left; width: 560px; border: 0px solid #fff; } .apply_wrap dl dt, .apply_wrap dl dd { float: left; height: 30px; line-height: 30px; font-weight: 400; border: 0px solid #fff; margin:10px 0;} .apply_wrap dl dt { width: 20%; font-size: 1.8rem;} .apply_wrap dl dd { width: 80%; font-size: 1.8rem; } .apply_wrap dl dd:nth-of-type(4) { width: 80%; font-size: 1.4rem !important; display:flex;align-items: center;overflow:hidden;} .apply_wrap dl dd span { margin-right: 10px;} .apply_wrap dl dd:nth-of-type(4) span{display:flex;align-items: center;} .apply_wrap .input-name { width: 300px; height: 30px; border: 0;} .apply_wrap input[type=checkbox], input[type=radio] { width: 22px; height: 22px; border: 0; margin: 0; padding:0; /*background-color: #fff*/} .apply_wrap input { width: 100%; height: 30px; border: 0; color: #333; padding: 0 10px;} .apply_wrap select { width: 100%; height: 30px;border: 0; color: #333; padding: 0px;padding-left:6px;} .apply_wrap dl dt label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 400; } .consulting_apply_btn { position: relative; top: 30px; left:230px; z-index: 10; float: left; width: 120px; height: 130px; line-height:130px;text-align: center; color: #fff; font-size: 2.0rem; margin:0; background-color: #000} /*.consulting_apply_btn:before { content: ""; height: 50px; position: absolute; top: 0; right: 0; z-index: 9; width: 100%; background-color: #fff; }*/ /*.consulting_apply_btn:after {*/ /*content: "";*/ /*height: 100px;*/ /*position: absolute;*/ /*top: 0;*/ /*right: 0;*/ /*z-index: 9;*/ /*width: 100%;*/ /*border-top: 0px solid #ff0000;*/ /*border-bottom: 100px solid #efefef;*/ /*border-left: 220px solid #fff;*/ /*border-right: 0px solid #0000ff;*/ /*}*/ .consulting_apply_btn a:link, .consulting_apply_btn a:visited { position: absolute; top: 0px; left: 0; z-index: 10; width: 100%; color: #fff; text-align: center; font-weight: 300; } .consulting_apply_btn a:hover { } /********************* 네이버포스트 ***********************/ .post_contents { width: 100%; height: 207px; background: #222b62; margin-top: 0;} .post_contents > ul { max-width: 900px; width: 100%; margin: 0 auto; padding-top: 0px; color: #fff; } .post_contents > ul > li { float: left; } .post_contents > ul > li:nth-child(1) { width: 40%;} .post_contents > ul > li:nth-child(2) { width: 60%; padding-top: 20px; } .post_contents > ul > li > span { display: block; width: 100%; font-size: 3.8rem; font-weight: 300; text-align: center; margin: 5px 0 10px; letter-spacing: 1px } .post_contents > ul > li > a:link, .post_contents > ul > li > a:visited { display: block; width: 100%; height: 55px; color: #222b62; text-align: center; font-size: 1.8rem; font-weight: 300; line-height: 55px; background: #7c7c7c; /* Old browsers */ background: -moz-linear-gradient(left, #c4c6d4 0%, #e4e4ea 5%, #e4e4ea 96%, #c4c6d4 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #c4c6d4 0%, #e4e4ea 5%, #e4e4ea 96%, #c4c6d4 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #c4c6d4 0%, #e4e4ea 5%, #e4e4ea 96%, #c4c6d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4c6d4', endColorstr='#c4c6d4', GradientType=1); /* IE6-9 */ -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } .post_contents > ul > li > a:hover { } /********************* 모앤블레스의 특별함 ***********************/ #special_contents { position: relative; width: 100%; max-height: 820px; height: auto;text-align: center; background-image: url('/shfood/new_img/special_contents_bg.jpg');background-size:100% auto; } .indexing #special_contents { max-height: 100%; height: 100%;background-position:center 50px} #special_contents > p { font-size: 1.8rem; color: #666; padding-top: 40px; font-weight: 100;} .indexing #special_contents > p { padding-top: 8%; } #special_contents > h2 { font-size: 4rem; color: #4c4c4c; margin-top: 10px; font-weight: 100} #special_contents > h2 > span { color: #222b62; font-weight: 400;} /* #special_contents > h2:after { border-top: 1px solid #222b62; content: "";width: 50px; height: 1px; position: absolute; top: 150px; left: 50%; margin-left: -25px; } */ #special_contents > ul { max-width: 1280px; width: 100%; height: auto; margin: 0 auto; margin-top: 60px; border:0px solid #000} #special_contents > ul > li { position: relative; float: left; max-width: 420px;width: calc(33.3% - 7px);margin: 0 10px 10px 0;background-color: #000} #special_contents > ul > li:nth-child(3n) {margin-right:0;} #special_contents > ul > li .text01 { position: absolute; top: 0; left: 0; z-index: 99; width: 100%; } #special_contents > ul > li .text01 > span > img { width: 100%; max-width: 73px; height:auto;} #special_contents > ul > li .text01 span { display: block; color: #fff; width: 100%; } #special_contents > ul > li .text01 span:nth-child(1) { text-align: center; padding-top: 20px } #special_contents > ul > li .text01 span:nth-child(1):after { border-right: 1px solid #fff; content: ""; height: 70px;position: absolute; top: 180px; right: 50%; } #special_contents > ul > li .text01 span:nth-child(2) { font-size: 2.0rem; font-weight: 300; margin-top: 220px;} #special_contents > ul > li .text02 { position: absolute; top: 0; left: 0; z-index: 99; width: 100%;} #special_contents > ul > li .text02 span { display: block; color: #fff; width: 100%; } #special_contents > ul > li .text02 span:nth-child(1) { text-align: center;padding-top: 90px} #special_contents > ul > li .text02 span:nth-child(1):after { border-top: 1px solid #fff; content: ""; height: 1px; width: 150px; position: absolute; top: 120px; left: 0; opacity: 0.7; } #special_contents > ul > li .text02 span:nth-child(2) { font-size: 2.0rem; font-weight: 300; margin-top: 0;} #special_contents > ul > li .text02 span:nth-child(2):after { position: absolute; content: '\f196'; display: inline-block; font-family: FontAwesome; right: -10px; bottom: -60px; height: 58px; line-height: 58px; width: 80px; margin: 0; text-align: center; font-size: 3rem; opacity: 0.7; } #special_contents > ul > li:nth-child(3n) { margin-right: 0; } #special_contents > ul > li a:link, #special_contents > ul > li a:visited { display: block; opacity: 0.8; transition: all 0.5s;overflow: hidden; } #special_contents > ul > li a:hover { opacity: 1.0;} /********************* 사이트맵 ***********************/ #sitemap_contents { width: 100%; height: auto;background-color:#b5afac} .indexing #sitemap_contents { padding: 0 0 0;} .sitemap_box { max-width: 1280px; width: 100%; height: auto; font-size: 1.5rem;color:#fff; margin:0 auto;} .sitemap_box .foot {float:left;width:33%;margin:4% 0 0;font-size:1.5rem;border-right:1px solid #fff;padding-right:2%} .sitemap_box .foot span{display:block;padding:5px 0} .sitemap_box ul { margin-bottom: 0;padding:3% 3%} /* .sitemap_box ul:nth-child(2) { margin-top: 2%} */ .sitemap_box > ul > li { float: left; width: 13%; height: auto; padding: 0 2%; text-align: center;} .sitemap_box > ul > li:first-child {margin-left:2%} .sitemap_box > ul > li span { display: block; padding: 3px 0;} .sitemap_box > ul > li span:first-child { padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #fff} .sitemap_box > ul > li span:first-child a:link, .sitemap_box > ul > li span:first-child a:visited { display: block; color: #fff;font-weight: 400;} .sitemap_box > ul > li span:first-child a:hover { color: #333;} .sitemap_box > ul > li span a:link, .sitemap_box > ul > li span a:visited { display: block; color: #fff; font-weight: 300 } .sitemap_box > ul > li span a:hover { color: #333; } /*추가*/ /********************* 모앤블레스 신념 ***********************/ #belief_contents { display: block; width:100%; height:110vh; text-align: center; padding-top:15vh;background: url("/shfood/new_img/belief_bg.jpg") no-repeat top center; background-size: cover;position: relative;} /* #belief_contents.mains{padding-top:0} */ #belief_contents .belief_pc img { width:100%; height:auto; max-width:1416px !important; text-align: center;} .belief_pc { display: block; width:100% !important; height: auto; text-align: center; margin:0 auto; max-width:1360px } .belief_pc.mains {display: block;position:absolute;left:0;top:0;width:100%;height:auto;z-index:9;max-width:1416px} .belief_pc_cir.mains{display: block;position:absolute;left:0;top:0;width:100%;height:auto;z-index:1;max-width:1416px} .belief_contents > img {height: auto; } .belief_m { display: none;} /********************* footer ***********************/ /* #footer { width; 100%; height: auto; color: #fff; text-align: center; padding: 3% 0; background-color: #c7c7c7} .indexing #footer { position:absolute; bottom:0; } #footer > ul {position:relative; bottom:0;} #footer > ul:after {display: block; clear: both; content: ""} #footer > ul > li { font-weight: 300; font-size: 1.6rem;} #footer > ul > li:first-child { font-size: 3.0rem; padding-bottom:10px;} #footer > ul > li:nth-child(2) { } #footer > ul > li:nth-child(3) { padding-bottom:10px;} #footer > ul > li:nth-child(4) { padding-bottom:5px;} #footer > ul > li:nth-child(5) { } #footer > ul > li > span { font-weight: 500;} #footer > ul > li a:link, #footer > ul > li a:visited { color:#fff } #footer > ul > li a:hover { color:#fff}*/ /*********************************************************/ .movie_title,#movie_contents{opacity:1;font-size:0.6rem} #vedeobg{ width:100%; height:100%; background:#000 url(/shfood/video_bg1.jpg); background-size: cover; background-position:center center; } #vedeobg2{ width:100%; height:100%; background:#000 url(/shfood/video_bg2.jpg); background-size: cover; background-position:center center; } #vedeobg3{ width:100%; height:100%; background:#000 url(/shfood/video_bg3.jpg); background-size: cover; background-position:center center; } .myslider { cursor:pointer } #vedeobg video{width:100%;height:auto; opacity:0.2} /* 리얼 인터뷰 */ .real_interview { position: absolute; bottom:0; left:0; z-index: 999; width:100%; height:auto; background: #8b91b5; } .real_interview ul { position: relative; max-width:1280px; margin:0 auto; padding:0; } .real_interview ul:before { content: ""; clear: both; display: block; position: absolute; bottom:0; left:-110px; width:110px; height:84px; background: url(/new_img/real_interview_title.jpg) no-repeat; } .real_interview ul li { float:left; } .real_interview ul li:first-child { padding-right:5px; } article#bo_v { width:1280px; margin:0 auto; } section#bo_vc { font-size:16px; } .sub_contents_body section#bo_vc .comList { display:flex; flex-direction: row; align-items:center; padding:26px 0px; border-bottom:1px solid #e0e0e0; } .sub_contents_body section#bo_vc .comList .names { width:163px; display: flex; justify-content: center; align-items: center; } .sub_contents_body section#bo_vc .comList .comCon { display:flex; /*align-items: center;*/ justify-content: flex-start; flex-direction:column; width:1117px; box-sizing: border-box; border-left: 1px solid #cccccc; padding-left:34px; text-align:left; } .sub_contents_body section#bo_vc .comList .comCon p { text-align:left; width:100%; } .sub_contents_body section#bo_vc .comList .comCon .bo_vc_act { display:flex; justify-content: flex-start; margin:0; text-align:left; margin-top:10px; } .sub_contents_body section#bo_vc .comList .comCon .bo_vc_act li { margin-right:10px; } .sub_contents_body section#bo_vc .comList .comCon .bo_vc_act li a { display:flex; justify-content: center; align-items: center; width:80px; height:30px; border:1px solid #ccc; } .sub_contents_body section#bo_vc .comList .listCont { display:flex; } .sub_contents_body aside#bo_vc_w { border-bottom:1px solid #6f5346 } .sub_contents_body aside#bo_vc_w form { display:flex; padding:26px 0px; } .sub_contents_body aside#bo_vc_w form .comwdiv { width:calc(100% - 141px); display:flex; align-items: center; justify-content: flex-start; } .sub_contents_body aside#bo_vc_w form table { width:100% } .sub_contents_body aside#bo_vc_w form table th { width:163px; text-align:center; font-size:16px; font-weight:400; min-height:75px; } .sub_contents_body aside#bo_vc_w form table td { width:calc(100% - 163px); text-align:left; box-sizing: border-box; border-left: 1px solid #cccccc; padding-left:34px; min-height:75px; } .sub_contents_body aside#bo_vc_w form table td textarea { width:100%; height:75px; } .sub_contents_body aside#bo_vc_w form .btn_confirm { width:auto; margin:0; } .sub_contents_body aside#bo_vc_w form .btn_confirm input[type=submit] { width:116px; height:75px; margin-left:25px; margin-right:0 }