@charset "euc-kr"; @import url('font.css'); @import url('common.css'); .wrapper {width:1420px; margin:0 auto;} .visual_wrap .wrapper:after {content:''; display:block; clear:both;} .visual_wrap .wrapper > div {float:left; height:450px;} .visual_wrap {margin:40px 0 20px;background-image:url(../images/pic/main_slide02.jpg);background-position:bottom;background-repeat:no-repeat;} .visual_wrap .visual {position:relative; width:100%; height:100%;} .visual_wrap .visual > ul li {height:450px; background-repeat:no-repeat; background-position:center; background-size:cover;} /*.visual_wrap .visual > ul li.img01 {background-image:url(../images/pic/main_slide01.jpg);} .visual_wrap .visual > ul li.img02 {background-image:url(../images/pic/pic_slide02.jpg);}*/ .visual_wrap .visual > ul li a {display:block; position:relative; width:100%; height:100%;} .visual_wrap .visual > ul li .txt {position:absolute; top:120px; left:80px; color:#fff; word-break:keep-all;} .visual_wrap .visual > ul li .txt h3 {line-height:49px;font-size:49px;font-weight:600;color:#000;font-family:'roboto'} .visual_wrap .visual > ul li .txt > strong {display:block; margin:20px 0 40px; font-size:35px;line-height:35px;font-family:'roboto'} .visual_wrap .visual > ul li .txt > strong em {font-weight:400;color:#000;} .visual_wrap .visual > ul li .txt p span {display:block; font-size:18px; color:#3b3b3b;line-height:26px;} .col_b01{color:#3150a7;font-weight:600} .visual_wrap .visual .ctrl_box {position:absolute; bottom:40px;left:80px;width:1260px;} .visual_wrap .visual .ctrl_box .main_sub_list{display:flex} .visual_wrap .visual .ctrl_box .main_sub_list li{text-align:center;width:16.66%;} .visual_wrap .visual .ctrl_box .main_sub_list li a{color:#fff;} .visual_wrap .visual .ctrl_box .main_sub_list li img{display:block;margin:0 auto 15px auto;} .visual_wrap .visual .ctrl_box > div .ctrl .prev:hover {background-image:url(../images/ico/ico_slide_left01_on.png);} .visual_wrap .visual .ctrl_box > div .ctrl .pause:hover {background-image:url(../images/ico/ico_slide_pauset02_on.png);} .visual_wrap .visual .ctrl_box > div .ctrl .next:hover {background-image:url(../images/ico/ico_slide_right01_on.png);} .visual_wrap .visual .ctrl_box > div ul {float:right;} .visual_wrap .visual .ctrl_box > div ul li {display:inline-block; margin-right:16px; color:#fff; font-size:24px; font-weight:400; font-family:"Rajdhani"; cursor:pointer;} .visual_wrap .visual .ctrl_box > div ul li.on {color:#1a95e4; font-weight:700;} /*비주얼부분 텍스트 다른 색상*/ .visual_wrap .visual .ctrl_box.gray > p {color:#383838;} .visual_wrap .visual .ctrl_box.gray > div {border-bottom:1px solid #818181;} .visual_wrap .visual .ctrl_box.gray > div .ctrl .prev {background-image:url(../images/ico/ico_slide_left01_g.png);} .visual_wrap .visual .ctrl_box.gray > div .ctrl .pause {background-image:url(../images/ico/ico_slide_pauset02_g.png);} .visual_wrap .visual .ctrl_box.gray > div .ctrl .next {background-image:url(../images/ico/ico_slide_right01_g.png);} .visual_wrap .visual .ctrl_box.gray > div .ctrl .prev:hover {background-image:url(../images/ico/ico_slide_left01_on.png);} .visual_wrap .visual .ctrl_box.gray > div .ctrl .pause:hover {background-image:url(../images/ico/ico_slide_pauset02_on.png);} .visual_wrap .visual .ctrl_box.gray > div .ctrl .next:hover {background-image:url(../images/ico/ico_slide_right01_on.png);} .visual_wrap .visual .ctrl_box.gray > div ul li {color:#353535;} .visual_wrap .visual .ctrl_box.gray > div ul li.on {color:#3150a7;} /*3대 연구분야*/ .three_con .wrapper:after {content:''; display:block; clear:both;} .three_con .wrapper > div {float:left;} .three_con .wrapper > div > div {float:left;} .three_con .tit:before {content:''; position:absolute; top:0; left:0; width:120px; height:122px; background:url(../images/ico/ico_tit_deco.png) no-repeat left top; background-size:100%;} .three_con .tit {position:relative; width:270px; padding:45px 0 0 38px; color:#2b2c36; font-size:22px; line-height:1;} .three_con .tit p {font-family:"Rajdhani"; font-weight:700; margin-bottom:2px;} .three_con .tit span {display:block; margin-top:14px; color:#797979; font-size:16px; line-height:1.4} .three_con .tit strong{line-height:28px;} .three_con .three_link:after {content:''; display:block; clear:both;} .three_con .three_link {width:calc(100% - 360px); margin-left:90px;} .three_con .three_link > div {float:left; position:relative; width:340px; height:250px; margin-right:20px;} .three_con .three_link > div:hover a:after, .three_con .three_link > div.on a:after {content:''; position:absolute; z-index:55; top:0; left:0; width:100%; height:100%; background:url(../images/bg/bg_line_on.png) no-repeat top; background-size:cover;} .three_con .three_link > div:last-child {margin-right:0;} .three_con .three_link > div a {display:block; position:relative; width:100%; height:100%; padding:45px 40px; 0 40px; color:#fff; word-break:keep-all;} .three_con .three_link > div strong {font-size:20px;word-break: break-word;display:block;height:35%;} .three_con .three_link > div p {margin-top:15px; font-size:16px; line-height:1.5;} .three_con .three_link > div .more {position:absolute; bottom:30px; right:23px; width:66px; height:14px; text-indent:-9999px; background:url(../images/ico/ico_go.png) no-repeat center; background-size:100%;} .three_con .three_link .link01 {background-color:#345cad;} .three_con .three_link .link02 {background-color:#3a91c9;} .three_con .three_link .link03 {background-color:#4a9ea3;} .three_con .three_link .link01:hover {background-image:url(../images/bg/bg_threeon01.jpg);} .three_con .three_link .link02:hover {background-image:url(../images/bg/bg_threeon02.jpg);} .three_con .three_link .link03:hover {background-image:url(../images/bg/bg_threeon03.jpg);} .sub_contents_wrap{display:flex;} .contents01{margin-right:20px;} .contents02{background-color:#3a91c9;width:340px;height:550px;padding:5px;} .contents02 .contents02_01{padding:35px 20px;background: #f9f9f9;height: 100%} .contents02 .contents02_01 h3{font-size:24px;font-weight:600;margin-bottom:10px;color:#3150a7} .contents02 .contents02_01 span{display:block;margin-bottom:10px;} .inquiry_input input[type="text"], .inquiry_input input[type="email"] {width:100%;font-family: Verdana, Arial, Helvetica, sans-serif;} .inquiry_input li:not(:last-child){margin-bottom:10px} .inquiry_input li > textarea{width:100%;height:280px;padding:10px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:400;} .inquiry_input li > textarea:focus{border-color: #00b5ef;} .inquiry_input li:nth-child(4){text-align:center;} .inquiry_input li > button{background-color:#3a91c9;color:#fff;text-align:center;padding:5px 20px;border-radius:10px;margin:0 auto;} .inquiry_input li input{font-size:14px;font-weight:400;} input::placeholder { font-size:14px } textarea::placeholder { font-size:14px } /* .sub_con {height:820px; padding:40px 0; margin-top:40px; background:url(../images/bg/bg_sub_con.jpg) no-repeat center; background-size:cover;}*/ .sub_con {padding:40px 0; margin-top:40px; background:url(../images/bg/bg_sub_con.jpg) no-repeat center; background-size:cover;} .sub_con .wrapper > div:after {content:''; display:block; clear:both;} .sub_con .sub_con01 {display:flex;height:290px;} .sub_con .video {position:relative; width:340px; height:100%; background:#ddd;margin-right:20px;} .sub_con .video .img {width:100%; height:100%; overflow:hidden;} .sub_con .video .img img {width:100%; height:100%;} .sub_con .video .ctrl_box {position:absolute; top:0; left:0; width:100%; height:100%; padding:33px 30px;} .sub_con .video .ctrl_box:after {content:''; position:absolute; top:50%; left:50%; width:89px; height:89px; background:url(../images/ico/ico_play_w02.png) no-repeat center; transform:translate(-50%,-50%); background-size:100%;} .sub_con .video .ctrl_box h3 {color:#fff; font-size:24px;} .sub_con .video .ctrl_box a {position:absolute; top:38px; right:30px; color:#fff;} .sub_con .video .ctrl_box a:after {content:''; display:inline-block; width:13px; height:13px; margin-left:5px; vertical-align:-1px; background:url(../images/ico/ico_plus_ww.png) no-repeat;} .sub_con .video .ctrl_box .progress {position:absolute; bottom:26px; left:30px; width:calc(100% - 60px); height:1px; background:#595b6c;} .sub_con .video .ctrl_box .progress p {position:relative; height:100%; background:#fff;} .sub_con .video .ctrl_box .progress p:after {content:''; position:absolute; top:-8px; left:0; width:17px; height:17px; border-radius:50%; background:#fff; } .sub_con .video .ctrl_box .progress p.w65p {width:65%;} .sub_con .video .ctrl_box .progress p.w65p:after {left:100%;} .sub_con .notice {width:700px; height:100%; overflow:hidden; background:#ffffff;padding:35px 40px;position:relative;} .sub_con .notice h3{display:inline-block;font-size:24px;font-weight:600;margin:0 15px 15px 0;line-height:24px;} .sub_con .notice > span{color:#3a3a3a;} .sub_con .notice > ul > li{border-bottom:1px solid #e3e3e3;line-height:0;padding:0 10px;} .sub_con .notice > ul > li > a > p{display:inline-block;width: calc(100% - 72px);overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 38px;} .sub_con .notice > ul > li > a > span{font-size:14px;color:#909090;float:right;line-height:38px} .notice_btn{position:absolute;top:35px;right:40px;color:#4d4d4d;} .notice_btn:after { content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; background: url(../images/ico/ico_plus_bb.png) no-repeat; } .sub_con .photo_news {position:relative; width:520px; height:100%; padding:20px 30px; border:1px solid #e5e5e5; background:#fff;} .sub_con .photo_news h3 {margin-bottom:15px; font-size:24px; font-weight:500;} .sub_con .photo_news .news:after {content:''; display:block; clear:both;} .sub_con .photo_news .news > div {float:left; width:218px; margin-right:20px;} .sub_con .photo_news .news > div:hover .thumb:after {content:''; position:absolute; top:50%; left:50%; width:60px; height:61px; background-image:url(../images/ico/ico_play_w.png); transform:translate(-50%,-50%); background-size:100%;} .sub_con .photo_news .news > div:last-child {margin-right:0;} .sub_con .photo_news .news > div .thumb {width:100%; position:relative; overflow:hidden;} .sub_con .photo_news .news > div .thumb img {width:100%; height:100%;} .sub_con .photo_news .news > div div p {margin:10px 0 5px; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .sub_con .photo_news .news > div div .date {color:#909090; font-size:14px; font-family:'Montserrat';} .sub_con .photo_news > a {position:absolute; top:31px; right:30px; color:#000;} .sub_con .photo_news > a:after {content:''; display:inline-block; width:13px; height:13px; margin-left:5px; vertical-align:-1px; background:url(../images/ico/ico_plus03.jpg) no-repeat;} .sub_con .sub_con02 {margin:20px 0;display:flex;} .sub_con .sub_con02 h3 {font-size:24px; font-weight:500;} .sub_con .sub_con02 span{color:#3a3a3a} .sub_con .sub_con02 > div {height:240px;} .sub_con .sub_con02 .company {width:600px; padding:30px 30px; background:#297696;} .sub_con .sub_con02 .company h3 {display:inline-block; margin-right:12px; color:#fff;} .sub_con .sub_con02 .company span {color:rgba(255,255,255,0.5);} .sub_con .sub_con02 .company div ul {margin-top:18px;} .sub_con .sub_con02 .company div ul:after {content:''; display:block; clear:both;} .sub_con .sub_con02 .company div ul li {float:left; width:33.33%; height:70px; border:1px solid #fff; background-color:#fff; background-repeat:no-repeat; background-size:37px; background-position:left 23px center;} .sub_con .sub_con02 .company div ul li + li {border-left:1px solid #e5e5e5;} .sub_con .sub_con02 .company div ul li:hover {border:1px solid #e5e5e5; background-color:#297696;} .sub_con .sub_con02 .company div ul li:hover a {color:#fff;} .sub_con .sub_con02 .company div ul li:nth-child(-n+3) {border-bottom:1px solid #e5e5e5;} .sub_con .sub_con02 .company div ul li a {display:block; width:100%; height:100%; padding-left:68px;font-size:14px;} .sub_con .sub_con02 .company div ul li p {position:relative; top:50%; transform:translateY(-50%);} .sub_con .sub_con02 .company div ul li.company01 {background-image:url(../images/ico/ico_ico01.png);} .sub_con .sub_con02 .company div ul li.company02 {background-image:url(../images/ico/ico_ico02.png);} .sub_con .sub_con02 .company div ul li.company03 {background-image:url(../images/ico/ico_ico03.png);} .sub_con .sub_con02 .company div ul li.company04 {background-image:url(../images/ico/ico_ico04.png);} .sub_con .sub_con02 .company div ul li.company05 {background-image:url(../images/ico/ico_ico05.png);} .sub_con .sub_con02 .company div ul li.company06 {background-image:url(../images/ico/ico_ico06.png);} .sub_con .sub_con02 .company div ul li.company01:hover {background-image:url(../images/ico/ico_ico01_on.png);} .sub_con .sub_con02 .company div ul li.company02:hover {background-image:url(../images/ico/ico_ico02_on.png);} .sub_con .sub_con02 .company div ul li.company03:hover {background-image:url(../images/ico/ico_ico03_on.png);} .sub_con .sub_con02 .company div ul li.company04:hover {background-image:url(../images/ico/ico_ico04_on.png);} .sub_con .sub_con02 .company div ul li.company05:hover {background-image:url(../images/ico/ico_ico05_on.png);} .sub_con .sub_con02 .company div ul li.company06:hover {background-image:url(../images/ico/ico_ico06_on.png);} .sub_con .sub_con02 .sns {position:relative; width:440px; padding:25px 30px; background:#dedfe0;margin-right:20px;} .sub_con .sub_con02 .sns .txt {margin-top:20px;} .sub_con .sub_con02 .sns .txt a:before {content:''; position:absolute; top:11px; left:16px; width:37px; height:37px; background-repeat:no-repeat; background-position:center; background-size:100%;} .sub_con .sub_con02 .sns .txt .top:before {background-image:url(../images/ico/ico_sns01.png);} .sub_con .sub_con02 .sns .txt .btm:before {background-image:url(../images/ico/ico_sns02.png);} .sub_con .sub_con02 .sns .txt a {display:block; position:relative; width:100%; height:60px; padding-left:62px; line-height:60px; background:#fff;} .sub_con .sub_con02 .sns .txt a p {width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .sub_con .sub_con02 .sns .txt a:hover:after {content:''; position:absolute; top:0; left:0; width:98%; height:83%; border:5px solid #3b5998;} .sub_con .sub_con02 .sns .txt a + a {margin-top:20px;} .sub_con .sub_con02 .sns .link {position:absolute; top:25px; right:30px;} .sub_con .sub_con02 .sns .link a {display:inline-block; width:37px; height:37px; text-indent:-9999px; background-repeat:no-repeat; background-position:center; background-size:100%;} .sub_con .sub_con02 .sns .link01 {background-image:url(../images/ico/ico_sns01.png);} .sub_con .sub_con02 .sns .link02 {margin-left:4px; background-image:url(../images/ico/ico_sns02.png);} .sub_con .sub_con02 .board {position:relative; padding:0;} .sub_con .sub_con02 .board .tit {position:absolute; top:0; left:0; width:100%; height:50px; padding-left:30px; line-height:50px; background:rgba(0,0,0,0.5);} .sub_con .sub_con02 .board .tit h3 {color:#fff;} .sub_con .sub_con02 .board .img_wrap {width:100%; height:100%;} .sub_con .sub_con02 .board .img_wrap p a {display:block; width:100%; height:100%;} .sub_con .sub_con02 .board ul {position:absolute; top:19px; right:30px;} .sub_con .sub_con02 .board ul li {display:inline-block; width:16px; height:16px; border-radius:50%; text-indent:-9999px; background:rgba(255,255,255,0.5); cursor:pointer; transition:background .2s ease;} .sub_con .sub_con02 .board ul li + li {margin-left:6px;} .sub_con .sub_con02 .board ul li:hover , .sub_con .sub_con02 .board ul li.on {background:#3fabee;} .sub_con .sub_link:after {content:''; display:block; clear:both;} .sub_con .sub_link {width:100%; padding:16px; background:#fff;} .sub_con .sub_link li {float:left; width:12.5%; border:1px solid #e5e5e5; border-right:0; text-align:center;} .sub_con .sub_link li:last-child {border-right:1px solid #e5e5e5;} .sub_con .sub_link li a:hover {color:#fff; background:#3150a7;} .sub_con .sub_link li a {display:block; width:100%; height:100%; padding:16px 0; color:#4b4b4b; font-size:18px; font-weight:500; transition:background .2s ease;} .sub_con .sub_link li p:before {content:''; display:block; width:80px; height:80px; margin:0 auto 9px; border-radius:50%; background-color:#e5e5e5; background-position:center; background-repeat:no-repeat;} .sub_con .sub_link li p.ico01:before {background-image:url(../images/ico/ico_sub_m01.png);} .sub_con .sub_link li p.ico02:before {background-image:url(../images/ico/ico_sub_m02.png);} .sub_con .sub_link li p.ico03:before {background-image:url(../images/ico/ico_sub_m03.png);} .sub_con .sub_link li p.ico04:before {background-image:url(../images/ico/ico_sub_m04.png);} .sub_con .sub_link li p.ico05:before {background-image:url(../images/ico/ico_sub_m05.png);} .sub_con .sub_link li p.ico06:before {background-image:url(../images/ico/ico_sub_m06.png);} .sub_con .sub_link li p.ico07:before {background-image:url(../images/ico/ico_sub_m07.png);} .sub_con .sub_link li p.ico08:before {background-image:url(../images/ico/ico_sub_m08.png);} /* .brand_roll:after {content:''; display:block; clear:both;} .brand_roll {padding:45px 0;} .brand_roll ul:after {content:''; display:block; clear:both;} .brand_roll ul {float:right;} .brand_roll ul li {float:left; width:173px; height:48px; border:1px solid #e5e5e5; overflow:hidden; transition:border .2s ease;} .brand_roll ul li:hover {border:1px solid #494949;} .brand_roll ul li + li {margin-left:10px;} .brand_roll ul li img {width:100%;} .brand_roll .ctrl {float:left; padding-top:8px;} .brand_roll .ctrl a {display:inline-block; width:20px; height:35px; text-indent:-9999px; background-repeat:no-repeat; background-size:100%;} .brand_roll .ctrl .ctrl01 {background-image:url(../images/ico/ico_slide_left02.png);} .brand_roll .ctrl .ctrl02 {margin:0 10px; background-image:url(../images/ico/ico_slide_pause.png);} .brand_roll .ctrl .ctrl03 {background-image:url(../images/ico/ico_slide_right02.png);} .brand_roll .ctrl .ctrl04 {margin-left:15px; background-image:url(../images/ico/ico_plus05.png);} */ .brand_roll .ctrl {width:190px;margin-left:40px;} .brand_roll .ctrl ul{display:flex;} .brand_roll .ctrl ul li{width: 42px; height: 42px; border: #dedee3 solid 1px; background-color: #fff; text-align: center; margin-right: 8px; line-height: 37px;} .brand_roll .ctrl ul li a{background-position:center;background-size:16px 30px;} .brand_roll .ctrl a {display:inline-block; width:20px; height:35px; text-indent:-9999px; background-repeat:no-repeat; background-size:100%;} .brand_roll .ctrl .ctrl01 {background-image:url(/images/ico/ico_slide_left02.png);} .brand_roll .ctrl .ctrl02 {background-image:url(/images/ico/ico_slide_pause.png);} .brand_roll .ctrl .ctrl05 {background-image:url(/images/ico/ico_slide_stop.png);} .brand_roll .ctrl .ctrl03 {background-image:url(/images/ico/ico_slide_right02.png);} .brand_roll .ctrl .ctrl04 {background-image:url(/images/ico/ico_plus05.png);} .brand_roll .wrapper{display:flex;align-items:center;} .brand_roll ul li:hover {border:1px solid #494949;} .bx-viewport{height:90px !important} .bxslider{border:1px solid #eee;padding:20px;} .bxslider li{width:180px !important;margin-right:20px;border:1px solid #eee;} .bx-controls-direction{display:none;} .brand_roll .scroll {width:calc(100% - 230px); overflow:hidden; overflow-x:auto; overflow-y:hidden; white-space:nowrap;} /************************************************************************************************************************************************************************************************************************************************************************************************/ @media all and (max-width:1419px){ .wrapper {width:auto; padding:0 20px;} .visual_wrap {background-position: center top;} .sub_contents_wrap{display:block;} .contents01{margin-right:0} .contents02{margin:0 0 20px 0;width:100%;height:auto;} .sub_con .notice{width:70%;} /*3대분야*/ .three_con .tit span {font-size:14px;} .three_con .three_link {width:calc(100% - 290px);margin-left:20px;} .three_con .three_link > div {width:32.33%; margin-right:1.5%;} .three_con .three_link > div p{font-size:14px;} .sub_con {height:auto;} .sub_con .video {width:30%; height:auto;} .sub_con .video .ctrl_box .progress {bottom:40px;} .sub_con .sub_link li {width:25%} .sub_con .sub_link li:nth-child(4n) {border-right:1px solid #e5e5e5;} .sub_con .sub_link li:nth-child(-n+4) {border-bottom:0;} .sub_con .sub_con02 > div {width:auto;} .sub_con .sub_con02 .company {width:100%;} .sub_con .sub_con02 .sns {width:calc(100% - 359px);} .sub_con .sub_con02 .sns .txt a:hover:after {width:99%;} .brand_roll .scroll ul {width:100%; padding-left:25px;} .brand_roll .scroll ul li {display:inline-block; float:none; overflow:hidden;} .brand_roll .scroll {width:calc(100% - 170px); overflow:hidden; overflow-x:auto; overflow-y:hidden; white-space:nowrap;} .sub_con .webzine {width:100%; height:auto;} .sub_con .photo_news {width:100%; height:auto;} .sub_con .photo_news .news {margin-right:-2%;} .sub_con .photo_news .news > div {width:31.33%; margin-right:2%;} .visual_wrap .visual .ctrl_box{width:100%;left:0;} .brand_roll .ctrl{width:170px;margin-left:0;} } @media all and (max-width:1199px){ .visual_wrap .visual > ul li .txt {left:40px;} .visual_wrap .visual > ul li .txt > strong {margin:7px 0 18px; font-size:32px;} .three_con .tit {width:100%; padding:35px 0 0 40px; margin-bottom:20px;} .three_con .tit span br {display:none;} .three_con .three_link {width:100%;} .three_con .three_link > div{height:230px;} .three_con .three_link > div strong {font-size:20px;} .three_con .three_link > div .more {bottom:30px; width:45px;} } @media all and (max-width:1040px){ .visual_wrap .visual .ctrl_box .main_sub_list li img{width:90px} .visual_wrap .visual > ul li .txt h3{font-size:38px;line-height:38px;} .visual_wrap .visual > ul li .txt > strong{font-size:27px;line-height:27px;height:28%;} .visual_wrap .visual > ul li .txt p span{font-size:16px;} .visual_wrap .wrapper > div {height: 360px;} } @media all and (max-width:980px){ .visual_wrap .wrapper > div {float:none; width:100%; height:auto;} .visual_wrap .visual > ul li{height:360px} .visual_wrap .visual .ctrl_box{bottom:20px} .visual_wrap .visual .ctrl_box .main_sub_list{flex-wrap:wrap} .visual_wrap .visual .ctrl_box .main_sub_list li{width:33.3%;} .visual_wrap .visual .ctrl_box .main_sub_list li:nth-child(1){margin-bottom:20px;} .visual_wrap .visual .ctrl_box .main_sub_list li img{width:80px;} .sub_con .sub_con01{display:block;height:100%} .sub_con .sub_con02{display:block;height:100%} .sub_con .video{width:100%;margin-bottom:20px;} .sub_con .notice{width:100%;} .contents02 .contents02_01{padding:30px} .sub_con .sub_con02 .sns{margin-bottom:20px} .three_con .three_link > div p br {display:none;} .sub_con .sub_link li a {font-size:15px;} .sub_con .sub_con02 .company div ul li {width:50%;} .sub_con .sub_con02 .company div ul li + li {border-bottom:1px solid #e5e5e5;} .sub_con .sub_con02 > div {height:auto;} .sub_con .sub_con02 .sns {width:100%;} .sub_con .sub_con02 .board {width:100%;} .sub_con .sub_con02 .board .img_wrap p img {width:100%;} } @media all and (max-width:880px){ .three_con .wrapper > div > div {float:none; width:100%; height:auto; margin-right:0;} .three_con .tit:before {width:100px; height:102px;} .three_con .tit {padding:30px 0 0 30px; font-size:20px;} .three_con .wrapper > div > div {margin-top:10px;} .three_con .three_link{margin-left:0} .three_con .three_link > div p {margin-top:10px;} .three_con .three_link > div a{padding:30px 20px 40px 30px;} .three_con .three_link > div strong{height:auto} .three_con .three_link > div .more {top:inherit; bottom:20px;} } @media all and (max-width:722px){ .sub_con .notice > ul > li { line-height: 0; padding: 0 5px; } .sub_con .notice > ul > li > a { display:block; } .sub_con .notice > ul > li > a > p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 46px;} .sub_con .notice > ul > li > a > span { float: right; line-height: 46px; } } @media all and (max-width:640px){ .visual_wrap {margin:30px 0 20px;} .visual_wrap .visual > ul li .txt{top:60px;} .visual_wrap .visual > ul li .txt h3{font-size: 28px;line-height: 28px;} .visual_wrap .visual > ul li .txt > strong {font-size:20px;line-height:22px;} .visual_wrap .visual > ul li .txt p span {font-size:15px;} .visual_wrap .visual > ul li { height: 240px; } .visual_wrap .visual .ctrl_box {left:30px; width:calc(100% - 60px);} .visual_wrap .visual .ctrl_box > div {padding-bottom:10px;} .visual_wrap .visual .ctrl_box > div ul li {font-size:18px;} .visual_wrap .visual .ctrl_box > div .ctrl a {width:11px; height:20px;} .visual_wrap .visual .ctrl_box > p {font-size:15px;} .sub_con .video .ctrl_box a{right:20px;font-size:14px;} .sub_con .notice{padding:20px} .sub_con .notice h3{display:block;margin:0 0 5px 0;font-size:20px;} .sub_con .notice > span{display:block;margin-bottom:10px;font-size:14px;} .sub_con .notice > ul > li{line-height:0;padding:0 5px;} .sub_con .notice > ul > li > a > p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height:46px;} .sub_con .notice > ul > li > a > span{float:right;line-height:46px;} .notice_btn{right:20px;font-size:14px;} .sub_con .sub_con02 h3 {font-size:20px;} .sub_con .sub_con02 .company {padding:30px 20px;} .sub_con .sub_con02 .company span {display:block; font-size:14px;} .sub_con .sub_con02 .company div ul li {background-size:29px; background-position:left 13px center;} .sub_con .sub_con02 .company div ul li a {padding-left:55px; font-size:13px;} .sub_con .sub_con02 .sns {padding:25px 20px;} .sub_con .sub_con02 .sns .link {right:20px;} .sub_con .sub_con02 .sns .link a {width:27px; height:27px;} .sub_con .sub_con02 .sns .txt a:before {top:16px; width:27px; height:27px;} .sub_con .sub_con02 .sns .txt a {padding-left:52px;} .sub_con .sub_con02 .sns .txt a p {font-size:15px;} .sub_con .sub_con02 .board ul {top:17px;} .sub_con .photo_news h3 {font-size:20px;} .sub_con .photo_news .news > div {width:48%; margin-bottom:4%;} .sub_con .photo_news .news > div:hover .thumb:after {width:50px; height:51px;} .sub_con .photo_news .news > div div p {font-size:14px;} .sub_con .photo_news > a {top:24px; font-size:14px;} .sub_con .webzine .thumb {float:none; width:100%;} .sub_con .webzine .thumb div div {padding:30px 0 0 30px;} .sub_con .webzine .thumb div div p {font-size:15px;} .sub_con .webzine .thumb div div strong {font-size:20px;} .sub_con .webzine ul {float:none; width:100%; margin-left:-1px;} .sub_con .webzine ul li {float:left; width:33.33%; height:auto; text-align:center;} .sub_con .webzine ul li + li {border-left:1px solid #8ea0d0;} .sub_con .webzine ul li:last-child {border-right:1px solid #8ea0d0;} .sub_con .webzine ul li:nth-child(-n+3){border-bottom: 1px solid #8ea0d0;} .sub_con .webzine ul li:hover:after, .sub_con .webzine ul li.on:after {display:none;} .sub_con .webzine ul li + li {border-top:0;} .sub_con .webzine ul li a {padding:10px 0; font-size:15px;} .sub_con .video .ctrl_box:after {width:60px; height:60px;} .sub_con .sub_link li {width:50%;} .sub_con .sub_link li:nth-child(2n) {border-right:1px solid #e5e5e5;} .sub_con .sub_link li:nth-child(-n+6) {border-bottom:0;} /*브랜드롤링*/ .brand_roll .ctrl {float:none;} .brand_roll .ctrl a {width:15px; height:26px;} .brand_roll .scroll {width:100%;} .brand_roll .scroll ul {padding-left:0;} } @media all and (max-width:605px){ .visual_wrap .visual > ul li .txt {top: 48px;} } @media all and (max-width:600px){ .visual_wrap .visual .ctrl_box .main_sub_list li img{width:70px} } @media all and (max-width:480px){ .visual_wrap{margin:30px 0 50px 0} .visual_wrap .visual .ctrl_box{width:100%;left:0;position:static;margin-top:50px;} .visual_wrap .visual .ctrl_box .main_sub_list li img{width:60px} .visual_wrap .visual .ctrl_box .main_sub_list li a{color:#000;font-size:14px;} .visual_wrap .visual > ul li{height:260px;} .three_con .tit{font-size:18px} .three_con .three_link > div strong{font-size:18px} } @media all and (max-width:440px){ .brand_roll .ctrl{display:none;} .sub_con .sub_con02 .company div ul li{width:100%;} } @media all and (max-width:420px){ .brand_roll .scroll ul li a img{width:100%;height:auto;} } @media all and (max-width:410px){ .visual_wrap .visual > ul li .txt{left:10px} .visual_wrap .visual > ul li .txt h3{font-size:22px;line-height:22px;} .visual_wrap .visual > ul li .txt > strong{font-size:16px;} .visual_wrap .visual > ul li .txt p span{font-size:14;text-align:justify} } @media all and (max-width:375px){ /*비주얼*/ .visual_wrap .visual > ul li .txt p span {display:inline;} .visual_wrap .visual .ctrl_box > div .ctrl {float:none;} .visual_wrap .visual .ctrl_box > div ul {float:none; margin-top:10px;} .sub_con .webzine ul li a {font-size:13px;} .sub_con .webzine .thumb div div {padding:20px 0 0 20px;} .sub_con .sub_con02 .sns .txt a:hover:after {width:98%;} }