@charset "utf-8";

.ctt_admin { display:none !important; } /* Admin Menu Disabled */

#coWrap { margin-top:3rem; }
#coWrap .content {}
#coWrap .banner {
	width: 100%;
    height: 450px;
    padding: 0 10rem 0 4rem;
	background-color:#f3f2ff;
    border-radius: 20px;
    display: flex;
    align-items: center;
}
#coWrap .banner article {
    max-width: 600px;
}
#coWrap .banner article h1 {
    font-family: "Paperlogy";
    font-size: 3rem;
    color: #000;
    font-weight: 700;
    word-break: keep-all;
}
#coWrap .banner article h1 b {
    color: #f20000;
    font-weight: 700;
}
#coWrap .banner article p {
    font-size: 1.2rem;
    color: #424242;
    line-height: 1.75rem;
    word-break: keep-all;
    margin-top: 2rem;
}
#coWrap .banner .motion {
    position: relative;
    width: 300px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}
#coWrap .banner .motion img {
    width: 100%;
    height: auto;
}
#coWrap .banner .motion .bannerImg {
    transform:translateY(-6px);
    animation: motionImg ease-in-out 2s infinite;
}
#coWrap .banner .motion .bannerImgShadow {
    width: 200px;
    height: 3px;
    filter: blur(10px);
    background-color: #000;
    border-radius: 100%;
    mix-blend-mode: multiply;
    transform:translateY(6px);
    opacity: 1;
    animation: motionShadow ease-in-out 2s infinite;
}
@keyframes motionImg {
    0%, 100% {
        transform: translateY(6px);
    }
    50% {
        transform: translateY(-6px);
    }
}
@keyframes motionShadow {
    0%, 100% {
        transform: translateY(-6px);
        opacity: 1;
    }
    50% {
        transform: translateY(6px);
        opacity: 0.5;
    }
}

#coWrap .rowTitle { margin-top: 5rem; }
#coWrap .rowTitle h1 {
    font-family: "Paperlogy";
    font-size: 1.5rem;
    color: #000;
    font-weight: 600;
}
#coWrap .rowTitle p {
    font-size: 1rem;
    color: #424242;
    font-weight: 400;
    margin-top: 0.5rem;
}

#coWrap .itemBox {
    margin-top: 2rem;
    text-align: center;
    display: flex;
    gap: 20px;
}
#coWrap .itemBox .item {
    position: relative;
    width: 20%;
    padding: 1.5rem;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 20px;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#coWrap .itemBox .item i {
    min-width: 64px;
    aspect-ratio: 1/1;
    background-position: 50% 50%;
    background-size: auto 64px;
    background-repeat: no-repeat;
}
#coWrap .itemBox .item:nth-of-type(1) i { background-image: url('img/icon_item_01.png'); }
#coWrap .itemBox .item:nth-of-type(2) i { background-image: url('img/icon_item_02.png'); }
#coWrap .itemBox .item:nth-of-type(3) i { background-image: url('img/icon_item_03.png'); }
#coWrap .itemBox .item:nth-of-type(4) i { background-image: url('img/icon_item_04.png'); }
#coWrap .itemBox .item:nth-of-type(5) i { background-image: url('img/icon_item_05.png'); }
#coWrap .itemBox .item:hover {
    background-color: #fff;
    box-shadow: 0 6px 6px 0 rgba(200, 200, 200, 0.1);
}
#coWrap .itemBox .item em {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23616161' d='M14.8,0C15.5,0,16,0.5,16,1.2v12c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2V4.1L2,15.6c-0.5,0.5-1.2,0.5-1.7,0 c-0.5-0.5-0.5-1.2,0-1.7L11.9,2.4H2.8c-0.7,0-1.2-0.5-1.2-1.2C1.6,0.5,2.1,0,2.8,0L14.8,0L14.8,0z'/%3E%3C/svg%3E");
    background-position: 50% 50%;
    background-size: 16px;
    background-repeat: no-repeat;
    transition: all 0.25s ease-in-out;
}
#coWrap .itemBox .item:hover em { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F20000' d='M14.8,0C15.5,0,16,0.5,16,1.2v12c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2V4.1L2,15.6c-0.5,0.5-1.2,0.5-1.7,0 c-0.5-0.5-0.5-1.2,0-1.7L11.9,2.4H2.8c-0.7,0-1.2-0.5-1.2-1.2C1.6,0.5,2.1,0,2.8,0L14.8,0L14.8,0z'/%3E%3C/svg%3E"); }
#coWrap .itemBox .item strong {
    font-size: 1.25rem;
    color: #000;
    font-weight: 600;
    margin-top: 1rem;
    display: block;
}
#coWrap .itemBox .item p {
    font-size: 0.96rem;
    color: #424242;
    font-weight: 400;
    line-height: 1.25rem;
    word-break: keep-all;
    margin-top: 0.3rem;
}

#coWrap .typeBox {
    margin-top: 2rem;
    text-align: left;
    display: flex;
    gap: 20px;
}
#coWrap .typeBox .type {
    width: 33.333%;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
#coWrap .typeBox .type:nth-of-type(1) { background-color: #009688; }
#coWrap .typeBox .type:nth-of-type(2) { background-color: #ff9800; }
#coWrap .typeBox .type:nth-of-type(3) { background-color: #3f51b5; }
#coWrap .typeBox .type i {
    min-width: 80px;
    aspect-ratio: 1/1;
    background-color: #fff;
    background-position: 50% 50%;
    background-size: auto 42px;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: block;
}
#coWrap .typeBox .type:nth-of-type(1) i { background-image: url('img/icon_type_01.png'); }
#coWrap .typeBox .type:nth-of-type(2) i { background-image: url('img/icon_type_02.png'); }
#coWrap .typeBox .type:nth-of-type(3) i { background-image: url('img/icon_type_03.png'); }
#coWrap .typeBox .type figure {
    margin: 0;
    padding: 0;
}
#coWrap .typeBox .type strong {
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}
#coWrap .typeBox .type p {
    font-size: 0.96rem;
    color: #fff;
    font-weight: 400;
    word-break: keep-all;
}

#coWrap .checkBox {
    margin-top: 2rem;
    text-align: left;
    display: flex;
    gap: 20px;
}
#coWrap .checkBox .check {
    width: 25%;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
}
#coWrap .checkBox .check i {
    width: 100%;
    aspect-ratio: 300/200;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    display: block;
}
#coWrap .checkBox .check:nth-of-type(1) i { background-image: url('img/check_01.jpg'); }
#coWrap .checkBox .check:nth-of-type(2) i { background-image: url('img/check_02.jpg'); }
#coWrap .checkBox .check:nth-of-type(3) i { background-image: url('img/check_03.jpg'); }
#coWrap .checkBox .check:nth-of-type(4) i { background-image: url('img/check_04.jpg'); }
#coWrap .checkBox .check strong {
    font-size: 1.25rem;
    color: #000;
    font-weight: 600;
    margin-top: 1rem;
    display: block;
}
#coWrap .checkBox .check p {
    font-size: 0.96rem;
    color: #424242;
    font-weight: 400;
    line-height: 1.25rem;
    word-break: keep-all;
    margin-top: 0.3rem;
}

/*
+----------------------------------------------------------+
+           Mobile Device Less than 768px          +
+----------------------------------------------------------+
*/
@media all and (max-width:768px) {

}