@charset "utf-8";

/* Font Face */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Black.otf');
    font-weight: 900;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-ExtraBold.otf');
    font-weight: 800;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Bold.otf');
    font-weight: 700;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-SemiBold.otf');
    font-weight: 600;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Medium.otf');
    font-weight: 500;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Regular.otf');
    font-weight: 400;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Light.otf');
    font-weight: 300;
}
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-ExtraLight.otf');
    font-weight: 200;
}


/* 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, strike, tt, var, 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%; vertical-align: baseline;}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


/* set basement */
* {box-sizing: border-box;}
sub {font-size: 0.5em!important;}
html {font-size:16px; font-weight:400; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
body {font-family: 'Metropolis', sans-serif; color: #333; word-break: normal; overflow-x: hidden!important; margin: 0 auto; display: flex; flex-direction: column; min-height: 100vh;  line-height: 180%;}
body.fixed {overflow: hidden!important;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; line-height: 130%;}
a {color:inherit;text-decoration: none;}
img {max-width:100%;}
ol, ul, li {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;}
caption {padding-bottom: 0.5em;}
th {font-weight: 700;}
th, td {vertical-align: middle; text-align: left;}
b, strong {font-weight: 700;}
.clearfix:after {display:block;content:"";clear:both;}


/* set inputs */
select {outline:none;}
input:not[type="checkbox"], textarea, button {appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; box-shadow: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
select,
input {height:40px;padding: 10px;border: 1px solid #bfbfbf;vertical-align: middle;}
textarea, input[type="text"], input[type="email"], input[type="number"] {outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
input[type="submit"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
input[type="file"] {height: auto;padding: 5px; display: inline-flex; align-items: center; }
input[type="checkbox"] {width:15px;height:15px; appearance: checkbox; -webkit-appearance: checkbox; -moz-appearance: checkbox; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; background: #fff;}
input[type="radio"] {outline: none; width: initial; height: initial; box-shadow: none; margin: 0!important;}
input[type="radio"]:checked {outline: none; width: initial; height: initial; box-shadow: none;}
textarea {display:block;padding: 10px;border: 1px solid #bfbfbf;resize: vertical;}
button {padding: 10px;}
input:focus, textarea:focus {outline:none;box-shadow: 0px 0px 5px rgba(0, 183, 238, 0.2);}


/* set font */
.montserrat {font-family: 'Montserrat', sans-serif;}
.metropolis {font-family: 'Montserrat', sans-serif;}

.fontsize--14 {font-size: 14px!important;}
.fontsize--15 {font-size: 15px!important;}
.fontsize--16 {font-size: 16px!important;}
.fontsize--17 {font-size: 17px!important;}
.fontsize--18 {font-size: 18px!important;}
.fontsize--19 {font-size: 19px!important;}
.fontsize--20 {font-size: 20px!important;}
.fontsize--22{ font-size: 22px!important;}
.fontweight--exLt {font-weight: 200!important;}
.fontweight--light {font-weight: 300!important;}
.fontweight--reg {font-weight: 400!important;}
.fontweight--medium {font-weight: 500!important;}
.fontweight--semibold {font-weight: 600!important;}
.fontweight--bold {font-weight: 700!important;}
.fontweight--exBold {font-weight: 800!important;}
.fontweight--black {font-weight: 900!important;}
.textalign--left {text-align: left!important;}
.textalign--center { text-align: center!important; }
.textalign--right { text-align: right!important;}
.font--uppercase {text-transform: uppercase!important;}
.font--capitalize {text-transform: capitalize!important;}
.font--underline {text-decoration: underline!important;}


/* set elements */
.hidden {position: absolute!important;font-size: 0px!important;text-indent: -9999px!important;color:transparent!important;}
.pc-br {display:block;}
.t-br, .m-br {display:none;}

ul.bullet > li {position: relative;padding: 0 0 0.5em 1em;text-align: left;font-size: 16px;font-weight:400;line-height: 150%;}
ul.bullet > li:last-child {padding-bottom: 0!important;}
ul.bullet > li:before {display: block;content: "";width: 4px;height: 4px;border-radius: 100%;background-color: #5a5a5a;position: absolute;top: 0.75em;left: 0; transform: translateY(-50%);}
ul.bullet.tiny > li:before { width: 2px; height: 2px;}
ul.bullet.squared > li:before { width: 4px; height: 4px; border-radius: 0;}
ul.bullet.hyphen > li:before {width: 5px; height: 1px; border-radius: 0; background-color: #333; }

.video-box {position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; background-color: #000;}
.video-box .video,
.video-box iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
.video-box__loading {position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; z-index: 0;}

.anchor_wrap {position: relative;}
.anchor_wrap .anchor {position: absolute; top: -120px; overflow: hidden; opacity: 0;}

.bg {background: no-repeat center / cover;}

.pd_top--0 {padding-top: 0!important;}
.pd_bottom--0 {padding-bottom: 0!important;}
.mg_top--0 {margin-top: 0!important;}
.mg_bottom--0 {margin-bottom: 0!important;}
.margin--0--auto {display: block; margin: 0 auto!important;}

table.layout--fixed {table-layout: fixed;}


/* css icons */
.circle {position: relative; display: block; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50%; }
.arrow {display:block;width:10px;height:10px;border-top:2px solid #000;border-right:2px solid #000;}
.arrow.right {transform:rotate(45deg);}
.arrow.left {transform:rotate(-135deg);}
.arrow.up {transform:rotate(-45deg);}
.arrow.down {transform:rotate(135deg);}
.ico.plus {display:block;position:relative;}
.ico.plus:after,
.ico.plus:before {display:block;content:"";background-color:#ccc;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.ico.plus:after {width: 100%; height: 1px;}
.ico.plus:before {width: 1px; height: 100%;}
.ico.circle { display: flex; justify-content: center; align-items: center;  width: 30px; height: 30px; border-radius: 100%; background-color: #ccc; }
.ico.circle .arrow { border-color: #fff; }
.ico.play {display: flex; width: 60px; height: 60px; background-color: #fff; border-radius: 50%; justify-content: center; align-items: center;}
.ico.play .arw {display: block; width: 0; height: 0; border-left: 13px solid #000; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px;}
.ico.loading {display: block; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #2585be; border-right-color: transparent; animation-name: loading; animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: ease-in-out;}
@keyframes loading {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}


/* Buttons */
.btn--hamburger {width: 30px; height: 20px; position: relative; overflow: hidden;}
.btn--hamburger > div {position: absolute; left: 50%; width: 100%; height: 2px; background: #dfdfdf; transition: 0.3s;}
.btn--hamburger > div:nth-child(1) {top: 0; transform: translate(-50%, 0);}
.btn--hamburger > div:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}
.btn--hamburger > div:nth-child(3) {top: 100%; transform: translate(-50%, -100%);}



/* layouts */
.floatbox:after {display:block;content:"";clear:both;}
.floatbox > .float__item {float: left;}
.flexbox,
.flex__col--5,
.flex__col--4,
.flex__col--2,
.flex__col--3 { display: flex; flex-wrap: wrap; }
.flex__col--5 .flex__item { width: 19.2%; margin-right: 1%; margin-bottom: 2%; }
.flex__col--4 .flex__item { width: 23.5%; margin-right: 2%; margin-bottom: 2%; }
.flex__col--3 .flex__item { width: 32%; margin-right: 2%; margin-bottom: 2%; }
.flex__col--2 .flex__item { width: 49%; margin-right: 2%; margin-bottom: 2%; }
.flex__col--2 .flex__item:nth-child(2n) { margin-right: 0!important; }

@media screen and (min-width: 1201px) {
    .flex__col--5 .flex__item:nth-child(5n),
    .flex__col--4 .flex__item:nth-child(4n),
    .flex__col--3 .flex__item:nth-child(3n) { margin-right: 0; }
}

@media screen and (max-width: 1200px) {
    .flex__col--5 .flex__item {width: 32%;}
    .flex__col--4 .flex__item,
    .flex__col--3 .flex__item { width: 49%; margin-right: 2%; }
    .flex__col--5 .flex__item:nth-child(3n),
    .flex__col--4 .flex__item:nth-child(2n),
    .flex__col--3 .flex__item:nth-child(2n) { margin-right: 0; }
}

@media screen and (max-width: 768px) {
    .flex__col--5 .flex__item {width: 49%; margin-right: 2%;}
    .flex__col--5 .flex__item:nth-child(2n) {margin-right: 0;}
}

@media screen and (max-width: 500px) {
    .flex__col--4 .flex__item,
    .flex__col--3 .flex__item,
    .flex__col--2 .flex__item { width: 100%!important; margin-right: 0!important; }
    .flex__col--4 .flex__item:last-child,
    .flex__col--3 .flex__item:last-child,
    .flex__col--2 .flex__item:last-child {margin-bottom: 0!important;}
}


/* line clamps */
.lineclamp--1 {display: block; word-break: break-all!important; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden;}
.lineclamp--2, .lineclamp--3, .lineclamp--4 {display:-webkit-box;-webkit-box-orient: vertical;overflow: hidden;}
.lineclamp--2 {-webkit-line-clamp: 2;}
.lineclamp--3 {-webkit-line-clamp: 3;}
.lineclamp--4 {-webkit-line-clamp: 4;}


/* Modal Window */
.modal {display: none; position: fixed; z-index: 9999999; top: 0; left: 0; width: 100%; min-height: 100vh;}
.modal__dimmer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);}
.modal__overflow_wrapper {position: relative; z-index: 10; width: 100%; height: 100vh; overflow-y: auto; padding: 200px 0 80px 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);}
.modal__inner {position: relative; background: #fff; padding: 60px 100px 60px 80px; width: calc(100% - 20px); max-width: 1440px; margin: 0 auto; pointer-events: initial;}
.modal__contents {min-height: 400px;}
.modal__foot {position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; padding: 40px;}


/* Set Container */
.container {min-width: 300px;max-width: calc(100% - 40px);margin: 0 auto;}
.container {width: 1200px;}


/* Tablet */
@media screen and (max-width: 1200px) {

    /* set container size */
    .container {max-width: calc(100% - 40px);}
    .container:not(.header__container) {width: 720px;}
    
    /* set elements */
    .t-br {display:block;}
    .pc-br, .m-br {display:none;}
    
    /*  set font-size */
    .para { font-size: 16px; }

    ul.bullet > li { font-size: 14px; }

    .modal__overflow_wrapper {padding-top: 100px;}

}


/*Mobile*/
@media screen and (max-width: 768px) {
    .m-br {display:block;}
    .pc-br, .t-br {display:none;}

    .para {font-size: 14px;}

    .modal__inner {padding: 60px 20px 40px 20px;}
    .modal__foot {padding: 20px;}
    .modal__close_btn img {width: 20px;}
    
}