@charset "UTF-8";

/* Common. Column Grid 1200px - 1599px (Site Default 1200px)
----------------------------------------------------------------------------- */

/* 1. 1 Column Grid 0px - 399px
----------------------------------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:399px){
	.mypage-cont h3{margin-bottom: 10px;}
	.booking-area .join-area .join-inner{margin-top: 0 !important;}
	.top-cont{align-items: flex-start; flex-direction: column;}
	.top-cont .data-control{justify-content: space-between; width: 100%; margin-bottom: 10px;}
	.top-cont .data-control strong{margin: 0;}
	.top-cont .today{margin-left: 0;}
}
/* 2. 1 Column Grid 400px - 767px
----------------------------------------------------------------------------- */
@media screen and (min-width:400px) and (max-width:767px){
}

/* 2. 2 Column Grid Infinity - 767px
----------------------------------------------------------------------------- */
@media screen and (min-width:767px){
}

@media screen and (max-width:767px){
	.options-btn button{width:100%;}
	.current-data{display: none; margin-top: 30px; text-align: center;}
	.current-data .time{font-size: 1.25em;}
	.content-layout {margin-top: 10px;}
	.content-layout .main-menu li{margin-bottom: 18px;}
	.content-layout .main-menu li a{margin: 0 auto; width: 90%; border-radius: 16px; height: 100px;}
	.content-layout .main-menu li a span{margin-top: 5px;}
	.content-layout .contents { padding: 0 3%;}
	.content-layout h2{margin-bottom: 10px; font-size: 1.1em; font-weight: bold;}
	.mid-cont{margin-top: 10px;}
	.booking-ul li{padding: 25px 20px 10px 20px}
	.access-link .booking-info span{display: block;}
	.access-link .booking-info .info-time::after{display: none;}
	.access-link .booking-info .info-name{padding-left: 24px;}
	.access-link .booking-info .info-name::before{display: block;}
	.booking-btngroup{display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;}
	.booking-btngroup .btns{width: 48%; margin-right: 0; padding: 0;}
	li:not(.finish) .booking-btngroup .btns:last-child, div:not(.finish) .booking-btngroup .btns:last-child{width:100%;}

	.catch-day{width: 100% !important;}

	.mypage-tab{justify-content: space-between;}
	.mypage-tab li{flex: 1 0 30%; margin: -1px 0 0 -1px; border: 1px solid var(--border-color-10); overflow: hidden;}
	.mypage-tab li a{width: 100%; background-color: var(--txt-white); color: var(--txt-color-30); border: none; border-radius: 0;}
	.mypage-tab li a:hover,
	.mypage-tab li a:active,
	.mypage-tab li a:focus,
	.mypage-tab li a.on{background-color: var(--color-second); color: var(--txt-white); border: none;}
	.mypage-tab li:nth-child(1){border-top-left-radius: 8px;}
	.mypage-tab li:nth-child(4){border-bottom-left-radius: 8px;}
	.mypage-tab li:nth-child(3){border-top-right-radius: 8px;}
	.mypage-tab li:nth-child(6){border-bottom-right-radius: 8px;}

	.mypage-cont,
	.booking-area{margin-top: 10px; padding: 20px; border-radius: 8px;}
	.mypage-cont .join-area h3,
	.booking-area .join-area h3{margin-top: 0;}
	.mypage-cont form,
	.booking-area form{flex-direction: column;}
	.mypage-cont form fieldset,
	.booking-area form fieldset{width: 100%;}
	.mypage-cont fieldset legend,
	.booking-area fieldset legend{padding-top: 20px; border-top: 1px dashed var(--border-color-20);}

	.mypage-cont .sns-area ul{flex-direction: column; align-items: stretch;}
	.mypage-cont .sns-area ul li{flex: 0 1 auto; width: 100%; margin-bottom: 20px;}
	.mypage-cont .sns-area ul li a{height: 130px;}
	.mypage-cont .sns-area ul li a::before{margin: 10px auto 0;}
	.txt-top-em,
	.txt-top-strong{padding-top: 10px;padding-bottom: 20px;}
	.photo{padding-top: 10px;}

	.recordings-box .rd-search{flex-direction: column; padding-top: 10px;}
	.recordings-box .rd-search .rd-search-l{width: 100%;}
	.recordings-box .rd-search .rd-search-r{margin-top: 10px; width: 100%; font-weight: bold;}
	.recordings-box .rd-list{margin-top: 10px; border-radius: 6px;}
	.recordings-box .rd-list table .col01{width: 100%;}
	.recordings-box .rd-list table .col02,
	.recordings-box .rd-list table .col03,
	.recordings-box .rd-list table .col04{display: none;}
	.recordings-box .rd-list table thead{display: none;}
	.recordings-box .rd-list table tbody tr:first-child{border-top: 0;}
	.recordings-box .rd-list table tbody tr td{padding: 15px;}
	.recordings-box .rd-list table .m-subject{display: block; padding-bottom: 0;}
	.recordings-box .rd-list table .m-time{display: block; padding: 0 0 10px 0; margin: 0 15px 0;}
	.recordings-box .rd-list table .m-time span{display: inline-block; margin-right: 5px;}
	.recordings-box .rd-list table .m-view,
	.recordings-box .rd-list table .m-url{display: inline-block; width: 50%;}
	.recordings-box .rd-list table .m-view{padding:0 5px 5px 15px;}
	.recordings-box .rd-list table .m-url{padding: 0 15px 5px 5px;}
	.recordings-box .rd-list table .mobile-padding{padding-left: 15px; text-align: left;}

	.recordings-box .rd-list table button{width: 100%; border-radius: 6px; border: 1px solid var(--border-color-10);}
	.recordings-box .rd-list table button span{display: inline-block; font-size: 0.9375em;}
	.recordings-box .rd-list table button svg{margin-top: 0; vertical-align: middle; width: 16px; height: auto;}
	.subject-name .s-icon{display: none;}
	.subject-name .s-title strong{margin-bottom: 5px;}
	.options-area{padding: 20px;}
	ul.options li label{min-width: 100%; margin-bottom: 10px;}
	ul.options li > label{font-weight: bold;}
	ul.options li .cvList:first-of-type{min-width: 100%; margin-bottom: 20px;}
	ul.options .cvList-box .cvList:first-of-type{margin-bottom: 20px !important;}
	ul.options li:last-of-type{flex-wrap: wrap; padding-bottom: 0;}
	ul.options li:first-of-type > div{width: 100%;}
	.cvList-box .cvList{width: 50%; margin-bottom: 20px;}
	.booking-area form fieldset:first-of-type{margin-bottom: 0; border-bottom: none;}
	.modify-btngroup{flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
	.modify-btngroup button{width: 48%; margin: 0 0 10px;}
	.modify-btngroup button:first-child{width: 100%;}
	.view-area{padding: 20px;}
	.view-area .linkbox, .form-cont .linkbox{justify-content: space-between; flex-wrap: wrap;}
	.view-area .linkbox input[type=text], .form-cont .linkbox input[type=text]{width: 100%; padding: 16px 12px;}
	.view-area .linkbox button, .form-cont .linkbox button{width: 49%; margin-left: 0; margin-top: 10px;}
	.view-option{justify-content: flex-start; flex-direction: column;}
	.view-option li{flex:  1 1 100%; margin-bottom: 20px;}
	.view-area .en-day br{display: inline-block;}
	.required-absolute{right: 3%; top: 10px;}
	.access-cont li{flex: 1 1 40%;}
	.halt-btngroup{width: 100%;}
	.access-link .booking-info span.info-time .soon{display: block;}
	.access-link .booking-info span.info-time b:first-of-type{display: inline-block; padding-left: 10px; padding-bottom: 5px;}
	.access-link .booking-info span.info-name{display: block; padding-left: 25px;}
	/*미팅수정페이지*/
	.daterangepicker{display: block;}
	.daterangepicker .calendar-icon{width: 100%;}
}

/* 3. 1 Column Grid 768px - 1024px
----------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1024px){
	.content-layout .contents { padding: 0 1.6%;}
	.content-layout .ment-area{justify-content: space-between;}
	.content-layout .main-menu li{width: 25%;}
	.content-layout .main-menu li a{margin: 0 auto; width: 92%;}
}

/* 3. 2 Column Grid Infinity - 1024px
----------------------------------------------------------------------------- */
@media screen and (min-width:1024px){
}

@media screen and (max-width:1024px){
	.content-layout {flex-direction: column;}
	.content-layout .ment-area {position: relative; top:0; width: 100%;margin-right: 0;}
	.content-layout .ment-area .current-data{text-align: center;}
	.content-layout .main-menu{width: 100%;}
	.content-layout .main-menu li a i{width: 32px; height: 32px; margin-top: 5px;}
	.content-layout .contents {width: 100%;flex-grow: 0;}
	.content-layout h2{margin-top: 10px;}
	.booking-info{margin-top: 10px;}
	.myinfo,
	.myinfo-left{justify-content: flex-start; flex-direction: column; align-items: flex-start;}
}


/* 5. 2 Column Grid 1600px - Infinity (Main only)
----------------------------------------------------------------------------- */
@media screen and (max-width:1599px){
	.booking-ul{flex-direction: column;}
	.booking-ul li{margin-right: 0; flex: 1; width: 100%;max-width:100%;}
	.booking-ul li:nth-child(2n){margin-left: 0;}
	.booking-ul li.first-box{max-width:100%;}
	.access-link h3,.access-link h3{white-space: normal;}
	ul.options li{flex: 0 0 100%;}
}
@media screen and (min-width:1921px){
	.booking-ul li{flex: 0 1 31%; margin: 0 10px 20px 10px;max-width: 31%;}
	.booking-ul li:nth-child(2n){margin: 0 10px 20px 10px;}
}