@charset "utf-8";
@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
/* ===============================================================
    * Reset 
=============================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;overflow-x: hidden;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none; color: inherit;}
img {vertical-align: top;}
input[type="date"] {border: none;}
input[type="text"],input[type="tel"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],
textarea,button {appearance: none;-webkit-appearance: none;outline:none;background: none; border: 1px solid #e0e0e0;}
button {cursor: pointer; border:none; border-radius: 0; padding: 0; margin: 0;}
select {appearance: none;-webkit-appearance: none;outline:none; border: 1px solid #e0e0e0;}
select::-ms-expand {display: none;}
* {box-sizing: border-box;}
a:link {background: none;}
a:visited {background: none;}
a:active {background: none;}

/* ===============================================================
    * Layout & Font & Width & Color
=============================================================== */
html {font-size: 62.5%;}
body {font-family: 'SCoreDream'; font-size: 16px; line-height: 1; font-weight: normal; color: #222; overflow-x: hidden;}
/* 
    font-family: 'SCoreDream';
*/
.upp{ text-transform: uppercase;}
.none-pc {display: none;}
.none-mo {display: block;}
.fl{ float: left;}
.fr{ float: right;}
.bold{ font-weight: 800;}
.re{ font-weight: 400;}
@media (max-width: 820px){
    .none-pc {display: block;}
    .none-mo {display: none!important;}
}


.intro {width: 100%; height: 100vh; display: flex; justify-content: space-between;}
.intro-box {width: 50%; position: relative; overflow: hidden;}
.intro-box a{ display: block; width: 100%; height: 100%; padding: 50px; transition: .3s;}
.intro-box a .img-wrap{ width: 100%; height: 100%; overflow: hidden; border-radius: 8px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; }
.intro-box a .img-wrap .black{ position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: 0 auto; top: 0; background-color: #222; opacity: .7; transition: .6s; transform-origin: center;}
.intro-box a .text-wrap{ width: 380px; height: 380px; display: flex; z-index: 10; flex-direction: column; align-items: center; justify-content: center;}
.intro-box a .text-wrap img{ height: 97px; object-fit: cover; margin-bottom: 25px;}
.intro-box a .text-wrap h3{ font-size: 18px; color: #fff; padding-bottom: 10px;}
.intro-box a .text-wrap h2{ font-size: 28px; color: #fff; padding-bottom: 25px;}
.intro-box a .text-wrap p{ font-size: 18px; color: #fff005;}
.intro-box a:hover .img-wrap .black{ width: 380px; height: 380px; left: 0; right: 0; margin: 0 auto; top: calc(50% - 190px); border-radius: 50%; transform-origin: center;}
.intro-box.intro-01 a:hover{ background-color: #ab8b65;}
.intro-box.intro-02 a:hover{ background-color: #fc9e60;}
@media (max-width: 820px){
    .intro { height: auto; flex-direction: column;}
    .intro-box { width: 100%; height: 89.07vw; }
    .intro-box a{ padding: 4.00vw; transition: .3s;}
    .intro-box a .img-wrap{ border-radius: 1.07vw;}
    .intro-box a .text-wrap{ width: 58.54vw; height: 58.54vw; }
    .intro-box a .text-wrap img{ height: 16.00vw;margin-bottom: 4.00vw;}
    .intro-box a .text-wrap h3{ font-size: 3.20vw; padding-bottom: 2.00vw;}
    .intro-box a .text-wrap h2{ font-size: 4.53vw; padding-bottom: 4.67vw;}
    .intro-box a .text-wrap p{ font-size: 3.20vw; }
    .intro-box a:hover .img-wrap .black{ width: 58.54vw; height: 58.54vw; top: calc(50% - 29.27vw); }
}