@charset "utf-8";

body {position: relative; margin:0 auto; padding:0; width:100%; text-align: center; color: #091225; background:#f1f4fb;}

/****************************************************************************************************************************************
 공통 시작
*****************************************************************************************************************************************/
.container {position: relative; margin:0 auto; padding:0 15px; width:1093px; text-align: center; overflow: hidden;}
@media (max-width: 1123px) {
    .container {width: 100%;}
}

/****************************************************************************************************************************************
 header 시작
*****************************************************************************************************************************************/
header {position: absolute; top:0; z-index: 99; margin: 0 auto auto; padding:0; width:100%; background: transparent; transition: .3s ease;}
.header-bg {background: #fff; border-bottom: 1px solid #d1d5d7; box-shadow: 0 1px 2px rgb(0, 0, 0, 0.06)}
.pc-inner {position: relative;}
.mo-bg {position: relative; padding:0 48px; height:76px; display: flex; justify-content: space-between; align-items:center;}

nav {order: 1; display: flex !important; height:76px; align-items:center;}
.logo {margin-right: 30px; cursor: pointer;}
.logo img {width: 163px;} 

ul.nav_menu {display: flex; align-items:center; margin:0 auto; padding: 0; text-align: center;}
ul.nav_menu > li {position: relative; text-align: center;}
ul.nav_menu > li > a {display: block; padding:0 20px; line-height:76px; font-size: 15px; font-weight:500; color:#091225; white-space: nowrap;}
ul.nav_menu > li > a > svg {margin:2px 0 2px 3px; font-size: 13px;}
ul.nav_menu > li:hover > a,
ul.nav_menu > li.active > a {color:#01a8fe;}
ul.nav_menu > li:hover > a > svg,
ul.nav_menu > li.active > a > svg {transform: rotate(180deg); transition: transform .4s;}

/* 서브메뉴 */
ul.nav_menu > li:hover ul.sub_menu,
ul.nav_menu > li.active ul.sub_menu {display: block;}

ul.sub_menu {display: none; position: absolute; top:77px; left:5px; width:200px; padding:20px 20px; background: #fff; border-radius: 8px; box-shadow: 0px 1.3px 1.3px rgba(0,0,0,0.2),0px 4.5px 4.5px rgba(0,0,0,0.03),0px 20px 20px rgba(0,0,0,0.05); overflow: hidden; transition: all .2s ease; z-index: 9999;}
ul.sub_menu > li {display: block; padding:3px 0; width:100%;}
ul.sub_menu > li > a {display: block; padding:0 20px; line-height:40px; text-align: left; font-size: 15px; font-weight: 500; color:#091225;}
ul.sub_menu > li > a:hover,
ul.sub_menu > li > a.active {background:#f7f8fc; border-radius: 8px;}

.Tnb {order: 2; position:relative; display: flex; align-items: center;}
ul.tnb_info {position:relative; display: flex; margin:0 auto; padding: 0; text-align: center;}
ul.tnb_info > li {padding:0 5px;}
ul.tnb_info > li > a {color:#091225;}
ul.tnb_info > li > a.btn_message:hover {text-decoration: underline;}

.tnb_btn {margin:0 2px; padding:10px 20px; font-size:15px; color:#fff; background: #00a0ff; border:1px #00a0ff solid; border-radius: 3px; cursor: pointer;}
.tnb_btn:hover {background: #44baff;}
.Topbtn_join {color:#00a0ff; background:transparent; border:1px #00a0ff solid; }
.Topbtn_join:hover {color:#fff; background: #00a0ff;}

.sticky {position:fixed; background:rgba(255,255,255,0.9); box-shadow: 0px 6px 19px rgb(122, 152, 210, 0.5%); backdrop-filter: blur(5px);}

/****************************************************************************************************************************************
PC일때 HIDDEN처리
*****************************************************************************************************************************************/
.mo-inner {display: none;}
#mo_right {display: none;}
#mo_close {display: none;}
.mo-box {display: none;}

/****************************************************************************************************************************************
 header 미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width: 1420px){
    header {position: fixed;}  
    /* mo-inner  */
    .mo-inner {display: flex; justify-content: space-between; align-items: center; flex-grow: 1; padding:0 12px; height:60px;}
    .mo-logo {display: inline-flex; margin-right: 12px;}
    .mo-logo > img {width: 32px;}
    .flex-1 {flex: 1 1 0%;}

    #mo_right {display: inline-flex; margin:0 auto; padding:10px 12px; background:#e4f4ff; border-radius: 3px; cursor: pointer; transition: all 0.3s ease-in-out;}
    #mo_right > svg {font-size:16px; color:#4dbbff;}
    
    /* .pc-inner */
    .pc-inner.active {position: fixed; top: 0; left:0; right:0; bottom:0; width:100%; height:100vh; backdrop-filter: blur(10px);}
    .mo-bg {position: fixed; top: 0; right: -100%; z-index: 999; display: block; align-items: unset; padding:0 24px; width:400px; height:100%;background:#fff; transition: all 0.3s; overflow-y: auto;}
    .mo-bg.active {right: 0;}

    .logo {position: absolute; top:10px; left:24px; z-index: 1;}
    #mo_close {display:block; position: absolute; top:10px; right:24px; z-index: 1; width: 32px; height: 32px; line-height: 32px; background:#e4f4ff; border-radius: 50%;}
    #mo_close > svg {font-size: 16px; color:#4dbbff;}

    .Tnb {flex-direction: column; align-items: unset; margin-top:55px; padding:10px 0; width: 100%; border-top:1px #efefef solid; border-bottom:1px #efefef solid;}
    ul.tnb_info {display: block; margin: 0 auto; width: 100%;}
    ul.tnb_info > li {margin:8px 0; padding:10px 15px; text-align:left; color: #091225; background:#f3f3f3; border-radius: 8px; box-shadow:inset 0 3px 5px #d2d2d2;}
    ul.tnb_info > li > a {color: #091225;}
   
    .tnb_btn {display: block; margin:12px 0; padding:10px 0; width:100%; font-size: 16px; text-align: center; border-radius: 8px;}
    .Topbtn_loout {margin-top:5px;}


    /* 메인메뉴 */
    nav {margin:10px auto 20px auto; padding:0; width:100%; height:auto; flex-direction: column; align-items: flex-start; border-bottom:1px #efefef solid;}

    ul.nav_menu {display: block; width: 100%;}
    ul.nav_menu > li {padding:0; text-align:left;}
    ul.nav_menu > li > a {position:relative; padding:0 20px; line-height: 55px; font-size:16px; font-weight:500;}
    ul.nav_menu > li > a > svg {position: absolute; top:19px; right:20px; margin:0; padding:0; cursor: pointer;}

    /* 서브메뉴 */
    ul.nav_menu > li:hover ul.sub_menu,
    ul.nav_menu > li.active ul.sub_menu {display: none;}

    ul.nav_menu > li.active ul.sub_menu {display: block; position: relative; left:0; top:0; padding-top:0; width:100%; border:none; box-shadow: none;}
    ul.sub_menu {padding:0; background:transparent;}
    ul.sub_menu > li {display: block; position: relative; left:0; top:0; padding-top:0; width:100%; border:none}

    ul.nav_menu > li:hover ul.sub_menu > li > a,
    ul.nav_menu > li.active ul.sub_menu > li > a {display: block; width:auto; padding-left:40px; text-align: left;}

    .mo-box {display:block; position: relative; margin:20px auto; padding:0 24px; width: 100%;}
    .visa-btn {display:flex; justify-content: center; align-items: center; margin:0 auto; padding:10px 20px; background: #e6f6ff;}
    .visa-btn span {color:#00a0ff}
    .visa-btn img {margin-left:5px; width:50px}
    .mo-box > p {margin-bottom:10px; color:#8190b7}

    ul.sns-icon {display: flex; justify-content: center; align-items: center; margin:20px auto; width: 100%;}
    ul.sns-icon > li {position: relative; margin:0 auto; padding:0 3px;}
    ul.sns-icon > li > img {width:20px}

    ul.app {display: flex; justify-content:space-between; align-items: center; margin:10px auto 20px auto; width: 100%;}
    ul.app > li {position: relative; margin:0 auto; padding:0; width: 48%;}
    ul.app > li > img {max-width: 100%;}

}/* 미디어쿼리문 끝 */

@media (max-width: 420px){  
    .mo-bg {width:100%}
    
}/* 미디어쿼리문 끝 */

/****************************************************************************************************************************************
 footer 시작
*****************************************************************************************************************************************/
footer {clear: both; position: relative; margin:0 auto; padding:0; width: 100%; background:#fff}

.ft_top {position:relative; display: flex; justify-content: space-between; padding:68px 0 20px 0; text-align: left;}
.ft_logo {padding:0; max-width: 300px;}
.ft_logo > .logo_img {width:189px;}
.ft_logo > img {margin:0 auto; text-align:center; max-width: 100%;}
.ft_logo > p {margin:20px 0; line-height: 22px; font-size: 18px; text-align: left; color: rgb(40, 53, 80, 0.5)}


.ft_top > ul {padding:0 20px;}
.ft_top > ul > li.title {margin-bottom: 10px; font-size: 20px;}
.ft_top > ul > li {text-align: left;}
.ft_top > ul > li > a {display:block; padding:5px 0; font-size: 16px;text-align: left; color: rgb(40, 53, 80, 0.5)}
.ft_top > ul > li > a:hover {color:#00a0ff;}

.ft-sns-wrap {position:relative; margin:0 auto; padding:15px 0; width:100%; display: flex; justify-content: space-between; border-top:1px #efefef solid; border-bottom:1px #efefef solid}
ul.ft-sns-icon {display: flex; justify-content: flex-start; align-items: center; margin:20px auto; width:50%}
ul.ft-sns-icon > li {position: relative; margin:0 auto; padding:0 3px 0 0;}
ul.ft-sns-icon > li > img {width:20px}

.ft-app {display: flex; justify-content: flex-end; align-items: center; margin:10px auto 20px auto; width:50%}
.ft-app > img {margin:0 10px; width: 155px;}

.ft-company {display:block; margin:0 auto; padding:0 0 30px 0; width: 100%; text-align:left;}
.ft-company > p {padding:5px 0; font-size: 16px;text-align: left; color: rgb(40, 53, 80, 0.5)}

/****************************************************************************************************************************************
 미디어쿼리 footer 시작
*****************************************************************************************************************************************/
@media (max-width:929px){
    footer {padding:50px 0 0 0}
    .ft_top {margin: 0 auto; padding:0; flex-direction: column; justify-content:unset; align-items: flex-start}
    .ft_logo {display: block; margin:0 auto 10px auto; padding:0; max-width:100%; width:100%; text-align: left;}
    .ft_logo > .logo-line {display: block; margin: 36px 0; height: 1px; width: 85px; background: #8cfaaa;}
    .ft_logo > p {margin: 10px 0; font-size: 16px;}
    
    .ft_top > ul {margin:5px 0; padding:0}
    .ft_top > ul > li.title {margin-bottom:5px} 
    .ft_top > ul > li > a {padding:2px 0;}

    .ft-sns-wrap {padding:10px 0; flex-direction: column;}
    ul.ft-sns-icon,
    .ft-app {width:100%; justify-content: center;}
    .ft-company {padding:15px 0;}
    .ft-company > p {font-size:14px}

}



/****************************************************************************************************************************************
 페이지별 타이틀
*****************************************************************************************************************************************/
.page-tit {position:relative; top:76px; margin:0 auto 76px auto; width:100%; height:200px; line-height:200px; background:url('/ext/GateMIX_index_files/sub-bg.jpg') no-repeat; background-size: cover;}
.page-tit h3 {text-align: center; font-size: 32px; font-weight: 500; color:#e2e5ee;}

@media (max-width: 1420px){
    .page-tit {top:60px; margin:0 auto 60px auto;}
}

@media screen and (max-width: 767px) {
    .page-tit {height:150px; line-height:150px;}
    .page-tit h3 {font-size: 28px;}
}


/****************************************************************************************************************************************
페이지번호 시작
*****************************************************************************************************************************************/
ul.pagination {clear: both; margin:10px auto 40px auto; padding:0; width:100%; text-align: center; overflow: hidden;}
ul.pagination li {display: inline-block;}
ul.pagination li a {display:block; margin: 0 1px; width:35px; height:35px; line-height:35px; color: #fff; background: #0c111a; border: 1px solid #353d50; transition: .3s;}
ul.pagination li a:hover {background: #202c43;}

@media (max-width:767px) {
    ul.pagination li a {width:30px; height:30px; line-height: 30px;}
}