.wrap .pcHeader { display: block; } .wrap .moHeader { display: none; } .headerWrap { width: 100%; position: fixed; top: 0; left: 0; z-index: 20; } .header { width: 100%; height: 100px; position: relative; background: rgba(0, 0, 0, 0.3); } .header h1 { width: 263px; height: 35px; position: absolute; top: 50%; left: 50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/layout/logo.png") top left no-repeat; background-size: 100% auto; } .header h1 a { display: block; height: 100%; } .header .gnb { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; font-size: 0; } .header .gnb > li { display: inline-block; margin-right: 15px; } .header .gnb > li:last-of-type { margin-right: 0; } .header .gnb > li > a { display: block; height: 100px; line-height: 100px; padding: 0 20px; font-size: 18px; color: #fff; letter-spacing: 0.045em; position: relative; z-index: 1; } .header .gnb > li > a:after { content: ""; display: none; height: 3px; position: absolute; bottom: -1.5px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #143976; -webkit-transition: width .3s ease-out; transition: width .3s ease-out; } .header .gnb > li:hover > a:after { display: block; width: 100%; } .header .gnb > li .lnb { width: 1280px; height: 100px; line-height: 100px; position: absolute; top: 100px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #fff; text-align: center; border-bottom: 1px solid #ddd; display: none; } .header .gnb > li .lnb:before { content: ""; display: block; width: 1000%; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #fff; z-index: -1; border-bottom: 1px solid #ddd; } .header .gnb > li .lnb li { display: inline-block; margin-right: 50px; line-height: 1; vertical-align: middle; } .header .gnb > li .lnb li:last-of-type { margin-right: 0; } .header .gnb > li .lnb li a { display: block; padding: 10px; font-size: 18px; color: #666; font-weight: 300; } .header .gnb > li .lnb li:hover a { color: #143976; } .header .right { position: absolute; top: 50%; right: 50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; } .header .search { display: inline-block; width: 200px; margin-right: 30px; border-bottom: 2px solid #9198a9; vertical-align: middle; } .header .search input { width: calc(100% - 25px); height: 30px; padding: 0 2px; font-size: 14px; color: #fff; vertical-align: middle; } .header .search input::-webkit-input-placeholder { color: #3e4969; } .header .search input::-moz-placeholder { color: #3e4969; } .header .search input:-ms-input-placeholder { color: #3e4969; } .header .search input::-ms-input-placeholder { color: #3e4969; } .header .search input::placeholder { color: #3e4969; } .header .search input:-ms-input-placeholder { color: #3e4969; } .header .search input::-ms-input-placeholder { color: #3e4969; } .header .search a { display: inline-block; width: 25px; height: 30px; background: url("../../assets/img/layout/topSearch_icon.png") center center no-repeat; vertical-align: top; } .header .lang { display: inline-block; height: 28px; line-height: 28px; font-size: 14px; color: #fff; font-weight: 500; background: url("../../assets/img/layout/earth_icon_white.png") center left no-repeat; vertical-align: middle; } .header .lang a { display: block; padding-left: 34px; } .header:hover { background: #fff; border-bottom: 1px solid #ddd; } .header:hover h1 { background-image: url("../../assets/img/layout/logo_color.png"); } .header:hover .gnb > li > a { color: #222; } .header:hover .search { border-color: #dedede; } .header:hover .search input { color: #222; } .header:hover .search input::-webkit-input-placeholder { color: #d0d0d0; } .header:hover .search input::-moz-placeholder { color: #d0d0d0; } .header:hover .search input:-ms-input-placeholder { color: #d0d0d0; } .header:hover .search input::-ms-input-placeholder { color: #d0d0d0; } .header:hover .search input::placeholder { color: #d0d0d0; } .header:hover .search input:-ms-input-placeholder { color: #d0d0d0; } .header:hover .search input::-ms-input-placeholder { color: #d0d0d0; } .header:hover .search a { background-image: url("../../assets/img/layout/topSearch_icon_on.png"); } .header:hover .lang { color: #666; background-image: url("../../assets/img/layout/earth_icon_color.png"); } .header .lang2 { display: inline-block; height: 28px; line-height: 28px; font-size: 17px; color: #3e4969; font-weight: 600; vertical-align: middle; margin-left: 10px; margin-right: 10px; } .header .lang2 li { display: inline-block; } .header .lang2 li.on { color: #fff; } .header.on .lang2 { color: #d0d0d0;} .header.on .lang2 li.on { color: #1b2b5a;} .header:hover .lang2 { color: #d0d0d0;} .header:hover .lang2 li.on { color: #1b2b5a;} .moHeader .lang2{ display: block; width: 100%; background-color: #fff; text-align: right; padding-top: 20px; padding-right: 20px; } .moHeader .lang2 >ul > li{display:inline-block;width:auto;font-size: 5.28vw;} .header.on { background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .header.on h1 { background-image: url("../../assets/img/layout/logo_color.png"); } .header.on .gnb > li > a { color: #222; } .header.on .search { border-color: #dedede; } .header.on .search input { color: #222; } .header.on .search input::-webkit-input-placeholder { color: #d0d0d0; } .header.on .search input::-moz-placeholder { color: #d0d0d0; } .header.on .search input:-ms-input-placeholder { color: #d0d0d0; } .header.on .search input::-ms-input-placeholder { color: #d0d0d0; } .header.on .search input::placeholder { color: #d0d0d0; } .header.on .search input:-ms-input-placeholder { color: #d0d0d0; } .header.on .search input::-ms-input-placeholder { color: #d0d0d0; } .header.on .search a { background-image: url("../../assets/img/layout/topSearch_icon_on.png"); } .header.on .lang { color: #666; background-image: url("../../assets/img/layout/earth_icon_color.png"); } .footer { font-size: 0; } .footer > * { display: inline-block; vertical-align: top; } .footer > dt { width: calc(100% - 680px); min-height: 425px; padding: 55px 40px 55px; background: #fff; border-top: 1px solid #e8e8ec; } .footer > dt h2 { margin-bottom: 40px; font-size: 26px; color: #636670; font-weight: 500; } .footer > dt ul li { display: inline-block; width: calc((100% - 50px) / 3); vertical-align: top; margin-left: 25px; } .footer > dt ul li:first-child { margin-left: 0; } .footer > dt ul li > span { display: block; font-size: 18px; line-height: 1.5; } .footer > dt ul li p { margin-bottom: 20px; font-size: 18px; color: #5d5f65; font-weight: 300; line-height: 1.5; } .footer > dt ul li p span { display: inline-block; padding-right: 35px; } .footer > dt ul li p span:last-of-type { padding-right: 0; } .footer > dt ul li a { display: block; width: 90px; height: 30px; line-height: 30px; font-size: 14px; color: #fff; font-weight: 500; letter-spacing: 0.06em; background: #e6003e; text-align: center; } .footer > dd { width: 680px; } .footer > dd > * { display: inline-block; width: 50%; min-height: 425px; vertical-align: top; } .footer > dd h2 { margin-bottom: 45px; font-size: 23px; color: #858791; font-weight: 500; } .footer > dd .first { padding: 55px 50px 55px; background: #f4f4f6; position: relative; } .footer > dd .first ul li { margin-bottom: 35px; } .footer > dd .first ul li:last-of-type { margin-bottom: 0; } .footer > dd .first ul li a { font-size: 18px; font-weight: 300; } .footer > dd .first h3 { position: absolute; bottom: 55px; left: 50px; } .footer > dd .last { background: #e8e8ec; position: relative; text-align: center; } .footer > dd .last .fammilySite { margin-bottom: 50px; text-align: left; } .footer > dd .last .fammilySite p { padding: 0 90px 0 50px; height: 68px; line-height: 68px; font-size: 17px; color: #fff; font-weight: 600; background: #999 url("../../assets/img/layout/arrow_white_down.png") center right 50px no-repeat; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .footer > dd .last .fammilySite p.on { background-image: url("../../assets/img/layout/arrow_white_up.png"); } .footer > dd .last .fammilySite .accordionCon { display: none; width: 100%; padding: 10px 20px; background: #fff; border: 1px solid #f2f2f2; position: absolute; bottom: 0; left: 0; z-index: 1; } .footer > dd .last .fammilySite .accordion span { display: block; font-size: 18px; font-weight: 600; padding: 20px 55px 20px 30px; background: url("../../assets/img/layout/arrow_purple_down.png") center right 30px no-repeat; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .footer > dd .last .fammilySite .accordion span.on { background-image: url("../../assets/img/layout/arrow_purple_up.png"); } .footer > dd .last .fammilySite .accordion ul { display: none; padding: 0 30px 30px; border-bottom: 1px solid #ddd; } .footer > dd .last .fammilySite .accordion:last-of-type ul { border-bottom: 0; } .footer > dd .last .fammilySite .accordion ul li { margin-bottom: 12px; line-height: 1; } .footer > dd .last .fammilySite .accordion ul li:last-of-type { margin-bottom: 0; } .footer > dd .last .fammilySite .accordion ul li a { display: inline-block; height: 20px; font-size: 18px; color: #666; font-weight: 300; position: relative; font-family: "Noto Sans KR", sans-serif; } .footer > dd .last .fammilySite .accordion ul li a:hover { color: #143976; font-weight: 500; border-bottom: 1px solid #0c2f6b; } .footer > dd .last h2 { margin-bottom: 25px; } .footer > dd .last h2:last-of-type { margin-bottom: 10px; } .footer > dd .last dl { margin-bottom: 60px; } .footer > dd .last dl > * { display: inline-block; vertical-align: bottom; } .footer > dd .last dl dt { width: 100px; height: 42px; line-height: 42px; margin-bottom: 7px; background: #0c2f6b; border-radius: 5px; } .footer > dd .last dl dt img { vertical-align: middle; } .footer > dd .last dl dd { width: 140px; padding-left: 40px; position: relative; } .footer > dd .last dl dd:before { content: ">"; display: block; font-size: 18px; font-weight: 300; line-height: 1; position: absolute; bottom: 19px; left: 16px; } .footer > dd .last dl dd p { margin-bottom: 10px; font-size: 16px; font-weight: 300; text-align: right; } .footer > dd .last dl dd a { display: inline-block; margin-bottom: 3px; } .footer > dd .last dl dd a:last-of-type { margin-bottom: 0; } .footer > dd .last .sns_icon a { display: inline-block; margin-right: 17px; vertical-align: middle; } .footer > dd .last .sns_icon a:last-of-type { margin-right: 0; } .floating { position: fixed; bottom: 100px; right: 100px; font-size: 0; z-index: 30; } .floating.on { position: absolute; bottom: 455px; } .floating > * { display: inline-block; vertical-align: bottom; } .floating .circle { display: inline-block; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; text-align: center; overflow: hidden; -webkit-box-shadow: 4px 8px 11.83px 1.17px rgba(0, 0, 0, 0.24); box-shadow: 4px 8px 11.83px 1.17px rgba(0, 0, 0, 0.24); vertical-align: top; cursor: pointer; } .floating dt { position: relative; } .floating dt .circle { background: #e6003e; } .floating dt .circle img { vertical-align: middle; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .floating dt .circle.on img { -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .floating dt ul { position: absolute; bottom: 90px; right: 11px; display: none; } .floating dt ul li { margin-bottom: 10px; text-align: right; position: relative; } .floating dt ul li:last-of-type { margin-bottom: 0; } .floating dt ul li a { display: block; } .floating dt ul li span { font-size: 14px; color: #949393; position: absolute; top: 50%; right: 60px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); white-space: nowrap; } .floating dt ul li p { display: inline-block; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background: #3d3d3d; text-align: center; overflow: hidden; vertical-align: middle; } .floating dt ul li p img { vertical-align: middle; } .floating dd.topBtn { width: 0; font-size: 16px; color: #fbfbff; font-weight: 600; background: #0c2f6b; overflow: hidden; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .floating dd.topBtn.on { width: 70px; margin-left: 10px; } @media all and (max-width: 1700px) { .header .gnb { -webkit-transform: translate(-56%, -50%); -ms-transform: translate(-56%, -50%); transform: translate(-56%, -50%); } .header .gnb > li .lnb { -webkit-transform: translateX(-47%); -ms-transform: translateX(-47%); transform: translateX(-47%); } } @media all and (max-width: 1600px) { .header h1 { left: 40px; } .header .gnb > li > a { padding: 0 12px; } .header .right { right: 40px; } .header .search { width: 170px; } .footer > dt { padding: 55px 40px 55px; } .footer > dt { width: calc(100% - 620px); } .footer > dd { width: 620px; } .footer > dd .first { width: 300px; padding: 55px 40px 55px; } .footer > dd .first h3 { left: 40px; } .footer > dd .last { width: 320px; } .floating { position: fixed; bottom: 50px; right: 50px; } } @media all and (max-width: 1500px) { .header h1 { left: 30px; } .header .gnb { -webkit-transform: translate(-53%, -50%); -ms-transform: translate(-53%, -50%); transform: translate(-53%, -50%); } .header .gnb > li { margin-right: 0; } .header .gnb > li > a { font-size: 16px; } .header .gnb > li .lnb li a { font-size: 16px; } .header .right { right: 30px; } .header .search { width: 140px; margin-right: 20px; } } @media all and (max-width: 1400px) { .footer > dt { width: 100%; min-height: auto; } .footer > dt h2 { margin-bottom: 40px; } .footer > dt ul li { display: inline-block; width: 50%; margin-bottom: 0; margin-left: 0; } .footer > dt ul li:first-of-type { padding-right: 25px; } .footer > dt ul li:last-of-type { margin-top: 40px; padding-right: 25px; } .footer > dt ul li p { min-height: 65px; } .footer > dd { width: 100%; } .footer > dd > * { min-height: 420px; } .footer > dd .first { width: 50%; } .footer > dd .last { width: 50%; } .floating.on { position: absolute; bottom: 450px; } } @media all and (max-width: 1280px) { .header h1 { width: 200px; height: 29px; } .header .gnb { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .header .gnb > li .lnb { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .header .lang a { font-size: 0; } .floating { right: 30px; } } @media all and (max-width: 1080px) { .wrap .pcHeader { display: none; } .pop-layer-mobile-control { top: 60px !important; left: 50% !important; transform: translate(-50%,0); } .wrap .moHeader { display: block; } .headerWrap { z-index: 30; } .headerWrap .header { height: 100px; background: #fff; z-index: 1; border-bottom: 1px solid #e3e4e8; } .header > a { display: inline-block; width: 340px; height: 44px; position: absolute; top: 50%; left: 40px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/mobile/layout/logo.png") top left no-repeat; background-size: auto 100%; } .header .menuBtn { width: 41px; height: 32px; position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/mobile/layout/menuBtn.png") top left no-repeat; background-size: auto 100%; } .header .globalBtn { width: 44px; height: 44px; position: absolute; top: 50%; right: 106px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/mobile/layout/globalBtn.png") top left no-repeat; background-size: auto 100%; } .header .globalBtn a { display: block; height: 100%; } .headerWrap .menu { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; display: none; z-index: 1; } .menu .black_bg { display: block; } .menuCon { width: 100%; height: 100%; position: absolute; top: 0; left: -100%; background: #f5f5f7; overflow-y: auto; -webkit-overflow-scrolling: touch; } .menuCon .header { position: relative; } .menuCon .header .menu_x { width: 33px; padding: 5px; position: absolute; top: 50%; right: 35px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-sizing: content-box; box-sizing: content-box; } .menuCon .menuTop { padding: 50px 40px; background: #fff; } .menuTop .topSearch { font-size: 0; } .menuTop .topSearch > * { display: inline-block; vertical-align: top; } .menuTop .topSearch dt { width: calc(100% - 85px); height: 90px; border: 2px solid #ddd; border-radius: 45px 0 0 45px; position: relative; } .menuTop .topSearch dt:before { content: ""; display: block; width: 90px; height: 90px; border: 2px solid #ddd; border-radius: 45px; background: #fff; position: absolute; top: -2px; right: -51px; -webkit-box-sizing: border-box; box-sizing: border-box; } .menuTop .topSearch dt input { width: 100%; height: 100%; padding: 0 55px 0 40px; font-size: 26px; color: #222; vertical-align: middle; } .menuTop .topSearch dt input::-webkit-input-placeholder { color: #666; } .menuTop .topSearch dt input::-moz-placeholder { color: #666; } .menuTop .topSearch dt input:-ms-input-placeholder { color: #666; } .menuTop .topSearch dt input::-ms-input-placeholder { color: #666; } .menuTop .topSearch dt input::placeholder { color: #666; } .menuTop .topSearch dt input:-ms-input-placeholder { color: #666; } .menuTop .topSearch dt input::-ms-input-placeholder { color: #666; } .menuTop .topSearch dd { width: 90px; margin-left: -5px; position: relative; } .menuTop .topSearch dd:before { content: ""; display: block; width: 90px; height: 90px; border-radius: 50%; background: #fff; position: absolute; top: 0; left: -25px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; } .menuTop .topSearch dd a { display: block; height: 90px; line-height: 90px; background: #0c2f6b; border-radius: 50%; text-align: center; position: relative; z-index: 2; } .menuTop .topSearch dd img { width: 34px; vertical-align: middle; } .menuCon > ul { margin: -1px 0; } .menuCon > ul > li { margin: -1px 0; } .menuCon > ul > li * { line-height: 1.2; } .menuCon > ul > li > a { display: block; width: 100%; height: 120px; line-height: 120px; padding: 0 40px; font-size: 38px; font-weight: 500; position: relative; -webkit-transition: color .3s ease-out, background .3s ease-out; transition: color .3s ease-out, background .3s ease-out; overflow: hidden; } .menuCon > ul > li > a:before { content: ""; display: block; width: calc(100% - 80px); height: 1px; background: #dcdcdc; position: absolute; bottom: 0; left: 40px; } .menuCon > ul > li > a:after { content: ""; width: 25px; height: 25px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 40px; background: url("../../assets/img/mobile/layout/menu_plus.png") center no-repeat; background-size: 100% auto; } .menuCon > ul > li > a.on { color: #0c2f6b; background: #f5f5f7; } .menuCon > ul > li > a.on:before { display: none; } .menuCon > ul > li.off > a:before { display: none; } .menuCon > ul > li > a.on:after { background-image: url("../../assets/img/mobile/layout/menu_minus.png"); } .menuCon > ul > li.no_depth > a:after { display: none; } .menuCon > ul > li > ul { display: none; padding: 60px 40px; background: #ededee; } .menuCon > ul > li > ul > li { margin-bottom: 25px; } .menuCon > ul > li > ul > li:last-of-type { margin-bottom: 0; } .menuCon > ul > li > ul > li > a { display: block; padding: 20px 50px; font-size: 26px; color: #666; font-weight: 500; } .menuCon > ul > li > ul > li > a:after { content: ""; display: inline-block; width: 9px; height: 14px; margin-left: 10px; vertical-align: 2px; background: url("../../assets/img/mobile/layout/depth_arrow.png") center no-repeat; background-size: 100% auto; } .footer { position: relative; } .footer { padding-top: 90px; border-top: 1px solid #e8e8ec; font-size: 0; } .footer > dt { padding: 55px 40px 55px; border-top: 0; } .footer > dt h2 { margin-bottom: 30px; font-size: 26px; } .footer > dt ul li { display: block; width: 100%; margin-bottom: 35px; } .footer > dt ul li:first-of-type { padding-right: 0; } .footer > dt ul li:last-of-type { margin-bottom: 0; padding-left: 0; margin-top: 0; padding-right: 0; } .footer > dt ul li > span { font-size: 18px; } .footer > dt ul li p { min-height: auto; margin-bottom: 20px; font-size: 18px; } .footer > dt ul li p span { padding-right: 35px; } .footer > dt ul li a { width: 120px; height: 45px; line-height: 45px; font-size: 14px; } .footer > dd h2 { margin-bottom: 40px; font-size: 23px; } .footer > dd > * { display: block; min-height: auto; } .footer > dd .first { width: 100%; padding: 50px 40px 60px; position: static; } .footer > dd .first ul li { margin-bottom: 20px; } .footer > dd .first ul li:last-of-type { margin-bottom: 0; } .footer > dd .first ul li a { font-size: 18px; } .footer > dd .first h3 { top: 55px; bottom: auto; left: 40px; } .footer > dd .first h3 a { display: block; } .footer > dd .first h3 img { width: 260px; } .footer > dd .last .fammilySite { position: relative; margin-bottom: 50px; } .footer > dd .last .fammilySite p { padding: 0 100px 0 40px; height: 100px; line-height: 100px; font-size: 23px; color: #fefefe; background: #999 url("../../assets/img/mobile/layout/select_arrow_down.png") center right 40px no-repeat; background-size: 15px auto; } .footer > dd .last .fammilySite p.on { background-image: url("../../assets/img/mobile/layout/select_arrow_up.png"); } .footer > dd .last .fammilySite .accordionCon { padding: 20px 40px; bottom: 100px; } .footer > dd .last .fammilySite .accordion span { font-size: 22px; padding: 20px 55px 20px 0; background: url("../../assets/img/mobile/layout/arrow_purple_down.png") center right no-repeat; background-size: 16px auto; } .footer > dd .last .fammilySite .accordion span.on { background-image: url("../../assets/img/mobile/layout/arrow_purple_up.png"); } .footer > dd .last .fammilySite .accordion ul { padding: 0 0 30px; } .footer > dd .last .fammilySite .accordion ul li { margin-bottom: 25px; } .footer > dd .last .fammilySite .accordion ul li a { height: 20px; font-size: 22px; } .footer > dd .last { width: 100%; padding: 0 0 60px; } .footer > dd .last h2 { margin-bottom: 20px; } .footer > dd .last h2:first-of-type { margin-bottom: 50px; } .footer > dd .last h2:last-of-type { margin-bottom: 20px; } .footer > dd .last dl { margin-bottom: 40px; text-align: center; } .footer > dd .last dl > * { vertical-align: middle; } .footer > dd .last dl dt { width: 226px; height: 70px; line-height: 70px; margin-bottom: 0; border-radius: 10px; } .footer > dd .last dl dt a { display: block; } .footer > dd .last dl dt img { width: 159px; } .footer > dd .last dl dd { width: 365px; padding-left: 140px; } .footer > dd .last dl dd:before { font-size: 30px; bottom: 60px; left: 63px; } .footer > dd .last dl dd p { margin-bottom: 5px; font-size: 16px; } .footer > dd .last dl dd a { display: block; width: 223px; margin-bottom: 12px; } .footer > dd .last dl dd a:last-of-type { margin-bottom: 0; } .footer > dd .last dl dd a img { width: 100%; } .footer > dd .last .sns_icon a { width: 68px; margin-right: 25px; } .footer > dd .last .sns_icon a img { width: 100%; } .floating { width: 100px; bottom: 40px; right: 40px; font-size: 0; z-index: 30; } .floating.on { position: fixed; width: 100px; bottom: 40px; } .floating .circle { width: 100px; height: 100px; line-height: 100px; } .floating dt .circle img { width: 36px; } .floating dt ul { bottom: 115px; right: 19px; } .floating dt ul li { margin-bottom: 12px; } .floating dt ul li span { font-size: 18px; right: 77px; } .floating dt ul li p { width: 63px; height: 63px; line-height: 63px; } .floating dt ul li p img { width: 25px; } .floating dd.topBtn { width: 100px; height: 0; font-size: 24px; } .floating dd.topBtn.on { width: 100px; height: 100px; margin: 10px 0 0; } } @media all and (max-width: 768px) { .headerWrap .header { height: 13.89vw; } .header > a { width: 47.22vw; height: 6.11vw; left: 5.56vw; } .header .menuBtn { width: 5.69vw; height: 4.44vw; right: 5.56vw; } .header .globalBtn { width: 6.11vw; height: 6.11vw; right: 14.72vw; } .menuCon .header .menu_x { width: 4.58vw; padding: 0.69vw; right: 4.86vw; } .menuCon .menuTop { padding: 6.94vw 5.56vw; } .menuTop .topSearch dt { width: calc(100% - 11.81vw); height: 12.50vw; border-width: 0.28vw; border-radius: 6.25vw 0 0 6.25vw; } .menuTop .topSearch dt:before { width: 12.50vw; height: 12.50vw; border-width: 0.28vw; border-radius: 6.25vw; top: -0.28vw; right: -7.08vw; } .menuTop .topSearch dt input { padding: 0 7.64vw 0 5.56vw; font-size: 3.61vw; } .menuTop .topSearch dd { width: 12.50vw; margin-left: -0.69vw; } .menuTop .topSearch dd:before { width: 12.50vw; height: 12.50vw; left: -3.47vw; } .menuTop .topSearch dd a { height: 12.50vw; line-height: 12.50vw; } .menuTop .topSearch dd img { width: 4.72vw; } .menuCon > ul > li > a { height: 16.67vw; line-height: 16.67vw; padding: 0 5.56vw; font-size: 5.28vw; } .menuCon > ul > li > a:before { width: calc(100% - 11.11vw); left: 5.56vw; } .menuCon > ul > li > a:after { width: 3.47vw; height: 3.47vw; right: 5.56vw; } .menuCon > ul > li > ul { padding: 8.33vw 5.56vw; } .menuCon > ul > li > ul > li { margin-bottom: 3.47vw; } .menuCon > ul > li > ul > li > a { padding: 2.78vw 6.94vw; font-size: 3.61vw; } .menuCon > ul > li > ul > li > a:after { width: 1.25vw; height: 1.94vw; margin-left: 1.39vw; vertical-align: 0.28vw; } .footer { padding-top: 12.50vw; } .footer > dt { padding: 7.64vw 5.56vw 7.64vw; } .footer > dt h2 { margin-bottom: 4.17vw; font-size: 3.61vw; } .footer > dt ul li { margin-bottom: 4.86vw; } .footer > dt ul li > span { font-size: 2.50vw; } .footer > dt ul li p { margin-bottom: 2.78vw; font-size: 2.50vw; } .footer > dt ul li p span { padding-right: 4.86vw; } .footer > dt ul li a { width: 16.67vw; height: 6.25vw; line-height: 6.25vw; font-size: 1.94vw; } .footer > dd h2 { margin-bottom: 5.56vw; font-size: 3.19vw; } .footer > dd .first { padding: 6.94vw 5.56vw 8.33vw; } .footer > dd .first ul li { margin-bottom: 2.78vw; } .footer > dd .first ul li a { font-size: 2.50vw; } .footer > dd .first h3 { top: 7.64vw; left: 5.56vw; } .footer > dd .first h3 img { width: 36.11vw; } .footer > dd .last .fammilySite { margin-bottom: 6.94vw; } .footer > dd .last .fammilySite p { padding: 0 13.89vw 0 5.56vw; height: 13.89vw; line-height: 13.89vw; font-size: 3.19vw; background: #999 url("../../assets/img/mobile/layout/select_arrow_down.png") center right 5.56vw no-repeat; background-size: 2.08vw auto; } .footer > dd .last .fammilySite .accordionCon { padding: 2.78vw 5.56vw; bottom: 13.89vw; } .footer > dd .last .fammilySite .accordion span { font-size: 3.06vw; padding: 2.78vw 7.64vw 2.78vw 0; background-size: 2.22vw auto; } .footer > dd .last .fammilySite .accordion ul { padding: 0 0 4.17vw; } .footer > dd .last .fammilySite .accordion ul li { margin-bottom: 3.47vw; } .footer > dd .last .fammilySite .accordion ul li a { height: 2.78vw; font-size: 3.06vw; } .footer > dd .last { padding: 0 0 8.33vw; } .footer > dd .last h2 { margin-bottom: 2.78vw; } .footer > dd .last h2:first-of-type { margin-bottom: 6.94vw; } .footer > dd .last h2:last-of-type { margin-bottom: 2.78vw; } .footer > dd .last dl { margin-bottom: 5.56vw; } .footer > dd .last dl dt { width: 31.39vw; height: 9.72vw; line-height: 9.72vw; border-radius: 1.39vw; } .footer > dd .last dl dt img { width: 22.08vw; } .footer > dd .last dl dd { width: 50.69vw; padding-left: 19.44vw; } .footer > dd .last dl dd:before { font-size: 4.17vw; bottom: 8.33vw; left: 8.75vw; } .footer > dd .last dl dd p { margin-bottom: 0.69vw; font-size: 2.22vw; } .footer > dd .last dl dd a { width: 30.97vw; margin-bottom: 1.67vw; } .footer > dd .last .sns_icon a { width: 9.44vw; margin-right: 3.47vw; } .floating { width: 13.89vw; bottom: 5.56vw; right: 5.56vw; z-index: 30; } .floating.on { width: 13.89vw; bottom: 5.56vw; } .floating .circle { width: 13.89vw; height: 13.89vw; line-height: 13.89vw; } .floating dt .circle img { width: 5.00vw; } .floating dt ul { bottom: 15.97vw; right: 2.64vw; } .floating dt ul li { margin-bottom: 1.67vw; } .floating dt ul li span { font-size: 2.50vw; right: 10.69vw; } .floating dt ul li p { width: 8.75vw; height: 8.75vw; line-height: 8.75vw; } .floating dt ul li p img { width: 3.47vw; } .floating dd.topBtn { width: 13.89vw; font-size: 3.33vw; } .floating dd.topBtn.on { width: 13.89vw; height: 13.89vw; margin: 1.39vw 0 0; } } /*# sourceMappingURL=maps/layout.css.map */