@charset "utf-8";

/*font
normal : 15px
small : 13px*/
html, body {line-height:1.5; font-size: 15px;}
html {-ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none}
body {overflow-x: hidden; font-family: 'Pretendard'; letter-spacing: -0.03rem;}
a{color: #555; text-decoration: none;}
img{max-width:100%;}
i{font-style:inherit;}
hr{border:1px dashed #ddd; border-width:0 0 1px 0; margin:20px 0;}
[lang="en"] {font-family: 'Titillium', 'Pretendard', sans-serif; letter-spacing: 0;}
h1, h2, h3, h4, h5, h6{font-size:inherit; font-weight:inherit;}

/* form control */
input,
select,
textarea,
label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; line-height:1.4; border-radius:0;}
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=submit],
input[type=button],
textarea,
select{-webkit-appearance: none;-moz-appearance: none; appearance: none; -moz-box-sizing: border-box; box-sizing: border-box; height:45px; font-size: 16px; padding: 0 10px; border: 1px solid #eee; outline: none; background:transparent; font-family: 'Pretendard', sans-serif; border-radius:5px;}
select {background:url(../images/icon_arrow.png) no-repeat; background-position: calc(100% - 10px) center; background-size: 10px auto;}
input[type=radio]{border-radius: 100%;}
input:disabled,
input:-moz-read-only{background: #ddd;border-color: #ddd;-webkit-box-shadow: none;box-shadow: none;}
input[readonly],
input[disabled]{background:#f9f9f9 !important;}
.datepicker[readonly],
.datepicker[disabled]{background-color: #f9f9f9;}
select::-ms-expand{display: none;}
textarea{resize:none;}
input[type=submit],
button{font-size:inherit; font-family: 'Pretendard', sans-serif; cursor: pointer;}
input[lang="en"],
textarea[lang="en"],
button[lang="en"] {font-family: 'Titillium', 'Pretendard', sans-serif;}

.input60{width:60px !important;}
.input80{width:80px !important;}
.input100{width:100px !important;}
.input200{width:200px !important;}
.input300{width:300px !important;}
.input400{width:400px !important;}
.inputFull{width:100% !important;}

.w30{width:30%;}
.w50{width:50%;}
.w80{width:80%;}
.w100{width:100%;}

.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr40{margin-right: 40px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt50{margin-top: 50px !important;}
.mt90{margin-top: 90px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb90{margin-bottom: 90px !important;}

/*table*/
table{border-collapse: collapse; border-spacing: 0;}
table,th,td{border:none;}
caption{overflow:hidden; line-height:0; text-indent:-2000em;}

/* placeholder */
::-webkit-input-placeholder {font-family: 'Pretendard', sans-serif; font-size: inherit;color: #999;}
::-moz-placeholder {font-family: 'Pretendard', sans-serif; font-size: inherit;color: #999;}
:-ms-input-placeholder {font-family: 'Pretendard', sans-serif; font-size: inherit;color: #999;}
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 {color: transparent;}

/*button*/
.button_area{position: relative; padding:30px 0 0; text-align:center;}
.button_area:after{content:""; display: block; clear: both;}
.button {display:inline-block; overflow:hidden; position:relative; z-index:0; min-width:100px; height:45px; padding:0 14px; margin:2px 0px; background:#41464e; border:1px solid #25282d; font-weight: 400; color:#fff; text-align:center; vertical-align:middle; -webkit-transition: all .3s; -ms-transform: all .3s; -moz-transform: all .3s; transform: all .3s;}
.button span{position:relative; z-index:2; line-height:43px; vertical-align: middle;}
.button.gray{background:#999; border-color: #999;}
/* .button.gray:hover{background:#fff; border:1px solid #333; color:#333;} */
.button.red{background:#9a0808; border:1px solid #9a0808;}
.button.blue{background:#2e418e; border:1px solid #2e418e;}
.button.green{background:#5FC265; border:1px solid #5FC265;}
.button.black{background:#333; border:1px solid #333;}
.button.white{background:#fff; border:1px solid #eee; color:#333;}
.button.file {height:40px; font-size:14px; background:#fff; border:1px solid #333; color:#444; line-height:35px;}

.button.cancel{background:#999; border:1px solid #999;}
.button.primary{background:#37b549; border:1px solid #37b549;}

.button_area .button_left{float: left;}
.button_area .button_right{float: right;}

/* checkbox */
.checkbox {display: inline-block;}
.checkbox input[type="checkbox"] {display: none;}
.checkbox label {display: inline-block; position: relative; padding-left: 28px;}
.checkbox label > span {color: #999;}
.checkbox label:before,
.checkbox label:after {content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 2px solid #eee;}
.checkbox label:before {transition: all .2s linear;}
.checkbox input:checked + label:before {border-color: #0f5ec0;}
.checkbox input:checked + label:after {content: ''; height: 2px; width: 7px; position: absolute; top: 50%; left: 11px; margin-top: -2px; transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 2px solid #0f5ec0; border-left: 2px solid #0f5ec0; border-radius: 0;}
.checkbox input:checked + label > span {color: #333;}

/* radio */
.radio {display: inline-block;}
.radio input[type="radio"] {display: none;}
.radio label {display: inline-block; position: relative; padding-left: 28px; margin-right: 15px;}
.radio label > span {color: #999;}
.radio label:before,
.radio label:after {content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 2px solid #eee; border-radius: 50%;}
.radio label:before {transition: all .2s linear;}
.radio input:checked + label:before {border-color: #0f5ec0;}
/* .radio input:checked + label:after {content: ''; height: 2px; width: 7px; position: absolute; top: 50%; left: 11px; margin-top: -2px; transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 2px solid #0f5ec0; border-left: 2px solid #0f5ec0; border-radius: 0;} */
.radio input:checked + label:after {content: ''; height: 8px; width: 8px; position: absolute; top: 9px; left: 7px; margin-top: -2px; background-color: #0f5ec0; border: 0;}
.radio input:checked + label > span {color: #333;}



/* slider arrow */
.control_box .ctrl{width:54px; height:54px; background: transparent no-repeat 50% 50%; background-size:36px auto; cursor: pointer; -webkit-transition: background .3s; -moz-transition: background .3s; -ms-transition: background .3s; -o-transition: background .3s; transition: background .3s;}
.control_box .ctrl_prev{background-image:url(/images/common/icon_arw_left.svg);}
.control_box .ctrl_next{background-image:url(/images/common/icon_arw_right.svg);}
.control_box .ctrl_prev.white{background-image:url(/images/common/icon_arw_left_white.svg);}
.control_box .ctrl_next.white{background-image:url(/images/common/icon_arw_right_white.svg);}

/*tac*/
.tac{text-align: center !important;}
.tar{text-align: right !important;}
.tal{text-align: left !important;}

/*color*/
.txt_red{color: #9a0808 !important;}
.txt_blue{color: #374f88 !important;}

/*wrap*/
.sr_only{overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0,0,0,0);}

/* A11Y */
#skip_menu {position: relative; z-index: 3000}
#skip_menu a {position: absolute; top: -30px; left: 0; width: 138px; border: 1px solid #4ec53d; background: #333; text-align: center}
#skip_menu a:active,
#skip_menu a:focus {top: 0; text-decoration: none; z-index: 1000}
#skip_menu span {display: inline-block; padding: 2px 6px 0 0; line-height: 26px; letter-spacing: -1px; font-size: 13px; color: #fff; white-space: nowrap}

::-moz-selection {background: #6b78f5; background: rgba(107,120,245,.35); color: #fff}
::selection {background: #6b78f5; background: rgba(107,120,245,.35); color: #fff}

/*주석*/
.ellip{overflow:hidden; display:block; width:100%; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis;}
.ellip2{overflow:hidden; display:-webkit-box; line-height:1.4em; max-height:3.3em; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis;}

/* 퀵메뉴 */
.quick_menu {position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 100;}
.quick_menu .quick_site {position: relative; display: block; width: 60px; height: 240px;}
.quick_menu .quick_site a {display: table; width: 100%; height: 100%; text-align: center;}
.quick_menu .quick_site:first-child a {background-color: #2e418e; border-radius: 10px 0 0 0;}
.quick_menu .quick_site:last-child a {background-color: #333; border-radius: 0 0 0 10px;}
.quick_menu .quick_site a span {display: table-cell; vertical-align: middle; color: #fff; font-size: 15px; font-weight: 600; writing-mode: vertical-rl;}
.quick_panel {padding:0; max-width:1400px; width:100%; margin:0; }
.quick_panel .depth_box {overflow: hidden; background-color: #fff; border-radius: 10px;}
.quick_panel .depth_box .tit {position: relative; display: block; background-color: #0c5cb9; text-align: center; font-family: 'GmarketSansMedium'; padding: 30px 0 25px;}
.quick_panel .depth_box .tit h3 {font-size: 24px; color: #fff; line-height: 1;}
.quick_panel .depth_menu {padding: 60px 60px; font-size: 0; display:flex; flex-wrap:wrap;}
.quick_panel .depth_menu li {width: calc(25% - 30px); margin: 0 15px; padding: 15px 0; background: url(../images/icon_link.png) no-repeat right 50%; border-bottom: 1px solid #eee;}
.quick_panel .depth_menu li a {display: block; font-size: 18px; font-weight: 600;}
.quick_panel .depth_menu li a:hover {color: #0c5cb9; text-decoration: underline;}

/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width:1600px){
	.control_box .ctrl{width: 42px; height: 42px;}
}

@media (max-width:1440px){	
	/* 퀵메뉴 */
	.quick_panel{width:80%;}
	.quick_panel .depth_menu{justify-content:space-between;}
	.quick_panel .depth_menu li {width: calc(50% - 30px);}
}

@media (max-width:1024px){
	.mobile_none{display: none !important;}
	.sr_not_mobile{overflow:visible; position:static; margin:0; width:auto; height:auto; clip:unset;}

	input,
	select,
	textarea,
	label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; line-height:1.4;}
	input[type=text],
	input[type=tel],
	input[type=email],
	input[type=password],
	input[type=url],
	input[type=submit],
	input[type=button],
	textarea,
	select {height: 40px;}

	.button{min-width:92px; height:40px;} /*-5*/
	.button span{line-height:38px;}

	/* 퀵메뉴 */
	.quick_menu {display: none;}

}
@media (max-width:768px){
	html, body {line-height:1.5; font-size: 14px;}	

	/* 퀵메뉴 */
	.quick_panel .depth_box .tit h3{font-size:20px;}
	.quick_panel .depth_menu{padding:10px 20px 30px;}
	.quick_panel .depth_menu li {width: 100%;}

}
@media (max-width:576px){
	/* .button_area{padding: 20px 0 0;} */
	.button_area .button_left,
	.button_area .button_right{float: none; display: inline-block; vertical-align: middle;}


	.input300,
	.input400,
	.inputFull{width:100% !important;}

}
@media (max-width:425px){
	.control_box .ctrl{width: 32px; height: 32px;}

	/* 퀵메뉴 */
	.quick_panel{width:98%;}
}