@charset "utf-8";
body{overflow-x:hidden; width:100%; min-width:320px;}
.mask{visibility:hidden; opacity:0; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.45);}
.mask.on{z-index:95; visibility:visible; opacity:1; transition:opacity 0.25s linear;}

.video_view{position:fixed; top:0; left:0; right:0; bottom:0; padding:0 155px 0 327px; background:#e3faff; transition:padding 0.25s ease-in-out;}
.btn_fold{display:none;}

.lnb_wrap{position:fixed; top:0; left:0; width:274px; height:100%; box-sizing:border-box; color:#fff; background:#3796ae; box-shadow:5px 5px 10px rgba(0,0,0,0.15); transition:width 0.25s ease-in-out;}
.lnb_wrap a{color:#fff;}
.lnb_wrap h1{line-height:10.85vh; padding:5px 0 0 0; font-size:23px; text-align:center; font-weight:800; letter-spacing:-1px;}
.lnb_wrap h1 img{vertical-align:middle; width:40px; margin:-4px 0 0 0;}
.lnb_wrap .tit{position:relative; display:block; width:100%; margin:0 0 1px; height:56px; letter-spacing:-1px; font-size:21px; font-weight:800; text-align:left; background:rgba(26,56,64,0.5); box-sizing:border-box;}
.lnb_wrap .tit:hover{background-color:#1e4650;}
.lnb_wrap .tit:before,
.lnb_wrap .tit:after{content:''; display:inline-block; position:absolute; right:21px; top:50%; margin:-5px 0 0 0; border-top:9px solid rgba(255,255,255,0.5); border-left:5px solid transparent; border-right:5px solid transparent; transition:0.25s ease-in-out;}
.lnb_wrap .fold .tit:after{transform:rotate(-180deg);}
.lnb_wrap .tit:before{position:static; vertical-align:middle; width:27px; height:25px; margin:-3px 12px 0 20px; border:none; background:url(/images/view/ico_video.png) no-repeat 0 -439px;}
.lnb_wrap .list2 .tit:before{background-position:0 -506px;}
.lnb_wrap .list3 .tit:before{width:21px; background-position:0 -553px;}
.lnb_wrap .txt{display:block; padding:2.8vh 7.2% 2.8vh 8.7%;}
.lnb_wrap .txt ul{overflow-y:scroll; height:17vh; padding:0 20px 0 0; transition:height 0.25s ease-in-out;}
.lnb_wrap .txt ul::-webkit-scrollbar{width:8px; border-radius:8px;}
.lnb_wrap .txt ul::-webkit-scrollbar-thumb{background-color:#255d6b; border-radius:8px;}
.lnb_wrap .txt ul::-webkit-scrollbar-track{background-color:#2c7587;}
.lnb_wrap .txt li{margin:0 0 11px;}

.lnb_wrap .fold .txt {padding:0; transition:padding 0.35s ease-in-out;}
.lnb_wrap .fold .txt ul{height:0; padding:0;}

.container{position:relative; width:100%; height:100%; padding:0; box-sizing:border-box;}
.header{position:relative; display:table; overflow:hidden; width:100%; height:11.382vh; padding:5px 0 0 0; box-sizing:border-box;}
.head{display:table-cell; vertical-align:middle; font-size:25px; line-height:46px; color:#111; letter-spacing:-1px;}
.head h1{display:inline-block; vertical-align:top; padding:0 2.6% 0 3px; line-height:46px; font-weight:900; letter-spacing:-2px;}
.head p{display:inline-block; vertical-align:top; max-width:calc(100% - 430px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.content{position:relative; height:calc(100% - 11.382vh);}

.lnk_list{z-index:1; position:fixed; right:0; top:0; width:100px; height:100%; text-align:center; background:#3796ae;}
.lnk_list a,
.lnk_list button{position:relative; display:block; width:56px; height:56px; font-size:0; text-indent:-999px; border-radius:50%;}
.lnk_list a:before,
.lnk_list button:before{content:''; display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); background:url(/images/view/ico_photo.png) no-repeat 100% 0;}
.lnk_list .bt_share.on,
.lnk_list a:hover,
.lnk_list button:hover{background:rgba(26,56,64,0.5);}
.lnk_list .bt_share.on,
.lnk_list a:hover:before,
.lnk_list button:hover{opacity:0.7;}
.lnk_list .close_all{width:100%; height:12.4468%; border-radius:0; background:rgba(26,56,64,0.5);}
.lnk_list .close_all:hover{background:rgba(26,56,64,1);}
.lnk_list .close_all:before{opacity:1 !important; width:24px; height:24px; background:url(/images/view/ico_video.png) no-repeat;}
.lnk_list .sns{position:relative;}
.lnk_list .sns_list{opacity:0; visibility:hidden; position:absolute; right:88px; top:0; width:70px; background:#3796ae; transition:0.3s ease-in-out;}
.lnk_list .on + .sns_list{opacity:1; visibility:visible; right:78px;}
.lnk_list .sns_list a,
.lnk_list .sns_list button{width:70px; height:61px; border-radius:0;}
.lnk_list .sns_list a:before,
.lnk_list .sns_list button:before{opacity:1;}
.lnk_list .sns_list .bt_clo{height:70px; box-sizing:border-box; background:rgba(26,56,64,0.5);}
.lnk_list .bt_fb{background:#3c5a9a;}
.lnk_list .bt_fb:hover{background:#21489a;}
.lnk_list .bt_tw{background:#5eaade;}
.lnk_list .bt_tw:hover{background:#0e8ce2;}
.lnk_list .bt_bg{background:#36ac37;}
.lnk_list .bt_bg:hover{background:#01a202;}
.lnk_list .bt_kko{background:#fccb00;}
.lnk_list .bt_kko:hover{background:#fcb200;}
.lnk_list .bt_insta{background: linear-gradient(to bottom, #3a3ee5 0%,#ed4e3b 44%,#fbd757 100%);}
.lnk_list .bt_insta:hover{background: linear-gradient(to bottom, #3a3ee5 0%,#ed4e3b 66%,#fbd757 100%);}
.lnk_list .bt_clo:hover{background:#1c2437;}
.lnk_list .bt_fb:before{background-position:0 0;}
.lnk_list .bt_tw:before{background-position:0 -61px;}
.lnk_list .bt_bg:before{background-position:0 -122px;}
.lnk_list .bt_kko:before{background-position:0 -183px;}
.lnk_list .bt_insta:before{background-position:0 -244px;}
.lnk_list .bt_clo:before{background-position:0 -305px;}
.lnk_list ul{display:inline-block; height:calc(100% - 12.4468%); padding:58px 0 0 0; box-sizing:border-box;}
.lnk_list li{height:17%;}
.lnk_list .bt_wide:before{background:url(/images/view/ico_video.png) no-repeat 50% -125px;}
.lnk_list .bt_mid:before{background:url(/images/view/ico_video.png) no-repeat 50% -223px;}
.lnk_list .bt_small:before{background:url(/images/view/ico_video.png) no-repeat 50% -319px;}
.lnk_list .bt_full:before{background-position:100% -413px;}
.lnk_list .bt_down:before{background-position:100% -616px;}
.lnk_list .bt_play:before{background-position:100% -743px;}
.lnk_list .bt_play.on:before{background-position:100% -512px;}

.play_wrap{position:relative; overflow:hidden; width:100%; height:46.6vh; margin:0 0 2.4vh; box-sizing:border-box;}
.in_play{overflow:hidden; float:left; width:55.49%; height:100%; border-radius:10px;}
.in_play video{width:100%; height:100%;}
.in_speak{float:right; width:43.18%; height:100%;}
.content .info1{margin:0 0 2.4vh;}
.content .tit{width:165px; line-height:4.36Vh; font-size:20px; text-align:center; border-radius:10px 10px 0 0; color:#fff; font-weight:800; background:#3796ae;}
.content .txt{position:relative;overflow:hidden;height: 14.25vh;border-radius:0 10px 10px 10px;background:#fff;box-sizing:border-box;text-align:justify;}
.content .btn_view{display:none;}

.in_speak dl{display:none; position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%; padding:2.97vh 0 0 27.69%; box-sizing:border-box;}
.in_speak dl.on{display:block;}
.in_speak dt{position:absolute; top:1vh; left:6.44%; width:16.425%; height:85.82%;}
.in_speak dt img{max-width:100%; max-height:100%; border:1px solid #e5e5e5; box-sizing:border-box;}
.in_speak dd{float:left; width:100%;}
.in_speak li{padding:0 0 2px 7px; word-break: break-all;}
.in_speak li:before{top:9px; width:2px; height:2px; background:#777;}
.in_speak .name {overflow:hidden; width:100%; padding:0 0 8px 0;}
.in_speak .name strong{float:left; display:block; line-height:30px; font-size:21px; font-weight:800;}
.in_speak .name a{float:left;width: 100px;height:30px;line-height:30px;margin:0 0 0 5px;border-radius:30px;text-align:center;color:#fff;font-size:14px;background:#936b00;}
.in_speak .name a:first-of-type{width: 100px;margin:0 0 0 15px;background:#cf9700;}
.in_speak .sns a {position:absolute; top:2.97vh; right:5%; width: 32px;height: 32px;margin: 0 0 0 5px;line-height: 0;font-size: 0;background: url(/images/kr/common/ico_fb.png) no-repeat;}

.info2 .txt {height:21.597vh; padding:2.12vh 4.3% 2.3vh 0; font-size:16px;}
.info2 .txt ul{overflow-y:auto; height:100%;}
.info2 .txt ul::-webkit-scrollbar{width:8px; border-radius:8px;}
.info2 .txt ul::-webkit-scrollbar-thumb{background-color:#abb0b3; border-radius:8px;}
.info2 .txt ul::-webkit-scrollbar-track{background-color:#e2e2e2;}
.info2 .txt li{padding:0 0 3px;}
.info2 .txt li.current_on a{background:#fff6dd;}
.info2 .txt li a{position:relative; display:block; width:100%; min-height:45px; line-height:160%; padding:11px 80px 0 125px; box-sizing:border-box;}
.info2 .txt li a span{display:block; position:absolute; top:0; height:45px; line-height:45px;}
.info2 .txt li .state{left:6.8%; font-weight:800;}
.info2 .txt li .state:before{content:''; display:inline-block; vertical-align:middle; width:5px; height:16px; margin:-2px 10px 0 0; background:#8e8e8e;}
.info2 .txt li .state2:before{background:#3fa0b8;}
.info2 .txt li .state3:before{background:#ff7d7d;}
.info2 .txt li .time{right:10px; font-size:15px;}

.info3 .txt{height:30.53vh; line-height:165%; padding:3.19vh 1.87% 3.19vh 2.7%; box-sizing:border-box;}
.info3 .txt > div{overflow-y:auto; height:100%; padding:0 10px 0 0; box-sizing:border-box;}
.info3 .txt > div::-webkit-scrollbar{width:8px; border-radius:8px;}
.info3 .txt > div::-webkit-scrollbar-thumb{background-color:#abb0b3; border-radius:8px;}
.info3 .txt > div::-webkit-scrollbar-track{background-color:#e2e2e2;}
.info3 .txt .on{background:#fff6dd;}

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

	.video_view{padding:0 135px 0 305px;}

	.head{padding:0 0 0 50px; box-sizing:border-box;}
	.head h1,
	.head h1 span{display:none;}
	.head p{max-width:calc(100% - 300px);}

	.btn_fold{z-index:1; position:absolute; left:0; top:50%; display:block; width:40px; height:43px; margin:-20px 0 0 0; font-size:0; text-indent:-999px; background:#3796ae;}
	.btn_fold:before,
	.btn_fold:after,
	.btn_fold span:after{content:''; display:block; width:20px; height:3px; margin:3px auto 0; background:#fff;}

	.lnb_wrap{width:265px;}
	.lnb_wrap .txt{padding:2.7vh 7% 2.7vh 8%;}
	.lnb_wrap .txt ul{height:16vh;}

	.fold.video_view{padding-left:120px;}
	.fold .lnb_wrap{width:90px;}
	.fold .lnb_wrap h1{font-size:0;}
	.fold .lnb_wrap .tit{height:70px; font-size:0; text-align:center;}
	.fold .lnb_wrap .tit:after{display:none;}
	.fold .lnb_wrap .tit:before{margin:-3px 0 0 0;}
	.fold .lnb_wrap .txt{display:none;}
	
	.in_speak dl{padding-top:1.7vh;}
	.in_speak .name > a,
	.in_speak .name > a:first-of-type{width:auto;margin: 0 0 0 5px;}
	.in_speak .name > a{padding:0 20px;}
	.in_speak .name > a span{display:none;}
	.in_speak .sns a {top:1.7vh}

	.info2 .txt li a{padding-left:115px;}
}
@media all and (max-width:1280px){
	.lnb_wrap h1{font-size:22px;}
	.lnb_wrap .tit{height:8vh; max-height:50px; font-size:20px;}

	.head{font-size:24px;}
	.content .tit{width:155px; font-size:20px;}
}
@media all and (max-width:1230px){
	.video_view{padding:0 95px 0 260px;}
	.lnb_wrap{width:230px;}
	.lnb_wrap h1{font-size:21px;}
	.lnb_wrap h1 img{width:37px;}

	.fold.video_view{padding:0 95px 0 100px;}
	.fold .lnb_wrap{width:70px;}
	
	.in_speak .name strong{line-height:29px; font-size:19px;}
	.in_speak .name > a{height:27px; line-height:28px; padding:0 12px; font-size:13px;}
	.in_speak .name > a:first-of-type{margin:0 0 0 5px;}
	.in_speak .sns a {width:28px; height:28px; background-size:cover;}

	.info2 .txt{font-size:15px;}
	.info2 .txt li a{min-height:35px; padding-top:8px;}
	.info2 .txt li a span{height:35px; line-height:35px;}
	.info2 .txt li .state:before{margin-right:5px;}

	.lnk_list{width:70px;}
	.lnk_list ul{padding:4.5vh 0 0 0;}
	.lnk_list .sns_list{right:70px;}
	.lnk_list .on + .sns_list{right:63px;}
}
@media all and (max-width:1000px){
	.video_view{padding:0 95px 0 240px;}

	.play_wrap{height:auto;}

	.btn_fold{left:0; top:10px; margin:0;}
	
	.header{display:block; height:auto; padding:10px 0 15px;}
	.head{display:block; line-height:140%; font-size:18px; text-align:center;}
	.head h1{padding:0; line-height:33px;}
	.head h1:before{width:33px; height:33px;}
	.head h1 span{display:inline-block;}
	.head p{display:block; max-width:100%; padding:7px 0 0 0; font-size:21px; text-overflow:inherit; white-space:normal;}

	.lnb_wrap{left:0; width:210px; padding:0;}
	.lnb_wrap h1{font-size:20px;}
	.lnb_wrap h1 img{width:33px;}
	.lnb_wrap .tit{font-size:18px; text-align:left;}
	.lnb_wrap .tit:before{margin:-3px 12px 0 20px;}
	
	.fold.video_view{position:relative; padding-left:20px;}
	.fold .lnb_wrap{left:-100%;}

	.in_play,
	.in_speak{width:100%;}
	.in_play{margin:0 0 17px;}
	.in_speak dl{padding:18px 0 0 150px;}
	.in_speak dt{left:25px; width:19%;}

	.content{height:auto; padding:0 0 25px;}
	.content .info{overflow:hidden; width:100%;}
	.content .tit{float:left; width:135px; height:35px; line-height:35px; font-size:17px;}
	.content .txt{clear:both; width:100%; height:120px; transition:height 0.25s ease-in-out, padding 0.25s ease-in-out;}
	.content .btn_view{position:relative; display:block; float:left; height:35px; width:100px; border-radius:10px 10px 0 0; font-weight:400; color:#fff; letter-spacing:-1px; background:#999;}
	.content .btn_view:after{content:''; display:inline-block; vertical-align:middle; width:7px; height:7px; margin:-8px 0 0 7px; border-bottom:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); transition:0.3s ease;}
	.content .fold .btn_view:after{margin-top:0; transform:rotate(225deg);}
	
	.info2 .txt{height:180px; padding:17px 20px 17px 0;}
	.info2 .txt li a{padding:9px 80px 0 110px;}
	.info2 .txt li .state{left:20px;}
	.info2 .txt li .time{font-size:14px;}
	.info3 .txt{height:256px; padding:17px 20px 17px 20px;}

	.fold.info .txt{height:0; padding:0;}
}
@media all and (max-width:768px){
	.video_view{padding:0 95px 0 0;}

	.head{font-size:17px;}
	.head p{font-size:18px;}
	.head h1{height:30px; line-height:31px;}
	.head h1:before{width:30px; height:30px;}	

	.in_speak dl{padding:18px 0 0 30%;}
	.in_speak dt{left:5%; height:103px;}
	.in_speak .sns a {top:18px;}

	.container{left:250px; transition:left 0.25s ease-in-out;}
	.content .tit{width:125px; font-size:16px;}
	.content .btn_view{width:90px;}

	.info2 .txt li a{padding:8px 70px 0 90px;}

	.fold .container{left:0;}
}
@media all and (max-width:568px){
	.video_view{padding:0 65px 0 0;}
	.fold.video_view{padding:0 65px 0 15px;}

	.lnb_wrap{width:155px;}
	.lnb_wrap h1{height:10vh; font-size:16px;}
	.lnb_wrap h1 img{width:25px;}
	.lnb_wrap .tit{height:43px; line-height:44px; font-size:16px;}
	.lnb_wrap .tit:before{width:20px; margin:0 5px 0 15px; background-size:20px auto; background-position:0 -312px;}
	.lnb_wrap .list2 .tit:before{background-position:0 -359px;}
	.lnb_wrap .list3 .tit:before{width:18px; background-position:0 -393px;}
	.lnb_wrap .txt{padding:14px 7% 14px 8%; font-size:13px;}
	.lnb_wrap .txt ul{height:15vh; padding:0 8px 0 0;}
	.lnb_wrap .txt li{margin:0 0 9px;}

	.head {font-size:16px;}
	.head h1:before{margin:0 5px 0 0;}
	.head p{padding:5px 0 0 0; font-size:17px;}
	.head h1 span{display:none;}

	.fold .head h1 span{display:inline-block;}

	.container{left:170px;}
	.content .tit{width:110px; height:33px; line-height:34px; font-size:15px;}
	.content .txt{font-size:14px;}
	.content .btn_view{width:80px; height:33px;}
	
	.in_speak dl {padding-left:28%;}
	.in_speak .name strong{line-height:27px; font-size:18px;}
	.in_speak .name a{height:25px; line-height:27px; font-size:12px;}
	
	.info2 .txt{padding:13px 12px 13px 0;}
	.info2 .txt li .time{font-size:13px;}
	.info2 .txt li a{padding:8px 60px 0 85px;}
	.info3 .txt{padding:13px 12px 13px 13px;}
	
	.lnk_list{width:52px;}
	.lnk_list .close_all{height:15%;}
	.lnk_list .sns_list{right:52px;}
	.lnk_list .on + .sns_list{right:49px;}
	.lnk_list a, .lnk_list button{width:45px; height:45px;}
	.lnk_list a:before,
	.lnk_list button:before{background-size:120px;}
	.lnk_list .sns_list,
	.lnk_list .sns_list a,
	.lnk_list .sns_list button{width:45px;}
	.lnk_list .sns_list a,
	.lnk_list .sns_list .bt_clo{height:40px;}
	.lnk_list button:before{background-position:-76px 0px;}
	.lnk_list .bt_wide:before{background-position:50% -130px;}
	.lnk_list .bt_mid:before{background-position:50% -228px;}
	.lnk_list .bt_small:before{background-position:50% -324px;}
	.lnk_list .bt_full:before{background-position:-74px -403px;}
	.lnk_list .bt_play:before{background-position:-74px -604px;}
	.lnk_list .bt_play.on:before{background-position:-74px -416px;}
	.lnk_list .bt_down:before{background-position:-74px -500px;}
	.lnk_list .bt_fb:before{background-position:-7px -7px;}
	.lnk_list .bt_tw:before{background-position:-7px -55px;}
	.lnk_list .bt_bg:before{background-position:-7px -104px;}
	.lnk_list .bt_kko:before{background-position:-7px -154px;}
	.lnk_list .bt_insta:before{background-position:-7px -202px;}
	.lnk_list .bt_clo:before{background-position:-7px -259px;}
}
@media all and (max-width:430px) {
	.content .txt {height:140px;}
	.in_speak .name strong {display:block; width:100%;}
	.in_speak .name > a:first-of-type {margin:0;}
	.in_speak .sns a {width:24px;height:24px;}
}
@media all and (max-width:380px){
	.video_view{padding:0 60px 0 0;}
	.fold.video_view{padding:0 60px 0 15px;}

	.lnb_wrap{width:145px;}
	.lnb_wrap h1{height:9.5vh; padding:2px 0 0 0; font-size:15px;}
	.lnb_wrap h1 img{width:23px;}
	.lnb_wrap .tit{height:41px; line-height:42px; font-size:15px;}
	.lnb_wrap .txt li{margin:0 0 7px;}

	.head {font-size:15px;}
	.head p{font-size:16px;}
	
	.in_speak dl{padding-top:16px;}
	.in_speak .name strong{font-size:17px;}
	
	.container{left:160px;}
	.content .tit{width:105px; height:31px; line-height:32px;}
    .content .txt {height: 150px;}
	.lnb_wrap .txt ul{height:14.5vh;}
	.content .btn_view{width:75px; height:31px;}

	.info2 .txt li .time{font-size:12px;}

	.lnk_list{width:47px;}
	.lnk_list .on + .sns_list{right:46px;}
}
@media all and (max-width:340px){
	.head {font-size:14px;}
	.head h1{height:25px; line-height:26px;}
	.head h1:before{width:25px;}
}