@ptcwebops/ptcw-design 2.2.0 → 2.2.2

package/dist/collection/components/organism-bundles/bundle-example/bundle-example.js

@@ -1,58 +1,58 @@
-import { Host, h } from '@stencil/core';
-export class BundleExample {
-  constructor() {
-    this.isLoading = true;
-    this.picWidth = undefined;
-    this.picHeight = undefined;
-  }
-  handleWindowResize() {
-    this.updatePictureSize();
-  }
-  // Replace it with search logic
-  componentDidLoad() {
-    setTimeout(() => {
-      this.isLoading = false;
-    }, 3000);
-    this.updatePictureSize();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "is-grid has-col-2 has-col-2-sm has-col-3-md has-col-4-lg has-col-5-xl has-col-gap-md has-row-gap-md" }, h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))))));
-  }
-  updatePictureSize() {
-    const pictureComponents = this.el.shadowRoot.querySelectorAll('ptc-picture');
-    for (let i = 0; i < pictureComponents.length; i++) {
-      const pictureComponent = pictureComponents[i];
-      pictureComponent.isFullWidth = true;
-      pictureComponent.styles = ':host{padding-bottom: 56.25%;overflow: hidden;margin:0;padding-top:56.25%;position: relative;} :host img{position:absolute;width:100%;height:100%;object-fit:cover;top:50%;left:50%;transform:translate(-50%,-50%);}';
-    }
-  }
-  static get is() { return "bundle-example"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["bundle-example.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["bundle-example.css"]
-    };
-  }
-  static get states() {
-    return {
-      "isLoading": {},
-      "picWidth": {},
-      "picHeight": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleWindowResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class BundleExample {
+  constructor() {
+    this.isLoading = true;
+    this.picWidth = undefined;
+    this.picHeight = undefined;
+  }
+  handleWindowResize() {
+    this.updatePictureSize();
+  }
+  // Replace it with search logic
+  componentDidLoad() {
+    setTimeout(() => {
+      this.isLoading = false;
+    }, 3000);
+    this.updatePictureSize();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "is-grid has-col-2 has-col-2-sm has-col-3-md has-col-4-lg has-col-5-xl has-col-gap-md has-row-gap-md" }, h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))))));
+  }
+  updatePictureSize() {
+    const pictureComponents = this.el.shadowRoot.querySelectorAll('ptc-picture');
+    for (let i = 0; i < pictureComponents.length; i++) {
+      const pictureComponent = pictureComponents[i];
+      pictureComponent.isFullWidth = true;
+      pictureComponent.styles = ':host{padding-bottom: 56.25%;overflow: hidden;margin:0;padding-top:56.25%;position: relative;} :host img{position:absolute;width:100%;height:100%;object-fit:cover;top:50%;left:50%;transform:translate(-50%,-50%);}';
+    }
+  }
+  static get is() { return "bundle-example"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["bundle-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["bundle-example.css"]
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {},
+      "picWidth": {},
+      "picHeight": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css

@@ -1,218 +1,218 @@
-a {
-    font-family: var(--ptc-font-latin);
-    font-style: var(--ptc-font-style-normal);
-    text-decoration-line: underline;
-    color: var(--color-blue-07);
-    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
-    font-weight: var(--ptc-font-weight-bold);
-
-    &:visited {
-        color: var(--color-blue-10);
-    }
-
-    &:active,
-    &:visited:active {
-        // pressed
-        color: var(--color-blue-09);
-    }
-
-    &:hover,
-    &:visited:hover {
-        color: var(--color-blue-08);
-    }
-
-    &.disabled {
-        color: var(--color-gray-04) !important;
-        cursor: not-allowed;
-    }
-}
-
-.light-links,.background-grey-10,.background-plm-grey  {
-    a, a.light-link {
-        color: var(--color-blue-04);
-
-        &:visited {
-            color: var(--color-blue-06);
-        }
-
-        &:active,
-        &:visited:active {
-            // pressed
-            color: var(--color-blue-07);
-        }
-
-        &:hover,
-        &:visited:hover {
-            color: var(--color-blue-05);
-        }
-
-        &.disabled {
-            color: var(--color-gray-04) !important;
-            cursor: not-allowed;
-        }
-    }
-}
-
-.ptc-link {
-    color: var(--color-gray-10);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--color-green-06);
-    text-underline-offset: 5px;
-    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
-
-    &:hover {
-        color: var(--color-green-06);
-    }
-
-    &:visited {
-        color: var(--color-gray-10);
-    }
-
-    &:active,
-    &:visited:active {
-        // pressed
-        color: var(--color-green-06);
-    }
-
-    &:hover,
-    &:visited:hover {
-        color: var(--color-green-06);
-    }
-}
-
-.ptc-link-dark {
-    color: var(--color-white);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--color-green-06);
-    text-underline-offset: 5px;
-    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
-
-    &:hover {
-        color: var(--color-green-06);
-    }
-
-    &:visited {
-        color: var(--color-white);
-    }
-
-    &:active,
-    &:visited:active {
-        // pressed
-        color: var(--color-green-06);
-    }
-
-    &:hover,
-    &:visited:hover {
-        color: var(--color-green-06);
-    }
-
-}
- :host {
-	 display: block;
-	 box-sizing: border-box;
-}
- :host ptc-background-video {
-	 height: 240px;
-}
- @media (min-width: 480px) {
-	 :host ptc-background-video {
-		 height: 320px;
-	}
-}
- @media (min-width: 768px) {
-	 :host ptc-background-video {
-		 height: 450px;
-	}
-}
- @media (min-width: 992px) {
-	 :host ptc-background-video {
-		 height: 500px;
-	}
-}
- :host .fl-header {
-	 cursor: pointer;
-}
- :host .non-mobile-wrapper {
-	 box-sizing: border-box;
-}
- @media (min-width: 992px) {
-	 :host .non-mobile-wrapper {
-		 max-width: 1078px;
-		 margin: -75px auto 0 auto;
-		 display: flex;
-		 align-items: center;
-		 width: 100%;
-		 background: var(--color-white);
-		 box-shadow: var(--ptc-shadow-small);
-		 padding: 24px 32px;
-		 z-index: 1;
-		 position: relative;
-		 min-height: 350px;
-	}
-}
- @media (min-width: 992px) {
-	 :host .non-mobile-wrapper .header-list-wrap {
-		 padding-right: 16px;
-		 margin-right: 64px;
-		 min-width: 270px;
-		 max-width: 270px;
-		 box-sizing: border-box;
-		 display: flex;
-		 flex-direction: column;
-		 align-items: baseline;
-	}
-	 :host .non-mobile-wrapper .header-list-wrap::after {
-		 content: "";
-		 width: 1px;
-		 height: calc(100% - 48px);
-		 background-color: var(--color-gray-05);
-		 position: absolute;
-		 left: 297px;
-		 top: 24px;
-		 bottom: 24px;
-	}
-}
- @media (min-width: 992px) {
-	 :host .non-mobile-wrapper .content-wrap {
-		 padding-right: 72px;
-	}
-}
- :host .non-mobile-wrapper .fl-header {
-	 border-radius: 4px;
-	 margin: 12px 0;
-	 padding: 4px 8px;
-}
- :host .non-mobile-wrapper .fl-header:hover {
-	 background-color: var(--color-gray-02);
-}
- :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {
-	 background-color: var(--color-gray-03);
-}
- :host .mobile-wrapper .acc-item {
-	 border-bottom: 1px solid var(--color-gray-03);
-	 padding: 14px 30px;
-}
- :host .mobile-wrapper .acc-item fl-tab-header {
-	 padding-left: 34px;
-	 position: relative;
-}
- :host .mobile-wrapper .acc-item fl-tab-header::before {
-	 content: '';
-	 display: inline-block;
-	 width: 16px;
-	 height: 16px;
-	 background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_91_790)"><path d="M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z" fill="%23006E09"/></g><defs><clipPath id="clip0_91_790"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
-	 vertical-align: middle;
-	 position: absolute;
-	 left: 0;
-	 top: 4.5px;
-}
- :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {
-	 background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_113_741)"><path d="M0 7.05566V10.8637H13.913V7.05566H0Z" fill="%23323B42"/></g><defs><clipPath id="clip0_113_741"><rect width="13.913" height="17.92" fill="white"/></clipPath></defs></svg>');
-}
- :host .mobile-wrapper .acc-item fl-tab-content {
-	 padding-left: 34px;
-	 padding-bottom: 18px;
-}
+a {
+    font-family: var(--ptc-font-latin);
+    font-style: var(--ptc-font-style-normal);
+    text-decoration-line: underline;
+    color: var(--color-blue-07);
+    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
+    font-weight: var(--ptc-font-weight-bold);
+
+    &:visited {
+        color: var(--color-blue-10);
+    }
+
+    &:active,
+    &:visited:active {
+        // pressed
+        color: var(--color-blue-09);
+    }
+
+    &:hover,
+    &:visited:hover {
+        color: var(--color-blue-08);
+    }
+
+    &.disabled {
+        color: var(--color-gray-04) !important;
+        cursor: not-allowed;
+    }
+}
+
+.light-links,.background-grey-10,.background-plm-grey  {
+    a, a.light-link {
+        color: var(--color-blue-04);
+
+        &:visited {
+            color: var(--color-blue-06);
+        }
+
+        &:active,
+        &:visited:active {
+            // pressed
+            color: var(--color-blue-07);
+        }
+
+        &:hover,
+        &:visited:hover {
+            color: var(--color-blue-05);
+        }
+
+        &.disabled {
+            color: var(--color-gray-04) !important;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.ptc-link {
+    color: var(--color-gray-10);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--color-green-06);
+    text-underline-offset: 5px;
+    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+
+    &:hover {
+        color: var(--color-green-06);
+    }
+
+    &:visited {
+        color: var(--color-gray-10);
+    }
+
+    &:active,
+    &:visited:active {
+        // pressed
+        color: var(--color-green-06);
+    }
+
+    &:hover,
+    &:visited:hover {
+        color: var(--color-green-06);
+    }
+}
+
+.ptc-link-dark {
+    color: var(--color-white);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--color-green-06);
+    text-underline-offset: 5px;
+    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+
+    &:hover {
+        color: var(--color-green-06);
+    }
+
+    &:visited {
+        color: var(--color-white);
+    }
+
+    &:active,
+    &:visited:active {
+        // pressed
+        color: var(--color-green-06);
+    }
+
+    &:hover,
+    &:visited:hover {
+        color: var(--color-green-06);
+    }
+
+}
+ :host {
+	 display: block;
+	 box-sizing: border-box;
+}
+ :host ptc-background-video {
+	 height: 240px;
+}
+ @media (min-width: 480px) {
+	 :host ptc-background-video {
+		 height: 320px;
+	}
+}
+ @media (min-width: 768px) {
+	 :host ptc-background-video {
+		 height: 450px;
+	}
+}
+ @media (min-width: 992px) {
+	 :host ptc-background-video {
+		 height: 500px;
+	}
+}
+ :host .fl-header {
+	 cursor: pointer;
+}
+ :host .non-mobile-wrapper {
+	 box-sizing: border-box;
+}
+ @media (min-width: 992px) {
+	 :host .non-mobile-wrapper {
+		 max-width: 1078px;
+		 margin: -75px auto 0 auto;
+		 display: flex;
+		 align-items: center;
+		 width: 100%;
+		 background: var(--color-white);
+		 box-shadow: var(--ptc-shadow-small);
+		 padding: 24px 32px;
+		 z-index: 1;
+		 position: relative;
+		 min-height: 350px;
+	}
+}
+ @media (min-width: 992px) {
+	 :host .non-mobile-wrapper .header-list-wrap {
+		 padding-right: 16px;
+		 margin-right: 64px;
+		 min-width: 270px;
+		 max-width: 270px;
+		 box-sizing: border-box;
+		 display: flex;
+		 flex-direction: column;
+		 align-items: baseline;
+	}
+	 :host .non-mobile-wrapper .header-list-wrap::after {
+		 content: "";
+		 width: 1px;
+		 height: calc(100% - 48px);
+		 background-color: var(--color-gray-05);
+		 position: absolute;
+		 left: 297px;
+		 top: 24px;
+		 bottom: 24px;
+	}
+}
+ @media (min-width: 992px) {
+	 :host .non-mobile-wrapper .content-wrap {
+		 padding-right: 72px;
+	}
+}
+ :host .non-mobile-wrapper .fl-header {
+	 border-radius: 4px;
+	 margin: 12px 0;
+	 padding: 4px 8px;
+}
+ :host .non-mobile-wrapper .fl-header:hover {
+	 background-color: var(--color-gray-02);
+}
+ :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {
+	 background-color: var(--color-gray-03);
+}
+ :host .mobile-wrapper .acc-item {
+	 border-bottom: 1px solid var(--color-gray-03);
+	 padding: 14px 30px;
+}
+ :host .mobile-wrapper .acc-item fl-tab-header {
+	 padding-left: 34px;
+	 position: relative;
+}
+ :host .mobile-wrapper .acc-item fl-tab-header::before {
+	 content: '';
+	 display: inline-block;
+	 width: 16px;
+	 height: 16px;
+	 background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_91_790)"><path d="M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z" fill="%23006E09"/></g><defs><clipPath id="clip0_91_790"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
+	 vertical-align: middle;
+	 position: absolute;
+	 left: 0;
+	 top: 4.5px;
+}
+ :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {
+	 background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_113_741)"><path d="M0 7.05566V10.8637H13.913V7.05566H0Z" fill="%23323B42"/></g><defs><clipPath id="clip0_113_741"><rect width="13.913" height="17.92" fill="white"/></clipPath></defs></svg>');
+}
+ :host .mobile-wrapper .acc-item fl-tab-content {
+	 padding-left: 34px;
+	 padding-bottom: 18px;
+}