@charset "utf-8";
@import url("/theme/v1/resources/css/view/layout/layout.css");

:root {
	--color-primary:#ce0538;
	--color-secondary:#db2447;
	--color-tertiary:transparent;
	--color-quaternary:transparent;
	--color-success:transparent;
	--color-danger:transparent;
	--color-warning:transparent;
	--color-info:transparent;
	--color-black:#000;
	--color-gray01:#808080;
	--color-gray02:#999999;
	--color-gray03:#606060;
	--color-gray04:#f0f0f0;
	--color-gray05:#f5f5f5;
	--color-white:#ffffff;
	--font-color-primary:#ce0538;
	--font-color-secondary:#db2447;
	--font-color-success:transparent;
	--font-color-danger:transparent;
	--font-color-warning:transparent;
	--font-color-info:transparent;
	--font-color-black:#000;
	--font-color-gray01:#808080;
	--font-color-gray02:#999999;
	--font-color-gray03:#606060;
	--font-color-gray04:#f0f0f0;
	--font-color-gray05:#f5f5f5;
	--font-color-white:#ffffff;
	--border-color-primary:#ce0538;
	--border-color-secondary:#db2447;
	--border-color-success:transparent;
	--border-color-danger:transparent;
	--border-color-warning:transparent;
	--border-color-info:transparent;
	--border-color-black:#000;
	--border-color-gray01:#808080;
	--border-color-gray02:#999999;
	--border-color-gray03:#606060;
	--border-color-gray04:#f0f0f0;
	--border-color-gray05:#f5f5f5;
	--border-color-white:#ffffff;
}

.blind {position:absolute; overflow:hidden; width:1px; height:1px; clip:rect(0 0 0 0);}
.lock {overflow:hidden; touch-action:none; -webkit-overflow-scrolling:none; overscroll-behavior:none;}

/* margin */
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt90 {margin-top:90px;}
.mt100 {margin-top:100px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}
.mr60 {margin-right:60px;}
.mr70 {margin-right:70px;}
.mr80 {margin-right:80px;}
.mr90 {margin-right:90px;}
.mr100 {margin-left:100px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb90 {margin-bottom:90px;}
.mb100 {margin-bottom:100px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}
.ml60 {margin-left:60px;}
.ml70 {margin-left:70px;}
.ml80 {margin-left:80px;}
.ml90 {margin-left:90px;}
.ml100 {margin-left:100px;}

/* padding */
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}
.pt50 {padding-top:50px;}
.pt60 {padding-top:60px;}
.pt70 {padding-top:70px;}
.pt80 {padding-top:80px;}
.pt90 {padding-top:90px;}
.pt100 {padding-top:100px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr30 {padding-right:30px;}
.pr40 {padding-right:40px;}
.pr50 {padding-right:50px;}
.pr60 {padding-right:60px;}
.pr70 {padding-right:70px;}
.pr80 {padding-right:80px;}
.pr90 {padding-right:90px;}
.pr100 {padding-right:100px;}
.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}
.pb50 {padding-bottom:50px;}
.pb60 {padding-bottom:60px;}
.pb70 {padding-bottom:70px;}
.pb80 {padding-bottom:80px;}
.pb90 {padding-bottom:90px;}
.pb100 {padding-bottom:100px;}
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.pl50 {padding-left:50px;}
.pl60 {padding-left:60px;}
.pl70 {padding-left:70px;}
.pl80 {padding-left:80px;}
.pl90 {padding-left:90px;}
.pl100 {padding-left:100px;}

.txt-16 {font-size:1.6rem!important;}
.txt-18 {font-size:1.8rem!important;}
.txt-20 {font-size:2rem!important;}
.txt-22 {font-size:2.2rem!important;}
.txt-24 {font-size:2.4rem!important;}
.txt-26 {font-size:2.6rem!important;}
.txt-28 {font-size:2.8rem!important;}
.txt-30 {font-size:3rem!important;}
.txt-32 {font-size:3.2rem!important;}
.txt-34 {font-size:3.4rem!important;}
.txt-36 {font-size:3.6rem!important;}
.txt-38 {font-size:3.8rem!important;}
.txt-40 {font-size:4rem!important;}
.txt-42 {font-size:4.2rem!important;}
.txt-44 {font-size:4.4rem!important;}
.txt-46 {font-size:4.6rem!important;}
.txt-48 {font-size:4.8rem!important;}
.txt-50 {font-size:5rem!important;}
.txt-52 {font-size:5.2rem!important;}
.txt-54 {font-size:5.4rem!important;}
.txt-56 {font-size:5.6rem!important;}
.txt-58 {font-size:5.8rem!important;}
.txt-60 {font-size:6rem!important;}
.txt-70 {font-size:7rem!important;}
.txt-80 {font-size:8rem!important;}
.txt-90 {font-size:9rem!important;}
.txt-100 {font-size:10rem!important;}
.txt-110 {font-size:11rem!important;}
.txt-120 {font-size:12rem!important;}
.txt-130 {font-size:13rem!important;}
.txt-140 {font-size:14rem!important;}
.txt-150 {font-size:15rem!important;}
.txt-160 {font-size:16rem!important;}
.txt-170 {font-size:17rem!important;}
.txt-180 {font-size:18rem!important;}
@media screen and (max-width:1399px) {
	.txt-140 {font-size:11rem!important;}
	.txt-180 {font-size:15rem!important;}
}
@media screen and (max-width:1023px) {
	.txt-60 {font-size:5.4rem!important;}
	.txt-100 {font-size:7.4rem!important;}
	.txt-130 {font-size:10rem!important;}
	.txt-140 {font-size:7rem!important;}
	.txt-180 {font-size:9rem!important;}
}
@media screen and (max-width:767px) {
	.txt-18 {font-size:1.4rem!important;}
	.txt-30 {font-size:1.8rem!important;}
	.txt-22 {font-size:2rem!important;}
	.txt-24 {font-size:2rem!important;}
	.txt-60 {font-size:5rem!important;}
	.txt-100 {font-size:5rem!important;}
	.txt-130 {font-size:6.4rem!important;}
	.txt-140 {font-size:6rem!important;}
	.txt-180 {font-size:8rem!important;}
}

.font-ns {font-family:"Noto Sans KR",sans-serif;}
.font-agbk {font-family:"ITC Avant Garde Pro Bk",sans-serif;}
.font-agxlt {font-family:"ITC Avant Garde Pro XLt",sans-serif;}
.font-dd {font-family:"Didot",serif;}
.font-mn {font-family:"Minion Pro",serif;}

.font-900 {font-weight:900;}
.font-800 {font-weight:800;}
.font-700 {font-weight:700;}
.font-600 {font-weight:600;}
.font-500 {font-weight:500;}
.font-400 {font-weight:400;}
.font-300 {font-weight:300;}
.font-200 {font-weight:200;}
.font-100 {font-weight:100;}

.font-italic {font-style:italic;}

/* text align */
.left {text-align:left!important;}
.center {text-align:center!important;}
.right {text-align:right!important;}

/* background color */
.bg-primary {background-color:var(--color-primary);}
.bg-secondary {background-color:var(--color-secondary);}
.bg-black {background-color:var(--color-black);}
.bg-gray01 {background-color:var(--color-gray01);}
.bg-gray02 {background-color:var(--color-gray02);}
.bg-gray03 {background-color:var(--color-gray03);}
.bg-white {background-color:var(--color-white);}

/* text color */
.txt-primary {color:var(--font-color-primary);}
.txt-secondary {color:var(--font-color-secondary);}
.txt-black {color:var(--font-color-black);}
.txt-gray01 {color:var(--font-color-gray01);}
.txt-gray02 {color:var(--font-color-gray02);}
.txt-gray03 {color:var(--font-color-gray03);}
.txt-white {color:var(--font-color-white);}

/* input */
input:focus,
select:focus,
textarea:focus {outline:none;}
input[type="text"],
input[type="tel"], 
input[type="date"],
input[type="password"],
select {position:relative; display:block; max-height:55px; padding:20px 0; background-color:transparent; border-bottom:1px solid var(--border-color-white); font-size:1.6rem; transition:all 0.25s ease; -webkit-border-radius:0; -webkit-appearance:none;}
textarea {position:relative; display:block; width:100%; height:300px; padding:20px 25px; background-color:transparent; border:1px solid var(--border-color-white); font-size:1.6rem; resize:none; transition:all 0.25s ease; -webkit-border-radius:0; -webkit-appearance:none;}
input[type="checkbox"],
input[type="radio"] {display:none;}
input::placeholder {color:var(--font-color-gray02); opacity:50%;}
input[type="text"]:focus,
input[type="tel"]:focus, 
input[type="date"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {border-color:var(--color-primary);}
.form-area {position:relative;}
.form-area label {display:inline-block; width:100%; padding:5px 0; font-weight:bold;}
.form-area > div {position:relative; width:100%; margin:10px 0;}
.form-area > div > button {position:absolute; top:50%; right:10px; transform:translate(0,-50%);}
div.rdi-area,
div.chk-area {display:flex; flex-direction:row;}
ul.rdi-area,
ul.chk-area {display:flex; flex-direction:column;}
.rdi-area > li,
.chk-area > li {display:flex; flex-direction:column; justify-content:space-between; padding:10px 0;}
.rdi-area > li label,
.chk-area > li label {position:relative; display:inline-block; padding:0 10px 0 35px; font-size:1.6rem; transition:all 0.3s ease;}
.rdi-area > li input[type="radio"] + label::before {content:""; position:absolute; top:50%; left:0; width:20px; height:20px; border-radius:50%; border:1px solid var(--border-color-gray04); background-color:transparent; transform:translate(0,-50%); transition:all 0.3s ease;}
.rdi-area > li input[type="radio"] + label::after {content:""; position:absolute; top:50%; left:4px; width:12px; height:12px; border-radius:50%; background-color:transparent; transform:translate(0,-50%); transition:all 0.3s ease;}
.rdi-area > li input[type="radio"]:checked + label::before {border-color:var(--border-color-gray01);}
.rdi-area > li input[type="radio"]:checked + label::after {background-color:var(--color-primary);}
.rdi-area > li input[type="radio"]:disabled + label {color:var(--font-color-gray05);}
.rdi-area > li input[type="radio"]:disabled + label::before {border-color:var(--border-color-gray05);}
.rdi-area > li input[type="radio"]:disabled + label::after {background-color:transparent;}
.rdi-area > li input[type="radio"]:disabled:checked + label::after {background-color:var(--border-color-gray05);}
.chk-area > li input[type="checkbox"] + label::before {content:""; position:absolute; top:2px; left:0; box-sizing:border-box; width:20px; height:20px; border:1px solid var(--border-color-gray04);}
.chk-area > li input[type="checkbox"] + label::after {content:""; position:absolute; top:6px; left:4px; box-sizing:border-box; width:12px; height:12px; background-color:transparent;}
.chk-area > li input[type="checkbox"]:checked + label::before {border-color:var(--border-color-gray01);}
.chk-area > li input[type="checkbox"]:checked + label::after {background-color:var(--color-primary);}
.chk-area > li input[type="checkbox"]:disabled + label {color:var(--font-color-gray05);}
.chk-area > li input[type="checkbox"]:disabled + label::before {border-color:var(--border-color-gray05);}
.chk-area > li input[type="checkbox"]:disabled + label::after {background-color:transparent;}
.chk-area > li input[type="checkbox"]:disabled:checked + label::after {background-color:var(--border-color-gray05);}
.chk-area > li input[type="checkbox"] + label > a {position:relative; display:inline-block; margin:0 0 0 5px ; color:var(--font-color-gray01); font-size:1.5rem; vertical-align:top;}
.chk-area > li input[type="checkbox"] + label > a::before {content:""; position:absolute; bottom:2px; left:0; right:0; display:inline-block; width:100%; height:1px; background-color:var(--color-gray01);}
.chk-area.type-btn {overflow:hidden; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; margin-top:-20px;}
.chk-area.type-btn > li {min-width:unset; padding:unset; margin-top:20px;}
.chk-area.type-btn > li:not(:last-child) {border-bottom:0; margin-right:10px;}
.chk-area.type-btn > li label {padding:14px 25px; cursor:pointer;}
.chk-area.type-btn > li input[type="checkbox"] + label::before {top:0; left:0; z-index:-1; width:100%; height:100%; border:1px solid var(--border-color-white); border-radius:20px; transform:translate(0,0);}
.chk-area.type-btn > li input[type="checkbox"]:checked + label {color:var(--font-color-black);}
.chk-area.type-btn > li input[type="checkbox"]:checked + label::before {background-image:none; background-color:var(--color-white);}
@media screen and (max-width:767px) {
	input[type="text"],
	input[type="tel"],
	input[type="date"],
	input[type="password"],
	select {max-height:42px; padding:12px 0; font-size:1.4rem;}
	textarea {height:200px; padding:18px 20px; font-size:1.4rem;}
	.chk-wrap > li label,
	.rdi-wrap > li label {padding:0 10px 0 25px; font-size:1.4rem;}
	.chk-wrap.type-btn {margin-top:-15px;}
	.chk-wrap.type-btn > li {margin-top:15px;}
	.chk-wrap.type-btn > li label {padding:10px 20px;}
}

/* ico */
i.ico-arr-right {position:relative; display:inline-block; width:10px; height:10px; margin-left:15px;}
i.ico-arr-right::before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; width:0; height:0; border-style:solid; border-width:5px 0 5px 6px; border-color:transparent transparent transparent var(--border-color-white); background-color:transparent; transition:all 0.15s ease;}

/* button */
div.btn-area {display:block; width:100%; line-height:0;}
div.btn-area > .btn {width:100%;}
div.btn-area > .btn + .btn {margin-top:10px;}
ul.btn-area.btn-list {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start;}
ul.btn-area.btn-list > li {width:unset;}
ul.btn-area.btn-list > li:not(:last-child) {margin-right:10px;}
ul.btn-area.btn-list.center {justify-content:center;}
ul.btn-area.btn-list.right {justify-content:flex-end;}
ul.btn-area.btn-col {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; width:100%;}
ul.btn-area.btn-col > li {width:calc((100% - 10px) /2);}
ul.btn-area.btn-col > li:not(:nth-child(2n)) {margin-right:10px;}
ul.btn-area.btn-col > li:nth-child(n+3) {margin-top:10px;}
.btn {display:inline-block; font-family:"ITC Avant Garde Pro Bk",sans-serif; line-height:1.5; text-align:center; transition:all 0.15s ease;}
.btn-xs {padding:6px 8px; font-size:1.2rem;}
.btn-sm {padding:6px 10px; font-size:1.4rem;}
.btn-md {min-width:285px; padding:9px 15px; font-size:1.6rem;}
.btn-lg {padding:9px 20px; font-size:1.8rem;}
.btn-xl {padding:9px 25px; font-size:2rem;}
.btn-primary {background-color:var(--color-primary); border:1px solid var(--border-color-primary); color:var(--font-color-white);}
.btn-secondary {background-color:var(--color-secondary); border:1px solid var(--border-color-secondary); color:var(--font-color-white);}
.btn-success {background-color:var(--color-success); border:1px solid var(--border-color-success); color:var(--font-color-white);}
.btn-danger {background-color:var(--color-danger); border:1px solid var(--border-color-danger); color:var(--font-color-white);}
.btn-warning {background-color:var(--color-warning); border:1px solid var(--border-color-warning); color:var(--font-color-black);}
.btn-info {background-color:var(--color-info); border:1px solid var(--border-color-info); color:var(--font-color-black);}
.btn-dark {background-color:var(--color-gray01); border:1px solid var(--color-gray01); color:var(--font-color-white);}
.btn-light {background-color:var(--color-gray05); border:1px solid var(--color-gray05); color:var(--font-color-black);}
.btn-outline-primary {background-color:transparent; border:1px solid var(--border-color-primary); color:var(--font-color-primary);}
.btn-outline-secondary {background-color:transparent; border:1px solid var(--border-color-secondary); color:var(--font-color-secondary);}
.btn-outline-success {background-color:transparent; border:1px solid var(--border-color-success); color:var(--font-color-success);}
.btn-outline-danger {background-color:transparent; border:1px solid var(--border-color-danger); color:var(--font-color-danger);}
.btn-outline-warning {background-color:transparent; border:1px solid var(--border-color-warning); color:var(--font-color-warning);}
.btn-outline-info {background-color:transparent; border:1px solid var(--border-color-info); color:var(--font-color-info);}
.btn-outline-dark {background-color:transparent; border:1px solid var(--color-gray01); color:var(--font-color-gray01);}
.btn-outline-light {background-color:transparent; border:1px solid var(--color-white); color:var(--font-color-white);}
.btn-outline-light:hover {background-color:var(--color-white); color:var(--font-color-primary);}
.btn-outline-light:hover .ico-arr-right::before {border-color:transparent transparent transparent var(--border-color-primary);}
.btn-radius {border-radius:10px;}
.btn-arr {position:relative; padding-right:40px;}
.btn-arr::before {content:""; width:8px; height:1px; background-color:#333; transform:rotate(45deg); position:absolute; top:16px; right:20px;}
.btn-arr::after {content:""; width:8px; height:1px; background-color:#333; transform:rotate(135deg); position:absolute; top:21px; right:20px;}
.btn-arr.btn-primary::before,
.btn-arr.btn-primary::after {background-color:var(--color-white)!important;}
@media screen and (max-width:767px) {
	.btn-xs {padding:6px 5px; font-size:1rem;}
	.btn-sm {padding:6px 8px; font-size:1.2rem;}
	.btn-md {padding:10px 10px; font-size:1.4rem;}
	.btn-lg {padding:10px 12px; font-size:1.6rem;}
	.btn-xl {padding:10px 15px; font-size:1.8rem;}
	.btn-radius {border-radius:8px;}
	.btn-arr {padding-right:30px;}
	.btn-arr::before {width:7px; top:11px; right:15px;}
	.btn-arr::after {width:7px; top:16px; right:15px;}
	ul.btn-area.btn-list.center li:only-child {width:100%;}
	ul.btn-area.btn-list.center li:only-child > .btn {width:100%;}
}

/* table */
.table-area {border:1px solid var(--color-primary); table-layout:fixed;}
.table-area th {padding:5px 10px; background-color:var(--color-primary); color:var(--font-color-white); font-weight:600; text-align:left;}
.table-area td {padding:5px 10px; word-break:break-all;}
.table-area th.center, 
.table-area td.center {padding-left:0; padding-right:0; text-align:center;}
.table-area td.right {padding-left:0; padding-right:10px; text-align:right;}
.table-row th,
.table-row td {border-bottom:solid 1px var(--border-color-gray04); border-right:solid 1px var(--border-color-gray04);}
.table-row td:last-child {border-right:0;}
.table-row tr.bor-right th, 
.table-row tr.bor-right td {border-right:solid 1px var(--border-color-gray04)!important;}
.table-col th, 
.table-col td {border-right:solid 1px var(--border-color-gray04); border-bottom:solid 1px var(--border-color-gray04);}
.table-col tr th:last-child, 
.table-col tr td:last-child {border-right:0!important;}
.table-col tr.bor-right th, 
.table-col tr.bor-right td {border-right:solid 1px var(--border-color-gray04)!important;}

/* list */
.list-area {display:flex; flex-direction:column; width:100%; margin:5px 0;}
.list-area > li {display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%;}
.list-area > li:not(:last-child) {margin-bottom:5px;}
@media screen and (max-width:767px) {}

/* list bullet */
.bull-area > li:not(:last-child),
.bull-area > dd:not(:last-child) {margin-bottom:5px;}
.bull-dot > li,
.bull-dot > dd {position:relative; padding-left:13px;}
.bull-dot > li::before,
.bull-dot > dd::before {content:'·'; position:absolute; left:0;}
.bull-hypn > li,
.bull-hypn > dd {position:relative; padding-left:15px;}
.bull-hypn > li::before,
.bull-hypn > dd::before {content:'-'; position:absolute; left:0;}
.bull-refer > li,
.bull-refer > dd {position:relative; padding-left:20px;}
.bull-refer > li::before,
.bull-refer > dd::before {content:'※'; position:absolute; left:0;}
.bull-star > li,
.bull-star > dd {position:relative; padding-left:15px;}
.bull-star > li::before,
.bull-star > dd::before { content:'*'; position:absolute; left:0; top:65%; transform:translate(0, -50%);}
.bull-sqr > li,
.bull-sqr > dd {position:relative; padding-left:20px;}
.bull-sqr > li::before,
.bull-sqr > dd::before {content:'□'; position:absolute; left:0; top:50%; transform:translate(0, -50%); font-size:0.8rem;}
.bull-prlgrm > li,
.bull-prlgrm > dd {position:relative; padding:2px 0 2px 35px;}
.bull-prlgrm > li:not(:last-child),
.bull-prlgrm > dd:not(:last-child) {margin-bottom:40px;}
.bull-prlgrm > li::before,
.bull-prlgrm > dd::before {content:""; position:absolute; top:0; left:7px; width:7px; height:30px; background-color:var(--color-primary); transform:skewX(-18deg);}
.bull-num > li,
.bull-num > dd {position:relative; padding-left:20px; counter-increment:number;}
.bull-num > li:not(:last-child),
.bull-num > dd:not(:last-child) {margin-bottom:10px;}
.bull-num > li::before,
.bull-num > dd::before {content:counter(number,decimal)"."; position:absolute; top:1px; left:0;}
.bull-xs > li,
.bull-xs > dd {font-size:1.2rem;}
.bull-sm > li,
.bull-sm > dd {font-size:1.4rem;}
.bull-md > li,
.bull-md > dd {font-size:1.6rem;}
.bull-lg > li,
.bull-lg > dd {font-size:1.8rem;}
.bull-xl > li,
.bull-xl > dd {font-size:2rem;}
.bull-num.bull-sm > li::before,
.bull-num.bull-sm > dd::before {font-size:1.4rem;}
@media screen and (max-width:767px) {
	.bull-xs > li,
	.bull-xs > dd {font-size:1rem;}
	.bull-sm > li,
	.bull-sm > dd {font-size:1.2rem;}
	.bull-md > li,
	.bull-md > dd {font-size:1.4rem;}
	.bull-lg > li,
	.bull-lg > dd {font-size:1.4rem;}
	.bull-xl > li,
	.bull-xl > dd {font-size:1.8rem;}
	.bull-prlgrm > li,
	.bull-prlgrm > dd {position:relative; padding:0 0 0 20px; line-height:1.25;}
	.bull-prlgrm > li:not(:last-child),
	.bull-prlgrm > dd:not(:last-child) {margin-bottom:20px;}
	.bull-prlgrm > li::before,
	.bull-prlgrm > dd::before {left:5px; width:4px; height:18px;}
}

/* img */
.img-area {background:center / cover no-repeat; line-height:0;}
.img-area > img {display:inline-block; width:100%;}

/* box */
.box-area {padding:35px 40px; font-size:1.6rem;}
.box-radius {border-radius:20px;}
.box-outline-primary {border:1px solid var(--border-color-primary);}
.box-outline-secondary {border:1px solid var(--border-color-secondary);}
.box-outline-black {border:1px solid var(--border-color-black);}
.box-outline-gray01 {border:1px solid var(--border-color-gray01);}
.box-outline-gray02 {border:1px solid var(--border-color-gray02);}
.box-outline-gray03 {border:1px solid var(--border-color-gray03);}
.box-outline-gray04 {border:1px solid var(--border-color-gray04);}
.box-outline-gray05 {border:1px solid var(--border-color-gray05);}
.box-outline-white {border:1px solid var(--border-color-white);}
.box-bg-primary {background-color:var(--color-primary);}
.box-bg-secondary {background-color:var(--color-secondary);}
.box-bg-black {background-color:var(--color-black);}
.box-bg-gray01 {background-color:var(--color-gray01);}
.box-bg-gray02 {background-color:var(--color-gray02);}
.box-bg-gray03 {background-color:var(--color-gray03);}
.box-bg-gray04 {background-color:var(--color-gray04);}
.box-bg-gray05 {background-color:var(--color-gray05);}
.box-bg-white {background-color:var(--color-white);}
@media screen and (max-width:767px) {
	.box-area.box-radius {border-radius:10px;}
}

/* animation */
.ani-slide-top {opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.on.ani-slide-top {opacity:1; transform:translateY(0);}
.ani-fade-in {opacity:0; filter:blur(5px); transition:all 0.75s ease;}
.on.ani-fade-in {opacity:1; filter:blur(0);}

/* keyframe */
@keyframes rollingRightToLeftOriginal {
	0% {transform:translateX(0);}
	50% {transform:translateX(-100%);}
	50.01% {transform:translateX(100%);}
	100% {transform:translateX(0);}
}
@keyframes rollingRightToLeftClone {
	0% {transform:translateX(0);}
	100% {transform:translateX(-200%);}
}

@keyframes rollingLeftToRightOriginal {
	0% {transform:translateX(0);}
	50% {transform:translateX(100%);}
	50.01% {transform:translateX(-100%);}
	100% {transform:translateX(0);}
} 
@keyframes rollingLeftToRightClone {
	0% {transform:translateX(-200%);}
	100% {transform:translateX(0);}
}

@keyframes rotate100p{
    100% {transform:rotate(360deg);}
}

@keyframes rotateTxt {
	0% {transform:perspective(1000px) rotateZ(-345deg) rotateY(0deg);}
	100% {transform:perspective(1000px) rotateZ(-345deg) rotateY(-360deg);}
}

@keyframes upDownImg {
	0% {transform:translateY(10px) translateZ(1px);}
	100% {transform:translateY(-10px) translateZ(1px);}
}
