@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

/*-----font-----*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    src: local('Pretendard Black'), url(/assets/font/Pretendard-Black.woff2) format('woff2'), url(/assets/font/Pretendard-Black.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    src: local('Pretendard ExtraBold'), url(/assets/font/Pretendard-ExtraBold.woff2) format('woff2'), url(/assets/font/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: local('Pretendard Bold'), url(/assets/font/Pretendard-Bold.woff2) format('woff2'), url(/assets/font/Pretendard-Bold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    src: local('Pretendard SemiBold'), url(/assets/font/Pretendard-SemiBold.woff2) format('woff2'), url(/assets/font/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    src: local('Pretendard Medium'), url(/assets/font/Pretendard-Medium.woff2) format('woff2'), url(/assets/font/Pretendard-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: local('Pretendard Regular'), url(/assets/font/Pretendard-Regular.woff2) format('woff2'), url(/assets/font/Pretendard-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    src: local('Pretendard Light'), url(/assets/font/Pretendard-Light.woff2) format('woff2'), url(/assets/font/Pretendard-Light.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    src: local('Pretendard ExtraLight'), url(/assets/font/Pretendard-ExtraLight.woff2) format('woff2'), url(/assets/font/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    src: local('Pretendard Thin'), url(/assets/font/Pretendard-Thin.woff2) format('woff2'), url(/assets/font/Pretendard-Thin.woff) format('woff');
}

@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    src: local('GmarketSansTTFLight'), url(/template//assets/font/GmarketSansTTFLight.woff2) format('woff2'), url(/template//assets/font/GmarketSansTTFLight.woff) format('woff');
}

@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    src: local('GmarketSansTTFMedium'), url(/template//assets/font/GmarketSansTTFMedium.woff2) format('woff2'), url(/template//assets/font/GmarketSansTTFMedium.woff) format('woff');
}

@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    src: local('GmarketSansTTFBold'), url(/template//assets/font/GmarketSansTTFBold.woff2) format('woff2'), url(/template//assets/font/GmarketSansTTFBold.woff) format('woff');
}



body{line-height: 1.25; letter-spacing: -1px; font-size: 20px; font-weight: 400; color: #333; font-family: 'Noto Sans KR', sans-serif; }
* {box-sizing: border-box}
p{line-height: 1.5;}
img{max-width: 100%;vertical-align: top;}


/*----- custom class -----*/
.cb:after{display: block; content: ""; clear: both;}
.primary{color: #5ad5c4 !important}
.primary_dark{color: #3b478b !important}
.mt-1{margin-top:3px;}
.m_block{display: none;}
.center{text-align: center}
.ellipsis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.ani{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;}
.bullet {
    position: relative;
    padding-left: 15px;
}
.bullet:before {
    position: absolute;
/*    top: 0.45em;*/
    left: 0;
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    background-color: #3b478b;
}

.checkmark {position: absolute; top: 2px; left: 0; height: 18px; width: 18px; background-color: #ddd;}
.checkmark:after {content: ""; position: absolute; display: none;}
.chk{position: relative;margin: 10px 10px 10px 0; padding-left: 25px; font-weight: 400; cursor: pointer}
.chk:hover input ~ .checkmark {background-color: #ccc;}
.chk input:checked ~ .checkmark {background-color: #42c0af}
.chk input:checked ~ .checkmark:after {display: block;}
.chk input[disabled]{opacity: 0}
.chk .checkmark:after {left: 6px; top: 2px; width: 5px; height: 10px;border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);}
.chk.round .checkmark {border-radius: 50%;}

input[type='file'] {display: block; width: 0;height: 0;overflow: hidden;}
.file_box{position: relative; padding-left: 98px;}
.file_box .upload-name {
    height: 42px;
    padding: 0 10px;
    vertical-align: middle;
    border: 1px solid #dddddd;
    width: 100%;
    color: #999999;
}
.file_box label {    position: absolute;
    left: 0;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    vertical-align: middle;
    background-color: #999999;
    cursor: pointer;
    height: 42px;
}
.file_box input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}



/***** header *****/
#header{position:fixed; width: 100%; padding: 20px 0; z-index: 100}
#header .wrap{width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
#header .logo{display: block; width: 233px;}
#header nav li{float: left;font-family: 'Pretendard', 'Noto Sans KR', sans-serif;}
#header nav li:not(:last-child){margin-right: 40px}
#header nav li a{font-size: 1.1em; color: #fff;transition:all 0.2s ease;}
#header nav li a:hover{color:#fce207;}

#header.fixed{background-color: rgba(0,0,0,.6)}


#header .btn_side{display: none}
.btn_side{display: none;position: absolute;top: 10px;right: 10px;z-index: 100}
.btn_side a{position: relative;top: 0;left: 0;margin: 0 auto;display: block;padding: 10px}
.btn_side span{display: block;width: 30px;height: 2px;margin:6px 0; background-color: #fff;}


/* side_menu */
#side_wrap {display: none; width:100%;height: 100%; position:fixed; top: 0;left: 0; z-index:9999; background:#fff; overflow: hidden;text-align: left}

#side_wrap .side_top .t_box{position: relative; padding: 20px 0; border-bottom: 2px solid #005bac}
#side_wrap .side_top .t_box .side_close{position: absolute; top: 23px; right: 20px; display: block; width: 23px; color: #fff; opacity: .6; cursor: pointer}
#side_wrap .side_top .t_box .menu_logo{width: 170px; margin: 0 auto;}
#side_wrap .side_top .t_box a{position: absolute; top: 30px; right: 20px; display: block; width: 27px; color: #fff;}

#side_wrap .side_menu li{text-align: center; padding:20px 30px; font-size: 1.1rem; font-weight: 500; border-bottom: 1px solid #eee;}
#side_wrap .side_menu li a{color: #222;}



/***** footer *****/
#footer{background-color: #303030}
#footer .wrap{width: 1200px; margin: 0 auto; padding: 30px 0; color: #bbb;font-size: 0.9em}
#footer ul{float: left}
#footer li{float: left}
#footer li:first-child{margin-right: 40px;}
#footer li span{display: inline-block; margin-right: 10px; padding: 8px 14px; color: #fff; background-color: #525252}
#footer li b{font-weight: 700;}
#footer li b:last-child{margin-left: 20px}
#footer p{float: right; padding-top: 8px;}

#quick_menu{position: fixed; right: 20px; bottom: 60px; border-top-left-radius: 30px; ;border-bottom-left-radius: 30px; overflow: hidden; z-index: 20}
#quick_menu li{margin-bottom:10px;}
#quick_menu li a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:120px;height:120px;border-radius:100%;text-align: center; font-size: 0.8em;font-weight:500;color:#FFF; background-color:#034797;}
#quick_menu li a .quick_inner{}
#quick_menu li:first-child a{color:#034797}
#quick_menu li a .quick_inner span{display: block;}
#quick_menu li a .quick_inner .img{padding-bottom:8px;}

#quick_menu li:first-child a{background-color: #fce207}



/***** 공통 클래스 *****/
input[type=text],
input[type=email]{display: block; width: 100%; padding: 10px; font-size: 1em; border: 1px solid #ddd; box-sizing: border-box}

/* style01 */
.chk_box label{cursor: pointer}
.chk_box label:not(:last-child) {margin-right: 20px}
.chk_box [type="radio"] {margin-top: -1px;appearance: none;
  border: 1px solid #666;border-radius: 50%;width: 1.5em;height: 1.5em;transition: border 0.15s ease-in-out;}
.chk_box [type="radio"]:checked {border: 0.4em solid tomato;}
.chk_box [type="radio"]:hover {border-color: tomato;cursor: pointer;}
.chk_box [type="radio"]:hover + span {cursor: pointer;}
.chk_box [type="radio"]:disabled {background-color: lightgray; box-shadow: none; opacity: 0.7;cursor: not-allowed;}
.chk_box [type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}
.chk_box [type="radio"]:disabled:hover{border-color: #666}

/* style02 */
.f_box input[type=radio]{display: none;}
.f_box input[type=radio]+label{display: inline-block; padding: 20px 20px; cursor: pointer; border: 1px solid #ccc;}
.f_box input[type=radio]+label{background-color: #fff; color: #333;}
.f_box input[type=radio]:checked+label{background-color: #fff; color: #fff;}

.btn_wrap{padding-top: 60px; text-align: center}
.btn{padding: 20px 20px; font-size: 0.9em; background-color: #eee; cursor: pointer}
.btn.primary{background-color: #222; color: #fff;}

.cb:after{display: block; content: ""; clear: both;}