@charset "UTF-8";

/*********************************************** reset ***********************************************/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font:inherit;word-break:keep-all;vertical-align:baseline}
body{line-height:1}
h1,h2,h3,h4,h5,h6{font-weight:normal}
ol,ul,dl,li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none}
legend,caption{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0, 0, 0, 0);clip-path:polygon(0 0, 0 0, 0 0);border:0}
table,th,td{table-layout:fixed;border-collapse:collapse;vertical-align:middle;border-spacing:0}
a{text-decoration:none;color:unset}
button{background:transparent;padding:0;margin:0;border-style:none;cursor:pointer}
/*********************************************** common ***********************************************/

html {font-size: 62.5%;}
body {width:100%; min-width: 1900px; position: relative; color: #222; font-size:1.6rem; letter-spacing: -0.06rem; line-height: 1.4; font-family: 'GothicA1-Regular'; -webkit-font-smoothing: antialiased; }
body.scrollLock {overflow: hidden;}
a { color:#555;}
/* em, strong, address, i {font-style: normal;} */
strong, address, i {font-style: normal;}
h1, h2, h3, h4, h5, h6 {font-family: "ONEMobileTitle";}
h2 {font-size: 4.5rem;}
h3 {font-size: 3.6rem;}
h4 {font-size: 2.6rem;}
h5 {font-size: 2rem;}
h6 {font-size: 1.8rem;}
button,input,select,textarea{font-family:"GothicA1-Regular";font-size:1.6rem;box-sizing:border-box;}
input[type="text"] {width:100%; height: 32px; border: 1px solid #D7DADF; padding: 0 5px; color: #555;}
select {height: 32px; border: 1px solid #D7DADF; padding: 0 5px; color: #555;}
.italic {font-style: italic;}
.colorBlue {background: #EBF0F9; color: #0e6fb1;}
.colorGreen {background: #EBF9F3; color: #00998a;}
.colorSkyBlue {background: #DBF0FC; color: #009ac3;}
.colorGray {background: #F3F5F8; color: #747881;}
.colorRed {background: #FBE9E9; color: #d71d1d;}
.primaryColor {color: #004683;}
.secondaryColor {color: #009BAF;}
.bold {font-family: 'GothicA1-Bold';}
.conSection {padding: 0 5%;}
.btnWrap {text-align: right; margin-top: 20px;}
.btnWrap a,
.btnWrap button {display:inline-block; width: 85px; text-align: center; padding: 7px; color: #fff;  font-size: 1.5rem; border-style: none; cursor: pointer;}
.btnWrap .btnblue {background: #004683;}
.btnWrap .btngray {background: #555555;}
.btnWrap .btnwhite {background: #fff; color: #222; box-shadow: 0 0 0 1px #222 inset; }
.info_lst{display:flex;gap:20px}
.info_lst li{position:relative;}
.info_lst li:not(:last-child)::before{content:"";position:absolute;top:5px;right:-11px;width:1px;height:10px;background:#adadad;}
.borderL {border-left: 1px solid #D7DADF !important;}
fieldset {border-style: none;}
/*********************************************** header ***********************************************/
header .headerTop{display:none;}
header .headerTop,
header .headerBottom {padding: 10px 50px;}
header .headerTop,
.sub header .headerBottom {border-bottom: 1px solid #D7DADF;}
header .headerTop .topMenu {display:flex; flex-direction: row; justify-content: flex-end;}
header .headerTop .topMenu li > a {font-size: 1.5rem; color: #222; padding-left: 20px; position: relative;}
header .headerTop .topMenu li > a::before {content:""; width: 18px; height: 18px; margin-right: 3px; display: inline-block; vertical-align:middle;}
header .headerTop .topMenu .manual::before {background: url(../images/manualIcon.png) no-repeat;}
header .headerTop .topMenu .cart::before {background: url(../images/basketIcon.png) no-repeat;}
header .headerTop .topMenu .cms::before {background: url(../images/managementIcon.png) no-repeat;}
header .headerTop .topMenu li > a::after {content:""; width: 1px; height: 10px; background: #555; position: absolute; top: 50%; transform: translateY(-50%); right: -10px;}
header .headerTop .topMenu .profile::before {content: none;}
header .headerTop .topMenu .profile::after { width: 18px; height: 18px; display: inline-block; vertical-align: middle; position:initial; background: url(../images/arrow.png) no-repeat; transform: none; margin-left: 5px;}
header .headerTop .topMenu .profile.on::after {rotate: -180deg; }
header .headerTop .topMenu li:last-child{position:relative; font-size: 1.5rem;}
header .headerTop .topMenu li:last-child .dropDown {width:252%; padding:20px; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); border-radius: 8px; z-index: 10; position: absolute; bottom: -170px; right: 0; display:none;}
header .headerTop .topMenu li:last-child .dropDown.show {display: block;}
header .headerTop .topMenu li:last-child .dropDown ul {background: #efefef; border-radius: 8px; padding:15px; margin-bottom: 10px;}
header .headerTop .topMenu li:last-child .dropDown .accountId {font-family: 'GothicA1-Bold';}
header .headerTop .topMenu li:last-child .dropDown .logOut { display: block; padding-top:10px; border-top: 1px solid #efefef; color: #222; position:relative; font-size: 1.5rem;}
\header .headerTop .topMenu li:last-child .dropDown .logOut::after {content:""; width: 16px; height: 16px; background: url(../images/logoutIcon.png) no-repeat; position:absolute; top: 42%; right: 0;}
header .headerBottom {display: flex; justify-content: space-between; align-items: center; padding: 15px 50px;}
header .headerBottom .headerSearch {display: flex; align-items: center; position: relative;}
header .headerBottom .headerSearch .tooltip {position: relative; font-size: 1.5rem; margin-right: 10px; z-index: 10;}
header .headerBottom .headerSearch .tooltip[data-tooltip]:hover::after {content:attr(data-tooltip); position: absolute; top: 30px; right: 0; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); width:320px; padding: 20px; border-radius: 8px; white-space: pre-wrap; word-break: keep-all; z-index: 10;}
header .headerBottom .headerSearch .tooltip::before {content: ""; width:16px; height: 16px; background: url(../images/tooltip.png) no-repeat; display: inline-block; vertical-align: middle; margin-right:3px;}
header .headerBottom .headerSearch select {border: 1px solid #D7DADF; height: 45px; font-size: 1.6rem; margin-right: 5px; padding-left: 10px; border-radius: 3px;}
header .headerBottom .headerSearch .srhTxtform {height: 45px; border: 1px solid #D7DADF; width:300px; padding: 0 10px; border-radius: 3px 0 0 3px; font-size: 1.6rem;}
header .headerBottom .headerSearch button { position: relative; width: 45px; height: 45px; border-style: none; cursor: pointer;background: linear-gradient(322deg, rgba(0,155,175,1) 0%, rgba(0,95,180,1) 100%); border-radius: 0 3px 3px 0;}
header .headerBottom .headerSearch button::before {content: ""; position:absolute; width: 20px; height:20px; background: url(../images/search_s.png) no-repeat; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/*********************************************** footer ***********************************************/
footer {background:#1F2525; text-align: center; padding: 35px 0; font-size: 1.5rem;}
footer address,
footer .copyRight {color: rgba(255, 255, 255, 0.7);}

/*********************************************** login ***********************************************/
.loginPage {width: 100%; height: 100vh; display:flex;}
.loginPage .secLeft {width:60%; height: 100vh; overflow: hidden;}
.loginPage .secLeft .leftBg {height: 100%; background: url(../images/loginBg.png) no-repeat center / cover; -webkit-animation-name: aniBgLeft; animation-name: aniBgLeft; -webkit-animation-duration: 9000ms; animation-duration: 9000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: relative; z-index: -1;}

@-webkit-keyframes aniBgLeft {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15) ;
  }
}

@keyframes aniBgLeft {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15);
  }
}
.loginPage .secRight {width:40%; height: 100%; font-size: 1.6rem; }
.loginPage .secRight .conWrap {width: 500px; position: relative; top: 50%; left: 50%; transform:translate(-50%, -50%);}
.loginPage .secRight .conWrap h2 {text-align: center; margin-bottom: 40px;}
.loginPage .secRight .conWrap .warning_msg {color:#FF3030; margin-bottom:10px; font-size:1.4rem;}
.loginPage .secRight .conWrap .warning_msg::before {content: ""; display: inline-block; width: 20px; height: 20px; background: url(../images/notice.png); vertical-align: middle; margin-right: 5px;}
.loginPage .secRight .conWrap fieldset {border-style: none;}
.loginPage .secRight .conWrap fieldset input {font-size: 1.6rem; width:100%; height: 65px;  border: 1px solid #dbdbdb; padding: 0 20px;}
.loginPage .secRight .conWrap fieldset button {width:100%; height: 65px;  border-style: none;cursor:pointer;}
.loginPage .secRight .conWrap fieldset .loginBt button {font-size: 1.6rem; color: #fff; background: #005FB4;}
.loginPage .secRight .conWrap fieldset .other button {font-size: 1.6rem; font-family: 'GothicA1-Bold'; color: #005FB4; background: #fff; border: 2px solid #005FB4;}
.loginPage .secRight .conWrap fieldset .comment_or {text-align: center; padding: 20px 0; display: flex; align-items: center;}
.loginPage .secRight .conWrap fieldset .comment_or span {padding: 0 10px;}
.loginPage .secRight .conWrap fieldset .comment_or::before,
.loginPage .secRight .conWrap fieldset .comment_or::after {content:""; display: inline-block; flex: 1; border-bottom: 1px solid #dbdbdb;}