@charset "utf-8";

:root{
    --black:#353154;
    --primary:#6f63ce;
    --darkgray:#505050;
    --gray:#767676;
    --light_gray:#999;
    --gray_b:#bbb;
    --gray:#666;
    --line_gray:#ededed;
    --white:#fff;
}

/* ===================================================
    header
   =================================================== */
#wrap {position:relative; width:100%; height:100%; padding:0; margin:0;  }
#wrap:before {position:fixed; left:90px; top:0; z-index:-1; content:''; display:inline-block; width:1px; height:100%;} /** background:var(--black); **/
#wrap:after {position:fixed; right:90px; top:0; z-index:-1; content:''; display:inline-block; width:1px; height:100%;} /** background:var(--black); **/
header{position:relative; width:100%; border-bottom:1px solid var(--black);}
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:230px; 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/logo_mirena.svg) no-repeat 0 50%; background-size:128px; padding:0 0 0 128px; font-size:21px; font-weight:600;  }
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:70px; padding:0 0 0 70px; font-size:24px;}
}
@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:var(--black); position:fixed; left:0; top:0; z-index:100; height:60px;  }
    header .header_wrap .logo{ min-width:170px; max-width:170px;  }
    header .header_wrap .logo a {background:url(/assets/img/common/logo_mirena_white.svg) no-repeat 0 50%; background-size:92px; padding:0 0 0 92px; font-size:16px; color:var(--white); line-height:60px; height:60px;font-weight:500; }
    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;  }
}


/* ===================================================
    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(--black); text-transform:uppercase;}
header .header_wrap .nav .nav_list > li.active > a{color:var(--primary); 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}

@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 var(--light_gray); border-radius:23px; opacity:0.8;    }
header .header_sear button{position:absolute; right:5px; top:0; width:46px; height:100%; background:transparent url(/assets/img/common/icon_search.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 var(--black); 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; color:var(--white); border-radius:20px; border:1px solid var(--white); opacity:0.6;   }
    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  {border:1px solid var(--white);  opacity:1;  }
    .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:0 50px 0 0 !important;}
    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 15px; }
    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 { width:350px; height:50px;  position:fixed; right:21px; top:490px; z-index:2; transform:rotate(90deg); transform-origin:right top; display:flex; align-items:center;   }
header .wallet_link a{ display:flex; justify-content: center; align-items:center; height:100%; line-height:1.2;  color:var(--black); 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 { right: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 { right: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 { right: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:block; 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:inline-block; }
.btn_nav_pc span {position:absolute; top:7px; right:0;width:100%; height:2px; background:#1e1e1e; 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:#1e1e1e; 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%; }

/* ===================================================
    footer
   =================================================== */
footer{position:relative; width:100%; background: #f5f5f5; }
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/footer_logo_mirena.svg) no-repeat 0 50%;  background-size:100px; padding:0 0 0 100px; font-size:18px; font-weight:600; opacity: 0.8;}
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; text-align:center;width:100%; max-width:630px;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;}
}


/* 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: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:50px 4%; display:flex; justify-content:space-between; align-items:start; }
.mbox.mbox_top {border-bottom:1px solid #e9e9e9;}
.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:49.5% ;float:left; border:solid #eaeaea; border-width:1px 0 0 1px; margin:-1px 0 0 -1px;} /** width:32.5% ; **/
.m_total_box .m_total_inner:nth-child(2n+1){border-left:0} /** nth-child(3n+1) **/
.m_total_box .m_total_inner:nth-child(1),
.m_total_box .m_total_inner:nth-child(2){border-top:0} /** .m_total_box .m_total_inner:nth-child(3) **/
.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:20px 20px 0 0} /** padding:0 0 20px 20px **/
.m_total_box .m_total_inner:nth-child(4){padding:20px 20px 0 20px} /** 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(--black) 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(--black) 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(--black) 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(--black) 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(--black) 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(--black) 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:#f5f5f5; 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:15px 20px; border-bottom:1px solid #e9e9e9;}
.mbox_bottom > div ul li:hover {background:#fafafa;}
.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%; 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%; color:var(--gray); }

.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(--primary)}
.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(--primary); }
.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(--primary)}
.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(--primary)}
.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 #e9e9e9;}
}
@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 #ededed}
    .m_total_box .m_total_inner:nth-child(4){ border-left:1px solid #ededed;}
    .m_total_box .m_total_inner:nth-child(5){border:0; border-top:1px solid #ededed}
    .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 #e9e9e9; 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 #e9e9e9; 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;}

}