@charset "utf-8";

:root{
    --black:#000;
    --bluegreen:#11a8c7;
    --darkgray:#505050;
    --gray:#767676;
    --light_gray:#999;
    --gray_a:#aaa;
    --gray_b:#bbb;
	--gray:#666;
    --line_gray:#ededed;
	--white:#fff;
    --aripink: #F44E6E;
    --bg_gray: #f2f2f2;
    /** dark **/
    --text_main_dark: #ddd;
    --bg_container_dark: #1e1e1e;
    --gray_deep: #0e0e0e;
    --gray_33: #333;
    --gray_55: #555;
    --ff_opa_05: rgba(255, 255, 255, 0.05);
    --ff_opa_10: rgba(255, 255, 255, 0.1);
    --ff_opa_15: rgba(255, 255, 255, 0.15);
    --ff_opa_25: rgba(255, 255, 255, 0.25);
}

/* ===================================================
    header
   =================================================== */
body { background-color: var(--gray_33);}
#wrap {position:relative; width:100%; height:100%; padding:0; margin:0; color:var(--text_main_dark); font-weight: 300;}
#wrap:before {position:fixed; left:90px; top:0; z-index:-1; content:''; display:inline-block; width:1px; height:100%;}
#wrap:after {position:fixed; right:90px; top:0; z-index:-1; content:''; display:inline-block; width:1px; height:100%;}
header{position:relative; width:100%; background-color: var(--gray_deep);}
header .header_wrap{display:flex; justify-content:space-between;align-items: center; position:relative; width:calc(100% - 180px); height:90px; margin:0 auto; padding:0 4%; }
header .header_wrap .logo{ width:60%; max-width:260px; min-width:200px; z-index:99; }
header .header_wrap .logo a {display:flex; align-items: center; width:100%; line-height:90px; height:90px; display:inline-block; background:url(/assets/img/common/ari_logo_white.svg) no-repeat 0 50%; background-size:256px auto; font-size:23px; font-weight:700;  }
header .header_wrap .logo a span {display:inline-block; font-size:0; text-indent:-9999; line-height:1.2;  }

@media all and (max-width:1600px) {
    header .header_wrap{ width:calc(100% - 160px);} 
    #wrap:before{ left:80px; }
    #wrap:after {  right:80px; }
}
@media all and (max-width:1300px) {
    header .header_wrap{ width:calc(100% - 140px);} 
    #wrap:before { left:70px; }
    #wrap:after { right:70px; } 
    header .header_wrap .logo{ max-width:200px; }
    header .header_wrap .logo a {background-size: 200px auto}
}
@media all and (max-width:1200px) {
    header .header_wrap{ width:calc(100% - 120px);} 
    #wrap:before { left:60px; }
    #wrap:after { right:60px; } 
}  
@media all and (max-width:1000px) {
    #wrap {padding:60px 0 0 0;}
	#wrap:before,
	#wrap:after {display:none;}
	header{width:100%; border-bottom:none;}
    header .header_wrap{width:100%; padding:0 75px 0 25px; background:rgba(0,0,0,0.85); position:fixed; left:0; top:0; z-index:100; height:60px;  }
	header .header_wrap .logo{ min-width:216px; max-width:216px;  }
    header .header_wrap .logo a {font-size:20px; color:var(--white); line-height:60px; height:60px; font-weight:500; background:url(/assets/img/common/ari_logo_white.svg) no-repeat 0 50%; background-size:auto 30px;}
	header .header_wrap .logo a span {  margin:4px 0 0 0; }	
}
@media all and (max-width:700px) {
    #wrap {padding:56px 0 0 0;}
	header .header_wrap{ padding:0 70px 0 20px; height:56px;  }  
	header .header_wrap .logo a { line-height:56px; height:56px;}
}
@media all and (max-width:500px) {
	header .header_wrap{ padding:0 65px 0 15px;  } 
}
@media all and (max-width: 400px) {
    header .header_wrap .logo{ min-width:184px; max-width:184px;  }
    header .header_wrap .logo a {background-size:auto 24px;}
}


/* ===================================================
    nav
   =================================================== */
 
header .header_wrap .nav{position:relative;  }
header .header_wrap .btn_nav_mobile{display:none; position:fixed; top:5px; right:25px; z-index:120; width:24px; height:1px; background:0 none;  }
header .header_wrap .btn_nav_mobile::before{display:block; position:absolute; top:16px; right:0; z-index:121;  width:100%; height:100%; background:var(--black); transition:all 0.3s; content:""}
header .header_wrap .btn_nav_mobile::after{display:block; position:absolute; top:32px; right:0;  z-index:122; width:100%; height:100%; background:var(--black); transition:all 0.3s; content:""}
header .header_wrap .btn_nav_mobile span{ font-size:0; text-indent:-9999;display:block; position:absolute; top:24px; right:0;  z-index:123; width:100%; height:100%; background:var(--black); transition:all 0.3s }

header .header_wrap .nav .nav_list{display:flex; }
header .header_wrap .nav .nav_list > li{position:relative; margin-left:45px;} 
header .header_wrap .nav .nav_list > li:first-child { margin-left:50px;} 
header .header_wrap .nav .nav_list > li > a{display:block; position:relative; padding-right:13px; font-size:1.143em; line-height:50px; font-weight:500; color:var(--text_main_dark); text-transform:uppercase;}
header .header_wrap .nav .nav_list > li.active > a{color:var(--aripink); font-weight:600;}
header .header_wrap .nav .nav_list .sub_nav > a::after{display:block; position:absolute; top:0; right:0; width:9px; height:50px; background:url(/assets/img/common/snb_nav_arr.svg) no-repeat 0 50%; transition:all 0.5s; content:""}
header .header_wrap .nav .nav_list .sub_nav:hover > a::after{transform:rotate(180deg); }

header .header_wrap .nav .nav_list .sub_nav .sub_nav_list{display:none; position:absolute; top:49px; right:0px; z-index:100; width:auto; padding:20px 40px 20px 20px; background:var(--black); border-radius:16px 0 16px 16px; animation:sub_nav_view 0.5s; }
header .header_wrap .nav .nav_list .sub_nav:hover .sub_nav_list{display:block;}
header .header_wrap .nav .nav_list .sub_nav .sub_nav_list.sub_nav_block{width:195px;}
header .header_wrap .nav .nav_list .sub_nav .sub_nav_list.sub_nav_token{width:195px;}
header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li{margin-top:15px;}
header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li:first-child{margin-top:0}
header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li a{color:var(--white); transition:all 0.3s}
header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li a:hover{opacity:0.8; color:var(--aripink);}

@keyframes sub_nav_view {
    0% {opacity:0}
    100% {opacity:1}
}
@media all and (max-width:1600px) { 
    header .header_wrap .nav .nav_list > li{ margin-left:40px;} 
	header .header_wrap .nav .nav_list > li:first-child { margin-left:50px;} 
}
@media all and (max-width:1300px) {
	header .header_wrap .nav .nav_list > li{ margin-left:30px;}  
	header .header_wrap .nav .nav_list > li:first-child { margin-left:40px;} 
}
@media all and (max-width:1200px) {
	header .header_wrap .nav .nav_list > li{ margin-left:20px;}  
	header .header_wrap .nav .nav_list > li:first-child { margin-left:30px;} 
}
@media all and (max-width:1000px){     
    .body-overflow{overflow:hidden}       
    header .header_wrap .nav {display:none; }
    header .header_wrap .btn_nav_mobile{display:block;  color:var(--white);}
    header .header_wrap .nav .nav_list_wrap {display:block}

    header .header_wrap .btn_nav_mobile{ right:25px;}
	header .header_wrap .btn_nav_mobile span,
	header .header_wrap .btn_nav_mobile::before,
    header .header_wrap .btn_nav_mobile::after{background:var(--white);}
	header .header_wrap .open_btn_nav_mobile { right:15px; width:28px;} 
    header .header_wrap .open_btn_nav_mobile span{ display:none;  }
    header .header_wrap .open_btn_nav_mobile::before{transform:rotate(45deg) translate(2px, 9px);}
    header .header_wrap .open_btn_nav_mobile::after{transform:rotate(-45deg) translate(2px, -9px); }
    .body-overflow header .header_wrap { display:block; width:100%; padding:0; height:100%; overflow-y:auto; }
	.body-overflow header .header_wrap .logo{ position:fixed; top:0;  left:25px; z-index:101; }
    .body-overflow header .header_wrap .nav.open_nav {position: absolute; left:0; top:60px;display:block; width:100%; height:calc(100% - 60px); overflow-y:auto }
	.body-overflow header .header_wrap .nav .nav_list{flex-wrap:wrap;}
    .body-overflow header .header_wrap{width:100%; display:block;}   
    .body-overflow header .mobile_header_bg{ display:block; position:fixed; top:0; right:0; bottom:0; left:0; z-index:90; width:100vw; height:100vh; background:var(--white);}

    header .header_wrap .nav .nav_list_wrap{padding-top:30px; }
 
    header .header_wrap .nav .nav_list > li{width:100%; margin:0; border-bottom:1px solid #292929; cursor:pointer;}
    header .header_wrap .nav .nav_list > li > a {width:calc(100% - 35px); display:inline-block; line-height:56px; font-size:20px; color:var(--white); padding:0 25px;  }
	header .header_wrap .nav .nav_list > li:first-child { margin-left:0;} 
    header .header_wrap .nav .nav_list .sub_nav > a::after{right:-10px; height:60px;}
    header .header_wrap .nav .nav_list .sub_nav:hover > a::after{transform:rotate(0)}
    header .header_wrap .nav .nav_list .sub_nav:hover .sub_nav_list{display:none;}
    header .header_wrap .nav .nav_list .sub_nav.active_sub_nav .sub_nav_list{display:block; position:relative; top:0; left:0; width:100%; padding:0; border-radius:0; line-height:50px; }
    header .header_wrap .nav .nav_list .sub_nav.active_sub_nav > a::after{transform:rotate(180deg)}
  
	header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li{margin:0; border-top:1px solid #111; }
    header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li:first-child{border:0}
	header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li:last-child {margin-bottom:10px;}
    header .header_wrap .nav .nav_list .sub_nav .sub_nav_list li a{display:block;  line-height:46px; font-size:17px; font-weight:300; padding:0 25px; color:#eee;}
    header .header_wrap .nav .nav_list > li {order: 2;}
    header .header_wrap .nav .nav_list .nav_login{order: 1;}
}
@media all and (max-width:767px){     
    header .header_wrap .btn_nav_mobile{top:-1; right:20px;}
	header .header_wrap .open_btn_nav_mobile { right:10px;}
	header .header_wrap .btn_nav_mobile{top:4px;} 
	.body-overflow header .header_wrap .logo{ left:20px;}
	header .header_wrap .nav .nav_list > li > a { padding:0 20px;  }
}
@media all and (max-width:500px){     
    header .header_wrap .btn_nav_mobile{ right:15px;}
	header .header_wrap .open_btn_nav_mobile { right:7px;}
	.body-overflow header .header_wrap .logo{ left:15px; }
	header .header_wrap .nav .nav_list > li > a { padding:0 15px;  }
}


/* header_sear */
header .header_sear{position:relative; width:40%;height:46px; max-width:450px;  }
header .header_sear input{width:100%; height:100%;background:transparent; padding:0 50px 0 20px; border:1px solid #888; border-radius:23px;}
header .header_sear button{position:absolute; right:5px; top:0; width:46px; height:100%; background:transparent url(/assets/img/common/icon_search_w.svg) no-repeat 50% 50%; background-size:20px; order:none; border-radius:0 23px 23px 0;  text-indent:-9999px;  }
header .header_sear input:focus,
header .header_sear input:hover {border:1px solid #ddd;  opacity:1;}

header .header_wrap .msearchbtn,
header .header_wrap .header_sear .msearch_close {display:none;} 
header .header_wrap .msearchbtn span {font-size:0; text-indent:-9999;}
 
@media all and (max-width:1300px){   
    header .header_sear input::placeholder {font-size:13px; }
    header .header_sear input::-webkit-input-placeholder {font-size:13px; }
    header .header_sear input:-ms-input-placeholder {font-size:13px;}
    header .header_sear input:-moz-input-placeholder {font-size:13px;}
}
@media all and (max-width:1000px){  
    header .header_sear{  width:100%; max-width:380px; margin:0 auto; top:4px;   } 
    header .header_sear input{ height:40px; line-height:38px;background:transparent; border-radius:20px; }
    header .header_sear button{right:10px; width:40px; height:40px; background:transparent url(/assets/img/common/icon_search_w.svg) no-repeat 50% 50%; background-size:18px; border-radius:0 20px 20px 0;    }
	header .header_sear input:hover,
	header .header_sear input:focus  {}
	.body-overflow header .header_wrap .header_sear,
	.body-overflow header .header_wrap .msearchbtn {display:none;} 
}
 
@media all and (max-width:700px) {
    header .header_sear {display:none; position:fixed; top:56px; left:0; z-index:102; width:100%; max-width:100%;  height:56px;  }
	header .header_sear:before {position:fixed; left:0; top:56px; z-index:-1;  content:''; display:block; width:100%; height:56px; background:var(--black); opacity:0.8; }
	header .header_sear input{ border:none !important;  padding:8px 50px 0 8px;}
	header .header_sear button{ top:8px; right:5px;}
	header .header_wrap .msearchbtn {display:block; position:fixed; top:0; right:65px; z-index:101; width:30px; height:56px; background:  url(/assets/img/common/icon_search_w.svg) no-repeat 50% 50%; background-size:19px;  }
    header .header_wrap .msearch_close {display:block; position:fixed; top:0; right:65px; z-index:102;width:30px; height:56px; background:var(--black) url(/assets/img/common/icon_close_w.svg) no-repeat 50% 49%; background-size:18px;  }
	header .header_wrap.on .header_sear,
	header .header_wrap.on .header_sear .msearch_close {display:block;} 
	header .header_wrap.on .msearchbtn {display:none;}
}
@media all and (max-width:500px) {
    header .header_sear { padding:8px 15px 0 15px; }  
	header .header_sear input{ padding:0 50px 0 0px; }
	header .header_wrap .msearchbtn,
    header .header_wrap .msearch_close { right:58px;}
}
@media all and (max-width:350px) {
    header .header_sear input::placeholder {font-size:12px; }
    header .header_sear input::-webkit-input-placeholder {font-size:12px; }
    header .header_sear input:-ms-input-placeholder {font-size:12px;}
    header .header_sear input:-moz-input-placeholder {font-size:12px;}
} 
@media all and (min-width:1600px) {
	header .header_sear{position:absolute;top:50%; left:50%; transform:translate(-50%, -50%); margin:0 auto;}
}

/* wallet_link */
header .wallet_link {display: none; width:350px; height:50px;  position:fixed; right:100px; bottom:100px; transform:rotate(0deg); transform-origin:right bottom; /**right:21px; top:490px; transform:rotate(90deg); transform-origin:right top; display:flex;**/ z-index:2; align-items:center;   }
header .wallet_link a{ display:flex; justify-content: center; align-items:center; height:100%; line-height:1.2;  color:var(--text_main_dark); transition:all 0.3s; font-weight:500; }
header .wallet_link a:hover{opacity:0.6; transition:all 0.3s } 
header .wallet_link a:first-child {margin-right:30px;}  
header .wallet_link a span{ width:auto; display:inline-block; line-height:48px; height:48px; padding:0 0 0 42px; }
header .wallet_link a.android span { background:url(/assets/img/common/icon_Android.svg) no-repeat 0 50%; background-size:32px;}
header .wallet_link a.ios span { background:url(/assets/img/common/icon_ios.svg) no-repeat 0 50%; background-size:32px; }

@media all and (max-width:1600px) { 
    header .wallet_link { left:15px; }
	header .wallet_link a.android span,
	header .wallet_link a.ios span { background-size:30px; padding:0 0 0 38px; }
}
@media all and (max-width:1300px) { 
    header .wallet_link { left:11px; }
	header .wallet_link a.android span,
	header .wallet_link a.ios span { background-size:26px; padding:0 0 0 35px; }
}
@media all and (max-width:1200px) { 
    header .wallet_link { left:5px; }
}
@media all and (max-width:1100px) { 
	header .wallet_link { top:485px; }
}
@media all and (max-width:1000px) {         
    header .wallet_link {display:none;}
	.body-overflow header .wallet_link {display:none; /**position:relative;  top:0; left:0; z-index:105; right:auto;width:100%;max-width:100%; height:auto;padding:30px 5px; margin:0 auto; display:flex; align-items:center;justify-content:center; transform:none;text-align:center; background:var(--black);  **/}
	.body-overflow header .wallet_link a{display:inline-block; width:calc(50% - 7px); max-width:200px; text-align:center; color:var(--white); font-weight:400; border:1px solid #333; border-radius:25px; margin:0 10px; }
	.body-overflow header .wallet_link a.android span { background:url(/assets/img/common/icon_Android_w.svg) no-repeat 0 50%; background-size:18px;  }
	.body-overflow header .wallet_link a.ios span { background:url(/assets/img/common/icon_ios_w.svg) no-repeat 0 50%; background-size:18px;  }
	.body-overflow header .wallet_link a:first-child {margin-right:0;}  
	.body-overflow header .wallet_link a span{width:auto;padding:0 0 0 28px;font-size:13px;}
}
@media all and (max-width:350px){   
    .body-overflow header .wallet_link {display:block;}
	.body-overflow header .wallet_link a.android span,
	.body-overflow header .wallet_link a.ios span { background-size:16px;  }
	.body-overflow header .wallet_link a {width:calc(100% - 30px); max-width:100%; margin: 0 0 10px;}
	.body-overflow header .wallet_link a span{ padding:0 0 0 24px;font-size:12px;}
}


/* btn_nav_pc */
.btn_nav_pc {position:absolute; top:30px; right:29px; background:none; width:30px; height:30px; display:none !important; }
.btn_nav_pc span {position:absolute; top:7px; right:0;width:100%; height:2px; background:#ccc; font-size:0; text-indent:-9999; display:inline-block;}
.btn_nav_pc span:after { position:absolute; right:0;top:13px; width:100%; height:2px; background:#ccc; content:''; display:inline-block; }

@media all and (max-width:1600px) { 
    .btn_nav_pc {  right:24px; }
}
@media all and (max-width:1300px) {
	.btn_nav_pc {  right:21px; width:28px;}
}
@media all and (max-width:1200px) {
	.btn_nav_pc {  right:17px; width:26px; }
}
@media all and (max-width:1000px){
	.btn_nav_pc {display:none; }
}
@media all and (min-width:1001px){
	.btn_nav_pc {display:block; }
}


/* sub header */
.sub_header_wrap{}
.sub_header_wrap .sub_sear_wrap{position:absolute; top:0; right:0; z-index:5000;  }
.sub_header_wrap .sub_sear_wrap .btn_sear_view{display:block; width:20px; height:20px; margin:14px 0; background:url(/assets/img/common/icon_search_black.svg) no-repeat; transition:all 0.1s; cursor:pointer; }
.sub_header_wrap .sub_sear_wrap .btn_sear_view:hover{background:url(/assets/img/common/icon_search_or.svg) no-repeat;}
.sub_header_wrap .sub_sear_wrap.view .btn_sear_view{background:url(/assets/img/common/icon_close_black.svg) no-repeat;}
.sub_header_wrap .sub_sear_wrap.view .btn_sear_view:hover{background:url(/assets/img/common/icon_close_or.svg) no-repeat;}
.sub_header_wrap .sub_sear_wrap .header_sear{display:none; position:absolute; top:0; right:35px; width:0; transition:all 0.3s}
.sub_header_wrap .sub_sear_wrap.view .header_sear{display:block; width:500px; }
.sub_header_wrap .nav{padding-right:60px}
 
@media all and (max-width:1000px) {
    .sub_header{padding:10px 0}
    .sub_header_wrap .sub_sear_wrap.view .header_sear{width:400px}    
    .sub_header_wrap .sub_sear_wrap {width:100%; margin:0 auto }
    .body-overflow .sub_header_wrap .sub_sear_wrap{right:3%; }
    .sub_header_wrap .sub_sear_wrap .btn_sear_view{float:right; margin-right:50px}
    .sub_header_wrap .sub_sear_wrap.view .header_sear{top:50px; right:0; width:100%;max-width:400px background:var(--white); box-shadow:0 0 20px rgba(0,0,0,0.1) }
    .sub_header_wrap .nav{padding-right:0px}
}
@media all and (max-width:750px) {
    .sub_header_wrap .sub_sear_wrap .btn_sear_view{margin:7px 45px 7px 0}
}
@media all and (max-width:370px) {
    .sub_header_wrap .sub_sear_wrap{display:none}
}


/* ===================================================
    container
   =================================================== */
#container{position:relative; width:100%; background-color: var(--bg_container_dark);}

/* ===================================================
    footer
   =================================================== */
footer{position:relative; width:100%;}
footer .footer_wrap{display:flex; justify-content:space-between; flex-wrap:wrap; width:calc(100% - 180px);   margin:0 auto; padding:32px 4% 30px 4%; }
footer .footer_wrap .company_wrap {width:54%;}
footer .footer_wrap .company_wrap h3 {width:100%; }
footer .footer_wrap .company_wrap h3 span { display:inline-block; background:url(/assets/img/common/ari_logo_white.svg) no-repeat 0 50%;  background-size:auto 28px; height:28px; width:100%; padding:0; font-size:22px;font-weight:500;}
footer .footer_wrap .company_wrap h3 span i { font-size:0; text-indent:-9999;  }
footer .footer_wrap .company_wrap p {margin:12px 0 0 0;   font-weight:300; line-height:1.4;}
footer .footer_wrap .foot_nav_wrap{ width:40%; max-width:630px;  margin:10px 0 0 0; height:auto; }
footer .footer_wrap .foot_nav_wrap .ft_nav_list{display:flex; justify-content:end;   }
footer .footer_wrap .foot_nav_wrap .ft_nav_list > li{width:33.33%; max-width:170px; line-height:1.2;  }
footer .footer_wrap .foot_nav_wrap .ft_nav_list > li span{font-size:18px; display:block; line-height:1.2; text-transform:uppercase; font-weight:600; }
footer .footer_wrap .foot_nav_wrap .ft_nav_sub{margin-top:8px;}
footer .footer_wrap .foot_nav_wrap .ft_nav_sub li a{display:inline-block; padding:5px 0; transition:all 0.3s}
footer .footer_wrap .foot_nav_wrap .ft_nav_sub li a:hover{opacity:0.5;}
footer .copy{  width:100%; font-size:12px; font-weight:300; text-transform:uppercase; line-height:1.2;  padding:10px 0 0 0; }
footer .copy br{display:none}

@media all and (max-width:1600px) {
	footer .footer_wrap{ width:calc(100% - 140px); }
}
@media all and (max-width:1300px) {
	footer .footer_wrap{ width:calc(100% - 120px); }
	footer .footer_wrap .company_wrap p,
	footer .footer_wrap .foot_nav_wrap .ft_nav_sub li a{font-size:13px;}
	footer .footer_wrap .company_wrap p br {display:none;}
}
@media all and (max-width:1200px) {
   footer .footer_wrap { width:calc(100% - 120px);} 
}
@media all and (max-width:1000px) {
    footer .footer_wrap{padding:27px 25px 30px 25px; }
    footer .footer_wrap .foot_nav_wrap .ft_nav_list > li{ padding:0 5px; } 
    footer .footer_wrap { display:block; width:100%; max-width:920px;border:none; padding:25px 25px 30px 25px;}
    footer .footer_wrap .company_wrap{width:100%}
	footer .footer_wrap .company_wrap p {margin:10px 0 0 0; } 
    footer .footer_wrap .foot_nav_wrap {width:100%;  padding:15px 0 20px 0;} 
	footer .footer_wrap .foot_nav_wrap .ft_nav_list > li{ width:33.33%; max-width:100%; margin:0;}

} 
@media all and (max-width:767px) {  
    footer .footer_wrap{padding:27px 20px 30px 20px; } 
}
@media all and (max-width:500px) {  
    footer .footer_wrap{padding:27px 15px 30px 15px; }
	footer .footer_wrap .foot_nav_wrap .ft_nav_list > li span{font-size:16px; }
	footer .footer_wrap .company_wrap p,
	footer .footer_wrap .foot_nav_wrap .ft_nav_sub li a{font-size:12px;}
	footer .copy{  font-size:11px; color:#999;}
 }

/** footer wallet_link **/
.footer_app_down {display: flex; }
.footer_app_down a{display:flex; justify-content: center; align-items:center; height:100%; line-height:1.2;  color:var(--text_main_dark); transition:all 0.3s; font-weight:500; opacity: 0.8;}
.footer_app_down a:hover{opacity:0.55; transition:all 0.3s }
.footer_app_down a:first-child {margin-right:30px;}
.footer_app_down a span{ width:auto; display:inline-block; line-height:48px; height:48px; padding:0 0 0 42px; }
.footer_app_down a.android span { background:url(/assets/img/common/icon_Android_w.svg) no-repeat 0 50%; background-size:30px;}
.footer_app_down a.ios span { background:url(/assets/img/common/icon_ios_w.svg) no-repeat 0 50%; background-size:30px; }
@media all and (max-width: 1000px) {
    .footer_app_down {padding-top:8px;}
    .footer_app_down a span{line-height:40px; height:40px; padding:0 0 0 36px; font-size:13px;}
    .footer_app_down a.android span {background-size:26px;}
    .footer_app_down a.ios span {background-size:26px; }
}
@media all and (max-width: 360px) {
    .footer_app_down a:first-child {margin-right:16px;}
    .footer_app_down a span{line-height:30px; height:30px; padding:0 0 0 23px; font-size:13px;}
    .footer_app_down a.android span {background-size:16px;}
    .footer_app_down a.ios span {background-size:16px; }
}
@media all and (max-width: 280px) {
    .footer_app_down, .footer_app_down a {display: block;}
}


/* go top  */
#top{  display:block; position:absolute; top:0; right:0; z-index:2; width:90px; height:90px;  background:var(--black);  text-align:center; text-transform:uppercase; transition:all 0.2s}
#top em { display:flex; justify-content:center; align-items:center; width:100%;  height:100%; color:var(--white);  text-align:center; }
#top em i {display:inline-block; padding:10px 0 0 0;background:url(/assets/img/common/top_arr.svg) no-repeat 50% 0; background-size:12px auto; } 
#top:hover { background:#444; }
.mhide {display:block;}
@media all and (max-width:1600px) {
   #top{width:80px; height:80px;  }
}
@media all and (max-width:1300px) {
   #top{width:70px; height:70px;  }
}
@media all and (max-width:1200px) {
   #top{width:60px; height:60px;  }
}
@media all and (max-width:1000px) {
   #top{  width:50px; height:50px; position:fixed; top:auto; right:20px; bottom:20px; border-radius:50%; display:none;  }  
}
@media all and (max-width:500px) {
   #top{  right:15px; bottom:15px; }  
}
@media all and (min-width:1000px) {
   #top{display: none; /**display:block;**/ position:absolute; }
}


   
/* =================================================== main 
   =================================================== */

.con_wrap{position:relative;  margin:0 auto;width:calc(100% - 180px); margin:0 auto; padding:45px 4%;   }
.con_wrap.main_wrap {padding:0 !important;}
@media all and (max-width:1600px) {
    .con_wrap{ width:calc(100% - 160px); } 
}
@media all and (max-width:1300px) {
    .con_wrap{ width:calc(100% - 140px); } 
}
@media all and (max-width:1200px) {
    .con_wrap{ width:calc(100% - 120px); } 
}
@media all and (max-width:1000px) {
    .con_wrap{ width:100%; border:none; padding:35px 25px;} 
}
@media all and (max-width:767px) {
    .con_wrap{  padding:35px 20px;} 
}
@media all and (max-width:500px) {
    .con_wrap{  padding:35px 15px;} 
}
@media all and (min-width:1200px) {
    .con_wrap {min-height:680px;}
}


 
.main .mainwrap{ width:100%; }
.mbox {width:100%; position:relative; padding:56px 4%; display:flex; justify-content:space-between; align-items:start; }
.mbox.mbox_top {border-bottom:1px solid #555;}
.mbox h2 {  font-size:18px; line-height:1.2; font-weight:600; }

.m_total_box {display:flex; flex-wrap:wrap; width:62%; min-width:590px;padding:0 20px 0 0; }
.m_total_box .m_total_inner{width:32.5% ;float:left; border:solid #444; border-width:1px 0 0 1px; margin:-1px 0 0 -1px;}
.m_total_box .m_total_inner:nth-child(3n+1){border-left:0}
.m_total_box .m_total_inner:nth-child(1),
.m_total_box .m_total_inner:nth-child(2),
.m_total_box .m_total_inner:nth-child(3){border-top:0}
.m_total_box .m_total_inner:nth-child(1){padding:0 20px 20px 0}
.m_total_box .m_total_inner:nth-child(2){ padding:0 20px 20px}
.m_total_box .m_total_inner:nth-child(3){padding:0 0 20px 20px}
.m_total_box .m_total_inner:nth-child(4){padding:20px 20px 0 0}
.m_total_box .m_total_inner:nth-child(5){ padding:20px 20px 0}
.m_total_box .m_total_inner:nth-child(6){padding:20px 0 0 20px}
.m_total_box .m_total_inner h2{width:100%; height:44px; position:relative; padding-left:50px; display:flex;justify-content:start;align-items:center; line-height:1.2; }
.m_total_box .m_total_inner h2::before{display:block; position:absolute; top:0; left:0; width:44px; height:100%; border-radius:50%; content:""}
.m_total_box .m_total_inner h2.tps::before{background:var(--ff_opa_15) url(/assets/img/main/icon_tps.svg) no-repeat 50% 50%; background-size:90%; }
.m_total_box .m_total_inner h2.total::before{background:var(--ff_opa_15) url(/assets/img/main/icon_total.svg) no-repeat 50% 50%; background-size:90%;  }
.m_total_box .m_total_inner h2.latest::before{background:var(--ff_opa_15) url(/assets/img/main/icon_latest.svg) no-repeat 50% 50%; background-size:90%; }
.m_total_box .m_total_inner h2.transac::before{background:var(--ff_opa_15) url(/assets/img/main/icon_transac.svg) no-repeat 50% 50%; background-size:90%; }
.m_total_box .m_total_inner h2.nft::before{background:var(--ff_opa_15) url(/assets/img/main/icon_nft.svg) no-repeat 50% 50%;background-size:90%; }
.m_total_box .m_total_inner h2.dapp::before{background:var(--ff_opa_15) url(/assets/img/main/icon_dapp.svg) no-repeat 50% 50%; background-size:90%; }
.m_total_box .m_total_inner p{margin:10px 0 0; text-align:right}
.m_total_box .m_total_inner p .count{display:inline-block; font-size:1.429em; line-height:1.2; font-weight:500;}
.m_total_box .m_total_inner p .unit{display:inline-block; margin-left:5px; font-size:1em; line-height:1.2; font-weight:300; color:var(--light_gray)}

.m_graph{width:34%;  }
.m_graph h2{margin-top:0; } 
.m_graph .m_graph_wrap{height:150px; margin-top:15px;}


.mbox_bottom > div {position:relative; width:47.5%;} 
.mbox_bottom > div h2{ text-transform:uppercase; padding:0 20px; background:var(--ff_opa_10); border-radius:6px; line-height:50px; height:50px; }
.mbox_bottom > div ul {width:100%; }
.mbox_bottom > div ul li{ display:flex; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #444;}
.mbox_bottom > div ul li:hover {background:var(--ff_opa_05);}
.mbox_bottom > div .m_more{display:block; position:absolute; top:0; line-height:49px; height:50px; right:20px; padding-right:14px; background:url(/assets/img/common/icon_more.svg) no-repeat 100% 50%; background-size: auto 12px; color:var(--light_gray); transition:all 0.3s}
.mbox_bottom > div .m_more:hover{background:url(/assets/img/common/icon_more_hover.svg) no-repeat 96% 50%; background-size: auto 12px; color:var(--gray_b); }
 
.m_block .m_block_list li span{display:block; line-height:20px; }
.m_block .m_block_list li .block_left{width:30%; min-width:150px; height:40px; padding-left:50px; background:url(/assets/img/common/icon_block.svg) no-repeat 0 50%; background-size:38px; }
.m_block .m_block_list li .block_left .num{display:block; font-size:1.143em; font-weight:600; transition:all 0.3s}
.m_block .m_block_list li .block_left .num:hover{color:var(--aripink)}
.m_block .m_block_list li .block_left .age{color:var(--light_gray)}
.m_block .m_block_list li .block_right{width:68%;}
.m_block .m_block_list li .block_right .add{position:relative; }
.m_block .m_block_list li .block_right .add .fb{position:absolute; top:0; left:0; width:25px; margin-right:5px; font-size:1.143em; vertical-align:top}
.m_block .m_block_list li .block_right .add a{display:block; padding-left:30px; transition:all 0.3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.m_block .m_block_list li .block_right .add a:hover{color:var(--aripink); }
.m_block .m_block_list li .block_right .txn{color:var(--light_gray)}

.m_trans .m_trans_list li span{display:block; line-height:20px; }
.m_trans .m_trans_list li .trans_left{width:68%; min-height:40px; padding-left:50px; background:url(/assets/img/common/icon_tx.svg) no-repeat 0 50%; background-size:38px; }
.m_trans .m_trans_list li .trans_left .hash{display:block; transition:all 0.3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.m_trans .m_trans_list li .trans_left .hash:hover{color:var(--aripink)}
.m_trans .m_trans_list li .trans_left .add{display:flex; }
.m_trans .m_trans_list li .trans_left .add .from,
.m_trans .m_trans_list li .trans_left .add .to{display:block; width:35%; transition:all 0.3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.m_trans .m_trans_list li .trans_left .add .from100{width:100%;}
.m_trans .m_trans_list li .trans_left .add .from:hover,
.m_trans .m_trans_list li .trans_left .add .to:hover{color:var(--aripink)}
.m_trans .m_trans_list li .trans_left .add .arr{display:inline-block; width:30px; height:20px; background:url(/assets/img/common/icon_add_send.svg) no-repeat 45% 50%;}
.m_trans .m_trans_list li .trans_right{width:30%; min-width:100px; text-align:right;  }
.m_trans .m_trans_list li .trans_right .amount{font-size:1em;/*font-size:1.143em;*/}
.m_trans .m_trans_list li .trans_right .amount .fb{display:inline-block;}
.m_trans .m_trans_list li .trans_right .age{color:var(--light_gray)}
 
@media all and (max-width:1100px){ 
    .mbox.mbox_top{ display:block; padding:0;  }
    .m_total_box{ width:100%; min-width:100%; padding:4%;   }  
	.m_total_box .m_total_inner{width:calc(33.33% - 1px);}
	.mbox.mbox_bottom { padding:4%;  }
    .m_graph{width:100%; padding:4%; border-top:1px solid #555;}
}
@media all and (max-width:1100px){  
    .m_total_box,
	.mbox.mbox_bottom,
    .m_graph {padding:4% 25px;} 
}
@media all and (max-width:767px){
    .m_total_box,
    .m_graph{ padding:35px 20px;} 
    .mbox.mbox_bottom { display:block; padding:35px 20px;  }
    .mbox_bottom > div { width:100%;} 
	.m_trans {margin-top:35px;}
}
@media all and (max-width:700px){
    .m_total_box .m_total_inner,
	.m_total_box .m_total_inner:nth-child(5),
	.m_total_box .m_total_inner:nth-child(6) {width:calc(50% - 1px);}
    .m_total_box .m_total_inner:nth-child(3){border:0; border-top:1px solid #444}
    .m_total_box .m_total_inner:nth-child(4){ border-left:1px solid #444;}
    .m_total_box .m_total_inner:nth-child(4){ border-left:1px solid #444;}
    .m_total_box .m_total_inner:nth-child(5){border:0; border-top:1px solid #444}
    .m_total_box .m_total_inner:nth-child(2){ padding:0 0 20px 20px}
	.m_total_box .m_total_inner:nth-child(3) { padding:20px 20px 0 0;}
	.m_total_box .m_total_inner:nth-child(4) { padding:20px 0 20px 20px;} 
	.m_total_box .m_total_inner:nth-child(5) { padding:20px 20px 0 0;}
}
@media all and (max-width:500px){       
	.m_total_box,
    .mbox.mbox_bottom { padding:30px 15px;  }
	.m_trans {margin-top:30px;}
	.mbox_bottom > div h2{ padding:0 15px; }
	.mbox_bottom > div .m_more{ right:15px; font-size:12px; } 
    .m_block .m_block_list li{flex-wrap:wrap; padding:12px 15px }
    .m_block .m_block_list li .block_left{display:flex; justify-content:space-between; width:100%; }
    .m_block .m_block_list li .block_right{width:100%; margin-top:-15px; padding-left:50px; }
    .m_block .m_block_list li .block_right .add a{white-space:normal; overflow:visible; text-overflow:clip;}
    .m_block .m_block_list li .block_right .txn{margin-top:5px;}
  
    .m_trans .m_trans_list li{flex-wrap:wrap; flex-direction:column-reverse; padding:12px 15px }
    .m_trans .m_trans_list li .trans_left{z-index:900; width:100%; height:auto; margin-top:-15px; background:0 none  }
    .m_trans .m_trans_list li .trans_right{display:flex; justify-content:space-between; z-index:1; width:100%; min-height:40px; height:auto; padding-left:50px; background:url(/assets/img/common/icon_tx.svg) no-repeat 0 50%; }
    .m_trans .m_trans_list li .trans_left .hash{white-space:normal; overflow:visible; text-overflow:clip;}
    .m_trans .m_trans_list li .trans_left .add .from, .m_trans .m_trans_list li .trans_left .add .to{width:40%}

	.m_total_box .m_total_inner h2 {height:40px;}
    .m_total_box .m_total_inner h2::before{width:40px;}  
    .m_block .m_block_list li .block_left,
    .m_trans .m_trans_list li .trans_right{padding-left:42px; background-size:36px;}
    .m_block .m_block_list li .block_right,
    .m_trans .m_trans_list li .trans_left{padding-left:42px;}
}
@media all and (max-width:450px){
	.mbox.mbox_top {border-bottom:none;}
    .m_total_box .m_total_inner,
	.m_total_box .m_total_inner:nth-child(1),
	.m_total_box .m_total_inner:nth-child(2),
	.m_total_box .m_total_inner:nth-child(3),
    .m_total_box .m_total_inner:nth-child(4),
    .m_total_box .m_total_inner:nth-child(5),
	.m_total_box .m_total_inner:nth-child(6){display:block; width:100%; border:0; border:1px solid #444; padding:15px ; border-radius:6px;  margin:10px 0 0 0;}
    .m_total_box .m_total_inner p{margin:0}
    .m_total_box .m_total_inner:nth-child(1){ margin:0; }
	.m_graph{ width:calc(100% - 30px);  border:1px solid #444; padding:16px 15px ; margin:0 auto; border-radius:6px;   }
    .m_graph .m_graph_wrap{ margin-top:10px;}
	.m_block .m_block_list li, 
	.m_trans .m_trans_list li{ padding:12px 10px }
}
@media all and (max-width:400px){ 	
    .mbox_bottom > div .m_more {width:30px; display:inline-block;}
	.mbox_bottom > div .m_more span { font-size:0; text-indent:-9999px;  }     
}
@media all and (max-width:360px){
    .m_trans .m_trans_list li .trans_right{flex-wrap:wrap}
    .m_trans .m_trans_list li .trans_right .amount{width:100%; text-align:left}
    .m_trans .m_trans_list li .trans_left{margin:0}

}


.visible { display: block !important; animation: fadein ease 0.8s; -moz-animation: fadein ease 0.8s; -webkit-animation: fadein ease 0.8s; -o-animation: fadein ease 0.8s;	}
.hidden { display: none !important; animation: fadeout ease 0.8s; -moz-animation: fadeout ease 0.8s; -webkit-animation: fadeout ease 0.8s; -o-animation: fadeout ease 0.8s;	}
.mhide { display: block !important;  }
 
@media all and (max-width:1000px){ 
	.mhide { display:none !important;  }
	.mvisible { /**display: block !important;**/ animation: fadein ease 0.8s; -moz-animation: fadein ease 0.8s; -webkit-animation: fadein ease 0.8s; -o-animation: fadein ease 0.8s;	}
	.mhidden { display: none !important; animation: fadeout ease 0.8s; -moz-animation: fadeout ease 0.8s; -webkit-animation: fadeout ease 0.8s; -o-animation: fadeout ease 0.8s;	}
}
@media all and (min-width:1001px){ 
	.mhide { display: block !important;  }
}
/* keyframes */
 @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1;}
}
@-moz-keyframes fadein { /* Firefox */
    from { opacity: 0; }
    to { opacity: 1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from { opacity: 0; }
    to { opacity: 1;}
}
@-o-keyframes fadein { /* Opera */
    from { opacity: 0; }
    to { opacity: 1;}
}

 @keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0;}
}
@-moz-keyframes fadeout { /* Firefox */
    from { opacity: 1; }
    to { opacity: 0;}
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from { opacity: 1; }
    to { opacity: 0;}
}
@-o-keyframes fadeout { /* Opera */
    from { opacity: 1; }
    to { opacity: 0;}
}

/* logout */
.nav_logout > a::after {display:none !important;}
.nav_logout {display:flex;}
.nav_logout .sub_nav_list {width:initial !important; padding:20px !important;}
.profile {align-self: center;}
.profile .img {background:#dcdcdc; border-radius: 50%; width:35px; height:35px;object-position:center center; overflow: hidden}
.profile .img img {width:100%; height:100%;}
.profile .m_btn {display:none;}
.login_info {display:flex; justify-content: center; align-items: center; border-radius: 10px; gap:10px;}
.login_info .btn_logout {background:#4F5155; padding:5px 20px; border-radius: 20px; color:#fff;}
.login_info .email {color:#fff;}

@media all and (max-width:1000px){
    .nav_logout.active_sub_nav .sub_nav_list {line-height:initial !important;}
    .nav_logout { order: 1 !important;}
    .profile {display:none !important;}
    .nav_logout .sub_nav_list {display:block !important; position:relative !important; top:initial !important; padding:0 20px; width:100% !important;}
    .login_info_wrap {margin-bottom:0 !important;}
    .login_info {width:100%; justify-content:space-between; background:transparent; flex-wrap: wrap;}

}