@charset "UTF-8";

/* Reset import */
@import url('cs_font_set_min.css');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');


/* css reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-weight:normal;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}html,body{width:100%;height:100%}body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all}body,input,button{color:#222;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic';font-size:16px; font-weight:normal;}img,fieldset,iframe{border:0 none}ul,li{list-style:none}ol{list-style:decimal inside}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}em,address{font-style:normal}input,select{vertical-align:middle}button{cursor:pointer;}hr,legend,caption{display:none}td{vertical-align:middle}a{color:#222;text-decoration:none}a:visited{color:#222}a:hover{text-decoration:none}
@media print{body{color:#222}}
a {-webkit-tap-highlight-color:transparent}
button {margin:0;padding:0;border:0;background:none;border-radius:0}
input {-webkit-appearance:none;-webkit-border-radius:0}
html, body{height:100%}
html{-webkit-text-size-adjust:none}
body{min-width:320px;word-break:keep-all;word-wrap:break-word;white-space:inherit;color:#222; font-weight:normal; width:100%; overflow-x:hidden}
::-webkit-scrollbar {display:none}
.select{ 
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;   
   -webkit-border-radius: 0;  /* Safari 3-4, iOS 1-3.2, Android 1.6- */    
   -moz-border-radius: 0;  /* Firefox 1-3.6 */     
   border-radius: 0;  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
select::-ms-expand {display:none}


.sub_depth_t {height:80px;padding-top:40px}
.sub_depth_t h2 {float:left;font-size:36px;font-weight:bold;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic'}
.sub_depth_t ul {float:right}
.sub_depth_t ul li{display:inline-block;font-size:20px;font-family:'조선중간고딕';text-align:center;margin:0 25px}
.sub_depth_t ul li.active {color:#d3be76}
.sub_depth_t ul li.active a {color:#d3be76}

.titlearea {padding-bottom:40px}
.titlearea h2{color:#d3be76;font-size:32px;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic';line-height:1.2;letter-spacing:-1px}
.titlearea h2 span{color:#444;font-size:38px;}
.titlearea h2 span p {content:'';display:inline-block;width:20px;height:20px;background:url(//image.chosun.com/new_2020/_100/images//ic-linkout-b.png) no-repeat 0 0;background-size:contain;vertical-align:middle;margin:-8px 0 0 12px}



/***** 소개 *****/
iframe {width:100%;height:600px}

section.infor {background:url(img/infor_bg.jpg) no-repeat 0 0;background-size:cover;max-width:100%}
section.infor .sec_inner{padding:60px 0 90px;}
section.infor .text{float:left;width:50%;font-size:20px;color:#555;line-height:1.6;}
section.infor .text .inner {padding-right:20px;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic';}
section.infor .text b {color:#000;font-size:20px;padding:0 5px;background:#9d9fa238;font-weight:700}
section.infor .text.col .inner{padding-left:20px;padding-right:0}
section.infor .text.col p {text-align:right;padding-top:68px;padding-right:30px}
section.infor .text.col p img{width:373px;height:158px;margin:0;vertical-align:middle}

section.char {background:#f7f7f7;max-width:100%}
section.char .sec_inner {padding:40px 0 30px}
section .sec_inner h3.charac {margin-bottom:34px}

.character {padding:0}
.character li {width:80%;padding-left:10%;padding-bottom:40px}
.character dl {padding:0;}
.character dt {font-size:22px;font-family:'조선중간고딕';line-height:1.3;padding:15px 0 12px 0}
.character dd {font-size:18px;line-height:1.6}
.character .desc_thum {float:left;width:158px;padding-right:30px} 
.character .desc_thum img {width:158px;height:158px}

section.modern {background:#fff;max-width:100%;}
section.modern .sec_inner {padding:60px 0 }
section.modern .mo_con {position:relative;}
section.modern .mo_con .mo_left {float:left}
section.modern .mo_con .mo_left img {width:475px;margin:0;padding:5px;border:1px solid #e1e1e1}
section.modern .mo_con .mo_right {position:absolute;width:780px;right:-30px;background:#fff}
section.modern .mo_con .mo_right img {width:524px;padding-left:130px}
section.modern .mo_con .mo_right .motxt {margin:30px 0 0 30px}
section.modern .mo_con .mo_right .motxt li {font-size:18px;margin-top:10px;line-height:1.8;padding-left:15px;background:url('img/icon_dot.png') no-repeat 0 15px}

section.newsarea {background:#f7f7f7;max-width:100%}
section.newsarea .sec_inner {padding:60px 0 50px}
section.newsarea .nlist li {width:100%;float:left;padding-bottom:40px}
section.newsarea .nlist dl {margin:0}
section.newsarea .nlist dt {color:#111;font-size:26px;padding-top:10px;letter-spacing:-0.05em}
section.newsarea .nlist dt a {color:#111;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic'}
section.newsarea .nlist dd.txt {color:#444;font-size:18px;padding:10px 0;line-height:1.6}
section.newsarea .nlist dd.sub {color:#888;font-size:17px;line-height:1.8}
section.newsarea .nlist dd.sub span {color:#d6d6d6;font-size:15px;padding:0 10px;vertical-align:1px}
section.newsarea .nlist dt .ic_news {position:relative;display:inline-block;margin-left:15px;border:1px solid #396dbb;border-radius:50px;height:27px;box-sizing:border-box;vertical-align:-6px}
section.newsarea .nlist dt .ic_news a {color:#396dbb;font-size:13px;padding:0 12px 0 32px;vertical-align:top;line-height:2}
section.newsarea .nlist dt .ic_news:before{content:"";display:block;position:absolute;top:23%;width:15px;height:13px;margin-left:10px;background:url(img/ic_news.png) no-repeat}
section.newsarea .nlist .desc_thum {float:left;position:relative;display:inline-block;width:370px;height:190px;}
section.newsarea .nlist .desc_thum a {overflow:hidden;display:inline-block;line-height:0;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0}
section.newsarea .nlist .desc_thum img{width:330px;height:190px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0}
section.newsarea .nlist .desc_thum img:hover {transform:scale(1.2);-o-transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-ms-transform:scale(1.2)}




/*멍텅구리 타임라인*/
#section02Id {overflow:hidden;position:relative;height:600px;background:#000}
#section02Id .sec_inner {padding-left:0}
#section02Id .sec_inner h3 {position:absolute;left:320px;padding-top:50px;line-height:0.8;z-index:99}
#section02Id .sec_inner h3 span p {color:#d3be76;font-size:32px}
#section02Id .sec_inner h3 span a {display:inline-block;color:#fff;font-size:38px}
#section02Id .sec_inner h3 span a::after {content:'';display:inline-block;width:20px;height:20px;background:url(//image.chosun.com/new_2020/_100/images//ic-linkout-w.png) no-repeat 0 0;background-size: contain;vertical-align:middle;margin:-5px 0 0 9px}

.slick-list {overflow:visible}
.slider_slick_box {position:relative!important; overflow:hidden;}
.slider_slick_box .slider_slick_nav {position:absolute;top:150px;left:320px;}
.slider_slick_nav .slick-list.draggable {max-width:1280px}
.slider_slick_box .button_controls{position:absolute; bottom:80px; left:320px; width:88px; height:44px; z-index:999}
.slider_slick {position:relative; /*width:1920px; */height:620px;  overflow: hidden;}
.slider_slick .bg_gra { position:absolute; top:0; left:0; right:0; width:100%; height:100%; background: #000; opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */}

.slick-track {}
.slider_container {position:relative}
.slider_container .thumb_img {float:left;margin-right:40px}
.slider_container .thumb_img img {width:490px;height:275px;border:10px solid #d6c899}
.slider_container .txt_area {float:left;width:510px}
.slider_container .txt_area .date {display:block;font-family:'Playfair Display', serif;font-weight:700;font-size:68px;color:#d3be76;margin-bottom:5px;line-height:1;}
.slider_container .txt_area .date .counter {font-family:'Playfair Display', serif;font-weight:700;font-size:68px;color:#d3be76}
.slider_container dl {}
.slider_container dl dt{font-weight:bold;font-size:36px;padding-top:20px;color:#fff;line-height:1.5}
.slider_container dl dt a {color:#fff}
.slider_container dl dd.read {font-size:16px;line-height:1.53;padding-top:10px}
.slider_container dl dd.read a {color:#fff}
.slider_container dl dd.rel_art {font-weight:bold;font-size:20px;padding-top:30px;color:#d3be76}


/* slick button */
.fade_slick_box .button_controls{position:absolute;top:470px;left:870px;width:88px;height:44px}
.button_controls button {float:left;width:44px;height:44px;-webkit-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out;}
.button_controls button.prev{background:url(//image.chosun.com/new_2020/_100/images/arrow_prev.png) no-repeat 0 0;font-size:0;background-size:100%;left:31%}
.button_controls button.prev:hover{transform: translateX(-8px); -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -ms-transform: translateX(-8px); -o-transform: translateX(-8px); }
.button_controls button.next{background:url(//image.chosun.com/new_2020/_100/images/arrow_next.png) no-repeat 0 0;font-size:0;background-size:100%;left:33%}
.button_controls button.next:hover{transform: translateX(8px); -webkit-transform: translateX(8px); -moz-transform: translateX(8px); -ms-transform: translateX(8px); -o-transform: translateX(8px); }








/***** 의의 *****/
section.serial {background:#fff;max-width:80%}
section.serial .sec_inner {padding:60px 0 60px}
section.serial dl {width:100%;padding:0}
section.serial dl dt.datatit {color:#c8b05f;font-size:46px;padding-top:80px;font-weight:bold;font-family:'Playfair Display', serif;letter-spacing:-1.8px;text-decoration:overline}
section.serial dl dt.subtit {color:#353540;font-size:56px;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic'}
section.serial dl dd.tit {color:#c8b05f;font-size:42px;font-family:'Playfair Display', serif;padding:100px 0 10px;font-weight:700}
section.serial dl dd.txt {color:#d8d8e3;font-size:20px;line-height:1.5;padding:30px 80px 50px;background:#46464f;font-weight:normal}
section.serial dl dd.txt b {color:#fff;font-size:22px;}
section.serial .desc_thum {float:left;width:460px;display:flex;justify-content:center;align-items:center} 
section.serial .desc_thum img {width:350px;height:580px}
section.serial dl dt p.clamp1 {content:'';display:inline-block;width:12px;height:19px;background:url(img/icon_clamp1.png) no-repeat 0 0;background-size:contain;vertical-align:middle;margin:-30px 5px 0 0}
section.serial dl dt p.clamp2 {content:'';display:inline-block;width:12px;height:19px;background:url(img/icon_clamp2.png) no-repeat 0 0;background-size:contain;vertical-align:middle;margin:20px 0 0 5px}

section.study {background:#f7f7f7;max-width:100%;}
section.study .sec_inner {padding:60px 0;width:80%}
section.study ol {width:100%;padding:0;margin-bottom:30px}
section.study ol h2 {color:#222;font-size:20px;line-height:1.4;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic'}
section.study ol li {font-size:19px;margin-top:10px;line-height:1.5;padding-left:15px;background:url('img/icon_dot.png') no-repeat 0 13px}
section.study ol li span {color:#cbc094;font-size:10px;padding:0 10px;vertical-align:4px}

section.v1 {background:#f7f7f7;max-width:100%}
section.v1 .sec_inner {width:80%}

section.create {max-width:100%}
section.create .sec_inner {width:80%;padding:60px 0}
section.create .imgbox {display:flex;justify-content:center;align-items:center;}
section.create .imgbox img {width:1010px;height:330px}
section.create  cite {font-size:16px;padding:0;display:flex;justify-content:center;align-items:center;line-height:2;text-decoration:none;font-style:normal}
section.create p {font-size:20px;font-family:'조선중간고딕';padding:0 30px 30px 10px;line-height:1.5;}
section.create ol {width:100%;padding:0;margin-top:30px}
section.create ol li {color:#222;font-size:20px;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic';margin-bottom:25px;line-height:1.5;padding-left:15px;background:url('img/icon_dot.png') no-repeat 0 13px}
section.create ol li p {font-size:18px;padding:7px 0 0 20px;line-height:1.5;font-family:none;font-weight:normal}
section.create dl {max-width:96%;margin:2% 2%;padding:20px;margin-top:30px;background:#46464f}
section.create dl dt {color:#fff;font-size:24px;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic'}
section.create dl dd {color:#e1e1e1;font-size:20px;padding-top:15px;line-height:1.5}







/***** 근대사 *****/
.row_left .inner dl.art_title1 {margin:32px 0 22px 0}
.row_left .inner dl.art_title1 dd{font-size:20px;font-family:'조선중간고딕';color:#e6cf70}
.row_left .inner dl.art_title1 dt {font-size:34px;font-family:'조선중간고딕';color:#fff;padding-top:5px}
.row_left .inner .paper_img_t {width:100%;height:70%;text-align:center}
.row_left .inner .paper_img_t img{max-width:100%;height:70%}
.row_left .inner.series .paper_img_t {float:initial}
.row_left .inner.series .paper_img_t {float:initial;width:100%;height:100%;margin:0}
.row_left .inner.series .paper_img_t img {width:96%;border:8px solid #fff}

.button_controls button {width:44px; height:44px;-webkit-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out;}
.button_controls button.prev{background:url(//image.chosun.com/new_2020/_100/images/arrow_prev.png) no-repeat 0 0; font-size:0; background-size:100%; left:31%;}
.button_controls button.prev:hover{ transform: translateX(-8px); -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -ms-transform: translateX(-8px); -o-transform: translateX(-8px); }
.button_controls button.next{background:url(//image.chosun.com/new_2020/_100/images/arrow_next.png) no-repeat 0 0; font-size:0; background-size:100%; left:33%;}
.button_controls button.next:hover{ transform: translateX(8px); -webkit-transform: translateX(8px); -moz-transform: translateX(8px); -ms-transform: translateX(8px); -o-transform: translateX(8px); }

#panorama {clear:both;width:100%;margin-top:2px;padding:0;text-align:center;}
#panorama li {margin:0;padding:0}
#panorama li dl dt {width:100%;}
#panorama li dl dd {color:#fff;padding:20px 10px}

.row_right {display:table-cell;vertical-align:top;width:57%;padding-top:60px;background:#f7f7f7}
.row_right .inner .mor_tit{color:#b4a772;font-size:20px;font-family:'조선중간고딕';font-weight:bold;text-decoration:overline;padding-bottom:15px}
.row_right .inner .mor_tit a {display:inline-block;margin-right:40px}
.row_right .inner .subtxtbox {font-size:18px;padding:15px 10px 15px 20px;font-family:'조선중간고딕', '맑은 고딕', 'Malgun Gothic';line-height:1.6;background:#dcdcdc}

ol.subtext {margin-top:30px}
ol.subtext h2 {font-size:18px;font-family:'조선중간고딕';}
ol.subtext li {font-size:17px;margin-top:10px;line-height:1.6;padding-left:15px;background:url('img/icon_dot.png') no-repeat 0 11px}
ol.subtext li span {color:#b4a772;font-size:11px;padding:0 10px;vertical-align:3px}
ol.subtext li.tt {color:#717066;padding-top:15px;font-size:20px;line-height:1.5;font-family: "Gowun Batang", serif;background:url('');letter-spacing:-0.04em}
ol.subtext li.tt p {color:#53524d;font-size:16px;text-align:right;padding-right:20px;line-height:2}
ol.subtext li p {padding:5px 0 0 0;font-size:16px;font-family:'조선중간고딕';font-weight:bold}
ol.subtext li.noic {background:url('') no-repeat 0 0}




/*근대사상세*/
.row_left .inner .paper_img_t2 {width:100%;height:100%;text-align:center}
.row_left .inner .paper_img_t2 img{width:100%; height:100%}
.row_left .inner.series .paper_img_t2 {width:100%;text-align:center}
.row_left .inner.series .paper_img_t2 img {height:100%;border:10px solid #fff}
.row_left { padding: 30px 70px 10px 0;}
.row_left .inner .paper_img_t2 {width:100%;height:157px}
.row_left .inner .paper_img_t2 img {max-width:100%;height:157px}
.row_left .inner dl.art_title {margin:20px 0 12px 0;}
.row_left .inner dl.art_title dd {font-size:15px;font-family:HelveticaNeue,AppleSDGothicNeo}
.row_left .inner dl.art_title dt {font-size:20px;font-family:HelveticaNeue,AppleSDGothicNeo;padding-top:0px}
.row_left .inner button.btn_st_view {font-size:14px;padding: 8px 12px 6px;font-family:HelveticaNeue,AppleSDGothicNeo;font-weight:bold}
.row_left .inner button.btn_st_view::before {margin-right:6px;}
.row_left .inner.series .paper_img_t2 {float:initial}
.row_left .inner.series .paper_img_t2 {float:initial;width:100%;height:100%;margin:0}
.row_left .inner.series .paper_img_t2 img {width:96%;border:8px solid #000}
.row_left .inner.series p {margin:10px 0 30px 10px}




/* slick css */
.fade_slick_box {position:relative;margin-top:30px;padding-left:319px;padding-bottom:77px}
.fade_slick_inner {}
.fix_tit {position:absolute;top:-20px;left:413px}
.fix_tit .date {display:block; font-family:'Playfair Display', serif;font-weight:700;font-size:52px;color:#d3be76;text-decoration:overline;margin-bottom:12px;padding:60px 0 0 40px;letter-spacing:-1px}
.fix_tit .slider_tit{position:relative;display:inline-block;font-family:'Playfair Display', serif;font-weight:bold;font-size:46px;color:#000;letter-spacing:-1px;padding-left:40px}
.fix_tit .slider_tit:after {content:'';position:absolute;top:44%;right:-113px;width:100px;height:2px;background:#222}
.fix_tit dl {display:block;padding:0 0 0 40px;}
.fix_tit dl dt {color:#d3be76;font-size:32px;font-weight:bold;padding:30px 0 5px 0}
.fix_tit dl dd {color:#222;font-size:18px;line-height:1.5}
.fix_tit dl dd b {font-weight:700;line-height:2;}
.img_area {float:left;width:420px;box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);}
.img_area img{max-width:420px}







/***** 만화보기 *****/
section.comics {background:#f7f7f7;max-width:100%}
section.comics .sec_inner {padding:5px 0 30px}
main {display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width: ;box-sizing:border-box;}

.container {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
.container > div {background-color: ;text-align : center;margin: 10px;padding: 5px;flex: 1 1 calc(50%-20px); /* For 3 columns */}

.grid-item {background:#fff;display:flex;padding:15px;border-radius:5px;border:1px solid #cccac3;cursor:pointer}
.grid-item-list {max-width:150px;background:#f1b8ff;color: black;font-family: Helvetica, Arial, sans-serif;font-size: 18px;display: flex;justify-content: center;align-items: center;padding: 5px;border-radius: 50px;cursor: pointer; /* Indicates that the element is clickable */transition: background-color 0.3s; /* Smooth transition for hover effect */}

.grid-container-in {display:grid;grid-template-columns:30% 70%;gap:0;width:100%;max-width:100%;}
.grid-container {display: grid;grid-template-columns: 50% 50%;gap: 4px; width: 100%; max-width: 100%;}

.grid-item-in {overflow:hidden;position:relative;display:inline-block;width:156px;height:156px}
.grid-item-in a {overflow:hidden; display:inline-block;border:3px solid #dfd5ac;line-height:0; border-radius: 90px; -webkit-border-radius: 90px; -moz-border-radius: 90px; -ms-border-radius: 90px; -o-border-radius: 90px;}
.grid-item-in img{width:150px;height:150px;-webkit-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; border-radius: 90px; -webkit-border-radius: 90px; -moz-border-radius: 90px; -ms-border-radius: 90px; -o-border-radius: 90px;}
.grid-item-in img:hover {transform:scale(1.2); -o-transform:scale(1.2); -moz-transform:scale(1.2); -webkit-transform:scale(1.2); -ms-transform:scale(1.2);}

.div-box {margin:5px;padding:10px 0;}
.div-box h2 {font-size:26px;font-family:'조선중간고딕';}
.div-box h2 cite {color:#c1ad5b;padding:0 10px;font-family:'Playfair Display', serif;font-weight:bold;font-style:normal}
.div-box p {color:#555;font-size:17px;font-family:'조선중간고딕',;line-height:1.5;margin:10px 0 0 50px;letter-spacing:-0.5px}

.img-tit-1 {width:280px;height:auto;border-radius:5px;margin:20px 0 35px 0}
.img-tit-2 img {width:280px;height:auto;border-radius:5px;margin:0 0 15px 0}
.img-tit-2 p {color:#444;font-size:18px;text-align:center;line-height:1.6}
.img-tit-2 p button {font-family:'조선고딕';color:#8f7c36;font-size:15px;padding:7px 20px;border:1px solid #c1b897;border-radius:20px;margin:10px 0}
.img-tit-2 p button:before {content:'';display:inline-block;width:6px;height:10px;background:url(img/icon_arrow.png)no-repeat 0 0;vertical-align:0px;margin-right:6px}
.img-tit-2 p button:hover {background:#fff}
.img-tit-2 p button cite {color:#615e52;font-style:normal}



.title-area {position:sticky;top:0;width:100%;background-color:white;border:1px solid red;display:flex;justify-content:center;align-items:center}
.no-download {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}

.grid-container-list {display:grid;grid-template-columns:15% 35% 50%;gap:2px;width:100%;max-width:100%}
.detail_list_area {display:grid;grid-template-columns:33% 33% 33%;gap:4px;width:100%;max-width:100%}

.detail_list {overflow:hidden;position:relative;display:inline-block;width:110px;height:110px}
.detail_list a {overflow:hidden; display:inline-block;border:5px solid #dfd5ac;line-height:0; border-radius: 90px; -webkit-border-radius: 90px; -moz-border-radius: 90px; -ms-border-radius: 90px; -o-border-radius: 90px;}
.detail_list img{width:100px; height:100px;-webkit-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; border-radius: 90px; -webkit-border-radius: 90px; -moz-border-radius: 90px; -ms-border-radius: 90px; -o-border-radius: 90px;}
.detail_list img:hover {transform:scale(1.2); -o-transform:scale(1.2); -moz-transform:scale(1.2); -webkit-transform:scale(1.2); -ms-transform:scale(1.2);}

.div-box-num {color:#cebe7f;font-size:32px;font-family:'Playfair Display', serif;display:flex;justify-content:center;align-items:center;margin:10px 15px 10px 10px;padding:10px}

.detail_txt {margin:0;padding-top:10px;text-align:left}
.detail_txt h2 {font-size:24px;line-height:1.5;font-family:'조선중간고딕'}
.detail_txt h2 cite {color:#a89548;font-size:24px;font-family:'Playfair Display', serif;font-weight:bold;font-style:normal}




 /*상세화면-펼쳐보기*/
header {background:;color:#fff;text-align:center;padding:0.5em}
footer {background:#333;color:#fff;text-align:center;padding:1em}        
main.detail {display:flex;flex-direction:column;padding:1em;max-width:850px;margin:auto;border:0px solid red;align-items:center}

.listmore {width:100%;margin:0;padding:0}
.listmore .golist {color:#6d5b16;font-size:15px;width:110px;height:32px;background:#f7f7f7;border:1px solid #c1b897;border-radius:25px}
.listmore .golist:hover {background:#fff}
.listmore p button {display:block;font-size:15px;font-family:'조선고딕';}
.listmore p button::before {content:'';display:inline-block;width:6px;height:10px;background:url(img/icon_arrow.png)no-repeat 0 0;vertical-align:1px;margin-right:6px}

.responsive-button {display:flex;justify-content:center;align-items:center;margin:0.5em}
.button {background:#595441;text-align:center;text-decoration:none;margin:4px 2px;display:inline-block;transition-duration:0.4s;cursor: pointer;border-radius:5px;}
.button1 {background:#8e7822;color:#fff;font-size:16px;padding:10px 25px}
.button5 {background:#c1bba3;font-size:16px;padding:10px 25px}
.button5:hover {background:#8e7822;color:#fff}
.button5:hover a {color:#fff}
.no-down {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;user-drag:none;-webkit-user-drag:none}  


.flex-container {display:flex;flex-direction:row;gap:1em;margin-bottom:1em}

.image-container {flex:1;display:flex;align-items:center;justify-content:center}
.image-container img {max-width:100%;height:auto;border:10px solid #fff}

.grid-container_d {flex:1;display:grid;grid-template-columns:repeat(1, 1fr);gap:1em}

/*
.grid-item {justify-content:center;align-items:center;border:0px solid #ccc}
.grid-item .sum {padding:1em;text_align:left;width:90%;background-color:#f0f0f0;border-radius:2px;box-shadow:1px 2px 4px rgba(0, 0, 0, 0.3)}
.grid-item .word {padding:1em;border:none;text_align:left;width:90%}
.grid-item .title {background-color:transparent;text_align:left;border:none}
*/
.grid-item_d {justify-content:center;align-items:center;margin-left:10px}
.grid-item_d dl.first{height:185px}
.grid-item_d dl.firstjour{height:145px}
.grid-item_d dl {height:320px;margin-bottom:10px}
.grid-item_d dl dd {font-size:18px;padding:0;font-family:'조선중간고딕',;letter-spacing:-1px;text-align:left;background:#e8e8e8;border-radius:8px;}
.grid-item_d dl dd.tx1 {width:85%;padding:15px 20px;line-height:1.4;margin-top:5px}
.grid-item_d dl dd.tx2 {width:50%;padding:20px 30px;margin-top:5px}
.grid-item_d dl dt {color:#9a8325;font-size:18px;margin-top:20px}

.speakscroll {padding:0;height:320px;overflow:auto}
.speakscroll {scrollbar-color: #d6d1bb #f7f7f7;scrollbar-width:thin}
.speakscroll.jour {height:340px;overflow:auto}

.grid-item_j {justify-content:center;align-items:center;margin-left:10px} /*기자생활 1화때-6칸일때*/
.grid-item_j dl.firstj {height:165px}
.grid-item_j dl {height:290px;margin-bottom:10px}
.grid-item_j dl dd {font-size:18px;font-family:'조선중간고딕',;text-align:left;background:#e8e8e8;border-radius:8px;}
.grid-item_j dl dd {width:85%;padding:15px 20px;margin-top:5px;line-height:1.4;letter-spacing:-1px;}
.grid-item_j dl dt {color:#9a8325;font-size:18px;margin-top:20px}


.three-column {display:flex;width:100%;margin-top:30px;justify-content:space-between;align-items:center;}
.three-column .column {background:#e1e1e1;padding:10px;margin:1px;border-radius:5px;flex:2;cursor:pointer}

.page-start {text-align:left}
.page-center {text-align:center}
.page-end {text-align:right} 

.nav-arrow {position:fixed;top:50%;transform:translateY(-50%);padding:0.5em;cursor:pointer;z-index:1000;font-size:5em}
.nav-arrow img {width:34px}
.nav-arrow img:hover {transform: scale(1.1, 1.1); transition-duration: 0.4s;}
.nav-arrow.left {left:calc(50% - 571px); /* main의 중앙에서 좌측 끝 */}
.nav-arrow.right {right: calc(50% - 571px); /* main의 중앙에서 우측 끝 */}   

.responsive-text {width:100%;max-width:800px;text-align:left;padding:0.5em 1em 0.5em 2em;}
.responsive-text p strong {line-height:1.5em;color:red;font-weight:normal;/*font-weight:normal;font-weight:bold;font-weight:lighter;font-weight: bolder;*/}
.responsive-text .tit-board {font-size:1.1rem;color:black;font-weight:bold;line-height:2em;box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);border-radius:4px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);padding:5px}       
    
.summary_txt {width:92%;max-width:700px;background:#ececec;text-align:left;margin-top:0;padding:10px 15px;border-radius:5px;}
.summary_txt ol {margin:10px 0 0 20px;padding:0}
.summary_txt ol h2 {font-weight:bold;line-height:2}
.summary_txt ol li {color:#444;font-size:16px;line-height:1.8;padding-left:15px;background:url('img/icon_arrow_de.png') no-repeat 0 10px}
.summary_txt ol li b {color:#b49511;font-weight:bold;text-decoration:underline}



/*상세화면-겹쳐보기*/
header {width:100%;background:#333;color:#fff;text-align:center;padding:10px 0}
footer {width:100%;background:#333;color:#fffe;text-align:center;padding:10px 0}
main.overlap {padding-top:0;border:0px solid red;align-items:center}

.main-content {width:90%;max-width:750px;background-color:;color:black;display:flex;justify-content:center;align-items:center;border-radius: 5px;box-shadow:1px 1px 4px rgba(0, 0, 0, 0.5);padding:10px;border:0px solid red;margin:10px auto;height:100%;z-index:1000; /* Ensure it stays above other content */}

.chalkboard {width:100%;color:black; /* 글자 흰색 */font-size:16px;position:relative;padding:1px 1px 1px 15px;line-height:1.5em} 
.chalkboard p strong {color:red;} 
.chalkboard .tit-board {font-size:1.1rem;color:black;font-weight:bold;line-height:2em;border-radius:5px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);padding:5px}                      

.fixed-layer {position:absolute;margin:auto;width:250px;text-align:left;background-color:black;color:white;text-align:center;padding:1px 1px 1px 1px;border-radius:15px;z-index:1000;opacity:0.9;object-fit:cover;border:6px solid white;display:none; /* Hide by default */}

.image-container_ov {max-width:770px;position:relative;width:95%;margin:auto;margin-bottom:30px}
.image-container_ov img {display:block;width:100%;/* Make the image responsive */height:auto;}

.control-panel {position:fixed;bottom:100px;right:5px;z-index:2000}
.toggle {position:relative;display:inline-block;width:60px;height:34px}
.toggle input {opacity:0;width:0;height:0}

.slider {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#b49511;transition: .4s;border-radius:34px}
.slider:before {position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background:white;transition:.4s;border-radius:50%}
input:checked + .slider {background:#5e552f}
input:checked + .slider:before {transform:translateX(26px)}

.page-box {width:95%;max-width:850px;border:1px solid red;margin:auto} 
.page-box .three-column {display:flex;justify-content:space-between;width:98%;max-width:850px;align-items:center}
.page-box .three-column .column {background:#e5e5e5;color:black;padding:10px;border-radius:4px;flex:1;cursor:pointer;}

.control-column {width:70%;max-width:800px;display:flex;justify-content:center;align-items:center;margin:auto;position:sticky;bottom:0px; z-index:2000}
.control-column .column {background: ;color:#fff;padding:5px 5px 20px 0;border-radius: 0;flex:1;margin-top:0px;box-shadow:0 4px 8px rgba(0, 0, 0, 0);border:0px solid #333;cursor:pointer;}        

.page-start {text-align:left}
.page-center {text-align:center}
.page-end {text-align:right}

.font-control {position:absolute;top:1px;right:1px;display:flex;gap:5px}
.font-control button {background:#555;color:#fff;border:none;padding:5px 10px;border-radius:5px;cursor:pointer}


.viewBtn {clear:both;width:100%;padding:20px 0 10px;text-align:center}
.viewBtn a {display:inline-block;font-size:16px;padding:10px;color:#555;width:40px;height:40px;border:solid 1px #dfdfdf;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px}
.viewBtn a img {padding-top:10px}
.viewBtn a:hover {color:#222;text-decoration:none;border:solid 1px #222;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;}
.viewBtn a.list {color:#555;width:150px;height:20px;font-size:16px;border:solid 0px #dfdfdf;}
.viewBtn a.list:hover {color:#000;font-weight:bold;}

section.bann {max-width:80%;text-align:center}
section.bann .sec_inner {padding:40px 0}






@media all and (max-width:1280px) {
  body{font-family:HelveticaNeue,AppleSDGothicNeo}
  #section01Id, #section02Id, section.modern{height:auto}
  
  .slider_slick_box {height:100%}

  .img_area { display:initial; float:left; width:248px; margin-right:30px; margin-left:20px;}
  .img_area img {max-width:248px; width:248px; height:410px}
  .fade_slick_box {padding-left: 0}
  .fade_slick_box .button_controls {left:20px; top:auto; bottom:-30px;}
  .img_rotate {display:none;}

  #section02Id .sec_inner {padding:0}
  #section02Id .sec_inner h3 {left:20px; padding-top:50px;}
  
  #section02Id .sec_inner h3 span p {font-size:32px;}
  #section02Id .sec_inner h3 span a {font-size:38px;}
  
  .slider_slick_box .slider_slick_nav {left:20px;top:155px;}
  .slider_container .thumb_img img {width:400px;height:224px}
  .slider_container .thumb_img {float:initial;}
  .slider_container .txt_area {width:auto}
  .slider_container .txt_area .date {font-size:42px;margin-top:10px;}
  .slider_container dl dt{font-size:32px;padding-top:5px;}
  .slider_container dl dd.rel_art {font-size:18px;padding-top:5px;}
  .slider_container dl dd.read {display:none;}
  .slider_slick_box .button_controls {left:20px;bottom:30px;margin-left:0;}
  .slick-slide.slick-current .scale_motion {transform: scale(1.0, 1.0); -ms-transform: scale(1.0, 1.0); -webkit-transform: scale(1.0, 1.0); -moz-transform: scale(1.0, 1.0); -o-transform: scale(1.0, 1.0);}


  section.serial {background:#fff;max-width:80%}
  section.serial .sec_inner {padding:60px 0 60px}
  section.serial dl {width:100%;padding:0}
  section.serial dl dt.datatit {font-size:42px;padding-top:60px}
  section.serial dl dt.subtit {font-size:52px}
  section.serial dl dd.tit {font-size:42px;padding:60px 0 10px;font-weight:700}
  section.serial dl dd.txt {font-size:18px;line-height:1.5;padding:30px 40px 50px;background:#46464f;font-weight:normal}
  section.serial dl dd.txt b {font-size:20px}
  section.serial .desc_thum {width:410px} 
  section.serial .desc_thum img {width:300px;height:500px}

  section.modern .sec_inner {padding:60px 10px}
  section.modern .mo_con .mo_left img {width:400px}
  section.modern .mo_con .mo_right img {width:524px;padding-left:130px}
  section.modern .mo_con .mo_right .motxt li {font-size:17px;line-height:1.6;padding-left:13px;background:url('img/icon_dot.png') no-repeat 0 11px;}

  section.bann img {width:90%}

  .button_controls button.prev:hover,.button_controls button.next:hover {transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0);}

}




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

  h2.search_tit, .sub_depth_t h2 {display:none}
 
  .csHeader{padding-bottom:0}
  .header_area {padding-top:0}
  
  .sub_depth_t {height:35px;padding-top:13px}
  .sub_depth_t ul {float:initial}
  .sub_depth_t ul li {font-size:15px;margin:0 12px}
  .sub_depth_t ul li a {font-weight:bold}
  
  .titlearea {padding-bottom:30px}
  .titlearea h2{font-size:28px}
  .titlearea h2 span{font-size:32px}

  section.infor .sec_inner {padding: 30px 20px 40px;}
  section.infor .text {font-size:17px}
  section.infor .text b {font-size:17px;}  
  section.infor {background:url(img/infor_bg_m.jpg) no-repeat 0 0;background-size:cover;}

  #section02Id .sec_inner h3 span p {font-size:28px;}
  #section02Id .sec_inner h3 span a {font-size:32px;}
  

  .fade_slick_box {padding-bottom:0}

  .slider_slick {height:640px}
  .slider_container dl dt br{display:none}
  section.modern .art_area .area_left {margin:30px 40px 0 0}
  .tab_area {padding:30px 0}
  .btn_reporter {display:block}
  .btn_reporter img{width:100%;height:auto}
  ul.reporter li {width:25%}
  ul.reporter li a.thumb {width:160px;height:160px}
  ul.reporter li a.thumb img {width:160px;height:160px}

  iframe {width:100%;height:690px}
  section.modern .mo_con .mo_left img {width:330px}
  section.modern .mo_con .mo_right {position:absolute;width:630px;right:0}
  section.modern .mo_con .mo_right img {width:80%;padding-left:80px}
  section.modern .mo_con .mo_right .motxt {margin:30px 0 30px 20px;}
  section.modern .mo_con .mo_right .motxt li {font-size:16px;margin-top:10px;line-height:1.6}

  section.char .sec_inner {padding:40px 0 10px 0;}
  .character li {width:80%;padding-left:10%;padding-bottom:40px}
  .character dl {height:158px}
  .character dt {font-size:20px;font-weight:bold;line-height:1.3;padding:10px 0 12px 0}
  .character dd {font-size:16px;line-height:1.5}
  
  section.serial {max-width:100%}
  section.serial .sec_inner {padding:60px 0 60px}
  section.serial dl dt.datatit {font-size:38px;padding-top:60px}
  section.serial dl dt.subtit {font-size:42px}
  section.serial dl dd.tit {font-size:40px;padding:60px 0 10px;font-weight:700}
  section.serial dl dd.txt {font-size:16px;padding:20px 30px 50px;}
  section.serial dl dd.txt b {font-size:18px;line-height:2;font-family:'조선중간고딕';}
  section.serial .desc_thum {width:410px} 
  section.serial .desc_thum img {width:300px;height:500px}

  section.study .sec_inner {padding:40px 0}
  section.study ol {width:100%;padding:0;margin-bottom:20px}
  section.study ol h2 {font-size:18px;line-height:1.4}
  section.study ol li {font-size:17px;margin-top:10px;line-height:1.5}
  section.study ol li span {font-size:10px;padding:0 10px;vertical-align:4px}

  section.create .imgbox img {width:100%;height:auto}
  section.create cite {font-size:16px;padding-left:15px;line-height:2;text-decoration:none;font-style:normal}
  section.create p {font-size:18px;padding:0 0 20px 10px}
  section.create ol {width:100%;padding:0;margin-top:30px}
  section.create ol li {color:#222;font-size:18px;padding:0;margin-bottom:25px;line-height:1.5;padding-left:13px;background:url('img/icon_dot.png') no-repeat 0 11px}
  section.create ol li p {font-size:17px;padding:5px 0 0 30px;line-height:1.5}
  section.create dl dt {font-size:20px}
  section.create dl dd {font-size:18px}

  section.newsarea .sec_inner {padding:50px 10px 60px}
  section.newsarea .nlist li {padding-bottom:0}
  section.newsarea .nlist dt {font-size:22px;font-weight:700}
  section.newsarea .nlist dd.txt {color:#666;font-size:16px;padding:8px 0;line-height:1.5}
  section.newsarea .nlist dd.sub {color:#999;font-size:16px;line-height:1.6}
  section.newsarea .nlist .desc_thum {float:left;width:290px} 
  section.newsarea .nlist .desc_thum img {width:260px;height:150px}
  section.newsarea .nlist dt .ic_news {margin-left:10px;height:26px;vertical-align:-3px}
  section.newsarea .nlist dt .ic_news a {font-size:12px}

  .toon_area .toon_left {float:left;width:50%;vertical-align:right}
  .toon_area .toon_left img {padding:0 30px}
  .toon_area .toon_right {float:left;width:50%;padding-top:60px}
  .toon_area .toon_right dl dd {font-size:24px}
  .toon_area .toon_right dl dd.tx1 {width:70%;}
  .toon_area .toon_right dl dd.tx3 {width:15%;margin-top:280px}
  .toon_area .toon_right dl dt {font-size:20px}

  .grid-container-in {display:grid;grid-template-columns:45% 55%;gap:0;width:100%;max-width:100%;}
  .grid-container {grid-template-columns: 33% 33% 33%}
  .grid-item-in {width:126px;height:126px}
  .grid-item-in img {width:120px;height:120px}
  .grid-item-in img img {width:120px;height:120px}

  .div-box h2 {font-size:18px}
  .div-box h2 cite {padding-left:0}
  .div-box p {font-size:14px;margin:10px 0 0 0;mtext-overflow:ellipsis;overflow:hidden;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;}

  .detail_list_area {display:grid;grid-template-columns:49% 49%;gap:5px;margin:0 0 0 1%;width:100%;max-width:100%;}
  .detail_list {width:100px;height:100px}
  .detail_list img{width:90px;height:90px}


}




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

  .titlearea h2{font-size:24px}
  .titlearea h2 span{font-size:26px;font-weight:bold;line-height:1.5}
  .titlearea h2 span p {width:16px;height:16px}

  section.infor .text.col p img {width:270px;height:114px}
  section.modern .sec_inner {padding:50px 10px}
  section.modern .mo_con .mo_left {width:100%}
  section.modern .mo_con .mo_left img {width:80%;margin:0 10%;border:1px solid #cacaca}
  section.modern .mo_con .mo_right {position:initial;width:100%;}
  section.modern .mo_con .mo_right img {width:80%;margin:3% 10% 0 10%;padding:0;border:1px solid #cacaca}
  section.modern .mo_con .mo_right .motxt {margin:20px 0 0 10px}
  section.modern .mo_con .mo_right .motxt li {font-size:16px;line-height:1.6}

  .character {padding:0;}
  .character li {width:94%;padding-left:3%;padding-bottom:3%;margin-bottom:5px;overflow:hidden}
  .character li.cmt {padding-bottom:8%}
  .character dl {padding:0}
  .character dt {font-size:20px;font-weight:bold;line-height:1.3;padding:25px 0 12px 0}
  .character dd {font-size:16px;padding-bottom:5px;}

  section.serial .sec_inner {padding:60px 0 60px}
  section.serial dl dt.datatit {font-size:32px;padding-top:50px}
  section.serial dl dt.subtit {font-size:42px}
  section.serial dl dd.tit {font-size:38px;padding:60px 0 10px;text-align:left}
  section.serial dl dd.txt {font-size:16px;padding:20px 30px 50px;}
  section.serial dl dd.txt b {font-size:18px}
  section.serial .desc_thum {width:300px} 
  section.serial .desc_thum img {width:250px;height:415px}

  section.study .sec_inner {width:90%}
  section.study ol {width:100%;padding:0;margin-bottom:20px}
  section.study ol h2 {font-size:16px}
  section.study ol li {font-size:15px;padding-left:13px;background:url('img/icon_dot.png') no-repeat 0 8px}
  section.study ol li span {font-size:8px;padding:0 10px}

  section.newsarea .nlist li {float:left;width:100%;height:115px;margin-bottom:20px}
  section.newsarea .nlist dt a {font-size:20px}
  section.newsarea .nlist dd.txt {display:none}
  section.newsarea .nlist dd.sub {font-size:15px;padding-top:10px;}
  section.newsarea .nlist .desc_thum {float:left;width:220px} 
  section.newsarea .nlist .desc_thum img {width:200px;height:115px}
  section.newsarea {background:#f7f7f7;max-width:100%}
  
  section.create {max-width:100%}
  section.create .sec_inner {width:96%;padding:40px 0;}
  section.create cite {font-size:12px;padding:0}
  section.create p {font-size:15px;padding:0 5px 20px 5px}
  section.create ol {width:100%;padding:0;margin-top:10px}
  section.create ol li {color:#222;font-size:16px;padding-left:13px;background:url('img/icon_dot.png') no-repeat 0 9px}
  section.create ol li p {font-size:15px;padding:5px 0 0 10px}
  section.create ol li span {font-size:8px;padding:0 10px}
  section.create dl {padding:15px;margin-top:20px}
  section.create dl dt {font-size:16px}
  section.create dl dd {font-size:15px}
  
  section.archivetoon .sec_inner {padding:50px 10px 40px;}
  .toon_area .toon_left {width:90%;padding:0 5%}
  .toon_area .toon_left img {width:80%;padding:0 10%}
  .toon_area .toon_right {display:none}
  .toon_area .toon_right dl {display:none}

  section.comics .sec_inner {padding:0px 0 30px}
  .container > div {flex: 1 1 100%; /* For single column on mobile */  }
  .grid-container {grid-template-columns: 100%;}
  .grid-container-in {display:grid;grid-template-columns:40% 60%;gap:0;width:100%;max-width:100%;}
  
  .img-tit-1 {width:220px;margin:0 0 25px 0}
  .img-tit-2 img {width:200px;margin-bottom:10px}
  .img-tit-2 p {font-size:16px;line-height:1.4}
  .img-tit-2 p button {font-size:14px}
  .img-tit-2 p button:hover {background:#fff}

  .div-box-num {font-size:22px;margin:0;padding:0}            
  .grid-container {max-width: 97%;}    

  .grid-container-list {grid-template-columns:15% 40% 45%;gap:2px;}
  
  .detail_list {width:90px;height:90px}
  .detail_list img{width:80px;height:80px}

  .detail_txt h2 {font-size:20px;padding:0}
  .detail_txt h2 cite {font-size:22px}

  /*.grid-container {grid-template-rows: 0% repeat(4, 1fr);}*/
  .flex-container {flex-direction: column;}
  .responsive-text {width: 90%;}

  .grid-item_d {margin:0}
  .grid-item_d dl.first {display:none}  
  .grid-item_d dl.firstjour{display:none}
  .grid-item_d dl {height:auto}
  .grid-item_d dl dd {font-size:16px;margin-bottom:5px}
  .grid-item_d dl dd.tx1 {width:90%;padding:10px 20px}
  .grid-item_d dl dt {font-size:16px;margin:0 0 35px}

  .speakscroll {height:auto}
  .speakscroll.jour {height:auto}

  .grid-item_j dl.firstj {height:auto}
  .grid-item_j dl {height:auto}
  .grid-item_j dl dd {font-size:16px}
  .grid-item_j dl dt {font-size:16px}

  .tit {text-align: center;}     
  .fixed-layer {font-size: 1.1rem;}

  .viewBtn a {width:30px;height:30px}
  .viewBtn a img {padding-top:5px;width:18px}
  .viewBtn a.list {height:15px;font-size:14px}

  iframe {width:100%;height:620px}
  
  section.bann {max-width:90%}
  section.bann .sec_inner {padding:20px 0}
  section.bann img {width:100%}
}



@media all and (max-width:620px) {
  
  .character {padding:0;}
  .character li {width:94%;padding-left:3%;padding-bottom:8%;margin-bottom:5px;overflow:hidden}
  .character li.cmt {padding-bottom:12%}
  .character dl {padding:0}
  .character dt {font-size:18px;font-weight:bold;line-height:1.3;padding:25px 0 12px 0}
  .character dd {font-size:15px;padding-bottom:5px;}

}



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

  .csHeader {padding-bottom:0}
  .btn_search_go {position: absolute; top:28px; right:20px; bottom:initial; font-size:14px;}
  .btn_search_go::before {margin:-3px 4px 0 0}

  section.infor .text {width:100%;padding-bottom:30px}
  section.infor .text .inner, section.infor .text.col .inner{padding:0}
  section.infor .text.col p {text-align:left; padding-top:35px}
  section.infor .text.col p img {width:300px;height:127px}
  
  section.modern .sec_inner {padding-top:40px}

  .fade_slick_box {margin-top:16px; padding-bottom:0}
  .fade_slick .slick-current .img_area {animation-name: slideInLeft;}
  .fix_tit {left:152px; top:-25px;}
  .fix_tit .date {font-size:24px; padding:0; margin-bottom:1px;}
  .fix_tit .slider_tit {font-size:15px; padding:0; letter-spacing: 0}
  .img_area {width:120px; margin-right:10px}
  .img_area img {width:120px; height:200px}

  .fix_tit dl {width:30%;padding:0;background:#eecbcb}
  .fix_tit dl dt {color:#d3be76;font-size:16px;font-weight:bold;padding-top:10px}
  .fix_tit dl dd {color:#222;font-size:13px;line-height:1.5;}
  .fix_tit dl dd b {font-weight:700;line-height:2;}

  section.modern .sec_inner {padding:40px 10px}
  .sec_inner h3 {font-size:24px; padding-top:30px}
  section.modern .sec_inner h3 {padding-top:0}
 
  h2.search_tit {font-size:15px; padding-bottom: 11px;}
  
  #section02Id .sec_inner h3 {padding-top:20px;line-height:1.2}
  #section02Id .sec_inner h3 span p {font-size:20px;}
  #section02Id .sec_inner h3 span a {font-size:24px;}
  #section02Id .sec_inner h3 span a, section.modern .sec_inner h3 span a {font-weight:bold}
  #section02Id .sec_inner h3 span a::after, section.modern .sec_inner h3 span a::after {margin:-2px 0 0 9px;width:15px;height:15px;}

  .fade_slick_box .button_controls {height:40px}
  .button_controls button {width:40px; height:40px;}

  .slider_slick_box {height:450px;}
  .scale_motion {height: 473px!important}
  .slider_container .thumb_img img {width:290px;height:169px;margin-top:10px;border:2px solid #fff;}
  .slider_container dl dt {font-size:20px;padding-top:9px}
  .slider_container dl dt{font-size:18px;padding-top:5px;line-height:1.2;}
  .slider_container dl dt a {font-weight:bold;}
  .slider_container dl dt br{display:none}
  .slider_container .txt_area .date {font-size:24px}
  .slider_container dl dd.rel_art {font-size:15px;font-weight:normal;padding-top:10px}

  .slider_slick {height:473px; width:100%;}
  .slider_slick_box .slider_slick_nav {top:77px}
  .slider_slick_box .button_controls {bottom:30px;}

  iframe {width:100%;height:450px}
  
  section.char .sec_inner {padding:30px 0}
  .character li {width:96%;padding-left:2%;padding-bottom:18%;margin-bottom:5px;overflow:hidden}
  .character li.cmt {padding-bottom:45%}
  .character dt {font-size:17px;font-weight:bold;line-height:1.3;padding:5px 0}
  .character dd {font-size:16px;margin:2px 0;overflow:hidden}
  .character .desc_thum {float:left;width:120px;padding-right:20px} 
  .character .desc_thum img {width:120px;height:120px}

  section.serial .sec_inner {padding:40px 0 0}
  section.serial dl dt.datatit {font-size:28px;padding-left:10px}
  section.serial dl dt.subtit {font-size:38px;padding-left:10px}
  section.serial dl dd.tit {font-size:28px;padding:10px}
  section.serial dl dd.txt {font-size:16px;padding:10px 15px 15px;}
  section.serial dl dd.txt b {font-size:18px;}
  section.serial .desc_thum {width:100%;padding-bottom:10px} 
  section.serial .desc_thum img {width:80%;padding:0 5% 5% 5%;height:auto}
  section.serial dl dt p.clamp1 {margin:-20px 2px 0 0}
  section.serial dl dt p.clamp2 {margin:10px 0 0 2px}
 
  section.newsarea .sec_inner {padding:40px 10px}
  section.newsarea .nlist li {width:100%;height:92px;float:left;margin-bottom:20px;padding-bottom:0;}
  section.newsarea .nlist dt {font-size:18px;padding-top:5px}
  section.newsarea .nlist dt a {font-size:18px;text-overflow:ellipsis;overflow:hidden;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical}
  section.newsarea .nlist dd.txt {color:#666;font-size:16px;padding:8px 0;line-height:1.5}
  section.newsarea .nlist dd.sub {display:none}
  section.newsarea .nlist .desc_thum {float:left;width:190px} 
  section.newsarea .nlist .desc_thum img {width:160px;height:92px}
  section.newsarea .nlist dt .ic_news {display:none}

  .detail_list_area {grid-template-columns:100%}
  .grid-container-list {grid-template-columns:10% 40% 50%;gap:2px;}
  .detail_list {width:90px;height:90px}
  .detail_list img{width:80px;height:80px}

  .detail_txt h2 {font-size:22px;padding:0}
  .detail_txt h2 cite {font-size:22px}

  .row_right .inner .mor_tit{font-size:18px}
  .row_right .inner .subtxtbox {font-size:16px}
 
  ol.subtext h2 {font-size:17px}
  ol.subtext li {font-size:16px;padding-left:11px;background:url('img/icon_dot.png') no-repeat 0 10px}
  ol.subtext li.tt {font-size:15px}
  ol.subtext li.tt p {color:#53524d;font-size:15px;text-align:right;padding-right:20px;line-height:2;}
  ol.subtext li p {color:#666;padding:5px 0;font-size:15px;font-weight:normal;}
  ol.subtext li.noic {background:url('') no-repeat 0 0}

  .grid-item-in {width:106px;height:106px}
  .grid-item-in img {width:100px;height:100px}

  .div-box h2 {font-size:18px;padding:0}
  .div-box h2 cite {padding-top:0}
  .div-box p {-webkit-line-clamp:2}

  .detail_list_area {grid-template-columns:100%}
  .grid-container-list {grid-template-columns:20% 35% 45%;gap:2px;}

  .listmore {margin:0;padding:0;text-align:center}
}