/* ---- BUILT FILE. DO NOT MODIFY THIS DIRECTLY. ---- */ @charset "UTF-8"; /** The `base-font-size` is what's used when calculating `em()`s. @group settings @type Number @access public */ /** The default border-radius for components @group settings @type Number @access public */ /** The default color of text @group settings @type Color @access public @todo Deprecate this */ /** The default color of links @group settings @type Color @access public @todo Deprecate this */ /** The default color of the background @group settings @type Color @access public @todo Deprecate this */ /** Whether or not the project has JS-based feature detection @group settings @type Boolean @access public */ /** A map containing the names and paths to places assets could live. Defaults to false as this must be set on a per-project basis @group settings @type {Map|Boolean} @access public */ /** The class to use for IE7 @group ie @type String @access public */ /** The class to use for IE8 @group ie @type String @access public */ /** Output styles only for IE7/8 @group ie @access public @requires $ie7-selector @requires $ie8-selector */ /** Output styles only for IE7 @group ie @access public @requires $ie7-selector */ /** Output styles only for IE8 @group ie @access public @requires $ie8-selector */ /** IE7 hack for the `inherit` value. Uses expressions. @group ie @access public @param {String} $property - CSS property whose value should be set to `inherit` @requires {mixin} ie7 */ /** IE7 hack for the `inline-block`. @group ie @access public @requires {mixin} ie7 */ /** Removes units from a value @group utilities @param {Number} $value @return {Number} Value without units */ /** Converts a Number to em units @group utilities @param {Number} $value @param {Number} $context ($base-font-size) @requires $base-font-size @requires strip-units @return {Number} The $value converted to em's */ /** Converts a Number to rem units @group utilities @param {Number} $value @requires strip-units @requires em @return {Number} The $value converted to rem's */ /** Returns the first item in a list @group utilities @param {List} $list @return {Number | String | Color | Boolean | List | Map} First value in the list */ /** Returns the last item in a list @group utilities @param {List} $list @return {Number | String | Color | Boolean | List | Map} Last value in the list */ /** Converts rgba/hsla to an opaque color @group utilities @param {Color} $alpha - The alpha color @param {Boolean | Color} $mix (false) - A color to mix with @return {Color} An opaque color */ /** Get the full path of an asset with a base path from `$path-urls` @param {String} $asset - The relative asset path @param {String} $base ('default') - Which base path to use @return {String} A full asset path */ /** Get the full `url()` of an asset with a base path from `$path-urls` @param {String} $asset - The relative asset path @param {String} $base ('default') - Which base path to use @requires path @return {String} A full asset path wraped in `url()` */ /** Convenience method for setting a key-value pair in an existing map @group utilities @param {Map} $map - An existing map @param {String} $key - The value's key @param {Number | String | Color | Boolean | List | Map} $value - The value @returns {Map} A new map with the additional key-value pair */ /** Center an element or offset it if it's large than the content-width @group helpers @access public @param {Boolean|Number} $width (false) - width of element to be centered @param {Number} $content-width (980px ) - width of parent element */ /** Center an element and the text within it @group helpers @access public @param {Boolean|Number} $width (false) - width of element to be centered @param {Number} $content-width (980px) - width of parent element @requires {mixin} center */ /** Self clear an element (a clearfix) @group helpers @access public @link http://nicolasgallagher.com/micro-clearfix-hack/ */ /** Visually hide an element @group helpers @access public */ /** Hide text for image replacement @group helpers @access public */ /** CSS3 cursor fallbacks @group helpers @access public @param {String} $value - cursor property value */ /** Add a selector on the `html` element @group helpers @access public @param {String} $selector - selector to append to the HTML element */ /** Target SVG Support @group helpers @access public @param {Boolean} $support (true) - False for `.no-svg` */ /** Target Touch Devices @group helpers @access public @param {Boolean} $support (true) - False for `.no-touch` */ /** Mouse-hover only, ingnore touch events @group helpers @access public */ /** 1. Media queries in em's are always relative to 16px, regardless of the or font size @group media */ /** Returns a string for min-width conditions @group media @param {Number} $width - The width @returns {String} */ /** Returns a string for max-width conditions @group media @param {Number} $width - The width @returns {String} */ /** Returns a string for min-height conditions @group media @param {Number} $height - The height @returns {String} */ /** Returns a string for max-height conditions @group media @param {Number} $height - The height @returns {String} */ /** Returns a string for portrait conditions @group media @returns {String} */ /** Returns a string for landscape conditions @group media @returns {String} */ /** Returns a string for retina conditions @group media @returns {List} */ /** Output a media query with the specified conditions @group media @param {String} $query - The media query conditions @param {Boolean} $screen (true) - Add `only screen` condition */ /** Apply CSS only to viewports of max-width @group media @param {Number} $width - The max-width of the viewport @requires {mixin} media @requires max-width */ /** Apply CSS only to viewports of min-width @group media @param {Number} $width - The min-width of the viewport @requires {mixin} media @requires min-width */ /** Apply CSS only to viewports of max-height @group media @param {Number} $height - The max-height of the viewport @requires {mixin} media @requires max-height */ /** Apply CSS only to viewports of min-height @group media @param {Number} $height - The min-height of the viewport @requires {mixin} media @requires min-height */ /** Apply CSS only to viewports in portrait orientation @group media @requires {mixin} media @requires portrait */ /** Apply CSS only to viewports in landscape orientation @group media @requires {mixin} media @requires landscape */ /** The base-width for viewports. This determines whether to us `min-width` or `max-width` when using `viewport()` @group viewports @type Number @access public */ /** Use percentages for this viewport (and down) @group viewports @type List @access public */ /** Each viewport defintion includes a `width` and `content-width` for that viewport. Optionally a custom `query` can be defined, as well as being able to __always__ output styles for IE `oldie:true` @group viewports @type Viewport Dictionary @access private @param {Number} $width - Viewport width; min/max determined from base width; can be a range with `to` or `through` @param {Number} $width - Content width for the viewport-content() mixin @param {String|Boolean} $query - A custom query or `false` for no media query @param {Boolean} $oldie - `@content` for this viewport should always apply for oldie */ /** Check if a viewport with the given name exists @group viewports @access public @param {String} $name - the name of the viewport @requires $-viewports @returns {Boolean} - Whether the viewport exists or not */ /** Get viewport of a given name @group viewports @access public @param {String} $name - The name of the viewport @requires $-viewports @requires viewport-exists @returns {Map|Boolean} - Viewport or False */ /** Get dpr for a viewport of a given name @group viewports @access public @param {String} $name - The name of the viewport @requires $-viewports @requires viewport-exists @returns {String|Boolean} - dpr or False */ /** Add a viewport to the Viewports Dictionary @group viewports @access public @param {String} $name - The name of the viewport @param {Map} $properties - A map of viewport properties @requires map-set @requires $-viewports */ /** Remove a viewport from the Viewports Dictionary @group viewports @access public @param {String} $name - The name of the viewport @requires $-viewports */ /** Outputs the CSS at a viewport @group viewports @access public @param {String} $name - The name of the viewport @requires viewport-get @requires $viewport-base-width @requires {mixin} media @requires {mixin} supports-touch */ /** Outputs the CSS property at each viewport @group viewports @access public @param {String} $property - The name of the property @param {Map} $values - The values in the form `viewport: value` @requires viewport-exists @requires {mixin} viewport */ /** Get the min-width of a viewport @group viewports @param {String} $name - name of viewport @requires viewport-exists @requires viewport-get */ /** Get the max-width of a viewport @group viewports @param {String} $name - name of viewport @requires viewport-exists @requires viewport-get */ /** Sets the width of the element to the content-width at each viewport @group viewports @access public @requires $-viewports @requires {mixin} viewport-property */ /** Gets the content width for a specific viewport @group viewports @access public @requires $-viewports @requires {function} viewport-get @returns {Number|String} - Viewport content width or "auto" if viewport is not defined */ /** Gets the content padding for a specific viewport @group viewports @access public @param {String | List} $name - name of viewport @requires viewport-exists @requires viewport-get @requires viewport-get-min @requires viewport-get-max @requires viewport-content-width-for @requires $viewports-flexible-from */ /** The number of columns to use in the outputted grid @group grid @type Number @access public */ /** The column float direction @group grid @type Number @access public */ /** The column class name @group grid @type String @access public */ /** Row width @group grid @type Percentage @access private */ /** Row width for IE&/8 (oldie) @group grid @type Percentage @access private */ /** Make your own grid system @group grid @access public @param {Number} $columns ($grid-columns) - Number of columns @param {String} $class ($grid-default-class) - Class to denote columns @param {String} $oldie ($grid-oldie-class) - Class name for columns in IE7/8 */ /** Include column widths on an element without using the grid system's classes @group grid @access public @param {Number} $column-count ($grid-columns) - Width of the column in _n_ columns @param {Number} $total-columns ($grid-columns) - Total number of columns in the grid @param {String} $oldie ($grid-oldie-class) - Class name for columns in IE7/8 @requires $grid-column-float @requires $grid-full-width @requires $grid-full-width-oldie */ /** Create a new row without using the grid system's classes @group grid @access public */ /** Helpers for show/hide and auto positioning classes. @group grid @access public @param {String} $class ($grid-default-class) - The prefix for the helper classes */ /** Each image defintion is a map of supported viewports for that image key. Each of those maps contain a `src`, `width` and `height` property. @group images @type Image Dictionary @access private */ /** Check if a image with the given name exists @group images @access public @param {String} $name - the name of the image @requires $-images @returns {Boolean} - Whether the images exists or not */ /** Check if a image by the given name exists for a given type (usually viewport-name or svg) @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires $-images @requires image-get @returns {Boolean} - Whether the images exists or not */ /** Get image data for a given name @group images @access public @param {String} $name - The name of the image @requires -images @requires image-exists @returns {Map|Boolean} - Image object or False */ /** Get image data for a given name and a given type (usually a viewport or 'svg') @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires image-get @requires image-exists-for @returns {Map|Boolean} - Image object or False */ /** Get the width for a given image of a given type (usually viewport-name or 'svg') @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires image-get-for @requires image-exists-for @returns {Number|Boolean} - Image width or False */ /** Get the height for a given image of a given type (usually viewport-name or 'svg') @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires image-get-for @requires image-exists-for @returns {Number|Boolean} - Image height or False */ /** Get the src for a given image of a given type (usually viewport-name or 'svg') @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires image-get-for @requires image-exists-for @returns {String|Boolean} - Image src or False */ /** Check if a 2x asset exists for a given image and viewport @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires image-get-for @requires image-exists-for @returns {Boolean} - Image src or False */ /** Get the 2x-src for a given image of a given viewport @group images @access public @param {String} $name - The name of the image @param {String} $type - The name of the viewport or 'svg' @requires image-get-for @requires image-exists-for @returns {String|Boolean} - Image src or False */ /** Output the image dimensions for a given image name at each viewport @group images @access public @param {String} $name - The name of the image @requires image-exists @requires image-exists-for @requires image-width-for @requires image-height-for @requires $-viewports @requires {mixin} viewport */ /** Add an image to the Image Dictionary of a type (usually viewport-name or 'svg') @group images @access private @param {String} $name - The name of the image @param {String} $type - The name of the viewport @param {Map} $properties - The image properties (`src`, `width`, `height`) @requires $-images @requires image-exists @requires image-exists-for @requires image-get @requires map-set @returns {Image Dictionary} */ /** Add an image to the Image Dictionary @group images @access public @param {String} $name - The name of the image @param {Map} $attributes - A map of viewports, each containing a map of image properties (`src`, `width`, `height`) for that viewport @requires image-add-of-type */ /** Output retina media query with _2x image path @group images @access public @param {String} $path - The path to the image @requires {mixin} retina */ /** Output size for element with background-image @group images @param {Number} $width - The width of the image @param {Number} $height - The height of the image @param {Boolean} $size - Should we make the size of the element the size of the image @param {Boolean} $center - Should we center the element in the content width. (Requires content-width to be passed.) @param {Number} $viewport-content-width - The content width of a viewport @access private @requires {mixin} retina */ /** Generates the CSS for a background image at each viewport @group images @access public @param {String} $name - The name of the image @param {Boolean} $size (true) - Output the image size. Defaults to true. @param {Boolean} $center (false) - Center image in each viewport. Defaults to false. @requires $-viewports @requires {mixin} viewport @requires viewport-dpr @requires image-exists @requires image-exists-for @requires image-width-for @requires image-height-for @requires image-src-for @requires center @todo Use `image-get-for` instead of `map-get($image, $viewport-name)` */ /** Generates the CSS for a SVG background image at each viewport @group images @access public @param {String} $name - The name of the image @param {String} $sizes - Map of the image ratios at each viewport (xlarge: 1.2, large: 1, medium: .7, small: .4, xsmall: .3 ) @param {Boolean} $size (true) - Output the image size. Defaults to true. @param {Boolean} $center (false) - Center image in each viewport. Defaults to false. @requires $-viewports @requires {mixin} viewport @requires image-exists @requires image-exists-for @requires image-width-for @requires image-height-for @requires image-src-for @requires center @todo Use `image-get-for` instead of `map-get($image, $viewport-name)` */ /** Generates the CSS for a SVG headline based upon defined typography sizes @group images @access public @param {String} $image - The name of the image @param {String} $typography-style-name - The name of the typography style to grab ratios from @param {Boolean} $default (large) - The default viewport size (native SVG size) @requires $-viewports @requires {mixin} image-svg @requires typography-get-fontsize-withoutunit-for */ /** Apply CSS only to retina devices @group retina */ /** AC Retina Equivalent Media Query @group retina */ /** A list of font stacks to use for different locales @group typography @type Map @access private */ /** Outputs font-family with the correct Applecom font stack for all locales @group typography @access public */ /** Outputs font-weight with IE support @group typography @access public @param {String} $weight - The desired font-weight */ /** Each typography defintion is a map of supported viewports for that typography key. Each of those maps contain the properties for that type style (each property maps to a CSS property.) @group typography @type Typography Dictionary @access private */ /** Check if a typography style with the given name exists @group typography @access public @param {String} $name - the name of the typography style @requires $-typography @returns {Boolean} - Whether the typography style exists or not */ /** Check if a typography style by the given name exists for a given viewport @group typography @access public @param {String} $name - The name of the typography style @param {String} $viewport - The name of the viewport @requires $-typography @requires typography-get @returns {Boolean} - Whether the typography style exists or not */ /** Get typography style of a given name @group typography @access public @param {String} $name - The name of the typography style @requires $-typography @requires typography-exists @returns {Map|Boolean} - Typography Style or False */ /** Get a unitless font-size for a style of a given name for a given viewport @group typography @access public @param {String} $name - The name of the typography style @param {String} $viewport-name - The name of the viewport @requires typography-get @returns {Number} - Unitless font-size for type-style at a given viewport. */ /** Add a typography style to the Typography Dictionary for a particular viewport @group typography @access private @param {String} $name - The name of the typography style @param {String} $viewport - The name of the viewport @param {Map} $styles - The style properties (`font-size`, `line-height`, `font-weight`) @requires $-typography @requires typography-exists @requires typography-exists-for-viewport @requires typography-get @requires map-set @todo Use `typography-get-for-viewport` instead of `map-get(typography-get($name), $viewport)` @returns {Typography Dictionary} */ /** Add a typography style to the Typography Dictionary @group typography @access public @param {String} $name - The name of the typography style @param {Map|List} $styles - A map of viewports, each containing a map of style properties (`font-size:`, `line-height:`, `font-weight:`) for that viewport or a list of 2x pt values from the PSD _(font size, line-height, font weight)_. @requires typography-add-to-viewport */ /** Generates the CSS for a typography style at each viewport @group typography @access public @param {String} $name - The name of the typography style @requires $-viewports @requires {mixin} viewport @requires typography-get @requires typography-exists-for-viewport @todo Use `typography-get-for-viewport` instead of `map-get($typography-styles, $viewport-name)` */ html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; } ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr { margin: 0; padding: 0; } pre, code, address, caption, th, figcaption { font-size: 1em; font-weight: normal; font-style: normal; } fieldset, iframe, img { border: none; } caption, th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } article, aside, footer, header, nav, main, section, summary, details, hgroup, figure, figcaption { display: block; } audio, canvas, video, progress { display: inline-block; vertical-align: baseline; } button { font: inherit; vertical-align: middle; } @media print { body, #main, #content { color: #000; } a, a:link, a:visited { color: #000; text-decoration: none; } #globalheader, #globalfooter, #directorynav, #tabs, .noprint, .hide { display: none; } } html { font-size: 112.5%; } body { background-color: white; color: #333333; font-style: normal; font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; font-size: 1em; line-height: 1.4444; font-weight: 400; } html[lang=ja-JP] body { font-family: "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html[lang=zh-CN] body { font-family: "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html[lang=zh-TW] body { font-family: "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html[lang=zh-HK] body { font-family: "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html[lang=th-TH] body { font-family: "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html[lang=ko-KR] body { font-family: "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } body, input, textarea, select, button { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern"; } a { color: #0088cc; } a:visited, a:link, a:active { text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 4.4444em; line-height: 1.1; font-weight: 200; } html.oldie h1 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] h1 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] h1 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] h1 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] h1 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] h1 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] h1 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { h1 { font-size: 3.5556em; line-height: 1.0625; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h1 { font-size: 2.6667em; line-height: 1.0833; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h1 { font-size: 2.2222em; line-height: 1.1; font-weight: 200; } } h2 { font-size: 4em; line-height: 1.1111; font-weight: 200; } html.oldie h2 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] h2 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] h2 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] h2 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] h2 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { h2 { font-size: 3.1111em; line-height: 1.0714; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h2 { font-size: 2.2222em; line-height: 1.1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h2 { font-size: 2em; line-height: 1.1111; font-weight: 200; } } h3 { font-size: 3.5556em; line-height: 1.0625; font-weight: 200; } html.oldie h3 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] h3 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] h3 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] h3 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] h3 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] h3 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] h3 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { h3 { font-size: 2.8889em; line-height: 1.0769; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h3 { font-size: 2em; line-height: 1.1111; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h3 { font-size: 1.7778em; line-height: 1.125; font-weight: 200; } } h4 { font-size: 2.2222em; line-height: 1.1; font-weight: 200; } html.oldie h4 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] h4 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] h4 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] h4 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] h4 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] h4 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] h4 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { h4 { font-size: 2.2222em; line-height: 1.1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h4 { font-size: 1.7778em; line-height: 1.125; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h4 { font-size: 1.5556em; line-height: 1.1429; font-weight: 200; } } h5 { font-size: 1.7778em; line-height: 1.125; font-weight: 200; } html.oldie h5 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] h5 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] h5 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] h5 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] h5 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] h5 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] h5 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { h5 { font-size: 1.7778em; line-height: 1.125; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h5 { font-size: 1.5556em; line-height: 1.1429; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch h5 { font-size: 1.3333em; line-height: 1.1667; font-weight: 200; } } h6 { font-size: 1.5556em; line-height: 1.1429; font-weight: 200; } html.oldie h6 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] h6 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] h6 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] h6 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] h6 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] h6 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] h6 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 767px) { html.touch h6 { font-size: 1.3333em; line-height: 1.1667; font-weight: 200; } } h1, h2, h3, h4, h5, h6 { margin: 0.5em 0 0 0; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin: 0 0 0 0; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { display: block; margin: 0; } strong, b { font-weight: bold; } em, i, cite, dfn { font-style: italic; } p { margin: 1em 0 0 0; } p:first-child { margin: 0 0 0 0; } li li { font-size: 1em; } ul, ol { margin: 1em 0 1em 1.1111em; } ul ul, ul ol, ol ul, ol ol { margin-top: 0; margin-bottom: 0; } nav ul, nav ol { list-style: none; margin: 0; } sup { font-size: .6em; opacity: .8; vertical-align: top; position: relative; bottom: -.2em; } .oldie sup { font-size: 10px; font-weight: normal; line-height: 1; } h1 sup, h2 sup, h3 sup { font-size: .4em; } .oldie h1 sup, .oldie h2 sup, .oldie h3 sup { font-size: .4em; } sup a { color: #333333; } sup a:hover { color: #0088cc; text-decoration: none; } sub { line-height: 1; } abbr { border: 0; } .selfclear:before, .selfclear:after { content: " "; display: table; } .selfclear:after { clear: both; } html.oldie .selfclear { zoom: 1; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .imagereplace { font: 0/0 a; color: transparent; } .nowrap { white-space: nowrap; } .clear { clear: both; } #top { position: absolute; top: 0; } .cursor-grab { cursor: move; cursor: -webkit-grab; cursor: grab; } .cursor-grabbing { cursor: move; cursor: -webkit-grabbing; cursor: grabbing; } .row { position: relative; z-index: 1; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } html.oldie .row { zoom: 1; } .column { position: relative; z-index: 1; min-height: 2px; margin: 0; padding: 0; float: left; width: 100%; } .large-1 { width: 8.3333%; } html.oldie .large-1 { width: 8.325%; } .large-centered-1 { margin-left: 45.8333%; } html.oldie .large-centered-1 { margin-left: 45.7875%; } .large-offset-1 { margin-left: 8.3333%; } html.oldie .large-offset-1 { margin-left: 8.325%; } .large-push-1 { left: 8.3333%; right: auto; } .large-pull-1 { right: 8.3333%; left: auto; } .large-2 { width: 16.6667%; } html.oldie .large-2 { width: 16.65%; } .large-centered-2 { margin-left: 41.6667%; } html.oldie .large-centered-2 { margin-left: 41.625%; } .large-offset-2 { margin-left: 16.6667%; } html.oldie .large-offset-2 { margin-left: 16.65%; } .large-push-2 { left: 16.6667%; right: auto; } .large-pull-2 { right: 16.6667%; left: auto; } .large-3 { width: 25%; } html.oldie .large-3 { width: 24.975%; } .large-centered-3 { margin-left: 37.5%; } html.oldie .large-centered-3 { margin-left: 37.4625%; } .large-offset-3 { margin-left: 25%; } html.oldie .large-offset-3 { margin-left: 24.975%; } .large-push-3 { left: 25%; right: auto; } .large-pull-3 { right: 25%; left: auto; } .large-4 { width: 33.3333%; } html.oldie .large-4 { width: 33.3%; } .large-centered-4 { margin-left: 33.3333%; } html.oldie .large-centered-4 { margin-left: 33.3%; } .large-offset-4 { margin-left: 33.3333%; } html.oldie .large-offset-4 { margin-left: 33.3%; } .large-push-4 { left: 33.3333%; right: auto; } .large-pull-4 { right: 33.3333%; left: auto; } .large-5 { width: 41.6667%; } html.oldie .large-5 { width: 41.625%; } .large-centered-5 { margin-left: 29.1667%; } html.oldie .large-centered-5 { margin-left: 29.1375%; } .large-offset-5 { margin-left: 41.6667%; } html.oldie .large-offset-5 { margin-left: 41.625%; } .large-push-5 { left: 41.6667%; right: auto; } .large-pull-5 { right: 41.6667%; left: auto; } .large-6 { width: 50%; } html.oldie .large-6 { width: 49.95%; } .large-centered-6 { margin-left: 25%; } html.oldie .large-centered-6 { margin-left: 24.975%; } .large-offset-6 { margin-left: 50%; } html.oldie .large-offset-6 { margin-left: 49.95%; } .large-push-6 { left: 50%; right: auto; } .large-pull-6 { right: 50%; left: auto; } .large-7 { width: 58.3333%; } html.oldie .large-7 { width: 58.275%; } .large-centered-7 { margin-left: 20.8333%; } html.oldie .large-centered-7 { margin-left: 20.8125%; } .large-offset-7 { margin-left: 58.3333%; } html.oldie .large-offset-7 { margin-left: 58.275%; } .large-push-7 { left: 58.3333%; right: auto; } .large-pull-7 { right: 58.3333%; left: auto; } .large-8 { width: 66.6667%; } html.oldie .large-8 { width: 66.6%; } .large-centered-8 { margin-left: 16.6667%; } html.oldie .large-centered-8 { margin-left: 16.65%; } .large-offset-8 { margin-left: 66.6667%; } html.oldie .large-offset-8 { margin-left: 66.6%; } .large-push-8 { left: 66.6667%; right: auto; } .large-pull-8 { right: 66.6667%; left: auto; } .large-9 { width: 75%; } html.oldie .large-9 { width: 74.925%; } .large-centered-9 { margin-left: 12.5%; } html.oldie .large-centered-9 { margin-left: 12.4875%; } .large-offset-9 { margin-left: 75%; } html.oldie .large-offset-9 { margin-left: 74.925%; } .large-push-9 { left: 75%; right: auto; } .large-pull-9 { right: 75%; left: auto; } .large-10 { width: 83.3333%; } html.oldie .large-10 { width: 83.25%; } .large-centered-10 { margin-left: 8.3333%; } html.oldie .large-centered-10 { margin-left: 8.325%; } .large-offset-10 { margin-left: 83.3333%; } html.oldie .large-offset-10 { margin-left: 83.25%; } .large-push-10 { left: 83.3333%; right: auto; } .large-pull-10 { right: 83.3333%; left: auto; } .large-11 { width: 91.6667%; } html.oldie .large-11 { width: 91.575%; } .large-centered-11 { margin-left: 4.1667%; } html.oldie .large-centered-11 { margin-left: 4.1625%; } .large-offset-11 { margin-left: 91.6667%; } html.oldie .large-offset-11 { margin-left: 91.575%; } .large-push-11 { left: 91.6667%; right: auto; } .large-pull-11 { right: 91.6667%; left: auto; } .large-12 { width: 100%; } html.oldie .large-12 { width: 99.9%; } .large-centered-12 { margin-left: 0%; } html.oldie .large-centered-12 { margin-left: 0%; } .large-offset-12 { margin-left: 100%; } html.oldie .large-offset-12 { margin-left: 99.9%; } .large-push-12 { left: 100%; right: auto; } .large-pull-12 { right: 100%; left: auto; } .large-offset-0 { margin-left: 0; } .large-push-0 { left: auto; right: auto; } .large-pull-0 { right: auto; left: auto; } .large-centered { margin-left: auto; margin-right: auto; float: none; } .large-uncentered { margin-left: 0; margin-right: 0; float: left; } .large-auto { position: absolute; } .large-auto-top { top: 0; } .large-auto-bottom { bottom: 0; } .large-auto-left { left: 0; } .large-auto-right { right: 0; } @media only screen and (max-width: 1023px) { .medium-1 { width: 8.3333%; } .medium-centered-1 { margin-left: 45.8333%; } .medium-offset-1 { margin-left: 8.3333%; } .medium-push-1 { left: 8.3333%; right: auto; } .medium-pull-1 { right: 8.3333%; left: auto; } .medium-2 { width: 16.6667%; } .medium-centered-2 { margin-left: 41.6667%; } .medium-offset-2 { margin-left: 16.6667%; } .medium-push-2 { left: 16.6667%; right: auto; } .medium-pull-2 { right: 16.6667%; left: auto; } .medium-3 { width: 25%; } .medium-centered-3 { margin-left: 37.5%; } .medium-offset-3 { margin-left: 25%; } .medium-push-3 { left: 25%; right: auto; } .medium-pull-3 { right: 25%; left: auto; } .medium-4 { width: 33.3333%; } .medium-centered-4 { margin-left: 33.3333%; } .medium-offset-4 { margin-left: 33.3333%; } .medium-push-4 { left: 33.3333%; right: auto; } .medium-pull-4 { right: 33.3333%; left: auto; } .medium-5 { width: 41.6667%; } .medium-centered-5 { margin-left: 29.1667%; } .medium-offset-5 { margin-left: 41.6667%; } .medium-push-5 { left: 41.6667%; right: auto; } .medium-pull-5 { right: 41.6667%; left: auto; } .medium-6 { width: 50%; } .medium-centered-6 { margin-left: 25%; } .medium-offset-6 { margin-left: 50%; } .medium-push-6 { left: 50%; right: auto; } .medium-pull-6 { right: 50%; left: auto; } .medium-7 { width: 58.3333%; } .medium-centered-7 { margin-left: 20.8333%; } .medium-offset-7 { margin-left: 58.3333%; } .medium-push-7 { left: 58.3333%; right: auto; } .medium-pull-7 { right: 58.3333%; left: auto; } .medium-8 { width: 66.6667%; } .medium-centered-8 { margin-left: 16.6667%; } .medium-offset-8 { margin-left: 66.6667%; } .medium-push-8 { left: 66.6667%; right: auto; } .medium-pull-8 { right: 66.6667%; left: auto; } .medium-9 { width: 75%; } .medium-centered-9 { margin-left: 12.5%; } .medium-offset-9 { margin-left: 75%; } .medium-push-9 { left: 75%; right: auto; } .medium-pull-9 { right: 75%; left: auto; } .medium-10 { width: 83.3333%; } .medium-centered-10 { margin-left: 8.3333%; } .medium-offset-10 { margin-left: 83.3333%; } .medium-push-10 { left: 83.3333%; right: auto; } .medium-pull-10 { right: 83.3333%; left: auto; } .medium-11 { width: 91.6667%; } .medium-centered-11 { margin-left: 4.1667%; } .medium-offset-11 { margin-left: 91.6667%; } .medium-push-11 { left: 91.6667%; right: auto; } .medium-pull-11 { right: 91.6667%; left: auto; } .medium-12 { width: 100%; } .medium-centered-12 { margin-left: 0%; } .medium-offset-12 { margin-left: 100%; } .medium-push-12 { left: 100%; right: auto; } .medium-pull-12 { right: 100%; left: auto; } .medium-offset-0 { margin-left: 0; } .medium-push-0 { left: auto; right: auto; } .medium-pull-0 { right: auto; left: auto; } .medium-centered { margin-left: auto; margin-right: auto; float: none; } .medium-uncentered { margin-left: 0; margin-right: 0; float: left; } .medium-auto { position: absolute; } .medium-auto-top { top: 0; } .medium-auto-bottom { bottom: 0; } .medium-auto-left { left: 0; } .medium-auto-right { right: 0; } } @media only screen and (max-width: 767px) { html.touch .small-1 { width: 8.3333%; } html.touch .small-centered-1 { margin-left: 45.8333%; } html.touch .small-offset-1 { margin-left: 8.3333%; } html.touch .small-push-1 { left: 8.3333%; right: auto; } html.touch .small-pull-1 { right: 8.3333%; left: auto; } html.touch .small-2 { width: 16.6667%; } html.touch .small-centered-2 { margin-left: 41.6667%; } html.touch .small-offset-2 { margin-left: 16.6667%; } html.touch .small-push-2 { left: 16.6667%; right: auto; } html.touch .small-pull-2 { right: 16.6667%; left: auto; } html.touch .small-3 { width: 25%; } html.touch .small-centered-3 { margin-left: 37.5%; } html.touch .small-offset-3 { margin-left: 25%; } html.touch .small-push-3 { left: 25%; right: auto; } html.touch .small-pull-3 { right: 25%; left: auto; } html.touch .small-4 { width: 33.3333%; } html.touch .small-centered-4 { margin-left: 33.3333%; } html.touch .small-offset-4 { margin-left: 33.3333%; } html.touch .small-push-4 { left: 33.3333%; right: auto; } html.touch .small-pull-4 { right: 33.3333%; left: auto; } html.touch .small-5 { width: 41.6667%; } html.touch .small-centered-5 { margin-left: 29.1667%; } html.touch .small-offset-5 { margin-left: 41.6667%; } html.touch .small-push-5 { left: 41.6667%; right: auto; } html.touch .small-pull-5 { right: 41.6667%; left: auto; } html.touch .small-6 { width: 50%; } html.touch .small-centered-6 { margin-left: 25%; } html.touch .small-offset-6 { margin-left: 50%; } html.touch .small-push-6 { left: 50%; right: auto; } html.touch .small-pull-6 { right: 50%; left: auto; } html.touch .small-7 { width: 58.3333%; } html.touch .small-centered-7 { margin-left: 20.8333%; } html.touch .small-offset-7 { margin-left: 58.3333%; } html.touch .small-push-7 { left: 58.3333%; right: auto; } html.touch .small-pull-7 { right: 58.3333%; left: auto; } html.touch .small-8 { width: 66.6667%; } html.touch .small-centered-8 { margin-left: 16.6667%; } html.touch .small-offset-8 { margin-left: 66.6667%; } html.touch .small-push-8 { left: 66.6667%; right: auto; } html.touch .small-pull-8 { right: 66.6667%; left: auto; } html.touch .small-9 { width: 75%; } html.touch .small-centered-9 { margin-left: 12.5%; } html.touch .small-offset-9 { margin-left: 75%; } html.touch .small-push-9 { left: 75%; right: auto; } html.touch .small-pull-9 { right: 75%; left: auto; } html.touch .small-10 { width: 83.3333%; } html.touch .small-centered-10 { margin-left: 8.3333%; } html.touch .small-offset-10 { margin-left: 83.3333%; } html.touch .small-push-10 { left: 83.3333%; right: auto; } html.touch .small-pull-10 { right: 83.3333%; left: auto; } html.touch .small-11 { width: 91.6667%; } html.touch .small-centered-11 { margin-left: 4.1667%; } html.touch .small-offset-11 { margin-left: 91.6667%; } html.touch .small-push-11 { left: 91.6667%; right: auto; } html.touch .small-pull-11 { right: 91.6667%; left: auto; } html.touch .small-12 { width: 100%; } html.touch .small-centered-12 { margin-left: 0%; } html.touch .small-offset-12 { margin-left: 100%; } html.touch .small-push-12 { left: 100%; right: auto; } html.touch .small-pull-12 { right: 100%; left: auto; } html.touch .small-offset-0 { margin-left: 0; } html.touch .small-push-0 { left: auto; right: auto; } html.touch .small-pull-0 { right: auto; left: auto; } html.touch .small-centered { margin-left: auto; margin-right: auto; float: none; } html.touch .small-uncentered { margin-left: 0; margin-right: 0; float: left; } html.touch .small-auto { position: absolute; } html.touch .small-auto-top { top: 0; } html.touch .small-auto-bottom { bottom: 0; } html.touch .small-auto-left { left: 0; } html.touch .small-auto-right { right: 0; } } @media only screen and (max-width: 767px) { html.touch .xsmall-1 { width: 8.3333%; } html.touch .xsmall-centered-1 { margin-left: 45.8333%; } html.touch .xsmall-offset-1 { margin-left: 8.3333%; } html.touch .xsmall-push-1 { left: 8.3333%; right: auto; } html.touch .xsmall-pull-1 { right: 8.3333%; left: auto; } html.touch .xsmall-2 { width: 16.6667%; } html.touch .xsmall-centered-2 { margin-left: 41.6667%; } html.touch .xsmall-offset-2 { margin-left: 16.6667%; } html.touch .xsmall-push-2 { left: 16.6667%; right: auto; } html.touch .xsmall-pull-2 { right: 16.6667%; left: auto; } html.touch .xsmall-3 { width: 25%; } html.touch .xsmall-centered-3 { margin-left: 37.5%; } html.touch .xsmall-offset-3 { margin-left: 25%; } html.touch .xsmall-push-3 { left: 25%; right: auto; } html.touch .xsmall-pull-3 { right: 25%; left: auto; } html.touch .xsmall-4 { width: 33.3333%; } html.touch .xsmall-centered-4 { margin-left: 33.3333%; } html.touch .xsmall-offset-4 { margin-left: 33.3333%; } html.touch .xsmall-push-4 { left: 33.3333%; right: auto; } html.touch .xsmall-pull-4 { right: 33.3333%; left: auto; } html.touch .xsmall-5 { width: 41.6667%; } html.touch .xsmall-centered-5 { margin-left: 29.1667%; } html.touch .xsmall-offset-5 { margin-left: 41.6667%; } html.touch .xsmall-push-5 { left: 41.6667%; right: auto; } html.touch .xsmall-pull-5 { right: 41.6667%; left: auto; } html.touch .xsmall-6 { width: 50%; } html.touch .xsmall-centered-6 { margin-left: 25%; } html.touch .xsmall-offset-6 { margin-left: 50%; } html.touch .xsmall-push-6 { left: 50%; right: auto; } html.touch .xsmall-pull-6 { right: 50%; left: auto; } html.touch .xsmall-7 { width: 58.3333%; } html.touch .xsmall-centered-7 { margin-left: 20.8333%; } html.touch .xsmall-offset-7 { margin-left: 58.3333%; } html.touch .xsmall-push-7 { left: 58.3333%; right: auto; } html.touch .xsmall-pull-7 { right: 58.3333%; left: auto; } html.touch .xsmall-8 { width: 66.6667%; } html.touch .xsmall-centered-8 { margin-left: 16.6667%; } html.touch .xsmall-offset-8 { margin-left: 66.6667%; } html.touch .xsmall-push-8 { left: 66.6667%; right: auto; } html.touch .xsmall-pull-8 { right: 66.6667%; left: auto; } html.touch .xsmall-9 { width: 75%; } html.touch .xsmall-centered-9 { margin-left: 12.5%; } html.touch .xsmall-offset-9 { margin-left: 75%; } html.touch .xsmall-push-9 { left: 75%; right: auto; } html.touch .xsmall-pull-9 { right: 75%; left: auto; } html.touch .xsmall-10 { width: 83.3333%; } html.touch .xsmall-centered-10 { margin-left: 8.3333%; } html.touch .xsmall-offset-10 { margin-left: 83.3333%; } html.touch .xsmall-push-10 { left: 83.3333%; right: auto; } html.touch .xsmall-pull-10 { right: 83.3333%; left: auto; } html.touch .xsmall-11 { width: 91.6667%; } html.touch .xsmall-centered-11 { margin-left: 4.1667%; } html.touch .xsmall-offset-11 { margin-left: 91.6667%; } html.touch .xsmall-push-11 { left: 91.6667%; right: auto; } html.touch .xsmall-pull-11 { right: 91.6667%; left: auto; } html.touch .xsmall-12 { width: 100%; } html.touch .xsmall-centered-12 { margin-left: 0%; } html.touch .xsmall-offset-12 { margin-left: 100%; } html.touch .xsmall-push-12 { left: 100%; right: auto; } html.touch .xsmall-pull-12 { right: 100%; left: auto; } html.touch .xsmall-offset-0 { margin-left: 0; } html.touch .xsmall-push-0 { left: auto; right: auto; } html.touch .xsmall-pull-0 { right: auto; left: auto; } html.touch .xsmall-centered { margin-left: auto; margin-right: auto; float: none; } html.touch .xsmall-uncentered { margin-left: 0; margin-right: 0; float: left; } html.touch .xsmall-auto { position: absolute; } html.touch .xsmall-auto-top { top: 0; } html.touch .xsmall-auto-bottom { bottom: 0; } html.touch .xsmall-auto-left { left: 0; } html.touch .xsmall-auto-right { right: 0; } } a.block { display: block; cursor: pointer; text-decoration: none; color: inherit; } html.oldie a.block { color: expression(this.parentNode.currentStyle['color']); } a.block:before, a.block:after { content: " "; display: table; } a.block:after { clear: both; } html.oldie a.block { zoom: 1; } .no-touch a.block:hover .block-link, .no-js a.block:hover .block-link { text-decoration: underline; } .no-touch a.block:hover .block-link.icon-ie-parent, .no-js a.block:hover .block-link.icon-ie-parent { text-decoration: none; } .no-touch a.block:hover .block-link.icon-ie-parent .icon-ie-link, .no-js a.block:hover .block-link.icon-ie-parent .icon-ie-link { text-decoration: underline; } a.block .block-link { color: #0088cc; cursor: pointer; } a.block-inline { display: inline-block; } .button { background: #1d9bd9; background: -webkit-linear-gradient(#3baee7, #0088cc); background: linear-gradient(#3baee7, #0088cc); border-radius: 4px; color: white; cursor: pointer; font-size: 0.8333em; line-height: 2.16; text-align: center; white-space: nowrap; padding: 0 1.0667em; display: inline-block; } html.oldie .button { display: inline; zoom: 1; } html.oldie .button { vertical-align: middle; } .no-touch .button:hover, .no-js .button:hover { background: #2fa2dc; background: -webkit-linear-gradient(#4ab4e8, #1491d0); background: linear-gradient(#4ab4e8, #1491d0); text-decoration: none; } .button:active { background: #0d85c0; background: -webkit-linear-gradient(#1b9dde, #006da3); background: linear-gradient(#1b9dde, #006da3); outline: none; } .button-buynow, .button-compact { background: #1d9bd9; background: -webkit-linear-gradient(#3baee7, #0088cc); background: linear-gradient(#3baee7, #0088cc); border-color: #137ec6; border-top-color: #1992da; border-bottom-color: #0d6ab2; color: white; color: white; font-size: 13px; padding: 0 0.8462em; line-height: 1.7; } .no-touch .button-buynow:hover, .no-js .button-buynow:hover, .no-touch .button-compact:hover, .no-js .button-compact:hover { background: #2fa2dc; background: -webkit-linear-gradient(#4ab4e8, #1491d0); background: linear-gradient(#4ab4e8, #1491d0); } .button-buynow:active, .button-compact:active { background: #0d85c0; background: -webkit-linear-gradient(#1b9dde, #006da3); background: linear-gradient(#1b9dde, #006da3); } .callout { border-radius: 4px; border: 1px solid #e3e3e3; background-color: #f2f2f2; margin: 1.1111em auto; padding: 1.6667em 4.4444em; } .callout .callout-title { color: #333333; margin-top: 0; font-size: 0.8889em; line-height: 1.375; font-weight: 500; } html.oldie .callout .callout-title { font-weight: normal; font-family: "Myriad Set Pro 500", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .callout .callout-title { font-family: "Apple TP 500", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .callout .callout-title { font-family: "PingHei 500", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .callout .callout-title { font-family: "MHei 500", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .callout .callout-title { font-family: "MHei 500", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .callout .callout-title { font-family: "Sukhumvit Set 500", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .callout .callout-title { font-family: "Yoon Gothic 500", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } .callout .callout-copy { color: #666666; font-size: 0.8889em; line-height: 1.375; font-weight: 400; margin-top: 5px; margin-bottom: 5px; } .callout-environment { background-color: #f6f6ee; border-color: transparent; margin: 1.1111em auto; padding: 1.6667em 4.4444em; } .callout-environment .callout-title { color: #31cec5; } .callout-environment .callout-copy { color: #333333; } @font-face { font-family: 'Apple Icons'; font-style: normal; font-weight: 100; src: url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Ultralight.eot"); src: url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Ultralight.eot?#iefix") format("embedded-opentype"), url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Ultralight.woff") format("woff"), url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Ultralight.ttf") format("truetype"); } @font-face { font-family: 'Apple Icons'; font-style: normal; font-weight: 200; src: url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Thin.eot"); src: url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Thin.eot?#iefix") format("embedded-opentype"), url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Thin.woff") format("woff"), url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Thin.ttf") format("truetype"); } @font-face { font-family: 'Apple Icons'; font-style: normal; font-weight: 400; src: url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Text.eot"); src: url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Text.eot?#iefix") format("embedded-opentype"), url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Text.woff") format("woff"), url("/v/itunes/home/f/ac-assets/fonts/AppleIcons-Text.ttf") format("truetype"); } .icon, .more, .breadcrumbs-list > li { behavior: url("/v/itunes/home/f/ac-assets/behaviors/icons.htc"); } .icon:before, .more:before, .breadcrumbs-list > li:before { display: none; padding-right: 0.3em; } .icon:after, .more:after, .breadcrumbs-list > li:after { display: inline-block; padding-left: 0.3em; } .icon .icon-htc, .more .icon-htc, .breadcrumbs-list > li .icon-htc { padding-left: 0.3em; padding-right: 0.3em; } .icon:before, .more:before, .breadcrumbs-list > li:before, .icon:after, .more:after, .breadcrumbs-list > li:after, .icon .icon-htc, .more .icon-htc, .breadcrumbs-list > li .icon-htc { color: inherit; font-family: 'Apple Icons'; font-style: normal; font-weight: inherit; font-size: 1em; line-height: 1; text-decoration: none; position: relative; z-index: 1; } .icon-before:before, .breadcrumbs-list > li:before { display: inline-block; position: relative; top: -0.125em; } .icon-before:after, .breadcrumbs-list > li:after { display: none; } .icon-ie-parent { text-decoration: none; } .no-touch .icon-ie-parent:hover, .no-js .icon-ie-parent:hover { text-decoration: none; } .no-touch .icon-ie-parent:hover .icon-ie-link, .no-js .icon-ie-parent:hover .icon-ie-link { text-decoration: underline; } .icon-apple:before, .icon-apple:after { content: ""; } .icon-more:before, .more:before, .icon-more:after, .more:after { content: ""; } .icon-chevronright:before, .icon-chevronright:after { content: ""; } .icon-chevronrightalt:before, .icon-chevronrightalt:after { content: ""; } .icon-chevrondown:before, .icon-chevrondown:after { content: ""; } .icon-chevrondownalt:before, .icon-chevrondownalt:after { content: ""; } .icon-chevronleft:before, .icon-chevronleft:after { content: ""; } .icon-chevronleftalt:before, .icon-chevronleftalt:after { content: ""; } .icon-chevronup:before, .icon-chevronup:after { content: ""; } .icon-chevronupalt:before, .icon-chevronupalt:after { content: ""; } .icon-close:before, .icon-close:after { content: ""; } .icon-closealt:before, .icon-closealt:after { content: ""; } .icon-closeinlinealt:before, .icon-closeinlinealt:after { content: ""; } .icon-download:before, .icon-download:after { content: ""; } .icon-downloadalt:before, .icon-downloadalt:after { content: ""; } .icon-external:before, .icon-external:after { content: ""; } .icon-info:before, .icon-info:after { content: ""; } .icon-list:before, .icon-list:after { content: ""; } .icon-paddledown:before, .icon-paddledown:after { content: ""; } .icon-paddleleft:before, .icon-paddleleft:after { content: ""; } .icon-paddleright:before, .breadcrumbs-list > li:before, .icon-paddleright:after, .breadcrumbs-list > li:after { content: ""; } .icon-paddleup:before, .icon-paddleup:after { content: ""; } .icon-pause:before, .icon-pause:after { content: ""; } .icon-play:before, .icon-play:after { content: ""; } .icon-playalt:before, .icon-playalt:after { content: ""; } .icon-replay:before, .icon-replay:after { content: ""; } .icon-zoom:before, .icon-zoom:after { content: ""; } .more-block { margin-top: 0.5em; } .list-square { list-style: square outside; } .list-circle { list-style: circle outside; } .list-disc { list-style: disc outside; } @media only screen and (max-width: 767px) { html.touch .localnav-wrapper { position: absolute; z-index: 150; overflow: hidden; top: 0; left: 0; height: 48px; margin-top: 48px; width: 100%; } html.touch .localnav-wrapper:after { content: ""; height: 1px; background: #d6d6d6; position: absolute; left: 0; top: 47px; width: 100%; z-index: -1; } } .localnav { border-bottom: 1px solid #d6d6d6; margin: 1em auto 0; max-width: 980px; } .localnav:before, .localnav:after { content: " "; display: table; } .localnav:after { clear: both; } html.oldie .localnav { zoom: 1; } @media only screen and (max-width: 767px) { html.touch .localnav { margin-top: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; width: 100%; padding: 0; } } @media only screen and (max-width: 767px) and (orientation: portrait) { html.touch .localnav { display: inline-block; } } .localnav-title { padding: 0; display: block; font-size: 32px; line-height: 1; float: left; } .localnav-title > a { margin: 0 0 0 0; color: #333333; display: block; text-decoration: none; } .localnav-title > a:hover { text-decoration: none; } @media only screen and (max-width: 767px) { html.touch .localnav-title > a { display: block; padding: 12px 0 11px; font-size: 17px; text-decoration: none; margin-bottom: 10px; font-weight: 400; margin: 0 15px; line-height: 1.3889; } } @media only screen and (max-width: 767px) { html.touch .localnav-title { display: inline-block; } } .localnav-links { float: right; margin: 8px 0 7px 0; } .localnav-links > li { float: left; list-style: none; margin-left: 30px; } @media only screen and (max-width: 767px) { html.touch .localnav-links > li { float: none; display: inline-block; text-align: center; margin-left: 14px; margin-right: 14px; } } .localnav-links .button { margin: 0; } @media only screen and (max-width: 767px) { html.touch .localnav-links { display: initial; float: none; width: auto; clear: both; } } .localnav-link-title { display: none; } @media only screen and (max-width: 767px) { html.touch .localnav-link-title { display: inline-block; } } .localnav-link { font-size: 13px; color: #333333; display: inline-block; white-space: nowrap; } .no-touch .localnav-link:hover, .no-js .localnav-link:hover { color: #0088cc; text-decoration: none; } .localnav-link.current { color: #999999; } .no-touch .localnav-link.current:hover, .no-js .localnav-link.current:hover { color: #999999; } @media only screen and (max-width: 767px) { html.touch .localnav-link.current { border-bottom: 1px solid #333333; color: #333333; } } @media only screen and (max-width: 767px) { html.touch .localnav-link { display: block; padding: 12px 0 10px; font-size: 17px; text-decoration: none; margin-bottom: 10px; } } .footer-wrapper { margin-left: auto; margin-right: auto; background: #f2f2f2; } .footer-wrapper:before, .footer-wrapper:after { content: " "; display: table; } .footer-wrapper:after { clear: both; } html.oldie .footer-wrapper { zoom: 1; } .footer-global { margin-left: auto; margin-right: auto; width: 980px; color: #999999; padding-top: 18px; padding-bottom: 18px; line-height: 1; font-size: 1em; } @media only screen and (max-width: 1023px) { .footer-global { width: 724px; } } @media only screen and (max-width: 767px) { html.touch .footer-global { width: 94.0741%; } } @media only screen and (max-width: 767px) { html.touch .footer-global { width: 90%; } } .footer-global:before, .footer-global:after { content: " "; display: table; } .footer-global:after { clear: both; } html.oldie .footer-global { zoom: 1; } .footer-global a { color: #666666; } .no-touch .footer-global a:hover, .no-js .footer-global a:hover { color: #333333; } @media only screen and (max-width: 767px) { html.touch .footer-global { width: auto; padding-left: 2.963%; padding-right: 2.963%; } } .footer-breadory { border-bottom: 1px solid #e3e3e3; margin-bottom: 22px; position: relative; line-height: 1.3889; } .footer-breadory:before, .footer-breadory:after { content: " "; display: table; } .footer-breadory:after { clear: both; } html.oldie .footer-breadory { zoom: 1; } @media only screen and (max-width: 767px) { html.touch .footer-breadory:after { content: ""; display: block; width: 100%; height: 10px; background: #f2f2f2; top: 32px; position: absolute; left: 0; z-index: 1; } } .breadcrumbs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; direction: rtl; } html.oldie .breadcrumbs { overflow: visible; } @media only screen and (max-width: 767px) and (orientation: portrait) { html.touch .breadcrumbs { display: inline-block; } } .breadcrumbs-list { color: #666666; padding-bottom: 16px; float: right; min-width: 100%; direction: ltr; } .breadcrumbs-list:before, .breadcrumbs-list:after { content: " "; display: table; } .breadcrumbs-list:after { clear: both; } html.oldie .breadcrumbs-list { zoom: 1; } .breadcrumbs-list > li:first-child { margin-left: 12px; } @media only screen and (max-width: 767px) { html.touch .breadcrumbs-list > li:first-child { margin-left: 32px; } html.touch .breadcrumbs-list > li:first-child:before { display: none; } } .breadcrumbs-list > li { font-size: 0.6667em; line-height: 2; font-weight: 400; display: inline-block; padding-left: 0.8em; white-space: nowrap; } @media only screen and (max-width: 767px) { html.touch .breadcrumbs-list > li { font-size: 0.7778em; line-height: 2; font-weight: 600; } } @media only screen and (max-width: 767px) { html.touch .breadcrumbs-list > li { font-size: 0.7778em; line-height: 2; font-weight: 600; } } html.oldie .breadcrumbs-list > li { display: block; float: left; margin-left: 14px; margin-top: 2px; } .breadcrumbs-list > li a { color: #666666; } .no-touch .breadcrumbs-list > li a:hover, .no-js .breadcrumbs-list > li a:hover { color: #333333; text-decoration: none; } .breadcrumbs-list > li:before { font-size: 1.3333em; line-height: 1; padding-right: 0.5em; top: 0.1em; color: #d6d6d6; font-weight: 400; } @media only screen and (max-width: 767px) { html.touch .breadcrumbs-list > li { padding-left: .2em; } } .breadcrumbs-home { color: #666666; background: #f2f2f2; display: block; font-size: 1.1111em; line-height: 1; height: 1em; position: absolute; top: 0.2222em; left: 0; z-index: 2; font-family: 'Apple Icons', 'Myriad Set Pro', 'Apple TP', 'MHei', 'PingHei', 'Sukhumvit Set', 'Yoon Gothic'; } html.oldie .breadcrumbs-home { line-height: 0.9; } .no-touch .breadcrumbs-home:hover, .no-js .breadcrumbs-home:hover { color: #333333; text-decoration: none; } @media only screen and (max-width: 767px) { html.touch .breadcrumbs-home { border-right: 1px solid #e3e3e3; padding-right: 0.5em; } } .breadcrumbs-home-label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .directorynav { position: relative; z-index: 1; margin-top: 0; margin-bottom: 18px; } .directorynav:before, .directorynav:after { content: " "; display: table; } .directorynav:after { clear: both; } html.oldie .directorynav { zoom: 1; } .directorynav > .column input { display: none; } .directorynav > .column li { line-height: 1; } .directorynav > .column a { font-size: 0.6667em; line-height: 1.4167; font-weight: 400; display: inline; color: #666666; white-space: normal; } @media only screen and (max-width: 767px) { html.touch .directorynav > .column a { font-size: 0.7778em; line-height: 2.2857; font-weight: 400; } } @media only screen and (max-width: 767px) { html.touch .directorynav > .column a { font-size: 0.7778em; line-height: 2.2857; font-weight: 400; } } .no-touch .directorynav > .column a:hover, .no-js .directorynav > .column a:hover { color: #333333; } .directorynav > .column h3 { margin: 0; padding: 0; font-size: 0.6667em; line-height: 1.4167; font-weight: 600; color: #333333; letter-spacing: 0; } html.oldie .directorynav > .column h3 { font-weight: normal; font-family: "Myriad Set Pro 600", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .directorynav > .column h3 { font-family: "Apple TP 600", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .directorynav > .column h3 { font-family: "PingHei 600", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .directorynav > .column h3 { font-family: "MHei 600", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .directorynav > .column h3 { font-family: "MHei 600", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .directorynav > .column h3 { font-family: "Sukhumvit Set 600", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .directorynav > .column h3 { font-family: "Yoon Gothic 600", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 767px) { html.touch .directorynav > .column h3 { font-size: 0.7778em; line-height: 2.2857; font-weight: 400; } } @media only screen and (max-width: 767px) { html.touch .directorynav > .column h3 { font-size: 0.7778em; line-height: 2.2857; font-weight: 400; } } @media only screen and (max-width: 767px) { html.touch .directorynav { margin-bottom: 0; } html.touch .directorynav > .column label { -webkit-tap-highlight-color: transparent; } html.touch .directorynav > .column h3 { border-top: 1px solid #e3e3e3; } html.touch .directorynav > .column h3, html.touch .directorynav > .column li a { position: relative; padding: 0.2222em 0.3333em; } html.touch .directorynav > .column h3:after { content: "+"; float: right; padding: 0.45em 0.4444em; font-size: 1.1111em; font-weight: 200; line-height: 1; -webkit-transform: rotate(0deg) scale(0.9); -ms-transform: rotate(0deg) scale(0.9); transform: rotate(0deg) scale(0.9); -webkit-transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } html.touch .directorynav > .column li { -webkit-transform: translateY(-120px); -ms-transform: translateY(-120px); transform: translateY(-120px); opacity: 0; -webkit-transition: opacity 0.3s ease-in, -webkit-transform 0.3s ease-out; transition: opacity 0.3s ease-in, transform 0.3s ease-out; } html.touch .directorynav > .column ul { text-indent: 1em; padding-bottom: 0; max-height: 0; overflow: hidden; padding: 0; } html.touch .directorynav > .column input:checked ~ ul { max-height: 100%; } html.touch .directorynav > .column input:checked ~ ul li { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } html.touch .directorynav > .column input:checked + label h3 { font-weight: 600; } html.touch .directorynav > .column input:checked + label h3:before { width: 100%; position: absolute; top: 100%; left: 0; content: ""; height: 1.1111em; z-index: 1; background: -webkit-linear-gradient(#f2f2f2 30%, rgba(242, 242, 242, 0) 80%); background: linear-gradient(#f2f2f2 30%, rgba(242, 242, 242, 0) 80%); } html.touch .directorynav > .column input:checked + label h3:after { -webkit-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } .directorynav-subcol + .directorynav-subcol { margin-top: 1.1667em; } @media only screen and (max-width: 767px) { html.touch .directorynav-subcol + .directorynav-subcol { margin-top: 0; } } .footer-shop, .footer-links, .footer-sosumi { font-size: 0.6667em; line-height: 1.3333; font-weight: 400; width: auto; float: left; margin-top: 0; margin-bottom: 0.6667em; margin-right: 0.5em; } p.footer-shop { margin-bottom: 0.6667em; } .footer-links { float: right; } .footer-education + .footer-links { margin-left: 0; float: left; } .footer-sosumi { width: 100%; } .footer-sosumi > p { margin-right: 0.5em; } .footer-sosumi > p, .footer-sosumi > ul, .footer-sosumi > ul > li { display: inline; margin-left: 0; margin-top: 0; } .footer-sosumi > p > a, .footer-sosumi > ul > a, .footer-sosumi > ul > li > a { padding: 0 0.5em 0 0.6667em; border-left: 1px solid #e3e3e3; white-space: nowrap; } .footer-sosumi > p:first-child > a, .footer-sosumi > ul:first-child > a, .footer-sosumi > ul > li:first-child > a { border-left: none; padding-left: 0; } .footer-links > li { display: inline-block; margin-left: 0; } html.oldie .footer-links > li { display: inline; zoom: 1; } .footer-links > li > a { padding: 0 0.5em 0 0; margin-right: 0.3333em; border-right: 1px solid #e3e3e3; white-space: nowrap; } .footer-links > li > a.choose { border-right: none; margin-right: 0; padding-right: 0; position: relative; padding-left: 16px; } html.oldie .footer-links > li > a.choose { display: inline; zoom: 1; } html.oldie .footer-links > li > a.choose { height: .8em; } .footer-links > li > a.choose > img { position: absolute; left: 0; top: -3px; } @media only screen and (max-width: 1023px) { .footer-links { float: left; margin-left: 0; } } @media only screen and (max-width: 767px) { html.touch .footer-shop span { display: block; } html.touch .footer-links { line-height: 2; } } html.oldie .footer-links { white-space: nowrap; } .footer-white { background: white; } .footer-white .footer-global { color: #999999; } .footer-white .footer-global a { color: #666666; } .no-touch .footer-white .footer-global a:hover, .no-js .footer-white .footer-global a:hover { color: #333333; } .footer-white .footer-breadory { border-color: #e3e3e3; } .footer-white .footer-breadory:after { background: white; } .footer-white .breadcrumbs { color: #666666; } .footer-white .breadcrumbs > li a { color: #666666; } .no-touch .footer-white .breadcrumbs > li a:hover, .no-js .footer-white .breadcrumbs > li a:hover { color: #333333; } .footer-white .breadcrumbs > li:before { color: #e3e3e3; } .footer-white .directorynav a { color: #666666; } .no-touch .footer-white .directorynav a:hover, .no-js .footer-white .directorynav a:hover { color: #333333; } .footer-white .directorynav h3 { color: #333333; } .footer-white .footer-links > li > a, .footer-white .footer-sosumi > p > a, .footer-white .footer-sosumi > ul > a, .footer-white .footer-sosumi > ul > li > a { border-color: #e3e3e3; } .footer-white .footer-links > li:first-child > a, .footer-white .footer-sosumi > p:first-child > a, .footer-white .footer-sosumi > ul:first-child > a, .footer-white .footer-sosumi > ul > li:first-child > a { border-left: none; } @media only screen and (max-width: 767px) { html.touch .footer-white .directorynav > .column { border-color: #e3e3e3; } html.touch .footer-white .directorynav > .column input:checked + label h3:before { background: -webkit-linear-gradient(white 30%, rgba(255, 255, 255, 0) 80%); background: linear-gradient(white 30%, rgba(255, 255, 255, 0) 80%); } } .footer-white .breadcrumbs-home { background: white; } @media only screen and (max-width: 767px) { html.touch .footer-white .breadcrumbs-home:after { background-image: -webkit-linear-gradient(left, white 10%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, white 10%, rgba(255, 255, 255, 0)); } } .buystrip { padding-top: 60px; padding-bottom: 60px; text-align: center; border-bottom: 1px solid #e3e3e3; margin-left: auto; margin-right: auto; width: 980px; } @media only screen and (max-width: 1023px) { .buystrip { width: 724px; } } @media only screen and (max-width: 767px) { html.touch .buystrip { width: 94.0741%; } } @media only screen and (max-width: 767px) { html.touch .buystrip { width: 90%; } } @media only screen and (max-width: 767px) { html.touch .buystrip { padding-top: 32px; padding-bottom: 40px; width: auto; padding-left: 2.963%; padding-right: 2.963%; } } .buystrip-hero { direction: rtl; margin-bottom: 0; } .buystrip-hero:before, .buystrip-hero:after { content: " "; display: table; } .buystrip-hero:after { clear: both; } html.oldie .buystrip-hero { zoom: 1; } .buystrip-product { vertical-align: middle; display: inline-block; } html.oldie .buystrip-product { display: inline; zoom: 1; } .buystrip-product-block { direction: ltr; text-align: left; padding-left: 20px; vertical-align: middle; display: inline-block; } html.oldie .buystrip-product-block { display: inline; zoom: 1; } @media only screen and (max-width: 767px) { html.touch .buystrip-product-block { text-align: center; padding-left: 0; margin-bottom: 1em; width: 100%; } } .buystrip-product-title { font-size: 1.9444em; line-height: 1.1429; font-weight: 200; padding-bottom: 8px; } html.oldie .buystrip-product-title { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .buystrip-product-title { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .buystrip-product-title { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .buystrip-product-title { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .buystrip-product-title { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .buystrip-product-title { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .buystrip-product-title { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 767px) { html.touch .buystrip-product-title { font-size: 1.6667em; line-height: 1.1667; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .buystrip-product-title { padding-bottom: 2px; } } .buystrip-product-copy { font-size: 1em; line-height: 1.5556; font-weight: 400; margin: 0 0 0 0; } @media only screen and (max-width: 767px) { html.touch .buystrip-product-copy { font-size: 0.8889em; line-height: 1.5; font-weight: 400; } } .buystrip-blocks { position: relative; z-index: 1; display: table; width: 100%; } .buystrip-blocks:before, .buystrip-blocks:after { content: " "; display: table; } .buystrip-blocks:after { clear: both; } html.oldie .buystrip-blocks { zoom: 1; } .buystrip-blocks > .column { display: table-cell; float: none; vertical-align: top; } html.oldie .buystrip-blocks > .column { float: left; } @media only screen and (max-width: 1023px) { .buystrip-blocks { display: initial; width: auto; } .buystrip-blocks > .column { display: block; float: left; } } @media only screen and (max-width: 767px) { html.touch .buystrip-blocks { margin-top: 40px; } } .buystrip-block { text-align: center; margin-top: 80px; margin-bottom: 0; width: 208px; margin-left: auto; margin-right: auto; padding-bottom: 1.7778em; } @media only screen and (max-width: 767px) { html.touch .buystrip-block { margin-top: 40px; } } .buystrip-block-icon { margin-left: auto; margin-right: auto; } .buystrip-block-title { font-size: 1.3333em; line-height: 1.3333; font-weight: 200; } html.oldie .buystrip-block-title { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .buystrip-block-title { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .buystrip-block-title { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .buystrip-block-title { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .buystrip-block-title { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .buystrip-block-title { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .buystrip-block-title { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } .buystrip-block-copy { font-size: 0.8889em; line-height: 1.5; font-weight: 400; color: #666666; margin-top: 0.1111em; } .buystrip-block-copy:first-child { margin-top: 0; } .buystrip-block-copy.block-link { margin-top: 0.5em; position: absolute; bottom: 0; left: 0; right: 0; } .buystrip-block-call .block-link { color: #333333; } a.buystrip-block-line:before { content: ""; display: block; position: absolute; left: 0; top: 80px; bottom: 0; border-left: 1px solid #e3e3e3; } @media only screen and (max-width: 1023px) { a.buystrip-block-line:before { border: none; } } .sosumi { color: #999999; } .sosumi a { color: #666666; } .no-touch .sosumi a:hover, .no-js .sosumi a:hover { text-decoration: underline; } .sosumi ol { margin: 0; padding-right: 15px; padding-left: 15px; } .sosumi ul { list-style: none; margin: 0; } .sosumi li { padding-bottom: 5px; } .sosumi p, .sosumi li { font-size: 0.6667em; line-height: 1.3333; font-weight: 400; } .sosumi small { font-size: 1em; } .footer-wrapper .sosumi { margin-left: auto; margin-right: auto; width: 980px; padding: 16px 0 11px 0; border-bottom: 1px solid #e3e3e3; } @media only screen and (max-width: 1023px) { .footer-wrapper .sosumi { width: 724px; } } @media only screen and (max-width: 767px) { html.touch .footer-wrapper .sosumi { width: 94.0741%; } } @media only screen and (max-width: 767px) { html.touch .footer-wrapper .sosumi { width: 90%; } } @media only screen and (max-width: 767px) { html.touch .footer-wrapper .sosumi { width: auto; padding-left: 2.963%; padding-right: 2.963%; } } .thumbnail { margin: 0; position: relative; display: inline-block; vertical-align: top; } html.oldie .thumbnail { display: inline; zoom: 1; } .thumbnail > img { z-index: 1; display: block; border-radius: 4px; } .thumbnail .thumbnail-play { position: absolute; display: block; z-index: 1; width: 38px; height: 38px; top: 5px; left: 21px; font-size: 28px; font-weight: 100; font-family: 'Apple Icons'; color: white; text-align: center; line-height: 1.2; behavior: url("/v/itunes/home/f/ac-assets/behaviors/icons.htc"); } .thumbnail .thumbnail-play::after { content: "\f020"; } .block:hover .thumbnail, .thumbnail:hover, .thumbnail:focus { text-decoration: none; } .block:hover .thumbnail .thumbnail-play, .thumbnail:hover .thumbnail-play, .thumbnail:focus .thumbnail-play { color: #0088cc; } .thumbnail + .more { display: block; } .thumbnav { margin: 0; text-align: center; } .thumbnav ul { list-style: none; display: inline-block; } html.oldie .thumbnav ul { display: inline; zoom: 1; } .thumbnav li { float: left; list-style: none; margin: 0 4px; } .thumbnav-thumbnail { border-width: 1px; border-style: solid; border-color: transparent; border-radius: 50%; display: inline-block; overflow: hidden; padding: 6px; } html.oldie .thumbnav-thumbnail { display: inline; zoom: 1; } .no-touch .thumbnav-thumbnail:hover, .no-js .thumbnav-thumbnail:hover { text-decoration: none; border-color: #d6d6d6; } .thumbnav-thumbnail.active, .thumbnav-thumbnail.current { border-color: #0088cc; cursor: default; } .no-touch .thumbnav-thumbnail.active:hover, .no-js .thumbnav-thumbnail.active:hover, .no-touch .thumbnav-thumbnail.current:hover, .no-js .thumbnav-thumbnail.current:hover { border-color: #0088cc; } .thumbnav-thumbnail > img { display: block; border-radius: 50%; } .thumbnav-rect li { margin: 0 4px; } .thumbnav-rect .thumbnav-thumbnail { border-width: 1px; border-style: solid; border-color: #d6d6d6; border-radius: 4px; padding: 0; } .no-touch .thumbnav-rect .thumbnav-thumbnail:hover, .no-js .thumbnav-rect .thumbnav-thumbnail:hover { border-color: #999999; } .thumbnav-rect .thumbnav-thumbnail.active, .thumbnav-rect .thumbnav-thumbnail.current { border-color: #0088cc; } .no-touch .thumbnav-rect .thumbnav-thumbnail.active:hover, .no-js .thumbnav-rect .thumbnav-thumbnail.active:hover, .no-touch .thumbnav-rect .thumbnav-thumbnail.current:hover, .no-js .thumbnav-rect .thumbnav-thumbnail.current:hover { border-color: #0088cc; } .thumbnav-rect .thumbnav-thumbnail > img { border-radius: 0; } @media only screen and (max-width: 1023px) { #globalheader { min-width: 100%; } #globalheader .gh-content { width: 724px; } #globalheader .gh-nav-list { width: 748px; margin-left: -12px; margin-right: -12px; } #globalheader .gh-tab-link { background-size: auto 18px; } #globalheader .gh-tab-search.enhance, #globalheader .gh-tab-search.enhance.active { width: auto; margin: 0; } #globalheader .gh-tab-search.enhance .gh-search, #globalheader .gh-tab-search.enhance.active .gh-search { display: none; } #globalheader .gh-tab-search.enhance a.gh-search-magnify, #globalheader .gh-tab-search.enhance.active a.gh-search-magnify { display: block; } } @media only screen and (max-width: 766px) { html.touch #globalheader .gh-content { width: 100%; } } #globalheader { margin-bottom: 0; } html body.itunes div.localnav-wrapper { background-color: rgba(255, 255, 255, 0.95); border-bottom: solid 1px #d6d6d6; position: -webkit-sticky; position: sticky; margin-top: 0; top: 0; z-index: 9000; } html body.itunes div.localnav-wrapper .localnav { border: none; padding: 13px 0 0 0; margin-top: 0; } @media only screen and (max-width: 767px) { html.touch body.itunes div.localnav-wrapper { border: none; } html.touch body.itunes div.localnav-wrapper .localnav { padding: 0; } } html { width: 100%; height: 100%; } html.oldie { overflow-x: hidden; } body { min-height: 100%; background-color: #f2f2f2; } .page-overview { min-width: 1024px; } .page-overview .section { padding: 100px 0; overflow: hidden; } .page-overview .section:before, .page-overview .section:after { content: " "; display: table; } .page-overview .section:after { clear: both; } html.oldie .page-overview .section { zoom: 1; } .page-overview .section p + .more { margin-top: .5em; } .page-overview .section h1, .page-overview .section h2, .page-overview .section h3 { margin: 0; } .page-overview .section h2 { font-size: 2.6667em; line-height: 1; font-weight: 200; } html.oldie .page-overview .section h2 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .page-overview .section h2 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .page-overview .section h2 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .page-overview .section h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .page-overview .section h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .page-overview .section h2 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .page-overview .section h2 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { .page-overview .section h2 { font-size: 2em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section h2 { font-size: 1.7778em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section h2 { font-size: 1.7778em; line-height: 1; font-weight: 200; } } .no-sticky .page-overview .localnav-wrapper { position: relative; } .page-overview .subhead { color: #999999; } .page-overview .section-content { margin-left: auto; margin-right: auto; width: 980px; } @media only screen and (max-width: 1023px) { .page-overview .section-content { width: 724px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-content { width: 94.0741%; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-content { width: 90%; } } .page-overview .more { display: block; } .page-overview .more + figure { margin: 58px auto 0; } .page-overview .section-showcase { text-align: center; padding-top: 64px; } .page-overview .section-showcase h1 { font-size: 3.3611em; line-height: 1; font-weight: 200; } html.oldie .page-overview .section-showcase h1 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .page-overview .section-showcase h1 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .page-overview .section-showcase h1 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .page-overview .section-showcase h1 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .page-overview .section-showcase h1 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .page-overview .section-showcase h1 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .page-overview .section-showcase h1 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { .page-overview .section-showcase h1 { font-size: 2.5556em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-showcase h1 { font-size: 1.7778em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-showcase h1 { font-size: 1.7778em; line-height: 1; font-weight: 200; } } .page-overview .section-showcase p { padding: 0 146px; margin-bottom: 0; } .page-overview .section-showcase .showcase-hero { background-repeat: no-repeat; margin: 44px auto 0; } @media only screen and (max-width: 1023px) { .page-overview .section-showcase .showcase-hero { background-size: 676px 355px; height: 355px; width: 676px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-showcase .showcase-hero { background-size: 301px 158px; height: 158px; width: 301px; } } .page-overview .section-playground { background-color: white; text-align: center; padding-top: 86px; } .page-overview .section-playground p { padding: 0 100px; } .page-overview .section-playground .playground-hero { background-repeat: no-repeat; margin-right: -100px; margin-left: 70px; } @media only screen and (max-width: 1023px) { .page-overview .section-playground .playground-hero { background-size: 690px 395px; height: 395px; width: 690px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-playground .playground-hero { background-size: 329px 188px; height: 188px; width: 329px; } } .page-overview .section-itunes-radio { background-color: white; padding: 0; } .page-overview .section-itunes-radio h2 { font-size: 1.7778em; line-height: 1; font-weight: 200; } html.oldie .page-overview .section-itunes-radio h2 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .page-overview .section-itunes-radio h2 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .page-overview .section-itunes-radio h2 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .page-overview .section-itunes-radio h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .page-overview .section-itunes-radio h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .page-overview .section-itunes-radio h2 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .page-overview .section-itunes-radio h2 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { .page-overview .section-itunes-radio h2 { font-size: 1.5278em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-itunes-radio h2 { font-size: 1.3333em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-itunes-radio h2 { font-size: 1.3333em; line-height: 1; font-weight: 200; } } .page-overview .section-itunes-radio p { padding-right: 40px; } .page-overview .section-itunes-radio .callout { padding: 50px 75px; margin: 0 auto; } .page-overview .section-itunes-radio .callout:before, .page-overview .section-itunes-radio .callout:after { content: " "; display: table; } .page-overview .section-itunes-radio .callout:after { clear: both; } html.oldie .page-overview .section-itunes-radio .callout { zoom: 1; } .page-overview .section-itunes-radio .radio-hero { background-repeat: no-repeat; float: right; margin: 0 -76px 0 0; } @media only screen and (max-width: 1023px) { .page-overview .section-itunes-radio .radio-hero { background-size: 284px 290px; height: 290px; width: 284px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-itunes-radio .radio-hero { background-size: 255px 148px; height: 148px; width: 255px; } } .page-overview .section-collection { background-color: white; text-align: center; } .page-overview .section-collection h2 { padding: 0 185px; } .page-overview .section-collection p { padding: 0 80px; } .page-overview .section-collection .collection-hero { background-repeat: no-repeat; } @media only screen and (max-width: 1023px) { .page-overview .section-collection .collection-hero { background-size: 695px 351px; height: 351px; width: 695px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-collection .collection-hero { background-size: 287px 145px; height: 145px; width: 287px; } } .page-overview .section-gifts .copy > * { margin-left: 60px; } .page-overview .section-gifts h2 { font-size: 1.7778em; line-height: 1; font-weight: 200; } html.oldie .page-overview .section-gifts h2 { font-weight: normal; font-family: "Myriad Set Pro 200", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .page-overview .section-gifts h2 { font-family: "Apple TP 200", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .page-overview .section-gifts h2 { font-family: "PingHei 200", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .page-overview .section-gifts h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .page-overview .section-gifts h2 { font-family: "MHei 200", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .page-overview .section-gifts h2 { font-family: "Sukhumvit Set 200", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .page-overview .section-gifts h2 { font-family: "Yoon Gothic 200", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { .page-overview .section-gifts h2 { font-size: 1.5278em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-gifts h2 { font-size: 1.3333em; line-height: 1; font-weight: 200; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-gifts h2 { font-size: 1.3333em; line-height: 1; font-weight: 200; } } .page-overview .section-gifts .gifts-hero { background-repeat: no-repeat; margin: -105px 0 -300px -125px; } @media only screen and (max-width: 1023px) { .page-overview .section-gifts .gifts-hero { background-size: 400px 334px; height: 334px; width: 400px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-gifts .gifts-hero { background-size: 300px 251px; height: 251px; width: 300px; } } .page-overview .section-social { padding-top: 127px; } @media only screen and (max-width: 1023px) { .page-overview { min-width: 768px; } .page-overview .localnav { width: 724px; min-width: 0; } .page-overview .section { padding: 86px 0; } .page-overview .more + figure { margin: 50px auto 0; } .page-overview .section-showcase p { padding: 0 80px; } .page-overview .section-playground { padding-bottom: 80px; } .page-overview .section-playground p { padding: 0 50px; } .page-overview .section-playground .playground-hero { margin: 58px -70px 0 60px; } .page-overview .section-itunes-radio { padding: 0; } .page-overview .section-itunes-radio .large-7 { padding-top: 0; } .page-overview .section-itunes-radio .callout { padding: 30px; } .page-overview .section-itunes-radio p { margin-right: 10px; } .page-overview .section-itunes-radio .radio-hero { float: right; margin: 20px -31px 0 0; } .page-overview .section-collection h2 { padding: 0 140px; } .page-overview .section-collection p { padding: 0 30px; } .page-overview .section-gifts { padding: 50px 0; } .page-overview .section-gifts .gifts-hero { margin: -20px 0 -30px -40px; } .page-overview .section-gifts .copy > * { margin-left: 10px; } .page-overview .section-gifts .copy { width: 341px; } } @media only screen and (max-width: 767px) { html.touch .page-overview { min-width: 0; } html.touch .page-overview .localnav { margin-left: 0; margin-right: 0; } html.touch .page-overview .section { padding: 40px 0; } html.touch .page-overview .more + figure { margin: 25px auto 0; } html.touch .page-overview .section-showcase { padding: 75px 0 40px; } html.touch .page-overview .section-showcase p { padding: 0 6px; } html.touch .page-overview .section-showcase .button { margin: 1em 0 2em; } html.touch .page-overview .section-playground { text-align: left; } html.touch .page-overview .section-playground p { padding: 0; } html.touch .page-overview .section-playground .playground-hero { margin: 25px auto 0; } html.touch .page-overview .section-itunes-radio { padding: 0; } html.touch .page-overview .section-itunes-radio .callout { padding: 20px; } html.touch .page-overview .section-itunes-radio p { padding-right: 0; margin-right: 0; } html.touch .page-overview .section-itunes-radio .radio-hero { float: none; margin: 25px auto 0; } html.touch .page-overview .section-collection { text-align: left; } html.touch .page-overview .section-collection h2 { padding: 0; } html.touch .page-overview .section-collection p { padding: 0 10px 0 0; } html.touch .page-overview .section-gifts .copy { width: auto; } html.touch .page-overview .section-gifts .gifts-hero { position: relative; left: 50%; margin: -20px 0 -50px -175px; } html.touch .page-overview .section-gifts .copy > * { margin-left: 0; } } .page-overview .section-social { background-color: white; overflow: visible; position: relative; z-index: 2; } .page-overview .section-social .social-block { margin: 0 32px; position: relative; } .page-overview .section-social .social-block:before, .page-overview .section-social .social-block:after { content: " "; display: table; } .page-overview .section-social .social-block:after { clear: both; } html.oldie .page-overview .section-social .social-block { zoom: 1; } .page-overview .section-social .social-block h3 { position: absolute; bottom: 100%; left: 0; right: -10px; padding-bottom: .5em; font-size: 1em; line-height: 1; font-weight: 500; } html.oldie .page-overview .section-social .social-block h3 { font-weight: normal; font-family: "Myriad Set Pro 500", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ja-JP] .page-overview .section-social .social-block h3 { font-family: "Apple TP 500", "Apple TP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-CN] .page-overview .section-social .social-block h3 { font-family: "PingHei 500", "PingHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-TW] .page-overview .section-social .social-block h3 { font-family: "MHei 500", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=zh-HK] .page-overview .section-social .social-block h3 { font-family: "MHei 500", "MHei", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=th-TH] .page-overview .section-social .social-block h3 { font-family: "Sukhumvit Set 500", "Sukhumvit Set", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; } html.oldie[lang=ko-KR] .page-overview .section-social .social-block h3 { font-family: "Yoon Gothic 500", "Yoon Gothic", "Helvetica Neue", "Helvetica", "Dotum", "Arial", "Verdana", "sans-serif"; } @media only screen and (max-width: 1023px) { .page-overview .section-social .social-block h3 { font-size: 1em; line-height: 1; font-weight: 500; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-social .social-block h3 { font-size: 1em; line-height: 1; font-weight: 500; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-social .social-block h3 { font-size: 1em; line-height: 1; font-weight: 500; } } .page-overview .section-social .social-block .app-icon { float: left; margin: 0 5px 0 -1px; width: 54px; height: 54px; border-radius: 15px; } .page-overview .section-social .social-block p { font-size: 0.7778em; line-height: 1.3571; font-weight: 400; margin: 0 65px; } @media only screen and (max-width: 1023px) { .page-overview .section-social .social-block p { font-size: 0.7778em; line-height: 1.3571; font-weight: 400; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-social .social-block p { font-size: 0.7778em; line-height: 1.3571; font-weight: 400; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-social .social-block p { font-size: 0.7778em; line-height: 1.3571; font-weight: 400; } } .page-overview .section-social .social-block .fb-wrapper { position: relative; z-index: 2; margin-left: 10px; width: 50px; height: 64px; float: right; } .page-overview .section-social .app-store { position: relative; z-index: 3; } .page-overview .section-social .app-store .app-icon { background-repeat: no-repeat; } .page-overview .section-social .itunes-facebook { position: relative; z-index: 2; } .page-overview .section-social .itunes-facebook .app-icon { background-repeat: no-repeat; } .page-overview .section-social .itunes-twitter .app-icon { background-repeat: no-repeat; } .page-overview .section-social .itunes-twitter p { margin-right: 0; } @media only screen and (max-width: 1023px) { .page-overview .section-social .social-block { margin: 0 20px; } .page-overview .section-social .social-block .fb-wrapper { float: left; margin: -10px 0 0 15px; } .page-overview .section-social .social-block h3 { position: relative; clear: both; bottom: auto; right: auto; padding-top: 15px; } .page-overview .section-social .social-block p { margin: 0; } .page-overview .section-social .app-store h3 { padding-right: 30px; } } @media only screen and (max-width: 767px) { html.touch .page-overview .section-social .social-block { padding: 27px 0; } html.touch .page-overview .section-social .social-block .fb-wrapper { margin: 0 0 -10px 10px; float: right; } html.touch .page-overview .section-social .social-block h3 { clear: none; padding: 0 0 3px; } html.touch .page-overview .section-social .social-block h3, html.touch .page-overview .section-social .social-block p { margin: 0 65px; } html.touch .page-overview .section-social .app-store .social-block { padding-top: 0; } html.touch .page-overview .section-social .itunes-facebook .social-block { border-top: solid 1px #d6d6d6; border-bottom: solid 1px #d6d6d6; } html.touch .page-overview .section-social .itunes-twitter .social-block { padding-bottom: 0; } html.touch .page-overview .section-social .itunes-twitter .social-block h3, html.touch .page-overview .section-social .itunes-twitter .social-block p { margin-right: 0; } }