/* ==================================
= common settings                     
================================== */
.txt-lft { text-align: left; }

.txt-rgt { text-align: right; }

.txt-cnt { text-align: center; }

/*----------  common  ----------*/
#wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; }

.contents { width: 100%; margin: 0 auto; }

/*----------  ttl  ----------*/
/*----------  txt  ----------*/
/*----------  btn  ----------*/
/*----------  icn  ----------*/
/* ==================================
= ly_cont           
================================== */
.ly_cont { margin-top: 76px; margin-bottom: 61px; }

.ly_cont_inner { margin: 0 auto; }

/* ==================================
= main          
================================== */
main { width: 100%; min-height: 100vh; }

/****************************** header */
.ly_header { z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; margin: 0 auto; background: #fff; -webkit-box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.1); box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.1); }

.ly_header .bl_nav__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0 auto; }

.bl_nav { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 100; top: 0; left: 0; width: 100%; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }

.bl_nav .bl_nav_list_wrapper .bl_nav_linkBtn { display: block; margin: 0 auto; }

.bl_nav .bl_nav_link { display: block; position: relative; color: #040000; font-weight: 500; text-decoration: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; }

.bl_nav .icon { width: 19px; }

.bl_nav .icon.icon_cart { width: 20px; }

.bl_btn_wrapper { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: start; -ms-flex-pack: start; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; align-items: center; justify-content: flex-start; }

.bl_btn_wrapper .bl_nav_btnHamburger { display: block; z-index: 9999; position: relative; width: 45px; height: 45px; background-color: #01959d; }

.bl_btn_wrapper .bl_nav_btnHamburger span { display: block; position: absolute; background-color: #fff; -webkit-transition: width 0.2s, right 0.2s, left 0.2s; transition: width 0.2s, right 0.2s, left 0.2s; }

.bl_btn_wrapper .bl_nav_btnHamburger .top { top: 13px; right: 0px; left: 0px; width: 25px; height: 3px; margin: auto; }

.bl_btn_wrapper .bl_nav_btnHamburger .middle { position: relative; top: calc(50% - 1.5px); right: 0; left: 0; width: 25px; margin: auto; -webkit-transform: translateY(-46%); transform: translateY(-46%); }

.bl_btn_wrapper .bl_nav_btnHamburger .middle:before, .bl_btn_wrapper .bl_nav_btnHamburger .middle:after { display: block; position: absolute; right: 0; left: 0; width: 25px; height: 3px; margin: auto; -webkit-transform: rotate(0deg); transform: rotate(0deg); background-color: #fff; content: ""; -webkit-transition: all 0.2s; transition: all 0.2s; }

.bl_btn_wrapper .bl_nav_btnHamburger .bottom { right: 0px; bottom: 13px; left: 0px; width: 25px; height: 3px; margin: auto; }

.bl_btn_wrapper .bl_nav_btnHamburger.active .top { left: 100%; width: 0; opacity: 0; }

.bl_btn_wrapper .bl_nav_btnHamburger.active .middle:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); }

.bl_btn_wrapper .bl_nav_btnHamburger.active .middle:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.bl_btn_wrapper .bl_nav_btnHamburger.active .bottom { right: 100%; width: 0px; opacity: 0; }

.el_overlay { display: none; z-index: 999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(25, 24, 21, 0.6); }

/* ==================================
= footer          
================================== */
.ly_footer { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; background: #211714; }

.ly_footer .el_small { text-align: center; }

.ly_footer small { color: #FFFFFF; font-weight: 500; }

.bl_external .bl_external_inner { margin: 0 auto; }

.bl_external .bl_external_ttl { margin-left: auto; }

.bl_external .bl_external_lists { -webkit-box-pack: justify; -ms-flex-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; }

.bl_external .bl_external_link { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; background-color: #01959d; color: #FFFFFF; font-weight: 500; text-align: center; }

.ly_bg__top { z-index: 0; position: relative; background: -webkit-linear-gradient(top, #fff 30%, rgba(1, 149, 157, 0.5)); background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #fff), to(rgba(1, 149, 157, 0.5))); background: linear-gradient(to bottom, #fff 30%, rgba(1, 149, 157, 0.5)); }

.ly_bg__products { z-index: 0; position: relative; }

.ly_bg__products::after { z-index: -1; position: absolute; left: 0; width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left; background: -webkit-linear-gradient(100deg, #fff 50%, rgba(1, 149, 157, 0.3)); background: linear-gradient(-10deg, #fff 50%, rgba(1, 149, 157, 0.3)); content: ''; }

.ly_bg__area { z-index: 0; position: relative; background: -webkit-linear-gradient(top, rgba(237, 119, 0, 0.5) 50%, #fff); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(237, 119, 0, 0.5)), to(#fff)); background: linear-gradient(to bottom, rgba(237, 119, 0, 0.5) 50%, #fff); }

.ly_bg__area::after { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left; background: #fff; content: ''; }

.ly_bg__detail { z-index: 0; position: relative; background: -webkit-linear-gradient(top, rgba(1, 149, 157, 0.3) 50%, #fff); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(1, 149, 157, 0.3)), to(#fff)); background: linear-gradient(to bottom, rgba(1, 149, 157, 0.3) 50%, #fff); }

.ly_bg__detail::after { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left; background: #fff; content: ''; }

.movie-wrap { position: relative; height: 0; overflow: hidden; }

.movie-wrap iframe, .movie-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

video { width: 100%; max-width: 100%; margin: 0 auto; }

.popup-iframe { display: block; position: relative; width: 100%; height: 100%; }

.popup-iframe::after { display: block; z-index: 100; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-image: url(/web-exhibition/common/images/icon_play.svg); content: ""; }

.popup-iframe img { width: 100%; height: 100%; }

@media screen and (max-width: 750px) { .ly_cont { margin-top: 29px; margin-bottom: 41px; } .ly_cont_inner { width: calc(100% - 60px); } .ly_header .bl_nav__inner { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: justify; -ms-flex-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 0 15px; } .bl_nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: auto; background-color: #ffffff; } .bl_nav .bl_nav__inner { position: relative; } .bl_nav .bl_nav_logo_wrapper { -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 247px; } .bl_nav .bl_nav_logo { width: 112.5px; margin-right: 10px; } .bl_nav .bl_nav_logo3 { width: 247px; margin-top: 7px; } .bl_nav .bl_nav_list_wrapper { display: none; z-index: 4000; position: fixed; top: 45px; left: 0; width: 100%; overflow: auto; background-color: #01959d; } .bl_nav .bl_nav_list_wrapper .bl_nav_list_wrapper_inner { opacity: 0; -webkit-transition: 1s ease; transition: 1s ease; } .bl_nav .bl_nav_list_wrapper .bl_nav_list_wrapper_inner.on { opacity: 1; } .bl_nav .bl_nav_list_wrapper .bl_nav_linkBtn { width: 175px; margin: 12% auto 8%; } .bl_nav .bl_nav_list.bl_nav_list1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 13px; font-weight: 500; text-align: center; } .bl_nav .bl_nav_list.bl_nav_list2 { position: absolute; top: 0; right: 70px; bottom: 0; width: 22.5px; height: 22.4px; margin: auto; } .bl_nav .bl_nav_list.bl_nav_list3 { -webkit-box-pack: justify; -ms-flex-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; width: 127px; margin: 24px auto 0; } .bl_nav .bl_nav_item1 { width: 100%; } .bl_nav .bl_nav_link { padding: 16px 0; border-bottom: solid 1px #ffffff; background-color: #01959d; color: #FFFFFF; letter-spacing: 0; } .bl_nav .bl_nav_link.bl_nav_link2 { padding: 0; } .bl_nav .bl_nav_link.bl_nav_link__last { border-bottom: solid 1px #01959d; } .bl_nav .bl_nav_link .bl_nav_link__icon { position: relative; padding-right: 20px; }
  .bl_nav .bl_nav_link .bl_nav_link__icon:after { display: block; z-index: 9999; position: absolute; top: 0; right: -4px; bottom: 0; width: 15.5px; height: 14px; margin: auto; background: url(/web-exhibition/common/images/sp/icon_01_sp.svg); background-repeat: no-repeat; background-size: contain; content: ""; } .bl_nav .icon { width: 22px; } .bl_nav .icon.icon_cart { width: 22.5px; height: 22.4px; } .bl_nav .bl_nav_btnHamburger span { background-color: #fff; }
  .bl_nav .bl_nav_btnHamburger span::before, .bl_nav .bl_nav_btnHamburger span::after { background-color: #fff; } .ly_footer { height: 35px; } .ly_footer small { font-size: 10px; letter-spacing: 0.2px; } .bl_external { margin-bottom: 51px; } .bl_external .bl_external_inner { width: 92vw; } .bl_external .bl_external_ttl { width: 53vw; height: 11.7vw; margin-bottom: 16px; } .bl_external .bl_external_link { width: 44.5vw; height: 16vw; font-size: 13px; line-height: 20px; } .ly_bg__products::after { bottom: 6vw; height: 51vw; -webkit-transform: skewY(10.4deg); transform: skewY(10.4deg); } .ly_bg__area::after { height: 785px; -webkit-transform: skewY(-12.5deg); transform: skewY(-12.5deg); } .ly_bg__detail::after { height: 228px; -webkit-transform: skewY(-10.4deg); transform: skewY(-10.4deg); } .popup-iframe::after { width: 19.8vw; height: 19.8vw; } }

@media screen and (min-width: 751px) { .ly_cont_inner { max-width: 1200px; } main { padding-top: 148px; overflow-x: hidden; } .ly_header { width: 100%; min-width: 960px; } .ly_header .bl_nav__inner { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 960px; min-width: 960px; margin: 0 auto; padding-left: 2px; } .bl_nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 960px; min-height: 80px; padding-top: 27px; } .bl_nav .bl_nav_logo_wrapper { width: 107px; height: 65px; } .bl_nav .bl_nav_logo { width: 200px; margin-right: 0; margin-left: 30px; padding-top: 2px; } .bl_nav .bl_nav_logo2 { width: 225px; height: 50px; margin-right: 27px; margin-left: auto; padding-top: 1px; } .bl_nav .bl_nav_logo3 { display: inline-block !important; width: 107px; height: 65px; } .bl_nav .bl_nav_list { -webkit-box-align: start; -ms-flex-align: start; -webkit-box-pack: justify; -ms-flex-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; font-size: 13px; font-size: 1.3rem; } .bl_nav .bl_nav_list.bl_nav_list1 { margin-top: 27px; margin-left: 55px; } .bl_nav .bl_nav_list.bl_nav_list2 { width: 133.1px; } .bl_nav .bl_nav_item1 { margin-right: 34px; } .bl_nav .bl_nav_link { padding: 8px 0; font-size: 14px; letter-spacing: 0.3px; line-height: 19.19px; } .bl_nav .bl_nav_link.is_active { border-bottom: solid 2px #01959d; } .ly_footer { height: 70px; } .ly_footer small { font-size: 12px; letter-spacing: 0.3px; } .bl_external { margin-bottom: 61px; } .bl_external .bl_external_inner { width: 620px; } .bl_external .bl_external_ttl { width: 225px; height: 50px; margin-bottom: 11px; } .bl_external .bl_external_link { width: 290px; height: 120px; font-size: 21px; line-height: 2; } .ly_bg__products::after { bottom: 15vw; height: 20.8vw; -webkit-transform: skewY(10.4deg); transform: skewY(10.4deg); } .ly_bg__area::after { height: 677px; -webkit-transform: skewY(-10.4deg); transform: skewY(-10.4deg); } .ly_bg__detail::after { height: 345px; -webkit-transform: skewY(-10.4deg); transform: skewY(-10.4deg); } video { width: 476px; height: 268px; } .popup-iframe::after { width: 95px; height: 95px; } }

@media (max-width: 750px) { main { padding-top: 45px; } }