/*pc*/

/* --------------------------------------------------------- main -------------------------------------------------------------*/
#Main .main-wrap{margin-top:100px;position:relative}
#Main .main-wrap .main-banner-wrap{position:relative}
#Main .main-wrap .swiper-slide{display:flex;display:-webkit-flex;min-height: 500px;width:100%;flex-direction:column;-webkit-flex-direction:column;justify-content: center;-webkit-justify-content:center;
                              align-items: center;-webkit-align-items:center;}
#Main .main-wrap .swiper-slide:first-child , #Main .main-wrap .swiper-slide:last-child{background:url(../img/banner-img-fir.jpg)no-repeat;background-size:cover;}
#Main .main-wrap .swiper-slide:nth-child(2){background:url(../img/banner-img-sec.jpg)no-repeat;background-size:cover;}
#Main .main-wrap .swiper-button-next{right:20%}
#Main .main-wrap .swiper-button-prev{left:20%;}
#Main .main-wrap [class*="swiper-button"] {color:#fff;transform: scale(0.8);}
#Main .main-wrap .swiper-slide .banner-btn{display:inline-block;min-width:200px;padding:15px 0;background:#fff;border-radius: 100px;text-align: center;margin-top:35px;font-size:14px !important;
                                            font-size:0.875rem !important;font-weight: bold;transition: 0.5s;}
#Main .main-wrap .swiper-slide .banner-btn:hover{background:#005EC9;color:#fff;transition: 0.5s;}
#Main .main-wrap .swiper-slide p{color:#fff;font-size:1.25rem !important;font-size:20px !important;text-align: center;line-height: 35px;}

#Main .main-order-wrap{display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items:center;margin:100px auto;}
#Main .main-order-wrap li{margin-right:30px;width:20%;min-height: 170px;border-radius: 20px;color:#fff;min-width: 250px;}
#Main .main-order-wrap li , #Main .main-order-wrap li .main-order-inner{display: flex;display:-webkit-flex;flex-direction: column;-webkit-flex-direction:column;align-items: center;-webkit-align-items:center;
                                                                        justify-content: center;-webkit-justify-content:center;transition: 0.5s;}
#Main .main-order-wrap li:first-child{background:url(../img/order-bg1.jpg)no-repeat;background-size:cover;background-position: center;}
#Main .main-order-wrap li:nth-child(2){background:url(../img/order-bg2.jpg)no-repeat;background-size:cover;background-position:center}
#Main .main-order-wrap li:last-child{margin-right:0;background:url(../img/order-bg3.jpg)no-repeat;background-size:cover;background-position: center;}
#Main .main-order-wrap li .main-order-inner{width:130px;height:130px;background:#00000070;border-radius: 500px;transition: 0.5s;}
#Main .main-order-wrap li .main-order-inner > img{width:20px;margin:10px 0;}
#Main .main-order-wrap li .main-order-inner span{display:inline-block;width:25px;height:25px;border:1px solid #fff;border-radius: 500px;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content: center;
                                              align-items: center;-webkit-align-items:center;margin-top:10px;transition: 0.5s;}
#Main .main-order-wrap li .main-order-inner span::after{content:'';display:inline-block;width:13px;height:13px;background:url(../img/main-arrow.png)no-repeat;background-size:cover;background-position: center;}
#Main .main-order-wrap li .main-order-inner:hover{transition: 0.5s;flex-direction:row;-webkit-flex-direction:row;width:180px;height:50px;justify-content: space-around;-webkit-justify-content: space-around;padding:0 10px}
#Main .main-order-wrap li .main-order-inner:hover > img , #Main .main-order-wrap li .main-order-inner:hover > .arrow-wrap{margin:0;transition: 0.5s;}

#Main .main-sub-banner{width:100%;background:url(../img/sub-banner.jpg)fixed center;background-size: contain;height: 350px;overflow: hidden;display:flex;display:-webkit-flex;padding:30px 0;margin-bottom:80px;
                      justify-content: center;-webkit-justify-content:center;align-items: center;-webkit-align-items:center;flex-direction:column;-webkit-flex-direction:column;text-align: center;}
#Main .main-sub-banner .myotec-url{min-width:250px;background:#005EC9;color:#fff;border-radius: 50px;margin-top:30px;padding:15px 0;}    
#Main .main-sub-banner p{line-height: 30px;}        
#Main .main-sub-banner p strong{font-size:1.25rem;font-size:20px;margin-top:10px} 

/* ------------------------------------------------------ main done -----------------------------------------------------------*/

/* --------------------------------------------------------- login -------------------------------------------------------------*/

/* ---------------------------------- login공통 ----------------------------------*/
.login-inner{width:100%;padding:180px 0 130px;display:flex;justify-content:center;-webkit-justify-content:center;align-items: center;-webkit-align-items:center;background: url(../img/login-bg.jpg)no-repeat;background-size:cover}
.login-header{margin-bottom:30px;display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;align-items: center;-webkit-align-items:center;}
.login-header img{width:120px;margin-bottom:10px}
.login-form-wrap{padding:30px;background:#fff;border-radius: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);min-width:500px;}
.login-form-wrap .form-group{margin-bottom:30px;}
.login-form-wrap .form-group .error-message{margin-top:10px}
.login-form-wrap .form-group input{width:100%;border-radius: 5px;padding:10px;}
.login-form-wrap .form-group > span{margin-bottom:10px;text-align: left;display:inline-block;}
.login-form-wrap #loginBtn{margin-bottom:10px;background:#005EC9;color:#fff;padding:20px;width:100%;border-radius: 10px;}
.login-form-wrap .options{font-size: 14px !important;font-size:0.875rem !important;display:flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;align-items: center;-webkit-align-items:center;}
.login-form-wrap .options a{font-size: 14px !important;font-size:0.875rem !important;}
.login-form-wrap .options a::after{content:'|';font-size: 10px !important;font-size:0.625rem !important;color:#9A9A9A;padding:0 5px}
.login-form-wrap .options a:last-child::after{display: none;}
.login-form-wrap .options label{display:flex;display:-webkit-flex;}
.login-form-wrap .options label input{margin-right:5px;}
/* ---------------------------------- login공통 done -----------------------------*/

/* ---------------------------------- memberreg ----------------------------------*/
.memberreg-wrap .agreement-section{margin-bottom:30px;}
.memberreg-wrap .agreement-section .d-flex{margin-bottom:10px;}
.memberreg-wrap .login-form-wrap > button{width:100%;background:#005EC9;}
#memberregSec .login-form-wrap{min-width:700px;}
#memberregSec form > div{align-items: center;-webkit-align-items:center;}
#memberregSec form > div label{min-width:20%}
#memberregThr .login-form-wrap{text-align:center;}
#memberregThr .login-form-wrap a{display:inline-block;width:100%;padding:15px 0;background:#005EC9;color:#fff;border-radius:10px;}
#memberregThr .login-form-wrap p{line-height:20px;;}
#memberregThr .login-form-wrap h4{margin:20px 0;}

/* ---------------------------------- search ---------------------------------------*/
#idSearch .login-button , #PasswordSearch .login-button , .login-result-wrap a{width:100%;padding:15px 0;background:#005EC9;color:#fff;border-radius:10px;}
.login-result-wrap{text-align: center;}
.login-result-wrap a{display:inline-block;margin-top:20px}
/* ---------------------------------- search done ----------------------------------*/


/* ------------------------------------------------------ login done -----------------------------------------------------------*/


/* --------------------------------------------------------- order -------------------------------------------------------------*/

/* ---------------------------------- order공통 ----------------------------------*/
.order-bg{background: url(../img/order-form-bg.jpg) no-repeat center;background-size:cover;background-position:bottom}
.order-container footer{padding-bottom:200px;}
.order-btn-head{width:70%;margin:0 auto; display:felx;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;align-items:center;-webkit-align-items:center;
                margin-bottom:80px;border-bottom:0;}
.order-btn-head li{width:17%;font-weight: bold;margin:20px 20px 0 0}
.order-btn-head li a{width:100%;text-align:center;height: 50px;background:#ebebeb;color:#333;display:felx;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;align-items:center;-webkit-align-items:center;
                    border-radius: 5px;}
.order-btn-head.nav-tabs .nav-link.active{background-color:#005EC9 !important;color:#fff;}
.order-btn-head li a:hover , .order-container .btn-group .inner button:hover{border:1px solid #005EC9 !important;color:#005EC9 !important;transition: 0.5s;background:#fff !important;}
.order-btn-head li a , .order-container .btn-group .inner button{transition: 0.5s;}
.order-container .btn-group .inner button:nth-child(even):hover{background:#ebebeb;border:1px solid #005EC9 !important;color:#005EC9 !important;transition: 0.5s;background:#fff}
.order-btn-head.nav-tabs .nav-link.active:hover{border:none;background:#005EC9 !important;color:#fff !important;}
.quickorder-wrap{position:relative;}
.quickorder-btn-wrap{position:fixed;bottom:50px;right:50px;display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;align-items:center;-webkit-align-items:center;}
.quickorder-btn-wrap .trigger-wrap{width:110px;height:110px;background:#005EC9;color:#fff;border-radius: 500px;display:flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;
                                  flex-direction:column;-webkit-flex-direction:column;justify-content: center;-webkit-justify-content:center;}
.quickorder-btn-wrap .trigger-wrap p , .order-list-wrap li a{text-align: center;margin-top:10px;font-size:13px !important;font-size:0.813rem !important;}
.quickorder-btn-wrap .quick-menu-trigger, .quickorder-btn-wrap .quick-menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
.quickorder-btn-wrap .quick-menu-trigger {position: relative;width: 30px;height: 30px;}  
.quickorder-btn-wrap .quick-menu-trigger span {position: absolute;left: 0;width: 100%;height: 3px;background-color: #fff;border-radius: 4px;}
.quickorder-btn-wrap .quick-menu-trigger span:nth-of-type(1) {top: 0;}
.quickorder-btn-wrap .quick-menu-trigger span:nth-of-type(2) {top: 13px;} 
.quickorder-btn-wrap .quick-menu-trigger span:nth-of-type(3) {bottom: 0;}
.quickorder-btn-wrap .quick-menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY (15px) rotate (-45deg);transform: translateY(15px) rotate(-45deg);}
.quickorder-btn-wrap .quick-menu-trigger.active span:nth-of-type(2) {opacity: 0;} 
.quickorder-btn-wrap .quick-menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-12px) rotate(45deg);transform: translateY(-11px) rotate(45deg);}

.order-list-wrap.active{position:absolute;display:flex;display:-webkit-flex;flex-direction:column;align-items:center;-webkit-align-items:center;width:110px;text-align: center;background:#F6F6F6;
                      height:auto;border-radius:10px;bottom:40px;z-index: -1;padding:10px 10px 80px;border:1px solid #CBCBCB}
.order-list-wrap.active li{padding:10px 5px;border-top:1px solid #cbcbcb;width:100%}
.order-list-wrap.active li:first-child{border-top:0;}
.order-list-wrap.active li:hover{color:#005EC9;}
.order-list-wrap{display: none;}


.order-info-table{margin-bottom:50px;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content:center;align-items: center;-webkit-align-items:center;padding:0;text-align: center;position:relative;}
.order-info-table table:nth-child(1){margin-right:50px}
.order-info-table table:nth-child(1){margin-right:50px}
.order-info-table table th{background:#f6f6f6;padding:20px 0;}
.order-info-table table tr td:nth-child(1){width:30%;background:#f6f6f6}
.order-info-table table tr td:nth-child(2){width:70%; text-align:left;}
.order-info-table table tr td{padding:20px 5px;position:relative;border-right:0;}
.order-info-table td .table-bordered{background:#f6f6f6;}
.point-th{border-bottom:3px solid #005EC9;}
.order-container .info-box{padding:40px;box-shadow: 10px 0px 20px 3px rgba(0, 0, 0, 0.08);border-radius: 15px;margin:50px auto;border:1px solid #F1F1F1;line-height: 40px;background:#fff;}
.order-container .btn-group{width:100%;display:inline-block;margin-bottom:75px;}
.order-container .btn-group .inner{width:100%;display:flex;display:-webkit-flex;justify-content: center;}
.order-container .btn-group .inner button{margin-right:10px;min-width:250px;height: 50px;border:none;border-radius:5px}
.order-container .btn-group .inner button:nth-child(3){margin-right:0;}
.order-container .btn-group .inner button:nth-child(odd){background:#ebebeb;color:#333}
.order-container .btn-group .inner button:nth-child(even){background:#005EC9}
.order-info-table .checkbox-group{position:absolute;top:-30px;right:0px;}

/* ---------------------------------- order공통 done -----------------------------*/


/* ---------------------------------- orderForm ----------------------------------*/
/*order sheet 공통*/
.order-sheet fieldset{box-shadow: 10px 0px 20px 3px rgba(0, 0, 0, 0.08);border:1px solid #F1F1F1;border-radius: 20px;background:#fff;}
.order-sheet fieldset .section-header{background:#005EC9;padding:15px 30px;border-top-left-radius: 10px;border-top-right-radius: 10px;color:#fff;display:flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content:space-between;}
.order-sheet fieldset .section-header .order-sheet-num{display:flex;}
.order-sheet fieldset .section-header .order-sheet-num::before{content:'';display:inline-block;width:2px;height:100%;margin-right:5px;background:#fff;}
.order-sheet fieldset form{padding:0 30px;}
.order-sheet fieldset form .form-group{margin-top:25px;}
.order-sheet fieldset form .form-group:last-child{margin-bottom:30px;}
.order-sheet fieldset form .form-group .col-form-label{width:20%;}
.order-sheet fieldset form .form-group .col-form-label + div{width:80%}

.order-sheet fieldset form .form-group .radio-group{display:flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;}
.order-sheet fieldset form .form-group .radio-group div{margin-right:20px;}
.order-sheet fieldset form .form-group select{min-width: 150px;padding: 5px 10px;border-radius: 5px;border:1px solid #CBCBCB;}
.order-sheet fieldset form input, .order-sheet fieldset select, .order-sheet fieldset textarea{min-height: 50px;}
.order-sheet fieldset select{margin-right:10px;}
.order-sheet fieldset select:last-child{margin-right:0;}
.order-sheet fieldset form input[type="radio"] , .order-sheet fieldset form input[type="checkbox"]{min-height: auto;}
.order-sheet fieldset form .form-group .radio-group select{min-height: 30px; min-width: 100px;margin-top:10px;border-radius:5px;width: 100%}
.order-sheet + .addbtn button{padding:15px 20px;color:#fff;background:#005EC9;border-radius: 100px;max-width:400px;margin:40px auto;min-width:200px;}
.order-sheet + .addbtn button span{display:flex;display:-webkit-flex;justify-content: center;align-items:center;-webkit-justify-content:center;-webkit-align-items:center;}
.order-sheet + .addbtn button span::before{content:'';display:inline-block;width:15px;height:15px;background:url(../img/plus-ico.png)no-repeat;background-size:cover;margin-right:5px}
.order-sheet .remove-order{cursor: pointer;display: flex;display:-webkit-flex;align-items: center;-webkit-aling-items:center;}
.order-sheet .remove-order::after{content:'';display:inline-block;width:15px;height:15px;background:url(../img/trash-ico.png)no-repeat;background-size:contain;margin-left:5px;}
.order-fixed-btn{display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content:center;align-items:center;-webkit-align-items:center;
                position:fixed;left:50%;bottom:0;transform:translate(-50% ,0);background:#fff;width:100%;padding:30px;box-shadow: 10px 0px 20px 3px rgba(0, 0, 0, 0.08);height: 120px;z-index: 9;}
.order-fixed-btn button{width:30%;padding:20px 0;margin-right:20px;font-size:18px !important;font-size:1.125rem !important;border:none;background:#005EC9;border-radius: 5px;transition: 0.5s ;}
.order-fixed-btn button:last-child{margin-right:0px;background:#ebebeb;color:#333;width:10%;font-size:1.063rem !important;font-size:17px !important;}
.order-fixed-btn button:first-child:hover{color:#005EC9;background:#fff;transition: 0.5s ;border:1px solid #005EC9;font-weight: bold;}
.order-sheet .error-message{margin-top:5px;}
.radio-group-ef > div{margin-bottom: 10px;}


/* ---------------------------------- orderForm done -----------------------------*/

/* ------------------------------- searchAddressPopup -----------------------------*/
.search-address {margin-bottom:30px;text-align: center;}
.search-address .form-control{margin:50px auto 30px; width:70%;}
.search-address .form-control::placeholder{text-align: center;}
.search-address .table-wrap{max-height: 500px;overflow-y: scroll;position:relative;}
.search-address table{table-layout: fixed;font-size:15px;font-size:0.938rem;}
.search-address thead{position:sticky;top:0;z-index: 1;}
.search-address th:last-child{border-right:0;}
.search-address tbody tr:nth-child(even){background:#f6f6f6}
.search-address td:last-child{border-right:0;}
.search-address td , .search-address th {width:10%;overflow-wrap: break-word;max-width:10%;}
.search-address td:nth-child(1) , .search-address th:nth-child(1){width:4%;max-width:4%;}
.search-address td:nth-child(2) , .search-address th:nth-child(2){width:7%;max-width:7%;}
.search-address td:nth-child(6) , .search-address th:nth-child(6){width:12%;max-width:12%;}
.search-address td:nth-child(7) , .search-address th:nth-child(7){width:15%;max-width:15%;}
.search-address td:nth-child(8) , .search-address th:nth-child(8){width:7%;max-width:7%;}
.search-address td:nth-child(9) , .search-address th:nth-child(9){width:15%;max-width:15%;}
.search-address .button-wrap{display:flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content:space-between;align-items:center;-webkit-align-items:center;margin-top:30px;}
.search-address .button-wrap button{width:23.5%;height: 50px;border:none;}
.search-address .button-wrap #addressAdd{background:#005EC9}
.search-address .button-wrap button:nth-child(n+2){background:#686868}
.search-address .button-wrap #addressClose{background:#ededed;color:#333;}
/* ------------------------------ searchAddressPopup done -------------------------*/

/* ------------------------------- orderEstimatePopup -----------------------------*/
.estimate{overflow-y: scroll;}
.estimate h4{margin-bottom:50px;text-align: center;}
.estimate table th , .estimate table td{padding:15px 8px;}
.estimate .estimate-inner > div{margin-bottom:20px;}
.estimate .quotation-header{display:flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;}
.estimate .customer-info{width:39%;}
.estimate .customer-info thead th{background:#005EC9;color:#fff;}
.estimate .company-info{width:59%;text-align: left;padding:30px;border:1px solid #9A9A9A;display:flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;}
.estimate .company-info p{font-size:0.75rem;font-size:12px;line-height: 20px;}
.estimate .company-info h2{margin-bottom: 5px;}
.estimate .company-info > img{width:30%;margin-right:15px}
.estimate .company-info .inner{display:flex;display:-webkit-flex;align-items:center;-webkit-align-items:center;}
.estimate .company-info .inner > img{margin-right:10px;width:25%;}
.estimate .company-info .text-area .inner > img{width:20%;}
.estimate .company-info .company-info-inner > p{margin-top:10px}
.estimate .estimate-info{text-align:center;}
.estimate .estimate-info thead th{background: #686868;color:#fff;font-weight: normal;}
.estimate .estimate-total td , .estimate .estimate-total th{text-align:center;}
.estimate .estimate-total td:first-child{background:#686868;color:#fff;}
.estimate .estimate-total td:first-child , .estimate .estimate-total th:first-child{width:50%;}
.estimate .estimate-total td:last-child , .estimate .estimate-total tr:last-child th:last-child{text-align:right;}
.estimate .estimate-total tr:last-child th:first-child{background:#005EC9;color:#fff;}
.estimate .notes-wrap{display:flex;display:-webkit-flex;}
.estimate .notes-wrap div {line-height: 25px;}
.estimate .notes-wrap div p:first-child{margin-bottom:10px;}
.estimate .notes-wrap div p:nth-child(n+2){font-size:13px;font-size:0.813rem;}
.estimate .notes-wrap div:first-child{margin-right:30px;}
.estimate .notes-wrap div span::after{content:'|';padding:0 5px;color:#9A9A9A;font-size:0.75rem;font-size:12px;}
.estimate .button-wrap{display:flex;display:-webkit-flex;align-items:center;-webkit-align-items:center;margin-top:30px;justify-content:center;-webkit-justify-content:center;}
.estimate .button-wrap button{width:23.5%;height: 50px;border:none;background:#ededed;}
.estimate .button-wrap button:first-child{margin-right:15px;background:#005EC9;color:#fff;}
/* ---------------------------- orderEstimatePopup  done---------------------------*/

/* ------------------------------- orderComfirmFormPopup , addressregpopup ---------------------------------*/
.order-confirm{overflow-y: scroll;}
.order-confirm h3{margin-bottom:40px;}
.order-confirm .order-info-table{margin-bottom:30px;}
.order-confirm .section-header{background:#005EC9;padding:10px;color:#fff;}
.order-confirm .order-info-table + div{padding-top:30px; border-top:1px solid #9A9A9A;}
.order-confirm .cf.process_wrap{width:100%;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content:center;margin-top:20px;}
.order-confirm .cf.process_wrap input{width:30%;padding:20px 0;border-radius: 5px;background:#005EC9;border:none;font-weight: bold;color:#fff;}
.order-confirm .cf.process_wrap input:first-child{margin-right:10px;background: #f6f6f6;color:#333}

.addressreg-wrap h3{font-weight: bold;margin-bottom:40px;}
.addressreg-wrap{overflow-y: scroll;}
.addressreg-wrap .button-wrap{width:100%;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content:center;margin-top:20px;}
.addressreg-wrap .button-wrap button{width:30%;padding:20px 0;border-radius: 5px;background:#f6f6f6;border:none;font-weight: bold;color:#333}
.addressreg-wrap .button-wrap button:first-child{margin-right:10px;background: #005EC9;color:#fff}

/* ------------------------------- orderComfirmFormPopup , addressregpopup done -----------------------------*/

/* ------------------------------------------------------ order done -----------------------------------------------------------*/

/* --------------------------------------------------------- mypage -------------------------------------------------------------*/

#orderDetailSearch .container.order-info-table{width:100%;}
.mypage-container .filter-container{text-align: center;margin-bottom:30px;}
.mypage-container .filter-container .filter-inner{display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content:center;}
.mypage-container .filter-container .filter-inner div{margin-right:10px;width:15%;}
.mypage-container .filter-container .filter-inner div:nth-child(1){display:flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;width:17%;}
.mypage-container .filter-container .filter-inner div:nth-child(1)::after{content: '~';display:inline;margin:0 5px 0 10px;}
.mypage-container .filter-container .filter-inner div:nth-child(5){width:7%;display:flex;}
.mypage-container .filter-container .filter-inner div:nth-child(5) button{background:#005EC9;display:-webkit-flex;align-items:center;-webkit-align-items:center;}
.mypage-container .filter-container .filter-inner div:nth-child(5) img{width:15px;margin-left:10px;}

.search-address.search-order td{width:10% !important;max-width:10% !important;}
.search-address.search-order td:nth-child(1) , .search-address.search-order th:nth-child(1){width:8% !important;max-width:8% !important;}
.search-address.search-order td:nth-child(8) , .search-address.search-order th:nth-child(8){width:10% !important;max-width:10% !important;}

.mypage-container .home-btn{margin:40px 0;padding: 15px 20px;color: #fff;background: #005EC9;border-radius: 100px;max-width: 400px;margin: 40px auto;min-width: 200px;display:inline-block;}
/* --------------------------------------------------------- mypage done --------------------------------------------------------*/

/* --------------------------------------------------------- service -------------------------------------------------------------*/

/* ------------------------------- service 공통 -----------------------------*/
.service-container{position:relative;}
.service-container .container > div{margin-top:100px}
.service-container .container > div:last-child{margin-bottom:100px}
.service-container .service-wrap{margin-top:100px;}
.service-container .service-header{background:url(../img/banner-img-fir.jpg)no-repeat;background-position:center;background-size:cover;min-height:250px;color:#fff;flex-direction:column;-webkit-flex-direction:column;
                                  display:flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;align-items:center;-webkit-align-items:center;}
.service-container .service-header p{width:60%;margin-top:30px;line-height: 25px;text-align: center;}
.service-container .bg{background:url(../img/service-bg.png)no-repeat;background-size:700px;background-position:left top;}

.service-container .info-wrap{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;align-items: center;-webkit-align-items:center;}
.service-container .info-wrap .info-inner{width:100%;padding:30px;margin-bottom:25px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);border-radius: 15px;background:#fff;}
.service-container .info-wrap .info-inner:last-child{margin-bottom:0;}
.service-container .info-wrap .info-inner h4{margin-bottom:15px}
.service-container .info-wrap .info-inner p{line-height: 25px;}

.service-container .workflow-wrap ul{display:flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;flex-wrap:wrap;-webkit-flex-wrap:wrap;margin-top:20px;
                                      align-items: flex-start;-webkit-align-items:flex-start;justify-content:space-around;-webkit-justify-content:space-around}
.service-container .workflow-wrap li{width:18%;}
.service-container .workflow-wrap li .arrow-wrap{color:#fff;position:relative;width:100%;height:70px;}
.service-container .workflow-wrap li .arrow-wrap:after{content:'';width:80%;height:100%;background:#005EC9;display:inline-block;position:absolute;left:0;top:0;}
.service-container .workflow-wrap li .arrow-wrap::before {display:inline-block;position:absolute;right:0;top:0;content:'';width: 20%;height: 0;border-top: 35px solid transparent ;
                                                          border-left: 34px solid #005EC9;border-bottom: 35px solid transparent;}
.service-container .workflow-wrap li:nth-child(even) .arrow-wrap::after{background:#00418B}
.service-container .workflow-wrap li:nth-child(even) .arrow-wrap::before{border-left: 34px solid #00418B;border-bottom: 35px solid transparent;border-top: 35px solid transparent;}
.service-container .workflow-wrap li .arrow-wrap .arrow-inner{position:absolute;top:50%;left:20px;transform:translate(0,-50%);z-index: 2;}
.service-container .workflow-wrap li .arrow-wrap .arrow-inner h4{margin-bottom:3px;}
.service-container .workflow-wrap li .arrow-wrap .arrow-inner p , .service-container .workflow-wrap li .text-wrap p{font-weight:normal;font-size:14px !important;font-size:0.875rem !important;}
.service-container .workflow-wrap li .text-wrap{margin-top:15px}
.service-container .workflow-wrap li .text-wrap h4{margin-bottom:10px;font-size:1.375rem;font-size:22px}


.workflow-arrow-wrap ul{justify-content:space-between;-webkit-justify-content:space-between;margin-top:0;padding-top:160px;}
.workflow-arrow-wrap li{width:12% !important;position:relative;}
.workflow-arrow-wrap li .arrow-wrap::before{border-left:25px solid #005EC9 !important;}
.workflow-arrow-wrap li:nth-child(even) .arrow-wrap::before{border-left:25px solid #00418B !important;}
.workflow-arrow-wrap li:nth-child(2) .course-wrap{width: calc(5.8 * 90%);position:absolute;height: 120px;left:55px;bottom:105%;border-top:3px solid #005EC9 !important;
                                                  border-left:3px solid #005EC9 !important;border-right:3px solid #005EC9 !important;}
.workflow-arrow-wrap li:nth-child(2) .course-wrap::after{content:'';position:absolute;width:17px;height:10px;display:inline-block;background:url(../img/arrow.png) no-repeat;
                                                                                      background-size:cover;bottom:-1px;left:-9px;}
.workflow-arrow-wrap li:nth-child(2) .course-wrap p ,
.workflow-arrow-wrap li:nth-child(3) .course-wrap p ,
.workflow-arrow-wrap li:nth-child(5) .course-wrap p ,
.workflow-arrow-wrap li:nth-child(7) .course-wrap p{position:absolute;left:50%;transform: translate(-50%,0);top:5px;font-size:12px !important;font-size:0.75rem !important;text-align: center;width:100%;line-height: 20px;}
.workflow-arrow-wrap li:nth-child(3) .course-wrap p:nth-child(1) ,
.workflow-arrow-wrap li:nth-child(2) .course-wrap p:nth-child(1) ,
.workflow-arrow-wrap li:nth-child(5) .course-wrap p:nth-child(1) ,
.workflow-arrow-wrap li:nth-child(7) .course-wrap p:nth-child(1){top:-32px;font-size:1.125rem !important;font-size:18px !important;font-weight:bold;color:#005EC9;}
.workflow-arrow-wrap li:nth-child(3) .course-wrap p:nth-child(1) ,
.workflow-arrow-wrap li:nth-child(5) .course-wrap p:nth-child(1) ,
.workflow-arrow-wrap li:nth-child(7) .course-wrap p:nth-child(1){color:#00418B}

.workflow-arrow-wrap li:nth-child(3) .course-wrap,
.workflow-arrow-wrap li:nth-child(5) .course-wrap ,
.workflow-arrow-wrap li:nth-child(7) .course-wrap{width: calc(1.5 * 90%);position:absolute;height: 55px;left:45px;bottom:105%;
                                                              border-top:3px solid #00418B;border-left:3px solid #00418B;border-right:3px solid #00418B;}
.workflow-arrow-wrap li:nth-child(3) .course-wrap::after,
.workflow-arrow-wrap li:nth-child(5) .course-wrap::after ,
.workflow-arrow-wrap li:nth-child(7) .course-wrap::after{content:'';position:absolute;width:17px;height:10px;display:inline-block;background:url(../img/arrow-2.png) no-repeat;
                                                                    background-size:cover;bottom:-1px;left:-9px;}

.workflow-arrow-wrap li:nth-child(7) .course-wrap{left:70px;width: calc(1.2 * 90%);}


.service-container .service-pricing-wrap{box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);border-radius: 15px;background:#fff;padding:30px}
.service-container .service-pricing-wrap > h4{margin-bottom:20px;}
.service-container .service-pricing-wrap thead{background:#005EC9;height: 55px;text-align: center;color:#fff;line-height: 23px}
.service-container .service-pricing-wrap tbody td{height: 70px;padding:10px;font-size:14px !important;font-size:0.875rem !important;text-align: center;line-height: 25px;}

#lageScalePrep table tbody tr:nth-child(3),#lageScalePrep table tbody tr:nth-child(4),#lageScalePrep table tbody tr:nth-child(7),#lageScalePrep table tbody tr:nth-child(8){background:#f6f6f6;}
#lageScalePrep table tbody tr{background:#fff}
#lageScalePrep table tbody tr:nth-child(even) td:last-child{border-right:1px solid #dee2e6;}
.service-container .ps{margin-top:20px;font-size:14px !important;font-size:0.875rem !important;line-height: 25px;text-align: right;}
#Mutagenesis.service-container .service-header p{width:40%}

@media screen and (max-width: 1500px) {
  .service-container .workflow-inner li::after{width:55px;}
  .service-container .workflow-inner li{width:185px;height: 185px;margin-right:55px}

}

@media screen and (max-width: 1400px) {
  .service-container .workflow-inner li::after{width:45px;}
  .service-container .workflow-inner li{width:175px;height: 175px;margin-right:45px}
  .service-container .workflow-inner li::after{right:-40%;}

}

@media screen and (max-width: 1310px) {
  .service-container .workflow-inner li::after{width:35px;}
  .service-container .workflow-inner li{width:165px;height: 165px;margin-right:35px}
  .service-container .workflow-inner li::after{right:-33%;}

}

@media screen and (max-width: 1230px) {
  .service-container .workflow-head{margin-right:50px}
  .service-container .workflow-inner li::after{width:25px;}
  .service-container .workflow-inner li{width:155px;height: 155px;margin-right:25px}
  .service-container .workflow-inner li::after{right:-25%;}
  .service-container .workflow-inner li p{line-height: 17px;font-size:12px !important;font-size:0.75rem !important;}

}

/* ------------------------------- service 공통 done-------------------------*/

/* --------------------------------------------------------- service done ---------------------------------------------------------*/
@media (max-width: 1300px) {
  .info-wrap .info-inner{overflow: hidden;}
  .workflow-arrow-wrap li{width:25% !important;}
  .workflow-arrow-wrap li:nth-child(-n+4){min-height: 440px;}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap p{left:10%}
  .workflow-arrow-wrap li:nth-child(7) .course-wrap{left:150px;width:calc(1 * 90%);}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap,
  .workflow-arrow-wrap li:nth-child(5) .course-wrap{width:calc(1.2 * 90%);left:100px}
  .workflow-arrow-wrap li:nth-child(7):before{content:'';width: calc(5.8* 90%);position: absolute;height: 120px;right: 140px;bottom: 105%;border-top: 3px solid #005EC9;
                                                          border-left: 3px solid #005EC9;border-right: 3px solid #005EC9;}

}



/* ------------------------------------------- tab or mobile ---------------------------------------------------------------*/
@media (max-width: 1100px) {
  .order-fixed-btn{padding:20px;height:90px;}
  .order-btn-head{width:90%;justify-content:space-between;-webkit-justify-content:space-between;margin-bottom:50px}
  .order-btn-head li{width:45%;margin:0px 10px 10px 0}
  .order-btn-head li:last-child{margin-bottom:0;}
  .order-info-table table tr td{padding:15px 5px;}
  .form-btn{min-width:100px;right:5px;}
  .form-btn img{width:15px;}
  .address-search-btn{min-width: 70px;}
  .order-bg{background-size:contain}
  .order-sheet fieldset form .form-group .col-form-label{width:100%;}
  .order-sheet fieldset form .form-group .col-form-label + div{width:100%}
  .order-sheet fieldset select{margin-right:0;}
  .order-sheet fieldset form .form-group:nth-child(9) div{display:flex;display:-webkit-flex;}
  .order-sheet fieldset form .form-group:nth-child(9) select{margin-right:10px;width:48%;min-width:auto}

  .order-info-table{flex-direction:column;-webkit-flex-direction:column;}
  .order-info-table table{border-right:1px solid #ededed}
  .order-info-table table:nth-child(1){margin-right:0;}
  .order-container .btn-group .inner{flex-direction:column;-webkit-flex-direction:column;align-items:center;-webkit-aling-items:center;}
  .order-container .btn-group .inner button{width:90%;margin-right:0;margin-bottom:10px;}
  .order-container .btn-group .inner button:last-child{margin-bottom:0;}
  .order-sheet fieldset form .form-group .radio-group{flex-wrap: wrap;-webkit-flex-wrap:wrap;}
  .order-sheet fieldset form .form-group .radio-group div{display:flex;display:-webkit-flex;}
  .order-sheet fieldset form .form-group .radio-group select{margin-left:10px;margin-top:0;min-width:auto;}
  .order-fixed-btn button{padding:15px 0;width:60%;}
  .order-fixed-btn button:last-child{width:30%}

  #orderDetailSearch .container.order-info-table{width:90%;}

  .service-container .workflow-wrap{flex-direction:column;-webkit-flex-direction:column;}
  .service-container .service-header{min-height: 350px;}
  .service-container .workflow-head{width:100%;height:120px;margin-bottom:30px}

  .service-container .service-wrap{margin-top:70px;}
  .service-container .workflow-inner{justify-content: space-between;}
  .service-container .workflow-inner li{width:135px;height:135px;margin-top:20px !important;}
  .service-container .workflow-inner{justify-content:center;}
  .service-container .workflow-inner li::after{display: none;}
  .service-container .workflow-inner li .step{font-size:16px !important;font-size:1rem !important;margin-bottom:5px}
  .service-container .workflow-inner li p {font-size:10px !important;font-size:0.625rem !important}
  .service-pricing-wrap{overflow-x: scroll;}
  .service-container .workflow-inner li:nth-child(4), .service-container .workflow-inner li:last-child{margin-right:20px}

  .service-container .workflow-wrap ul{justify-content: flex-start;-webkit-justify-content:flex-start;}
  .service-container .workflow-wrap li{width:30%;margin:0 20px 20px 0;}
  .service-container .workflow-wrap li .arrow-wrap::before{border-left:24px solid #005EC9;}
  .service-container .workflow-wrap li:nth-child(even) .arrow-wrap::before{border-left:24px solid #00418B;}

  .workflow-arrow-wrap ul{padding-top:200px}
  .workflow-arrow-wrap li{width:20% !important;}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap{height: 130px;}
  .workflow-arrow-wrap li:nth-child(-n+4){min-height: 440px;}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap p{left:20%}
  .workflow-arrow-wrap li:nth-child(7) .course-wrap{left:75px;width:calc(1.2 * 90%);}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap,
  .workflow-arrow-wrap li:nth-child(5) .course-wrap{width:calc(1.7 * 90%);left:40px}
  .workflow-arrow-wrap li:nth-child(7):before{content:'';width: calc(5.8* 90%);position: absolute;height: 120px;right: 125px;bottom: 105%;border-top: 3px solid #005EC9;
                                                          border-left: 3px solid #005EC9;border-right: 3px solid #005EC9;}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap p,
  .workflow-arrow-wrap li:nth-child(3) .course-wrap p,
  .workflow-arrow-wrap li:nth-child(5) .course-wrap p,
  .workflow-arrow-wrap li:nth-child(7) .course-wrap p{font-size:0.875rem !important;font-size:14px;}
  
}

@media (max-width: 990px) {
  .workflow-arrow-wrap li:nth-child(7):before{right:85px;}
}

@media (max-width: 770px) {
  .service-container .workflow-wrap ul{justify-content: space-between;-webkit-justify-content:space-between;}
  .service-container .workflow-wrap li{width:45%;margin:0 20px 30px 0;}
  .service-container .workflow-wrap li:nth-child(even){margin-right:0;}
  .service-container .workflow-wrap li .text-wrap h4{font-size:1.125rem;font-size:18px}
  .service-container .workflow-wrap li .arrow-wrap .arrow-inner p, .service-container .workflow-wrap li .text-wrap p{font-size:0.75rem;font-size:12px;}

  .workflow-arrow-wrap ul{padding-top:50px}
  .workflow-arrow-wrap li{width:55% !important;min-height:0;margin-right:0;margin-bottom:60px}
  .workflow-arrow-wrap li:nth-child(-n+4){min-height:0;}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap{width:100px !important;height: calc(6.6 * 90%) !important;border-left:none !important;border-bottom:3px solid #005EC9;left:100% !important;top:35px}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap p{left:50%;top:14%;transform:translate(0,-50%);background:#fff;padding:5px;min-width:90px}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap p:nth-child(1){top:8% !important;}
  .workflow-arrow-wrap li:nth-child(2) .course-wrap::after{top:-6px;left:-6px;transform:rotate(90deg);}

  .workflow-arrow-wrap li:nth-child(3) .course-wrap,
  .workflow-arrow-wrap li:nth-child(5) .course-wrap,
  .workflow-arrow-wrap li:nth-child(7) .course-wrap{width:20px;border-left:none;border-bottom:3px solid #005EC9;left:100%;top:35px !important;}
  .workflow-arrow-wrap li:nth-child(5) .course-wrap{height: calc(1.2 * 100%) !important;}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap{height:calc(1.1 * 100%) !important;;}
  .workflow-arrow-wrap li:nth-child(7) .course-wrap{height: calc(1.1 * 100%) !important;top:55px !important;}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap::after,
  .workflow-arrow-wrap li:nth-child(5) .course-wrap::after,
  .workflow-arrow-wrap li:nth-child(7) .course-wrap::after{top:-6px;left:-6px;transform:rotate(90deg);}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap p,
  .workflow-arrow-wrap li:nth-child(5) .course-wrap p,
  .workflow-arrow-wrap li:nth-child(7) .course-wrap p{left:-150%;transform:translate(0,-50%);background:#fff;padding:5px;min-width:90px}

  .workflow-arrow-wrap li:nth-child(5) .course-wrap p{top:65%}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap p{top:59%}
  .workflow-arrow-wrap li:nth-child(7) .course-wrap p{top:59%}

  .workflow-arrow-wrap li:nth-child(2) .course-wrap p:nth-child(1){top:14%;}
  .workflow-arrow-wrap li:nth-child(3) .course-wrap p:nth-child(1){top:29%;}
  .workflow-arrow-wrap li:nth-child(5) .course-wrap p:nth-child(1){top:25%;}
  .workflow-arrow-wrap li:nth-child(7) .course-wrap p:nth-child(1){top:25%;}
  .workflow-arrow-wrap li:nth-child(7):before{display:none;}


}


/* ------------------------------------------- tab or mobile done ----------------------------------------------------------*/


/* ------------------------------------------- only mobile ----------------------------------------------------------*/
@media (max-width: 700px) {

  .order-confirm h3{margin-bottom:15px}
  .order-confirm .cf.process_wrap input{width:49%;}
  .order-confirm .cf.process_wrap{justify-content:space-between;-webkit-justify-content:space-between;}
  .order-confirm .cf.process_wrap input:first-child{margin-right:0}

  .quickorder-btn-wrap .quick-menu-trigger{width:25px;height:23px;}
  .quickorder-btn-wrap .quick-menu-trigger span:nth-of-type(2){top:10px;}
  .quickorder-btn-wrap .quick-menu-trigger.active span:nth-of-type(1){top:-10px;}
  .quickorder-btn-wrap .quick-menu-trigger.active span:nth-of-type(3){bottom:-10px;}

  .addressreg-wrap h3{margin-bottom:15px}
  .addressreg-wrap .button-wrap button{width:49%;padding:15px}
  .addressreg-wrap .button-wrap{justify-content:space-between;-webkit-justify-content:space-between;}
  .addressreg-wrap .button-wrap button:first-child{margin-right:0}

  .login-inner{padding:110px 0 90px;}
  .login-header img{width:100px}
  .login-container{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;align-items:center;-webkit-align-items:center;width:100%;}
  .login-form-wrap{width:90%;min-width: auto;padding:20px;}
  .login-form-wrap .options{flex-direction:column;-webkit-flex-direction:column;}
  .login-form-wrap .options > label{margin-bottom:15px}
  .login-form-wrap #loginBtn{margin-bottom:20px;}

  #memberregSec .login-form-wrap{min-width:90%;}
  #memberregSec form div{align-items:flex-start;-webkit-align-items:flex-start;flex-direction:column;-webkit-flex-direction:column;}
  #memberregSec form > div #addrSearchBtn , #memberregSec form > div #idChkBtn{margin-top:10px;margin-left:0 !important;width:100%;} 

  /*main*/
  #Main .main-wrap{margin-top:70px;}
  #Main .main-sub-banner{background-size:cover;background-position:center right;height: 430px;}
  #Main .main-order-wrap{flex-direction:column;-webkit-flex-dierction:column;}
  #Main .main-order-wrap li{margin-right:0;width:100%;margin-bottom:20px;}
  #Main .main-order-wrap li:last-child{margin-bottom:0;}
  #Main .main-wrap .swiper-slide{width:90%;}
  #Main .main-wrap .swiper-slide p{width:90%;}
  #Main .main-wrap .swiper-button-next{right:2%}
  #Main .main-wrap .swiper-button-prev{left:2%;}
  #Main .main-wrap [class*="swiper-button"] {color:#fff;transform: scale(0.5);}
  #Main .main-sub-banner p{width:90%;}
  #Main .main-sub-banner .myotec-url{margin-top:15px}

  .service-container .service-header{min-height: 300px;}
  .service-container .service-header p{width:90%;margin-top:20px;}
  #Mutagenesis.service-container .service-header{min-height: 450px;}
  #Mutagenesis.service-container .service-header p{width:90%}
  .service-container .ps{text-align: left;;}




}


  /* galaxy flod / duo */
@media (max-width: 285px) {

}

/* ------------------------------------------- only movile done  ----------------------------------------------------------*/