@charset "utf-8";

/*=================================================
  login
=================================================*/
.container-login {background-color: #fff; }

.login-header {position: relative; margin: 100px auto 30px;  text-align: center; }
.login-header-title {margin: 0; padding: 0; padding-top: 30px; background-image: url("../images/common/bullet_section_header.png"); background-repeat: no-repeat; background-position: center top; font-size: 40px; font-weight: 500; color: #202020; }

.login-wrapper {position: relative; width: 600px; margin: 0 auto; }
.login-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.input-login {height: 55px; margin-top: 15px; font-size: 15px; color: #1079f9; }
.input-login:first-child {margin-top: 0; }


/* login-util */
.login-util {margin: 10px 0 20px; }
.login-util:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.login-util .checkbox {float: left; }
.login-util .checkbox label {font-size: 13px; color: #555; font-weight: 300; }
.login-util .checkbox label:hover {color: #1079f9; }
.login-util .btn-link {float: right; font-size: 13px; color: #555; font-weight: 300; }
.login-util .btn-link:hover {color: #555; }

.btn-login {width: 100%; height: 60px; border-color: #1079f9; background-color: #1079f9; font-size: 18px; color: #fff; font-weight: 500; letter-spacing: 3px; }
.btn-login:hover,
.btn-login:active {color: #fff; }


/* social-login-wrapper */
.login-social-wrapper {position: relative; margin: 30px auto 0; }

.login-social-header {margin: 0 auto 20px; background-image: url("../images/common/title_line.png"); background-repeat: repeat-x;  background-position: left center;  text-align: center;}
.login-social-title {display: inline-block; padding: 0 20px; margin: 0 auto; background-color: #fff; font-size: 18px; color: #202020; }

.social-login-list {margin: 0 auto; text-align: center; }
.social-login-list li {display: inline-block; margin-left: 20px; }
.social-login-list li:first-child {margin-left: 0; }
.social-login-list li a {display: inline-block; width: 56px; height: 56px; background-repeat: no-repeat; background-position: center; border: 0; }
.btn-login-facebook {background-image: url("../images/common/icon_login_facebook.png"); }
.btn-login-google {background-image: url("../images/common/icon_login_google.png"); }
.btn-login-zalo {background-image: url("../images/common/icon_login_zalo.png"); }
.btn-login-kakao {background-image: url("../images/common/icon_login_kako.png"); }



/* login-join-wrapper */
.login-join-wrapper {position: relative; margin: 110px auto 110px; }
.login-text-box strong {font-weight: 500; }
.login-text-box p {font-size: 13px; }
.login-join-wrapper .btn-group {margin-top: 20px; }
.login-join-wrapper .btn-group .btn {height: 50px; margin-top: 10px; padding: 0; line-height: 48px; }
.login-join-wrapper .btn-group .btn:first-child {margin-top: 0; }
.login-join-wrapper .btn-group .btn:hover {background-color: #efefef; }




/*=================================================
  login - b
=================================================
.container-guest {background-color: #f7f7f7; }

.guest-content {width: 600px; margin: 0 auto; }
*/

/*=================================================
  join
=================================================*/
.container-join {background-color: #fff; }
.container-join .label-text {display: inline; }

/* page-header */
.container-join .page-header {margin-top: 40px; padding-bottom: 20px; }
.container-join .page-header strong {display: inline-block; margin-top: 20px; font-size: 40px; color: #1079f9; font-weight: 500; }
.container-join .page-header p {font-size: 16px; margin-top: 5px; }

/* agree-contaienr */
.container-join .agree-container {margin-top: 50px; }

/* join-type-box */
.join-type-box {position: relative; padding: 20px 15px;  border: 1px solid #d0d0d0;  border-radius: 3px; background-color: #fff; }
.join-type-title-header-title {font-size: 18px; font-weight: 500; color: #202020; margin-top: 0; margin-bottom: 20px; }
.join-type-title {font-size: 15px; font-weight: 400; color: #333; margin-bottom: 10px; }

/* join-step-box */
.join-step-box {margin: 55px auto; text-align: center; }
.join-step-box li {display: inline-block; font-size: 20px; line-height: 20px; color: #707070; }
.join-step-box .active {color: #1079f9; font-weight: 500; }
.join-step-box > li + li:before {content: ""; padding: 0 20px; background: url("../images/common/arrow_step.png") center center; background-repeat: no-repeat; }


/* join-agree */
.join-type {margin-top: 20px; }
.join-type:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.join-type .iradio {margin-right: 10px; margin-bottom: 3px; }

.join-type-troioi {width: 49%;  }
.join-type-sns:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.join-type-sns label {float: left; width: 49%; }
.join-type-sns label:nth-of-type(2n) {float: right; }


.join-wrapper dd:after {content: ""; display: block; clear: both; height: 0; visibility: hidden; }

.join-radio {width: 100%; padding: 10px 10px; border: 1px solid #d0d0d0; border-radius: 3px; box-sizing: border-box;  font-weight: 400; color: #202020;  cursor: pointer; }
.join-radio:hover {border: 1px solid #1079f9;  }
.join-radio.active {border-color: red; }
.join-radio .icon {display: inline-block; margin-right: 8px;  background-repeat: no-repeat; background-position: left center; background-size: contain; vertical-align: middle;  }

.icon-join-talmo {width: 60px; height: 20px;  background-image: url("../images/common/icon_join_talmo.png"); }
.icon-join-facebook {width: 60px; height: 20px;  background-image: url("../images/common/icon_join_facebook.png"); }
.icon-join-google {width: 60px; height: 20px; background-image: url("../images/common/icon_join_google.png"); }
.icon-join-zalo {width: 60px; height: 20px; background-image: url("../images/common/icon_join_zalo.png"); }
.icon-join-kako {width: 60px; height: 20px; background-image: url("../images/common/icon_join_kakao.png"); }



/* join finish */
.join-finish-box {width: 800px; padding: 100px 30px; margin: 55px auto 0; border: 1px solid #e3e3e3; text-align: center; }
.join-finish-box strong {display: inline-block; margin-bottom: 10px; padding-top: 70px; background-image: url("../images/common/icon_check_blue.png"); background-repeat: no-repeat; background-position: top center; background-size: 50px 50px; font-size: 38px; }
.join-finish-box p {font-size: 16px; color: #444; line-height: 24px;  }
.join-finish-box a {color: #444; text-decoration: underline; }
.join-finish-box + .page-bottom {margin-top: 30px; }





/*==========================================
	find
========================================== */
.find-wrapper {width: 550px; min-height: 400px; margin-top: 35px; padding: 30px; border: 1px solid #e8ecf1; border-radius: 3px; }
.find-wrapper.login-center-box {margin: 35px auto 0; min-height: 270px; }
.find-wrapper.login-left-box {float: left; }
.find-wrapper.login-right-box {float: right; }
.find-wrapper .input-text {height: 55px; margin-bottom: 15px; }
.find-wrapper .find-title {margin-bottom: 20px; font-size: 18px; font-weight: 500; color: #1079f9; }
.find-wrapper .btn-find {width: 100%; height: 60px; border: 1px solid #1079f9; background-color: #1079f9; font-size: 15px; color: #fff; }
.find-wrapper .btn-find:hover {color: #fff; }
.find-wrapper .btn-back {width: 100%; height: 60px; border: 1px solid #1079f9; background-color: #fff; font-size: 15px; color: #1079f9; }




/*===========================================================
	member-modify
===========================================================*/
.mymember-modify .page-header {margin-bottom: 80px; }
.mymember-modify .table-form {margin-top: 80px; }
 
.mymember-modify .table-form tr:first-child th,
.mymember-modify .table-form tr:first-child td {padding-top: 15px; }
.mymember-modify .table-form tr:last-child th,
.mymember-modify .table-form tr:last-child td {padding-bottom: 15px; }

.mymember-modify .table-form:first-child {margin-top: 0; }





/*===========================================================
	leave
===========================================================*/
.mymember-leave {}
.mymember-leave .form-wrapper {margin-bottom: 10px; }

.mymember-leave .list-style01 li {}

.mymember-leave .table-form tr:first-child th,
.mymember-leave .table-form tr:first-child td {padding-top: 15px; }
.mymember-leave .table-form tr:last-child th,
.mymember-leave .table-form tr:last-child td {padding-bottom: 15px; }

.mymember-leave .box-benefit:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.mymember-leave .myreward-info > div  {position: relative;  float: left; padding: 20px 20px; border-left: 1px solid #e3e3e3;  text-align: center; }
.mymember-leave .myreward-info > div:first-child {border-left: 0; } 
.mymember-leave .myreward-info  p {color: #2e5d96; font-size: 14px; margin-bottom: 10px; text-align: left;  cursor: default; }
.mymember-leave .myreward-info .benefit a {color: #2e5d96; font-size: 25px;  font-weight: 500; text-decoration: none; }

.btn-reward-application {position: absolute; top: 40px; right: 30px;}
.btn-reward-application > span {display: inline-block; width: 14px; height: 14px; padding-left: 20px; background-image: url("../images/common/icon_reward_application.png"); background-repeat: no-repeat; background-position: center center; background-size: 14px 14px; vertical-align: sub; }

.mymember-leave .box-leave {margin-bottom: 30px;}
.mymember-leave .box-leave .article {padding: 20px 0 10px; border-top: 1px solid #e3e3e3; }
.mymember-leave .box-leave .article:first-child {border-top: 0; padding-top: 0;  }
.mymember-leave .box-leave .title {margin: 0 0 15px 0; font-size: 16px; font-weight: 500; color: #202020; }
.mymember-leave .box-leave li p {color: #707070; margin-bottom: 10px;  }
.mymember-leave .box-leave li strong {display: block; font-size: 14px; font-weight: 400; color: #1079f9; }

.mymember-leave .text-caption-error {margin-top: 8px; padding-left: 22px; }

.mymember-leave .currency {font-size: 16px; font-style: normal; }