


/*
============================================================================================================


.########.########.....###....##.....##.########
.##.......##.....##...##.##...###...###.##......
.##.......##.....##..##...##..####.####.##......
.######...########..##.....##.##.###.##.######..
.##.......##...##...#########.##.....##.##......
.##.......##....##..##.....##.##.....##.##......
.##.......##.....##.##.....##.##.....##.########

*/

/*
.menu__box .desc { xxxdisplay:none; }
.in-login a,
.menuSm a { display:inline-block; border:1px solid #e1e2e5; margin:20px 10px; width:36px; height:36px; border-radius:30px; }
    .in-login a i,
    .menuSm a i { font-size:.9em; }
*/

header#twm-global-header .btn.orange.submit { margin:0; padding:0; }
#main { background:#fff; font-family:"Noto Sans TC","Heiti TC","微軟正黑體","Microsoft JhengHei"; }
.ui-loader { display:none; }
.main { display:block; padding-top:150px; }
.main .row { display:block; margin:0; padding:0; position:relative; }
footer#twm-global-footer .totop { position:fixed; bottom:100px; z-index:122; }





/* Header */
.header { display:block; width:100%; position:fixed; top:0; left:0; background:white; z-index:6166; box-shadow:0 1px 2px rgba(0,0,0,.1); overflow:hidden; }
    .header img { display:block; position:relative; left:50%; transform:translateX(-50%); }

.user-navset { display:inline-block; position:absolute; top:50%; right:0; transform:translateY(-50%); 
    background:#f1f2f5; background:transparent; border-left:1px solid #ccc; padding:20px; } 
.user-navset li { display:inline-block; list-style:none; vertical-align:middle; padding:10px 5px; transform:translateY(-2px); font-size:.65em; } 
    .user-navset li input.inputsearch { display:inline-block; font-size:1em; width:150px; min-width:150px; vertical-align:middle; }
    .user-navset li a { display:inline-block; vertical-align:middle; } 
.user-navset b { display:inline-block; vertical-align:middle; font-size:.8em; margin-right:15px; }  
.user-navset .icon { display:block; height:24px; width:auto; }
.user-navset .flag { display:block; height:14px; width:auto; }
.user-navimage { display:inline-block; vertical-align:middle; margin:0; width:30px; height:30px; border-radius:50%; background:#ccc; overflow:hidden; position:relative; }
    .user-navimage img { display:block; height:100%; width:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }


.bannerheader { display:block; text-align:center; height:230px; position:relative; padding-top:50px; z-index:150; }
    .bannerheader .orangebg { display:block; height:180px; background-image:url(../img/bg-block.svg); background-size:cover; background-position:center; background-repeat:no-repeat; }
    .bannerheader .banner { display:block; max-width:1250px; width:calc(100% - 180px); height:200px; margin:0 auto; border-radius:10px; text-align:left; background-color:#f7f7f7; background-image:url(../img/topbanner-img.png); background-size:normal; background-position:right center; background-repeat:no-repeat; overflow:hidden; box-shadow:0 20px 30px 0 rgba(51,51,51,.1); position:absolute; top:0; left:50%; transform:translateX(-50%); }
    .bannerheader .banner h1 { display:block; padding:0; margin:0; color:#353638; font-size:3em; text-shadow:0 20px 30px 0 rgba(51,51,51,.1); position:absolute; top:calc(50% - 5px); left:7%; transform:translateY(-50%); }

.introblock { display:block; margin:0; position:relative; z-index:120; }
    .introblock .mask { display:block; height:30vw; width:100%; background:#333; position:relative; overflow:hidden; }
    .introblock .mask img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.5; }
    .introblock .conarea { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; text-align:center; color:white; font-size:1.2em; letter-spacing:0.06em; }
    .introblock .conarea h3 { display:block; margin-bottom:1em; position:relative; }
    .introblock .conarea h3:before,
    .introblock .conarea h3:after { content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); margin:0; width:30px; height:1px; text-align:center; background:white; }
    .introblock .conarea h3:before { left:-50px; }
    .introblock .conarea h3:after { right:-50px; }
    .introblock .conarea p span { display:inline-block; }
    .introblock .conarea p span.red { display:inline-block; font-weight:bold; color:#ff6e15; color:#ff6e15; margin:0 3px; }
.introblock2 { display:block; margin:0; position:relative; background:#f6f6f6; text-align:center; }
    .introblock2 .conarea { display:block; max-width:1250px; width:calc(100% - 100px); border:0 solid red; padding:3em 0 1.5em 0; text-align:center; margin:0 auto; position:relative; }
    .introblock2 .conarea h3 { display:block; margin-bottom:1em; position:relative; }
    .introblock2 .conarea h3:before,
    .introblock2 .conarea h3:after { content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); margin:0; width:30px; height:1px; text-align:center; background:white; }
    .introblock2 .conarea h3:before { left:-50px; }
    .introblock2 .conarea h3:after { right:-50px; }
    .introblock2 .conarea p { font-size:1.2em; }
    .introblock2 .conarea p span { display:inline-block; }
    .introblock2 .conarea p span.red { display:inline-block; font-weight:bold; color:orange; color:#ff6e15; margin:0 3px; }
.triangleset { display:inline-block; transform:scale(.8); position:absolute; top:450px; left:5%; width:auto; z-index:556; transition:all .3s; z-index:6; }
.triangleset img { display:block; width:100%; }

    @media -ms-viewport, screen and (max-width:1277px) {
        .main { display:block; padding-top:80px; }
        .bannerheader .banner { width:calc(100% - 50px); } 
    }
    @media -ms-viewport, screen and (max-width:1024px) {
        .triangleset { left:0; max-width:70%; top:55vw; }
        .main { display:block; padding-top:70px; }
        .bannerheader { display:block; text-align:center; height:200px; position:relative; padding-top:50px; z-index:150; }
        .bannerheader .banner { width:calc(100% - 10px); height:calc(100% - 20px); background-size:50%; background-position:20% right; }
        .bannerheader .banner h1 { font-size:2em; color:black; /*text-align:center; width:100%; left:0; top:30%;*/ }
        .bannerheader .orangebg { height:145px; }
    }
    @media -ms-viewport, screen and (max-width:768px) {
        .bannerheader .banner { background-size:75%; }
        .triangleset { left:0; max-width:70%; }
    }
    @media -ms-viewport, screen and (max-width:520px) {
        .bannerheader .banner { background-size:100%; background-position:20% center; }
        .introblock2 .conarea { font-size:.9em; width:100%; margin:0; padding:20px; }
        .introblock2 .conarea p { margin:0; }
    }

.noscroll { overflow:hidden; }
.switch { display:block; background:#333; position:absolute; width:150px; height:100px; top:50%; left:160px; transform:translateY(-50%); cursor:pointer; overflow:hidden; }
    .switch .box { display:block; position:absolute; top:0; left:0; transition:all .3s; }
        .switch .box p { display:block; height:100%; font-size:1.2em; color:white; padding:36px 20px; transform:translateY(-2px); }
        .switch:after { content:url(../icon/icon-switch.svg); display:block; width:25px; height:25px; opacity:.5; position:absolute; top:50%; right:10px; transform:translateY(-50%); }
        .switch:hover:after { opacity:1; }
    .switch.oncorporate .box { top:-100%; }

.footer { background:#1b1b1b; text-align:center; position:relative; }
.footer img { display:block; position:relative; left:50%; transform:translateX(-50%); }

.overlay { display:none; width:100%; height:100%; background:rgba(50,50,55,.8); position:fixed; top:0; left:0; z-index:789; }
.alertbox { display:block; width:600px; height:auto; padding:25px; text-align:center; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,.4); background:white; position:fixed; top:50%; left:50%; z-index:93; transform:translate(-50%,-50%); }
    .alertbox p { font-size:1.2em; font-weight:bold; margin:10px 0; }






/*
============================================================================================================


..######...#######..##....##.########.########.##....##.########
.##....##.##.....##.###...##....##....##.......###...##....##...
.##.......##.....##.####..##....##....##.......####..##....##...
.##.......##.....##.##.##.##....##....######...##.##.##....##...
.##.......##.....##.##..####....##....##.......##..####....##...
.##....##.##.....##.##...###....##....##.......##...###....##...
..######...#######..##....##....##....########.##....##....##...

*/


.container { text-align:center; }
.container:before { height:140px; }
.container h2 { font-size:1.2em; margin:30px 0; opacity:.8; text-align:center; }
.grayblock { background:#f6f6f6; padding:20px 0; }
.grayblock h2 { text-align:center; margin:20px 0; }
img.aligncenter { position:relative; left:50%; transform:translateX(-50%);  }
img.marginbottom-30 { margin-bottom:-50px; }


.selecttype { display:block; text-align:center; z-index:25; position:relative; }
.selecttype .sep { display:inline-block; width:5px; height:100px; margin:0 20px; background:#eee; vertical-align:middle; display:none; }
.selecttype >a { display:inline-block; background:white; width:190px; height:120px; position:relative; margin:10px; border-radius:5px; text-align:center; box-shadow:0 1px 6px rgba(0,0,0,.1); cursor:pointer; transition:all .3s; vertical-align:middle; padding:1.5em 1em; box-sizing:border-box; }
.selecttype >a img { display:block; width:130px; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.selecttype >a img.over { display:none; width:130px; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.selecttype >a span { display:block; font-size:1.7em; line-height:125%; text-align:center; color:#333; margin:0; }
.selecttype >a span:nth-child(2) { font-weight:bold; color:#ff6e15; }
.selecttype >a:hover { box-shadow:0 1px 16px #ff9800; }
.selecttype >a.selected { background:#f86200; }
.selecttype >a.selected img { display:none; }
.selecttype >a.selected img.over { display:block; }
.selecttype >a.selected span { color:white; }
.selecttype >a.selected:before { content:url(../img/icon-checked.svg); width:24px; height:24px; position:absolute; top:14px; left:14px; }
.selecttype.smaller >a span { font-size:1.5em; font-weight:normal; }
.grayblock2 .selecttype >a { padding-top:2.2em; }
.grayblock2 .selecttype >a span.smaller { font-size:1.2em; margin-top:.2em; }


    @media -ms-viewport, screen and (max-width:1024px) and (min-width:576px) {
        .selecttype >a { width:170px; margin:5px; } 
    }
    @media -ms-viewport, screen and (max-width:575px) {
        .grayblock { margin-top:-40px; }
        .grayblock h2 { font-size:1.5em; margin:.8em .5em; }
        .selecttype >a { width:calc(100% - 20px); margin:4px 0; height:auto; } 
        .selecttype >a span { font-size:1.4em; display:inline-block; width:auto; margin:0; } 
    }



.stepbar { padding:25px; border:0px solid #ccc; background:white; text-align:center; font-size:1.2em; margin:0 auto; display :none;}
    .stepbar b { display:inline-block; vertical-align:middle; font-size:1em; line-height:145%; text-align:center; position:relative; margin:0; font-weight:normal; }
        .stepbar b span { display:block; font-size:1.5em; color:#f86200; font-weight:bold; margin:0; }
    .stepbar a { display:inline-block; vertical-align:middle; text-align:center; position:relative; width:60px; height:80px; margin:0 0 0 90px; padding-left:15px; padding-right:0; position:relative; line-height:105%; }
        .stepbar a span.number { display:block; font-size:1.6em; font-family:Arial; font-weight:bold; color:#f86200; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-185%,-50%); }
        .stepbar a span.text { display:block; text-align:center; width:50px; position:absolute; top:50%; left:calc(50% + 8px); transform:translate(-50%,-50%); }
        .stepbar a:before { content:''; display:block; width:90px; height:90px; border:3px solid #aaa; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
        .stepbar a:after { content:''; display:block; width:40px; height:3px; background:#aaa; border-radius:5px; position:absolute; top:50%; left:-67px; transform:translateY(-50%); }
        .stepbar a:nth-child(2) { margin-left:30px; }
        .stepbar a:nth-child(2):after { display:none; }


.floatmenu { display:block; width:120px; border-radius:10px 0 0 10px; position:fixed; top:170px;xxxtop:35%; right:-120px; z-index:99; overflow:hidden; transition:all .2s;transition:0; box-shadow:0 10px 20px rgba(0,0,0,.1); background:white; cursor:pointer; xxxtransform:translateY(-50%); }
.floatmenu.show { right:0; }
    .floatmenu h3 { display:block; font-size:1.1em; background:#888; padding:10px; color:white; text-align:left; margin:0; position:relative; }
    .floatmenu h3:after { content:url('../icon/icon-add-white.svg'); display:inline-block; width:24px; height:24px; position:absolute; top:50%; right:5px; transform:translateY(-50%); opacity:.5; transition:all .3s; }
    .floatmenu p { display:block; padding:0; position:relative; }
    .floatmenu p:after { content:url(../icon/icon-checked-orange.svg); display:block; width:22px; height:22px; position:absolute; top:50%; right:5px; transform:translateY(-50%); }
    .floatmenu p span { display:inline-block; padding:0 10px; vertical-align:top; }
        .floatmenu p span .item { display:block; width:calc(100% - 30px); padding:5px 0; padding-left:45px; position:relative; border:1px solid #ccc; transition:none; padding-right:30px; }
        .floatmenu p span .item p { font-size:.8em; margin:0; }
        .floatmenu p span .item p:after { display:none; }
        .floatmenu p span .item img { display:inline-block; width:30px; height:30px; margin-right:8px; border:1px solid #ccc; position:absolute; top:50%; left:5px; transform:translateY(-50%); }
        .floatmenu p span .item p { display:inline-block; margin:0; padding:0; line-height:100%; color:#f86200; }
        .floatmenu p span .item .btn-remove { background-image:url(../icon/icon-trash.svg); background-size:90%; background-position:center; background-repeat:no-repeat; opacity:.5; display:block; width:16px; height:16px; position:absolute; top:50%; right:5px; transform:translateY(-50%); }

        .floatmenu p span.additionalfloat { display:block; border:1px solid red; color:gray; border:0; max-height:190px; overflow-y:scroll; }
        .floatmenu p span.additionalfloat .item { color:gray; border:0; border-bottom:1px solid #ccc; }
        .floatmenu p span.additionalfloat .item:last-child { border-bottom:0; }
        .floatmenu p span.additionalfloat .item p { color:gray; margin:0; }

    .floatmenu p span:nth-child(1) { width:80px; }
    .floatmenu p span:nth-child(2) { color:#f86200; padding-left:0; width:calc(100% - 100px); font-weight:bold; display:none; }
    .floatmenu p:last-child span:nth-child(2) { opacity:1; }
    .floatmenu p:last-child:after { display:none; }

    .floatmenu:hover h3:after { opacity:1; }
    .floatmenu.open { width:350px; }
    .floatmenu.open h3:after { content:url('../icon/icon-minus-white.svg'); }
    .floatmenu.open p span:nth-child(2) { display:inline-block; }

    
    @media -ms-viewport, screen and (max-width:1024px) and (min-width:415px) {
        .stepbar { padding:5px; font-size:1em; }
            .stepbar a { width:60px; height:80px; margin:0 0 0 30px; padding-left:15px; }
            .stepbar a span.number {}
            .stepbar a span.text { width:40px; }
            .stepbar a:before { width:70px; height:70px; border:2px solid #aaa; }
            .stepbar a:after { display:none; }
        
        .floatmenu { top:auto; bottom:70px; }
    }
    @media -ms-viewport, screen and (max-width:414px) {
        .stepbar { padding:5px; font-size:.92em; margin-top:-10px; }
        .stepbar b { display:none; }
        .stepbar a { width:auto; height:auto; margin:5px 3px; padding:5px 12px; border:3px solid #aaa; border-radius:20px; }
            .stepbar a span.number { display:none; }
            .stepbar a span.text { width:100%; position:relative; top:auto; left:auto; transform:none; }
            .stepbar a:before { content:''; display:block; width:0; height:0; border-style:solid; border-width:0 8px 8px 8px; border-color:transparent transparent #f86300 transparent; top:auto; bottom:-15px; transform:translate(-50%,0); }
            .stepbar a:after { display:none; }
            .stepbar a:nth-child(2) { margin-left:0; }
            .stepbar a:nth-child(2):after { display:none; }

        .floatmenu { display:block; width:120px; width:calc(100% - 10px)!important; height:65px; border-radius:5px; top:calc(100vh - 10px); right:10px; transform:translate(0,-100%); box-shadow:0 5px 10px rgba(0,0,0,.2); }
            .floatmenu.show { top:calc(100% - 10px); right:10px; }
            .floatmenu h3 { display:block; font-size:1.1em; background:#888; padding:10px; text-align:center; }
            .floatmenu h3:after { display:block; position:relative; top:auto; right:auto; transform:translateY(0); margin:0 auto; }
            .floatmenu.open { width:calc(100% - 10px); height:auto; right:5px; top:calc(100% - 5px); box-shadow:0 5px 30px rgba(0,0,0,.5); }
    }





    @keyframes _animateline {
        0% { width:0; }
        100% { width:calc(100% - 150px); }
    }
    @keyframes _animateline_mobile {
        0% { width:0; }
        100% { width:calc(100% - 40px); }
    }
    @keyframes _animateout {
        0% { opacity:0; }
        100% { opacity:1; }
    }


.blackblock { display:block; background:black; padding:40px; overflow:hidden; position:relative; text-align:center; width:100%; }
.blackblock .row { display:block; position:relative; z-index:10; }
.blackblock h2 { display:block; color:white; font-weight:normal; xxxtext-decoration:underline; position:relative; z-index:2; opacity:1; }
.blackblock h2 span { display:inline-block; }
.blackblock img.bg { display:block; width:100vw; height:auto; z-index:1; object-fit:cover; opacity:.4; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.blackblock .pricebar { display:inline-block; position:relative; width:auto; margin:20px auto; z-index:10; }
.blackblock .pricebar:before { content:''; display:block; margin:0; padding:0; width:100%; height:2px; border-radius:5px; 
    background:#f86200; z-index:-1; position:absolute; top:calc(50% - 8px); left:50%; transform:translate(-50%,-50%);
    top:50%; left:75px; transform:translate(0,-50%); width:calc(100% - 150px); width:0;
    
    xxxxanimation:5s _animateline .5s forwards ease-in-out;
    width:calc(100% - 150px);
}
.blackblock .pricebar >p { display:inline-block; width:080px; color:white; font-size:1.0em; vertical-align:bottom; margin-top:5px; transform:translateY(-100%); }
.blackblock .pricebar a { display:inline-block; width:150px; vertical-align:top; cursor:pointer; text-align:center; font-family:Arial; font-weight:normal; position:relative; xxxborder:1px solid red; opacity:0; opacity:1; }
.blackblock .pricebar a >p { display:inline-block; width:150px; color:white; font-size:1.2em; letter-spacing:0; vertical-align:top; cursor:pointer; text-align:center; position:absolute; top:-150%; left:50%; transform:translateX(-50%); }
.blackblock .pricebar a span { display:inline-block; font-size:.7em; font-weight:bold; transform:translateY(-2px); }
.blackblock .pricebar a:after { content:''; display:block; width:10px; height:10px; margin:10px auto; transition:all .2s; background:white; border:2px solid #f86200; border-radius:20px; transition:0; }
.blackblock .pricebar a:hover { color:white; }
.blackblock .pricebar a:hover:after { transform:scale(1.8); }
.blackblock .pricebar a.selected {  }
.blackblock .pricebar a.selected:after { content:url(../img/icon-price-selected.svg); width:30px; height:30px; margin:0px auto; background:transparent; border:0; }
.blackblock .pricebar a.selected:hover:after { transform:scale(1.2); }
/*
.blackblock .pricebar a:nth-child(1) { animation:1s _animateout 0.5s forwards; }
.blackblock .pricebar a:nth-child(2) { animation:1s _animateout 2.0s forwards; }
.blackblock .pricebar a:nth-child(3) { animation:1s _animateout 2.9s forwards; }
.blackblock .pricebar a:nth-child(4) { animation:1s _animateout 3.5s forwards; }
.blackblock .pricebar a:nth-child(5) { animation:1s _animateout 5.1s forwards; }
*/




    .planblock { display:block; z-index:12; height:300px; opacity:1; position:relative; transition:all .3s; }
    .planblock.hide { height:0; opacity:0; }
    .planblock:after { content:''; display:block; z-index:120; xxxborder-left:2px dotted yellow; position:absolute; height:600px; width:1px; top:50%; left:50%; transform:translateY(-50%); }
        .planblock .sidebar { display:inline-block; z-index:72; position:absolute; top:0; padding-top:60px; }
        .planblock .sidebar .title { display:block; font-size:.8em; background:#aaa; color:white; margin:9px 0; padding:3px 12px; border-radius:20px; display:none; }
        .planblock .sidebar .title:nth-child(1),
        .planblock .sidebar .title:nth-child(2) { display:block; }
    .planblock .mask { display:flex; position:relative; margin:0; padding:0; xxxxxborder:2px solid red; position:absolute; top:0; left:0; }
    .planblock .btn-next, 
    .planblock .btn-prev { display:block; width:70px; height:70px; border-radius:4px; margin:0; padding:10px; position:absolute; top:37%; transform:translateY(-50%); z-index:78; background:rgba(50,50,50,.4); cursor:pointer; transition:all .2s; opacity:.7; }
        .planblock .btn-next img, 
        .planblock .btn-prev img { display:block; width:100%; height:100%; margin:0; padding:0; }
        .planblock .btn-prev { left:-25px; }
        .planblock .btn-next { right:-15px; }    
        .planblock .btn-prev:hover { left:-15px; opacity:1; }
        .planblock .btn-next:hover { right:-5px; opacity:1; }

            .planblock .btn-prev:after,
            .planblock .btn-next:after { display:none; }
    
    .planblock .nav { display:block; text-align:center; position:absolute; bottom:0; left:50%; transform:translateX(-50%); color:white; padding:10px; letter-spacing:5px; font-size:.8em; pointer-events:none; }
    .planblock .item { display:inline-block; position:relative; width:300px; background:white; margin:10px; padding:0; padding-bottom:50px; border-radius:15px; vertical-align:top; float:left; }
    .planblock .item h3 { display:block; padding:15px 20px; color:white; text-align:center; font-size:1.13em; font-size:1em; background:#8a8a8a; margin-top:0; margin-bottom:5px; border-radius:15px 15px 0 0; transition:all .3s; }
    .planblock .item h3 span { display:inline-block; font-size:1.2em; margin:0 4px; }
    .planblock .item h3 span.serial { display:inline-block; font-size:1em; margin:0 10px 0 0; font-weight:bold; border:1px solid white; padding:.2em; }
    .planblock .item p { display:block; margin:0 20px; padding:6px 0; color:#333; font-size:.9em; text-align:left; border-bottom:1px solid #ccc; display:none; }
    .planblock .item p:nth-child(1) { display:block; }
    .planblock .item p:nth-child(2) { display:block; }
    .planblock .item p:nth-child(3) { display:block; }
    .planblock .item p:last-of-type { border-bottom:0; }
    .planblock .item p span:first-child { display:inline-block; width:60px; color:black; }
    .planblock .item p.desc { height:120px; overflow:hidden; text-overflow:ellipsis; }
    .planblock .item p.orange { color:#f86200; }
    .planblock .item a.btn-detail { display:block; font-size:.9em; opacity:.6; text-align:center; margin:1em 0 -.5em 0; cursor:pointer; }
    .planblock .item a.btn-detail:hover { background:transparent; opacity:1; text-decoration:underline; }
    .planblock .item a.btn-select { display:block; padding:12px 50px 16px 50px; border-radius:25px; position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); color:white; background:#d2d2d2; cursor:pointer; transition:none; }
    .planblock .item a.btn-select:hover { background:#888; }
        .planblock .item.selected h3 { background:#f86200; }
        .planblock .item.selected p { display:block; }
        .planblock .item.selected a.btn-select { background:#f86200!important; }
        .planblock .item.selected a.btn-select:after { content:url(../img/icon-checked-white.svg); display:inline-block; margin:0 -12px 0 5px; transform:translate(3px,4px); width:20px; height:20px; }
        .planblock .item.selected a.btn-select:hover { background:#f86200!important; }
        .planblock .item.hide { xxxxopacity:.3; }
        
        .planblock.open { height:500px; }
        .planblock.open .sidebar .title { display:block; }
        .planblock.open .item p { display:block; }
        .planblock.open .item a.btn-select:hover { background:#aaa; }

        .planblock .text-nodata, .text-nodata { display:none; color:white; }



.whiteblock { display:block; padding:40px; overflow:hidden; position:relative; width:100%; }
.whiteblock .row { display:block; position:relative; z-index:10; text-align:center; }
.whiteblock h2 { display:block; text-decoration:underline; position:relative; z-index:2; opacity:1; text-align:center; text-decoration:none; font-weight:normal; width:auto; }
.whiteblock h2 span { display:inline-block; }

.whiteblock .row .floatright { display:block; width:100%; max-width:1150px; text-align:right; position:absolute; top:0; right:100px; z-index:9; display:none; }
.whiteblock .row .floatright a { display:inline-block; padding:5px 18px; margin:4px; border-radius:4px; cursor:pointer; border:2px groove #ccc; }
.whiteblock .row .floatright a.selected { background:black; color:white; border-color:black; }
/*
.whiteblock .row .floatright { display:block; width:100%; max-width:1150px; text-align:left; position:absolute; top:7em; right:100px; xx-left:50%; transform:translateX(-50%); z-index:9; display:none; }
.whiteblock .row .floatright a.btnplus { display:inline-block; width:36px; height:36px; border-radius:4px; background:#333; background-image:url('../icon/icon-add-white-bold.svg'); background-repeat:no-repeat; background-position:center; background-size:60%; margin-left:50px; cursor:pointer; transition:all .2s; }
.whiteblock .row .floatright a.btnplus:hover { background-color:#555; }
*/

.blackblock .row .floatright { display:block; width:100%; max-width:1150px; text-align:right; position:absolute; top:20px; right:110px; z-index:9; display:none;}
.blackblock .row .floatright a { display:inline-block; padding:5px 18px; margin:4px; border-radius:4px; cursor:pointer; border:2px groove #fff; color:#fff; }
.blackblock .row .floatright a.selected { background:white; color:black; }

.whiteblock .pricebar { display:inline-block; position:relative; width:auto; margin:30px auto; z-index:10; position:absolute; left:50%; transform:translateX(-50%); width:850px; }
.whiteblock .pricebar.extand { margin-top:60px; }
.whiteblock .pricebar:before { content:''; display:block; margin:0; padding:0; width:100%; height:2px; border-radius:5px; 
    background:#f86200; z-index:-1; position:absolute; top:calc(50% - 8px); left:50%; transform:translate(-50%,-50%);
    xxxtop:50%; left:75px; transform:translate(0,-50%); width:calc(100% - 150px); width:0; width:calc(100% - 150px);
}
.whiteblock .pricebar >p { display:inline-block; width:080px; color:#333; font-size:1.0em; vertical-align:bottom; margin-top:5px; transform:translateY(-100%); }
.whiteblock .pricebar a { display:inline-block; margin-right:-4px; width:150px; vertical-align:top; cursor:pointer; text-align:center; font-family:Arial; font-weight:normal; position:relative; opacity:1; }
.whiteblock .pricebar a >p { display:inline-block; width:150px; color:#333; font-size:1.2em; font-weight:bold; letter-spacing:-1px; vertical-align:top; cursor:pointer; text-align:center; position:absolute; top:-150%; left:50%; transform:translateX(-50%); }
.whiteblock .pricebar a span { display:inline-block; font-size:.85em; font-weight:bold; transform:translateY(-2px); }
.whiteblock .pricebar a:after { content:''; display:block; width:10px; height:10px; margin:10px auto; transition:all .2s; background:white; border:2px solid #f86200; border-radius:20px; }
.whiteblock .pricebar a:hover { color:white; }
.whiteblock .pricebar a:hover:after { transform:scale(1.8); }
.whiteblock .pricebar a.selected {  }
.whiteblock .pricebar a.selected:after { content:url(../img/icon-price-selected.svg); width:30px; height:30px; margin:0px auto; background:transparent; border:0; }
.whiteblock .pricebar a.selected:hover:after { transform:scale(1.2); }
.whiteblock .sortmessage { display:inline-block; width:100%; max-width:1040px; margin:120px 0 0 0; padding:15px 20px; text-align:left; background:#f1f2f5; opacity:0; }
.whiteblock .sortmessage.show { opacity:1; }
    .whiteblock .message { display:none; text-align:center; padding:50px; font-size:1.1em; }
    .whiteblock .btnloadmore { display:block; width:150px; background:white; border:1px solid #ccc; text-align:center; border-radius:50px; margin:60px auto; padding:10px 15px; font-size:.9em; cursor:pointer; }
    .whiteblock .btnloadmore:hover { border-color:#333; }

    .productblock { display:block; z-index:12; width:1150px; margin:0 auto; text-align:left; }
    .productblock .item { display:inline-block; position:relative; width:260px; height:430px; margin:10px; padding:0; transition:all .3s; cursor:pointer; }
    .productblock .item .bgclip { content:''; display:block; position:absolute; top:56%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; background:white; z-index:1; box-shadow:0 1px 5px rgba(0,0,0,.5); opacity:0; transition:all .3s; }
    .productblock .item .con { display:block; position:absolute; width:100%; height:100%; z-index:10; padding:20px; }
    .productblock .item .imgobj { display:block; margin:10px auto; position:relative; }
    .productblock .item .imgobj img { display:block; width:190px; height:190px; margin:10px auto; }
    .productblock .item .imgobj span { display:block; width:auto; height:auto; padding:5px 10px; border-radius:20px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.7); color:white; cursor:pointer; transition:all .3s; z-index:22; opacity:0; cursor:pointer; }
    .productblock .item h3 { display:block; padding:0; text-align:center; font-size:1em; color:#777; font-weight:bold; margin:.2em auto;}
    .productblock .item h3.title { display:block; padding:0; text-align:center; font-size:1em; color:#333; font-weight:bold; }
    .productblock .item h3 span { display:inline-block; }
    .productblock .item p.price { display:block; margin:0; padding:0; color:#f86200; font-size:1.5em; text-align:center; }
    .productblock .item p.price2 { display:block; margin:0; padding:0; color:#333; font-size:.9em; text-align:center; }
    .productblock .item p span { display:inline-block; font-size:.8em; margin-right:4px; }
    .productblock .item a { display:block; width:180px; padding:12px 50px 16px 50px; border-radius:25px; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); color:white!important; background:#d2d2d2; cursor:pointer; text-align:center; }
        .productblock .item:hover { z-index:150; }
        .productblock .item:hover a { color:white; }
        .productblock .item:hover .bgclip { opacity:1; width:calc(100% + 50px); height:calc(100% + 50px); }
        .productblock .item:hover .imgobj span { opacity:1; }
            .productblock .item.selected a { background:#f86200; color:white; }
            .productblock .item.selected a:after { content:url(../img/icon-checked-white.svg); display:inline-block; margin:0 -12px 0 5px; transform:translate(3px,4px); width:20px; height:20px; }
            .productblock .item.selected a:hover { background:#f86200; }
    .productblock.hide { width:1px; height:1px; overflow:hidden; }

    .productblock .item .btn-notify { display:block; width:90%; padding:.5em 1em; border-radius:5px; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); color:white; background:red; cursor:pointer; text-align:center; font-size:.9em; }
    



.numblock { display:block; padding:40px; overflow:hidden; background:#f6f6f6; position:relative; text-align:center; transition:all .3s; width:100%; }
.numblock .row { display:block; position:relative; z-index:10; text-align:center; }
.numblock h2 { display:block; text-decoration:underline; position:relative; z-index:2; opacity:1; text-align:center; text-decoration:none; font-weight:normal; }
.numblock .filterrow { display:inline-block; position:relative; width:auto; margin:20px auto; z-index:10; width:100%; text-align:center; }
.numblock .filterrow a { display:inline-block; width:auto; color:#333; font-size:1.1em; padding:5px 25px; vertical-align:top; cursor:pointer; text-align:center; }
.numblock .filterrow a.selected { background:black; color:#ff9800; border-radius:25px; }
.numblock .filterrow a.floatright { position:absolute; top:0; right:0; }
.numblock .filterrow a.floatright input { transform:translate(-5px,-3px); }
.numblock .nav { display:block; position:relative; text-align:center; padding:20px; }
.numblock .nav .btn-more { display:inline-block; position:relative; text-align:center; background:#888; color:white; border-radius:30px; padding:12px 30px; cursor:pointer; font-size:1.2em; }
.numblock .nav .btn-more img { display:inline-block; width:24px; height:24px; margin-left:5px; transform:translate(5px,3px); }
.numblock .nav .btn-more:hover { background:#f86200; }
.numblock .nav .btn-more.disabled { cursor:default; background:#aaa; opacity:.5; }
.numblock .nav .btn-more.disabled:hover { cursor:default; background:#aaa; opacity:.5; }


    .numberblock { display:block; z-index:12; width:95%; max-width:1150px; margin:0 auto; text-align:left; transition:all .3s; }
    .numberblock .item { display:inline-block; position:relative; width:220px; margin:5px; padding:10px; border:1px solid #ccc; background:white; display:none; opacity:0; }
    .numberblock .item h3 { display:inline-block; width:calc(100% - 60px); padding:5px 0; margin:0; text-align:left; font-size:1.05em; color:#333; vertical-align:middle; }
    .numberblock .item p.price { display:inline-block; width:50px; padding:5px 0; color:#aaa; font-size:.8em; text-align:right; vertical-align:middle; }
    .numberblock .item p span { display:inline-block; }
        .numberblock .item.selected { background:#f86200; }
        .numberblock .item.selected h3 { color:white; }
        .numberblock .item.selected p { color:white; }


    .inputblock { text-align:center; display:block; background:#f6f6f6; padding-top:50px; width:100%; }
    .inputblock .row { display:inline-block; width:100%; max-width:600px; margin:0 auto; }
    .inputblock .row p { font-size:16px; }
    .inputblock .row .inputobj { display:block; position:relative; }
    .inputblock .row .inputobj input { display:block; width:100%; font-size:1.7em; padding:20px; height:60px; padding-left:105px; margin:20px auto; }
    .inputblock .row .inputobj span { display:inline-block; width:auto; position:absolute; top:47%; left:0; border-right:1px solid #ccc; padding:19px; transform:translateY(-50%); z-index:10; }
    .inputblock .row .conblock { display:block; width:100%; text-align:left; }
    .inputblock .row .conblock ul,
    .inputblock .row .conblock ol,
    .inputblock .row .conblock li { font-size:15px; }
        


    .serviceblock { display:block; z-index:12; width:800px; margin:0 auto; }
    .serviceblock .item { display:inline-block; background:white; width:190px; height:150px; position:relative; margin:10px; border-radius:15px; text-align:center; box-shadow:0 1px 6px rgba(0,0,0,.1); cursor:pointer; transition:all .3s; color:#333; vertical-align:top; }
    .serviceblock .item span { display:block; padding:5px 10px; font-size:.8em; }
    .serviceblock .item img { display:block; height:60px; margin:18px auto 5px auto; }
    .serviceblock .item img.over { display:none; }
    .serviceblock .item:hover { box-shadow:0 1px 16px #ff9800; }
        .serviceblock .item.selected { background:#f86200; color:white; }
        .serviceblock .item.selected img.normal { display:none; }
        .serviceblock .item.selected img.over { display:block; }
        .serviceblock .item.selected:before { content:url(../img/icon-checked.svg); width:24px; height:24px; position:absolute; top:14px; left:14px; }


    .additionalblock { 
        display:block; border-top:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; padding:1em 0; margin:-1.5em -40px 1em -40px; width:calc(100% + 80px); 
        position:relative; overflow-x:none;
        background:-moz-linear-gradient(top, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,1) 95%, rgba(221,221,221,1) 100%);
        background:-webkit-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 95%,rgba(221,221,221,1) 100%);
        background:linear-gradient(to bottom, rgba(221,221,221,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 95%,rgba(221,221,221,1) 100%);
        filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#dddddd',GradientType=0 );
        /*
        position:relative; position:fixed; top:80px; left:0; width:100%; height:calc(100% - 80px); z-index:788; margin:0;
        background:white; overflow-y:scroll;
        */
    }
    @media -ms-viewport, screen and (max-height:800px) {
        .additionalblock { 
            position:relative; position:fixed; top:80px; left:0; width:100%; height:calc(100% - 80px); z-index:788; margin:0;
            background:white; overflow-y:scroll;
        }
    }
	/* Portrait*/
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
		.additionalblock { 
            position:relative; position:fixed; top:80px; left:0; width:100%!important; height:calc(100% - 80px); z-index:788; margin:0;
            background:white; overflow-y:scroll;
        }
	}
	
        .additionalblock .btn-close { display:block; width:30px; height:30px; margin:0; position:absolute; top:10px; right:10px; background-image:url(../icon/icon-close.svg); cursor:pointer; opacity:.5; }
            .additionalblock .btn-close:hover { opacity:.7; }
        .additionalblock .nodata { display:none; position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); }
        .additionalblock .pblock { display:block; width:95%; max-width:1150px; margin:0 auto; position:relative; overflow:hidden; height:470px; height:calc(18vh + 240px); }
        .additionalblock .pblock .mask { display:block; margin:0; padding:0; width:350%; position:absolute; top:0; left:0; height:100%; text-align:left; }
        .additionalblock .typeset { display:block; border-bottom:1px solid #ccc; width:94%; max-width:1150px; margin:0 auto 1em auto; font-size:.9em; }
            .additionalblock .typeset a { display:inline-block; padding:1em 2em; color:#333; position:relative; cursor:pointer; }
            .additionalblock .typeset a.selected:after { content:''; display:block; width:100%; height:4px; background-color:#f86200; position:absolute; bottom:0; left:0; }
            
                .additionalblock .btn-next, 
                .additionalblock .btn-prev { display:block; width:70px; height:70px; border-radius:4px; margin:0; padding:10px; position:absolute; top:50%; transform:translateY(-50%); z-index:78; background:rgba(50,50,50,.4); cursor:pointer; transition:all .2s; opacity:.7; }
                    .additionalblock .btn-next img, 
                    .additionalblock .btn-prev img { display:block; width:100%; height:100%; margin:0; padding:0; }
                    .additionalblock .btn-prev { left:40px; }
                    .additionalblock .btn-next { right:40px; }    
                    .additionalblock .btn-prev:hover { left:50px; opacity:1; }
                    .additionalblock .btn-next:hover { right:50px; opacity:1; }
                    .additionalblock .btn-prev:after,
                    .additionalblock .btn-next:after { display:none; }
                        .additionalblock .nav { display:block; width:100%; height:80px; margin:0; padding:10px; text-align:center; }
                        .additionalblock .nav { display:block; width:100%; height:80px; margin:0; padding:10px; z-index:78; cursor:pointer; transition:all .2s; }
                        .additionalblock .navbar { display:block; width:100px; height:4px; background:#ccc; position:absolute; bottom:0; left:0; z-index:18; }
                            .additionalblock .totalrow { display:block; width:94%; max-width:1150px; border-top:1px solid #ccc; margin:0 auto; padding:1em 0; }
                            .additionalblock .totalrow p { display:inline-block; border:1px solid white; width:calc(100% - 372px); font-size:1em; vertical-align:middle; text-align:left; color:#f86200; }
                            .additionalblock .totalrow p span { display:inline-block; margin:0 .3em; font-weight:bold; }
                            .additionalblock .totalrow p span.break { display:inline-block; width:20px; }
                            .additionalblock .totalrow p .btn-more { display:inline-block; width:20px; height:20px; vertical-align:middle; background-repeat:no-repeat; background-position:center; background-size:70%; background-image:url('../icon/icon-arrownext.svg'); opacity:.8; transition:all .3s; }
                            .additionalblock .totalrow p .btn-more:hover { opacity:1; }
                            .additionalblock .totalrow p .btn-more.open { transform:rotate(90deg); }
                            .additionalblock .totalrow .btn-gray,
                            .additionalblock .totalrow .btn-dark { display:inline-block; vertical-align:middle; width:180px; padding:12px 0; border-radius:25px; color:white!important; background:#d2d2d2; cursor:pointer; text-align:center; position:relative; transition:all .3s; }
                                .additionalblock .totalrow .btn-dark { background:#333; }
                                .additionalblock .totalrow .btn-gray:hover { background:#ccc; }
                                .additionalblock .totalrow .btn-dark:hover { background:#222; }
                                    .additionalblock .thumbrow { display:block; width:94%; max-width:1150px; margin:-.5em auto 0 auto; padding:1.5em; background:#e1e2e5; }
                                    .additionalblock .thumbrow .item { display:block; width:80%; padding:0; position:relative; text-align:left; margin:0; }
                                    .additionalblock .thumbrow .item img { display:inline-block; vertical-align:middle; width:30px; height:30px; object-fit:cover; margin-right:15px; border:1px solid #ccc; }
                                    .additionalblock .thumbrow .item p { display:inline-block; width:auto; vertical-align:middle; margin:0; margin-right:.5em; }
                                    .additionalblock .thumbrow .item p.title { width:360px; border-right:1px solid #ccc; margin-right:1em; }
                                    .additionalblock .thumbrow .item .btn-remove { display:block; width:30px; height:30px; position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:.5; background-image:url('../icon/icon-trash.svg'); background-repeat:no-repeat; background-position:center; background-size:60%; cursor:pointer; }
                                    .additionalblock .thumbrow .item .btn-remove:hover { opacity:1; }

        .pblock .mask .item { display:inline-block; width:240px; vertical-align:top; margin-right:-4px; }
            .pblock .mask .item .imgobj { display:block; width:100%; vertical-align:top; margin-top:20px; }
            .pblock .mask .item .imgobj img { display:block; width:auto; height:12vh; margin:0 auto; }
            .pblock .mask .item .imgobj span { display:block; width:auto; height:auto; padding:5px 10px; border-radius:20px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.7); color:white; cursor:pointer; transition:all .3s; z-index:22; opacity:0; cursor:pointer; }
                .pblock .mask .item h3 { display:block; padding:0 40px; height:75px; text-align:center; font-size:1.1em; line-height:110%; color:#333; font-weight:bold; margin-bottom:0.3em; }
                .pblock .mask .item h3 span { display:inline-block; }
                .pblock .mask .item p.price { display:block; margin:0; padding:0; color:#f86200; font-size:1.1em; text-align:center; }
                .pblock .mask .item p.price2 { display:block; margin:0; padding:0; color:#333; font-size:.8em; text-align:center; }
                .pblock .mask .item .counter { display:block; text-align:center; padding:15px 0; }
                .pblock .mask .item .counter p { display:inline-block; vertical-align:middle; background-color:#eee; border-radius:20px; margin:0 2px; text-align:center
                    ; padding:.3em 2em; font-weight:bold; }
                .pblock .mask .item .counter .btnmin,
                .pblock .mask .item .counter .btnplus { display:inline-block; vertical-align:middle; width:30px; height:30px; background-color:#eee; border-radius:20px; margin:0 2px; text-align:center; background-repeat:no-repeat; background-position:center; background-size:80%; cursor:pointer; }
                    .pblock .mask .item .counter .btnmin { background-image:url(../icon/icon-minus.svg); }
                    .pblock .mask .item .counter .btnplus { background-image:url(../icon/icon-add.svg); }
                    .pblock .mask .item .counter .btnmin:hover,
                    .pblock .mask .item .counter .btnplus:hover { background-color:#ccc; }
                .pblock .mask .item .btnrow {}
                .pblock .mask .item a.btn-choose { display:inline-block; width:150px; padding:8px 0; border-radius:25px; color:white; background:#d2d2d2; cursor:pointer; text-align:center; position:relative; left:50%; transform:translateX(-50%); }
                .pblock .mask .item a.btn-choose.selected { background:#f86200; }
                .pblock .mask .item a.btn-choose.selected:after { content:url(../img/icon-checked-white.svg); display:inline-block; margin:0 -12px 0 5px; transform:translate(3px,4px); width:20px; height:20px; }
				
				.additionalblock .pblock .mask .item a.btn-choose { display:block; xxxmargin:0 auto; }
                

    .endblock { display:block; z-index:12; width:100%; max-width:800px; margin:0 auto 2em auto; text-align:center; }
    .endblock .row { justify-content:center; }
    


/* OVERLAYER */

.overlaycon { display:block; width:1000px; height:600px; max-width:97%; max-height:80%; background:#f1f2f5; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .overlaycon .btn-close { display:block; width:50px; height:50px; padding:10px; position:absolute; top:0; right:10px; opacity:.5; cursor:pointer; z-index:10; }
    .overlaycon .btn-close:hover { opacity:1; }
    .overlaycon .mask { display:block; width:100%; height:100%; z-index:6; overflow-y:scroll; padding:0; margin:0; position:relative; }
    .overlaycon .mask .toprow { display:flex; width:100%; border-bottom:1px solid #ccc; }
    .overlaycon .mask .imgobj { display:block; width:400px; padding:40px; /*position:absolute; top:0; left:0;*/ position:relative; padding:400px; padding:0; }
    .overlaycon .mask .imgobj img { display:block; width:initial; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
        .overlaycon .mask .imgobj .btn-prev, 
        .overlaycon .mask .imgobj .btn-next { display:block; opacity:.5; background-color:rgba(50,50,50,.6); background-repeat:no-repeat; background-position:center; background-size:60%; border-radius:5px; width:40px; height:40px; position:absolute; top:50%; transform:translateY(-50%); }
        .overlaycon .mask .imgobj .btn-prev:hover, 
        .overlaycon .mask .imgobj .btn-next:hover { opacity:1; }
        .overlaycon .mask .imgobj .btn-prev:after, 
        .overlaycon .mask .imgobj .btn-next:after { display:none; }
        .overlaycon .mask .imgobj .btn-prev { left:10px; background-image:url(../icon/icon-arrowprev-white.svg); }
        .overlaycon .mask .imgobj .btn-next { right:10px; background-image:url(../icon/icon-arrownext-white.svg); }
    .overlaycon .mask .con { display:block; padding:50px 60px 30px 30px; padding:2em; text-align:left; background:white; width:calc(100% - 400px); }
    .overlaycon .mask .con p { display:block; padding:0; text-align:left; margin:2px 0; }
    .overlaycon .mask .con p span { display:inline-block; margin-right:10px; }
    .overlaycon .mask .con .price { display:block; color:#f86200; font-size:1.4em; margin-top:10px; }
    .overlaycon .mask .con .price2 { display:block; }
    .overlaycon .mask .con .btnrow { display:block; text-align:right; }
    .overlaycon .mask .con .endrow { display:block; text-align:center; }
    .overlaycon .mask .con a.btn-choose { display:inline-block; margin:0; width:180px; padding:12px 50px; border-radius:25px; color:white; background:#d2d2d2; cursor:pointer; text-align:center; position:relative; }
    .overlaycon .mask .con a.btn-choose.selected { background:#f86200; }
    .overlaycon .mask .con a.btn-choose.selected:after { content:url(../img/icon-checked-white.svg); display:inline-block; margin:0 -12px 0 5px; transform:translate(3px,4px); width:20px; height:20px; }
    .overlaycon .mask .imgset img { display:block; width:auto; max-width:100%; margin:0; padding:0; }
    .overlaycon .mask .endrow { display:block; text-align:center; padding:.5em 0; }


        .overlaycon.sortcon { padding-left:0; width:800px; height:auto; background:white; }
        .overlaycon.sortcon .con { text-align:center; padding:1em; padding-bottom:30px; display:block!important; }
        .overlaycon.sortcon .con p { display:inline-block; width:33%; font-size:1.1em; margin:8px auto; xxx-width:200px; text-align:left; vertical-align:top; position:relative; }
        .overlaycon.sortcon .con p span { display:inline-block; vertical-align:top; margin-left:25px; line-height:1.1;}
        .overlaycon.sortcon .con p input { display:inline-block; margin:0; margin-right:5px; position:absolute; top:50%; left:0; transform:translateY(-50%); }
        .overlaycon.sortcon .con .endrow { display:block; padding:1.5em 0; text-align:center; }

        .overlaycon.alertmsg { padding-left:0; width:800px; height:auto; background:white; }
        .overlaycon.alertmsg .con { text-align:center; padding-bottom:30px; }
        .overlaycon.alertmsg .con p { font-size:1.1em; margin:1.5em auto .5em auto; width:80%; text-align:center; }
        .overlaycon.alertmsg .con p span { margin-left:10px; }
        .overlaycon.alertmsg .con p input { display:inline-block; margin-right:5px; }

        .overlaycon.onstockcon { padding-left:0; width:800px; height:auto; background:white; }
        .overlaycon.onstockcon .con { text-align:center; padding:1em; padding-bottom:30px; }
        .overlaycon.onstockcon .con .colset { display:flex; position:relative; }
        .overlaycon.onstockcon .con .colset .col { display:block; width:50%; border-right:1px solid #ccc; }
        .overlaycon.onstockcon .con .colset .col:last-child { border-right:0; }
        .overlaycon.onstockcon .con h4 { color:orange; font-size:1.2em; text-align:center; }
        .overlaycon.onstockcon .con .endrow { display:block; padding:1.5em 0; text-align:center; }

        .overlaycon.plandetail { padding-left:0; width:900px; height:100%; background:white; display:none; }
        .overlaycon.plandetail .con { text-align:center; padding:1em; padding-bottom:30px; }
        .overlaycon.plandetail .con .colset { display:flex; position:relative; }
        .overlaycon.plandetail .con .colset .col { display:block; width:50%; border-right:1px solid #ccc; }
        .overlaycon.plandetail .con .colset .col:last-child { border-right:0; }
        .overlaycon.plandetail .con h4 { color:orange; font-size:1.2em; text-align:center; }
        .overlaycon.plandetail .con .endrow { display:block; padding:1.5em 0; text-align:center; }
        .overlay .overlaycon.plandetail { display:block; }
        


    @media -ms-viewport, screen and (max-width:1420px) {
        .whiteblock .row .floatright { position:relative; max-width:100%; text-align:center; right:auto; transform:translateY(7em); }
    }
    @media -ms-viewport, screen and (max-width:1024px) and (min-width:415px) {

        .blackblock { padding:40px 0; }
            .blackblock h2 { padding:40px; margin:0; font-size:1.8em; }
            .blackblock .pricebar { display:block; width:100%; margin-bottom:40px; }
            .blackblock .pricebar:before { left:75px; width:calc(100% - 150px); animation:none; }
            .blackblock .pricebar >p { display:none; }
            .blackblock .pricebar a { width:19%; font-weight:normal; opacity:1; }
            .blackblock .pricebar a >p { font-size:1.05em; }
                .blackblock .pricebar a:nth-child(1),
                .blackblock .pricebar a:nth-child(2),
                .blackblock .pricebar a:nth-child(3),
                .blackblock .pricebar a:nth-child(4),
                .blackblock .pricebar a:nth-child(5) { animation:none; }
            .blackblock .pricebar.simplify a p { display:none; }
            .blackblock .pricebar.simplify a.selected p { 
                display:inline-block; width:300%; text-align:center; 
                position:absolute; left:50%; transform:translateX(-50%); }

        .planblock .sidebar { transform:translateX(20px); }
            .planblock .btn-next, 
            .planblock .btn-prev { width:40px; height:80px; padding:10px; }
            .planblock .btn-prev { left:25px; }
            .planblock .btn-next { right:25px; }    
            .planblock .btn-prev:hover { left:25px; }
            .planblock .btn-next:hover { right:25px; }
            .planblock .item p { padding:6px 0 6px 35px; }

         .numblock { padding:40px; }
            .numblock .filterrow a { font-size:1em; padding:5px 15px; }
            .numberblock { width:100%!important; text-align:center; }
            /*.numberblock .item { width:30%; }*/
            .numberblock .item h3 { width:100%; padding:5px 0; text-align:center; font-size:1em; }
            .numberblock .item p.price { display:block; width:100%; text-align:center; margin:0; padding:0; }
        
        .whiteblock { padding:40px 0; }
        .whiteblock .row { display:block; padding:0; margin:0; }
        .whiteblock h2 { padding:0 10%; margin:0; font-size:1.8em; }
        .whiteblock .pricebar { display:block; width:100%; margin-bottom:40px; }
            .whiteblock .pricebar:before { left:75px; width:calc(100% - 150px); top:50%; animation:none; }
            .whiteblock .pricebar >p { display:none; }
            .whiteblock .pricebar a { width:19%; font-weight:normal; opacity:1; }
            .whiteblock .pricebar a >p { font-size:1.05em; }
                .whiteblock .pricebar a:nth-child(1),
                .whiteblock .pricebar a:nth-child(2),
                .whiteblock .pricebar a:nth-child(3),
                .whiteblock .pricebar a:nth-child(4),
                .whiteblock .pricebar a:nth-child(5) { animation:none; }
            .whiteblock .pricebar.simplify a p { display:none; }
            .whiteblock .pricebar.simplify a.selected p { 
                display:inline-block; width:300%; text-align:center; 
                position:absolute; left:50%; transform:translateX(-50%); }
        .serviceblock { width:100%; text-align:center; }
        .serviceblock .item { width:40%; height:150px; }

        .additionalblock { overflow-x:hidden; z-index:1999; position:fixed; margin:0; width:calc(100% + 20px); height:100%; }
            .additionalblock .pblock { display:block; width:100%; height:50vh; }
            .additionalblock .btn-prev,
            .additionalblock .btn-next { width:40px; height:40px; top:36vh ;}
            .additionalblock .btn-prev { left:20px; }
            .additionalblock .btn-next { right:20px; }

            
    }
    @media -ms-viewport, screen and (max-width:414px) {

        .blackblock { padding:40px 0; }
            .blackblock h2 { padding:40px; margin:0; font-size:1.5em; padding-bottom:0; }
            .blackblock .pricebar { display:block; width:calc(100% + 10px); margin-bottom:40px; margin-left:-5px; }
            .blackblock .pricebar:before { left:35px; width:calc(100% - 70px); animation:none; }
            .blackblock .pricebar >p { display:none; }
            .blackblock .pricebar a { width:18.8%; font-weight:normal; opacity:1; }
            .blackblock .pricebar a >p { display:inline-block; width:50px; text-align:left; font-size:0.9em; top:65%; transform:translate(-15px,0); }
            .blackblock .pricebar a:after { transition:none; }
                .blackblock .pricebar a:nth-child(1),
                .blackblock .pricebar a:nth-child(2),
                .blackblock .pricebar a:nth-child(3),
                .blackblock .pricebar a:nth-child(4),
                .blackblock .pricebar a:nth-child(5) { animation:none; }
            .blackblock .pricebar.simplify a p { display:none; }
            .blackblock .pricebar.simplify a.selected p { 
                display:inline-block; width:300%; text-align:center; 
                position:absolute; left:50%; transform:translateX(-50%); }

        .planblock .sidebar { transform:translateX(30px); }
            .planblock .btn-next, 
            .planblock .btn-prev { width:40px; height:80px; padding:10px; }
            .planblock .btn-prev { left:25px; }
            .planblock .btn-next { right:25px; }    
            .planblock .btn-prev:hover { left:15px; }
            .planblock .btn-next:hover { right:15px; }
            .planblock .item p { padding:6px 0 6px 35px; }

        .whiteblock h2 { font-size:1.5em; }
            .whiteblock .row .floatright { position:relative; text-align:center; right:auto; transform:translateY(0); }
            .whiteblock .row .floatright a.btnplus { margin-left:0; }
            .whiteblock .pricebar { display:block; width:calc(100% + 10px); margin-bottom:40px; margin-left:-5px; }
            .whiteblock .pricebar.extand { xxx-margin-top:60px; }
            .whiteblock .pricebar:before { left:35px; width:calc(100% - 70px); animation:none; top:50%; }
            .whiteblock .pricebar >p { display:none; }
            .whiteblock .pricebar a { width:17.5%; font-weight:normal; opacity:1; }
            .whiteblock .pricebar a >p { display:inline-block; width:50px; text-align:left; font-size:0.9em; top:65%; transform:translate(-15px,0); }
            .whiteblock .pricebar a:after { transition:none; }
                .whiteblock .pricebar a:nth-child(1),
                .whiteblock .pricebar a:nth-child(2),
                .whiteblock .pricebar a:nth-child(3),
                .whiteblock .pricebar a:nth-child(4),
                .whiteblock .pricebar a:nth-child(5) { animation:none; }
            .whiteblock .pricebar.simplify a p { display:none; }
            .whiteblock .pricebar.simplify a.selected p { 
                display:inline-block; width:300%; text-align:center; 
                position:absolute; left:50%; transform:translateX(-50%); }
            .whiteblock .sortmessage { margin:90px 0 0 0; text-align:center; }
    
        .productblock { width:100%; text-align:center; display:block; }
            .productblock .item { width:50vw; height:95vw; border-bottom:1px solid #ccc; margin:0 -5px 0 0; }
            .productblock .item:nth-child(even) { xxxborder-left:1px solid #ccc; }
            .productblock .item .bgclip { display:none; }
            .productblock .item .con { padding:5px; }
            .productblock .item .imgobj { margin:0; }
            .productblock .item .imgobj img { width:44vw; height:44vw; margin:0 auto; }
            .productblock .item .imgobj span { display:block; word-break:keep-all; opacity:.5; }
            .productblock .item h3 { margin:0; font-size:.8em; }
            .productblock .item p.price { display:block; margin:0; padding:0; color:#f86200; font-size:1.5em; text-align:center; }
            .productblock .item p.price2 { display:block; margin:0; padding:0; color:#333; font-size:.9em; text-align:center; }
            .productblock .item p span { display:inline-block; font-size:.8em; margin-right:4px; }
            .productblock .item a { width:calc(100% - 30px); margin:0 auto; padding:12px 0; bottom:16px; }
            .productblock .item .btn-notify { bottom:10px; }
               
        .numblock { padding:40px; }
            .numblock .filterrow a { font-size:1em; padding:5px 15px; }
            .numberblock { width:100%!important; text-align:center; }
            .numberblock .item { width:46%; }
            .numberblock .item h3 { width:100%; padding:5px 0; text-align:center; font-size:1em; }
            .numberblock .item p.price { display:block; width:100%; text-align:center; margin:0; padding:0; }

        .inputblock { padding:20px; }
            .inputblock .row { padding:20px; }
        
        .whiteblock { padding:40px 0; }
        .whiteblock .row { display:block; padding:0; margin:0; }
        .serviceblock { width:100%; text-align:center; }
        .serviceblock .item { width:40%; height:150px; }

        .additionalblock { top:70px; height:calc(100% - 70px); overflow-x:hidden; }
            .additionalblock .pblock { display:block; width:100%; height:100vw; }
            .additionalblock .typeset { height:57px; overflow-x:scroll; }
            .additionalblock .typeset a { display:none; padding:1em; cursor:pointer; }
            .additionalblock .typeset a.selected { display:block; }
            .additionalblock .typeset.full { background:white; position:fixed; width:100vw; height:100vh; top:0; left:0; z-index:999; padding-top:7em; }
            .additionalblock .typeset.full a { display:block; }

            .additionalblock .btn-next,
            .additionalblock .btn-prev { width:40px; height:80px; padding:10px; }
            .additionalblock .btn-prev { left:-5px; }
            .additionalblock .btn-next { right:-5px; }    
            .additionalblock .btn-prev:hover { left:0; }
            .additionalblock .btn-next:hover { right:0; }
                .additionalblock .btn-next, 
                .additionalblock .btn-prev,
                .additionalblock .navbar { display:none; }
            .additionalblock .totalrow p { display:block; width:100%; font-size:1em; text-align:center; }
            .additionalblock .totalrow p .btn-more { display:none; }
            .additionalblock .totalrow .btn-gray,
            .additionalblock .totalrow .btn-dark { display:block; margin:4px auto; }
            .additionalblock .thumbrow { display:none; }

        .pblock .mask .item { width:50vw!important; margin:0 -4px 0 0; padding:0 .5em; }
        .pblock .mask .item .imgobj { display:block; width:100%; vertical-align:top; margin-top:20px; }
        .pblock .mask .item h3 { font-size:1em; padding:0 20px; }
        .pblock .mask .item a.btn-choose { width:100%; }

        .overlaycon { width:calc(100% - 20px)!important; height:calc(100% - 20px); max-height:100%; overflow-y:auto; }
        .overlaycon .mask .toprow { display:block; }
        .overlaycon .mask .imgobj { display:block; width:100%; height:300px; position:relative; margin:0 auto; padding:0; }
        .overlaycon .mask .imgobj img { height:300px; width:auto; position:absolute; top:0; left:50%; transform:translateX(-50%); }
        .overlaycon .mask .con { display:block; padding:20px; margin-left:0; width:100%; }
        .overlaycon .mask .con p { display:block; padding:0; text-align:left; margin:2px 0; }
        .overlaycon .mask .con p span { display:inline-block; margin-right:10px; }
        .overlaycon .mask .con .price { display:block; color:#f86200; font-size:1.4em; margin-top:10px; }
        .overlaycon .mask .con .price2 { display:block; }
        
        .overlaycon.onstockcon .con .colset { display:block; }
        .overlaycon.onstockcon .con .colset .col { width:100%; border-right:0; }

            .overlaycon.sortcon .con p { margin:8px 0; padding:0 10%; width:100%; text-align:left; }
            .overlaycon.sortcon .con p input { width:40px; }

    }









/* new add 0319 */

body { line-height:1.4em; }
.noscroll { overflow-y:hidden; }
.blackblock .pricebar a >p,
.whiteblock .pricebar a >p { top:-50%; }
.twm-page-estore.twm-page-estore-select-detail { display:block; height:100%; overflow-y:scroll; margin:0; padding:1em; }
.twm-page-estore li { text-align:left; }
.fancybox-close-small { position:absolute; top:0; right:0; border:0; padding:.8em; background:transparent; opacity:.5; }
.fancybox-close-small:before { content:url(../icon/icon-close.svg); display:block; width:2em; }
.fancybox-close-small:hover { opacity:1; }
.twm-collapse-toggle-note-bottom {}
.twm-collapse-toggle-note-bottom:after { content:url(../icon/icon-arrownext.svg); font-size:14px; width:1.8em; height:1.8em; padding:.3em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(90deg); }
.twm-collapse-note.show+.twm-collapse-toggle-note-bottom:after { transform:translate(-50%,-50%) rotate(-90deg); }
.serviceblock .item img { width:auto; }
.btn,
.btn:hover { color:white!important; }
.floatmenu h3 { margin-bottom:.5em; }
.floatmenu p { margin-bottom:.5em; }

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
	.blackblock img.bg { height:auto; width:100%!important; }
}
@media -ms-viewport, screen and (max-width:1024px) and (min-width:415px) {
    .blackblock img.bg { height:100%; width:auto; }
    .productblock { width:100%; margin:0; padding:0 2em; text-align:center; }
    .productblock .item { width:31vw; margin:0; }
}
@media -ms-viewport, screen and (max-width:414px) {
    .blackblock img.bg { height:100%; width:auto; }
    .blackblock .pricebar { width:calc(100% - 2em); margin-left:auto; }
    .blackblock .pricebar a >p, .whiteblock .pricebar a >p { top:95%; line-height:120%; }
    .overlaycon.plandetail { height:calc(100% - 20px); }
    .productblock .item h3 { font-size:1em; padding:.8em; }
    .productblock .item .price { font-size:1.1em; padding:.8em; }
    .twm-page-estore.twm-page-estore-select-detail { padding:.5em; }
    .floatmenu.show { top:calc(100% - 5px); right:5px; }
    .floatmenu h3 { padding:12px; }
    .endblock { margin:0 0 2em 0; width:100%; }
    .endblock .row { margin:0; padding:1em; text-align:center; }
    .endblock .row .btn { width:100%; }
}








/*
     _              ____
  __| |_ ___ _ __  |__ /
 (_-<  _/ -_) '_ \  |_ \
 /__/\__\___| .__/ |___/
            |_|         
*/

.formblock { background:#f1f2f5; text-align:center; display:block; padding:2em; margin:0; width:100%; }
.endblock .row { text-align:center; display:block; padding:1em; }
.inputset { display:block; width:100%; max-width:600px; margin:0 auto; text-align:left; font-size:.9em; line-height:150%; padding:1.5em 0; /*background:white; border-radius:0; padding:5vw; box-shadow:0 1px 5px rgba(0,0,0,.2);*/ max-width:800px; position:relative; }
    .inputset h4 { font-size:2em; margin:.5em 0 1em 0; font-weight:200; padding-bottom:.2em; border-bottom:2px solid #333; }
    .inputset .sectitle { font-weight:normal; font-size:1.3em; margin:.5em 0; }
        .inputset .sectitle:before { content:url(../icon/icon-checked-green.svg); display:inline-block; width:1.5em; height:auto; margin-right:.2em; transform:translateY(.3em); }
    .inputset>p.error { display:block; display:none; width:auto; background:#ff373e; color:white; padding:.1em .8em; border-radius:.8em; font-size:1.2em; }
        .inputset>p.error img { display:inline-block; width:1.3em; height:1.3em; transform:translateY(.1em) rotate(-90deg); margin-right:.5em; }
        .inputset>p.error.show { display:block; }

.inputobj { padding:.5em 0; position:relative; }
    .inputobj .inputobj { padding:0; }
    .inputobj.must span:after { content:'*'; display:inline-block; font-size:1em; color:red; }
    .inputobj.must span.note:after { display:none; }
    .inputobj span { display:block; margin:.3em 0 0 0; font-weight:bold; }
    .inputobj>span:first-child { width:100%; }
    .inputobj span .note { display:inline-block; padding:0; margin:0; margin-left:.5em; opacity:.5; font-size:.8; }
    .inputobj input[type="text"], .inputobj input[type="number"], .inputobj input[type="date"], .inputobj input[type="tel"], .inputobj input[type="email"] { display:block; width:100%; vertical-align:middle; margin:.3em 0; background:white; position:relative; z-index:4; height:50px; font-size:1.1em; padding:.5em; border-radius:0; }
    .inputobj img { display:inline-block; height:50px; width:auto; border:1px solid #ccc; vertical-align:middle; }
    .inputobj p { margin:0; }
    .inputobj p span { display:inline-block; margin:0; }
    .inputobj p span.larger { font-size:2em; margin-right:.4em; vertical-align:middle; transform:translateY(-.1em); }
    .inputobj p span.red { color:#ff373e; }
    .inputobj p.larger { font-size:1.3em; margin-right:.4em; }
    .inputobj p.red { color:#ff373e; }
    .inputobj p.errormsg { display:none; }
    .inputobj p.note { display:block; color:#999; }
    .inputobj a { font-size:1em; color:#17a0ff; cursor:pointer; }
    .inputobj a:hover { text-decoration:underline; }
    .inputobj .btn-refresh { display:inline-block; width:40px; height:40px; background-image:url(../icon/icon-refresh.svg); background-size:80%; background-repeat:no-repeat; background-position:center; vertical-align:middle; cursor:pointer; }
    
    .inputobj span.inline { display:block; width:100%; margin:0; padding:0; }
    .inputobj span.inline .ui-radio { display:inline-block; width:auto; margin-right:1em; }
    .inputobj span.inline label { display:inline-block; width:auto; margin-right:1em; }
    .inputobj span.inline input[type="radio"] { display:inline-block; width:auto; height:auto; margin-right:.5em; }

    .inputobj .inline-btnset { display:flex; width:100%; }
    .inputobj .inline-btnset.btn2 a { width:calc(50% - .65em); }
    .inputobj .inline-btnset.btn3 a { width:calc(33.33% - .7em); }
    .inputobj .inline-btnset.btn4 a { width:calc(25% - .7em); }
    .inputobj .inline-btnset a { display:block; margin:0; margin-right:1em; font-size:1.1em; padding:2em 0; border-radius:0; }
    .inputobj .inline-btnset a:last-child { margin-right:0; }
    .inputobj .inline-btnset a.btn-green { background:#4caf50; }
    .inputobj .inline-btnset a.btn-blue { background:#2196f3; }
    .inputobj .inline-btnset a.btn-darkblue { background:#3f51b5; }
    .inputobj .inline-btnset a.btn-block { background:white; text-align:center; color:#333; font-size:1.1em; }
    .inputobj .inline-btnset a.btn-block img { display:block; margin:0 auto .5em auto; width:120px; border:0; opacity:.8; }
    .inputobj .inline-btnset a.btn-block p { text-align:center; color:#333; font-size:1.1em; }
    .inputobj .inline-btnset a.btn-block span { display:block; font-size:.8; }

    .inputobj .inline-btnset a:after { content:url(../icon/icon-check-white.svg); display:block; width:2em; height:2em; padding:.5em; background:#8BC349; border-radius:50px; position:absolute; top:100%; left:50%; transform:translate(-50%,-50%); display:none; }
    .inputobj .inline-btnset a.selected { box-shadow:0 1px 3px rgba(0,0,0,.2);  }
    .inputobj .inline-btnset a.selected:after { display:block; animation:_jumpout .5s forwards; }
    .inputobj .inline-btnset a.blur { background:#aaa; color:#ccc; }
    .inputobj .inline-btnset a.blur img,
    .inputobj .inline-btnset a.blur p,
    .inputobj .inline-btnset a.blur span, { color:#ccc!important; }
    .inputobj .inline-btnset a.btn-block.blur { opacity:.5; }


    @keyframes _jumpout {
        0% {transform:translate(-50%,-50%)scale(0);}
        70% {transform:translate(-50%,-50%)scale(1.1);}
        100% {transform:translate(-50%,-50%)scale(1);}
    }

    
    .inputobj .ui-input-text,
    .inputobj .ui-select { margin:.3em 0; position:relative; }
    .inputobj .ui-input-text input { margin:0; }
    .inputobj .ui-select div span { display:none; }
    .inputobj .ui-select div select { width:100%; }
    .inputobj .ui-select:after { content:url(../icon/icon-arrownext.svg); width:1.1em; position:absolute; top:50%; left:calc(100% - 1.5em); transform:translate(-50%,-50%) rotate(90deg); }

    .inputobj.vcode input { display:inline-block; width:45%; min-width:auto; height:50px; }
    .inputobj.birthday .inline { display:flex; }
    .inputobj.birthday .ui-select { display:block; width:calc(33.33% - .65em); margin-right:1em; }
    .inputobj.birthday .ui-select:last-of-type { margin-right:0; }
    .inputobj.birthday select { width:100%; min-width:auto; }
        .inputobj.birthday select:last-child { margin-right:0; }

    .inputobj.radioset { position:relative; /*padding-left:2.1em; margin-left:2.1em;*/ }
        .inputobj.radioset input[type="radio"] { display:inline-block; width:auto; position:absolute; top:1.5em; left:0; }
    
    .inputobj.addressset .inline { display:inline-flex; display:block; width:100%; }
    .inputobj.addressset .ui-select,
    .inputobj.addressset select { display:inline-block; width:calc(33.33% - .65em); min-width:auto; height:50px; margin-right:.5em; }
    .inputobj.addressset input.zipcode { display:inline-block; xxxwidth:33.33%; min-width:auto; height:50px; margin-right:0; margin-top:0; }
    .inputobj.addressset input[type="text"], .inputobj.addressset input[type="number"], .inputobj.addressset input[type="date"] { display:block; }
    .inputobj.addressset .ui-select .ui-btn { width:100%; }
    .inputobj.addressset .inline .ui-select,
    .inputobj.addressset .inline .ui-input-text { display:inline-block; width:calc(33.33% - .65em); margin-right:.7em; }
    .inputobj.addressset .inline .ui-input-text:last-child { margin-right:0; }
    .inputobj.addressset .ui-select .ui-btn {}

    .inputobj.checkbox input[type="text"], .inputobj.addressset input[type="number"], .inputobj.addressset input[type="date"] { display:inline-block; width:auto; height:50px; }
    .inputobj.checkbox input[type="radio"], .inputobj.addressset input[type="checkbox"] { display:inline-block; width:auto; height:auto; }
    .inputobj.checkbox.slim * { line-height:2em; }
    .inputobj.checkbox.slim input { height:auto; }
    .inputobj.checkbox .ui-checkbox { display:inline; width:auto; }


    .inputobj.phoneset { display:block; }
    .inputobj.phoneset input { display:inline-block; min-width:5%; width:auto; height:50px; }
    .inputobj.phoneset input:nth-of-type(1) { width:18%; margin-right:1em; }
    .inputobj.phoneset input:nth-of-type(2) { width:44%; margin:0 1em; }
    .inputobj.phoneset input:nth-of-type(3) { width:18%; margin-left:1em; }
    .inputobj.phoneset .ui-input-text { display:inline-block; }
    .inputobj.phoneset .ui-input-text:nth-of-type(1) { width:18%; margin-right:1em; }
    .inputobj.phoneset .ui-input-text:nth-of-type(2) { width:51%; margin:0 1em; }
    .inputobj.phoneset .ui-input-text:nth-of-type(3) { width:18%; margin-left:1em; }
    .inputobj.phoneset .ui-input-text input { width:100%; }

    .inputobj.uploadset {}
    .inputobj.uploadset .uploadframe { display:block; width:100%; margin:.3em 0; padding:2em; border:1px dashed #ccc; border-radius:5px; }

    .inputobj.otpcode input { display:inline-block; width:calc(33.33% - .55em); min-width:auto; height:50px; margin-right:.5em; }
    .inputobj.otpcode .btn-sendotp,
    .inputobj.otpcode .btn-refresh { display:inline-block; width:calc(33.33% - .55em); padding-top:.9em; min-width:auto; height:50px; margin-top:0; background:#ccc; border:1px solid #ccc; text-align:center; padding:.6em 0; vertical-align:middle; border-radius:3px; color:#333; }
        .inputobj.otpcode .btn-sendotp { background:#ff9400; border:0; color:white; margin-right:.5em; text-decoration:none; }
        .inputobj.otpcode .btn-sendotp.disabled { background:#e2e2e2; color:#c7c7c7; cursor:default; }
        .inputobj.otpcode .btn-refresh { margin-right:0; }
        .inputobj.otpcode .backcounter { display:inline-block; width:calc(33.33% - .55em); min-width:auto; height:50px; margin-top:0; padding:.6em 0; vertical-align:middle; display:none; }
        .inputobj.otpcode .backcounter.show { display:inline-block; }
    .inputobj.red { color:#ff373e; }
    .inputobj.floatright { position:absolute; top:.8em; right:0; }
    .inputobj.inlineblock { display:inline-block; }
    .inputobj.inrow span { display:inline-block; width:30%; }
    .inputobj.inrow input { display:inline-block; width:69%; }
    .inputobj.error input { border:1px solid #ff373e; }
    .inputobj.error input.notmust { border:1px solid #ccc; }
    .inputobj.error .error { display:block; width:1.8em; height:1.8em; background:#ff373e; border-radius:8em; z-index:66; position:absolute; right:0; top:4.65em; transform:translate(-50%,-50%); -ms-transform:translateX(-50%,-36px); /* IE/Edge */ background-image:url(../icon/icon-error-arrow.svg); background-position:center; background-repeat:no-repeat; background-size:60%; }
    .inputobj.error.inrow .error { top:2.1em; }
    .inputobj.error.withradio .error { top:6.9em; }
    .inputobj.error.phoneset .error { right:27.5%; }
    .inputobj.error.otpcode .error { right:auto; left:28%; }
    .inputobj.error.uploadset .error { top:6em; }
    .inputobj.error.uploadset input { border:0; }
    .inputobj.error.uploadset .uploadframe { border-color:red; }
    .inputobj.error p.errormsg { color:#ff373e; display:block; }

    .inputobj.must span:after { content:'*'; color:#ff373e; display:inline-block; margin-left:2px; transform:scale(1.4) translateY(1px); }
    .inputobj.must span.inline:after { display:none; }
        .inputobj.icon-phone input,
        .inputobj.icon-person input { display:block; padding-left:3.5em; position:relative; /*z-index:4;*/ }
            .inputobj.icon-phone:before { content:url(../icon/icon-phone.svg); display:block; width:1.5em; height:1.5em; position:absolute; top:50px; left:.7em; z-index:6; }
            .inputobj.icon-person:before { content:url(../icon/icon-user.svg); display:block; width:1.5em; height:1.5em; position:absolute; top:50px; left:.7em; z-index:6; }
    
.shipgroup:before, .paygroup:before, .filegroup:before { content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:1px; border-top:1px solid #ccc; }


.btnset { text-align:center; }
    .btnset .btn { display:inline-block; width:100%; border-radius:4px; transition:all .3s; cursor:pointer; padding:1em; text-align:center; margin:1.5em 0 ; }
    .btnset.btns-2 .btn { width:45%; margin:1.5em .5em; } 

    
    @media -ms-viewport, screen and (max-width:1200px) and (min-width:961px) {
        .stepbar a { padding:.2em 1em; }
    }
    @media -ms-viewport, screen and (max-width:960px) and (min-width:641px) {
        .stepbar a { padding:.2em 1em; }
    }
    @media -ms-viewport, screen and (max-width:640px) {
        .triangleset { width:90%!important; }
        
        .floatblock.overlaptop { margin-top:-5em; }
        .floatblock .con { padding:1.5em; padding-top:3em; }
            .floatblock .con h2 { font-size:1.8em; }
            .floatblock .blockrow .item { width:46.5%; min-height:7em; }
            .floatblock .blockrow .item:first-child { width:100%; }
            .floatblock:after { bottom:-10%; opacity:.2; }
            .floatblock .conblack { padding:2em 1em 1em 1em; }

        .stepbar { zoom:.75; padding:2em 0; }
            .stepbar a { margin:0 .05em; }
                .stepbar a:before,
                .stepbar a:after { display:none; }

        .inputobj span .note { font-size:.85em; }
        .inputobj.vcode input { width:100%; }
        .inputobj.radioset input[type="radio"] { top:.5em; }
        .inputobj.inrow span { display:inline-block; width:100%; }
        .inputobj.inrow input { display:inline-block; width:100%; min-width:auto; }
        .inputobj.phoneset input {}
        .inputobj.phoneset input:nth-of-type(1) { width:15%; margin-right:.5em; }
        .inputobj.phoneset input:nth-of-type(2) { width:44%; margin:0 .5em; }
        .inputobj.phoneset input:nth-of-type(3) { width:15%; margin-left:.5em; }
        .btnset { width:100%; }
        .btnset.btns-2 { padding:0; } 
        .btnset.btns-2 .btn { width:100%; margin:1.5em 0; } 
        .inputobj.error.otpcode .error { right:0; left:auto; }
        
        .inputobj .inline-btnset { flex-wrap:wrap; }
        .inputobj .inline-btnset.btn2 a { width:calc(100% - 0em); margin-right:0; margin-bottom:1em; }
        .inputobj .inline-btnset.btn3 a { width:calc(100% - 0em); margin-right:0; margin-bottom:1em; }
        .inputobj .inline-btnset.btn4 a { width:calc(50% - .65em); margin-bottom:.5em; }
        .inputobj .inline-btnset.btn4 a:nth-of-type(2),
        .inputobj .inline-btnset.btn4 a:nth-of-type(4) { margin-right:0; }

        .endblock .btn { display:block; width:calc(100% - 2em)!important; margin:1em; }
    }

    @media -ms-viewport, screen and (max-width:414px) {
        .triangleset { top:40vw; width:50%; }
        .blackblock .row .floatright { position:relative; right:0; top:0; text-align:center; }
        .overlaycon.sortcon .con p span { margin-left:0px!important; }
    }

    @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
        .inputobj.error.withradio .error { top:6em; }
        .inputobj.error .error { top:4.35em; -ms-transform:translateX(-50%,-36px); /* IE/Edge */ }
    }
    
select {
    -webkit-appearance: none; /* Webkit */
    -moz-appearance: none; /* FF */
    -ms-appearance: none; /* Edge */
    appearance: none; /* Future */

    /* Optional styles */
    padding: 0.3em 1.5em 0.3em 0.6em;
    border: 1px solid currentColor;
    background: white; border-radius: 3px; font-size: inherit; background-repeat: no-repeat; background-position:right 8px center; background-size:12px 12px; background-image:url("../icon/icon-arrowdown.svg");

}

/* IE11 */
select::-ms-expand { display:none; }


