/* Original layout rules, restricted to the elements used on this page. */

div, ul, li {margin: 0px; padding: 0px;}
 ul {list-style: none;}
.discul {list-style: disc; padding: 0px 0px 0px 20px; line-height: 170%;}
@media (max-width: 1100px) {.pc {display: none;}}
@media (min-width: 1101px) {.mobile {display: none;}}
html {height: 100%; margin: auto; max-width: 100%;}
.max {height: 100%; margin: auto; max-width: 1100px;}
table {font-size: 14px; font-family: NanumSquare, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif; line-height: 200%; color: rgb(68, 68, 68); text-align: left;}
td {font-size: 14px; font-family: NanumSquare, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif; line-height: 200%; color: rgb(68, 68, 68); }
body {font-size: 14px; font-family: NanumSquare, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif; color: rgb(68, 68, 68);}
a:link {color: rgb(68, 68, 68); text-decoration: none; font-family: NanumSquare, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif;}
a:visited {color: rgb(68, 68, 68); text-decoration: none; font-family: NanumSquare, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif;}
a:hover {color: rgb(68, 68, 68); text-decoration: underline; font-family: NanumSquare, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif;}
@media only screen and (min-width: 1101px) {
}
@media only screen and (max-width: 1100px) {
}
@media only screen and (min-width: 1101px) {
}
@media only screen and (max-width: 1100px) {
}
.copy02 {line-height: 200%; color: rgb(102, 102, 102); font-size: 13px;}
@media only screen and (max-width: 700px) {
}
@media only screen and (max-width: 500px) {
}
html, body {border: 0px; margin: 0px; padding: 0px;}
@media only screen and (min-width: 769px) {
}
@media only screen and (max-width: 769px) {
}
ul#topnav_mobile {margin: 0px; padding: 0px; list-style: none; position: relative; font-size: 20px; z-index: 100;}
ul#topnav_mobile li {float: left; margin: 0px; border-right: 0px solid rgb(85, 85, 85); }
ul#topnav_mobile li:hover > a {color: rgb(255, 102, 0);}
ul#topnav_mobile li:first-child {background: none;}
ul#topnav_mobile li a {font-weight: normal; text-align: center; font-size: 24px; letter-spacing: 0px; padding: 0px 60px; line-height: 90px; height: 90px; display: block; color: rgb(0, 0, 0); text-decoration: none;}
@media only screen and (max-width: 900px) {
ul#topnav_mobile li a {font-weight: normal; text-align: center; font-size: 17px; letter-spacing: 0px; padding: 0px 20px; line-height: 50px; height: 50px; display: block; color: rgb(0, 0, 0); text-decoration: none;}}
@media only screen and (max-width: 500px) {
ul#topnav_mobile li a {font-weight: normal; text-align: center; font-size: 12px; letter-spacing: -1px; padding: 0px 10px; line-height: 50px; height: 50px; display: block; color: rgb(0, 0, 0); text-decoration: none;}}
* {margin: 0px; padding: 0px;}
html, body {height: 100%;}
.d_banner2 {position: relative; width: 100%; height: 100vh; max-height: 700px; overflow: hidden;}
@media screen and (min-width: 768px) and (max-width: 959px) {.d_banner2 {position: relative; width: 100%; height: 500px; min-height: 500px; overflow: hidden;}}
@media screen and (max-width: 767px) {.d_banner2 {position: relative; width: 100%; height: 300px; min-height: 300px; overflow: hidden;}}
.d_banner2 {margin-top: 0px;}
@media screen and (max-width: 769px) {.d_banner2 {margin-top: 0px;}}
.d_banner2 .img {position: relative; width: 100%; height: 100%; overflow: hidden;}
.d_banner2 .img li {display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden;}
.d_banner2 .img li:first-child {display: block;}
.d_banner2 .img li.on {display: block;}
.d_banner2 .img li .bg {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transform: scale(1.2) rotate(0.02deg); transition: 3s;}
.d_banner2 .img li.motion .bg {transform: scale(1);}
.d_banner2 .img li .slogan {position: absolute; left: 0px; top: 55%; transform: translateY(-50%); width: 100%; text-align: center;}
.d_banner2 .img li .slogan .text1 {font-family: NanumSquare, NanumSquareRound, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif;}
.d_banner2 .img li .slogan .text2 {font-family: NanumSquare, NanumSquareRound, "Noto Sans Korean", "Malgun Gothic", "맑은 고딕", sans-serif;}
.d_banner2 .img li .slogan .text1 {display: block; position: relative; font-size: 100px; font-weight: 800; color: rgb(255, 255, 0); top: 0px; opacity: 0; transition: 0.5s 0.5s; text-shadow: rgb(102, 102, 102) 0px 0px 0px; padding-bottom: 30px;}
.d_banner2 .img li .slogan .text2 {display: block; position: relative; font-size: 50px; font-weight: normal; color: rgb(255, 255, 255); top: 0px; opacity: 0; transition: 0.5s 1s; text-shadow: rgb(102, 102, 102) 0px 0px 0px; padding-bottom: 20px;}
@media screen and (max-width: 769px) {div {}
.d_banner2 .img li .slogan .text1 {display: block; position: relative; font-size: 40px; font-weight: 800; color: rgb(255, 255, 0); top: 0px; opacity: 0; transition: 0.5s 0.5s; text-shadow: rgb(102, 102, 102) 0px 0px 0px; padding-bottom: 30px;}
.d_banner2 .img li .slogan .text2 {display: block; position: relative; font-size: 20px; font-weight: normal; color: rgb(255, 255, 255); top: 0px; opacity: 0; transition: 0.5s 1s; text-shadow: rgb(102, 102, 102) 0px 0px 0px;}
}
.d_banner2 .img li.motion .slogan .text1 {top: -20px; opacity: 1;}
.d_banner2 .img li.motion .slogan .text2 {top: -40px; opacity: 1;}
.d_banner2 .btn {position: absolute; width: 100%; bottom: 30px; text-align: center; z-index: 30;}
.d_banner2 .btn li {display: inline-block; width: 16px; height: 16px; border: 2px solid rgb(255, 255, 255); margin: 0px 8px; cursor: pointer; border-radius: 50%; text-indent: -9999px;}
.d_banner2 .btn li.on {background: rgb(255, 255, 255);}
.d_banner2 .prev, .d_banner2 .next {position: absolute; top: 50%; transform: translateY(-50%); width: 100px; height: 100px; text-indent: -9999px; opacity: 0.5; cursor: pointer;}
.d_banner2 .prev {left: 0px; background: url("/assets/images/prev.png") center center no-repeat;}
.d_banner2 .next {right: 0px; background: url("/assets/images/next.png") center center no-repeat;}
@media screen and (max-width: 769px) {.d_banner2 .prev {width: 40px; height: 40px; left: 10px; background: url("/assets/images/prev.png") center center no-repeat;}
.d_banner2 .next {width: 40px; height: 40px; right: 10px; background: url("/assets/images/next.png") center center no-repeat;}}
.d_banner2 .prev:hover, .d_banner2 .next:hover {opacity: 1;}
.background-box01 {background-image: url("/assets/images/02_back.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover;}
@media (min-width: 769px) {.m_title01 {text-align: center; font-size: 50px; font-weight: 700; color: rgb(51, 51, 51); padding: 90px 0px 10px;}
.m_title02 {text-align: center; font-size: 18px; padding-bottom: 10px; color: rgb(102, 102, 102);}
.m_title03 {text-align: center; font-size: 30px; font-weight: 400; color: rgb(51, 51, 51); padding: 20px 0px 40px;}
}
@media (max-width: 769px) {.m_title01 {text-align: center; font-size: 30px; font-weight: 700; color: rgb(51, 51, 51); padding: 70px 0px 5px;}
.m_title02 {text-align: center; font-size: 13px; line-height: 18px; padding-bottom: 0px; color: rgb(102, 102, 102);}
.m_title03 {text-align: center; font-size: 18px; font-weight: 400; color: rgb(51, 51, 51); padding: 10px 0px 20px;}
}
div {}
@media only screen and (max-width: 768px) {div {}
}
div.gallery01 {text-align: center; border: 0px solid rgb(204, 204, 204);}
div.gallery01:hover {border: 0px solid rgb(119, 119, 119);}
div.gallery01 img {width: 100%; height: auto; max-width: 510px;}
div.desc0101 {padding: 20px 0px 10px; text-align: center; color: rgb(0, 51, 204); font-size: 24px; font-weight: 800;}
div.desc0102 {padding: 3px 0px; text-align: center; color: rgb(0, 0, 0); font-size: 18px; line-height: 130%;}
.responsive01 {text-align: center; width: 48%; float: left; padding: 20px 1%;}
@media only screen and (max-width: 780px) {.responsive01 {width: 48%; padding: 20px 1%;}
div.desc0101 {padding: 15px 0px 10px; text-align: center; color: rgb(0, 51, 204); font-size: 18px; font-weight: 800;}
div.desc0102 {padding: 3px 10px; text-align: center; color: rgb(0, 0, 0); font-size: 15px; line-height: 130%;}}
@media only screen and (max-width: 500px) {.responsive01 {width: 98%; padding: 20px 1%;}}
div.desc0201 {padding: 5px 0px 10px; text-align: center; color: rgb(255, 255, 255); font-size: 24px; font-weight: 800;}
div.desc0202 {padding: 3px 0px; text-align: center; color: rgb(255, 255, 255); font-size: 18px;}
div.desc0203 {padding: 3px 0px 100px; text-align: center; color: rgb(255, 255, 0); font-size: 100px;}
div.desc0204 {text-align: left; color: rgb(255, 255, 255); font-size: 36px; line-height: 200%;}
@media only screen and (max-width: 780px) {div.desc0201 {padding: 0px 0px 5px; text-align: center; color: rgb(255, 255, 255); font-size: 18px; font-weight: 800;}
div.desc0202 {padding: 3px 0px; text-align: center; color: rgb(255, 255, 255); font-size: 13px;}
div.desc0203 {padding: 3px 0px 60px; text-align: center; color: rgb(255, 255, 0); font-size: 30px;}
div.desc0204 {text-align: left; color: rgb(255, 255, 255); font-size: 22px; line-height: 150%; padding: 0px 15px;}}
.check {color: rgb(0, 51, 153); font-weight: 700; font-size: 140%; line-height: 150%;}
@media (min-width: 769px) {.text0101 {text-align: left; font-size: 22px; line-height: 150%; font-weight: 400; color: rgb(0, 0, 0); padding: 0px;}
}
@media (max-width: 769px) {
.text0101 {text-align: left; font-size: 16px; line-height: 140%; font-weight: 400; color: rgb(0, 0, 0); padding: 0px 10px;}
}
@media (min-width: 769px) {
.con0301 {text-align: left; font-size: 22px; line-height: 35px; font-weight: 400; color: rgb(0, 0, 0); padding: 0px;}}
@media (max-width: 769px) {
.con0301 {text-align: left; font-size: 14px; line-height: 25px; font-weight: 400; color: rgb(0, 0, 0); padding: 0px 10px 20px;}}
.map10 {height: 500px;}
@media only screen and (max-width: 768px) {.map10 {height: 300px;}}
@media only screen and (max-width: 500px) {.map10 {height: 250px;}}
@media (min-width: 769px) {
.text00-02 {text-align: center; font-size: 30px; line-height: 35px; font-weight: 400; color: rgb(255, 102, 0); padding: 0px 0px 20px;}
}
@media (max-width: 769px) {
.text00-02 {text-align: center; font-size: 20px; line-height: 35px; font-weight: 700; color: rgb(255, 102, 0); padding: 0px 0px 10px;}
}
* {margin: 0px; padding: 0px;}
#laycopy {left: 0px; bottom: 0px; width: 100%; z-index: 5; position: fixed; overflow-y: hidden; background: rgb(255, 255, 255);}

/* Layout values extracted from the original inline styles. */
.fixed-table { table-layout:fixed; }
.header-image { height: auto; max-width: 80%; padding:5px; }
.no-padding { padding:0px; }
.hero-ice { background:url('/assets/images/main_img01.jpg') no-repeat center /cover }
.accent-green { color:#00ff99; }
.accent-purple { color:#cc00ff; }
.hero-oil { background:url('/assets/images/main_img02.jpg') no-repeat center /cover }
.ice-background { width:100%; background-color:#eee; padding:0px; }
.ice-container { padding:0 10px; }
.ice-bottom-space { padding-bottom:2%;  }
.text-white { color:#ffffff; }
.oil-product-image { height: auto; width:100%; max-width: 420px; }
.space-100 { padding-top:100px; }
.space-50 { padding-top:50px; }
.oil-can-mobile { height: auto; max-width: 60%; padding:15px 0 15px 0; }
.oil-can-desktop { height: auto; max-width: 100%; padding:0px 80px; }
.section-divider {  border-top: 1px solid #ddd; margin: 0px; }
.company-background { background-color:#fff; background-repeat:no-repeat; background-position:50% 0%; }
.company-container { padding:0 0px; }
.company-image-mobile { height: auto; max-width: 100%; padding:5px 0 15px 0; }
.company-image-desktop { height: auto; max-width: 60%; padding:0px 20px 0 0px; }
.space-30 { padding-top:30px; }
.company-bottom-space { padding-top:3%; }
.map-background {  background-repeat:no-repeat; background-position:50% 0%; }
.text-black { color:#000000 }
.no-border { border:0; }
.address-spacing { padding:15px 0 20px 0; }
.footer-spacing { padding:30px 0px; }
.label-black { color:#000; }
.phone-link { cursor:pointer; }
.business-name { font-weight:900; }
.footer-divider { padding:0px 10px; }
.contact-clearance { padding-top:60px; }
.contact-cell { padding:5px 0; }
.full-width { width:100%; }
.contact-icon { max-width:100px; width:100%; }

/* Native controls and small compatibility fixes. No framework or remote fonts. */
html { scroll-behavior: smooth; }
body { background: #fff; }
header, main, section, footer { display: block; }
header, section, footer, .center { text-align: center; }
header > table, section > table, footer > table { margin-left: auto; margin-right: auto; }
footer { border-top: 1px solid #ddd; }
footer > table { max-width: 1100px; }
h2 { line-height: inherit; }
img { border: 0; }
button { font: inherit; cursor: pointer; }
a:focus, button:focus { outline: 2px solid #0066cc; outline-offset: 3px; }
.text00-02 a { color: inherit; }
.d_banner2 .img li { display: block; opacity: 0; visibility: hidden; transition: opacity 600ms, visibility 600ms; }
.d_banner2 .img li.on { opacity: 1; visibility: visible; }
.d_banner2 .prev, .d_banner2 .next { border: 0; background-color: transparent; z-index: 2; }
.d_banner2 .btn li { border: 0; width: auto; height: auto; margin: 0; text-indent: 0; }
.d_banner2 .btn button { display: block; width: 20px; height: 20px; border: 2px solid #fff; margin: 0 8px; border-radius: 50%; background: transparent; }
.d_banner2 .btn button.on { background: #fff; }
.d_banner2 .banner-pause:focus { position: absolute; bottom: 65px; left: 50%; width: auto; height: auto; clip: auto; padding: 8px; z-index: 3; transform: translateX(-50%); }
.background-box01 { background-color: #354346; }
.map10 iframe { display: block; width: 100%; height: 100%; border: 0; }
#laycopy { padding-bottom: env(safe-area-inset-bottom, 0px); }
#laycopy a { display: block; }
.visually-hidden, .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; padding: 12px; background: #fff; z-index: 1000; }
@media (max-width: 1100px) {
  footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 769px) {
  /* iOS webviews do not reliably render fixed background attachments. */
  .background-box01 { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .d_banner2 .img li, .d_banner2 .img li .bg, .d_banner2 .img li .slogan span { transition: none; }
}
.clearfix:after { content: ""; display: table; clear: both; }
/* Preserve the original image-box dimensions in standards-mode HTML. */
img { vertical-align: bottom; }
.d_banner2 .prev, .d_banner2 .next, .d_banner2 .btn, .d_banner2 .banner-pause { display: none; }
.d_banner2.js-enabled .prev, .d_banner2.js-enabled .next, .d_banner2.js-enabled .btn, .d_banner2.js-enabled .banner-pause { display: block; }