@charset "utf-8"; /*폰트 설정 Noto Sans KR*/ body { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing:-0.4px; font-size:1em; } .font_noto { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing:-0.4px; font-size:1em; } a { color:#292929; } /**/ #wrap { width:100%;background-image:url("../images/sub_bg_top.jpg");background-repeat:repeat-x; } /*헤더*/ #header { width:100%; height:28px; background:#f4fbff; } #header .topNav { width:1200px; height:49px; margin:0 auto; font-size:13px; } #header .topNav ul { float:right; margin-top:10px; } #header .topNav li { float:left;line-height:10px; } #header .topNav li.divide { color:#dedede; font-size:13px; } #header .topNav a { color:#555; letter-spacing:-0.5px; font-size:12px; font-weight:600; } #header .topNav .divide { margin-left:10px; margin-left:10px; margin-right:10px;} /*검색*/ #searchWrap { width:100%;padding:65px 0 65px 0; } #searchWrap .search { width:546px; height:44px; margin:44px auto 0; } #searchWrap a.logoBtn { display:block; width:172px; float:left; margin-top:3px; margin-right:14px; } #searchWrap .selectArea { width:248px; height:44px; background:#fff; float:left; margin-right:8px; } #searchWrap .selectArea .area { width:100%; height:100%; border:3px solid #24b8ff; font-size: 16px; color: #696969; background-image:url(../images/main_location_ico.png); cursor:pointer; } #searchWrap .selectArea .area:hover { color:#24b8ff; } #searchWrap .searchTxt {width:352px; height:44px; float:left; position:relative; } #searchWrap .searchTxt input[type=search] { width:336px; height:36px; background:#fff; font-size:14px; color:#696969; border:3px solid #24b8ff; padding-left:10px;margin-left:10px;margin-top:10px; background-image:url(../images/main_search_ico.png); background-repeat:no-repeat; background-position:97% 50%; cursor:pointer; } #searchWrap .searchTxt .ico { display:inline-block; width:27px; height:27px; position:absolute; top:8px; right:8px; } /*컨텐츠 영역 : 검색결과 & 베너3종 */ .contentWrap { } .contentWrap #resultWrap { width:100%; } .contentWrap #resultWrap .result { width:1200px; background:#fff; margin:0 auto; } .contentWrap #resultWrap .result .summary { display:inline-block; background:#fff; color:#5f5f5f; margin:28px 0; } .contentWrap #resultWrap .result .step { margin:0px 5px; } .contentWrap #resultWrap .result em { color:#ff7200; } .contentWrap #resultWrap .result .box { } .contentWrap #resultWrap .result .box > li { float:left; background:#fff; width:371px; height:130px; margin-right:43px; margin-bottom:43px; border-radius:10px; border:1px solid #b3b3b3; padding:17px; font-size:14px; color:#5f5f5f; cursor:pointer; } .contentWrap #resultWrap .result .box > li:hover { background:#fff; border:1px solid #32bcff; } .contentWrap #resultWrap .result .box > li:hover > h4 > a {color:#32bcff;text-decoration:underline;} .contentWrap #resultWrap .result .box > li.noMarRight { margin-right:0px; } .contentWrap #resultWrap .result .box > li a {} .contentWrap #resultWrap .result .box > li a.btnOn:hover { background:#ff7200; border:1px solid #ff7200; } .contentWrap #resultWrap .result .box > li a.btnOn { background:#32bcff; border:1px solid #32bcff; color:#fff; } .contentWrap #resultWrap .result .box > li a.btnOn{display:none;} .contentWrap #resultWrap .result h4 { font-size:16px; margin-bottom:16px; } .contentWrap #resultWrap .result h4 a:hover {text-decoration:underline; } .contentWrap #resultWrap .result .adress { margin-bottom:8px; } .contentWrap #resultWrap .result .keyword { } .contentWrap #resultWrap .result .btn a { display:block; float:left; background:#f5f5f5; width:64px; height:26px; line-height:26px; text-align:center; border-radius:5px; border:1px solid #ebebeb; margin-right:10px;} .contentWrap #resultWrap .result .btn a:hover { background:#32bcff; border:#32bcff; color:#fff; } .contentWrap #resultWrap .result .btn { margin-top:20px; } .contentWrap #resultWrap .result .btn .noBtn { display: block;float: left;background: #f5f5f5;width: 64px; height: 26px; line-height: 26px; text-align: center; border-radius: 5px; border: 1px solid #ebebeb; margin-right: 10px; } .contentWrap #resultWrap .result .pageBtn { display:table; margin-left:auto; margin-right:auto; } .contentWrap #resultWrap .result .pageBtn ul { } .contentWrap #resultWrap .result .pageBtn ul li { float:left; } .contentWrap #resultWrap .result .pageBtn ul li a { display:block; background:#fff; padding:12px; margin-right:10px; border:1px solid #dadada; color:#a6a6a6; font-size:14px; min-width:40px; text-align:center; } .contentWrap #resultWrap .result .pageBtn ul li a:hover { background:#32bcff; border:1px solid #32bcff; color:#fff; } .contentWrap #resultWrap .result .pageBtn .select a { background: #32bcff; border: 1px solid #32bcff; color:#fff; } #info {clear:both; width:1200px;height:370px;margin:0px auto;text-align:center;} #info h2 {display:inline-block;font-size:24px;color:#4d4d4d;margin-top:70px;} #info ul { width:999px; margin:40px auto 10px; } #info ul li { float:left; height:157px; } #info ul li.first { display:block; background:#77ccff; width:343px; } #info ul li.second { display:block; background:#eaf8ff; width:375px; margin:0 1px; } #info ul li.third { display:block; background:#3e177d; width:279px; } #info span { font-style:italic; } /*푸터영역*/ #footer { /*height:312px;*/ background:#fff; border-top:1px solid #ccc; clear: both; } /**/ #footer .topWrap { width:100%; height:64px; } #footer .top { width:1200px; height:100%; margin:0 auto; } #footer .top h3 { display:inline-block; font-size:34px; color:#32bcff; margin-top:15px; font-weight:500; } #footer .top .dot { margin-top:10px; } #footer .top .txt { font-size:16px; color:#303030; } #footer .top ul { float:right; margin-top:24px; } #footer .top ul li { float:left; font-size:13px; color:#404040; } #footer .top ul li.dvideLine { margin:0 7px; font-size:10px; color:#8e8e8e; } #footer .middleWrap { width:100%; height:168px; background:#eaf8ff;} #footer .middleWrap .middle { width:1200px; height:100%; margin:0 auto; letter-spacing:0.2px; } #footer .middleWrap .middle ul { float: left; display:inline-block; margin-top:30px; } #footer .middleWrap .middle li { font-size:14px; color:#434343; line-height:22px; font-weight:300; } #footer .middle .selectArea .area { float:right; width:164px; height:31px; margin-top:100px; font-size: 13px; letter-spacing:1px; color: #fff; background:#636363; text-align:center; background-image:url(../images/family_site_bt.png); background-repeat:no-repeat; background-position:90% 50%; cursor:pointer; border:none; } #footer .middle .selectArea .area:hover { background:#24b8ff; background-image:url(../images/family_site_bt.png); background-repeat:no-repeat; background-position:90% 50%; color:#fff; } #footer .btmWrap { width:100%; height:80px; background:#131415;} #footer .btmWrap .btm { width:1200px; height:100%; margin:0 auto; } #footer .btmWrap .btm .copyright { float:left; color:#ccc; /*margin-top:30px;*/ font-size: 14px; } #footer ul.license { float:left; height:40px; margin:20px 0 0 60px; } #footer ul.license li { float:left; margin-right:20px; } #footer ul.license li.third { margin-right:0px; } #footer ul.license li a { display:block; height:40px; } #footer ul.snsBtn { float:left; height:40px; margin:20px 0 0 60px; } #footer ul.snsBtn li { float:left; margin-right:10px; } #footer ul.snsBtn li a { display:block; height:40px; } #footer ul.snsBtn li.forth { margin-right:0; } #footer .btmWrap a.loginBtn { float:right; display:block; color:#fff; padding: 6px 15px 6px 15px; margin-top:27px; border-radius:20px; border:1px solid #fff; font-size:13px; } #footer .btmWrap a.loginBtn:hover { background:#32bcff; border:1px solid #32bcff; color:#fff; } /*공통*/ #header a:hover, #searchWrap a:hover, #navFirst a:hover, #contentWrap a:hover, #footer a:hover { color:#24b8ff; } #header, #searchWrap, #navFirst, #contentWrap, #footer { } div,li, a{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dvideLine2 { margin:0px 5px; font-size:10px; color:#8e8e8e; } /*1뎁스 메뉴*/ /* #navFirst { height:88px; } #navFirst ul { width:1200px; background:red; margin:0 auto; } #navFirst ul li { float:left; position:relative;} #navFirst ul li a { display:block; width:100px; height:88px; background:#fff; text-align:center; font-size:13px; border-radius: 20px 20px 0 0;} #navFirst ul li a p { display:inline-block; margin-top:10px; display:block;} #navFirst ul li a:hover { background:#d4f2ff; color:#000; border-radius: 20px 20px 0 0; } #navFirst ul li a img { margin-top:6px; } */ /*2뎁스 메뉴*/ /* #navSecond { width:100%; height:370px; } #navSecond .navWrap { width:1200px; height:370px; margin:0 auto; background:#d4f2ff; border-radius:0 0 20px 20px; } #navSecond .navWrap ul { padding:58px; } #navSecond .navWrap ul li { float:left; margin-right:23px; margin-bottom:23px; text-align:center; } #navSecond .navWrap ul li a { display:block; width:115px; height:115px; background:#fff; border-radius:10px; font-size:14px; } #navSecond .navWrap ul li a:hover { box-shadow:0px 0px 10px rgba(0,0,0,0.3); } #navSecond .navWrap ul li a p { display: inline-block; margin-top:10px; } #navSecond .navWrap ul li a p.titTxt { display:block; } #navSecond .navWrap ul li a img { margin-top: 12px; } #navSecond .navWrap li.endRight { margin-right:0px; } */ #navFirst{width:1200px;position:relative;margin:0 auto;} #navFirst .main_menu{position:relative;} #navFirst .main_menu > li{float:left;} /* 상단 1~5번째 */ #navFirst .main_menu > li > a { position:relative;display:block;width:100px;height:88px;text-align:center; background:#fff;z-index:10;border-radius: 20px 20px 0 0;font-size:13px; } #navFirst .main_menu > li > a img,.main_other_menu > li > a img{margin-top:16px} #navFirst .main_menu > li.current > a{background:#d4f2ff !important;} #navFirst .main_menu > li.on > a {background:#f6821f;} #navFirst .main_menu > li:first-child.current > a{} #navFirst .main_menu > li > a > p {margin-top:5px;font-size:12px;font-weight:500;} /* 상단 첫번째 */ #navFirst .main_menu > li:first-child.current > a{width:100px;} #navFirst .main_other_menu{position:relative;} #navFirst .main_other_menu > li{float:left;} #navFirst .main_other_menu > li.current > a{background:#d4f2ff;z-index:10;border-radius: 20px 20px 0 0;} /* 상단 6~8번째 */ #navFirst .main_other_menu > li > a { display:block;width:100px;height:88px;text-align:center; background:#fff;position:relative;z-index:10;font-size:12px; } #navFirst .main_other_menu > li > a > p {margin-top:5px;} /* 상단 여덟번째 */ #navFirst .main_other_menu > li > a.last{width:100px} /* hover 시 나오는 content */ #navFirst .snb { position:absolute;top:88px;left:0;width:1200px;height:226px;padding:20px;display:none; background-color:#d4f2ff;border-radius:0 0 20px 20px; } #navFirst .snb > div{float:left;} #navFirst .snb .snb_menu{width:170px;margin-left:10px} #navFirst .snb .snb_menu > ul{margin-top:20px} #navFirst .snb .snb_menu > ul > li{margin-bottom:10px;font-size:0;line-height:0;} #navFirst .snb .snb_menu > ul.topNewbest > li{letter-spacing:0;} #navFirst .snb .snb_menu > ul.topProducttype > li{letter-spacing:0;} #navFirst .snb .snb_menu > ul.topSkinsolution > li{letter-spacing:0;} #navFirst .snb .snb_menu > ul.topProductline > li{letter-spacing:0;} #navFirst .snb .snb_menu > ul > li > a{font-size:13px;line-height:14px;} #navFirst .snb .snb_menu .review_btn{position:absolute;left:30px;bottom:25px;} /* 탭 메뉴 구현 */ .tab_content{display:none;clear:both;width:1200px;box-sizing:border-box;} .tabs{width:1084px;height:256px;margin:37px auto;} .tabs > li > img{margin-top:15px;} .tabs > li > p{margin-top:5px;line-height:31px;font-size:14px;} .tabs > li { display:block;width:115px;height:42px;background:#fff;border-radius:10px;font-size:14px;text-align:center; float:left;margin-right:23px;margin-bottom:23px;text-align:center;transition:0.1s;cursor:pointer; } .tabs > li:nth-child(8) { display:block;width:115px;height:42px;background:#fff;border-radius:10px;font-size:14px;text-align:center; float:left;margin-right:0px;margin-bottom:23px; } .tabs > li:last-child { display:block;width:115px;height:42px;background:#fff;border-radius:10px;font-size:14px;text-align:center; float:left;margin-right:0px; } .tabs > li:hover{box-shadow:0px 0px 10px rgba(0,0,0,0.3);transition:0.1s;} .nohover:hover{color:#000!important;} /**/ /*서브페이지*/ #wrapSub { background:red; width:100%; height:100%; } #aa { background:blue; width:100px; height:100px; margin:0 auto; }