@charset "UTF-8";

/*
* File    : common.css
* Author  : MYLINK HOME
* Date    : 2025.05.14
*/


/* **************************************** *
*  header
* **************************************** */

header {position: fixed; top: 0; width: 100%; height: 85px; padding: 0 5vw; background: transparent; border-bottom: 1px solid #ffffff33; z-index: 100;}
header .wrap{display: flex; justify-content: space-between; align-items: center; max-width: 1800px; margin: 0 auto; height: 100%;}
header > .wrap .gnb-btn{border-radius: 50px; background:#373737; border:none; color:#fff; font-size:15px; height:32px; min-height: 32px; padding:0px 16px; min-width: auto; width: auto}

header h1 a {display: inline-block; width: 160px; height: 40px;}
.gnb {display: flex; gap: 80px;}
.gnb > li {position: relative; display: flex; align-items: center; height: 80px;}
.gnb > li > a {font-size: 1.8rem; font-weight: 600; color: #fff; text-decoration: none; position: relative; transition: color 0.3s;}
.gnb > li > a::after{content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px; background: transparent; transition: background 0.3s;}
.gnb > li > a:hover::after,
.gnb > li > a.active::after {background: #fff; animation: scale-up-hor-center 0.4s ease forwards;}
.gnb > li .lnb {display: none; position: absolute; top: 100%; left: 0; width: 250px; background: #fff; border-radius: 15px; padding: 8px 16px; box-shadow: 0 5px 12px rgba(0,0,0,0.1);}
.gnb > li:hover .lnb {display: block;}
.gnb > li .lnb {display:none; background:#fff; width:250px; border-radius:15px; position:absolute; left:0px; text-align:left; top:60px; padding:8px 16px; box-shadow:1px 1px 10px #00000010}
.gnb > li .lnb > li{border-bottom:1px solid #e5e5e5; padding:12px 8px; cursor:pointer;}
.gnb > li .lnb > li > a{font-size:1.8rem; font-weight:500; color:#aaa;}
.gnb > li .lnb > li > a > span{font-size:inherit; display:block; color:#888; font-weight:600}
.gnb > li .lnb > li:hover > a{color:#333; transition:0.8s}
.gnb > li .lnb > li:hover > a > span{color:#008CD4; transition:0.8s}
.gnb > li .lnb > li:last-child{border-bottom:none;}

.lnb > li {padding: 12px 8px; border-bottom: 1px solid #e5e5e5;}
.lnb > li:last-child {border-bottom: none;}
.lnb a {font-size: 1.6rem; font-weight: 300; color: #aaa; display: block; transition: 0.3s;}
.lnb a span {display: block; color: #888; font-weight: 600; font-size: inherit;}
.lnb li:hover a {color: #333;}
.lnb li:hover a span {color: #008CD4;}

.header-w {-webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease; box-shadow: 0px 0px 8px rgb(0 0 0 / 10%); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(2px);}
.header-w .gnb > li{display: inline-flex; cursor:pointer;}
.header-w .gnb > li > a {color: #111; z-index: 99;}
.header-w .gnb > li > a::after{content: ""; width: 100%;  height: 2px; display: block; background: transparent;}
.header-w .gnb > li > a:hover::after{content: ""; width: 100%;  display: block; height: 2px; background:#111;
 -webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
.header-w .gnb > li > a:active::after,
.header-w .gnb > li > a.active::after{content: ""; width: 100%;  display: block; height: 2px; background:#111;}
.header-w > .wrap .mylink{background:url(../images/logo_mylink.svg) no-repeat center; width: 160px; height: 40px; }


/* mobile */
.gnb-btn {border-radius: 50px; background: #373737; border: none; color: #fff; font-size: 1.5rem; height: 32px; padding: 0 16px; cursor: pointer;}
.gnb_menu .bar-menu:before{display:none; position: absolute; top: 24px; right: 0px; content: "\e91c"; font-family: 'xeicon'; font-size: 32px; width: 32px; height: 32px; font-weight: lighter; cursor: pointer;}
.gnb_menu_m{display:none;}
.gnb_menu_m.active { display: block; position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; z-index: 10000001; background: #fff}
.gnb_menu_m .mylink{ position:absolute; top:20px; left:26px;  background:url(../images/logo_mylink.svg) no-repeat center !important; width: 160px; height: 40px; cursor:pointer }
.gnb_menu_m h1.mylink > a{display: inline-block; width: 160px; height: 40px;}
.gnb_menu_m span.close:before { position: absolute; content: "\e921"; font-size:1.6rem; color: #aaa; font-family: 'xeicon'; display: block; z-index: 99; right: 5vw; top:27px; cursor:pointer; }
.gnb_menu_m .gnb{flex-direction:column; margin-top:80px; overflow:auto; height:85vh; gap:16px; padding-bottom:100px;}
.gnb_menu_m .gnb li{text-align:center; padding:16px 0px; display:block; height:auto;}
.gnb_menu_m .gnb > li > a{color:#aaa; font-size:2.8rem;}
.gnb_menu_m .gnb > li > a:hover,
.gnb_menu_m .gnb > li > a:active{color:#333}
.gnb_menu_m .gnb > li > .button{background:#008cd3; color:#fff;}
.gnb_menu_m .gnb > li .lnb{display:block; width:90%; position:relative; margin:0 auto; top:initial; background:initial; border-radius:initial; padding:0px; margin-top:16px; box-shadow:none; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0}
.gnb_menu_m .gnb > li .lnb > li{height:initial;  border-bottom:0px;  margin:0 auto;}
.gnb_menu_m .gnb > li .lnb > li > a {font-size:2.6rem; font-weight:normal}
.gnb_menu_m .gnb .gnb-btn{border-radius: 50px; background:#373737; border:none; color:#fff; font-size:16px; height:42px; min-height: 42px; padding:0px 24px; margin-top:12px}



/* logo */
.logo {width: 160px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.logo.mylink {background-image: url('../images/logo_mylink.svg');}
.logo.linkbiz {background-image: url('../images/logo_linkbiz.svg');}
.mylink{ background:url(../images/logo_mylink.svg) no-repeat center; width: 160px; height: 40px; }
.linkbiz{ background:url(../images/logo_linkbiz.svg) no-repeat center; width: 140px; height: 40px; }


/* 다국어 전환 */
.lang-btn-wrap {position: relative; width: 96px; font-size: 1.6rem;}
.lang-selected{display:flex; align-items:center; justify-content:center; gap:20px; width: 100%; height:44px; padding: 6px 0; border: 1px solid transparent; background: #fff; color:#111; cursor: pointer; border-radius: 8px; font-size: 1.6rem}
.lang-selected i{font-size: 1.8rem; color:#aaa}
.lang-selected:focus,
.lang-selected:active{border-color:#ddd}
.lang-dropdown {position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid #ddd; border-top:0px; background: #fff; border-radius: 0px 0px 8px 8px; display: none; z-index: 10; overflow:hidden;}
.lang-dropdown li a{display: inline-flex; align-items:center; justify-content:center; width:100%; height: 42px; text-align: center; padding: 6px 0;  color: #333;}
.lang-dropdown li a:hover {background: #F4F4F4; color:#008CD4}


/* **************************************** *
*  footer
* **************************************** */
.footer{position: relative; display: flex; align-items:center; justify-content:center; bottom: 0; width: 100%; background: #fff; height: 306px; padding: 80px 5vw 130px 5vw; border-top:1px solid #E8E8E8; }
.footer-inner{display:flex; gap:90px; width: 100%; max-width: 2000px}
.footer-inner .mylink{ flex:none; width: 150px; height: 30px; background: #727171; 
	-webkit-mask-image: url(../images/logo_mylink.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
 	 mask-image: url(../images/logo_mylink.svg); mask-repeat: no-repeat; mask-position: center;  mask-size: contain;}

.footer-inner .company-info{display: flex; flex-direction:column; gap:20px; flex:1 auto }
.footer-inner .company-info > ul{display: flex; gap:40px}
.footer-inner .company-info > ul > li{display:flex; gap:8px; color:#333; font-size: 1.6rem; font-weight:600}
.footer-inner .company-info > ul > li > span{color:#555; font-weight:400}
.footer-inner .company-info > address{line-height:28px;}
.footer-inner .company-info > address > p{display:flex; gap:8px; color:#333; font-size: 1.6rem; font-weight: 600; word-break:auto-phrase}
.footer-inner .company-info > address > p > span{color:#555; font-weight:400; flex:none}
.footer-inner .company-etc{display: flex; flex-direction:column; gap:50px; align-items:flex-end;}

.footer-inner .company-etc .social > ul{display: flex; gap:34px}
.footer-inner .company-etc .social > ul > li > a {display:block; width:36px; height:20px;}
.footer-inner .company-etc .social > ul > li > a > span{display: none}
.footer-inner .company-etc .social .youtube a{background: url(../images/content/icon_youtube.svg) no-repeat;}
.footer-inner .company-etc .social .blog a{ background: url(../images/content/icon_blog.svg) no-repeat; }
.footer-inner .company-etc .social .insta a{ background: url(../images/content/icon_insta_g.svg) no-repeat;}
.footer-inner .company-etc .social .facebook a{ background: url(../images/content/icon_facebook_g.svg) no-repeat; }
.footer-inner .company-etc .social .link a{ background: url(../images/content/icon_link.svg) no-repeat; }
.footer-inner .company-etc .copy{color:#999; font-size:  1.6rem; text-align: right;}



/* **************************************** *
*  관리자 로그인
* **************************************** */

.login-layout{background:url(../images/main/section_bg01.png) no-repeat center; background-size:cover; width:100%; height:100%; display:flex; align-items: center; justify-content: center}
.gate-login-wrap{width:1024px; height:420px; flex:none; position:relative;}
.login-intro{height:420px; padding-top:24px}
.login-intro .mylink{background:url(../images/logo_mylink.svg) no-repeat center; margin-bottom:42px; width: 164px; height: 32px; }
.login-intro .txt{font-size:3.2rem; color:#222;} 
.login-intro .txt strong{font-weight: 900}

.login-form {position:absolute; top:0px; right:0px; width:460px; background:#fff; border-radius: 30px; box-shadow:2px 5px 32px 18px rgb(0 0 0 / 2%); padding: 60px 40px 60px;}
.login-form .tit{font-size:2.4rem}


.login-form form {margin-bottom: 20px}

.login-form .inputxt-login {position: relative; margin-bottom: 25px;}

.login-form fieldset{margin:24px 0px}
.login-form .inputxt-login::after {content: ''; position: absolute; width: 100%; height: 2px; background: #ddd; left: 0; bottom: 0}
.login-form .inputxt-login:last-child {margin-bottom: 0}
.login-form .inputxt-login label {position: absolute; left: 15px; top: 0; width: 24px; height: 100%; padding-top: 15px; text-align: center; font-size: 24px; color: #aaa; box-sizing: border-box}

.login-form .inputxt-login input {width: 100%; height: 60px; margin: 0; padding: 1px 0; font-size: 16px; font-weight: normal; color: #202020; letter-spacing: -0.2px; background-color: #fff; border: none; text-indent: 12px; outline: none; box-sizing: border-box; transition: all .20s ease}

.login-form .inputxt-login:hover label {color: #5629ee;}

.login-form .inputxt-login input::-webkit-input-placeholder {color: #999; font-family: 'ptd', 'roboto', 'sans-serif' !important; font-weight: normal;  font-size: 16px}
.login-form .inputxt-login input:-ms-input-placeholder {color: #999; font-family: 'ptd', 'roboto', 'sans-serif' !important; font-weight: normal; font-size: 16px}
.login-form .inputxt-login input::-moz-placeholder {color: #999; font-family: 'ptd', 'roboto', 'sans-serif' !important; font-weight: normal; font-size: 16px}
.login-form .inputxt-login input::placeholder {color: #999; font-family: 'ptd', 'roboto', 'sans-serif' !important; font-weight: normal; font-size: 16px}

.login-form .inputxt-login input[disabled], .login-form .inputxt-login input[readonly] {background: #f2f4f5}
.login-form .inputxt-login input:-webkit-autofill {
    font-size: 15px;
    font-weight: normal;
    color: #202020;
    letter-spacing: -0.2px;
    -webkit-box-shadow: 0 0 0 0 #fff inset;
    -webkit-text-fill-color: #202020
}

.login-form .inputxt-login input:-webkit-autofill, .login-form .inputxt-login input:-webkit-autofill:hover, .login-form .inputxt-login input:-webkit-autofill:focus, .login-form .inputxt-login input:-webkit-autofill:active {
    font-size: 15px;
    font-weight: normal;
    color: #202020;
    letter-spacing: -0.2px;
    transition: background-color 5000s ease-in-out 0s
}



.login-form .confirm-type .confirm-btn {
    display: flex; align-items:center; justify-content:center; width: 100%; height:72px; margin-top: 40px; font-weight: 500; font-size: 1.8rem; letter-spacing: 0;
    border: 0;
    text-align: center;
    color: #fff;
    background:#008CD4;
    border-radius: 100px;
    cursor: pointer;
    outline: none; box-sizing: border-box;}

.login-form .confirm-type .confirm-btn:hover {
    background: #0078b6;
}

.gate-login-footer .copyright{font-size:1.4rem; color:#999}


/* form ty2 */
.form-field ul li div.form.solution{flex:1 auto; font-family: 'noto'; font-weight: 600}
.form-field ul li div.form.solution ul{display:grid; grid-template-columns: repeat(3, 1fr) }
.form-field ul li div.form.solution ul .ImageCheckbox span{word-break:break-all; overflow-wrap:break-word; white-space:normal}

/* form ty3 */
.form-field.ty3{width:100%; padding:0px 24px}
.form-field.ty3 > ul {border:none; padding:12px 0px}
.form-field.ty3 > ul  li{display: flex; align-items:center; padding:8px 12px; border-left:2px solid transparent}
.form-field.ty3 > ul  li:last-child{border-bottom:none}
.form-field.ty3 > ul li div{font-size:16px; color:#202020}
.form-field.ty3 > ul li div.tit{flex:none; width:100px; font-weight:600; word-break:keep-all; font-size:17px; margin-right:12px}

/* **************************************** *
*  관리자 로그인
* **************************************** */
.quick {display: flex; gap: 24px; position: fixed; right: 5vw; bottom: 10vh; z-index: 99; }

.quick .button {position: relative; display: inline-flex; align-items: center; gap: 12px; padding:0px 32px; transition: all 0.3s ease; height: 80px; width: initial; min-height: 80px; min-width: initial; border-radius: 80px; box-shadow: 0px 0px 20px 0px #ffffff40; background: #111}
.quick .button span {font-size:2rem; font-weight:700; color:#fff}
.quick .button i {transition: transform 0.3s ease;}

.quick .button:hover i {transform: translateX(4px);}