/* css/reset.css */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ :host, :host, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } :host { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a{ color:#000; text-decoration:none; } /* js/font-awesome/css/font-awesome.min.css */ /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} /* theme/basic/css/default.css */ /* 초기화 :host {overflow-y:scroll} :host {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff} :host, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} ul, dl,dt,dd {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle;font-size:1em} input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em} input[type="submit"] {cursor:pointer} button {cursor:pointer} textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {color:#000;text-decoration:none} */ legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } input[type=text],input[type=password], textarea { -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none; } input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { /* -webkit-box-shadow:0 0 5px #9ed4ff; -moz-box-shadow:0 0 5px #9ed4ff; box-shadow:0 0 5px #9ed4ff; border:1px solid #558ab7 !important; */ } .placeholdersjs {color:#aaa !important} /* 레이아웃 크기 지정 */ #hd, #wrapper, #ft {min-width:1200px} #hd_pop, #hd_wrapper, #tnb .inner { /* width:1200px */ } #hd_pop {width:100%} #gnb .gnb_wrap, #container_wr, #ft_wr {width:1200px} /* 팝업레이어 */ #hd_pop {z-index:10000;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops img {max-width:100%} .hd_pops_con {} .hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button {padding:10px;border:0;color:#fff} .hd_pops_footer .hd_pops_reject {background:#000;text-align:left} .hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0} @media screen and (max-width: 640px) { .hd_pops {width: 90%; left: 5% !important; top: 80px !important;} .hd_pops_con {width: 100% !important; height: 100% !important;} } /* 상단 레이아웃 */ #hd {background:#212020} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #tnb {border-bottom:1px solid #383838;margin:0 auto} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #tnb .inner {margin:0 auto} #hd_wrapper {position:relative;margin:0 auto;height:140px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #logo {float:left;padding:30px 0 0} .hd_sch_wr {float:left;padding:30px 0;width:445px;margin-left:65px} #hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_sch {border-radius:30px;overflow:hidden} #hd_sch #sch_stx {float:left;width:385px;height:45px;padding-left:10px;border-radius:30px 0 0 30px;background:#2c2c2c;border:0;border-right:0;font-size:1.25em;color:#fff} #hd_sch #sch_submit {float:left;width:60px;height:45px;border:0;background:#2c2c2c;color:#fff;border-radius:0 30px 30px 0;cursor:pointer;font-size:16px} #hd_define {float:left} #hd_define:after {display:block;visibility:hidden;clear:both;content:""} #hd_define li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} #hd_define li:last-child {padding-right:0;margin-right:0;border-right:0} #hd_define li a {display:inline-block;color:#919191} #hd_define li.active a {color:#fff} #hd_qnb {float:right;text-align:right} #hd_qnb:after {display:block;visibility:hidden;clear:both;content:""} #hd_qnb li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} #hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0} #hd_qnb li span {display:block;margin-top:5px;font-size:0.92em} #hd_qnb li a {display:inline-block;color:#919191} #hd_qnb .visit .visit-num {display:inline-block;line-height:16px;padding:0 5px;margin-left:5px;border-radius:10px;background:#da22f5;color:#fff;font-size:10px} .hd_login {position:absolute;right:0;top:60px} .hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px} .hd_login li:first-child {border-left:0} .hd_login a {color:#fff} /* 메인메뉴 */ #gnb {position:relative;background:#fff} #gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #gnb .gnb_wrap {margin:0 auto;position:relative} #gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3} #gnb #gnb_1dul {font-size:1.083em;padding:0;border-bottom:1px solid #e0e2e5;zoom:1} #gnb ul:after {display:block;visibility:hidden;clear:both;content:""} #gnb .gnb_1dli {float:left;line-height:55px;padding:0px;position:relative} #gnb .gnb_1dli:hover > a {color:#3a8afd; -webkit-transition:background-color 2s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out} .gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:10px;height:10px;overflow:hidden;background:url('/theme/basic/img/gnb_bg2.gif') no-repeat 50% 50%;text-indent:-999px} .gnb_1da {display:block;font-weight:bold;padding:0 15px;color:#080808;text-decoration:none} .gnb_1dli.gnb_al_li_plus .gnb_1da{padding-right:25px} .gnb_2dli:first-child {border:0} .gnb_2dul {display:none;position:absolute;top:54px;min-width:140px;padding-top:2px} .gnb_2dul .gnb_2dul_box {border:1px solid #e0e2e5;border-top:0;padding:0; -webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); -moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)} .gnb_2da {display:block;padding:0 10px;line-height:40px;background:#fff;color:#080808;text-align:left;text-decoration:none} a.gnb_2da:hover {color:#3a8afd;background:#f7f7f8; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out} .gnb_1dli_air .gnb_2da {} .gnb_1dli_on .gnb_2da {} .gnb_2da:focus, .gnb_2da:hover {color:#fff} .gnb_1dli_over .gnb_2dul {display:block;left:0} .gnb_1dli_over2 .gnb_2dul {display:block;right:0} .gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808} .gnb_wrap .gnb_empty a {color:#3a8afd;text-decoration:underline} .gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555} #gnb .gnb_menu_btn {background:#4158d1;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px} #gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0} #gnb .gnb_mnal {float:right;padding:0} #gnb_all {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2); -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2); box-shadow:0 2px 5px rgba(0,0,0,0.2)} #gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef} #gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""} #gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0} #gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef} #gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd} #gnb_all .gnb_al_li li {line-height:2em} #gnb_all .gnb_al_li li a {color:#555} #gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999} /* 중간 레이아웃 */ #wrapper {} #container_wr:after {display:block;visibility:hidden;clear:both;content:""} #container_wr {margin:0 auto;zoom:1} #aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px} #container {position:relative;float:left;min-height:500px;height:auto !important;margin:20px 0;height:500px;font-size:1em;width:930px;zoom:1} #container:after {display:block;visibility:hidden;clear:both;content:""} #container_title {font-size:1.333em;margin:0 auto;font-weight:bold} #container_title span {margin:0 auto 10px;display:block;line-height:30px} .lt_wr {width:32%} .lt_wr:nth-child(3n+1) {clear:both} .latest_wr {margin-bottom:20px} .latest_wr:after {display:block;visibility:hidden;clear:both;content:""} .latest_top_wr {margin:0 -10px 20px} .latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""} /* 하단 레이아웃 */ #ft {background:#212020;margin:0 auto;text-align:center} #ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #ft_wr {max-width:1240px;margin:0;padding:40px 0;position:relative;display:inline-block;text-align:left} #ft_wr:after {display:block;visibility:hidden;clear:both;content:""} #ft_wr .ft_cnt {width:25%;float:left;padding:0 20px} #ft_link {text-align:left} #ft_link a {display:block;color:#fff;line-height:2em;font-weight:bold} #ft_company h2 {font-size:1.2em;margin-bottom:20px} #ft_company {font-weight:normal;color:#e3e3e3;line-height:2em} #ft_catch {margin:20px 0 10px} #ft_copy {text-align:center;width:1200px;margin:0 auto;padding:20px 0;color:#5b5b5b;font-size:0.92em;border-top:1px solid #383838} #top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)} #top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff} /* 게시물 선택복사 선택이동 */ #copymove {} #copymove .win_desc {text-align:center;display:block} #copymove .tbl_wrap {margin:20px} #copymove .win_btn {padding:0 20px 20px} .copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px} .copymove_currentbg {background:#f4f4f4} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* ie6 이미지 너비 지정 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} #captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('/img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px} #captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('/img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px} #captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* 캡챠 자동등록(입력)방지 기본 - mobile */ #captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px} #captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block} #captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('/img/captcha2.png') no-repeat 0 -40px;text-indent:-999px} #captcha.m_captcha #captcha_reload span {display:none} #captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px} #captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} #captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('/img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none} /* ckeditor 단축키 */ .cke_sc {margin:0 0 5px;text-align:right} .btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer} .cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center} .cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1} .cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} .cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9} .cke_sc_def dt {width:20%;font-weight:bold} .cke_sc_def dd {width:30%} /* ckeditor 태그 기본값 */ #bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con li {display:list-item} /* 버튼 */ a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em; -webkit-transition:background-color 0.3s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out} a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm {text-align:right} /* 서식단계 진행 */ .btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px} .btn_submit:hover {background:#2375eb} .btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff} a.btn_close {text-align:center;line-height:50px} a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} .btn_cancel:hover {background:#aaa} a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 25px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ a.btn_frmline {} button.btn_frmline {font-size:1em} /* 게시판용 버튼 */ a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent} .btn_b01:hover, .btn_b01:hover {color:#000} a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle} a.btn_b02:hover, .btn_b02:hover {background:#0025eb} a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle} a.btn_b03:hover, .btn_b03:hover {background:#ebedf6} a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle} a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9} a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ .btn_admin:hover, a.btn_admin:hover {color:#ff3746} /* 기본테이블 */ .tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} .tbl_head01 {margin:0 0 10px} .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px} .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8} .tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all} .tbl_head01 tbody tr:hover td {background:#fafafa} .tbl_head01 a:hover {text-decoration:underline} .tbl_head02 {margin:0 0 10px} .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head02 thead a {color:#383838} .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff} .tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all} .tbl_head02 a {} /* 폼 테이블 */ .tbl_frm01 {margin:0 0 20px} .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left} .tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} .wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); } .tbl_frm01 textarea {padding:2px 2px 3px} .frm_input {height:40px} .full_input {width:100%} .half_input {width:49.5%} .twopart_input {width:385px;margin-right:10px} .tbl_frm01 textarea, .write_div textarea {width:100%;height:100px} .tbl_frm01 a {text-decoration:none} .tbl_frm01 .frm_file {display:block;margin-bottom:5px} .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em} /*기본 리스트*/ .list_01 ul {border-top:1px solid #ececec} .list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative} .list_01 li:nth-child(odd) {background:#f6f6f6} .list_01 li:after {display:block;visibility:hidden;clear:both;content:""} .list_01 li:hover {background:#f9f9f9} .list_01 li.empty_li {text-align:center;padding:20px 0;color:#666} /*폼 리스트*/ .form_01 h2 {font-size:1.167em} .form_01 li {margin-bottom:10px} .form_01 ul:after, .form_01 li:after {display:block;visibility:hidden;clear:both;content:""} .form_01 .left_input {float:left} .form_01 .margin_input {margin-right:1%} .form_01 textarea {height:100px;width:100%} .form_01 .frm_label {display:inline-block;width:130px} /* 자료 없는 목록 */ .empty_table {padding:50px 0 !important;text-align:center} .empty_list {padding:20px 0 !important;color:#666;text-align:center} /* 필수입력 */ .required, textarea.required {background-image:url('/theme/basic/img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important} /* 테이블 항목별 정의 */ .td_board {width:80px;text-align:center} .td_category {width:80px;text-align:center} .td_chk {width:30px;text-align:center} .td_date {width:60px;text-align:center} .td_datetime {width:110px;text-align:center} .td_group {width:80px;text-align:center} .td_mb_id {width:100px;text-align:center} .td_mng {width:80px;text-align:center} .td_name {width:100px;text-align:left} .td_nick {width:100px;text-align:center} .td_num {width:50px;text-align:center} .td_numbig {width:80px;text-align:center} .td_stat {width:60px;text-align:center} .txt_active {color:#5d910b} .txt_done {color:#e8180c} .txt_expired {color:#ccc} .txt_rdy {color:#8abc2a} /* 새창 기본 스타일 */ .new_win {position:relative} .new_win .tbl_wrap {margin:0 20px} .new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1); -moz-box-shadow:0 1px 10px rgba(0,0,0,.1); box-shadow:0 1px 10px rgba(0,0,0,.1)} .new_win #win_title .sv {font-size:0.75em;line-height:1.2em} .new_win .win_ul {margin-bottom:15px;padding:0 20px} .new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px} .new_win .win_ul li:first-child {margin-left:0} .new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3} .new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5} .new_win .win_ul .selected a {color:#fff;font-weight:bold} .new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px} .new_win .win_desc i {font-size:1.2em;vertical-align:baseline} .new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px} .new_win .frm_info {font-size:0.92em;color:#919191} .new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px} .new_win .new_win_con {margin:20px 0;padding:20px} .new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""} .new_win .new_win_con2 {margin:20px 0} .new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_btn {text-align:center} .new_win .cert_btn {margin-bottom:30px;text-align:center} .new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer} .new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em} /* 검색결과 색상 */ .sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 사이드뷰 */ .sv_wrap {position:relative;font-weight:normal} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333; -webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)} .sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent} .sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb} .sv_wrap .sv a:hover {background:#000;color:#fff} .sv_member {color:#333} .sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 페이징 */ .pg_wrap {clear:both;display:block; text-align:center; font-size: 20px} .pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} .pg {text-align:center} .pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#fff;border:1px solid #D6D6D6} .pg a:focus, .pg a:hover {text-decoration:none} .pg_page {color:#000;font-size:20px;height:40px;line-height:38px;padding:0 5px;min-width:64px;text-decoration:none;border-radius:12px} .pg_start {text-indent:-999px;overflow:hidden;background:url('/theme/basic/img/btn_first.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #eee} .pg_prev {text-indent:-999px;overflow:hidden;background:url('/theme/basic/img/btn_prev.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #eee} .pg_end {text-indent:-999px;overflow:hidden;background:url('/theme/basic/img/btn_end.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #eee} .pg_next {text-indent:-999px;overflow:hidden;background:url('/theme/basic/img/btn_next.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #eee} .pg_current {display:inline-block;background:#2B2B2B;border:1px solid #D6D6D6;color:#fff;font-weight:bold;height:40px;line-height:38px;padding:0 10px;min-width:64px;border-radius:12px} /* cheditor 이슈 */ .cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } /* Mobile화면으로 */ #device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center} /* css/common.css */ /**/ .mh-10{margin:0 10px;} .mh-20{margin:0 20px;} .mh-30{margin:0 30px;} .mh-40{margin:0 40px;} .mv-10{margin:10px 0;} .mv-20{margin:20px 0;} .mv-30{margin:30px 0;} .mv-40{margin:40px 0;} .mv-80{margin:80px 0;} .mt-10{margin-top:10px;} .mt-20{margin-top:20px;} .mt-30{margin-top:30px;} .mt-40{margin-top:40px;} .mt-50{margin-top:50px;} .mt-60{margin-top:60px;} .mt-70{margin-top:70px;} .mt-80{margin-top:80px;} .mt-90{margin-top:90px;} .mt-100{margin-top:100px;} .mt-120{margin-top:120px;} .mt-150{margin-top:150px;} .mt-180{margin-top:180px;} .mt-200{margin-top:200px;} .mt-250{margin-top:250px;} .mb-10{margin-bottom:10px;} .mb-20{margin-bottom:20px;} .mb-30{margin-bottom:30px;} .mb-40{margin-bottom:40px;} .mb-50{margin-bottom:50px;} .mb-60{margin-bottom:60px;} .mb-70{margin-bottom:70px;} .mb-80{margin-bottom:80px;} .mb-90{margin-bottom:90px;} .mb-100{margin-bottom:100px;} .mb-120{margin-bottom:120px;} .mb-150{margin-bottom:150px;} .ml-10{margin-left:10px;} .ml-20{margin-left:20px;} .ml-30{margin-left:30px;} .ml-40{margin-left:40px;} .ml-50{margin-left:50px;} .ml-100{margin-left:100px;} .mr-10{margin-right:10px;} .mr-20{margin-right:20px;} .mr-30{margin-right:30px;} .mr-40{margin-right:40px;} .mr-50{margin-right:50px;} .pd-10{padding:10px;} .pd-20{padding:20px;} .pd-50{padding:50px;} .pd-90{padding:90px;} .pv-10{padding: 10px 0;} .pv-20{padding: 20px 0;} .pv-30{padding: 30px 0;} .pv-50{padding: 50px 0;} .pv-60{padding: 60px 0;} .pv-80{padding: 80px 0;} .pv-100{padding: 100px 0;} .pv-150{padding: 150px 0;} .pv-180{padding: 180px 0;} .pv-250{padding: 250px 0;} .pv-300{padding: 300px 0;} .ph-10{padding: 0 10px;} .ph-20{padding: 0 20px;} .ph-30{padding: 0 30px;} .ph-50{padding: 0 50px;} .ph-100{padding: 0 100px;} .ph-150{padding: 0 150px;} .ph-250{padding: 0 250px;} .pt-10{padding-top:10px;} .pt-20{padding-top:20px;} .pt-30{padding-top:30px;} .pt-40{padding-top:40px;} .pt-50{padding-top:50px;} .pt-60{padding-top:60px;} .pt-70{padding-top:70px;} .pt-80{padding-top:80px;} .pt-90{padding-top:90px;} .pt-100{padding-top:100px;} .pt-120{padding-top:120px;} .pt-150{padding-top:150px;} .pb-10{padding-bottom:10px;} .pb-20{padding-bottom:20px;} .pb-30{padding-bottom:30px;} .pb-40{padding-bottom:40px;} .pb-50{padding-bottom:50px;} .pb-60{padding-bottom:60px;} .pb-70{padding-bottom:70px;} .pb-80{padding-bottom:80px;} .pb-90{padding-bottom:90px;} .pb-100{padding-bottom:100px;} .pb-120{padding-bottom:120px;} .pb-150{padding-bottom:150px;} .pl-10{padding-left:10px;} .pl-20{padding-left:20px;} .pl-30{padding-left:30px;} .pl-40{padding-left:40px;} .pl-50{padding-left:50px;} .pr-10{padding-right:10px;} .pr-20{padding-right:20px;} .pr-30{padding-right:30px;} .pr-40{padding-right:40px;} .pr-50{padding-right:50px;} @media screen and (max-width:960px) { .pl-10{padding-left:0px;} .pl-20{padding-left:0px;} .pl-30{padding-left:0px;} .pl-40{padding-left:0px;} .pl-50{padding-left:0px;} .pr-10{padding-right:0px;} .pr-20{padding-right:0px;} .pr-30{padding-right:0px;} .pr-40{padding-right:0px;} .pr-50{padding-right:0px;} .pd-10{padding:10px;} .pd-20{padding:10px;} .pd-50{padding:10px;} .pd-90{padding:50px 15px;} .pv-100{padding: 60px 0;} .pv-150{padding: 100px 0;} .pv-180{padding: 100px 0;} .pv-250{padding: 100px 0;} .pv-300{padding: 100px 0;} .pb-50{padding-bottom:25px;} .pb-60{padding-bottom:30px;} .pb-70{padding-bottom:35px;} .pb-80{padding-bottom:40px;} .pb-90{padding-bottom:45px;} .pb-100{padding-bottom:50px;} .pb-120{padding-bottom:60px;} .pb-150{padding-bottom:70px;} .ph-30{padding: 0 15px;} .ph-50{padding: 0 20px;} .ph-100{padding: 0 0px;} .ph-150{padding: 0 0px;} .ph-250{padding: 0 0px;} .mt-180{margin-top:80px} .mt-200{margin-top:100px} .mt-250{margin-top:100px} .mv-80{margin: 40px 0} .mt-10-mo{margin-top: 10px;} .mt-30-mo{margin-top: 30px;} .mt-50-mo{margin-top: 50px;} .mt-100-mo{margin-top: 100px;} } @media screen and (max-width:426px) { .pv-100{padding: 30px 0;} .pv-150{padding: 80px 0;} .pv-250{padding: 80px 0;} .pl-30{padding-left:15px;} .pl-40{padding-left:15px;} .pl-50{padding-left:15px;} } .ta-center{text-align: center;} .ta-left{text-align: left;} .ta-right{text-align: right;} @media screen and (max-width:960px) { .ta-right{text-align: center;} } .fc-white{color:#fff;} .fc-black{color:#000;} .fc-deepgray{color:#333;} .fc-lightgray{color:#EFEEF2} .fc-blue{color:#328FD6} .fc-blue2{color:#77b9e5 !important} .gradient { background: linear-gradient(to bottom right, #fff, #07a3ed); color: transparent; -webkit-background-clip: text; } .fw-100{font-weight: 100;} .fw-300{font-weight: 300;} .fw-400{font-weight: 400;} .fw-500{font-weight: 500;} .fw-600{font-weight: 600;} .fw-700{font-weight: 700;} .fw-900{font-weight: 900;} .fs-14{font-size: 14px; line-height: 1.2;} .fs-16{font-size: 16px; line-height: 1.2;} .fs-18{font-size: 18px; line-height: 1.2;} .fs-20{font-size: 20px; line-height: 1.2;} .fs-24{font-size: 24px; line-height: 1.2;} .fs-30{font-size: 30px; line-height: 1.2;} .fs-35{font-size: 35px; line-height: 1.2;} .fs-40{font-size: 40px; line-height: 1.2;} .fs-48{font-size: 48px; line-height: 1.2;} .fs-50{font-size: 50px; line-height: 1.2;} .fs-60{font-size: 60px; line-height: 1.2;} .fs-70{font-size: 70px; line-height: 1.2;} .fs-90{font-size: 90px; line-height: 1.2;} .fs-180{font-size: 180px; } @media screen and (max-width:960px) { .fs-180{font-size: 150px; } } @media screen and (max-width:426px) { .fs-24{font-size: 16px;} .fs-180{font-size: 100px; } } .dp-b{display:block} .dp-i{display: inline;} .dp-ib{display: inline-block;} .bg-lightgray{background:#f8f8f8} .bg-gray{background:#1D1D1D} .bg-white{background:#fff} .bg-blue{background:#328FD6} .flex{ display:flex; justify-content: center; align-items: center; } .flex-sb{ display:flex; justify-content: space-between; align-items: center; } .flex-start{ display:flex; justify-content: flex-start; align-items: flex-start; } .flex-end{ display:flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; } .flex-1{flex:1} @media screen and (max-width:960px) { .flex-1{ flex:initial } .flex-order-1{order:-1} } .flex-wrap{ flex-wrap: wrap;} .flex-col4{display: flex;} .flex-col4>div{width: 25%} .flex-col5{display: flex;} .flex-col5>div{width: 20%} .flex-col5-1{display: flex;} .flex-col5-1>div{width: 20%} .flex-col6{display: flex;} .flex-col6>div{width: 16.666%} @media screen and (max-width:960px) { .flex-col4{flex-wrap: wrap; justify-content: center;} .flex-col4>div{width: 50%} .flex-col5{flex-wrap: wrap; justify-content: center;} .flex-col5>div{width: 33.333%} .flex-col5-1{flex-wrap: wrap; justify-content: center;} .flex-col5-1>div{width: 50%} .flex-col6{display: flex; flex-wrap: wrap;} .flex-col6>div{width: 50%} } @media screen and (max-width:640px) { .flex-col4>div{width: 100%} .flex-col5-1>div{width: 100%} .flex-col5>div{width: 100%} .flex-col6>div{width: 100%} } .grid-col4{ /* 모바일에서 2열로 */ display:grid; grid-template-columns: repeat(4, 1fr); column-gap: 28px; row-gap: 28px; } .grid-col4-1{ /* 모바일에서 1열로 */ display:grid; grid-template-columns: repeat(4, 1fr); column-gap: 28px; row-gap: 28px; } .grid-col3{ /* 모바일에서 2열로 */ display:grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; row-gap: 28px; } .grid-col2{ /* 모바일에서 2열로 */ display:grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px; row-gap: 60px; } .grid-col2-1{ /* 모바일에서 1열로 */ display:grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px; row-gap: 60px; } .grid-col3-1{ /* 모바일에서 1열로 */ display:grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; row-gap: 28px; } @media screen and (max-width:960px){ .grid-col4{grid-template-columns: repeat(2, 1fr); } .grid-col4-1{grid-template-columns: 1fr; } .grid-col3{grid-template-columns: repeat(2, 1fr); } .grid-col3-1{grid-template-columns: 1fr; } .grid-col2{grid-template-columns: repeat(2, 1fr); } .grid-col2-1{grid-template-columns: 1fr; } } /**/ .big-point-txt{ font-size: 60px; line-height: 1.3; font-weight: 700; color: #1D1D1D; } .big-point-txt2{ font-size: 50px; line-height: 1.3; font-weight: 700; color: #1D1D1D; } .normal-txt{font-size: 21px; line-height: 30px; color: #1D1D1D;} .normal-txt-24{font-size: 24px; line-height: 30px; color: #1D1D1D;} .normal-txt-wh{font-size: 21px; line-height: 30px; color: #fff;} .border-topbottom{border-top: 2px solid #1D1D1D; border-bottom: 2px solid #1D1D1D;} .border-top-lightgray{ border-top: 2px solid #E3E3E3;} .blueround-box{ display: inline-block; border: 3px solid #449fe5; background:#edf5fa; border-radius: 33px; text-align: center; padding:10px 30px; color:#000; font-size: 24px; line-height: 1.2; } .blueround-box h4{font-size: 30px; color: #328FD6; font-weight: 600;} .blueround-box em{color: #328FD6; font-weight: 600;} .grayround-box{ background :#f8f7f7; border: 1px solid #c2c2c2; border-radius: 20px; padding: 30px 20px; } @media screen and (max-width:426px) { .normal-txt, .normal-txt-wh,.normal-txt-24{font-size: 16px;line-height: 22px;} } /* card layout */ .card-4{display: flex; justify-content: space-between; align-items: center;width: 1420px; margin:0 auto;} .card{ width:calc((100% - 90px) / 4); display: block; background:#fff;box-shadow: 0 0 30px rgba(0,0,0,0.14); transition:all ease .5s;} .card_inner{ width:100%; height: 0; padding-top: 139%; background:#fff;position: relative; z-index: 9;} .card img{position: absolute; bottom:0;left: 50%;z-index: 2; transform: translateX(-50%); width:100%;} .card .eng_ttl{ position: absolute; top: 8%; left:10%; z-index: 3; line-height: 1.4; text-align: left !important;} .card .card_ttl{ position: absolute; top: 20%;left:10%; z-index: 3; font-size: 30px; font-weight: 600; color: #1D1D1D; line-height: 1.4;} .card:hover{ transform: translateY(-10px);} .card .card_inner::before{ content: ''; display: block; width: 100%; height: 100%; background: #fff; position: absolute; left:0px; top: 0px; z-index: 1;} .card_inner::after{ content: ''; display: block; width: calc(100% + 8px); height: calc(100% + 8px); background: #328FD6; position: absolute; left:-4px; top: -4px; z-index: 0; transition:all ease .3s; opacity: 0;} .card:hover .card_inner::after{ opacity: 1;} @media screen and (max-width:1412px) { .card-4{width:100%; padding:0 3vw;} .card .card_ttl{font-size: 25px;} } @media screen and (max-width:960px){ .card-4 {flex-wrap: wrap;} .card-4 .card{width: calc((100% - 30px) / 2); margin-bottom: 50px;} .card .card_ttl{font-size: 30px;} } @media screen and (max-width:640px){ .card-4 .card{width: 100%; margin-bottom: 50px;} .card-4 .card .card_inner{padding-top:100%} } /* //card layout */ /* topline-items */ .topline-items{display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 80px;} .topline-items li{ border-top:4px solid #1D1D1D; transition: all ease .5s;} .topline-items li:hover{ transform: translateY(-10px); border-color: #328FD6;} .topline-items p{padding-top: 20px;} .topline-items .item-info{ border-top: 1px solid #D9D9D9; padding-top: 30px;} .topline-items .item-info h4{font-size: 30px; font-weight: 500;} .topline-items .item-info h6{font-size: 18px; color:#747474; margin-top: 10px;} .topline-items .item-info h6 b{ color:#1D1D1D;} @media screen and (max-width:960px){ .topline-items{grid-template-columns: repeat(2, 1fr); column-gap:80px;} } @media screen and (max-width:360px){ .topline-items{grid-template-columns: repeat(1, 1fr); column-gap:80px;} } /* //topline-items */ /* topbottomline-items */ .topbottomline-items{display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 80px;} .topbottomline-items.grid-col3{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 80px;} .topbottomline-items li{ border-top:4px solid #1D1D1D;border-bottom:4px solid #1D1D1D;transition: all ease .5s;} .topbottomline-items li:hover{ transform: translateY(-10px); border-color: #328FD6;} .topbottomline-items p{padding-top: 20px;} .topbottomline-items .item-info{ border-top: 1px solid #D9D9D9; padding-top: 30px;} .topbottomline-items .item-info h4{font-size: 30px; font-weight: 600; padding-bottom:20px;transition: all ease .2s;} .topbottomline-items li:hover .item-info h4{color:#328FD6} .topbottomline-items .item-info h6{font-size: 18px; color:#747474; margin-top: 10px; border-top:1px solid #D9D9D9;padding:20px 0 25px; line-height: 1.3;} .topbottomline-items .item-info h6 b{ color:#1D1D1D;} @media screen and (max-width:960px){ .topbottomline-items{grid-template-columns: repeat(2, 1fr); column-gap:30px; row-gap: 30px;} .topbottomline-items.grid-col3{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px; row-gap: 80px;} } @media screen and (max-width:640px){ .topbottomline-items{grid-template-columns: repeat(1, 1fr);} .topbottomline-items.grid-col3{display: grid; grid-template-columns: repeat(1, 1fr); } } /* //topbottomline-items */ .dark-square-item{position: relative;} .dark-square-item > div{width:100%;height:0; padding-top:91.911%; position: relative;} .dark-square-item img{position: absolute; top:0; left:0; z-index:3; width:100%;} .dark-square-item h4{position:absolute; top:112px; left:50%; z-index: 4; width:100%; transform: translateX(-50%); font-size: 30px; text-align: center; color:#fff; line-height: 1.2;} .dark-square-item h4::before{content:''; display: block; width:25%; height:2px; background:#fff; margin:0 auto 20px} @media screen and (max-width:960px){ .dark-square-item h4{top: 30%; font-size: 20px;} } .roundSlider .swiper-slide{ background:#F8F8F8; border-radius: 272px; height: 543px; display: flex; align-items: center; justify-content: space-between; padding:0 214px } .roundSlider .swiper-slide p{ width: 406px; height:406px; background: #fff; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-right: 26px; } .roundSlider .swiper-slide h4{text-align: right; font-size:30px; font-weight: 500; line-height: 1.4;margin:20px 0} .roundSlider .swiper-slide h3{text-align: right; font-size:40px; font-weight: 600; border-top:2px solid #1D1D1D; padding-top:20px;} .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display: none;} .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none;} .roundSlider .swiper-button-prev{left: 80px} .roundSlider .swiper-button-next{right: 80px} @media screen and (max-width:960px){ .roundSlider .swiper-slide{ flex-direction: column; height: initial; padding:60px 4vw; text-align: center; } .roundSlider .swiper-button-next{display: none;} .roundSlider .swiper-button-prev{display: none;} .roundSlider .swiper-slide p{margin-right:0; width:370px; height: 370px;} .roundSlider .swiper-slide h4,.roundSlider .swiper-slide h3{text-align: center;} .roundSlider .swiper-slide .eng_ttl_right{ text-align: center; margin-top:50px; } } /* overcard */ .overcard{display: flex; flex-wrap: wrap;} .overcard li{width: 25%; text-align: center; background:#fff; padding: 65px 0 85px;display: flex; flex-direction: column; align-items: center; box-shadow:0 0 50px rgba(0,0,0,0.14); transition: all ease .5s;} .overcard .overcard-flexend{justify-content: flex-end; } .overcard h4{font-size: 30px; font-weight: 600; margin-top:10px} .overcard li h6{font-size: 24px; font-weight: 500; line-height: 33px;} .overcard li h6::before{content:'';display: block; width:45px; height:2px;background: #1d1d1d; margin:20px auto;} .overcard li:last-child{z-index: 0;} .overcard li:nth-last-child(1){z-index: 1;} .overcard li:nth-last-child(2){z-index: 2;} .overcard li:nth-last-child(3){z-index: 3;} .overcard li:nth-last-child(4){z-index: 4;} .overcard li:hover{z-index: 9; transform: translateY(-10px);} @media screen and (max-width:960px){ .overcard li:hover{z-index: 9; transform: translateY(0px);} .overcard li{width: 50%;} } /* //overcard */ /* overblue-card */ .overblue-cards{ padding:0 90px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 22px; row-gap: 22px; } .overblue-card{background:#f8f8f8; display: flex; flex-direction: column; padding-top:44px; height:252px; transition: all ease .5s;} .overblue-card em{color:#328FD6; font-size:30px; font-weight: 600;text-align: center; transition: all ease .2s;} .overblue-card em::after{content: ''; display:block; width: 40px; height:2px; background: #328FD6; margin: 4px auto 20px; transition: all ease .2s;} .overblue-card h4{font-size:24px; font-weight: 500; text-align: center; line-height: 1.4; transition: all ease .2s;} .overblue-card:hover{background: #328FD6; transform: translateY(-10px);} .overblue-card:hover em{color:#fff;} .overblue-card:hover em::after{background:#fff;} .overblue-card:hover h4{color:#fff;} @media screen and (max-width:960px) { .overblue-cards{ grid-template-columns: repeat(2, 1fr); padding:0 0px; } .overblue-card{ height: initial; padding-bottom:4em; } } /* //overblue-card */ /* step-item */ .step-item{display: flex; flex-direction: column; text-align: center;} .step-item h4{font-size: 33px; font-weight: 700;} .grid-col4 .step-item h4{font-size: 24px; font-weight: 700; line-height: 30px;} .step-item h6::before{content: ''; display: block; width: 60px; height:3px; background: #1D1D1D; margin: 20px auto;} .step-item small{font-size: 18px; font-weight: 500 ; color:#7E7E7E} @media screen and (max-width:960px) { .step-item{flex-direction: row; align-items: center; flex-wrap: wrap;} .grid-col4 .step-item, .grid-col3-1 .step-item, .grid-col2-1 .step-item{flex-direction: column;} .grid-col4 .step-item p,.grid-col3-1 .step-item p, .grid-col2-1 .step-item p{margin-right: 0;} .grid-col4 .step-item h4,.grid-col4 .step-item em, .grid-col3-1 .step-item h4,.grid-col3-1 .step-item em, .grid-col2-1 .step-item h4,.grid-col2-1 .step-item em{text-align: center;} .grid-col4 .step-item h6::before, .grid-col3-1 .step-item h6::before, .grid-col2-1 .step-item h6::before{margin: 20px auto;} .grid-col3-1 .step-item .normal-txt{text-align: center;} .step-item p{margin-right: 30px; flex:1;} .step-item div{flex:1;} .step-item em{display:block;text-align: left;} .step-item em .fs-24{font-size: 16px;} .step-item h4{text-align: left;} .step-item h6{text-align: left;} .step-item h6::before{margin:20px 0;} } /* //step-item */ /* step-item */ .step-item-smartlasik {display: flex; flex-direction: column; text-align: center; padding: 20px 0;} .step-item-smartlasik h4{font-size: 20px; font-weight: 500; line-height: 30px;} .step-item-smartlasik h6::before{content: ''; display: block; width: 60px; height:3px; background: #1D1D1D; margin: 20px auto;} .step-item-smartlasik em{color: #333; font-size: 30px; font-weight: 700; display:block;text-align: center;} .step-item-smartlasik small{font-size: 18px; font-weight: 500 ; color:#7E7E7E} @media screen and (max-width:960px) { .step-item-smartlasik {padding: 0px 0;} /*.step-item-smartlasik {flex-direction: row; align-items: center; flex-wrap: wrap;} .step-item-smartlasik p{margin-right: 30px; flex:1;} .step-item-smartlasik div{flex:1;}*/ /*.step-item-smartlasik em{display:block;text-align: left;}*/ /*.step-item-smartlasik em .fs-24{font-size: 16px;} .step-item-smartlasik h4{text-align: left;} .step-item-smartlasik h6{text-align: left;} .step-item-smartlasik h6::before{margin:20px 0;}*/ } /* //step-item */ .step-item-smartlasik2 {margin: 100px 0; } .top-line::before{content: ''; display: block; width: 60px; height:3px; background: #1D1D1D; margin: 20px auto;} .top-line-blue::before{content: ''; display: block; width: 60px; height:3px; background: #328fd6; margin: 20px auto;} /* blueline-item */ .blueline-item{border-right:1px solid #C2C2C2; padding:0 30px; text-align: center;} .blueline-item:last-child{border-right: none;} .blueline-item h3{ border-top: 4px solid #328FD6; font-size: 21px; line-height:29px; padding-top: 20px;} .blueline-item h6{ border-top: 4px solid #328FD6; font-size: 18px; line-height:25px; padding-top: 20px;} .flex-col6 .blueline-item{padding:0 20px;} .bluetxt-item{border-right:1px solid #C2C2C2; padding:0 30px; text-align: center;} .bluetxt-item:last-child{border-right: none;} .betweenline-item{border-right:1px solid #C2C2C2; padding:0 30px; text-align: center;} .betweenline-item:last-child{border-right: none;} .betweenline-item .underline{font-size: 50px; font-weight: 500; display: inline-block; border-bottom: 2px solid #1D1D1D; padding-bottom:4px;} @media screen and (max-width:960px) { .blueline-item{margin-bottom:40px} .blueline-item h3{ font-size: 16px; line-height:22px; } .bluetxt-item{margin-bottom: 30px;border-right: none;} .bluetxt-item p{font-size: 14px;} .bluetxt-item h3{font-size: 16px; line-height: 1.2;} .bluetxt-item:nth-child(2n-1){border-right:1px solid #C2C2C2;} .betweenline-item{margin-bottom: 30px;border-right: none;} .betweenline-item:nth-child(2n-1){border-right:1px solid #C2C2C2;} .flex-col6 .blueline-item:nth-child(2n){ border-right: none; } } @media screen and (max-width:640px) { .bluetxt-item:nth-child(2n-1) { border-right: none; } } /* //blueline-item */ /* dotline-item */ .dotline-ul{padding:40px} .dotline-li{font-size:21px; font-weight: 500; padding:20px 0; border-bottom:1px solid #C2C2C2} .dotline-li:last-child{border-bottom: none;} .dotline-li::before{ content: '•'; } /* //dotline-item */ /* border-circles */ .border-circles{display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 60px; } .border-circle-item{width:240px; margin: 0 auto;} .border-circle-item:hover p { border-color:#328FD6;} .border-circles:hover .border-circle-item:not(:hover) p img{filter:grayscale(1)} .border-circle-item p{display: flex; justify-content: center; align-items: center; width: 240px; height: 240px; border-radius: 50%; border:20px solid #ebebeb; transition: all ease .5s;} .border-circle-item:hover p{ animation: bounce 2s infinite; box-shadow: 0px 20px 20px rgb(0 0 0 / 14%); } @media screen and (max-width:960px) { .border-circles{grid-template-columns: repeat(2, 1fr);} .border-circle-item{width:180px;} .border-circle-item p{width: 180px; height: 180px } .border-circle-item p img{width: 60%} } @media screen and (max-width:640px) { .border-circles{grid-template-columns: repeat(1, 1fr);} .border-circle-item{width:180px;} .border-circle-item p{width: 180px; height: 180px } .border-circle-item p img{width: 60%} } /* //border-circles */ /* bluenum-order */ .bluenum-order{ width: 90%; margin:0 auto; background: #f8f8f8; padding:50px 150px; } .bluenum-order em{} .bluenum-order li{ border-bottom:1px solid #bebebf; padding:28px 0 28px 52px; text-indent: -52px } .bluenum-order li:last-child{border-bottom: none;} .bluenum-order em{ font-size: 30px; color:#328FD6; font-weight: 600; } .bluenum-order span{ font-size: 27px; font-weight: 500; line-height: 1.4; } @media screen and (max-width:960px) { .bluenum-order{padding: 4vw 10vw} } /* //bluenum-order */ .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @-webkit-keyframes bounce2 { from, to { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 50% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } } @keyframes bounce2 { from, to { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 50% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .bounce2 { -webkit-animation-name: bounce2; animation-name: bounce2; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /* css/style.css */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } :host { font-size: 10px; min-width: 320px; width: 100vw; overflow-x: hidden; } :host { font-family: "Noto Sans KR", sans-serif; color: #333; height: 100%; letter-spacing: -0.025em; line-height: 1; font-weight: 400; background: #fff; margin: 0 auto; } img { border: 0; vertical-align: bottom; max-width: 100%; } a { font-family: "Noto Sans KR", sans-serif; color: #333; text-decoration: none; letter-spacing: -0.025em; } @media screen and (max-width: 960px) { :host, a, button, input, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } } button { background: none; border: none; cursor: pointer; } textarea { resize: none; } label { vertical-align: middle; } .light { font-weight: 200; } .medium { font-weight: 500; } b, strong, .bold { font-weight: 600; } .thick { font-weight: 900; } input:focus, input:active { outline: none; font-family: "Noto Sans KR", sans-serif; font-size: 16px; } textarea:focus, textarea:active { outline: none; font-family: "Noto Sans KR", sans-serif; font-size: 16px; } .uppercase { text-transform: uppercase; } input, select { font-size: 16px; } /**/ .btn_more_view { display: inline-block; color: #656565; font-size: 18px; font-weight: 500; } .btn_more_view img { vertical-align: middle; } .wrapper { width: 100%; min-width: 320px; height: 100%; font-size: 10px; position: relative; } .wrapper hr { display: block; } .sub_contents { width: 100%; color: #1D1D1D; } .sub_contents_inner { width: 1280px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1280px) { .sub_contents_inner { width: 100%; padding: 0 3vw; } } .sub_contents_ttl { font-size: 60px; color: #333; font-weight: 700; text-align: center; line-height: 1.2; margin-top: 20px; } /******* header *******/ .main_header { width: 100%; position: fixed; top: 0; left: 0; z-index: 99; padding: 42px 5% 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .main_header .logo { max-width: 262px; } .main_header .login_menu { margin-left: auto; } .main_header .login_menu a { color: #414141; font-size: 15px; font-weight: 500; margin-left: 12px; } .main_header .btn_menu { margin-left: 60px; } .main_header .btn_menu img { width: 50px; } .main_header .nav { position: fixed; top: 0; right: -580px; width: 580px; z-index: 999; height: 100%; background: #fff; padding-top: 12vh; padding-left: 73px; padding-right: 89px; padding-bottom: 12.314vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all ease .5s; transition: all ease .5s; } .main_header .nav.open { right: 0; } .main_header .nav_list { margin-top: 30px; padding-top: 13px; border-top: 3px solid #1D1D1D; } .main_header .nav_list li { width: 100%; height: 5.925vh; min-height: 48px; border-bottom: 3px solid #ECECEC; } .main_header .nav_list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; font-size: 23px; font-weight: 500; color: #AEAEAE; -webkit-transition: all ease .3s; transition: all ease .3s; background: url("/img/icon_nav_arrow.svg") no-repeat right center; } .main_header .nav_list li a:hover { color: #000; } .main_header .nav .cs_center { margin-top: auto; } .main_header .nav .cs_center h4 { display: inline-block; font-size: 23px; color: #000; margin-bottom: 18px; border-bottom: 1px solid #707070; padding-bottom: 4px; } .main_header .nav .cs_center address { font-size: 35px; color: #000; font-weight: 600; } .main_header .btn_nav_close { position: absolute; top: 43px; right: 45px; width: 45px; } .main_header .btn_nav_close img { width: 100%; } .main_header .btn_menu.mo_view { width: 45px; margin-left: auto; } .main_header .btn_menu.mo_view img { width: 100%; } .quick_menu { position: fixed; right: 2vw; bottom: 12vh; z-index: 999; } .quick_menu div { margin-top: 10px; } /*.quick_menu div a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; background: #333; -webkit-transition: all ease .3s; transition: all ease .3s; }*/ .quick_menu div a { display: table-cell; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 70px; height: 70px; border-radius: 6px; background: #333; -webkit-transition: all ease .3s; transition: all ease .3s; color: #fff; font-size: 12px; text-align: center; vertical-align: middle; } .quick_menu div a p { padding-top: 6px; } .quick_menu div a.qc_navi { background: #328FD6; color: #fff; } .quick_menu div a.qc_youtube { background: #CD3731; } .quick_menu div a.qc_call { background: #328FD6; } .quick_menu div a.qc_kakao { background: #f0ab01; } .quick_menu div a.qc_insta { background: #f06292; } .quick_menu div a.qc_blog { background: #4CB029; } .quick_menu2 { position: fixed; right: 1vw; bottom: 12vh; z-index: 999; } .quick_menu2 div { margin-top: 20px; } .quick_menu2 div a { display: block; width: 60px; -webkit-transition: all ease .3s; transition: all ease .3s; text-align: center; } .quick_menu2 div a p { padding-top: 6px; color: #666; font-size: 12px; } /*.quick_menu div a.qc_navi:hover { background: #328FD6; } .quick_menu div a.qc_youtube:hover { background: #CD3731; } .quick_menu div a.qc_call:hover { background: #328FD6; } .quick_menu div a.qc_kakao:hover { background: #FFB500; } .quick_menu div a.qc_time:hover { background: #4CB029; }*/ .header { width: 100%; position: fixed; top: 0; left: 0; z-index: 99999; background: rgba(255, 255, 255, 0.8); -webkit-transition: background ease .5s; transition: background ease .5s; } .header.bg-white { background: #fff; } .header .logo { max-width: 262px; } .header_top { border-bottom: 1px solid #CCCCCC; height: 56px; } .header_top_inner { width: 1412px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1280px) { .header_top_inner { width: 100%; padding: 0 3vw; } } .header_note { padding-left: 32px; background: url("/img/icon_topnote.png") no-repeat left center; } .header_note a { font-size: 15px; font-weight: 600; color: #1D1D1D; line-height: 56px; } .header_note a span { margin-left: 10px; font-size: 13px; font-weight: 500; } .header_topmenu ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .header_topmenu ul a { font-size: 15px; font-weight: 600; line-height: 56px; } .header_topmenu ul li { margin-left: 20px; } .header_gnb { width: 100%; border-bottom: 1px solid #ccc; } .header_gnb_inner { width: 1412px; margin-left: auto; margin-right: auto; height: 92px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1280px) { .header_gnb_inner { width: 100%; padding: 0 3vw; } } .header_gnb_main { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .header_gnb_main a { font-size: 16px; font-weight: 600; padding: 0 10px; color: #1D1D1D; } .header_gnb_main li { margin-left: 10px; } .header_links { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 40px; } .header_links li::after { content: ''; display: inline-block; width: 1px; height: 9px; background: #1D1D1D; margin: 0 14px; position: relative; top: -2px; } .header_links li:last-child::after { display: none; } .header_submenu_box { width: 1412px; position: absolute; top: 100%; left: calc(50% - 706px); z-index: 99999; background: #fff; border-top: 4px solid #1D1D1D; padding: 35px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.07); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.07); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); visibility: hidden; opacity: 0; max-height: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .header_submenu_box.show { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; max-height: 420px; } .header_submenu_box > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0 4px; } .header_submenu_box h4 { font-size: 16px; font-weight: 600; line-height: 24px; color: #1D1D1D; padding-left: 4px; padding-bottom: 12px; border-bottom: 2px solid #CCCCCC; } .header_submenu_box li { border-bottom: 1px solid #F0F0F0; } .header_submenu_box li:last-child { border-bottom: none; } .header_submenu_box li a { display: block; font-size: 15px; font-weight: 500; padding: 12px 0 12px 4px; letter-spacing: -0.05em; } .main .header_mo.opened { background: #fff; } .header_mo { width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: transparent; -webkit-transition: all ease .5s; transition: all ease .5s; } .header_mo_gnb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 80px; padding: 0 2.9%; } .header_mo_gnb .btn_submenu img { width: 45px; } .header_mo_gnb .logo { width: 60vw; max-width: 260px; } .header_mo_submenu { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; padding: 0 2vw 10px; display: none; } .header_mo_submenu .btn_submenu_2depth { width: 100%; height: 54px; background: #333; color: #fff; text-align: left; font-size: 14px; font-weight: 600; padding-left: 20px; position: relative; } .header_mo_submenu .btn_submenu_2depth::after { content: '\f067'; font-family: "Font Awesome 5 Free"; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header_mo_submenu .btn_submenu_2depth.opened::after { content: '\f068'; } .header_mo_submenu ul { display: none; } .header_mo_submenu ul li { border-bottom: 1px solid #D9D9D9; } .header_mo_submenu ul a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 54px; background: #F2F2F2; padding-left: 40px; font-size: 14px; font-weight: 600; } .btm_menu { position: fixed; bottom: 0; left: 0; z-index: 9999; width: 100%; background: #2284c6; } .btm_menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 0 3vw; height: 100%; padding: 14px 0; } .btm_menu ul li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; position: relative; } .btm_menu ul li::after { content: ''; display: block; width: 2px; height: 14px; background: #fff; position: absolute; right: 0; top: calc(50% - 7px); } .btm_menu ul li:last-child::after { display: none; } .btm_menu ul li:nth-child(1) a img { width: 30px; margin-left: 12px; } .btm_menu ul li:nth-child(2) a img, .btm_menu ul li:nth-child(3) a img { width: 30px; } .btm_menu ul li:nth-child(4) a img { width: 30px; } .btm_menu a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; text-align: center; font-size: 15px; font-weight: 500; } .btm_menu a em { margin-top: 10px; } .mode_main .header { background: rgba(0, 0, 0, 0); /*background: rgba(0, 0, 0, 0.18);*/ } .mode_main .header.bg-white { background: #fff; } .mode_black .header { background: rgba(0, 0, 0, 0); /*background: rgba(0, 0, 0, 0.18);*/ } .mode_black .header.bg-black { background: #464646; } .mode_black .header_note { background: url("/img/icon_topnote_wh.png") no-repeat left center; } .mode_black .header_note a { color: #fff; } .mode_black .header_topmenu ul a { color: #fff; } .mode_black .header_links li::after { background: #fff; } .mode_black .header_gnb_main a { color: #fff; } .mode_black .header_submenu_box { background: #464646; border-top: 4px solid #fff; } .mode_black .header_submenu_box.show { background: #464646; } .mode_black .header_submenu_box h4, .mode_black .header_submenu_box a { color: #fff; } .sub1-3 .header { background: transparent; } .mini-header { -webkit-transition: all ease .5s; transition: all ease .5s; } .mini-header.header { background: #fff; -webkit-transform: translateY(-56px); transform: translateY(-56px); } .btm_counsel { position: fixed; bottom: 0; left: 0; z-index: 9999; width: 100%; background: #333; } .btm_counsel_inner { width: 1106px; height: 80px; margin: 0 auto; } .btm_counsel form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .btm_counsel form h2 { font-size: 20px; font-weight: 500; color: #fff; } .btm_counsel form input[type="text"], .btm_counsel form select { background: transparent; -webkit-box-shadow: none; box-shadow: none; color: #fff; border: none; border-bottom: 1px solid #E9E9E9; padding-left: 8px; height: 34px; margin-right: 10px; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; } .btm_counsel form input[type="text"]:focus, .btm_counsel form select:focus { outline: none; } .btm_counsel form select option { color: #333; } .btm_counsel form .ipt_name { width: 166px; } .btm_counsel form .ipt_ph { width: 186px; } .btm_counsel form select { width: 203px; } .btm_counsel form label { font-size: 14px; font-weight: 500; color: #fff; } .btm_counsel form input#btm_check { display: none; } .btm_counsel form input#btm_check + label { padding-left: 20px; background: url("/img/cs_check_off.svg") no-repeat left 3px; background-size: 15px; } .btm_counsel form input#btm_check:checked + label { background: url("/img/cs_check_on.svg") no-repeat left 3px; background-size: 15px; } .btm_counsel form button[type="submit"] { display: block; width: 150px; height: 56px; background: #fff; color: #333; font-size: 18px; font-weight: 500; font-family: 'Noto Sans KR', sans-serif; } /******* //header *******/ .main_content_wrap { width: 100%; } .eng_ttl { color: #8C8C8C; font-size: 13px; letter-spacing: 0.2em; text-align: center; } .eng_ttl_right { color: #8C8C8C; font-size: 13px; letter-spacing: 0.2em; text-align: right; } .eng_subject { color: #d5d5d5; font-size: 21px; letter-spacing: 0.390em; text-align: center; margin-top: 15px; } .bg_circle_deco { background: #F9F9F9 url("/img/bg_circle_deco.png") no-repeat center; } .mainbanner_container { width: 100%; /* max-width: 1920px; */ margin: 0 auto; position: relative; margin-top: 149px; } .mainbanner-media { display: block; width: 100%; aspect-ratio: 1920 / 755; } .mainbanner-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .mainbanner_container .swiper-pagination { max-width: 100%; bottom: 0px !important; left: 50% !important; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; padding-left: 0px; } .mainbanner_container .swiper-pagination-bullet { /*width: 100px; height: 4px;*/ border-radius: 0; margin: 0 !important; /*background: #B8B8B8;*/ opacity: 1; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); } .mainbanner_container .swiper-pagination-bullet-active { background: #fff; } .mainbanner_container .mainbanner_links { background: #fff; padding-right: 115px; position: absolute; bottom: 100px; right: 0; z-index: 98; } .mainbanner_container .mainbanner_links ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 105px; } .mainbanner_container .mainbanner_links ul li { margin-left: 55px; } .mainbanner_container .mainbanner_links ul li:hover .mainbanner_links_ttl { color: #1580D1; } .mainbanner_container .mainbanner_links ul li small { font-size: 9px; color: #B2B2B2; } .mainbanner_container .mainbanner_links ul li .mainbanner_links_ttl { font-size: 18px; font-weight: 600; color: #1D1D1D; margin-top: 8px; -webkit-transition: all ease .3s; transition: all ease .3s; } .mainbanner_container .mainbanner_links ul li .mainbanner_links_ttl i { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 15px; } .mainbanner_container .icon_scroll { position: absolute; left: 50%; bottom: 35px; z-index: 99; -webkit-animation: scrollAni 2s ease infinite; animation: scrollAni 2s ease infinite; } @-webkit-keyframes scrollAni { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(15%); transform: translateY(15%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes scrollAni { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(15%); transform: translateY(15%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .main_content_ttl { font-size: 50px; color: #000; font-weight: 600; margin-top: 20px; text-align: center; line-height: 1.2; } h4.main_content_ttl { font-size: 30px; margin-top: 80px; } .main_special { width: 80.104%; max-width: 1538px; margin: 0 auto; padding: 180px 0; } .main_special_box { width: 24.122%; height: 0; padding-top: 37.46%; overflow: hidden; position: relative; } .main_special_box:hover p img { -webkit-transform: scale(1.1); transform: scale(1.1); } .main_special_box:hover .main_special_txt { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .main_special_box:hover::before { opacity: 1; } .main_special_box p { position: absolute; top: 0; left: 0; z-index: 2; } .main_special_box p img { width: 100%; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .main_special_box .main_special_txt { position: absolute; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; font-size: 28px; color: #fff; text-align: center; line-height: 35px; opacity: 0; -webkit-transition: all ease .5s; transition: all ease .5s; -webkit-transform: translateY(50px); transform: translateY(50px); } .main_special_box::before { content: ''; position: absolute; top: 0; left: 0; z-index: 3; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: all ease .5s; transition: all ease .5s; } /* main_center */ .main_center { width: 1280px; margin: 0 auto; padding: 120px 0 0 0; } .main_center .flex-sb { width: 100%; } .main_center_box { width: 24.218%; height: 0; padding-top: 39.843%; position: relative; overflow: hidden; background: #f3f6f9; } .main_center_media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .main_center .main_center_cont { width: 100%; position: absolute; left: 50%; top: 50%; z-index: 9; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .main_center_eng { color: #fff; font-size: 9px; letter-spacing: 3.5px; } .main_center_ttl { color: #fff; font-weight: 900; font-size: 30px; margin-top: 12px; } .main_center_link { width: 34%; height: 0; padding-top: 34%; border-radius: 50%; background: rgba(255, 255, 255, 0.32); text-align: center; position: relative; margin-top: 30px; } .main_center_link span { display: block; max-width: 70%; } .main_center_link_inner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #fff; font-size: 12px; font-weight: 600; } .main_center_link_inner p { margin-bottom: 8px; } /* //main_center */ /* main_event */ .main_event { width: 1280px; margin: 0 auto; padding: 180px 0 0 0; position: relative; } .main_event_ttl { width: 100%; border: 1px solid #C7C7C7; padding: 40px 15px; font-size: 24px; font-weight: 500; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .main_event_swiper { position: relative; } .main_event .swiper-button-prev, .main_event .swiper-button-next { font-size: 30px; color: #8B8B8B; } .main_event .swiper-button-prev { left: -37px; } .main_event .swiper-button-next { right: -30px; } /* //main_event */ /* main_latest */ .main_latest { width: 1280px; margin-left: auto; margin-right: auto; padding: 0px 0 240px; } @media screen and (max-width: 1280px) { .main_latest { width: 100%; padding: 0 3vw; } } .main_latest_inner > div { width: 50%; } .main_latest_thumb p { width: 94.218%; } .main_latest_thumb p img { width: 100%; } .main_latest_board { padding: 0 2%; } .main_latest_board_tab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .main_latest_board_tab li { width: 32%; font-size: 21px; color: #ACACAC; border-bottom: 4px solid #ACACAC; padding-bottom: 6px; cursor: pointer; } .main_latest_board_tab li.active { color: #000; border-bottom: 4px solid #328FD6; } .main_latest_board_list li { position: relative; padding: 30px 0; border-bottom: 1px solid #B4B4B4; } .main_latest_board_list li div { font-size: 33px; font-weight: 500; color: #000; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main_latest_board_list li p { font-size: 20px; color: #000; margin-top: 16px; } .main_latest_board_list li span { position: absolute; bottom: 32px; right: 0; font-size: 20px; color: #328FD6; } /* //main_latest */ /* main_review */ .main_review { width: 1280px; margin-left: auto; margin-right: auto; } .main_review .main_review_video { margin-top: 60px; position: relative; } .main_review .main_review_video .swiper-button-prev, .main_review .main_review_video .swiper-button-next { font-size: 30px; color: #8B8B8B; } .main_review .main_review_video .swiper-button-prev { left: -37px; } .main_review .main_review_video .swiper-button-next { right: -30px; } /* 오른쪽 고정 퀵메뉴(폭 60px · 오른쪽 1vw)가 보이는 폭에서는 다음 화살표를 퀵메뉴 왼쪽으로 들인다 */ @media screen and (min-width: 961px) { .main_review .main_review_video .swiper-button-next { right: max(-30px, calc(708px - 49vw)); } } @media screen and (min-width: 961px) and (max-width: 1280px) { .main_review .main_review_video .swiper-button-next { right: calc(68px - 2vw); } } .main_review ul { -ms-flex-wrap: wrap; flex-wrap: wrap; } .main_review ul li { width: 23%; margin: 0 1% 15px; overflow: hidden; } .main_review ul li a { display: block; text-align: center; } .main_review ul li a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .main_review ul li a img { width: 100%; height: auto; aspect-ratio: 390 / 311; object-fit: cover; -webkit-transition: all ease .3s; transition: all ease .3s; } @media screen and (max-width: 1280px) { .main_review { width: 100%; padding: 0 3vw; } } .main_review .main_review_video .swiper-navigation-icon { display: none; } .main_review .ce-rv { width: 100%; flex: 0 0 100%; background: #000; border-radius: 8px; } .main_review .ce-rv__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; } .main_review .ce-rv__play img { width: 100%; height: 100%; object-fit: cover; display: block; } .main_review .ce-rv__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px; border-radius: 12px; background: rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat; transition: background-color .15s ease-out; } .main_review .ce-rv__play:hover::after, .main_review .ce-rv__play:focus-visible::after { background-color: rgba(204,0,0,.9); } .main_review .ce-rv__play:focus-visible { outline: 3px solid #1e5aa0; outline-offset: 2px; } /* //main_review */ /* main_youtube */ .main_youtube { width: 1280px; margin-left: auto; margin-right: auto; margin: 180px auto; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 1280px) { .main_youtube { width: 98%; /*padding: 0 3vw;*/ } } /* //main_youtube */ /* main_count */ .main_count { padding-bottom: 115px; } .main_count_inner { width: 1280px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; color: #6E6E6E; } @media screen and (max-width: 1280px) { .main_count_inner { width: 100%; padding: 0 3vw; } } .main_count hr { width: 100%; height: 1px; color: #707070; } .main_count_num { font-size: 30px; -webkit-transition: all ease .5s; transition: all ease .5s; } .main_count_num b { font-size: 45px; font-weight: 700; -webkit-transition: all ease .5s; transition: all ease .5s; } .main_count_txt { font-size: 20px; font-weight: 500; margin-top: 16px; -webkit-transition: all ease .5s; transition: all ease .5s; } .main_count_item { height: 150px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all ease .5s; transition: all ease .5s; } .main_count_item::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: #6E6E6E; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .main_count_item.active { color: #000; } .main_count_item.active::after { background: #328FD6; } .main_count_item.active .main_count_num { font-size: 48px; } .main_count_item.active .main_count_num b { color: #328FD6; font-size: 70px; } /* //main_count */ /* main_reserve */ .main_reserve { padding-top: 250px; } .main_reserve_inner { width: 1280px; margin-left: auto; margin-right: auto; } .main_reserve_inner > div { width: 50%; } @media screen and (max-width: 1280px) { .main_reserve_inner { width: 100%; padding: 0 3vw; } } .main_reserve .main_map { padding-left: 60px; } .main_reserve .main_map_ttl { font-size: 29px; color: #000; margin-bottom: 12px; font-weight: 600; } .main_reserve p { color: #8C8C8C; font-size: 22px; font-weight: 500; line-height: 1.2; } .main_reserve .main_reserve_form { padding-left: 40px; } .main_reserve .main_reserve_form form { border: none; padding: 0; margin-top: 0; } .main_reserve .main_reserve_form form ul li { width: 100%; } /* //main_reserve */ /* main_coop */ .main_coop { padding: 180px 0 150px; } .main_coop_swiper { width: 100%; overflow: hidden; } .main_coop .swiper { width: 1280px; margin-left: auto; margin-right: auto; overflow: visible; } .main_coop .swiper-wrapper { padding: 70px 0; } .main_coop .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.19); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.19); width: 460px; } .main_coop .swiper-slide img { width: 100%; } @media screen and (max-width: 1280px) { .main_coop .swiper { width: 100%; padding: 0 3vw; } } /* //main_coop */ /* main_info */ .main_info { max-width: 1920px; margin: 0 auto; padding: 180px 0 0 0; } .main_info_box { height: 630px; display: -webkit-box; display: -ms-flexbox; display: flex; } .main_info_box h4 { font-size: 27px; font-weight: 500; color: #1D1D1D; width: 230px; } .main_info_box h4 i { margin-right: 10px; } .main_info_time { width: 50%; height: 100%; background: url("/img/bg_time.jpg") no-repeat center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 3%; padding-right: 10%; } .main_info_time_inner { width: 490px; } .main_info_time_inner > div { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .main_info_time ul { font-size: 18px; } .main_info_time ul li { margin-bottom: 10px; font-weight: 500; } .main_info_time ul li.small { font-size: 14px; } .main_info_time ul em { display: inline-block; width: 90px; text-align: justify; text-align-last: justify; margin-right: 10px; } .main_info_time address { font-size: 18px; font-weight: 500; line-height: 1.3; width: calc(100% - 230px); } .main_info_map { width: 50%; height: 100%; position: relative; } .main_info_map .map_api_box { height: 100%; } .main_info_map .map_address { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 9; background: rgba(8, 19, 58, 0.83); color: #fff; font-size: 20px; text-align: center; padding: 24px 15px 34px; line-height: 2; } .main_info_map .map_address p { margin-bottom: 20px; } .main_info_map .map_address strong { font-weight: 700; font-size: 22px; } .main_info_map .map_address i { display: inline-block; margin: 0 4px; } .main_info_map .map_address .line2 { width: 36px; height: 36px; border-radius: 50%; font-size: 20px; font-weight: 700; background: #1D9B4B; border: 2px solid #fff; text-align: center; line-height: 32px; } .main_info_map .map_address .exit { width: 36px; height: 36px; border-radius: 50%; font-size: 20px; font-weight: 700; background: #F6E600; border: 2px solid #fff; text-align: center; line-height: 32px; color: #000; } .main_info_map .map_address .line_bun { width: 90px; height: 36px; color: #000; font-size: 20px; font-weight: 700; border-radius: 36px; background: #FFCC00; border: 2px solid #fff; text-align: center; line-height: 32px; } /* //main_info */ /******** footer ********/ .main_footer { padding: 96px 0 118px; } .main_footer .logo { max-width: 262px; } .main_footer .flex { width: 1280px; margin-left: auto; margin-right: auto; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .main_footer .ft_info { font-size: 13px; color: #858585; line-height: 19px; font-weight: 500; margin-left: 50px; } .main_footer .ft_menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } .main_footer .ft_menu a { font-size: 14px; font-weight: 600; line-height: 20px; color: #6B6B6B; } .main_footer .ft_menu li::after { content: ''; display: inline-block; width: 1px; height: 12px; background: #858585; margin: 0 10px; } .main_footer .ft_menu li:last-child::after { display: none; } @media screen and (max-width: 1280px) { .main_footer .flex { width: 100%; padding: 0 3vw; } } .sub1-3 .footer { margin-top: 0; } .footer { background: #373737; padding: 0 0 120px; margin-top: 220px; } .footer .logo { text-align: center; margin-top: 56px; } .footer_inner { width: 1412px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1280px) { .footer_inner { width: 100%; padding: 0 3vw; } } .footer_info { width: 50%; font-size: 16px; } .footer_info .flex-start { color: #1D1D1D; } .footer_info .flex-start p { line-height: 1.5; } .footer_info .flex-start b { letter-spacing: -0.02em; } .footer_info .flex-start a { line-height: 1.5; font-size: 14px; } .footer .ft_menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 35px 0; border-bottom: 1px solid #646464; } .footer .ft_menu li { margin: 0 50px; } .footer .ft_menu a { font-size: 15px; color: #fff; font-weight: 500; } .footer_address { padding-top: 20px; margin-top: 50px; font-size: 13px; letter-spacing: 0.02em; color: #D9D9D9; font-weight: 600; line-height: 1.75; text-align: center; } .footer_copyright { margin-top: 20px; padding-top: 10px; font-size: 12px; letter-spacing: 0.02em; color: #B8B8B8; font-weight: 600; line-height: 1.75; text-align: center; } /******** //footer ********/ /* 상세 풀페이지 메인 */ .main2 .subpage_main { background: url("/img/sub2/bg_main2.jpg") no-repeat right center; background-size: cover; } .sub1-1 .subpage_main { background: url("/img/sub1/bg_sub1-1.jpg") no-repeat right center; background-size: cover; } .sub2-1 .subpage_main { background: url("/img/sub2/bg_sub2-1.jpg") no-repeat right center; background-size: cover; } .sub2-2 .subpage_main { background: url("/img/sub2/bg_sub2-2.jpg") no-repeat right center; background-size: cover; } .sub2-3 .subpage_main { background: url("/img/sub2/bg_sub2-3.jpg") no-repeat right center; background-size: cover; } .sub2-4 .subpage_main { background: url("/img/sub2/bg_sub2-4.jpg") no-repeat right center; background-size: cover; } .sub2-5 .subpage_main { background: url("/img/sub2/bg_sub2-3.jpg") no-repeat right center; background-size: cover; } /*.main3 .subpage_main { background: url("/img/sub3/bg_main3.jpg") no-repeat right center; background-size: cover; }*/ .sub4-1 { background: url("/img/sub4/bg_sub4-1.jpg") no-repeat center; background-size: cover; } .sub4-2 { background: url("/img/sub4/bg_sub4-2.jpg") no-repeat center center; background-size: cover; } .sub4-3 { background: url("/img/sub4/bg_sub4-3.jpg") no-repeat center center; background-size: cover; } .sub4-4 { background: url("/img/sub4/bg_sub4-4.jpg") no-repeat right center; background-size: cover; } .sub4-5 { background: url("/img/sub4/bg_sub4-5.jpg") no-repeat center; background-size: cover; } .sub4-7 { background: url("/img/sub4/bg_sub4-7.jpg") no-repeat center; background-size: cover; } /*@media screen and (max-width: 960px) { .sub4-7 { background: url("/img/sub4/bg_sub4-7-m.jpg") no-repeat center left !important; background-size: cover; } }*/ .sub5-1 .subpage_main { background: url("/img/sub5/bg_sub5-1-1.jpg") no-repeat right center; background-size: cover; } .sub5-3 .subpage_main { background: url("/img/sub5/bg_sub5-3.jpg") no-repeat right center; background-size: cover !important; } .sub6-1 .subpage_main { background: url("/img/sub6/bg_sub6-1.jpg") no-repeat center center; background-size: cover; } .subpage_main { width: 100%; height: 100vh; overflow: hidden; position: relative; } .subpage_main_ttlgrp { position: absolute; top: 50%; left: calc(50% - 640px); z-index: 99; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1280px; margin-left: auto; margin-right: auto; color: #333; } .subpage_main_ttlgrp h2 { font-size: 60px; font-weight: 600; line-height: 85px; } .subpage_main_ttlgrp h4 { font-size: 35px; font-weight: 500; line-height: 52px; } @media screen and (max-width: 1280px) { .subpage_main_ttlgrp { width: 100%; padding: 0 3vw; } } .subpage_main_deco { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 98; } .subpage_main_deco1 { position: absolute; top: 0; left: 0; } .subpage_main_deco2 { position: absolute; bottom: 0; left: 70px; } .subpage_main_deco3 { position: absolute; bottom: 15%; left: calc(50% - 176px); } .subpage_main_deco4 { position: absolute; top: 26%; left: 53%; } .subpage_main_bg { width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .subpage_main_bg img { width: 100%; } .lnb { width: 100%; background: #333; -webkit-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.24); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.24); position: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 999; } .lnb-fixed { margin-top: 149px; } .lnb_inner { width: 1280px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 1280px) { .lnb_inner { width: 100%; padding: 0 3vw; } } .lnb ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .lnb ul li { margin-right: 45px; } .lnb ul li:last-child { margin-right: 0; } .lnb h4 { font-size: 16px; font-weight: 600; color: #fff; line-height: 77px; } .lnb h4::after { content: ''; display: inline-block; position: relative; top: 2px; width: 1px; height: 15px; background: #fff; margin: 0 45px; } .lnb a { font-size: 16px; font-weight: 600; color: #fff; line-height: 77px; /* text-transform: uppercase; */ } .lnb_sub_mark { position: relative; } .lnb_sub_mark.on::after { content: ''; width: 0px; height: 52px; border-bottom: solid 26px #eee; border-left: solid 26px transparent; border-right: solid 26px transparent; position: absolute; top: 34px; z-index: 100; left: calc(50% - 26px); } .lnb_sub { display: none; width: 100%; position: absolute; top: 100%; left: 0; z-index: 99; background: #eee; -webkit-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.24); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.24); } .lnb_sub_inner { width: 1280px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1280px) { .lnb_sub_inner { width: 100%; padding: 0 3vw; } } .lnb_sub a { color: #000; -webkit-transition: all ease .3s; transition: all ease .3s; } .lnb_sub a:hover { color: #328FD6; } /* sub1-2 */ .doc_info { padding-left: 35px; } .doc_name { font-size: 50px; font-weight: 600; letter-spacing: 0.1em; } .doc_name small { font-size: 30px; font-weight: 500; letter-spacing: 0; } .bottomline-list.flex-start { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bottomline-list.flex-start li { width: 50%; } .bottomline-list li { font-size: 20px; line-height: 29px; border-bottom: 2px solid #E9E9EA; padding: 10px 0; } .bottomline-list li:last-child { /*border-bottom: 0;*/ } .bottomline-list2.flex-start { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bottomline-list2.flex-start li { width: 50%; } .bottomline-list2 li { font-size: 15px; line-height: 24px; border-bottom: 2px solid #E9E9EA; padding: 10px 0; } .bottomline-list2 li:last-child { /*border-bottom: 0;*/ } .doc_docu .flex-start { -ms-flex-wrap: wrap; flex-wrap: wrap; } .doc_docu_cont { width: calc(100% - 31.25%); } /* 의료진 진료일정 */ .doc_docu_cont table { width: 100%; font-size: 20px; line-height: 30px; } .doc_docu_cont tr:nth-child(3) { background: #fff; } .doc_docu_cont th { padding: 10px 0; text-align: center; /*border-top: 2px solid #333; border-bottom: 2px solid #333;*/ color: #fff; background: #333; border-left: 2px solid #555; } .doc_docu_cont th:first-child { border-left: 0px; } .doc_docu_cont td { padding: 10px 0; text-align: center; border-bottom: 2px solid #333; border-left: 2px solid #E9E9EA; } .doc_docu_cont td:first-child { border-left: 0px; } .doc_docu_cont .txt01 { color: #333;font-weight: 600; /*background: #333; border-bottom: 2px solid #E9E9EA;*/ } .doc_docu_cont .txt02 { color: #E93668; } /* 의료진 진료일정 */ .doc_docu_cont .flex-start li { width: 100%; } .doc_docu_cont .flex-start li:nth-child(2n) { margin-left: auto; /*margin-right: 100px;*/ } .doc_docu_ttl { width: 31.25%; padding-left: 60px; } .doc_docu_ttl small { font-size: 20px; } .doc_docu_ttl h4 { display: inline-block; font-size: 40px; font-weight: 600; line-height: 59px; color: #1D1D1D; border-bottom: 4px solid #1D1D1D; padding-bottom: 10px; } /* //sub1-2 */ /* sub1-1 */ .sub1-1 { margin-top: 150px; } .sub1-1 .pc { display: block; } .sub1-1 .mobile { display: none; } @media screen and (max-width: 960px) { .sub1-1 { margin-top: 20px; } .sub1-1 .mobile { display: block; width: 96%; } .sub1-1 .pc { display: none; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } /* //sub1-1 */ /* sub1-3 */ .sub1-3 .interior .swiper-slide { width: 100vw; height: calc(100vh - 0px); background-size: cover; background-position: center; } .sub1-3 .swiper-slide { position: relative; } .sub1-3 .swiper-slide .slide-cont { width: 550px; margin: 0 auto; position: absolute; top: 20vh; left: calc(50% - 275px); padding: 50px 0; } .sub1-3 .swiper-slide .slide-cont-bk { background: rgba(0, 0, 0, 0.24); } .sub1-3 .swiper-slide .slide-cont-bk .eng_ttl, .sub1-3 .swiper-slide .slide-cont-bk .sub_contents_ttl { color: #fff; } .sub1-3 .swiper-pagination { color: #fff; font-size: 40px; bottom: 40px; } .sub1-3 .swiper-pagination-current { font-weight: 600; } .sub1-3 .swiper-button-next, .sub1-3 .swiper-button-prev { width: 60px; } /* //sub1-3 */ /* sub1-4 */ .sub1-4-1-top { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .sub1-4-1-top > div { width: 50%; } .sub1-4 .call_center { border-top: 4px solid #1d1d1d; border-bottom: 4px solid #1d1d1d; padding: 36px 30px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .sub1-4 .time { border-top: 1px solid #1D1D1D; padding-top: 20px; margin-top: 20px; } .sub1-4 .time ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; width: 100%; } .sub1-4 .time ul li { width: 50%; margin-bottom: 10px; } .sub1-4 .time ul li em { display: inline-block; width: 80px; text-align-last: justify; color: rgba(29, 29, 29, 0.57); font-size: 20px; letter-spacing: -3px; } .sub1-4 .time ul li span { font-size: 20px; font-weight: 500; margin-left: 20px; } .sub1-4 .time p { color: rgba(29, 29, 29, 0.57); font-size: 20px; margin-top: 15px; } .sub1-4 .call_center_links div { width: 48%; } .sub1-4 .call_center_links a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 86px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #1D1D1D; color: #fff; font-size: 24px; font-weight: 600; } .reserv_form { margin-top: 120px; border: 1px solid #E5E5E5; padding: 70px 76px 60px; } .reserv_form ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin-bottom: 40px; } .reserv_form li { width: 47.513%; height: 93px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 0; border-bottom: 1px solid #B4B4B4; } .reserv_form .reserv_label { width: 33.644%; font-size: 18px; color: #474747; font-weight: 500; } .reserv_form .reserv_content { width: 100%; height: auto; } .reserv_form .reserv_content .reserv_label { width: 16%; } .reserv_form .reserv_content #wr_content { width: 84%; height: 150px; vertical-align: top; font-size: 16px; } .reserv_form .btn_cal.reserv_ipt { background: url("/img/icon_cal.png") no-repeat calc(100% - 10px) center; text-align: left; } .reserv_form .reserv_ipt { height: 50px; background: #fff; border: 1px solid #E9E9E9; padding: 10px; } .reserv_form .reserv_ipt:not(.half) { width: 66.356%; } .reserv_form .reserv_ipt.half { width: 38.878%; } .reserv_form label { font-size: 18px; font-weight: 500; color: #474747; } .reserv_form input[type="checkbox"] { display: none; } .reserv_form input[type="radio"] { display: none; } .reserv_form input[type="radio"] + label { padding: 2px 0 2px 23px; background: url("/img/check_off.png") no-repeat left center; } .reserv_form input[type="radio"]:checked + label { background: url("/img/check_on.png") no-repeat left center; } .reserv_form input[type="checkbox"] + label { padding: 2px 0 2px 23px; background: url("/img/check_off.png") no-repeat left center; } .reserv_form input[type="checkbox"]:checked + label { background: url("/img/check_on.png") no-repeat left center; } .reserv_form #surgery_Y + label, .reserv_form #silbi_Y + label { margin-right: 20px; } .reserv_form .btn_submit { width: 100%; height: 67px; background: #272727; color: #fff; font-size: 18px; font-weight: 600; margin-top: 30px; } .require::after { content: '*'; color: #FF2929; font-size: 18px; font-weight: 600; } /* //sub1-4 */ /* sub1-5 */ .sub1-5 .map { position: relative; } .sub1-5 .map_address { width: 662px; height: 87px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; border-radius: 18px; background: rgba(51, 51, 51, 0.8); position: absolute; bottom: 30px; left: 50%; z-index: 99; font-size: 28px; font-weight: 600; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sub1-5 .way .flex { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .sub1-5 .way .way_ttl { width: 320px; font-size: 28px; line-height: 40px; font-weight: 600; color: #1D1D1D; padding: 60px 0; } .sub1-5 .way .way_cont { width: 960px; padding: 60px 0; border-top: 1px solid #B5B5B5; font-size: 25px; font-weight: 500; line-height: 37px; } .sub1-5 .way .img_subway { -webkit-box-shadow: 10px 10px 20px rgba(130, 130, 130, 0.16); box-shadow: 10px 10px 20px rgba(130, 130, 130, 0.16); } .sub1-5 .way .flex:first-child .way_ttl { padding-top: 0; } .sub1-5 .way .flex:first-child .way_cont { padding-top: 0; border-top: none; } .sub1-5 .way .way_bus .flex-start { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sub1-5 .way .way_bus li { margin-bottom: 15px; } .sub1-5 .way em { border-radius: 15px; width: 68px; height: 45px; text-align: center; line-height: 45px; margin-right: 15px; } /* //sub1-5 */ /* sub2-1 */ .bg-sub2-1-1 { width: 100%; background: url("/img/sub2/bg-sub2-1-1.jpg") no-repeat right center; padding: 238px 0 190px; } .bg-sub2-1-1 .big-point-txt { position: relative; } .bg-sub2-1-1 .big-point-txt::before { content: ''; width: 68px; height: 56px; background: url("/img/double_quotes_1.png") no-repeat center; position: absolute; left: -68px; top: -56px; } .bg-sub2-1-1 .big-point-txt::after { content: ''; width: 68px; height: 56px; background: url("/img/double_quotes_2.png") no-repeat center; position: absolute; left: 492px; bottom: -28px; } @media screen and (max-width: 1280px) { .bg-sub2-1-1 { padding: 100px 0; } .bg-sub2-1-1 .big-point-txt { text-align: center; } .bg-sub2-1-1 .big-point-txt::before { left: 50%; top: -70px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .bg-sub2-1-1 .big-point-txt::after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: -70px; } .bg-sub2-1-1 .border-topbottom { width: 100%; margin-top: 150px; } } /* //sub2-1 */ /* sub2-2 */ .sub2-2-1 { background: url("/img/sub2/sub2-2-1.jpg") no-repeat center; background-size: cover; text-align: center; padding: 180px 0; } .sub2-2-1 .sub_contents_ttl { color: #fff; font-size: 50px; } .sub2-2-1 .normal-txt { color: #fff; } /* //sub2-2 */ /* sub4-1 */ /*.sub4-1-1 .eng_ttl, .sub4-1-1 .sub_contents_ttl { text-align: left; }*/ .sub4-1-new .subtext {font-size: 18px; line-height: 1.6; color: #328FD6; } .sub4-1-new .subtext strong {font-weight: 600; padding: 10px 20px; border: 1px solid #328FD6; border-radius: 100px; display: inline-block; margin-bottom: 18px; } .sub4-1-new .eng_ttl {font-size: 18px; line-height: 1.4; } .sub4-1-new .red {color: #cb3219; } .mobile {display: none;} @media screen and (max-width: 640px) { .pc {display: none;} .mobile {display: block;} img {width: 100%;} } .comparebox .comparelist { font-size: 0; margin-top: 100px; } .comparebox .comparelist:after { content: ""; display: block; clear: both; overflow: hidden } .comparebox .comparelist div[class^="list-"] { float: left; width: calc((100% - 260px) / 2) } .comparebox .comparelist div[class^="list-"] > div { /*padding-top: 60px;*/ color: #333 } .comparebox .comparelist .compare-tit { font-size: 32px; font-weight: 600; text-align: center; height: 80px; /*padding: 40px 20px;*/ } .comparebox .comparelist div .compare-tit span { color: #666; font-size: 18px; font-weight: 400 } .comparebox .comparelist div[class^="list-"] div div > p { margin-top: 8px; font-size: 20px } .comparebox .comparelist div div > ul.inner-list { /*margin-top: 45px;*/ border-top: 1px solid #333; border-bottom: 1px solid #333; text-align: center; } .comparebox .comparelist div div > ul.inner-list li { display: -webkit-flex; width: 100%; height: 100px; border-top: 1px solid #eaeaea; color: #666; font-size: 24px; flex-direction: column; justify-content: center; line-height: 1.4; } .comparebox .comparelist div div > ul.inner-list li:first-child { margin-top: 0; } .comparebox .comparelist .list-left { text-align: right } .comparebox .comparelist .list-right div .compare-tit { font-weight: 800; color: #328FD6; } .comparebox .comparelist .list-right div div > ul.inner-list { border-top: 1px solid #328FD6; border-bottom: 1px solid #328FD6; } .comparebox .comparelist .list-right div div ul.inner-list li { color: #328FD6; font-weight: 800; border-top: 1px solid rgba(50,143,214,0.2); } .comparebox .comparelist .title { float: left; width: 260px; padding: 0; /*padding-top: 60px;*/ } .comparebox .comparelist .title > p { color: #d0d0d0; font-size: 44px; font-weight: 400; } .comparebox .comparelist .title > ul { position: relative; /*margin-top: 27px;*/ background: #f5f5f5; border-top: 1px solid #333; border-bottom: 1px solid #333; } .comparebox .comparelist .title > ul > li { display: -webkit-flex; width: 100%; height: 100px; border-top: 1px solid #eaeaea; color: #666; font-size: 18px; flex-direction: column; justify-content: center; line-height: 1.4; text-align: center; } .comparebox .comparelist .title > ul > li:first-child { margin-top: 0 } .infobox + .comparebox { margin-top: 180px } @media screen and (max-width: 960px) { .comparebox .comparelist .compare-tit {font-size: 24px; line-height: 1.2; } .comparebox .comparelist div div > ul.inner-list li {height: 70px; font-size: 24px; line-height: 1.3; padding: 10px; } .comparebox .comparelist div div > ul.inner-list li:first-child {height: 150px; } .comparebox .comparelist .title > ul > li {height: 70px; font-size: 15px; line-height: 1.3; } .comparebox .comparelist .title > ul > li:first-child {height: 150px; } .comparebox .comparelist .title > p {font-size: 60px !important; padding-top: 20px !important; } /*.page-lasiklasek .comparelist div .compare-tit {font-size: 19px; line-height: 28px;}*/ .comparebox .comparelist {margin-top: 50px;} .comparebox .comparelist div div > ul.inner-list {margin-top: 20px;} .comparebox .comparelist .title > ul {margin-top: 20px; } .comparebox .comparelist .title {flex: 1 1 110px;} .comparebox .comparelist .list-left {flex: 1 1 auto;} .comparebox .comparelist .list-right {flex: 1 1 auto;} .comparebox .comparelist div .compare-tit {padding: 0 0 16px 0; max-width: none; font-size: 35px; line-height: 45px; } .comparebox .comparelist .title {flex: 1 1 110px; width: 20%; } .comparebox .comparelist div[class^="list-"] {width: calc((100% - 20%) / 2);} } @media screen and (max-width: 640px) { .comparebox .comparelist div .compare-tit {height: 60px; } } .sub4-1-new .sub4-1-3 .overblue-cards {padding: 0 0px; } /* 추천대상 */ .sub4-1-new .sub4-1-1 .grid-col2 {column-gap: 60px; row-gap: 30px; } .sub4-1-new .sub4-1-1 .sub_title {font-size: 40px; text-align: left; font-weight: 700; line-height: 1.2;} .sub4-1-new .sub4-1-1 .sub_title>strong {font-size: 30px; color: #328FD6; display: inline-block; text-decoration: underline; margin-bottom: 20px; } .sub4-1-new .sub4-1-1 .normal-txt {font-size: 20px; } .sub4-1-new .sub4-1-2 .grid-col2 {column-gap: 60px; row-gap: 0px; } .sub4-1-new .sub4-1-2 .sub_contents_ttl>span {color: #cb3219; font-weight: 600; } .sub4-1-new .sub4-1-2 li {font-size: 22px; text-align: center; padding: 40px; background: #eee; line-height: 1.6; } .sub4-1-new .sub4-1-2 li strong {color: #cb3219; } @media screen and (max-width: 960px) { .sub4-1-new .sub4-1-1 .grid-col2 {grid-template-columns: repeat(1, 1fr); display:flex; flex-direction:column; } .sub4-1-new .sub4-1-1 .grid-col2 .box1 { order:2; } .sub4-1-new .sub4-1-1 .grid-col2 .box2 { order:1; } .sub4-1-new .sub4-1-1 .grid-col2>div {padding: 0 20px; } .sub4-1-new .sub4-1-1 .sub_title {text-align: center; line-height: 1.4; } .sub4-1-new .sub4-1-1 .sub_title>strong {margin-bottom: 10px; } .sub4-1-new .sub4-1-1 .normal-txt {font-size: 16px; } .sub4-1-new .sub4-1-2 .grid-col2 {grid-template-columns: repeat(1, 1fr); display:flex; flex-direction:column; } .sub4-1-new .sub4-1-2 .grid-col2>div {padding: 0 20px; } .sub4-1-new .sub4-1-2 .grid-col3 {grid-template-columns: repeat(1, 1fr); display:flex; flex-direction:column; } .sub4-1-new .sub4-1-2 .grid-col3 {row-gap: 10px; } .sub4-1-new .sub4-1-2 li {font-size: 18px; padding: 20px; } } /* //sub4-1 */ /* sub4-2 */ .comparebox2 .comparelist { font-size: 0; margin-top: 100px; } .comparebox2 .comparelist:after { content: ""; display: block; clear: both; overflow: hidden } .comparebox2 .comparelist div[class^="list-"] { float: left; width: calc((100% - 260px) / 2) } .comparebox2 .comparelist div[class^="list-"] > div { /*padding-top: 60px;*/ color: #333 } .comparebox2 .comparelist .compare-tit { font-size: 32px; font-weight: 600; text-align: center; height: 80px; /*padding: 40px 20px;*/ } .comparebox2 .comparelist div .compare-tit span { color: #666; font-size: 18px; font-weight: 400 } .comparebox2 .comparelist div[class^="list-"] div div > p { margin-top: 8px; font-size: 20px } .comparebox2 .comparelist div div > ul.inner-list { /*margin-top: 45px;*/ border-top: 1px solid #333; border-bottom: 1px solid #333; text-align: center; } .comparebox2 .comparelist div div > ul.inner-list li { display: -webkit-flex; width: 100%; height: 100px; border-top: 1px solid #eaeaea; color: #666; font-size: 24px; flex-direction: column; justify-content: center; line-height: 1.4; } .comparebox2 .comparelist div div > ul.inner-list li:first-child { margin-top: 0; } .comparebox2 .comparelist .list-left { text-align: right } .comparebox2 .comparelist .list-right div .compare-tit { font-weight: 800; color: #328FD6; } .comparebox2 .comparelist .list-right div div > ul.inner-list { border-top: 1px solid #328FD6; border-bottom: 1px solid #328FD6; } .comparebox2 .comparelist .list-right div div ul.inner-list li { color: #328FD6; font-weight: 800; border-top: 1px solid rgba(50,143,214,0.2); } .comparebox2 .comparelist .title { float: left; width: 260px; padding: 0; /*padding-top: 60px;*/ } .comparebox2 .comparelist .title > p { color: #d0d0d0; font-size: 44px; font-weight: 400; } .comparebox2 .comparelist .title > ul { position: relative; /*margin-top: 27px;*/ background: #f5f5f5; border-top: 1px solid #333; border-bottom: 1px solid #333; } .comparebox2 .comparelist .title > ul > li { display: -webkit-flex; width: 100%; height: 100px; border-top: 1px solid #eaeaea; color: #666; font-size: 18px; flex-direction: column; justify-content: center; line-height: 1.4; text-align: center; } .comparebox2 .comparelist .title > ul > li:first-child { margin-top: 0 } .infobox + .comparebox2 { margin-top: 180px } @media screen and (max-width: 960px) { .comparebox2 .comparelist .compare-tit {font-size: 24px; line-height: 1.2; } .comparebox2 .comparelist div div > ul.inner-list li {height: 70px; font-size: 24px; line-height: 1.3; padding: 10px; } .comparebox2 .comparelist div div > ul.inner-list li:nth-child(3) {height: 150px; } .comparebox2 .comparelist div div > ul.inner-list li:nth-child(4) {height: 150px; } .comparebox2 .comparelist .title > ul > li {height: 70px; font-size: 15px; line-height: 1.3; } .comparebox2 .comparelist .title > ul > li:nth-child(3) {height: 150px; } .comparebox2 .comparelist .title > ul > li:nth-child(4) {height: 150px; } .comparebox2 .comparelist .title > p {font-size: 60px !important; padding-top: 20px !important; } /*.page-lasiklasek .comparelist div .compare-tit {font-size: 19px; line-height: 28px;}*/ .comparebox2 .comparelist {margin-top: 50px;} .comparebox2 .comparelist div div > ul.inner-list {margin-top: 20px;} .comparebox2 .comparelist .title > ul {margin-top: 20px; } .comparebox2 .comparelist .title {flex: 1 1 110px;} .comparebox2 .comparelist .list-left {flex: 1 1 auto;} .comparebox2 .comparelist .list-right {flex: 1 1 auto;} .comparebox2 .comparelist div .compare-tit {padding: 0 0 16px 0; max-width: none; font-size: 35px; line-height: 45px; } .comparebox2 .comparelist .title {flex: 1 1 110px; width: 20%; } .comparebox2 .comparelist div[class^="list-"] {width: calc((100% - 20%) / 2);} } @media screen and (max-width: 640px) { .comparebox2 .comparelist div .compare-tit {height: 60px; } } /* //sub4-2 */ /* sub4-5 */ .sub4-5-1 { background: #f8f8f8 url("/img/bg_circle_deco.png") no-repeat center; } /* //sub4-5 */ /*.sub4-7 { background: #f8f8f8 url("/img/bg_circle_deco.png") no-repeat center; }*/ /* //sub4-5 */ /* sub5-1-2 */ .sub5-1-2-1 { background: url("/img/sub5/sub5-1-2-7.jpg") no-repeat center; } .sub5-1-2-1 .sub_contents_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 50px 0; } .sub5-1-2-1 ul { width: 41%; } .sub5-1-2-1 li { border-bottom: 1px solid #bebebf; padding: 28px 0 28px 52px; text-indent: -52px; } .sub5-1-2-1 li:last-child { border-bottom: none; } .sub5-1-2-1 em { font-size: 30px; color: #328FD6; font-weight: 600; } .sub5-1-2-1 span { font-size: 27px; font-weight: 500; line-height: 1.4; } /* //sub5-1-2 */ /* sub5-1-3 */ .sub5-1-3-1 { background: url("/img/sub5/sub5-1-3-6.jpg") no-repeat left center; background-size: cover; } .sub5-1-3-1 .sub_contents_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 50px 0; } .sub5-1-3-1 ul { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 3vw; } .sub5-1-3-1 li { width: 48%; border-bottom: 1px solid #bebebf; padding: 28px 0 28px 52px; text-indent: -52px; } .sub5-1-3-1 li:last-child { border-bottom: none; } .sub5-1-3-1 em { font-size: 30px; color: #328FD6; font-weight: 600; } .sub5-1-3-1 span { font-size: 27px; font-weight: 500; line-height: 1.4; } /* //sub5-1-3 */ /* sub5-1-4 */ .sub5-1-4-1 > div:first-child { border-right: 1px solid #bebebf; padding-right: 50px; } .sub5-1-4-1 > div:last-child { width: 610px; padding: 30px 50px; } .sub5-1-4-1 li { text-indent: -45px; padding-left: 45px; margin-bottom: 20px; } .sub5-1-4-1 em { font-size: 30px; font-weight: 600; color: #328FD6; margin-right: 10px; } .sub5-1-4-2 { background: #328fd6 url("/img/sub5/sub5-1-4-8.png") no-repeat center top; padding: 130px 3vw 100px; } /* //sub5-1-4 */ /* sub5-1-5 */ .sub5-1-5-1 { background: url("/img/sub5/sub5-1-5-1.jpg") no-repeat right center; background-size: cover; color: #fff; } .sub5-1-5-2 { background: #f8f8f8 url("/img/bg_circle_deco.png") no-repeat center; } /* //sub5-1-5 */ /* sub5-2 */ .sub5-2-1 { width: 100%; background: url("/img/sub5/sub5-2-1.jpg") no-repeat center; background-size: cover; } .sub5-2-2 { background: #449fe5; } .sub5-2-2 .flex-1 { position: relative; padding: 50px 0; } .sub5-2-2 .flex-1:first-child { border-right: 1px solid #fff; } .sub5-2-2 .flex-1::before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 25px 25px; border-color: transparent transparent #449fe5 transparent; margin-bottom: 25px; margin-top: -25px; position: absolute; top: -25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* //sub5-2 */ /* sub7-1 */ .sub7-1 .service_container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .sub7-1 .service { display: block; width: 240px; margin: 16px; border: 1px solid #e4e4e4; -webkit-transition: all ease .5s; transition: all ease .5s; } .sub7-1 .service:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-box-shadow: 5px 5px 10px rgba(130, 130, 130, 0.16); box-shadow: 5px 5px 10px rgba(130, 130, 130, 0.16); } .sub7-1 .service:hover .service_ttl { color: #328FD6; } .sub7-1 .service_icon { width: 100%; height: 178px; background: #f7f8fa; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sub7-1 .service_ttl { font-size: 22px; font-weight: 500; text-align: center; line-height: 50px; border-top: 1px solid #e4e4e4; background: #fff; } .sub7-1 .counsel_info { background: #fff; border-top: 5px solid #000; border-bottom: 1px solid #000; padding: 40px 40px 40px 90px; } .sub7-1 .counsel_check input { display: none; } .sub7-1 .counsel_check input[type="checkbox"] + label { padding: 2px 0 2px 23px; background: url("/img/check_off.png") no-repeat left center; } .sub7-1 .counsel_check input[type="checkbox"]:checked + label { background: url("/img/check_on.png") no-repeat left center; } .sub7-1 .counsel .grid-col3-1 > div { display: -webkit-box; display: -ms-flexbox; display: flex; background: #F9F8F9; } .sub7-1 .counsel .grid-col3-1 > div input { background: transparent; border: none; font-size: 18px; padding: 10px; } .sub7-1 .counsel .counsel_label { padding-left: 60px; height: 70px; line-height: 70px; font-size: 20px; font-weight: 600; color: #363636; } .sub7-1 .counsel .counsel_label_name { background: url("/img/sub7/icon_reserv1.png") no-repeat 20px center; } .sub7-1 .counsel .counsel_label_ph { background: url("/img/sub7/icon_reserv2.png") no-repeat 20px center; } .sub7-1 .counsel .counsel_label_email { background: url("/img/sub7/icon_reserv3.png") no-repeat 20px center; } .sub7-1 .counsel .counsel_label_cont { background: url("/img/sub7/icon_reserv4.png") no-repeat 12px center; } .sub7-1 .counsel .counsel_txt { width: 100%; height: 142px; background: #f9f8f9; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sub7-1 .counsel .counsel_txt textarea { width: calc(100% - 140px); height: 100%; background: transparent; border: none; font-size: 18px; padding: 10px; font-family: 'Noto Sans KR', sans-serif; } .sub7-1 .counsel .btn_submit { width: 100%; height: 67px; background: #272727; color: #fff; font-size: 18px; font-weight: 600; margin-top: 30px; } /* //sub7-1 */ /* sub7-2 */ .sub7-2 .certificate-info { color: #575757; line-height: 1.35; letter-spacing: -0.3px; } .sub7-2 .certificate-info .col-1 { width: 20%; padding-left: 20px; font-size: 20px; } .sub7-2 .certificate-info .col-2 { width: 42%; padding-left: 20px; font-size: 20px; } .sub7-2 .certificate-info .col-3 { width: 38%; font-size: 20px; } .sub7-2 article { width: 48%; } .sub7-2 article .col-1 { width: 42.764%; padding-left: 35px; } .sub7-2 article .col-2 { width: 25.365%; padding-left: 35px; } .sub7-2 article .col-3 { width: 31.601%; padding-left: 35px; } .sub7-2 .blueround-box { border-radius: 180px; } .sub7-2 .blueround-box .flex { padding: 30px 30px 30px 16px; } .sub7-2 .blueround-box .flex div:first-child { margin-right: 40px; } .sub7-2 .certificate-thead { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-size: 25px; font-weight: 600; border-top: 3px solid #000; height: 84px; line-height: 84px; } .sub7-2 .certificate-tbody li { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 1px solid #E5E5E5; font-size: 22px; font-weight: 500; padding: 20px 0; color: #575757; } .sub7-2 .btn_certificate { display: block; width: 100%; background: #444; color: #fff; font-size: 16px; text-align: center; padding: 30px 0; } .sub7-2 .btn_certificate_container a { width: 43%; margin: 10px; } .sub7-3 table { width: 100%; border: 1px solid #fff; } .sub7-3 thead { font-size: 25px; font-weight: 600; border: 1px solid #fff; border-top: 3px solid #000; height: 84px; text-align: left; } .sub7-3 thead th:nth-child(1) { width: 23.437%; padding-left: 35px; } .sub7-3 thead th:nth-child(2) { width: 47.265%; padding-left: 35px; } .sub7-3 thead th:nth-child(3) { width: 29.298%; padding-left: 35px; } .sub7-3 td { font-size: 22px; font-weight: 500; padding: 20px 0; color: #575757; border-top: 1px solid #E5E5E5; padding-left: 35px; } /* //sub7-2 */ .radius-img-anime-1 { -webkit-animation: border-transform 17s linear infinite alternate forwards; animation: border-transform 17s linear infinite alternate forwards; } @-webkit-keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } @keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } /*# sourceMappingURL=style.css.map */ /* css/responsive.css */ .pc_view { display: block; } .mo_view { display: none; } @media screen and (max-width: 1412px) { .header_top_inner, .footer_inner, .header_gnb_inner { width: 100%; padding: 0 30px; } .header_submenu_box { width: 100%; left: 0; } .header_gnb_main li { margin-left: 0; } .header_links { margin-left: 10px; } .main_count_num { font-size: 3vw; } .main_count_num b { font-size: 4.5vw; font-weight: 700; -webkit-transition: all ease .5s; transition: all ease .5s; } .main_count_txt { font-size: 2vw; } .main_count_item.active .main_count_num { font-size: 4.8vw; } .main_count_item.active .main_count_num b { font-size: 7.1vw; } } @media screen and (max-width: 1280px) { .header_gnb .logo { width: 166px; } .header_gnb .header_gnb_main a { padding: 0 4px; } .header_gnb .header_links { display: none; } .main_event, .main_center { width: 100%; padding: 100px 0; } .main_youtube { margin: 0 0 100px 0; } .main_latest_inner > div { width: 100%; } .main_latest_thumb p{ width:100%; } .main_latest_thumb { display: none; } .main_review ul li { width: 30%; } .main_info{ height: auto; padding: 100px 0; } .main_info_box{ height: auto; flex-direction: column; } .main_info_time{ width:100%; padding: 60px 30px; justify-content: center; align-items: center; text-align: center; } .main_info_time h4{ margin-bottom:25px; } .main_info_time_inner .flex{ flex-direction: column; align-items: center; justify-content: center; } .main_info_time address{ width:100% } .main_info_map{ width:100%; } .main_info_map .map_api_box{ height:40vh; min-height: 600px; } .lnb { display: none; } .subpage_main_ttlgrp { left: 3vw; padding-right: 5vw; } .sub1-4-1 .sub1-4-1-top { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sub1-4-1 .sub1-4-1-top > div { width: 100%; } .sub1-4-1 .sub1-4-1-top > div:first-child { text-align: center; } .sub1-5 .way .flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sub1-5 .way .flex:first-child .way_ttl { padding: 60px 0 0 0; } .sub1-5 .way .flex:first-child .way_cont { padding: 40px 0; } .sub1-5 .way .way_ttl { width: 100%; border-top: 1px solid #B5B5B5; padding: 60px 0 0 0; } .sub1-5 .way .way_cont { width: 100%; border-top: none; padding: 40px 0; } .sub7-1 .grid-col3-1 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .sub7-1 .counsel .counsel_label { width: 20%; } .sub7-1 .counsel input, .sub7-1 .counsel textarea { width: 80%; } .sub7-2 .certificate { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sub7-2 .certificate article { width: 100%; } .sub7-2 .certificate article:last-child .certificate-thead { display: none; } } @media screen and (max-width: 960px) { :host { font-size: 8px; word-break: keep-all; overflow-wrap: break-word; } .pc_view { display: none; } .mo_view { display: block; } .flex, .flex-sb { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .wrapper { width: 100vw; overflow-x: hidden; } .main_header { display: none; } .header { position: static; background: #fff; padding: 32px 26px; height: 100%; } .header .btn_menu { width: 45px; margin-left: auto; } .header .btn_menu img { width: 45px; } .quick_menu { display: none; } .quick_menu2 { display: none; } .btm_counsel { display: none; } .eng_ttl { text-align: center !important; } .mainbanner_container { margin-top: 80px; } .mainbanner_container img { width: 100%; } .mainbanner-media { aspect-ratio: 1 / 1; } .mainbanner_container .swiper-pagination{ text-align: center; padding-left:0; bottom: 0% !important; } .mainbanner_container .swiper-pagination-bullet { /*width: 20%; height: 3px;*/ } .mainbanner_container .mainbanner_links{ width:90%; bottom: 15%; right: 50%; transform: translateX(50%); padding-right: 0; } .mainbanner_container .mainbanner_links ul{ height:auto; display: block; } .mainbanner_container .mainbanner_links ul li{ padding: 20px 0; margin-left:0; text-align: center; border-bottom: 1px solid #E1E1E1; } .mainbanner_container .mainbanner_links ul li:last-child{ border-bottom: none; } .mainbanner_container .mainbanner_links ul li .mainbanner_links_ttl{ font-size: 30px; } .mainbanner_container .mainbanner_links ul li .mainbanner_links_ttl i{ margin-left:6px; } .main_center{ width:100%; } .main_center .flex-sb{ padding:0 2.5vw; flex-direction: row; flex-wrap: wrap; } .main_center .main_center_box{ width: 46.875vw; padding-top: 50%; margin-bottom: 1.4vw; } .main_special { width: 100%; padding: 100px 0; } .main_special_box { width: 100%; height: 100%; padding-top: 0; } .main_special_box p { position: static; width: 100%; } .main_special_box .main_special_txt { font-size: 45px; line-height: 1.45; } .main_event_swiper{ width:100%; } .main_event_swiper img{width:100%;} .main_event_ttl{ font-size: 30px } .main_review { padding: 0 ; } .main_review h4.main_content_ttl{ margin-top: 100px; } .main_review ul{ padding: 0 7.8%; } .main_review .flex-sb { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .main_review ul li { width: 48%; } .main_info_map .map_address{ font-size:30px; } .main_latest { padding: 100px 2vw; } .main_reserve { padding: 100px 6vw; } .main_reserve .main_reserve_form { padding-left: 0; } .main_reserve_inner > div { width: 100%; } .main_reserve .main_map { padding-left: 0; } .main_reserve .main_map img { width: 100%; } .main_coop { padding: 100px 0; } .main_coop .swiper { width: 60%; } .reserv_form .reserv_content .reserv_label{width:100%;} .main_footer { padding: 96px 0 120px;} .main_footer .flex { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .main_footer .ft_info { margin-top: 30px; margin-left: 0; } .main_footer .ft_info p { margin-top: 30px; } .main_footer .ft_menu { margin-top: 30px; margin-left: 0; } .footer .ft_menu { flex-wrap:wrap;} .footer .ft_menu li {margin: 10px 30px } .sub_contents_inner { padding: 0 3vw; } .big_num { width: 50%; } .big_num img { width: 100%; } .sub1-1 .subpage_main { background: url("/img/sub1/bg_sub1-1_mo.jpg") no-repeat right center; background-size: cover; } .sub1-1-a .flex-1 { width: 50%; margin-bottom: 15px; } .sub1-2 .doc_docu_ttl { width: 100%; padding-left: 0; } .sub1-2 .doc_docu_cont { width: 100%; } .sub1-2 .doc_docu_cont .flex-start li { width: 100%; } .sub1-2 .doc_docu_cont .flex-start li:nth-child(2n) { margin-right: 0; } .sub1-3 .swiper-slide{ display: flex; align-items: center; } .sub1-3 .swiper-slide .slide-cont { width: 80%; left: 50%; top: 10vh; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sub1-3 .swiper-slide .slide-cont .eng_ttl { font-size: 15px; } .sub1-4-1 .call_center_links div { width: 100%; margin: 20px 0; } .sub1-4-1 .time ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sub1-4-1 .time ul li { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .reserv_form { padding: 10px 30px 40px 30px; } .reserv_form ul li { width: 100%; } .reserv_form ul li.reserv_content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .reserv_form ul li.reserv_content #wr_content { width: 100%; margin-top: 10px; } .sub1-5 .way .way_bus .flex-start { -ms-flex-wrap: wrap; flex-wrap: wrap; } .sub4-1-1 { text-align: center; } .sub4-1-1 .eng_ttl, .sub4-1-1 .sub_contents_ttl, .sub4-1-1 .normal-txt { text-align: center; } .sub5-1-2-1 .sub_contents_inner { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(255, 255, 255, 0.5); } .sub5-1-2-1 ul { width: 80%; } .sub5-1-2-1 li { text-indent: -50px; } .sub5-1-3-1 .sub_contents_inner { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(255, 255, 255, 0.5); } .sub5-1-3-1 ul { width: 80%; } .sub5-1-3-1 li { text-indent: -50px; width: 100%; } .sub5-1-4-1 > div:first-child { border-right: none; padding-right: 0; } .sub5-1-4-1 > div:last-child { width: 100%; padding: 30px 3vw; } .sub5-2-2 .flex-1:first-child { border-right: none; border-bottom: 1px solid #fff; } .sub5-2-2 .flex-1:last-child::before { display: none; } .sub7-2 .certificate article { width: 100%; } .sub7-2 .btn_certificate_container a{ width: 100%; } .sub7-2 .certificate article .certificate-thead, .sub7-2 .certificate-info .certificate-thead{ -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .sub7-2 .certificate-info .col-1, .sub7-2 .certificate-info .col-2, .sub7-2 .certificate-info .col-3{font-size: 12px;} .sub7-2 .certificate-info{font-size: 16px !important;} .sub7-2 .blueround-box{border-radius: 100px} .sub7-2 .blueround-box .flex{padding: 00px 30px 30px 16px;text-align:center} .sub7-2 .blueround-box .flex .ta-left{text-align:center;} .sub7-2 .blueround-box .flex div:first-child{margin-right:0; margin-top:-80px;} .sub7-2 .blueround-box .flex div:last-child{margin-top:20px;} .sub7-2 .blueround-box .flex div:first-child img{width: 140px;} } @media screen and (max-width: 640px) { .main_review .mt-50, .main_review .main_review_video{margin-top: 30px} .main_center_link span{width: 40%} .sub7-1 .service { width: 43%; margin: 10px; } .mainbanner_container .swiper-pagination{ max-width: 100%; } .mainbanner_container .mainbanner_links{ /* width:100%; position: static; transform: translateX(0); */ } .mainbanner_container .mainbanner_links ul li:last-child{ /* border-bottom: 1px solid #E1E1E1; */ } .mainbanner_container .mainbanner_links ul li{ /* padding: 13px 0; */ } .mainbanner_container .mainbanner_links ul li .mainbanner_links_ttl{ /* font-size: 12px; */ margin-top: 6px; } } @media screen and (max-width: 426px) { :host { font-size: 6px; word-break: keep-all; } .sub1-4-1 .time ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sub1-4-1 .time ul li { display: block; width: 100%; } .sub1-4-1 .time ul li em { display: block; margin-top: 10px; } .sub1-4-1 .time ul li span { display: block; margin-top: 6px; margin-left: 0; } .sub1-5 .way .way_bus em { width: 60px; height: 38px; line-height: 38px; } } @media screen and (max-width: 320px) { :host { font-size: 5px; overflow-x: auto; } } /* 하단 「온라인상담하기」 줄 — 폭이 1106px 로 고정돼 1105px 이하 화면에서 오른쪽 「상담신청」 버튼이 잘렸다. 1106px 이상은 그대로 두고, 줄이 보이는 961~1105px 에서만 폭을 화면에 맞춘다(문구·색·글꼴은 그대로) */ @media screen and (min-width: 961px) and (max-width: 1105px) { .btm_counsel_inner { width: 100%; padding: 0 16px; box-sizing: border-box; } .btm_counsel form .ipt_name { width: 130px; } .btm_counsel form .ipt_ph { width: 150px; } } @media screen and (min-width: 961px) and (max-width: 1040px) { .btm_counsel form h2 { font-size: 18px; } .btm_counsel form select { width: 190px; } .btm_counsel form .ipt_name { width: 100px; } .btm_counsel form .ipt_ph { width: 110px; } .btm_counsel form button[type="submit"] { width: 130px; } } /* 폰에서 자판이 올라와 입력 칸·제출 버튼에 포커스가 있는 동안에는 하단 고정 바(.btm_menu)가 칸을 덮지 않게 비켜 준다. 포커스가 빠지면 바로 원래대로 돌아온다(옛 머리·꼬리 틀의 data-ce-kb 규칙과 같은 동작) */ @media screen and (max-width: 960px) { :host:has(input:focus, textarea:focus, select:focus, form button[type="submit"]:focus) .btm_menu { display: none !important; } } /*# sourceMappingURL=responsive.css.map */ /* css/ce-mobile-fix.css */ /* 모바일 보정 — 문구·이미지는 그대로 두고 배치·글자 크기만 맞춘다 */ @media screen and (max-width: 960px) { /* 서브 히어로 제목 박스가 화면 오른쪽으로 3vw 넘치던 것 */ .subpage_main_ttlgrp { left: 3vw; width: calc(100% - 3vw); padding: 0 5vw 0 0; } /* 하단 고정바 — 아이폰 홈 표시줄 영역 */ .btm_menu { padding-bottom: env(safe-area-inset-bottom, 0px); } /* 본문 끝과 푸터 사이 빈칸 */ .footer { margin-top: 100px; } /* 오시는 길 — 투명 헤더가 지도 위에 겹치지 않게 */ .sub1-5 .header_mo { background: #fff; } .sub1-5 .map { padding-top: 80px; } .sub1-5 .map_address { width: calc(100% - 32px); height: auto; padding: 12px 16px; bottom: 16px; border-radius: 12px; font-size: 15px; text-align: center; } } @media screen and (max-width: 767px) { /* 12px 미만 글자 */ .main_center_eng { font-size: 12px !important; } .main_info_time1 ul li, .main_info_time1 ul li em, .main_info_time2 address { font-size: 12px !important; } .main_info_time1 ul li.small { font-size: 12px !important; } .comp-card .comp-subtitle, .comp-card .comp-desc, .comp-card .comp-desc strong { font-size: 12px !important; } .evo-info .evo-label, .evo-info .evo-desc { font-size: 12px !important; } .evo-info .evo-desc { white-space: normal !important; word-break: keep-all; } .evo-step { min-width: 0; } :host :host .hud-compare-grid .hud-cell, :host :host .hud-compare-grid .hud-cell span { font-size: 12px !important; } li[class^="compare-"] > span { font-size: 12px !important; } .slide-cont .eng_ttl { font-size: 12px !important; } .doctor-profile__brand-text { font-size: 12px !important; } } /* 원장 소개 히어로 — 엇갈린 세 줄의 상자(글자 아님)가 화면 밖으로 삐져나와 화면이 옆으로 밀리던 것. 글자 위치·크기는 그대로 두고 넘친 상자만 제목 폭에서 자른다(세로는 자르지 않는다) */ @media screen and (max-width: 768px) { .landing_2026 #mainVisual .main_wrap .tit h1 { overflow-x: clip; overflow-y: visible; } } /* 홈 팝업(#popupLayer) — 옛 원본 CSS(top:45% + translate(-50%,-50%), 가로 500px 고정·960 이하 95%)는 화면이 낮으면 위가 화면 밖으로 잘린다(가로 1024×세로 768 에서 위 20px). 팝업 = 위 탭(한 줄 50px × 줄 수) + 그림(가로:세로 5:6) + 아래 버튼 32px 이므로 «높이가 화면 안에 들어오게» 가로 폭 상한만 화면 높이로 줄이고, 세로 위치는 위·아래 12px 여백 안으로 붙잡는다. 화면이 넉넉하면 원본 그대로다. 탭 줄 수는 탭 개수로 정한다(3칸씩) — 계산이 못 미치는 브라우저를 위해 화면 높이 상한 + 안쪽 스크롤을 함께 둔다. */ section#popupLayer { --ce-pop-nav: 100px; --ce-pop-w: min(500px, calc((100vh - var(--ce-pop-nav) - 56px) * 5 / 6)); width: var(--ce-pop-w); top: clamp(calc(var(--ce-pop-w) * 0.6 + var(--ce-pop-nav) / 2 + 28px), 45%, calc(100vh - var(--ce-pop-w) * 0.6 - var(--ce-pop-nav) / 2 - 28px)); top: clamp(calc(var(--ce-pop-w) * 0.6 + var(--ce-pop-nav) / 2 + 28px), 45%, calc(100dvh - var(--ce-pop-w) * 0.6 - var(--ce-pop-nav) / 2 - 28px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; } section#popupLayer:not(:has(.popup_nav li:nth-child(4))) { --ce-pop-nav: 50px; } section#popupLayer:has(.popup_nav li:nth-child(7)) { --ce-pop-nav: 150px; } section#popupLayer:has(.popup_nav li:nth-child(10)) { --ce-pop-nav: 200px; } @media screen and (max-width: 960px) { section#popupLayer { --ce-pop-w: min(95vw, calc((100vh - var(--ce-pop-nav) - 56px) * 5 / 6)); } } /* 홈 팝업 탭이 3의 배수가 아닐 때 마지막 줄을 가운데로 — 6칸일 때는 그대로다 팝업 안이 스크롤돼도 위 탭은 늘 보이게 위에 붙인다 */ section#popupLayer .popup_nav { justify-content: center; position: sticky; top: 0; z-index: 2; } section#popupLayer { overscroll-behavior: contain; } /* 팝업 안 스크롤 막대를 숨긴다 — 막대가 생기면 그림 폭이 줄고, 줄면 막대가 사라지기를 되풀이해 팝업이 떨린다(창을 줄였을 때). 스크롤은 휠·손가락으로 그대로 된다 */ section#popupLayer, section#popupLayer .swiper-slide { scrollbar-width: none; -ms-overflow-style: none; } section#popupLayer::-webkit-scrollbar, section#popupLayer .swiper-slide::-webkit-scrollbar { width: 0; height: 0; display: none; } /* 팝업 그림 틀은 가로:세로 5:6 으로 고정 — 세로로 긴 그림(진료 달력 등)은 찌그러뜨리지 않고 틀 안에서 세로로 스크롤한다. 5:6 그림은 틀과 크기가 같아 화면이 그대로다 */ section#popupLayer .swiper-slide { aspect-ratio: 5 / 6; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; } section#popupLayer .swiper-slide a { display: block; width: 100%; } section#popupLayer .swiper-slide img { width: 100%; height: auto; object-fit: initial; } /* dvh 를 아는 브라우저만 주소창 높이를 뺀 값으로 다시 잡는다 — 사용자 정의 속성은 선언 단계에서 걸러지지 않아 dvh 를 모르는 브라우저에서 vh 값까지 무효가 되므로 @supports 안에만 둔다 */ @supports (height: 100dvh) { section#popupLayer { --ce-pop-w: min(500px, calc((100dvh - var(--ce-pop-nav) - 56px) * 5 / 6)); } @media screen and (max-width: 960px) { section#popupLayer { --ce-pop-w: min(95vw, calc((100dvh - var(--ce-pop-nav) - 56px) * 5 / 6)); } } } /* ── 2026-10-12 옛 원본 화면 결함 보정 (디자인 정체성은 그대로, 읽히고 안 넘치게만) ── */ /* 폰 머리(로고·햄버거) — 서브 지면은 첫 화면이 어두운 사진인데 머리가 투명 + 검정 로고라 안 보였다. 홈과 같은 모양(흰 배경·검정 로고)으로 맞춘다. 홈(.mainbanner_container 가 있는 지면)은 손대지 않는다. 옛 스크립트가 스크롤에 따라 inline 으로 투명/흰색을 바꾸므로 !important 로 붙잡는다 */ @media screen and (max-width: 960px) { :host:not(:has(.mainbanner_container)) .header_mo { background: #fff !important; } /* 지식·소개 1-1 — 제목 영역이 머리 밑 20px 아래서 시작해 흰 띠가 보이던 것 */ .wrapper.sub1-1 { margin-top: 0; } } /* 우측 퀵메뉴 라벨(오시는길·카톡상담·유튜브…) — 회색 글자가 사진 위에서 안 읽혔다. 라벨 뒤에 흰 바탕을 깔아 사진·흰 바탕 어디서든 읽히게 한다(아이콘·위치는 그대로) */ .quick_menu2 div a p { display: block; margin: 6px -6px 0; padding: 3px 0; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: #333; font-weight: 500; line-height: 1.2; white-space: nowrap; } /* 폭 961~1480 가로 넘침 — AOS 가 옆에서 들어오는 요소의 시작 위치(translate)와 큰 이미지가 화면 밖으로 삐져나와 문서 가로 폭이 화면보다 커졌다. 본문 상자에서 가로로만 잘라 문서 폭을 화면에 맞춘다(세로·고정 요소는 안 건드린다) */ @media screen and (min-width: 961px) and (max-width: 1480px) { :host { overflow-x: clip; } /* 두 장이 나란한 줄 — 그림이 줄 폭보다 커서 오른쪽이 잘리던 것: 줄 안에서 같이 줄어들게 */ .flex-sb > img, .flex > img { min-width: 0; max-width: 100%; height: auto; } /* 홈 영상 틀(가로 1280 고정) */ iframe { max-width: 100%; } } /* 스마트노바 비교표(좁은 폭) — 셋째·넷째 열이 글자 최소 폭 때문에 표 밖으로 밀려 오른쪽이 잘리던 것. 열을 0 까지 줄어들 수 있게 하고 글자를 12px 로 맞춘다. 칸 높이는 모든 열을 같게 둬 줄이 어긋나지 않게 한다 */ @media screen and (max-width: 640px) { :host :host .hud-compare-grid { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); } :host :host .hud-compare-grid > * { min-width: 0; } :host :host .hud-label-col .hud-cell, :host :host .hud-data-col .hud-cell, :host :host .hud-col-featured .hud-cell { min-height: 52px !important; } :host :host .hud-label-col .hud-cell span { font-size: 12px; line-height: 1.25; letter-spacing: -0.03em; word-break: keep-all; } :host :host .hud-data-col .hud-cell, :host :host .hud-col-featured .hud-cell { font-size: 12px !important; letter-spacing: -0.02em; } :host :host .hud-data-col .hud-col-head h3 { font-size: 14px; word-break: keep-all; } :host :host .hud-col-featured .hud-col-head h3 { font-size: 16px !important; word-break: keep-all; } } /* 백내장 렌즈 지면 대표원장 인용 문장 — 좁은 폭에서 큰 글자가 줄마다 접히거나 화면 밖으로 밀리던 것 */ @media screen and (max-width: 767px) { :host :host .bg-sub2-1-1 .big-point-txt { font-size: 24px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; } } /* css/ce-intl-chrome.css */ /* 외국어 지면(.ce-intl) — 하단 「온라인상담」 줄의 글자가 한국어보다 길어도 동의 문구가 입력칸 밑으로 흘러내리지 않게 */ .ce-intl .btm_counsel form h2 { font-size: 18px; line-height: 1.2; } .ce-intl .btm_counsel form fieldset { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0 12px; padding: 0; border: 0; } .ce-intl .btm_counsel form fieldset label { flex: 1 1 0; min-width: 0; font-size: 12.5px; line-height: 1.3; } /* 동의 문구 옆 개인정보 처리방침 링크 — 어두운 줄 위에서 보이게 */ .ce-intl .btm_counsel form fieldset label a { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .ce-intl .btm_counsel form button[type="submit"] { font-size: 15px; line-height: 1.25; padding: 0 8px; flex: none; } /* 외국어 지면 로고 — 병원 영문명 글자(옛 로고 그림은 한글 문구가 든 그림이다) */ .ce-intl-logo { display: inline-block; font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #111; white-space: nowrap; } .ce-intl-logo--ft { color: #fff; font-size: 17px; } /* 넓은 메뉴(아랍어·베트남어 등)와 나란히 서는 폭 — 두 줄로 접어 메뉴와 겹치지 않게 */ @media (min-width: 769px) and (max-width: 1560px) { .ce-intl-logo:not(.ce-intl-logo--ft) { white-space: normal; max-width: 8.6em; font-size: 16px; line-height: 1.15; } } @media (max-width: 768px) { .ce-intl-logo { font-size: 15px; } } /* 외국어 머리·꼬리·하단 줄 — 한국어용 줄바꿈(keep-all·anywhere)이 영문·태국어 낱말을 글자 중간에서 자르지 않게 */ .ce-intl, .ce-intl * { word-break: normal !important; overflow-wrap: break-word !important; } /* 영어 홈 진료 센터 카드(모바일) — 영문 제목이 두 줄로 길어져 카드 위아래가 잘리고 글자가 겹치지 않게 */ @media (max-width: 767px) { :host.ce-intl[lang="en"] .main_center .main_center_cont { box-sizing: border-box; padding: 0 8px; } :host.ce-intl[lang="en"] .main_center_eng { letter-spacing: 0.08em; line-height: 1.35; } :host.ce-intl[lang="en"] .main_center_ttl { font-size: 16px; line-height: 1.2; margin-top: 6px; } /* 원형 버튼 — 두 낱말 문구가 원 안에 들어가게 */ :host.ce-intl[lang="en"] .main_center_link { width: 40%; padding-top: 40%; margin-top: 10px; } :host.ce-intl[lang="en"] .main_center_link_inner p { line-height: 1.15; margin-bottom: 4px; } } /* 의료진 첫 화면 제목 — 영문 줄이 길어 엇갈려 밀면 화면 양옆에서 잘리므로 첫째·둘째 줄을 가운데로 */ @media (max-width: 767px) { :host.ce-intl[lang="en"] #mainVisual .tit h1 .first, :host.ce-intl[lang="en"] #mainVisual .tit h1 .second { margin-left: 0; left: 0 !important; } } /* 영어 홈 진료 센터 카드 — 긴 제목이 카드 양옆에 닿지 않게 · 작은 영문 머리글은 옆 카드와 같은 대문자 표기로 */ :host.ce-intl[lang="en"] .main_center .main_center_cont { box-sizing: border-box; padding: 0 16px; } :host.ce-intl[lang="en"] .main_center_eng, :host.ce-intl[lang="en"] .main_center .eng_ttl { text-transform: uppercase; } /* 영어 — 폰 하단 고정 바 5칸을 한국어처럼 같은 폭으로 · 긴 첫 칸 글자는 두 줄로 */ @media (max-width: 960px) { :host.ce-intl[lang="en"] .btm_menu ul.ce-btm5 li { flex: 1 1 0; min-width: 0; } :host.ce-intl[lang="en"] .btm_menu ul.ce-btm5 a { font-size: 12px; letter-spacing: -0.035em; } :host.ce-intl[lang="en"] .btm_menu ul.ce-btm5 a em { white-space: normal; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; justify-content: center; margin-top: 6px; padding: 0; } } /* 외국어 PC 머리 — 로고·메뉴 항목을 한 줄로 · 줄을 바꾸는 대신 글자 크기를 화면 폭에 맞춰 줄인다(언어별 보정 --ce-gnb-k) */ :host.ce-intl .header_gnb .logo { flex-shrink: 0; width: auto; max-width: none; } :host.ce-intl .header_gnb .ce-intl-logo { white-space: nowrap; max-width: none; font-size: calc(var(--ce-logo-k, 1) * min(19px, 1.32vw)); line-height: 1.2; } :host.ce-intl .header_gnb_main { flex-wrap: nowrap; padding-left: 16px; } :host.ce-intl .header_gnb_main li { flex-shrink: 0; margin-left: 0; } :host.ce-intl .header_gnb_main a { display: inline-block; white-space: nowrap !important; font-size: calc(var(--ce-gnb-k, 1) * min(16px, 1.27vw)); padding: 0 min(10px, 0.5vw); line-height: 1.25; } :host.ce-intl .header_gnb .header_links { flex-shrink: 0; } /* 언어별 보정 — 메뉴 글자 합이 긴 언어는 같은 폭에서 조금 더 작게(가장 좁은 PC 폭에서도 한 줄) */ :host.ce-intl[lang="en"] { --ce-gnb-k: 0.9; --ce-logo-k: 0.82; } :host.ce-intl[lang="ru"] { --ce-gnb-k: 0.99; } :host.ce-intl[lang="mn"] { --ce-gnb-k: 0.95; } :host.ce-intl[lang="ms"] { --ce-gnb-k: 0.94; } :host.ce-intl[lang="vi"] { --ce-gnb-k: 0.94; } :host.ce-intl[lang="th"] { --ce-gnb-k: 0.95; --ce-logo-k: 0.9; } :host.ce-intl[lang="kk"] { --ce-gnb-k: 0.93; --ce-logo-k: 0.9; } /* 오른쪽 링크 아이콘이 함께 서는 폭 — 그만큼 글자를 한 단계 더 줄인다 */ @media screen and (min-width: 1281px) and (max-width: 1412px) { :host.ce-intl .header_gnb_main a { font-size: calc(var(--ce-gnb-k, 1) * min(16px, 1.16vw)); } } /* 영어 오시는 길 — 버스 노선 이름(Village bus · Metropolitan 등)이 고정 폭 배지를 넘지 않게 */ :host.ce-intl[lang="en"] .sub1-5 .way .way_bus em { width: auto; min-width: 68px; padding: 0 14px; white-space: nowrap; box-sizing: border-box; } @media (max-width: 960px) { :host.ce-intl[lang="en"] .sub1-5 .way .way_bus em { min-width: 60px; padding: 0 10px; margin-bottom: 6px; } } /* 영어 스마트노바 — 폰에서 긴 영문 제목·비교 칸 글자가 화면 밖으로 잘리지 않게 */ @media (max-width: 767px) { :host.ce-intl[lang="en"] .hero-title .line-1 { white-space: normal; line-height: 1.3; } :host.ce-intl[lang="en"] .hero-tagline { letter-spacing: 2px; padding: 0 20px; } :host.ce-intl[lang="en"] .benefit-grid > div { min-width: 0; } :host.ce-intl[lang="en"] .benefit-grid p { white-space: normal !important; flex-wrap: wrap; } :host.ce-intl[lang="en"] div[style*="color:#ffb3b3"][style*="font-size:15px"] { font-size: 12px !important; white-space: nowrap; } } /* 영어 홈 진료 센터 카드(PC) — 긴 영문 머리글이 한 줄에 들어가게 자간만 좁힌다 */ @media (min-width: 768px) { :host.ce-intl[lang="en"] .main_center_box .main_center_eng { letter-spacing: 0.2em; } } /* 영어 스마트노바 비교표(폰) — 영문 항목 이름이 길어 행이 어긋나지 않게 칸 높이를 맞추고 넷째 열이 화면 안에 들게 */ @media screen and (max-width: 640px) { :host.ce-intl[lang="en"] .hud-compare-grid { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) !important; } :host.ce-intl[lang="en"] .hud-compare-grid .hud-col-head { height: 120px !important; box-sizing: border-box; } :host.ce-intl[lang="en"] .hud-compare-grid .hud-cell { height: 70px !important; min-height: 70px !important; box-sizing: border-box; } :host.ce-intl[lang="en"] .hud-label-col .hud-cell span { line-height: 1.15; } :host.ce-intl[lang="en"] .hud-data-col .hud-col-head h3 { font-size: 13px; } :host.ce-intl[lang="en"] .hud-col-featured .hud-col-head h3 { font-size: 15px !important; } } /* 영어 스마트노바 3단계 비교(PC) — 셋째 칸 영문 설명이 길어 옆 칸 글자 위로 넘치지 않게 칸 안에서 줄을 바꾼다 */ @media (min-width: 768px) { :host.ce-intl[lang="en"] .evo-step .evo-desc { white-space: normal; } :host.ce-intl[lang="en"] .evo-step .active-desc { font-size: 18px; } :host.ce-intl[lang="en"] .evo-step .active-desc span { display: inline !important; } } /* 같은 3단계 비교(폰) — 첫 칸 영문이 화면 왼쪽 밖으로 밀리지 않게 세 칸을 같은 폭으로 두고 칸 안에서 줄을 바꾼다 */ @media (max-width: 767px) { :host.ce-intl[lang="en"] .evo-step { flex: 1 1 0; min-width: 0; } :host.ce-intl[lang="en"] .evo-step .evo-label, :host.ce-intl[lang="en"] .evo-step .evo-desc { white-space: normal; line-height: 1.25; } } /* 영어 진료시간(sub1-4) — 한글용 좁은 자간·양끝 맞춤·80px 고정 폭이 영문 라벨(Saturday·Lunch Break)을 짓누르지 않게 · 한 줄에 한 요일 */ :host.ce-intl[lang="en"] .sub1-4 .time ul li em { width: auto; min-width: 118px; text-align-last: auto; letter-spacing: normal; white-space: nowrap; } @media (min-width: 427px) { :host.ce-intl[lang="en"] .sub1-4 .time ul li { width: 100%; } } /* 영어 망막 질환 지면 — 제목 아래 영문 부제가 제목과 같은 질환명을 되풀이해 숨긴다 */ :host.ce-intl[lang="en"] .eng_subject { display: none; } /* 영어 예약 신청서(폰) — 긴 안내 문구가 칸 밖으로 잘리지 않게 이름표를 칸 위로 올린다 */ @media (max-width: 767px) { :host.ce-intl[lang="en"] #quickqa.reserv_form ul li { height: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; } :host.ce-intl[lang="en"] #quickqa.reserv_form ul li .reserv_label { width: 100%; margin-bottom: 10px; } :host.ce-intl[lang="en"] #quickqa.reserv_form ul li .reserv_ipt:not(.half) { width: 100%; } :host.ce-intl[lang="en"] #quickqa.reserv_form ul li.reserv_content #wr_content { margin-top: 0; } :host.ce-intl[lang="en"] #quickqa.reserv_form .reserv_ipt::placeholder { font-size: 15px; } } /* 영어 예약 신청서 — 문의 칸 글꼴을 다른 칸과 같게(기본 고정폭 글꼴로 보이지 않게) */ :host.ce-intl[lang="en"] #quickqa.reserv_form #wr_content { font-family: inherit; } /* ── 외국어 전체 복제(영어 밖 언어 — :host[data-ce-fc]) ───────────────────────── */ /* 글꼴 대체 목록 — 한국어 웹폰트에 없는 글자(태국어·아랍어·키릴 확장·베트남어 성조)와 한자 자형을 그 언어 글꼴로 */ :host[data-ce-fc][lang="ja"] :host { font-family: "Noto Sans KR", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; } :host[data-ce-fc][lang="zh-Hans"] :host { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans KR", sans-serif; } :host[data-ce-fc][lang="zh-TW"] :host { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans KR", sans-serif; } :host[data-ce-fc][lang="zh-HK"] :host { font-family: "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans TC", "Noto Sans KR", sans-serif; } :host[data-ce-fc][lang="th"] :host { font-family: "Noto Sans KR", "Noto Sans Thai", "Leelawadee UI", Thonburi, Tahoma, sans-serif; line-height: 1.6; } :host[data-ce-fc][lang="ar"] :host { font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans KR", sans-serif; } :host[data-ce-fc]:is([lang="ru"], [lang="mn"], [lang="kk"]) :host { font-family: "Noto Sans KR", "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; } :host[data-ce-fc]:is([lang="vi"], [lang="ms"], [lang="id"]) :host { font-family: "Noto Sans KR", "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; } /* 오른쪽에서 쓰는 언어 — 레이아웃(칸 배치·메뉴 순서·사진 자리)은 한국어와 같게 두고 «글 단락»만 오른쪽에서 */ :host[data-ce-dir="rtl"] :is(p, li, dt, dd, h1, h2, h3, h4, h5, h6, td, th, blockquote, summary, label, figcaption, .ce-imgcap), :host[data-ce-dir="rtl"] :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type]), textarea) { direction: rtl; } /* 숫자 예시 입력칸(전화·생년월일 — 생성기가 dir="ltr" 을 단다)은 숫자 순서가 뒤집히지 않게 왼쪽에서 쓰되 자리는 다른 칸처럼 오른쪽 */ :host[data-ce-dir="rtl"] form input[dir="ltr"] { direction: ltr; text-align: right; } /* 오른쪽에서 쓰는 언어 — 머리 오른쪽 아이콘 줄은 한국어와 같은 방향(아이콘이 서로 붙고 구분선이 엇나가지 않게) */ :host[data-ce-dir="rtl"] .header_links li { direction: ltr; } /* 그림 아래 번역 캡션 — 그림 테두리 바깥 바로 아래 · PC/모바일 전용 그림의 캡션은 그 클래스(pc_view·mo_view)를 함께 달아 사이트 규칙대로 숨는다 */ .ce-imgcap:not(.pc_view):not(.mo_view) { display: block; } /* 캡션을 담은 가로 줄(flex)은 캡션이 그림 아래 새 줄로 내려가게 */ .flex-sb:has(> .ce-imgcap), .flex:has(> .ce-imgcap) { flex-wrap: wrap; } .ce-imgcap { grid-column: 1 / -1; flex: 0 0 auto; width: 100%; margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: inherit; opacity: 0.8; text-align: center; word-break: keep-all; overflow-wrap: anywhere; } /* 오시는 길 버스 노선 배지 — 번역 이름이 길면 배지 안에서 줄을 바꾸고 옆 배지·노선 번호와 겹치지 않게(영어는 위 규칙) */ :host.ce-intl:not([lang="en"]) .sub1-5 .way .way_bus .flex-start { flex-wrap: wrap; } :host.ce-intl:not([lang="en"]) .sub1-5 .way .way_bus em { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 68px; max-width: 100%; height: auto; min-height: 45px; margin-bottom: 6px; padding: 8px 14px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; } :host.ce-intl:not([lang="en"]) .sub1-5 .way .way_bus .normal-txt { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 960px) { :host.ce-intl:not([lang="en"]) .sub1-5 .way .way_bus em { min-width: 60px; min-height: 38px; padding: 6px 10px; } } /* 제증명 수수료 표 — 머리글이 두 줄이 돼도 칸 높이가 따라 늘어 첫 줄과 겹치지 않게 */ :host.ce-intl .sub7-2 .certificate-thead { align-items: center; height: auto; min-height: 84px; padding: 16px 0; line-height: 1.3; } :host.ce-intl .sub7-2 .certificate [class^="col-"] { overflow-wrap: anywhere; } :host.ce-intl .sub7-2 .certificate-thead [class^="col-"] { hyphens: auto; } /* 라섹·라식 비교표(폰) — 번역 문장이 길어 고정 높이 칸을 넘치지 않게 칸을 높이고 글자를 한 단계 줄인다(세 열이 같은 높이를 써야 줄이 맞는다) */ @media (max-width: 960px) { :host.ce-intl:not([lang="en"]) :is(.comparebox, .comparebox2) .comparelist .compare-tit { height: 120px; font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; } :host.ce-intl:not([lang="en"]) :is(.comparebox, .comparebox2) .comparelist div div > ul.inner-list li, :host.ce-intl:not([lang="en"]) :is(.comparebox, .comparebox2) .comparelist .title > ul > li { height: 120px; padding: 4px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; } :host.ce-intl:not([lang="en"]) :is(.comparebox, .comparebox2) .comparelist div div > ul.inner-list li { font-size: 21px; } :host.ce-intl:not([lang="en"]) :is(.comparebox, .comparebox2) .comparelist .title > ul > li { font-size: 13.5px; line-height: 1.15; } :host.ce-intl:not([lang="en"]) .comparebox .comparelist div div > ul.inner-list li:first-child, :host.ce-intl:not([lang="en"]) .comparebox .comparelist .title > ul > li:first-child, :host.ce-intl:not([lang="en"]) .comparebox2 .comparelist div div > ul.inner-list li:is(:nth-child(3), :nth-child(4)), :host.ce-intl:not([lang="en"]) .comparebox2 .comparelist .title > ul > li:is(:nth-child(3), :nth-child(4)) { height: 210px; } } /* css/ce-chrome-extras.css */ /* 네이버 예약 칸 · 5칸 하단 바 · 언어 선택 — 기존 모양(아이콘 크기·색·글자)은 그대로 두고 칸만 더한다 */ /* 언어 선택 — 알약 버튼 하나(지구본 + 지금 언어 국기 + 이름 + ▾). 누르면 버튼 바로 아래 오른쪽 정렬로 흰 카드가 펼쳐진다. 국기는 직사각형(3:2 · 모서리 2px · 얇은 테두리). 지금 언어 줄은 옅은 남색 바탕 + 오른쪽 ✓. 옛 상단 줄 규칙(.header_topmenu ul a · ul li)이 목록 안까지 내려오므로 선택자를 한 단계 높여 막는다 */ details.ce-langmenu { position: relative; display: block; font-size: 14px; line-height: 1; letter-spacing: 0; } details.ce-langmenu > summary { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid #dfe5ec; border-radius: 999px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #1f2a37; font-size: 14px; font-weight: 600; white-space: nowrap; list-style: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out; } /* 누르는 자리는 버튼보다 넉넉하게(보이는 크기는 그대로) */ details.ce-langmenu > summary::after { content: ""; position: absolute; inset: -8px -4px; } details.ce-langmenu > summary::-webkit-details-marker { display: none; } details.ce-langmenu > summary::marker { content: ""; } details.ce-langmenu > summary:hover, details.ce-langmenu[open] > summary { border-color: rgba(19, 72, 121, .35); background: #fff; color: #134879; } details.ce-langmenu > summary:focus-visible { outline: 2px solid #134879; outline-offset: 2px; } details.ce-langmenu svg.ce-langmenu__globe { flex: none; width: 16px; height: 16px; color: #134879; } details.ce-langmenu svg.ce-langmenu__caret { flex: none; width: 14px; height: 14px; color: #6b7785; transition: transform .15s ease-out; } details.ce-langmenu[open] svg.ce-langmenu__caret { transform: rotate(180deg); } details.ce-langmenu img.ce-langmenu__flag { display: block; flex: none; width: 18px; height: 12px; max-width: none; margin: 0; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 30, 50, .14); } details.ce-langmenu ul.ce-langmenu__list { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 100000; display: block; width: max-content; min-width: 176px; max-height: min(70vh, 560px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #dfe5ec; border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(10, 30, 48, .1), 0 8px 10px -6px rgba(10, 30, 48, .1); } /* 닫힌 동안 목록은 그리지도, 자리를 재지도 않는다(닫힌 details 안 글자도 상자는 잡힌다) */ details.ce-langmenu:not([open]) ul.ce-langmenu__list { display: none; } details.ce-langmenu ul.ce-langmenu__list > li { display: block; height: auto; margin: 0; padding: 0; } details.ce-langmenu ul.ce-langmenu__list > li > a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 12px; color: #374151; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-decoration: none; box-sizing: border-box; transition: background-color .15s ease-out; } details.ce-langmenu ul.ce-langmenu__list > li > a:hover, details.ce-langmenu ul.ce-langmenu__list > li > a:focus-visible { background: #f3f5f8; outline: none; } details.ce-langmenu ul.ce-langmenu__list > li > a[aria-current] { background: #edf2f8; color: #134879; } details.ce-langmenu ul.ce-langmenu__list img.ce-langmenu__flag { width: 21px; height: 14px; } details.ce-langmenu svg.ce-langmenu__check { flex: none; width: 16px; height: 16px; margin-inline-start: auto; padding-inline-start: 6px; box-sizing: content-box; color: #2a6aa6; } /* 목록을 연 동안은 머리를 첫 방문 안내 팝업(#popupLayer)보다 위로 — 목록이 팝업에 깔리지 않게. 머리의 transition: all 이 z-index 까지 0.5초 끌어올리므로 여는 순간에는 전환을 끈다 */ .header:has(details.ce-langmenu[open]), .header_mo:has(details.ce-langmenu[open]) { z-index: 100000000; transition: none; } /* PC 상단 줄 — 옛 국기 3개 자리 */ .header_topmenu ul li.ce-langmenu-li { display: flex; align-items: center; height: 56px; margin-left: 24px; } /* 폰 로고 줄 — 햄버거 바로 앞. 이름은 숨기고 국기만(지구본 + 국기 + ▾) */ .header_mo_gnb details.ce-langmenu--mo { margin-inline-start: auto; } .header_mo_gnb details.ce-langmenu--mo > summary { gap: 6px; height: 28px; padding: 0 10px; font-size: 12px; } .header_mo_gnb details.ce-langmenu--mo .ce-langmenu__name { display: none; } .header_mo_gnb details.ce-langmenu--mo ul.ce-langmenu__list { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); } .header_mo_gnb details.ce-langmenu--mo:dir(rtl) { margin-inline-end: 10px; } .header_mo_gnb:has(details.ce-langmenu--mo) .logo { max-width: 200px; } .header_mo_gnb:has(details.ce-langmenu--mo) .btn_submenu img { width: 40px; } @media screen and (max-width: 360px) { .header_mo_gnb:has(details.ce-langmenu--mo) .logo { max-width: 170px; } } /* PC 우측 퀵메뉴 — 칸이 6개가 되어 아래 AI 상담창 자리를 비운다 */ .quick_menu2 div[data-ce-extra="naver-booking"] a img { width: 46px; height: 46px; } /* 서브 지면 탭 줄(.lnb · sticky z 999)이 스크롤 중 퀵메뉴를 덮던 것 — 한 단계만 위로(머리 펼침 메뉴 99999 보다는 아래) */ .quick_menu2:has([data-ce-extra="naver-booking"]) { z-index: 1000; } @media screen and (min-width: 961px) { .quick_menu2:has([data-ce-extra="naver-booking"]) { bottom: max(12vh, 176px); } .quick_menu2:has([data-ce-extra="naver-booking"]) div { margin-top: 14px; } } /* 키가 낮은 PC 화면(1366×768 등) — 6칸이 머리에 닿지 않게 아이콘 간격·크기를 줄인다 */ @media screen and (min-width: 961px) and (max-height: 860px) { .quick_menu2:has([data-ce-extra="naver-booking"]) div { margin-top: 8px; } .quick_menu2:has([data-ce-extra="naver-booking"]) div a img { width: 38px; height: 38px; } } /* 폰 하단 고정 바 5칸 */ .btm_menu ul.ce-btm5 li a img, .btm_menu ul.ce-btm5 li:nth-child(1) a img { width: 28px; height: auto; margin-left: 0; } .btm_menu ul.ce-btm5 li[data-ce-extra="naver-booking"] a img { height: 28px; } .btm_menu ul.ce-btm5 a { font-size: 14px; letter-spacing: -0.04em; } .btm_menu ul.ce-btm5 a em { margin-top: 8px; white-space: nowrap; } @media screen and (max-width: 400px) { .btm_menu ul.ce-btm5 a { font-size: 13px; letter-spacing: -0.06em; } } :host{all:initial;display:block;font-family:"Noto Sans KR",sans-serif;color:#333;line-height:1;letter-spacing:-0.025em} :host{width:auto!important;min-width:0!important;height:auto!important;overflow:visible!important;background:transparent!important;margin:0!important} .ce-lc-wrap{width:auto!important;overflow:visible!important} .ce-lc-spacer{height:150px} .ce-lc-spacer--foot{height:80px} @media screen and (max-width:960px){.ce-lc-spacer{height:70px}.ce-lc-spacer--foot{height:0}} @media screen and (max-width:767px){.ce-lc-spacer--foot{height:70px}} .ce-lc-wrap .header_mo.ce-lc-solid{background:#fff} /* 아랍어 지면 — 섀도 호스트의 all:initial 이 방향을 되돌리므로 다시 켠다 */ :host([dir="rtl"]){direction:rtl} :host([dir="rtl"]) .header_topmenu ul,:host([dir="rtl"]) .header_gnb_inner{direction:rtl} :host([dir="rtl"]) .header_gnb_main,:host([dir="rtl"]) .ft_menu,:host([dir="rtl"]) .quick_menu2{direction:rtl} :host([dir="rtl"]) .btm_menu ul li::after{right:auto;left:0} :host([dir="rtl"]) .btm_menu ul li:last-child::after{display:none} :host([dir="rtl"]) .btm_menu ul li:nth-child(1) a img{margin-left:0;margin-right:12px} :host([dir="rtl"]) .btm_counsel form input#btm_check + label{padding-left:0;padding-right:20px;background-position:right 3px} :host([dir="rtl"]) .btm_counsel form input#btm_check:checked + label{background-position:right 3px} :host([dir="rtl"]) .btm_counsel form button i.fa-chevron-right{display:inline-block;transform:scaleX(-1)} /* 폰에서 입력 칸에 포커스가 있는 동안 하단 고정 바를 비켜 둔다(ce-legacy-chrome.js 가 data-ce-kb 를 건다) */ :host([data-ce-kb]) .btm_menu{display:none!important}