/**** pc ****/ @media only all and (min-width:1301px) { .main_a{width: 100%; float: left; margin-bottom: 30px; position: relative} .main_b{width: 100%; float: left; margin-bottom: 30px; position: relative} .main_b .icon{position: absolute; left: -40px; top: 0px} .main_c{width: 100%; float: left; } .main_c .tx1{width: 100%; float: left;font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 600; font-size: 30px; letter-spacing: -2px; margin-bottom: 10px} .main_c .tx2{width: 100%; float: left; color: #666; font-size: 16px; letter-spacing: -1px; line-height: 25px} /**** 상단 배경이미지 ****/ .sub_topbg1{background: url(../images/sub/sub_topimg01.jpg);} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .main_a{width: 100%; float: left; margin-bottom: 30px; position: relative} .main_b{width: 100%; float: left; margin-bottom: 30px; position: relative} .main_b .icon{position: absolute; left: -40px; top: 0px} .main_c{width: 100%; float: left; } .main_c .tx1{width: 100%; float: left;font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 600; font-size: 30px; letter-spacing: -2px; margin-bottom: 10px} .main_c .tx2{width: 100%; float: left; color: #666; font-size: 16px; letter-spacing: -1px; line-height: 25px} /**** 상단 배경이미지 ****/ .sub_topbg1{background: url(../images/sub/sub_topimg01.jpg);} } /**** 모바일 ****/ @media only all and (max-width:767px) { .main_a{width: 100%; float: left; position: relative; box-sizing: border-box ; padding: 20px} .main_a img{width: 100%; } .main_b{width: 100%; float: left; margin-bottom: 30px; position: relative;} .main_b .icon{position: absolute; left: -40px; top: 0px} .main_c{width: 100%; float: left; box-sizing: border-box ; padding:0px 20px } .main_c .tx1{width: 100%; float: left;font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 600; font-size:18px; letter-spacing: -2px; margin-bottom: 10px} .main_c .tx2{width: 100%; float: left; color: #666; font-size: 13px; letter-spacing: -1px; line-height: 25px} /**** 상단 배경이미지 ****/ .sub_topbg1{background: url(../images/sub/sub_topimg01.jpg);} } .grg, li.bg01 .img, li.bg01 .tx, li.bg02 .img, li.bg02 .tx{transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ } /**** pc ****/ @media only all and (min-width:1301px) { .main_gallery{width: 100%; height: 310px; float: left; } .main_gallery ul li{ float: left; background-color: #000; background-size: cover; height: 310px; position: relative; cursor: pointer} .main_gallery ul li .img{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX;z-index: 1 ; opacity:0.4; overflow: hidden} .main_gallery ul li .img img{width: 100%; } .main_gallery ul li .grg{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX; z-index: 2 ; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .main_gallery ul li .tx{width: 100%; float: left; text-align: center; color: #fff; font-size: 20px; font-weight: 700; position: absolute; left: 0px; top:50%; margin-top: -10PX; z-index: 3;text-transform: uppercase} .main_gallery ul li:hover{width: 20%; float: left; background-color: #000; background-size: cover; height: 310px; position: relative;; cursor: pointer} .main_gallery ul li:hover .img{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX;z-index: 1 ; opacity: 1; overflow: hidden} .main_gallery ul li:hover .grg{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX; z-index: 2 ; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.90) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .main_gallery ul li:hover .img img{width: 100%; } .main_gallery ul li:hover .tx{width: 100%; float: left; text-align: center; color: #ff0066; font-size: 20px; font-weight: 700; position: absolute; left: 0px; top:60%; margin-top: -10PX; z-index: 2;text-transform: uppercase} .main_gallery ul li.bg01{width: 20%; } .main_gallery ul li.bg02{width: 20%; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .main_gallery{width: 100%; height: 310px; float: left; } .main_gallery ul li1{width: 20%; float: left; background-color: #000; background-size: cover; height: 310px; position: relative; cursor: pointer} .main_gallery ul li .img{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX;z-index: 1 ; opacity:0.4; overflow: hidden} .main_gallery ul li .img img{width: 100%; } .main_gallery ul li .grg{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX; z-index: 2 ; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .main_gallery ul li .tx{width: 100%; float: left; text-align: center; color: #fff; font-size: 20px; font-weight: 700; position: absolute; left: 0px; top:50%; margin-top: -10PX; z-index: 3;text-transform: uppercase} .main_gallery ul li:hover{width: 20%; float: left; background-color: #000; background-size: cover; height: 310px; position: relative;; cursor: pointer} .main_gallery ul li:hover .img{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX;z-index: 1 ; opacity: 1; overflow: hidden} .main_gallery ul li:hover .grg{width: 100%; height: 310px; position: absolute; left: 0px; top:0PX; z-index: 2 ; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.90) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .main_gallery ul li:hover .img img{width: 100%; } .main_gallery ul li:hover .tx{width: 100%; float: left; text-align: center; color: #ff0066; font-size: 20px; font-weight: 700; position: absolute; left: 0px; top:60%; margin-top: -10PX; z-index: 2;text-transform: uppercase} .main_gallery ul li.bg01{width: 20%; } .main_gallery ul li.bg02{width: 20%; } } /**** 모바일 ****/ @media only all and (max-width:767px) { .main_gallery{width: 100%; float: left; } .main_gallery ul li{width: 33.3%; float: left; background-color: #000; background-size: cover; height:200px; position: relative; cursor: pointer} .main_gallery ul li .img{width: 100%; height: 200px; position: absolute; left: 0px; top:0PX;z-index: 1 ; opacity:0.4; overflow: hidden} .main_gallery ul li .img img{width: 100%; } .main_gallery ul li .grg{width: 100%; height:200px; position: absolute; left: 0px; top:0PX; z-index: 2 ; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .main_gallery ul li .tx{width: 100%; float: left; text-align: center; color: #fff; font-size:16px; font-weight: 700; position: absolute; left: 0px; top:50%; margin-top: -10PX; z-index: 3;text-transform: uppercase} .main_gallery ul li:hover{ float: left; background-color: #000; background-size: cover; height: 200px; position: relative;; cursor: pointer} .main_gallery ul li:hover .img{width: 100%; height: 200px; position: absolute; left: 0px; top:0PX;z-index: 1 ; opacity: 1; overflow: hidden} .main_gallery ul li:hover .grg{width: 100%; height: 200px; position: absolute; left: 0px; top:0PX; z-index: 2 ; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.90) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .main_gallery ul li:hover .img img{width: 100%; } .main_gallery ul li:hover .tx{width: 100%; float: left; text-align: center; color: #ff0066; font-size: 16px; font-weight: 700; position: absolute; left: 0px; top:60%; margin-top: -10PX; z-index: 2;text-transform: uppercase} .main_gallery ul li.bg01{width: 33.33%; } .main_gallery ul li.bg02{width: 50%; } } /**** pc ****/ @media only all and (min-width:1301px) { .sub_title{width: 100%; float: left; margin-bottom: 30px; position: relative; padding-top: 20px; border-top: 1px solid #ccc} .sub_title .b_title{width: 100%; float: left; margin-bottom:5px; font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 700; font-size: 26px} .sub_title .s_title{width: 100%; float: left; margin-bottom:5px; color: #666; font-size: 15px} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_title{width: 100%; float: left; margin-bottom: 30px; position: relative; padding-top: 20px; border-top: 1px solid #ccc} .sub_title .b_title{width: 100%; float: left; margin-bottom:5px;; font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 700; font-size: 26px} .sub_title .s_title{width: 100%; float: left; margin-bottom:5px;color: #666; font-size: 15px} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_title{width: 100%; float: left; margin-bottom: 0px; position: relative; border-top: 1px solid #cc; padding: 20px 15px; box-sizing: border-box } .sub_title .b_title{width: 100%; float: left; margin-bottom:5px;; font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 700; font-size: 26px; text-align: center} .sub_title .s_title{width: 100%; float: left; margin-bottom:5px; color: #666; font-size: 15px; text-align: center} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_com{width: 100%; float: left; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_com{width: 100%; float: left; padding: 0px 0px; box-sizing: border-box } } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_com{width: 100%; float: left; padding: 0px 15px; box-sizing: border-box } } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0101{width: 100%; float: left; margin-bottom: 80px;} .sub_0101 .text01{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0101 .name01{width: 100%; float: left; margin-top: 20px; margin-bottom: 20px;} .sub_0101 .name01 .txt01{width: 100%; float: left; color: #333; font-size: 14px; line-height:20PX; font-weight: 600; margin-bottom: 5px;} .sub_0101 .name01 .txt02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0101{width: 100%; float: left; margin-bottom: 80px; padding: 0px 0px; box-sizing: border-box } .sub_0101 .text01{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0101 .name01{width: 100%; float: left; margin-top: 20px; margin-bottom: 20px;} .sub_0101 .name01 .txt01{width: 100%; float: left; color: #333; font-size: 14px; line-height:20PX; font-weight: 600; margin-bottom: 5px;} .sub_0101 .name01 .txt02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0101{width: 100%; float: left; margin-bottom: 80px; padding: 0px 0px; box-sizing: border-box } .sub_0101 .text01{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0101 .name01{width: 100%; float: left; margin-top: 20px; margin-bottom: 20px;} .sub_0101 .name01 .txt01{width: 100%; float: left; color: #333; font-size: 14px; line-height:20PX; font-weight: 600; margin-bottom: 5px;} .sub_0101 .name01 .txt02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0102{width: 100%; float: left; margin-bottom: 50px;} .sub_0102 .prof_box{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 50px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0102 .prof_box .prof_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_l{ width:100px; float: left; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_l .img{ width:100%; float: left; left:0px; top:0px;} .sub_0102 .prof_box .prof_l .inbox_r{ width:calc(100% - 150px); float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1{width: 100%; height:120px; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; font-weight: 700; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2{width: 100%; float: left;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 .text01{width: 100%; float: left; color: #000; font-size: 15px; font-weight: 700; margin-bottom: 5px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul{width: 100%; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul li{width: 100%; float: left; list-style-type: none; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul li em{width: 100%; float: left; margin-left: 8px; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r{ width:48%; float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_l{ width:100px; float: left; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_l .img{ width:100%; float: left; left:0px; top:0px;} .sub_0102 .prof_box .prof_r .inbox_r{ width:calc(100% - 150px); float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1{width: 100%; height:120px; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; font-weight: 700; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2{width: 100%; float: left;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 .text01{width: 100%; float: left; color: #000; font-size: 15px; font-weight: 700; margin-bottom: 5px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul{width: 100%; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul li{width: 100%; float: left; list-style-type: none; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul li em{width: 100%; float: left; margin-left: 8px; color: #666; font-size: 13px; line-height:20PX;} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0102{width: 100%; float: left; margin-bottom: 50px;} .sub_0102 .prof_box{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 50px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0102 .prof_box .prof_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_l{ width:100px; float: left; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_l .img{ width:100%; float: left; left:0px; top:0px;} .sub_0102 .prof_box .prof_l .inbox_r{ width:calc(100% - 120px); float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1{width: 100%; height:120px; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; font-weight: 700; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2{width: 100%; float: left;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 .text01{width: 100%; float: left; color: #000; font-size: 15px; font-weight: 700; margin-bottom: 5px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul{width: 100%; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul li{width: 100%; float: left; list-style-type: none; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul li em{width: 100%; float: left; margin-left: 8px; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r{ width:48%; float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_l{ width:100px; float: left; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_l .img{ width:100%; float: left; left:0px; top:0px;} .sub_0102 .prof_box .prof_r .inbox_r{ width:calc(100% - 120px); float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1{width: 100%; height:120px; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; font-weight: 700; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2{width: 100%; float: left;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 .text01{width: 100%; float: left; color: #000; font-size: 15px; font-weight: 700; margin-bottom: 5px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul{width: 100%; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul li{width: 100%; float: left; list-style-type: none; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul li em{width: 100%; float: left; margin-left: 8px; color: #666; font-size: 13px; line-height:20PX;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0102{width: 100%; float: left; } .sub_0102 .prof_box{ width:100%; float: left; box-sizing: border-box; display: block; } .sub_0102 .prof_box .prof_l{ width:100%; float: left; box-sizing: border-box; display: block; position: relative; ; border-bottom: 1px solid #ccc; padding: 30px 0px} .sub_0102 .prof_box .prof_l .inbox_l{ width:100px; float: left; box-sizing: border-box; display: block; position: absolute; left: 0px; top: 20px} .sub_0102 .prof_box .prof_l .inbox_l .img{ width:100%; float: left; left:0px; top:0px;} .sub_0102 .prof_box .prof_l .inbox_r{ width:100%; float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1{width: 100%; height:120px; float: left; margin-bottom: 20px; padding-left: 120px} .sub_0102 .prof_box .prof_l .inbox_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; font-weight: 700; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2{width: 100%; float: left;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 .text01{width: 100%; float: left; color: #000; font-size: 15px; font-weight: 700; margin-bottom: 5px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul{width: 100%; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul li{width: 100%; float: left; list-style-type: none; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_l .inbox_r .text_box2 ul li em{width: 100%; float: left; margin-left: 8px; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r{ width:100%; float: left; box-sizing: border-box; display: block; ; border-bottom: 1px solid #ccc; padding: 30px 0px; position: relative} .sub_0102 .prof_box .prof_r .inbox_l{ width:100px; float: left; box-sizing: border-box; display: block;position: absolute; left: 0px; top: 20px} .sub_0102 .prof_box .prof_r .inbox_l .img{ width:100%; float: left; left:0px; top:0px;} .sub_0102 .prof_box .prof_r .inbox_r{ width:100%; float: right; box-sizing: border-box; display: block;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1{width: 100%; height:120px; float: left; margin-bottom: 20px; ; padding-left: 120px} .sub_0102 .prof_box .prof_r .inbox_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; font-weight: 700; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2{width: 100%; float: left;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 .text01{width: 100%; float: left; color: #000; font-size: 15px; font-weight: 700; margin-bottom: 5px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul{width: 100%; float: left; margin-bottom: 20px;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul li{width: 100%; float: left; list-style-type: none; color: #666; font-size: 13px; line-height:20PX;} .sub_0102 .prof_box .prof_r .inbox_r .text_box2 ul li em{width: 100%; float: left; margin-left: 8px; color: #666; font-size: 13px; line-height:20PX;} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0103{width: 100%; float: left; margin-bottom: 80px;} .sub_0103 .org{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0103 .org .org_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .org .org_l .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .org .org_r{ width: 48%; float: right; box-sizing: border-box; display: block;} .sub_0103 .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .org .org_r .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_l .org{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0103 .box_l .org .org_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_l .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_l .org .org_l .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_l .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_l .org .org_r{ width: 48%; float: right; box-sizing: border-box; display: block;} .sub_0103 .box_l .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_l .org .org_r .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_l .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_r{ width:48%; float: right; box-sizing: border-box; display: block; } .sub_0103 .box_r .org{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0103 .box_r .org .org_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_r .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_r .org .org_l .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_r .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_r .org .org_r{ width: 48%; float: right; box-sizing: border-box; display: block;} .sub_0103 .box_r .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_r .org .org_r .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_r .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0103{width: 100%; float: left; margin-bottom: 80px; padding: 0px 0px; box-sizing: border-box } .sub_0103 .org{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0103 .org .org_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .org .org_l .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .org .org_r{ width: 48%; float: right; box-sizing: border-box; display: block;} .sub_0103 .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .org .org_r .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_l .org{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0103 .box_l .org .org_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_l .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_l .org .org_l .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_l .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_l .org .org_r{ width: 48%; float: right; box-sizing: border-box; display: block;} .sub_0103 .box_l .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_l .org .org_r .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_l .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_r{ width:48%; float: right; box-sizing: border-box; display: block; } .sub_0103 .box_r .org{ width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px; padding-bottom:30px; border-bottom: 1px solid #ccc;} .sub_0103 .box_r .org .org_l{ width:48%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_r .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_r .org .org_l .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_r .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_r .org .org_r{ width: 48%; float: right; box-sizing: border-box; display: block;} .sub_0103 .box_r .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_r .org .org_r .text01 em{color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_r .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0103{width: 100%; float: left; padding: 0px 0px; box-sizing: border-box } .sub_0103 .org{ width:100%; float: left; box-sizing: border-box; display: block; } .org_l{ border-bottom: 1px solid #ccc; padding: 20px 0px;} .org_r{ border-bottom: 1px solid #ccc; padding: 20px 0px;} .sub_0103 .org .org_l{ width:100%; float: left; box-sizing: border-box; display: block; } .sub_0103 .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .org .org_l .text01 em{width: 100%; float: left;color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .org .org_r{ width:100%; float: right; box-sizing: border-box; display: block;} .sub_0103 .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .org .org_r .text01 em{width: 100%; float: left;color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_l{ width:100%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_l .org{ width:100%; float: left; box-sizing: border-box; display: block; } .sub_0103 .box_l .org .org_l{ width:100%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_l .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_l .org .org_l .text01 em{width: 100%; float: left;color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_l .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_l .org .org_r{ width: 100%; float: right; box-sizing: border-box; display: block;} .sub_0103 .box_l .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_l .org .org_r .text01 em{width: 100%; float: left;color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_l .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_r{ width:100%; float: right; box-sizing: border-box; display: block; } .sub_0103 .box_r .org{ width:100%; float: left; box-sizing: border-box; display: block; } .sub_0103 .box_r .org .org_l{ width:100%; float: left; box-sizing: border-box; display: block;} .sub_0103 .box_r .org .org_l .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_r .org .org_l .text01 em{width: 100%; float: left;color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_r .org .org_l .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0103 .box_r .org .org_r{ width: 100%; float: right; box-sizing: border-box; display: block;} .sub_0103 .box_r .org .org_r .text01{width: 100%; float: left; color: #ff0066; font-size: 12px; line-height:18PX; margin-bottom: 5px;} .sub_0103 .box_r .org .org_r .text01 em{width: 100%; float: left;color: #000; font-size: 16px; line-height:20PX; margin-bottom: 5px; margin-right:10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;} .sub_0103 .box_r .org .org_r .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0104{width: 100%; float: left; margin-bottom: 80px;} .sub_0104 .history{ width:32%; float: left; display:flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; margin-right: 10px; padding-right:10px; border-right: 1px solid #ccc;} .sub_0104 .history .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 3px;} .sub_0104 .history .inbox .year{width:60px; float: left; box-sizing: border-box; display: block; color: #999; font-size: 13px; line-height:20PX; text-align: right; margin-top: 2px;} .sub_0104 .history .inbox .text{width: calc(100% - 75px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 13px; line-height:24PX;} .sub_0104 .history2{ width:32%; float: left; display:flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; } .sub_0104 .history2 .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 3px;} .sub_0104 .history2 .inbox .year{width:60px; float: left; box-sizing: border-box; display: block; color: #999; font-size: 13px; line-height:20PX; text-align: right; margin-top: 2px;} .sub_0104 .history2 .inbox .text{width: calc(100% - 75px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 13px; line-height:24PX; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0104{width: 100%; float: left; margin-bottom: 80px; padding: 0px 20px; box-sizing: border-box } .sub_0104 .history{ width:32%; float: left; display:flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; margin-right: 10px; padding-right:10px; border-right: 1px solid #ccc;} .sub_0104 .history .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 3px;} .sub_0104 .history .inbox .year{width:60px; float: left; box-sizing: border-box; display: block; color: #999; font-size: 13px; line-height:20PX; text-align: right; } .sub_0104 .history .inbox .text{width: calc(100% - 75px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 13px; line-height:24PX;} .sub_0104 .history2{ width:32%; float: left; display:flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; } .sub_0104 .history2 .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 3px;} .sub_0104 .history2 .inbox .year{width:60px; float: left; box-sizing: border-box; display: block; color: #999; font-size: 13px; line-height:20PX; text-align: right; } .sub_0104 .history2 .inbox .text{width: calc(100% - 75px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 13px; line-height:24PX;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0104{width: 100%; float: left; padding: 0px 0px; box-sizing: border-box } .sub_0104 .history{ width: 100%; float: left; display:flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; } .sub_0104 .history .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 3px;} .sub_0104 .history .inbox .year{width:60px; float: left; box-sizing: border-box; display: block; color: #999; font-size: 13px; line-height:20PX; text-align: right; } .sub_0104 .history .inbox .text{width: calc(100% - 75px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 13px; line-height:24PX;} .sub_0104 .history2{ width: 100%; float: left; display:flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; } .sub_0104 .history2 .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 3px;} .sub_0104 .history2 .inbox .year{width:60px; float: left; box-sizing: border-box; display: block; color: #999; font-size: 13px; line-height:20PX; text-align: right; } .sub_0104 .history2 .inbox .text{width: calc(100% - 75px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 13px; line-height:24PX;} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0105{width: 100%; float: left; margin-bottom: 80px;} .sub_0105 .box_l{ width:530px; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_0105 .box_r{ width: calc(100% - 580px); float: right; box-sizing: border-box; display: block;} .sub_0105 .box_r .text_box{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 20px} .sub_0105 .box_r .text_box .text01{width: 100%; float: left; color: #000; font-size: 14px; line-height:20PX; font-weight: 600; margin-bottom: 5px;} .sub_0105 .box_r .text_box .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0105 .box_r .text_box .text02 a{color: #666; font-size: 14px;} .sub_0105 .box_r .text_box .text02 em{color: #ff0066; font-size: 14px; line-height:20PX; font-weight: 600; margin-left:10px;} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0105{width: 100%; float: left; margin-bottom: 80px; padding: 0px 20px; box-sizing: border-box } .sub_0105 .box_l{ width:530px; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_0105 .box_r{ width: calc(100% - 580px); float: right; box-sizing: border-box; display: block;} .sub_0105 .box_r .text_box{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 20px} .sub_0105 .box_r .text_box .text01{width: 100%; float: left; color: #000; font-size: 14px; line-height:20PX; font-weight: 600; margin-bottom: 5px;} .sub_0105 .box_r .text_box .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0105 .box_r .text_box .text02 a{color: #666; font-size: 14px;} .sub_0105 .box_r .text_box .text02 em{color: #ff0066; font-size: 14px; line-height:20PX; font-weight: 600; margin-left:10px;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0105{width: 100%; float: left; padding: 0px 0px; box-sizing: border-box } .sub_0105 .box_l{ width: 100%; float: left; box-sizing: border-box; display: block; margin-top: 0px; margin-bottom: 20px} .sub_0105 .box_l img{ width: 100%; } .sub_0105 .box_r{ width: 100%; float: left; box-sizing: border-box; display: block;} .sub_0105 .box_r .text_box{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 20px} .sub_0105 .box_r .text_box .text01{width: 100%; float: left; color: #000; font-size: 14px; line-height:20PX; font-weight: 600; margin-bottom: 5px;} .sub_0105 .box_r .text_box .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:20PX;} .sub_0105 .box_r .text_box .text02 a{color: #666; font-size: 14px;} .sub_0105 .box_r .text_box .text02 em{color: #ff0066; font-size: 14px; line-height:20PX; font-weight: 600; margin-left:10px;} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0201{width: 100%; float: left; margin-bottom: 80px;} .sub_0201 .box_l{ width:440px; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_0201 .box_r{ width: calc(100% - 490px); float: right; box-sizing: border-box; display: block;} .sub_0201 .box_r .text_box1{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 40px} .sub_0201 .box_r .text_box1 .text01{width: 100%; float: left; color: #000; font-size: 16px; line-height:20PX; font-weight: 600; margin-bottom: 10px; } .sub_0201 .box_r .text_box1 .text02{width: 100%; float: left; color: #ff0066; font-size: 14px; line-height:20PX; } .sub_0201 .box_r .text_box2{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px} .sub_0201 .box_r .text_box2 .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 8px;} .sub_0201 .box_r .text_box2 .inbox .text01{width:30px; float: left; box-sizing: border-box; display: block; color: #666; font-size: 14px; font-weight: 600;} .sub_0201 .box_r .text_box2 .inbox .text02{width: calc(100% - 50px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 14px; } .sub_0201 .box_r .text_box2 .inbox .text02 a{width:100%; height:24px; float: left; box-sizing: border-box; display: block; margin-top: 8px; background-color:#ff0066; color: #fff; font-size: 14px; padding:3px; text-align: center } .sub_0201 .box_r .text_box3{width:100%; float: left; box-sizing: border-box; display: block;} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0201{width: 100%; float: left; margin-bottom: 80px; padding: 0px 20px; box-sizing: border-box } .sub_0201 .box_l{ width:440px; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_0201 .box_r{ width: calc(100% - 490px); float: right; box-sizing: border-box; display: block;} .sub_0201 .box_r .text_box1{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 40px} .sub_0201 .box_r .text_box1 .text01{width: 100%; float: left; color: #000; font-size: 22px; line-height:24PX; font-weight: 500; margin-bottom: 8px; font-family: 'Noto Sans KR', sans-serif;} .sub_0201 .box_r .text_box1 .text02{width: 100%; float: left; color: #ff0066; font-size: 15px; line-height:20PX; font-weight: 600;} .sub_0201 .box_r .text_box2{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 30px} .sub_0201 .box_r .text_box2 .inbox{width: 100%; float: left; box-sizing: border-box; display: block; margin-bottom: 8px;} .sub_0201 .box_r .text_box2 .inbox .text01{width:30px; float: left; box-sizing: border-box; display: block; color: #666; font-size: 14px; } .sub_0201 .box_r .text_box2 .inbox .text02{width: calc(100% - 50px); float: right; box-sizing: border-box; display: block; color: #666; font-size: 14px; } .sub_0201 .box_r .text_box2 .inbox .text02 a{width:100%; height:24px; float: left; box-sizing: border-box; display: block; margin-top: 8px; background-color:#ff0066; color: #fff; font-size: 14px; padding:3px; text-align: center } .sub_0201 .box_r .text_box3{width:100%; float: left; box-sizing: border-box; display: block;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0201{width: 100%; float: left; padding: 0px 0px; box-sizing: border-box } .sub_0201 .box_l{ width: 100%; float: left; box-sizing: border-box; } .sub_0201 .box_l img{ width: 100%; float: left; } .sub_0201 .box_r{ width: 100%; float: left;box-sizing: border-box; } .sub_0201 .box_r .text_box1{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 40px} .sub_0201 .box_r .text_box1 .text01{width: 100%; float: left; color: #000; font-size: 22px; line-height:24PX; font-weight: 500; margin-bottom: 8px; font-family: 'Noto Sans KR', sans-serif;} .sub_0201 .box_r .text_box1 .text02{width: 100%; float: left; color: #ff0066; font-size: 15px; line-height:20PX; font-weight: 600;} .sub_0201 .box_r .text_box2{width:100%; float: left; box-sizing: border-box; margin-bottom: 30px} .sub_0201 .box_r .text_box2 .inbox{width: 100%!important; float: left; box-sizing: border-box; margin-bottom: 8px;} .sub_0201 .box_r .text_box2 .inbox .text01{width:30px; float: left; box-sizing: border-box; color: #666; font-size: 14px; } .sub_0201 .box_r .text_box2 .inbox .text02{width: calc(100% - 30px); float: right; box-sizing: border-box; color: #666; font-size: 14px; padding-left: 10px; box-sizing: border-box } .sub_0201 .box_r .text_box2 .inbox .text02 a{font-size: 12px } .sub_0201 .box_r .text_box3{width:100%; float: left; box-sizing: border-box; display: block;} .sub_0201 .box_r .text_box3 img{width:100%;} } /**** pc ****/ @media only all and (min-width:1301px) { .sub_0202{width: 100%; float: left; margin-bottom: 30px;} .sub_0202 .list{ width:100%; float: left; display:flex; flex-direction:row;flex-wrap: wrap; } .sub_0202 .list .img{ width:25%; float: left; text-align: center; display: flex; justify-content: center; align-items: center; height: 90px} .sub_0202 .list .img img{ width:80%; } .sub_0202 .list .img2{ width:25%; float: left; text-align: center; display: flex; justify-content: center; align-items: center;; height: 90px} .sub_0202 .list .img2 img{ width:100%; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_0202{width: 100%; float: left; padding: 0px 20px; box-sizing: border-box } .sub_0202 .list{ width:100%; float: left; display:flex; flex-direction:row;flex-wrap: wrap; } .sub_0202 .list .img{ width:25%; float: left; text-align: center; display: flex; justify-content: center; align-items: center; height: 90px} .sub_0202 .list .img img{ width:80%; } .sub_0202 .list .img2{ width:25%; float: left; text-align: center; display: flex; justify-content: center; align-items: center;; height: 90px} .sub_0202 .list .img2 img{ width:100%; } } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_0202{width: 100%; float: left; padding: 0px 0px; box-sizing: border-box } .sub_0202 .list{ width:100%; float: left; display:flex; flex-direction:row;flex-wrap: wrap; margin-bottom: 20px; } .sub_0202 .list .img{ width:50%; float: left; text-align: center; display: flex; justify-content: center; align-items: center; height:80px} .sub_0202 .list .img img{ width:90%; } .sub_0202 .list .img2{ width:50%; float: left; text-align: center; display: flex; justify-content: center; align-items: center;; height: 80px} .sub_0202 .list .img2 img{ width:100%; } } /**** pc ****/ @media only all and (min-width:1301px) { .sub_03{width: 100%; float: left; margin-bottom: 80px;} .sub_03 .box_top{width: 100%; float: left; margin-bottom:40px;} .sub_03 .box_top .box_l{ width:595px; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_03 .box_top .box_r{ width: calc(100% - 630px); float: right; box-sizing: border-box; display: block;} .sub_03 .box_top .box_r .text_box1{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 40px} .sub_03 .box_top .box_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; line-height:20PX; font-weight: 400; margin-bottom: 5px; font-family: 'Noto Sans KR', sans-serif;} .sub_03 .box_top .box_r .text_box1 .text01 em{ color: #ff0066; font-size: 15px; line-height:24PX; font-weight: 700; margin-bottom: 10px; } .sub_03 .box_top .box_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:18PX;font-weight: 500; } .sub_03 .list{ width:100%; float: left; display:flex; flex-direction:row; flex-wrap: wrap; } .sub_03 .list .text01{ width:16.4%; float: left; padding:30px 0px; box-sizing: border-box; text-align: center; color: #333; font-size: 15px; line-height:18PX; border-bottom: 1px solid #ccc;border-top: 1px solid #ccc; margin-bottom: -1px;} .sub_03 .list .text01 a{ color: #333; font-size: 15px; line-height:18PX; } .sub_03 .list .text01 a:hover{ color: rgba(255,0,95,1.00); font-size: 15px; line-height:18PX; f} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .sub_03{width: 100%; float: left; margin-bottom: 80px;} .sub_03 .box_top{width: 100%; float: left; margin-bottom:40px;} .sub_03 .box_top .box_l{ width:595px; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_03 .box_top .box_r{ width: calc(100% - 630px); float: right; box-sizing: border-box; display: block;} .sub_03 .box_top .box_r .text_box1{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 40px} .sub_03 .box_top .box_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; line-height:20PX; font-weight: 400; margin-bottom: 5px; font-family: 'Noto Sans KR', sans-serif;} .sub_03 .box_top .box_r .text_box1 .text01 em{ color: #ff0066; font-size: 16px; line-height:24PX; font-weight: 700; margin-bottom: 10px; } .sub_03 .box_top .box_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:18PX;font-weight: 500; } .sub_03 .list{ width:100%; float: left; display:flex; flex-direction:row; flex-wrap: wrap; } .sub_03 .list .text01{ width:16.4%; float: left; padding:30px 0px; box-sizing: border-box; text-align: center; color: #333; font-size: 15px; line-height:18PX; font-weight: bold; border-bottom: 1px solid #ccc;border-top: 1px solid #ccc; margin-bottom: -1px} .sub_03 .list .text01 a{ color: #333; font-size: 15px; line-height:18PX; font-weight: bold;} .sub_03 .list .text01 a:hover{ color: #ff4b6d; font-size: 15px; line-height:18PX; font-weight: bold;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .sub_03{width: 100%; float: left; } .sub_03 .box_top{width: 100%; float: left; ;} .sub_03 .box_top .box_l{width: 100%; float: left; box-sizing: border-box; display: block; margin-top: 0px;} .sub_03 .box_top .box_l img{width: 100%;} .sub_03 .box_top .box_r{width: 100%; float: right; box-sizing: border-box; display: block;} .sub_03 .box_top .box_r .text_box1{width:100%; float: left; box-sizing: border-box; display: block; margin-bottom: 40px} .sub_03 .box_top .box_r .text_box1 .text01{width: 100%; float: left; color: #ff0066; font-size: 16px; line-height:20X; font-weight: 400; margin-bottom: 5px; font-family: 'Noto Sans KR', sans-serif;} .sub_03 .box_top .box_r .text_box1 .text01 em{ color: #ff0066; font-size: 16px; line-height:24PX; font-weight: 700; margin-bottom: 10px; } .sub_03 .box_top .box_r .text_box1 .text02{width: 100%; float: left; color: #666; font-size: 14px; line-height:18PX;font-weight: 500; } .sub_03 .list{ width:100%; float: left; display:flex; flex-direction:row; flex-wrap: wrap; } .sub_03 .list .text01{ width:25%; float: left; padding:30px 0px; box-sizing: border-box; text-align: center; color: #333; font-size: 16px; line-height:18PX; font-weight: bold; border-bottom: 1px solid #ccc;border-top: 1px solid #ccc; margin-bottom: -1px} .sub_03 .list .text01 a{ color: #333; font-size: 14px; line-height:16PX;} .sub_03 .list .text01 a:hover{ color: rgba(255,0,95,1.00);} } /**** pc ****/ @media only all and (min-width:1301px) { .popupbox{max-width: 750px; float: left; border-top: 5px solid #ff4b6d;} .popupbox .p_info{width: 100%; float: left; padding: 30px; box-sizing: border-box; background-color: #ebebeb} .popupbox .p_info .photo{width: 200px; height: 200px; float: left; overflow: hidden; background-position: center center; background-size: cover} .popupbox .p_info .photo img{width: 200px; } .popupbox .p_info .info{width:calc(100% - 200px) ; float: left; padding-left: 30px; box-sizing: border-box; } .popupbox .p_info .info .name{width: 100%; float: left; font-size: 26px; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;color: #000; margin-bottom: 10px;} .popupbox .p_info .info .tx{width: 100%; float: left; font-size: 14px; color: #333; margin-bottom: 10px; line-height: 20px} .popupbox .gallery_view{width: 100%; float: left; padding: 20px 20px 30px; box-sizing: border-box; background-color: #111} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .popupbox{max-width: 750px; float: left; border-top: 5px solid #ff4b6d;} .popupbox .p_info{width: 100%; float: left; padding: 30px; box-sizing: border-box; background-color: #ebebeb} .popupbox .p_info .photo{width: 200px; height: 200px; float: left; overflow: hidden; background-position: center center; background-size: cover} .popupbox .p_info .photo img{width: 200px; } .popupbox .p_info .info{width:calc(100% - 200px) ; float: left; padding-left: 30px; box-sizing: border-box; } .popupbox .p_info .info .name{width: 100%; float: left; font-size: 26px; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;color: #000; margin-bottom: 10px;} .popupbox .p_info .info .tx{width: 100%; float: left; font-size: 14px; color: #333; margin-bottom: 10px; line-height: 20px} .popupbox .gallery_view{width: 100%; float: left; padding: 20px 20px 30px; box-sizing: border-box; background-color: #111} } /**** 모바일 ****/ @media only all and (max-width:767px) { .popupbox{width: 100%; height: 100vh; background-color: #333; float: left; border-top: 5px solid #ff4b6d;} .popupbox .p_info{width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color: #ebebeb} .popupbox .p_info .photo{width: 100px; float: left; overflow: hidden; } .popupbox .p_info .photo img{width: 100px; } .popupbox .p_info .info{width:calc(100% - 100px) ; float: left; box-sizing: border-box; padding-left: 15px } .popupbox .p_info .info .name{width: 100%; float: left; font-size: 20px; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;color: #000; margin-bottom: 10px;} .popupbox .p_info .info .tx{width: 100%; float: left; font-size: 12px; color: #333; margin-bottom: 5px; line-height: 18px} .popupbox .gallery_view{width: 100%; float: left; padding: 20px 20px 30px; box-sizing: border-box; background-color: #111} } /**** pc ****/ @media only all and (min-width:1301px) { .year_btn{display: none; position:fixed; top: 10px; right: 10px;z-index: 99; color: #333 } .year_btn i{color: #333; font-size: 30px } .year_popup{width: 100%; float: left; background: #fff; padding:50px 30px; box-sizing: border-box} .year_popup .history_title{width: 100%; float: left; font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 700; font-size:20px; margin-bottom: 10px} .year_popup ul{width: 100%; float: left; background: #fff; box-sizing: border-box} .year_popup ul li{width: 25%; float: left; color: #333; font-weight: 700; text-align: center; padding: 2px } .year_popup ul li a{width: 100%; float: left; color: #333; font-weight: 700; text-align: center; padding: 15px; border-radius: 100px; background-color: #eee } .year_popup ul li a:hover{color: #fff; background-color: #ff0066 } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .year_btn{position:fixed; top: 10px; right: 20px;z-index: 9999; color: #333 } .year_btn i{color: #333; font-size: 30px } .year_popup{width: 100%; float: left; background: #fff; padding:50px 30px; box-sizing: border-box} .year_popup .history_title{width: 100%; float: left; font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 700; font-size:20px; margin-bottom: 10px} .year_popup ul{width: 100%; float: left; background: #fff; box-sizing: border-box} .year_popup ul li{width: 25%; float: left; color: #333; font-weight: 700; text-align: center; padding: 2px } .year_popup ul li a{width: 100%; float: left; color: #333; font-weight: 700; text-align: center; padding: 15px; border-radius: 100px; background-color: #eee } .year_popup ul li a:hover{color: #fff; background-color: #ff0066 } } /**** 모바일 ****/ @media only all and (max-width:767px) { .year_btn{position:fixed; top: 10px; right: 10px;z-index: 9999; color: #333 } .year_btn i{color: #333; font-size: 30px } .year_popup{width: 100%; float: left; background: #fff; padding:50px 30px; box-sizing: border-box} .year_popup .history_title{width: 100%; float: left; font-family: 'Noto Sans KR', sans-serif; color: #000 ; font-weight: 700; font-size:20px; margin-bottom: 10px} .year_popup ul{width: 100%; float: left; background: #fff; box-sizing: border-box} .year_popup ul li{width: 25%; float: left; color: #333; font-weight: 700; text-align: center; padding: 2px } .year_popup ul li a{width: 100%; float: left; color: #333; font-weight: 700; text-align: center; padding: 15px; border-radius: 100px; background-color: #eee } .year_popup ul li a:hover{color: #fff; background-color: #ff0066 } } /**** pc ****/ @media only all and (min-width:1301px) { .video_box{width: 100%; float: left;} .video_box ul {width: 100%; float: left;display:flex; flex-direction:row;justify-content: space-between;flex-wrap: wrap; } .video_box ul li{width:49% ; float: left; margin-bottom: 20px} .video_box ul li .movie_in{ position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; } .movie_in .movie_inin{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .video_box{width: 100%; float: left;} .video_box ul {width: 100%; float: left;display:flex; flex-direction:row;justify-content: space-between;flex-wrap: wrap; } .video_box ul li{width:49% ; float: left; margin-bottom: 20px} .video_box ul li .movie_in{ position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; } .movie_in .movie_inin{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } /**** 모바일 ****/ @media only all and (max-width:767px) { .video_box{width: 100%; float: left;} .video_box ul {width: 100%; float: left;display:flex; flex-direction:row;justify-content: space-between;flex-wrap: wrap; } .video_box ul li{width:100% ; float: left; margin-bottom: 20px} .video_box ul li .movie_in{ position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; } .movie_in .movie_inin{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }