@charset "UTF-8";

/*버튼*/

.button { display: inline-block; text-decoration: none; -webkit-appearance: none;  border:none; box-sizing: border-box; cursor: pointer !important; vertical-align: middle; text-align: center; overflow: hidden; font-size: 19px; font-weight: 300;}

.button.small {padding: 0 15px; height: 30px; line-height: 30px; min-width: 110px;  }
.button.medium {padding: 0 25px; height: 50px; line-height: 50px }
.button.large {padding: 0 40px; height: 60px; line-height: 60px}
.button i {font-size: 1.2em;}

.small.circle {border-radius: 15px;}
.medium.circle {border-radius: 19px;}
.large.circle {border-radius: 25px;}

.button.curve {border-radius: 3px;}

.button.full {width: 100%; padding: 0 !important;}
.button.w120 {width: 120px; padding: 0 !important;}
.button.w170 {width: 170px; padding: 0 !important;}
.button.w200 {width: 200px; padding: 0 !important;}
.button.w250 {width: 250px; padding: 0 !important;}
.button.w300 {width: 300px; padding: 0 !important;}

.button.black {border:1px solid #000; color: #000;}
.button.blackBg {background-color: #000; color: #fff;}
.button.blackBgY {background-color: #000; color: #ffdb33;}
.button.yellow {background-color: #ffdb33; color: #000;}
.button.greenBd {border:1px solid #009e96; color: #009e96;}
.button.green {background-color: #009e96; color: #fff;}
.button.greenBd {border:1px solid #009e96; color: #009e96;}
.button.blue {background-color: #1d77ff; color: #fff;}
.button.blueBd {border:1px solid #009e96; color: #009e96;}
.button.gray {background-color: #a3a09c; color: #fff;}
.button.gray2 {background-color: #313131; color: #fff;}
.button.grayBd {border: 1px solid #a3a09c; color: #fff;}
.button.white {border:1px solid #fff; color: #fff;}
.button.whiteBg {border:1px solid #fff; background: #fff; color: #3864eb;}
.button.textBtn { padding: 0px; text-align: left; font-size: 1.2em; color: #023a78; border-radius: 0;  min-width: 0; border-bottom: 2px solid #fff; } 
.button.textBtn i  { font-size: 1.4em; margin-right: 5px;}

.button.black:hover, .button.black:focus {  background: #000; color: #fff  !important; }
.button.blue:hover, .button.blue:focus { background: #0954ab;    }
.button.blackBgY:hover, .button.blackBgY:focus { background: #111;    }
.button.gray2:hover, .button.gray2:focus {background-color: #222; color: #fff;}
.button.pink:hover, .button.pink:focus { }
.button.white:hover, .button.white:focus { background: #fff;  color: #000 !important; }
.button.textBtn:hover, .button.textBtn:focus, a:hover .button.textBtn {border-bottom:2px solid  #023a78; }

.buttonWrap { padding: 20px 0; text-align: center; overflow: hidden;  }

.icon {display: inline-block; text-indent: -9999px; background-repeat: no-repeat}
.icon.arrowToR {width: 21px; height: 16px; margin: 0 10px;}
.icon.arrowToR.yellow {background-image: url(../images/icon_arrowToR_yellow.png);}
.icon.arrowToR.blk {background-image: url(../images/icon_arrowToR_blk.png);}
.icon.arrowToR.violet {background-image: url(../images/icon_arrowToR_violet.png);}

.icon.sns {width: 40px; height: 40px;}
.icon.sns.face {background-image: url(../images/5_1_sns_facebook.png);}
.icon.sns.twt {background-image: url(../images/5_1_sns_twt.png);}
.icon.sns.insta {background-image: url(../images/5_1_sns_insta.png);}
.icon.sns.never {background-image: url(../images/5_1_sns_never.png);}

/*input*/
.inputWrap { height: 50px; box-sizing: border-box; overflow: hidden; border-radius: 25px; border: 1px solid #ddd; width: 100%; }
.inputWrap input { width: 100%; color: #4b4b4b; display: block; padding: 0 25px; line-height: 50px; box-sizing: border-box; font-size: 1.4em;}


/* text-align */
.taC {text-align: center !important;}
.taL {text-align: left !important;}
.taR {text-align: right !important;}

/* color */
.t_blue {color: #8bbef8;}

/* list */
.disc_list li {position: relative; padding-left: 11px; line-height: 1.3; margin-bottom: 6px;}
.disc_list li:before {display: block; content: ""; width: 4px; height: 4px; background: #73716e; border-radius: 2px; position: absolute; left: 0; opacity: .5;}


/* input */
.inputArea {display: block;}
.inputArea label, .label {font-size: 18px; color: #73716e; height: 60px; line-height: 60px; margin-right: 10px;}
.topLabel label {display: block; text-align: left;}
.inputArea.full {width: 100%;}

/* text */
.inputArea input[type="text"], .inputArea input[type="password"], inputArea input[type="email"], .inputArea input[type="number"] {height: 60px; line-height: 60px; font-size: 16px; color: #444; background: #fff; border: 0 none; box-sizing: border-box; padding: 0 10px;border-radius: 3px !important;}

.inputArea.full input {width: 100%;}
.inputArea.w55 input {width: 55px;}

.inputArea.select select {width: 100%; height: 60px; line-height: 60px; font-size: 16px; color: #444; background: #fff url(../images/select_arrow.png) right center no-repeat; border: 0 none; box-sizing: border-box; padding: 0 10px; -webkit-appearance: none; appearance: none; border-radius: 3px !important;}

.inputArea.select select::-ms-expand {display: none;}

/* check */
.inputArea.check input[type="checkbox"]  {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 }
.inputArea.check input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.inputArea.check input[type="checkbox"] + label:before {content: ' '; display: inline-block; width: 16px;  height: 16px;  line-height: 16px;  margin: -2px 10px 0 0; text-align: center; vertical-align: middle; background: transparent; border: 2px solid rgba(67, 91, 182, .3); -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } 
.inputArea.check input[type="checkbox"] + label:after {content: ""; position: absolute; z-index: -1; top: 12px; left: 0; width: 18px;  height: 18px;  line-height: 16px;  margin: 8px 10px 0 1px; text-align: center; vertical-align: middle; background: #435bb6;  -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.inputArea.check input[type="checkbox"] + label:hover:before, .check input[type="checkbox"] + label:hover:focus {border: 2px solid #435bb6}
.inputArea.check input[type="checkbox"] + label.checked:before {z-index: -1}
.inputArea.check input[type="checkbox"] + label.checked:after {-webkit-transform: scale(1); transform: scale(1); z-index: 11;}


.radio_area .input_wrap label {position: relative; padding-left: 26px; line-height: 50px;}
.radio_area .input_wrap label:before, .radio_area .input_wrap label:after {display: block; content: '';  border: 1px solid #000; border-radius: 8px; position: absolute;  box-sizing: border-box;}
.radio_area .input_wrap label:before {width: 16px; height: 16px; left: 0; top: 2px;}
.radio_area .input_wrap label:after {width: 0; height: 0; background: #000; left: 7px; top: 9px; border: 0 none;}
.radio_area .input_wrap label.on:after {width: 16px; height: 16px; left: 0; top: 2px; transition: ease-in-out .2s}
.radio_area .input_wrap input[type="radio"] {position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden}


.input_wrap.inBtn {}
.input_wrap.inBtn .input {width: 100%; float: left; padding-left: 130px; margin-left: -130px; box-sizing: border-box}
.input_wrap.inBtn .button {float: right; width: 120px;}

.input_area .label_wrap, .input_area .input_wrap{float: left;}

.table {width: 100%; border: 4px solid #bcc2c9;}
.table_title {color: #687880; font-size: 27px; margin-bottom: 15px;}
.table th, .table td {border: 2px solid #bcc2c9; font-size: 21px; padding: 20px; text-align: center; letter-spacing: -.4px}
.table thead th, .table thead th a {background: #eaedf1; color: #67777f; font-weight: 400;}
.table tbody td, .table tbody td a {background: #fff; color: #3f3b35;}


.star_list li {padding-left: 15px; position: relative; margin-bottom: 15px;}
.star_list li:last-child {margin-bottom: 0;}
.star_list li:before {display: block; content: '*'; font-size: 27px; color: #67777f; position: absolute; left: 0; top: 15px; line-height: 13px;}

/* tabs */
.tabs {width: 100%;}
.tabs.col2 .tab {width: 50%;}
.tabs.col3 .tab {width: 33.33%;}
.tabs.col4 .tab {width: 25%;}
.tabs.col5 .tab {width: 20%;}
.tab {float: left; display: block; background: transparent; border: 1px solid #000; border-right: 0 none; line-height: 48px; height: 50px; box-sizing: border-box}
.tab.on {background: #000; color: #fff;}
.tab:last-child {border-right: 1px solid #000}

.tab_contents .tab_content {display: none;}
.tab_contents .tab_content.on {display: block;}


@media all and (max-width: 1280px) {
 
}
@media all and (max-width: 1080px) {
	.ribbon { font-size: 1.4em; padding: 2px 5px;}
	
}
@media all and (max-width: 1024px) {

}

@media all and (max-width: 768px) {
	.ribbon {left: 15px;}
	.inputArea label, .label {font-size: 15px;}
	.inputArea input[type="text"], .inputArea input[type="password"], inputArea input[type="email"], .inputArea input[type="number"], .inputArea.select select {font-size: 13px;}
}
@media all and (max-width: 680px) {
	.radio_area .input_wrap label.on:after, .radio_area .input_wrap label:before {top: -1px;}
	
}
	
@media all and (max-width: 479px) {
	.button {font-size: 14px;}
	.button.medium {padding: 0 25px; height: 40px; line-height: 40px }
	.button.large {padding: 0 40px; height: 50px; line-height: 50px}
	
	
	.button.w120 {width: 100px; padding: 0 !important;}
	.button.w170 {width: 150px; padding: 0 !important;}
	.button.w200 {width: 170px; padding: 0 !important;}
	.button.w250 {width: 230px; padding: 0 !important;}
	.button.w300 {width: 270px; padding: 0 !important;}
	
	.radio_area .input_wrap label:before, .radio_area .input_wrap label.on:after {width: 10px; height: 10px;top: 1px;}
	.radio_area .input_wrap label:after  {left: 5px; top: 5px;}
	
	.icon.sns {width: 20px; height: 20px; background-size: 20px 20px}
	.inputArea label, .label, .inputArea.select select, .inputArea input[type="text"], .inputArea input[type="password"], inputArea input[type="email"], .inputArea input[type="number"] {line-height: 50px; height: 50px;}
}

@media all and (max-width: 320px) {
	
}