@charset "utf-8";
/* ------- COMMON ------- */

.hidden {overflow:hidden; position:absolute; width:1px; height:1px; font-size:1px; line-height:0; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0;}
.notrans, .notrans *{ transition:none !important}

#skipNav {overflow:hidden; position:absolute; top:0; left:0; width:100%;}
#skipNav a {position:relative; display:block; height:0px; width:0px; margin:0 -1px -1px 0; overflow:hidden; line-height:0; text-align:center;}
#skipNav a:focus,
#skipNav a:hover,
#skipNav a:active {width:auto; height:2.8rem; margin:0; padding:.8rem 0;  background:#293478; margin:0; font-size:1.2rem;  line-height:1.2rem; color:#fff; font-weight:bold; z-index:10000; box-sizing:border-box;}

#wrapper {display:flex; flex-direction:column; position:relative; width:100%; min-width:320px; min-height:100vh; /* overflow:hidden; */ padding:0}

#header{position:sticky;top:0;left:0;right:0;z-index:1000;width:100%;min-width:320px;height:80px;background:#fff;}
#header.fixed{background:#fff !important;}

#header .inner{display:flex;align-items:center;position:relative;min-width:320px;max-width:1400px;padding:0px 24px;margin:0 auto;box-sizing:border-box;justify-content:space-between}

#header .inner{height:80px;}
#header .inner .gnbLeft{display:flex;align-items:center;}
#header .inner .gnbLeft .logo{display:flex;align-items:center;margin:0px;width:210px;height:40px;padding-left:46px;background:url('/o2/assets/images/common/ic_eyes_40.png') no-repeat 0 50%; background-size:40px 40px;}
#header .inner .gnbLeft .logo span{display:inline-flex;align-items:center;font-size:20px;color:#0B0D0F;line-height:28px;font-weight:700;}
#header .inner .gnbLeft .srchWrap{display:flex; position:relative}
#header .inner .gnbLeft .srchWrap .srchFormWrap{}
#header .inner .gnbLeft .srchWrap .srchFormWrap .btnSearch{z-index:1;display:flex;position:absolute;right:0px;top:2px;width:50px;height:40px;background:url('/o2/assets/images/common/ic_search_26.png') no-repeat 9px 50%; background-size:26px 26px;text-indent:-99999px;}
#header .inner .gnbLeft .srchWrap .srchFormWrap .inputText{border:1px solid #E9E9EF;border-radius:28px;height:44px;width:340px;background:url('/o2/assets/images/common/ic_search_26.png') no-repeat 298px 50%; background-size:26px 26px;padding-right:50px}
#header .inner .gnbLeft .srchWrap .srchFormWrap .btnSearch:focus{}

#header .inner .gnbMenu{display:flex;align-items:center;}
#header .inner .gnbMenu>li{display:inline-flex;position:relative;align-items:center;min-height:80px}
#header .inner .gnbMenu>li~li{margin-left:36px}
#header .inner .gnbMenu>li>a{font-family:"SpoqaHanSansNeoMedium";font-size:15px;font-weight:500;line-height:26px;color:#0B0D0F;}
#header .inner .gnbMenu>li:hover .subMenu, header .inner .gnbMenu>li.active .subMenu{opacity:1; transform:translateY(0); pointer-events:auto;}
#header .inner .gnbMenu>li .subMenu{opacity:0; display:block; position:absolute; top:75px; left:-24px; min-width:270px; padding:14px 24px; background:#FFF;box-shadow:4px 4px 40px 0 rgba(26,67,153,0.08); border-radius:12px; transform:translateY(6px); pointer-events:none; transition:.2s;}
#header .inner .gnbMenu>li .subMenu li{padding:10px 0}
#header .inner .gnbMenu>li .subMenu li a{font-size:16px;font-weight:700;line-height:24px;color:#262626}
#header .inner .gnbMenu>li .subMenu li a:hover, header .inner .gnbMenu>li .subMenu li a.active{color:#003CDC;}

#header .inner .menuInfo{display:flex;margin-left:auto;margin-right:40px;align-items:center;}

.menuInfo .userInfo{display:flex;align-items:center;}
.menuInfo .userInfo>li{display:inline-flex;align-items:center;}
.menuInfo .userInfo>li:after{content:''; display:inline-flex;width:1px;height:12px;background:#dddfe7;margin:0 10px}
.menuInfo .userInfo>li:last-child:after{display:none}
.menuInfo .userInfo>li>a, .menuInfo .userInfo>li>span{font-size:16px;font-weight:500;line-height:24px;}

.menuInfo .userInfo+.btnLang{margin-left:40px}
.menuInfo .selectBox.btnLang .selectBtn{display:flex;width:52px;height:26px;align-items:center;font-size:12px;color:#fff;font-weight:700;background:#262626;border:1px solid #262626; border-radius:14px;padding:2px 12px;}
.menuInfo .selectBox.btnLang .selectBtn:after{background:url('') no-repeat 50% 50%; background-size:12px; right:7px; width:12px;height:12px;margin-top:-6px;}
.menuInfo .selectBox.btnLang.open .selectBtn{border:1px solid #262626; }
.menuInfo .selectBox.btnLang .options{width:68px;padding:7px 0; left:-8px; background:#FFFFFF; border:1px solid #E9E9EF; box-shadow:4px 4px 40px 0 rgba(26,67,153,0.08); border-radius:8px;}
.menuInfo .selectBox.btnLang .option.selected::after{display:none}
.menuInfo .selectBox.btnLang .options .option{padding:4px 0;line-height:21px; text-align:center; font-weight:700}
.menuInfo .selectBox.btnLang .options .option:hover{background:none;color:#003CDC;}

.menuInfo .btnNavi{position:relative;display:flex;margin-left:40px;position:relative;width:24px;height:24px;font-size:0; }
.menuInfo .btnNavi, .header .btnNavi span{display:inline-flex;transition: all .4s;box-sizing:border-box;}
.menuInfo .btnNavi span{position:absolute;left:0;width:100%;height:2px;background-color:#000;border-radius:2px;}
.menuInfo .btnNavi span:nth-of-type(1){top:2px;}
.menuInfo .btnNavi span:nth-of-type(2){top:11px;}
.menuInfo .btnNavi span:nth-of-type(3){bottom:2px;}

#pageTitle{width:100%;background: #F5F7F9;}
#pageTitle .inner{position:relative;max-width:964px;margin:0 auto;height:100%;min-height:68px;padding:0}

/* breadcrumb */
.breadcrumb {position:absolute;margin:0px;top:30px}
.breadcrumb span{position:relative;display:inline-flex;align-items:center}
.breadcrumb .breadSelect{display:inline-flex;align-items:center}
.breadcrumb span:after{content:"";display:inline-flex;width:16px;height:16px;background:url('/o2/assets/images/common/ic_16_arrow_gray.png') no-repeat 50% 50%; background-size:16px;margin:0}
.breadcrumb span:last-child:after{display:none}
.breadcrumb span a{display:inline-flex;align-items:center;font-size:14px; color:#9095A1;; font-weight:500; line-height:21px}
.breadcrumb .current {}
.breadcrumb .current>a{color:#505358;font-weight:700}

#wrapper #container {display:flex;position:relative;max-width:100%;padding:20px 0px 120px;margin:0 auto;box-sizing:border-box;flex-wrap:wrap}
#container .inner{position:relative;max-width:800px;width:100%;margin:0 auto;height:100%;}


/* 풋터 */
footer{display:flex; position:relative; width:100%; min-height:102px; padding:0; border-top:1px solid #E9E9EF;}
footer .inner{display:flex;position:relative;width:100%;max-width:1400px;padding:18px 24px;margin:0 auto;box-sizing:border-box}
footer .inner .logo{display:inline-flex;width:262px;height:36px;background:url('/o2/assets/images/common/footer_logo.png') no-repeat 50% 50%; background-size:262px 36px;}
footer .inner .adder{display:flex;margin:0;justify-content:space-between;width:100%;}
footer .inner .adder ul{display:flex;}
footer .inner .adder .info{font-size:14px;font-weight:500;}
footer .inner .adder .info span:after{content:"";display:inline-flex;width:1px;height:12px;background:#dddfe7;margin:0 8px}
footer .inner .adder .info span:last-child:after{display:none}
footer .inner .adder .copy{font-size:13px;color:#9095A1;font-weight:400;}

.titBox{display:flex;width:100%;padding-bottom:20px;position:relative;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;}
.titBox:after{content:"";height:1px;background-color:#262626;width:100%;display:block;position:absolute;bottom:0;}

/* text style */
.titleCont{font-family:"SpoqaHanSansNeoBold";font-weight:700;font-size:26px;color:#111;letter-spacing:-1px;line-height:38px;}


.largeText{font-size:15px;color:#222;font-weight:400}
.midText{font-size:14px;color:#262626;font-weight:500;line-height:21px}
.smallText{font-size:13px;color:#888;font-weight:400;line-height:19px}

.txtColorBk{color:#292929 !important}
.txtColorBlue{color:#003CDC !important}
.txtColorRed{color:#FF5D4D !important}

.inputArea{position:relative;}
.inputArea .inputText{width:100%}
.inputText, .textArea{padding:13px 14px 12px 16px; border-radius:4px; border:solid 1px #E9E9EF; background-color:#fff; font-size:14px; line-height:21px; color:#262626;}
.textArea{width:100%; box-sizing:border-box;}

.imageBox img{width:100%}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#9095A1;font-size:15px}
input::-moz-placeholder, textarea::-moz-placeholder{color:#9095A1;font-size:15px}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#9095A1;font-size:15px}

input:focus, textarea:focus{border-color:#262626; color:#9095A1}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color:transparent}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color:transparent} 
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {border-color:#262626;  color:transparent}

input.error, textarea.error{border-color:#F42020; color:#F42020}
.error::-webkit-input-placeholder, .error::-moz-placeholder, .error:-ms-input-placeholder{color:transparent;}

input[readonly], textarea[readonly]{background:#F7F8F9; border-color:#E9E9EF; color:#8F95A1;}
input[readonly]::-webkit-input-placeholder, input[readonly]::-moz-placeholder, input[readonly]:-ms-input-placeholder{color:#8F95A1;}
textarea[readonly]::-webkit-input-placeholder, textarea[readonly]::-moz-placeholder, textarea[readonly]:-ms-input-placeholder{color:#8F95A1;}

input:disabled, textarea:disabled{background:#F2F2F5; border-color:#E9E9EF; color:#F42020;}
input:disabled::-webkit-input-placeholder, input:disabled::-moz-placeholder, input:disabled:-ms-input-placeholder{color:#C0C5CE;}
textarea:disabled::-webkit-input-placeholder, textarea:disabled::-moz-placeholder, textarea:disabled:-ms-input-placeholder{color:#C0C5CE;}


/* button style */
.btnWrap{display:grid;box-sizing:border-box;background-color:#fff;}
.btnWrap:after {content:''; display:block; clear:both;}
.btnWrap.fixed{position:fixed;bottom:0;left:0;width:100%;padding:0 16px 34px;z-index:1000;height:94px;right:0;}
.btnWrap button:only-child, .layerBottom a:only-child, .btnWrap .btnNext{width:100%;}
.btnWrap button, .btnWrap a{display:table;height:60px;line-height:60px;float:left;border-radius:12px;background-color:#FFE300;color:#222;font-size:17px;font-weight:400;}
.btnWrap button:disabled{background-color:#e6e6e6;color:#999}
.btnWrap button+button, .btnWrap a+a{}
.btnWrap button.line{border:1px solid #ccc;height:50px;line-height:50px;font-size:16px;background-color:#fff}

.btnWrap.col2{grid-template-columns:38% auto;grid-gap:8px;}

.btnWrap .btnCancel{background-color:#ddd;color:#222}

.btnWrap.fixed.topBg:before{content:'';display:block;position:fixed;bottom:94px;left:0;width:100%;height:36px;background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.07) 21%, rgba(255,255,255,0.24) 41%, #FFFFFF 100%);box-sizing:border-box;}

/* ==============================
 * content
 * ============================== */
.innerSide{margin-left:-20px !important;margin-right:-20px !important;}

.hide {display:none;}

.pc {display:block;}
.mo {display:none;}

/* Grid Default */
.row:after {clear:both; display:block; content:'';}
.col {float:left; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s;}
.col.right {float:right;}

/* Grid (Flexible) */
.grid {display:-webkit-flex; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap;}

/* Align - Flexible */
.flex{display:flex  !important;}
.flex-auto > .col {-webkit-box-flex:1;-ms-flex:1;flex:1;}
.flex-column {-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}
.flex-wrap {-ms-flex-wrap:wrap;flex-wrap:wrap;}
.flex-start {-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;}
.flex-center {-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.flex-end {-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;}
.flex-around {-ms-flex-pack:distribute;justify-content:space-around;}
.flex-between {-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;}
.flex-evenly {-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;}
.cross-start {-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;}
.cross-center {-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.cross-end {-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;}
.cross-around {-webkit-box-align:space-around;-ms-flex-align:space-around;align-items:space-around;}
.cross-between {-webkit-box-align:space-between;-ms-flex-align:space-between;align-items:space-between;}
.cross-evenly {-webkit-box-align:space-evenly;-ms-flex-align:space-evenly;align-items:space-evenly;}

/* align */
.txtCenter{text-align:center !important;}
.txtLeft{text-align: left;}
.txtRight{text-align: right !important;}

/* border */
.borLineT {border-top:6px solid #efefef;}
.borLineT1 {border-top:1px solid #efefef;}
.borLineB1 {border-bottom:1px solid #efefef;}
.borLineT0 {border-top:none  !important}

/* 여백 */
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt12{margin-top: 12px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt25{margin-top: 25px !important;}
.mt30{margin-top: 30px !important;}
.mt35{margin-top: 35px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt65{margin-top: 65px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.ml10{margin-left: 10px !important;}
.ml20{margin-left: 20px !important;}
.ml40{margin-left: 40px !important;}
.mr20{margin-right: 20px !important;}
.mr40{margin-right: 40px !important;}

.pt0{padding-top: 0px !important;}
.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt60{padding-top: 60px !important;}
.pt70{padding-top: 70px !important;}
.pt80{padding-top: 80px !important;}
.pt90{padding-top: 90px !important;}
.pt100{padding-top: 100px !important;}
.pb0{padding-bottom: 0 !important;}
.pb10{padding-bottom: 10px !important}
.pb20{padding-bottom: 20px !important}
.pb30{padding-bottom: 30px !important}
.pb40{padding-bottom: 40px !important;}
.pl40{padding-left: 40px !important;}


@media (max-width: 1023px) {
    #header{height:100px}
    #header .inner{flex-direction:column;align-items:flex-start;height:100px;padding:0}
    #header .inner .gnbLeft{/*flex-direction:column;align-items:flex-start;*/width:100%;padding:10px 24px 0;justify-content:space-between}
    #header .inner .gnbLeft .srchWrap, #header .inner .gnbLeft .srchWrap .srchFormWrap{width:100%;}
    #header .inner .gnbLeft .srchWrap .srchFormWrap .btnSearch{background-size:24px 24px;top:0}
    #header .inner .gnbLeft .srchWrap .srchFormWrap .inputText{height:38px;width:100%; background:url('/o2/assets/images/common/ic_search_26.png') no-repeat 95% 50%; background-size:24px 24px; font-size:13px; padding:6px 30px 6px 12px}
    #header .inner .gnbLeft .srchWrap .srchFormWrap .inputText::-webkit-input-placeholder{font-size:13px}
    #header .inner .gnbLeft .srchWrap .srchFormWrap .inputText::-moz-placeholder{font-size:13px}
    #header .inner .gnbLeft .srchWrap .srchFormWrap .inputText:-ms-input-placeholder{font-size:13px}

    #header .inner .gnbLeft .logo{background-size:26px;padding-left:30px;/*width:135px;*/}
    #header .inner .gnbLeft .logo span{font-size:14px}
    #header .inner .gnbMenu>li>a{font-size:16px;}
    #header .inner .pcNav{display:flex;overflow-x:auto; white-space:nowrap; width:100%; margin:0 auto;-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
    #header .inner .pcNav::-webkit-scrollbar {display:none;}
    #header .inner .gnbMenu{display:flex;scroll-behavior:smooth;padding:0 24px;}
    #header .inner .gnbMenu>li{min-height:50px}
    #header .inner .gnbMenu>li~li{margin-left:16px;}

    footer .inner .adder{flex-direction:column;}

    .mBorderList.investinfo{margin-top:28px}
}