@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}


/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* color */
:root{
	--main-color : #DA9D73;
	--main-bg-color : #000000;
}


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
	word-break: keep-all;
}
html{     
    -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
    -moz-text-size-adjust: none; /*Firefox*/
    -ms-text-size-adjust: none;  /*Ie*/
    -o-text-size-adjust: none; /*old versions of Opera*/
}
body{ font-family: 'Pretendard', sans-serif; letter-spacing: -0.05em; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }
.paging_box .pg_current{ background-color: var(--main-color); border-color: var(--main-color); }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */


/* header */
header{ position: fixed; color: #fff; width: 100%; left: 0; top: 0; padding: 15px 0; z-index: 9; transition: background 0.5s; }
header.black{ background-color: var(--main-bg-color); }
header .inner{ display: flex; justify-content: space-between; align-items: center; }

header .menuBox .menu{ display: flex; font-size: 18px; }
header .menuBox .menu > li{ padding: 0 25px; position: relative; }
header .menuBox .menu > li::after{ content:'|'; position: absolute; right: 0; top: 0; }
header .menuBox .menu > li:last-child:after{ display: none; }

header .menuBox .menu > li .underline{  
	background: linear-gradient(to top, rgba(255,255,255,0.2) 50%, transparent 50%); 
	display: flex; align-items: center;
}
header .menuBox .menu > li .underline::before{ 
	content:''; display:block; width: 20px; height: 20px; transform: scale(2); background-image: url('//top-carffeine.com/img/menu_icon.png'); 
	background-size: cover; background-repeat: no-repeat; background-position: center; margin-right: 15px;
}

header.active{ background-color: var(--main-bg-color); }

@media screen and (max-width: 1250px) { 
	header .menuBox .menu{ font-size: 16px; }
}
@media screen and (max-width: 650px) { 
	header .inner{ flex-wrap: wrap; justify-content: center; }
	header .logoBox{ width: 15vw; padding-right: 10px; }
    header .logoBox img{ width: 100%; }

    header .menuBox{ flex-grow: 1; }
	header .menuBox .menu{ justify-content: center; align-items: center; }
    header .menuBox .menu > li{ 
        flex-grow: 1; text-align: center; padding: 0 10px; display: flex; align-items: center; justify-content: center; 
        font-size: 3.5vw;
    }
    header .menuBox .menu > li .underline{ justify-content: center; padding: 0 5px; }
    header .menuBox .menu > li .underline::before{ display: none; }
}
@media screen and (max-width: 400px) { 
	header .logoBox{ width: 20vw; }
    header .menuBox .menu > li{ font-size: 3.5vw; }
}

/* common addition */
.bgBlack{ background-color: #000; color: #fff; }
.write_bg .titleBox{ color: #fff; }
.sec_top{ padding-top: 184px;  }



/* footer */
footer{ background-color: #000000; color: #ffff; padding: 50px 0 160px 0; }
footer .inner{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }

footer .company{ font-weight: 500; }
footer .info_list{ margin-top: 10px; }

footer .logoBox { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
footer .logoBox .copy_right{ margin-top: 20px; font-size: 14px; }

@media screen and (max-width: 1250px) { 
    footer{ padding: 50px 0 50px 0; }
}
@media screen and (max-width: 1000px) { 
    footer{ padding: 50px 0 50px 0; }
}
@media screen and (max-width: 950px) { 

	footer .infoBox{ width: 100%; text-align: center; }
	footer .logoBox { margin-top: 50px; width: 100%; align-items: center; }
}

@media screen and (max-width: 650px) { 
	footer .infoBox{ font-size: 14px; }
	footer .infoBox .info_list > li + li{ margin-top: 5px; }
	footer .logoBox .copy_right{ font-size: 12px; }
}


/* main mainArticle */
.main .mainArticle{ 
	background-image: url('//top-carffeine.com/img/main_arti_bg.png'); 
	background-size: cover; background-repeat: no-repeat; background-position: center; 
	overflow: hidden;
}
.main .mainArticle .contentWrap{ display: flex; flex-wrap: wrap;  }
.main .mainArticle .contentWrap > li{ width: 50%; }
.main .mainArticle .contentWrap > li:nth-child(1){ display: flex; align-items: center; justify-content: center; }
.main .mainArticle .contentWrap .titleBox{ 
	display: flex; align-items: center; font-size: 52px; text-align: center; justify-content: center; 
	margin-top: -150px; transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s;
}
.main .mainArticle.on .contentWrap .titleBox{ transform: translateY(0); opacity: 1; }
.main .mainArticle .contentWrap .titleBox .icon{ width: 100px; transform: translateY(15px) translateX(20px); }
.main .mainArticle .contentWrap .titleBox .icon.right{ transform: scaleX(-1) translateY(15px) translateX(20px); }
.main .mainArticle .contentWrap .titleBox .t2{ font-weight: 700; color: var(--main-color); position: relative; }
.main .mainArticle .contentWrap .titleBox .t2::after{ 
	content:''; display: block; width: 100%; height: 2px; background-color: var(--main-color);
	position: absolute; bottom: 0; left: 0; 
}
.main .mainArticle .contentWrap .contentBox{ 
	text-align: center; margin-top: 40px; font-size: 26px; line-height: 1.5em; 
	transform: translateY(20px); opacity: 0; transition: transform 1s, opacity 1s
}
.main .mainArticle.on .contentWrap .contentBox{ transform: translateY(0); opacity: 1; }

.main .mainArticle .contentWrap > li .phone{ width: 100%; transform: translateX(100px); transition: transform 1s; }
.main .mainArticle.on .contentWrap > li .phone{ transform: translateX(18%); }


@media screen and (max-width: 1250px) { 
	.main .mainArticle .contentWrap .titleBox{ font-size: 35px; }
	.main .mainArticle .contentWrap .titleBox .icon{ width: 75px; }
	.main .mainArticle .contentWrap .contentBox{ font-size: 20px; }

	.main .mainArticle .contentWrap > li:nth-child(1){ width: 60%; }
	.main .mainArticle .contentWrap > li:nth-child(2){ width: 40%; }
}
@media screen and (max-width: 950px) { 
    .main .mainArticle{ padding-top: 140px; }
	.main .mainArticle .contentWrap > li:nth-child(1){ width: 100%; }
	.main .mainArticle .contentWrap > li:nth-child(2){ width: 100%; margin-top: 50px; display: flex; justify-content: center; }

	.main .mainArticle .contentWrap .titleBox{ margin-top: 0; }
	.main .mainArticle .contentWrap > li .phone{ display: block; max-width: 450px; transform: translateX(18%) }
}
@media screen and (max-width: 650px) { 
	.main .mainArticle .contentWrap .titleBox{ font-size: 7vw; }
	.main .mainArticle .contentWrap .titleBox .icon{ width: 16vw; }
	.main .mainArticle .contentWrap .contentBox{ font-size: 3.6vw; }

}


/* main conditionArti */
.main .conditionArti{ padding: 100px 0; position: relative; }

.main .conditionArti .circle{ 
	position: absolute; background-color: #222; width: 100%; height: 70%; border-radius: 50%; 
	bottom: -35%;
}

.main .conditionArti .inner{ position: relative; z-index: 2; }

.main .conditionArti .titleBox{ text-align: center; transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; }
.main .conditionArti.on .titleBox{ transform: translateY(0); opacity: 1; }

.main .conditionArti .titleBox .icon{ display: block; margin: 0 auto; width: 70px; }
.main .conditionArti .titleBox .t1{ margin: 25px 0; font-size: 36px; font-weight: 700; }

.main .conditionArti .carList{ display: flex; flex-wrap: wrap; margin-top: 50px; }

.main .conditionArti .carList > li { width: calc(100% / 4); padding: 10px; transform: translateY(100px); opacity: 0; transition: opacity 1s, transform 1s; }
.main .conditionArti .carList > li:nth-child(1){ transition-delay: 0; }
.main .conditionArti .carList > li:nth-child(2){ transition-delay: 0.2s; }
.main .conditionArti .carList > li:nth-child(3){ transition-delay: 0.4s; }
.main .conditionArti .carList > li:nth-child(4){ transition-delay: 0.6s; }
.main .conditionArti.on .carList > li { transform: translateY(0); opacity: 1;  }

.main .conditionArti .carList > li .title{ text-align: center; font-size: 20px; }
.main .conditionArti .carList > li .item{ 
	background-color: #F6F7FC; color: #000; margin-top: 20px; border-radius: 20px; 
	padding: 0 15px 15px 15px; text-align: center; font-weight: 700; 
}
.main .conditionArti .carList > li:nth-child(2n){ margin-top: 40px; }
.main .conditionArti .carList > li .item .icon img{ display: block; margin: 0 auto; transform: translateY(-20px); }
.main .conditionArti .carList > li .item .t1{ font-size: 20px; }
.main .conditionArti .carList > li .item .t2{ font-size: 32px; }

@media screen and (max-width: 1250px) { 
	.main .conditionArti .titleBox .icon{ width: 60px; }
	.main .conditionArti .titleBox .t1{ font-size: 30px; }
	.main .conditionArti .carList > li .item .icon img{ width: 100%; }

	.main .conditionArti .carList > li .item .t1{ font-size: 18px; }
	.main .conditionArti .carList > li .item .t2{ font-size: 28px; }
}
@media screen and (max-width: 850px) { 
	.main .conditionArti .carList > li { width: calc(100% / 2); }

	.main .conditionArti .carList > li .item .icon img{ max-width: 220px; }
}
@media screen and (max-width: 650px) { 
	.main .conditionArti .circle{ display: none; }
	.main .conditionArti .titleBox .icon{ width: 40px; }
	.main .conditionArti .titleBox .t1{ font-size: 20px; }
	.main .conditionArti .titleBox .content{ font-size: 14px; }

	.main .conditionArti .carList > li{ padding: 5px; }
	.main .conditionArti .carList > li .title{ font-size: 14px; }
	.main .conditionArti .carList > li .item .t1{ font-size: 3vw; }
	.main .conditionArti .carList > li .item .t2{ font-size: 5vw; }
}

/* main contractArti */
.main .contractArti{ padding: 0 0 50px 0; background-color: #222; overflow: hidden; }
.main .contractArti .inner{ position: relative; z-index: 1; }

.main .contractArti .titleBox{ 
	display: flex; justify-content: center; align-items: center; font-size: 30px; 
	transform: translateY(50px); opacity: 0; transition: opacity 1s, transform 1s;
}
.main .contractArti.on .titleBox{ transform: translateY(0); opacity: 1; }
.main .contractArti .titleBox .icon{ margin-right: 10px; }
.main .contractArti .titleBox .gold{ color: var(--main-color); font-weight: 700; }

.main .contractArti .halfBox{ display: flex; flex-wrap: wrap; margin-top: 50px;  }
.main .contractArti .halfBox > li{ width: calc(100% / 2); padding: 10px; }
.main .contractArti .halfBox > li .title{ text-align: center; font-size: 28px; animation: Color1 ease-in-out 2s infinite;  }
.main .contractArti .halfBox > li .item{ 
	background-color: #fff; color: #000; margin-top: 10px; border-radius: 10px; 
	display: flex; align-items: center; flex-wrap: wrap; padding: 20px 30px;
	position: relative; z-index: 1;
}
.main .contractArti .halfBox > li .item .icon{ 
	width: 125px; height: 125px; background-repeat: no-repeat; background-position: center; background-size: contain; 
	margin-right: 40px;
}
.main .contractArti .halfBox > li:nth-child(1){ padding-right: 50px; position: relative; transform: translateX(50px); opacity: 0; transition: transform 1s, opacity 1s; }
.main .contractArti.on .halfBox > li:nth-child(1){ opacity: 1; transform: translateX(0); }
.main .contractArti .halfBox > li:nth-child(2){ padding-left: 50px; transform: translateX(-50px); opacity: 0; transition: transform 1s, opacity 1s; }
.main .contractArti.on .halfBox > li:nth-child(2){ opacity: 1; transform: translateX(0); }

.main .contractArti .halfBox > li:nth-child(1)::after{ 
	content:''; display: block; position: absolute; width: 50%; height: 150px; 
	right: -25%; bottom: -10%; background-image: url('//top-carffeine.com/img/contract_arti_arrow.png'); background-size: contain; 
	background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1s; transition-delay: 0.5s;
}
.main .contractArti.on .halfBox > li:nth-child(1)::after{ opacity: 1; }

.main .contractArti .halfBox > li:nth-child(1) .item .icon{ background-image: url('//top-carffeine.com/img/contract_icon01.png'); }
.main .contractArti .halfBox > li:nth-child(2) .item .icon{ background-image: url('//top-carffeine.com/img/contract_icon02.png'); }

.main .contractArti .halfBox > li .item .info{ width: calc(100% - 165px); }
.main .contractArti .halfBox > li .item .info .info_list{ font-size: 20px; }
.main .contractArti .halfBox > li .item .info .info_list > li{ display: flex; }
.main .contractArti .halfBox > li .item .info .info_list > li + li{ margin-top: 5px; }
.main .contractArti .halfBox > li .item .info .info_list > li .c1{ width: 120px; position: relative; }
.main .contractArti .halfBox > li .item .info .info_list > li .c1::after{ 
	content:''; display: block; width: 1px; height: calc(100% + 5px); position: absolute; right: 0; top: 0; 
	background-color: #D9D9D9;
}
.main .contractArti .halfBox > li .item .info .info_list > li:last-child .c1::after{ height: 100%; }
.main .contractArti .halfBox > li .item .info .info_list > li .c2{ padding-left: 20px; }

.main .contractArti .halfBox > li .item .info .month{ 
	background-color: var(--main-color); color: #fff; padding:5px 10px; border-radius: 10px; margin-top: 10px; text-align: center; 
	font-size: 26px; animation : Box1 ease-in-out 2s infinite; 
}

.main .contractArti .titleBox2{ 
	text-align: center; margin-top: 40px; font-size: 26px; font-weight: 700; 
	transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s;
}
.main .contractArti.on .titleBox2{ transform: translateY(0); opacity: 1; }
.main .contractArti .titleBox2 .t2{ font-size: 1.3em; }
.main .contractArti .titleBox2 .t2 b.gold{ color: var(--main-color); }

.main .contractArti .halfBox2{ margin-top: 40px; display: flex; flex-wrap: wrap; }
.main .contractArti .halfBox2 > li{ width: calc(100% / 2); padding: 10px; }
.main .contractArti .halfBox2 > li .item{ 
	background-color: var(--main-bg-color); height: 100%; padding: 30px 10px; border-radius: 20px; 
	display: flex; align-items: center; text-align: center; font-size: 20px;
	line-height: 1.5em;
}
.main .contractArti .halfBox2 > li:nth-child(1) .item{ transform: translateX(50px); opacity: 0; transition: transform 1s, opacity 1s; }
.main .contractArti .halfBox2 > li:nth-child(2) .item{ transform: translateX(-50px); opacity: 0; transition: transform 1s, opacity 1s; }

.main .contractArti.on .halfBox2 > li:nth-child(1) .item{ transform: translateX(0); opacity: 1; }
.main .contractArti.on .halfBox2 > li:nth-child(2) .item{ transform: translateX(0); opacity:1; }


.main .contractArti .halfBox2 > li .item.big{ font-size: 1.5em; }
.main .contractArti .halfBox2 > li .item .txt{ width: 100%; }
.main .contractArti .halfBox2 > li .item b.gold{ color: var(--main-color); font-weight: 700; }

@media screen and (max-width: 1250px) { 
	.main .contractArti .titleBox .icon{ width: 60px; }

	.main .contractArti .halfBox > li .title{ font-size: 20px; }
	.main .contractArti .halfBox > li .item .icon{ width: 100px; margin-right: 40px; }
	.main .contractArti .halfBox > li .item .info{ width: calc(100% - 140px); }
	.main .contractArti .halfBox > li .item .info .info_list{ font-size: 16px; }
	.main .contractArti .halfBox > li .item .info .month{ font-size: 20px; }

	.main .contractArti .titleBox2{ font-size: 25px; }
	.main .contractArti .halfBox2 > li .item{ font-size: 1.6vw; padding: 20px 10px; }
	.main .contractArti .halfBox2 > li .item.big{ font-size: 1.9vw; }
}
@media screen and (max-width: 1030px) { 
	.main .contractArti .halfBox > li .item{ padding: 20px 10px; }
	.main .contractArti .halfBox > li:nth-child(1){ padding-right: 20px; }
	.main .contractArti .halfBox > li:nth-child(2){ padding-left: 20px; }
}
@media screen and (max-width: 950px) { 

	.main .contractArti .titleBox{ flex-wrap: wrap; }
	.main .contractArti .titleBox .title{ width: 100%; text-align: center; margin-top: 20px; }

	.main .contractArti .halfBox > li .item{ flex-direction: column; padding: 20px 25px; }
	.main .contractArti .halfBox > li .item .icon{ margin-right: 0; width: 40%; }
	.main .contractArti .halfBox > li .item .info{ width: 100%; margin-top: 20px; }
	.main .contractArti .halfBox > li .item .info .month{ margin-top: 20px; padding: 10px; }

	.main .contractArti .halfBox > li .item .info .info_list{ font-size: 2vw; }
	.main .contractArti .halfBox > li .item .info .info_list > li .c1{ width: 15vw; }
	.main .contractArti .halfBox > li .item .info .info_list > li .c2{ width: calc(100% - 15vw); }

	.main .contractArti .halfBox > li .item .info .month{ font-size: 2.5vw; padding: 8px; }
	
	.main .contractArti .halfBox2 > li{ width: 100%; }
	.main .contractArti .halfBox2 > li .item{ font-size: 18px; }
	.main .contractArti .halfBox2 > li .item.big{ font-size: 20px; }
}
@media screen and (max-width: 650px) { 
	.main .contractArti{ padding: 50px 0; }
	.main .contractArti .titleBox .icon{ width: 50px; } 
	.main .contractArti .titleBox .title{ font-size: 20px; }

	.main .contractArti .halfBox > li:nth-child(1){ padding: 10px; }
	.main .contractArti .halfBox > li:nth-child(2){ padding: 10px; }
	.main .contractArti .halfBox > li .title{ font-size: 14px; }
	.main .contractArti .halfBox > li .item{ padding: 10px; }
	.main .contractArti .halfBox > li .item .info .info_list{ font-size: 2.5vw; }
    .main .contractArti .halfBox > li .item .info .month{ font-size: 4vw; }

	.main .contractArti .titleBox2{ font-size: 16px; }
	.main .contractArti .halfBox > li:nth-child(1)::after{ height: 100px; bottom: -10px; }

	.main .contractArti .halfBox2 > li{ padding: 5px 10px; }
	.main .contractArti .halfBox2 > li .item{ font-size: 3vw; }
	.main .contractArti .halfBox2 > li .item.big{ font-size: 3.5vw; }

}

/* main slideArti */
.main .slideArti{ 
	padding: 100px 0 0 0; overflow: hidden; 
	background-image: url('//top-carffeine.com/img/affiliate_arti_bg.png'); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.main .slideArti .titleBox{ text-align: center; font-size: 42px; font-weight: 700; }
.main .slideArti .titleBox b.gold{ color: var(--main-color); }

.main .slideArti .mySwiper{ margin-top: 50px; }
.main .slideArti .mySwiper .swiper-slide{ 
	padding: 10px 10px 0 10px; height: auto; 
	display: flex; align-items: flex-end;
}

.main .slideArti .slideBox{ position: relative; }
.main .slideArti .slideBox .btnBox{ 
	position: absolute; display: flex; justify-content: space-between; align-items: center; 
	height: 20%; top: 0; width: calc( (100% - 80px) / 2.5); left: calc(50% - ((100% - 80px) / 5)); 
}
.main .slideArti .slideBox .btnBox img{ display: block; position: relative; z-index: 2; cursor: pointer; width: 70px; }
.main .slideArti .slideBox .btnBox img.nextBtn{ transform: scaleX(-1); }

.main .slideArti .mySwiper .swiper-slide .item{ 
	background-color: #fff; color: #000; width: 100%; border: 4px solid var(--main-color); 
	border-radius: 60px 60px 0 0; overflow: hidden; padding: 0 20px 50px 20px; text-align:center; 
}
.main .slideArti .mySwiper .swiper-slide .item::before{ 
	content:''; display: block; height: 40px; 
	background-image: url('//top-carffeine.com/img/slide_arti_phone_status.png'); background-repeat: no-repeat; background-position: right 20px center;
	background-size: 70px;
}
.main .slideArti .mySwiper .swiper-slide .item .type{ font-weight: 700; font-size: 20px; margin: 20px 0; }
.main .slideArti .mySwiper .swiper-slide .item .iconBox{ 
	width: 250px; height: 250px; background-color: var(--main-bg-color); 
	margin: 0 auto; border-radius: 10px; background-repeat: no-repeat; background-position: center; background-size: 50%;
} 
.main .slideArti .mySwiper .swiper-slide .item .iconBox.icon01{ background-image: url('//top-carffeine.com/img/slide_icon01.png'); }
.main .slideArti .mySwiper .swiper-slide .item .iconBox.icon02{ background-image: url('//top-carffeine.com/img/slide_icon02.png'); }
.main .slideArti .mySwiper .swiper-slide .item .iconBox.icon03{ background-image: url('//top-carffeine.com/img/slide_icon03.png'); }
.main .slideArti .mySwiper .swiper-slide .item .iconBox.icon04{ background-image: url('//top-carffeine.com/img/slide_icon04.png'); }
.main .slideArti .mySwiper .swiper-slide .item .iconBox.icon05{ background-image: url('//top-carffeine.com/img/slide_icon05.png'); }
.main .slideArti .mySwiper .swiper-slide .item .iconBox.icon06{ background-image: url('//top-carffeine.com/img/slide_icon06.png'); }

.main .slideArti .mySwiper .swiper-slide .item .t1{ margin: 20px 0 10px 0; font-size:24px; font-weight: 700; }
.main .slideArti .mySwiper .swiper-slide .item .c1{ font-size: 1vw; line-height: 1.5em;  }
.main .slideArti .mySwiper .swiper-slide .item .c1.small{ font-size: 0.8em; }
.main .slideArti .mySwiper .swiper-slide .item .logo{ 
	display: block; margin: 20px auto 0 auto; max-width: 150px; 
	display: none;
}
.main .slideArti .mySwiper .swiper-slide.swiper-slide-active .item .logo{ display: block; }

@media screen and (max-width: 1250px) { 

	.main .slideArti .titleBox{ font-size: 30px; }

	.main .slideArti .slideBox .btnBox{ width: calc( (100% - 80px) / 2); left: calc(50% - ((100% - 80px) / 4)); }
	.main .slideArti .mySwiper .swiper-slide .item{ padding: 0 5px 50px 5px; }
	.main .slideArti .mySwiper .swiper-slide .item .iconBox{ width: 20vw; height: 20vw; }
	.main .slideArti .mySwiper .swiper-slide .item .c1{ font-size: 1.4vw; }

	.main .slideArti .slideBox .btnBox img{ width: 50px; }
}
@media screen and (max-width: 950px) { 


	.main .slideArti .slideBox .btnBox{ width: calc( (100% - 80px) / 1.3); left: calc(50% - ((100% - 80px) / 2.6)); }
	.main .slideArti .slideBox .btnBox img{ width:70px }

	.main .slideArti .mySwiper .swiper-slide .item .type{ font-size: 2.7vw; }
	.main .slideArti .mySwiper .swiper-slide .item .iconBox{ width: 35vw; height: 35vw; }
	.main .slideArti .mySwiper .swiper-slide .item .t1{ font-size: 2.7vw; }
	.main .slideArti .mySwiper .swiper-slide .item .c1{ font-size: 1.8vw; }
}
@media screen and (max-width: 650px) { 

	.main .slideArti .titleBox{ font-size: 20px; }

	.main .slideArti .slideBox .btnBox{ width: 100%; left:0; }
	.main .slideArti .slideBox .btnBox > li{ padding: 0 10px; }
	.main .slideArti .slideBox .btnBox img{ width:10vw; }
	.main .slideArti .mySwiper .swiper-slide .item{ border-radius: 10vw 10vw 0 0; }
	.main .slideArti .mySwiper .swiper-slide .item .type{ font-size: 4.5vw; margin: 2vw 0; }
	.main .slideArti .mySwiper .swiper-slide .item::before{ background-size: 20%; }
	.main .slideArti .mySwiper .swiper-slide .item .iconBox{ width: 45vw; height: 45vw; }
	.main .slideArti .mySwiper .swiper-slide .item .t1{ font-size: 4vw; margin: 4vw 0 2vw 0; }
	.main .slideArti .mySwiper .swiper-slide .item .c1{ font-size: 3vw; }
	.main .slideArti .mySwiper .swiper-slide .item .logo{ width: 100%; }

    .main .slideArti .mySwiper .swiper-slide .item .c1.small{ font-size: 2.7vw; }
}

/* main affiliateArti */
.main .affiliateArti{ 
	background-image: url('//top-carffeine.com/img/affiliate_arti_bg.png'); background-size: cover; background-repeat: no-repeat; background-position: center; 
	padding: 100px 0;
}

.main .affiliateArti .contentBox{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; }
.main .affiliateArti .contentBox.on{ transform: translateY(0); opacity: 1; }

.main .affiliateArti .contentBox + .contentBox{ margin-top: 150px; }
.main .affiliateArti .contentBox .titleWrap{ text-align: center; font-size: 42px;  }
.main .affiliateArti .contentBox .logoList{ 
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; 
	max-width: 800px; margin: 50px auto 0 auto;
}
.main .affiliateArti .contentBox .logoList > li{ width: calc(100% / 4); padding: 10px; display: flex; align-items: center; justify-content: center; }
.main .affiliateArti .contentBox .logoList > li img{ display: block; max-width: 100%; }

@media screen and (max-width: 1250px) { 
	.main .affiliateArti .contentBox .titleWrap{ font-size: 30px; }
}
@media screen and (max-width: 900px) { 
	.main .affiliateArti .contentBox .titleWrap{ font-size: 20px; }
	.main .affiliateArti .contentBox .logoList > li{ width: calc(100% / 3); }
}
@media screen and (max-width: 650px) { 
	.main .affiliateArti .contentBox .logoList > li{ width: calc(100% / 2); }
}

/* sub common */
.sub .titleBox{ text-align: center; transform: translateY(20px); opacity: 0; transition: opacity 0.5s, transform 0.5s; } 
.sub .titleBox.on{ transform: translateY(0); opacity: 1; }
.sub .titleBox .t1{ font-size: 42px; font-weight: 500;  }
.sub .titleBox .t1 .gold{ color: var(--main-color); }
.sub .titleBox .t1 b{ font-weight: 600; }

.sub .titleBox .t2{ margin-top: 10px; font-size: 20px; }

@media screen and (max-width: 1250px) { 
	.sub .titleBox .t1{ font-size: 30px; }
	.sub .titleBox .t2{ font-size: 16px; }
}
@media screen and (max-width: 650px) { 
	.sub .titleBox .t1{ font-size: 20px; }
	.sub .titleBox .t2{ font-size: 14px; }
}

/* sub01_1 */
.sub01_1 .advantagesArti{ 
	padding: 184px 0 100px 0; background-image: url('//top-carffeine.com/img/main_arti_bg.png');
    background-size: cover; background-repeat: no-repeat;
    background-position: center; overflow: hidden;
}

.sub01_1 .advantagesArti .itemList{ 
	margin-top: 50px; display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; 
	transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s;
}
.sub01_1 .advantagesArti .itemList.on{ transform: translateY(0); opacity: 1; } 


.sub01_1 .advantagesArti .itemList > li { width: calc(100% / 4); padding: 10px; }
.sub01_1 .advantagesArti .itemList > li .item{ 
	background-color: #fff; color: #000; height: 100%; padding: 20px 10px; border: 4px solid var(--main-color); 
	border-radius: 20px; text-align: center;
}
.sub01_1 .advantagesArti .itemList > li .item .icon{ width: 80px; height: 80px; margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center; }
.sub01_1 .advantagesArti .itemList > li:nth-child(1) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon01.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(2) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon02.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(3) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon03.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(4) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon04.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(5) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon05.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(6) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon06.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(7) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon07.png'); }
.sub01_1 .advantagesArti .itemList > li:nth-child(8) .item .icon{ background-image: url('//top-carffeine.com/img/advantages_icon08.png'); }

.sub01_1 .advantagesArti .itemList > li .item .t1{ margin: 10px 0; font-size: 20px; font-weight: 700; }
.sub01_1 .advantagesArti .itemList > li .item .t2{ color: #7f7f7f; font-size: 15px; }

@media screen and (max-width: 1250px) { 
	.sub01_1 .advantagesArti .itemList > li .item .icon{ width: 7vw; height: 7vw; }
	.sub01_1 .advantagesArti .itemList > li .item .t1{ font-size: 1.6vw; }
	.sub01_1 .advantagesArti .itemList > li .item .t2{ font-size: 1.2vw; }
}
@media screen and (max-width: 1000px) { 
	.sub01_1 .advantagesArti .itemList{ justify-content: center; }
	.sub01_1 .advantagesArti .itemList > li{ width: calc(100% / 3); }
	.sub01_1 .advantagesArti .itemList > li .item .t1{ font-size: 18px; }
	.sub01_1 .advantagesArti .itemList > li .item .t2{ font-size: 1.4vw; }
}
@media screen and (max-width: 900px) { 
	.sub01_1 .advantagesArti .itemList{ width: calc(100% + 10px); margin-left: -5px; }
	.sub01_1 .advantagesArti .itemList > li{ padding: 5px; }
	.sub01_1 .advantagesArti .itemList > li .item .t2{ font-size: 1.6vw; }
}
@media screen and (max-width: 790px) { 
	.sub01_1 .advantagesArti .itemList > li{ width: calc(100% / 2); }
	.sub01_1 .advantagesArti .itemList > li .item .t1{ font-size: 18px; }
	.sub01_1 .advantagesArti .itemList > li .item .t2{ font-size: 16px; }
}
@media screen and (max-width: 650px) { 
    .sub01_1 .advantagesArti{ padding-top: 140px; }
	.sub01_1 .advantagesArti .itemList > li .item{ padding: 10px; }
	.sub01_1 .advantagesArti .itemList > li .item .icon{ width: 10vw; height: 10vw; }
	.sub01_1 .advantagesArti .itemList > li .item .t1{ font-size: 3vw; }
	.sub01_1 .advantagesArti .itemList > li .item .t2{ font-size: 2.2vw; }
}
@media screen and (max-width: 500px) { 
	.sub01_1 .advantagesArti .itemList > li{ width: 100%; }
	.sub01_1 .advantagesArti .itemList > li .item{ padding: 20px 10px; }
	.sub01_1 .advantagesArti .itemList > li .item .t1{ font-size: 18px; }
	.sub01_1 .advantagesArti .itemList > li .item .t2{ font-size: 14px; }
}

/*---------------- admin ---------------*/
.adminBox{display:flex; justify-content: flex-end; padding:20px 0;}
.adminBox .admin_list{display:flex; }

.adminBox .admin_list>.item{
    font-size:14px;
    margin-right:5px; padding:5px 5px 5px 29px; display:flex; align-items: center; border-radius: 4px; font-size:14px;  
    background-repeat: no-repeat; background-position: left 5px center; cursor: pointer; background-color:#fff; 
}
.adminBox .admin_list>.item a{ font-size: inherit; }
.adminBox .admin_list .item:nth-child(2n){
    background-color:#f2f2f2; background-repeat: no-repeat; background-position: left 5px center; 
}
.adminBox .admin_list a.admin_icon{background-image: url('//top-carffeine.com/img/board_img/admin_icon.png');}
.adminBox .admin_list .item.write_icon{background-image: url('//top-carffeine.com/img/board_img/write_icon.png');  }
.adminBox .admin_list .more_icon{background-image: url('//top-carffeine.com/img/board_img/comment_menu.png'); position:relative;}
.adminBox .admin_list .reple_icon{background-image: url('//top-carffeine.com/img/board_img/view_reple_icon.png'); position:relative; background-color:#fff; }
.adminBox .admin_list .list_icon{background-image: url('//top-carffeine.com/img/board_img/list_icon.png'); position:relative;}

.adminBox .admin_list li .more_box{
    position:absolute; background:#fff; padding:10px; border: 1px solid #E6E6E6; box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05);
    z-index: 5; top:40px; right:0; display:none; 
}
.adminBox .admin_list li .more_box.on{display:block; }
.adminBox .admin_list li .more_box:before{
    content: "";
    position: absolute;
    top: -8px;
    right: 13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #E6E6E6 transparent;
}
.adminBox .admin_list li .more_box:after{
    content: "";
    position: absolute;
    top: -6px;
    right: 13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #fff transparent;
}

.adminBox .admin_list li.more_icon .more_box{width:90px; font-size:14px; padding:0; }
.adminBox .admin_list li.more_icon .more_box button{background:none; border:none; text-align: center; width:100%; padding:10px; border-bottom:1px solid #e6e6e6; font-size:12px; }
.adminBox .admin_list li.more_icon .more_box .button{ display:block; background:none; border:none; text-align: center; width:100%; padding:10px; border-bottom:1px solid #e6e6e6; font-size:12px; }
.adminBox .admin_list li.more_icon .more_box button:last-child{border-bottom:none; }
.adminBox .admin_list li.more_icon .more_box button > a{ font-size: inherit; }
/*---------------- admin end ---------------*/



/*--------------- basic list ------------*/
.basic_list .basic_list_table{border-collapse: collapse; table-layout: fixed; width:100%; margin-top:10px;  }

.basic_list .basic_list_table tr .list_number{text-align: center; width:10%; }
.basic_list .basic_list_table tr .list_title{width:100%; }
.basic_list .basic_list_table tr .list_title a{display:flex; }
.basic_list .basic_list_table tr .list_writer{text-align: center; width:10%; white-space:nowrap; }
.basic_list .basic_list_table tr .list_hit{text-align: center; width:10%; }
.basic_list .basic_list_table tr .list_date{text-align: center; width:10%;}

.basic_list .basic_list_table tr .list_title a .title{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;  vertical-align: middle; }
.basic_list .basic_list_table tr .list_title .reple_box{background:#666; color:#fff; display:inline-block; padding:0px 6px; font-size:12px; border-radius:4px;  }
.basic_list .basic_list_table tr .list_title a .iconWrap{  width:40px; flex-shrink: 0;}
.basic_list .basic_list_table tr .list_title a .iconWrap2{ width:110px; flex-shrink: 0; padding-left:5px;}

.basic_list .basic_list_table tr input[type=checkbox]{margin-right:5px; }
.basic_list .basic_list_table tr th{padding:16px 5px; border-top:1px solid #e6e6e6;  }
.basic_list .basic_list_table tr td{padding:16px 5px; border-top:1px solid #e6e6e6; }
.basic_list .basic_list_table tr td.list_number.on{color:#40647D; font-size:14px;  }
.basic_list .basic_list_table tr:last-child td{ border-bottom:1px solid #e6e6e6; }


@media screen and (max-width: 1250px) { 
    .basic_list .basic_list_table tr .list_hit{display:none; }
    .basic_list .basic_list_table tr .list_writer{display:none; }
    .basic_list .basic_list_table tr .list_title a .iconWrap2{display:none; }
} 
@media screen and (max-width: 650px) {
    .basic_list .table_th{ display:none; }
    .basic_list .basic_list_table{ font-size: 14px; }
    .basic_list .basic_list_table tr .list_date{display:none; }

    .basic_list .basic_list_table tr td.list_number.on{ font-size:12px; }
} 
/*
@media screen and (max-width: 500px) {
    .basic_list .basic_list_table tr .list_date{display:none; }
    .basic_list .basic_list_table tr .list_number{width:20%; }
    .basic_list .basic_list_table tr .list_title{width:80%; }

}
*/
/*---------------- basic list end ---------------*/

/*---------------- write ---------------*/
.write_page{ margin-top: 20px; background-color: #fff; margin-top: 40px;}
.write_page .title_box{display:flex; }
.write_page .title_box li{display:flex; border-bottom:1px solid #e5e5e5;  }
.write_page .title_box li:first-child{border-top:1px solid #e5e5e5; }
.write_page .title_box li .label_content input[type=text]{padding:12px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%;  }
.write_page .title_box li .label_content input[type=password]{padding:12px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%;  }
.write_page .title_box li .label_content input[type=email]{padding:12px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%;  }

.write_page .title_box .label{width:120px; background:#F7F7F7; padding:20px 16px; font-size:14px; display:flex; align-items: center; }
.write_page .title_box .label b{ color: #EB5757; margin-left: 2px; }
.write_page .title_box .label_content{padding:8px 16px;}
.write_page .title_box.full_box li{width:100%; }
.write_page .title_box.full_box li .label_content{width:calc(100% - 120px); font-size:14px; display:flex; align-items: center;  }
.write_page .title_box.half_box li{width:50%; }
.write_page .title_box.half_box li .label_content{width:calc(100% - 120px); font-size:14px;  }
.write_page .title_box li .label_content select{ padding:12px; width:100%; max-width:300px; border: 1px solid #E6E6E6; border-radius: 4px;}
.write_page .title_box li .label_content label{ margin-right:5px; }
.write_page .title_box li .label_content label input[type=checkbox]{ margin-right:2px; }

.write_page .dhtml_box { margin-top:40px; }
.write_page .dhtml_box .sub_title{display:block; font-size:14px; margin-top:10px;  }
.write_page .dhtml_box textarea{ width:100%; border-radius: 4px; height:130px; border: 1px solid #E6E6E6; padding:15px 10px; font-size:14px; margin-top:5px;  }

.write_page .add_form{ margin-top:20px; }
.write_page .add_form .add_box input{background-repeat: no-repeat; background-position: left 20px center; }
.write_page .add_form .add_box input[type="text"]{ border:1px solid #e6e6e6; margin-bottom:10px; padding:20px 20px 20px 56px; width:100%; border-radius:8px; background-image: url('//top-carffeine.com/img/board_img/write_link_icon.png');  }
.write_page .add_form .add_box input[type="file"]{ border:1px solid #e6e6e6; margin-bottom:10px; padding:20px 20px 20px 56px; width:100%; border-radius:8px; background-image: url('//top-carffeine.com/img/board_img/write_file_icon.png');  }
.write_page .add_form .file_del_box{display:flex; justify-content: flex-end; margin-bottom:5px; font-size:14px;  } 
.write_page .add_form .file_del_box label{color:#999;} 
.write_page .add_form .file_del_box input[type=checkbox]{margin-right:3px; }

.write_page .write_btn_box{display:flex; justify-content: flex-end; margin-top:20px; }
.write_page .write_btn_box .cancelBtn{display:block; padding:16px 20px; border: 1px solid #CCCCCC; border-radius: 4px; margin-right:10px;  }
.write_page .write_btn_box .submitBtn{padding:16px 20px; border-radius:4px; border:none; background: var(--main-color) ; color:#fff; }

@media screen and (max-width: 1250px) { 
    .write_page .title_box{flex-wrap: wrap;}
    .write_page .title_box.half_box li{width:100%; }
} 

@media screen and (max-width: 650px) {
    .write_page{ font-size: 14px; }
    .write_page .title_box .label{ width:100px; font-size:12px; }
    .write_page .title_box li .label_content select{ font-size:12px;}
    .write_page .title_box li .label_content label{ font-size:12px; }
    .write_page .title_box li .label_content input[type=text]{ font-size:12px; }
    .write_page .title_box li .label_content input[type=password]{ font-size:12px; }
    .write_page .title_box li .label_content input[type=email]{ font-size:12px; }
    .write_page .add_form .file_del_box label{ font-size:12px; }

    .write_page .title_box.half_box li .label_content{width:calc(100% - 100px); }
    .write_page .title_box.full_box li .label_content{ width:calc(100% - 100px) }

    .write_page .add_form .add_box input[type="text"]{ font-size: 14px; }
    .write_page .add_form .add_box input[type="file"]{ font-size: 14px; }

    .write_page .write_btn_box{ font-size: 14px; }
} 

/*------------------ write end ------------------*/


/*-------------- view page -------------*/
.view_page{margin-top:50px; }
.view_page .title li{ display:flex; border-bottom:1px solid #dfdfdf; }
.view_page .title:first-child li:first-child{border-top:1px solid #dfdfdf; }
.view_page .title .label{background:#f7f7f7; display:block; padding:16px 10px; width:120px; font-size:14px; display:flex; align-items: center;  }
.view_page .title .label_content{padding:16px 10px; font-size:14px; width:calc(100% - 120px); display:flex; align-items: center;}

.view_page .full_title .label_content{display:block; width:calc(100% - 120px);  }
.view_page .three_title{display:flex; flex-wrap: wrap;}
.view_page .three_title li{width:calc(100% / 3); }

.view_page .share_title{display:flex; border-bottom:1px solid #dfdfdf; }
.view_page .share_title .adminBox{ padding:10px 0; }
.view_page .share_title>li:first-child{width:50%; display:flex; align-items: center;  }
.view_page .share_title>li:last-child{ width:50%; display:flex; justify-content: flex-end;}
.view_page .share_title .share_label{background:#F2F2F2; padding:5px; color:#4d4d4d; border-radius:4px; font-size:12px; margin-right:5px;   }
.view_page .share_title .share_label > img{margin-right:5px; }
.view_page .share_title .share_icon{margin-right:5px; }

.view_page .view_content{ padding:20px 0; color:#333; }
.view_page .view_content img{max-width:100%; margin-bottom:10px; display:block;  }

.view_page .add_box{margin-top:20px; }
.view_page .add_box a.add_item{
    display:block; border:1px solid #e6e6e6; padding:19px 20px 19px 60px; border-radius:8px; 
    background-repeat: no-repeat; background-position: left 20px center; 
}
.view_page .add_box a.add_item + a.add_item{margin-top:10px; }
.view_page .add_box a.add_item span{display:block; }
.view_page .add_box a.add_item span.add_title{font-size:15px; }
.view_page .add_box a.add_item span.add_content{font-size:13px; color:#999999; }
.view_page .add_box a.file{background-image: url('//top-carffeine.com/img/board_img/file_icon.png');}
.view_page .add_box a.link{background-image: url('//top-carffeine.com/img/board_img/link_icon.png');}

.view_page .p_n_box{margin-top:20px; }
.view_page .p_n_box .p_n_item {border-top:1px solid #dfdfdf; display:flex;  }
.view_page .p_n_box .p_n_item:last-child{border-bottom:1px solid #dfdfdf; }
.view_page .p_n_box .p_n_item span.label{
    display:block; width:120px; padding:13px 10px 13px 50px; background:#F7F7F7; font-size:14px; 
    background-repeat: no-repeat; background-position: left 20px center;
}
.view_page .p_n_box .p_n_item.prev_box span.label{background-image: url('//top-carffeine.com/img/board_img/prev_icon.png');}
.view_page .p_n_box .p_n_item.next_box span.label{background-image: url('//top-carffeine.com/img/board_img/next_icon.png');}
.view_page .p_n_box .p_n_item span.p_n_title{
    display:block; padding:13px 20px; font-size:14px; width:calc(100% - 120px); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;  
} 
.view_page .go_list_box{margin-top:40px; display:flex; align-items: center; justify-content: center; }
.view_page .go_list_box .go_list_btn{
    padding:19px 0px; text-align: center; background:#40647D; width:240px; 
    border-radius: 60px; color:#fff; font-size:16px; font-family: 'GmarketSans'; 
}


.view_page .comment_page{ margin-top:40px; }
.view_page .comment_page .comment_title_box{ padding:21px 0; border-bottom:1px solid #e6e6e6; cursor: pointer; display:flex; justify-content: space-between;}
.view_page .comment_page h1.title{ font-weight: 400;  }
.view_page .comment_page h1.title span.blue{ color:#425999; }
.view_page .comment_page .comment_title_box .arrow_box{ display:flex; align-items: center;  }
.view_page .comment_page .comment_title_box .arrow_box .arrow_icon{ 
    display:block; width:15px; height:15px; margin-left:10px; 
    background-image:url('//top-carffeine.com/img/board_img/comment_arrow.png'); background-repeat: no-repeat; background-position: center;
}
.view_page .comment_page .comment_list .comment_item .comment_title{padding:15px 10px; background:#F7F7F7; display:flex; justify-content: space-between; position:relative;  }
.view_page .comment_page .comment_list .comment_item .comment_title .nick_name{font-size:15px; }
.view_page .comment_page .comment_list .comment_item .comment_title .date{font-size:13px; margin-left:10px; color:#999;  }

.view_page .comment_page .comment_list .comment_item .comment_title .menu_box{ 
    width:10px; height:30px; margin-right:10px; cursor: pointer; background-image: url('//top-carffeine.com/img/board_img/comment_menu.png'); 
    background-repeat: no-repeat; background-position: center; background-size:cover; 
}

.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu{ position:absolute; right:10px; top:40px; display:none;  }
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu.on{display:block; }
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a{
    display:block; background:#fff; padding:12px 21px;  
    box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05); border:1px solid #e6e6e6; color:#666; 
    font-size:14px; 
}
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu::before{
    content: ""; position: absolute; top: -8px;
    right: 15px; width: 0; height: 0; border-style: solid;
    border-width: 0 6px 8px 6px; border-color: transparent transparent #e6e6e6 transparent;
}
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu::after{
    content: ""; position: absolute; top: -6px;
    right: 15px; width: 0; height: 0;
    border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #fff transparent;
}
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a:last-child{ border-top:none; }
.view_page .comment_page .comment_list .comment_item .comment_content{padding:20px 15px; font-size:15px; }
.view_page .comment_page .comment_list .comment_item .comment_content .screet_box{text-decoration: underline; color:#EB5757; }
.view_page .comment_page .comment_list .comment_item.reply .comment_title{ padding-left:50px; background-image: url('//top-carffeine.com/img/board_img/comment_reple_icon.png'); background-repeat: no-repeat; background-position: left 20px center; ;}
.view_page .comment_page .comment_list .comment_item.reply .comment_title .left_box{display:flex; align-items: center;}
.view_page .comment_page .comment_list .comment_item.reply .comment_content{padding-left:50px;  }

.view_page .comment_page .comment_write_page{ margin:20px 0; }
.view_page .comment_page .comment_write_page textarea{width:100%; height:200px; border-radius:4px; border:1px solid #e6e6e6; padding:12px 16px; font-size:14px; margin-bottom:10px; }
.view_page .comment_page .comment_write_page .humman_box input{border:1px solid #e6e6e6; padding:8px 10px; border-radius:4px; font-size:14px; margin-bottom:10px; }
.view_page .comment_page .comment_write_page .humman_box input:first-child{margin-right:10px; }
.view_page .comment_page .comment_write_page .scecret_label{font-size:14px; }
.view_page .comment_page .comment_write_page .buttonWrap{ margin-top:10px; display:flex; justify-content: space-between; }
.view_page .comment_page .comment_write_page .buttonWrap .ok_btn{padding:16px 24px; background:#40647D; color:#fff; border:none; font-size:14px; border-radius:4px;  }

.view_page .comment_page .comment_content_box{display:none; }
.view_page .comment_page.on .comment_content_box{display:block; }
.view_page .comment_page.on .comment_title_box .arrow_box .arrow_icon{transform: rotate( 180deg );}

@media screen and (max-width: 1250px) { 
    .view_page .three_title{display:block; }
    .view_page .three_title li{width:100%; }
} 

@media screen and (max-width: 650px) {
    .view_page .title .label{width:60px; font-size:13px; }
    .view_page .title .label_content{ width: calc(100% - 60px); font-size:14px; }
    .view_page .share_title{flex-wrap: wrap;}
    .view_page .share_title>li:first-child{width:100%; border-bottom: none; /*e©ø¥ìi©«? i??i??e?¨« border-bottom: 1px solid #e6e6e6;*/ }
    .view_page .share_title>li:last-child{width:100%; }
    .view_page .p_n_box .p_n_item span.label{width:100px; }
    .view_page .p_n_box .p_n_item span.p_n_title{width:calc(100% - 100px); }
    .view_page .share_title .share_label{padding:16px 10px; width:60px; font-size:14px; color:#333;  }
    .view_page .share_title .share_label img{display:none; }

    .view_page .go_list_box .go_list_btn{padding:10px 0; width:200px; }

    .view_page .comment_page .comment_list .comment_item .comment_title{ padding:10px; }
    .view_page .comment_page .comment_list .comment_item .comment_title .nick_name{font-size:12px; }
    .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a{font-size:12px;}
    .view_page .comment_page .comment_list .comment_item .comment_content{ font-size:12px; }
    .view_page .comment_page .comment_list .comment_item.reply .comment_content{ padding-left:40px; }

    .view_page .comment_page .comment_write_page textarea{ font-size:12px; }
    .view_page .comment_page .comment_write_page .humman_box input{ font-size:12px; }
    .view_page .comment_page .comment_write_page .scecret_label{ font-size:12px; }
    .view_page .comment_page .comment_write_page .buttonWrap .ok_btn{font-size:12px; padding:10px 20px;}

    .view_page .go_list_box .go_list_btn{ font-size:14px; }

    .view_page .p_n_box .p_n_item span.label{font-size:12px; }
    .view_page .add_box a.add_item span.add_title{font-size:12px; }
} 
/*-------------- view page end-------------*/

/*-------------- search-box --------------*/
.search-box{ padding:20px 0; max-width:400px; } 
.search-box .serach-form{ display:flex; }
.search-box .serach-form select{ display:block; width:30%; padding:7px 10px; border: 1px solid #E6E6E6; border-radius:4px; }
.search-box .serach-form .search-ipt-box{ width:70%; position:relative; padding-left:5px;  }
.search-box .serach-form .search-ipt-box .search-ipt{ display:block; width:100%; padding:7px 30px 7px 10px; border: 1px solid #E6E6E6; border-radius:4px; }
.search-box .serach-form .search-ipt-box .search-btn{ position:absolute; top:0; right:2px; height:100%; background:none; border: none; display:flex; align-items: center; justify-content: center; padding:0 5px; }

@media screen and (max-width: 650px) {
    .search-box .serach-form{ font-size: 14px; }

    .search-box{ width:100%; max-width: 100%; padding:20px 10px; }
    .search-box .serach-form select{ width: 110px; }
    .search-box .serach-form .search-ipt-box{ width: calc( 100% - 110px ) ; }
}
/*-------------- search-box end-----------*/ 


/* sub02_1 */
.sub02_1 .QnaArti{ 
	padding: 184px 0 100px 0; background-image: url('//top-carffeine.com/img/main_arti_bg.png');
    background-size: cover; background-repeat: no-repeat;
    background-position: center; overflow: hidden; 
}

.sub02_1 .QnaArti .qnaBox{ 
	background-color: #fff; color: #000; margin-top: 50px; padding: 30px; 
	border-radius: 20px; border: 4px solid #DA9D73; transform: translateY(50px); opacity: 0;
	transition: transform 1s, opacity 1s;
}
.sub02_1 .QnaArti .qnaBox.on{ transform: translateY(0); opacity: 1; }
.sub02_1 .QnaArti .qnaBox  .qnaList{ border-bottom: 1px solid #D9D9D9; }
.sub02_1 .QnaArti .qnaBox  .qnaList > li > .qustion{ 
	display: flex; padding: 20px; align-items: flex-start; border-top: 1px solid #D9D9D9; 
	cursor: pointer;
}
.sub02_1 .QnaArti .qnaBox  .qnaList > li:nth-child(1) > .qustion{ border-top: unset; }

.sub02_1 .QnaArti .qnaBox  .qnaList > li > .answer{ border-top: 1px solid #D9D9D9; background-color: #F6F7FC; padding: 20px; display: none; }
.sub02_1 .QnaArti .qnaBox  .qnaList > li > .answer .answerBox{ display: flex; align-items: flex-start; }
.sub02_1 .QnaArti .qnaBox  .qnaList > li:last-child > div.answer{ border-bottom: 1px solid #D9D9D9; }

.sub02_1 .QnaArti .qnaBox  .qnaList > li > div.qustion .txtBox{ font-size: 18px; flex-grow: 1; }
.sub02_1 .QnaArti .qnaBox  .qnaList > li > div.answer .qna{ color: var(--main-color); }

.sub02_1 .QnaArti .qnaBox  .qnaList > li > div .txtBox{ line-height: 1.5em; } 
.sub02_1 .QnaArti .qnaBox  .qnaList > li > div .txtBox .modifyBtn{ 
	display: inline-block; padding: 2px 10px; border-radius: 5px; border: 1px solid #dfdfdf; background-color: #efefef; font-size: 0.8em;
	margin-left: 5px;
}
.sub02_1 .QnaArti .qnaBox  .qnaList > li > div.answer .txtBox{ color: #222; flex-grow: 1; }

.sub02_1 .QnaArti .qnaBox  .qnaList > li > div p.qna{ flex-shrink: 0; font-size: 30px; font-weight: 700; margin-right: 40px; }
.sub02_1 .QnaArti .qnaBox  .qnaList > li > div p.arrow{ margin-left: 40px; flex-shrink: 0; }
.sub02_1 .QnaArti .qnaBox  .qnaList > li > div.answer p.arrow{ transform: scaleY(-1); display: block; }

@media screen and (max-width: 1250px) { 
	.sub02_1 .QnaArti .qnaBox { padding: 20px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > div p.qna{ margin-right: 20px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > div p.arrow{ margin-left: 20px; }
}
@media screen and (max-width: 650px) { 
    .sub02_1 .QnaArti{ padding-top: 140px; }
	.sub02_1 .QnaArti .qnaBox{ padding: 10px 0; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > .qustion{ padding: 15px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > .answer{ padding: 15px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > div p.arrow img{ width: 15px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > div p.qna{ font-size: 25px; margin-right: 15px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > div.qustion .txtBox{ font-size: 14px; }
	.sub02_1 .QnaArti .qnaBox .qnaList > li > div.answer .txtBox{ font-size: 14px; }
}



/* sub03_1 */
.sub03_1{ background-color: #222; }
.sub03_1 .webtoonArti{ padding: 184px 0 100px 0; }
.sub03_1 .webtoonArti .webtoonWrap{ 
	display: flex; flex-wrap: wrap; margin-top: 50px; 
	transform: translateY(50px); opacity: 0;
	transition: transform 1s, opacity 1s;
}
.sub03_1 .webtoonArti .webtoonWrap.on{ transform: translateY(0); opacity: 1; }

.sub03_1 .webtoonArti .webtoonWrap .orderBox{ padding-right: 10px; width: 150px ; }
.sub03_1 .webtoonArti .webtoonWrap .orderBox .t1{ text-align: center; }
.sub03_1 .webtoonArti .webtoonWrap .orderBox img{ display: block; width: 100%; margin-top: 20px; }

.sub03_1 .webtoonArti .webtoonWrap .weebtoonList{ display: flex; flex-wrap: wrap; width: calc(100% - 150px); }
.sub03_1 .webtoonArti .webtoonWrap .weebtoonList > li{ width: calc(100% / 2); padding: 10px;  }
.sub03_1 .webtoonArti .webtoonWrap .weebtoonList > li img{ width: 100%; }

@media screen and (max-width: 1250px) { 
	.sub03_1 .webtoonArti .webtoonWrap .orderBox{ width: 100px; }
	.sub03_1 .webtoonArti .webtoonWrap .weebtoonList{ width: calc(100% - 100px); }
}
@media screen and (max-width: 900px) { 
	.sub03_1 .webtoonArti .webtoonWrap { justify-content: center; }
	.sub03_1 .webtoonArti .webtoonWrap .orderBox{ padding-right: 0; }
	.sub03_1 .webtoonArti .webtoonWrap .weebtoonList{ width: 100%; margin-top: 50px; }
}
@media screen and (max-width: 650px) { 
    .sub03_1 .webtoonArti{ padding-top: 140px; }
}
@media screen and (max-width: 500px) { 
	.sub03_1 .webtoonArti .webtoonWrap .weebtoonList > li{ width: 100%; }
}


/* e¨Ï¡±i?¢¬ i?¡¦i?¡Íi?©« e??i?¢æe??e?¡± i¨«?i?¡¦ */
.entrance_sec{ 
	position: fixed; z-index: 999; left: 0; top:0; width: 100%; height: 100%; background-color: var(--main-bg-color); 
	display: flex; justify-content: center; overflow-y: scroll; color: #fff; opacity: 0; visibility: hidden; 
	transition: opacity 0.5s, visibility 0.5s;
}
.entrance_sec.active{ opacity: 1; visibility: visible; }
.entrance_sec .entranceArti{ 
	background-image: url('//top-carffeine.com/img/main_arti_bg.png'); width: 100%; 
	background-size: cover; background-repeat: no-repeat; background-position: center;
}
.entrance_sec .entranceArti .btnWrap .inner{ display: flex; justify-content: flex-end; position: relative;  }
.entrance_sec .entranceArti .btnWrap .closeBtn{ width: 30px; height: 30px; cursor: pointer; position: absolute;  right: 20px; top: 10px; z-index: 5; }
.entrance_sec .entranceArti .btnWrap .closeBtn span{ display: block; width: 100%; height: 2px; background-color: #fff; }
.entrance_sec .entranceArti .btnWrap .closeBtn span:nth-child(1){ transform:  translateY(16px) rotate(-45deg); }
.entrance_sec .entranceArti .btnWrap .closeBtn span:nth-child(2){ transform: translateY(14px) rotate(45deg); }

.entrance_sec .entranceArti .stepList{ display: flex; align-items: center; position: relative; padding-top: 100px; }
.entrance_sec .entranceArti .stepList::before{ content:''; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0;  }
.entrance_sec .entranceArti .stepList .inner{ display: flex; flex-wrap: wrap; justify-content: center; }
.entrance_sec .entranceArti .stepList .logo{ padding-right: 40px; width: 150px; }
.entrance_sec .entranceArti .stepList .logo img{ width: 100%; background-color: #222; position: relative; z-index:1;  }
.entrance_sec .entranceArti .stepList .step{ 
	display: flex; align-items: center; width: calc(100% - 150px); justify-content: space-between; 
	padding: 0 200px;
}
.entrance_sec .entranceArti .stepList .step > li{ position: relative; }
.entrance_sec .entranceArti .stepList .step .circle{ 
	width: 25px; height: 25px; border: 1px solid #fff; background-color: #222; border-radius: 50%; position: relative; z-index: 1;  
	position: relative;
}
.entrance_sec .entranceArti .stepList .step .burble{ 
	position: absolute; left: 0; background: #fff; color: #222; padding: 10px 15px; width: 100px; 
	text-align: center; border-radius: 30px; left: calc(50% - 50px); top: -50px;
	opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; ;
}
.entrance_sec .entranceArti .stepList .step .burble::before{ 
	content:''; display: block; position: absolute; width: 0; height: 0;  
	border-bottom: 10px solid transparent;
	border-top: 10px solid transparent;
	border-left: 20px solid #fff;
	border-right: 20px solid transparent;
	bottom: -18px; transform: rotate(90deg);
	left: calc(50% - 20px);
}

.entrance_sec .entranceArti .stepList .step > li.active .burble{ opacity: 1; visibility: visible; }
.entrance_sec .entranceArti .stepList .step > li.active .circle::before{ 
	content:''; display: block; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; 
	position: absolute; left: calc(50% - 7.5px); top: calc(50% - 7.5px);
}

.entrance_sec .entranceArti .contentList{ margin-top: 75px; padding:0 10px; }
.entrance_sec .entranceArti .contentList > li{ display: flex; align-items: center; justify-content: center; }
.entrance_sec .entranceArti .contentList > li .contentBox{ width: 100%; max-width: 800px; padding: 0 0 100px 0; margin: 0 auto; }

.entrance_sec .entranceArti .contentList > li{ display: none; }
.entrance_sec .entranceArti .contentList > li.active{ display: block; }
.entrance_sec .entranceArti .contentList > li .contentBox .titleBox{ 
	text-align: center; font-size: 28px; position: relative; line-height: 1.5em;
	display: flex; justify-content: center; align-items: center;
}

.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .t1{ color: var(--main-color); }
.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .t2 .underline{ position: relative;  }
.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .t2 .underline::after{ content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; }

.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .icon{ transform: scale(0.7) translateX(30%); }
.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .right{ transform: scaleX(-1) scale(0.7) translateX(20%); }

.entrance_sec .entranceArti .contentList > li .contentBox .question{ margin: 60px 0; text-align: center; font-size: 34px; }
.entrance_sec .entranceArti .contentList > li .contentBox .question b.gold{ color: var(--main-color); }

.entrance_sec .entranceArti .contentList > li .contentBox .select{ display: flex; justify-content: center;  }
.entrance_sec .entranceArti .contentList > li .contentBox .select > li{ padding: 10px; }
.entrance_sec .entranceArti .contentList > li .contentBox .select > li input[type="radio"]{ display: none; }
.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label{ 
	display: block; width: 280px; height: 250px; background-color: #222; border: 1px solid #fff; border-radius: 50px;
	padding: 20px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; transition: background 0.5s , border 0.5s;
}
.entrance_sec .entranceArti .contentList > li .contentBox .select > li input[type="radio"]:checked + label{ background-color: var(--main-color); }
.entrance_sec .entranceArti .contentList > li .contentBox .select > li input[type="radio"] + label:hover{ border-color: var(--main-color); }


.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .icon{ 
	width: 100%; height: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; 
}
.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .txt{ margin-top: 10px; text-align: center; font-size: 25px; }

.entrance_sec .entranceArti .contentList > li .contentBox .select > li:nth-child(1)  input[type="radio"] + label .icon{ background-image: url('//top-carffeine.com//img/entrance_icon01.png'); }
.entrance_sec .entranceArti .contentList > li .contentBox .select > li:nth-child(2)  input[type="radio"] + label .icon{ background-image: url('//top-carffeine.com//img/entrance_icon02.png'); }


.entrance_sec .entranceArti .contentList > li .contentBox .txtBox{ position: relative; max-width: 800px; margin: 0 auto ;  }
.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .ipt{ 
	padding: 10px; font-size: 25px; width: 100%; border-radius: 20px; 
	background-color: #222; border: 2px solid #fff; 
}
.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .ipt[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .okBtn{ 
	position: absolute; right: 0; top: 0; font-size: 25px; height: 100%; padding: 0 50px; 
	border-radius: 0 20px 20px 0; border: 2px solid #fff; color: #222; background-color: #fff;
}

.entrance_sec .entranceArti .contentList > li .contentBox .finishBox{ margin-top: 30px; text-align: center; }
.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1{ font-size: 34px;  }
.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1 b{ color: var(--main-color); display: inline-block; }
.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1 b::before{ 
	content:''; display:block; height: 50px; background-image: url('//top-carffeine.com/img/entrance_sec_icon03.png');
	background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 10px;
}
.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t2{ 
	margin: 20px 0; font-size: 18px; line-height: 1.5em;
}
.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .closeBtn{ 
	background-color: var(--main-color); padding: 20px; width: 100%; max-width: 380px; border-radius: 50px; border: 2px solid #8A5324; 
	font-size: 22px; margin-top: 20px;
}

@media screen and (max-width: 1250px) { 
	.entrance_sec .entranceArti .stepList .step{ padding: 0; max-width: 200px; }
	.entrance_sec .entranceArti .stepList{ padding-top: 0; }
	.entrance_sec .entranceArti .stepList::before{  bottom: 12px;}
	.entrance_sec .entranceArti .stepList .logo{ margin-top: 20px; padding-right: 0; width: 100%; }
	.entrance_sec .entranceArti .stepList .logo img{ display: block; width: 100%; max-width: 93px; margin: 0 auto;  }

	.entrance_sec .entranceArti .stepList .step { width: 100%; padding-top: 80px; }  
	.entrance_sec .entranceArti .stepList .step > li.active .burble{ font-size: 14px; padding: 10px 5px; }

	.entrance_sec .entranceArti .contentList > li .contentBox .titleBox{ font-size: 20px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .icon{ width: 80px; }

	.entrance_sec .entranceArti .contentList > li .contentBox .question{ font-size: 20px; margin: 10px 0 20px 0; }
	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .txt{ font-size: 20px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label{ border-radius: 20px; }

	.entrance_sec .entranceArti .contentList > li .contentBox .txtBox{ max-width: 500px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .ipt{ font-size: 18px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .okBtn{ font-size: 18px; padding: 0 40px; }

	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1{ font-size: 20px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1 b::before{ height: 25px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t2{ font-size: 16px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .closeBtn{ font-size: 16px; max-width: 250px; }


}

@media screen and (max-width: 700px) {  
	.entrance_sec .entranceArti .contentList > li .contentBox{ margin-bottom: 50px;}
	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label{ width: 30vw; height: 30vw; }

	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .icon{ height: 15vw; }
	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .txt{ margin-top: 20px; font-size: 2.5vw; }
}

@media screen and (max-width: 650px) {  
	.entrance_sec .entranceArti .contentList > li .contentBox .titleBox{ font-size: 4vw; }
	.entrance_sec .entranceArti .contentList > li .contentBox .titleBox .txt{ padding: 0 10px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label{ width: 40vw; height: 40vw; }

	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .icon{ height: 20vw; }
	.entrance_sec .entranceArti .contentList > li .contentBox .select > li  input[type="radio"] + label .txt{ font-size: 4vw; }

	.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .ipt{ font-size: 16px;}
	.entrance_sec .entranceArti .contentList > li .contentBox .txtBox .okBtn{ font-size: 16px; padding: 0 30px; }

	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1{ font-size: 18px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t1 b::before{ height: 30px; }
	.entrance_sec .entranceArti .contentList > li .contentBox .finishBox .t2{ font-size: 14px; }

}


.applyArti{ position:fixed; z-index:9; bottom:0; left: 0; width: 100%; }
.applyArti.active{ bottom: 0; }

.applyArti .inner{ 
    background-color: #222; border: 4px solid var(--main-color); border-radius: 20px; overflow: hidden;
    display: flex; flex-wrap: wrap; margin-bottom: 10px; padding: 0;
}
.applyArti .email{ padding-left: 20px; display: flex; align-items: center; }
.applyArti .email img{ width: 100%; }
.applyArti .email .t1{ display: none; color: #fff; }
.applyArti .email .t1 .gold{ color: var(--main-color); }


.applyArti .formBox{ flex-grow: 1; }
.applyArti .formWrap{ color: #fff; padding: 15px; }
.applyArti .formWrap .t1{ font-size: 18px; }
.applyArti .formWrap .t1 .gold{ color: var(--main-color); }

.applyArti .formWrap > ul{ margin-top: 10px; display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin-left: -5px; }
.applyArti .formWrap > ul > li{ padding: 5px; width: calc(100% / 3); }
.applyArti .formWrap > ul > li .ipt{ padding: 15px; background-color: #000; border: none; width: 100%; }
.applyArti .formWrap > ul > li .ipt[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.applyArti .submitBtn{ background-color: var(--main-color); color: #fff; padding: 10px 20px; font-size: 20px; border: none; }


@media screen and (max-width: 1250px) {
    .applyArti{ padding: 0 10px; }
    .applyArti .submitBtn{ font-size: 16px; padding: 10px 30px; }    
}
@media screen and (max-width: 1000px) { 
    .applyArti{ padding: 0; }
    .applyArti .inner{ margin-bottom: 0; border-radius: 20px 20px 0 0; padding: 0; }

    .applyArti .email{ justify-content: center; width: 100%; padding: 10px 10px 0px 10px; }
    .applyArti .email img{ width: 50px; height: 50px; margin-right: 10px; }
    .applyArti .email .t1{ display: block; font-size: 18px; }

    .applyArti .formWrap{ width: 100%; padding: 0 10px; }
    .applyArti .formWrap .t1{ display: none; }

    .applyArti .submitBtn{ width: 100%; padding: 10px; margin-top: 10px; display: flex; align-items: center; justify-content: center; }
    .applyArti .submitBtn::before{ 
        content:''; display: inline-block; width: 30px; height: 30px; margin-right: 5px; 
        background-image: url('//top-carffeine.com/img/mobile_apply_icon.png'); background-repeat: no-repeat; background-position: center; background-size: contain;

    }
}
@media screen and (max-width: 650px) { 

    .applyArti .email{ display: none; }
    .applyArti .email img{ width: 8vw; height: auto; margin-right: 5px; }
    .applyArti .email b.gold{ display: block; font-size: 16px; }

    .applyArti .formWrap > ul > li{ width: 100%; font-size: 14px; padding: 2.5px 10px;  }
    .applyArti .formWrap > ul > li .ipt{ padding: 10px; }

    .applyArti .submitBtn{ font-size: 14px; padding: 5px; }
    .applyArti .submitBtn::before{ width: 25px; height: 25px; }
}



/* 2023-04-04 i¢Ò¡±e¡Æ¢æ i?¡®i?¡¦ */

/* login form */
.login .login_form{ 
	padding: 100px 0;
	background-image: url('//top-carffeine.com/img/main_arti_bg.png'); background-size: cover; background-repeat: no-repeat; 
}
.login .login_form .loginBox{ max-width: 400px; padding: 0 10px; margin: 100px auto; }

.login .login_form .loginBox .title{ text-align: center; font-size: 30px; font-weight: 500; }
.login .login_form .loginBox .title .gold{ color: var(--main-color); }

.login .login_form .loginBox .content{ margin-top: 20px; text-align: center; }

.login .login_form .loginBox .formWrap{ margin: 30px 0 0 0; }
.login .login_form .loginBox .formWrap > li + li{ margin-top: 20px; }
.login .login_form .loginBox .formWrap > li label{ display: block; }
.login .login_form .loginBox .formWrap > li label + input{ margin-top: 10px; }
.login .login_form .loginBox .formWrap > li input{ padding: 15px; width: 100%; color: #222; }

.login .login_form .loginBox .checkWrap{ margin-top: 5px; }
.login .login_form .loginBox .checkWrap input[type="checkbox"]{ display: none; }
.login .login_form .loginBox .checkWrap input[type="checkbox"] + label{ display: flex; align-items: center; }
.login .login_form .loginBox .checkWrap input[type="checkbox"] + label::before{ 
	content:''; display: inline-block; width: 20px; height: 20px; background-color: var(--main-color); border: 1px solid #fff;  
	margin-right: 5px;
}
.login .login_form .loginBox .checkWrap input[type="checkbox"]:checked + label::before{ 
	background-image: url('//top-carffeine.com/img/check_icon.png'); background-repeat: no-repeat; background-position: center;
	background-size: 60%;
}
.login .login_form .loginBox .loginBtn{ 
	background-color: #fff; color: #222; width: 100%; border-radius: 100px; border: 4px solid #DA9D73; 
	padding: 20px 10px; margin-top: 40px;
}
.login .login_form .loginBox .more{ 
	margin-top: 20px; display: flex; justify-content: center; 
}
.login .login_form .loginBox .more > li{ padding: 0 20px; }


@media screen and (max-width: 650px) { 
	.login { padding: 0; }
    .login .login_form .loginBox .title{ font-size: 20px; }
    .login .login_form .loginBox .content{ font-size: 14px; }

	.login .login_form .loginBox .formWrap{ font-size: 14px; }
	.login .login_form .loginBox .checkWrap input[type="checkbox"] + label{ font-size: 14px; }
	.login .login_form .loginBox .loginBtn{ font-size: 14px; padding: 15px 5px; }
	.login .login_form .loginBox .more{ font-size: 14px; }
}


/* signup - signup01 */
.signup{ overflow: hidden; }
.signup .banner{ 
	color: #fff;
	background-image: url('//top-carffeine.com/img/main_arti_bg.png'); height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; 
}
.signup .banner .title{ font-family: 'GmarketSans'; font-size: 24px;  }

.signup .signup01 .signupBox{ margin: 100px auto; max-width: 400px; padding: 0 10px; }
.signup .signup01 .signupBox .title{ text-align: center; font-size: 24px; }
.signup .signup01 .signupBox .title b.gold{ color: var(--main-color); }

.signup .signup01 .checkContain{ margin-top: 20px; }
.signup .signup01 .checkContain .checkWrap{ background-color: var(--main-color); color: #fff; padding: 20px; font-size: 18px; }
.signup .signup01 .checkContain .checkWrap input[type="checkbox"]{ display: none; }
.signup .signup01 .checkContain .checkWrap input[type="checkbox"] + label{ display: flex; align-items: center; cursor: pointer; }
.signup .signup01 .checkContain .checkWrap input[type="checkbox"] + label::before{ 
	content:''; display: inline-block; width: 20px; height: 20px; border: 1px solid #fff;
	margin-right: 10px; 
}
.signup .signup01 .checkContain .checkWrap input[type="checkbox"]:checked + label::before{
	background-image: url('//top-carffeine.com/img/check_icon.png'); background-repeat: no-repeat; background-position: center; 
	background-size: 60%;
}
.signup .signup01 .checkContain .info{ 
	margin-top: 20px; border: 1px solid #D9D9D9; word-break: break-all; padding: 15px;  
	overflow-y: scroll; height: 200px; line-height: 1.5em; 
}
.signup .signup01 .nextBtn{ 
	display:block; margin: 20px auto 0 auto; width: 100%; background-color: var(--main-color); border: none; padding: 15px 10px; 
	color: #fff; max-width: 280px; 
}

@media screen and (max-width: 650px) { 

	.signup .signup01{ padding: 0; padding-top: 50px; }
	.signup .signup01 .inner{ padding: 0; }

	.signup .banner{ height: 200px; }
	.signup .banner .title{ font-size: 18px; }

	.signup .signup01 .signupBox .title{ font-size: 18px; }
	.signup .signup01 .checkContain .checkWrap input[type="checkbox"] + label{ font-size: 16px; }

	.signup .signup01 .checkContain .info{ font-size: 14px; }

}

/* signup - signup02 */
.signup .signup02 .signupBox{ margin: 100px auto; }
.signup .signup02 .formList{ display: flex; width: calc(100% + 20px); margin-left: -10px; flex-wrap: wrap; }
.signup .signup02 .formList > li{ width: calc(100% / 3); padding: 10px; }
.signup .signup02 .formList > li label{ display: block; margin-bottom: 5px; }
.signup .signup02 .formList > li input.ipt{ padding: 10px; width: 100%; border: 1px solid #E4E4E4; }
.signup .signup02 .formList > li .radioWrap{ display: flex; flex-wrap: wrap; margin-top: 10px; }
.signup .signup02 .formList > li .radioWrap .radioBox{ display: flex; align-items: center; padding: 10px; position: relative; }
.signup .signup02 .formList > li .radioWrap .radioBox input[type="radio"]{ position: absolute; left: 12px; }
.signup .signup02 .formList > li .radioWrap .radioBox input[type="radio"] + label{ display: flex; align-items: center; cursor: pointer; position: relative; padding-left: 30px; }
.signup .signup02 .formList > li .radioWrap .radioBox input[type="radio"] + label::before{ 
    content:''; display: inline-block; width: 24px; height: 24px; border-radius: 50%; 
    border: 1px solid #E4E4E4; margin-right: 10px; position: absolute; left: 0; background-color: #fff;
}
.signup .signup02 .formList > li .radioWrap .radioBox input[type="radio"]:checked + label::before{ background-image: url('//top-carffeine.com/img/radio_icon.png'); background-size: 50%; background-repeat: no-repeat; background-position: center; }

.signup .signup02 .btnWrap{ display: flex; justify-content: center; align-items: center; margin-top: 40px; }
.signup .signup02 .btnWrap > li{ padding: 10px; }
.signup .signup02 .btnWrap > li .backBtn{ padding: 20px; background-color: #7F7F7F; color: #fff; text-align: center; display: block; width: 150px; }
.signup .signup02 .btnWrap > li .submitBtn{ padding: 20px; background-color: var(--main-color); color: #fff; text-align: center; border: none; width:150px; }

@media screen and (max-width: 800px) { 
	.signup .signup02 .formList{ padding: 0 10px; }
	.signup .signup02 .formList > li{ width: calc(100% / 2); }
}

@media screen and (max-width: 650px) { 
	.signup .signup02{ padding: 0; padding-top: 50px; }
	.signup .signup02 .inner{ padding: 0; }

	.signup .signup02 .signupBox{ margin: 50px auto; }

	.signup .signup02 .formList{ font-size: 14px; }
	.signup .signup02 .formList > li{ width: 100%; }

	.signup .signup02 .btnWrap > li{ width: calc(100% / 2); }
	.signup .signup02 .btnWrap > li .backBtn{ width: 100%; }
	.signup .signup02 .btnWrap > li .submitBtn{ width: 100%; }
}

/* signup - signup02 */
.signup .signup_complete{ 
	background-image: url('//top-carffeine.com/img/main_arti_bg.png'); background-size: cover; background-repeat: no-repeat;
	background-position: center;
}

.signup .signup_complete .contentBox{ padding: 100px 0; max-width: 500px; margin: 0 auto; width: 100%; text-align: center; }
.signup .signup_complete .contentBox .icon{ display: block; margin: 0 auto; width: 100%; max-width: 100px; }
.signup .signup_complete .contentBox .t1{ margin: 20px 0; font-size: 35px; font-weight: 700; }
.signup .signup_complete .contentBox .t1 b.gold{ color: var(--main-color); }

.signup .signup_complete .contentBox .content{ font-size: 18px; }

.signup .signup_complete .mainBtn{ 
	display: block; background-color: var(--main-color); padding: 15px 10px; margin: 40px auto 0 auto; 
	max-width: 280px; 
} 

@media screen and (max-width: 1250px) { 
	.signup .signup_complete .contentBox .icon{  max-width: 70px; }

	.signup .signup_complete .contentBox .t1{ font-size: 25px; }
	.signup .signup_complete .contentBox .content{ font-size: 16px; }
}

@media screen and (max-width: 650px) { 
	.signup .signup_complete .contentBox .t1{ font-size: 20px; }
	.signup .signup_complete .contentBox .content{ font-size: 14px; }
}


/* admin - adminList (super) */

.admin .admin_arti{ padding:50px 0; }

.admin .admin_arti .topBox{ display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
.admin .admin_arti .topBox .title{ font-weight: 700; font-size: 30px; }

.admin .admin_arti .topBox .searchForm{ position:relative; color: #7F7F7F; }
.admin .admin_arti .topBox .searchForm select{ padding: 15px; border: 1px solid #E4E4E4;  } 
.admin .admin_arti .topBox .searchForm input{ padding: 15px 50px 15px 15px; border: 1px solid #E4E4E4; width: 260px; }

.admin .admin_arti .topBox .searchForm .submitBtn{ 
	position: absolute; right: 0; top: 0; height: 100%; padding: 20px; 
	background-image: url('//top-carffeine.com/img/board_img/search_icon.png'); background-size:50%; background-repeat: no-repeat;
	background-position: center; background-color: transparent; border: none;
}



@media screen and (max-width: 1250px) { 
	.admin .admin_arti .topBox .title{ font-size: 25px; }
	.admin .admin_arti .topBox .searchForm{ font-size: 14px; }
	.admin .admin_arti .topBox .searchForm select{ padding: 10px; }
	.admin .admin_arti .topBox .searchForm input{ padding: 10px 40px 10px 10px; }
}
@media screen and (max-width: 800px) { 
	.admin .admin_arti .topBox .searchForm{ width: 100%; margin-top: 20px; display: flex;  }
	.admin .admin_arti .topBox .searchForm input{ flex-grow: 1; width: 100%; margin-left: 5px; }
}

@media screen and (max-width: 650px) { 
	.admin .admin_arti .topBox .title{ font-size: 20px; }
}


.admin .admin_arti .admin_addBox{ margin-top: 20px; display: flex; flex-wrap: wrap; width: calc(100% +10px); margin-left: -5px; }
.admin .admin_arti .admin_addBox > li{ padding: 5px; width: calc((100% - 150px) / 4); }
.admin .admin_arti .admin_addBox > li:last-child{ width: 150px; }
.admin .admin_arti .admin_addBox > li .ipt{ width: 100%; border: 1px solid #E4E4E4; padding: 10px; }
.admin .admin_arti .admin_addBox > li select{ width: 100%; border: 1px solid #E4E4E4; padding: 10px; }
.admin .admin_arti .admin_addBox > li .addBtn{ 
    width: 100%; height: 100%; padding: 10px; background-color: var(--main-color); color: #fff; border: none; 
}

@media screen and (max-width: 950px) { 
    .admin .admin_arti .admin_addBox > li{ width: calc(100% / 2); }
    .admin .admin_arti .admin_addBox > li:last-child{ width: 100%; }
}
@media screen and (max-width: 650px) { 
    .admin .admin_arti .admin_addBox{ font-size: 14px; }
    .admin .admin_arti .admin_addBox > li{ width: 100%; }
}


.admin .admin_arti .totlaBox p{ font-size: 14px; }

.admin .admin_arti .admSearchBox{ 
    display: flex; margin-top: 30px; flex-wrap: wrap; width: calc(100% + 10px); margin-left: -5px; 
    margin-bottom: 20px; align-items: center; border:1px solid #efefef; padding: 20px;
    background-color: #F7F8FA;
}
.admin .admin_arti .admSearchBox > li{ padding: 5px; }
.admin .admin_arti .admSearchBox > li{ display: flex; align-items: center; }
.admin .admin_arti .admSearchBox > li.manager .contentBox select{ border: 1px solid #E4E4E4; padding: 10px; }

.admin .admin_arti .admSearchBox > li .titleBox{ margin-right: 10px; }

.admin .admin_arti .admSearchBox > li.applicationDate .contentBox .ipt{ border: 1px solid #E4E4E4; padding: 10px; }
.admin .admin_arti .admSearchBox > li.applicationDate .contentBox .dateSearchBtn{ padding: 10px; border: none; background-color: var(--main-color); color: #fff;  }

@media screen and (max-width: 650px) { 
    .admin .admin_arti .admSearchBox{ font-size: 14px; padding: 20px 0; }
    .admin .admin_arti .admSearchBox > li{ flex-wrap: wrap; }
    .admin .admin_arti .admSearchBox > li .titleBox{ width: 100%; }

    .admin .admin_arti .admSearchBox > li .contentBox{ margin-top: 10px; width: 100%; }
    .admin .admin_arti .admSearchBox > li.applicationDate .contentBox .ipt{ width: calc((100% - 65px) / 2); }
}



.admin .admin_arti .listBox{ margin: 20px 0; }
.admin .admin_arti .listBox > li { 
	display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 0; border-bottom: 1px solid #E0E0E0; font-size: 14px;
}
.admin .admin_arti .listBox > li.title{ background-color: #F7F8FA; border-top: 1px solid #E0E0E0;  font-size: 16px;  }

.admin .admin_arti .listBox > li > div{ position: relative; padding: 0 10px; }
.admin .admin_arti .listBox > li > div::after{ content:'|'; position: absolute; right: 0; color: #D9D9D9;  }
.admin .admin_arti .listBox > li > div:last-child::after{ display: none; }
.admin .admin_arti .listBox > li > div.item{ flex-basis:calc((100% - 33px) / 8); }

.admin .admin_arti .listBox > li > div.distri select{ border: 1px solid #E0E0E0; padding: 5px; width: 100%; }
.admin .admin_arti .listBox .red{ color: #F55959; }
.admin .admin_arti .listBox .blue{ color: #5C80DE; }

.admin .admin_arti .emptyList{ 
	border-top: 1px solid #E0E0E0; margin-top: 20px; text-align: center; color: #7F7F7F; 
	padding: 200px 0; font-weight: 600; font-size: 20px;
}


@media screen and (max-width: 900px) { 
	.admin .admin_arti .listBox > li{ flex-wrap: wrap; text-align: left; }
	.admin .admin_arti .listBox > li > div{ width: 100%; padding: 5px; }
	.admin .admin_arti .listBox > li > div.item{ width: 100%; flex-basis: unset;}
	.admin .admin_arti .listBox > li > div::after{ display: none; }

	.admin .admin_arti .listBox > li.title{ padding: 5px 0; }
	.admin .admin_arti .listBox > li.title .item{ display: none; }

	.admin .admin_arti .listBox > li .device:before{ content:'e¡×¢´i©÷¢¥ : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .category:before{ content:'i¡Ë¡¦e¡Í? : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .car:before{ content:'i¡Æ¡§i¡Ë¡¦e¡Í? : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .tel:before{ content:'i?¡Æe?¨öi©÷? : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .name:before{ content:'i?¢¥e|? : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .status:before{ content:'i??i?©« : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .distri:before{ content:'e¢Ò?e¡Æ¡Æ : '; color: #7f7f7f; }
	.admin .admin_arti .listBox > li .date:last-child::before{ content:'e¢Ò?e¡Æ¡Æi?¨ù : '; color: #7f7f7f; }

	.admin .admin_arti .emptyList{ font-size: 18px; }
}

@media screen and (max-width: 650px) { 
	.admin .admin_arti .emptyList{ font-size: 14px; }
}



/* admin - adminView (super) */

.admin .admin_arti .viewBox .infoBox{ display: flex; flex-wrap: wrap; margin-top: 20px; }
.admin .admin_arti .viewBox .infoBox > li{ width: calc(100% / 4); display: flex; }
.admin .admin_arti .viewBox .infoBox > li.full{ width: 100%; }

.admin .admin_arti .viewBox .infoBox > li:nth-child(1){ border-top: 1px solid #E4E4E4; }
.admin .admin_arti .viewBox .infoBox > li{ border-bottom: 1px solid #E4E4E4; }
.admin .admin_arti .viewBox .infoBox > li label{ background-color: #F7F8FA; text-align: center; padding: 20px; width: 140px; }
.admin .admin_arti .viewBox .infoBox > li p{ padding: 20px; }

@media screen and (max-width: 1250px) { 
	.admin .admin_arti .viewBox .infoBox > li{ width: calc(100% / 2); }
	.admin .admin_arti .viewBox .infoBox > li label{ width: 100px; }
}
@media screen and (max-width: 650px) { 
	.admin .admin_arti .viewBox .infoBox{ font-size: 14px; }
	.admin .admin_arti .viewBox .infoBox > li{ width: 100%; }
	.admin .admin_arti .viewBox .infoBox > li label{ width: 80px; padding: 20px 5px; }
	.admin .admin_arti .viewBox .infoBox > li p{ padding: 20px 10px; }
}

.admin .admin_arti .viewBox.write .infoBox > li{ width: calc(100% / 3); }
.admin .admin_arti .viewBox.write .infoBox > li.full{ width: 100%; }

.admin .admin_arti .viewBox.write .infoBox > li label{ display: flex; align-items: center; justify-content: center; }

.admin .admin_arti .viewBox.write .infoBox > li .ipt{ padding: 10px; border: 1px solid #dfdfdf; width: 100%; }
.admin .admin_arti .viewBox.write .infoBox > li .category{ padding: 10px; border: 1px solid #dfdfdf; width: 100%; }

.admin .admin_arti .viewBox.write .btnWrap{ display: flex; justify-content: center; width: calc(100% + 20px); margin-left: -10px; margin-top: 20px; }
.admin .admin_arti .viewBox.write .btnWrap > li{ padding: 10px; }

.admin .admin_arti .viewBox.write .btnWrap > li .cancelBtn{ padding: 10px; border: 1px solid #dfdfdf; color: #7F7F7F; display: block; }
.admin .admin_arti .viewBox.write .btnWrap > li .submitBtn{ padding: 10px; border: 1px solid var(--main-color); background-color: var(--main-color); color: #fff;  }

@media screen and (max-width: 1250px) { 
    .admin .admin_arti .viewBox.write .infoBox > li{ width: calc(100%); }

    .admin .admin_arti .viewBox.write .btnWrap{ font-size: 14px; width: calc(100% + 10px); margin-left: -5px; }
    .admin .admin_arti .viewBox.write .btnWrap > li{ padding: 5px; }
}


.admin .admin_arti .viewBox .putBox{ 
	padding: 20px 0; border-bottom: 1px solid #E4E4E4; display: flex;
}
.admin .admin_arti .viewBox .putBox > div{ display: flex; align-items: center; }
.admin .admin_arti .viewBox .putBox > div:nth-child(1){ width: 300px; }
.admin .admin_arti .viewBox .putBox > div:nth-child(2){ width: calc(100% - 300px);  }

.admin .admin_arti .viewBox .putBox > div .form{ padding: 0 10px; width: 100%; position: relative; } 
.admin .admin_arti .viewBox .putBox > div .form select{ border: 1px solid #E4E4E4; padding: 10px; width: 100%; }

.admin .admin_arti .viewBox .putBox > div .form .ipt{ border: 1px solid #E4E4E4; width: calc(100% - 200px); padding: 10px; }
.admin .admin_arti .viewBox .putBox > div .form .ipt + .submitBtn{ 
	background-color: #222; color: #fff; border: none; padding: 10px; width: calc(200px - 20px); 
	margin-left: 10px;
}

@media screen and (max-width: 900px) { 
	.admin .admin_arti .viewBox .putBox{ flex-wrap: wrap; }
	.admin .admin_arti .viewBox .putBox > div:nth-child(1){ width: 100%; }
	.admin .admin_arti .viewBox .putBox > div:nth-child(2){ width: 100%; margin-top: 10px;  }
}
@media screen and (max-width: 650px) { 
	.admin .admin_arti .viewBox .putBox{ font-size: 14px; } 

	.admin .admin_arti .viewBox .putBox > div .form .ipt{ width: calc(100% - 110px); }
	.admin .admin_arti .viewBox .putBox > div .form .ipt + .submitBtn{  padding: 10px 5px; width: calc(110px - 20px); }
}



.admin .admin_arti .viewBox .distributionBox{ margin-top: 20px; }
.admin .admin_arti .viewBox .distributionBox .blue{ color: #5C80DE; }
.admin .admin_arti .viewBox .distributionBox .listBtn{ border: 1px solid #dfdfdf; color: #7f7f7f; padding: 5px; margin-left: 10px; border-radius: 5px; }

@media screen and (max-width: 650px) { 
    .admin .admin_arti .viewBox .distributionBox{ font-size: 14px; }
}


.admin .admin_arti .viewBox .memoContent{ margin-top: 20px; }
.admin .admin_arti .viewBox .memoContent .memo_title{ font-weight: 600; }
.admin .admin_arti .viewBox .memoContent .memoList{ margin-top: 5px; font-size: 14px; }
.admin .admin_arti .viewBox .memoContent .memoList > li{ display: flex; text-align: center; border-bottom: 1px solid #E4E4E4; }
.admin .admin_arti .viewBox .memoContent .memoList > li.title{ background-color: #F7F8FA; border-top: 1px solid #E4E4E4; font-size: 16px; }

.admin .admin_arti .viewBox .memoContent .memoList > li div{ padding: 20px; flex-grow: 1; }
.admin .admin_arti .viewBox .memoContent .memoList > li div.content{ 
	flex-grow:6; flex-basis: calc(100% - 800px); display: flex; justify-content: space-between; align-items: center;
}
.admin .admin_arti .viewBox .memoContent .memoList > li div.status{ flex-basis: 100px; display: flex; align-items: center; justify-content: center; }
.admin .admin_arti .viewBox .memoContent .memoList > li div.day{ flex-basis: 100px; display: flex; align-items: center; justify-content: center; }
.admin .admin_arti .viewBox .memoContent .memoList > li .left{ text-align: left; }

.admin .admin_arti .viewBox .memoContent .memoList > li div.content .btnWrap{ display: flex; flex-shrink: 0; }
.admin .admin_arti .viewBox .memoContent .memoList > li div.content .btnWrap > li{ padding-left: 5px; }
.admin .admin_arti .viewBox .memoContent .memoList > li div.content .btnWrap > li .modifyBtn{ 
	background-color: #fff; border: 1px solid #7F7F7F; padding: 5px; border-radius: 5px; color: #7F7F7F; 
	cursor: pointer;
}
.admin .admin_arti .viewBox .memoContent .memoList > li div.content > p{ width: 100%; padding-right: 10px; }
.admin .admin_arti .viewBox .memoContent .memoList > li div.content > p .ipt{ border: 1px solid #E4E4E4; width: 100%; padding: 10px; }

.admin .admin_arti .viewBox .memoContent .memoList > li div.status select{ padding: 10px; border: 1px solid #E4E4E4; }

@media screen and (max-width: 900px) { 
	.admin .admin_arti .viewBox .memoContent .memoList > li{ flex-wrap: wrap; padding: 10px 0; }
	.admin .admin_arti .viewBox .memoContent .memoList > li.title{ display: none;  }
	.admin .admin_arti .viewBox .memoContent .memoList > li:nth-child(2){ border-top: 1px solid #E4E4E4; }

	.admin .admin_arti .viewBox .memoContent .memoList > li div{ padding: 5px; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.content{ 
		width: 100%; flex-basis: unset; flex-wrap: wrap; justify-content: flex-start; 
		order: 2;
	}
	.admin .admin_arti .viewBox .memoContent .memoList > li div.status{ width: 100%; flex-basis: unset; text-align: left; justify-content: flex-start; order: 1; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.day{ width: 100%; flex-basis: unset; text-align: left; justify-content: flex-start; order: 0; }

	.admin .admin_arti .viewBox .memoContent .memoList > li div.content::before{ content:'e?¢¥i?¨Ï : '; color:#7F7F7F; margin-right: 5px; flex-shrink: 0; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.status::before{ content:'i??i?©« : '; color:#7F7F7F; margin-right: 5px; flex-shrink: 0; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.day::before{ content:'i?¨ùi?? : '; color:#7F7F7F; margin-right: 5px; flex-shrink: 0; }

	.admin .admin_arti .viewBox .memoContent .memoList > li div.content > p{ width: 100%; margin-top:10px; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.content .btnWrap > li .modifyBtn{ margin-top: 10px; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.content .btnWrap > li:nth-child(1){ padding-left: 0; }
	.admin .admin_arti .viewBox .memoContent .memoList > li div.content .btnWrap > li .modifyBtn{ border-radius: 4px; }
}

/* floating_menu */
.floating_menu{ position: fixed; right: calc((100% - 1200px) / 2); bottom: 150px; z-index: 999; }
@media screen and (max-width: 1250px) { 
    .floating_menu{ right: 10px; }
}
@media screen and (max-width: 1000px) { 
    .floating_menu{ bottom: 210px; }
}
@media screen and (max-width: 650px) { 
    .floating_menu{ bottom: 195px; right: 5px;  }
    .floating_menu.active{ bottom: auto; top: 210px; right: 15px; }
    .floating_menu img{ width: 10vw; }
}

@keyframes Box1 {
	0% { background-color: var(--main-color); }
	50% {  background-color: #222; }
	100% { background-color: var(--main-color); }
}
@keyframes Color1 {
	0% { color: #fff; }
	50% {  color: var(--main-color); }
	100% { color: #fff; }
}