@charset "utf-8";
/* pages/history/history.css */
/* @import url("./share.css"); */
/* @import url("./sp/layout.css"); */
/* @import url("./sp/contents.css"); */
/* @import url("./sp/drawer.css"); */
@media (width < 768px) {
  /* ----------------------------------------------------------
  History Of YOKOREI
  -----------------------------------------------------------*/

  #about-history #contents {
    padding-left: 0;
    padding-right: 0;
  }
  #about-history #contents h2 {
    margin: 0 !important;
  }
  #about-history #contents h3 {
    margin: 0 0 30px !important;
  }

  #episodeNav {
    display: none !important;
  }

  .episodeWrap {
  }
  /*---------- ewTitle ----------*/
  .episodeWrap .ewTitle {
    position: relative;
    top: -480px;
    width: 480px;
  }
  .episodeWrap p {
    margin: 0;
  }

  .episodeWrap .hoyTxt {
    z-index: 20;
    position: absolute;
    top: 0;
    left: calc(50% - 115px);
    width: 230px;
    height: 230px;
    background: rgba(235, 30, 10, 0.9);
  }
  .episodeWrap .hoyTxt a {
    display: block;
    width: 230px;
    height: 230px;
    color: rgba(255, 255, 255, 1);
    font-size: 1.5rem;
    line-height: 1.875rem;
    text-align: center;
    padding-top: calc(115px - 1.875rem);
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 300;
    transition: all ease-out 0.2s;
  }
  .episodeWrap .hoyTxt a:hover {
    text-decoration: none;
    background: rgba(235, 30, 10, 0.9);
  }

  .episodeWrap .hoyTxt a strong {
    display: block;
    font-size: 2rem;
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 300;
  }

  .episodeWrap .hoyTxt a:before {
    content: "";
    position: absolute;
    left: 115px;
    bottom: 10px;
    width: 1px;
    height: 62px;
    background: rgba(255, 255, 255, 1);
  }
  .episodeWrap .hoyTxt a:after {
    visibility: visible;
    content: "";
    position: absolute;
    left: 111px;
    bottom: 20px;
    width: 30px;
    height: 1px;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, 1);
  }
  .episodeWrap {
    padding-top: 480px;
  }
  /* ew1 */
  .episodeWrap#ew1 {
    background: transparent url("/assets/img/pages/about/history/ew1-bg-sp.jpg") no-repeat center top;
  }
  #ew1 .hoyPh {
    z-index: 10;
    position: relative;
    width: 480px;
  }
  #ew1 .hoyPh img {
    display: none;
  }
  #ew1 .hoyPh span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
  }
  /* ew2 */
  .episodeWrap#ew2 {
    background: transparent url("/assets/img/pages/about/history/ew2-bg-sp.jpg") no-repeat center top;
  }
  /* ew3 */
  .episodeWrap#ew3 {
    background: transparent url("/assets/img/pages/about/history/ew3-bg-sp.jpg") no-repeat center top;
  }
  /* ew4 */
  .episodeWrap#ew4 {
    background: transparent url("/assets/img/pages/about/history/ew4-bg-sp.jpg") no-repeat center top;
  }
  /* ew5 */
  .episodeWrap#ew5 {
    background: transparent url("/assets/img/pages/about/history/ew5-bg-sp.jpg") no-repeat center top;
  }
  /* ew6 */
  .episodeWrap#ew6 {
    background: transparent url("/assets/img/pages/about/history/ew6-bg-sp.jpg") no-repeat center top;
  }
  /* ew7 */
  .episodeWrap#ew7 {
    background: transparent url("/assets/img/pages/about/history/ew7-bg-sp.jpg") no-repeat center top;
  }
  /* ew8 */
  .episodeWrap#ew8 {
    background: transparent url("/assets/img/pages/about/history/ew8-bg-sp.jpg") no-repeat center top;
  }

  /*---------- ewLead ----------*/
  .episodeWrap .ewLead {
    position: relative;
    width: 480px;
    height: 265px;
    margin: 0 auto 30px;
    overflow: hidden;
  }
  .episodeWrap .ewLead:before {
    z-index: -1;
    content: "";
    position: absolute;
    left: 188px;
    top: -311px;
    width: 380px;
    height: 600px;
    -webkit-transform: rotate(-50deg) skew(13deg, 5deg);
    background: rgba(235, 30, 10, 1);
  }
  .episodeWrap .ewLead:after {
    content: "";
    visibility: visible;
    position: absolute;
    bottom: 0;
    left: 516px;
    display: block;
    width: 1px;
    height: 10px;
    background: rgba(235, 30, 10, 1);
  }

  .episodeWrap .ewLead dl {
    width: 480px;
    padding: 20px 20px 0 0;
    text-align: right;
    color: rgba(255, 255, 255, 1);
  }
  .episodeWrap .ewLead dl dt {
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: Thin;
    font-style: italic;
    font-size: 2.4rem;
  }
  .episodeWrap .ewLead dl dd {
    font-size: 1.5rem;
  }

  .episodeWrap .ewLead p {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    padding: 130px 0 0 20px;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: bold;
  }

  /*---------- ewYear ----------*/
  .episodeWrap .ewYear {
    position: relative;
    width: 480px;
    margin: 0 auto 50px;
    padding: 0 15px 30px 15px;
  }

  .episodeWrap .ewYear:not(.eyList):after {
    z-index: -1;
    content: "";
    visibility: visible;
    position: absolute;
    left: 70px;
    bottom: 0;
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(235, 30, 10, 1);
  }
  .episodeWrap .ewYear h4,
  .episodeWrap .eyList dt {
    /*recet*/
    position: static;
    font-size: 1rem;
    text-align: left;
    margin-bottom: 0;
    /*}*/

    padding: 0 0 30px;
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 100;
    font-style: italic;
    font-size: 3rem;
    line-height: 3rem;
    color: rgba(235, 30, 10, 1);
    background: rgba(255, 255, 255, 1);
  }

  .episodeWrap .ewYear dl {
    margin: 0;
  }
  .episodeWrap .ewYear.eyList {
  }

  .episodeWrap .ewYear dl dt {
    position: relative;
    float: left;
    width: 55px;
    margin-bottom: 30px;
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 100;
    font-style: italic;
    font-size: 3rem;
    line-height: 3rem;
    text-align: center;
  }
  .episodeWrap .ewYear.eyList dl dt {
    float: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .episodeWrap .ewYear.eyList dl dt span {
    color: rgba(51, 51, 51, 1);
  }

  .episodeWrap .ewYear:not(.eyList) dl dt:before {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 0;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(235, 30, 10, 1);
    border-radius: 10px;
  }
  .episodeWrap .ewYear.eyList dl dt:before {
    bottom: 30px;
  }

  .episodeWrap .ewYear dl dd {
    margin-bottom: 20px;
    padding: 0 0 0 70px;
    padding: calc(2rem - 2px) 0 0 70px;
  }
  .episodeWrap .ewYear dl dd:nth-of-type(1) {
    padding: calc(2rem - 2px) 0 0 70px;
  }

  .episodeWrap .eyList dl dd {
    padding: 20px 0 0 0 !important;
    border-bottom: 1px dotted rgba(102, 102, 102, 1);
  }

  /* Photo Area */
  .episodeWrap .ewYear p.eyPh,
  .episodeWrap .ewYear ul.eyPh li {
    width: 450px;
    padding: 0 0 0 70px;
  }
  .episodeWrap .ewYear p.eyPh img,
  .episodeWrap .ewYear ul.eyPh li img {
    width: 100%;
  }

  #historySec ul#switchNav {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ----------------------------------------------------------
  TechHistory Sec
  -----------------------------------------------------------*/

  section#techHistory {
    margin-bottom: 100px;
  }
  section#techHistory ul {
    margin-top: 50px;
  }
  section#techHistory ul li {
    text-align: center;
    margin-bottom: 2em;
  }
  section#techHistory ul li a img {
    border: 1px solid #ddd;
  }
  section#techHistory ul li a:first-child:after {
    display: none;
  }
  section#techHistory ul li a {
    color: #333;
  }
}
/* @import url("./pc/layout.css"); */
/* @import url("./pc/contents.css"); */
/* @import url("./pc/animation.css"); */
/* @import url("./pc/search.css"); */
@media (width >= 768px) {
  /* ----------------------------------------------------------
  History Of YOKOREI
  -----------------------------------------------------------*/

  #about-history {
  }
  #about-history:not(.ua-tablet) #episodeNav {
    z-index: 999;
    width: 30px;
    height: 280px;
    position: fixed;
    top: calc(50% - 140px);
    right: 0;
  }
  #about-history:not(.ua-tablet) #episodeNav ul li {
    position: relative;
  }
  #about-history:not(.ua-tablet) #episodeNav ul li a {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    background: rgba(235, 30, 10, 0.5);
    border-bottom: 1px solid rgba(235, 30, 10, 1);
    text-indent: -99999px;
    overflow: hidden;
  }
  #about-history:not(.ua-tablet) #episodeNav ul li.enCurrent a {
    background: rgba(235, 30, 10, 0.9);
  }

  #about-history:not(.ua-tablet) #episodeNav ul li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 30px;
    height: 1px;
    background: rgba(235, 30, 10, 0);
    transition: all ease-out 0.2s;
  }
  #about-history:not(.ua-tablet) #episodeNav ul li a:hover:before {
    height: 30px;
    background: rgba(235, 30, 10, 1);
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:after {
    visibility: visible;
    content: "";
    position: absolute;
    right: -100px;
    top: 0;
    display: block;
    width: 100px;
    height: 30px;
    padding-left: 5px;
    transition: all ease-out 0.2s;
    font-size: 1rem;
    background: rgba(51, 51, 51, 0.9);
    color: rgba(255, 255, 255, 1);
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:hover:after {
    right: 30px;
  }
  #about-history:not(.ua-tablet) #episodeNav ul li.js-current:after {
    right: 30px;
  }

  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(1):after {
    content: "1948 - 1957";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(2):after {
    content: "1958 - 1967";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(3):after {
    content: "1968 - 1977";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(4):after {
    content: "1978 - 1987";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(5):after {
    content: "1988 - 1997";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(6):after {
    content: "1998 - 2007";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(7):after {
    content: "2008 - 2017";
  }
  #about-history:not(.ua-tablet) #episodeNav ul li:nth-of-type(8):after {
    content: "2018 -";
  }

  /* Tablet */

  #about-history.ua-tablet #episodeNav {
    z-index: 999;
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  #about-history.ua-tablet #episodeNav ul {
    margin: 0;
  }

  #about-history.ua-tablet #episodeNav ul li {
    float: left;
    width: 12.5%;
  }
  #about-history.ua-tablet #episodeNav ul li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: rgba(235, 30, 10, 0.8);
    color: rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(235, 255, 255, 1);
  }
  #about-history.ua-tablet #episodeNav ul li:nth-last-of-type(1) a {
    border-right: none;
  }

  #about-history.ua-tablet footer {
    position: relative;
    z-index: 200;
  }

  #about-history #contents article {
    width: 100%;
  }
  #about-history #contents ol#topicPath {
    margin-bottom: 100px;
  }

  #about-history #contents article #historySec {
    width: 100%;
    background: transparent;
  }
  #about-history #contents article #historySec #switchNav {
    width: 1200px;
    margin: 0 auto;
  }

  .episodeWrap {
  }
  .episodeWrap {
  }
  /*---------- ewTitle ----------*/
  .episodeWrap .ewTitle {
    position: relative;
    width: 1200px;
    margin: 0 auto;
  }
  .episodeWrap p {
    margin: 0;
  }

  .episodeWrap .hoyTxt {
    z-index: 20;
    position: absolute;
    top: 0;
    left: calc(50% - 115px);
    width: 230px;
    height: 230px;
    background: rgba(235, 30, 10, 0.9);
  }
  .episodeWrap .hoyTxt a {
    display: block;
    width: 230px;
    height: 230px;
    color: rgba(255, 255, 255, 1);
    font-size: 1.5rem;
    line-height: 1.875rem;
    text-align: center;
    padding-top: calc(115px - 1.875rem);
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 300;
    transition: all ease-out 0.2s;
  }
  .episodeWrap .hoyTxt a:hover {
    text-decoration: none;
    background: rgba(235, 30, 10, 0.9);
  }

  .episodeWrap .hoyTxt a strong {
    display: block;
    font-size: 2rem;
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 300;
  }

  .episodeWrap .hoyTxt a:before {
    content: "";
    position: absolute;
    left: 115px;
    bottom: 10px;
    width: 1px;
    height: 62px;
    background: rgba(255, 255, 255, 1);
  }
  .episodeWrap .hoyTxt a:after {
    visibility: visible;
    content: "";
    position: absolute;
    left: 111px;
    bottom: 20px;
    width: 30px;
    height: 1px;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, 1);
  }
  /* ew1 */
  .episodeWrap#ew1 {
    background: transparent url("/assets/img/pages/about/history/ew1-bg.jpg") no-repeat center top;
  }
  #ew1 .hoyPh {
    z-index: 10;
    position: relative;
    width: 601px;
  }
  #ew1 .hoyPh span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: rgba(255, 255, 255, 0.7);
  }
  /* ew2 */
  .episodeWrap#ew2 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew2-bg.jpg") no-repeat center top;
  }
  /* ew3 */
  .episodeWrap#ew3 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew3-bg.jpg") no-repeat center top;
  }
  /* ew4 */
  .episodeWrap#ew4 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew4-bg.jpg") no-repeat center top;
  }
  /* ew5 */
  .episodeWrap#ew5 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew5-bg.jpg") no-repeat center top;
  }
  /* ew6 */
  .episodeWrap#ew6 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew6-bg.jpg") no-repeat center top;
  }
  /* ew7 */
  .episodeWrap#ew7 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew7-bg.jpg") no-repeat center top;
  }
  /* ew8 */
  .episodeWrap#ew8 {
    padding-top: 500px;
    background: transparent url("/assets/img/pages/about/history/ew8-bg.jpg") no-repeat center top;
  }

  /*---------- ewLead ----------*/
  .episodeWrap .ewLead {
    position: relative;
    width: 1200px;
    height: 265px;
    margin: 0 auto;
    overflow: hidden;
  }
  .episodeWrap .ewLead:before {
    z-index: -1;
    content: "";
    position: absolute;
    left: 188px;
    top: -311px;
    width: 380px;
    height: 600px;
    transform: rotate(-50deg) skew(13deg, 5deg);
    -webkit-transform: rotate(-50deg) skew(13deg, 5deg);
    background: rgba(235, 30, 10, 1);
  }
  .episodeWrap .ewLead:after {
    content: "";
    visibility: visible;
    position: absolute;
    bottom: 0;
    left: 516px;
    display: block;
    width: 1px;
    height: 10px;
    background: rgba(235, 30, 10, 1);
  }

  .episodeWrap .ewLead dl {
    width: 528px;
    margin-left: 247px;
    padding-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
  }
  .episodeWrap .ewLead dl dt {
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: Thin;
    font-style: italic;
    font-size: 3.75rem;
  }
  .episodeWrap .ewLead dl dd {
    font-size: 1.5rem;
  }

  .episodeWrap .ewLead p {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    padding: 60px 0 0 25px;
    font-size: 3rem;
    line-height: 3.75rem;
    font-weight: bold;
  }

  /*---------- ewYear ----------*/
  .episodeWrap .ewYear {
    position: relative;
    width: 1200px;
    margin: 0 auto 50px;
    padding-bottom: 30px;
  }
  /* 1949 */
  .episodeWrap #y1949.ewYear,
        /* 1954 */.episodeWrap #y1954.ewYear,
        /* 1957 */.episodeWrap #y1957.ewYear,
        /* 1960 */.episodeWrap #y1960.ewYear,
        /* 1965 */.episodeWrap #y1965.ewYear,
        /* 1967 */.episodeWrap #y1967.ewYear,
        /* 1969 */.episodeWrap #y1969.ewYear,
        /* 1971 */.episodeWrap #y1971.ewYear,
        /* 1973 */.episodeWrap #y1973.ewYear,
        /* 1975 */.episodeWrap #y1975.ewYear,
        /* 1977 */.episodeWrap #y1977.ewYear,
        /* 1979 */.episodeWrap #y1979.ewYear,
        /* 1982 */.episodeWrap #y1982.ewYear,
        /* 1984 */.episodeWrap #y1984.ewYear,
        /* 1986 */.episodeWrap #y1986.ewYear,
        /* 1989 */.episodeWrap #y1989.ewYear,
        /* 1991 */.episodeWrap #y1991.ewYear,
        /* 1993 */.episodeWrap #y1993.ewYear,
        /* 1995 */.episodeWrap #y1995.ewYear,
        /* 1997 */.episodeWrap #y1997.ewYear,
        /* 1999 */.episodeWrap #y1999.ewYear,
        /* 2001 */.episodeWrap #y2001.ewYear,
        /* 2003 */.episodeWrap #y2003.ewYear,
        /* 2005 */.episodeWrap #y2005.ewYear,
        /* 2007 */.episodeWrap #y2007.ewYear,
        /* 2009 */.episodeWrap #y2009.ewYear,
        /* 2011 */.episodeWrap #y2011.ewYear,
        /* 2013 */.episodeWrap #y2013.ewYear,
        /* 2015 */.episodeWrap #y2015.ewYear,
        /* 2017 */.episodeWrap #y2017.ewYear,
        /* 2019 */.episodeWrap #y2019.ewYear,
        /* 2021 */.episodeWrap #y2021.ewYear,
        /* 2023 */.episodeWrap #y2023.ewYear,
        /* 2025 */.episodeWrap #y2025.ewYear  {
    background: rgba(248, 248, 248, 1);
  }

  .episodeWrap .ewYear.eyLeft dl {
    padding-left: 65px;
  }
  .episodeWrap .ewYear.eyLeft-m dl {
    padding-left: 150px;
  }
  .episodeWrap .ewYear.eyRight dl {
    padding-left: 500px;
  }
  .episodeWrap .ewYear.eyRight-2 dl {
    padding-left: 750px;
  }
  .episodeWrap .ewYear.eyCenter dl {
    padding: 0 0 0 466px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyCenter:not(#y1958) dl {
    padding: 0 0 0 446px;
  }

  .episodeWrap .ewYear:after {
    z-index: 888;
    content: "";
    visibility: visible;
    position: absolute;
    bottom: 0;
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(235, 30, 10, 1);
  }
  .episodeWrap .ewYear.eyCenter:after {
    left: 516px;
  }
  .episodeWrap .ewYear.eyLeft:after {
    left: 115px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyLeft:after {
    left: 135px;
  }
  .episodeWrap .ewYear.eyLeft-m:after {
    left: 200px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyLeft-m:after {
    left: 220px;
  }
  .episodeWrap .ewYear.eyMonth:after {
    left: 200px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyMonth:after,
  #about-history.ua-tablet .episodeWrap .ewYear#y1967:after {
    left: 220px;
  }
  .episodeWrap .ewYear.eyRight:after {
    left: 550px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyRight:after {
    left: 570px;
  }
  .episodeWrap .ewYear.eyRight-2:after {
    left: 800px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyRight-2:after {
    left: 820px;
  }

  .episodeWrap .ewYear h4 {
    /*recet*/
    position: static;
    font-size: 1rem;
    text-align: left;
    margin-bottom: 0;
    /*}*/

    padding: 70px 0 0 0;
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 100;
    font-style: italic;
    font-size: 3rem;
    line-height: 3rem;
    color: rgba(235, 30, 10, 1);
  }
  .episodeWrap .ewYear.eyLeft-m h4 {
    padding-left: 230px;
  }
  .episodeWrap .ewYear.eyLeft h4 {
    padding-left: 145px;
  }
  .episodeWrap .ewYear.eyRight h4 {
    padding-left: 580px;
  }
  .episodeWrap .ewYear.eyRight-2 h4 {
    padding-left: 830px;
  }
  .episodeWrap .ewYear.eyCenter h4 {
    padding: 45px 0 0 546px;
  }

  .episodeWrap .ewYear dl {
    margin: 0;
  }
  .episodeWrap .ewYear.eyList {
  }

  .episodeWrap .ewYear dl dt {
    z-index: 999;
    position: relative;
    float: left;
    width: 50px;
    margin-bottom: 30px;
    font-family: "Segoe UI Light", "Segoe UI";
    font-weight: 100;
    font-style: italic;
    font-size: 3rem;
    line-height: 3rem;
  }
  #about-history.ua-tablet .episodeWrap .ewYear dl dt {
    width: 70px;
  }

  .episodeWrap .ewYear.eyList dt {
    width: 200px;
    margin-bottom: 0;
    padding: 30px 0 30px 30px;
    color: rgba(235, 30, 10, 1);
  }

  #about-history.ua-tablet .episodeWrap .ewYear.eyList:not(#y1958) dt {
    width: 220px;
  }

  .episodeWrap .ewYear.eyList dt span {
    color: rgba(51, 51, 51, 1);
  }

  .episodeWrap .ewYear dl dt:before {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 0;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(235, 30, 10, 1);
    border-radius: 10px;
  }
  .episodeWrap .ewYear.eyList dl dt:before {
    bottom: 30px;
  }

  .episodeWrap .ewYear dl dd {
    margin-bottom: 30px;
    padding: calc(2rem - 2px) 0 0 90px;
  }
  .episodeWrap .ewYear.eyList dd {
    margin-bottom: 0;
    padding: calc(2rem + 30px) 0 30px 230px;
  }
  #about-history.ua-tablet .episodeWrap .ewYear.eyList dd {
  }

  .episodeWrap .ewYear.eyList dd:nth-of-type(even) {
    background: rgba(248, 248, 248, 1);
  }
  /* Photo Area */
  .episodeWrap .ewYear p.eyPh,
  .episodeWrap .ewYear ul.eyPh li {
    z-index: 888;
    position: absolute;
  }
  .episodeWrap .ewYear p.eyPh.epLT,
  .episodeWrap .ewYear ul.eyPh.epLT li {
    top: 30px;
    left: 25px;
    padding: 12px 0 0 12px;
  }
  .episodeWrap .ewYear.eyCenter .eyPh.epLT {
    top: 0;
    left: -12px;
  }

  .episodeWrap .ewYear p.eyPh.epLB,
  .episodeWrap .ewYear ul.eyPh.epLB li {
    bottom: 30px;
    left: 25px;
    padding: 0 0 12px 12px;
  }

  .episodeWrap .ewYear p.eyPh.epRB,
  .episodeWrap .ewYear ul.eyPh.epRB li {
    bottom: 30px;
    right: 25px;
    padding: 0 12px 12px 0;
  }

  .episodeWrap .ewYear p.eyPh.epRT,
  .episodeWrap .ewYear ul.eyPh.epRT li {
    top: 55px;
    right: 55px;
    padding: 0 12px 12px 0;
  }

  .episodeWrap .ewYear p.eyPh,
  .episodeWrap .ewYear .eyPh li {
    background: transparent url("/assets/img/pages/about/history/prt-dot-gray-1.gif") left top;
  }
  .episodeWrap .ewYear .eyPh li.phOl:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 5px;
    background: rgba(248, 248, 248, 1);
  }
  .episodeWrap .ewYear .epLT li:nth-of-type(2):before {
    top: 19px;
    left: 19px;
  }
  .episodeWrap .ewYear .epRB li:nth-of-type(2):before {
    top: -17px;
    right: 24px;
  }

  .episodeWrap .ewYear .eyPh li.phOl:after {
    visibility: visible;
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 80px;
    background: rgba(248, 248, 248, 1);
  }
  .episodeWrap .ewYear .epLT li:nth-of-type(2):after {
    top: 19px;
    left: 19px;
  }
  .episodeWrap .ewYear .epRB li:nth-of-type(2):after {
    top: -17px;
    right: 19px;
  }

  .episodeWrap .ewYear .eyPh img {
    position: relative;
  }
  .episodeWrap .ewYear .epLT img {
    left: 12px;
    top: 12px;
  }
  .episodeWrap .ewYear .epRB img {
    left: -12px;
    bottom: 12px;
  }
  .episodeWrap .ewYear .epRT img {
    left: -12px;
    bottom: 12px;
  }
  .episodeWrap .ewYear .eyPh span {
    position: absolute;
    background: rgba(51, 51, 51, 0.8);
    color: rgba(255, 255, 255, 1);
    padding: 5px;
  }
  .episodeWrap .ewYear .eyPh.epLT span {
    bottom: -12px;
    left: 24px;
  }
  .episodeWrap .ewYear .eyPh.epRB span {
    bottom: 24px;
    left: -12px;
  }
  .episodeWrap .ewYear .eyPh.epRT span {
    bottom: 24px;
    left: -12px;
  }

  .episodeWrap .eyLeft ul.epRB li:nth-child(1) {
    bottom: 170px;
  }
  .episodeWrap .eyLeft ul.epRB li:nth-child(2) {
    right: 205px;
    bottom: -41px;
  }
  .episodeWrap .eyLeft ul.epRB li:nth-child(1) span {
    left: auto;
    right: 24px;
  }

  .episodeWrap#ew7 .ewYear ul.eyPh,
  .episodeWrap#ew8 .ewYear ul.eyPh {
    position: absolute;
    top: 30px;
    left: 0;
  }
  .episodeWrap#ew8 .ewYear.eyLeft ul.eyPh,
  .episodeWrap#ew7 .ewYear.eyLeft ul.eyPh {
    left: auto;
    right: 0;
  }

  .episodeWrap#ew7 .ewYear ul.eyPh li,
  .episodeWrap#ew8 .ewYear ul.eyPh li {
    position: relative;
    margin-bottom: 36px;
    top: auto;
  }
  .episodeWrap#ew7 .ewYear ul.eyPh.epLT li,
  .episodeWrap#ew8 .ewYear ul.eyPh.epLT li {
    left: auto;
  }
  .episodeWrap#ew7 .ewYear ul.eyPh.epRT li,
  .episodeWrap#ew8 .ewYear ul.eyPh.epRT li {
    right: auto;
  }

  .episodeWrap#ew7 .ewYear.eyLeft ul.eyPh.epRT li.imgLB {
    margin-top: -99px;
    right: 102px;
  }
  .episodeWrap#ew7 .ewYear.eyLeft ul.eyPh.epRT li.imgRB {
    margin-top: -99px;
    left: 102px;
  }
  .episodeWrap#ew8 .ewYear.eyCenter ul.eyPh.epLT li.imgRB {
    margin-top: -99px;
    left: 102px;
  }
  .episodeWrap#ew8 .ewYear.eyRight ul.eyPh.epLT li.imgRB {
    margin-top: -99px;
    left: 102px;
  }
  .episodeWrap#ew8 .ewYear.eyLeft ul.eyPh.epLT li.imgLB {
    margin-top: -99px;
    right: 102px;
  }

  .episodeWrap#ew7 .ewYear.eyLeft ul.eyPh.epRT li.txtRT span {
    bottom: auto;
    top: -12px;
    left: auto;
    right: 24px;
  }
  .episodeWrap#ew8 .ewYear.eyCenter ul.eyPh.epLT li.txtLT span {
    bottom: auto;
    top: 24px;
    left: 24px;
  }
  .episodeWrap#ew8 .ewYear.eyRight ul.eyPh.epLT li.txtLT span {
    bottom: auto;
    top: 24px;
    left: 24px;
  }
  .episodeWrap#ew8 .ewYear.eyLeft ul.eyPh.epLT li.txtRT span {
    bottom: auto;
    top: 24px;
    left: 24px;
  }

  /* y1954 */
  .episodeWrap #y1954.ewYear .eyPh li:nth-child(2) {
    left: 405px;
  }
  .episodeWrap #y1954.ewYear .eyPh li:nth-child(2) {
    background: none;
  }

  /* y1958 */
  .episodeWrap #y1958.ewYear dl {
    padding: 0 0 0 366px !important;
  }
  .episodeWrap #y1958.ewYear dl dt {
    width: 150px !important;
  }
  .episodeWrap #y1958.ewYear dl dd {
    padding: calc(2rem + 30px) 0 30px 180px;
  }

  /* y1965 */
  .episodeWrap #y1965.ewYear .eyPh li:nth-child(1) {
    top: -30px;
  }
  .episodeWrap #y1965.ewYear .eyPh li:nth-child(2) {
    top: 181px;
    left: 225px;
  }

  /* y1982 */
  .episodeWrap #y1982.ewYear .eyPh {
    top: -200px;
  }

  /* y1986 */
  .episodeWrap #y1986.ewYear .eyPh li:nth-child(1) {
    top: -30px;
  }
  .episodeWrap #y1986.ewYear .eyPh li:nth-child(2) {
    top: 181px;
    left: 225px;
  }
  /* y2005 */
  .episodeWrap #y2005.ewYear .eyPh li:nth-child(1) {
    top: -30px;
  }
  .episodeWrap #y2005.ewYear .eyPh li:nth-child(2) {
    top: 181px;
    left: 225px;
  }
  .episodeWrap #y2005.ewYear .eyPh li:nth-child(1) span {
    bottom: auto;
    top: 24px;
  }

  /* y1995 */
  .episodeWrap #y1995.eyLeft ul.epRB li:nth-child(1) {
    bottom: 300px;
  }
  .episodeWrap #y1995.eyLeft ul.epRB li:nth-child(2) {
    right: 205px;
    bottom: 85px;
  }
  .episodeWrap #y1995.ewYear .eyPh.epRB li:nth-child(1) span {
    bottom: auto;
    left: auto;
    top: -12px;
    right: 24px;
  }

  /* y2006 */
  .episodeWrap #y2006.eyLeft ul.epRB li:nth-child(1) {
    bottom: 90px;
  }
  .episodeWrap #y2006.eyLeft ul.epRB li:nth-child(2) {
    right: 205px;
    bottom: -175px;
  }

  /* y2012 */
  .episodeWrap #y2012 {
    margin-bottom: 250px;
  }
  .episodeWrap#ew7 .ewYear.eyLeft ul.eyPh.epRT li#y2012-ph3 {
    width: 380px;
  }
  /* y2018 */
  .episodeWrap #y2018 {
    margin-bottom: 200px;
  }
  /* y2020 */
  .episodeWrap #y2020 {
    margin-bottom: 395px;
  }
  /* y2021 */
  .episodeWrap #y2021 {
    margin-bottom: 157px;
  }
  /* y2024 */
  .episodeWrap #y2024 {
    margin-bottom: 550px;
  }
  .episodeWrap#ew8 .ewYear.eyRight-2 ul.eyPh.epLT li.txtLT span {
    bottom: auto;
    top: 24px;
    left: 24px;
  }
  .episodeWrap#ew8 .ewYear.eyRight-2 ul.eyPh.epLT li.imgRB {
    margin-top: -99px;
    left: 102px;
  }
  /* ----------------------------------------------------------
  TechHistory Sec
  -----------------------------------------------------------*/

  section#techHistory {
    margin-top: 120px;
    margin-bottom: 170px;
  }
  section#techHistory ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-top: 100px;
  }
  section#techHistory ul li {
    text-align: center;
  }
  section#techHistory ul li:not(:first-of-type) {
    margin-left: calc(80px / 3);
  }
  section#techHistory ul li a img {
    border: 1px solid #ddd;
    margin-bottom: 1em;
  }
  section#techHistory ul li a:first-child:after {
    display: none;
  }
  section#techHistory ul li a {
    color: #333;
  }
}
article {
  font-weight: 400;
  overflow-wrap: normal;

  #episodeNav {
    ul {
      line-height: 1.75;
    }
  }

  .episodeWrap {
    dl dd {
      a:not(.c-link, .c-icon-link) {
        color: var(--color--link-blue);
        text-decoration: underline;
        text-underline-offset: calc(2 * 1rem / 16);
        @media (width >= 768px) {
          text-underline-offset: 2px;
        }
      }
      a[target="_blank"]:not(.c-link, .c-icon-link)::after {
        content: "";
        display: inline-block;
        inline-size: calc(18.03 * 1rem / 16);
        block-size: calc(16.23 * 1rem / 16);
        /* margin-inline: 0.5em 0.2em; */
        margin-inline: 0.4em 0.4em;
        background-color: var(--color--red);
        mask-image: url("/assets/img/components/icon/icon_window.svg");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        translate: 0 0.2em;
      }
    }

    .ewLead p {
      font-feature-settings: "palt";
    }

    .ewYear {
      margin-bottom: 50px !important;

      dl dd {
        margin-bottom: 20px !important;
        line-height: 1.75;
      }
    }

    .ewYear.eyLeft {
      dl dd {
        min-height: 71px;
      }
    }

    @media (width >= 768px) {
      dl dd {
        a[target="_blank"]:not(.c-link, .c-icon-link)::after {
          inline-size: 18.03px;
          block-size: 16.23px;
          translate: 0 0.1em;
        }
      }

      .ewYear {
        dl dd {
          margin-bottom: 30px !important;
        }
      }

      .ewYear.eyLeft {
        dl dd {
          min-height: auto;
        }
      }
      #y2012 {
        margin-bottom: 250px !important;
      }
      #y2018 {
        margin-bottom: 200px !important;
      }
      #y2020 {
        margin-bottom: 395px !important;
      }
      #y2021 {
        margin-bottom: 157px !important;
      }
      #y2024 {
        /* margin-bottom: 550px; */
        margin-bottom: 630px !important;
      }
      #y2025 {
        /* margin-bottom: 550px; */
        margin-bottom: 550px !important;
      }
    }
  }

  #techHistory {
    ul {
      margin: 0;
    }
  }
}

.episodeWrap .ewYear#y1973 p.eyPh.epLT.img2{
  top:380px;
}
@media (width <= 768px) {
    .episodeWrap .ewYear#y1973 p.eyPh.epLT.img2{
      margin-top:20px;
  }
}