@charset "utf-8";

/* item_sort */
.item_sort{border-bottom: 1px solid #4361db; margin-bottom: 30px; display: flex; justify-content: space-between; }
.item_sort .l_cont{display: flex; position: relative; top: 1px;}
.item_sort .l_cont li{border: 1px solid #dedede; margin-left: -1px; border-bottom: 0px;}
.item_sort .l_cont li:first-child{margin-left: 0;}
.item_sort .l_cont li a{font-size: 1.6rem; display: block; width: 100%; height: 100%; padding: 14px 24px; font-weight: 300; color: #222; font-weight: 400;}
.item_sort .l_cont li.flex{border-bottom: 1px solid #4361db;}
.item_sort .l_cont li.flex a{display: flex; justify-content: center; align-items: center; justify-content: center; gap:5px; background-color: #4361db; color: #fff; white-space: nowrap;}
.item_sort .l_cont li.flex a img{max-width: 22px;}
.item_sort .l_cont li.flex.on a{color: #fff;}
.item_sort .l_cont li.on{border: 1px solid #4361db; border-bottom: 1px solid #fff; position: relative; z-index: 2;}
.item_sort .l_cont li.on a{color: #4361db; font-weight: 500;}
.item_sort .l_cont.pc{display: flex;}
.item_sort .l_cont.mo{display: none;}
.item_sort .l_cont.mo select{padding: 8px 24px 8px 10px; border:1px solid #dedede;}
.item_sort .r_cont{display: flex; align-items: center;}
.item_sort .r_cont select{padding: 8px 24px 8px 10px; border:1px solid #dedede;}
.item_sort .r_cont select option{}

@media all and (max-width:768px){
    .item_sort{border-bottom: 0; justify-content: flex-end;}
	.item_sort .l_cont.pc{width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap:8px;}
	.item_sort .l_cont li{margin-left: 0; border: 0px; text-align: center; background-color: #f5f6f8 !important; border-radius: 10px; overflow: hidden; line-height: 1.6em;}
	.item_sort .l_cont li.flex{border-bottom: 0;}
	.item_sort .l_cont li.flex a{background-color: #f5f6f8 !important;}
	.item_sort .l_cont li a{font-weight: 600; color: #a6abb6 !important; padding: 14px 20px;}
	.item_sort .l_cont li.on{border: 0px;}
	.item_sort .l_cont li.on a{font-weight: 600; background-color: #4361db !important; color: #fff !important;}
/*
    .item_sort .l_cont.pc{display: none;}
    .item_sort .l_cont.mo{display: block; margin-right: 10px;}
*/
}

/* paging */
.paging{display: flex; justify-content: center; align-items: center; margin-bottom: 100px;}
.paging li{width: 40px; height: 40px; border-radius: 5px; border: 1px solid #dedede; margin: 0 2px;}
.paging li.arrow a{line-height: 1em; width: 100%; height: 100%; color: #000;}
.paging li a{font-size: 1.6rem; display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 5px;}
.paging li a:hover{background-color: rgba(53, 84, 217, 0.1);}
.paging li.on a{background-color: #3554d9; color: #fff;}

@media all and (max-width:768px){
    .paging li{width: 30px; height: 30px;}
    .paging li a{font-size: 1.5rem;}
    .paging li a span{font-size: 2rem;}
}


/* item_view */
.item_view{}
.item_view .inner{}
.item_view .inner .manager{background-color: #f5f6f8; border-radius: 20px; padding: 30px; display: flex; margin-bottom: 30px;}
.item_view .inner .manager .img{}
.item_view .inner .manager .img img{height: 200px;}
.item_view .inner .manager .dl_box{font-size: 1.6rem; display: flex; flex-wrap: wrap; padding-left: 30px;}
.item_view .inner .manager .dl_box dl{display: flex; width: 50%;}
.item_view .inner .manager .dl_box dl dt{width: 30%; color: #000; font-weight: 600; padding-top: 5px; position: relative; padding: 10px 20px; background-color: #eaebed; border-bottom: 1px dashed #ddd;}
.item_view .inner .manager .dl_box dl dd{width: 70%; padding: 10px 20px; border-bottom: 1px dashed #ddd; color: #444;}
.item_view .inner .manager .dl_box dl dd a{background-color: #4361db; padding: 6px 12px; display: inline-flex; align-items: center; color: #fff; border-radius: 5px;}
.item_view .inner .manager .dl_box dl dd > span{color: #4361db; font-weight: 600;}
.item_view .inner .manager .dl_box dl dd a > span{width: auto; background-color: #fff; border-radius: 100%; color: #4361db; margin-left: 5px; font-size: 1.6rem; font-weight: 800;}

.item_info{padding: 30px; border:1px solid #ddd; display: flex; border-radius: 20px; margin-bottom: 30px; align-items: center;}
.item_info .img_box{max-width: 635px;}
.item_info .img_box .big{border-radius: 20px; overflow: hidden;}
.item_info .img_box .big .img{}
.item_info .img_box .big .img img{max-width: 100%}
.item_info .img_box .small{margin-top: 10px; cursor: pointer;}
.item_info .img_box .small .img{margin: 0 5px; border-radius: 5px; overflow: hidden;}
.item_info .img_box .small .img img{max-width: 100%;}
.item_info .info{margin-left: 30px; width: 100%}

.item_info .info .bf{font-size: 2.4rem; color:#3554d9; margin-bottom:20px; border-bottom: 1px solid #ddd; padding-bottom: 12px;}
.item_info .info .bf.bf11::before{content:''; content:''; width: 169px; height: 50px; background:url(/images/sub/bf11.webp) no-repeat center center / contain; display:block; pointer-events: none;}
.item_info .info .bf.bf12::before{content:''; width: 181px; height: 50px; background:url(/images/sub/bf12.webp) no-repeat center center / contain; display:block; pointer-events: none;}
.item_info .info .bf.bf13::before{content:''; width: 209px; height: 50px; background:url(/images/sub/bf13.webp) no-repeat center center / contain; display:block; pointer-events: none;}

.item_info .info .tit{}
.item_info .info .tit .flex{display: flex;}
.item_info .info .tit .flex p{margin-left:10px; font-size: 1.5rem; color: #444; padding-left: 10px; border-left: 1px solid #eee;}
.item_info .info .tit h4{color: #4361db; font-size: 1.5rem;}
.item_info .info .tit .flex_cont{display: flex; gap:10px; margin-top: 10px;}
.item_info .info .tit .flex_cont .cont{display: flex; align-items: center; gap:10px;}
.item_info .info .tit .flex_cont .cont .reco{ /*top: 10px;*/}
.item_info .info .tit .flex_cont .cont .reco li{color: #fff; font-size: 14px; font-weight: 600; padding: 4px 10px; text-align: center; box-shadow: 0px 1px 4px rgba(0,0,0,0.15); margin-right: 0 !important;}
.item_info .info .tit .flex_cont .cont .reco li.r{background-color: #ee1111;}
.item_info .info .tit .flex_cont .cont .reco li.y{background-color: #ee8011;}
.item_info .info .tit .flex_cont .cont .reco li.b{background-color: #1177ee;}
.item_info .info .tit .flex_cont .cont .reco li.g{background-color: #18c641;}
.item_info .info .tit .flex_cont .cont .coin_label{ text-align: center; display: flex; justify-content: center; align-items: center; gap:3px; background:linear-gradient(120deg, #ffec87, #fed43c, #fece30); padding: 3.5px 9px 0px 6px; border-radius: 8px; border-bottom: 2.5px solid #fab330;}
.item_info .info .tit .flex_cont .cont .coin_label img{width: 24px; color:#fff; margin-bottom: 3px;}
.item_info .info .tit .flex_cont .cont .coin_label p{font-size: 17px; color:#0a2b60; font-weight: 500; margin-top: -2px;}
.item_info .info .tit h3{color: #000; font-size: 2.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}
.item_info .info .tit .flex_cont .coin_hit2{background-color: #ff4e00; font-weight: 700; padding: 0px 8px; border-radius: 7px; line-height: 34px;}
.item_info .info .tit .flex_cont .coin_hit2 p{display: inline-flex; align-items: center; gap:3px; color: #fff; font-size: 14px;}
.item_info .info .tit .flex_cont .coin_hit2 b{font-size: 1.125em;}
.item_info .info > .dl_box{margin: 20px 0; border-top: 1px solid #eee; display: flex; flex-wrap: wrap;}
.item_info .info > .dl_box dl{display: flex; width: 50%; border-bottom: 1px solid #eee;}
.item_info .info > .dl_box dl.w100{width: 100%;}
.item_info .info > .dl_box dl dt{width: 30%; font-size: 1.4rem; color: #666; font-weight: 600; background-color: #f5f5f3; padding: 0 10px; line-height: 2em;}
.item_info .info > .dl_box dl.w100 dt{width: 15%;}
.item_info .info > .dl_box dl dd{width: 70%; font-size: 1.6rem; font-weight: 400; color: #222; padding: 0 10px; line-height: 2em;}
.item_info .info > .dl_box dl dd span{color: #4361db}
.item_info .info > .dl_box dl dd span.pr{margin-left: 3px; padding-right: 20px; background-repeat: no-repeat; background-size: contain; background-position: right center;}
.item_info .info > .dl_box dl dd span.up{color: red; font-weight: 500; background-image: url(/images/sub/up_arrow.webp);}
.item_info .info > .dl_box dl dd span.down{color: blue; font-weight: 500; background-image: url(/images/sub/down_arrow.webp);}
.item_info .info > .dl_box dl.w100 dd br.br{display: none;}
.item_info .info .price_box{display: flex; justify-content: space-between;}
.item_info .info .price_box .price{background-color: #eaebed; padding: 20px; border-radius: 10px; width: calc(100% / 2 - 10px);}
.item_info .info .price_box .price.w100{width: 100%; background-color:#fff; border-top:1px solid #eaebed; border-bottom:1px solid #eaebed;}
.item_info .info .price_box .price:nth-child(2){background-color: #f5f6f8;}
.item_info .info .price_box .price h3{color: #222; margin-bottom: 15px; font-size: 1.7rem;}
.item_info .info .price_box .price .dl_box{display: flex; flex-wrap: wrap;}
.item_info .info .price_box .price .dl_box dl{display: flex; width: 100%; }
.item_info .info .price_box .price .dl_box dl dt{width: 30%; font-size: 1.4rem; font-weight: 600; line-height: 26px;}
.item_info .info .price_box .price.w100 .dl_box dl dt{font-size: 1.7rem;}
.item_info .info .price_box .price .dl_box dl dd{width: 70%; line-height: 26px; font-size: 1.6rem; font-weight: 400; color: #222;}
.item_info .info .price_box .price.w100 .dl_box dl dd{font-size: 1.9rem;}
.item_info .info .price_box .price.w100 .dl_box dl:last-child{color: #e5564e;}
.item_info .info .price_box .price.w100 .dl_box dl:last-child dd{color: #e5564e; font-weight: 500;}
.item_info .info .price_box .price .dl_box dl dd.rd{color: #e5564e;}

.item_view .content{padding: 30px; border:1px solid #ddd; display: flex; border-radius: 20px; margin-bottom: 30px; align-items: center;}
.item_view .content h3.tit{font-size: 1.8rem; font-weight: 700; color: #000; margin-bottom: 30px;}

.item_view .back{text-align: center;}
.item_view .back a{background-color: #2c396a; color: #fff; font-size: 1.7rem; font-weight: 600; padding: 12px 20px; border-radius: 5px;}
.item_view .back a:hover{background-color: #1b223e;}

@media all and (max-width:1280px){
    .item_info .info > .dl_box dl dt{padding: 10px 4px;}
    .item_info .info > .dl_box dl dd{line-height: 1.6em; padding: 10px;}
    .item_info .info > .dl_box dl dd span{display: block;}
    .item_info .info .price_box .price .dl_box dl dt{width: 35%;}
    .item_info .info .price_box .price .dl_box dl dd{width: 65%;}
}
@media all and (max-width:976px){
    .item_info{flex-direction: column; padding: 20px; border-radius: 10px;}
    .item_info .img_box{margin-bottom: 30px; max-width: 100%;}
    .item_info .img_box .big{border-radius: 10px;}
    .item_info .img_box .big .img img{width: 100%;}
    .item_info .info{margin-left: 0;}
    .item_info .info .tit h3{font-size: 2.4rem;}
    .item_info .info > .dl_box{margin: 15px 0;}
    .item_info .info > .dl_box dl dd span{display: inline;}
    .item_info .info .price_box .price{width: calc(100% / 2 - 7.5px); padding: 15px;}
    
    .item_view .inner .manager{padding: 20px; flex-direction: column; border-radius: 10px; margin-bottom: 20px;}
    .item_view .inner .manager .img{text-align: center;}
    .item_view .inner .manager .img img{height: 170px;}
    .item_view .inner .manager .dl_box{padding-left: 0; margin-top: 30px;}
    .item_view .inner .manager .dl_box dl dt{padding: 10px 15px;}
    .item_view .inner .manager .dl_box dl dd{padding: 10px 10px; word-break: keep-all;}
    .item_view .inner .manager .dl_box dl dd a{font-size: 1.4rem;}
    
    .item_view .content{padding: 20px; border-radius: 10px;}
}
@media all and (max-width:640px){
    .item_info .info > .dl_box dl{width: 100%;}
    .item_info .info .price_box{flex-direction: column;}
    .item_info .info .price_box .price{width: 100%;}
    .item_info .info .price_box .price:first-child{margin-bottom: 15px;}
    .item_view .inner .manager .dl_box dl{width: 100%;}
    .item_view .inner .manager .img img{height: 150px;}
    .item_info .info > .dl_box dl.w100 dt{width: 30%;}
    .item_info .info > .dl_box dl.w100 dd br.br{display: block;}
	.item_info .info .tit .flex_cont{flex-direction: column; gap:13px;}
	.item_info .info .tit .flex_cont .cont{gap:8px;}
	.item_info .info .tit .flex_cont .cont .coin_label{bottom:6px; right:7px; gap:4px;}
	.item_info .info .tit .flex_cont .cont .coin_label img{width:20px;}
	.item_info .info .tit .flex_cont .cont .coin_label p{font-size:15px;}
	.item_info .info .tit .flex_cont .coin_hit2{line-height: 30px;}
	.item_info .info .tit .flex_cont .coin_hit2 p{font-size: 13px;}
}

.buy_sell{}
.buy_sell .inner{}
.buy_sell .inner .cont{border-top: 2px solid #4361db; margin-top: 40px;}
.buy_sell .inner .cont dl{display: flex;}
.buy_sell .inner .cont dl dt{width: 20%; background-color: #f5f6f8; padding: 15px; border-bottom: 1px solid #dedede; font-size: 1.6rem; font-weight: 500; color: #222;}
.buy_sell .inner .cont dl dd{width: 80%; padding: 15px; border-bottom: 1px solid #dedede; font-size: 1.6rem; font-weight: 300;}
.buy_sell .inner .cont dl dd select{padding: 8px; padding-right: 16px; border: 1px solid #dedede; border-radius: 2px; margin-right: 5px;}
.buy_sell .inner .cont dl dd select option{}
.buy_sell .inner .cont dl dd input[type = text]{padding: 8px; border: 1px solid #dedede; border-radius: 2px; margin-right: 5px; width: 100%; margin-bottom: 5px;}
.buy_sell .inner .cont dl dd input[type = number]{padding: 8px; border: 1px solid #dedede; border-radius: 2px; margin-right: 5px;}
.buy_sell .inner .cont dl dd input[type = text]:last-child{margin-bottom: 0;}
.buy_sell .inner .cont dl dd input[type = radio]{margin-right: 5px; border: 1px solid #dedede;;}
.buy_sell .inner .cont dl dd label{font-size: 1.6rem; color: #444; font-weight: 300; margin-right: 5px;}
.buy_sell .inner .cont dl dd textarea{width: 100%; border: 1px solid #dedede; resize: none; font-size: 1.4rem; padding: 10px; font-family: 'Pretendard', sans-serif; list-style: -0.05em;}
.buy_sell .button{margin-top: 40px;}
.buy_sell .button a{color: #fff; padding: 10px 20px; font-size: 1.6rem; display: inline-block; margin: 0 2px; border-radius: 5px; vertical-align: middle;}
.buy_sell .button a.confirm{background-color: #2c396a;}
.buy_sell .button a.cancel{background-color: #5d6172;}
.buy_sell .button button{color: #fff; padding: 10px 20px; font-size: 1.6rem; display: inline-block; margin: 0 2px; border-radius: 5px; vertical-align: middle;}
.buy_sell .button button.confirm{background-color: #2c396a;}
.buy_sell .inner .cont dl dd .radio-wrap{display: flex; gap: 20px;}
.buy_sell .inner .cont dl dd .radio-wrap label,
.buy_sell .inner .cont dl dd .radio-wrap input[type=radio]{cursor: pointer;}
@media all and (max-width:640px){
    .buy_sell .inner .cont dl{flex-direction: column;}
    .buy_sell .inner .cont dl dt{width: 100%; padding: 10px;}
    .buy_sell .inner .cont dl dd{width: 100%; padding: 10px 0;}
}


/* community */
.comm_bg{background-color: #f5f6f7;}
.community{display: flex;}
.community .l_mo_menu{display: none;}
.community .l_menu{border: 1px solid #eee; padding: 30px; border-radius: 10px; max-width: 260px; width: 100%; background-color:#fff;}
.community .l_menu .box{padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee;}
.community .l_menu .box:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
.community .l_menu .box h4{font-size: 1.8rem; color: #000; font-weight: 700; margin-bottom: 10px;}
/*.community .l_menu .box:last-child h4{margin-bottom: 0;}*/
.community .l_menu .box h4 a{color: #000;}
.community .l_menu .box ul{}
.community .l_menu .box ul li{line-height: 1.8em;}
.community .l_menu .box ul li a{display: flex; width: 100%; align-items: center; color: #666; font-weight: 300; margin-left: 5px;}
.community .l_menu .box ul li.on a{color: #4361db; font-weight: 400;}
.community .l_menu .box ul li a span{font-size: 1.8rem; margin-right: 3px; font-weight: 100;}
.community .r_cont{border: 1px solid #eee; border-radius: 10px; width: calc(100% - 260px - 20px); margin-left: 20px; padding: 30px; background-color:#fff;}
.community .r_cont .tit{margin-bottom:20px; padding-bottom: 30px; border-bottom: 1px solid #ddd;}
.community .r_cont .tit h3{color: #000; font-size: 2.4rem; font-weight: 700;}
.community .r_cont .tit span{color: #999c; font-size: 2.4rem; font-weight: 400;}


@media all and (max-width:976px){
	.community{flex-direction: column;}
	.community .l_mo_menu{width: 100%; margin-bottom: 20px; display: flex; justify-content: space-between;}
	.community .l_mo_menu select{width: calc(100% - 5px); padding: 12px 16px; border: 1px solid #eee; border-radius: 3px;}
	.community .l_mo_menu select option{}
	.community .l_menu{display: none;}
	.community .r_cont{width: 100%; margin-left: 0; padding: 20px;}
	.community .r_cont .tit{margin-bottom: 15px; padding-bottom: 20px;}
	.community .r_cont .tit h3{font-size: 2.1rem;}
}
@media all and (max-width:640px){
	.community .l_mo_menu{margin-bottom: 15px;}
	.community .r_cont{padding: 15px;}
	.community .r_cont .tit{margin-bottom: 10px; padding-bottom: 15px;}
	.community .r_cont .tit h3{font-size: 1.9rem;}
}


.orderList li { counter-increment: number; display: flex; align-items: center; gap: 0.5em; }
.orderList li::before { content: counter(number, decimal)'.'; color:#9eb3e8; font-family: 'Lato'; font-weight: 400; }

.orderList.vtop li { align-items: flex-start; gap: 1em;  }


.terms { border: 10px solid #edeff4; padding: 4%; max-width: 1600px; line-height: 1.7em; }
.terms h3 { font-size: 24px; color:#212121; }
.terms h4 { font-size: 20px; color:#212121; margin: 2em 0 0.5em; }
.terms p + p { margin-top: 1em; }
.terms p + h3 { margin-top: 2.5em; }


.dl_box2{display: flex; gap:10px; flex-wrap: wrap; background-color: #fff; border-radius: 5px; margin-top: 30px; padding: 30px; margin-bottom: 10px; border: 1px solid #eee;}
.dl_box2:first-child{margin-top: 0;}
.dl_box2 dl{display: flex; gap:10px; width: calc(33.33333% - 20px / 3); align-items: center; }
.dl_box2 dl dt{width: 100px; color: #1a173b; font-weight: 600;}
.dl_box2 dl dd{display: flex; align-items: center;width: calc(100% - 80px);}
.dl_box2 dl dd input{border: 1px solid #dde0ea; border-radius: 3px; width: 60%; height: 100%; height: 37px; padding: 8px 12px; outline: none; margin-right: 5px; min-width: 160px;}
.dl_box2 .total{background-color: #f5f6f8;}
.dl_box2 dl dd select{border: 1px solid #dde0ea; border-radius: 3px; width: 49%; height: 100%; height: 37px; padding: 8px 12px; outline: none; margin-right: 5px;}

@media all and (max-width:976px){
	.dl_box2{padding: 20px;}
	.dl_box2 dl{width: calc(50% - 10px / 2);}
	.dl_box2 dl dt{width: 65px;}
	.dl_box2 dl dd{width: calc(100% - 65px);}
	.dl_box2 dl dd input{width: 80%;}
}
@media all and (max-width:640px){
	.dl_box2 dl{width: 100%;}
}

.dl_box3{display: flex; gap:50px; flex-wrap: wrap; background-color: #fff; border-radius: 5px; margin-top: 30px; padding: 30px; margin-bottom: 10px; border: 1px solid #eee;}
.dl_box3:first-child{margin-top: 0;}
.dl_box3 dl{display: flex; gap:10px; width: calc(30% - 20px / 2); align-items: center; }
.dl_box3 dl dt{width: 80px; color: #1a173b; font-weight: 600;}
.dl_box3 dl dd{display: flex; align-items: center;width: calc(100% - 80px);}
.dl_box3 dl dd input[type=text]{border: 1px solid #dde0ea; border-radius: 3px; width: 60%; height: 100%; height: 37px; padding: 8px 12px; outline: none; margin-right: 5px; min-width: 160px;}
.dl_box3 dl dd input[type=checkbox]{border: 1px solid #dde0ea; border-radius: 3px; height: 37px; padding: 8px 12px; outline: none; margin-right: 5px;}
.dl_box3 dl dd select{border: 1px solid #dde0ea; border-radius: 3px; width: 49%; height: 100%; height: 37px; padding: 8px 12px; outline: none; margin-right: 5px;}

@media all and (max-width:976px){
	.dl_box3{padding: 20px;gap:10px;}
	.dl_box3 dl{width: calc(50% - 10px / 2);}
	.dl_box3 dl dt{width: 65px;}
	.dl_box3 dl dd{width: calc(100% - 65px);}
	.dl_box3 dl dd input[type=text]{width: 80%;}
}
@media all and (max-width:640px){
	.dl_box3 dl{width: 100%;}
}

.btn_box{margin-top: 20px; display: flex; gap:10px;}
.btn_box.jfe{justify-content: flex-end;}
.btn_box a{color: #fff; padding: 14px 24px; border-radius: 7px; display: inline-flex; align-items: center;}
.btn_box a i{font-style: normal;}
.btn_box input{color: #fff; padding: 14px 24px; border-radius: 7px; display: inline-flex; align-items: center; font-family: 'Roboto', 'Pretendard', 'Noto Sans KR', 'Noto Sans Korean', sans-serif;}
.btn_box a span{margin-right: 5px; font-size: 2rem;}
.btn_box .btn1{}
.btn_box .btn2{border: 1px solid #e5564e; color: #e5564e;}
.btn_box .btn3{border: 1px solid #4361db; color: #4361db; background-color: transparent; cursor: pointer; transition: .2s ease-in-out;}
.btn_box .btn2:hover{background-color: #e5564e; color: #fff;}
.btn_box .btn2.on{background-color: #e5564e; color: #fff;}
.btn_box .btn2.on:hover{background-color: #fff; color: #e5564e;}
.btn_box .btn3:hover{background-color: #4361db; color: #fff;}


table.product_list2{width: 100%;}
table.product_list2 thead tr{}
table.product_list2 thead tr th{background-color: #4361db; color: #fff; padding: 15px 10px; border-right: 1px solid #4b6cf2;}
table.product_list2 tbody tr{}
table.product_list2 tbody tr th{}
table.product_list2 tbody tr td{text-align: center; padding: 15px 10px; word-break: keep-all; border-bottom: 1px solid #eee; border-right: 1px solid #eee; color: #212121; font-weight: 400;}
table.product_list2 tbody tr td b{font-size: 1.7rem;}
table.product_list2 tbody tr:nth-child(even) td{background-color: #f8f8f8;}
table.product_list2 tbody tr td a{color: #212121; font-weight: 700; color: #4361db; font-size: 1.7rem;}
table.product_list2 tbody tr td:last-child{border-right: 0;}
table.product_list2 tbody tr td img{max-width: 100%; max-height: 140px;}


/* s_tit */
.s_tit{font-size: 2.2rem; font-weight: 700; color: #000; margin-bottom: 15px; margin-top: 50px;}
.s_txt{color: #444; line-height: 1.8em; font-size: 1.7rem; font-weight: 300;}
.s_txt a{color: #4963f4; text-decoration: underline; text-underline-position: under;}
.s_txt a:hover{color: #7786de}
.s_txt b{font-weight: 500;}
.s_txt ul{display: flex; align-items: center; gap:10px;}
.s_txt ul li{}
.s_txt ul li.on{border: 1px solid #4361db; width: 100px; height: 100px; border-radius: 100%; display: flex; justify-content: center; align-items: center; color: #4361db;}
.s_txt ul li.onn{background-color: #4361db; color: #fff;}

@media all and (max-width:768px){
	.s_tit{font-size: 2rem; margin-top: 40px;}
	.s_txt ul li.on{width: 80px; height: 80px;}
}


/* tb-style1 */
.tb-style1{width: 100%; border-top: 2px solid #255fff;}
.tb-style1 thead tr th{background-color: #f5f7fd; color: #222; padding: 15px 0; font-weight: 700;}
.tb-style1 tbody tr th{font-size: 1.8rem; color: #222; font-weight: 500;border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; background-color: #f9f9fc;}
.tb-style1 tbody tr td{padding: 15px 20px; border-bottom: 1px solid #dedede;}
.tb-style1 tbody tr td b{color: #222;}
/*.tb-style1 tbody tr:nth-child(even) td{background-color: #f8f8f8;}*/
.tb-style1 tbody tr td p{position: relative; padding-left: 12px; line-height: 1.8em; color: #555; word-break: keep-all;}
.tb-style1 tbody tr td p::before{content: '·'; color: #4361db; position: absolute; left: 0;}
.tb-style1 tbody tr td input{border: 1px solid #dde0ea; border-radius: 3px; width: calc(100% - 40px); height: 100%; height: 37px; padding: 8px 12px; outline: none; margin-right: 5px; max-width: 160px;}

@media all and (max-width:768px){
	.tb-style1 tbody tr th{font-size: 1.7rem;}
	.tb-style1 tbody tr td{padding: 8px 12px;}
	.tb-style1 tbody tr td p{padding-left: 6px;}
}

/* intro1 */
.intro1{}
.intro1 .inner{}
.intro1 .inner .box{ padding-bottom: 80px; margin-bottom: 80px; border-bottom: 1px solid #dedede;}
.intro1 .inner .box .s_tit{margin-top: 0; margin-bottom: 30px;}
.intro1 .inner .box:last-child{padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.intro1 .inner .box .inner{max-width: 1120px;}
.intro1 .inner .box .intro_bg{background: #324ec0 url(/images/sub/intro1_bg1.png) no-repeat right 80px bottom /  555px; padding: 100px 120px;}
.intro1 .inner .box .intro_bg .txt{color: #fff;}
.intro1 .inner .box .intro_bg .txt h4{font-weight: 500; font-size: 2rem;}
.intro1 .inner .box .intro_bg .txt h3{font-weight: 700; font-size: 3.2rem; margin-top: 5px;}
.intro1 .inner .box .intro_txt{margin: 50px auto 0; max-width: 1120px;}
.intro1 .inner .box .intro_txt p{margin-bottom: 20px; font-size: 2rem; font-weight: 400; color: #222; line-height: 1.8em; word-break: keep-all;}
.intro1 .inner .box .intro_txt p:last-child{margin-bottom: 0;}

.intro1 ul.list{display: flex; gap:12px;}
.intro1 ul.list li{width: 100%; border: 2px solid #2cacae; height: 176px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.intro1 ul.list li:nth-child(odd){border: 2px solid #3f6fd3;}
.intro1 ul.list li p{color: #000; font-weight: 700; margin-top: 12px; font-size: 1.7rem;}
.intro1 .map_txt{margin-top: 20px;}
.intro1 .map_txt dl{display: flex; padding: 20px 0; border-bottom: 1px solid #eee;}
.intro1 .map_txt dl:last-child{border-bottom: 0;}
.intro1 .map_txt dl dt{color: #000; font-weight: 600; font-size: 2rem; width: 100px;}
.intro1 .map_txt dl dd{width: calc(100% - 100px); color: #555;}

@media all and (max-width:976px){
	.intro1 .inner .box{margin-bottom: 60px; padding-bottom: 60px;}
	.intro1 .inner .box .intro_bg{padding: 80px 40px; background: #324ec0 url(/images/sub/intro1_bg1.png) no-repeat right 40px bottom /  360px;}
	.intro1 .inner .box .intro_txt{margin-top: 35px;}
	.intro1 .inner .box .intro_txt p{font-size: 1.9rem; margin-bottom: 15px;}
	.intro1 .inner .box .intro_bg .txt h3{font-size: 2.8rem;}
	.intro1 ul.list{flex-wrap: wrap;}
	.intro1 ul.list li{--box-width: calc(86vw / 3 - 24px / 3); width: var(--box-width); height: var(--box-width);}
	.intro1 ul.list li .img img{max-height: 48px;}
}
@media all and (max-width:640px){
	.intro1 .inner .box .intro_bg{padding: 60px 30px 200px; background: #324ec0 url(/images/sub/intro1_bg1.png) no-repeat right 0px bottom /  280px;}
	.intro1 ul.list li{--box-width: calc(85vw / 2 - 12px / 2);}
	.intro1 .inner .box{margin-bottom: 50px; padding-bottom: 50px;}
	.intro1 .inner .box .intro_txt{margin-top: 25px;}
	.intro1 .inner .box .intro_txt p{margin-bottom: 12px;}
	.intro1 .inner .box .intro_bg .txt h4{font-size: 1.8rem;}
	.intro1 .inner .box .intro_bg .txt h3{font-size: 2.3rem;}
	.intro1 .map_txt dl{padding: 15px 0;}
	.intro1 .map_txt dl dt{font-size: 1.8rem;}
	.root_daum_roughmap .wrap_map{height: 300px !important;}
}


/* intro2 */
.intro2{}
.intro2 .btn_boxs{display: flex; gap:10px;}
.intro2 .btn_boxs a{border: 1px solid #4361db; color: #4361db; padding: 12px 24px;}
.intro2 .btn_boxs a:hover{background-color: #4361db; color: #fff;}

@media all and (max-width:768px){
	.intro2 .btn_boxs a{padding: 12px 4px;}
}


.item_btm_info{margin-top: 5em; text-align: center; margin-inline:auto; max-width: 95%;}
.item_btm_info p{padding:1em; font-size: 2.4rem; opacity: 0.7; word-break: keep-all; background-color: #f9f9f9;}
.item_number{padding: 5px; text-align: right; font-size: 1.5rem;}
.item_number p{display: inline-flex; align-items: center; }
.item_number p span{font-size: 1.7rem; margin-right: 2px; opacity: 0.7;}
.item_number2{margin-bottom: 10px;}
.item_number2 p{font-weight: 500; color: #222; font-size: 1.3em;}
.item_number2 p span.rd{color: #e5564e;}
.item_number2 p strong{font-size: 15px; font-weight: 500; color: #666; margin-left: 5px; position: relative; top: -2px;}

@media all and (max-width:976px){
	.item_number2 p strong{font-size: 14px;}
}



.content_btm_price{margin-bottom: 45px; display: flex; justify-content: space-between;}
.content_btm_price .price{/*border:1px solid #ddd;*/background-color: #f5f6f8e5; border-radius: 20px;  padding: 30px; width: calc(100% / 2 - 10px);}
.content_btm_price .price:nth-child(2){background-color: #f5f6f899;}
.content_btm_price .price h3{color: #222; margin-bottom: 15px; font-size: 1.7rem;}
.content_btm_price .price .dl_box{display: flex; flex-wrap: wrap;}
.content_btm_price .price .dl_box dl{display: flex; width: 100%; }
.content_btm_price .price .dl_box dl dt{width: 20%; font-size: 1.4rem; font-weight: 600; line-height: 26px;}
.content_btm_price .price .dl_box dl dd{width: 80%; line-height: 26px; font-size: 1.6rem; font-weight: 400; color: #222;}
.content_btm_price .price > p{text-align: right; font-size: 1.2rem;}
@media all and (max-width:1280px){
    .content_btm_price .price .dl_box dl dt{width: 35%;}
    .content_btm_price .price .dl_box dl dd{width: 65%;}
}
@media all and (max-width:976px){
    .content_btm_price .price{width: calc(100% / 2 - 7.5px); padding:20px;  border-radius: 10px;}
}
@media all and (max-width:640px){
    .content_btm_price{flex-direction: column;}
    .content_btm_price .price{width: 100%;}
    .content_btm_price .price:first-child{margin-bottom: 15px;}
}

.content_btm_chart_tit{color: #222;margin-bottom: 15px;font-size: 1.7rem;}
.content_btm_chart_tit span{color: #3554d9;}
.content_btm_chart_tit p{margin-top: 0.8em; font-size: 1.2rem; font-weight: normal; opacity: 0.7; line-height: 1.2em;}
.content_btm_chart{position: relative; display: flex; justify-content: center; align-items: center; gap: 4%; margin-bottom: 80px; margin-inline:auto; font-family: 'Pretendard', 'Roboto';}
.canvas_wrap{position: relative;}
.canvas_wrap > p{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 1.2em; font-weight: 500; }
.canvas_wrap > p span{font-weight: 700; font-size: 1.3em; color: #000;}
.legend-wrap {}
.legend-wrap > p{margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 22px; color: #222;}
.legend-wrap > p span{font-weight: 600;}

.legend-div ul li {width: 200px; display:flex;align-items: center;;margin: 8px 0;color: #666;font-family: 'Roboto', 'Pretendard'; font-size: 1.6rem; cursor: pointer;}

.legend-div ul li span.dot {display: inline-block; width: 20px;height: 20px;border-radius: 50%;margin-right: 5px;vertical-align: middle;}

.legend-div ul li p {font-weight: 500;margin-right:10px; margin-left: 1em; font-size: 1.2em; color: #222; margin-left: auto; }

.legend-div ul li:last-child{}
.legend-div ul li:last-child p{color: #7d6ff7;}

.monthly_per{margin-bottom: 4px; color: #e5564e; font-weight: 600; font-size: 1.5rem;}
@media all and (max-width:740px){
.content_btm_chart{display: block; text-align: center; margin: 0 auto; width: 100%; margin-bottom: 60px;}
.canvas_wrap{width: 80%; margin: 0 auto ;}
.content_btm_chart canvas{width: 100% !important; height: auto !important;}
.legend-wrap {margin-top: 10px; width: 100%; text-align: center;}
.legend-div ul{padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap:3px 20px;}
.legend-div ul li{justify-content: center; margin: 0; width: 190px;}
.legend-div ul li span.dot{width: 10px; height: 10px;}
}
@media all and (max-width:480px){
    .legend-div ul li{font-size: 1.4rem;}
}

.checkpoint{}
.checkpoint .pc{}
.checkpoint .mo{display: none;}
.checkpoint .button{background-color: #a4d1fe; text-align: center; padding-bottom: 100px;}
.checkpoint .button button{border: 8px solid #4361db; background-color: #fff; font-family: 'Pretendard', sans-serif; border-radius: 86px; font-size: 60px; color: #4361db; font-weight: 800; padding: 16px 48px; box-shadow: 2px 8px 12px rgba(0,0,0,0.3);}
.checkpoint .button button.off{pointer-events: none; filter: grayscale(1);}
.checkpoint .button p{margin-top: 25px; font-weight: 300; color: #444; font-size: 16px;}
.checkpoint .button p + p{margin-top: 10px;} 

@media all and (max-width:640px){
	.checkpoint .pc{display: none}
	.checkpoint .mo{display: block;}
	.checkpoint .button{padding-bottom: 70px;}
	.checkpoint .button button{border-width: 5px; padding: 12px 40px; font-size: 40px; box-shadow: 2px 6px 10px rgba(0,0,0,0.2);}
	.checkpoint .button p{font-size: 15px;}
}
@media all and (max-width:480px){
	.checkpoint .button{padding-bottom: 55px;}
	.checkpoint .button button{border-width: 4px; padding: 9px 36px; font-size: 32px;}
}


.bf_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: -1; opacity: 0;}
.bf_bg.on{z-index: 99; opacity: 1;}
.bf_modal{background-color: #fafafa; width: 94%; max-width: 640px; height: 90%; max-height: max-content; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 30px; padding: 30px; z-index: -1; opacity: 0; box-shadow:2px 8px 12px rgba(0,0,0,0.1);}
.bf_modal.on{z-index: 100; opacity: 1;}
.bf_modal .title{font-size: 2rem; font-weight: 700; color: #222; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; text-align: center;}
.bf_modal .title span{color: #3554d9;}
.bf_modal .cont{}
.bf_modal .cont .img{text-align: center; margin-top: 20px;}
.bf_modal .cont .img img{max-width: 100%;}
.bf_modal .cont .info{padding: 20px; border-radius: 15px; border: 1px solid #eee; background-color: #fff; margin-top: 20px; max-height: 180px; overflow-y: scroll;}
.bf_modal .cont .info .text{}
.bf_modal .cont .info .text h3{font-size: 16px; color: #ee0000; margin-bottom: 6px;}
.bf_modal .cont .info .text p{font-weight: 300; color: #444; line-height: 1.5em;}
.bf_modal .cont .info .text p + p{margin-top: 10px;}
.bf_modal .cont .date{color: #222; font-weight: 600; text-align: center;}
.bf_modal .cont .txt{margin-top: 15px; max-height: 180px; overflow-y: scroll; background-color: #fff;  padding: 20px; border-radius: 15px; border: 1px solid #eee;}
.bf_modal .cont .txt p{font-weight: 300; color: #444; line-height: 1.5em;}
.bf_modal .cont .txt p span{font-weight: 700; color: #3554d9;}
.bf_modal .cont .txt p + p{margin-top: 10px;}
.bf_modal .cont .txt p b{font-weight: 500;}
.bf_modal .cont .btn_box{display: flex; justify-content: center; gap:10px;}
.bf_modal .cont .btn_box button{line-height: 48px; font-size: 1.8rem; font-weight: 700; padding: 0 20px; border-radius: 8px;}
.bf_modal .cont .btn_box a{line-height: 48px; font-size: 1.8rem; font-weight: 700; padding: 0 20px; border-radius: 8px;}
.bf_modal .cont .btn_box button.button01{background-color: #3554d9; color: #fff;}
.bf_modal .cont .btn_box a.button01{background-color: #3554d9; color: #fff;}
.bf_modal .cont .btn_box button.button02{border: 1px solid #ccc;}

@media all and (max-width:640px){
	.bf_modal{padding: 30px 20px; border-radius: 20px;}
	.bf_modal{max-height: max-content;}
	.bf_modal .cont .info{max-height: 150px;}
	.bf_modal .cont .img img{max-height: 45px;}
	.bf_modal .cont .info .text h3{font-size: 15px;}
	.bf_modal .tit{margin-bottom: 15px; padding-bottom: 15px;}
	.bf_modal .cont .btn_box a{line-height: 42px;}
	.bf_modal .cont .btn_box button{line-height: 42px;}
	.bf_modal .cont .txt{max-height: 150px;}
	.bf_modal .cont .txt p + p{margin-top: 7px;}
}

.point_modal{background-color: #fafafa; width: 94%; max-width: 640px; height: auto;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 30px; padding: 30px; z-index: -1; opacity: 0; box-shadow:2px 8px 12px rgba(0,0,0,0.1);}
.point_modal.on{z-index: 101; opacity: 1;}
.point_modal .title{font-size: 2rem; font-weight: 700; color: #222; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; text-align: center;}
.point_modal .title span{color: #3554d9;}
.point_modal .cont{text-align: center;}
.point_modal .cont .txt p{font-weight: 300; color: #444; line-height: 1.5em; text-align: center;}
.point_modal .cont .btn_box{display: flex; justify-content: center; gap:10px;}
.point_modal .cont .btn_box button{line-height: 48px; font-size: 1.8rem; font-weight: 700; padding: 0 20px; border-radius: 8px;}
.point_modal .cont .btn_box a{line-height: 48px; font-size: 1.8rem; font-weight: 700; padding: 0 20px; border-radius: 8px;}
.point_modal .cont .btn_box button.button01{background-color: #3554d9; color: #fff;}
.point_modal .cont .btn_box a.button01{background-color: #3554d9; color: #fff;}
.point_modal .cont .btn_box button.button02{border: 1px solid #ccc;}

@media all and (max-width:640px){
	.point_modal{max-height: 460px;}
	.point_modal .tit{margin-bottom: 15px; padding-bottom: 15px;}
	.point_modal .cont .btn_box a{line-height: 42px;}
	.point_modal .cont .btn_box button{line-height: 42px;}
}


.charge{}
.charge .point-inner{}
.charge .point-inner .box{border: 1px solid #ddd; border-radius: 15px; padding: 30px;}
.charge .point-inner .box .text{}
.charge .point-inner .box .text > p{font-size: 17px; color: #222; font-weight: 500; word-break: keep-all; line-height: 1.5em;}
.charge .point-inner .box .text p span{color: #4361db; font-weight: 600; word-break: keep-all;}
.charge .point-inner .box .text ul{margin: 20px 0 20px;}
.charge .point-inner .box .text ul li{word-break: keep-all; display: flex; gap:5px; font-size: 16px; color: #333; line-height: 1.6em;}
.charge .point-inner .box .text ul li + li{margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dedede;}
.charge .point-inner .box .text ul li span{color: #4361db; font-size: 1.25em; line-height: 1.125em;}
.charge .point-inner .box .text ul li b{font-weight: 500; color: #000; word-break: keep-all;}
.charge .point-inner .box .text .info{background-color: #ebf3fc; border-radius: 10px; padding: 20px; font-weight: 400; font-size: 15px; line-height: 1.5em; display: flex; gap:10px; word-break: keep-all; color: #555;}
.charge .point-inner .box .text .info span{color: #4361db; font-size: 1.75em;}
.charge .point-inner .box .cont{display: flex; gap:0px;}
.charge .point-inner .box .cont + .cont{margin-top: 20px;}
.charge .point-inner .box .cont .tit{width: 140px; font-size: 18px; color: #000; font-weight: 600;}
.charge .point-inner .box .cont .content{width: calc(100% - 140px);}
.charge .point-inner .box .cont .content select{padding: 14px; padding-right: 35px; border: 1px solid #ddd; border-radius: 5px; width: 100%; text-overflow: ellipsis;}
.charge .point-inner .box .cont .content input[type = text]{padding: 14px; padding-right: 35px; border: 1px solid #ddd; border-radius: 5px;}
.charge .point-inner .box .cont .content span{display: block; margin-top: 8px; font-weight: 300; color: #666;}
.charge .point-inner .box + .box{margin-top: 30px;}
.charge .point-inner .box .title{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;}
.charge .point-inner .box .title h3{color: #000; font-size: 2rem;}
.charge .point-inner .box .title h3 img{max-width: 22px; margin-right: 4px;}
.charge .point-inner .box .title h3 span{color: #4361db;}
.charge .point-inner .box .point_list{display: grid; grid-template-columns: repeat(4, 1fr); gap:10px;}
.charge .point-inner .box .point_list li{border: 1px solid #eee; border-radius: 10px; position: relative; cursor: pointer;}
.charge .point-inner .box .point_list li.on{border-color: #4361db;}
.charge .point-inner .box .point_list li input{width: 0; height:0; opacity: 0 ; visibility: hidden; position: absolute; left: -99999px; top: -9999px;}
.charge .point-inner .box .point_list li label{ cursor: pointer; padding: 25px 20px; display: block;}
.charge .point-inner .box .point_list li label h4{background-color: #fb506b; color: #fff; font-weight: 700; display: inline-block; padding: 5px 10px; position: absolute; top: -5px; font-size: 13px; border-radius: 3px; animation: poim .8s infinite;}
@keyframes poim{
	0%{top: -5px; filter: brightness(1)}
	50%{top: -8px; filter: brightness(1.15)}
	100%{top:-5px; filter: brightness(1)}
}
.charge .point-inner .box .point_list li label h3{color: #222;}
.charge .point-inner .box .point_list li.on label h3{color: #4361db;}
.charge .point-inner .box .point_list li label p{font-weight: 300; color: #666; margin-top: 5px;}
.charge .point-inner .box .point_list li.on label p{color: #4361db;}
.charge .point-inner .btn_box{justify-content: center;}
.charge .point-inner .btn_box button{background-color: #4361db; color: #fff; width: 100%; line-height: 60px; font-weight: 700; font-size: 1.8rem; border-radius: 10px;}
.charge .point-inner .btn_box a{line-height: 58px; font-weight: 700; font-size: 1.8rem; border-radius: 10px; padding-top: 0; padding-bottom: 0;}
.charge .point-inner .btn_box .btn_submit{background-color: #4361db; color: #fff; width: 100%; line-height: 60px; font-weight: 700; font-size: 1.8rem; border-radius: 10px; padding-top: 0; padding-bottom: 0; display: block; border: 0px;}
.charge .point-inner .box ul li.point{color: #4361db; font-weight: 600; font-size: 1.25em;}
.charge .point-inner .box .info{}
.charge .point-inner .box .info li{display: flex; gap:10px; color: #333; border-bottom: 1px dashed #eee; font-weight: 300;}
.charge .point-inner .box .info li .tit{color: #222; font-weight: 600; min-width: 64px; padding: 10px 0;}
.charge .point-inner .box .info li .tit::after{content: '-'; font-weight: 400; padding-left: 10px;}
.charge .point-inner .box .info li i{font-style: normal; padding: 10px 0;}
.charge .point-inner .box .info li + li{}

@media all and (max-width:640px){
	.charge .point-inner .box .point_list{grid-template-columns: repeat(2, 1fr);}
	.charge .point-inner .box .cont{flex-direction: column;}
	.charge .point-inner .box .cont .tit{width: 100%; margin-bottom: 10px;}
	.charge .point-inner .box .cont .content{width: 100%;}
	.charge .point-inner .box .info li{flex-direction: column; line-height: 1.5em; gap:0;}
	.charge .point-inner .box .info li .tit{width: 100%; padding-top: 10px; padding-bottom: 0;}
	.charge .point-inner .box .info li .tit::after{display: none;}
	.charge .point-inner .box .info li i{padding: 5px 0 10px;}
	
	.charge .point-inner .btn_box a{line-height: 50px; font-size: 1.6rem;}
	.charge .point-inner .btn_box .btn_submit{line-height: 52px; font-size: 1.6rem;}
}


/* p_his */
.p_his{border-top: 3px solid #3554d9; background-color: #fff; box-shadow: 2px 10px 16px rgba(0,0,0,0.07);}
.p_his li{transition: .4s;}
.p_his li + li{border-top: 1px solid #ccc;}
.p_his li:hover{background-color: #f8f8f8;}
.p_his li a{padding: 30px 40px; display: flex; gap:40px; align-items: center;}
.p_his li a .l_cont{width: 325px;}
.p_his li a .l_cont > .img{position: relative;}
.p_his li a .l_cont > .img img{max-width: 100%;}
.p_his li.bf11 a .l_cont > .img::before{content:''; content:''; width: 169px; height: 50px; background:url(/images/sub/bf11.webp) no-repeat center center / contain; position:absolute; top: 8px; left: 6px; display:block; animation: bficon .9s infinite; pointer-events: none; z-index: 2;}
.p_his li.bf12 a .l_cont > .img::before{content:''; width: 181px; height: 50px; background:url(/images/sub/bf12.webp) no-repeat center center / contain; position:absolute; top: 8px; left: 6px; display:block; animation: bficon .9s infinite; pointer-events: none; z-index: 2;}
.p_his li.bf13 a .l_cont > .img::before{content:''; width: 209px; height: 50px; background:url(/images/sub/bf13.webp) no-repeat center center / contain; position:absolute; top: 8px; left: 6px; display:block; animation: bficon .9s infinite; pointer-events: none; z-index: 2;}
.p_his li a .l_cont .img span.pr{padding-right: 18px; background-repeat: no-repeat; background-size: contain; background-position: right center;}
.p_his li a .l_cont .img span.up{color: red; font-weight: 500; background-image: url(/images/sub/up_arrow.webp);}
.p_his li a .l_cont .img span.down{color: blue; font-weight: 500; background-image: url(/images/sub/down_arrow.webp);}
.p_his li a .l_cont .img span.blue{color: #255fff;}
.p_his li a .l_cont > .img img{}
/*.p_his li a .l_cont > .img .coin_label{position:absolute; bottom:10px; right:10px; text-align: center; display: flex; justify-content: center; align-items: center; gap:5px; background-color: #3564ff; padding: 5px 12px 3px 8px; border-radius: 20px;}*/
.p_his li a .l_cont > .img .coin_label .img{}
/*
.p_his li a .l_cont > .img .coin_label img{width: 24px; color:#fff; margin-bottom: 3px;}
.p_his li a .l_cont > .img .coin_label p{font-size: 14px; color:#fff; font-weight: 500;}
*/

.p_his li a .l_cont > .img .coin_label{position:absolute; bottom:10px; right:10px; text-align: center; display: flex; justify-content: center; align-items: center; gap:3px; background:linear-gradient(120deg, #ffec87, #fed43c, #fece30); padding: 3.5px 9px 0px 6px; border-radius: 8px; border-bottom: 2.5px solid #fab330;}
.p_his li a .l_cont > .img .coin_label img{width: 24px; color:#fff; margin-bottom: 3px;}
.p_his li a .l_cont > .img .coin_label p{font-size: 17px; color:#0a2b60; font-weight: 700; margin-top: -2px;}


.p_his li a .l_cont > .img .percent{font-family: 'esamanru'; font-size: 1.4rem; color: #444; font-weight: 500; position: absolute; left: 10px; bottom: 10px; background-color: #fff; border-radius: 40px; padding: 10px 9px 10px 12px;}
.p_his li a .l_cont > .img .percent span{}
.p_his li .reco{position: absolute; right: 0px; z-index: 3; top: 0px;}
.p_his li .reco li{margin-bottom: 5px; color: #fff; font-size: 14px; font-weight: 600; padding: 4px 10px; text-align: center; box-shadow: 0px 1px 4px rgba(0,0,0,0.15); margin-right: 0 !important;}
.p_his li .reco li.r{background-color: #ee1111;}
.p_his li .reco li.y{background-color: #ee8011;}
.p_his li .reco li.b{background-color: #1177ee;}
.p_his li .reco li.g{background-color: #18c641;}
.p_his li a .r_cont{width: calc(100% - 325px - 40px);}
.p_his li a .r_cont .txt{}
.p_his li a .r_cont .txt h3{font-size: 2rem; color: #222; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.p_his li a .r_cont .txt p{font-size: 1.7rem; font-weight: 600; color: #444; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.p_his li a .r_cont .price{margin-top: 20px; display: flex; flex-wrap: wrap; gap:8px 0; flex-direction: column;}
.p_his li a .r_cont .price dd{font-family: 'Montserrat', 'Pretendard'; font-size: 2rem; font-weight: 700; color: #000; display: flex; align-items: center; white-space: nowrap; word-spacing: -0.15em; position: relative;}
.p_his li a .r_cont .price dd span{font-family: 'esamanru'; font-size: 1.5rem; color: #444; font-weight: 500; margin-right: 6px; width: 100px;}
.p_his li a .r_cont .price dd span.pr{padding-right: 20px; background-repeat: no-repeat; background-size: contain; background-position: right center; position: absolute; bottom: -24px; right: 0; margin-right: 3px;}
.p_his li a .r_cont .price dd span.up{color: red; font-weight: 500; background-image: url(/images/sub/up_arrow.webp);}
.p_his li a .r_cont .price dd span.down{color: blue; font-weight: 500; background-image: url(/images/sub/down_arrow.webp);}
.p_his li a .r_cont .price dd span.blue{color: #255fff;}
.p_his li a .r_cont .box{display: flex; align-items: center; gap:20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd;}
.p_his li a .r_cont .date_box{ display: flex;}
.p_his li a .r_cont .date{ color: #333; font-size: 1.7rem; line-height: 1em;}
.p_his li a .r_cont .date + .date{padding-left: 15px; margin-left: 15px; border-left: 1px solid #ddd;}
.p_his li a .r_cont .date span{ font-weight: 700; color: #000;}

.p_his li a .r_cont .button{}
.p_his li a .r_cont .button button{font-family: 'Pretendard'; font-size: 16px; font-weight: 600; color: #fff; background-color: #3554d9; padding: 12px 15px; border-radius: 4px; transition: .4s;}
.p_his li a .r_cont .button:hover button{background-color: #2d47b1;}


@media all and (max-width:1280px){
    .p_his li a .r_cont .price dd span{margin-right: 5px; white-space: nowrap;}
}
@media all and (max-width:976px){
	.p_his li a{padding: 20px 30px; gap:35px;}
	.p_his li a .l_cont{width: 280px;}
	.p_his li a .r_cont{width: calc(100% - 280px - 35px);}
	.p_his li a .r_cont .price dd span{margin-right: 4px;}
	.p_his li a .r_cont .price dd span.pr{bottom: auto; right: -6px; top: 50%; transform: translateY(-50%); padding-right: 15px; position: relative;}
    .p_his li a .r_cont .price dd{width: 100%;}
    .p_his li a .r_cont .txt h3{font-size: 1.9rem;}
	.p_his li.bf11 a .l_cont > .img::before{height: 46px; width: 155px;}
	.p_his li.bf12 a .l_cont > .img::before{height: 46px; width: 167px;}
	.p_his li.bf13 a .l_cont > .img::before{height: 46px; width: 192px;}
	.p_his li a .r_cont .button button{font-size: 15px; padding: 12px 14px;}
	.p_his li a .r_cont .box{flex-direction: column; align-items: flex-start;}
}
@media all and (max-width:640px){
	.p_his li a{flex-direction: column; padding: 30px 25px; gap:25px;}
	.p_his li .reco li{font-size: 1.3rem; padding: 3px 6px; margin-bottom: 3px;}
	.p_his li a .l_cont{width: 100%;}
	.p_his li a .l_cont > .img img{width: 100%; max-width: auto;}
	.p_his li a .l_cont > .img .percent{bottom: 6px; left: 7px; font-size: 1.3rem; padding: 8.5px 8px 8.5px 10px;}
	.p_his li a .l_cont .img span.pr{padding-right: 16px;}
/*
	.p_his li a .l_cont > .img .coin_label{bottom:6px; right:7px; gap:4px;}
	.p_his li a .l_cont > .img .coin_label img{width:20px;}
	.p_his li a .l_cont > .img .coin_label p{font-size:13px;}
*/
	
	.p_his li a .l_cont > .img .coin_label{bottom:6px; right:7px; gap:4px;}
	.p_his li a .l_cont > .img .coin_label img{width:20px;}
	.p_his li a .l_cont > .img .coin_label p{font-size:15px;}
	
	.p_his li.bf11 a .l_cont > .img::before{height: 42px; width: 142px; top:4px; left:3px;}
	.p_his li.bf12 a .l_cont > .img::before{height: 42px; width: 152px; top:4px; left:3px;}
	.p_his li.bf13 a .l_cont > .img::before{height: 42px; width: 176px; top:4px; left:3px;}
	.p_his li a .r_cont{width: 100%;}
    .p_his li a .r_cont .txt h3{font-size: 1.8rem;}
    .p_his li a .r_cont .price{margin-top: 15px;}
	.p_his li a .r_cont .price dd{font-size: 1.8rem;}
	.p_his li a .r_cont .price dd span.pr{font-size: 1.4rem; padding-right: 14px;}
	.p_his li a .r_cont .box{margin-top: 18px; padding-top: 20px;}
	.p_his li a .r_cont .date{ font-size: 1.6rem;}
	.p_his li a .r_cont .date + .date{margin-left: 10px; padding-left: 10px;}
}


.coin_hit{position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 99; background: #3554d9; color: #fff; padding: 12px 15px; border-radius: 10px; text-align: center; box-shadow: 3px 8px 12px rgba(0,0,0,0.25); display: flex; align-items: center; gap:8px;}
.coin_hit p{font-size: 15px;}
.coin_hit h3{font-size: 20px;}

@media all and (max-width:1280px){
	.coin_hit{padding: 10px 13px; gap:7px; bottom: 15px;}
	.coin_hit p{font-size: 14px;}
	.coin_hit h3{font-size: 18px;}
}
@media all and (max-width:640px){
	.coin_hit{padding: 8px 11px; gap:6px; bottom: 13px;}
	.coin_hit p{font-size: 13px;}
	.coin_hit h3{font-size: 16px;}
}


.leave_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: -99; opacity: 0;}
.leave_bg.on{z-index: 99; opacity: 1;}
.leave_popup{background-color: #fafafa; width: 94%; max-width: 640px; height: 90%; max-height: max-content; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 30px; padding: 30px; z-index: -1; opacity: 0; box-shadow:2px 8px 12px rgba(0,0,0,0.1);}
.leave_popup.on{z-index: 100; opacity: 1;}
.leave_popup .txt{text-align: center; margin-bottom: 30px;}
.leave_popup .txt h3{font-size: 20px; color: #ee0000; margin-bottom: 6px; margin-bottom: 20px;}
.leave_popup .txt p{font-weight: 300; color: #444; line-height: 1.6em; word-break: keep-all;}
.leave_popup .txt p b{font-weight: 600;}
.leave_popup .txt p span{font-size: 1.075em; color: #000; font-weight: 600; display: block; margin-top: 5px;}
.leave_popup .btn_box{display: flex; justify-content: center; gap:10px;}
.leave_popup .btn_box a{line-height: 48px; font-size: 1.8rem; font-weight: 700; padding: 0 20px; border-radius: 8px;}
.leave_popup .btn_box button{line-height: 48px; font-size: 1.8rem; font-weight: 700; padding: 0 20px; border-radius: 8px;}
.leave_popup .btn_box .button01{background-color: #3554d9; color: #fff;}
.leave_popup .btn_box .button02{border: 1px solid #ccc;}