@charset "utf-8";

body.popOn {overflow: hidden;}

/*** subHeader ***/
/* press */
/* live */

/*** contents ***/
.container.press {padding: 60px 0;}
.container.live {padding: 0 0 60px;}

/* 공통 */
.pressWrap .cmmDate, .viewWrap .cmmDate {position: relative; margin-bottom: 5px; padding-left: 18px; font-size: 16px; color: #999;}
.pressWrap .cmmDate::before, .viewWrap .cmmDate::before {position: absolute; left: 0; top: 7px; content: ''; width: 13px; height: 13px; background: url("/resources/images/common/icoTime.png") no-repeat; background-size: 100%;}
.btnMore {width: 120px; margin: 0 auto; margin-top: 60px;}

/* press */
.pressWrap {}
.pressWrap .schPressWrap {height: 46px;}
.pressWrap .schPressWrap .cmmsTit {float: left; padding-top: 19px;}
.pressWrap .schPressWrap .schPress {position: relative; float: right;}
.pressWrap .schPressWrap .schPress::after {position: absolute; left: 89px; top: 21px; content: ''; width: 12px; height: 7px; background: url("/resources/images/common/icoArrowSelect.png") no-repeat; background-size: 100%;}
.pressWrap .schPressWrap .schPress select {width: 121px; height: 46px; padding: 11px 20px; border: 1px solid #D5D5D5; border-radius: 5px; font-size: 16px; color: #999; box-sizing: border-box;}
.pressWrap .schPressWrap .schPress .searchArea {display: inline-block; overflow: hidden; width: 390px; height: 46px; margin-left: 25px; background: #fff; border: 1px solid #D5D5D5; border-radius: 5px;}
.pressWrap .schPressWrap .schPress .searchArea input {width: calc(100% - 60px); height: 44px; padding: 11px 20px; font-size: 16px; border: none; box-sizing: border-box;}
.pressWrap .schPressWrap .schPress .btnSearch {position: absolute; right: 0; top: 0; width: 60px; height: 46px;}
.pressWrap .schPressWrap .schPress .btnSearch::before {position: absolute; left: 0; top: 11px; content: ''; width: 1px; height: 25px; background: #D5D5D5;}
.pressWrap .schPressWrap .schPress .btnSearch a {display: block; width: 60px; height: 100%;}
.pressWrap .schPressWrap .schPress .btnSearch a img {position: absolute; right: 20px; top: 13px; width: 20px; height: 20px;}
.pressWrap .pressListWrap {margin-top: 30px;}
.pressWrap .pressListWrap .pressList {display: block;}
.pressWrap .pressListWrap .pressList.active {}
.pressWrap .pressListWrap .pressList .cmmCard {position: relative; overflow: hidden; height: 175px; padding: 27px 30px 30px; padding-left: 175px; padding-right: 100px; box-sizing: border-box;}
.pressWrap .pressListWrap .pressList .cmmCard.not_thumbnail{padding-left: 65px;}
.pressWrap .pressListWrap .pressList .cmmCard .thumbnail {width: 115px; height: 115px; position: absolute; left: 30px; top: 31px; border: 1px solid #d5d5d5; overflow: hidden;}
.pressWrap .pressListWrap .pressList .cmmCard .thumbnail img{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: inherit; height: 100%;}
.pressWrap .pressListWrap .pressList .cmmCard .list {display: block;}
.pressWrap .pressListWrap .pressList .cmmCard .list .cmmTit {}
.pressWrap .pressListWrap .pressList .cmmCard .list li.cmmTit{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pressWrap .pressListWrap .pressList .cmmCard .list .cmmsTit.sm {color: #5A5A5A; line-height: 24px; overflow: hidden; word-break: break-all;}
.pressWrap .pressListWrap .pressList .cmmCard .btnPageGo {position: absolute; right: 30px; top: 68px; width: 40px;}
.pressWrap .pressListWrap .pressList .cmmCard .fnMultiEllipsis {max-height: 48px; overflow: hidden;}
.pressWrap .cmmNotitp .notisort{width: auto;}
.pressWrap .cmmNotitp .notisort .customSelectWrap{vertical-align: middle;}
.pressWrap .cmmNotitp .notisort .cmmInput.inline{vertical-align: middle; width: 390px; margin-left: 25px;}

/* view */
.viewWrap {width: 100%;}
.viewTit {padding-bottom: 15px; border-bottom: 1px solid #D5D5D5;}
.viewContents {font-size: 16px; word-break: keep-all; line-height: 1.8;}
.viewContents span {display: inline-block; line-height: 30px;}
.viewContents>span {margin-bottom: 60px;}
.viewContents span.img .caption {display: inline-block; margin-top: 15px; font-size: 14px; color: #878787;}

/* live */
.liveWrap {padding-top: 60px;}
.liveWrap .category .btns {min-width: 90px; height: 25px; margin-right: 10px; margin-bottom: 5px; padding: 0; border-width: 1px; font-size: 12px; line-height: 22px;}
.liveWrap .category .btns:last-child {margin-right: 0; margin-bottom: 0;}

.liveWrap01 {min-height: 500px; padding-bottom: 60px; background: #fff;}
.liveWrap01 .cmmCard {height: 100%; padding: 0;}
.liveWrap01 .cmmCard>div {position: relative; float: left; height: 380px;}
.liveWrap01 .cmmCard .lArea {width: 615px; background-color: #999;}
.liveWrap01 .cmmCard .lArea img {width: 100%; height: 100%;}
.liveWrap01 .cmmCard .lArea .category {position: absolute; left: 25px; bottom: 30px;}
.liveWrap01 .cmmCard .rArea {width: calc(100% - 615px); padding: 25px 60px;}
.liveWrap01 .cmmCard .rArea .cmmsTit.sm {line-height: 28px;}
.webWrap .webx .webxrt{padding-bottom: 80px; position: relative;}
.webWrap .cmmLst.fnToggle {position: absolute; left: 54px; bottom: 0;}
.webWrap .cmmLst.fnToggle .cmmtp {padding-left: 0; width: 210px; background: #2699FB; border-radius: 5px;}
.webWrap .cmmLst.fnToggle .cmmtp:after {left: auto; right: 16px; top: 22px; z-index: 1; width: 12px; height: 7px; background: url("/resources/images/common/icoArrowSmallTop.png") no-repeat; background-size: 100%;}
.webWrap .cmmLst.fnToggle .cmmtp>a {position: relative; display: inline-block; z-index: 1; width: 100%; height: 48px; padding: 0; font-weight: normal; color: #fff; line-height: 45px; text-align: left;}
.webWrap .cmmLst.fnToggle .cmmtp>a::before {position: absolute; right: 42px; top: 10px; content: ''; width: 1px; height: 25px; background: #fff;}
.webWrap .cmmLst.fnToggle .cmmtp>a span {display: inline-block; width: calc(100% - 42px); text-align: center;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd {position: absolute; left: 0; top: 47px; width: 210px; margin: 0; padding: 13px 23px; background: #fff; border: 1px solid #D5D5D5; border-radius: 0px 0px 5px 5px; font-size: 12px;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd li {position: relative; margin-bottom: 5px;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd li::after {position: absolute; left: 0; top: 4px; content: ''; width: 22px; height: 22px;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd li.no1::after {background: url("/resources/images/common/icoGoogleC.png") no-repeat;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd li.no2::after {background: url("/resources/images/common/icoOutlook.png") no-repeat;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd li.no3::after {background: url("/resources/images/common/icoYahoo.png") no-repeat;}
.webWrap .cmmLst.fnToggle .cmmtp.active .bd li a {display: block; padding-left: 32px;}

.liveWrap02 {padding-top: 79px;}
.liveWrap02 .innerWrap {position: relative;}
.liveWrap02 .customSelectWrap {position: absolute; right: 0; top: -19px; width: 170px; height: 46px; background: #fff; border-radius: 5px; box-sizing: border-box;}
.liveWrap02 .customSelectWrap:after {visibility: hidden;}
.liveWrap02 .customSelectWrap select {font-size: 16px; color: #999;}
.liveWrap02 .liveListWrap {}
.liveWrap02 .liveListWrap .liveList {width: 33.3333%; padding-left: 15px; padding-right: 15px; vertical-align: top; display: inline-block;}
.liveWrap02 .liveListWrap .liveList.active {display: inline-block;}
.liveWrap02 .liveListWrap .liveList:nth-child(-n+3) .cmmCard{margin-top: 18px;}
.liveWrap02 .liveListWrap .cmmCard {padding: 0; margin-top: 35px;}
.liveWrap02 .liveListWrap .cmmCard .thumb img {width: 100%; height: 100%;}
.liveWrap02 .liveListWrap .cmmCard .tit {min-height: 108px; padding: 20px 30px;}
.liveWrap02 .liveListWrap .cmmCard .tit .cmmTit {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.liveWrap02 .liveListWrap .cmmCard .category {padding: 17px 30px; border-top: 1px solid #D5D5D5;}

/* youtube popup */
.youtubeWrap {position: fixed; left: 0; top: 0; z-index: 999; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.8);}
.youtubeWrap .youPopup {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.youtubeWrap .youPopup .youBox {width: 1200px; height: 675px; background: #fff;}
.youtubeWrap .youPopup .youBox iframe {width: 100%; height: 100%;}
.youtubeWrap .youPopup .btnClose {position: absolute; right: 0; top: -60px;}
.youtubeWrap .youPopup .btnClose a {display: block; width: 30px;}
.dialogWrap {position: fixed; left: 0; top: 0; z-index: 999; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.8); overflow-y: auto;}
.dialogWrap .dialogPopup {position: absolute; left: 50%; top: 0; margin: 30px 0; transform: translateX(-50%); max-width: 1200px; width: 100%;}
.dialogWrap .dialogPopup .diaBox {width: 100%; margin-left: auto; margin-right: auto; background: #fff; border-radius: 10px; padding: 50px 65px;}
.dialogWrap .dialogPopup .diaBox .reserFormArea{text-align: left;}
.dialogWrap .dialogPopup .diaBox iframe {width: 100%; height: 100%;}
.dialogWrap .dialogPopup .btnClose {position: absolute; right: -40px; top: 0;}
.dialogWrap .dialogPopup .btnClose a {display: block; width: 30px;}

.dialogWrap{}
.dialogWrap .cmmViewFormWrap{}
.dialogWrap .cmmViewFormWrap.bgonGray{background: none;}
.dialogWrap .cmmViewFormWrap .cmmCard.tp2{margin-left: 0; margin-right: 0; box-shadow: none; padding: 0; border-radius: 0; background: none;}

@media only screen and (min-width: 1301px){
    .viewTit .cmmTit {line-height: 56px;}
    .viewWrap{max-width: 67%; margin-left: auto; margin-right: auto;}
}
@media only screen and (max-width: 1300px){
    .container.press {padding: 40px 0;}
    .container.live {padding: 0 0 40px;}
    
    .btnMore {margin-top: 40px;}
	.pressWrap .pressListWrap .pressList .cmmCard {padding: 27px 20px 30px; padding-left: 165px; padding-right: 100px;}
	.pressWrap .pressListWrap .pressList .cmmCard.not_thumbnail{padding-left: 20px !important;}
    .pressWrap .pressListWrap .pressList .cmmCard .btnPageGo {right: 20px;}
    
    .liveWrap01 {padding-top: 40px;}
    .liveWrap01 .cmmCard .rArea {padding: 25px 40px;}
    .liveWrap01 .cmmLst.fnToggle {left: 40px;}
    .liveWrap02 .innerWrap {padding: 0; padding-left: 15px;}
    .liveWrap02 .customSelectWrap {right: 15px;}
    .liveWrap02 .liveListWrap .liveList {padding-left: 0; padding-right: 15px;}
    .liveWrap02 .liveListWrap .cmmCard .tit {padding: 15px;}
    .liveWrap02 .liveListWrap .cmmCard .category {padding: 15px;}
    
	.youtubeWrap .youPopup {transform-origin: left top; transform: scale(1) translate(-50%, -50%) !important; padding: 15px; width: 100%;}
	.youtubeWrap .youPopup .youBox{width: 100%; height: 0; padding-bottom: 56.4%; position: relative;;}
	.youtubeWrap .youPopup .btnClose{top: -30px; right: 15px;}
	.youtubeWrap .youPopup .youBox iframe{position: absolute; left: 0; top: 0;}
    .pressWrap .cmmNotitp .notisort{position: relative; width: 100%; margin-top: 10px; padding-left: 130px;}
    .pressWrap .cmmNotitp .notisort .customSelectWrap.tp2{width: 120px; position: absolute; left: 0; top: 5px; height: 44px;}
    .pressWrap .cmmNotitp .notisort .customSelectWrap.tp2 .virSelect .virSelectTxt{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    .pressWrap .cmmNotitp .notisort .cmmInput.inline{width: 100%; margin-left: 0;}
    .webWrap .cmmLst.fnToggle{left: 0;}
    .dialogWrap .dialogPopup{width: 85%;}
	.dialogWrap .dialogPopup .btnClose {position: absolute; right: -40px; top: 0;}
}
@media only screen and (max-width: 1080px){
    .liveWrap02 .liveListWrap .cmmCard .tit .cmmTit {font-size: 20px;}
    .liveWrap01 .cmmCard>div {float: none;}
    .liveWrap01 .cmmCard .lArea {width: 100%; height: auto; overflow: hidden; border-radius: 5px;}
    .liveWrap01 .cmmCard .rArea {width: 100%; height: 320px; padding: 20px;}
    .liveWrap01 .cmmLst.fnToggle {left: 20px;}
    
    .youtubeWrap .youPopup {transform-origin: left top; transform: scale(0.6) translate(-50%, -50%);}
}
@media only screen and (max-width: 768px) {
    .schPress {float: left; width: 100%;}
    .pressWrap .schPressWrap .cmmsTit {padding-top: 0; padding-bottom: 10px;}
    .pressWrap .schPressWrap .schPress .searchArea {width: calc(100% - 139px); margin-left: 15px; margin-bottom: 30px;}
    .pressWrap .pressListWrap .pressList .cmmCard {padding: 27px 15px 30px; padding-left: 160px; padding-right: 95px;}
    .pressWrap .pressListWrap .pressList .cmmCard .thumbnail {margin-right: 15px;}
    .pressWrap .pressListWrap .pressList .cmmCard .btnPageGo {right: 15px;}
    
    .liveWrap02 .innerWrap {padding-right: 15px; padding-left: 15px;}
    .liveWrap01 .cmmCard .lArea .category {left: 15px; bottom: 20px;}
    
    .liveWrap02 .liveListWrap .liveList {width:100% !important; padding-right: 0;}
    
    .youtubeWrap .youPopup {transform-origin: left top; transform: scale(0.45) translate(-50%, -50%);}
}
@media only screen and (max-width: 450px) {
    .pressWrap .pressListWrap .pressList .cmmCard{padding: 27px 15px 30px; padding-bottom: 60px; height: auto;}
    .pressWrap .pressListWrap .pressList .cmmCard .thumbnail{position: relative; left: 0; top: 0; text-align: center; border-radius: 50%; overflow: hidden; margin-left: auto; margin-right: auto; margin-bottom: 27px;}
    .pressWrap .pressListWrap .pressList .cmmCard .cmmDate{position: absolute; left: 15px; bottom: 15px; margin-bottom: 0;}
    .pressWrap .pressListWrap .pressList .cmmCard .btnPageGo{top: auto; bottom: 12px; right: 15px; width: 30px;}
    .subHeader.press .headCont .visualArea .item .tit {width: 280px;}
    .liveWrap01 .cmmCard .rArea {height: 340px;}
    
    .youtubeWrap .youPopup {transform-origin: left top; transform: scale(0.25) translate(-50%, -50%);}

    .dialogWrap .dialogPopup{width: 90%; margin: 60px 0;}
    .dialogWrap .dialogPopup .diaBox{padding: 40px 0;}
    .dialogWrap .dialogPopup .btnClose {position: absolute; right: 0; top: -40px;}
}